{"dependencies":[{"name":"3577cbe6ca89cfd7663088312a65700d.json","size":11091610,"url":"https://gw.alipayobjects.com/os/f6/dbd05d28-275a-4a25-96b5-fa9538c6f957/demo_interactive_move/dependencies/herbox/3577cbe6ca89cfd7663088312a65700d.json","ETag":"3577CBE6CA89CFD7663088312A65700D","type":"json"},{"name":"395bb3fb2f804a5ba1065d6d7d79a48a.json","size":5106549,"url":"https://gw.alipayobjects.com/os/f6/cce3c84d-ca50-4fe8-8713-f7c9aec9a49b/demo_interactive_move/dependencies/herbox/395bb3fb2f804a5ba1065d6d7d79a48a.json","ETag":"395BB3FB2F804A5BA1065D6D7D79A48A","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/move/index\"]}\n","common/components/block-list/block-list.acss":".block-list-container {\n width: 100%;\n display: flex;\n justify-content: center;\n background-color: #fff;\n}\n\n.block-list {\n display: flex;\n justify-content: start;\n flex-wrap: wrap;\n width: 100%;\n padding-bottom: 20rpx;\n}\n\n.block-item {\n height: 50rpx;\n margin-right: 20rpx;\n margin-bottom: 20rpx;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #333;\n font-size: 24rpx;\n background-color: rgba(245, 245, 245, 0.71);\n padding: 0 18rpx;\n}\n","common/components/block-list/block-list.axml":"<view class=\"block-list-container {{className}}\">\n <view class=\"block-list\">\n <block a:for=\"{{listData}}\">\n <navigator a:if=\"{{item.url}}\" url=\"{{item.url}}\">\n <view class=\"block-item\" onTap=\"onItemTap\" data-name=\"{{item.name}}\">{{item.name}}</view>\n </navigator>\n <view a:else class=\"block-item\" onTap=\"onItemTap\" data-name=\"{{item.name}}\">{{item.name}}</view>\n </block>\n </view>\n</view>\n","common/components/block-list/block-list.js":"Component({\n methods: {\n onItemTap(e) {\n const { onItemTap } = this.props;\n const { name } = e.target.dataset;\n if (onItemTap) {\n onItemTap({ name });\n }\n },\n },\n});\n","common/components/block-list/block-list.json":"{\n \"component\": true\n}\n","common/components/search/search.acss":"page {\n background-color: #fff;\n}\n\n.page {\n padding: 0;\n}\n\n.search-bar {\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 2;\n padding-top: 14rpx;\n overflow: hidden;\n}\n\n.am-search-input {\n height: 35px;\n line-height: 35px;\n}\n\n.am-search-synthetic {\n height: 35px;\n line-height: 35px;\n}\n\n.am-search-value {\n height: 35px;\n}\n\n.am-search-clear {\n height: 35px;\n width: 35px;\n}\n\n.am-search-cancel {\n color: #333;\n}\n\n.search-bar .am-search-input {\n background-color: rgba(0, 0, 0, 0.05);\n}\n\n.search-container {\n box-sizing: border-box;\n padding: 20px 12px;\n}\n\n.history {\n position: relative;\n padding-left: 2px;\n padding-bottom: 1px;\n color: #333;\n font-size: 36rpx;\n font-weight: bold;\n}\n\n.history .clear {\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n height: 40rpx;\n width: 40rpx;\n background-image: url('/image/clear.png');\n background-size: 50%;\n background-position: center;\n background-repeat: no-repeat;\n}\n\n.history-list {\n margin-top: 10px;\n}\n\n.hot {\n padding-left: 2px;\n padding-bottom: 2px;\n color: #333;\n font-size: 36rpx;\n font-weight: bold;\n}\n\n.hot-list {\n margin-top: 10px;\n}\n\n.search-results {\n padding: 16px 12 0 0;\n}\n\n.component-name {\n color: #333;\n margin-right: 10rpx;\n}\n\n.thumb {\n height: 60rpx;\n width: 60rpx;\n margin-right: 30rpx;\n}\n\n.component .am-list-line-bottom::after {\n left: auto;\n right: 0;\n width: calc(100% - 80rpx);\n}\n\n.am-list-body::before {\n display: none;\n}\n\n.am-list-body::after {\n display: none;\n}\n\n.list-header {\n height: 100rpx;\n display: flex;\n align-items: center;\n background-color: #fff;\n color: #333;\n font-weight: bold;\n font-size: 34rpx;\n}\n\n.am-list-header {\n padding: 8px 16px 0;\n}\n\n.no-search-result {\n height: 300px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.no-search-result image {\n width: 87rpx;\n height: 87rpx;\n}\n\n.no-search-result text {\n margin-top: 37rpx;\n color: #999;\n font-size: 28rpx;\n}\n.am-list-text-wrapper {\n width: 100%;\n}\n","common/components/search/search.axml":"<view class=\"page\">\n <view class=\"search-bar\">\n <search-bar\n focus=\"{{true}}\"\n value=\"{{value}}\"\n placeholder=\"搜索你想要的组件和API\"\n onInput=\"onInput\"\n onCancel=\"onCancel\"\n onClear=\"onClear\"\n showCancelButton=\"{{false}}\" />\n </view>\n <view class=\"search-container\" a:if=\"{{componentSuggestions.length === 0 && apiSuggestions.length === 0}}\">\n <view a:if=\"{{value.length === 0}}\">\n <view a:if=\"{{ history.length > 0 }}\" style=\"border-bottom: 1rpx solid #F5F5F5; margin-bottom: 16px;\">\n <view class=\"history\">历史<view class=\"clear\" onTap=\"clear\"></view></view>\n <block-list listData=\"{{history}}\" class=\"history-list\" onItemTap=\"onItemTap\" />\n </view>\n <view>\n <view class=\"hot\">热门</view>\n <block-list listData=\"{{hot}}\" class=\"history-list\" />\n </view>\n </view>\n <view class=\"no-search-result\" a:else>\n <image src=\"/image/icon/no_search_result.png\" />\n <text>未找到搜索结果</text>\n </view>\n </view>\n <view class=\"search-results\" a:else>\n <view a:if=\"{{componentSuggestions.length > 0}}\" class=\"component\">\n <list>\n <view slot=\"header\" class=\"list-header\">组件</view>\n <block a:for=\"{{componentSuggestions}}\">\n <list-item\n arrow=\"{{true}}\"\n multipleLine=\"{{false}}\"\n key=\"items-{{item.name}}\"\n last=\"{{index === componentSuggestions.length - 1}}\">\n <view\n onTap=\"onListItemTap\"\n data-url=\"{{item.path}}\"\n data-name=\"{{item.name}}\"\n style=\"display: flex; align-items: center\">\n <image src=\"{{item.thumb}}\" class=\"thumb\" />\n <text class=\"component-name\">{{item.name}}</text>\n </view>\n </list-item>\n </block>\n </list>\n </view>\n <view a:if=\"{{apiSuggestions.length > 0}}\" class=\"api\">\n <list>\n <view slot=\"header\" class=\"list-header\">API</view>\n <block a:for=\"{{apiSuggestions}}\">\n <list-item\n arrow=\"{{true}}\"\n multipleLine=\"{{false}}\"\n key=\"items-{{item.name}}\"\n last=\"{{index === apiSuggestions.length - 1}}\">\n <view\n onTap=\"onListItemTap\"\n data-url=\"{{item.path}}\"\n data-name=\"{{item.name}}\"\n style=\"display: flex; align-items: center\">\n <image src=\"{{item.thumb}}\" class=\"thumb\" a:if=\"{{thumb}}\" />\n <text class=\"component-name\">{{item.name}}</text>\n </view>\n </list-item>\n </block>\n </list>\n </view>\n </view>\n</view>\n","common/components/search/search.js":"import { debounce } from '../../../common/utils/common';\nimport { componentList } from '../../../utils/process';\n// 搜索推荐\nconst apiList = [];\n\nPage({\n data: {\n value: '',\n history: my.getStorageSync({ key: 'searchHistory' }).data || [],\n hot: [\n { name: '知识图谱树', url: '../../SceneCase/knowledgeTreeGraph/index' },\n { name: '基本弧线图', url: '../../GeneralGraph/basicArcDiagram/index' },\n { name: 'FA气泡图', url: '../../GeneralGraph/forceBubbles/index' },\n { name: '无到有的边', url: '../../Animation/edge_lineGrowth/index' },\n { name: '自定义流向图', url: '../../SceneCase/customFlow/index' },\n { name: '生态树', url: '../../TreeGraph/BasicDendrogram/index' },\n { name: '自定义树中的边', url: '../../TreeGraph/customEdgeTree/index' },\n { name: '基本同心圆布局', url: '../../GeneralGraph/basicConcentric/index' },\n { name: '布局切换', url: '../../GeneralGraph/layoutTranslate/index' },\n ],\n componentSuggestions: [],\n apiSuggestions: [],\n },\n onLoad() {\n this.setData({\n history: my.getStorageSync({ key: 'searchHistory' }).data,\n });\n console.log(my.getStorageSync({ key: 'searchHistory' }).data);\n this.onInput = debounce(this.onInput.bind(this), 400);\n my.setNavigationBar({\n borderBottomColor: '#fff',\n });\n },\n clear() {\n my.confirm({\n content: '确定删除相关历史？',\n success: (res) => {\n if (res.confirm) {\n my.clearStorage();\n this.setData({\n history: [],\n });\n }\n },\n });\n },\n onInput(keyword) {\n this.setData({\n value: keyword,\n });\n const regExp = /[A-Za-z]/;\n if (keyword === '' || (regExp.test(keyword) && keyword.length === 1)) {\n this.setData({\n componentSuggestions: [],\n apiSuggestions: [],\n });\n return;\n }\n const componentSuggestions = [];\n const apiSuggestions = [];\n for (let i = 0; i < componentList.length; i++) {\n if (\n componentList[i].suggestion.toLocaleLowerCase().indexOf(keyword.toLocaleLowerCase()) !== -1\n ) {\n componentSuggestions.push(componentList[i]);\n }\n }\n\n for (let i = 0; i < apiList.length; i++) {\n if (apiList[i].suggestion.toLocaleLowerCase().indexOf(keyword.toLocaleLowerCase()) !== -1) {\n apiSuggestions.push(apiList[i]);\n }\n }\n this.setData({ componentSuggestions, apiSuggestions });\n },\n onClear() {\n this.setData({\n value: '',\n });\n },\n onCancel() {\n this.setData({\n componentSuggestions: [],\n apiSuggestions: [],\n value: '',\n });\n my.navigateBack();\n },\n onItemTap({ name }) {\n this.setData({\n value: name,\n });\n\n this.onInput(name);\n },\n onListItemTap(e) {\n const { name, url } = e.target.dataset;\n this.addToHistory(name);\n console.log(url);\n my.navigateTo({ url });\n },\n addToHistory(keyword) {\n const searchHistory = my.getStorageSync({ key: 'searchHistory' }).data || [];\n let index = -1;\n\n for (let i = 0; i < searchHistory.length; i++) {\n if (searchHistory[i].name === keyword) {\n index = i;\n break;\n }\n }\n\n let history = [];\n\n if (searchHistory.length >= 8) {\n if (index === -1) {\n history = [{ name: keyword }, ...searchHistory.slice(0, 7)];\n } else {\n searchHistory.splice(index, 1).slice(0, 7);\n history = [{ name: keyword }, ...searchHistory];\n }\n } else if (index === -1) {\n history = [{ name: keyword }, ...searchHistory];\n } else {\n searchHistory.splice(index, 1);\n history = [{ name: keyword }, ...searchHistory];\n }\n\n my.setStorageSync({\n key: 'searchHistory',\n data: history,\n });\n\n this.setData({\n history,\n });\n },\n});\n","common/components/search/search.json":"{\n \"defaultTitle\": \"搜索\",\n \"transparentTitle\": \"none\",\n \"allowsBounceVertical\": \"NO\",\n \"usingComponents\": {\n \"search-bar\": \"mini-ali-ui/es/search-bar/index\",\n \"block-list\": \"../block-list/block-list\",\n \"list\": \"mini-ali-ui/es/list/index\",\n \"list-item\": \"mini-ali-ui/es/list/list-item/index\"\n }\n}\n","common/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\nfunction processSearchData(all_data) {\n const all_result = [];\n all_data.forEach((obj) => {\n const { name: groupName, thumb, nameEn, detailList } = obj;\n detailList.forEach((detail) => {\n const { name, path: tmpPath } = detail;\n const suggestion = nameEn + groupName + name;\n const path = tmpPath.replace(/../, '/pages');\n const result = {\n name,\n thumb,\n path,\n suggestion,\n };\n all_result.push(result);\n });\n });\n return all_result;\n}\n\n// 防抖\nfunction debounce(fn, wait) {\n let timeout;\n return function() {\n const ctx = this;\n const args = arguments;\n clearTimeout(timeout);\n timeout = setTimeout(function() {\n fn.apply(ctx, args);\n }, wait);\n };\n}\n\nexport { measureText, processSearchData, debounce };\n","common/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","common/utils/data.js":"// 下面是第一个tab中的内容\nexport const treeGraphContainer = [\n {\n name: '紧凑树',\n thumb: '/common/images/icon/compactbox.png',\n nameEn: 'CompactTree',\n detailList: [\n {\n name: '紧凑树',\n path: '../tree-graph/compact-box/index',\n },\n {\n name: '至上而下的紧凑树',\n path: '../tree-graph/tb-compact-box/index',\n },\n {\n name: '节点左对齐的紧凑树',\n path: '../tree-graph/compact-box-left-align/index',\n },\n ],\n },\n {\n name: '生态树',\n thumb: '/common/images/icon/dendrogram.png',\n nameEn: 'Dendrogram',\n detailList: [\n {\n name: '生态树',\n path: '../tree-graph/basic-dendrogram/index',\n },\n {\n name: '至上而下的生态树',\n path: '../tree-graph/tb-dendrogram/index',\n },\n ],\n },\n {\n name: '脑图树',\n thumb: '/common/images/icon/mind.png',\n nameEn: 'MindMap',\n detailList: [\n {\n name: '子节点自动两侧分布',\n path: '../tree-graph/mind-map/index',\n },\n {\n name: '子节点右侧分布',\n path: '../tree-graph/right-mind-map/index',\n },\n {\n name: '子节点左侧分布',\n path: '../tree-graph/left-mind-map/index',\n },\n {\n name: '自定义子节点分布',\n path: '../tree-graph/custom-side-mind-map/index',\n },\n ],\n },\n {\n name: '缩进树',\n thumb: '/common/images/icon/indent.png',\n nameEn: 'Intend',\n path: '/page/component/movable-view/movable-view',\n detailList: [\n {\n name: '文件系统',\n path: '../tree-graph/file-system/index',\n },\n {\n name: '顶部对齐',\n path: '../tree-graph/intend-align-top/index',\n },\n {\n name: '子节点两侧分布',\n path: '../tree-graph/intended/index',\n },\n ],\n },\n {\n name: '辐射树',\n thumb: '/common/images/icon/radial.png',\n nameEn: 'Radial',\n detailList: [\n {\n name: '生态辐射树',\n path: '../tree-graph/radial-dendrogram/index',\n },\n {\n name: '紧凑辐射树',\n path: '../tree-graph/radial-compact-box/index',\n },\n ],\n },\n {\n name: '定制样式树',\n thumb: '/common/images/icon/dingzhi.png',\n nameEn: 'Custom',\n detailList: [\n {\n name: '自定义树中的边',\n path: '../tree-graph/custom-edge-tree/index',\n },\n {\n name: '树边上的标签',\n path: '../tree-graph/tree-edge-label/index',\n },\n {\n name: '复杂树样式',\n path: '../tree-graph/custom-tree/index',\n },\n ],\n },\n];\n\nexport const generalGraphContainer = [\n {\n name: '力导向图',\n thumb: '/common/images/icon/fa.png',\n nameEn: 'ForceAtalas',\n detailList: [\n {\n name: 'FA布局及节点拖拽',\n path: '../general-graph/basic-force-directed/index',\n },\n {\n name: 'FA2布局',\n path: '../general-graph/basic-FA2/index',\n },\n {\n name: 'FA布局防止节点重叠',\n path: '../general-graph/force-directed-prevent-overlap/index',\n },\n {\n name: 'FA布局聚类',\n path: '../general-graph/force-directed-force-clustering/index',\n },\n {\n name: '定制不同节点的参数',\n path: '../general-graph/force-directed-functional-params/index',\n },\n {\n name: '固定被拖拽节点',\n path: '../general-graph/basic-force-directed-drag-fix/index',\n },\n {\n name: 'FA布局参数动态变化',\n path: '../general-graph/force-directed-configuration-translate/index',\n },\n {\n name: 'FA气泡图',\n path: '../general-graph/force-bubbles/index',\n },\n {\n name: '约束在范围内布局',\n path: '../general-graph/force-constrained-in-rect/index',\n },\n {\n name: 'Combo FA布局',\n path: '../general-graph/basic-combo-force/index',\n },\n ],\n },\n {\n name: '流程图',\n thumb: '/common/images/icon/dagre.png',\n nameEn: 'Dagre',\n detailList: [\n {\n name: '流程图',\n path: '../general-graph/basic-dagre/index',\n },\n {\n name: '带有Combo的流程图',\n path: '../general-graph/dagre-combo/index',\n },\n {\n name: '自左向右的流程图',\n path: '../general-graph/dagre/index',\n },\n {\n name: '自左向右的流程图对齐',\n path: '../general-graph/dagre-UL/index',\n },\n {\n name: '布局参数动态变化',\n path: '../general-graph/dagre-configuration-translate/index',\n },\n ],\n },\n {\n name: 'Fruchterman图',\n thumb: '/common/images/icon/terms.png',\n nameEn: 'Fruchterman',\n detailList: [\n {\n name: '基本Fruchterman',\n path: '../general-graph/fruchterman/index',\n },\n {\n name: 'Fruchterman聚类',\n path: '../general-graph/fruchterman-clustering/index',\n },\n {\n name: '参数动态变化',\n path: '../general-graph/fruchterman-configuration-translate/index',\n },\n ],\n },\n {\n name: '辐射图',\n thumb: '/common/images/icon/radial.png',\n nameEn: 'Radial',\n detailList: [\n {\n name: '基本辐射布局',\n path: '../general-graph/basic-radial/index',\n },\n {\n name: '防止节点重叠的严格辐射布局',\n path: '../general-graph/prevent-overlap-radial/index',\n },\n {\n name: '防止节点重叠的非严格辐射布局',\n path: '../general-graph/prevent-overlap-unstrict-radial/index',\n },\n {\n name: '交互扩展节点的辐射布局',\n path: '../general-graph/interact-radial/index',\n },\n {\n name: '布局参数动态变化',\n path: '../general-graph/radial-configuration-translate/index',\n },\n {\n name: '同层节点按照指定字段聚类',\n path: '../general-graph/sort-radial/index',\n },\n ],\n },\n {\n name: '环形图',\n thumb: '/common/images/icon/circle.png',\n nameEn: 'Circle',\n detailList: [\n {\n name: '基本环形布局',\n path: '../general-graph/basic-circular/index',\n },\n {\n name: '按节点度数排序',\n path: '../general-graph/degree-circular/index',\n },\n {\n name: '螺旋线布局',\n path: '../general-graph/spiral-circular/index',\n },\n {\n name: '分割环形布局',\n path: '../general-graph/division-circular/index',\n },\n {\n name: '参数动态变化',\n path: '../general-graph/circular-configuration-translate/index',\n },\n ],\n },\n {\n name: '网格图',\n thumb: '/common/images/icon/grid.png',\n nameEn: 'Grid',\n detailList: [\n {\n name: '基本网格布局',\n path: '../general-graph/basic-grid/index',\n },\n {\n name: '指定排序方式的网格布局',\n path: '../general-graph/cluster-grid/index',\n },\n ],\n },\n {\n name: '同心圆',\n thumb: '/common/images/icon/concentric.png',\n nameEn: 'Concentric',\n detailList: [\n {\n name: '基本同心圆布局',\n path: '../general-graph/basic-concentric/index',\n },\n ],\n },\n {\n name: '降维图',\n thumb: '/common/images/icon/degree.png',\n nameEn: 'MDS',\n detailList: [\n {\n name: '基本降维布局图',\n path: '../general-graph/basic-MDS/index',\n },\n ],\n },\n {\n name: '弧线图',\n thumb: '/common/images/icon/arc.png',\n nameEn: 'Arc Diagram ',\n detailList: [\n {\n name: '基本弧线图',\n path: '../general-graph/basic-arc-diagram/index',\n },\n {\n name: '环形弧线图',\n path: '../general-graph/circular-arc-diagram/index',\n },\n ],\n },\n {\n name: '布局机制',\n thumb: '/common/images/icon/buju.png',\n nameEn: 'Layout',\n detailList: [\n {\n name: '布局切换',\n path: '../general-graph/layout-translate/index',\n },\n {\n name: '子图布局',\n path: '../general-graph/subgraph-layout/index',\n },\n // {\n // name: '流水线子图布局',\n // path: '../general-graph/sublayoutPipes/index',\n // },\n {\n name: '数据动态切换',\n path: '../general-graph/data-change/index',\n },\n {\n name: '自定义二分图布局',\n path: '../general-graph/custom-bi-graph/index',\n },\n {\n name: '布局时机监听',\n path: '../general-graph/layout-timing/index',\n },\n ],\n },\n];\n\nexport const basicElementContainer = [\n {\n name: '内置节点',\n thumb: '/common/images/icon/node.png',\n nameEn: 'Node',\n detailList: [\n {\n name: '圆形',\n path: '../elements/circle/index',\n },\n {\n name: '甜甜圈',\n path: '../elements/donut/index',\n },\n {\n name: '椭圆',\n path: '../elements/ellipse/index',\n },\n {\n name: '矩形',\n path: '../elements/rect/index',\n },\n {\n name: '模态矩形',\n path: '../elements/mode-rect/index',\n },\n {\n name: '模态菱形',\n path: '../elements/diamond/index',\n },\n {\n name: '五角星',\n path: '../elements/star/index',\n },\n {\n name: '三角形',\n path: '../elements/triangle/index',\n },\n {\n name: '图片',\n path: '../elements/image/index',\n },\n ],\n },\n {\n name: '内置边',\n thumb: '/common/images/icon/defaultEdge.png',\n nameEn: 'Edge',\n detailList: [\n {\n name: '折线1',\n path: '../elements/polyline1/index',\n },\n {\n name: '折线2',\n path: '../elements/polyline2/index',\n },\n {\n name: '折线3',\n path: '../elements/polyline3/index',\n },\n {\n name: '三次贝塞尔曲线-垂直',\n path: '../elements/cubic1/index',\n },\n {\n name: '三次贝塞尔曲线-水平',\n path: '../elements/cubic2/index',\n },\n {\n name: '弧线',\n path: '../elements/arc/index',\n },\n {\n name: '自环边',\n path: '../elements/loop/index',\n },\n ],\n },\n {\n name: '内置组合',\n thumb: '/common/images/icon/combo.png',\n nameEn: 'Combo',\n detailList: [\n {\n name: '圆形',\n path: '../elements/circle-with-combo/index',\n },\n {\n name: '矩形',\n path: '../elements/rect-with-combo/index',\n },\n ],\n },\n {\n name: '边的箭头',\n thumb: '/common/images/icon/arrow.png',\n nameEn: 'Arrow',\n detailList: [\n {\n name: '默认内置箭头',\n path: '../elements/built-in-arrows/index',\n },\n {\n name: '自定义箭头',\n path: '../elements/custom-arrows/index',\n },\n ],\n },\n {\n name: '自定义节点',\n thumb: '/common/images/icon/customNode.png',\n nameEn: 'CustomNode',\n detailList: [\n {\n name: '卡片',\n path: '../elements/card/index',\n },\n {\n name: '卡片2',\n path: '../elements/card-node/index',\n },\n {\n name: '面积图节点',\n path: '../elements/area-chart/index',\n },\n {\n name: '堆叠图节点',\n path: '../elements/stack-chart/index',\n },\n {\n name: '折线图节点',\n path: '../elements/line-chart/index',\n },\n {\n name: '南丁格尔图节点',\n path: '../elements/bar-chart/index',\n },\n {\n name: '点线图节点',\n path: '../elements/point-chart/index',\n },\n {\n name: '饼图节点',\n path: '../elements/pie-chart/index',\n },\n {\n name: '列表',\n path: '../elements/list/index',\n },\n ],\n },\n {\n name: '自定义边',\n thumb: '/common/images/icon/customEdge.png',\n nameEn: 'CustomEdge',\n detailList: [\n {\n name: '添加额外图形',\n path: '../elements/extra-shape/index',\n },\n {\n name: '自定义折线',\n path: '../elements/custom-polyline/index',\n },\n {\n name: '自定义折线2',\n path: '../elements/custom-polyline2/index',\n },\n {\n name: '多标签边',\n path: '../elements/edge-mul-label/index',\n },\n ],\n },\n {\n name: '自定义组合',\n thumb: '/common/images/icon/customCombo.png',\n nameEn: 'CustomCombo',\n detailList: [\n {\n name: '带有Marker的圆',\n path: '../elements/c-circle/index',\n },\n {\n name: '带有Marker的矩形',\n path: '../elements/c-rect/index',\n },\n ],\n },\n {\n name: '超长文本',\n thumb: '/common/images/icon/article.png',\n nameEn: 'Long',\n detailList: [\n {\n name: '文本超长',\n path: '../elements/label-len/index',\n },\n {\n name: '使用换行符处理',\n path: '../elements/label-len1/index',\n },\n ],\n },\n {\n name: '文本背景',\n thumb: '/common/images/icon/background.png',\n nameEn: 'Background',\n detailList: [\n {\n name: '节点文本背景',\n path: '../elements/node-bg/index',\n },\n {\n name: '边上文本背景',\n path: '../elements/edge-bg/index',\n },\n ],\n },\n {\n name: '多边定点',\n thumb: '/common/images/icon/multiedges.png',\n nameEn: 'Multiple',\n detailList: [\n {\n name: '两节点间存在多条边',\n path: '../elements/multi-edges/index',\n },\n ],\n },\n];\n\nexport const basicInteractiveContainer = [\n // {\n // name: '高亮',\n // thumb: '/common/images/icon/button.png',\n // nameEn: 'HighLight',\n // detailList: [\n // {\n // name: '内置的高亮节点',\n // path: '../interactive/activateRelations/index',\n // },\n // {\n // name: '自定义高亮',\n // path: '../interactive/highlightDark/index',\n // },\n // ],\n // },\n {\n name: '自定义树图交互',\n thumb: '/common/images/icon/interact.png',\n nameEn: 'Tree-Graph',\n detailList: [\n {\n name: '拖拽子树改变结构',\n path: '../interactive/drag-subtree/index',\n },\n {\n name: '合并同类兄弟节点',\n path: '../interactive/collapse-slibing/index',\n },\n {\n name: '使用changeData',\n path: '../interactive/change-data/index',\n },\n {\n name: '使用addChild',\n path: '../interactive/add-child/index',\n },\n ],\n },\n {\n name: '节点分组',\n thumb: '/common/images/icon/label.png',\n nameEn: 'Combo',\n detailList: [\n {\n name: '圆形组合',\n path: '../interactive/combo-circle/index',\n },\n {\n name: '矩形组合',\n path: '../interactive/combo-rect/index',\n },\n ],\n },\n {\n name: '节点集轮廓包裹',\n thumb: '/common/images/icon/textarea.png',\n nameEn: 'Hull',\n detailList: [\n {\n name: '用轮廓包裹节点集合',\n path: '../interactive/hull/index',\n },\n {\n name: '修改包裹内部成员',\n path: '../interactive/change-members/index',\n },\n ],\n },\n {\n name: '聚集一个节点',\n thumb: '/common/images/icon/radio.png',\n nameEn: 'Move',\n detailList: [\n {\n name: '点击节点移动',\n path: '../interactive/move/index',\n },\n {\n name: '点击节点动画',\n path: '../interactive/move-animate/index',\n },\n ],\n },\n {\n name: '响应区域事件',\n thumb: '/common/images/icon/checkbox.png',\n nameEn: 'Response',\n detailList: [\n {\n name: '响应节点中部分区域',\n path: '../interactive/partial-node/index',\n },\n ],\n },\n {\n name: '切换模式增加点和边',\n thumb: '/common/images/icon/switch.png',\n nameEn: 'Switch',\n detailList: [\n {\n name: '设置交互模式',\n path: '../interactive/set-mode/index',\n },\n ],\n },\n {\n name: '自定义交互',\n thumb: '/common/images/icon/slider.png',\n nameEn: 'CustomInteraction',\n detailList: [\n {\n name: '两指平移画布',\n path: '../interactive/canvas-two-fingers/index',\n },\n ],\n },\n {\n name: '画布交互',\n thumb: '/common/images/icon/picker-view.png',\n nameEn: 'Canvas',\n detailList: [\n {\n name: '缩放画布时固定元素',\n path: '../interactive/fix-item/index',\n },\n {\n name: '拖拽画布时候隐藏',\n path: '../interactive/hide-item/index',\n },\n ],\n },\n];\n\nexport const aminationContainer = [\n {\n name: '节点动画',\n thumb: '/common/images/icon/nodeAminate.png',\n nameEn: 'NodeAnimate',\n detailList: [\n {\n name: '节点动画',\n path: '../animation/node-node/index',\n },\n ],\n },\n {\n name: '边动画',\n thumb: '/common/images/icon/edgeMove.png',\n nameEn: 'EdgeAnimate',\n detailList: [\n {\n name: '圆点沿边运动',\n path: '../animation/point-in-line/index',\n },\n {\n name: '虚线运动',\n path: '../animation/edge-edge/index',\n },\n {\n name: '无到有的边',\n path: '../animation/edge-line-growth/index',\n },\n ],\n },\n {\n name: '状态切换',\n thumb: '/common/images/icon/change.png',\n nameEn: 'Change',\n detailList: [\n {\n name: '状态与动画',\n path: '../animation/state-change-hover/index',\n },\n ],\n },\n {\n name: '节点移动动画',\n thumb: '/common/images/icon/nodeMove.png',\n nameEn: 'NodeMove',\n detailList: [\n {\n name: '节点移动动画',\n path: '../animation/change-position-default/index',\n },\n ],\n },\n {\n name: '自定义动画',\n thumb: '/common/images/icon/navigator.png',\n nameEn: 'CustomAminate',\n detailList: [\n {\n name: '自定义动画',\n path: '../animation/custom-animate-position/index',\n },\n ],\n },\n];\n\n// 下面是第二个tab内容\nexport const customizeTree = [\n {\n name: '自定义树图',\n thumb: '/common/images/icon/radial.png',\n nameEn: 'Custom',\n detailList: [\n // {\n // name: '决策树',\n // path: '../scene-case/decision-tree/index',\n // },\n {\n name: '知识图谱树',\n path: '../scene-case/knowledge-tree-graph/index',\n },\n ],\n },\n];\n\nexport const classicCace = [\n {\n name: '经典案例',\n thumb: '/common/images/icon/classic.png',\n nameEn: 'Classic',\n detailList: [\n {\n name: '自定义流向图',\n path: '../scene-case/custom-flow/index',\n },\n // {\n // name: '桑基图',\n // path: '../scene-case/sankey/index',\n // },\n // {\n // name: '思维导图',\n // path: '../scene-case/mind-map/index',\n // },\n // {\n // name: '甜甜圈转账图',\n // path: '../scene-case/donut-transfer/index',\n // },\n ],\n },\n];\n\nexport const newsMapVisualize = [\n {\n name: '新闻图可视化',\n thumb: '/common/images/icon/news.png',\n nameEn: 'News',\n detailList: [\n {\n name: '地铁路线图',\n path: '../scene-case/metro-lines/index',\n },\n ],\n },\n];\n\nexport const plugins = [\n {\n name: '提示框',\n nameEn: 'Tooltip',\n detailList: [\n {\n name: 'Tooltip',\n path: '../plugins/tool-tip/index',\n },\n ],\n },\n {\n name: '图例',\n nameEn: 'Legend',\n detailList: [\n {\n name: 'Legend',\n path: '../plugins/donut-transfer/index',\n },\n ],\n },\n {\n name: '边过滤',\n nameEn: 'EdgeFilter',\n detailList: [\n {\n name: 'EdgeFilter',\n path: '../plugins/edge-filter/index',\n },\n ],\n },\n {\n name: '鱼眼',\n nameEn: 'Fisheye',\n detailList: [\n {\n name: 'Fisheye',\n path: '../plugins/fisheye/index',\n },\n ],\n },\n {\n name: '时间轴',\n nameEn: 'Timebar',\n detailList: [\n {\n name: 'Timebar',\n path: '../plugins/timebar/index',\n },\n ],\n },\n {\n name: '缩放轴',\n nameEn: 'ZoomSlider',\n detailList: [\n {\n name: 'ZoomSlider',\n path: '../plugins/zoom-slider/index',\n },\n ],\n },\n {\n name: '边绑定',\n nameEn: 'Bundling',\n detailList: [\n {\n name: 'Bundling',\n path: '../plugins/bundling/index',\n },\n ],\n },\n {\n name: '上下文菜单',\n nameEn: 'Menu',\n detailList: [\n {\n name: 'Menu',\n path: '../plugins/menu/index',\n },\n ],\n },\n {\n name: '对齐线',\n nameEn: 'SnapLine',\n detailList: [\n {\n name: 'SnapLine',\n path: '../plugins/snap-line/index',\n },\n ],\n },\n {\n name: 'minimap',\n nameEn: 'minimap',\n detailList: [\n {\n name: 'minimap',\n path: '../plugins/mini-map/index',\n },\n ],\n }\n];\n\n// 控制搜索框下面的热搜词\nexport const hot = [\n { name: '知识图谱树', url: '../scene-case/knowledge-tree-graph/index' },\n { name: '基本弧线图', url: '../general-graph/basic-arc-diagram/index' },\n { name: 'FA气泡图', url: '../general-graph/force-bubbles/index' },\n { name: '无到有的边', url: '../animation/edge_line-growth/index' },\n { name: '自定义流向图', url: '../scene-case/custom-flow/index' },\n { name: '生态树', url: '../tree-graph/basic-dendrogram/index' },\n { name: '自定义树中的边', url: '../tree-graph/custom-edge-tree/index' },\n { name: '基本同心圆布局', url: '../general-graph/basic-concentric/index' },\n { name: '布局切换', url: '../general-graph/layout-translate/index' },\n];\n\nexport const tabs = ['基础能力', '拓展能力'];\n","common/utils/debounce.js":"export default function debounce(fn, wait) {\n let timeout;\n return function() {\n const ctx = this;\n const args = arguments;\n clearTimeout(timeout);\n timeout = setTimeout(function() {\n fn.apply(ctx, args);\n }, wait);\n };\n}\n","common/utils/process.js":"import { processSearchData } from './common';\nimport {\n treeGraphContainer,\n generalGraphContainer,\n basicElementContainer,\n basicInteractiveContainer,\n aminationContainer,\n customizeTree,\n classicCace,\n newsMapVisualize,\n} from './data';\n\nconst all_data = [\n ...treeGraphContainer,\n ...generalGraphContainer,\n ...basicElementContainer,\n ...basicInteractiveContainer,\n ...aminationContainer,\n ...customizeTree,\n ...classicCace,\n ...newsMapVisualize,\n];\n\n// 搜索数据\nconst componentList = processSearchData(all_data);\nexport { componentList };\n","mini.project.json":"{\n \"enableAppxNg\": true,\n \"component2\": true\n}\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.5\",\n \"@antv/f6-alipay\": \"^0.0.2\",\n \"@babel/runtime\": \"^7.14.0\"\n },\n \"author\": \"\",\n \"license\": \"ISC\"\n}\n","pages/interactive/move/data.js":"export default {\n nodes: [\n {\n id: 'node1',\n x: 150,\n y: 50,\n label: 'node1',\n },\n {\n id: 'node2',\n x: 200,\n y: 150,\n label: 'node2',\n },\n {\n id: 'node3',\n x: 100,\n y: 150,\n label: 'node3',\n },\n ],\n edges: [\n {\n source: 'node1',\n target: 'node2',\n },\n {\n source: 'node2',\n target: 'node3',\n },\n {\n source: 'node3',\n target: 'node1',\n },\n ],\n};\n","pages/interactive/move/index.acss":"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}","pages/interactive/move/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/interactive/move/index.js":"import F6 from '@antv/f6';\nimport { wrapContext } from '../../../common/utils/context';\nimport data from './data';\n\n/**\n * move\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\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 defaultNode: {\n style: {\n fill: '#DEE9FF',\n stroke: '#5B8FF9',\n },\n },\n defaultEdge: {\n style: {\n stroke: '#b5b5b5',\n },\n },\n });\n\n this.graph.data(data);\n this.graph.render();\n this.graph.fitView();\n\n // function handleNodeClick(event) {\n // const { item } = event;\n // console.log('item后', item)\n // // animately move the graph to focus on the item.\n // // the second parameter controlls whether move with animation, the third parameter is the animate configuration\n // this.graph.focusItem(item);\n // }\n\n // listen to the node click event\n this.graph.on('node:tap', (event) => {\n const { item } = event;\n // animately move the graph to focus on the item.\n // the second parameter controlls whether move with animation, the third parameter is the animate configuration\n this.graph.focusItem(item);\n });\n },\n\n onUnload() {\n this.graph && this.graph.destroy();\n },\n});\n","pages/interactive/move/index.json":"{\n \"defaultTitle\": \"点击节点移动\",\n \"usingComponents\": {\n \"f6-canvas\": \"@antv/f6-alipay/es/container/container\"\n }\n}\n"},"dist":[{"name":"2fc89cbf36d9142ef9be523ad782c103.json","size":691466,"url":"https://gw.alipayobjects.com/os/f6/92fe442c-e7d4-4f98-b4a3-437e1f1528e0/demo_interactive_move/dist/herbox/2fc89cbf36d9142ef9be523ad782c103.json","ETag":"2FC89CBF36D9142EF9BE523AD782C103","type":"json"}],"name":"pages/interactive/move/index","buildVersion":"0.72.7","remaxVersion":"2.0.3","component2":false,"css2":false}