From 2c838688fa861725ef2755bdb846c2924a0cdbbd Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Thu, 7 Sep 2023 11:09:54 +0800 Subject: [PATCH] chore: update code --- .../src/components/EdgeBundling/Component.tsx | 62 ---- .../src/components/EdgeBundling/index.tsx | 18 - .../components/EdgeBundling/registerMeta.ts | 3 - .../src/CommunityDetection/Component.tsx | 7 +- .../src/PatternMatch/patternEditor.tsx | 34 +- .../src/PatternMatch/patternPane.tsx | 12 +- .../src/PatternMatchSimple/PatternGraph.tsx | 77 +++-- .../components/CanvasSetting/Component.tsx | 2 +- .../src/components/NodeLegend/Component.tsx | 7 +- packages/gi-assets-testing/package.json | 3 +- packages/gi-assets-xlab | 1 - packages/gi-sdk/src/GISDK.tsx | 2 +- packages/gi-site/package.json | 1 - packages/gi-site/scripts/pre-build.mjs | 16 +- .../components/Navbar/getExportContext.tsx | 9 +- packages/gi-site/src/hooks/common.ts | 7 +- packages/gi-site/src/hooks/useNodeModule.ts | 3 +- packages/gi-site/src/services/assets.ts | 110 +++--- packages/graphin/src/Graphin.tsx | 10 +- packages/graphin/src/index.tsx | 19 +- packages/graphin/src/useGraphin.tsx | 3 +- packages/graphin/src/utils/index.tsx | 1 + packages/graphin/src/utils/mock.ts | 318 ++++++++++++++++++ webpack.config.js | 2 +- 24 files changed, 482 insertions(+), 245 deletions(-) delete mode 100644 packages/gi-assets-advance/src/components/EdgeBundling/Component.tsx delete mode 100644 packages/gi-assets-advance/src/components/EdgeBundling/index.tsx delete mode 100644 packages/gi-assets-advance/src/components/EdgeBundling/registerMeta.ts delete mode 160000 packages/gi-assets-xlab create mode 100644 packages/graphin/src/utils/mock.ts diff --git a/packages/gi-assets-advance/src/components/EdgeBundling/Component.tsx b/packages/gi-assets-advance/src/components/EdgeBundling/Component.tsx deleted file mode 100644 index 83c46368a..000000000 --- a/packages/gi-assets-advance/src/components/EdgeBundling/Component.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { useContext } from '@antv/gi-sdk'; -import { G6 } from '@antv/graphin'; -import * as React from 'react'; - -export interface EdgeBunding { - visible: boolean; - color: string; - hasDivider: boolean; -} - -const EdgeBunding: React.FunctionComponent = props => { - const { apis, graph } = useContext(); - const { handleZoomIn, handleZoomOut } = apis; - React.useEffect(() => { - const edgeBundling = new G6.Bundling({ - bundleThreshold: 0.6, - K: 100, - }); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const data = graph.save() as any; - graph.addPlugin(edgeBundling); - - const { nodes, edges } = data; - nodes.forEach(n => { - n.degree = 0; - n.inDegree = 0; - n.outDegree = 0; - }); - const nodeIdMap = new Map(); - nodes.forEach(node => { - nodeIdMap.set(node.id, node); - }); - edges.forEach(e => { - const source = nodeIdMap.get(e.source); - const target = nodeIdMap.get(e.target); - source.outDegree++; - target.inDegree++; - source.degree++; - target.degree++; - if (e.sytle === undefined) e.style = {}; - e.style.strokeOpacity = 0.2; - e.style.stroke = '#C9E5CA'; - // e.style.stroke = `l(0) 0:${llightOrange16} 1:${llightBlue16}`; - if (nodeIdMap.get(e.source).x < nodeIdMap.get(e.target).x) { - // e.style.stroke = `l(0) 0:${llightBlue16} 1:${llightOrange16}`; - } - }); - let maxDegree = -9999; - let minDegree = 9999; - nodes.forEach(n => { - if (maxDegree < n.degree) maxDegree = n.degree; - if (minDegree > n.degree) minDegree = n.degree; - }); - - edgeBundling.bundling(data); - graph.data(data); - graph.render(); - }, [graph]); - return <>; -}; - -export default EdgeBunding; diff --git a/packages/gi-assets-advance/src/components/EdgeBundling/index.tsx b/packages/gi-assets-advance/src/components/EdgeBundling/index.tsx deleted file mode 100644 index 0e363b4c7..000000000 --- a/packages/gi-assets-advance/src/components/EdgeBundling/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Component from './Component'; -import registerMeta from './registerMeta'; - -/** index.md 中解析得到默认值，也可用户手动修改 */ import $i18n from '../../i18n'; - -const info = { - id: 'EdgeBunding', - name: $i18n.get({ id: 'advance.components.EdgeBundling.EdgeBinding', dm: '边绑定' }), - category: 'components', - desc: $i18n.get({ id: 'advance.components.EdgeBundling.EdgeBinding', dm: '边绑定' }), - cover: 'http://xxxx.jpg', -}; - -export default { - info, - component: Component, - registerMeta, -}; diff --git a/packages/gi-assets-advance/src/components/EdgeBundling/registerMeta.ts b/packages/gi-assets-advance/src/components/EdgeBundling/registerMeta.ts deleted file mode 100644 index ab76d25b5..000000000 --- a/packages/gi-assets-advance/src/components/EdgeBundling/registerMeta.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default () => { - return {}; -}; diff --git a/packages/gi-assets-algorithm/src/CommunityDetection/Component.tsx b/packages/gi-assets-algorithm/src/CommunityDetection/Component.tsx index b974e409d..97549ffee 100755 --- a/packages/gi-assets-algorithm/src/CommunityDetection/Component.tsx +++ b/packages/gi-assets-algorithm/src/CommunityDetection/Component.tsx @@ -2,7 +2,7 @@ import { ReloadOutlined } from '@ant-design/icons'; import { connectedComponent, iLouvain, kCore, louvain } from '@antv/algorithm'; import { useContext } from '@antv/gi-sdk'; import type { GraphinData } from '@antv/graphin'; -import Graphin, { Behaviors } from '@antv/graphin'; +import { Behaviors } from '@antv/graphin'; import { Button, Empty, InputNumber, Radio, Spin, message } from 'antd'; import { cloneDeep } from 'lodash'; import React, { memo, useEffect, useState } from 'react'; @@ -440,19 +440,18 @@ const CommunityDetection: React.FunctionComponent = pro {$i18n.get({ id: 'gi-assets-algorithm.src.CommunityDetection.Component.AnalysisResults', dm: '分析结果' })}

- - + */}
); diff --git a/packages/gi-assets-algorithm/src/PatternMatch/patternEditor.tsx b/packages/gi-assets-algorithm/src/PatternMatch/patternEditor.tsx index 9ff09be03..d05f8696a 100644 --- a/packages/gi-assets-algorithm/src/PatternMatch/patternEditor.tsx +++ b/packages/gi-assets-algorithm/src/PatternMatch/patternEditor.tsx @@ -3,19 +3,18 @@ import Algorithm from '@antv/algorithm'; import { uniqueId } from '@antv/algorithm/lib/util'; import { IItemBase } from '@antv/g6'; import { extra, IEdgeSchema, INodeSchema, useContext } from '@antv/gi-sdk'; -import Graphin, { Behaviors, GraphinData, Utils as GraphinUtils } from '@antv/graphin'; -import { Button, Col, Divider, Input, Layout, Menu, message, Row, Tabs } from 'antd'; +import { Behaviors, GraphinData, Utils as GraphinUtils } from '@antv/graphin'; +import { Button, Col, Divider, Input, Layout, message, Row, Tabs } from 'antd'; import deepmerge from 'deepmerge'; import { cloneDeep } from 'lodash'; import React, { useEffect, useRef, useState } from 'react'; +import $i18n from '../i18n'; import Util from '../utils'; -import AddRelation from './AddRelation'; import EditDrawer, { TypeInfo } from './editDrawer'; import './index.less'; import { ITEM_STATE, SPLITOR } from './registerMeta'; import templates from './templates'; import { formatDataModels } from './util'; -import $i18n from '../i18n'; const { TabPane } = Tabs; const { Search } = Input; @@ -744,7 +743,7 @@ const PatternEditor: React.FC = ({ style={{ width: 200 }} />
- = ({ width: 200, nodeSize: 50, }} - animate={false} - modes={{ - default: [ - { - type: 'scroll-canvas', - direction: 'y', - scalableRange: -0.99, - }, - ], - }} + // modes={{ + // default: [ + // { + // type: 'scroll-canvas', + // direction: 'y', + // scalableRange: -0.99, + // }, + // ], + // }} > @@ -773,7 +771,7 @@ const PatternEditor: React.FC = ({ - + */}
= ({ - = ({ )} - + */} = ({ id, data, schemaEdgeMap, editPattern, ex - - + */} ) : ( = props => { const { pattern } = props; - React.useEffect(() => { - const patternGraph = new G6.Graph({ - container: 'gi-pattern-match-graph-container', - width: 380, - height: 250, - fitView: true, - defaultEdge: { - size: 2, - style: { - endArrow: { - path: G6.Arrow.triangle(10, 10), - }, - }, - labelCfg: { - autoRotate: true, - style: { - stroke: '#fff', - lineWidth: 2, - }, - }, - }, - defaultNode: { - labelCfg: { - position: 'right', - }, - }, - layout: { - type: 'dagre', - ranksep: 20, - }, - }); - const clonePattern = JSON.parse(JSON.stringify(pattern)); - patternGraph.data(clonePattern); - patternGraph.render(); - return () => { - patternGraph.destroy(); - }; - }, [pattern]); + // React.useEffect(() => { + // const patternGraph = new Graph({ + // container: 'gi-pattern-match-graph-container', + // width: 380, + // height: 250, + // fitView: true, + // defaultEdge: { + // size: 2, + // style: { + // endArrow: { + // path: G6.Arrow.triangle(10, 10), + // }, + // }, + // labelCfg: { + // autoRotate: true, + // style: { + // stroke: '#fff', + // lineWidth: 2, + // }, + // }, + // }, + // defaultNode: { + // labelCfg: { + // position: 'right', + // }, + // }, + // layout: { + // type: 'dagre', + // ranksep: 20, + // }, + // }); + // const clonePattern = JSON.parse(JSON.stringify(pattern)); + // patternGraph.data(clonePattern); + // patternGraph.render(); + // return () => { + // patternGraph.destroy(); + // }; + // }, [pattern]); return (
diff --git a/packages/gi-assets-basic/src/components/CanvasSetting/Component.tsx b/packages/gi-assets-basic/src/components/CanvasSetting/Component.tsx index dcfd6bcab..77982f157 100644 --- a/packages/gi-assets-basic/src/components/CanvasSetting/Component.tsx +++ b/packages/gi-assets-basic/src/components/CanvasSetting/Component.tsx @@ -4,7 +4,7 @@ import React, { memo } from 'react'; import CanvasClick from './CanvasClick'; import CanvasDoubleClick from './CanvasDoubleClick'; -const { DragCanvas, ZoomCanvas, BrushSelect, Hoverable, ActivateRelations } = Behaviors; +const { DragCanvas, ZoomCanvas, BrushSelect } = Behaviors; export interface CanvasSettingProps { dragCanvas: { diff --git a/packages/gi-assets-basic/src/components/NodeLegend/Component.tsx b/packages/gi-assets-basic/src/components/NodeLegend/Component.tsx index 47a18f5e4..a5d360b78 100644 --- a/packages/gi-assets-basic/src/components/NodeLegend/Component.tsx +++ b/packages/gi-assets-basic/src/components/NodeLegend/Component.tsx @@ -1,10 +1,9 @@ import { utils } from '@antv/gi-sdk'; -import { Components } from '@antv/graphin'; import React, { memo } from 'react'; const { getPositionStyles } = utils; -const { Legend } = Components; +// const { Legend } = Components; export interface ComponentProps { sortKey: string; @@ -19,11 +18,11 @@ const Component: React.FunctionComponent = props => { return (
- + {/* {renderProps => { return ; }} - + */}
); }; diff --git a/packages/gi-assets-testing/package.json b/packages/gi-assets-testing/package.json index 565ebc3c1..79d8ba27b 100644 --- a/packages/gi-assets-testing/package.json +++ b/packages/gi-assets-testing/package.json @@ -30,8 +30,7 @@ "peerDependencies": { "react": "17.x", "react-dom": "17.x", - "antd": "4.x", - "@antv/graphin": "^2.7.21" + "antd": "4.x" }, "devDependencies": { "@types/react": "^17.x", diff --git a/packages/gi-assets-xlab b/packages/gi-assets-xlab deleted file mode 160000 index 207352f2f..000000000 --- a/packages/gi-assets-xlab +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 207352f2fb8d5326a28435ca63d0b7668425fbe3 diff --git a/packages/gi-sdk/src/GISDK.tsx b/packages/gi-sdk/src/GISDK.tsx index 5c237bc6d..348847102 100644 --- a/packages/gi-sdk/src/GISDK.tsx +++ b/packages/gi-sdk/src/GISDK.tsx @@ -288,7 +288,7 @@ const GISDK = (props: Props) => { } } }; - console.log(' graphinRef.current', graphinRef.current); + console.log('graphinRef.current', graphinRef.current); const HAS_GRAPH = graphinRef.current?.graph && !graphinRef.current.graph.destroyed; const ContextValue = { diff --git a/packages/gi-site/package.json b/packages/gi-site/package.json index f899ab374..9b01a55cc 100644 --- a/packages/gi-site/package.json +++ b/packages/gi-site/package.json @@ -79,7 +79,6 @@ "perf_hooks": "^0.0.1" }, "peerDependencies": { - "@antv/graphin": "^2.7.21", "antd": "4.x", "react": "17.x", "react-dom": "17.x" diff --git a/packages/gi-site/scripts/pre-build.mjs b/packages/gi-site/scripts/pre-build.mjs index 3d323984d..388bc8d6c 100644 --- a/packages/gi-site/scripts/pre-build.mjs +++ b/packages/gi-site/scripts/pre-build.mjs @@ -18,7 +18,7 @@ import INJECT from './pre-build-inject.json' assert { type: 'json' }; import path from 'path'; export const G6_VERSION = '4.8.14'; -export const GRAPHIN_VERSION = '2.7.25'; +// export const GRAPHIN_VERSION = '2.7.25'; export const G2PLOT_VERSION = '2.4.16'; export const ANTD_VERSION = '4.24.8'; export const GI_VERSION = GI_SDK.version; @@ -72,12 +72,12 @@ const depsPackage = [ version: G6_VERSION, global: 'G6', }, - { - url: `https://gw.alipayobjects.com/os/lib/antv/graphin/${GRAPHIN_VERSION}/dist/graphin.min.js`, - name: '@antv/graphin', - version: GRAPHIN_VERSION, - global: 'Graphin', - }, + // { + // url: `https://gw.alipayobjects.com/os/lib/antv/graphin/${GRAPHIN_VERSION}/dist/graphin.min.js`, + // name: '@antv/graphin', + // version: GRAPHIN_VERSION, + // global: 'Graphin', + // }, { url: `https://gw.alipayobjects.com/os/lib/antv/g2plot/${G2PLOT_VERSION}/dist/g2plot.min.js`, name: '@antv/g2plot', @@ -181,7 +181,7 @@ fs.writeFile( export const NODE_ENV = '${process.env.NODE_ENV}'; export const BUILD_MODE = '${BUILD_MODE}'; export const G6_VERSION = '${G6_VERSION}'; - export const GRAPHIN_VERSION = '${GRAPHIN_VERSION}'; + export const G2PLOT_VERSION = '${G2PLOT_VERSION}'; export const ANTD_VERSION = '${ANTD_VERSION}'; export const GI_VERSION = '${GI_VERSION}'; diff --git a/packages/gi-site/src/components/Navbar/getExportContext.tsx b/packages/gi-site/src/components/Navbar/getExportContext.tsx index 04be71ddd..867ff9cbf 100644 --- a/packages/gi-site/src/components/Navbar/getExportContext.tsx +++ b/packages/gi-site/src/components/Navbar/getExportContext.tsx @@ -1,4 +1,4 @@ -import { ANTD_VERSION, G2PLOT_VERSION, G6_VERSION, GI_VERSION, GRAPHIN_VERSION } from '../../env'; +import { ANTD_VERSION, G2PLOT_VERSION, G6_VERSION, GI_VERSION } from '../../env'; import { getActivePackageName } from '../../hooks/common'; export const getPkg = activeAssets => { @@ -54,12 +54,7 @@ export const deps = { version: G6_VERSION, global: 'G6', }, - Graphin: { - url: `https://gw.alipayobjects.com/os/lib/antv/graphin/${GRAPHIN_VERSION}/dist/graphin.min.js`, - name: '@antv/graphin', - version: GRAPHIN_VERSION, - global: 'Graphin', - }, + GISDK: { name: '@antv/gi-sdk', version: GI_VERSION, diff --git a/packages/gi-site/src/hooks/common.ts b/packages/gi-site/src/hooks/common.ts index 840404e5a..a23f02faf 100644 --- a/packages/gi-site/src/hooks/common.ts +++ b/packages/gi-site/src/hooks/common.ts @@ -1,7 +1,7 @@ import { GIAssets } from '@antv/gi-sdk'; import beautify from 'js-beautify'; import ThemeVars from '../components/ThemeVars'; -import { ANTD_VERSION, G6_VERSION, GI_VERSION, GRAPHIN_VERSION } from '../env'; +import { ANTD_VERSION, G6_VERSION, GI_VERSION } from '../env'; import $i18n from '../i18n'; import type { Package } from '../loader'; import { getAssetPackages } from '../loader'; @@ -131,7 +131,7 @@ export const getConstantFiles = opts => { id: 'gi-site.src.hooks.common.HeadMetaCharsetUtfMeta', dm: '\n\n\n\n\nGISDK EXPORT FILE\n\n\n \n\n\n \n\n\n', }, - { GRAPHINVERSION: GRAPHIN_VERSION, GIVERSION: GI_VERSION, ANTDVERSION: ANTD_VERSION, theme: theme }, + { GIVERSION: GI_VERSION, ANTDVERSION: ANTD_VERSION, theme: theme }, ); const engineContext = JSON.parse(localStorage.getItem('SERVER_ENGINE_CONTEXT')!); @@ -172,7 +172,6 @@ export const HTML_HEADER = ` GISDK EXPORT FILE - @@ -193,7 +192,7 @@ export const HTML_SCRIPTS = ` - + diff --git a/packages/gi-site/src/hooks/useNodeModule.ts b/packages/gi-site/src/hooks/useNodeModule.ts index b24de66da..b59c8d768 100644 --- a/packages/gi-site/src/hooks/useNodeModule.ts +++ b/packages/gi-site/src/hooks/useNodeModule.ts @@ -1,7 +1,7 @@ import { version as GI_THEME_ANTD_VERSION } from '@antv/gi-theme-antd/package.json'; import LZString from 'lz-string'; import { useEffect, useState } from 'react'; -import { ANTD_VERSION, G6_VERSION, GI_VERSION, GRAPHIN_VERSION } from '../env'; +import { ANTD_VERSION, G6_VERSION, GI_VERSION } from '../env'; import { beautifyCode, getActivePackage, getConstantFiles } from './common'; const CSB_API_ENDPOINT = 'https://codesandbox.io/api/v1/sandboxes/define'; @@ -211,7 +211,6 @@ ReactDOM.render(, document.getElementById("root")); antd: ANTD_VERSION, '@antv/gi-theme-antd': GI_THEME_ANTD_VERSION, '@antv/g6': G6_VERSION, - '@antv/graphin': GRAPHIN_VERSION, '@antv/gi-sdk': GI_VERSION, ...assets_packages_json, }, diff --git a/packages/gi-site/src/services/assets.ts b/packages/gi-site/src/services/assets.ts index e4405c5b8..8a693a1c4 100644 --- a/packages/gi-site/src/services/assets.ts +++ b/packages/gi-site/src/services/assets.ts @@ -1,18 +1,18 @@ import { GIAssets, utils } from '@antv/gi-sdk'; // import { getCombinedAssets } from '../loader'; -import * as GI_ASSETS_ADVANCE from '@antv/gi-assets-advance'; -import * as GI_ASSETS_ALGORITHM from '@antv/gi-assets-algorithm'; +// import * as GI_ASSETS_ADVANCE from '@antv/gi-assets-advance'; +// import * as GI_ASSETS_ALGORITHM from '@antv/gi-assets-algorithm'; import * as GI_ASSETS_BASIC from '@antv/gi-assets-basic'; -import * as GI_ASSETS_SCENE from '@antv/gi-assets-scene'; -/** 引擎包 */ -import * as GI_ASSETS_GALAXYBASE from '@antv/gi-assets-galaxybase'; -import * as GI_ASSETS_GRAPHSCOPE from '@antv/gi-assets-graphscope'; -import * as GI_ASSETS_HUGEGRAPH from '@antv/gi-assets-hugegraph'; -import * as GI_ASSETS_JANUSGRAPH from '@antv/gi-assets-janusgraph'; -import * as GI_ASSETS_NEO4J from '@antv/gi-assets-neo4j'; -import * as GI_ASSETS_TUGRAPH from '@antv/gi-assets-tugraph'; -import * as GI_ASSETS_TUGRAPH_ANALYTICS from '@antv/gi-assets-tugraph-analytics'; +// import * as GI_ASSETS_SCENE from '@antv/gi-assets-scene'; +// /** 引擎包 */ +// import * as GI_ASSETS_GALAXYBASE from '@antv/gi-assets-galaxybase'; +// import * as GI_ASSETS_GRAPHSCOPE from '@antv/gi-assets-graphscope'; +// import * as GI_ASSETS_HUGEGRAPH from '@antv/gi-assets-hugegraph'; +// import * as GI_ASSETS_JANUSGRAPH from '@antv/gi-assets-janusgraph'; +// import * as GI_ASSETS_NEO4J from '@antv/gi-assets-neo4j'; +// import * as GI_ASSETS_TUGRAPH from '@antv/gi-assets-tugraph'; +// import * as GI_ASSETS_TUGRAPH_ANALYTICS from '@antv/gi-assets-tugraph-analytics'; import INJECT from './inject'; @@ -33,51 +33,51 @@ const LOCAL_ASSETS: any[] = [ ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_BASIC'], ...GI_ASSETS_BASIC, }, - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_ADVANCE'], - ...GI_ASSETS_ADVANCE, - }, - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_ALGORITHM'], - ...GI_ASSETS_ALGORITHM, - }, - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_SCENE'], - ...GI_ASSETS_SCENE, - }, - /** 引擎资产: TuGraph*/ - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_TUGRAPH'], - ...GI_ASSETS_TUGRAPH, - }, - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_TUGRAPH_ANALYTICS'], - ...GI_ASSETS_TUGRAPH_ANALYTICS, - }, - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_GRAPHSCOPE'], - ...GI_ASSETS_GRAPHSCOPE, - }, - // 内置 Neo4j - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_NEO4J'], - ...GI_ASSETS_NEO4J, - }, - // 内置 HugeGraph - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_HUGEGRAPH'], - ...GI_ASSETS_HUGEGRAPH, - }, + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_ADVANCE'], + // ...GI_ASSETS_ADVANCE, + // }, + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_ALGORITHM'], + // ...GI_ASSETS_ALGORITHM, + // }, + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_SCENE'], + // ...GI_ASSETS_SCENE, + // }, + // /** 引擎资产: TuGraph*/ + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_TUGRAPH'], + // ...GI_ASSETS_TUGRAPH, + // }, + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_TUGRAPH_ANALYTICS'], + // ...GI_ASSETS_TUGRAPH_ANALYTICS, + // }, + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_GRAPHSCOPE'], + // ...GI_ASSETS_GRAPHSCOPE, + // }, + // // 内置 Neo4j + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_NEO4J'], + // ...GI_ASSETS_NEO4J, + // }, + // // 内置 HugeGraph + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_HUGEGRAPH'], + // ...GI_ASSETS_HUGEGRAPH, + // }, - // 内置 Galaxybase - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_GALAXYBASE'], - ...GI_ASSETS_GALAXYBASE, - }, - { - ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_JANUSGRAPH'], - ...GI_ASSETS_JANUSGRAPH, - }, + // // 内置 Galaxybase + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_GALAXYBASE'], + // ...GI_ASSETS_GALAXYBASE, + // }, + // { + // ...OFFICIAL_PACKAGES_MAP['GI_ASSETS_JANUSGRAPH'], + // ...GI_ASSETS_JANUSGRAPH, + // }, // 本地开发资产 ...Object.entries(INJECT).map(([key, value]) => ({ diff --git a/packages/graphin/src/Graphin.tsx b/packages/graphin/src/Graphin.tsx index 24cad689f..9e991518c 100644 --- a/packages/graphin/src/Graphin.tsx +++ b/packages/graphin/src/Graphin.tsx @@ -1,16 +1,18 @@ import { Extensions, Graph as G6Graph, Specification, extend } from '@antv/g6'; import React, { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react'; import { GraphinContext } from './useGraphin'; + interface GraphinProps extends Specification<{}, {}> { container?: string; style?: React.CSSProperties; containerStyle?: React.CSSProperties; - /** */ + /** 兼容的props */ fitView?: boolean; } const Graphin: React.FunctionComponent = forwardRef((props, ref) => { const { containerStyle, children, container, ...options } = props; + const { width, height, data, node, edge, modes, layout } = options; const [state, setState] = useState({ graph: null, @@ -38,9 +40,9 @@ const Graphin: React.FunctionComponent = forwardRef((props, ref) = useEffect(() => { console.log('Extensions', Extensions); const Graph = extend(G6Graph, { - // plugins: { - // minimap: Extensions.Minimap, - // }, + plugins: { + minimap: Extensions.Minimap, + }, }); const graph = new Graph({ container, diff --git a/packages/graphin/src/index.tsx b/packages/graphin/src/index.tsx index 663edd3d9..8784f2754 100644 --- a/packages/graphin/src/index.tsx +++ b/packages/graphin/src/index.tsx @@ -8,6 +8,9 @@ export type IUserNode = any; export type Layout = any; export type IUserEdge = any; export type ContextMenuValue = any; +export type IG6GraphEvent = any; +export type GraphData = any; +export type NodeConfig = any; export { GraphinContext, GraphinContextType, useGraphin } from './useGraphin'; @@ -42,9 +45,21 @@ export const registerFontFamily = iconLoader => { }); }; -export const Behaviors = {}; +export const Behaviors = { + ClickSelect: (props: any) => null, + DragCanvas: (props: any) => null, + ZoomCanvas: (props: any) => null, + DragNode: (props: any) => null, + DragCombo: (props: any) => null, + LassoSelect: (props: any) => null, + Hoverable: (props: any) => null, + BrushSelect: (props: any) => null, +}; export const Components = { - MiniMap: () => null, + MiniMap: (props: any) => null, + Tooltip: (props: any) => null, + Legend: (props: any) => null, + LassoSelect: (props: any) => null, }; export const useBehaviorHook = () => {}; export default Graphin; diff --git a/packages/graphin/src/useGraphin.tsx b/packages/graphin/src/useGraphin.tsx index 6fbd29066..766a4def9 100644 --- a/packages/graphin/src/useGraphin.tsx +++ b/packages/graphin/src/useGraphin.tsx @@ -1,8 +1,7 @@ -import { Graph } from '@antv/g6'; import React from 'react'; export interface GraphinContextType { - graph: typeof Graph | null; + graph: any; isReady: boolean; [key: string]: any; } diff --git a/packages/graphin/src/utils/index.tsx b/packages/graphin/src/utils/index.tsx index 7414124c9..8fce6fa99 100644 --- a/packages/graphin/src/utils/index.tsx +++ b/packages/graphin/src/utils/index.tsx @@ -1,4 +1,5 @@ export { default as getComboStyleByTheme } from '../theme/combo-style'; export { default as getEdgeStyleByTheme } from '../theme/edge-style'; export { default as getNodeStyleByTheme } from '../theme/node-style'; +export { mock } from './mock'; export { default as processEdges } from './processEdges'; diff --git a/packages/graphin/src/utils/mock.ts b/packages/graphin/src/utils/mock.ts new file mode 100644 index 000000000..64becaa48 --- /dev/null +++ b/packages/graphin/src/utils/mock.ts @@ -0,0 +1,318 @@ +import { GraphinData, IUserEdge, IUserNode } from '../typings/type'; +export type GraphinTreeData = any; + +const walk = (node: GraphinTreeData, callback: (node: GraphinTreeData) => void) => { + callback(node); + if (node.children && node.children.length > 0) { + node.children.forEach(child => { + walk(child, callback); + }); + } +}; + +export interface Node extends GraphinTreeData { + parent?: Node; +} + +class Tree { + private root: Node | undefined; + + private nodeIds: string[] = []; + + constructor(root?: Node) { + // Pass in the root of an existing tree + if (root) this.root = root; + } + + bfs = (cb: (node: Node) => boolean): Node | undefined => { + if (!this.root) { + return; + } + + const queue: Node[] = []; + + queue.push(this.root); + while (queue.length) { + const node = queue.shift() as Node; + if (cb(node)) { + return node; + } + if (node?.children?.length) { + queue.push(...node.children); + } + } + }; + + getRoot = (): Node | undefined => { + return this.root; + }; + + getNode = (id: string): Node | undefined => { + const result = this.bfs(node => { + return node.id === id; + }); + + return result; + }; + + // eslint-disable-next-line + private addRoot = (id: string, data?: any) => { + this.root = { + id, + children: [], + }; + this.nodeIds.push(id); + }; + + // eslint-disable-next-line + addNode = (conf: { parentId?: string; id: string; data?: any }) => { + const { parentId, id, data } = conf; + if (!this.root) { + this.addRoot(id, data); + return; + } + + let parent: Node | undefined; + + if (!parentId) { + // If parentId was not given, pick a random node as parent + const index = Math.floor(Math.random() * this.nodeIds.length); + parent = this.getNode(this.nodeIds[index]); + } else { + parent = this.getNode(parentId); + } + + if (!parent) { + console.error(`Parent node doesn't exist!`); + return; + } + + this.nodeIds.push(id); + // @ts-ignore + (parent as Node).children.push({ + id, + // @ts-ignore + parent, + children: [], + }); + }; +} + +const defaultOptions = { + /** 节点 */ + nodeCount: 10, + nodeType: 'company', +}; + +type OptionType = typeof defaultOptions; + +/** + * 1,mock data with edges,nodes + * 2.mock nodes properties + * 3.filter edges + * 4. + */ +export class Mock { + nodes: IUserNode[]; + + edges: IUserEdge[]; + + options: OptionType; + + nodeIds: string[]; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + combosData: any; + + // eslint-disable-line @typescript-eslint/no-explicit-any + treeData: Tree; + + constructor(count: number) { + this.options = defaultOptions; + this.options.nodeCount = count; + this.nodes = []; + this.edges = []; + this.nodeIds = []; + this.treeData = new Tree(); + this.initNodes(); + } + + initNodes = () => { + const { nodeCount, nodeType } = this.options; + const temp = Array.from({ length: nodeCount }); + this.nodes = temp.map((node, index) => { + return { + id: `node-${index}`, + label: `node-${index}`, + type: nodeType, + }; + }); + + for (let i = 0; i < nodeCount; i = i + 1) { + for (let j = 0; j < nodeCount - 1; j = j + 1) { + this.edges.push({ + source: `node-${i}`, + target: `node-${j}`, + }); + } + } + this.nodeIds = this.nodes.map(node => node.id); + }; + + expand = (snodes: IUserNode[]) => { + this.edges = []; + this.nodes = []; + snodes.forEach(node => { + for (let i = 0; i < this.options.nodeCount; i += 1) { + this.nodes.push({ + id: `${node.id}-${i}`, + type: node.type, + }); + this.edges.push({ + source: `${node.id}-${i}`, + target: node.id, + }); + } + }); + return this; + }; + + type = (nodeType: string) => { + this.nodes = this.nodes.map(node => { + return { + ...node, + type: nodeType, + }; + }); + return this; + }; + + circle = (centerId = '') => { + let id = centerId; + if (this.nodeIds.indexOf(id) === -1) { + id = 'node-0'; + } + this.edges = this.edges.filter((edge: IUserEdge) => { + return edge.source === id || edge.target === id; + }); + return this; + }; + + /** + * @param ratio 随机的稀疏程度，默认0.5 + */ + random = (ratio = 0.5) => { + const { nodeCount } = this.options; + const length: number = parseInt(String(nodeCount * ratio)); + /** 随机ID */ + const randomArray: string[] = this.nodeIds.sort(() => Math.random() - 0.5).slice(0, length); + + this.edges = this.edges.filter((edge: IUserEdge) => { + return randomArray.indexOf(edge.target) !== -1; + }); + + this.edges = this.edges.sort(() => Math.random() - 0.5).slice(0, length); + + return this; + }; + + tree = () => { + this.edges = []; + this.treeData = new Tree(); + const rootId = this.nodeIds[0]; + + this.nodeIds.forEach(id => { + this.treeData.addNode({ + id, + // @ts-ignore + style: { + label: { + value: id, + }, + }, + }); + }); + + this.treeData.bfs(node => { + if (node.id !== rootId) { + this.edges.push({ + source: node?.parent?.id as string, + target: node.id, + properties: [], + }); + } + return false; + }); + + return this; + }; + + value = () => { + return { + nodes: this.nodes, + edges: this.edges, + }; + }; + + combos = (chunkSize: number) => { + const comboIds = new Set(); + this.nodes = this.nodes.map((node, index) => { + const comboIndex = Math.ceil((index + 1) / chunkSize); + const comboId = `combo-${comboIndex}`; + comboIds.add(comboId); + return { + ...node, + comboId, + }; + }); + this.combosData = [...comboIds].map(c => { + return { + id: c, + label: c, + }; + }); + + return this; + }; + + graphin = (): GraphinData => { + return { + // @ts-ignore + nodes: this.nodes.map(node => { + return { + ...node, + id: node.id, + type: 'graphin-circle', + comboId: node.comboId, + style: { + label: { + value: `${node.id}`, + }, + }, + }; + }), + edges: this.edges.map(edge => { + return { + source: edge.source, + target: edge.target, + }; + }), + combos: this.combosData, + }; + }; + + graphinTree = (): GraphinTreeData => { + const tree = this.treeData.getRoot(); + // @ts-ignore + walk(tree, node => { + // @ts-ignore + delete node.parent; + }); + // @ts-ignore + return tree as GraphinTreeData; + }; +} + +export const mock = (count: number) => { + return new Mock(count); +}; diff --git a/webpack.config.js b/webpack.config.js index c728db397..207fe30a8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -132,7 +132,7 @@ module.exports = (env, argv) => { lodash: '_', react: 'React', 'react-dom': 'ReactDOM', - '@antv/graphin': 'Graphin', + // '@antv/graphin': 'Graphin', '@antv/g6': 'G6', '@antv/gi-sdk': 'GISDK', antd: 'antd',