{"dependencies":[{"name":"78f9fc7ed987bf72f0fae6b99573fddb.json","size":10993386,"url":"https://gw.alipayobjects.com/os/f6/77929edd-abbf-4df2-a37e-da34e4bb027d/demo_scenecase_knowledgetreegraph/dependencies/herbox/78f9fc7ed987bf72f0fae6b99573fddb.json","ETag":"78F9FC7ED987BF72F0FAE6B99573FDDB","type":"json"},{"name":"0d7b758fdc47c7af5db47deeda4d99d4.json","size":5210534,"url":"https://gw.alipayobjects.com/os/f6/6916d899-e49a-481a-95db-2de9baed8387/demo_scenecase_knowledgetreegraph/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/knowledgeTreeGraph/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/knowledgeTreeGraph/data.js":"export default {\n id: '200000004',\n tooltip: 'Thing',\n label: '事物',\n description: null,\n descriptionZh: null,\n depth: 3,\n subTypeCount: 9,\n status: 0,\n children: [\n {\n id: '500000061',\n tooltip: 'Person',\n label: '自然人',\n description: null,\n descriptionZh: null,\n depth: 1,\n subTypeCount: 1,\n status: 0,\n children: [\n {\n id: '707000085',\n tooltip: 'FilmPerson',\n label: '电影人',\n description: null,\n descriptionZh: null,\n depth: 5,\n subTypeCount: 3,\n status: 1,\n children: [\n {\n id: '707000090',\n tooltip: 'FilmDirector',\n label: '电影导演',\n description: null,\n descriptionZh: null,\n depth: 0,\n subTypeCount: 0,\n status: 1,\n children: [],\n },\n {\n id: '707000091',\n tooltip: 'FilmWriter',\n label: '电影编剧',\n description: null,\n descriptionZh: null,\n depth: 4,\n subTypeCount: 0,\n status: 1,\n children: [],\n },\n {\n id: '707000092',\n tooltip: 'FilmStar',\n label: '电影主演',\n description: null,\n descriptionZh: null,\n depth: 4,\n subTypeCount: 0,\n status: 1,\n children: [],\n },\n ],\n },\n {\n id: '707000086',\n tooltip: 'MusicPerson',\n label: '音乐人',\n description: null,\n descriptionZh: null,\n depth: 17,\n subTypeCount: 2,\n status: 1,\n children: [],\n },\n ],\n },\n {\n id: '200000005',\n tooltip: 'Music',\n label: '音乐',\n description: null,\n descriptionZh: null,\n depth: 3,\n subTypeCount: 2,\n status: 1,\n children: [],\n },\n {\n id: '707000128',\n tooltip: 'Film',\n label: '电影',\n description: null,\n descriptionZh: null,\n depth: 4,\n subTypeCount: 0,\n status: 1,\n children: [\n {\n id: '7070032328',\n tooltip: 'Comedy',\n label: '喜剧',\n description: null,\n descriptionZh: null,\n depth: 4,\n operation: 'C',\n subTypeCount: 0,\n status: 1,\n children: [],\n },\n ],\n },\n {\n id: '707000095',\n tooltip: 'FilmGenre',\n label: '电影类别',\n description: null,\n descriptionZh: null,\n depth: 4,\n subTypeCount: 0,\n status: 1,\n children: [],\n },\n {\n id: '702000021',\n tooltip: 'Organization',\n label: '机构',\n description: null,\n descriptionZh: null,\n depth: 47,\n subTypeCount: 1,\n status: 0,\n children: [\n {\n id: '500000063',\n tooltip: 'Company',\n label: '公司',\n description: null,\n descriptionZh: null,\n depth: 4,\n subTypeCount: 2,\n status: 1,\n children: [\n {\n id: '707000093',\n tooltip: 'FilmCompany',\n label: '电影公司',\n description: null,\n descriptionZh: null,\n depth: 4,\n subTypeCount: 0,\n status: 1,\n children: [],\n },\n {\n id: '707000094',\n tooltip: 'MusicCompany',\n label: '音乐公司',\n description: null,\n descriptionZh: null,\n depth: 2,\n subTypeCount: 0,\n status: 1,\n children: [],\n },\n ],\n },\n ],\n },\n ],\n};\n","pages/SceneCase/knowledgeTreeGraph/index.acss":"/* required by usingComponents */","pages/SceneCase/knowledgeTreeGraph/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/SceneCase/knowledgeTreeGraph/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../utils/context';\nimport TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';\nimport data from './data';\n\n/**\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 // 注册自定义树，节点等\n F6.registerGraph('TreeGraph', TreeGraph);\n\n const minWidth = 60;\n\n // TODO:这里需要定义两次，因为onLoad()里面传不到,updateChart()里面,如果定义在Page外面是不是就是全局的\n const BaseConfig = {\n nameFontSize: 12,\n childCountWidth: 22,\n countMarginLeft: 0,\n itemPadding: 16,\n nameMarginLeft: 4,\n rootPadding: 18,\n };\n F6.registerNode('treeNode', {\n draw: (cfg, group) => {\n const { label, collapsed, selected, children, depth } = cfg;\n const rootNode = depth === 0;\n const hasChildren = children && children.length !== 0;\n\n const {\n childCountWidth,\n countMarginLeft,\n itemPadding,\n nameMarginLeft,\n rootPadding,\n } = BaseConfig;\n\n let width = 0;\n const height = 28;\n const x = 0;\n const y = -height / 2;\n\n // 名称文本\n const text = group.addShape('text', {\n attrs: {\n text: label,\n x: x * 2,\n y,\n textAlign: 'left',\n textBaseline: 'top',\n fontFamily: 'PingFangSC-Regular',\n },\n cursor: 'pointer',\n name: 'name-text-shape',\n });\n const textWidth = text.getBBox().width;\n width = textWidth + itemPadding + nameMarginLeft;\n\n width = width < minWidth ? minWidth : width;\n\n if (!rootNode && hasChildren) {\n width += countMarginLeft;\n width += childCountWidth;\n }\n\n const keyShapeAttrs = {\n x,\n y,\n width,\n height,\n radius: 4,\n };\n\n // keyShape根节点选中样式\n if (rootNode && selected) {\n keyShapeAttrs.fill = '#e8f7ff';\n keyShapeAttrs.stroke = '#e8f7ff';\n }\n const keyShape = group.addShape('rect', {\n attrs: keyShapeAttrs,\n name: 'root-key-shape-rect-shape',\n });\n\n if (!rootNode) {\n // 底部横线\n group.addShape('path', {\n attrs: {\n path: [\n ['M', x - 1, 0],\n ['L', width, 0],\n ],\n stroke: '#AAB7C4',\n lineWidth: 1,\n },\n name: 'node-path-shape',\n });\n }\n\n const mainX = x - 10;\n const mainY = -height + 15;\n\n if (rootNode) {\n group.addShape('rect', {\n attrs: {\n x: mainX,\n y: mainY,\n width: width + 12,\n height,\n radius: 14,\n fill: '#e8f7ff',\n cursor: 'pointer',\n },\n name: 'main-shape',\n });\n }\n\n let nameColor = 'rgba(0, 0, 0, .65)';\n if (selected) {\n nameColor = '#40A8FF';\n }\n\n // 名称\n if (rootNode) {\n group.addShape('text', {\n attrs: {\n text: label,\n x: mainX + rootPadding,\n y: 1,\n textAlign: 'left',\n textBaseline: 'middle',\n fill: nameColor,\n fontSize: 12,\n fontFamily: 'PingFangSC-Regular',\n cursor: 'pointer',\n },\n name: 'root-text-shape',\n });\n } else {\n group.addShape('text', {\n attrs: {\n text: label,\n x: selected ? mainX + 6 + nameMarginLeft : mainX + 6,\n y: y - 5,\n textAlign: 'start',\n textBaseline: 'top',\n fill: nameColor,\n fontSize: 12,\n fontFamily: 'PingFangSC-Regular',\n cursor: 'pointer',\n },\n name: 'not-root-text-shape',\n });\n }\n\n // 子类数量\n if (hasChildren && !rootNode) {\n const childCountHeight = 12;\n const childCountX = width - childCountWidth;\n const childCountY = -childCountHeight / 2;\n\n group.addShape('rect', {\n attrs: {\n width: childCountWidth,\n height: 12,\n stroke: collapsed ? '#1890ff' : '#5CDBD3',\n fill: collapsed ? '#fff' : '#E6FFFB',\n x: childCountX,\n y: childCountY,\n radius: 6,\n cursor: 'pointer',\n },\n name: 'child-count-rect-shape',\n });\n group.addShape('text', {\n attrs: {\n text: `${children.length}`,\n fill: 'rgba(0, 0, 0, .65)',\n x: childCountX + childCountWidth / 2,\n y: childCountY + 12,\n fontSize: 10,\n width: childCountWidth,\n textAlign: 'center',\n cursor: 'pointer',\n },\n name: 'child-count-text-shape',\n });\n }\n\n return keyShape;\n },\n });\n\n F6.registerEdge('smooth', {\n draw(cfg, group) {\n const { startPoint, endPoint } = cfg;\n const hgap = Math.abs(endPoint.x - startPoint.x);\n\n const path = [\n ['M', startPoint.x, startPoint.y],\n [\n 'C',\n startPoint.x + hgap / 4,\n startPoint.y,\n endPoint.x - hgap / 2,\n endPoint.y,\n endPoint.x,\n endPoint.y,\n ],\n ];\n\n const shape = group.addShape('path', {\n attrs: {\n stroke: '#AAB7C4',\n path,\n },\n name: 'smooth-path-shape',\n });\n return shape;\n },\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 const BaseConfig = {\n nameFontSize: 12,\n childCountWidth: 22,\n countMarginLeft: 0,\n itemPadding: 16,\n nameMarginLeft: 4,\n rootPadding: 18,\n };\n // 创建F6实例\n\n this.graph = new F6.TreeGraph({\n context: this.ctx,\n renderer: this.renderer,\n width,\n height,\n pixelRatio,\n fitView: true,\n fitViewPadding: 60,\n modes: {\n default: [\n {\n type: 'collapse-expand',\n },\n 'drag-canvas',\n 'zoom-canvas',\n ],\n },\n defaultNode: {\n type: 'treeNode',\n anchorPoints: [\n [0, 0.5],\n [1, 0.5],\n ],\n },\n defaultEdge: {\n type: 'smooth',\n },\n layout: {\n type: 'compactBox', // TODO：为什么这里找不到\n direction: 'LR',\n getId: function getId(d) {\n return d.id;\n },\n getHeight: function getHeight() {\n return 16;\n },\n getWidth: function getWidth(d) {\n const labelWidth = F6.Util.getTextSize(d.label, BaseConfig.nameFontSize)[0];\n const width_ =\n BaseConfig.itemPadding +\n BaseConfig.nameMarginLeft +\n labelWidth +\n BaseConfig.rootPadding +\n BaseConfig.childCountWidth;\n return width_;\n },\n getVGap: function getVGap() {\n return 15;\n },\n getHGap: function getHGap() {\n return 30;\n },\n },\n });\n\n // 注册数据\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n },\n});\n","pages/SceneCase/knowledgeTreeGraph/index.json":"{\n \"defaultTitle\": \"knowledgeTreeGraph\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n","pages/SceneCase/knowledgeTreeGraph/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":"13de390b7a877828f673dcc31fa69517.json","size":749921,"url":"https://gw.alipayobjects.com/os/f6/5896b53b-6fdf-4d5a-9e66-a22590e4916b/demo_scenecase_knowledgetreegraph/dist/herbox/13de390b7a877828f673dcc31fa69517.json","ETag":"13DE390B7A877828F673DCC31FA69517","type":"json"}],"name":"pages/SceneCase/knowledgeTreeGraph/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}