fix: Re encapsulate the importer and export the useContext

Author: xwj02155382

packages/studio-flow-editor/src/app/index.tsx

@@ -30,8 +30,7 @@ const GraphCanvas: React.FC<ImportorProps> = ({
     onReactFlowInit,
   } = useInteractive();
   const { token } = theme.useToken();
-  useDynamicStyle(cssStyles, 'graphscope-graph-canvas');
- 
+  useDynamicStyle(cssStyles, 'graphscope-flow-editor');
   const _nodes = nodePositionChange.length === 0 ? nodes : applyNodeChanges(nodePositionChange, nodes);
   return (
     <div style={{ height: '100%', width: '100%' }}>
@@ -58,7 +57,7 @@ const GraphCanvas: React.FC<ImportorProps> = ({
           {showMinimap && <MiniMap style={{ backgroundColor: token.colorBgBase }} />}
           <ArrowMarker />
           {children}
-        </ReactFlow>
+        </ReactFlow>             
       </div>
     </div>
   );

packages/studio-flow-editor/src/app/store/index.tsx

@@ -4,47 +4,9 @@ import type { Node, Edge } from 'reactflow';
 import type { Property } from '@graphscope/studio-components';
 import React, { useContext, useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import { ISchemaEdge, ISchemaNode } from '../types';
 
-export interface IEdgeData {
-  label: string;
-  /** 禁用：saved / binded / xxxx  */
-  disabled?: boolean;
-  /** 是否保存在服务端 */
-  saved?: boolean;
-  properties?: Property[];
-  source_vertex_fields?: Property;
-  target_vertex_fields?: Property;
-  dataFields?: string[];
-  delimiter?: string;
-  datatype?: 'csv' | 'odps';
-  filelocation?: string;
-  _extra?: {
-    type?: string;
-    offset?: string;
-    isLoop: boolean;
-    isRevert?: boolean;
-    isPoly?: boolean;
-    index?: number;
-    count?: number;
-  };
-  [key: string]: any;
-}
-
-export interface INodeData {
-  label: string;
-  disabled?: boolean;
-  properties?: Property[];
-  dataFields?: string[];
-  delimiter?: string;
-  datatype?: 'csv' | 'odps';
-  filelocation?: string;
-  [key: string]: any;
-}
-export type ISchemaNode = Node<INodeData>;
-
-export type ISchemaEdge = Edge<IEdgeData> & { data: IEdgeData };
-
-interface GraphState {
+export interface GraphState {
   displayMode: 'graph' | 'table';
   nodes: ISchemaNode[];
   edges: ISchemaEdge[];

packages/studio-flow-editor/src/index.tsx

@@ -1,5 +1,5 @@
 export { default as GraphEditor } from './app';
-export { useGraphStore, GraphProvider } from './app/store';
+export * from './app/store';
 export { useClearCanvas, useAddNode, useExportSvg } from './app/hooks';
 export {default as AddNode} from './app/button-controller/add-node'
 export {default as ClearCanvas} from './app/button-controller/clear-canvas'

packages/studio-importor/.npmrc

@@ -0,0 +1 @@
+registry=http://registry.anpm.alibaba-inc.com

packages/studio-importor/package.json

@@ -27,6 +27,7 @@
     "@graphscope/use-zustand": "workspace:*",
     "@graphscope/studio-components": "workspace:*",
     "@graphscope/studio-server": "workspace:*",
+    "@graphscope/studio-flow-editor": "workspace:*",
     "d3-force": "latest",
     "dagre": "latest",
     "localforage": "latest",

packages/studio-importor/src/app/button-controller/add-node.tsx

@@ -1,7 +1,7 @@
 import { Button, Popover, Flex, Typography, Divider, theme, Space } from 'antd';
 import * as React from 'react';
 import { Utils, Icons } from '@graphscope/studio-components';
-import { useContext } from '@graphscope/use-zustand';
+import { useContext } from '../useContext';
 import { transOptionsToSchema } from '../utils/modeling';
 import { transformImportOptionsToSchemaMapping } from '../utils/importing';
 import yaml from 'js-yaml';

packages/studio-importor/src/app/button-controller/clear-canvas.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { Divider } from 'antd';
-import { Toolbar, useCustomToken } from '@graphscope/studio-components';
-
+import { Toolbar } from '@graphscope/studio-components';
+import {AddNode,ClearCanvas,ExportSvg} from '@graphscope/studio-flow-editor';
 import RightButton from './right-button';
-import ClearCanvas from './clear-canvas';
-import AddNode from './add-node';
-import ExportImage from './export-image';
-import { useContext } from '@graphscope/use-zustand';
+import { useContext } from '../useContext';
 
 import ParseCSV from './parse-csv';
 import ImportAndExportConfig from './import-and-export-config';
@@ -28,7 +25,7 @@ const ButtonController: React.FunctionComponent<IButtonControllerProps> = props
           <Divider style={{ margin: '0px' }} />
           <AddNode />
           <ClearCanvas />
-          <ExportImage />
+          <ExportSvg />
         </Toolbar>
       </>
     );