Merge pull request #6 from MoeOtaLab/feature/operator-v2

Feature/operator v2

.eslintrc.js

@@ -53,5 +53,6 @@ module.exports = {
     '@typescript-eslint/no-floating-promises': 'off',
     'generator-star-spacing': 'off',
     '@typescript-eslint/brace-style': 'off',
+    'multiline-ternary': 'off',
   }
 }

packages/flow/src/Diagrams/Compiler/graph.ts

@@ -1,6 +1,6 @@
 import { type Edge, type Node } from 'reactflow';
-import { OperatorMap, getOperatorFromNode } from '../Operators';
-import { type IBaseNodeData } from '../Nodes/types';
+import { getOperatorFromNode } from '../Operators';
+import { type IMetaOperatorData } from '../Operators/types';
 import { EosCoreSymbol } from './runtime';
 import { type Layer, flatLayer } from '../State/Layer';
 import { message } from 'antd';
@@ -168,10 +168,9 @@ function generateBlock(
   const sortedNode = nodeGraph.getSortedNodes();
 
   const declarations: string[] = sortedNode
-    .map((node: Node<IBaseNodeData>) => {
-      const Operator =
-        getOperatorFromNode(node) || OperatorMap.get(node.data.operatorName);
-      return Operator?.generateBlockDeclarations?.({
+    .map((node: Node<IMetaOperatorData>) => {
+      const operator = getOperatorFromNode(node);
+      return operator?.generateBlockDeclarations?.({
         node,
         nodeGraph,
         formatVariableName,
@@ -182,10 +181,9 @@ function generateBlock(
     .filter((x): x is string => Boolean(x));
 
   const relations: string[] = sortedNode
-    .map((node: Node<IBaseNodeData>) => {
-      const Operator =
-        getOperatorFromNode(node) || OperatorMap.get(node.data.operatorName);
-      return Operator?.generateBlockRelation?.({
+    .map((node: Node<IMetaOperatorData>) => {
+      const operator = getOperatorFromNode(node);
+      return operator?.generateBlockRelation?.({
         node,
         nodeGraph,
         formatVariableName,
@@ -196,10 +194,9 @@ function generateBlock(
     .filter((x): x is string => Boolean(x));
 
   const outputs: string[] = sortedNode
-    .map((node: Node<IBaseNodeData>) => {
-      const Operator =
-        getOperatorFromNode(node) || OperatorMap.get(node.data.operatorName);
-      return Operator?.generateBlockOutput?.({
+    .map((node: Node<IMetaOperatorData>) => {
+      const operator = getOperatorFromNode(node);
+      return operator?.generateBlockOutput?.({
         node,
         nodeGraph,
         formatVariableName,

packages/flow/src/Diagrams/Nodes/DoNode/index.tsx

@@ -1,31 +1,25 @@
 import { type NodeProps } from 'reactflow';
-import { BaseNode } from '../components/BaseNode';
 import css from './DoNode.module.less';
 import { Button, Modal } from 'antd';
 import { useState } from 'react';
 import { Editor } from '../../components/Editor';
 
+/** @deprecated */
 export function DoNode(props: NodeProps<any>) {
   const [visible, setVisible] = useState(false);
 
   return (
     <>
-      <BaseNode
-        {...props}
-        title={
-          <Button
-            type="text"
-            tabIndex={-1}
-            style={{ color: 'white' }}
-            onClick={() => {
-              setVisible(true);
-            }}
-          >
-            点击编辑
-          </Button>
-        }
-        className={css.container}
-      />
+      <Button
+        type="text"
+        tabIndex={-1}
+        style={{ color: 'white' }}
+        onClick={() => {
+          setVisible(true);
+        }}
+      >
+        点击编辑
+      </Button>
       <Modal
         title="Basic Modal"
         open={visible}

packages/flow/src/Diagrams/Nodes/Node/Node.module.less

@@ -46,4 +46,11 @@
 
 .node__operator-description {
   font-size: 10px;
+}
+
+.value-container {
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

packages/flow/src/Diagrams/Nodes/Node/components/NodePorts/index.tsx

@@ -10,6 +10,30 @@ export function NodePorts(props: { node: Partial<Node<IMetaOperatorData>> }) {
   const { updateNode } = useDiagramsActions();
   const operator = getOperatorFromNode(node);
 
+  function renderSinglePort(port: EndPoint) {
+    if (port.type !== 'source' && port.type !== 'target') {
+      return <div key={port.id}>unknown type: {port.type}</div>;
+    }
+
+    return (
+      <div key={port.id} style={{ position: 'relative' }}>
+        <div
+          style={{
+            textAlign: port.type === 'source' ? 'right' : 'left',
+          }}
+        >
+          {port.label || port.variableName}
+        </div>
+        <Handle
+          type={port.type}
+          position={port.type === 'source' ? Position.Right : Position.Left}
+          id={port.id}
+          isConnectable={true}
+        />
+      </div>
+    );
+  }
+
   if (!endPointOptions?.endPointList?.length || !operator) {
     return null;
   }
@@ -27,31 +51,7 @@ export function NodePorts(props: { node: Partial<Node<IMetaOperatorData>> }) {
               <div className={css['port-type-container']}>
                 <div className={css['port-type-label']}>{item.label}</div>
                 {item.children?.map((port) => {
-                  if (port.type !== 'source' && port.type !== 'target') {
-                    return <div key={port.id}>unknown type: {port.type}</div>;
-                  }
-
-                  return (
-                    <div key={port.id} style={{ position: 'relative' }}>
-                      <div
-                        style={{
-                          textAlign: port.type === 'source' ? 'right' : 'left',
-                        }}
-                      >
-                        {port.label || port.variableName}
-                      </div>
-                      <Handle
-                        type={port.type}
-                        position={
-                          port.type === 'source'
-                            ? Position.Right
-                            : Position.Left
-                        }
-                        id={port.id}
-                        isConnectable={true}
-                      />
-                    </div>
-                  );
+                  return renderSinglePort(port);
                 })}
               </div>
               {item.allowAddAndRemoveChildren && (
@@ -75,7 +75,7 @@ export function NodePorts(props: { node: Partial<Node<IMetaOperatorData>> }) {
             </div>
           );
         } else {
-          return null;
+          return renderSinglePort(item);
         }
       })}
     </div>

packages/flow/src/Diagrams/Nodes/Node/index.tsx

@@ -5,18 +5,53 @@ import css from './Node.module.less';
 import { type IMetaOperatorData } from '../../Operators/types';
 import { NodePorts } from './components/NodePorts';
 import { useDiagramsHookOption } from '../../State/DiagramsProvider';
+import { message } from 'antd';
+
+export interface INodeProps {
+  showValue?: boolean;
+  getBriefValue?: () => { value: string; hasDetail?: boolean };
+  getDetailValue?: () => string;
+}
 
 export function Node(props: NodeProps<IMetaOperatorData>) {
   const operator = getOperatorFromNode(props);
   const { currentStateRef, actionsRef } = useDiagramsHookOption();
 
   const { selected, data } = props;
+  const nodeOptions: INodeProps | undefined = operator?.getNodeProps?.(props);
+
+  function renderValueSection() {
+    if (!nodeOptions?.showValue) {
+      return null;
+    }
+
+    const briefValue = nodeOptions?.getBriefValue?.();
+
+    if (!briefValue) {
+      return null;
+    }
+
+    return (
+      <div
+        className={css['value-container']}
+        onClick={() => {
+          if (briefValue.hasDetail) {
+            message.info(nodeOptions?.getDetailValue?.() || '');
+          }
+        }}
+      >
+        {briefValue.value}
+      </div>
+    );
+  }
 
+  const valueSection = renderValueSection();
   return (
     <div
       className={classnames(css.container, {
         [css.selected]: selected,
       })}
+      key={props.id}
       style={
         {
           '--color-node-theme': operator?.nodeColor || undefined,
@@ -41,15 +76,15 @@ export function Node(props: NodeProps<IMetaOperatorData>) {
           });
         }}
       >
-        {operator?.description && (
-          <div className={css.node__title}>
+        <div className={css.node__title}>
+          {operator?.description && (
             <div className={css['node__operator-description']}>
               {operator?.description}
             </div>
-            {/* <div>{data.label}</div> */}
-            {/* <div>{title}</div> */}
-          </div>
-        )}
+          )}
+          {valueSection && <div>{valueSection}</div>}
+          {/* <div>{data.label}</div> */}
+        </div>
         <NodePorts node={props} />
       </div>
     </div>

packages/flow/src/Diagrams/Nodes/NodeTypeEnum.ts

@@ -1,18 +1,3 @@
 export enum NodeTypeEnum {
-  /** 状态节点 */
-  StateNode = 'StateNode',
-  /** 组合节点 */
-  CompositionNode = 'CompositionNode',
-  /** 流操作 */
-  StreamOperatorNode = 'StreamOperatorNode',
-  /** 值操作 */
-  ValueOperatorNode = 'ValueOperatorNode',
-  /**
-   * 容器
-   * @see https://reactflow.dev/learn/layouting/sub-flows#adding-child-nodes
-   * @see https://reactflow.dev/examples/layout/sub-flows
-   * */
-  ContainerNode = 'ContainerNode',
-  DoNode = 'DoNode',
   Node = 'Node',
 }