{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/e7c807db-142f-4041-ad38-a25ece3a29e6/demo_generalgraph_sublayoutpipes/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/48b9322f-fdeb-4a1b-ae94-d03a73fc5a92/demo_generalgraph_sublayoutpipes/dependencies/herbox/0d7b758fdc47c7af5db47deeda4d99d4.json","ETag":"0D7B758FDC47C7AF5DB47DEEDA4D99D4","type":"json"}],"sourceCode":{"app.js":"App({\n onLaunch(options) {\n // 第一次打开\n // options.query == {number:1}\n console.info('App onLaunch');\n },\n onShow(options) {\n // 从后台被 scheme 重新打开\n // options.query == {number:1}\n },\n});\n","app.json":"{\"window\":{\"defaultTitle\":\"F6移动端demo\",\"allowsBounceVertical\":\"NO\",\"canPullDown\":\"NO\"},\"pages\":[\"pages/GeneralGraph/sublayoutPipes/index\"]}\n","mini.project.json":"{\n \"enableAppxNg\": true,\n \"component2\": true\n}","package.json":"{\n \"name\": \"f6demo\",\n \"version\": \"1.0.0\",\n \"description\": \"f6demo\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"@antv/f6\": \"^0.0.12\",\n \"@antv/f6-alipay\": \"^0.0.2\",\n \"@babel/runtime\": \"^7.14.0\"\n },\n \"author\": \"\",\n \"license\": \"ISC\"\n}\n","pages/GeneralGraph/sublayoutPipes/data.js":"const data = { nodes: [], edges: [] };\nfor (let i = 0; i < 32; i++) {\n data.nodes.push({\n id: `${i}`,\n label: i < 17 ? `employee-${i}` : `company-${i - 17}`,\n dataType: i < 17 ? 'employee' : 'company',\n style:\n i < 17\n ? { stroke: '#5D7092', fill: '#5D7092', fillOpacity: 0.5 }\n : { stroke: '#5B8FF9', fill: '#5B8FF9', fillOpacity: 0.5 },\n });\n}\ndata.edges = [\n { source: '0', target: '1' },\n { source: '0', target: '2' },\n { source: '0', target: '3' },\n { source: '0', target: '4' },\n { source: '0', target: '5' },\n { source: '0', target: '6' },\n { source: '1', target: '2' },\n { source: '1', target: '3' },\n { source: '1', target: '4' },\n { source: '1', target: '5' },\n { source: '1', target: '6' },\n { source: '2', target: '3' },\n { source: '2', target: '4' },\n { source: '2', target: '5' },\n { source: '2', target: '6' },\n\n { source: '7', target: '8' },\n { source: '8', target: '9' },\n { source: '9', target: '10' },\n\n { source: '11', target: '12' },\n { source: '12', target: '13' },\n { source: '13', target: '14' },\n { source: '14', target: '15' },\n { source: '15', target: '16' },\n { source: '11', target: '14' },\n\n { source: '31', target: '11' },\n { source: '24', target: '4' },\n { source: '23', target: '7' },\n];\n\nconst legendData = {\n nodes: [\n { id: 'employee', label: 'employee', style: { stroke: '#5D7092', fill: '#5D7092' } },\n { id: 'company', label: 'company', style: { stroke: '#5B8FF9', fill: '#5B8FF9' } },\n ],\n edges: [],\n};\n\nexport { data, legendData };\n","pages/GeneralGraph/sublayoutPipes/index.acss":"/* required by usingComponents */","pages/GeneralGraph/sublayoutPipes/index.axml":"<f6-canvas\n width=\"{{width}}\"\n height=\"{{height}}\"\n forceMini=\"{{forceMini}}\"\n pixelRatio=\"{{pixelRatio}}\"\n onTouchEvent=\"handleTouch\"\n onInit=\"handleInit\"\n></f6-canvas>","pages/GeneralGraph/sublayoutPipes/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport { data, legendData } from './data';\n// import fruchtermanLayout from '@antv/f6/dist/extends/layout/fruchtermanLayout';\n/**\n * sublayoutPipes\n */\n\n// 注册布局\n// F6.registerLayout('fruchterman', fruchtermanLayout);\n\nPage({\n canvas: null,\n ctx: null,\n renderer: '', // mini、mini-native等，F6需要，标记环境\n isCanvasInit: false, // canvas是否准备好了\n graph: null,\n\n data: {\n width: 375,\n height: 600,\n pixelRatio: 2,\n forceMini: false,\n },\n\n onLoad() {\n // 同步获取window的宽高\n const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();\n\n this.setData({\n width: windowWidth,\n height: windowHeight,\n pixelRatio,\n });\n },\n\n /**\n * 初始化cnavas回调，缓存获得的context\n * @param {*} ctx 绘图context\n * @param {*} rect 宽高信息\n * @param {*} canvas canvas对象，在render为mini时为null\n * @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native\n */\n handleInit(ctx, rect, canvas, renderer) {\n this.isCanvasInit = true;\n this.ctx = wrapContext(ctx);\n this.renderer = renderer;\n this.canvas = canvas;\n this.updateChart();\n },\n\n /**\n * canvas派发的事件，转派给graph实例\n */\n handleTouch(e) {\n this.graph && this.graph.emitEvent(e);\n },\n\n updateChart() {\n const { width, height, pixelRatio } = this.data;\n\n // 新建F6.legend实例\n // TODO:Ledgend is not a constructor\n const legend = new F6.Legend({\n data: legendData,\n align: 'center',\n layout: 'horizontal', // vertical\n position: 'bottom-left',\n vertiSep: 12,\n horiSep: 24,\n offsetY: -24,\n padding: [4, 16, 8, 16],\n containerStyle: {\n fill: '#ccc',\n lineWidth: 1,\n },\n title: 'Legend',\n titleConfig: {\n position: 'left',\n offsetX: 0,\n offsetY: 12,\n },\n filter: {\n enable: true,\n multiple: true,\n trigger: 'click',\n graphActiveState: 'activeByLegend',\n graphInactiveState: 'inactiveByLegend',\n filterFunctions: {\n a: (d) => {\n if (d.cluster === 'a') return true;\n return false;\n },\n b: (d) => {\n if (d.cluster === 'b') return true;\n return false;\n },\n c: (d) => {\n if (d.cluster === 'c') return true;\n return false;\n },\n d: (d) => {\n if (d.cluster === 'd') return true;\n return false;\n },\n },\n },\n });\n\n // 创建F6实例\n this.graph = new F6.Graph({\n context: this.ctx,\n renderer: this.renderer,\n width,\n height,\n pixelRatio,\n fitView: true,\n fitViewPadding: 40,\n modes: {\n default: ['drag-canvas', 'drag-node'],\n },\n plugins: [legend],\n animate: true,\n nodeStateStyles: {\n activeByLegend: {\n lineWidth: 5,\n strokeOpacity: 0.5,\n stroke: '#f00',\n },\n inactiveByLegend: {\n opacity: 0.5,\n },\n },\n layout: {\n pipes: [\n {\n type: 'circular',\n nodesFilter: (node) => +node.id <= 6,\n center: [(width / 5) * 4 - 30, height / 2],\n radius: width / 10,\n },\n {\n type: 'circular',\n nodesFilter: (node) => +node.id >= 7 && +node.id <= 10,\n center: [width / 20 + 30, (height / 3) * 2],\n radius: width / 20,\n },\n {\n type: 'circular',\n nodesFilter: (node) => +node.id >= 11 && +node.id <= 16,\n center: [width / 20 + 30, height / 3],\n radius: width / 20,\n },\n {\n type: 'grid',\n nodesFilter: (node) => +node.id > 16,\n begin: [width / 10 + 50, 20],\n width: (width / 5) * 3 - 100,\n height: height - 40,\n },\n ],\n },\n });\n\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n },\n});\n","pages/GeneralGraph/sublayoutPipes/index.json":"{\n \"defaultTitle\": \"subgraphLayout\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/GeneralGraph/sublayoutPipes/index.less":"page {\n background-color: #f7f7f7;\n border: 1px solid rgba(0,0,0,0);\n box-sizing: border-box;\n}\n\n.page-section-demo {\n padding: 32rpx;\n}","utils/common.js":"function strLen(str = '') {\n let len = 0;\n for (let i = 0; i < str.length; i++) {\n if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {\n len += 1;\n } else {\n len += 2;\n }\n }\n\n return len;\n}\n\nfunction measureText(text, font) {\n let fontSize = 12;\n if (font) {\n fontSize = parseInt(font.split(' ')[3], 10);\n }\n fontSize /= 2;\n return {\n width: strLen(text) * fontSize,\n };\n}\n\nexport { measureText };\n","utils/context.js":"import { measureText } from './common';\n/**\n * 部分小程序context会缺少函数，补上\n */\nfunction wrapContext(ctx) {\n if (!ctx) return;\n if (!ctx.measureText) {\n ctx.measureText = measureText;\n }\n return ctx;\n}\n\nexport { wrapContext };\n"},"dist":[{"name":"1819ddc76d46ca2335f03443b5c2ac3f.json","size":691682,"url":"https://gw.alipayobjects.com/os/f6/5da65491-3e6e-4a5d-9887-83787adfdbb4/demo_generalgraph_sublayoutpipes/dist/herbox/1819ddc76d46ca2335f03443b5c2ac3f.json","ETag":"1819DDC76D46CA2335F03443B5C2AC3F","type":"json"}],"name":"pages/GeneralGraph/sublayoutPipes/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}