refactor: 兼容api

packages/gi-assets-basic/src/components/ActivateRelations/activate-relations-v2.ts

@@ -2,7 +2,14 @@
 // 1. 支持多选进行高亮
 // 2. 支持分别定义高亮时上下游进行扩展的度数
 
-import { Graph, Item, G6Event, IG6GraphEvent, INode, ICombo, IEdge } from '@antv/g6';
+// import { Graph, Item, G6Event, IG6GraphEvent, INode, ICombo, IEdge } from '@antv/g6';
+type Item = any;
+type G6Event = any;
+type INode = any;
+type ICombo = any;
+type IEdge = any;
+type IG6GraphEvent = any;
+type Graph = any;
 import { throttle } from '@antv/util';
 
 export default {

packages/gi-assets-basic/src/components/CommonNeighbor/Component.tsx

@@ -1,4 +1,6 @@
-import { IEdge, INode } from '@antv/g6';
+// import { IEdge, INode } from '@antv/g6';
+type IEdge = any;
+type INode = any;
 import { useContext } from '@antv/gi-sdk';
 import { ContextMenuValue } from '@antv/graphin';
 import { Menu, message } from 'antd';

packages/gi-assets-basic/src/components/ContextMenu/ContextMenu.tsx

@@ -1,9 +1,10 @@
-import { Item } from '@antv/g6';
+// import { Item } from '@antv/g6';
+type Item = any;
 import { ContextMenuValue } from '@antv/graphin';
 import { Menu } from 'antd';
 import React, { memo, useMemo } from 'react';
 import ContextMenu from './Container';
-import './index.less'
+import './index.less';
 
 // const { ContextMenu } = Components;
 

packages/gi-assets-basic/src/components/EdgeMerge/Component.tsx

@@ -1,4 +1,5 @@
-import type { EdgeConfig } from '@antv/g6';
+// import type { EdgeConfig } from '@antv/g6';
+type EdgeConfig = any;
 import type { IGIAC } from '@antv/gi-sdk';
 import { extra, useContext } from '@antv/gi-sdk';
 import cloneDeep from 'lodash/cloneDeep';

packages/gi-assets-basic/src/components/GrailLayout/Component.tsx

@@ -10,6 +10,7 @@ export interface FreeLayoutProps extends IContainersVisible {
   assets: GIAssets;
   GISDK_ID: string;
   containers: any[];
+  children: React.ReactNode[];
 }
 
 interface IContainersVisible {

packages/gi-assets-basic/src/components/PinNodeWithMenu/Component.tsx

@@ -1,11 +1,12 @@
 import { useContext } from '@antv/gi-sdk';
 import { Menu } from 'antd';
 import React, { memo, useEffect, useState } from 'react';
-
-import { INode } from '@antv/g6';
 import $i18n from '../../i18n';
 import { handlePinNode, handleUnPinNode } from '../common/handlePinNode';
 
+// import { INode } from '@antv/g6';
+type INode = any;
+
 export interface PinNodeMenuItemProps {
   contextmenu: any;
   controlledValues?: {

packages/gi-assets-basic/src/components/PropertiesPanel/Component.tsx

@@ -1,8 +1,9 @@
-import { useContext, utils } from '@antv/gi-sdk';
+import { Compatible, useContext, utils } from '@antv/gi-sdk';
 import { Skeleton } from 'antd';
 import React, { memo } from 'react';
 import DivContainer from '../UIComponents/DivContainer';
 import Properties from './Properties';
+
 export interface PropertiesPanelProps {
   hasService: boolean;
   serviceId?: string;
@@ -56,7 +57,7 @@ const PropertiesPanel: React.FunctionComponent<PropertiesPanelProps> = props =>
           isLoading: true,
         };
       });
-
+      Compatible.item(e, graph);
       const model = e.item.getModel();
       // 有数据服务就从服务中取数，没有服务就从Model中取数
       const detail = await service({ ...model, type: 'node' });
@@ -83,7 +84,7 @@ const PropertiesPanel: React.FunctionComponent<PropertiesPanelProps> = props =>
           isLoading: true,
         };
       });
