{"dependencies":[{"name":"4b7e4e985bdf5ac99e2d83e2b314ff3b.json","size":10981766,"url":"https://gw.alipayobjects.com/os/f6/4b7be309-aea6-4a94-b10c-b81ea21bec2f/tutorial-layout/dependencies/herbox/4b7e4e985bdf5ac99e2d83e2b314ff3b.json","ETag":"4B7E4E985BDF5AC99E2D83E2B314FF3B","type":"json"},{"name":"9c52b947e40d479612c174af26832104.json","size":5210078,"url":"https://gw.alipayobjects.com/os/f6/770ff92e-2190-4cd7-ba97-0b9e105397f7/tutorial-layout/dependencies/herbox/9c52b947e40d479612c174af26832104.json","ETag":"9C52B947E40D479612C174AF26832104","type":"json"}],"sourceCode":{"app.acss":"page {\n background: #f7f7f7;\n}\n","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":"{\n \"pages\": [\n \"pages/index/index\"\n ],\n \"window\": {\n \"defaultTitle\": \"F6 demo\",\n \"allowsBounceVertical\": \"NO\"\n }\n}\n","mini.project.json":"{\n \"enableAppxNg\": true,\n \"component2\": true\n}","package.json":"{\n \"name\": \"f6-demo\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"app.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"@antv/f6\": \"^0.0.5\",\n \"@antv/f6-alipay\": \"^0.0.2\",\n \"@babel/runtime\": \"^7.14.0\"\n }\n}\n","pages/index/data.js":"export default {\n \"nodes\": [\n {\"id\": \"0\", \"label\": \"n0\", \"class\": \"c0\",\"x\": 1000, \"y\": -100 },\n {\"id\": \"1\", \"label\": \"n1\", \"class\": \"c0\",\"x\": 300, \"y\": -10 },\n {\"id\": \"2\", \"label\": \"n2\", \"class\": \"c0\",\"x\": 10, \"y\": 10 },\n {\"id\": \"3\", \"label\": \"n3\", \"class\": \"c0\",\"x\": 320, \"y\": -100 },\n {\"id\": \"4\", \"label\": \"n4\", \"class\": \"c0\",\"x\": 100, \"y\": 900 },\n {\"id\": \"5\", \"label\": \"n5\", \"class\": \"c0\",\"x\": 120, \"y\": 213 },\n {\"id\": \"6\", \"label\": \"n6\", \"class\": \"c1\",\"x\": 543, \"y\": 12 },\n {\"id\": \"7\", \"label\": \"n7\", \"class\": \"c1\",\"x\": 543, \"y\": -100 },\n {\"id\": \"8\", \"label\": \"n8\", \"class\": \"c1\",\"x\": 1, \"y\": 0 },\n {\"id\": \"9\", \"label\": \"n9\", \"class\": \"c1\",\"x\": 0, \"y\": -222 },\n {\"id\": \"10\", \"label\": \"n10\", \"class\": \"c1\",\"x\": 435, \"y\": 69 },\n {\"id\": \"11\", \"label\": \"n11\", \"class\": \"c1\",\"x\": 23, \"y\": 10 },\n {\"id\": \"12\", \"label\": \"n12\", \"class\": \"c1\",\"x\": -129, \"y\": 39 },\n {\"id\": \"13\", \"label\": \"n13\", \"class\": \"c2\",\"x\": 234, \"y\": 843 },\n {\"id\": \"14\", \"label\": \"n14\", \"class\": \"c2\",\"x\": -301, \"y\": 129 },\n {\"id\": \"15\", \"label\": \"n15\", \"class\": \"c2\",\"x\": -20, \"y\": -76 },\n {\"id\": \"16\", \"label\": \"n16\", \"class\": \"c2\",\"x\": 1220, \"y\": -34 },\n {\"id\": \"17\", \"label\": \"n17\", \"class\": \"c2\",\"x\": -10, \"y\": 954 },\n {\"id\": \"18\", \"label\": \"n18\", \"class\": \"c2\",\"x\": 492, \"y\": 123 },\n {\"id\": \"19\", \"label\": \"n19\", \"class\": \"c2\",\"x\": 123, \"y\": -241 }\n ],\n \"edges\": [\n {\"source\": \"0\", \"target\": \"1\", \"label\": \"e0-1\", \"weight\": 1 },\n {\"source\": \"0\", \"target\": \"2\", \"label\": \"e0-2\", \"weight\": 2 },\n {\"source\": \"0\", \"target\": \"3\", \"label\": \"e0-3\", \"weight\": 3 },\n {\"source\": \"0\", \"target\": \"4\", \"label\": \"e0-4\", \"weight\": 1.4 },\n {\"source\": \"0\", \"target\": \"5\", \"label\": \"e0-5\", \"weight\": 2 },\n {\"source\": \"0\", \"target\": \"7\", \"label\": \"e0-7\", \"weight\": 2 },\n {\"source\": \"0\", \"target\": \"8\", \"label\": \"e0-8\", \"weight\": 2 },\n {\"source\": \"0\", \"target\": \"9\", \"label\": \"e0-9\", \"weight\": 1.3 },\n {\"source\": \"0\", \"target\": \"10\", \"label\": \"e0-10\", \"weight\": 1.5 },\n {\"source\": \"0\", \"target\": \"11\", \"label\": \"e0-11\", \"weight\": 1 },\n {\"source\": \"0\", \"target\": \"13\", \"label\": \"e0-13\", \"weight\": 10 },\n {\"source\": \"0\", \"target\": \"14\", \"label\": \"e0-14\", \"weight\": 2 },\n {\"source\": \"0\", \"target\": \"15\", \"label\": \"e0-15\", \"weight\": 0.5 },\n {\"source\": \"0\", \"target\": \"16\", \"label\": \"e0-16\", \"weight\": 0.8 },\n {\"source\": \"2\", \"target\": \"3\", \"label\": \"e2-3\", \"weight\": 1 },\n {\"source\": \"4\", \"target\": \"5\", \"label\": \"e4-5\", \"weight\": 1.4 },\n {\"source\": \"4\", \"target\": \"6\", \"label\": \"e4-6\", \"weight\": 2.1 },\n {\"source\": \"5\", \"target\": \"6\", \"label\": \"e5-6\", \"weight\": 1.9 },\n {\"source\": \"7\", \"target\": \"13\", \"label\": \"e7-13\", \"weight\": 0.5 },\n {\"source\": \"8\", \"target\": \"14\", \"label\": \"e8-14\", \"weight\": 0.8 },\n {\"source\": \"9\", \"target\": \"10\", \"label\": \"e9-10\", \"weight\": 0.2 },\n {\"source\": \"10\", \"target\": \"14\", \"label\": \"e10-14\", \"weight\": 1 },\n {\"source\": \"10\", \"target\": \"12\", \"label\": \"e10-12\", \"weight\": 1.2 },\n {\"source\": \"11\", \"target\": \"14\", \"label\": \"e11-14\", \"weight\": 1.2 },\n {\"source\": \"12\", \"target\": \"13\", \"label\": \"e12-13\", \"weight\": 2.1 },\n {\"source\": \"16\", \"target\": \"17\", \"label\": \"e16-17\", \"weight\": 2.5 },\n {\"source\": \"16\", \"target\": \"18\", \"label\": \"e16-18\", \"weight\": 3 },\n {\"source\": \"17\", \"target\": \"18\", \"label\": \"e17-18\", \"weight\": 2.6 },\n {\"source\": \"18\", \"target\": \"19\", \"label\": \"e18-19\", \"weight\": 1.6 }\n ]\n}","pages/index/index.acss":"/* required by usingComponents */","pages/index/index.axml":"<f6-canvas\n width=\"{{width}}\"\n height=\"{{height}}\"\n forceMini=\"{{false}}\"\n pixelRatio=\"{{pixelRatio}}\"\n onInit=\"onCanvasInit\"\n onTouchEvent=\"onTouch\"\n/>\n","pages/index/index.js":"import F6 from '@antv/f6';\nimport forceLayout from '@antv/f6/dist/extends/layout/forceLayout';\nimport data from './data';\n\nF6.registerLayout('force', forceLayout);\n\nconst nodes = data.nodes;\nconst edges = data.edges;\n\nnodes.forEach((node) => {\n if (!node.style) {\n node.style = {};\n }\n node.style.lineWidth = 1;\n node.style.stroke = '#666';\n node.style.fill = 'steelblue';\n switch (node.class) {\n case 'c0': {\n node.type = 'circle';\n break;\n }\n case 'c1': {\n node.type = 'rect';\n node.size = [35, 20];\n break;\n }\n case 'c2': {\n node.type = 'ellipse';\n node.size = [35, 20];\n break;\n }\n }\n});\nedges.forEach((edge) => {\n if (!edge.style) {\n edge.style = {};\n }\n edge.style.lineWidth = edge.weight;\n edge.style.opacity = 0.6;\n edge.style.stroke = 'grey';\n});\n\nPage({\n data: {\n width: 300,\n height: 400,\n pixelRatio: 1,\n },\n onLoad() {\n const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();\n this.setData({\n width: windowWidth,\n height: windowHeight,\n pixelRatio: pixelRatio,\n });\n },\n onCanvasInit(ctx, rect, canvas, renderer) {\n console.log(ctx, rect, canvas, renderer);\n this.graph = new F6.Graph({\n context: ctx,\n renderer,\n width: this.data.width,\n height: this.data.height,\n defaultNode: {\n labelCfg: {\n style: {\n fill: '#fff'\n }\n }\n },\n defaultEdge: {\n labelCfg: {\n autoRotate: true\n }\n },\n nodeStateStyles: {\n tap: {\n stroke: '#000',\n lineWidth: 3\n }\n },\n edgeStateStyles: {\n tap: {\n stroke: 'steelblue'\n }\n },\n layout: {\n type: 'force',\n linkDistance: 100,\n preventOverlap: true,\n nodeStrength: -30,\n edgeStrength: 0.1\n },\n modes: {\n default: ['drag-node', 'drag-canvas', 'zoom-canvas']\n },\n fitCenter: true,\n });\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n\n // 点击节点\n this.graph.on('node:tap', (e) => {\n // 先将所有当前是 tap 状态的节点置为非 tap 状态\n const tapNodes = this.graph.findAllByState('node', 'tap');\n tapNodes.forEach((cn) => {\n this.graph.setItemState(cn, 'tap', false);\n });\n const nodeItem = e.item; // 获取被点击的节点元素对象\n this.graph.setItemState(nodeItem, 'tap', true); // 设置当前节点的 tap 状态为 true\n });\n\n // 点击边\n this.graph.on('edge-shape:tap', (e) => {\n // 先将所有当前是 tap 状态的边置为非 tap 状态\n const tapEdges = this.graph.findAllByState('edge', 'tap');\n tapEdges.forEach((ce) => {\n this.graph.setItemState(ce, 'tap', false);\n });\n const edgeItem = e.item; // 获取被点击的边元素对象\n this.graph.setItemState(edgeItem, 'tap', true); // 设置当前边的 tap 状态为 true\n });\n },\n onTouch(e) {\n this.graph.emitEvent(e);\n },\n});\n","pages/index/index.json":"{\n \"defaultTitle\": \"f6-demo\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}"},"dist":[{"name":"7015b07ae5dd263757bc1a9f9ddd1657.json","size":725109,"url":"https://gw.alipayobjects.com/os/f6/b68a6428-602f-49b3-b2da-a62594a5f39f/tutorial-layout/dist/herbox/7015b07ae5dd263757bc1a9f9ddd1657.json","ETag":"7015B07AE5DD263757BC1A9F9DDD1657","type":"json"}],"name":"f6-demo","description":"","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}