{"dependencies":[{"name":"4bbc0d0af35e166c84fc6cb77a094d21.json","size":10981919,"url":"https://gw.alipayobjects.com/os/f6/186d8b91-68ee-4210-ab1e-279f0c7a2bbe/demo_scenecase_mindmap/dependencies/herbox/4bbc0d0af35e166c84fc6cb77a094d21.json","ETag":"4BBC0D0AF35E166C84FC6CB77A094D21","type":"json"},{"name":"802157e7d4093eb19e06b02aff262925.json","size":5210525,"url":"https://gw.alipayobjects.com/os/f6/26b1ddce-2d0a-44c3-9481-0995ede841fa/demo_scenecase_mindmap/dependencies/herbox/802157e7d4093eb19e06b02aff262925.json","ETag":"802157E7D4093EB19E06B02AFF262925","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/mindMap/index\"]}\n","mini.project.json":"{\n \"enableAppxNg\": true,\n \"component2\": true\n}\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.5\",\n \"@antv/f6-alipay\": \"^0.0.2\",\n \"@babel/runtime\": \"^7.14.0\"\n },\n \"author\": \"\",\n \"license\": \"ISC\"\n}\n","pages/SceneCase/mindMap/data.js":"const rawData = {\n label: 'Modeling Methods',\n id: '0',\n children: [\n {\n label: 'Classification',\n id: '0-1',\n color: '#5AD8A6',\n children: [\n {\n label: 'Logistic regression',\n id: '0-1-1',\n },\n {\n label: 'Linear discriminant analysis',\n id: '0-1-2',\n },\n {\n label: 'Rules',\n id: '0-1-3',\n },\n {\n label: 'Decision trees',\n id: '0-1-4',\n },\n {\n label: 'Naive Bayes',\n id: '0-1-5',\n },\n {\n label: 'K nearest neighbor',\n id: '0-1-6',\n },\n {\n label: 'Probabilistic neural network',\n id: '0-1-7',\n },\n {\n label: 'Support vector machine',\n id: '0-1-8',\n },\n ],\n },\n {\n label: 'Consensus',\n id: '0-2',\n color: '#F6BD16',\n children: [\n {\n label: 'Models diversity',\n id: '0-2-1',\n children: [\n {\n label: 'Different initializations',\n id: '0-2-1-1',\n },\n {\n label: 'Different parameter choices',\n id: '0-2-1-2',\n },\n {\n label: 'Different architectures',\n id: '0-2-1-3',\n },\n {\n label: 'Different modeling methods',\n id: '0-2-1-4',\n },\n {\n label: 'Different training sets',\n id: '0-2-1-5',\n },\n {\n label: 'Different feature sets',\n id: '0-2-1-6',\n },\n ],\n },\n {\n label: 'Methods',\n id: '0-2-2',\n children: [\n {\n label: 'Classifier selection',\n id: '0-2-2-1',\n },\n {\n label: 'Classifier fusion',\n id: '0-2-2-2',\n },\n ],\n },\n {\n label: 'Common',\n id: '0-2-3',\n children: [\n {\n label: 'Bagging',\n id: '0-2-3-1',\n },\n {\n label: 'Boosting',\n id: '0-2-3-2',\n },\n {\n label: 'AdaBoost',\n id: '0-2-3-3',\n },\n ],\n },\n ],\n },\n {\n label: 'Regression',\n id: '0-3',\n color: '#269A99',\n children: [\n {\n label: 'Multiple linear regression',\n id: '0-3-1',\n },\n {\n label: 'Partial least squares',\n id: '0-3-2',\n },\n {\n label: 'Multi-layer feedforward neural network',\n id: '0-3-3',\n },\n {\n label: 'General regression neural network',\n id: '0-3-4',\n },\n {\n label: 'Support vector regression',\n id: '0-3-5',\n },\n ],\n },\n ],\n};\n\nconst dataTransform = (data_) => {\n const changeData = (d, level = 0, color) => {\n const data = {\n ...d,\n };\n switch (level) {\n case 0:\n data.type = 'dice-mind-map-root';\n break;\n case 1:\n data.type = 'dice-mind-map-sub';\n break;\n default:\n data.type = 'dice-mind-map-leaf';\n break;\n }\n\n data.hover = false;\n\n if (color) {\n data.color = color;\n }\n\n if (level === 1 && !d.direction) {\n if (!d.direction) {\n data.direction = d.id.charCodeAt(d.id.length - 1) % 2 === 0 ? 'right' : 'left';\n }\n }\n\n if (d.children) {\n data.children = d.children.map((child) => changeData(child, level + 1, data.color));\n }\n return data;\n };\n return changeData(data_);\n};\n\nconst result = dataTransform(rawData);\nexport default result;\n","pages/SceneCase/mindMap/index.acss":"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}\n\n.f6-canvas {\n z-index: 10;\n}","pages/SceneCase/mindMap/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>\n","pages/SceneCase/mindMap/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport result from './data';\n\n/**\n * mindMap\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 const { Util } = F6;\n // const colorArr = [\n // '#5B8FF9',\n // '#5AD8A6',\n // '#5D7092',\n // '#F6BD16',\n // '#6F5EF9',\n // '#6DC8EC',\n // '#D3EEF9',\n // '#DECFEA',\n // '#FFE0C7',\n // '#1E9493',\n // '#BBDEDE',\n // '#FF99C3',\n // '#FFE0ED',\n // '#CDDDFD',\n // '#CDF3E4',\n // '#CED4DE',\n // '#FCEBB9',\n // '#D3CEFD',\n // '#945FB9',\n // '#FF9845',\n // ];\n\n F6.registerNode(\n 'dice-mind-map-root',\n {\n jsx: (cfg) => {\n const width = Util.getTextSize(cfg.label, 16)[0] + 24;\n const stroke = cfg.style.stroke || '#096dd9';\n\n return `\n <group>\n <rect draggable=\"true\" style={{width: ${width}, height: 42, stroke: ${stroke}, radius: 4}} keyshape>\n <text style={{ fontSize: 16, marginLeft: 12, marginTop: 12 }}>${cfg.label}</text>\n <text style={{ marginLeft: ${width -\n 16}, marginTop: -20, stroke: '#66ccff', fill: '#000', cursor: 'pointer', opacity: ${\n cfg.hover ? 0.75 : 0\n } }} action=\"add\">+</text>\n </rect>\n </group>\n `;\n },\n getAnchorPoints() {\n return [\n [0, 0.5],\n [1, 0.5],\n ];\n },\n },\n 'single-node',\n );\n F6.registerNode(\n 'dice-mind-map-sub',\n {\n jsx: (cfg) => {\n const width = Util.getTextSize(cfg.label, 14)[0] + 24;\n const color = cfg.color || cfg.style.stroke;\n\n return `\n <group>\n <rect draggable=\"true\" style={{width: ${width + 24}, height: 22}} keyshape>\n <text draggable=\"true\" style={{ fontSize: 14, marginLeft: 12, marginTop: 6 }}>${\n cfg.label\n }</text>\n <text style={{ marginLeft: ${width -\n 8}, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${\n cfg.hover ? 0.75 : 0\n }, next: 'inline' }} action=\"add\">+</text>\n <text style={{ marginLeft: ${width -\n 4}, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${\n cfg.hover ? 0.75 : 0\n }, next: 'inline' }} action=\"delete\">-</text>\n </rect>\n <rect style={{ fill: ${color}, width: ${width + 24}, height: 2, x: 0, y: 22 }} />\n \n </group>\n `;\n },\n getAnchorPoints() {\n return [\n [0, 0.965],\n [1, 0.965],\n ];\n },\n },\n 'single-node',\n );\n F6.registerNode(\n 'dice-mind-map-leaf',\n {\n jsx: (cfg) => {\n const width = Util.getTextSize(cfg.label, 12)[0] + 24;\n const color = cfg.color || cfg.style.stroke;\n\n return `\n <group>\n <rect draggable=\"true\" style={{width: ${width + 20}, height: 26, fill: 'transparent' }}>\n <text style={{ fontSize: 12, marginLeft: 12, marginTop: 6 }}>${cfg.label}</text>\n <text style={{ marginLeft: ${width -\n 8}, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${\n cfg.hover ? 0.75 : 0\n }, next: 'inline' }} action=\"add\">+</text>\n <text style={{ marginLeft: ${width -\n 4}, marginTop: -10, stroke: ${color}, fill: '#000', cursor: 'pointer', opacity: ${\n cfg.hover ? 0.75 : 0\n }, next: 'inline' }} action=\"delete\">-</text>\n </rect>\n <rect style={{ fill: ${color}, width: ${width + 24}, height: 2, x: 0, y: 32 }} />\n \n </group>\n `;\n },\n getAnchorPoints() {\n return [\n [0, 0.965],\n [1, 0.965],\n ];\n },\n },\n 'single-node',\n );\n F6.registerBehavior('dice-mindmap', {\n getEvents() {\n return {\n 'node:click': 'clickNode',\n 'node:dblclick': 'editNode',\n 'node:mouseenter': 'hoverNode',\n 'node:mouseleave': 'hoverNodeOut',\n };\n },\n\n clickNode(evt) {\n // const model = evt.item.get('model');\n const name = evt.target.get('action');\n switch (name) {\n // TODO:这里没办法过语法检查\n // case 'add':\n // const newId = `${model.id}-${\n // ((model.children || []).reduce((a, b) => {\n // const num = Number(b.id.split('-').pop());\n // return a < num ? num : a;\n // }, 0) || 0) + 1\n // }`;\n // evt.currentTarget.updateItem(evt.item, {\n // children: (model.children || []).concat([\n // {\n // id: newId,\n // direction: newId.charCodeAt(newId.length - 1) % 2 === 0 ? 'right' : 'left',\n // label: 'New',\n // type: 'dice-mind-map-leaf',\n // color: model.color || colorArr[Math.floor(Math.random() * colorArr.length)],\n // },\n // ]),\n // });\n // evt.currentTarget.layout(false);\n // break;\n // case 'delete':\n // const parent = evt.item.get('parent');\n // evt.currentTarget.updateItem(parent, {\n // children: (parent.get('model').children || []).filter((e) => e.id !== model.id),\n // });\n // evt.currentTarget.layout(false);\n // break;\n case 'edit':\n break;\n default:\n }\n },\n editNode(evt) {\n const { item } = evt;\n const model = item.get('model');\n const { x, y } = item.calculateBBox();\n const graph = evt.currentTarget;\n const realPosition = evt.currentTarget.getClientByPoint(x, y);\n const el = document.createElement('div');\n const fontSizeMap = {\n 'dice-mind-map-root': 24,\n 'dice-mind-map-sub': 18,\n 'dice-mind-map-leaf': 16,\n };\n el.style.fontSize = `${fontSizeMap[model.type]}px`;\n el.style.position = 'fixed';\n el.style.top = `${realPosition.y}px`;\n el.style.left = `${realPosition.x}px`;\n el.style.paddingLeft = '12px';\n el.style.transformOrigin = 'top left';\n el.style.transform = `scale(${evt.currentTarget.getZoom()})`;\n const input = document.createElement('input');\n input.style.border = 'none';\n input.value = model.label;\n input.style.width = `${Util.getTextSize(model.label, fontSizeMap[model.type])[0]}px`;\n input.className = 'dice-input';\n el.className = 'dice-input';\n el.appendChild(input);\n document.body.appendChild(el);\n const destroyEl = () => {\n document.body.removeChild(el);\n };\n const clickEvt = (event) => {\n if (\n !(\n event.target &&\n event.target.className &&\n event.target.className.includes('dice-input')\n )\n ) {\n window.removeEventListener('mousedown', clickEvt);\n window.removeEventListener('scroll', clickEvt);\n graph.updateItem(item, {\n label: input.value,\n });\n graph.layout(false);\n graph.off('wheelZoom', clickEvt);\n destroyEl();\n }\n };\n graph.on('wheelZoom', clickEvt);\n window.addEventListener('mousedown', clickEvt);\n window.addEventListener('scroll', clickEvt);\n input.addEventListener('keyup', (event) => {\n if (event.key === 'Enter') {\n clickEvt({\n target: {},\n });\n }\n });\n },\n hoverNode(evt) {\n evt.currentTarget.updateItem(evt.item, {\n hover: true,\n });\n },\n hoverNodeOut(evt) {\n evt.currentTarget.updateItem(evt.item, {\n hover: false,\n });\n },\n });\n F6.registerBehavior('scroll-canvas', {\n getEvents: function getEvents() {\n return {\n wheel: 'onWheel',\n };\n },\n\n onWheel: function onWheel(ev) {\n const { graph } = this;\n if (!graph) {\n return;\n }\n if (ev.ctrlKey) {\n const canvas = graph.get('canvas');\n const point = canvas.getPointByClient(ev.clientX, ev.clientY);\n let ratio = graph.getZoom();\n if (ev.wheelDelta > 0) {\n ratio += ratio * 0.05;\n } else {\n ratio *= ratio * 0.05;\n }\n graph.zoomTo(ratio, {\n x: point.x,\n y: point.y,\n });\n } else {\n const x = ev.deltaX || ev.movementX;\n const y = ev.deltaY || ev.movementY || (-ev.wheelDelta * 125) / 3;\n graph.translate(-x, -y);\n }\n ev.preventDefault();\n },\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 // 创建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: [10, 20],\n layout: {\n type: 'mindmap',\n direction: 'H',\n getHeight: () => {\n return 16;\n },\n getWidth: (node) => {\n return node.level === 0\n ? F6.Util.getTextSize(node.label, 16)[0] + 12\n : F6.Util.getTextSize(node.label, 12)[0];\n },\n getVGap: () => {\n return 10;\n },\n getHGap: () => {\n return 60;\n },\n getSide: (node) => {\n return node.data.direction;\n },\n },\n defaultEdge: {\n type: 'cubic-horizontal',\n style: {\n lineWidth: 2,\n },\n },\n minZoom: 0.5,\n modes: {\n default: ['drag-canvas', 'zoom-canvas', 'dice-mindmap'],\n },\n });\n\n this.graph.data(result);\n this.graph.render();\n // this.graph.fitView();\n },\n});\n","pages/SceneCase/mindMap/index.json":"{\n \"defaultTitle\": \"mindMap\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\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":"9c472d9d5c8e41de846683fc694e8e1a.json","size":735900,"url":"https://gw.alipayobjects.com/os/f6/4d798616-eef1-4271-89b8-0ffdc28ee698/demo_scenecase_mindmap/dist/herbox/9c472d9d5c8e41de846683fc694e8e1a.json","ETag":"9C472D9D5C8E41DE846683FC694E8E1A","type":"json"}],"name":"pages/SceneCase/mindMap/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}