{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/2b48b4d8-9d2c-420f-991a-7430e4644e56/demo_animation_statechange_hover/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/1ef4cef3-db30-45e3-9a11-857b6461f9c1/demo_animation_statechange_hover/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/Animation/stateChange_hover/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/Animation/stateChange_hover/data.js":"const nodes = [];\nconst edges = [];\n\n// Center node\nconst centerNode = {\n id: 'center',\n x: 500,\n y: 300,\n type: 'center-node',\n size: 20,\n};\nnodes.push(centerNode);\n// Add 4 nodes on the left\nfor (let i = 0; i < 4; i++) {\n const id = `left${i}`;\n nodes.push({\n id,\n x: 250,\n y: (i + 1) * 100 + 50,\n type: 'leaf-node',\n });\n edges.push({ source: id, target: 'center', type: 'can-running' });\n}\n// Add 6 nodes on the right\nfor (let i = 0; i < 6; i++) {\n const id = `right${i}`;\n nodes.push({\n id,\n x: 750,\n y: i * 100 + 50,\n type: 'leaf-node',\n });\n edges.push({ source: 'center', target: id, type: 'can-running' });\n}\n\nexport { nodes, edges };\n","pages/Animation/stateChange_hover/index.acss":"/* required by usingComponents */","pages/Animation/stateChange_hover/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/Animation/stateChange_hover/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport { nodes, edges } from './data';\n\n/**\n * stateChange_hover\n */\n\nF6.registerNode(\n 'leaf-node',\n {\n afterDraw(cfg, group) {\n group.addShape('circle', {\n attrs: {\n x: 0,\n y: 0,\n r: 5,\n fill: cfg.color || '#5B8FF9',\n },\n name: 'circle-shape',\n });\n },\n getAnchorPoints() {\n return [\n [0, 0.5],\n [1, 0.5],\n ];\n },\n },\n 'circle',\n);\n\nF6.registerNode(\n 'center-node',\n {\n afterDraw(cfg, group) {\n const r = cfg.size / 2;\n group.addShape('circle', {\n zIndex: -3,\n attrs: {\n x: 0,\n y: 0,\n r: r + 10,\n fill: 'gray',\n opacity: 0.4,\n },\n name: 'circle-shape1',\n });\n group.addShape('circle', {\n zIndex: -2,\n attrs: {\n x: 0,\n y: 0,\n r: r + 20,\n fill: 'gray',\n opacity: 0.2,\n },\n name: 'circle-shape2',\n });\n group.sort();\n },\n getAnchorPoints() {\n return [\n [0, 0.5],\n [1, 0.5],\n ];\n },\n },\n 'circle',\n);\n\n// lineDash array\nconst lineDash = [4, 2, 1, 2];\n\nF6.registerEdge(\n 'can-running',\n {\n setState(name, value, item) {\n const shape = item.get('keyShape');\n if (name === 'running') {\n if (value) {\n let index = 0;\n shape.animate(\n () => {\n index += 1;\n if (index > 9) {\n index = 0;\n }\n const res = {\n lineDash,\n lineDashOffset: -index,\n };\n // return the params for this frame\n return res;\n },\n {\n repeat: true,\n duration: 3000,\n },\n );\n } else {\n shape.stopAnimate();\n shape.attr('lineDash', null);\n }\n }\n },\n },\n 'cubic-horizontal',\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 // 同步获取window的宽高\n const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();\n\n this.setData({\n width: windowWidth,\n height: windowHeight,\n pixelRatio,\n defaultNode: {\n style: {\n fill: '#DEE9FF',\n stroke: '#5B8FF9',\n },\n },\n defaultEdge: {\n style: {\n stroke: '#b5b5b5',\n },\n },\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 defaultNode: {\n style: {\n fill: '#DEE9FF',\n stroke: '#5B8FF9',\n },\n },\n defaultEdge: {\n style: {\n stroke: '#b5b5b5',\n },\n },\n });\n\n this.graph.data({ nodes, edges });\n this.graph.render();\n this.graph.fitView();\n\n // set hover state\n this.graph.on('node:mouseenter', (ev) => {\n const node = ev.item;\n const edges_ = node.getEdges();\n edges_.forEach((edge) => this.graph.setItemState(edge, 'running', true));\n });\n this.graph.on('node:mouseleave', (ev) => {\n const node = ev.item;\n const edges_ = node.getEdges();\n edges_.forEach((edge) => this.graph.setItemState(edge, 'running', false));\n });\n },\n});\n","pages/Animation/stateChange_hover/index.json":"{\n \"defaultTitle\": \"stateChange_hover\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/Animation/stateChange_hover/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":"6c30a8752544245f0e29664e6852225e.json","size":690932,"url":"https://gw.alipayobjects.com/os/f6/64710ee1-46dd-405b-88f8-c0c176122aad/demo_animation_statechange_hover/dist/herbox/6c30a8752544245f0e29664e6852225e.json","ETag":"6C30A8752544245F0E29664E6852225E","type":"json"}],"name":"pages/Animation/stateChange_hover/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}