{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/f8d4f1cb-ccf0-4291-98c6-a5cc4c1e57fc/demo_elements_crect/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/6fa18179-60a2-49f6-a6ba-74e481489ebc/demo_elements_crect/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/Elements/cRect/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/Elements/cRect/data.js":"export default {\n nodes: [\n { id: 'node1', x: 250, y: 200, comboId: 'combo1' },\n { id: 'node2', x: 300, y: 200, comboId: 'combo1' },\n { id: 'node3', x: 100, y: 200, comboId: 'combo3' },\n ],\n combos: [\n { id: 'combo1', label: 'Combo 1', parentId: 'combo2' },\n { id: 'combo2', label: 'Combo 2' },\n { id: 'combo3', label: 'Combo 3', collapsed: true },\n ],\n};\n","pages/Elements/cRect/index.acss":"/* required by usingComponents */","pages/Elements/cRect/index.axml":"<text>Click the bottom marker to collapse/expand the combo.</text>\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/Elements/cRect/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport data from './data';\n/**\n * cRect\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 // The symbols for the marker inside the combo\n const collapseIcon = (x, y, r) => {\n return [\n ['M', x - r, y],\n ['a', r, r, 0, 1, 0, r * 2, 0],\n ['a', r, r, 0, 1, 0, -r * 2, 0],\n ['M', x - r + 4, y],\n ['L', x - r + 2 * r - 4, y],\n ];\n };\n const expandIcon = (x, y, r) => {\n return [\n ['M', x - r, y],\n ['a', r, r, 0, 1, 0, r * 2, 0],\n ['a', r, r, 0, 1, 0, -r * 2, 0],\n ['M', x - r + 4, y],\n ['L', x - r + 2 * r - 4, y],\n ['M', x - r + r, y - r + 4],\n ['L', x, y + r - 4],\n ];\n };\n\n F6.registerCombo(\n 'cRect',\n {\n drawShape: function drawShape(cfg, group) {\n const self = this;\n // Get the padding from the configuration\n cfg.padding = cfg.padding || [50, 20, 20, 20];\n // Get the shape's style, where the style.width and style.height correspond to the width and height in the figure of Illustration of Built-in Rect Combo\n const style = self.getShapeStyle(cfg);\n // Add a rect shape as the keyShape which is the same as the extended rect Combo\n const rect = group.addShape('rect', {\n attrs: {\n ...style,\n x: -style.width / 2 - (cfg.padding[3] - cfg.padding[1]) / 2,\n y: -style.height / 2 - (cfg.padding[0] - cfg.padding[2]) / 2,\n width: style.width,\n height: style.height,\n },\n draggable: true,\n name: 'combo-keyShape',\n });\n // Add the circle on the right\n group.addShape('marker', {\n attrs: {\n ...style,\n fill: '#fff',\n opacity: 1,\n // cfg.style.width and cfg.style.heigth correspond to the innerWidth and innerHeight in the figure of Illustration of Built-in Rect Combo\n x: cfg.style.width / 2 + cfg.padding[1],\n y: (cfg.padding[2] - cfg.padding[0]) / 2,\n r: 10,\n symbol: collapseIcon,\n },\n draggable: true,\n name: 'combo-marker-shape',\n });\n return rect;\n },\n // Define the updating logic of the right circle\n afterUpdate: function afterUpdate(cfg, combo) {\n const group = combo.get('group');\n // Find the circle shape in the graphics group of the Combo by name\n const marker = group.find((ele) => ele.get('name') === 'combo-marker-shape');\n // Update the position of the right circle\n marker.attr({\n // cfg.style.width and cfg.style.heigth correspond to the innerWidth and innerHeight in the figure of Illustration of Built-in Rect Combo\n x: cfg.style.width / 2 + cfg.padding[1],\n y: (cfg.padding[2] - cfg.padding[0]) / 2,\n // The property 'collapsed' in the combo data represents the collapsing state of the Combo\n // Update the symbol according to 'collapsed'\n symbol: cfg.collapsed ? expandIcon : collapseIcon,\n });\n },\n },\n 'rect',\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: 60,\n\n // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos\n groupByTypes: false,\n // Configure the combos globally\n defaultCombo: {\n // The type of the combos. You can also assign type in the data of combos\n type: 'cRect',\n // ... Other global configurations for combos\n },\n modes: {\n default: ['drag-combo', 'drag-node', 'drag-canvas'],\n },\n });\n\n // collapse/expand when click the marker\n this.graph.on('combo:tap', (e) => {\n if (e.target.get('name') === 'combo-marker-shape') {\n // graph.collapseExpandCombo(e.item.getModel().id);\n this.graph.collapseExpandCombo(e.item);\n if (this.graph.get('layout')) this.graph.layout();\n else this.graph.refreshPositions();\n }\n });\n\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n },\n});\n","pages/Elements/cRect/index.json":"{\n \"defaultTitle\": \"cRect\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/Elements/cRect/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":"e93c81cdec3f7c72ad16e4af925378ea.json","size":723602,"url":"https://gw.alipayobjects.com/os/f6/2d29d56e-e67b-4a7a-9b7e-f0eabe793ea0/demo_elements_crect/dist/herbox/e93c81cdec3f7c72ad16e4af925378ea.json","ETag":"E93C81CDEC3F7C72AD16E4AF925378EA","type":"json"}],"name":"pages/Elements/cRect/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}