From 7b6fba68f04558d8ee77425be8cd38a077c364af Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Tue, 7 Nov 2023 00:38:17 +0800 Subject: [PATCH 01/22] feat: import valtio to optimize rendering performance --- packages/gi-sdk/.umirc.ts | 6 +- packages/gi-sdk/docs/index.tsx | 18 +- packages/gi-sdk/package.json | 1 + packages/gi-sdk/src/Canvas.tsx | 90 +++++ packages/gi-sdk/src/Components.tsx | 33 ++ packages/gi-sdk/src/GISDK.tsx | 182 +++------- packages/gi-sdk/src/Prepare.tsx | 39 ++ packages/gi-sdk/src/SizeSensor.tsx | 2 +- .../src/components/Initializer/Component.tsx | 176 --------- .../src/components/Initializer/index.tsx | 9 - .../gi-sdk/src/components/Initializer/info.ts | 17 - .../components/Initializer/registerMeta.ts | 62 ---- .../src/components/SimpleEdge/index.tsx | 23 -- .../components/SimpleEdge/registerMeta.tsx | 327 ----------------- .../components/SimpleEdge/registerShape.ts | 4 - .../SimpleEdge/registerTransform.ts | 237 ------------ .../src/components/SimpleNode/index.tsx | 23 -- .../components/SimpleNode/registerMeta.tsx | 342 ------------------ .../components/SimpleNode/registerShape.ts | 4 - .../SimpleNode/registerTransform.ts | 301 --------------- packages/gi-sdk/src/hooks/useComponents.tsx | 3 +- packages/gi-sdk/src/index.tsx | 9 +- packages/gi-sdk/src/process/index.ts | 14 +- .../gi-sdk/src/process/transDataByConfig.ts | 89 ----- packages/gi-sdk/src/useContext.tsx | 85 +++++ 25 files changed, 322 insertions(+), 1774 deletions(-) create mode 100644 packages/gi-sdk/src/Canvas.tsx create mode 100644 packages/gi-sdk/src/Components.tsx create mode 100644 packages/gi-sdk/src/Prepare.tsx delete mode 100644 packages/gi-sdk/src/components/Initializer/Component.tsx delete mode 100644 packages/gi-sdk/src/components/Initializer/index.tsx delete mode 100644 packages/gi-sdk/src/components/Initializer/info.ts delete mode 100644 packages/gi-sdk/src/components/Initializer/registerMeta.ts delete mode 100644 packages/gi-sdk/src/components/SimpleEdge/index.tsx delete mode 100644 packages/gi-sdk/src/components/SimpleEdge/registerMeta.tsx delete mode 100644 packages/gi-sdk/src/components/SimpleEdge/registerShape.ts delete mode 100644 packages/gi-sdk/src/components/SimpleEdge/registerTransform.ts delete mode 100644 packages/gi-sdk/src/components/SimpleNode/index.tsx delete mode 100644 packages/gi-sdk/src/components/SimpleNode/registerMeta.tsx delete mode 100644 packages/gi-sdk/src/components/SimpleNode/registerShape.ts delete mode 100644 packages/gi-sdk/src/components/SimpleNode/registerTransform.ts delete mode 100644 packages/gi-sdk/src/process/transDataByConfig.ts create mode 100644 packages/gi-sdk/src/useContext.tsx diff --git a/packages/gi-sdk/.umirc.ts b/packages/gi-sdk/.umirc.ts index a500937b7..51b3749e4 100644 --- a/packages/gi-sdk/.umirc.ts +++ b/packages/gi-sdk/.umirc.ts @@ -8,10 +8,10 @@ export default { }, links: [{ href: 'https://gw.alipayobjects.com/os/lib/antd/4.24.14/dist/antd.css', rel: 'stylesheet' }], scripts: [ - 'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.development.js', - 'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.development.js', + 'https://gw.alipayobjects.com/os/lib/react/18.2.0/umd/react.development.js', + 'https://gw.alipayobjects.com/os/lib/react-dom/18.2.0/umd/react-dom.development.js', // 'https://gw.alipayobjects.com/os/lib/antv/g6/5.0.0-beta.20/dist/g6.min.js', - "http://127.0.0.1:9001/g6.min.js", + 'http://127.0.0.1:9001/g6.min.js', 'https://gw.alipayobjects.com/os/lib/antd/4.24.14/dist/antd.min.js', ], }; diff --git a/packages/gi-sdk/docs/index.tsx b/packages/gi-sdk/docs/index.tsx index 7cac7eed9..05bb5cd8c 100644 --- a/packages/gi-sdk/docs/index.tsx +++ b/packages/gi-sdk/docs/index.tsx @@ -6,26 +6,40 @@ interface DEMOProps {} /** components */ const Counter = props => { - const { graph, updateContext } = useContext(); + const { context, updateContext, graph } = useContext(); const { title } = props; const nodes = graph.getAllNodesData().length; console.log('Counter render....', nodes); + const handleClick = () => { + updateContext(draft => { + draft.layout = { + id: 'ForceLayout', + props: { + type: 'grid', + }, + }; + }); + }; return (
+ {title}: {nodes}
); }; /** initializer */ + const Initializer = props => { const { services, updateContext } = useContext(); const { serviceId, schemaServiceId } = props; useEffect(() => { let initialService = services.find(s => s.id === serviceId) as GIService; let schemaService = services.find(s => s.id === schemaServiceId) as GIService; + Promise.all([schemaService.service(), initialService.service()]).then(([schemaData, graphData]) => { + console.log('Initializer', Initializer); updateContext(draft => { draft.data = graphData; draft.schemaData = schemaData; @@ -49,7 +63,7 @@ const SimpleNode: ElementAsset = { //@ts-ignore const { color, size, label } = nodeCfg.props; return node => { - console.log('node >>>>', node); + // console.log('node >>>>', node); const { data, id } = node; const { x, y, z } = data; const LABEL_KEY = label[0] || 'id'; diff --git a/packages/gi-sdk/package.json b/packages/gi-sdk/package.json index 348525543..57e090346 100644 --- a/packages/gi-sdk/package.json +++ b/packages/gi-sdk/package.json @@ -32,6 +32,7 @@ "postpublish": "tnpm sync @antv/gi-sdk" }, "dependencies": { + "valtio": "^1.12.0", "dumi": "^1.1.50", "@antv/graphin": "workspace:*", "@antv/g6": "5.0.0-beta.5", diff --git a/packages/gi-sdk/src/Canvas.tsx b/packages/gi-sdk/src/Canvas.tsx new file mode 100644 index 000000000..97e3ff80a --- /dev/null +++ b/packages/gi-sdk/src/Canvas.tsx @@ -0,0 +1,90 @@ +import type { GraphinData, IGraph } from '@antv/graphin'; +import Graphin from '@antv/graphin'; +import deepClone from 'lodash-es/cloneDeep'; +import React, { useMemo } from 'react'; +import { getMapperByCfg } from './process/getMapperByCfg'; +import type { GIEdgeConfig, GILayoutConfig, GINodeConfig } from './typing'; +import { registerContext, useContext } from './useContext'; + +registerContext({ + graph: null, + apis: {}, + HAS_GRAPH: false, + + data: { + nodes: [], + edges: [], + }, + schemaData: { + nodes: [], + edges: [], + }, + nodes: [], + edges: [], + layout: {}, +}); +interface CanvasProps {} + +export type ICanvas = { + graph: IGraph; + apis: any; + HAS_GRAPH: boolean; + data: GraphinData; + nodes: GINodeConfig[]; + edges: GIEdgeConfig[]; + layout: GILayoutConfig; +}; + +const Canvas: React.FunctionComponent = props => { + const { context, updateContext, assets, id, updateGraph } = useContext(); + const { data, nodes, edges, layout } = context; + const { elements: ElementAssets } = assets; + /** + * 响应 graph 的变化 + */ + const handleGraphInit = ({ graph, apis }) => { + //@ts-ignore + window.graph = graph; + updateGraph(graph); + updateContext(draft => { + // draft.graph = graph; + draft.apis = apis; + draft.HAS_GRAPH = true; + }); + }; + /** + * 响应 config.layout 变化，重新布局 + */ + const runtime_layout = useMemo(() => { + return deepClone(layout.props); + }, [layout]); + + /** + * 响应 config.nodes 变化，重新设置节点样式 + */ + //@ts-ignore + const nodeMapper = useMemo(() => getMapperByCfg(nodes, ElementAssets), [nodes]); + /** + * 响应 config.edges 变化，重新设置节点样式 + */ + //@ts-ignore + const edgeMapper = useMemo(() => getMapperByCfg(edges, ElementAssets), [edges]); + + console.log('render...canvas...'); + + return ( + + ); +}; + +export default Canvas; diff --git a/packages/gi-sdk/src/Components.tsx b/packages/gi-sdk/src/Components.tsx new file mode 100644 index 000000000..336319c50 --- /dev/null +++ b/packages/gi-sdk/src/Components.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { useMemo } from 'react'; +import SizeSensor from './SizeSensor'; +import { getComponents } from './hooks/useComponents'; +import { useContext } from './useContext'; + +interface ComponentsProps {} + +const Components: React.FunctionComponent = props => { + const { context, updateContext, assets, id } = useContext(); + const { components: componentsCfg = [], pageLayout, HAS_GRAPH, initialized } = context; + + /** + * 响应 config.components 变化，重新渲染组件 + */ + const { renderComponents, InitializerComponent, InitializerProps, GICC_LAYOUT_COMPONENT, GICC_LAYOUT_PROPS } = + useMemo(() => { + const a = getComponents(componentsCfg, pageLayout, assets.components); + + return a; + }, [componentsCfg, pageLayout]); + + return ( + + {props.children} + {HAS_GRAPH && } + {HAS_GRAPH && initialized && renderComponents} + {HAS_GRAPH && initialized && } + + ); +}; + +export default Components; diff --git a/packages/gi-sdk/src/GISDK.tsx b/packages/gi-sdk/src/GISDK.tsx index 837ff84f2..2cd15812b 100644 --- a/packages/gi-sdk/src/GISDK.tsx +++ b/packages/gi-sdk/src/GISDK.tsx @@ -1,157 +1,61 @@ -import Graphin, { GraphinContext } from '@antv/graphin'; -import React, { useEffect, useMemo } from 'react'; -import { IntlProvider, useIntl } from 'react-intl'; -import { useImmer } from 'use-immer'; -import SizeSensor from './SizeSensor'; -import { deepClone } from './components/const'; -import { getComponents } from './hooks/useComponents'; -import useConstant from './hooks/useConstant'; +import React, { useMemo } from 'react'; +import Canvas from './Canvas'; +import Components from './Components'; +import Prepare from './Prepare'; import './index.less'; -import { getMapperByCfg } from './process/getMapperByCfg'; -import type { GIGraphData, Props, State } from './typing'; -const GISDK = (props: Props) => { - const { children, assets, id, services, locales } = props; - const { components: ComponentAssets, elements: ElementAssets, layouts: LayoutAssets } = assets; - const { language = 'zh-CN', ...localeMessages } = locales || {}; - - // registerShapes(ElementAssets); - // registerLayouts(LayoutAssets); - - const [state, updateState] = useImmer({ - config: props.config, - layout: props.config.layout.props, - data: { nodes: [], edges: [] } as GIGraphData, - propertyGraphData: undefined, - schemaData: { - //会在初始化时候更新 - nodes: [], - edges: [], - }, - HAS_GRAPH: false, - source: { nodes: [], edges: [] } as GIGraphData, - - isLoading: false, - isContextReady: false, - initialized: false, - layoutCache: false, - largeGraphLimit: 2000, - largeGraphData: undefined, - //@ts-ignore - nodeMapper: null, - }); - - const { data, HAS_GRAPH, graph, config } = state; - /** 计算逻辑 */ - const { layout: layoutCfg, components: componentsCfg = [], nodes: nodesCfg, edges: edgesCfg, pageLayout } = config; - const constants = useConstant(id, state, updateState); - const { GISDK_ID } = constants; +import type { GIAssets, GIConfig, GIService } from './typing'; +import { IdContext } from './useContext'; +export type SDKProps = { /** - * 响应 props.config 变化 + * @description GISDK的ID，用于多实例管理，缺失会默认生成一个 */ - useEffect(() => { - console.log('gisdk props config change.....'); - updateState(draft => { - draft.config = props.config; - //@ts-ignore - draft.layout = props.config.layout.props; - }); - }, [props.config]); - + id?: string; /** - * 响应 graph 的变化 + * @description 配置信息 */ - const handleGraphInit = ({ graph, apis }) => { - //@ts-ignore - window.graph = graph; - updateState(draft => { - draft.graph = graph; - draft.apis = apis; - draft.HAS_GRAPH = true; - }); - }; - - /** - * 响应 config.components 变化，重新渲染组件 - */ - const { renderComponents, InitializerComponent, InitializerProps, GICC_LAYOUT_COMPONENT, GICC_LAYOUT_PROPS } = - useMemo(() => { - const a = getComponents(componentsCfg, pageLayout, ComponentAssets); - - return a; - }, [componentsCfg, pageLayout, HAS_GRAPH]); - + config: GIConfig; /** - * 响应 config.layout 变化，重新布局 + * @description 资产实例 */ - const layout = useMemo(() => { - console.log('layoutCfg change >>>>>', layoutCfg); - return deepClone(layoutCfg.props); - }, [layoutCfg]); - - /** - * 响应 config.nodes 变化，重新设置节点样式 - */ - const nodeMapper = useMemo(() => getMapperByCfg(nodesCfg, ElementAssets), [nodesCfg]); - /** - * 响应 config.edges 变化，重新设置节点样式 - */ - const edgeMapper = useMemo(() => getMapperByCfg(edgesCfg, ElementAssets), [edgesCfg]); + assets: GIAssets; + /** 注册的全局数据服务 */ + services: GIService[]; + style?: React.CSSProperties; + className?: string; + children?: React.ReactNode[]; +}; - /** - * 组装 context value - */ - const ContextValue = { - ...state, - ...constants, - layout, - GISDK_ID, - HAS_GRAPH, - graph, - nodeMapper, - edgeMapper, - updateContext: updateState, - /** props */ +const GISDK = (props: SDKProps) => { + const { assets, id, services } = props; + /** get gisdk id */ + const GISDK_ID = useMemo(() => { + if (!id) { + const defaultId = `${Math.random().toString(36).substr(2)}`; + console.warn(`⚠️: props.id 缺失，默认生成 GISDK_ID : ${defaultId} 用于多实例管理`); + return defaultId; + } + return id; + }, []); + + console.log('%c GISDK RENDER....', 'color:rgba(255,87,34,1)'); + const contextValue = { + id: GISDK_ID, assets, services, - locales, - useIntl, - language, }; - console.log( - '%c GISDK RENDER....', - 'color:rgba(255,87,34,1)', - 'HAS_GRAPH:', - HAS_GRAPH, - 'initialized:', - state.initialized, - ); return ( -
+
{/* @ts-ignore */} - - {/* @ts-ignore */} - - - - {HAS_GRAPH && } - {HAS_GRAPH && state.initialized && renderComponents} - {HAS_GRAPH && state.initialized && children} - {HAS_GRAPH && state.initialized && } - - - + + + + + + +
); }; + export default React.memo(GISDK); diff --git a/packages/gi-sdk/src/Prepare.tsx b/packages/gi-sdk/src/Prepare.tsx new file mode 100644 index 000000000..6678cac11 --- /dev/null +++ b/packages/gi-sdk/src/Prepare.tsx @@ -0,0 +1,39 @@ +import React, { useEffect } from 'react'; +import type { GIConfig } from './typing'; +import { registerContext, useContext } from './useContext'; + +interface PrepareProps { + config: GIConfig; + children: React.ReactNode; +} + +registerContext({ + pageLayout: {}, + initialized: false, + prepare: false, + components: [], +}); + +const Prepare: React.FunctionComponent = props => { + const { updateContext, context } = useContext(); + + const { prepare } = context; + const { config, children } = props; + + useEffect(() => { + updateContext(draft => { + draft.prepare = true; + draft.nodes = config.nodes; + draft.edges = config.edges; + draft.components = config.components; + draft.pageLayout = config.pageLayout; + draft.layout = config.layout; + }); + }, [config]); + + console.log('Prepare....'); + + return <>{prepare && children}; +}; + +export default Prepare; diff --git a/packages/gi-sdk/src/SizeSensor.tsx b/packages/gi-sdk/src/SizeSensor.tsx index b65bd81f5..1b07239b1 100644 --- a/packages/gi-sdk/src/SizeSensor.tsx +++ b/packages/gi-sdk/src/SizeSensor.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { bind } from 'size-sensor'; -import { useContext } from './context'; +import { useContext } from './useContext'; interface SizeSensorProps {} const SizeSensor: React.FunctionComponent = props => { diff --git a/packages/gi-sdk/src/components/Initializer/Component.tsx b/packages/gi-sdk/src/components/Initializer/Component.tsx deleted file mode 100644 index 40079b8fc..000000000 --- a/packages/gi-sdk/src/components/Initializer/Component.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import { notification } from 'antd'; -import React, { memo } from 'react'; -import $i18n from '../../i18n'; -import { GIConfig, useContext } from '../../index'; -import * as utils from '../../process'; - -const { isPosition, isStyles } = utils; - -export type GIService = any; -export interface IProps { - serviceId: string; - schemaServiceId: string; - aggregate: boolean; - transByFieldMapping: boolean; -} - -const Initializer: React.FunctionComponent = props => { - const context = useContext(); - const { serviceId, schemaServiceId, aggregate, transByFieldMapping } = props; - const { services, updateContext, transform, largeGraphLimit } = context; - - React.useEffect(() => { - // const { service: initialService } = services.find(s => s.id === serviceId) as GIService; - // const { service: schemaService } = (services.find(s => s.id === schemaServiceId) as GIService) || { - // service: () => Promise.resolve(null), - // }; - - let initialService = services.find(s => s.id === serviceId) as GIService; - let schemaService = services.find(s => s.id === schemaServiceId) as GIService; - - if (!initialService) { - notification.error({ - message: $i18n.get({ id: 'basic.components.Initializer.Component.CanvasRenderingFailed', dm: '画布渲染失败' }), - description: $i18n.get( - { - id: 'basic.components.Initializer.Component.TheServiceidServiceIsMissing', - dm: '缺少 {serviceId} 服务，请检查相关资产是否加载成功', - }, - { serviceId: serviceId }, - ), - }); - initialService = { - service: () => { - return new Promise(resolve => { - resolve({ - nodes: [], - edges: [], - }); - }); - }, - }; - } - if (!schemaService) { - notification.error({ - message: $i18n.get({ - id: 'basic.components.Initializer.Component.FailedToObtainGraphModel', - dm: '图模型获取失败', - }), - description: $i18n.get( - { - id: 'basic.components.Initializer.Component.TheServiceidServiceIsMissing', - dm: '缺少 {serviceId} 服务，请检查相关资产是否加载成功', - }, - { serviceId: serviceId }, - ), - }); - schemaService = { - service: () => { - return new Promise(resolve => { - resolve({ - nodes: [], - edges: [], - }); - }); - }, - }; - } - updateContext(draft => { - draft.isLoading = true; - }); - - Promise.all([schemaService.service(), initialService.service()]).then( - ([schemaData, graphData = { nodes: [], edges: [] }]) => { - let schema = schemaData; - let data = graphData; - - if (transByFieldMapping) { - const { schemaData: _schemaData, data: _data } = utils.transDataBySchemaMeta(graphData, schemaData); - schema = _schemaData; - data = _data; - } - const { nodes } = data; - - if (nodes.length > largeGraphLimit) { - notification.warn({ - message: $i18n.get({ - id: 'basic.components.Initializer.Component.TheAmountOfDataLoaded', - dm: '加载的数据量过大', - }), - description: $i18n.get({ - id: 'basic.components.Initializer.Component.WeRecommendThatYouAggregate', - dm: '建议聚合数据，默认切换到网格布局。您也可以在「资产中心」中加载「大图组件」启用 3D 渲染', - }), - }); - } - updateContext(draft => { - /** 判断是否保存样式和位置 */ - const position = isPosition(nodes); - const style = isStyles(nodes); - /** 取消布局缓存 */ - draft.initialized = true; - draft.layoutCache = false; - - /** 如果接口有 schema，就更新 schemaData */ - if (schema) { - draft.schemaData = schema as any; - } - /** 只有当 config 中没有 nodes 和 edges 的时候，才会用 schema 生成一个默认样式 */ - - if (schema && (draft.config.nodes?.length === 0 || draft.config.edges?.length === 0)) { - const schemaStyle = utils.generatorStyleConfigBySchema(schema) as GIConfig; - draft.config.nodes = schemaStyle.nodes; - draft.config.edges = schemaStyle.edges; - } - /** 如果有布局信息 */ - if (position) { - draft.layout.type = 'preset'; - } - /** 如果有样式数据 */ - if (style) { - draft.data = data; - draft.source = data; - draft.isLoading = false; - return; - } - /** 如果是大图模式 */ - if (nodes.length > largeGraphLimit) { - const newData = transform(data, true); - draft.largeGraphMode = true; - draft.largeGraphData = newData; - draft.source = newData; - draft.data = { - nodes: [], - edges: [], - }; - draft.isLoading = false; - return; - } - /** 如果是聚合模式 */ - if (aggregate) { - const newData = transform(data, true); - draft.rawData = { ...data }; - draft.source = newData; - draft.largeGraphMode = false; - draft.largeGraphData = undefined; - draft.data = transform(utils.aggregateEdges(data), true); - draft.isLoading = false; - return; - } - /** 默认是普通模式 */ - const newData = transform(data, true); - draft.rawData = { ...data }; - draft.data = newData; - draft.source = newData; - draft.largeGraphMode = false; - draft.largeGraphData = undefined; - draft.isLoading = false; - }); - }, - ); - }, [largeGraphLimit, aggregate, transByFieldMapping]); - - return null; -}; - -export default memo(Initializer); diff --git a/packages/gi-sdk/src/components/Initializer/index.tsx b/packages/gi-sdk/src/components/Initializer/index.tsx deleted file mode 100644 index 390cc7dca..000000000 --- a/packages/gi-sdk/src/components/Initializer/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Component from './Component'; -import info from './info'; -import registerMeta from './registerMeta'; - -export default { - info, - component: Component, - registerMeta, -}; diff --git a/packages/gi-sdk/src/components/Initializer/info.ts b/packages/gi-sdk/src/components/Initializer/info.ts deleted file mode 100644 index fb3d565b9..000000000 --- a/packages/gi-sdk/src/components/Initializer/info.ts +++ /dev/null @@ -1,17 +0,0 @@ -import $i18n from '../../i18n'; -const info = { - id: 'Initializer', - name: $i18n.get({ id: 'basic.components.Initializer.info.Initializer', dm: '初始化器' }), - desc: $i18n.get({ - id: 'basic.components.Initializer.info.RequiredInitializeQueryGraphData', - dm: '必选！初始化查询图数据与图模型', - }), - // icon: 'icon-export', - cover: 'http://xxxx.jpg', - category: 'system-interaction', - type: 'INITIALIZER', - // 申明需要实现的服务名 - services: ['GI_SERVICE_INTIAL_GRAPH', 'GI_SERVICE_SCHEMA'], - docs: 'https://www.yuque.com/antv/gi/eedyuy', -}; -export default info; diff --git a/packages/gi-sdk/src/components/Initializer/registerMeta.ts b/packages/gi-sdk/src/components/Initializer/registerMeta.ts deleted file mode 100644 index fce82b19b..000000000 --- a/packages/gi-sdk/src/components/Initializer/registerMeta.ts +++ /dev/null @@ -1,62 +0,0 @@ -import $i18n from '../../i18n'; -import { utils } from '../../index'; -import info from './info'; - -export default context => { - const { services, engineId } = context; - const { options: initializerServiceOptions, defaultValue: defaultInitializerService } = - utils.getServiceOptionsByEngineId(services, info.services[0], engineId); - const { options: schemaServiceOptions, defaultValue: defaultschemaService } = utils.getServiceOptionsByEngineId( - services, - info.services[1], - engineId, - ); - return { - serviceId: { - title: $i18n.get({ id: 'basic.components.Initializer.registerMeta.InitializeAQuery', dm: '初始化查询' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - 'x-component-props': { - options: initializerServiceOptions, - }, - default: defaultInitializerService, - }, - schemaServiceId: { - title: $i18n.get({ id: 'basic.components.Initializer.registerMeta.QueryGraphModel', dm: '查询图模型' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - 'x-component-props': { - options: schemaServiceOptions, - }, - default: defaultschemaService, - }, - - // 注意⚠️：GI_INITIALIZER 是必须的属性字段，千万不要漏掉 - GI_INITIALIZER: { - title: $i18n.get({ id: 'basic.components.Initializer.registerMeta.DefaultStartup', dm: '默认启动' }), - type: 'boolean', - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - 'x-component-props': { - disabled: true, - }, - default: true, - }, - aggregate: { - title: $i18n.get({ id: 'basic.components.Initializer.registerMeta.SummaryEdge', dm: '汇总边' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: false, - }, - transByFieldMapping: { - title: $i18n.get({ id: 'basic.components.Initializer.registerMeta.EnableFieldMapping', dm: '开启字段映射' }), - type: 'boolean', - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: false, - }, - }; -}; diff --git a/packages/gi-sdk/src/components/SimpleEdge/index.tsx b/packages/gi-sdk/src/components/SimpleEdge/index.tsx deleted file mode 100644 index d409ccd47..000000000 --- a/packages/gi-sdk/src/components/SimpleEdge/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import registerMeta from './registerMeta'; -import registerTransform from './registerTransform'; -import $i18n from '../../i18n'; -const registerShape = Graphin => { - // graphinEdge 已经在内部注册成功 -}; -/** index.md 中解析得到默认值，也可用户手动修改 */ -const info = { - id: 'SimpleEdge', - category: 'edge', - name: $i18n.get({ id: 'basic.elements.SimpleEdge.OfficialSide', dm: '官方边' }), - desc: 'SimpleEdge', - cover: 'http://xxxx.jpg', - type: 'EDGE', - docs: 'https://www.yuque.com/antv/gi/ce260nnvfvagqszi', -}; - -export default { - info, - registerShape, - registerMeta, - registerTransform, -}; diff --git a/packages/gi-sdk/src/components/SimpleEdge/registerMeta.tsx b/packages/gi-sdk/src/components/SimpleEdge/registerMeta.tsx deleted file mode 100644 index 370c17dd7..000000000 --- a/packages/gi-sdk/src/components/SimpleEdge/registerMeta.tsx +++ /dev/null @@ -1,327 +0,0 @@ -import $i18n from '../../i18n'; -import { defaultConfig } from './registerTransform'; -const { advanced, color, size } = defaultConfig; -const { keyshape, label, animate } = advanced; - -const registerMeta = context => { - const { keys, schemaData } = context; - - const schema = { - type: 'object', - properties: { - color: { - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Color', dm: '颜色' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'ColorInput', - default: color, - }, - size: { - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Size', dm: '大小' }), - type: 'number', - 'x-decorator': 'FormItem', - 'x-component': 'NumberPicker', - default: size, - }, - label: { - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Text', dm: '文本' }), - type: 'string', - // enum: keys.map(c => { - // return { - // label: `${c.id} (${c.type})`, - // value: c.id, - // }; - // }), - 'x-decorator': 'FormItem', - 'x-component': 'GroupSelect', - 'x-component-props': { - mode: 'multiple', - schemaData: schemaData.edges, - }, - }, - advancedPanel: { - type: 'void', - 'x-decorator': 'FormItem', - 'x-component': 'FormCollapse', - 'x-component-props': { - className: 'gi-assets-elements-advance-panel', - ghost: true, - }, - properties: { - advanced: { - type: 'object', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.AdvancedConfiguration', dm: '高级配置' }), - key: 'advanced-panel', - }, - properties: { - panel: { - type: 'void', - 'x-decorator': 'FormItem', - 'x-component': 'FormCollapse', - 'x-component-props': { - className: 'gi-assets-elements-panel', - style: {}, - ghost: true, - }, - properties: { - keyshape: { - type: 'object', - 'x-decorator': 'FormItem', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Shape', dm: '形状' }), - key: 'icon-panel', - }, - properties: { - hasArrow: { - type: 'boolean', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Arrow', dm: '箭头' }), - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: true, - }, - customPoly: { - type: 'boolean', - title: $i18n.get({ - id: 'basic.elements.SimpleEdge.registerMeta.DefineRadians', - dm: '定义弧度', - }), - default: keyshape.customPoly, - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - 'x-reactions': [ - { - target: 'advanced.keyshape.poly', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.icon.fill', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.icon.size', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - ], - }, - poly: { - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Radian', dm: '弧度' }), - type: 'number', - 'x-decorator': 'FormItem', - 'x-component': 'NumberPicker', - default: keyshape.poly, - }, - - lineDash: { - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.DottedLine', dm: '虚线' }), - type: 'array', - 'x-decorator': 'FormItem', - 'x-component': 'Offset', - 'x-component-props': { - min: -100, - max: 100, - }, - default: keyshape.lineDash, - }, - opacity: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Transparency', dm: '透明度' }), - 'x-decorator': 'FormItem', - 'x-component': 'NumberPicker', - default: keyshape.opacity, - }, - }, - }, - label: { - type: 'object', - 'x-decorator': 'FormItem', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Label', dm: '标签' }), - key: 'keyshape-panel', - }, - properties: { - visible: { - type: 'boolean', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Visible', dm: '显隐' }), - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: label.visible, - }, - fontSize: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Size', dm: '大小' }), - 'x-decorator': 'FormItem', - 'x-component': 'NumberPicker', - default: label.fontSize, - }, - offset: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Offset', dm: '偏移' }), - 'x-decorator': 'FormItem', - 'x-component': 'Offset', - 'x-component-props': { - min: -100, - max: 100, - }, - default: label.offset, - }, - fill: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Color', dm: '颜色' }), - 'x-decorator': 'FormItem', - 'x-component': 'ColorInput', - default: label.fill, - }, - backgroundEnable: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Background', dm: '背景' }), - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: label.backgroundEnable, - }, - backgroundFill: { - type: 'string', - title: $i18n.get({ - id: 'basic.elements.SimpleEdge.registerMeta.BackgroundColor', - dm: '背景色', - }), - 'x-decorator': 'FormItem', - 'x-component': 'ColorInput', - default: label.backgroundFill, - }, - backgroundStroke: { - type: 'string', - title: $i18n.get({ - id: 'basic.elements.SimpleEdge.registerMeta.BackgroundStroke', - dm: '背景描边', - }), - 'x-decorator': 'FormItem', - 'x-component': 'ColorInput', - default: label.backgroundStroke, - }, - }, - }, - animate: { - type: 'object', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Animation', dm: '动画' }), - key: 'aniamte-panel', - }, - properties: { - visible: { - type: 'boolean', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Switch', dm: '开关' }), - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: animate.visible, - 'x-reactions': [ - { - target: 'advanced.animate.type', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.animate.dotColor', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.animate.repeat', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.animate.duration', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - ], - }, - type: { - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Type', dm: '类型' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - enum: [ - { - label: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Ball', dm: '圆球' }), - value: 'circle-running', - }, - { - label: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.DottedLine', dm: '虚线' }), - value: 'line-dash', - }, - { - label: $i18n.get({ - id: 'basic.elements.SimpleEdge.registerMeta.GradualLength', - dm: '渐长', - }), - value: 'line-growth', - }, - ], - - default: animate.type, - }, - dotColor: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.BallColor', dm: '圆球颜色' }), - 'x-decorator': 'FormItem', - 'x-component': 'ColorInput', - default: animate.dotColor, - }, - repeat: { - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Repeat', dm: '重复' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: animate.repeat, - }, - duration: { - title: $i18n.get({ id: 'basic.elements.SimpleEdge.registerMeta.Duration', dm: '时长' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'NumberPicker', - default: animate.duration, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }; - - return schema; -}; -export default registerMeta; diff --git a/packages/gi-sdk/src/components/SimpleEdge/registerShape.ts b/packages/gi-sdk/src/components/SimpleEdge/registerShape.ts deleted file mode 100644 index 0ffc499c1..000000000 --- a/packages/gi-sdk/src/components/SimpleEdge/registerShape.ts +++ /dev/null @@ -1,4 +0,0 @@ -const registerShape = Graphin => { - // graphinEdge 已经注册成功 -}; -export default registerShape; diff --git a/packages/gi-sdk/src/components/SimpleEdge/registerTransform.ts b/packages/gi-sdk/src/components/SimpleEdge/registerTransform.ts deleted file mode 100644 index 1b4cf8667..000000000 --- a/packages/gi-sdk/src/components/SimpleEdge/registerTransform.ts +++ /dev/null @@ -1,237 +0,0 @@ -import { Utils } from '@antv/graphin'; -import type { GIEdgeConfig } from '../../index'; - -const defaultEdgeTheme = { - primaryEdgeColor: '#ddd', - edgeSize: 1, - mode: 'light' as 'light' | 'dark', -}; - -const defaultEdgeStyles = Utils.getEdgeStyleByTheme(defaultEdgeTheme); - -const { style } = defaultEdgeStyles; -const { keyshape, label } = style; - -export const defaultConfig = { - size: defaultEdgeTheme.edgeSize, - color: defaultEdgeTheme.primaryEdgeColor, - label: [], - advanced: { - keyshape: { - customPoly: false, - poly: 0, - lineDash: [0, 0], - // lineAppendWidth: keyshape.lineWidth, - opacity: keyshape.strokeOpacity, - hasArrow: true, - }, - label: { - visible: true, - fontSize: label.fontSize, - offset: [0, 0], - fill: label.fill, - backgroundEnable: true, - backgroundFill: '#fff', - backgroundStroke: '#fff', - backgroundOpaciy: 1, - opacity: 1, - }, - animate: { - visible: false, - type: 'circle-running', - dotColor: 'red', - repeat: true, - duration: 3000, - }, - }, - status: { - minZoom: { - label: { - opacity: 0, - }, - 'label-background': { - opacity: 0, - }, - }, - }, -}; - -export type EdgeConfig = typeof defaultConfig; - -/** 数据映射函数 需要根据配置自动生成*/ -const transform = (config: GIEdgeConfig, reset?: boolean) => { - try { - const { color: color_CFG, size: size_CFG, label: LABEL_KEYS, advanced, status: defaultStatus } = config.props; - - const { keyshape: keyshape_CFG } = advanced; - - const transEdge = (_edge, index) => { - console.log('transEdge.....'); - const edge = _edge.data; - // properties - const { source, target } = edge; - const id = edge.id || `${source}-${target}-${index}`; - const data = edge.data || edge.properties || edge; - const isLoop = edge.source === edge.target; //edge.style && edge.style.keyshape && edge.style.keyshape.type === 'loop'; - const isPoly = edge.isMultiple; - let endArrow = {}; - const { customPoly, hasArrow } = keyshape_CFG; - if (!hasArrow) { - //@ts-ignore - endArrow = { - endArrow: { - path: '', - }, - }; - } - const shape: any = {}; - if (isLoop) { - shape.type = 'loop'; - shape.loop = { ...edge.style?.keyshape.loop }; - } - if (isPoly) { - shape.type = 'poly'; - shape.poly = { ...edge.style?.keyshape.poly }; - } - if (!isPoly && !isLoop) { - //只有直线的时候才支持设置弧度，多边的默认是系统分配的弧度 - shape.type = 'poly'; - shape.poly = { - distance: advanced.keyshape.poly, - }; - } - if (customPoly) { - //如果用户要强行自定义弧度，那就随他去吧 - shape.poly = { - distance: advanced.keyshape.poly, - }; - } - - /** LABEL */ - // const LABEL_VALUE = LABEL_KEYS.map(l => data[l]).join('_'); - - const LABEL_VALUE = LABEL_KEYS.map((d: string) => { - /** - * 兼容性处理：原先的label 逻辑是 ${type}.${properpertiesKey} - * 现在改为 ${type}^^${properpertiesKey} - */ - const newLabelArray = d.split('^^'); - const oldLabelArray = d.split('.'); - let [edgeType, propObjKey, propName] = newLabelArray; - const isOld = newLabelArray.length === 1 && newLabelArray[0].split('.').length > 1; - if (isOld) { - edgeType = oldLabelArray[0]; - propObjKey = oldLabelArray[1]; - propName = oldLabelArray[2]; - } - - // const [edgeType, propObjKey, propName] = d.split('^^'); - - // 只有当 nodeType 匹配时才取对应的属性值 - if (edge.edgeType || 'UNKNOW' === edgeType) { - // propName 存在，则 propObjKey 值一定为 properties - if (propName) { - return data[propObjKey][propName]; - } - /** 如果有汇总边，则强制使用汇总边的文本展示 */ - const { aggregate } = data; - if (aggregate) { - const sum = aggregate.reduce((acc, curr) => { - const val = curr.data[propObjKey]; - if (typeof val === 'number') { - acc = acc + val; - return acc; - } else { - return ''; - } - }, 0); - if (sum === '') { - return data['aggregateCount']; - } - return `(${aggregate.length} 条)：${sum.toFixed(2)}`; - } - return data[propObjKey]; - } - - return data[edgeType]; - }) - .filter(d => d) - .join('\n'); - - const label: any = { - value: LABEL_VALUE, - offset: advanced.label.offset, - fontSize: advanced.label.fontSize, - fill: advanced.label.fill, - opacity: advanced.label.opacity, - }; - if (!advanced.label.visible) { - label.value = ''; - } - if (advanced.label.backgroundEnable) { - label.background = { - fill: advanced.label.backgroundFill, - stroke: advanced.label.backgroundStroke, - opacity: advanced.label.backgroundOpaciy, - }; - } - - let preStyle = (edge && edge.style) || {}; - - if (reset) { - preStyle = {}; - } - - const finalStyle = { - keyshape: { - ...shape, - // ...edge.style?.keyshape, - lineWidth: size_CFG, - stroke: color_CFG, - opacity: keyshape_CFG.opacity, - lineDash: keyshape_CFG.lineDash, - lineAppendWidth: 10, //keyshape_CFG.lineAppendWidth, - ...endArrow, - }, - label, - animate: { - visible: advanced.animate.visible, - type: advanced.animate.type, - color: advanced.animate.dotColor, - repeat: advanced.animate.repeat, - duration: advanced.animate.duration, - }, - status: { - ...defaultStatus, - }, - }; - console.log('edge.......', edge, finalStyle); - - return { - source, - target, - id, - data: { - type: 'line-edge', - edgeType: edge.edgeType || 'UNKOWN', - style: finalStyle, - keyShape: { - lineWidth: finalStyle.keyshape.lineWidth, - stroke: finalStyle.keyshape.stroke, - endArrow: true, - }, - haloShape: {}, - labelShape: { - text: finalStyle.label.value, - }, - labelBackgroundShape: {}, - }, - }; - }; - return transEdge; - } catch (error) { - console.error('parse transform error:', error); - return edge => edge; - } -}; -export default transform; diff --git a/packages/gi-sdk/src/components/SimpleNode/index.tsx b/packages/gi-sdk/src/components/SimpleNode/index.tsx deleted file mode 100644 index d9ed4561c..000000000 --- a/packages/gi-sdk/src/components/SimpleNode/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import registerMeta from './registerMeta'; -import registerShape from './registerShape'; -import registerTransform, { defaultConfig } from './registerTransform'; - -/** index.md 中解析得到默认值，也可用户手动修改 */ import $i18n from '../../i18n'; -const info = { - id: 'SimpleNode', - category: 'node', - type: 'NODE', - name: $i18n.get({ id: 'basic.elements.SimpleNode.OfficialNode', dm: '官方节点' }), - icon: 'icon-smile', - desc: $i18n.get({ id: 'basic.elements.SimpleNode.OfficialNode', dm: '官方节点' }), - cover: 'https://gw.alipayobjects.com/mdn/rms_0d75e8/afts/img/A*myb8SrnSy0cAAAAAAAAAAAAAARQnAQ', - docs: 'https://www.yuque.com/antv/gi/mkrt58kk7m8qi0cu', -}; - -export default { - info, - defaultProps: defaultConfig, - registerShape, - registerMeta, - registerTransform, -}; diff --git a/packages/gi-sdk/src/components/SimpleNode/registerMeta.tsx b/packages/gi-sdk/src/components/SimpleNode/registerMeta.tsx deleted file mode 100644 index eacb88064..000000000 --- a/packages/gi-sdk/src/components/SimpleNode/registerMeta.tsx +++ /dev/null @@ -1,342 +0,0 @@ -import $i18n from '../../i18n'; -import { defaultConfig } from './registerTransform'; - -const { icon, keyshape, label, badge } = defaultConfig.advanced; -const registerMeta = context => { - const { schemaData } = context; - const schema = { - type: 'object', - properties: { - size: { - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Size', dm: '大小' }), - type: 'number', - 'x-decorator': 'FormItem', - 'x-component': 'NumberPicker', - default: defaultConfig.size, - }, - color: { - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Color', dm: '颜色' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'ColorInput', - default: defaultConfig.color, - }, - label: { - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Text', dm: '文本' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'GroupSelect', - 'x-component-props': { - mode: 'multiple', - schemaData: schemaData.nodes, - }, - }, - advancedPanel: { - type: 'void', - 'x-decorator': 'FormItem', - 'x-component': 'FormCollapse', - 'x-component-props': { - className: 'gi-assets-elements-advance-panel', - // style: { background: 'blue' }, - ghost: true, - }, - properties: { - advanced: { - type: 'object', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.AdvancedConfiguration', dm: '高级配置' }), - // 暂时不设置高级配置默认收起，否则下面的 visible 控制就失效了 - key: 'advanced-panel', - }, - properties: { - panel: { - type: 'void', - 'x-decorator': 'FormItem', - 'x-component': 'FormCollapse', - 'x-component-props': { - className: 'gi-assets-elements-panel', - style: { - // background: 'red', - // margin: '-16px', - }, - ghost: true, - }, - properties: { - icon: { - type: 'object', - 'x-decorator': 'FormItem', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Icon', dm: '图标' }), - key: 'icon-panel', - }, - properties: { - visible: { - type: 'boolean', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Visible', dm: '显隐' }), - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - 'x-reactions': [ - { - target: 'advanced.icon.type', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.icon.value', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.icon.fill', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.icon.size', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - ], - }, - type: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Type', dm: '类型' }), - 'x-decorator': 'FormItem', - 'x-component': 'Select', - enum: [ - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Text', dm: '文本' }), - value: 'text', - }, - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.FontIcon', dm: '字体图标' }), - value: 'font', - }, - ], - default: icon.type, - }, - value: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Icon', dm: '图标' }), - 'x-decorator': 'FormItem', - 'x-component': 'IconPicker', - default: icon.value, - }, - fill: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Color', dm: '颜色' }), - 'x-decorator': 'FormItem', - 'x-component': 'ColorInput', - default: icon.fill, - }, - // size: { - // type: 'string', - // title: '大小', - // 'x-decorator': 'FormItem', - // 'x-component': 'NumberPicker', - // default: icon.size, - // }, - }, - }, - keyshape: { - type: 'object', - 'x-decorator': 'FormItem', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Node', dm: '节点' }), - key: 'keyshape-panel', - }, - properties: { - fillOpacity: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Transparency', dm: '透明度' }), - 'x-decorator': 'FormItem', - 'x-component': 'NumberPicker', - max: 1, - min: 0, - default: keyshape.fillOpacity, - }, - }, - }, - label: { - type: 'object', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Text', dm: '文本' }), - key: 'label-panel', - }, - properties: { - visible: { - type: 'boolean', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Switch', dm: '开关' }), - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: label.visible, - 'x-reactions': [ - { - target: 'advanced.label.fill', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.label.fontSize', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.label.position', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - ], - }, - fill: { - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Color', dm: '颜色' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'ColorInput', - default: label.fill, - }, - fontSize: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Size', dm: '大小' }), - 'x-decorator': 'FormItem', - 'x-component': 'NumberPicker', - max: 100, - min: 12, - default: label.fontSize, - }, - position: { - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Location', dm: '位置' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - enum: [ - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Top', dm: '顶部' }), - value: 'top', - }, - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Bottom', dm: '底部' }), - value: 'bottom', - }, - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.LeftSide', dm: '左侧' }), - value: 'left', - }, - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.RightSide', dm: '右侧' }), - value: 'right', - }, - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Middle', dm: '中间' }), - value: 'center', - }, - ], - - default: label.position, - }, - }, - }, - badge: { - type: 'object', - 'x-component': 'FormCollapse.CollapsePanel', - 'x-component-props': { - header: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Logo', dm: '徽标' }), - key: 'badge-panel', - }, - properties: { - visible: { - type: 'boolean', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Visible', dm: '显隐' }), - 'x-decorator': 'FormItem', - 'x-component': 'Switch', - default: badge.visible, - 'x-reactions': [ - { - target: 'advanced.badge.type', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - { - target: 'advanced.badge.value', - fulfill: { - state: { - visible: '{{$self.value}}', - }, - }, - }, - ], - }, - type: { - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Type', dm: '类型' }), - type: 'string', - 'x-decorator': 'FormItem', - 'x-component': 'Select', - enum: [ - { - label: $i18n.get({ - id: 'basic.elements.SimpleNode.registerMeta.FieldMapping', - dm: '字段映射', - }), - value: 'mapping', - }, - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Text', dm: '文本' }), - value: 'text', - }, - { - label: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.FontIcon', dm: '字体图标' }), - value: 'font', - }, - ], - - default: badge.type, - }, - value: { - type: 'string', - title: $i18n.get({ id: 'basic.elements.SimpleNode.registerMeta.Text', dm: '文本' }), - 'x-decorator': 'FormItem', - 'x-component': 'Input', - default: badge.value, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }, - }; - - return schema; -}; -export default registerMeta; diff --git a/packages/gi-sdk/src/components/SimpleNode/registerShape.ts b/packages/gi-sdk/src/components/SimpleNode/registerShape.ts deleted file mode 100644 index ea8a3d952..000000000 --- a/packages/gi-sdk/src/components/SimpleNode/registerShape.ts +++ /dev/null @@ -1,4 +0,0 @@ -const registerShape = Graphin => { - // graphinNode 已经注册成功 -}; -export default registerShape; diff --git a/packages/gi-sdk/src/components/SimpleNode/registerTransform.ts b/packages/gi-sdk/src/components/SimpleNode/registerTransform.ts deleted file mode 100644 index 2c8f3add1..000000000 --- a/packages/gi-sdk/src/components/SimpleNode/registerTransform.ts +++ /dev/null @@ -1,301 +0,0 @@ -import { Utils } from '@antv/graphin'; -import type { GINodeConfig } from '../../index'; -import { icons } from '../../index'; - -const defaultNodeTheme = { - primaryColor: '#FF6A00', - nodeSize: 26, - mode: 'light' as 'light' | 'dark', -}; - -const getLabel = (data, LABEL_KEYS) => { - return LABEL_KEYS.map((d: string) => { - /** - * 兼容性处理：原先的label 逻辑是 ${type}.${properpertiesKey} - * 现在改为 ${type}^^${properpertiesKey} - */ - const [newNodeType, newLabelKey] = d.split('^^'); - const [oldNodeType, oldLabelKey] = d.split('.'); - const key = newLabelKey || oldLabelKey || 'id'; - return data[key]; - }) - .filter(d => d) - .join('\n'); -}; - -const getIconStyleByConfig = (style, data) => { - const { keyshape } = style; - if (!style.icon || !keyshape) { - return {}; - } - const icon = { ...style.icon }; - const { value } = icon; - - if (icon.visible) { - if (icon.type === 'image') { - return { - fill: 'transparent', - size: [keyshape.size, keyshape.size], - type: 'image', - clip: { r: keyshape.size / 2 }, - value: value, - }; - } - - if (icon.type === 'font') { - return { - ...icon, - size: keyshape.size / 2, - type: 'font', - fontFamily: 'iconfont', - value: icons[value] || '', - fill: icon.fill || keyshape.fill, - }; - } - if (icon.type === 'text') { - return { - ...icon, - fontSize: keyshape.size / 4, - fill: '#fff', - value: value, - }; - } - return { - ...icon, - }; - } - return { - ...icon, - visible: false, - value: '', - }; -}; - -const getBadgesStyleByConfig = (style, data) => { - const { badge, keyshape } = style; - if (!badge || !keyshape) { - return []; - } - - const { visible, value, color } = badge; - - if (visible) { - const size = Math.round(keyshape.size / 3); - const fontSize = size / 2; - badge.size = size; - badge.stroke = color || keyshape.stroke; - - if (badge.type === 'mapping') { - const b = { - type: 'text', - size, - stroke: keyshape.stroke, - fill: '#fff', - color: keyshape.fill, - visible: Boolean(data[value]), - value: data[value], - fontSize, - }; - return [b]; - } - if (badge.type === 'font') { - badge.type = 'font'; - badge.fontFamily = 'graphin'; - badge.value = icons[value] || ''; - } - if (badge.type === 'text') { - badge.fill = '#fff'; - badge.color = color || keyshape.fill; - badge.value = value; - badge.fontSize = fontSize; - } - return [badge]; - } - return []; -}; - -const defaultNodeStyles = Utils.getNodeStyleByTheme(defaultNodeTheme); - -const { style, status } = defaultNodeStyles; -const { keyshape, halo, label, icon } = style; - -export const defaultConfig = { - size: defaultNodeTheme.nodeSize, - color: defaultNodeTheme.primaryColor, - label: [], - advanced: { - keyshape: { - ...keyshape, - fillOpacity: 0.8, - type: 'circle-node', - }, - label: { - ...label, - opacity: 1, - visible: true, - }, - icon: { - ...icon, - fill: '#fff', - type: 'font', - value: '', - opacity: 1, - visible: false, - }, - badge: { - visible: false, - position: 'RT', - type: 'text', - value: '', - size: Math.round(keyshape.size / 3), // 徽标占据九宫格的最右上角，所以/3 - fill: '#fff', - color: '#fff', - stroke: keyshape.stroke, - isMapping: false, - }, - halo: { - ...halo, - visible: false, - lineWidth: 0, - }, - }, - status: { - minZoom: { - label: { - opacity: 0, - }, - icon: { - opacity: 0, - }, - badges: { - opacity: 0, - }, - }, - }, -}; -export type NodeConfig = typeof defaultConfig; - -/** 数据映射函数 需要根据配置自动生成*/ -const transform = (nodeConfig: GINodeConfig, reset?: boolean) => { - try { - /** 解构配置项 */ - - const { color, size, label: LABEL_KEYS, advanced, status: userStatus } = nodeConfig.props; - - let isBug = false; - //@ts-ignore - if (!Object.is(advanced)) { - isBug = true; - } - const { halo } = isBug ? defaultConfig.advanced : advanced; - const transNode = node => { - console.log('transNode.....'); - // properties - const data = node.data || node.properties || node; - - const keyshape = { - ...advanced.keyshape, - fill: color, - stroke: color, - size: size, - }; - advanced.keyshape = keyshape; - const LABEL_VALUE = getLabel(data, LABEL_KEYS); - const icon = getIconStyleByConfig(advanced, data); - const badges = getBadgesStyleByConfig(advanced, data); - - const label = { - ...advanced.label, - value: advanced.label.visible ? LABEL_VALUE : '', - }; - - let preStyle = (node && node.style) || {}; - if (reset) { - preStyle = {}; - } - - const styleByConfig = { - keyshape, - label, - icon, - halo, - badges, - status: { - ...status, - ...userStatus, - highlight: { - keyshape: { - lineWidth: 4, - fillOpacity: 0.6, - }, - }, - active: { - halo: { - visible: true, - }, - keyshape: { - lineWidth: 5, - }, - }, - /** 扩散的状态 */ - query_start: { - halo: { - visible: true, - stroke: color, - lineWidth: 4, - lineDash: [8, 8], - }, - }, - query_normal: { - halo: { - visible: true, - stroke: color, - lineWidth: 1, - lineDash: [8, 8], - }, - }, - }, - }; - console.log('keyshape', keyshape.type, keyshape); - return { - id: node.id, - data: { - type: keyshape.type, - x: data.x, - y: data.y, - labelShape: { - text: label.value || '', - position: label.position || 'bottom', - }, - keyShape: { - r: keyshape.size || 10, - fill: keyshape.fill || 'red', - stroke: keyshape.stroke || 'red', - strokeOpacity: keyshape.strokeOpacity || 1, - }, - animates: { - update: [ - { - fields: ['x', 'y'], - shapeId: 'group', - }, - // { - // fields: ['opacity'], - // shapeId: 'haloShape', - // }, - // { - // fields: ['lineWidth'], - // shapeId: 'keyShape', - // }, - ], - }, - }, - }; - }; - return transNode; - } catch (error) { - console.error('parse transform error:', error); - return node => node; - } -}; -export default transform; diff --git a/packages/gi-sdk/src/hooks/useComponents.tsx b/packages/gi-sdk/src/hooks/useComponents.tsx index 9a0278929..e1b7f312f 100644 --- a/packages/gi-sdk/src/hooks/useComponents.tsx +++ b/packages/gi-sdk/src/hooks/useComponents.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import DefaultInitializer from '../components/Initializer'; const DEFAULT_GICC_LAYOUT = { id: 'EmptyLayout', @@ -47,7 +46,7 @@ export const getComponents = (components, pageLayout, ComponentAssets) => { }; }, {}); - const { component: InitializerComponent } = ComponentAssets[initializer.id] || DefaultInitializer; + const { component: InitializerComponent } = ComponentAssets[initializer.id]; const { props: InitializerProps } = ComponentCfgMap[initializer.id]; diff --git a/packages/gi-sdk/src/index.tsx b/packages/gi-sdk/src/index.tsx index c4a6b1afc..3f60b9660 100644 --- a/packages/gi-sdk/src/index.tsx +++ b/packages/gi-sdk/src/index.tsx @@ -15,10 +15,7 @@ export { default as CollapseCard } from './components/CollapseCard'; export type { IGIAC } from './components/const'; export { default as EngineBanner } from './components/EngineBanner'; export { default as EngineServer } from './components/EngineServer'; -/** default assets */ -export { default as Initializer } from './components/Initializer'; -export { default as SimpleEdge } from './components/SimpleEdge'; -export { default as SimpleNode } from './components/SimpleNode'; + /** default assets */ export { default as Studio } from './components/Studio'; export { Info } from './constants/info'; @@ -28,9 +25,9 @@ export { Shortcuts, useShortcuts } from './utils'; export { common }; import template from './constants/template'; -import { useContext } from './context'; import GISDK from './GISDK'; import * as utils from './process'; +import { registerContext, useContext } from './useContext'; import { createDownload } from './utils'; const { version } = pkg; console.log(`%c 🎉 GI_SDK_VERSION:${version}`, 'color:#3e5dff'); @@ -81,7 +78,7 @@ export type { LayoutAsset, ServiceObject, } from './typing'; -export { extra, template, useContext, utils, version }; +export { extra, registerContext, template, useContext, utils, version }; declare global { interface Window { GISDK: { diff --git a/packages/gi-sdk/src/process/index.ts b/packages/gi-sdk/src/process/index.ts index 64d4c565a..a06178d66 100644 --- a/packages/gi-sdk/src/process/index.ts +++ b/packages/gi-sdk/src/process/index.ts @@ -16,35 +16,35 @@ export { } from './common'; export { filterByRules } from './filterByRules'; export { findAllPath, getNeighbors } from './findAllPath'; -export { getDefSideCoeFunction, getDefSideCoeFromEdgeFunction } from './getDefSideCoeFunction'; +export { getDefSideCoeFromEdgeFunction, getDefSideCoeFunction } from './getDefSideCoeFunction'; export { getDefSpringLenFunction } from './getDefSpringLenFunction'; -export { getEdgeWeightedStrength, getNodeWeightedStrength } from './getWeightedStrength'; export { default as getElementsByAssets } from './getElementsByAssets'; export { getMetaDefaultValues } from './getMetaDefaultValues'; export { default as getMockServiceConfig } from './getMockServiceConfig'; export { default as getSchemaGraph } from './getSchemaGraph'; export { getSearchParams, searchParamOf } from './getSearchParams'; export { default as getServicesByConfig } from './getServicesByConfig'; +export { getEdgeWeightedStrength, getNodeWeightedStrength } from './getWeightedStrength'; export { highlightEdgeIds, highlightSubGraph } from './highlight'; export { getAssetPackages, loaderAssets, loaderCombinedAssets } from './loaderAssets'; export { default as processEdges } from './processEdges'; export { generatorSchemaByGraphData, generatorStyleConfigBySchema, mergeStyleConfig } from './schema'; export { getServerEngineContext, setServerEngineContext } from './serverEngineContext'; export { getCombineServer, getCombineServices, getServiceOptions, getServiceOptionsByEngineId } from './services'; -export { transDataByConfig } from './transDataByConfig'; -export { default as registerIconFonts } from './registerIconFonts'; + +export { default as getCurrentLocales } from './getCurrentLocales'; export { - graphData2PropertyGraph, getNodePropertyImportance, getPropertyRanks, getPropertyValueRanks, + graphData2PropertyGraph, } from './propertyGraph'; -export { default as getCurrentLocales } from './getCurrentLocales'; +export { default as registerIconFonts } from './registerIconFonts'; export { + transDataBySchemaMeta, transNodeOrEdgeByFieldMapping, transNodesOrEdgesByFieldMapping, - transDataBySchemaMeta, transSchemaByMeta, } from './transGraphDataBySchemaMate'; diff --git a/packages/gi-sdk/src/process/transDataByConfig.ts b/packages/gi-sdk/src/process/transDataByConfig.ts deleted file mode 100644 index 38717151c..000000000 --- a/packages/gi-sdk/src/process/transDataByConfig.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { GraphinData, IUserEdge } from '@antv/graphin'; -import SimpleEdge from '../components/SimpleEdge'; -import SimpleNode from '../components/SimpleNode'; -import { GIAssets, GIConfig } from '../typing'; -import { uniqueElementsBy } from './common'; -import { filterByRules } from './filterByRules'; -import processEdges from './processEdges'; - -/** - * - * @param elementType 元素类型：node or edge - * @param data 数据 - * @param config GISDK配置 - * @param ElementAssets 元素资产 - * @param reset 是否重置transform - * @returns nodes or edges - */ -export const transDataByConfig = ( - elementType: 'nodes' | 'edges', - data: GraphinData, - config: Partial, - ElementAssets: GIAssets['elements'], - reset?: boolean, -) => { - console.time(`${elementType.toUpperCase()}_TRANS_COST`); - - const elementConfig = config[elementType]; - - if (!elementConfig) { - return {}; - } - - let elementData = data[elementType]; - - if (elementType === 'edges') { - // 先整体做个多边处理 - elementData = processEdges(elementData as IUserEdge[], { - poly: 40, - loop: 10, - }); - } - - const [basicConfig, ...otherConfigs] = elementConfig; - - const filterElements = otherConfigs - .map(item => { - //@ts-ignore - const { id, expressions, logic } = item; - if (!ElementAssets) { - return []; - } - const Element = ElementAssets[id]; - const filterData = filterByRules(elementData, { logic, expressions }); - const elementMapper = Element.registerTransform(filterData); - return filterData.map(elementMapper); - }) - .reduce((acc, curr) => { - return [...curr, ...acc]; - }, []); - - const uniqueElements = uniqueElementsBy(filterElements, (a, b) => { - return a.id === b.id; - }); - const uniqueIds = uniqueElements.map(n => n.id); - //@ts-ignore - const restElements = elementData.filter(n => { - return uniqueIds.indexOf(n.id) === -1; - }); - //@ts-ignore - let elementAsset = ElementAssets[basicConfig.id]; - if (!elementAsset) { - if (elementType === 'edges') { - //@ts-ignore - elementAsset = SimpleEdge; - } else { - //@ts-ignore - elementAsset = SimpleNode; - } - } - - //@ts-ignore - const restMapper = elementAsset.registerTransform(restElements, basicConfig, reset); - const restData = restElements.map(restMapper); - - const nodes = [...uniqueElements, ...restData]; - console.timeEnd(`${elementType.toUpperCase()}_TRANS_COST`); - - return nodes; -}; diff --git a/packages/gi-sdk/src/useContext.tsx b/packages/gi-sdk/src/useContext.tsx new file mode 100644 index 000000000..6b8bcab5b --- /dev/null +++ b/packages/gi-sdk/src/useContext.tsx @@ -0,0 +1,85 @@ +import type { GraphinData, IGraph } from '@antv/graphin'; +import React, { createContext } from 'react'; +import { proxy, useSnapshot } from 'valtio'; +import type { + GIAssets, + GIComponentConfig, + GIEdgeConfig, + GILayoutConfig, + GINodeConfig, + GIService, + GraphSchemaData, +} from './typing'; + +export const IdContext = createContext<{ id: string; assets: GIAssets; services: GIService[] }>({ + id: '', + assets: {}, + services: [], +}); + +const deepClone = (obj: any) => { + try { + return JSON.parse(JSON.stringify(obj)); + } catch (error) { + console.log('error'); + return {}; + } +}; + +export type IContext = T & { + graph: IGraph; + apis: any; + HAS_GRAPH: boolean; + GISDK_ID: string; + data: GraphinData; + schemaData: GraphSchemaData; + nodes: GINodeConfig[]; + edges: GIEdgeConfig[]; + layout: GILayoutConfig; + components: GIComponentConfig[]; + pageLayout: any; + initialized: boolean; + prepare: boolean; +}; + +export const StoreMap = new Map(); +export const GraphMap = new Map(); +export const GlobalStore = {} as IContext<{}>; + +export function useContext() { + const { id: ContextId, assets, services } = React.useContext(IdContext); + + if (ContextId) { + const prevStore = StoreMap.get(ContextId); + + if (!prevStore) { + /** 考虑SDK多实例的场景 */ + console.log('prevStore not found....', prevStore); + StoreMap.set(ContextId, proxy>(deepClone(GlobalStore))); + } + } + + const prevStore = StoreMap.get(ContextId); + const context = useSnapshot(prevStore); + const graph = GraphMap.get(ContextId) || null; + + return { + context, + assets, + services, + GISDK_ID: ContextId, + id: ContextId, + //@ts-ignore + graph: graph, + updateContext: (fn: (draft: IContext) => void) => { + return fn(prevStore); + }, + updateGraph: graph => { + GraphMap.set(ContextId, graph); + }, + }; +} + +export function registerContext(partStore: T): IContext { + return Object.assign(GlobalStore, partStore); +} From fd89d31f89b3faf6567948542d95c58ab57f7aa2 Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Tue, 7 Nov 2023 14:22:02 +0800 Subject: [PATCH 02/22] feat: update --- package.json | 2 +- .../src/components/AddSheetbar/Component.tsx | 6 +- .../src/components/AjustLayout/Component.tsx | 3 +- .../components/AnalysisHistory/Component.tsx | 3 +- .../AnalysisHistory/TemplateDrawer.tsx | 15 +- .../AnalysisHistory/TemplateModal.tsx | 15 +- .../src/components/AnalysisHistory/util.tsx | 2 +- .../src/components/Assistant/Component.tsx | 8 +- .../src/components/CypherQuery/Component.tsx | 3 +- .../src/components/JSONMode/Component.tsx | 3 +- .../src/components/Sheetbar/Component.tsx | 11 +- .../components/SnapshotGallery/Component.tsx | 3 +- .../components/StructAnalysis/Component.tsx | 9 +- .../StyleSetting/StyleSettingPanel.tsx | 17 +- .../components/SubGraphLayout/Component.tsx | 3 +- .../src/components/TableMode/Component.tsx | 5 +- .../TableMode/hooks/useCellSelect.ts | 4 +- .../TableMode/hooks/useEdgeDataCfg.tsx | 3 +- .../TableMode/hooks/useListenEdgeSelect.tsx | 3 +- .../TableMode/hooks/useListenNodeSelect.tsx | 3 +- .../TableMode/hooks/useNodeDataCfg.tsx | 3 +- .../ThemeSetting/AddOrUpdateTheme.tsx | 12 +- .../src/components/ThemeSetting/Component.tsx | 11 +- .../ActivateRelations/Component.tsx | 11 +- .../components/ChartAnalysis/Charts/index.tsx | 8 +- .../src/components/ClearCanvas/Component.tsx | 1 + .../components/ContentContainer/Component.tsx | 44 --- .../src/components/ContentContainer/index.tsx | 9 - .../src/components/ContentContainer/info.ts | 11 - .../ContentContainer/registerMeta.ts | 27 -- .../components/ContextMenu/ContextMenu.tsx | 8 +- .../src/components/EdgeMerge/Component.tsx | 3 +- .../src/components/FilterPanel/Component.tsx | 18 +- .../FilterPanel/FilterSelection.tsx | 11 +- .../components/ForceSimulation/Component.tsx | 5 +- .../components/GrailLayout/useComponents.tsx | 3 +- .../src/components/GroupBar/Component.less | 5 - .../src/components/GroupBar/Component.tsx | 93 ------ .../components/GroupBar/GroupContainer.less | 48 --- .../components/GroupBar/GroupContainer.tsx | 239 ------------- .../GroupBar/OperatorItem/index.less | 35 -- .../GroupBar/OperatorItem/index.tsx | 50 --- .../src/components/GroupBar/index.md | 17 - .../src/components/GroupBar/index.tsx | 10 - .../src/components/GroupBar/info.ts | 15 - .../src/components/GroupBar/registerMeta.ts | 314 ------------------ .../src/components/GroupBar/render.tsx | 65 ---- .../src/components/Initializer/Component.tsx | 35 +- .../src/components/LayoutSwitch/Component.tsx | 15 +- .../src/components/Loading/Component.tsx | 2 +- .../components/NeighborsQuery/Component.tsx | 3 +- .../src/components/OverView/Component.tsx | 8 +- .../src/components/OverView/Filter.tsx | 8 +- .../components/OverView/Interpretation.tsx | 19 +- .../src/components/PathAnalysis/Component.tsx | 6 +- .../components/PathAnalysis/FilterRule.tsx | 5 +- .../components/PinNodeWithMenu/Component.tsx | 5 +- .../src/components/Placeholder/Component.tsx | 6 +- .../components/PropertiesPanel/Component.tsx | 5 +- .../PropertyGraphInitializer/Component.tsx | 14 +- .../RemoveNodeWithMenu/useRemove.ts | 95 +++--- .../components/RichContainer/Component.tsx | 7 +- .../src/components/Sankey/Component.tsx | 3 +- .../src/components/Save/Component.tsx | 11 +- .../components/SegmentedLayout/component.tsx | 7 +- .../ToggleClusterWithMenu/Component.tsx | 3 +- .../src/components/Toolbar/Component.tsx | 4 +- .../src/components/UadLayout/component.tsx | 6 +- .../components/UadLayout/useComponents.tsx | 5 +- .../src/components/ZoomIn/Component.tsx | 3 +- .../src/components/ZoomOut/Component.tsx | 3 +- .../gi-assets-basic/src/components/index.tsx | 3 +- .../DataManage/DataSchema/index.tsx | 5 +- packages/gi-assets-neo4j/package.json | 2 +- .../src/LargeGraph/ForceGraph/index.tsx | 29 +- .../src/MapMode/L7Map/index.tsx | 15 +- .../src/MapMode/PropertiesPanel/Component.tsx | 9 +- .../gi-assets-scene/src/Timebar/Component.tsx | 3 +- .../src/Timeline/Component.tsx | 3 +- packages/gi-assets-testing/package.json | 1 - packages/gi-cli/templates/package.json | 1 - packages/gi-cli/templates/package.json.tpl | 1 - packages/gi-httpservice/package.json | 5 +- packages/gi-sdk/src/Canvas.tsx | 9 +- packages/gi-sdk/src/Components.tsx | 19 +- packages/gi-sdk/src/GISDK.tsx | 2 +- packages/gi-sdk/src/Initializer.tsx | 79 ----- packages/gi-sdk/src/Prepare.tsx | 2 +- packages/gi-sdk/src/SizeSensor.tsx | 2 +- .../src/components/FitCenterAfterMount.tsx | 7 +- packages/gi-sdk/src/context.tsx | 154 ++++++--- packages/gi-sdk/src/hooks/useComponents.tsx | 8 +- packages/gi-sdk/src/hooks/useContainer.tsx | 21 +- .../gi-sdk/src/hooks/useSourceDataMap.tsx | 20 ++ packages/gi-sdk/src/index.tsx | 4 +- packages/gi-sdk/src/process/index.ts | 2 + packages/gi-sdk/src/useContext.tsx | 85 ----- 97 files changed, 512 insertions(+), 1454 deletions(-) delete mode 100755 packages/gi-assets-basic/src/components/ContentContainer/Component.tsx delete mode 100755 packages/gi-assets-basic/src/components/ContentContainer/index.tsx delete mode 100644 packages/gi-assets-basic/src/components/ContentContainer/info.ts delete mode 100755 packages/gi-assets-basic/src/components/ContentContainer/registerMeta.ts delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/Component.less delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/Component.tsx delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/GroupContainer.less delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/GroupContainer.tsx delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/OperatorItem/index.less delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/OperatorItem/index.tsx delete mode 100755 packages/gi-assets-basic/src/components/GroupBar/index.md delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/index.tsx delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/info.ts delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/registerMeta.ts delete mode 100644 packages/gi-assets-basic/src/components/GroupBar/render.tsx delete mode 100644 packages/gi-sdk/src/Initializer.tsx create mode 100644 packages/gi-sdk/src/hooks/useSourceDataMap.tsx delete mode 100644 packages/gi-sdk/src/useContext.tsx diff --git a/package.json b/package.json index 6b44a05f1..6b3d2c749 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ }, "scripts": { "preinstall": "npx only-allow pnpm", - "postinstall": "npm run build:all:es", "build:all:es": "turbo run build:es", "build:all:umd": "turbo run build:umd --no-cache", "start": "cd packages/gi-site && npm run start", @@ -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/src/components/AddSheetbar/Component.tsx b/packages/gi-assets-advance/src/components/AddSheetbar/Component.tsx index e4a45c6e9..15b63a442 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 => { 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/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/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/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/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/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/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/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/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/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-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/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/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/index.tsx b/packages/gi-assets-basic/src/components/ContentContainer/index.tsx deleted file mode 100755 index 390cc7dca..000000000 --- a/packages/gi-assets-basic/src/components/ContentContainer/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Component from './Component'; -import info from './info'; -import registerMeta from './registerMeta'; - -export default { - info, - component: Component, - registerMeta, -}; 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/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..6ff80a3ec 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,9 +48,12 @@ 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; 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/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/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(
-