{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/0228e87c-47f3-43ed-b7ee-2970956fbcd6/demo_scenecase_decisiontree/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/3952d8a6-7b95-4f97-8272-aced39a1099d/demo_scenecase_decisiontree/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/SceneCase/decisionTree/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/SceneCase/decisionTree/data.js":"export default {\n id: 'g1',\n name: 'Name1',\n count: 123456,\n label: '538.90',\n currency: 'Yuan',\n rate: 1.0,\n status: 'B',\n variableName: 'V1',\n variableValue: 0.341,\n variableUp: false,\n children: [\n {\n id: 'g12',\n name: 'Deal with LONG label LONG label LONG label LONG label',\n count: 123456,\n label: '338.00',\n rate: 0.627,\n status: 'R',\n currency: 'Yuan',\n variableName: 'V2',\n variableValue: 0.179,\n variableUp: true,\n children: [\n {\n id: 'g121',\n name: 'Name3',\n collapsed: true,\n count: 123456,\n label: '138.00',\n rate: 0.123,\n status: 'B',\n currency: 'Yuan',\n variableName: 'V2',\n variableValue: 0.27,\n variableUp: true,\n children: [\n {\n id: 'g1211',\n name: 'Name4',\n count: 123456,\n label: '138.00',\n rate: 1.0,\n status: 'B',\n currency: 'Yuan',\n variableName: 'V1',\n variableValue: 0.164,\n variableUp: false,\n children: [],\n },\n ],\n },\n {\n id: 'g122',\n name: 'Name5',\n collapsed: true,\n count: 123456,\n label: '100.00',\n rate: 0.296,\n status: 'G',\n currency: 'Yuan',\n variableName: 'V1',\n variableValue: 0.259,\n variableUp: true,\n children: [\n {\n id: 'g1221',\n name: 'Name6',\n count: 123456,\n label: '40.00',\n rate: 0.4,\n status: 'G',\n currency: 'Yuan',\n variableName: 'V1',\n variableValue: 0.135,\n variableUp: true,\n children: [\n {\n id: 'g12211',\n name: 'Name6-1',\n count: 123456,\n label: '40.00',\n rate: 1.0,\n status: 'R',\n currency: 'Yuan',\n variableName: 'V1',\n variableValue: 0.181,\n variableUp: true,\n children: [],\n },\n ],\n },\n {\n id: 'g1222',\n name: 'Name7',\n count: 123456,\n label: '60.00',\n rate: 0.6,\n status: 'G',\n currency: 'Yuan',\n variableName: 'V1',\n variableValue: 0.239,\n variableUp: false,\n children: [],\n },\n ],\n },\n {\n id: 'g123',\n name: 'Name8',\n collapsed: true,\n count: 123456,\n label: '100.00',\n rate: 0.296,\n status: 'DI',\n currency: 'Yuan',\n variableName: 'V2',\n variableValue: 0.131,\n variableUp: false,\n children: [\n {\n id: 'g1231',\n name: 'Name8-1',\n count: 123456,\n label: '100.00',\n rate: 1.0,\n status: 'DI',\n currency: 'Yuan',\n variableName: 'V2',\n variableValue: 0.131,\n variableUp: false,\n children: [],\n },\n ],\n },\n ],\n },\n {\n id: 'g13',\n name: 'Name9',\n count: 123456,\n label: '100.90',\n rate: 0.187,\n status: 'B',\n currency: 'Yuan',\n variableName: 'V2',\n variableValue: 0.221,\n variableUp: true,\n children: [\n {\n id: 'g131',\n name: 'Name10',\n count: 123456,\n label: '33.90',\n rate: 0.336,\n status: 'R',\n currency: 'Yuan',\n variableName: 'V1',\n variableValue: 0.12,\n variableUp: true,\n children: [],\n },\n {\n id: 'g132',\n name: 'Name11',\n count: 123456,\n label: '67.00',\n rate: 0.664,\n status: 'G',\n currency: 'Yuan',\n variableName: 'V1',\n variableValue: 0.241,\n variableUp: false,\n children: [],\n },\n ],\n },\n {\n id: 'g14',\n name: 'Name12',\n count: 123456,\n label: '100.00',\n rate: 0.186,\n status: 'G',\n currency: 'Yuan',\n variableName: 'V2',\n variableValue: 0.531,\n variableUp: true,\n children: [],\n },\n ],\n};\n","pages/SceneCase/decisionTree/index.acss":"/* required by usingComponents */","pages/SceneCase/decisionTree/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/SceneCase/decisionTree/index.js":"import F6 from '@antv/f6';\nimport TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';\nimport { wrapContext } from '../../../utils/context';\nimport mockData from './data';\n\n/**\n * decisionTree\n */\n\nconst colors = {\n B: '#5B8FF9',\n R: '#F46649',\n Y: '#EEBC20',\n G: '#5BD8A6',\n DI: '#A7A7A7',\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 // 默认配置\n const defaultConfig = {\n width,\n height,\n modes: {\n default: ['zoom-canvas', 'drag-canvas'],\n },\n fitView: true,\n animate: true,\n defaultNode: {\n type: 'flow-rect',\n },\n defaultEdge: {\n type: 'cubic-horizontal',\n style: {\n stroke: '#CED4D9',\n },\n },\n layout: {\n type: 'indented',\n direction: 'LR',\n dropCap: false,\n indent: 300,\n getHeight: () => {\n return 60;\n },\n },\n };\n\n // 组件props\n const props = {\n data: mockData,\n config: {\n padding: [20, 50],\n defaultLevel: 3,\n defaultZoom: 0.8,\n modes: { default: ['zoom-canvas', 'drag-canvas'] },\n },\n };\n\n // 自定义节点、边\n const registerFn = () => {\n /**\n * 自定义节点\n */\n F6.registerNode(\n 'flow-rect',\n {\n shapeType: 'flow-rect',\n draw(cfg, group) {\n const {\n name = '',\n variableName,\n variableValue,\n variableUp,\n label,\n collapsed,\n currency,\n status,\n // rate,\n } = cfg;\n const grey = '#CED4D9';\n // 逻辑不应该在这里判断\n const rectConfig = {\n width: 202,\n height: 60,\n lineWidth: 1,\n fontSize: 12,\n fill: '#fff',\n radius: 4,\n stroke: grey,\n opacity: 1,\n };\n\n const nodeOrigin = {\n x: -rectConfig.width / 2,\n y: -rectConfig.height / 2,\n };\n\n const textConfig = {\n textAlign: 'left',\n textBaseline: 'bottom',\n };\n\n const rect = group.addShape('rect', {\n attrs: {\n x: nodeOrigin.x,\n y: nodeOrigin.y,\n ...rectConfig,\n },\n });\n\n const rectBBox = rect.getBBox();\n\n // label title\n group.addShape('text', {\n attrs: {\n ...textConfig,\n x: 12 + nodeOrigin.x,\n y: 20 + nodeOrigin.y,\n text: name.length > 28 ? `${name.substr(0, 28)}...` : name,\n fontSize: 12,\n opacity: 0.85,\n fill: '#000',\n cursor: 'pointer',\n },\n name: 'name-shape',\n });\n\n // price\n const price = group.addShape('text', {\n attrs: {\n ...textConfig,\n x: 12 + nodeOrigin.x,\n y: rectBBox.maxY - 12,\n text: label,\n fontSize: 16,\n fill: '#000',\n opacity: 0.85,\n },\n });\n\n // label currency\n group.addShape('text', {\n attrs: {\n ...textConfig,\n x: price.getBBox().maxX + 5,\n y: rectBBox.maxY - 12,\n text: currency,\n fontSize: 12,\n fill: '#000',\n opacity: 0.75,\n },\n });\n\n // percentage\n const percentText = group.addShape('text', {\n attrs: {\n ...textConfig,\n x: rectBBox.maxX - 8,\n y: rectBBox.maxY - 12,\n text: `${((variableValue || 0) * 100).toFixed(2)}%`,\n fontSize: 12,\n textAlign: 'right',\n fill: colors[status],\n },\n });\n\n // percentage triangle\n const symbol = variableUp ? 'triangle' : 'triangle-down';\n const triangle = group.addShape('marker', {\n attrs: {\n ...textConfig,\n x: percentText.getBBox().minX - 10,\n y: rectBBox.maxY - 12 - 6,\n symbol,\n r: 6,\n fill: colors[status],\n },\n });\n\n // variable name\n group.addShape('text', {\n attrs: {\n ...textConfig,\n x: triangle.getBBox().minX - 4,\n y: rectBBox.maxY - 12,\n text: variableName,\n fontSize: 12,\n textAlign: 'right',\n fill: '#000',\n opacity: 0.45,\n },\n });\n\n // bottom line background\n // const bottomBackRect = group.addShape('rect', {\n // attrs: {\n // x: nodeOrigin.x,\n // y: rectBBox.maxY - 4,\n // width: rectConfig.width,\n // height: 4,\n // radius: [0, 0, rectConfig.radius, rectConfig.radius],\n // fill: '#E0DFE3',\n // },\n // });\n\n // bottom percent\n // const bottomRect = group.addShape('rect', {\n // attrs: {\n // x: nodeOrigin.x,\n // y: rectBBox.maxY - 4,\n // width: rate * rectBBox.width,\n // height: 4,\n // radius: [0, 0, 0, rectConfig.radius],\n // fill: colors[status],\n // },\n // });\n\n // collapse rect\n if (cfg.children && cfg.children.length) {\n group.addShape('rect', {\n attrs: {\n x: rectConfig.width / 2 - 8,\n y: -8,\n width: 16,\n height: 16,\n stroke: 'rgba(0, 0, 0, 0.25)',\n cursor: 'pointer',\n fill: '#fff',\n },\n name: 'collapse-back',\n modelId: cfg.id,\n });\n\n // collpase text\n group.addShape('text', {\n attrs: {\n x: rectConfig.width / 2,\n y: -1,\n textAlign: 'center',\n textBaseline: 'middle',\n text: collapsed ? '+' : '-',\n fontSize: 16,\n cursor: 'pointer',\n fill: 'rgba(0, 0, 0, 0.25)',\n },\n name: 'collapse-text',\n modelId: cfg.id,\n });\n }\n\n this.drawLinkPoints(cfg, group);\n return rect;\n },\n update(cfg, item) {\n const group = item.getContainer();\n this.updateLinkPoints(cfg, group);\n },\n setState(name, value, item) {\n if (name === 'collapse') {\n const group = item.getContainer();\n const collapseText = group.find((e) => e.get('name') === 'collapse-text');\n if (collapseText) {\n if (!value) {\n collapseText.attr({\n text: '-',\n });\n } else {\n collapseText.attr({\n text: '+',\n });\n }\n }\n }\n },\n getAnchorPoints() {\n return [\n [0, 0.5],\n [1, 0.5],\n ];\n },\n },\n 'rect',\n );\n\n F6.registerEdge(\n 'flow-cubic',\n {\n getControlPoints(cfg) {\n let { controlPoints } = cfg; // 指定controlPoints\n if (!controlPoints || !controlPoints.length) {\n const { startPoint, endPoint, sourceNode, targetNode } = cfg;\n const { x: startX, y: startY, coefficientX, coefficientY } = sourceNode\n ? sourceNode.getModel()\n : startPoint;\n const { x: endX, y: endY } = targetNode ? targetNode.getModel() : endPoint;\n let curveStart = (endX - startX) * coefficientX;\n let curveEnd = (endY - startY) * coefficientY;\n curveStart = curveStart > 40 ? 40 : curveStart;\n curveEnd = curveEnd < -30 ? curveEnd : -30;\n controlPoints = [\n { x: startPoint.x + curveStart, y: startPoint.y },\n { x: endPoint.x + curveEnd, y: endPoint.y },\n ];\n }\n return controlPoints;\n },\n getPath(points) {\n const path = [];\n path.push(['M', points[0].x, points[0].y]);\n path.push([\n 'C',\n points[1].x,\n points[1].y,\n points[2].x,\n points[2].y,\n points[3].x,\n points[3].y,\n ]);\n return path;\n },\n },\n 'single-line',\n );\n };\n registerFn();\n\n const { onInit, config } = props;\n console.log(onInit);\n const tooltip = new F6.Tooltip({\n // TODO: _f2.default.Tooltip is not a constructor\n // offsetX and offsetY include the padding of the parent container\n offsetX: 20,\n offsetY: 30,\n // the types of items that allow the tooltip show up\n // 允许出现 tooltip 的 item 类型\n itemTypes: ['node'],\n // custom the tooltip's content\n // 自定义 tooltip 内容\n getContent: (e) => {\n const outDiv = document.createElement('div');\n // outDiv.style.padding = '0px 0px 20px 0px';\n const nodeName = e.item.getModel().name;\n let formatedNodeName = '';\n for (let i = 0; i < nodeName.length; i++) {\n formatedNodeName = `${formatedNodeName}${nodeName[i]}`;\n if (i !== 0 && i % 20 === 0) formatedNodeName = `${formatedNodeName}<br/>`;\n }\n outDiv.innerHTML = `${formatedNodeName}`;\n return outDiv;\n },\n shouldBegin: (e) => {\n if (e.target.get('name') === 'name-shape') return true;\n return false;\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 extra: {\n createImage: this.canvas && this.canvas.createImage,\n },\n ...defaultConfig,\n ...config,\n plugins: [tooltip],\n });\n\n this.graph.data(mockData);\n this.graph.render();\n this.graph.fitView();\n this.graph.zoom(config.defaultZoom || 1);\n\n const handleCollapse = (e) => {\n const { target } = e;\n const id = target.get('modelId');\n const item = this.graph.findById(id);\n const nodeModel = item.getModel();\n nodeModel.collapsed = !nodeModel.collapsed;\n this.graph.layout();\n this.graph.setItemState(item, 'collapse', nodeModel.collapsed);\n };\n this.graph.on('collapse-text:tap', (e) => {\n handleCollapse(e);\n });\n this.graph.on('collapse-back:tap', (e) => {\n handleCollapse(e);\n });\n },\n});\n","pages/SceneCase/decisionTree/index.json":"{\n \"defaultTitle\": \"decisionTree\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/SceneCase/decisionTree/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":"2416bb5689a9ca05f1a9bdaec90f10e6.json","size":787028,"url":"https://gw.alipayobjects.com/os/f6/a8bd7c80-ca09-4506-a958-5f8be3e75b08/demo_scenecase_decisiontree/dist/herbox/2416bb5689a9ca05f1a9bdaec90f10e6.json","ETag":"2416BB5689A9CA05F1A9BDAEC90F10E6","type":"json"}],"name":"pages/SceneCase/decisionTree/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}