diff --git a/.gitignore b/.gitignore index 8963e6fba..52f1612e0 100644 --- a/.gitignore +++ b/.gitignore @@ -49,6 +49,8 @@ packages/gi-assets-tugraph-analytics/dist # do not ignore gi-portal dist packages/gi/dist packages/gi-common-components/dist + +packages/graphin build diff --git a/.umirc.js b/.umirc.js new file mode 100644 index 000000000..a5bd08b16 --- /dev/null +++ b/.umirc.js @@ -0,0 +1,108 @@ +import { join } from 'path'; +const isProduction = process.env.NODE_ENV === 'production'; + +export default { + title: 'G6VP', + mode: 'site', + base: '/', + publicPath: '/', + logo: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', + favicon: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', + // sitemap: { + // hostname: 'graphin.antv.vision', + // }, + extraBabelIncludes: ['@antv/dumi-theme-antv'], + resolve: { + includes: [ + // 'packages/graphin/docs/*.md', + // 'packages/graphin/docs/render/data/', + // 'packages/graphin/docs/render/element/', + // 'packages/graphin/docs/features/', + + 'packages/gi-sdk/docs', + 'packages/gi-assets-basic/src/components/', + 'packages/gi-assets-advance/src/components/', + 'packages/gi-assets-algorithm/src/', + // 'packages/gi-assets-scene/src/', + + // 'packages/graphin-components/src/', + // 'packages/graphin-graphscope/docs/', + /** local develop */ + // 'packages/graphin-components/src/VisSettingPanel', + ], + }, + alias: { + '@antv/graphin': join(__dirname, 'packages', 'graphin'), + '@antv/gi-sdk': join(__dirname, 'packages', 'gi-sdk'), + '@antv/gi-assets-basic': join(__dirname, 'packages', 'gi-assets-basic'), + }, + extraBabelPlugins: [ + [ + 'import', + { + libraryName: 'antd', + libraryDirectory: 'es', + style: true, + }, + ], + ], + metas: [ + { + name: 'keywords', + content: 'graphin,g6,graph,Graphin,AntV Graph', + }, + ], + + navs: [ + null, + { + title: '快速体验', + path: 'https://insight.antv.antgroup.com', + }, + ], + + analytics: isProduction ? { ga: 'UA-148148901-8' } : false, + hash: true, + ssr: { + devServerRender: false, + }, + exportStatic: {}, + externals: { + react: 'window.React', + 'react-dom': 'window.ReactDOM', + antd: 'window.antd', + '@antv/g6': 'window.G6V5', + }, + workerLoader: {}, + webpack5: {}, + targets: { + chrome: 80, + firefox: false, + safari: false, + edge: false, + ios: false, + }, + theme: { + '@s-site-menu-width': '280px', + '@primary-color': '#873bf4', + }, + locales: [ + ['zh-CN', '中文'], + ['en-US', 'English'], + ], + links: [ + 'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css', + 'https://gw.alipayobjects.com/os/lib/antv/gi-assets-basic/2.4.36/dist/index.css', + ], + scripts: [ + 'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js', + 'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js', + 'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd-with-locales.js', + + /** G6 **/ + 'http://127.0.0.1:9001/g6.min.js', + + /** lodash */ + 'https://gw.alipayobjects.com/os/lib/lodash/4.17.20/lodash.min.js', + ], +}; diff --git a/package.json b/package.json index 6b44a05f1..be6fe01dc 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,14 @@ "pnpm": "^8" }, "scripts": { - "preinstall": "npx only-allow pnpm", - "postinstall": "npm run build:all:es", + "preinstall": "npx only-allow pnpm && npm run add-gitmodule-graphin", + "add-gitmodule-graphin": "test -d packages/graphin/.git || git clone -b v3 https://github.com/antvis/Graphin.git packages/graphin", + "setup:tugraph-db": "node scripts/setupProject.js https://github.com/TuGraph-family/gi-assets-tugraph-db.git packages/gi-assets-tugraph-db", "build:all:es": "turbo run build:es", "build:all:umd": "turbo run build:umd --no-cache", "start": "cd packages/gi-site && npm run start", "clean": "pnpm run -r clean", + "docs": "NODE_OPTIONS=--max_old_space_size=4098 && dumi dev", "publish": "pnpm publish -r --registry=https://registry.npmjs.org", "cdn": "node ./scripts/publish_yuyan.mjs", "tar:gi-httpservice": "node scripts/tar_httpservice.mjs && cd packages/gi-httpservice-xxx && npm install && npm run build:docker && npm run tar && cd ../../ && node scripts/rm_httpservice.mjs", @@ -39,14 +41,9 @@ }, "dependencies": { "@ant-design/icons": "^4.7.0", - "@antv/algorithm": "^0.1.26-beta.0", - "@antv/g6": "5.0.0-beta.5", - "@antv/graphin": "workspace:*", - "@antv/layout": "^0.3.22", - "@antv/s2": "^1.48.0", - "@antv/s2-react": "^1.41.0", - "@antv/util": "^3.2.5", + "@antv/g6": "5.0.0-beta.27", "antd": "4.x", + "babel-plugin-import": "^1.13.8", "buffer": "^6.0.3", "buffer-browserify": "^0.2.5", "node-fetch": "^3.3.0", @@ -56,12 +53,14 @@ "umi": "3.x" }, "devDependencies": { + "@antv/dumi-theme-antv": "0.2.0", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@changesets/cli": "^2.26.1", "@types/react": "17.x", "@types/react-dom": "17.x", "babel-loader": "^8.2.5", "css-loader": "^6.8.1", + "dumi": "^1.1.35", "father": "^2.30.23", "fs-extra": "^10.1.0", "husky": "^8.0.3", @@ -73,6 +72,7 @@ "style-loader": "^3.3.1", "ts-loader": "^9.4.2", "turbo": "^1.8.3", + "typescript": "^5.1.6", "webpack": "^5.88.0", "webpack-cli": "^5.0.0" } diff --git a/packages/gi-assets-advance/package.json b/packages/gi-assets-advance/package.json index 67a5443dc..73d4783b3 100644 --- a/packages/gi-assets-advance/package.json +++ b/packages/gi-assets-advance/package.json @@ -35,6 +35,9 @@ "@antv/gi-common-components": "workspace:*", "@antv/gi-sdk": "workspace:*", "@antv/graphin-icons": "^1.0.0", + "@antv/layout": "^0.3.24", + "@antv/s2": "^1.52.0", + "@antv/s2-react": "^1.44.2", "@antv/util": "^3.2.5", "@uiw/react-markdown-preview": "^4.1.13", "ace-gremlin-editor": "^0.0.14", diff --git a/packages/gi-assets-advance/src/components/AddSheetbar/Component.tsx b/packages/gi-assets-advance/src/components/AddSheetbar/Component.tsx index e4a45c6e9..346c98d23 100644 --- a/packages/gi-assets-advance/src/components/AddSheetbar/Component.tsx +++ b/packages/gi-assets-advance/src/components/AddSheetbar/Component.tsx @@ -10,8 +10,10 @@ export interface AddSheetbarProps { } const AddSheetbar: React.FunctionComponent = props => { - const { handleAddSheetbar, graph } = useContext(); - + const { context, graph } = useContext<{ + handleAddSheetbar: (options: any) => void; + }>(); + const { handleAddSheetbar } = context; const { GIAC, isRelayout } = props; const handleClick = React.useCallback(() => { const nodes = graph.findAllByState('node', 'selected').map(c => { @@ -43,11 +45,7 @@ const AddSheetbar: React.FunctionComponent = props => { }); }, [graph, handleAddSheetbar, isRelayout]); - return ( - <> - - - ); + return ; }; export default memo(AddSheetbar); diff --git a/packages/gi-assets-advance/src/components/AddSheetbar/index.md b/packages/gi-assets-advance/src/components/AddSheetbar/index.md deleted file mode 100755 index 78cddf581..000000000 --- a/packages/gi-assets-advance/src/components/AddSheetbar/index.md +++ /dev/null @@ -1,17 +0,0 @@ -## AddSheetbar 添加到新画布中 - -```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; -import * as React from 'react'; -import Asset from './index.tsx'; - -const App = props => { - return ( -
- -
- ); -}; - -export default App; -``` diff --git a/packages/gi-assets-advance/src/components/AjustLayout/Component.tsx b/packages/gi-assets-advance/src/components/AjustLayout/Component.tsx index 546ffeffe..6ca8d9803 100644 --- a/packages/gi-assets-advance/src/components/AjustLayout/Component.tsx +++ b/packages/gi-assets-advance/src/components/AjustLayout/Component.tsx @@ -153,7 +153,8 @@ const AjustLayout: React.FC = ({ visible, onClose, serviceId }); // const { services, dispatch, GiState, setGiState } = GraphinContext as any; - const { graph, services, data, updateContext } = useContext(); + const { graph, services, updateContext, context } = useContext(); + const { data } = context; React.useEffect(() => { const onNodeSelectChange = e => { diff --git a/packages/gi-assets-advance/src/components/AjustLayout/index.md b/packages/gi-assets-advance/src/components/AjustLayout/index.md index ddc27b5c4..c497a18ff 100644 --- a/packages/gi-assets-advance/src/components/AjustLayout/index.md +++ b/packages/gi-assets-advance/src/components/AjustLayout/index.md @@ -1,26 +1,30 @@ -## AjustLayout 子图布局 +--- +title: 子图布局 +order: 0 +group: + title: 高级资产 + path: /advance +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; -import { Utils } from '@antv/graphin'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const services = [ - { - id: 'GI_SERVICE_INTIAL_GRAPH', - service: params => { - return new Promise(resolve => { - resolve(Utils.mock(20).tree().graphin()); - }); - }, - }, -]; +const { registerMeta, info } = Asset; +const { id } = info; -const App = props => { +Assets.components[id] = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-advance/src/components/AnalysisHistory/Component.tsx b/packages/gi-assets-advance/src/components/AnalysisHistory/Component.tsx index eb5786031..b5687dab3 100644 --- a/packages/gi-assets-advance/src/components/AnalysisHistory/Component.tsx +++ b/packages/gi-assets-advance/src/components/AnalysisHistory/Component.tsx @@ -21,7 +21,8 @@ export interface AnalysisHistoryProps { } const AnalysisHistory: React.FC = props => { - const { GISDK_ID, history, graph, services } = useContext(); + const { GISDK_ID, context, graph, services } = useContext<{ history: any }>(); + const { history } = context; const { height, placement, diff --git a/packages/gi-assets-advance/src/components/AnalysisHistory/TemplateDrawer.tsx b/packages/gi-assets-advance/src/components/AnalysisHistory/TemplateDrawer.tsx index b183a273c..c2d8655b9 100644 --- a/packages/gi-assets-advance/src/components/AnalysisHistory/TemplateDrawer.tsx +++ b/packages/gi-assets-advance/src/components/AnalysisHistory/TemplateDrawer.tsx @@ -1,16 +1,16 @@ +import { CaretRightOutlined, PauseOutlined, RedoOutlined } from '@ant-design/icons'; import { useContext } from '@antv/gi-sdk'; +import { useMemoizedFn } from 'ahooks'; +import { Button, Drawer, Form, Select, Tooltip } from 'antd'; import * as React from 'react'; import { useImmer } from 'use-immer'; -import { CaretRightOutlined, PauseOutlined, RedoOutlined } from '@ant-design/icons'; -import { Button, Drawer, Form, Select, Tooltip } from 'antd'; -import FlowGraph from './FlowGraph'; import ConfigurePanel from './ConfigurePanel'; +import FlowGraph from './FlowGraph'; import { TemplateData, TemplateNode } from './type'; -import { useMemoizedFn } from 'ahooks'; +import $i18n from '../../i18n'; import './index.less'; import { updateObjWithPaths } from './util'; -import $i18n from '../../i18n'; let stepTimer: any = 0; @@ -32,7 +32,8 @@ type RunningStatus = 'none' | 'running' | 'success' | 'failed' | 'finish' | unde */ const TemplateDrawer: React.FC = props => { const { open, templates, urlMap, handleClose, handleUpdateConfigure } = props; - const { updateContext, history } = useContext(); + const { updateContext, context } = useContext<{ history: any }>(); + const { history } = context; const [state, updateState] = useImmer({ activeTemplateId: undefined as string | undefined, @@ -217,7 +218,7 @@ const TemplateDrawer: React.FC = props => { }); let foundComponent = false; updateContext(draft => { - draft.config.components.forEach(item => { + draft.components.forEach(item => { if (lastComponentId && item.id === lastComponentId) { item.props.controlledValues = undefined; } diff --git a/packages/gi-assets-advance/src/components/AnalysisHistory/TemplateModal.tsx b/packages/gi-assets-advance/src/components/AnalysisHistory/TemplateModal.tsx index 3febc3be3..1e8d1ec3e 100644 --- a/packages/gi-assets-advance/src/components/AnalysisHistory/TemplateModal.tsx +++ b/packages/gi-assets-advance/src/components/AnalysisHistory/TemplateModal.tsx @@ -1,16 +1,16 @@ +import { CheckCircleFilled, PictureOutlined } from '@ant-design/icons'; import { useContext } from '@antv/gi-sdk'; import { createUuid } from '@antv/gi-sdk/lib/process/common'; +import { Button, Empty, Form, Input, Modal, Popover, Timeline, Tooltip } from 'antd'; +import { original } from 'immer'; import * as React from 'react'; import { useImmer } from 'use-immer'; -import { CheckCircleFilled, PictureOutlined } from '@ant-design/icons'; -import { Button, Empty, Form, Input, Modal, Popover, Timeline, Tooltip } from 'antd'; -import { ColorMap, LabelMap, circleNodeStyle, getHistoryNode } from './util'; +import $i18n from '../../i18n'; import FlowGraph from './FlowGraph'; import ParamterizePanel from './ParamterizePanel'; -import { original } from 'immer'; -import { TemplateData, TemplateNode } from './type'; import './index.less'; -import $i18n from '../../i18n'; +import { TemplateData, TemplateNode } from './type'; +import { ColorMap, LabelMap, circleNodeStyle, getHistoryNode } from './util'; export interface TemplateModalProps { // 沉淀历史弹窗是否打开 @@ -32,7 +32,8 @@ export interface TemplateModalProps { */ const TemplateModal: React.FC = props => { const [form] = Form.useForm(); - const { history } = useContext(); + const { context } = useContext<{ history: any }>(); + const { history } = context; const { open, urlMap, handleSave, handleClose } = props; const [state, updateState] = useImmer({ diff --git a/packages/gi-assets-advance/src/components/AnalysisHistory/index.md b/packages/gi-assets-advance/src/components/AnalysisHistory/index.md deleted file mode 100755 index d0957bd84..000000000 --- a/packages/gi-assets-advance/src/components/AnalysisHistory/index.md +++ /dev/null @@ -1,17 +0,0 @@ -## AnalysisHistory 分析历史栏 - -```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; -import * as React from 'react'; -import Asset from './index.tsx'; - -const App = props => { - return ( -
- -
- ); -}; - -export default App; -``` diff --git a/packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx b/packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx index d483fc8fe..5da3d0050 100644 --- a/packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx +++ b/packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx @@ -473,7 +473,7 @@ export const createFlowGraph = (container, tooltip, isConfigure) => { container, width, height, - animate: true, + animated: true, plugins: [tooltip], modes: { default: [ diff --git a/packages/gi-assets-advance/src/components/Assistant/Component.tsx b/packages/gi-assets-advance/src/components/Assistant/Component.tsx index 9e784ff6a..21189eec1 100644 --- a/packages/gi-assets-advance/src/components/Assistant/Component.tsx +++ b/packages/gi-assets-advance/src/components/Assistant/Component.tsx @@ -45,7 +45,12 @@ const Assistant: React.FC = ({ size, welcome, }) => { - const { services, schemaData, transform, updateContext, largeGraphLimit } = useContext(); + const { services, context, transform, updateContext } = useContext<{ + largeGraphLimit: number; + largeGraphMode: boolean; + largeGraphData: any; + }>(); + const { schemaData, largeGraphLimit } = context; const service = utils.getService(services, serviceId); const controller = useController(); const assistantRef = useRef(null); @@ -187,6 +192,7 @@ const Assistant: React.FC = ({ useEffect(() => { if (schemaData) { + //@ts-ignore setMessages(prev => [...prev.splice(2, prev.length), ...getWelcomeMessage(welcome, prompt, schemaData)]); } }, [schemaData, welcome, prompt]); diff --git a/packages/gi-assets-advance/src/components/Assistant/index.md b/packages/gi-assets-advance/src/components/Assistant/index.md new file mode 100644 index 000000000..904bb46c1 --- /dev/null +++ b/packages/gi-assets-advance/src/components/Assistant/index.md @@ -0,0 +1,33 @@ +--- +title: AI 助理 +order: 0 +group: + title: 高级资产 + path: /advance +nav: + title: 资产包 + path: /assets + order: 1 +--- + +```jsx +import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.ts'; + +const { registerMeta, info } = Asset; +const { id } = info; + +Assets.components[id] = Asset; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` diff --git a/packages/gi-assets-advance/src/components/CypherQuery/Component.tsx b/packages/gi-assets-advance/src/components/CypherQuery/Component.tsx index aea8d03c2..6b7d4c988 100644 --- a/packages/gi-assets-advance/src/components/CypherQuery/Component.tsx +++ b/packages/gi-assets-advance/src/components/CypherQuery/Component.tsx @@ -27,7 +27,8 @@ const CypherEditorPanel: React.FC = ({ controlledValues, onOpen, }) => { - const { updateContext, updateHistory, transform, services, largeGraphLimit } = useContext(); + const { updateContext, updateHistory, transform, services, context } = useContext(); + const { largeGraphLimit } = context; const service = utils.getService(services, serviceId); const [state, setState] = useImmer({ diff --git a/packages/gi-assets-advance/src/components/CypherQuery/index.md b/packages/gi-assets-advance/src/components/CypherQuery/index.md new file mode 100644 index 000000000..5ea7fd936 --- /dev/null +++ b/packages/gi-assets-advance/src/components/CypherQuery/index.md @@ -0,0 +1,33 @@ +--- +title: Cypher 语句查询 +order: 0 +group: + title: 高级资产 + path: /advance +nav: + title: 资产包 + path: /assets + order: 1 +--- + +```jsx +import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.ts'; + +const { registerMeta, info } = Asset; +const { id } = info; + +Assets.components[id] = Asset; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` diff --git a/packages/gi-assets-advance/src/components/GremlinQuery/index.md b/packages/gi-assets-advance/src/components/GremlinQuery/index.md new file mode 100644 index 000000000..db5c0c824 --- /dev/null +++ b/packages/gi-assets-advance/src/components/GremlinQuery/index.md @@ -0,0 +1,33 @@ +--- +title: Gremlin 查询 +order: 0 +group: + title: 高级资产 + path: /advance +nav: + title: 资产包 + path: /assets + order: 1 +--- + +```jsx +import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.tsx'; + +const { registerMeta, info } = Asset; +const { id } = info; + +Assets.components[id] = Asset; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` diff --git a/packages/gi-assets-advance/src/components/JSONMode/Component.tsx b/packages/gi-assets-advance/src/components/JSONMode/Component.tsx index 6196a3b7c..ef9444b1f 100644 --- a/packages/gi-assets-advance/src/components/JSONMode/Component.tsx +++ b/packages/gi-assets-advance/src/components/JSONMode/Component.tsx @@ -10,7 +10,8 @@ export interface IProps { const JSONMode: React.FC = props => { const { style = {}, theme = 'rjv-default' } = props; - const { data: graphData } = useContext(); + const { context } = useContext(); + const { data: graphData } = context; const json = useMemo(() => { const { nodes = [], edges = [], combos = [], ...others } = graphData; diff --git a/packages/gi-assets-advance/src/components/JSONMode/index.md b/packages/gi-assets-advance/src/components/JSONMode/index.md new file mode 100644 index 000000000..60a15c7f8 --- /dev/null +++ b/packages/gi-assets-advance/src/components/JSONMode/index.md @@ -0,0 +1,33 @@ +--- +title: 代码模式 +order: 0 +group: + title: 高级资产 + path: /advance +nav: + title: 资产包 + path: /assets + order: 1 +--- + +```jsx +import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.tsx'; + +const { registerMeta, info } = Asset; +const { id } = info; + +Assets.components[id] = Asset; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` diff --git a/packages/gi-assets-advance/src/components/Redo/index.md b/packages/gi-assets-advance/src/components/Redo/index.md deleted file mode 100755 index 06605aca4..000000000 --- a/packages/gi-assets-advance/src/components/Redo/index.md +++ /dev/null @@ -1,17 +0,0 @@ -## Redo 重做 - -```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; -import * as React from 'react'; -import Asset from './index.tsx'; - -const App = props => { - return ( -
- -
- ); -}; - -export default App; -``` diff --git a/packages/gi-assets-advance/src/components/Sheetbar/Component.tsx b/packages/gi-assets-advance/src/components/Sheetbar/Component.tsx index 030706493..524044981 100644 --- a/packages/gi-assets-advance/src/components/Sheetbar/Component.tsx +++ b/packages/gi-assets-advance/src/components/Sheetbar/Component.tsx @@ -12,7 +12,16 @@ export interface SheetbarProps { } const Sheetbar: React.FunctionComponent = props => { const { height, placement, position = [0, 0] } = props; - const { GISDK_ID, config, data, source, transform, services, updateContext, graph, assets } = useContext(); + const { GISDK_ID, transform, services, updateContext, graph, assets, context } = useContext(); + const { nodes, edges, layout, components, pageLayout, data, source } = context; + + const config = { + nodes, + edges, + layout, + components, + pageLayout, + }; const vars = React.useRef({ tagContext: false, }); diff --git a/packages/gi-assets-advance/src/components/Sheetbar/index.md b/packages/gi-assets-advance/src/components/Sheetbar/index.md deleted file mode 100755 index af26756ba..000000000 --- a/packages/gi-assets-advance/src/components/Sheetbar/index.md +++ /dev/null @@ -1,17 +0,0 @@ -## Sheetbar 多画布 - -```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; -import * as React from 'react'; -import Asset from './index.tsx'; - -const App = props => { - return ( -
- -
- ); -}; - -export default App; -``` diff --git a/packages/gi-assets-advance/src/components/SnapshotGallery/Component.tsx b/packages/gi-assets-advance/src/components/SnapshotGallery/Component.tsx index bfea5fcdb..9c0d50f7d 100644 --- a/packages/gi-assets-advance/src/components/SnapshotGallery/Component.tsx +++ b/packages/gi-assets-advance/src/components/SnapshotGallery/Component.tsx @@ -27,7 +27,8 @@ const SnapshotGallery: React.FC = props => { const positionStyles = getPositionStyles(placement, offset); const flexDirection = direction === 'horizontal' ? 'row' : 'column'; - const { graph, data, GISDK_ID } = useContext(); + const { graph, context, GISDK_ID } = useContext(); + const { data } = context; const [state, updateState] = useImmer({ history: new Map(), }); diff --git a/packages/gi-assets-advance/src/components/StructAnalysis/Component.tsx b/packages/gi-assets-advance/src/components/StructAnalysis/Component.tsx index bc7c23340..53c936779 100644 --- a/packages/gi-assets-advance/src/components/StructAnalysis/Component.tsx +++ b/packages/gi-assets-advance/src/components/StructAnalysis/Component.tsx @@ -1,17 +1,18 @@ -import { useContext, utils } from '@antv/gi-sdk'; +import { useContext, useSourceDataMap, utils } from '@antv/gi-sdk'; import Graphin, { GraphinData } from '@antv/graphin'; import React, { memo, useEffect, useRef } from 'react'; import { useImmer } from 'use-immer'; import $i18n from '../../i18n'; const StructAnalysis = () => { - const { data, sourceDataMap, config, schemaData } = useContext(); + const { context } = useContext(); + const { data, source, edges: edgesConfig, nodes: nodesConfig } = context; + const sourceDataMap = useSourceDataMap(source); const { nodesConfigMap, edgesConfigMap } = React.useMemo(() => { const nodesConfigMap = new Map(); const edgesConfigMap = new Map(); - const { nodes: nodesConfig, edges: edgesConfig } = config; nodesConfig!.forEach(c => { const key = JSON.stringify(c.expressions); nodesConfigMap.set(key, c); @@ -25,7 +26,7 @@ const StructAnalysis = () => { nodesConfigMap, edgesConfigMap, }; - }, [config]); + }, [edgesConfig, nodesConfig]); const [state, updateState] = useImmer<{ graphStruct: GraphinData; diff --git a/packages/gi-assets-advance/src/components/StructAnalysis/index.md b/packages/gi-assets-advance/src/components/StructAnalysis/index.md new file mode 100644 index 000000000..890864679 --- /dev/null +++ b/packages/gi-assets-advance/src/components/StructAnalysis/index.md @@ -0,0 +1,33 @@ +--- +title: 路径结构分析 +order: 0 +group: + title: 高级资产 + path: /advance +nav: + title: 资产包 + path: /assets + order: 1 +--- + +```jsx +import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.tsx'; + +const { registerMeta, info } = Asset; +const { id } = info; + +Assets.components[id] = Asset; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` diff --git a/packages/gi-assets-advance/src/components/StyleSetting/StyleSettingPanel.tsx b/packages/gi-assets-advance/src/components/StyleSetting/StyleSettingPanel.tsx index 9185b4854..af616a70f 100644 --- a/packages/gi-assets-advance/src/components/StyleSetting/StyleSettingPanel.tsx +++ b/packages/gi-assets-advance/src/components/StyleSetting/StyleSettingPanel.tsx @@ -19,17 +19,21 @@ const StyleSettingPanel: React.FunctionComponent = ({ controlledValues, onOpen, }) => { + const { updateContext, updateHistory, context, assets } = useContext(); const { - updateContext, - updateHistory, data, - config, - assets, + nodes, + edges, schemaData = { nodes: [], edges: [], }, - } = useContext(); + } = context; + + const config = { + nodes, + edges, + }; const elements = React.useMemo(() => { return utils.getElementsByAssets(assets.elements, data, schemaData); @@ -51,8 +55,7 @@ const StyleSettingPanel: React.FunctionComponent = ({ const clonedConfig = JSON.parse(JSON.stringify(elementConfig)); updateContext(draft => { - draft.config[elementType] = clonedConfig; - draft.layoutCache = true; + draft[elementType] = clonedConfig; }); updateHistory({ diff --git a/packages/gi-assets-advance/src/components/StyleSetting/index.md b/packages/gi-assets-advance/src/components/StyleSetting/index.md index 9f0c64426..781b7e5b7 100644 --- a/packages/gi-assets-advance/src/components/StyleSetting/index.md +++ b/packages/gi-assets-advance/src/components/StyleSetting/index.md @@ -1,56 +1,30 @@ -## StyleSetting 样式设置 +--- +title: 样式设置 +order: 0 +group: + title: 高级资产 + path: /advance +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; -import StyleSetting from './Component.tsx'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -// +const { registerMeta, info } = Asset; +const { id } = info; -const nodes = { - uId: '112', - name: '', - pt: 'user', - age: 23, -}; +Assets.components[id] = Asset; -const data = { - nodes: [ - { - id: 'node1', - nodeType: 'User', - // 默认ID - label: 'xxx', - data: { - id: 'node1', - nodeType: 'User', - // 默认ID - label: 'xxx', - }, - }, - { - id: 'node1', - label: 'Car', - data: { - id: 'node1', - label: 'Car', - }, - }, - ], - edges: [ - { - source: 'node1', - target: 'node1', - edgeType: 'edge1', - }, - ], -}; -const App = props => { - // +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx b/packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx index 76d10cb55..fe7a3e8c0 100644 --- a/packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx +++ b/packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx @@ -28,7 +28,8 @@ export interface ISubGraphLayoutProps { } const SubGraphLayout: React.FC = props => { - const { graph, data } = useContext(); + const { graph, context } = useContext(); + const { data } = context; const { isDefaultSubGraph, sortKey, gap, direction } = props; const [state, updateState] = useImmer({ diff --git a/packages/gi-assets-advance/src/components/SubGraphLayout/index.md b/packages/gi-assets-advance/src/components/SubGraphLayout/index.md deleted file mode 100644 index ddc27b5c4..000000000 --- a/packages/gi-assets-advance/src/components/SubGraphLayout/index.md +++ /dev/null @@ -1,29 +0,0 @@ -## AjustLayout 子图布局 - -```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; -import { Utils } from '@antv/graphin'; -import * as React from 'react'; -import Asset from './index.tsx'; - -const services = [ - { - id: 'GI_SERVICE_INTIAL_GRAPH', - service: params => { - return new Promise(resolve => { - resolve(Utils.mock(20).tree().graphin()); - }); - }, - }, -]; - -const App = props => { - return ( -
- -
- ); -}; - -export default App; -``` diff --git a/packages/gi-assets-advance/src/components/TableMode/Component.tsx b/packages/gi-assets-advance/src/components/TableMode/Component.tsx index 6c6d47b84..291fb96c5 100644 --- a/packages/gi-assets-advance/src/components/TableMode/Component.tsx +++ b/packages/gi-assets-advance/src/components/TableMode/Component.tsx @@ -39,7 +39,8 @@ const INTIAL_NUMBER = 9527; const TableMode: React.FC = props => { const { isSelectedActive, enableCopy, exportable, enableTabSplitScreen, targetWindowPath, style = {} } = props; - const { graph, schemaData, largeGraphData, data: graphData } = useContext(); + const { graph, context } = useContext(); + const { schemaData, largeGraphData, data: graphData } = context; const isFullScreen = useFullScreen(); const targetWindowRef = useRef(null); const modalCallbackRef = useRef(e => {}); @@ -135,12 +136,14 @@ const TableMode: React.FC = props => { const NODES_FIELDS_COLUMNS_CONFIG = React.useMemo(() => { return { + //@ts-ignore columns: getColumns(schemaData, 'nodes'), }; }, [schemaData]); const EDGES_FIELDS_COLUMNS_CONFIG = React.useMemo(() => { return { + //@ts-ignore columns: getColumns(schemaData, 'edges'), }; }, [schemaData]); diff --git a/packages/gi-assets-advance/src/components/TableMode/hooks/useCellSelect.ts b/packages/gi-assets-advance/src/components/TableMode/hooks/useCellSelect.ts index 36550a570..4f1982bfa 100644 --- a/packages/gi-assets-advance/src/components/TableMode/hooks/useCellSelect.ts +++ b/packages/gi-assets-advance/src/components/TableMode/hooks/useCellSelect.ts @@ -9,8 +9,8 @@ const useCellSelect = ( s2Instance: { nodeTable: SpreadSheet | null; edgeTable: SpreadSheet | null }, isFullScreen: boolean, ) => { - const context = useContext(); - const { data: graphData, graph, largeGraphData, updateContext } = context; + const { context, graph, updateContext } = useContext(); + const { data: graphData, largeGraphData } = context; const { nodeTable, edgeTable } = s2Instance; React.useEffect(() => { if (nodeTable) { diff --git a/packages/gi-assets-advance/src/components/TableMode/hooks/useEdgeDataCfg.tsx b/packages/gi-assets-advance/src/components/TableMode/hooks/useEdgeDataCfg.tsx index faf931f61..11f0a215d 100644 --- a/packages/gi-assets-advance/src/components/TableMode/hooks/useEdgeDataCfg.tsx +++ b/packages/gi-assets-advance/src/components/TableMode/hooks/useEdgeDataCfg.tsx @@ -4,7 +4,8 @@ import React from 'react'; // 生成边表的数据 const useEdgeDataCfg = (): S2DataConfig => { - const { schemaData, source: graphData, largeGraphData } = useContext(); + const { context } = useContext(); + const { schemaData, source: graphData, largeGraphData } = context; const edgeDataCfg: S2DataConfig = React.useMemo(() => { const edgeProperties = schemaData.edges.reduce((acc, cur) => { return { diff --git a/packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx b/packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx index 5363ac963..2f999ba93 100644 --- a/packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx +++ b/packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx @@ -4,7 +4,8 @@ import React from 'react'; type IEdge = any; type INode = any; const useListenEdgeSelect = (isSelectedActive: boolean, s2Instance: SpreadSheet | null, isFullScreen: boolean) => { - const { data: graphData, graph, largeGraphData, updateContext } = useContext(); + const { graph, updateContext, context } = useContext(); + const { data: graphData, largeGraphData } = context; React.useEffect(() => { s2Instance?.on(S2Event.GLOBAL_SELECTED, () => { // isSelectedActiv 为 false 或全屏时，不高亮选中元素 diff --git a/packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx b/packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx index 3ee98d171..8b4d4cd49 100644 --- a/packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx +++ b/packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx @@ -6,7 +6,8 @@ type INode = any; import { useContext } from '@antv/gi-sdk'; const useListenNodeSelect = (isSelectedActive: boolean, s2Instance: SpreadSheet | null, isFullScreen: boolean) => { - const { data: graphData, graph, largeGraphData, updateContext } = useContext(); + const { graph, updateContext, context } = useContext(); + const { data: graphData, largeGraphData } = context; React.useEffect(() => { s2Instance?.on(S2Event.GLOBAL_SELECTED, () => { // isSelectedActiv 为 false 或全屏时，不高亮选中元素 diff --git a/packages/gi-assets-advance/src/components/TableMode/hooks/useNodeDataCfg.tsx b/packages/gi-assets-advance/src/components/TableMode/hooks/useNodeDataCfg.tsx index dc8f6094a..374292cdd 100644 --- a/packages/gi-assets-advance/src/components/TableMode/hooks/useNodeDataCfg.tsx +++ b/packages/gi-assets-advance/src/components/TableMode/hooks/useNodeDataCfg.tsx @@ -4,7 +4,8 @@ import React from 'react'; // 生成点表的数据 const useNodeDataCfg = (): S2DataConfig => { - const { schemaData, source: graphData, largeGraphData } = useContext(); + const { context } = useContext(); + const { schemaData, source: graphData, largeGraphData } = context; const nodeDataCfg: S2DataConfig = React.useMemo(() => { const nodeProperties = schemaData.nodes.reduce((acc, cur) => { diff --git a/packages/gi-assets-advance/src/components/ThemeSetting/AddOrUpdateTheme.tsx b/packages/gi-assets-advance/src/components/ThemeSetting/AddOrUpdateTheme.tsx index a593cbb8c..228065ec2 100644 --- a/packages/gi-assets-advance/src/components/ThemeSetting/AddOrUpdateTheme.tsx +++ b/packages/gi-assets-advance/src/components/ThemeSetting/AddOrUpdateTheme.tsx @@ -5,9 +5,9 @@ import { Alert, Button, Form, Input, List, message } from 'antd'; import { nanoid } from 'nanoid'; import React from 'react'; import { Updater } from 'use-immer'; +import $i18n from '../../i18n'; import mockServices from './mockServices'; import { ICanvasConfig, ITheme, IThemeSettingState } from './typing'; -import $i18n from '../../i18n'; const addMsg = $i18n.get({ id: 'advance.components.ThemeSetting.AddOrUpdateTheme.ConfigureTheCanvasBackgroundStyle', @@ -28,7 +28,15 @@ interface Props { const AddTheme: React.FC = props => { const { updateState, status, currentTheme } = props; - const { graph, config, GISDK_ID, services } = useContext(); + const { graph, context, GISDK_ID, services } = useContext(); + const { nodes, edges, components, pageLayout, layout } = context; + const config = { + nodes, + edges, + components, + pageLayout, + layout, + }; const imgURL = graph.toDataURL('image/jpeg', '#fff'); const [form] = Form.useForm(); diff --git a/packages/gi-assets-advance/src/components/ThemeSetting/Component.tsx b/packages/gi-assets-advance/src/components/ThemeSetting/Component.tsx index 69673e866..ae7564335 100644 --- a/packages/gi-assets-advance/src/components/ThemeSetting/Component.tsx +++ b/packages/gi-assets-advance/src/components/ThemeSetting/Component.tsx @@ -15,8 +15,8 @@ export interface Props { const ThemeSetting: React.FC = props => { const { serviceId } = props; - const { graph, GISDK_ID, config, services, schema, updateContext } = useContext(); - // const getThemeService = utils.getService(services, GET_THEMES); + const { GISDK_ID, updateContext } = useContext(); + const getThemeService = mockServices()[0].service; const removeThemeService = mockServices()[2].service; @@ -83,11 +83,8 @@ const ThemeSetting: React.FC = props => { } updateContext(draft => { - draft.config = { - ...draft.config, - nodes: nodesConfig, - edges: edgesConfig, - }; + draft.nodes = nodesConfig; + draft.edges = edgesConfig; }); updateState(draft => { diff --git a/packages/gi-assets-advance/src/components/ThemeSetting/index.md b/packages/gi-assets-advance/src/components/ThemeSetting/index.md new file mode 100644 index 000000000..ebf6add76 --- /dev/null +++ b/packages/gi-assets-advance/src/components/ThemeSetting/index.md @@ -0,0 +1,33 @@ +--- +title: 主题设置 +order: 0 +group: + title: 高级资产 + path: /advance +nav: + title: 资产包 + path: /assets + order: 1 +--- + +```jsx +import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.tsx'; + +const { registerMeta, info } = Asset; +const { id } = info; + +Assets.components[id] = Asset; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` diff --git a/packages/gi-assets-advance/src/components/Undo/index.md b/packages/gi-assets-advance/src/components/Undo/index.md deleted file mode 100755 index b536f0b90..000000000 --- a/packages/gi-assets-advance/src/components/Undo/index.md +++ /dev/null @@ -1,17 +0,0 @@ -## Undo 撤销 - -```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; -import * as React from 'react'; -import Asset from './index.tsx'; - -const App = props => { - return ( -
- -
- ); -}; - -export default App; -``` diff --git a/packages/gi-assets-algorithm/src/CommunityDetection/Component.tsx b/packages/gi-assets-algorithm/src/CommunityDetection/Component.tsx index 97549ffee..ac1cbd23c 100755 --- a/packages/gi-assets-algorithm/src/CommunityDetection/Component.tsx +++ b/packages/gi-assets-algorithm/src/CommunityDetection/Component.tsx @@ -34,7 +34,8 @@ export interface CommunityDetectionProps { const CommunityDetection: React.FunctionComponent = props => { const { controlledValues, onOpen } = props; - const { data, graph, updateHistory } = useContext(); + const { context, graph, updateHistory } = useContext(); + const { data } = context; const [communityAlgo, setCommunityAlgo] = useState(CommunityDetectionAlgorithm.KCore); const [resData, setResData] = useState(null); const [initData, setInitData] = useState({ diff --git a/packages/gi-assets-algorithm/src/CommunityDetection/index.md b/packages/gi-assets-algorithm/src/CommunityDetection/index.md index c3503a265..299c1665f 100755 --- a/packages/gi-assets-algorithm/src/CommunityDetection/index.md +++ b/packages/gi-assets-algorithm/src/CommunityDetection/index.md @@ -1,26 +1,30 @@ -## CommunityDetection 社区发现 +--- +title: 社区发现 +order: 0 +group: + title: 算法资产 + path: /algorithm +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -import graphData from '../../mockData/graphData.json'; -const services = [ - { - id: 'GI_SERVICE_INTIAL_GRAPH', - service: params => { - return new Promise(resolve => { - resolve(graphData); - }); - }, - }, -]; +const { registerMeta, info } = Asset; +const { id } = info; -const App = props => { +Assets.components[id] = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-algorithm/src/InfoDetection/Component.tsx b/packages/gi-assets-algorithm/src/InfoDetection/Component.tsx index 74ffab26d..0f3da1dd3 100644 --- a/packages/gi-assets-algorithm/src/InfoDetection/Component.tsx +++ b/packages/gi-assets-algorithm/src/InfoDetection/Component.tsx @@ -1,5 +1,5 @@ import { detectAllCycles } from '@antv/algorithm'; -import { INode } from '@antv/g6'; + import { useContext } from '@antv/gi-sdk'; import { NodeConfig } from '@antv/graphin'; import { List } from 'antd'; @@ -8,8 +8,11 @@ import $i18n from '../i18n'; import DegreeScatter from './DegreeScatter'; import './index.less'; +type INode = any; + const InfoDetection = () => { - const { data, graph } = useContext(); + const { context, graph } = useContext(); + const { data } = context; console.log('InfoDetection HAS GRAPH', graph && !graph.destroyed); const [isolateNodes, setIsolateNodes] = useState([]); @@ -22,8 +25,8 @@ const InfoDetection = () => { React.useEffect(() => { const isolateNodes = data.nodes.filter(item => { - const node = graph.findById(item.id) as INode; - return node.getEdges().length === 0; + const edges = graph.getRelatedEdgesData(item.id, 'both'); + return edges.length === 0; }); const circles = detectAllCycles(data, false); @@ -40,14 +43,13 @@ const InfoDetection = () => { const outDegreeCalc = new Map(); const totalDegreeCalc = new Map(); data.nodes.forEach(node => { - const nodeItem = graph.findById(node.id) as INode; - const edges = nodeItem.getEdges(); + const edges = graph.getRelatedEdgesData(node.id); // 总度数为节点相连的边的数量 const total = edges.length; let inD = 0; let outD = 0; edges.forEach(edge => { - const { source } = edge.getModel(); + const { source } = edge; if (source === node.id) { outD++; } else { @@ -68,16 +70,16 @@ const InfoDetection = () => { React.useEffect(() => { data.nodes.forEach(item => { - graph.findById(item.id) && graph.setItemState(item.id, 'active', false); + graph.getNodeData(item.id) && graph.setItemState(item.id, 'active', false); }); data.edges.forEach(item => { - graph.findById(item.id) && graph.setItemState(item.id, 'active', false); + graph.getEdgeData(item.id) && graph.setItemState(item.id, 'active', false); }); if (selectedIsolate) { isolateNodes.forEach(node => { - graph.findById(node.id) && graph.setItemState(node.id, 'active', true); + graph.getNodeData(node.id) && graph.setItemState(node.id, 'active', true); }); } @@ -89,12 +91,12 @@ const InfoDetection = () => { do { graph.setItemState(cur, 'active', true); const next = circle[cur].id; - const item = graph.findById(cur) as INode; - const edges = item.getEdges(); + + const edges = graph.getRelatedEdgesData(cur); edges.forEach(edge => { - const { source, target, id } = edge.getModel(); + const { source, target, id } = edge; if ((source === cur && target == next) || (source == next && target === cur)) { - graph.setItemState(edge.getID(), 'active', true); + graph.setItemState(id, 'active', true); } }); cur = next; diff --git a/packages/gi-assets-algorithm/src/InfoDetection/index.md b/packages/gi-assets-algorithm/src/InfoDetection/index.md new file mode 100644 index 000000000..c90697d3b --- /dev/null +++ b/packages/gi-assets-algorithm/src/InfoDetection/index.md @@ -0,0 +1,33 @@ +--- +title: 信息检测 +order: 0 +group: + title: 算法资产 + path: /algorithm +nav: + title: 资产包 + path: /assets + order: 1 +--- + +```jsx +import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.tsx'; + +const { registerMeta, info } = Asset; +const { id } = info; + +Assets.components[id] = Asset; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` diff --git a/packages/gi-assets-algorithm/src/NodeImportance/Component.tsx b/packages/gi-assets-algorithm/src/NodeImportance/Component.tsx index fdd4f1801..56efc042a 100644 --- a/packages/gi-assets-algorithm/src/NodeImportance/Component.tsx +++ b/packages/gi-assets-algorithm/src/NodeImportance/Component.tsx @@ -1,4 +1,3 @@ -//@ts-nocheck /** * author:shiwu.wyy@antgroup.com */ @@ -44,7 +43,8 @@ let degreeMap = undefined; const NodeImportance: React.FunctionComponent = props => { const { controlledValues, visible: controlledVisible = true, onOpen, onVisibleChange = () => {} } = props; - const { graph, data, updateHistory } = useContext(); + const { graph, context, updateHistory } = useContext(); + const { data } = context; const [visible, setVisible] = useState(false); const [currentAlgo, setCurrentAlgo] = useState('page-rank'); @@ -57,6 +57,161 @@ const NodeImportance: React.FunctionComponent = props => { const [form] = Form.useForm(); const { validateFields, resetFields } = form; + const onAnalyse = (algo = currentAlgo, params = {}) => { + if (!graph || graph.destroyed) { + handleUpdateHistory( + currentAlgo, + {}, + false, + $i18n.get({ + id: 'gi-assets-algorithm.src.NodeImportance.Component.TheGraphInstanceDoesNot', + dm: '图实例不存在', + }), + ); + return; + } + validateFields().then(values => { + let res: { + nodes: any[]; + edges: any[]; + } = { + nodes: [], + edges: [], + }; + const usingAlgo = algo; + switch (usingAlgo) { + case 'page-rank': { + const pageRankRes = pageRank(data); + Object.keys(pageRankRes).map(key => { + const node = graph.getNodeData(key); + if (node) { + res.nodes.push({ + id: key, + name: node.id, + value: pageRankRes[key], + originProperties: node, + }); + } + }); + break; + } + case 'degree': { + const { degreeType: propsDegreeType } = params; + const usingDegreeType = propsDegreeType || degreeType; + const degree = usingDegreeType.length === 2 ? 'total' : usingDegreeType[0] || 'in'; + degreeMap = getDegreeMap(data, degreeMap); + graph.getAllNodesData().forEach(node => { + if (degreeMap[node.id]) { + res.nodes.push({ + id: node.id, + name: node.id, + value: degree !== 'total' ? degreeMap[node.id][degree] : degreeMap[node.id].in + degreeMap[node.id].out, + originProperties: node, + }); + } + }); + break; + } + case 'node-property': { + const selectedNodeProperty = values['node-property.property']; + if (!selectedNodeProperty) { + return; + } + data.nodes.forEach(node => { + const propertyValue = node.data?.[selectedNodeProperty]; + const value = propertyValue === '' ? undefined : +propertyValue; + if (!isNaN(value) && graph.findById(node.id)) { + res.nodes.push({ + id: node.id, + name: node.id, + value, + originProperties: node, + }); + } + }); + break; + } + case 'edge-property': { + const selectedEdgeProperty = values['edge-property.property']; + const calcWay = values['edge-property.calcway']; + if (!selectedEdgeProperty) { + return; + } + const nodeValueMap = {}; + graph.getEdges().forEach(edgeItem => { + const edge = edgeItem.getModel(); + const propertyValue = edge.data?.[selectedEdgeProperty]; + if (propertyValue === undefined) return; + + if (calcWay === 'sort') { + const value = propertyValue === '' ? undefined : +propertyValue; + if (!isNaN(value)) { + nodeValueMap[edge.source] = (nodeValueMap[edge.source] || 0) + value; + nodeValueMap[edge.target] = (nodeValueMap[edge.target] || 0) + value; + res.edges.push({ + id: edge.id, + name: edge.id, + value, + originProperties: edge, + }); + } + } else { + if (!nodeValueMap[edge.source]?.includes?.(propertyValue)) { + if (!nodeValueMap[edge.source]) { + nodeValueMap[edge.source] = []; + } + nodeValueMap[edge.source].push(propertyValue); + } + if (!nodeValueMap[edge.target]?.includes?.(propertyValue)) { + if (!nodeValueMap[edge.target]) { + nodeValueMap[edge.target] = []; + } + nodeValueMap[edge.target].push(propertyValue); + } + res.edges.push({ + id: edge.id, + name: edge.id, + value: propertyValue, + originProperties: edge, + }); + } + }); + + data.nodes.forEach(node => { + if (!graph.findById(node.id)) { + return; + } + if (calcWay === 'sort') { + if (nodeValueMap[node.id] === undefined || !isNaN(nodeValueMap[node.id])) { + res.nodes.push({ + id: node.id, + name: node.id, + value: nodeValueMap[node.id] || 0, + originProperties: node, + }); + } + } else { + res.nodes.push({ + id: node.id, + name: node.id, + value: nodeValueMap[node.id]?.length || 0, + values: nodeValueMap[node.id], + originProperties: node, + }); + } + }); + break; + } + default: { + break; + } + } + showResult(res); + + handleUpdateHistory(currentAlgo, values, true, ''); + }); + setResultPaneKey('table'); + }; useEffect(() => { // 当前有配置节点重要性, 则在数据变换(扩展邻居、展开合并点)时, 重新映射 @@ -220,28 +375,20 @@ const NodeImportance: React.FunctionComponent = props => { const mappedNodeIds = []; const positive = res.mappingWay !== MappingWay.Negative; res.node.data.forEach(node => { - const nodeItem = graph.findById(node.id); - if (nodeItem) { - let size = positive - ? ((node.value - minNode.value) / nodeValueRange) * nodeVisualRange + NODE_VISUAL_RANGE[0] - : ((maxNode.value - node.value) / nodeValueRange) * nodeVisualRange + NODE_VISUAL_RANGE[0]; - // 所有的值都一样, 使所有节点使用默认大小 - if (minNode.value === maxNode.value) { - size = undefined; - } - - const { type: shapeType, style, size: modelSize } = nodeItem.getModel(); - //@TODO Graphin类型的节点，需要和G6的规范保持一致，后续技术做改造 - graph.updateItem(nodeItem, { - size, - oriSize: modelSize || style?.keyshape?.size || 30, - // 兼容 graphin-circle + let size = positive + ? ((node.value - minNode.value) / nodeValueRange) * nodeVisualRange + NODE_VISUAL_RANGE[0] + : ((maxNode.value - node.value) / nodeValueRange) * nodeVisualRange + NODE_VISUAL_RANGE[0]; + // 所有的值都一样, 使所有节点使用默认大小 + if (minNode.value === maxNode.value) { + size = undefined; + + graph.updateData(node.id, { style: { - keyshape: { - size, + keyShape: { + r: size / 2, }, - icon: { - size: size / 2, + iconShape: { + fontSize: size / 4, }, }, }); @@ -265,17 +412,17 @@ const NodeImportance: React.FunctionComponent = props => { const { size: modelSize, style = {} } = edgeItem.getModel(); //@TODO Graphin类型的节点，需要和G6的规范保持一致，后续技术做改造 - graph.updateItem(edgeItem, { - size: lineWidth, - oriSize: modelSize || style?.keyshape?.size || 1, - // 兼容 graphin-line 类型边 - style: { - keyshape: { - lineWidth: lineWidth, - ...(style.keyshape || {}), - }, - }, - }); + // graph.updateData('node',edgeItem, { + // size: lineWidth, + // oriSize: modelSize || style?.keyshape?.size || 1, + // // 兼容 graphin-line 类型边 + // style: { + // keyshape: { + // lineWidth: lineWidth, + // ...(style.keyshape || {}), + // }, + // }, + // }); } mappedEdgeIds.push(edge.id); } @@ -288,201 +435,42 @@ const NodeImportance: React.FunctionComponent = props => { graph.getNodes().forEach(node => { const { id, oriSize } = node.getModel(); if (oriSize && !mappedNodeIds?.includes(id)) { - graph.updateItem(node, { - size: oriSize || 30, - oriSize: undefined, - // 兼容 graphin-circle - style: { - keyshape: { - size: oriSize || 30, - }, - icon: { - size: oriSize / 2, - }, - }, - }); + // graph.updateItem(node, { + // size: oriSize || 30, + // oriSize: undefined, + // // 兼容 graphin-circle + // style: { + // keyshape: { + // size: oriSize || 30, + // }, + // icon: { + // size: oriSize / 2, + // }, + // }, + // }); } }); if (mappedEdgeIds) { graph.getEdges().forEach(edge => { const { id, oriSize, size, style = {} } = edge.getModel(); if ((size !== 1 || style?.keyshape?.size !== 1) && !mappedEdgeIds?.includes(id)) { - graph.updateItem(edge, { - size: oriSize || 1, - oriSize: undefined, - // 兼容 graphin-line - style: { - keyshape: { - lineWidth: oriSize || 1, - ...(style.keyshape || {}), - }, - }, - }); + // graph.updateItem(edge, { + // size: oriSize || 1, + // oriSize: undefined, + // // 兼容 graphin-line + // style: { + // keyshape: { + // lineWidth: oriSize || 1, + // ...(style.keyshape || {}), + // }, + // }, + // }); } }); } - graph.getEdges().forEach(edge => { - edge.refresh(); - }); - }; - - const onAnalyse = (algo, params = {}) => { - if (!graph || graph.destroyed) { - handleUpdateHistory( - currentAlgo, - {}, - false, - $i18n.get({ - id: 'gi-assets-algorithm.src.NodeImportance.Component.TheGraphInstanceDoesNot', - dm: '图实例不存在', - }), - ); - return; - } - validateFields().then(values => { - let res: { - nodes: any[]; - edges: any[]; - } = { - nodes: [], - edges: [], - }; - const usingAlgo = algo || currentAlgo; - switch (usingAlgo) { - case 'page-rank': { - const pageRankRes = pageRank(data); - Object.keys(pageRankRes).map(key => { - const node = graph.findById(key); - const model = node.getModel(); - if (node) { - res.nodes.push({ - id: key, - name: model.id, - value: pageRankRes[key], - originProperties: model, - }); - } - }); - break; - } - case 'degree': { - const { degreeType: propsDegreeType } = params; - const usingDegreeType = propsDegreeType || degreeType; - const degree = usingDegreeType.length === 2 ? 'total' : usingDegreeType[0] || 'in'; - degreeMap = getDegreeMap(data, degreeMap); - graph.getNodes().forEach(node => { - const model = node.getModel(); - if (degreeMap[model.id]) { - res.nodes.push({ - id: model.id, - name: model.id, - value: - degree !== 'total' ? degreeMap[model.id][degree] : degreeMap[model.id].in + degreeMap[model.id].out, - originProperties: model, - }); - } - }); - break; - } - case 'node-property': { - const selectedNodeProperty = values['node-property.property']; - if (!selectedNodeProperty) { - return; - } - data.nodes.forEach(node => { - const propertyValue = node.data?.[selectedNodeProperty]; - const value = propertyValue === '' ? undefined : +propertyValue; - if (!isNaN(value) && graph.findById(node.id)) { - res.nodes.push({ - id: node.id, - name: node.id, - value, - originProperties: node, - }); - } - }); - break; - } - case 'edge-property': { - const selectedEdgeProperty = values['edge-property.property']; - const calcWay = values['edge-property.calcway']; - if (!selectedEdgeProperty) { - return; - } - const nodeValueMap = {}; - graph.getEdges().forEach(edgeItem => { - const edge = edgeItem.getModel(); - const propertyValue = edge.data?.[selectedEdgeProperty]; - if (propertyValue === undefined) return; - - if (calcWay === 'sort') { - const value = propertyValue === '' ? undefined : +propertyValue; - if (!isNaN(value)) { - nodeValueMap[edge.source] = (nodeValueMap[edge.source] || 0) + value; - nodeValueMap[edge.target] = (nodeValueMap[edge.target] || 0) + value; - res.edges.push({ - id: edge.id, - name: edge.id, - value, - originProperties: edge, - }); - } - } else { - if (!nodeValueMap[edge.source]?.includes?.(propertyValue)) { - if (!nodeValueMap[edge.source]) { - nodeValueMap[edge.source] = []; - } - nodeValueMap[edge.source].push(propertyValue); - } - if (!nodeValueMap[edge.target]?.includes?.(propertyValue)) { - if (!nodeValueMap[edge.target]) { - nodeValueMap[edge.target] = []; - } - nodeValueMap[edge.target].push(propertyValue); - } - res.edges.push({ - id: edge.id, - name: edge.id, - value: propertyValue, - originProperties: edge, - }); - } - }); - - data.nodes.forEach(node => { - if (!graph.findById(node.id)) { - return; - } - if (calcWay === 'sort') { - if (nodeValueMap[node.id] === undefined || !isNaN(nodeValueMap[node.id])) { - res.nodes.push({ - id: node.id, - name: node.id, - value: nodeValueMap[node.id] || 0, - originProperties: node, - }); - } - } else { - res.nodes.push({ - id: node.id, - name: node.id, - value: nodeValueMap[node.id]?.length || 0, - values: nodeValueMap[node.id], - originProperties: node, - }); - } - }); - break; - } - default: { - break; - } - } - showResult(res); - - handleUpdateHistory(currentAlgo, values, true, ''); - }); - setResultPaneKey('table'); + // graph.getEdges().forEach(edge => { + // edge.refresh(); + // }); }; const handleUpdateHistory = (algorithm, formValues, success, msg) => { diff --git a/packages/gi-assets-algorithm/src/NodeImportance/index.md b/packages/gi-assets-algorithm/src/NodeImportance/index.md index 21cece171..72247dc86 100644 --- a/packages/gi-assets-algorithm/src/NodeImportance/index.md +++ b/packages/gi-assets-algorithm/src/NodeImportance/index.md @@ -1,53 +1,33 @@ -## NodeImportance +--- +title: 节点重要性 +order: 0 +group: + title: 算法资产 + path: /algorithm +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import React from 'react'; -import Asset from './index'; -import TestSDK, { Mock } from '@antv/gi-assets-testing'; +import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.tsx'; -const DEMO = () => { - const services = [ - { - id: 'GI_SERVICE_INTIAL_GRAPH', - service: () => { - return new Promise(resolve => { - resolve({ - nodes: [ - { id: 'node-1' }, - { id: 'node-2' }, - { id: 'node-3' }, - { id: 'node-4' }, - { id: 'node-5' }, - { id: 'node-6' }, - { id: 'node-7' }, - { id: 'node-8' }, - { id: 'node-9' }, - { id: 'node-10' }, - { id: 'node-11' }, - ], - edges: [ - { source: 'node-1', target: 'node-2' }, - { source: 'node-1', target: 'node-3' }, - { source: 'node-1', target: 'node-4' }, - { source: 'node-1', target: 'node-5' }, - { source: 'node-5', target: 'node-6' }, - { source: 'node-5', target: 'node-7' }, - { source: 'node-5', target: 'node-8' }, - { source: 'node-2', target: 'node-7' }, - { source: 'node-2', target: 'node-8' }, - { source: 'node-5', target: 'node-8' }, - { source: 'node-7', target: 'node-9' }, - { source: 'node-7', target: 'node-10' }, - { source: 'node-8', target: 'node-11' }, - ], - }); - }); - }, - }, - ]; +const { registerMeta, info } = Asset; +const { id } = info; - return ; +Assets.components[id] = Asset; + +const App = () => { + return ( +
+ +
+ ); }; -export default DEMO; +export default App; ``` diff --git a/packages/gi-assets-algorithm/src/NodesClustering/Component.tsx b/packages/gi-assets-algorithm/src/NodesClustering/Component.tsx index 1f77d5816..dca2628fe 100755 --- a/packages/gi-assets-algorithm/src/NodesClustering/Component.tsx +++ b/packages/gi-assets-algorithm/src/NodesClustering/Component.tsx @@ -30,8 +30,9 @@ export interface NodesClusteringProps { const NodesClustering: React.FunctionComponent = props => { const { controlledValues, onOpen } = props; - const context = useContext(); - const { data, graph, layout, updateContext, updateHistory } = context; + + const { graph, updateContext, updateHistory, context } = useContext(); + const { data, layout } = context; const [nodeClusteringAlgo, setNodeClusteringAlgo] = useState(NodesClusteringAlgorithm.KMeans); const [resData, setResData] = useState(null); const [initData, setInitData] = useState({ diff --git a/packages/gi-assets-algorithm/src/NodesClustering/index.md b/packages/gi-assets-algorithm/src/NodesClustering/index.md index baa3e096a..12b4d68b5 100755 --- a/packages/gi-assets-algorithm/src/NodesClustering/index.md +++ b/packages/gi-assets-algorithm/src/NodesClustering/index.md @@ -1,26 +1,30 @@ -## NodesClustering 节点聚类 +--- +title: 节点聚类 +order: 0 +group: + title: 算法资产 + path: /algorithm +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -import graphData from '../../mockData/graphData'; -const services = [ - { - id: 'GI_SERVICE_INTIAL_GRAPH', - service: params => { - return new Promise(resolve => { - resolve(graphData); - }); - }, - }, -]; +const { registerMeta, info } = Asset; +const { id } = info; -const App = props => { +Assets.components[id] = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-algorithm/src/NodesSimilarity/Component.tsx b/packages/gi-assets-algorithm/src/NodesSimilarity/Component.tsx index 78244f971..b59471c4b 100644 --- a/packages/gi-assets-algorithm/src/NodesSimilarity/Component.tsx +++ b/packages/gi-assets-algorithm/src/NodesSimilarity/Component.tsx @@ -30,7 +30,8 @@ interface ResData { } const CommunityDiscovery: React.FC = props => { const { controlledValues, style = {}, onOpen, nodeSelectionMode, nodeLabel } = props; - const { data, graph, updateHistory } = useContext(); + const { context, graph, updateHistory } = useContext(); + const { data } = context; const [communityAlgo, setCommunityAlgo] = useState(NodesSimilarityAlgorithm.nodesConsineSimilarity); const [initData, setInitData] = useState({ nodes: [], edges: [] }); diff --git a/packages/gi-assets-algorithm/src/NodesSimilarity/index.md b/packages/gi-assets-algorithm/src/NodesSimilarity/index.md index bbed0a9f7..08fa5a1e3 100755 --- a/packages/gi-assets-algorithm/src/NodesSimilarity/index.md +++ b/packages/gi-assets-algorithm/src/NodesSimilarity/index.md @@ -1,26 +1,30 @@ -## NodesSimilarity 节点相似性 +--- +title: 节点相似性 +order: 0 +group: + title: 算法资产 + path: /algorithm +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -import graphData from '../../mockData/graphData'; -const services = [ - { - id: 'GI_SERVICE_INTIAL_GRAPH', - service: params => { - return new Promise(resolve => { - resolve(graphData); - }); - }, - }, -]; +const { registerMeta, info } = Asset; +const { id } = info; -const App = props => { +Assets.components[id] = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-algorithm/src/PatternMatch/AddRelation.tsx b/packages/gi-assets-algorithm/src/PatternMatch/AddRelation.tsx index ec9b29684..c5bbd42fc 100644 --- a/packages/gi-assets-algorithm/src/PatternMatch/AddRelation.tsx +++ b/packages/gi-assets-algorithm/src/PatternMatch/AddRelation.tsx @@ -1,10 +1,12 @@ -import React from 'react'; import type { ReactNode } from 'react'; -import type { IItemBase, Edge } from '@antv/g6'; +import React from 'react'; + import Util from '../utils'; import { ADD_EDGE_ID } from '../utils/graph'; import { createUuid } from '../utils/string'; +type IItemBase = any; +type Edge = any; const { addEdge } = Util; type Props = { @@ -12,14 +14,14 @@ type Props = { name: ReactNode; graph?: any; options?: { - onOk?: (item: { source: string, target: string }) => void; + onOk?: (item: { source: string; target: string }) => void; }; }; class AddRelation extends React.PureComponent { static defaultProps = { options: { - onOk: () => { }, + onOk: () => {}, }, }; @@ -32,19 +34,19 @@ class AddRelation extends React.PureComponent { const model = this.dragging.get('model'); const { source, target } = model; onOk?.({ source, target }); - } + }; - dragEdge = (e) => { + dragEdge = e => { const { item: edge, canvasX, canvasY } = e; if (edge.getID() !== ADD_EDGE_ID) return; const graph = this.props.graph || this.context.graph; graph.updateItem(edge, { - target: { x: canvasX, y: canvasY } + target: { x: canvasX, y: canvasY }, }); this.dragging = edge; - } + }; - drop = (e) => { + drop = e => { if (!this.dragging) return; const { item } = e; if (!item || item.isCanvas?.() || item.getType?.() !== 'node') this.cancelAdding(); @@ -52,17 +54,17 @@ class AddRelation extends React.PureComponent { graph.updateItem(this.dragging, { id: `edge-${createUuid}`, target: item.getID(), - type: 'graphin-line' + type: 'graphin-line', }); this.onOk(); this.cancelAdding(); - } + }; cancelAdding = () => { const graph = this.props.graph || this.context.graph; this.dragging = null; graph.removeItem(ADD_EDGE_ID); - } + }; componentDidMount() { const graph = this.props.graph || this.context.graph; @@ -73,7 +75,7 @@ class AddRelation extends React.PureComponent { componentWillUnmount() { const graph = this.props.graph || this.context.graph; - graph.off('edge:drag', this.dragEdge) + graph.off('edge:drag', this.dragEdge); graph.off('drop', this.drop); graph.off('click', this.cancelAdding); } diff --git a/packages/gi-assets-algorithm/src/PatternMatch/Component.tsx b/packages/gi-assets-algorithm/src/PatternMatch/Component.tsx index e5adeaaa5..c425e8380 100644 --- a/packages/gi-assets-algorithm/src/PatternMatch/Component.tsx +++ b/packages/gi-assets-algorithm/src/PatternMatch/Component.tsx @@ -42,7 +42,8 @@ const PatternMatch: React.FC = ({ style, controlledValues, on exportPattern = content => common.createDownload(JSON.stringify(content), 'pattern.json'), exportButton, } = options; - const { graph, data, schemaData, updateHistory } = useContext(); + const { graph, context, updateHistory } = useContext(); + const { data, schemaData } = context; const [activeKey, setActiveKey] = useState('1'); const [editorVisible, setEditorVisible] = useState(false); @@ -58,7 +59,7 @@ const PatternMatch: React.FC = ({ style, controlledValues, on const [edgeTypes, setEdgeTypes] = useState([] as TypeInfo[]); const [schemaEdgeMap, setSchemaEdgeMap] = useState({}); const [schemaNodeMap, setSchemaNodeMap] = useState({}); - const graphModeCacheRef = useRef(graph?.getCurrentMode() || 'default'); + const graphModeCacheRef = useRef(graph?.getMode() || 'default'); const initialPatternInfoMap = useMemo( () => ({ @@ -107,7 +108,7 @@ const PatternMatch: React.FC = ({ style, controlledValues, on previousSize = { width: graph.getWidth(), height: graph.getHeight() }; const handleClickEdge = e => { - const mode = graph.getCurrentMode(); + const mode = graph.getMode(); if (mode !== PATTERN_MATCH_MODE) return; // 选中边时，自动选中边的端点 const edge = e.item; diff --git a/packages/gi-assets-algorithm/src/PatternMatch/index.md b/packages/gi-assets-algorithm/src/PatternMatch/index.md index 0e8575f77..e69de29bb 100644 --- a/packages/gi-assets-algorithm/src/PatternMatch/index.md +++ b/packages/gi-assets-algorithm/src/PatternMatch/index.md @@ -1,53 +0,0 @@ -## PatternMatch - -```jsx -import React from 'react'; -import Asset from './index'; -import TestSDK, { Mock } from '@antv/gi-assets-testing'; - -const DEMO = () => { - const services = [ - { - id: 'GI_SERVICE_INTIAL_GRAPH', - service: () => { - return new Promise(resolve => { - resolve({ - nodes: [ - { id: 'node-1' }, - { id: 'node-2' }, - { id: 'node-3' }, - { id: 'node-4' }, - { id: 'node-5' }, - { id: 'node-6' }, - { id: 'node-7' }, - { id: 'node-8' }, - { id: 'node-9' }, - { id: 'node-10' }, - { id: 'node-11' }, - ], - edges: [ - { source: 'node-1', target: 'node-2' }, - { source: 'node-1', target: 'node-3' }, - { source: 'node-1', target: 'node-4' }, - { source: 'node-1', target: 'node-5' }, - { source: 'node-5', target: 'node-6' }, - { source: 'node-5', target: 'node-7' }, - { source: 'node-5', target: 'node-8' }, - { source: 'node-2', target: 'node-7' }, - { source: 'node-2', target: 'node-8' }, - { source: 'node-5', target: 'node-8' }, - { source: 'node-7', target: 'node-9' }, - { source: 'node-7', target: 'node-10' }, - { source: 'node-8', target: 'node-11' }, - ], - }); - }); - }, - }, - ]; - - return ; -}; - -export default DEMO; -``` diff --git a/packages/gi-assets-algorithm/src/PatternMatch/patternEditor.tsx b/packages/gi-assets-algorithm/src/PatternMatch/patternEditor.tsx index d05f8696a..44a59b10d 100644 --- a/packages/gi-assets-algorithm/src/PatternMatch/patternEditor.tsx +++ b/packages/gi-assets-algorithm/src/PatternMatch/patternEditor.tsx @@ -1,8 +1,8 @@ import { ArrowLeftOutlined } from '@ant-design/icons'; import Algorithm from '@antv/algorithm'; import { uniqueId } from '@antv/algorithm/lib/util'; -import { IItemBase } from '@antv/g6'; -import { extra, IEdgeSchema, INodeSchema, useContext } from '@antv/gi-sdk'; + +import { extra, GIConfig, IEdgeSchema, INodeSchema, useContext } from '@antv/gi-sdk'; import { Behaviors, GraphinData, Utils as GraphinUtils } from '@antv/graphin'; import { Button, Col, Divider, Input, Layout, message, Row, Tabs } from 'antd'; import deepmerge from 'deepmerge'; @@ -31,7 +31,7 @@ type ItemBriefInfo = { type ContextMenu = { type: 'node' | 'edge'; visible: boolean; - item: IItemBase | null; + item: any | null; x: number; y: number; }; @@ -68,7 +68,9 @@ const PatternEditor: React.FC = ({ setVisible, savePattern, }) => { - const { schemaData, data, config } = useContext(); + const { context } = useContext(); + const { schemaData, data, nodes, edges } = context; + const config = { nodes, edges } as GIConfig; const graphRef = useRef(); const schemaGraphRef = useRef(); diff --git a/packages/gi-assets-algorithm/src/PatternMatch/patternPane.tsx b/packages/gi-assets-algorithm/src/PatternMatch/patternPane.tsx index a572634a0..59ced9e67 100644 --- a/packages/gi-assets-algorithm/src/PatternMatch/patternPane.tsx +++ b/packages/gi-assets-algorithm/src/PatternMatch/patternPane.tsx @@ -1,6 +1,6 @@ import { DownOutlined } from '@ant-design/icons'; import { IEdgeSchema, useContext } from '@antv/gi-sdk'; -import { Behaviors, GraphinData } from '@antv/graphin'; +import Graphin, { Behaviors, GraphinData } from '@antv/graphin'; import { Dropdown, Empty, Menu, Tooltip, Upload, message } from 'antd'; import React, { useEffect, useMemo, useRef } from 'react'; import $i18n from '../i18n'; @@ -21,7 +21,9 @@ interface Props { } const PatternPane: React.FC = ({ id, data, schemaEdgeMap, editPattern, extractPattern, importData }) => { - const { config } = useContext(); + const { context } = useContext(); + const { nodes, edges } = context; + const config = { nodes, edges }; const graphRef = useRef(); // 数据发生变化，fitView @@ -125,17 +127,16 @@ const PatternPane: React.FC = ({ id, data, schemaEdgeMap, editPattern, ex - {/* - - */} + > ) : ( = ({ visible, onClose, serviceId, st edgeKey: 'dataType', }); - const { graph, services, data, updateContext } = useContext(); + const { graph } = useContext(); + const { pattern } = state; const [form] = Form.useForm(); diff --git a/packages/gi-assets-algorithm/src/PatternMatchSimple/index.md b/packages/gi-assets-algorithm/src/PatternMatchSimple/index.md deleted file mode 100644 index ef25bdcd3..000000000 --- a/packages/gi-assets-algorithm/src/PatternMatchSimple/index.md +++ /dev/null @@ -1,36 +0,0 @@ -## PatternMatch 模式匹配 - -```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; -import * as React from 'react'; -import Asset from './index.tsx'; - -const services = [ - { - id: 'My_Service', - service: params => { - console.log(params); - return new Promise(resolve => { - resolve({ - nodes: [ - { - id: `node-${Math.random()}`, - }, - ], - edges: [], - }); - }); - }, - }, -]; - -const App = props => { - return ( -
- -
- ); -}; - -export default App; -``` diff --git a/packages/gi-assets-algorithm/src/utils/graph.ts b/packages/gi-assets-algorithm/src/utils/graph.ts index 13e05d148..f3dbf8e13 100644 --- a/packages/gi-assets-algorithm/src/utils/graph.ts +++ b/packages/gi-assets-algorithm/src/utils/graph.ts @@ -1,9 +1,9 @@ -import { Graph, Item } from '@antv/g6'; +import { IGraph } from '@antv/g6'; import { common } from '@antv/gi-sdk'; import type { GraphinData } from '@antv/graphin'; import { ext } from '@antv/matrix-util'; import { isNumber } from 'lodash'; - +type Item = any; const transform = ext.transform; const scaleNodes = (graphData: GraphinData, value: number = 600) => { @@ -92,7 +92,7 @@ export const focusNodeY = (graph, focusNode, height, focusTo: 'center' | 'top' | }; export const ADD_EDGE_ID = 'ADD_EDGE_ID'; -export const addEdge = (sourceId: string, graph: Graph) => { +export const addEdge = (sourceId: string, graph: IGraph) => { const source = graph.findById(sourceId); const hasAddEdge = graph.findById(ADD_EDGE_ID); // 过滤已有添加边的情况 @@ -134,7 +134,7 @@ const exportGraphData = (data, fileName = 'graph-data') => { return jsonText; }; -export function clearItemStates(graph: Graph, graphItem: Item, states: string[]) { +export function clearItemStates(graph: IGraph, graphItem: Item, states: string[]) { states.forEach(state => { if (graphItem?.hasState(state)) { graph.setItemState(graphItem, state, false); @@ -143,7 +143,7 @@ export function clearItemStates(graph: Graph, graphItem: Item, states: string[]) }); } -export const clearItemsStates = (graph: Graph, items: Item[], clearStates: string[]) => { +export const clearItemsStates = (graph: IGraph, items: Item[], clearStates: string[]) => { items.forEach(graphItem => { try { clearItemStates(graph, graphItem, clearStates); diff --git a/packages/gi-assets-basic/src/components/ActivateRelations/Component.tsx b/packages/gi-assets-basic/src/components/ActivateRelations/Component.tsx index a4f72f7c5..4cb811105 100644 --- a/packages/gi-assets-basic/src/components/ActivateRelations/Component.tsx +++ b/packages/gi-assets-basic/src/components/ActivateRelations/Component.tsx @@ -1,4 +1,4 @@ -import { useContext } from '@antv/gi-sdk'; +import { registerContext, useContext } from '@antv/gi-sdk'; import { Behaviors } from '@antv/graphin'; import React, { memo } from 'react'; @@ -6,6 +6,10 @@ import ActiveEdge from './ActiveEdge'; const { Hoverable, ActivateRelations } = Behaviors; +registerContext({ + persistentHighlight: false, +}); + export interface CanvasSettingProps { enableNodeHover: boolean; enableEdgeHover: boolean; @@ -28,7 +32,10 @@ const ActivateRelationsAsset: React.FunctionComponent = prop multiSelectEnabled, modifierKey, } = props; - const { persistentHighlight } = useContext(); + const { context } = useContext<{ + persistentHighlight: boolean; + }>(); + const { persistentHighlight } = context; return ( <> diff --git a/packages/gi-assets-basic/src/components/ActivateRelations/index.md b/packages/gi-assets-basic/src/components/ActivateRelations/index.md index 146798971..9a7bb7c5e 100644 --- a/packages/gi-assets-basic/src/components/ActivateRelations/index.md +++ b/packages/gi-assets-basic/src/components/ActivateRelations/index.md @@ -1,14 +1,29 @@ +--- +title: 元素高亮 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- + ## ActivateRelations 元素高亮 ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/CanvasSetting/Component.tsx b/packages/gi-assets-basic/src/components/CanvasSetting/Component.tsx index 0186b0afc..98fc3c73a 100644 --- a/packages/gi-assets-basic/src/components/CanvasSetting/Component.tsx +++ b/packages/gi-assets-basic/src/components/CanvasSetting/Component.tsx @@ -4,7 +4,7 @@ import React, { memo } from 'react'; import CanvasClick from './CanvasClick'; import CanvasDoubleClick from './CanvasDoubleClick'; -const { DragCanvas, ZoomCanvas, BrushSelect, DragNode } = Behaviors; +const { DragCanvas, ZoomCanvas, BrushSelect, DragNode, OrbitCanvas3D, ZoomCanvas3D } = Behaviors; export interface CanvasSettingProps { dragCanvas: { @@ -29,7 +29,8 @@ export interface CanvasSettingProps { const CanvasSetting: React.FunctionComponent = props => { const { styleCanvas, dragCanvas, zoomCanvas, clearStatus, doubleClick } = props; const { backgroundColor, backgroundImage } = styleCanvas; - const { GISDK_ID } = useContext(); + const { GISDK_ID, context } = useContext(); + const { renderer } = context; React.useLayoutEffect(() => { const parent_container = document.getElementById(`${GISDK_ID}-graphin-container`) as HTMLElement; @@ -39,6 +40,15 @@ const CanvasSetting: React.FunctionComponent = props => { container.style.backgroundImage = `url(${backgroundImage})`; } }, [backgroundColor, backgroundImage]); + + if (renderer === 'webgl-3d') { + return ( + <> + + + + ); + } return ( <> diff --git a/packages/gi-assets-basic/src/components/CanvasSetting/index.md b/packages/gi-assets-basic/src/components/CanvasSetting/index.md index 3e1dc0f96..a185b87b1 100644 --- a/packages/gi-assets-basic/src/components/CanvasSetting/index.md +++ b/packages/gi-assets-basic/src/components/CanvasSetting/index.md @@ -1,14 +1,29 @@ +--- +title: 画布设置 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- + ## CanvasSetting 画布设置 ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/ChartAnalysis/Charts/index.tsx b/packages/gi-assets-basic/src/components/ChartAnalysis/Charts/index.tsx index 64304b349..479f796c3 100644 --- a/packages/gi-assets-basic/src/components/ChartAnalysis/Charts/index.tsx +++ b/packages/gi-assets-basic/src/components/ChartAnalysis/Charts/index.tsx @@ -3,11 +3,11 @@ import { useContext, utils } from '@antv/gi-sdk'; import { Card, Select } from 'antd'; import React, { useMemo } from 'react'; import { useImmer } from 'use-immer'; +import $i18n from '../../../i18n'; +import '../index.less'; import ColumnChart from './ColumnChart'; import LineChart from './LineChart'; const { highlightEdgeIds } = utils; -import '../index.less'; -import $i18n from '../../../i18n'; const iconMap = { boolean: , @@ -48,8 +48,8 @@ interface IState { } const ChartCard: React.FC = props => { - const { schemaData, source, graph, updateContext, sourceDataMap, transform } = useContext(); - + const { graph, updateContext, context } = useContext(); + const { schemaData, source, sourceDataMap, transform } = context; const [state, updateState] = useImmer({ dataType: props.dataType || 'edges', xField: props.xField, diff --git a/packages/gi-assets-basic/src/components/ClearCanvas/Component.tsx b/packages/gi-assets-basic/src/components/ClearCanvas/Component.tsx index a8ee9567c..02fa2743c 100644 --- a/packages/gi-assets-basic/src/components/ClearCanvas/Component.tsx +++ b/packages/gi-assets-basic/src/components/ClearCanvas/Component.tsx @@ -10,6 +10,7 @@ export interface IProps { const ClearCanvas: React.FunctionComponent = props => { const { GIAC } = props; const { graph, updateContext } = useContext(); + const handleClick = React.useCallback(() => { graph.clear(); graph.fitCenter(); diff --git a/packages/gi-assets-basic/src/components/ClearCanvas/index.md b/packages/gi-assets-basic/src/components/ClearCanvas/index.md index 2d524f2b0..9270f2150 100644 --- a/packages/gi-assets-basic/src/components/ClearCanvas/index.md +++ b/packages/gi-assets-basic/src/components/ClearCanvas/index.md @@ -1,17 +1,38 @@ +--- +title: 清除画布 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- + ## ClearCanvas 清除画布 ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; export default App; ``` + +## Default Props + +```jsx | pure + +``` diff --git a/packages/gi-assets-basic/src/components/ContentContainer/Component.tsx b/packages/gi-assets-basic/src/components/ContentContainer/Component.tsx deleted file mode 100755 index 15db005d5..000000000 --- a/packages/gi-assets-basic/src/components/ContentContainer/Component.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { useContext } from '@antv/gi-sdk'; -import * as React from 'react'; - -export interface SideTabsProps { - GI_CONTAINER: string[]; - componentKeys: string[]; -} - -const ContentContainer: React.FunctionComponent = props => { - const { componentKeys } = props; - - const { assets, config } = useContext(); - - const sortedComponents = React.useMemo(() => { - return Object.values(assets.components || {}).filter(item => { - return componentKeys.indexOf(item.info.id) !== -1; - }); - }, [assets.components, componentKeys]); - - const configMap = React.useMemo(() => { - return Object.values(config.components || {}) - .filter(item => { - return componentKeys.indexOf(item.id) !== -1; - }) - .reduce((acc, curr) => { - acc[curr.id] = curr.props; - return acc; - }, {}); - }, [config.components, componentKeys]); - - return ( - <> - {sortedComponents.map(item => { - const { component: Component, info } = item; - const { id } = info; - const itemProps = configMap[id]; - // @ts-ignore - return ; - })} - - ); -}; - -export default ContentContainer; diff --git a/packages/gi-assets-basic/src/components/ContentContainer/info.ts b/packages/gi-assets-basic/src/components/ContentContainer/info.ts deleted file mode 100644 index fb7f7872c..000000000 --- a/packages/gi-assets-basic/src/components/ContentContainer/info.ts +++ /dev/null @@ -1,11 +0,0 @@ -import $i18n from '../../i18n'; /** index.md 中解析得到默认值，也可用户手动修改 */ -const info = { - id: 'ContentContainer', - name: $i18n.get({ id: 'basic.components.ContentContainer.info.ContentContainer', dm: '内容容器' }), - desc: $i18n.get({ id: 'basic.components.ContentContainer.info.CombinedContentContainer', dm: '组合内容容器' }), - icon: 'icon-sidebar', - cover: 'http://xxxx.jpg', - category: 'container-components', - type: 'GIAC_CONTENT', -}; -export default info; diff --git a/packages/gi-assets-basic/src/components/ContentContainer/registerMeta.ts b/packages/gi-assets-basic/src/components/ContentContainer/registerMeta.ts deleted file mode 100755 index 7779c9e1a..000000000 --- a/packages/gi-assets-basic/src/components/ContentContainer/registerMeta.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { extra } from '@antv/gi-sdk'; -import info from './info'; -import $i18n from '../../i18n'; -const { deepClone, GIAC_CONTENT_METAS } = extra; -const metas = deepClone(GIAC_CONTENT_METAS); -metas.GIAC_CONTENT.properties.GIAC_CONTENT.properties.title.default = info.name; -metas.GIAC_CONTENT.properties.GIAC_CONTENT.properties.icon.default = info.icon; -metas.GIAC_CONTENT.properties.GIAC_CONTENT.properties.containerWidth.default = '400px'; - -const registerMeta = ({ GIAC_CONTENT_ITEMS }) => { - return { - componentKeys: { - title: $i18n.get({ id: 'basic.components.ContentContainer.registerMeta.IntegratedComponents', dm: '集成组件' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - 'x-component-props': { - mode: 'multiple', - }, - enum: GIAC_CONTENT_ITEMS, - default: [], - }, - ...metas, - }; -}; - -export default registerMeta; diff --git a/packages/gi-assets-basic/src/components/ContextMenu/ContextMenu.tsx b/packages/gi-assets-basic/src/components/ContextMenu/ContextMenu.tsx index 58c0d0ff2..c4d9985c4 100644 --- a/packages/gi-assets-basic/src/components/ContextMenu/ContextMenu.tsx +++ b/packages/gi-assets-basic/src/components/ContextMenu/ContextMenu.tsx @@ -19,9 +19,11 @@ interface ContextMenuState { const ContextMenuContainer = props => { const { GI_CONTAINER } = props; - const { config, assets } = useContext(); - const { components } = useComponents(GI_CONTAINER, config, assets); - console.log(' components', components); + const { context, assets } = useContext(); + + const { components } = useComponents(GI_CONTAINER, context.components, assets); + + console.log('components', components); return ( //@ts-ignore setState({ item })}> diff --git a/packages/gi-assets-basic/src/components/ContextMenu/index.md b/packages/gi-assets-basic/src/components/ContextMenu/index.md index 977b42de5..dfd95508e 100644 --- a/packages/gi-assets-basic/src/components/ContextMenu/index.md +++ b/packages/gi-assets-basic/src/components/ContextMenu/index.md @@ -1,14 +1,39 @@ -## ContextMenu 右键菜单 +--- +title: 右键菜单 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/Copyright/index.md b/packages/gi-assets-basic/src/components/Copyright/index.md index 4770d3def..e7d21d343 100755 --- a/packages/gi-assets-basic/src/components/Copyright/index.md +++ b/packages/gi-assets-basic/src/components/Copyright/index.md @@ -1,14 +1,27 @@ -## Loading 数据加载动画 +--- +title: 数据加载动画 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/DownLoad/index.md b/packages/gi-assets-basic/src/components/DownLoad/index.md index 8eafe30f0..0f05bd0a6 100644 --- a/packages/gi-assets-basic/src/components/DownLoad/index.md +++ b/packages/gi-assets-basic/src/components/DownLoad/index.md @@ -1,14 +1,29 @@ -## DownLoad 图片下载 +--- +title: 图片下载 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- + +## ClearCanvas 清除画布 ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/EdgeMerge/Component.tsx b/packages/gi-assets-basic/src/components/EdgeMerge/Component.tsx index 8b3b03dfd..18fab7f6e 100644 --- a/packages/gi-assets-basic/src/components/EdgeMerge/Component.tsx +++ b/packages/gi-assets-basic/src/components/EdgeMerge/Component.tsx @@ -19,7 +19,8 @@ const EdgeMerge: React.FunctionComponent<{ GIAC: IGIAC }> = props => { mergedEdges: [], }); const { edgeMerged, edgeComputed, mergedEdges } = state; - const { graph, data } = useContext(); + const { graph, context } = useContext(); + const { data } = context; useEffect(() => { if (edgeMerged) { diff --git a/packages/gi-assets-basic/src/components/FilterPanel/Component.tsx b/packages/gi-assets-basic/src/components/FilterPanel/Component.tsx index e6e0a005e..0dc0c9794 100644 --- a/packages/gi-assets-basic/src/components/FilterPanel/Component.tsx +++ b/packages/gi-assets-basic/src/components/FilterPanel/Component.tsx @@ -1,5 +1,5 @@ import { FireTwoTone, PlusOutlined } from '@ant-design/icons'; -import { GIGraphData, useContext, utils } from '@antv/gi-sdk'; +import { GIGraphData, IGraphData, registerContext, useContext, utils } from '@antv/gi-sdk'; import { Button } from 'antd'; import { nanoid } from 'nanoid'; import React, { memo, useEffect, useMemo, useState } from 'react'; @@ -10,6 +10,13 @@ import './index.less'; import { HistogramOpt, IFilterCriteria } from './type'; import { filterGraphData, getChartData, highlightSubGraph } from './utils'; +registerContext({ + propertyGraphData: { + nodes: [], + edges: [], + }, +}); + const { isStyles } = utils; export interface FilterPanelProps { @@ -41,14 +48,19 @@ const FilterPanel: React.FunctionComponent = props => { node: { propertyName: string; entropy: number }[]; edge: { propertyName: string; entropy: number }[]; }>({ node: [], edge: [] }); - const { source, updateContext, updateHistory, transform, schemaData, graph, propertyGraphData, useIntl } = - useContext(); - const { formatMessage } = useIntl(); + const { updateContext, updateHistory, transform, graph, context } = useContext<{ + propertyGraphData: IGraphData; + }>(); + + const { schemaData, propertyGraphData, source } = context; + console.log('context....', context); useEffect(() => { if (!enableInfoDetect) return; setSorttedProperties({ + //@ts-ignore node: utils.getPropertyRanks(propertyGraphData, 'node'), + //@ts-ignore edge: utils.getPropertyRanks(propertyGraphData, 'edge'), }); }, [propertyGraphData, enableInfoDetect]); @@ -206,6 +218,7 @@ const FilterPanel: React.FunctionComponent = props => { const { propertyName } = item; const id = nanoid(); const chartData = getChartData(source, propertyName, itemType); + //@ts-ignore const sorttedValues = utils.getPropertyValueRanks(propertyGraphData, itemType, propertyName); let hasOutlier = false; const selectOptions = [...chartData.keys()].map(key => { diff --git a/packages/gi-assets-basic/src/components/FilterPanel/FilterSelection.tsx b/packages/gi-assets-basic/src/components/FilterPanel/FilterSelection.tsx index f264b46ec..86e2caf60 100644 --- a/packages/gi-assets-basic/src/components/FilterPanel/FilterSelection.tsx +++ b/packages/gi-assets-basic/src/components/FilterPanel/FilterSelection.tsx @@ -3,21 +3,21 @@ import { DeleteOutlined, FieldStringOutlined, FieldTimeOutlined, + FireTwoTone, NumberOutlined, PieChartOutlined, SelectOutlined, - FireTwoTone, } from '@ant-design/icons'; import { useContext, utils, type GIGraphData } from '@antv/gi-sdk'; -import { Button, Dropdown, Menu, Select, Row, Col } from 'antd'; +import { Button, Col, Dropdown, Menu, Row, Select } from 'antd'; import React, { useEffect, useState } from 'react'; +import $i18n from '../../i18n'; import { ColumnChart, HistogramChart, PieChart, WordCloudChart } from './Charts'; import HistogramOptions from './Charts/HistogramOptions'; import LineChart from './Charts/LineChart'; import './index.less'; import { IFilterCriteria } from './type'; import { getChartData, getHistogramData } from './utils'; -import $i18n from '../../i18n'; export const iconMap = { boolean: , @@ -48,7 +48,8 @@ interface FilterSelectionProps { } const FilterSelection: React.FC = props => { - const { propertyGraphData, useIntl } = useContext(); + const { context } = useContext<{ propertyGraphData: any }>(); + const { propertyGraphData } = context; const { filterCriteria, nodeProperties, @@ -60,8 +61,6 @@ const FilterSelection: React.FC = props => { sorttedProperties = { node: [], edge: [] }, } = props; - const { formatMessage } = useIntl(); - // 对于离散类型的数据支持切换图表类型 const [enableChangeChartType, setEnableChangeChartType] = useState(false); diff --git a/packages/gi-assets-basic/src/components/FilterPanel/index.md b/packages/gi-assets-basic/src/components/FilterPanel/index.md new file mode 100644 index 000000000..69d4ac9ea --- /dev/null +++ b/packages/gi-assets-basic/src/components/FilterPanel/index.md @@ -0,0 +1,34 @@ +--- +title: 筛选面板 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- + +## FilterPanel 筛选面板 + +```jsx +import * as React from 'react'; + +import { GISDK_TEST } from '@antv/gi-sdk'; + +import * as Assets from '@antv/gi-assets-basic'; +import Asset from './index.tsx'; + +const { registerMeta, info } = Asset; + +const App = () => { + return ( +
+ +
+ ); +}; + +export default App; +``` diff --git a/packages/gi-assets-basic/src/components/FitCenter/Component.tsx b/packages/gi-assets-basic/src/components/FitCenter/Component.tsx index 64a76bd1b..e119a3d8a 100644 --- a/packages/gi-assets-basic/src/components/FitCenter/Component.tsx +++ b/packages/gi-assets-basic/src/components/FitCenter/Component.tsx @@ -13,8 +13,9 @@ const FitCenter: React.FunctionComponent = props => { { + //@ts-ignore graph.fitCenter({ - 'duration':100, + duration: 100, }); }} /> diff --git a/packages/gi-assets-basic/src/components/FitCenter/index.md b/packages/gi-assets-basic/src/components/FitCenter/index.md index 3f9b8f843..4734875a6 100755 --- a/packages/gi-assets-basic/src/components/FitCenter/index.md +++ b/packages/gi-assets-basic/src/components/FitCenter/index.md @@ -1,14 +1,29 @@ +--- +title: 居中 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- + ## FitCenter 居中 ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/FitCenterView/index.md b/packages/gi-assets-basic/src/components/FitCenterView/index.md index 5e695ea9e..d688adc45 100755 --- a/packages/gi-assets-basic/src/components/FitCenterView/index.md +++ b/packages/gi-assets-basic/src/components/FitCenterView/index.md @@ -1,14 +1,29 @@ +--- +title: 自适应 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- + ## FitView 自适应 ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/FitView/index.md b/packages/gi-assets-basic/src/components/FitView/index.md index 5e695ea9e..d688adc45 100755 --- a/packages/gi-assets-basic/src/components/FitView/index.md +++ b/packages/gi-assets-basic/src/components/FitView/index.md @@ -1,14 +1,29 @@ +--- +title: 自适应 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- + ## FitView 自适应 ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx b/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx index 4248d4511..2128a1767 100644 --- a/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx +++ b/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx @@ -16,8 +16,9 @@ export interface IProps { const ForceSimulation: React.FunctionComponent = props => { const GIAC = deepClone(props.GIAC); - const { graph, layout } = useContext(); - const { type } = layout; + const { graph, context } = useContext(); + const { layout } = context; + const { type } = layout.props; const isForce = type === 'graphin-force' || type === 'force' || type === 'd3force'; const handleClick = () => { diff --git a/packages/gi-assets-basic/src/components/ForceSimulation/index.md b/packages/gi-assets-basic/src/components/ForceSimulation/index.md index 5e695ea9e..751252a41 100755 --- a/packages/gi-assets-basic/src/components/ForceSimulation/index.md +++ b/packages/gi-assets-basic/src/components/ForceSimulation/index.md @@ -1,14 +1,27 @@ -## FitView 自适应 +--- +title: 力导控制器 +order: 0 +group: + title: 基础资产 + path: /basic +nav: + title: 资产包 + path: /assets + order: 1 +--- ```jsx -import TestSDK, { Mock } from '@antv/gi-assets-testing'; import * as React from 'react'; +import { GISDK_TEST } from '@antv/gi-sdk'; +import * as Assets from '@antv/gi-assets-basic'; import Asset from './index.tsx'; -const App = props => { +const { registerMeta, info } = Asset; + +const App = () => { return (
- +
); }; diff --git a/packages/gi-assets-basic/src/components/GrailLayout/useComponents.tsx b/packages/gi-assets-basic/src/components/GrailLayout/useComponents.tsx index f87574f1f..51b268722 100644 --- a/packages/gi-assets-basic/src/components/GrailLayout/useComponents.tsx +++ b/packages/gi-assets-basic/src/components/GrailLayout/useComponents.tsx @@ -5,7 +5,8 @@ import $i18n from '../../i18n'; const useComponents = (GI_CONTAINER, ComponentCfgMap, assets, visible) => { return React.useMemo(() => { - const { HAS_GRAPH } = useContext(); + const { context } = useContext(); + const { HAS_GRAPH } = context; const assetKeys = [] as any[]; (GI_CONTAINER || []).forEach(item => { if (typeof item === 'string') assetKeys.push(item); diff --git a/packages/gi-assets-basic/src/components/GroupBar/Component.less b/packages/gi-assets-basic/src/components/GroupBar/Component.less deleted file mode 100644 index 9a40f1cf5..000000000 --- a/packages/gi-assets-basic/src/components/GroupBar/Component.less +++ /dev/null @@ -1,5 +0,0 @@ -.gi-group-bar{ - position:absolute; - box-sizing: border-box; - overflow-y: hidden; -} diff --git a/packages/gi-assets-basic/src/components/GroupBar/Component.tsx b/packages/gi-assets-basic/src/components/GroupBar/Component.tsx deleted file mode 100644 index a7e1069bf..000000000 --- a/packages/gi-assets-basic/src/components/GroupBar/Component.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import { useContext as useGraphInsightContext } from '@antv/gi-sdk'; -import ReactDOM from 'react-dom'; -import './Component.less'; -import GroupContainer from './GroupContainer'; -import type { Props as GroupContainerProps } from './GroupContainer'; -type Position = 'Top' | 'Bottom' | 'Left' | 'Right'; -export interface Props{ - background?: string; - suspend?: boolean; //是否悬浮模式，该模式下，操作栏悬浮在画布上方 - groups?: GroupContainerProps['items']; - position?: Position; - left?: number | string; - right?: number | string; - top?: number | string; - bottom?: number | string; - size?: string | number; - className?: string; - style?: React.CSSProperties; -} -let index = 1; -const OperationPanel: React.FC = (props) => { - const { groups = [],size = 60,position = 'Top',left,right,top,bottom,className: propClassName,style: propStyle,background,suspend } = props; - const context = useGraphInsightContext(); - const { GISDK_ID } = context; - const containerId = `${GISDK_ID}-container` - const element = document.getElementById(containerId) as HTMLDivElement; - const className = `gi-group-bar ${propClassName || ''}`; - const cssRef = React.useRef(null); - const [containerAttr] = React.useState(() => `with-group-bar-${index++}`); - React.useLayoutEffect(() => { - if(suspend){ - return; - } - let padding = `padding-top:${size}px`; - if(position === 'Bottom'){ - padding = `padding-bottom:${size}px`; - }else if(position === 'Left'){ - padding = `padding-left:${size}px`; - }else if(position === 'Right'){ - padding = `padding-right:${size}px`; - } - const css = ` - [${containerAttr}]{ - position:relative !important; - ${padding} - } - `; - element.setAttribute(containerAttr,''); - if(cssRef.current){ - cssRef.current.textContent = css; - } - return () => { - element.removeAttribute(containerAttr); - } - },[position,size,suspend]); - const style: React.CSSProperties = {}; - const isVer = position === 'Left' || position === 'Right'; - if(isVer){ - style.flexDirection = 'column'; - style.width = size; - style.top = top || 0; - style.bottom = bottom || 0; - if(position === 'Left'){ - style.left = 0; - }else{ - style.right = 0; - } - }else{ - style.flexDirection = 'row'; - style.height = size; - style.left = left || 0; - style.right = right || 0; - if(position === 'Top'){ - style.top = 0; - }else{ - style.bottom = 0; - } - } - const groupContainerStyle: React.CSSProperties = { - background - }; - if(isVer){ - groupContainerStyle.width = size; - }else{ - groupContainerStyle.height = size; - } - return ReactDOM.createPortal(
-