📝 feat: update node type (#51)

* 📝 fix: rm params * 📝 fix: rm baseIntro less * 📝 fix: rm quickUse less * 📝 fix: rm flowEditor less * 📝 fix: rm flowView less * 📝 fix: rm custom edge and node less * 📝 fix: rm much node demo * ✨ feat: min and max zoom * 📝 feat: css fix * 📝 feat: on Node change * 📝 feat: node item type * 📝 feat: floe edge type --------- Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Dec 14, 2023 · abe196d · abe196d
1 parent 8746db5
commit abe196d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 28 deletions.
diff --git a/src/BasicNode/index.tsx b/src/BasicNode/index.tsx
@@ -87,7 +87,14 @@ const BasicNode: React.FC<{
             {zoom <= 0.1 ? `${String(label).substring(0, 3)}...` : label}
           </ArtboardTitle>
         )}
-        <div className={cx(styles.nodeWrap, styles[getClsFromSelectType(selectType)], className)}>
+        <div
+          className={cx(
+            styles.nodeWrap,
+            styles[getClsFromSelectType(selectType)],
+            className,
+            'nodrag',
+          )}
+        >
           <img className={'img'} src={logo} alt="" />
           <div className={'content'}>
             <div className={'title'}>

diff --git a/src/FlowView/constants.tsx b/src/FlowView/constants.tsx
@@ -1,5 +1,4 @@
 import { Node } from 'reactflow';
-import { DefaultNodeType, FlowNodeType, NodeTypeDataMap } from '../constants';
 
 export enum SelectType {
   SELECT = 'SELECT',
@@ -15,7 +14,7 @@ export interface InitialNode extends Node {
   height?: number;
 }
 
-export interface NodeMapItem<T extends FlowNodeType = DefaultNodeType<FlowNodeType>> {
+export interface NodeMapItem<T = any, U extends string | undefined = string | undefined> {
   id: string;
   key?: string;
   left?: string[];
@@ -29,7 +28,7 @@ export interface NodeMapItem<T extends FlowNodeType = DefaultNodeType<FlowNodeTy
   danger?: boolean;
   dangerCount?: number;
   type?: 'input' | 'output' | 'default';
-  flowNodeType?: T | string;
+  flowNodeType?: U;
   className?: string;
   select?: SelectType;
   isGroup?: boolean;
@@ -39,7 +38,7 @@ export interface NodeMapItem<T extends FlowNodeType = DefaultNodeType<FlowNodeTy
   qualityScore?: string;
   subDanger?: boolean;
   logo?: string;
-  data: NodeTypeDataMap[T];
+  data: T;
   nodeType?: string;
   zoom?: number;
   label?: string;

diff --git a/src/FlowView/demos/index.style.ts b/src/FlowView/demos/index.style.ts
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-const useStyles = createStyles(() => {
+const useStyles = createStyles(({ css }) => {
   return {
     dangerLogo: {
       width: '28px',
@@ -13,11 +13,13 @@ const useStyles = createStyles(() => {
       alignItems: 'center',
       img: { width: '8px', height: '9px' },
     },
-    container: {
-      width: '100%',
-      height: '600px',
-      '.ant-progress-text': { textAlign: 'center' },
-    },
+    container: css`
+      width: 100%;
+      height: 600px;
+      .ant-progress-text {
+        text-align: center !important;
+      }
+    `,
     CustomWrap: {
       width: '300px',
       height: '100px',

diff --git a/src/FlowView/index.tsx b/src/FlowView/index.tsx
@@ -24,6 +24,8 @@ const FlowView: React.FC<Partial<FlowViewProps>> = (props) => {
     onPaneClick = initFn,
     onNodeClick = initFn,
     onEdgeClick = initFn,
+    onNodesChange = initFn,
+    onEdgesChange = initFn,
     nodes = [],
     edges = [],
     nodeTypes = {},
@@ -112,6 +114,8 @@ const FlowView: React.FC<Partial<FlowViewProps>> = (props) => {
       onPaneClick={handlePaneClick}
       onNodeClick={handleNodeClick}
       onEdgeClick={handleEdgeClick}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
       nodes={renderNodes}
       edges={renderEdges}
       nodeTypes={nodeTypesMemo}

diff --git a/src/constants.tsx b/src/constants.tsx
@@ -3,8 +3,7 @@ import React, {
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
 } from 'react';
-import ReactFlow, { Edge, EdgeProps, Node, NodeProps } from 'reactflow';
-import { NodeMapItem } from './FlowView/constants';
+import ReactFlow, { Edge, EdgeChange, EdgeProps, Node, NodeChange, NodeProps } from 'reactflow';
 
 export enum SelectType {
   SELECT = 'SELECT',
@@ -44,28 +43,23 @@ export interface NodeTypeDataMap {
   lineageGroup: BasicGroupNodeData[];
 }
 
-export type FlowNodeType = keyof NodeTypeDataMap;
-
-export type NodeHandler = {
-  [T in FlowNodeType]: (node: NodeMapItem) => React.ReactNode;
-};
-
-export type DefaultNodeType<T> = T extends FlowNodeType ? T : 'lineage';
-export interface FlowViewNode<T extends FlowNodeType = DefaultNodeType<FlowNodeType>> {
+export interface FlowViewNode<T = any, U extends string | undefined = string | undefined> {
   id: string;
   select?: SelectType;
-  data: NodeTypeDataMap[T] | any;
-  type?: T | string;
+  data: T;
+  type?: U;
   label?: string;
   width?: number;
   height?: number;
+  style?: CSSProperties;
+  className?: string;
   position?: {
     x: number;
     y: number;
   };
 }
 
-export interface FlowViewEdge {
+export interface FlowViewEdge<T = any, U extends string | undefined = string | undefined> {
   id: string;
   source: string;
   target: string;
@@ -74,16 +68,18 @@ export interface FlowViewEdge {
   animated?: boolean;
   select?: SelectType;
   label?: string;
-  type?: EdgeType | string;
+  type?: U;
   className?: string;
-  data?: any;
+  data?: T;
 }
 
 export interface FlowViewProps {
   onNodeDragStart?: (event: ReactMouseEvent, node: Node, nodes: Node[]) => void;
   onPaneClick?: (event: ReactMouseEvent) => void;
   onNodeClick?: (event: ReactMouseEvent, node: Node) => void;
   onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
+  onNodesChange?: (changes: NodeChange[]) => void;
+  onEdgesChange?: (changes: EdgeChange[]) => void;
   flowProps?: ComponentProps<typeof ReactFlow>;
   nodes: FlowViewNode[];
   edges: FlowViewEdge[];

diff --git a/src/index.ts b/src/index.ts
@@ -1,4 +1,13 @@
-import { BaseEdge, EdgeLabelRenderer, EdgeProps, Handle, Position, getBezierPath } from 'reactflow';
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  Handle,
+  Position,
+  getBezierPath,
+  useEdgesState,
+  useNodesState,
+} from 'reactflow';
 
 export * from './Background';
 export { default as Background } from './Background';
@@ -22,4 +31,13 @@ export { NodeField, useNodeFieldStyles } from './NodeField';
 export type { ExtraAction } from './NodeField';
 export { default as RadiusEdge } from './RadiusEdge';
 export * from './constants';
-export { BaseEdge, EdgeLabelRenderer, Handle, Position, getBezierPath, type EdgeProps };
+export {
+  BaseEdge,
+  EdgeLabelRenderer,
+  Handle,
+  Position,
+  getBezierPath,
+  useEdgesState,
+  useNodesState,
+  type EdgeProps,
+};