{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/7c84a037-2b58-47c1-abe4-6db55f9a7ecf/demo_interactive_setmode/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/fe45565f-650d-49df-b1c1-994c8cb00f6a/demo_interactive_setmode/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/Interactive/setMode/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/Interactive/setMode/data.js":"export default {\n nodes: [\n {\n id: 'node1',\n x: 100,\n y: 200,\n },\n {\n id: 'node2',\n x: 300,\n y: 200,\n },\n {\n id: 'node3',\n x: 300,\n y: 300,\n },\n ],\n edges: [\n {\n id: 'edge1',\n target: 'node2',\n source: 'node1',\n },\n ],\n};\n","pages/Interactive/setMode/index.acss":"/* required by usingComponents */","pages/Interactive/setMode/index.axml":"<view class=\"page-section-demo\">\n <button type=\"primary\" onTap=\"openOne\">{{currentMode}}</button>\n</view>\n<f6-canvas\n width=\"{{width}}\"\n height=\"{{height}}\"\n forceMini=\"{{forceMini}}\"\n pixelRatio=\"{{pixelRatio}}\"\n onTouchEvent=\"handleTouch\"\n onInit=\"handleInit\"\n></f6-canvas>","pages/Interactive/setMode/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport data from './data';\n\n/**\n * setMode\n */\nlet modeNum = 0; // 用来标记选择的模式\nconst modeList = ['默认模式', '添加节点模式', '添加边模式'];\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 currentMode: '请选择模式',\n },\n\n // 选项框\n openOne() {\n my.optionsSelect({\n title: '模式选择',\n optionsOne: ['默认模式', '添加节点模式', '添加边模式'],\n selectedOneIndex: 0, // 默认选项的索引下标\n success: (res) => {\n // my.alert({\n // content: res\n // });\n modeNum = res.selectedOneIndex;\n this.setData({\n currentMode: modeList[modeNum],\n });\n switch (modeNum) {\n case 0:\n this.graph.setMode('default');\n console.log('default');\n break;\n case 1:\n this.graph.setMode('addNode');\n console.log('addNode');\n break;\n case 2:\n this.graph.setMode('addEdge');\n console.log('addEdge');\n break;\n }\n },\n });\n },\n\n onLoad() {\n // 同步获取window的宽高\n const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();\n\n // 注册自定义节点\n let addedCount = 0;\n // Register a custom behavior: add a node when user click the blank part of canvas\n F6.registerBehavior('click-add-node', {\n // Set the events and the corresponding responsing function for this behavior\n getEvents() {\n // The event is canvas:click, the responsing function is onClick\n return {\n 'canvas:click': 'onClick',\n };\n },\n // Click event\n onClick(ev) {\n const self = this;\n const { graph } = self;\n // Add a new node\n graph.addItem('node', {\n x: ev.canvasX,\n y: ev.canvasY,\n id: `node-${addedCount}`, // Generate the unique id\n });\n addedCount++;\n },\n });\n // Register a custom behavior: click two end nodes to add an edge\n F6.registerBehavior('click-add-edge', {\n // Set the events and the corresponding responsing function for this behavior\n getEvents() {\n return {\n 'node:click': 'onClick', // The event is canvas:click, the responsing function is onClick\n mousemove: 'onMousemove', // The event is mousemove, the responsing function is onMousemove\n 'edge:click': 'onEdgeClick', // The event is edge:click, the responsing function is onEdgeClick\n };\n },\n // The responsing function for node:click defined in getEvents\n onClick(ev) {\n const self = this;\n const node = ev.item;\n const { graph } = self;\n // The position where the mouse clicks\n // const point = { x: ev.x, y: ev.y };\n const model = node.getModel();\n if (self.addingEdge && self.edge) {\n graph.updateItem(self.edge, {\n target: model.id,\n });\n\n self.edge = null;\n self.addingEdge = false;\n } else {\n // Add anew edge, the end node is the current node user clicks\n self.edge = graph.addItem('edge', {\n source: model.id,\n target: model.id,\n });\n self.addingEdge = true;\n }\n },\n // The responsing function for mousemove defined in getEvents\n onMousemove(ev) {\n const self = this;\n // The current position the mouse clicks\n const point = { x: ev.x, y: ev.y };\n if (self.addingEdge && self.edge) {\n // Update the end node to the current node the mouse clicks\n self.graph.updateItem(self.edge, {\n target: point,\n });\n }\n },\n // The responsing function for edge:click defined in getEvents\n onEdgeClick(ev) {\n const self = this;\n const currentEdge = ev.item;\n if (self.addingEdge && self.edge === currentEdge) {\n self.graph.removeItem(self.edge);\n self.edge = null;\n self.addingEdge = false;\n }\n },\n });\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 // 创建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: 60,\n // The sets of behavior modes\n modes: {\n // Defualt mode\n default: ['drag-node', 'click-select'],\n // Adding node mode\n addNode: ['click-add-node', 'click-select'],\n // Adding edge mode\n addEdge: ['click-add-edge', 'click-select'],\n },\n // The node styles in different states\n nodeStateStyles: {\n // The node styles in selected state\n selected: {\n stroke: '#666',\n lineWidth: 2,\n fill: 'steelblue',\n },\n },\n });\n\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n },\n});\n","pages/Interactive/setMode/index.json":"{\n \"defaultTitle\": \"setMode\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/Interactive/setMode/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":"5e429457439661eec1e426f98b73e65c.json","size":691953,"url":"https://gw.alipayobjects.com/os/f6/497269a3-22bd-4887-95d5-b8eb66e738e1/demo_interactive_setmode/dist/herbox/5e429457439661eec1e426f98b73e65c.json","ETag":"5E429457439661EEC1E426F98B73E65C","type":"json"}],"name":"pages/Interactive/setMode/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}