{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/7efa37d6-a632-493f-a1fc-1f432285f604/demo_treegraph_filesystem/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/51bad5d4-f50e-4b10-81b0-64d22653d44a/demo_treegraph_filesystem/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/TreeGraph/fileSystem/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/TreeGraph/fileSystem/data.js":"export default {\n id: '1',\n name: 'src',\n children: [\n {\n id: '1-1',\n name: 'behavior',\n children: [],\n },\n {\n id: '1-3',\n name: 'graph',\n children: [\n {\n id: '1-3-1',\n name: 'controller',\n children: [],\n },\n ],\n },\n {\n id: '1-5',\n name: 'item',\n children: [],\n },\n {\n id: '1-6',\n name: 'shape',\n children: [\n {\n id: '1-6-2',\n name: 'extend',\n children: [],\n },\n ],\n },\n {\n id: '1-7',\n name: 'util',\n children: [],\n },\n ],\n};\n","pages/TreeGraph/fileSystem/index.acss":"/* required by usingComponents */","pages/TreeGraph/fileSystem/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/TreeGraph/fileSystem/index.js":"import F6 from '@antv/f6';\nimport TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';\nimport { wrapContext } from '../../../utils/context';\n\nimport data from './data';\n\n/**\n * 缩进树-文件系统\n */\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 // 注册自定义树，节点等\n F6.registerGraph('TreeGraph', TreeGraph);\n\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 // registerNode\n F6.registerNode('file-node', {\n draw: function draw(cfg, group) {\n const keyShape = group.addShape('rect', {\n attrs: {\n x: 10,\n y: -12,\n fill: '#fff',\n stroke: null,\n },\n });\n let isLeaf = false;\n if (cfg.collapsed) {\n group.addShape('marker', {\n attrs: {\n symbol: 'triangle',\n x: 4,\n y: -2,\n r: 4,\n fill: '#666',\n },\n name: 'marker-shape',\n });\n } else if (cfg.children && cfg.children.length > 0) {\n group.addShape('marker', {\n attrs: {\n symbol: 'triangle-down',\n x: 4,\n y: -2,\n r: 4,\n fill: '#666',\n },\n name: 'marker-shape',\n });\n } else {\n isLeaf = true;\n }\n const shape = group.addShape('text', {\n attrs: {\n x: 15,\n y: 4,\n text: cfg.name,\n fill: '#666',\n fontSize: 16,\n textAlign: 'left',\n fontFamily:\n typeof window !== 'undefined'\n ? window.getComputedStyle(document.body, null).getPropertyValue('font-family') ||\n 'Arial, sans-serif'\n : 'Arial, sans-serif',\n },\n name: 'text-shape',\n });\n const bbox = shape.getBBox();\n let backRectW = bbox.width;\n let backRectX = keyShape.attr('x');\n if (!isLeaf) {\n backRectW += 8;\n backRectX -= 15;\n }\n keyShape.attr({\n width: backRectW,\n height: bbox.height + 4,\n x: backRectX,\n });\n return keyShape;\n },\n });\n\n // registerEdge\n F6.registerEdge(\n 'step-line',\n {\n getControlPoints: function getControlPoints(cfg) {\n const { startPoint } = cfg;\n const { endPoint } = cfg;\n return [\n startPoint,\n {\n x: startPoint.x,\n y: endPoint.y,\n },\n endPoint,\n ];\n },\n },\n 'polyline',\n );\n\n // 创建F6实例\n this.graph = new F6.TreeGraph({\n context: this.ctx,\n renderer: this.renderer,\n width,\n height,\n linkCenter: true,\n pixelRatio,\n fitView: true,\n modes: {\n default: [\n {\n type: 'collapse-expand',\n animate: false,\n onChange: function onChange(item, collapsed) {\n const model = item.getModel();\n model.collapsed = collapsed;\n return true;\n },\n },\n 'drag-canvas',\n 'zoom-canvas',\n ],\n },\n defaultEdge: {\n style: {\n stroke: '#A3B1BF',\n },\n },\n layout: {\n type: 'indented',\n isHorizontal: true,\n direction: 'LR',\n indent: 30,\n getHeight: function getHeight() {\n return 16;\n },\n getWidth: function getWidth() {\n return 16;\n },\n },\n });\n let centerX = 0;\n this.graph.node(function(node) {\n if (node.id === 'Modeling Methods') {\n centerX = node.x;\n }\n\n // position的取值（由于ESlint禁止嵌套的三元表达，所以单独提取出来写）\n let position_value = null;\n if (node.children && node.children.length > 0) {\n position_value = 'left';\n } else if (node.x > centerX) position_value = 'right';\n else position_value = 'left';\n\n return {\n label: node.id,\n labelCfg: {\n offset: 5,\n position: position_value,\n },\n };\n });\n\n this.graph.node((node) => {\n return {\n type: 'file-node',\n label: node.name,\n };\n });\n\n this.graph.edge(() => {\n return {\n type: 'step-line',\n };\n });\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n },\n});\n","pages/TreeGraph/fileSystem/index.json":"{\n \"defaultTitle\": \"fileSystem\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/TreeGraph/fileSystem/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":"b1ecb756939a68dfccd572182a6120a9.json","size":742785,"url":"https://gw.alipayobjects.com/os/f6/d5f303ce-0968-4b44-a0eb-479a9b0de5ef/demo_treegraph_filesystem/dist/herbox/b1ecb756939a68dfccd572182a6120a9.json","ETag":"B1ECB756939A68DFCCD572182A6120A9","type":"json"}],"name":"pages/TreeGraph/fileSystem/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}