{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/b7cdd209-6c28-41f9-9a23-f6907235d322/demo_treegraph_customedgetree/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/067a87bf-0261-492f-80c8-ca213f6bb910/demo_treegraph_customedgetree/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/customEdgeTree/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/customEdgeTree/data.js":"export default {\n id: 'root',\n label: 'root',\n children: [\n {\n id: 'c1',\n label: 'c1',\n children: [\n {\n id: 'c1-1',\n label: 'c1-1',\n },\n {\n id: 'c1-2',\n label: 'c1-2',\n children: [\n {\n id: 'c1-2-1',\n label: 'c1-2-1',\n },\n {\n id: 'c1-2-2',\n label: 'c1-2-2',\n },\n ],\n },\n ],\n },\n {\n id: 'c2',\n label: 'c2',\n },\n {\n id: 'c3',\n label: 'c3',\n children: [\n {\n id: 'c3-1',\n label: 'c3-1',\n },\n {\n id: 'c3-2',\n label: 'c3-2',\n children: [\n {\n id: 'c3-2-1',\n label: 'c3-2-1',\n },\n {\n id: 'c3-2-2',\n label: 'c3-2-2',\n },\n {\n id: 'c3-2-3',\n label: 'c3-2-3',\n },\n ],\n },\n {\n id: 'c3-3',\n label: 'c3-3',\n },\n ],\n },\n ],\n};\n","pages/TreeGraph/customEdgeTree/index.acss":"/* required by usingComponents */","pages/TreeGraph/customEdgeTree/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/customEdgeTree/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 const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {\n return [\n ['M', x - r, y - r],\n ['a', r, r, 0, 1, 0, r * 2, 0],\n ['a', r, r, 0, 1, 0, -r * 2, 0],\n ['M', x + 2 - r, y - r],\n ['L', x + r - 2, y - r],\n ];\n };\n const EXPAND_ICON = function EXPAND_ICON(x, y, r) {\n return [\n ['M', x - r, y - r],\n ['a', r, r, 0, 1, 0, r * 2, 0],\n ['a', r, r, 0, 1, 0, -r * 2, 0],\n ['M', x + 2 - r, y - r],\n ['L', x + r - 2, y - r],\n ['M', x, y - 2 * r + 2],\n ['L', x, y - 2],\n ];\n };\n\n F6.Util.traverseTree(data, (d) => {\n d.leftIcon = {\n style: {\n fill: '#e6fffb',\n stroke: '#e6fffb',\n },\n img:\n 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ',\n };\n return true;\n });\n\n F6.registerNode(\n 'icon-node',\n {\n options: {\n size: [60, 20],\n stroke: '#91d5ff',\n fill: '#91d5ff',\n },\n draw(cfg, group) {\n const styles = this.getShapeStyle(cfg);\n const { labelCfg = {} } = cfg;\n\n const w = styles.width;\n const h = styles.height;\n\n const keyShape = group.addShape('rect', {\n attrs: {\n ...styles,\n x: -w / 2,\n y: -h / 2,\n },\n });\n\n /**\n * leftIcon 格式如下：\n * {\n * style: ShapeStyle;\n * img: ''\n * }\n */\n console.log('cfg.leftIcon', cfg.leftIcon);\n if (cfg.leftIcon) {\n const { style, img } = cfg.leftIcon;\n group.addShape('rect', {\n attrs: {\n x: 1 - w / 2,\n y: 1 - h / 2,\n width: 38,\n height: styles.height - 2,\n fill: '#8c8c8c',\n ...style,\n },\n });\n group.addShape('image', {\n attrs: {\n x: 8 - w / 2,\n y: 8 - h / 2,\n width: 24,\n height: 24,\n img:\n img ||\n 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',\n },\n name: 'image-shape',\n });\n }\n\n // 如果不需要动态增加或删除元素，则不需要 add 这两个 marker\n group.addShape('marker', {\n attrs: {\n x: 40 - w / 2,\n y: 52 - h / 2,\n r: 6,\n stroke: '#73d13d',\n cursor: 'pointer',\n symbol: EXPAND_ICON,\n },\n name: 'add-item',\n });\n\n group.addShape('marker', {\n attrs: {\n x: 80 - w / 2,\n y: 52 - h / 2,\n r: 6,\n stroke: '#ff4d4f',\n cursor: 'pointer',\n symbol: COLLAPSE_ICON,\n },\n name: 'remove-item',\n });\n\n if (cfg.label) {\n group.addShape('text', {\n attrs: {\n ...labelCfg.style,\n text: cfg.label,\n x: 50 - w / 2,\n y: 25 - h / 2,\n },\n });\n }\n\n return keyShape;\n },\n update: undefined,\n },\n 'rect',\n );\n\n F6.registerEdge('flow-line', {\n draw(cfg, group) {\n const { startPoint } = cfg;\n const { endPoint } = cfg;\n\n const { style } = cfg;\n const shape = group.addShape('path', {\n attrs: {\n stroke: style.stroke,\n endArrow: style.endArrow,\n path: [\n ['M', startPoint.x, startPoint.y],\n ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],\n ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],\n ['L', endPoint.x, endPoint.y],\n ],\n },\n });\n\n return shape;\n },\n });\n\n const defaultStateStyles = {\n hover: {\n stroke: '#1890ff',\n lineWidth: 2,\n },\n };\n\n const defaultNodeStyle = {\n fill: '#91d5ff',\n stroke: '#40a9ff',\n radius: 5,\n };\n\n const defaultEdgeStyle = {\n stroke: '#91d5ff',\n endArrow: {\n path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',\n fill: '#91d5ff',\n d: -20,\n },\n };\n\n const defaultLayout = {\n type: 'compactBox',\n direction: 'TB',\n getId: function getId(d) {\n return d.id;\n },\n getHeight: function getHeight() {\n return 16;\n },\n getWidth: function getWidth() {\n return 16;\n },\n getVGap: function getVGap() {\n return 40;\n },\n getHGap: function getHGap() {\n return 70;\n },\n };\n\n const defaultLabelCfg = {\n style: {\n fill: '#000',\n fontSize: 12,\n },\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 // plugins: [minimap],\n modes: {\n default: ['drag-canvas', 'zoom-canvas'],\n },\n defaultNode: {\n type: 'icon-node',\n size: [120, 40],\n style: defaultNodeStyle,\n labelCfg: defaultLabelCfg,\n },\n defaultEdge: {\n type: 'flow-line',\n style: defaultEdgeStyle,\n },\n nodeStateStyles: defaultStateStyles,\n edgeStateStyles: defaultStateStyles,\n layout: defaultLayout,\n extra: {\n createImage: this.canvas && this.canvas.createImage,\n },\n });\n\n // 监听\n this.graph.on('node:mouseenter', (evt) => {\n const { item } = evt;\n this.graph.setItemState(item, 'hover', true);\n });\n\n this.graph.on('node:mouseleave', (evt) => {\n const { item } = evt;\n this.graph.setItemState(item, 'hover', false);\n });\n\n this.graph.on('node:tap', (evt) => {\n const { item, target } = evt;\n const targetType = target.get('type');\n const name = target.get('name');\n\n // 增加元素\n if (targetType === 'marker') {\n const model = item.getModel();\n if (name === 'add-item') {\n if (!model.children) {\n model.children = [];\n }\n const id = `n-${Math.random()}`;\n model.children.push({\n id,\n label: id.substr(0, 8),\n leftIcon: {\n style: {\n fill: '#e6fffb',\n stroke: '#e6fffb',\n },\n img:\n 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ',\n },\n });\n this.graph.updateChild(model, model.id);\n } else if (name === 'remove-item') {\n this.graph.removeChild(model.id);\n }\n }\n });\n\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n },\n});\n","pages/TreeGraph/customEdgeTree/index.json":"{\n \"defaultTitle\": \"customEdgeDirected\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/TreeGraph/customEdgeTree/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":"29583a9d0429b69478359755dcb1eba9.json","size":779960,"url":"https://gw.alipayobjects.com/os/f6/c254c838-e002-4db1-aeab-4138173d77db/demo_treegraph_customedgetree/dist/herbox/29583a9d0429b69478359755dcb1eba9.json","ETag":"29583A9D0429B69478359755DCB1EBA9","type":"json"}],"name":"pages/TreeGraph/customEdgeTree/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}