-
+      Compatible.item(e, graph);
       const model = e.item.getModel();
       // 有数据服务就从服务中取数，没有服务就从Model中取数
       const detail = await service({ ...model, type: 'edge' });

packages/gi-assets-basic/src/components/SegmentedLayout/component.tsx

@@ -10,6 +10,7 @@ export interface UadLayoutProps {
   height: number;
   padding: string;
   containers: any[];
+  children: any;
 }
 
 const SegmentedLayout: React.FunctionComponent<UadLayoutProps> = props => {
@@ -24,7 +25,7 @@ const SegmentedLayout: React.FunctionComponent<UadLayoutProps> = props => {
     padding = 12, // 为什么这里没有值，需要关注
     components: SideContentChildren,
   } = SideContent;
-
+  console.log('SegmentContainer', HAS_GRAPH);
   const items = SideContentChildren.map(item => {
     return {
       icon: <Icon type={item.icon} />,

packages/gi-assets-basic/src/components/SideSelectTabs/QueryContainer.tsx

@@ -8,6 +8,7 @@ export interface ContainerProps {
   width: string;
   height: string;
   defaultVisible: boolean;
+  children: React.ReactNode;
 }
 
 const QueryContainer: React.FunctionComponent<ContainerProps> = props => {

packages/gi-assets-basic/src/components/SideTabs.bak/typing.ts

@@ -5,4 +5,5 @@ export interface ContainerProps {
   width: string;
   height: string;
   defaultVisible: boolean;
+  children: React.ReactNode;
 }

packages/gi-assets-basic/src/components/SideTabs/typing.ts

@@ -5,4 +5,5 @@ export interface ContainerProps {
   width: string;
   height: string;
   defaultVisible: boolean;
+  children: React.ReactNode;
 }

packages/gi-assets-basic/src/components/Toolbar/Toolbar.tsx

@@ -16,7 +16,7 @@ export interface ToolBarProps {
   /**
    * @description 可以放置自定义组件
    */
-  children?: React.ReactChildren | JSX.Element | JSX.Element[];
+  children?: React.ReactNode[];
 
   direction?: ToolbarDirectionType;
   /**

packages/gi-assets-basic/src/components/UadLayout/component.tsx

@@ -13,6 +13,7 @@ export interface UadLayoutProps {
     padding?: string;
     height?: number;
   }[];
+  children: React.ReactNode[];
 }
 
 const UadLayout: React.FunctionComponent<UadLayoutProps> = props => {

packages/gi-assets-basic/src/components/ZoomIn/Component.tsx

@@ -8,11 +8,11 @@ export interface IProps {
 
 const ZoomIn: React.FunctionComponent<IProps> = props => {
   const { GIAC } = props;
-  const { apis } = useContext();
+  const { apis, graph, HAS_GRAPH } = useContext();
   useShortcuts(['ctrl+=', 'command+='], () => {
     apis.handleZoomOut();
   });
-  console.log('zoom in....');
+  console.log('zoom in....', graph, HAS_GRAPH);
   return <GIAComponent GIAC={GIAC} onClick={() => apis.handleZoomOut()} />;
 };
 

packages/gi-assets-basic/src/components/index.tsx

@@ -1,4 +1,4 @@
-import ActivateRelations from './ActivateRelations';
+// import ActivateRelations from './ActivateRelations';
 import CanvasSetting from './CanvasSetting';
 import ClearCanvas from './ClearCanvas';
 import ContextMenu from './ContextMenu';
@@ -27,7 +27,6 @@ import Tooltip from './Tooltip';
 // import TooltipForEdge from './TooltipForEdge';
 // import ContentContainer from './ContentContainer';
 import ChartAnalysis from './ChartAnalysis';
-import CommonNeighbor from './CommonNeighbor';
 import ForceSimulation from './ForceSimulation';
 import GroupBar from './GroupBar';
 import Initializer from './Initializer';
@@ -49,20 +48,18 @@ import ZoomStatus from './ZoomStatus';
 // 临时测试，后面要删掉，放到图谱业务资产库中
 // import FuseEditPanel from './FuseEditPanel';
 // import CreateCombo from './CreateCombo';
-import EdgeMerge from './EdgeMerge';
 import ShortcutKeys from './ShortcutKeys';
 export {
-  ActivateRelations,
   CanvasSetting,
   // ContentContainer,
   ChartAnalysis,
   // TooltipForEdge, //体验问题，暂不放开
   ClearCanvas,
-  CommonNeighbor,
+  // CommonNeighbor,
   ContextMenu,
   Copyright,
   DownLoad,
-  EdgeMerge,
+  // EdgeMerge,
   Export,
   FilterPanel,
   // FitCenter,

packages/gi-assets-basic/src/components/utils.ts

@@ -1,4 +1,6 @@
-import { IEdge, INode } from '@antv/g6';
+// import { IEdge, INode } from '@antv/g6';
+type IEdge = any;
+type INode = any;
 
 /**
  *

packages/gi-assets-basic/src/elements/SimpleEdge/registerTransform.ts

@@ -1,7 +1,6 @@
 import type { GIEdgeConfig } from '@antv/gi-sdk';
 import { Utils } from '@antv/graphin';
 import merge from 'deepmerge';
-import $i18n from '../../i18n';
 
 const defaultEdgeTheme = {
   primaryEdgeColor: '#ddd',
@@ -73,7 +72,7 @@ const transform = (edges, config: GIEdgeConfig, reset?: boolean) => {
 
     const { keyshape: keyshape_CFG } = advanced;
 
-    const transEdges = edges.map((edge, index) => {
+    const transEdge = (edge, index) => {
       // properties
       const { source, target } = edge;
       const id = edge.id || `${source}-${target}-${index}`;
@@ -225,11 +224,11 @@ const transform = (edges, config: GIEdgeConfig, reset?: boolean) => {
         edgeType: edge.edgeType || 'UNKOWN',
         style: finalStyle,
       };
-    });
-    return transEdges;
+    };
+    return transEdge;
   } catch (error) {
     console.error('parse transform error:', error);
-    return edges;
+    return edge => edge;
   }
 };
 export default transform;

packages/gi-assets-basic/src/elements/SimpleNode/registerTransform.ts

@@ -195,8 +195,7 @@ const transform = (nodes, nodeConfig: GINodeConfig, reset?: boolean) => {
       isBug = true;
     }
     const { halo } = isBug ? defaultConfig.advanced : advanced;
-
-    const transNodes = nodes.map(node => {
+    const transNode = node => {
       // properties
       const data = node.data || node.properties || node;
 
@@ -273,11 +272,11 @@ const transform = (nodes, nodeConfig: GINodeConfig, reset?: boolean) => {
         // 数据中的style还是优先级最高的
         style: merge(styleByConfig, preStyle),
       };
-    });
-    return transNodes;
+    };
+    return transNode;
   } catch (error) {
     console.error('parse transform error:', error);
-    return nodes;
+    return node => node;
   }
 };
 export default transform;

packages/gi-assets-basic/src/layouts/ClusteringDagre/registerLayout.ts

@@ -227,6 +227,7 @@ const clusteringDagreLayout = Graphin => {
 
       // 结束后使用 force 进行微调
       if (self.postForce) {
+        //@ts-ignore
         const postForce = new G6.Layout.forceAtlas2({
           center: [width / 2, height / 2],
           preventOverlap: true,

packages/gi-assets-basic/src/layouts/index.tsx

@@ -1,5 +1,5 @@
 import Circular from './Circular';
-import ClusteringDagre from './ClusteringDagre';
+// import ClusteringDagre from './ClusteringDagre';
 import Concentric from './Concentric';
 import Dagre from './Dagre';
 import Force2 from './Force2';
@@ -9,4 +9,14 @@ import Grid from './Grid';
 import Radial from './Radial';
 // import Random from './Random'; //仅用于展示如何自定义布局
 /** 图布局市场 */
-export { Force2, Concentric, Dagre, GraphinForce, Grid, Radial, Circular, ClusteringDagre, FundForce };
+export {
+  Circular,
+  // ClusteringDagre,
+  Concentric,
+  Dagre,
+  Force2,
+  FundForce,
+  GraphinForce,
+  Grid,
+  Radial,
+};