From 27cda4f27d7d38b93c531873d04208d439d4413a Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Thu, 23 Nov 2023 16:44:57 +0800 Subject: [PATCH] feat: remove graphin --- packages/graphin/.fatherrc.js | 9 - packages/graphin/.gitignore | 53 -- packages/graphin/demo/components.tsx | 21 - .../demo/components/GraphinProvider.md | 8 - .../demo/components/GraphinProvider.tsx | 45 -- .../graphin/demo/components/useGraphin.md | 8 - .../graphin/demo/components/useGraphin.tsx | 26 - packages/graphin/demo/data.tsx | 11 - packages/graphin/demo/data/index.md | 8 - packages/graphin/demo/data/index.tsx | 50 -- packages/graphin/demo/index.md | 27 - .../dynamic-layout/demos/graphin-force.tsx | 123 ---- .../dynamic-layout/demos/normal-layout.tsx | 87 --- .../demo/layout/dynamic-layout/index.md | 16 - packages/graphin/demo/style.tsx | 95 --- packages/graphin/package.json | 50 -- packages/graphin/src/ExtendGraph.tsx | 93 --- packages/graphin/src/Graphin.tsx | 239 -------- packages/graphin/src/apis/element.ts | 38 -- packages/graphin/src/apis/index.ts | 25 - packages/graphin/src/apis/types.ts | 32 - packages/graphin/src/apis/zoom.ts | 28 - .../src/behaviors/ActivateRelations.tsx | 47 -- .../graphin/src/behaviors/BrushSelect.tsx | 41 -- .../graphin/src/behaviors/ClickSelect.tsx | 35 -- packages/graphin/src/behaviors/DragCanvas.tsx | 35 -- packages/graphin/src/behaviors/DragCombo.tsx | 30 - packages/graphin/src/behaviors/DragNode.tsx | 53 -- packages/graphin/src/behaviors/Hoverable.tsx | 64 -- .../graphin/src/behaviors/LassoSelect.tsx | 45 -- .../graphin/src/behaviors/OrbitCanvas3D.tsx | 20 - .../graphin/src/behaviors/ResizeCanvas.tsx | 37 -- packages/graphin/src/behaviors/ZoomCanvas.tsx | 45 -- .../graphin/src/behaviors/ZoomCanvas3D.tsx | 17 - packages/graphin/src/behaviors/index.tsx | 31 - .../graphin/src/behaviors/registerBehavior.ts | 15 - .../graphin/src/behaviors/useBehaviorHook.ts | 49 -- packages/graphin/src/compatible/event-item.ts | 15 - packages/graphin/src/compatible/graph.ts | 75 --- packages/graphin/src/compatible/index.ts | 8 - .../src/components/ContextMenu/index.tsx | 56 -- .../graphin/src/components/MiniMap/index.tsx | 25 - packages/graphin/src/components/index.ts | 11 - packages/graphin/src/icon/loader.ts | 74 --- .../graphin/src/icon/registerFontFamily.ts | 24 - .../graphin/src/icon/registerIconFonts.ts | 61 -- packages/graphin/src/index.tsx | 31 - .../src/styling/edge-style-transform.ts | 97 --- .../src/styling/node-style-transform.ts | 106 ---- packages/graphin/src/theme/combo-style.ts | 50 -- packages/graphin/src/theme/edge-style.ts | 127 ---- packages/graphin/src/theme/index.ts | 94 --- packages/graphin/src/theme/node-style.ts | 129 ---- packages/graphin/src/typings/type.ts | 568 ------------------ packages/graphin/src/useGraphin.tsx | 22 - packages/graphin/src/utils/index.tsx | 5 - packages/graphin/src/utils/mock.ts | 341 ----------- packages/graphin/src/utils/processEdges.ts | 130 ---- packages/graphin/tsconfig.json | 20 - 59 files changed, 3725 deletions(-) delete mode 100644 packages/graphin/.fatherrc.js delete mode 100644 packages/graphin/.gitignore delete mode 100644 packages/graphin/demo/components.tsx delete mode 100644 packages/graphin/demo/components/GraphinProvider.md delete mode 100644 packages/graphin/demo/components/GraphinProvider.tsx delete mode 100644 packages/graphin/demo/components/useGraphin.md delete mode 100644 packages/graphin/demo/components/useGraphin.tsx delete mode 100644 packages/graphin/demo/data.tsx delete mode 100644 packages/graphin/demo/data/index.md delete mode 100644 packages/graphin/demo/data/index.tsx delete mode 100644 packages/graphin/demo/index.md delete mode 100644 packages/graphin/demo/layout/dynamic-layout/demos/graphin-force.tsx delete mode 100644 packages/graphin/demo/layout/dynamic-layout/demos/normal-layout.tsx delete mode 100644 packages/graphin/demo/layout/dynamic-layout/index.md delete mode 100644 packages/graphin/demo/style.tsx delete mode 100644 packages/graphin/package.json delete mode 100644 packages/graphin/src/ExtendGraph.tsx delete mode 100644 packages/graphin/src/Graphin.tsx delete mode 100644 packages/graphin/src/apis/element.ts delete mode 100644 packages/graphin/src/apis/index.ts delete mode 100644 packages/graphin/src/apis/types.ts delete mode 100644 packages/graphin/src/apis/zoom.ts delete mode 100644 packages/graphin/src/behaviors/ActivateRelations.tsx delete mode 100644 packages/graphin/src/behaviors/BrushSelect.tsx delete mode 100644 packages/graphin/src/behaviors/ClickSelect.tsx delete mode 100644 packages/graphin/src/behaviors/DragCanvas.tsx delete mode 100644 packages/graphin/src/behaviors/DragCombo.tsx delete mode 100644 packages/graphin/src/behaviors/DragNode.tsx delete mode 100644 packages/graphin/src/behaviors/Hoverable.tsx delete mode 100644 packages/graphin/src/behaviors/LassoSelect.tsx delete mode 100644 packages/graphin/src/behaviors/OrbitCanvas3D.tsx delete mode 100644 packages/graphin/src/behaviors/ResizeCanvas.tsx delete mode 100644 packages/graphin/src/behaviors/ZoomCanvas.tsx delete mode 100644 packages/graphin/src/behaviors/ZoomCanvas3D.tsx delete mode 100644 packages/graphin/src/behaviors/index.tsx delete mode 100644 packages/graphin/src/behaviors/registerBehavior.ts delete mode 100644 packages/graphin/src/behaviors/useBehaviorHook.ts delete mode 100644 packages/graphin/src/compatible/event-item.ts delete mode 100644 packages/graphin/src/compatible/graph.ts delete mode 100644 packages/graphin/src/compatible/index.ts delete mode 100644 packages/graphin/src/components/ContextMenu/index.tsx delete mode 100644 packages/graphin/src/components/MiniMap/index.tsx delete mode 100644 packages/graphin/src/components/index.ts delete mode 100644 packages/graphin/src/icon/loader.ts delete mode 100644 packages/graphin/src/icon/registerFontFamily.ts delete mode 100644 packages/graphin/src/icon/registerIconFonts.ts delete mode 100644 packages/graphin/src/index.tsx delete mode 100644 packages/graphin/src/styling/edge-style-transform.ts delete mode 100644 packages/graphin/src/styling/node-style-transform.ts delete mode 100644 packages/graphin/src/theme/combo-style.ts delete mode 100644 packages/graphin/src/theme/edge-style.ts delete mode 100644 packages/graphin/src/theme/index.ts delete mode 100644 packages/graphin/src/theme/node-style.ts delete mode 100644 packages/graphin/src/typings/type.ts delete mode 100644 packages/graphin/src/useGraphin.tsx delete mode 100644 packages/graphin/src/utils/index.tsx delete mode 100644 packages/graphin/src/utils/mock.ts delete mode 100644 packages/graphin/src/utils/processEdges.ts delete mode 100644 packages/graphin/tsconfig.json diff --git a/packages/graphin/.fatherrc.js b/packages/graphin/.fatherrc.js deleted file mode 100644 index 695be6247..000000000 --- a/packages/graphin/.fatherrc.js +++ /dev/null @@ -1,9 +0,0 @@ -export default { - // esm: { type: 'rollup', file: 'index', importLibToEs: true }, - // lessInRollupMode: {}, - // extractCSS: true, - entry: './src/index.tsx', - esm: 'babel', - cjs: 'babel', - lessInBabelMode: false, -}; diff --git a/packages/graphin/.gitignore b/packages/graphin/.gitignore deleted file mode 100644 index e13f6c1f3..000000000 --- a/packages/graphin/.gitignore +++ /dev/null @@ -1,53 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log -.DS_Store -.history -# Coverage directory used by tools like istanbul -coverage - - -# Dependency directories -node_modules - -.dumi -.umi - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Output of 'npm pack' -# *.tgz - - -# dotenv environment variables file -.env - -# IDE -.idea - -# build -lib -# dist - -build - -# yarn-lock -yarn.lock - -.umi -.umi-production - -# ignore dist files -.vscode/ - -dist - -default.etcd \ No newline at end of file diff --git a/packages/graphin/demo/components.tsx b/packages/graphin/demo/components.tsx deleted file mode 100644 index c535b4ef1..000000000 --- a/packages/graphin/demo/components.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Graphin, { Components, Utils } from '@antv/graphin'; -import * as React from 'react'; -const { MiniMap } = Components; -const data = Utils.mock(10).circle().value(); - -console.log('data', data); - -interface ComponentDemosProps {} - -const ComponentDemos: React.FunctionComponent = props => { - return ( -
- {/* @ts-ignore */} - - - -
- ); -}; - -export default ComponentDemos; diff --git a/packages/graphin/demo/components/GraphinProvider.md b/packages/graphin/demo/components/GraphinProvider.md deleted file mode 100644 index 8c364deda..000000000 --- a/packages/graphin/demo/components/GraphinProvider.md +++ /dev/null @@ -1,8 +0,0 @@ -## GraphinProvider DEMO - -```jsx -import React from 'react'; -import DEMO from './GraphinProvider'; - -export default () => ; -``` diff --git a/packages/graphin/demo/components/GraphinProvider.tsx b/packages/graphin/demo/components/GraphinProvider.tsx deleted file mode 100644 index 2dd82dd43..000000000 --- a/packages/graphin/demo/components/GraphinProvider.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import Graphin, { Components, GraphinContext, Utils, useGraphin } from '@antv/graphin'; -import React from 'react'; -const { MiniMap } = Components; -const data = Utils.mock(10).circle().value(); - -console.log('data', data); - -interface ComponentDemosProps {} - -const MyComponent = () => { - const { graph, isReady } = useGraphin(); - console.log(graph, isReady); - return
My Component
; -}; -const OutSideComponent = () => { - const { graph, isReady } = useGraphin(); - console.log(graph, isReady); - return
OutSide Component
; -}; - -const ComponentDemos: React.FunctionComponent = props => { - const [state, setState] = React.useState({ graph: null, isReady: false }); - const handleInit = graph => { - setState(pre => { - return { - ...pre, - graph, - isReady: true, - }; - }); - }; - console.log('state.isReady', state.isReady); - return ( - - {/* @ts-ignore */} - - - - - {state.isReady && } - - ); -}; - -export default ComponentDemos; diff --git a/packages/graphin/demo/components/useGraphin.md b/packages/graphin/demo/components/useGraphin.md deleted file mode 100644 index d82322cbf..000000000 --- a/packages/graphin/demo/components/useGraphin.md +++ /dev/null @@ -1,8 +0,0 @@ -## UseGraphin DEMO - -```jsx -import React from 'react'; -import DEMO from './useGraphin'; - -export default () => ; -``` diff --git a/packages/graphin/demo/components/useGraphin.tsx b/packages/graphin/demo/components/useGraphin.tsx deleted file mode 100644 index fb4c120bf..000000000 --- a/packages/graphin/demo/components/useGraphin.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import Graphin, { Components, Utils, useGraphin } from '@antv/graphin'; -import React from 'react'; -const { MiniMap } = Components; -const data = Utils.mock(10).circle().value(); - -interface ComponentDemosProps {} - -const MyComponent = () => { - const { graph, isReady } = useGraphin(); - const nodeCount = graph.getAllNodesData().length; - console.log(graph, isReady, nodeCount); - return
My Component,NodeCount: {nodeCount}
; -}; -const ComponentDemos: React.FunctionComponent = props => { - return ( -
- {/* @ts-ignore */} - - - - -
- ); -}; - -export default ComponentDemos; diff --git a/packages/graphin/demo/data.tsx b/packages/graphin/demo/data.tsx deleted file mode 100644 index 503c75865..000000000 --- a/packages/graphin/demo/data.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Graphin, { Utils } from '@antv/graphin'; -import * as React from 'react'; - -const data = Utils.mock(10).circle().value(); -console.log('data', data); - -const DataDemo = props => { - return ; -}; - -export default DataDemo; diff --git a/packages/graphin/demo/data/index.md b/packages/graphin/demo/data/index.md deleted file mode 100644 index 549aa7ae4..000000000 --- a/packages/graphin/demo/data/index.md +++ /dev/null @@ -1,8 +0,0 @@ -## Change Data - -```jsx -import React from 'react'; -import Demo from './index'; - -export default () => ; -``` diff --git a/packages/graphin/demo/data/index.tsx b/packages/graphin/demo/data/index.tsx deleted file mode 100644 index 73c66e8cc..000000000 --- a/packages/graphin/demo/data/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import Graphin, { Utils } from '@antv/graphin'; -import React, { useMemo, useState } from 'react'; -interface DemoProps {} -const LAYOUTS = ['force', 'grid', 'concentric']; -const Demo: React.FunctionComponent = props => { - const [state, setState] = useState({ - data: Utils.mock(6).circle().graphin(), - layout: { - type: 'grid', - }, - }); - const { data, layout } = state; - const handleClick = () => { - setState(pre => { - return { - ...pre, - data: Utils.mock(Math.round(Math.random() * 50)) - .circle() - .graphin(), - }; - }); - }; - const handleChangeLayout = () => { - const randomIndex = Math.round(Math.random() * 3); - console.log('randomIndex', randomIndex, LAYOUTS[randomIndex]); - setState(pre => { - return { - ...pre, - layout: { - type: LAYOUTS[randomIndex], - }, - }; - }); - }; - const layoutType = layout.type; - - const memoLayout = useMemo(() => { - return { type: layoutType }; - }, [layoutType]); - console.log('data count', data.nodes.length); - - return ( - - - - - ); -}; - -export default Demo; diff --git a/packages/graphin/demo/index.md b/packages/graphin/demo/index.md deleted file mode 100644 index 0e0cd0ee7..000000000 --- a/packages/graphin/demo/index.md +++ /dev/null @@ -1,27 +0,0 @@ -## DATA DEMO - -```jsx -import React from 'react'; -import Demo from './data'; - -export default () => ; -``` - - - - diff --git a/packages/graphin/demo/layout/dynamic-layout/demos/graphin-force.tsx b/packages/graphin/demo/layout/dynamic-layout/demos/graphin-force.tsx deleted file mode 100644 index 1756406ec..000000000 --- a/packages/graphin/demo/layout/dynamic-layout/demos/graphin-force.tsx +++ /dev/null @@ -1,123 +0,0 @@ -/* eslint-disable no-undef */ -import Graphin, { Components, Utils } from '@antv/graphin'; -import { Card, Col, Row } from 'antd'; -import React from 'react'; - -import { DeleteFilled, ExpandAltOutlined, TagFilled } from '@ant-design/icons'; - -// 引入Graphin CSS -const { ContextMenu } = Components; - -const defSpreingLen = (_edge, source, target) => { - // NOTE: 固定200还是效果好 - return 200; -}; - -const App = () => { - const [state, setState] = React.useState({ - selected: [], - data: Utils.mock(5).circle().graphin(), - }); - - const handleChange = (menuItem, menuData) => { - console.log(menuItem, menuData); - const count = 4; - const expandData = Utils.mock(count).expand([menuData]).type('company').graphin(); - - setState({ - ...state, - data: { - // 还需要对Node和Edge去重，这里暂不考虑 - nodes: [...state.data.nodes, ...expandData.nodes], - edges: [...state.data.edges, ...expandData.edges], - }, - }); - }; - const { data } = state; - return ( -
- - - - - , - name: '一度扩散', - }, - { - key: 'tag', - icon: , - name: '节点打标', - }, - { - key: 'delete', - icon: , - name: '节点删除', - }, - ]} - onChange={handleChange} - > - - - - - - - , - name: '一度扩散', - }, - { - key: 'tag', - icon: , - name: '节点打标', - }, - { - key: 'delete', - icon: , - name: '节点删除', - }, - ]} - onChange={handleChange} - > - - - - -
- ); -}; - -export default App; diff --git a/packages/graphin/demo/layout/dynamic-layout/demos/normal-layout.tsx b/packages/graphin/demo/layout/dynamic-layout/demos/normal-layout.tsx deleted file mode 100644 index 12f47edde..000000000 --- a/packages/graphin/demo/layout/dynamic-layout/demos/normal-layout.tsx +++ /dev/null @@ -1,87 +0,0 @@ -/* eslint-disable no-undef */ -import Graphin, { Components, Utils } from '@antv/graphin'; -import { Card, Col, Row } from 'antd'; -import React from 'react'; - -import { ExpandAltOutlined } from '@ant-design/icons'; -const { ContextMenu } = Components; -// 引入Graphin CSS - -const App = () => { - const [state, setState] = React.useState({ - selected: [], - data: Utils.mock(5).circle().graphin(), - }); - - const handleChange = (menuItem, menuData) => { - console.log(menuItem, menuData); - const count = 4; - const expandData = Utils.mock(count).expand([menuData]).graphin(); - - setState({ - ...state, - data: { - // 还需要对Node和Edge去重，这里暂不考虑 - nodes: [...state.data.nodes, ...expandData.nodes], - edges: [...state.data.edges, ...expandData.edges], - }, - }); - }; - const { data } = state; - return ( -
- - - - - , - name: '一度扩散', - }, - ]} - onChange={handleChange} - > - - - - - - - , - name: '一度扩散', - }, - ]} - onChange={handleChange} - > - - - - -
- ); -}; - -export default App; diff --git a/packages/graphin/demo/layout/dynamic-layout/index.md b/packages/graphin/demo/layout/dynamic-layout/index.md deleted file mode 100644 index 9af847745..000000000 --- a/packages/graphin/demo/layout/dynamic-layout/index.md +++ /dev/null @@ -1,16 +0,0 @@ -## 动态布局 - -`动态布局`是指 布局的过程是动态，可以根据`数据的变化而变化`。因此我们也称之为数据响应布局，比如在 画布分析过程中，需要对数据进行 添加，删除，修改。如果此时对应的布局也需要改变，则我们称之为`动态布局`。 - -在 Graphin 中，将动态布局分为两类： - -- 第一类为普通布局算法的动态布局，比如`circular`,`grid`等，数据的变化后，重新执行该布局函数，通过计算两次布局后节点的最终位置，加以补间动画完成布局响应，因此也称之为`数据响应布局` -- 第二类为力导布局的动态布局。比如`d3-force`,`graphin-force`等。数据变化后，并不能通过再次执行该布局函数就能得到理想的布局，需要对力导的前置布局做预处理，对力的施加处理策略，是一个渐进的过程，因此也称之为`力导渐进布局` - -## 【普通布局】动态布局（数据响应布局） - - - -## 【力导布局】动态布局（力导渐进布局） - - diff --git a/packages/graphin/demo/style.tsx b/packages/graphin/demo/style.tsx deleted file mode 100644 index 58b03cde4..000000000 --- a/packages/graphin/demo/style.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import Graphin, { Behaviors, Utils } from '@antv/graphin'; - -import React from 'react'; - -const { ZoomCanvas, Hoverable } = Behaviors; - -const data = Utils.mock(6).circle().graphin(); - -data.edges = []; - -data.nodes[0].style = { - keyshape: { - size: 80, - stroke: 'red', - fill: 'red', - fillOpacity: 0.2, - }, - label: { - value: '设置 \n keyshape', - }, -}; - -data.nodes[1].style = { - label: { - value: '设置 label', - position: 'right', - offset: [20, 5], - fill: 'green', - }, -}; - -data.nodes[2].style = { - icon: { - type: 'image', - value: `https://gw.alipayobjects.com/zos/antfincdn/0b4HzOcEJY/Graphin.svg`, - size: [20, 20], - }, - label: { - value: '设置 icon', - }, -}; - -data.nodes[3].style = { - label: { - value: '设置 badges', - }, - badges: [ - { - position: 'RT', - type: 'text', - value: 8, - size: [15, 15], - fill: 'red', - color: '#fff', - }, - ], -}; - -data.nodes[4].style = { - label: { - value: '设置 halo', - }, - halo: { - visible: true, - stroke: 'red', - }, -}; - -data.nodes[5].style = { - icon: { - type: 'image', - value: `https://avatars.githubusercontent.com/u/105033?v=4`, - size: [20, 20], - clip: { - r: 10, - }, - }, - label: { - value: '裁剪 icon', - }, -}; - -console.log(data); - -const layout = { - type: 'grid', -}; - -export default () => { - return ( -
- -
- ); -}; diff --git a/packages/graphin/package.json b/packages/graphin/package.json deleted file mode 100644 index 8c91f0bf6..000000000 --- a/packages/graphin/package.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "@antv/graphin", - "version": "5.0.0", - "description": "Graphin", - "main": "lib/index.js", - "module": "es/index.js", - "types": "lib/index.d.ts", - "repository": { - "type": "git", - "url": "https://github.com/antvis/G6VP.git" - }, - "files": [ - "es", - "lib", - "dist" - ], - "sideEffects": [ - "*.css", - "*.less" - ], - "scripts": { - "docs": "dumi dev", - "build": "npm run clean && npm run build:es & npm run build:umd", - "build:es": "father build", - "build:umd": "webpack --mode production -c ../../webpack.config.js --env path=/packages/gi-sdk", - "build:umd:analysis": "webpack --mode production -c ../../webpack.config.js --env path=/packages/gi analysis=true", - "clean": "rimraf es esm lib dist", - "prettier": "prettier --write ./src/**/**/**/*.js", - "start": "npm run clean && father build --watch", - "test": "jest", - "prepublishOnly": "npm run build", - "postpublish": "tnpm sync @antv/graphin" - }, - "dependencies": { - "@antv/g6": "5.0.0-beta.27", - "lodash-es": "^4.17.21" - }, - "peerDependencies": { - "antd": "4.x", - "react": "17.x", - "react-dom": "17.x" - }, - "publishConfig": { - "access": "public" - }, - "devDependencies": { - "dumi": "^1.1.50", - "@types/mousetrap": "^1.6.11" - } -} diff --git a/packages/graphin/src/ExtendGraph.tsx b/packages/graphin/src/ExtendGraph.tsx deleted file mode 100644 index 2b242e8f0..000000000 --- a/packages/graphin/src/ExtendGraph.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { Extensions, Graph as G6Graph, extend } from '@antv/g6'; - -const handler = (data, options = {}, graphCore) => { - const { combos } = data; - console.log('node graphin....', data); - - const nodes = (data.nodes || []).map(item => { - const { id, data, type, ...others } = item; - - return { - id: id, - data: { - __type: type, - ...data, - }, - ...others, - }; - }); - - const edges = (data.edges || []).map((item, index) => { - const { source, target, id, type, data, ...others } = item; - return { - id: id || `edge-${index}`, - source, - target, - data: { - __type: type, - ...data, - }, - ...others, - }; - }); - - return { - nodes, - edges, - combos, - }; -}; - -const TransformGraphinData = (data, options, graphCore) => { - const { dataAdded, dataUpdated, dataRemoved } = data; - return { - dataAdded: handler(dataAdded, options, graphCore), - dataUpdated: handler(dataUpdated, options, graphCore), - dataRemoved: handler(dataRemoved, options, graphCore), - }; -}; - -export default extend(G6Graph, { - edges: { - 'quadratic-edge': Extensions.QuadraticEdge, - 'loop-edge': Extensions.LoopEdge, - }, - nodes: { - 'sphere-node': Extensions.SphereNode, - 'donut-node': Extensions.DonutNode, - }, - - layouts: { - //@ts-ignore - dagre: Extensions.DagreLayout, - //@ts-ignore - d3force: Extensions.D3ForceLayout, - //@ts-ignore - force: Extensions.ForceLayout, - //@ts-ignore - radial: Extensions.RadialLayout, - }, - behaviors: { - //@ts-ignore - 'zoom-canvas': Extensions.ZoomCanvas, - //@ts-ignore - 'drag-canvas': Extensions.DragCanvas, - 'drag-node': Extensions.DragNode, - 'hover-activate': Extensions.HoverActivate, - 'brush-select': Extensions.BrushSelect, - //@ts-ignore - 'orbit-canvas-3d': Extensions.OrbitCanvas3D, - //@ts-ignore - 'zoom-canvas-3d': Extensions.ZoomCanvas3D, - }, - plugins: { - minimap: Extensions.Minimap, - menu: Extensions.Menu, - }, - //@ts-ignore - transforms: { - 'transform-graphin-data': TransformGraphinData, - //@ts-ignore - 'process-parallel-edges': Extensions.ProcessParallelEdges, - }, -}); diff --git a/packages/graphin/src/Graphin.tsx b/packages/graphin/src/Graphin.tsx deleted file mode 100644 index ecda157c1..000000000 --- a/packages/graphin/src/Graphin.tsx +++ /dev/null @@ -1,239 +0,0 @@ -import { IGraph, Specification } from '@antv/g6'; -import React, { forwardRef, memo, useEffect, useRef, useState } from 'react'; -import ExtendGraph from './ExtendGraph'; -import ApiController from './apis'; -import Compatible from './compatible'; -import { edgeStyleTransform } from './styling/edge-style-transform'; -import { nodeStyleTransform } from './styling/node-style-transform'; -import { GraphinContext } from './useGraphin'; - -interface GraphinProps extends Specification<{}, {}> { - container?: string; - style?: React.CSSProperties; - /** 兼容的props */ - fitView?: boolean; - onInit?: (graph: any) => void; - unMount?: (graph: any) => void; - children?: React.ReactNode[]; - /** 是否兼容V2 */ - compatibility?: boolean; - node?: any; - edge?: any; -} - -const LOD_NODE_NUM_THRESHOLD = 300; - -const Graphin: React.FunctionComponent = forwardRef((props, ref) => { - const { - style, - children, - compatibility, - data, - layout, - container = `graphin-container-${Math.random()}`, - onInit, - unMount, - node = nodeStyleTransform, - edge = edgeStyleTransform, - renderer = 'canvas', - ...options - } = props; - - const dataRef = useRef(data); - const layoutRef = useRef(layout); - console.log('%c GRAPHIN RENDER....', 'color:yellow', props, layoutRef.current); - const [state, setState] = useState<{ - isReady: boolean; - graph: IGraph; - }>({ - isReady: false, - //@ts-ignore - graph: null, - apis: {}, - }); - const { isReady, graph } = state; - - if (dataRef.current !== data) { - console.log('%c GRAPHIN DATA CHANGE....', 'color:yellow', data); - console.time('GRAPHIN_CHANGE_DATA_COST'); - //@ts-ignore - graph && graph.changeData(data, 'mergeReplace', false); - //@ts-ignore - if ( - //@ts-ignore - (dataRef.current.nodes.length && graph) || - (graph && graph.layoutController.previousNodes && graph.layoutController.previousNodes.size === 0) - ) { - console.log('>>>>>>>> LAYOUT>>>>>>'); - //@ts-ignore - graph.layout({ - ...layout, - presetLayout: {}, - }); - } - //@ts-ignore - dataRef.current = data; - console.timeEnd('GRAPHIN_CHANGE_DATA_COST'); - } - if (layoutRef.current !== layout) { - console.log('%c GRAPHIN LAYOUT CHANGE....', 'color:#f0f', layout); - - //@ts-ignore - graph && graph.layout(layout); - //@ts-ignore - layoutRef.current = layout; - } - - useEffect(() => { - if (graph) { - console.log('%c Graphin change EdgeMapper', 'color:yellow'); - graph.updateMapper('edge', edge); - } - }, [edge, graph]); - - useEffect(() => { - if (graph) { - console.log('%c Graphin change NodeMapper', 'color:yellow'); - graph.updateMapper('node', node); - } - }, [node, graph]); - - useEffect(() => { - let { - width, - height, - //@ts-ignore - node, - //@ts-ignore - edge, - // behaviors - modes = { default: ['zoom-canvas', 'drag-canvas'], lasso: [] }, - } = options; - const ContainerDOM = document.getElementById(container); - - const { clientWidth, clientHeight } = ContainerDOM as HTMLDivElement; - width = Number(width) || clientWidth || 500; - height = Number(height) || clientHeight || 500; - console.log('EFFECT>>>>>>>>', renderer); - - let instance = new ExtendGraph({ - container, - width, - height, - modes, - data, - layout, - renderer, - node, - edge, - optimize: { tileFirstRender: 100000000000 }, - transforms: [ - //@ts-ignore - 'transform-graphin-data', - //@ts-ignore - { - //@ts-ignore - type: 'process-parallel-edges', - multiEdgeType: 'quadratic-edge', - loopEdgeType: 'loop-edge', - }, - ], - plugins: [ - //@ts-ignore - { - type: 'lod-controller', - //@ts-ignore - disableLod: true, //data.nodes.length < LOD_NODE_NUM_THRESHOLD, - }, - ], - nodeState: { - hover: { - keyShape: { - lineWidth: 0, - }, - //@ts-ignore - haloShape: { - opacity: 0.25, - lineWidth: 12, - pointerEvents: 'none', - zIndex: -1, - visible: true, - droppable: false, - }, - }, - }, - edgeState: { - hover: { - keyShape: { - lineWidth: 1, - }, - //@ts-ignore - haloShape: { - opacity: 0.25, - lineWidth: 12, - zIndex: -1, - pointerEvents: 'none', - visible: true, - droppable: false, - }, - }, - }, - }); - - /** @ts-ignore 做兼容性处理 */ - Compatible.graph(instance); - - if (ref) { - //@ts-ignore - ref.current = instance; - } - //@ts-ignore - const apis = ApiController(instance); - - onInit && onInit({ graph: instance, apis }); - - //@ts-ignore - setState(preState => { - return { - ...preState, - graph: instance, - isReady: true, - apis, - }; - }); - - return () => { - console.log('%c GRAPHIN DESTORY....', 'color:rgba(48,86,227,1)'); - instance.destroy(); - //@ts-ignore - instance = null; - unMount && unMount(instance); - }; - }, [renderer]); - - const containerStyle: React.CSSProperties = { - height: '100%', - width: '100%', - minHeight: '500px', - position: 'relative', - ...style, - }; - - if (children) { - return ( - - <> -
- {isReady && children} - - - ); - } - return ( - <> -
- - ); -}); - -export default memo(Graphin); diff --git a/packages/graphin/src/apis/element.ts b/packages/graphin/src/apis/element.ts deleted file mode 100644 index 7f0a4cba8..000000000 --- a/packages/graphin/src/apis/element.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { IGraph } from '@antv/g6'; - -/** - * 高亮节点 - * @param graph - */ -export const highlightNodeById = (graph: IGraph) => (nodeIds: string[]) => { - graph.getNodes().forEach(node => { - graph.clearItemStates(node, ['active', 'inactive']); - if (nodeIds.indexOf(node.get('id')) !== -1) { - graph.setItemState(node, 'active', true); - } else { - graph.setItemState(node, 'active', false); - } - }); -}; - -/** - * Focus 节点 - * @param graph - */ -export const focusNodeById = (graph: IGraph) => (nodeId: string) => { - if (!graph || typeof nodeId !== 'string') { - return; - } - - const node = graph.findById(nodeId); - - if (!node) { - console.warn(`The node ${nodeId} does not exist!`); - return; - } - - graph.focusItem(nodeId); - - graph.setItemState(node, 'selected', true); - node.toFront(); -}; diff --git a/packages/graphin/src/apis/index.ts b/packages/graphin/src/apis/index.ts deleted file mode 100644 index 991bc668e..000000000 --- a/packages/graphin/src/apis/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { IGraph } from '@antv/g6'; -// import { handleAutoZoom, handleRealZoom, handleChangeZoom, handleZoomIn, handleZoomOut } from './zoom'; -// import { focusNodeById, highlightNodeById } from './element'; -import * as elementApis from './element'; -import * as zoomApis from './zoom'; - -import { ApisType } from './types'; - -const apis = { - ...zoomApis, - ...elementApis, -}; - -const ApiController = (graph: IGraph) => { - const apiKeys = Object.keys(apis); - return apiKeys.reduce((acc, curr) => { - return { - ...acc, - // @ts-ignore - [curr]: apis[curr](graph), - }; - }, {}) as ApisType; -}; - -export default ApiController; diff --git a/packages/graphin/src/apis/types.ts b/packages/graphin/src/apis/types.ts deleted file mode 100644 index a1a45e497..000000000 --- a/packages/graphin/src/apis/types.ts +++ /dev/null @@ -1,32 +0,0 @@ -export interface ApisType { - /** - * @description 将视窗缩放至自适应画布的大小 - */ - handleAutoZoom: () => { text: string; ratio: number }; - /** - * @description 将视窗缩放到1:1大小 - */ - handleRealZoom: () => { text: string; ratio: number }; - /** - * @description 自定义缩放 - */ - handleChangeZoom: () => { text: string; ratio: number }; - /** - * @description 放大 - */ - handleZoomIn: () => { text: string; ratio: number }; - /** - * @description 缩小 - */ - handleZoomOut: () => { text: string; ratio: number }; - /** - * @description 根据节点ID查询 - */ - focusNodeById: (nodeId: string) => void; - /** - * @description 根据节点ID，高亮关联节点 - */ - highlightNodeById: (nodeId: string[]) => void; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - // [key: string]: (a?:any) => void; -} diff --git a/packages/graphin/src/apis/zoom.ts b/packages/graphin/src/apis/zoom.ts deleted file mode 100644 index fef534575..000000000 --- a/packages/graphin/src/apis/zoom.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { IGraph } from '@antv/g6'; - -const zoomSensitivity = 10; -// 放大 -export const handleZoomOut = (graph: IGraph) => () => { - const zoomRatio = 100 / (100 + zoomSensitivity); - if (zoomRatio !== 1) { - graph.zoom(zoomRatio); - } -}; - -// 缩小 -export const handleZoomIn = (graph: IGraph) => () => { - const zoomRatio = (100 + zoomSensitivity) / 100; - if (zoomRatio !== 1) { - graph.zoom(zoomRatio); - } -}; - -// 实际大小 -export const handleRealZoom = (graph: IGraph) => () => { - graph.zoomTo(1); -}; - -// 自适应canvas大小 -export const handleAutoZoom = (graph: IGraph) => () => { - graph.fitView(); -}; diff --git a/packages/graphin/src/behaviors/ActivateRelations.tsx b/packages/graphin/src/behaviors/ActivateRelations.tsx deleted file mode 100644 index 1fb4e55c3..000000000 --- a/packages/graphin/src/behaviors/ActivateRelations.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Extensions } from '@antv/g6'; -import * as React from 'react'; -import registerBehavior from './registerBehavior'; -import useBehaviorHook from './useBehaviorHook'; - -const defaultConfig = { - /** - * @description 是否禁用该功能 - * @default false - */ - disabled: false, - /** - * @description 可以是 mousenter，表示鼠标移入时触发；也可以是 click，鼠标点击时触发 - * @default mouseenter - */ - trigger: 'mouseenter', - /** - * @description 活跃节点状态。当行为被触发，需要被突出显示的节点和边都会附带此状态，默认值为 active；可以与 graph 实例的 nodeStyle 和 edgeStyle 结合实现丰富的视觉效果。 - * @default active - */ - activeState: 'active', - /** - * @description 非活跃节点状态。不需要被突出显示的节点和边都会附带此状态。默认值为 inactive。可以与 graph 实例的 nodeStyle 和 edgeStyle 结合实现丰富的视觉效果； - * @default inactive - */ - inactiveState: 'inactive', - /** - * @description 高亮相连节点时是否重置已经选中的节点，默认为 false，即选中的节点状态不会被 activate-relations 覆盖； - * @default false - */ - resetSelected: false, -}; - -export type ActivateRelationsProps = Partial; - -registerBehavior('activate-relations', Extensions.ActivateRelations); - -const ActivateRelations: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'activate-relations', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default ActivateRelations; diff --git a/packages/graphin/src/behaviors/BrushSelect.tsx b/packages/graphin/src/behaviors/BrushSelect.tsx deleted file mode 100644 index 0bb692023..000000000 --- a/packages/graphin/src/behaviors/BrushSelect.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import useBehaviorHook from './useBehaviorHook'; - -const DEFAULT_TRIGGER = 'shift'; - -const defaultConfig = { - /** 是否禁用该功能 */ - disabled: false, - /** 拖动框选框的样式，包括 fill、fillOpacity、stroke 和 lineWidth 四个属性; */ - brushStyle: { - fill: '#EEF6FF', - fillOpacity: 0.4, - stroke: '#DDEEFE', - lineWidth: 1, - }, - /** 选中节点时的回调，参数 nodes 表示选中的节点； */ - onSelect: () => {}, - /** 取消选中节点时的回调，参数 nodes 表示取消选中的节点； */ - onDeselect: () => {}, - /** 选中的状态，默认值为 'selected' */ - selectedState: 'selected', - /** 触发框选的动作，默认为 'shift'，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ，不区分大小写 */ - trigger: DEFAULT_TRIGGER, - /** 框选过程中是否选中边，默认为 true，用户配置为 false 时，则不选中边； */ - includeEdges: true, - /** Whether to include combos in the selection */ - includeCombos: false, -}; - -export type IDragCanvasProps = Partial; - -const BrushSelect: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'brush-select', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default BrushSelect; diff --git a/packages/graphin/src/behaviors/ClickSelect.tsx b/packages/graphin/src/behaviors/ClickSelect.tsx deleted file mode 100644 index fa59a81aa..000000000 --- a/packages/graphin/src/behaviors/ClickSelect.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import useBehaviorHook from './useBehaviorHook'; - -const DEFAULT_TRIGGER = 'shift'; -// const ALLOW_EVENTS = ['shift', 'ctrl', 'alt', 'control']; - -const defaultConfig = { - /** 是否禁用该功能 */ - disabled: false, - /** 是否允许多选，默认为 true，当设置为 false，表示不允许多选，此时 trigger 参数无效； */ - multiple: true, - /** 指定按住哪个键进行多选，默认为 shift，按住 Shift 键多选，用户可配置 shift、ctrl、alt； */ - trigger: DEFAULT_TRIGGER, - /** 选中的样式，默认为 selected */ - selectedState: 'selected', - /** Whether nodes can be selected */ - selectNode: true, - /** Whether edges can be selected */ - selectEdge: false, - /** Whether combos can be selected */ - selectCombo: true, -}; - -export type IDragCanvasProps = Partial; - -const ClickSelect: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'click-select', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default ClickSelect; diff --git a/packages/graphin/src/behaviors/DragCanvas.tsx b/packages/graphin/src/behaviors/DragCanvas.tsx deleted file mode 100644 index c7b9e02b0..000000000 --- a/packages/graphin/src/behaviors/DragCanvas.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import useBehaviorHook from './useBehaviorHook'; - -const defaultConfig = { - /** 允许拖拽方向，支持'x'，'y'，'both'，默认方向为 'both'； */ - direction: 'both', - /** 是否开启优化，开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分，默认关闭； */ - enableOptimize: false, - /** - * drag-canvas 可拖动的扩展范围，默认为 0，即最多可以拖动一屏的位置 - * 当设置的值大于 0 时，即拖动可以超过一屏 - * 当设置的值小于 0 时，相当于缩小了可拖动范围 - * 具体实例可参考：https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IFfoS67_HssAAAAAAAAAAAAAARQnAQ - */ - scalableRange: 0, - /** 是否允许触发该操作； */ - shouldBegin: () => { - return true; - }, - /** 是否禁用该功能 */ - disabled: false, -}; - -export type IDragCanvasProps = Partial; - -const DragCanvas: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'drag-canvas', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default DragCanvas; diff --git a/packages/graphin/src/behaviors/DragCombo.tsx b/packages/graphin/src/behaviors/DragCombo.tsx deleted file mode 100644 index b7103039b..000000000 --- a/packages/graphin/src/behaviors/DragCombo.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import useBehaviorHook from './useBehaviorHook'; - -const defaultConfig = { - /** 是否禁用该功能 */ - disabled: false, - /** 拖动 Combo 时候是否开启图形代理 delegate，即拖动 Combo 时候 Combo 不会实时跟随变动，拖动过程中有临时生成一个 delegate 图形，拖动结束后才更新 Combo 位置，默认为 false，不开启 */ - enableDelegate: false, - /** delegate 的样式 */ - delegateStyle: {}, - /** 拖动嵌套的 Combo 时，只改变父 Combo 的大小，不改变层级关系，默认为 false； */ - onlyChangeComboSize: false, - /** 当拖动 Combo 时，父 Combo 或进入到的 Combo 的状态值，需要用户在实例化 Graph 时在 comboStateStyles 里面配置，默认为空； */ - activeState: '', - /** 选中 Combo 的状态，默认为 selected，需要在 comboStateStyles 里面配置； */ - selectedState: 'selected', -}; - -export type DragComboProps = Partial; - -const DragCombo: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'drag-combo', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default DragCombo; diff --git a/packages/graphin/src/behaviors/DragNode.tsx b/packages/graphin/src/behaviors/DragNode.tsx deleted file mode 100644 index 2d3452a25..000000000 --- a/packages/graphin/src/behaviors/DragNode.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import useBehaviorHook from './useBehaviorHook'; - -const defaultConfig = { - /** - * @description 是否禁用该功能 - * @default false - */ - disabled: false, - /** - * @description 是否在拖拽节点时更新所有与之相连的边，默认为 true - * @default true - */ - updateEdge: true, - /** - * @description 节点拖拽时的绘图属性 - * @default { strokeOpacity: 0.6, fillOpacity: 0.6 } - */ - delegateStyle: {}, - /** - * @description 是否开启delegate - * @default false - */ - enableDelegate: false, - /** - * @description 拖动节点过程中是否只改变 Combo 的大小，而不改变其结构 - * @default false - */ - onlyChangeComboSize: false, - /** - * @description 拖动过程中目标 combo 状态样式 - * @default '' - */ - comboActiveState: '', - /** - * @description 选中样式 - * @default selected - */ - selectedState: 'selected', -}; - -export type DragNodeProps = Partial; - -const DragNode: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'drag-node', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default DragNode; diff --git a/packages/graphin/src/behaviors/Hoverable.tsx b/packages/graphin/src/behaviors/Hoverable.tsx deleted file mode 100644 index 54bde77a7..000000000 --- a/packages/graphin/src/behaviors/Hoverable.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { IG6GraphEvent } from '@antv/g6'; -import * as React from 'react'; -import { GraphinContext } from '../useGraphin'; - -export interface HoverableProps { - bindType?: 'node' | 'edge'; - disabled?: boolean; - activateState?: string; -} - -const Hoverable: React.FunctionComponent = props => { - const graphin = React.useContext(GraphinContext); - const { bindType = 'node', disabled, activateState = 'active' } = props; - const { graph } = graphin; - React.useEffect(() => { - if (disabled) { - return; - } - - const handleNodeMouseEnter = (evt: IG6GraphEvent & any) => { - graph.setItemState(evt.itemId, activateState, true); - graph.setCursor('pointer'); - }; - - const handleNodeMouseLeave = (evt: IG6GraphEvent & any) => { - graph.setItemState(evt.itemId, activateState, false); - graph.setCursor('default'); - }; - - const handleEdgeMouseEnter = (evt: IG6GraphEvent & any) => { - graph.setItemState(evt.itemId, activateState, true); - graph.setCursor('pointer'); - }; - - const handleEdgeMouseLeave = (evt: IG6GraphEvent & any) => { - graph.setItemState(evt.itemId, activateState, false); - graph.setCursor('default'); - }; - - if (bindType === 'node') { - graph.on('node:pointerenter', handleNodeMouseEnter); - graph.on('node:pointerleave', handleNodeMouseLeave); - } - if (bindType === 'edge') { - graph.on('edge:pointerenter', handleEdgeMouseEnter); - graph.on('edge:pointerleave', handleEdgeMouseLeave); - } - - return () => { - if (bindType === 'node') { - graph.off('node:pointerenter', handleNodeMouseEnter); - graph.off('node:pointerleave', handleNodeMouseLeave); - } - if (bindType === 'edge') { - graph.off('edge:pointerenter', handleEdgeMouseEnter); - graph.off('edge:pointerleave', handleEdgeMouseLeave); - } - }; - }, [graph, disabled]); - - return null; -}; - -export default Hoverable; diff --git a/packages/graphin/src/behaviors/LassoSelect.tsx b/packages/graphin/src/behaviors/LassoSelect.tsx deleted file mode 100644 index f4c7bf51e..000000000 --- a/packages/graphin/src/behaviors/LassoSelect.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Extensions } from '@antv/g6'; -import * as React from 'react'; -import registerBehavior from './registerBehavior'; -import useBehaviorHook from './useBehaviorHook'; - -const DEFAULT_TRIGGER = 'shift'; - -const defaultConfig = { - mode: 'lasso', - /** 是否禁用该功能 */ - disabled: false, - /** 拖动框选框的样式，包括 fill、fillOpacity、stroke 和 lineWidth 四个属性; */ - delegateStyle: { - fill: '#EEF6FF', - fillOpacity: 0.4, - stroke: '#DDEEFE', - lineWidth: 1, - }, - /** 选中节点时的回调，参数 nodes 表示选中的节点； */ - onSelect: () => {}, - /** 取消选中节点时的回调，参数 nodes 表示取消选中的节点； */ - onDeselect: () => {}, - /** 选中的状态，默认值为 'selected' */ - selectedState: 'selected', - /** 触发框选的动作，默认为 'shift'，即用户按住 Shift 键拖动就可以进行框选操作，可配置的的选项为: 'shift'、'ctrl' / 'control'、'alt' 和 'drag' ，不区分大小写 */ - trigger: DEFAULT_TRIGGER, - /** 框选过程中是否选中边，默认为 true，用户配置为 false 时，则不选中边； */ - includeEdges: true, -}; - -export type LassoSelectProps = Partial; - -registerBehavior('lasso-select', Extensions.LassoSelect); - -const LassoSelect: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'lasso-select', - userProps: props, - defaultConfig, - mode: (props && props.mode) || 'lasso', - }); - return null; -}; - -export default LassoSelect; diff --git a/packages/graphin/src/behaviors/OrbitCanvas3D.tsx b/packages/graphin/src/behaviors/OrbitCanvas3D.tsx deleted file mode 100644 index b40e0c815..000000000 --- a/packages/graphin/src/behaviors/OrbitCanvas3D.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import useBehaviorHook from './useBehaviorHook'; - -const defaultConfig = { - type: 'orbit-canvas-3d', - trigger: 'drag', -}; - -export type IDragCanvasProps = Partial; - -const ZoomCanvas3D: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'orbit-canvas-3d', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default ZoomCanvas3D; diff --git a/packages/graphin/src/behaviors/ResizeCanvas.tsx b/packages/graphin/src/behaviors/ResizeCanvas.tsx deleted file mode 100644 index 44a100407..000000000 --- a/packages/graphin/src/behaviors/ResizeCanvas.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { debounce } from 'lodash-es'; -import * as React from 'react'; -import { GraphinContext } from '../useGraphin'; - -export interface ResizeCanvasProps { - graphDOM: HTMLDivElement; -} - -const ResizeCanvas: React.FunctionComponent = props => { - const { graphDOM } = props; - const graphin = React.useContext(GraphinContext); - React.useEffect(() => { - const { graph } = graphin; - - /** 内置 resize */ - const handleResizeEvent = debounce(() => { - const { clientWidth, clientHeight } = graphDOM; - graph.set('width', clientWidth); - graph.set('height', clientHeight); - const canvas = graph.get('canvas'); - if (canvas) { - canvas.changeSize(clientWidth, clientHeight); - } - }, 200); - - /** 内置 drag force node */ - - window.addEventListener('resize', handleResizeEvent, false); - return () => { - window.removeEventListener('resize', handleResizeEvent, false); - }; - }, []); - - return null; -}; - -export default ResizeCanvas; diff --git a/packages/graphin/src/behaviors/ZoomCanvas.tsx b/packages/graphin/src/behaviors/ZoomCanvas.tsx deleted file mode 100644 index 40dbe9854..000000000 --- a/packages/graphin/src/behaviors/ZoomCanvas.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import useBehaviorHook from './useBehaviorHook'; - -const defaultConfig = { - /** 缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5； */ - sensitivity: 2, - /** 最小缩放比例 */ - minZoom: undefined as number | undefined, - /** 最大缩放比例 */ - maxZoom: undefined as number | undefined, - /** 是否开启性能优化，默认为 false，设置为 true 开启，开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShape */ - enableOptimize: false, - /** 当 enableOptimize 为 true 时起作用，默认值为 0.7，表示当缩放到哪个比例时开始隐藏非 keyShape； */ - optimizeZoom: 0.1, - /** 在缩小画布时是否固定选定元素的描边粗细、文本大小、整体大小等，fixSelectedItems 是一个对象，有以下变量： */ - fixSelectedItems: { - /** 固定元素的整体大小，优先级高于 fixSelectedItems.fixLineWidth 和 fixSelectedItems.fixLabel； */ - fixAll: false, - /** 固定元素的 keyShape 的描边粗细； */ - fixLineWidth: false, - /** 固定元素的文本大小。 */ - fixLabel: false, - /** 将被固定的元素状态，被设置为该状态的节点将会在画布缩小时参与固定大小的计算，默认为 'selected'； */ - fixState: 'selected', - }, - /** 是否禁用该功能 */ - disabled: false, - animate: false, - animateCfg: { - duration: 500, - }, -}; - -export type IDragCanvasProps = Partial; - -const ZoomCanvas: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'zoom-canvas', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default ZoomCanvas; diff --git a/packages/graphin/src/behaviors/ZoomCanvas3D.tsx b/packages/graphin/src/behaviors/ZoomCanvas3D.tsx deleted file mode 100644 index 7786dc3e4..000000000 --- a/packages/graphin/src/behaviors/ZoomCanvas3D.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import useBehaviorHook from './useBehaviorHook'; - -const defaultConfig = {}; - -export type IDragCanvasProps = Partial; - -const ZoomCanvas3D: React.FunctionComponent = props => { - useBehaviorHook({ - type: 'zoom-canvas-3d', - userProps: props, - defaultConfig, - }); - return null; -}; - -export default ZoomCanvas3D; diff --git a/packages/graphin/src/behaviors/index.tsx b/packages/graphin/src/behaviors/index.tsx deleted file mode 100644 index baa2057e8..000000000 --- a/packages/graphin/src/behaviors/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import ActivateRelations from './ActivateRelations'; -import BrushSelect from './BrushSelect'; -import ClickSelect from './ClickSelect'; -import DragCanvas from './DragCanvas'; -import DragCombo from './DragCombo'; -import DragNode from './DragNode'; -import Hoverable from './Hoverable'; -import LassoSelect from './LassoSelect'; -import OrbitCanvas3D from './OrbitCanvas3D'; -import ResizeCanvas from './ResizeCanvas'; -import ZoomCanvas from './ZoomCanvas'; -import ZoomCanvas3D from './ZoomCanvas3D'; -export default { - /** 内置 */ - DragCanvas, - ZoomCanvas, - ClickSelect, - BrushSelect, - DragNode, - ResizeCanvas, - LassoSelect, - DragCombo, - - /** 可选 */ - ActivateRelations, - Hoverable, - ZoomCanvas3D, - OrbitCanvas3D, -}; -export { default as registerBehavior } from './registerBehavior'; -export { default as useBehaviorHook } from './useBehaviorHook'; diff --git a/packages/graphin/src/behaviors/registerBehavior.ts b/packages/graphin/src/behaviors/registerBehavior.ts deleted file mode 100644 index 3b9c40765..000000000 --- a/packages/graphin/src/behaviors/registerBehavior.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { extend, Graph } from '@antv/g6'; - -/** - * - * @param type 交互名称 - * @param instance 交互实例 - */ -const registerBehavior = (name, instance) => { - extend(Graph, { - behaviors: { - [name]: instance, - }, - }); -}; -export default registerBehavior; diff --git a/packages/graphin/src/behaviors/useBehaviorHook.ts b/packages/graphin/src/behaviors/useBehaviorHook.ts deleted file mode 100644 index cd5a524b4..000000000 --- a/packages/graphin/src/behaviors/useBehaviorHook.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { isEmpty } from 'lodash-es'; -import React from 'react'; -import { GraphinContext } from '../useGraphin'; - -interface Props { - type: string; - defaultConfig: Record; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - userProps: any; - mode?: string; -} - -const useBehaviorHook = (params: Props) => { - const { type, defaultConfig, userProps, mode = 'default' } = params; - const { graph } = React.useContext(GraphinContext); - const { disabled, ...otherConfig } = userProps; - - React.useEffect(() => { - if (!graph || graph.destroyed || isEmpty(graph)) { - return; - } - try { - /** 保持单例 */ - graph.removeBehaviors([type], mode); - } catch (error) {} - - if (disabled) { - return; - } - // if (type === 'drag-canvas') { - // debugger; - // } - graph.addBehaviors( - { - type, - ...defaultConfig, - ...otherConfig, - }, - mode, - ); - return () => { - if (!graph.destroyed) { - graph.removeBehaviors([type], mode); - } - }; - }, []); -}; - -export default useBehaviorHook; diff --git a/packages/graphin/src/compatible/event-item.ts b/packages/graphin/src/compatible/event-item.ts deleted file mode 100644 index d59ba2753..000000000 --- a/packages/graphin/src/compatible/event-item.ts +++ /dev/null @@ -1,15 +0,0 @@ -export default (e, graph) => { - Object.assign(e, { - item: { - getModel: () => { - const i = graph.getItemById(e.itemId); - const { visible, model } = i; - if (visible) { - return model; - } - return {}; - }, - }, - }); - return e; -}; diff --git a/packages/graphin/src/compatible/graph.ts b/packages/graphin/src/compatible/graph.ts deleted file mode 100644 index 9dbeb11fd..000000000 --- a/packages/graphin/src/compatible/graph.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { IGraph } from '@antv/g6'; - -export default (graph: IGraph) => { - Object.assign(graph, { - findAllByState: (itemType, state) => { - return graph.findIdByState(itemType, state).map(id => { - const { graphCore } = graph.dataController; - const itemMap = graphCore[`${itemType}Map`]; - return { - ...itemMap.get(id), - getNeighbors: () => { - return graphCore.getNeighbors(id); - }, - getModel: () => itemMap.get(id), - getEdges: () => graphCore.bothEdgesMap.get(id), - }; - }); - }, - save: () => { - return { - nodes: graph.getAllNodesData(), - edges: graph.getAllEdgesData(), - combos: graph.getAllCombosData(), - }; - }, - getWidth: () => { - return graph.getSize()[0]; - }, - getHeight: () => { - return graph.getSize()[1]; - }, - changeSize: size => { - graph.setSize(size); - }, - setAutoPaint: paint => { - return true; - }, - paint: () => {}, - getNodes: () => { - return graph.getAllNodesData().map(item => { - return { - ...item, - getModel: () => item, - }; - }); - }, - getEdges: () => { - return graph.getAllEdgesData().map(item => { - return { - ...item, - getModel: () => item, - }; - }); - }, - clearItemStates: node => { - const isString = typeof node === 'string'; - if (isString) { - graph.clearItemState([node]); - } else { - graph.clearItemState([node.id]); - } - }, - findById: id => { - const { graphCore } = graph.dataController; - return { - getNeighbors: () => { - return graphCore.getNeighbors(id); - }, - getEdges: () => graphCore.bothEdgesMap.get(id), - ...graph.getItemById(id), - }; - }, - }); - return graph; -}; diff --git a/packages/graphin/src/compatible/index.ts b/packages/graphin/src/compatible/index.ts deleted file mode 100644 index a0947e786..000000000 --- a/packages/graphin/src/compatible/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import item from './event-item'; -import graph from './graph'; -const Compatible = { - item, - graph, -}; - -export default Compatible; diff --git a/packages/graphin/src/components/ContextMenu/index.tsx b/packages/graphin/src/components/ContextMenu/index.tsx deleted file mode 100644 index fe2204aaf..000000000 --- a/packages/graphin/src/components/ContextMenu/index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { useEffect, useRef } from 'react'; -import { useGraphin } from '../../useGraphin'; -export interface ContextMenuProps { - children: React.ReactNode[]; - options: { - key: string; - icon: React.ReactNode; - name: string; - }[]; - onChange: (menuItem, menuData) => void; - bindType: 'node' | 'edge' | 'canvas'; -} - -const ContextMenu: React.FunctionComponent = props => { - const { children, bindType, options, onChange } = props; - const { graph } = useGraphin(); - - const containerRef = useRef(null); - useEffect(() => { - const itemContent = options - .map(item => { - const { key, icon, name } = item; - return `
  • ${icon} ${name}
    • `; - }) - .join(''); - - const content = ` -
      - ${itemContent} -
    - `; - graph.addPlugins([ - { - type: 'menu', - key: 'graphin-context-menu', - trigger: 'contextmenu', - /** async string menu */ - getContent: e => { - return content; - }, - handleMenuClick: (target: HTMLLIElement, itemId) => { - //@ts-ignore - const { value } = Object.values(target.attributes).find(item => item.name === 'code'); - const item = graph.getNodeData(itemId); - onChange && onChange({ key: value }, item); - }, - }, - ]); - return () => { - graph && graph.removePlugins(['graphin-context-menu']); - }; - }, [graph]); - return
    ; -}; - -export default ContextMenu; diff --git a/packages/graphin/src/components/MiniMap/index.tsx b/packages/graphin/src/components/MiniMap/index.tsx deleted file mode 100644 index c9678f707..000000000 --- a/packages/graphin/src/components/MiniMap/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useEffect, useRef } from 'react'; -import { useGraphin } from '../../useGraphin'; -export interface MiniMapProps {} - -const MiniMap: React.FunctionComponent = props => { - const { graph } = useGraphin(); - - const containerRef = useRef(null); - useEffect(() => { - graph.addPlugins([ - { - key: 'graphin-minimap', - type: 'minimap', - mode: 'delegate', - container: containerRef.current, - }, - ]); - return () => { - graph && graph.removePlugins(['graphin-minimap']); - }; - }, [graph]); - return
    ; -}; - -export default MiniMap; diff --git a/packages/graphin/src/components/index.ts b/packages/graphin/src/components/index.ts deleted file mode 100644 index a26f4fd27..000000000 --- a/packages/graphin/src/components/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import ContextMenu from './ContextMenu'; -import MiniMap from './MiniMap'; -const Components = { - MiniMap, - ContextMenu, - Tooltip: (props: any) => null, - Legend: (props: any) => null, - LassoSelect: (props: any) => null, -}; - -export default Components; diff --git a/packages/graphin/src/icon/loader.ts b/packages/graphin/src/icon/loader.ts deleted file mode 100644 index 202690fc9..000000000 --- a/packages/graphin/src/icon/loader.ts +++ /dev/null @@ -1,74 +0,0 @@ -/** - * @file Icon loader - */ - -/** - * @description 获取图标字体资源的方式，离线方式需要将字体资源放到本地，供私有化部署使用 - */ -type Mode = 'online' | 'offline'; - -export type FontJson = { - id: string; - name: string; - font_family: string; - css_prefix_text: string; - description: string; - glyphs: { - icon_id: string; - name: string; - font_class: string; - unicode: string; - unicode_decimal: number; - }[]; -}; - -/** - * @description 加载 unicode json 资源 - */ -export async function loadFontJson(id: string, mode: Mode = 'online', url?: string): Promise { - if (mode === 'online') { - const _url = url || `https://at.alicdn.com/t/a/${id}.json`; - const json: FontJson = await fetch(_url).then(res => res.json()); - return json; - } - /** - * @description TODO offline - * @example 私有化部署示例 - * - * import font from './path/to/font.json'; - * return font; - */ - return { id: '', name: '', font_family: '', css_prefix_text: '', description: '', glyphs: [] }; -} - -/** - * @description 加载 unicode 字体 - */ -export async function loadUnicodeFont(id: string, mode: Mode = 'online') { - if (mode === 'online') { - const fontList = [ - { - fontUrl: `//at.alicdn.com/t/a/${id}.woff2`, - format: 'woff2', - }, - { - fontUrl: `//at.alicdn.com/t/a/${id}.woff`, - format: 'woff', - }, - { - fontUrl: `//at.alicdn.com/t/a/${id}.ttf`, - format: 'truetype', - }, - ]; - const load = async (fontFamily: string, fontUrl: string) => { - const font = new FontFace(fontFamily, `url(${fontUrl})`); - await font.load(); - //@ts-ignore - document.fonts.add(font); - }; - - await Promise.all(fontList.map(({ fontUrl }) => load('iconfont', fontUrl))); - } else { - // TODO: offline - } -} diff --git a/packages/graphin/src/icon/registerFontFamily.ts b/packages/graphin/src/icon/registerFontFamily.ts deleted file mode 100644 index 2d7093867..000000000 --- a/packages/graphin/src/icon/registerFontFamily.ts +++ /dev/null @@ -1,24 +0,0 @@ -export const registerFontFamily = iconLoader => { - /** 注册 font icon */ - const iconFont = iconLoader(); - const { glyphs, fontFamily } = iconFont; - const icons = glyphs.map(item => { - return { - name: item.name, - unicode: String.fromCodePoint(item.unicode_decimal), - }; - }); - - return new Proxy(icons, { - get: (target, propKey: string) => { - const matchIcon = target.find(icon => { - return icon.name === propKey; - }); - if (!matchIcon) { - console.error(`%c fontFamily:${fontFamily},does not found ${propKey} icon`); - return ''; - } - return matchIcon?.unicode; - }, - }); -}; diff --git a/packages/graphin/src/icon/registerIconFonts.ts b/packages/graphin/src/icon/registerIconFonts.ts deleted file mode 100644 index ccdf61f10..000000000 --- a/packages/graphin/src/icon/registerIconFonts.ts +++ /dev/null @@ -1,61 +0,0 @@ -// 资源地址：https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.20&manage_type=myprojects&projectId=3381398&keyword=&project_type=&page= - -import { createFromIconfontCN } from '@ant-design/icons'; -import { loadFontJson, loadUnicodeFont, type FontJson } from './loader'; -import { registerFontFamily } from './registerFontFamily'; - -export const fontFamily = 'iconfont'; - -// --- 注册 font icon --- - -let icons = registerFontFamily(() => ({ fontFamily, glyphs: [] })); -let glyphs: FontJson['glyphs'] = []; - -async function loadFontsJson(ids: string[]) { - const fonts = await Promise.all(ids.map(id => loadFontJson(id))); - // 合并所有字体 - const _glyphs = fonts.reduce((acc, curr) => { - acc.push(...curr.glyphs); - return acc; - }, [] as FontJson['glyphs']); - - glyphs = _glyphs; - icons = registerFontFamily(() => ({ - fontFamily, - glyphs: _glyphs.map(item => { - return { - ...item, - name: item.font_class, //统一为font class - }; - }), - })); - return icons; -} - -// --- 注册 antd iconfont --- -const registeredIds = new Set(); -const builtInIconFontId = 'font_3381398_29c1c449r6f'; -const getIconfontScriptUrl = (id: string) => `//at.alicdn.com/t/a/${id}.js`; - -async function loadUnicodeFonts(ids: string[]) { - await Promise.all(ids.map(id => loadUnicodeFont(id))); -} - -export async function registerIconFonts(ids: string[] = [builtInIconFontId]) { - const unregisteredIds = ids.filter(id => !registeredIds.has(id)); - - if (!unregisteredIds.length) return icons; - - // register - createFromIconfontCN({ - scriptUrl: unregisteredIds.map(getIconfontScriptUrl), - }); - - const [ICONS] = await Promise.all([loadFontsJson(unregisteredIds), loadUnicodeFonts(unregisteredIds)]); - unregisteredIds.forEach(id => registeredIds.add(id)); - return ICONS; -} - -export function getFontIcons() { - return icons; -} diff --git a/packages/graphin/src/index.tsx b/packages/graphin/src/index.tsx deleted file mode 100644 index dbd8d4502..000000000 --- a/packages/graphin/src/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import Graphin from './Graphin'; -export { default as Compatible } from './compatible'; -export { default as Components } from './components'; -export * as Utils from './utils'; -export type GraphinData = any; - -export type EdgeStyle = any; -export type IUserNode = any; -export type Layout = any; -export type IUserEdge = any; -export type ContextMenuValue = any; - -export type GraphData = any; -export type NodeConfig = any; - -export { Extensions, Graph, extend } from '@antv/g6'; -export type { IG6GraphEvent, IGraph } from '@antv/g6'; - -export { GraphinContext, useGraphin } from './useGraphin'; -export type { GraphinContextType } from './useGraphin'; - -export const registerNode = () => {}; -//@ts-ignore -export const registerEdge = () => {}; - -export { registerFontFamily } from './icon/registerFontFamily'; -export { getFontIcons, registerIconFonts } from './icon/registerIconFonts'; - -export { default as Behaviors, registerBehavior, useBehaviorHook } from './behaviors'; - -export default Graphin; diff --git a/packages/graphin/src/styling/edge-style-transform.ts b/packages/graphin/src/styling/edge-style-transform.ts deleted file mode 100644 index 8fe6f75f5..000000000 --- a/packages/graphin/src/styling/edge-style-transform.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { merge } from 'lodash-es'; -import getEdgeStyleByTheme from '../theme/edge-style'; -const { style: defaultStyle } = getEdgeStyleByTheme({ - primaryEdgeColor: '#ddd', - edgeSize: 1, - mode: 'light', -}); - -const transGraphinStyle = (style, otherStyles) => { - const { keyshape, halo, label } = merge({}, defaultStyle, style || {}) as typeof defaultStyle; - const { background } = label; - //@ts-ignore  用户指定的优先级最高 - const { poly, loop } = keyshape; - //@ts-ignore - const { isMultiple, type, keyShape } = otherStyles; - //@ts-ignore - const { loopCfg, curveOffset } = keyShape || {}; - - return { - type: type || 'line-edge', - keyShape: { - opacity: keyshape.strokeOpacity, // 边主图形的透明度 - stroke: keyshape.stroke, // 边主图形描边颜色 - lineAppendWidth: keyshape.lineAppendWidth, - lineWidth: keyshape.lineWidth, - endArrow: { - path: '', - }, - ...(curveOffset ? { curveOffset: (poly && poly.distance) || curveOffset } : {}), - ...(loopCfg ? { loopCfg: { dist: loop.distance || loopCfg.dist } } : {}), - - // ...(curveOffset ? { curveOffset } : {}), - // ...(loopCfg ? { loopCfg } : {}), - }, - // 边上的标签文本配置 - labelShape: { - text: label.value, - position: label.position, - fill: label.fill, - fontSize: label.fontSize, - textAlign: label.textAlign, - autoRotate: true, // 边上的标签文本根据边的方向旋转 - maxLines: '400%', - }, - labelBackgroundShape: { - radius: background.radius, - fill: background.fill, - stroke: background.stroke, - opacity: background.opacity, - }, - // 边的动画配置 - // animates: { - // // 数据/状态更新时 - // update: [ - // { - // shapeId: 'haloShape', // 背景光晕图形 - // states: ['selected', 'active'], // 在 selected 和 active 状态变更时 - // }, - // { - // shapeId: 'keyShape', // 主图形 - // states: ['selected', 'active'], // 在 selected 和 active 状态变更时 - // }, - // ], - // }, - }; -}; - -export const edgeStyleTransform = edge => { - const { id, source, target, data, style } = edge; - - if (style) { - const { type } = style; - const IS_GRAPHIN = type === 'graphin-line' || !type; - if (IS_GRAPHIN) { - const { isMultiple, keyShape } = data; - const displayData = transGraphinStyle(style, { isMultiple, keyShape, type: data.type }); - console.log('edge', edge, IS_GRAPHIN, displayData); - return { - id, - source, - target, - data: displayData, - }; - } - return { - id, - source, - target, - data: { - ...data, - ...style, - }, - }; - } - - return edge; -}; diff --git a/packages/graphin/src/styling/node-style-transform.ts b/packages/graphin/src/styling/node-style-transform.ts deleted file mode 100644 index 4106261b0..000000000 --- a/packages/graphin/src/styling/node-style-transform.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { merge } from 'lodash-es'; -import getNodeStyleByTheme from '../theme/node-style'; -const { style: defaultStyle } = getNodeStyleByTheme({ - primaryColor: '#873af4', - nodeSize: 26, - mode: 'light', -}); - -const transGraphinStyle = style => { - const { keyshape, halo, icon, label, badges } = merge({}, defaultStyle, style || {}) as typeof defaultStyle; - let iconShape: any = { - visible: false, - text: '', - }; - if (icon.type === 'image') { - iconShape = { - fill: 'transparent', - r: [keyshape.size, keyshape.size], - clip: { r: keyshape.size / 2 }, - img: icon.value, - visible: true, - }; - } - if (icon.type === 'font') { - iconShape = { - fontSize: keyshape.size / 2, - fontFamily: 'iconfont', - text: icon.value || '', - //@ts-ignore - fill: icon.fill || keyshape.fill, - visible: true, - }; - } - if (icon.type === 'text') { - iconShape = { - fontSize: keyshape.size / 2, - fill: '#fff', - text: icon.value, - visible: true, - }; - } - console.log('iconShape', iconShape, icon, style); - - return { - type: 'circle-node', - labelShape: { - text: label.value, - position: label.position, - fill: label.fill, - fillOpacity: label.fillOpacity, - fontSize: label.fontSize, - offset: label.offset, - maxWidth: '500%', - }, - keyShape: { - r: keyshape.size / 2, - fill: keyshape.fill, - stroke: keyshape.stroke, - strokeOpacity: keyshape.strokeOpacity, - opacity: keyshape.opacity, - fillOpacity: keyshape.fillOpacity, - lineWidth: keyshape.lineWidth, - }, - iconShape, - animates: { - update: [ - { - fields: ['x', 'y'], - shapeId: 'group', - }, - ], - }, - }; -}; - -export const nodeStyleTransform = node => { - const { id, data, style } = node; - - const { x = 0, y = 0, z = 0 } = data; - - if (style) { - const { type } = style; - const IS_GRAPHIN = !type || type === 'graphin-circle'; - if (IS_GRAPHIN) { - return { - id, - data: { - x, - y, - z, - ...transGraphinStyle(style), - }, - }; - } - return { - id, - data: { - x, - y, - z, - ...style, - }, - }; - } - return node; -}; diff --git a/packages/graphin/src/theme/combo-style.ts b/packages/graphin/src/theme/combo-style.ts deleted file mode 100644 index 49bbc821f..000000000 --- a/packages/graphin/src/theme/combo-style.ts +++ /dev/null @@ -1,50 +0,0 @@ -// const defaultComboTheme = { -// primaryComboColor: '#FF6A00', -// comboSize: 20, -// mode: 'light', -// }; - -export interface ComboTheme { - /** 节点的大小 */ - comboSize: number; - /** 主要颜色 */ - primaryComboColor: string; - /** 主题模式： 'light' | 'dark' */ - mode: 'light' | 'dark'; -} - -const getComboStyleByTheme = () => - // inputTheme: ComboTheme - { - // const { comboSize, primaryComboColor, mode } = { - // ...defaultEdgeTheme, - // ...inputTheme, - // }; - - // const Colors = { - // light: { - // stroke: primaryComboColor, - // label: primaryComboColor, - // disabled: '#ddd', - // }, - // dark: { - // stroke: primaryComboColor, - // label: primaryComboColor, - // disabled: '#ddd3', - // }, - // }; - // const Color = Colors[mode]; - - const defaultStyle = { - type: 'circle', - style: { - labelCfg: { - position: 'top', - }, - }, - status: {}, - }; - return defaultStyle; - }; - -export default getComboStyleByTheme; diff --git a/packages/graphin/src/theme/edge-style.ts b/packages/graphin/src/theme/edge-style.ts deleted file mode 100644 index 207cfc537..000000000 --- a/packages/graphin/src/theme/edge-style.ts +++ /dev/null @@ -1,127 +0,0 @@ -const defaultEdgeTheme = { - primaryEdgeColor: '#ddd', - edgeSize: 1, - mode: 'light', -}; - -export interface EdgeTheme { - /** 节点的大小 */ - edgeSize: number; - /** 主要颜色 */ - primaryEdgeColor: string; - /** 主题模式： 'light' | 'dark' */ - mode: 'light' | 'dark'; -} - -const getEdgeStyleByTheme = (inputTheme: EdgeTheme) => { - const { edgeSize, primaryEdgeColor, mode } = { - ...defaultEdgeTheme, - ...inputTheme, - }; - - const Colors = { - light: { - stroke: primaryEdgeColor, - label: primaryEdgeColor, - disabled: '#ddd', - }, - dark: { - stroke: primaryEdgeColor, - label: primaryEdgeColor, - disabled: '#ddd3', - }, - }; - const Color = Colors[mode]; - - const defaultStyle = { - type: 'graphin-line', - style: { - keyshape: { - type: 'line', - lineWidth: edgeSize, - stroke: Color.stroke, - strokeOpacity: 1, - lineAppendWidth: 9, - cursor: 'pointer', - }, - halo: { - // stroke: Color.stroke, - visible: false, - cursor: 'pointer', - strokeOpacity: 0.4, - }, - label: { - value: '', - position: 'top', - fill: Color.label, - fontSize: 12, - textAlign: 'center', - background: { - // 设置背景的填充色 - fill: 'transparent', - // 设置圆角 - radius: 2, - // 设置border，即 stroke - stroke: 'transparent', - opacity: 1, - }, - }, - animate: {}, - }, - status: { - hover: { - halo: { - visible: true, - }, - }, - selected: { - halo: { - visible: true, - }, - keyshape: { - lineWidth: 2, - }, - label: { - visible: true, - }, - }, - active: { - halo: { - visible: true, - }, - keyshape: { - lineWidth: 2, - }, - label: { - visible: true, - }, - }, - inactive: { - halo: { - visible: false, - }, - keyshape: { - strokeOpacity: 0.1, - }, - label: { - visible: false, - }, - }, - disabled: { - halo: { - visible: false, - }, - keyshape: { - lineWidth: 0.5, - stroke: Color.disabled, - }, - label: { - visible: false, - }, - }, - }, - }; - return defaultStyle; -}; - -export default getEdgeStyleByTheme; diff --git a/packages/graphin/src/theme/index.ts b/packages/graphin/src/theme/index.ts deleted file mode 100644 index ff1dbc04c..000000000 --- a/packages/graphin/src/theme/index.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { ComboStyle, EdgeStyle, NodeStyle } from '../typings/type'; -import getComboStyleByTheme from './combo-style'; -import getEdgeStyleByTheme from './edge-style'; -import getNodeStyleByTheme from './node-style'; - -export const DEFAULT_THEME = { - mode: 'light', - primaryColor: '#873bf4', // '#269a99', // '#6c2fc3', - nodeSize: 26, - edgeSize: 1, - primaryEdgeColor: '#ddd', -}; - -export interface ThemeType { - /** - * @description 模式 light | dark - * @default light - */ - mode: 'light' | 'dark'; - /** - * @description 画布背景色 - * @default #fff - */ - background: string; - /** - * @description 节点大小 - * @default 26 - */ - nodeSize: number; - /** - * @description 节点主要颜色 - * @default #269a99 - */ - primaryColor: string; - /** - * @description 边的大小 - * @default 1 - */ - edgeSize: number; - /** - * @description 边的主要颜色 - * @default #ddd - */ - primaryEdgeColor: string; -} - -export type NodeTheme = Pick; - -export type EdgeTheme = Pick; - -export interface ThemeData extends ThemeType { - defaultNodeStyle: NodeStyle & { type: string }; - defaultNodeStatusStyle: NodeStyle['status']; - defaultEdgeStyle: EdgeStyle & { type: string }; - defaultEdgeStatusStyle: EdgeStyle['status']; - defaultComboStyle: ComboStyle & { type: string }; - defaultComboStatusStyle: ComboStyle['status']; -} - -export const getDefaultStyleByTheme = (inputTheme: Partial | undefined) => { - const theme = { ...DEFAULT_THEME, ...inputTheme } as ThemeType; - const { primaryColor, primaryEdgeColor, nodeSize, edgeSize, mode, background } = theme; - - const nodeStyle = getNodeStyleByTheme({ - primaryColor, - nodeSize, - mode, - }); - - const edgeStyle = getEdgeStyleByTheme({ - primaryEdgeColor, - edgeSize, - mode, - }); - - const comboStyle = getComboStyleByTheme(); - - const BackgroundStyle = { - light: '#fff', - dark: '#1f1f1f', - }; - - return { - ...theme, - mode, - background: background || BackgroundStyle[mode], - defaultNodeStyle: { type: nodeStyle.type, style: nodeStyle.style }, - defaultNodeStatusStyle: { status: nodeStyle.status }, - defaultEdgeStyle: { type: edgeStyle.type, style: edgeStyle.style }, - defaultEdgeStatusStyle: { status: edgeStyle.status }, - defaultComboStyle: { type: comboStyle.type, style: comboStyle.style }, - defaultComboStatusStyle: { status: comboStyle.status }, - }; -}; diff --git a/packages/graphin/src/theme/node-style.ts b/packages/graphin/src/theme/node-style.ts deleted file mode 100644 index e4de622dc..000000000 --- a/packages/graphin/src/theme/node-style.ts +++ /dev/null @@ -1,129 +0,0 @@ -import { NodeTheme } from './index'; - -const defaultNodeTheme = { - primaryColor: '#FF6A00', - nodeSize: 26, - mode: 'light', -}; -/** - * getNodeStyleByTheme 通过主题，获取节点的样式 - * @param inputNodeTheme - */ -const getNodeStyleByTheme = (inputNodeTheme: NodeTheme) => { - const { nodeSize, primaryColor, mode } = { ...defaultNodeTheme, ...inputNodeTheme }; - const labelSize = 12; - const Colors = { - light: { - fill: primaryColor, - fillOpacity: 0.1, - stroke: primaryColor, - strokeOpacity: 1, - icon: primaryColor, - badge: { - fill: primaryColor, - stroke: primaryColor, - font: '#fff', - }, - label: '#000', - disabled: '#ddd', - }, - dark: { - fill: primaryColor, - fillOpacity: 0.3, - stroke: primaryColor, - strokeOpacity: 1, - icon: '#fff', - badge: { - fill: primaryColor, - stroke: primaryColor, - font: '#fff', - }, - label: '#fff', - disabled: '#ddd3', - }, - }; - - const Color = Colors[mode]; - - const defaultStyle = { - type: 'graphin-circle', - style: { - keyshape: { - size: nodeSize, - fill: Color.fill, - fillOpacity: Color.fillOpacity, - stroke: Color.stroke, // storke is primaryColor - strokeOpacity: Color.strokeOpacity, - lineWidth: 1, - opacity: 1, - type: 'circle', - }, - label: { - position: 'bottom', - value: '', - fill: Color.label, - fontSize: labelSize, - offset: 0, - background: undefined, - fillOpacity: 1, - }, - icon: { - type: '', - value: '', - visible: false, - }, - badges: [], - halo: { - visible: false, - fillOpacity: 0.1, - }, - }, - status: { - normal: {}, - selected: { - halo: { - visible: true, - }, - keyshape: { - lineWidth: 5, - }, - }, - hover: { - halo: { - visible: true, - }, - }, - active: {}, - inactive: { - keyshape: { - fillOpacity: 0.04, - strokeOpacity: 0.04, - }, - icon: { - fillOpacity: 0.04, - }, - label: { - fillOpacity: 0.04, - }, - }, - disabled: { - halo: { - visible: false, - }, - keyshape: { - fill: Color.disabled, - stroke: Color.disabled, - }, - icon: { - fill: Color.disabled, - }, - label: { - fill: Color.disabled, - }, - }, - }, - }; - return defaultStyle; -}; - -export default getNodeStyleByTheme; diff --git a/packages/graphin/src/typings/type.ts b/packages/graphin/src/typings/type.ts deleted file mode 100644 index 59541af50..000000000 --- a/packages/graphin/src/typings/type.ts +++ /dev/null @@ -1,568 +0,0 @@ -// TODO : remove any type -import React from 'react'; - -import { ThemeType } from '../theme'; -type ShapeStyle = any; - -export interface UserProperties { - [key: string]: any; -} - -/** 基础节点类型 */ -interface BaseNode { - /** ID，必须为字符串 */ - id: string; -} - -export interface RestNode { - /** 注册元素的名称 */ - type: string; - /** 用户的数据 */ - data: any; - /** 坐标X */ - x: number; - /** 坐标Y */ - y: number; - /** 节点的样式，默认为默认样式 */ - style: Partial; - /** 节点当前的状态 */ - status: Partial; - /** 布局的相关信息 */ - layout: { - /** 度数 */ - degree?: number; - /** 力导参数 */ - force?: { - mass?: number; - }; - }; -} -export interface ElementStatus { - /** 是否选中 */ - selected: boolean; - /** 是否Hover */ - hover: boolean; - /** 是否激活 */ - active: boolean; - /** 是否禁用 */ - disabled: boolean; - /** 用户自定义的状态 */ - [key: string]: boolean; -} - -/** 基础边类型 */ -interface BaseEdge { - /** 边的 Source */ - source: string; - /** 边的 Target */ - target: string; -} - -export interface RestEdge { - /** 边的类型 */ - type?: string; - /** 边的数据 */ - style: Partial; - /** 边当前的状态 */ - status: Partial; - layout: { - /** 边的弹簧长度，力导时使用 */ - spring?: number; - }; -} - -export interface GraphinData { - nodes: IUserNode[]; - edges: IUserEdge[]; - combos?: Combo[] | undefined | null; -} -export interface GraphinTreeData { - id: string; - children?: GraphinTreeData[]; - /** 坐标X */ - x?: number; - /** 坐标Y */ - y?: number; - /** 节点的样式 */ - style?: Partial; - /** 节点当前的状态 */ - status?: Partial; -} - -export interface GraphinProps { - /** container id */ - containerId?: string; - /** container className */ - containerStyle?: React.CSSProperties; - /** user custom styles */ - style?: React.CSSProperties; - /** 主题 */ - theme?: Partial; - /** 数据 */ - data: GraphinTreeData | GraphinData; - /** 布局 */ - layout?: Layout; - /** 模式 G6的options.modes,建议使用 behaviors components 代替 */ - modes?: any; - - /** 布局后的回调函数 */ - handleAfterLayout?: (graph: any) => void; - - /** 节点的默认样式配置 */ - defaultNode?: Partial<{ - type?: string; - style: NodeStyle; - [key: string]: any; - }>; - /** 边的默认样式配置 */ - defaultEdge?: Partial<{ - type?: 'graphin-line'; - style: EdgeStyle; - [key: string]: any; - }>; - /** Combo 的默认样式配置 */ - defaultCombo?: Partial<{ - type?: string; - style: ComboStyle; - labelCfg?: { - position?: 'center' | 'top' | 'left' | 'right' | 'bottom'; - refX?: number; - refY?: number; - style?: ShapeStyle; - }; - [key: string]: any; - }>; - - /** 默认的节点 状态样式 */ - nodeStateStyles?: { - status: Partial; - }; - /** 默认的边 状态样式 */ - edgeStateStyles?: { - status: Partial; - }; - /** 默认的Combo样式 */ - comboStateStyles?: { - status: Partial; - }; - - /** 宽度 */ - width?: number; - /** 高度 */ - height?: number; - /** - * 是否启用全局动画 - */ - animate?: boolean; - /* 动画设置,仅在 animate 为 true 时有效 */ - animateCfg?: { - /** - * 帧回调函数，用于自定义节点运动路径，为空时线性运动 - */ - onFrame: undefined; - /** - * 动画时长(ms) - */ - duration: number; - /** - * 指定动画动效 - */ - easing: string; - }; - /** - * 边直接连接到节点的中心，不再考虑锚点 - */ - linkCenter?: boolean; - - /** - * 多边配置 - */ - parallel?: Partial<{ - // 多边之间的偏移量 - offsetDiff: number; - // 多条边时边的类型 - multiEdgeType: string; - // 单条边的类型 - singleEdgeType: string; - // 自环边的类型 - loopEdgeType: string; - }>; - /** user custom props */ - [key: string]: any; - - // children: React.ReactChildren; - - /** - * Text direction, to support languages like Arabic and Hebrew. - */ - dir?: 'ltr' | 'rtl'; - willUnmount?: () => void; -} - -export interface IUserNode extends BaseNode, Partial, UserProperties {} -export interface GraphinNode extends BaseNode, RestNode, UserProperties {} - -export interface EdgeStyle { - /** 边的类型 */ - type?: 'graphin-line'; - /** keyshape */ - keyshape: Partial< - { - /** 边的类型：目前是line 直线，未来可以扩展 */ - type: string; - /** 边宽 */ - lineWidth: number; - /** 边的填充色 */ - stroke: string; - /** 透明度 */ - opacity: number; - /** 虚线Dash */ - lineDash: number[]; - /** 边的交互区域扩展 */ - lineAppendWidth: number; - /** 鼠标样式 */ - cursor: string; - /** 末尾箭头 */ - endArrow: { - path?: string; - fill?: string; - stroke?: string; - [key: string]: any; - }; - /** 多边的设置，仅当keyshape.type 为poly时有效 */ - poly: { - // 多边时候距离中心线的距离，比如40代表距离中心线40px，-40代表距离中心线反向40px - distance?: number; - }; - /** 自环边的设置，distance 表示环的附近半径，dx 表示边起点与终点的 x 轴偏移量 */ - loop: { - /** 多边时候距离中心线的距离，比如 40 代表距离环图起始点高度40px，80 代表距离起始点高度 80px */ - distance?: number; - dx?: number; - }; - } & CommondAttrsStyle - >; - /** 标签 */ - label: Partial< - { - /** 值 */ - value: string | number; - /** 字体填充色 */ - fill: string; - /** 字体大小 */ - fontSize: number; - /** - * @description 偏移位置 - * @default [0,0] - */ - offset: number[]; - /** 其他配置 */ - /** 字体的背景色 */ - background: { - /** - * @description 背景的宽度 - * @default 根据fontSize动态计算 - */ - width?: number; - /** - * @description 背景的高度 - * @default 根据fontSize动态计算 - */ - height?: number; - /** - * @description 背景的边框色 - * @default 默认是label.stroke - */ - stroke?: string; - /** - * @description 背景填充色 - */ - fill?: string; - /** - * @description 背景的圆角度 - * @description 6 - */ - radius?: number; - /** - * @description 透明度，默认值为 1； - */ - opacity?: number; - }; - } & CommondAttrsStyle - >; - /** 光晕 */ - halo: Partial< - { - type: string; - lineWidth: number; - stroke: string; - opacity: number; - lineDash: number[]; - lineAppendWidth: number; - cursor: string; - /** - * @description 是否展示 - * @default false - */ - visible: boolean; - } & CommondAttrsStyle - >; - /** 动画 */ - animate: Partial< - { - /** - * @description 动画类型 - */ - type: 'line-dash' | 'line-growth' | 'circle-running'; - /** - * @description 当类型为'circle-running'时候小圆球的颜色 - */ - color: string; - /** - * @description 动画是否重复 - * @default true - */ - repeat: boolean; - /** - * @description 动画时长 - * @default 3000 - */ - duration: number; - /** - * @description 是否展示 - * @default false - */ - visible: boolean; - } & CommondAttrsStyle - >; - /** 状态样式 */ - status: Partial<{ - selected: Partial; - hover: Partial; - disabled: Partial; - [key: string]: any; - }>; -} - -export interface IUserEdge extends BaseEdge, Partial, UserProperties {} -export interface GraphinEdge extends BaseEdge, RestEdge, UserProperties {} - -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export interface Combo {} - -// https://g.antv.vision/zh/docs/api/shape/attrs -export interface CommondAttrsStyle { - /** - * @description 填充色、渐变或 纹理，默认值为空； - */ - fill: string | undefined; - /** - * @description 描边色、渐变或 纹理，默认值为空； - */ - stroke: string; - /** - * @description 透明度，默认值为 1； - */ - opacity: number; - /** - * @description 填充色的不透明度，默认值为 1； - */ - fillOpacity: number; - /** - * @description 描边色的不透明度，默认值为 1； - */ - strokeOpacity: number; - /** - * @description 阴影的颜色； - */ - shadowColor: string; - /** - * @description 阴影的模糊级别； - */ - shadowBlur: number; - /** - * @description 阴影距形状的水平距离； - */ - shadowOffsetX: number; - /** - * @description 阴影距形状的垂直距离； - */ - shadowOffsetY: number; - /** - * @description 新图像如何绘制到已有的图像上 - */ - globalCompositeOperation: string; -} -export type NodeStyleLabel = Partial< - { - /** - * @description 标签名称，\n 可换行 - * @description.en-US label name - */ - value: string; - /** 展示位置 'top' | 'bottom' | 'left' | 'right' | 'center' | */ - position: 'top' | 'bottom' | 'left' | 'right' | 'center' | string; - /** 文本填充色 */ - fill: string; - /** 文本大小 */ - fontSize: number; - /** 文本在各自方向上的偏移量，主要为了便于调整文本位置,[offsetX,offsetY] */ - offset: number | number[]; - /** - * @description 是否显示和隐藏 - * @default true - */ - visible: boolean; - } & CommondAttrsStyle ->; - -export type NodeStyleIcon = Partial< - { - /** 类型可以为字体图标，可以为网络图片，可以为纯文本 'font' | 'image' | 'text' */ - type: 'font' | 'image' | 'text'; - /** 根据类型，填写对应的值 */ - value: string; - /** 图标大小 */ - size: number | number[]; - /** 图标填充颜色 / 文本填充色 / 图片此属性无效 */ - fill: string; - /** 裁剪图片 */ - clip: { - r?: number; - [key: string]: any; - }; - fontFamily: string; - /** - * @description 是否显示和隐藏 - * @default true - */ - visible: boolean; - } & CommondAttrsStyle ->; - -export type NodeStyleBadge = Partial< - { - /** 放置的位置，ef：LT（left top）左上角 */ - position: 'LT' | 'RT' | 'RB' | 'LB' | string; - /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */ - type: 'font' | 'image' | 'text' | string; - value: number | string; - // type = image 时生效，表示图片的宽度和高度 - size: number | number[]; - /** 徽标填充色 */ - fill: string; - /** 徽标描边色 */ - stroke: string; - /** 徽标内文本的颜色 */ - color: string; - fontSize: number; - fontFamily: string; - // badge 中文本距离四周的偏移量 - padding: number; - // badge 在 x 和 y 方向上的偏移量 - offset: number | number[]; - /** - * @description 是否显示和隐藏 - * @default true - */ - visible: boolean; - /* 唯一身份 */ - id: string; - } & CommondAttrsStyle ->; -export type NodeStyleKeyShape = Partial< - { - /** 节点的大小 */ - size: number; - /** 填充色 */ - fill: string; - /** 包围边颜色 */ - stroke: string; - /** 边框的宽度 */ - lineWidth: number; - /** - * @description 是否显示和隐藏 - * @default true - */ - visible: boolean; - } & CommondAttrsStyle ->; - -export type NodeStyleHalo = Partial< - { - /** 大小 */ - size: number | number[]; - /** 填充色 */ - fill: string; - /** 包围边颜色 */ - stroke: string; - /** 边框的宽度 */ - lineWidth: number; - /** 透明度 */ - opacity: number; - /** - * @description 是否显示和隐藏 - * @default false - */ - visible: boolean; - } & CommondAttrsStyle ->; - -export interface NodeShapeStyle { - /** 节点的主要容器 */ - keyshape: NodeStyleKeyShape; - /** 节点的文本 */ - label: NodeStyleLabel; - /** 节点的中间位置图标区域 */ - icon: NodeStyleIcon; - /** 节点的徽标 */ - badges: NodeStyleBadge[]; - /** 光环 */ - halo: NodeStyleHalo; -} - -export enum StatusEnum { - /** 悬停状态 */ - HOVER = 'hover', - SELECTED = 'selected', - NORMAL = 'normal', - DISABLED = 'disabled', - ACTIVE = 'active', - INACTIVE = 'inactive', -} - -export interface NodeStyle extends NodeShapeStyle { - /** 状态样式 */ - status?: { - [key in StatusEnum]?: Partial; - }; - [key: string]: any; -} - -export interface ComboStyle { - status?: any; - [key: string]: any; -} - -export interface Layout { - /** 布局名称，必选 */ - type?: string; - preset?: Layout; - /** 布局配置，可选 */ - [key: string]: any; // eslint-disable-line -} - -export interface IconLoader { - (): { - fontFamily: string; - glyphs: { - name: string; - unicode_decimal: number; - [key: string]: any; - }[]; - }; -} - -export interface PlainObject { - [key: string]: any; -} diff --git a/packages/graphin/src/useGraphin.tsx b/packages/graphin/src/useGraphin.tsx deleted file mode 100644 index fb70a4866..000000000 --- a/packages/graphin/src/useGraphin.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { IGraph } from '@antv/g6'; -import React from 'react'; - -export interface GraphinContextType { - graph: IGraph; - isReady: boolean; - [key: string]: any; -} -//@ts-ignore -export const GraphinContext: React.Context = React.createContext({ - graph: null, - isReady: false, -}); - -export const useGraphin = () => { - const context = React.useContext(GraphinContext); - if (context === undefined || Object.keys(context).length === 0) { - throw new Error(`useContext must be used within a GraphInsightProvider`); - } - context.graph; - return context; -}; diff --git a/packages/graphin/src/utils/index.tsx b/packages/graphin/src/utils/index.tsx deleted file mode 100644 index 8fce6fa99..000000000 --- a/packages/graphin/src/utils/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index 6de064e70..000000000 --- a/packages/graphin/src/utils/mock.ts +++ /dev/null @@ -1,341 +0,0 @@ -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, - }; - }; - g6 = (): GraphinData => { - return { - // @ts-ignore - nodes: this.nodes.map(node => { - return { - ...node, - id: node.id, - type: 'circle-node', - comboId: node.comboId, - data: {}, - }; - }), - edges: this.edges.map((edge, index) => { - return { - id: `edge-${index}`, - source: edge.source, - target: edge.target, - data: {}, - }; - }), - 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/packages/graphin/src/utils/processEdges.ts b/packages/graphin/src/utils/processEdges.ts deleted file mode 100644 index 495a95afe..000000000 --- a/packages/graphin/src/utils/processEdges.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { merge } from 'lodash-es'; -import { EdgeStyle, IUserEdge } from '../index'; - -function isEven(number: number) { - return number % 2 === 0; -} - -function isOdd(number: number) { - return !isEven(number); -} - -const POLY_DEFAULT = 30; -const LOOP_DEFAULT = 10; -const LOOP_LABEL_POSITION_DEFAULT = 1; - -/** - * - * @param edges 边的集合 - * @param {poly,loop} 设置多边和自环多边的distance - */ -const processEdges = ( - edges: IUserEdge[], - { - poly = POLY_DEFAULT, - loop = LOOP_DEFAULT, - loopLabelPosition = LOOP_LABEL_POSITION_DEFAULT, - }: { - /** poly distance */ - poly?: number; - /** loop distance */ - loop?: number; - /** loop label position based on loop edge */ - loopLabelPosition?: number; - } = { - poly: POLY_DEFAULT, - loop: LOOP_DEFAULT, - loopLabelPosition: LOOP_LABEL_POSITION_DEFAULT, - }, -) => { - const edgesMap: { [edgeId: string]: IUserEdge[] } = {}; - edges.forEach((item, index) => { - const edge = { ...item }; - const { source, target } = edge; - const edgeId = `${source}-${target}`; - edge.id = edge.id || `${source}-${target}-${index}`; - const revertEdgeId = `${target}-${source}`; - /** 存储edge */ - if (edgesMap[edgeId]) { - edgesMap[edgeId].push(edge); - } else if (edgesMap[revertEdgeId]) { - edge.revert = true; - edgesMap[revertEdgeId].push(edge); - } else { - edgesMap[edgeId] = [edge]; - } - }); - - const edgeGroups = Object.values(edgesMap); - const newEdges: IUserEdge[] = []; - edgeGroups.forEach(edges => { - if (edges.length > 1) { - // 说明是多边的情况 - const isEvenCount = isEven(edges.length); - edges.forEach((edge, i: number) => { - const { source, target } = edge; - const isLoop = source === target; - const index = i; // edge.revert ? i + 1 : i; - - let distance; - if (isEvenCount) { - // 奇数 - const idx = Math.ceil((index + 1) / 2); - distance = poly * idx; - } else { - // 偶数 - const calculateIdx = isOdd(index) ? index + 1 : index; - const idx = Math.ceil(calculateIdx / 2); - distance = poly * idx; - } - - let resultDistance = isEven(index) ? distance : -distance; - - // 反向边需要revert - if (edge.revert) { - resultDistance = -resultDistance; - delete edge.revert; - } - - let keyshapeStyle: EdgeStyle['keyshape']; - if (isLoop) { - const distance = index * loop; - - keyshapeStyle = { - type: 'loop', - loop: { - distance, - }, - }; - - if (edge.style?.label) { - const offsetX = 0; - const offsetY = -(POLY_DEFAULT * loopLabelPosition + distance * 2); - edge.style.label.offset = [offsetX, offsetY]; - } - } else { - keyshapeStyle = { - type: 'poly', - poly: { - distance: resultDistance, - }, - }; - } - - merge(edge, { - style: { - keyshape: keyshapeStyle, - }, - }); - edge.isMultiple = true; - newEdges.push(edge); - }); - } else { - newEdges.push(edges[0]); - } - }); - - return newEdges; -}; - -export default processEdges; diff --git a/packages/graphin/tsconfig.json b/packages/graphin/tsconfig.json deleted file mode 100644 index e924b0678..000000000 --- a/packages/graphin/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "compilerOptions": { - "allowSyntheticDefaultImports": true, - "allowJs": true, - "declaration": true, - "target": "es2015", - "moduleResolution": "node", - "jsx": "react", - "resolveJsonModule": true, - "strict": true, - "noImplicitAny": false, - "lib": ["dom", "esnext"], - "module": "esnext", - "esModuleInterop": true, - "skipLibCheck": true, - "isolatedModules": false, - "rootDir": "." - }, - "include": ["src"] -}