{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/82d6ef29-da9a-43ef-94a2-f5ddf0b1b5e6/demo_scenecase_customflow/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/ba16dc6b-4bed-4cd6-91ab-4bc9161bdc50/demo_scenecase_customflow/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/customFlow/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/customFlow/data.js":"export default {\n nodes: [\n {\n id: '1',\n label: 'Company1',\n },\n {\n id: '2',\n label: 'Company2',\n },\n {\n id: '3',\n label: 'Company3',\n },\n {\n id: '4',\n label: 'Company4',\n },\n {\n id: '5',\n label: 'Company5',\n },\n {\n id: '6',\n label: 'Company6',\n },\n {\n id: '7',\n label: 'Company7',\n },\n {\n id: '8',\n label: 'Company8',\n },\n {\n id: '9',\n label: 'Company9',\n },\n ],\n edges: [\n {\n source: '1',\n target: '2',\n data: {\n type: 'A',\n amount: '100,000 Yuan',\n date: '2019-08-03',\n },\n },\n {\n source: '1',\n target: '3',\n data: {\n type: 'B',\n amount: '100,000 Yuan',\n date: '2019-08-03',\n },\n },\n {\n source: '2',\n target: '5',\n data: {\n type: 'C',\n amount: '100,000 Yuan',\n date: '2019-08-03',\n },\n },\n {\n source: '5',\n target: '6',\n data: {\n type: 'B',\n amount: '100,000 Yuan',\n date: '2019-08-03',\n },\n },\n {\n source: '3',\n target: '4',\n data: {\n type: 'C',\n amount: '100,000 Yuan',\n date: '2019-08-03',\n },\n },\n {\n source: '4',\n target: '7',\n data: {\n type: 'B',\n amount: '100,000 Yuan',\n date: '2019-08-03',\n },\n },\n {\n source: '1',\n target: '8',\n data: {\n type: 'B',\n amount: '100,000 Yuan',\n date: '2019-08-03',\n },\n },\n {\n source: '1',\n target: '9',\n data: {\n type: 'C',\n amount: '100,000 Yuan',\n date: '2019-08-03',\n },\n },\n ],\n};\n","pages/SceneCase/customFlow/index.acss":"/* required by usingComponents */","pages/SceneCase/customFlow/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/customFlow/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport data from './data';\nimport dagreLayout from '@antv/f6/dist/extends/layout/dagreLayout';\n/**\n * customFlow\n */\nimport { isObject } from '@antv/util';\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 F6.registerLayout('dagre', dagreLayout);\n\n const colorMap = {\n A: '#72CC4A',\n B: '#1A91FF',\n C: '#FFAA15',\n };\n F6.registerNode(\n 'round-rect',\n {\n drawShape: function drawShape(cfg, group) {\n const { width } = cfg.style;\n const { stroke } = cfg.style;\n const rect = group.addShape('rect', {\n attrs: {\n x: -width / 2,\n y: -15,\n width,\n height: 30,\n radius: 15,\n stroke,\n lineWidth: 1.2,\n fillOpacity: 1,\n },\n name: 'rect-shape',\n });\n group.addShape('circle', {\n attrs: {\n x: -width / 2,\n y: 0,\n r: 3,\n fill: stroke,\n },\n name: 'circle-shape',\n });\n group.addShape('circle', {\n attrs: {\n x: width / 2,\n y: 0,\n r: 3,\n fill: stroke,\n },\n name: 'circle-shape2',\n });\n return rect;\n },\n getAnchorPoints: function getAnchorPoints() {\n return [\n [0, 0.5],\n [1, 0.5],\n ];\n },\n update: function update(cfg, item) {\n const group = item.getContainer();\n const children = group.get('children');\n const node = children[0];\n const circleLeft = children[1];\n const circleRight = children[2];\n\n const { stroke } = cfg.style;\n\n if (stroke) {\n node.attr('stroke', stroke);\n circleLeft.attr('fill', stroke);\n circleRight.attr('fill', stroke);\n }\n },\n },\n 'single-node',\n );\n\n F6.registerEdge('fund-polyline', {\n itemType: 'edge',\n draw: function draw(cfg, group) {\n const { startPoint } = cfg;\n const { endPoint } = cfg;\n const { stroke } = cfg.style;\n\n const Ydiff = endPoint.y - startPoint.y;\n\n const slope = Ydiff !== 0 ? Math.min(500 / Math.abs(Ydiff), 20) : 0;\n\n const cpOffset = slope > 15 ? 0 : 16;\n const offset = Ydiff < 0 ? cpOffset : -cpOffset;\n\n const line1EndPoint = {\n x: startPoint.x + slope,\n y: endPoint.y + offset,\n };\n const line2StartPoint = {\n x: line1EndPoint.x + cpOffset,\n y: endPoint.y,\n };\n\n // 控制点坐标\n const controlPoint = {\n x:\n ((line1EndPoint.x - startPoint.x) * (endPoint.y - startPoint.y)) /\n (line1EndPoint.y - startPoint.y) +\n startPoint.x,\n y: endPoint.y,\n };\n\n let path = [\n ['M', startPoint.x, startPoint.y],\n ['L', line1EndPoint.x, line1EndPoint.y],\n ['Q', controlPoint.x, controlPoint.y, line2StartPoint.x, line2StartPoint.y],\n ['L', endPoint.x, endPoint.y],\n ];\n\n if (Math.abs(Ydiff) <= 5) {\n path = [\n ['M', startPoint.x, startPoint.y],\n ['L', endPoint.x, endPoint.y],\n ];\n }\n\n const endArrow = cfg.style && cfg.style.endArrow ? cfg.style.endArrow : false; // 不支持？.\n if (isObject(endArrow)) endArrow.fill = stroke;\n const line = group.addShape('path', {\n attrs: {\n path,\n stroke: colorMap[cfg.data && cfg.data.type],\n lineWidth: 1.2,\n endArrow,\n },\n name: 'path-shape',\n });\n\n const labelLeftOffset = 0;\n const labelTopOffset = 8;\n // amount\n const amount = group.addShape('text', {\n attrs: {\n text: cfg.data && cfg.data.amount,\n x: line2StartPoint.x + labelLeftOffset,\n y: endPoint.y - labelTopOffset - 2,\n fontSize: 14,\n textAlign: 'left',\n textBaseline: 'middle',\n fill: '#000000D9',\n },\n name: 'text-shape-amount',\n });\n // type\n group.addShape('text', {\n attrs: {\n text: cfg.data && cfg.data.type,\n x: line2StartPoint.x + labelLeftOffset,\n y: endPoint.y - labelTopOffset - amount.getBBox().height - 2,\n fontSize: 10,\n textAlign: 'left',\n textBaseline: 'middle',\n fill: '#000000D9',\n },\n name: 'text-shape-type',\n });\n // date\n group.addShape('text', {\n attrs: {\n text: cfg.data && cfg.data.date,\n x: line2StartPoint.x + labelLeftOffset,\n y: endPoint.y + labelTopOffset + 4,\n fontSize: 12,\n fontWeight: 300,\n textAlign: 'left',\n textBaseline: 'middle',\n fill: '#000000D9',\n },\n name: 'text-shape-date',\n });\n return line;\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 layout: {\n type: 'dagre',\n rankdir: 'LR',\n nodesep: 30,\n ranksep: 100,\n },\n modes: {\n default: ['drag-canvas'],\n },\n defaultNode: {\n type: 'round-rect',\n labelCfg: {\n style: {\n fill: '#000000A6',\n fontSize: 10,\n },\n },\n style: {\n stroke: '#72CC4A',\n width: 150,\n },\n },\n defaultEdge: {\n type: 'fund-polyline',\n },\n });\n\n this.graph.data(data);\n this.graph.render();\n // this.graph.fitView();\n\n const edges = this.graph.getEdges();\n edges.forEach(function(edge) {\n const line = edge.getKeyShape();\n const stroke = line.attr('stroke');\n const targetNode = edge.getTarget();\n targetNode.update({\n style: {\n stroke,\n },\n });\n });\n this.graph.paint();\n },\n});\n","pages/SceneCase/customFlow/index.json":"{\n \"defaultTitle\": \"customFlow\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/SceneCase/customFlow/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}\n\n.f6-canvas {\n z-index: 10;\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":"9c3346a35a8182dba97939f1814b6374.json","size":859665,"url":"https://gw.alipayobjects.com/os/f6/7a8c4305-f9e3-4c80-9c52-c1194708b758/demo_scenecase_customflow/dist/herbox/9c3346a35a8182dba97939f1814b6374.json","ETag":"9C3346A35A8182DBA97939F1814B6374","type":"json"}],"name":"pages/SceneCase/customFlow/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}