feat:注释节点

昔梦 · 昔梦 · commit 1bf9f040e857 · 2025-01-13T00:00:48.000+08:00
diff --git a/package.json b/package.json
@@ -110,6 +110,7 @@
     "typescript": "^5.2.2",
     "vite": "^3.2.5",
     "vitest": "^0.25.6",
-    "yorkie": "^2.0.0"
+    "yorkie": "^2.0.0",
+    "braft-editor": "^2.3.9"
   }
 }
diff --git a/packages/x-flow/package.json b/packages/x-flow/package.json
@@ -51,6 +51,7 @@
     "@uiw/react-codemirror": "^4.23.7",
     "@xyflow/react": "^12.3.2",
     "ahooks": "^3.7.5",
+    "braft-editor": "^2.3.9",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.7",
     "form-render": "^2.3.4",
diff --git a/packages/x-flow/src/components/CustomNode/index.less b/packages/x-flow/src/components/CustomNode/index.less
@@ -93,3 +93,9 @@
     display: none;
   }
 }
+
+
+.xflow-node-container-note{
+   border: none;
+   padding: 2px 6px 6px 6px;
+}
diff --git a/packages/x-flow/src/components/CustomNode/index.tsx b/packages/x-flow/src/components/CustomNode/index.tsx
@@ -29,21 +29,23 @@ export default memo((props: any) => {
     widgets[`${capitalize(type)}Node`] || widgets['CommonNode'];
   const [isHovered, setIsHovered] = useState(false);
   const reactflow = useReactFlow();
-  const { addNodes, addEdges, copyNode, pasteNode, deleteNode, mousePosition } = useStore(
-    (state: any) => ({
-      nodes: state.nodes,
-      edges: state.edges,
-      mousePosition: state.mousePosition,
-      addNodes: state.addNodes,
-      addEdges: state.addEdges,
-      copyNode: state.copyNode,
-      pasteNode: state.pasteNode,
-      deleteNode: state.deleteNode,
-      onEdgesChange: state.onEdgesChange,
-    }),
-    shallow
-  );
-  const isSwitchNode = type === 'Switch' || type === 'Parallel'; // 判断是否为条件节点/并行节点
+  const { addNodes, addEdges, copyNode, pasteNode, deleteNode, mousePosition } =
+    useStore(
+      (state: any) => ({
+        nodes: state.nodes,
+        edges: state.edges,
+        mousePosition: state.mousePosition,
+        addNodes: state.addNodes,
+        addEdges: state.addEdges,
+        copyNode: state.copyNode,
+        pasteNode: state.pasteNode,
+        deleteNode: state.deleteNode,
+        onEdgesChange: state.onEdgesChange,
+      }),
+      shallow
+    );
+  const isNote = type === 'Note';
+  const isSwitchNode = type === 'Switch' || type === 'Parallel' || isNote; // 判断是否为条件节点/并行节点/注释节点
   // 增加节点并进行联系
   const handleAddNode = (data: any, sourceHandle?: string) => {
     const { screenToFlowPosition } = reactflow;
@@ -231,18 +233,18 @@ export default memo((props: any) => {
       overlay: menu,
     };
   }, [menuItem]);
-
   return (
     <div
       className={classNames('xflow-node-container', {
         ['xflow-node-container-selected']: !!selected,
         ['xflow-node-container-tb']: layout === 'TB',
+        ['xflow-node-container-note']: isNote,
       })}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       style={{ '--nodeBorderColor': nodeBorderColor } as React.CSSProperties}
     >
-      {!settingMap?.[type]?.targetHandleHidden && (
+      {!settingMap?.[type]?.targetHandleHidden && !isNote && (
         <Handle
           type="target"
           position={targetPosition}
@@ -289,4 +291,3 @@ export default memo((props: any) => {
     </div>
   );
 });
-
diff --git a/packages/x-flow/src/nodes/index.tsx b/packages/x-flow/src/nodes/index.tsx
@@ -5,3 +5,4 @@ export { default as SwitchNode } from './node-switch';
 export { default as SwitchNodeSettingWidget } from './node-switch/setting';
 export { default as ParallelNode } from './node-parallel';
 export { default as ParallelNodeSettingWidget } from './node-parallel/setting';
+export { default as NoteNode } from './node-note';
diff --git a/packages/x-flow/src/nodes/node-note/index.less b/packages/x-flow/src/nodes/node-note/index.less
@@ -0,0 +1,46 @@
+.node-note-wrap {
+  .node-note-braft {
+    border: 1px solid rgb(132, 202, 255);
+    border-radius: 8px;
+    width: 240px;
+    height: 88px;
+    background: rgb(239, 248, 255);
+
+    .node-note-braft-content {
+      height: 100px !important;
+      overflow-y: auto;
+    }
+
+    .node-note-braft-control {
+      .control-item.button {
+        font-size: 12px;
+        min-width: 8px;
+        padding: 0px 6px;
+      }
+    }
+  }
+
+  .bf-dropdown .dropdown-content-inner {
+    background-color: rgb(239, 248, 255);
+    color: black;
+    border-radius: 8px;
+  }
+  .text-color-dropdown .bf-color-switch-buttons button {
+    color: black;
+    border-bottom: 1px solid #e4e9ec;
+  }
+  .text-color-dropdown .bf-color-switch-buttons button.active {
+    border-bottom-color: #3498db;
+    color: #3498db;
+  }
+  .bf-dropdown .dropdown-content .menu-item:not(.active) {
+    color: black;
+    border-bottom: 1px solid #e4e9ec;
+  }
+  .bf-font-sizes li {
+    color: black;
+  }
+  .bf-dropdown .dropdown-content .dropdown-arrow {
+    background-color: rgb(239, 248, 255);
+  }
+}
diff --git a/packages/x-flow/src/nodes/node-note/index.tsx b/packages/x-flow/src/nodes/node-note/index.tsx
@@ -0,0 +1,83 @@
+import BraftEditor from 'braft-editor';
+import 'braft-editor/dist/index.css';
+import { debounce } from 'lodash';
+import React, { memo, useRef, useState } from 'react';
+import { shallow } from 'zustand/shallow';
+import { useStore } from '../../hooks/useStore';
+import './index.less';
+
+export default memo((props: any) => {
+  const { onClick, type, data, id } = props;
+  const { nodes, setNodes } = useStore(
+    s => ({
+      nodes: s.nodes,
+      setNodes: s.setNodes,
+    }),
+    shallow
+  );
+
+  const editorRef = useRef(null);
+  const [editorState, setEditorState] = useState(
+    BraftEditor.createEditorState(data?.value)
+  );
+
+  // 当编辑器内容发生变化时触发
+  const handleEditorChange = newEditorState => {
+    setEditorState(newEditorState);
+    handleNodeValueChange({ value: newEditorState.toHTML() });
+  };
+
+  const handleNodeValueChange = debounce((data: any) => {
+    for (let node of nodes) {
+      if (node.id === id) {
+        node.data = {
+          ...node?.data,
+          ...data,
+        };
+        break;
+      }
+    }
+    setNodes([...nodes], false);
+  }, 200);
+
+  return (
+    <div
+      className="node-note-wrap"
+      onMouseDown={e => e.stopPropagation()}
+      onClick={e => e.stopPropagation()}
+    >
+      <BraftEditor
+        ref={editorRef}
+        value={editorState}
+        onChange={handleEditorChange}
+        placeholder="请输入内容..."
+        className="nodrag nopan nowheel node-note-braft"
+        language="zh"
+        style={{
+          width: '240px',
+          height: '160px',
+          backgroundColor: 'rgb(239, 248, 255)',
+          border: '1px solid rgb(132, 202, 255)',
+          borderRadius: '8px',
+          cursor: 'text',
+          userSelect: 'text',
+        }}
+        controls={[
+          // 'headings',
+          // 'font-size',
+          'bold',
+          'italic',
+          'underline',
+          'text-color',
+          // 'link',
+          // 'media',
+          'strike-through',
+          'list-ol',
+        ]}
+        contentStyle={{ height: '100px', overflowY: 'auto' }}
+        contentClassName="node-note-braft-content"
+        controlBarClassName="node-note-braft-control"
+      />
+    </div>
+  );
+});
diff --git a/packages/x-flow/src/operator/Control/index.tsx b/packages/x-flow/src/operator/Control/index.tsx
@@ -18,11 +18,17 @@ const Control = (props: any) => {
   const hideAddNode = globalConfig?.controls?.hideAddNode ?? false;
   const hideAnnotate = globalConfig?.controls?.hideAnnotate ?? false;
 
+  const { setIsAddingNode, panOnDrag } = useStore(s => ({
+    setIsAddingNode: s.setIsAddingNode,
+    panOnDrag: s.panOnDrag,
+  }));
+
   const addNote = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
+    setIsAddingNode(true);
+    addNode({ _nodeType: 'Note' });
   };
   const storeApi = useStoreApi();
-  const panOnDrag = useStore(s => s.panOnDrag);
 
   const { eventEmitter } = useEventEmitterContextContext();
 
@@ -31,7 +37,7 @@ const Control = (props: any) => {
   };
 
   return (
-    <div className='fai-reactflow-control'>
+    <div className="fai-reactflow-control">
       {!hideAddNode && (
         <NodeSelectPopover addNode={addNode}>
           <Tooltip
@@ -63,14 +69,19 @@ const Control = (props: any) => {
           />
         </Tooltip>
       )}
-      {!(hideAddNode && hideAnnotate) && <div className='separator'></div>}
-      <Tooltip title='指针模式' getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}>
+      {!(hideAddNode && hideAnnotate) && <div className="separator"></div>}
+      <Tooltip
+        title="指针模式"
+        getPopupContainer={() =>
+          document.getElementById('xflow-container') as HTMLElement
+        }
+      >
         <Button
-          type='text'
+          type="text"
           icon={
             <IconView
-              type='icon-zhizhen'
-              className='icon'
+              type="icon-zhizhen"
+              className="icon"
               style={{
                 color: !panOnDrag ? 'rgb(21,94,239)' : '#666F83',
                 fontSize: '14px',
@@ -81,13 +92,18 @@ const Control = (props: any) => {
           style={{ backgroundColor: !panOnDrag ? 'rgb(239,244,255)' : '' }}
         />
       </Tooltip>
-      <Tooltip title='手模式' getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}>
+      <Tooltip
+        title="手模式"
+        getPopupContainer={() =>
+          document.getElementById('xflow-container') as HTMLElement
+        }
+      >
         <Button
-          type='text'
+          type="text"
           icon={
             <IconView
-              type='icon-xianxingshouzhangtubiao'
-              className='icon'
+              type="icon-xianxingshouzhangtubiao"
+              className="icon"
               style={{
                 color: panOnDrag ? 'rgb(21,94,239)' : '#666F83',
               }}
@@ -100,20 +116,36 @@ const Control = (props: any) => {
           }}
         />
       </Tooltip>
-      <div className='separator'></div>
-      <Tooltip title='整理画布' getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}>
+      <div className="separator"></div>
+      <Tooltip
+        title="整理画布"
+        getPopupContainer={() =>
+          document.getElementById('xflow-container') as HTMLElement
+        }
+      >
         <Button
-          type='text'
-          icon={<IconView type='icon-function-add-line1' className='icon' />}
+          type="text"
+          icon={<IconView type="icon-function-add-line1" className="icon" />}
           onClick={() => {
             eventEmitter?.emit({ type: 'auto-layout-nodes' } as any);
           }}
         />
       </Tooltip>
-      <Tooltip title='画布全屏' getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}>
+      <Tooltip
+        title="画布全屏"
+        getPopupContainer={() =>
+          document.getElementById('xflow-container') as HTMLElement
+        }
+      >
         <Button
-          type='text'
-          icon={<IconView type={isFullscreen ? 'icon-fullscreen-exit' : 'icon-fullscreen'} className='icon'  style={{fontSize:'14px'}}/>}
+          type="text"
+          icon={
+            <IconView
+              type={isFullscreen ? 'icon-fullscreen-exit' : 'icon-fullscreen'}
+              className="icon"
+              style={{ fontSize: '14px' }}
+            />
+          }
           onClick={toggleFullscreen}
         />
       </Tooltip>

Original file line number	Diff line number	Diff line change
`@@ -110,6 +110,7 @@`
`110`	`110`	`"typescript": "^5.2.2",`
`111`	`111`	`"vite": "^3.2.5",`
`112`	`112`	`"vitest": "^0.25.6",`
`113`		`- "yorkie": "^2.0.0"`
	`113`	`+ "yorkie": "^2.0.0",`
	`114`	`+ "braft-editor": "^2.3.9"`
`114`	`115`	`}`
`115`	`116`	`}`
Original file line number	Diff line number	Diff line change
`@@ -93,3 +93,9 @@`
`93`	`93`	`display: none;`
`94`	`94`	`}`
`95`	`95`	`}`
	`96`	`+`
	`97`	`+`
	`98`	`+.xflow-node-container-note{`
	`99`	`+ border: none;`
	`100`	`+ padding: 2px 6px 6px 6px;`
	`101`	`+}`