Merge pull request #79 from easyops-cn/steve/lock-cells

feat(eo-draw-canvas): support lock cells

Author: panzekun

bricks/diagram/docs/eo-draw-canvas.md

@@ -114,7 +114,7 @@
         %>
     - name: dragging
     - name: activeTarget
-    - name: targetCell
+    - name: contextMenuTarget
     - name: scale
       value: 1
   children:
@@ -348,7 +348,7 @@
               - useBrick:
                   brick: diagram.experimental-node
                   properties:
-                    textContent: <% `Node ${DATA.node.id}` %>
+                    textContent: '<% `Node ${DATA.node.id}${DATA.node.locked ? " (locked)" : ""}` %>'
                     status: |
                       <%=
                         (CTX.activeTarget?.type === "multi"
@@ -369,9 +369,9 @@
                 dotted: true
                 showStartArrow: true
                 markers:
-                  - placement: end
-                    type: circle
                   - placement: start
+                    type: circle
+                  - placement: end
                     type: arrow
             cells: <% CTX.initialCells %>
             lineConnector: true
@@ -405,8 +405,8 @@
                       - <% EVENT.detail.clientY %>
               - action: context.replace
                 args:
-                  - targetCell
-                  - <% EVENT.detail.cell %>
+                  - contextMenuTarget
+                  - <% EVENT.detail %>
             edge.add:
               action: message.info
               args:
@@ -457,21 +457,26 @@
   properties:
     actions: |
       <%=
-        (["node"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator=="area") ? [
-          {
+        !CTX.contextMenuTarget
+        ? []
+        : [
+          ...(CTX.contextMenuTarget.locked ? [] : [{
             text: "添加边",
             event: "add-edge",
-          }
-        ] : [
+          },{
+            text: "移除",
+            event: "remove"
+          }]),
           {
-            text: `Test ${CTX.targetCell?.type}`,
-            event: `test-${CTX.targetCell?.type}`,
+            text: "锁定/取消锁定",
+            event: "toggle-lock",
           },
-          {
-            text: "Remove",
-            event: "remove"
-          }
-        ]
+        ].filter((action) =>
+          CTX.contextMenuTarget.cell.type === "node" || (
+            CTX.contextMenuTarget.cell.type === "decorator" &&
+            CTX.contextMenuTarget.cell.decorator === "area"
+          ) || action.event !== "add-edge"
+        )
       %>
   events:
     remove:
@@ -481,21 +486,39 @@
         - |
           <%
             CTX.initialCells.filter((cell) =>
-              !(cell.type === "edge" && CTX.targetCell.source === cell.source && CTX.targetCell.target === cell.target)
+              !(
+                CTX.contextMenuTarget.cell.type === "edge"
+                  ? cell.type === "edge" && CTX.contextMenuTarget.cell.source === cell.source && CTX.contextMenuTarget.cell.target === cell.target
+                  : cell.id === CTX.contextMenuTarget.cell.id ||
+                    (cell.type === "edge" && (
+                      CTX.contextMenuTarget.cell.id === cell.source ||
+                      CTX.contextMenuTarget.cell.id === cell.target))
+              )
             )
           %>
     add-edge:
       target: eo-draw-canvas
       method: manuallyConnectNodes
       args:
-        - <% CTX.targetCell.id %>
+        - <% CTX.contextMenuTarget.cell.id %>
       callback:
         success:
           - target: eo-draw-canvas
             method: addEdge
             args:
               - source: <% EVENT.detail.source.id %>
                 target: <% EVENT.detail.target.id %>
+    toggle-lock:
+      target: eo-draw-canvas
+      method: toggleLock
+      args:
+        - <% CTX.contextMenuTarget.cell %>
+      callback:
+        success:
+          action: console.log
+          args:
+            - "Updated cells after toggle lock:"
+            - <% EVENT.detail %>
 ```
 
 ### Line labels

bricks/diagram/src/draw-canvas/CellComponent.tsx

@@ -54,6 +54,8 @@ export interface CellComponentProps {
   dragoverContainer?: boolean;
   allowEdgeToArea?: boolean;
   curActiveEditableLine?: EditableLineCell | null;
+  locked?: boolean;
+  containerLocked?: boolean;
   updateCurActiveEditableLine?: (
     activeEditableLine: EditableLineCell | null
   ) => void;
@@ -89,6 +91,8 @@ export function CellComponent({
   unrelatedCells,
   allowEdgeToArea,
   curActiveEditableLine,
+  locked,
+  containerLocked,
   updateCurActiveEditableLine,
   onCellsMoving,
   onCellsMoved,
@@ -267,9 +271,10 @@ export function CellComponent({
         cell,
         clientX: event.clientX,
         clientY: event.clientY,
+        locked,
       });
     },
-    [cell, onCellContextMenu, onSwitchActiveTarget, readOnly]
+    [cell, onCellContextMenu, onSwitchActiveTarget, readOnly, locked]
   );
 
   const handleCellClick = useCallback(
@@ -281,9 +286,10 @@ export function CellComponent({
         cell,
         clientX: event.clientX,
         clientY: event.clientY,
+        locked,
       });
     },
-    [cell, onCellClick]
+    [cell, onCellClick, locked]
   );
 
   const handleMouseEnter = useCallback(() => {
@@ -326,6 +332,8 @@ export function CellComponent({
           degraded={degraded}
           degradedNodeLabel={degradedNodeLabel}
           defaultNodeBricks={defaultNodeBricks}
+          locked={locked}
+          containerLocked={containerLocked}
           onResize={onNodeBrickResize}
         />
       ) : isEdgeCell(cell) ? (
@@ -351,6 +359,7 @@ export function CellComponent({
           cells={cells}
           lineConfMap={lineConfMap}
           editableLineMap={editableLineMap}
+          locked={locked}
           onCellResizing={onCellResizing}
           onCellResized={onCellResized}
           onSwitchActiveTarget={onSwitchActiveTarget}

bricks/diagram/src/draw-canvas/LockIcon.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export interface LockIconProps {
+  x: number;
+  y: number;
+}
+
+export function LockIcon({ x, y }: LockIconProps) {
+  // 12 / 512 = 0.0234375
+  return (
+    <g
+      transform={`translate(${x}, ${y}) scale(0.0234375)`}
+      className="lock-icon"
+    >
+      <path
+        d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"
+        fill="var(--color-secondary-text)"
+        stroke="none"
+      />
+    </g>
+  );
+}

bricks/diagram/src/draw-canvas/NodeComponent.tsx

@@ -11,6 +11,7 @@ import { isEqual } from "lodash";
 import ResizeObserver from "resize-observer-polyfill";
 import type { NodeBrickCell, NodeBrickConf, NodeCell } from "./interfaces";
 import type { SizeTuple } from "../diagram/interfaces";
+import { LockIcon } from "./LockIcon";
 
 export interface NodeComponentProps {
   node: NodeCell;
@@ -19,6 +20,8 @@ export interface NodeComponentProps {
   degraded: boolean;
   degradedNodeLabel?: string;
   defaultNodeBricks?: NodeBrickConf[];
+  locked?: boolean;
+  containerLocked?: boolean;
   onResize(id: string, size: SizeTuple | null): void;
 }
 
@@ -29,9 +32,13 @@ export function NodeComponent({
   degraded,
   degradedNodeLabel,
   defaultNodeBricks,
+  locked,
+  containerLocked,
   onResize,
 }: NodeComponentProps): JSX.Element | null {
-  const memoizedData = useDeepMemo({ node: { id: node.id, data: node.data } });
+  const memoizedData = useDeepMemo({
+    node: { id: node.id, data: node.data, locked: !!locked },
+  });
   const specifiedUseBrick = (node as NodeBrickCell).useBrick;
   const observerRef = useRef<ResizeObserver | null>(null);
 
@@ -137,30 +144,37 @@ export function NodeComponent({
     return () => clearTimeout(timeoutId);
   }, []);
 
-  return useBrick ? (
-    <foreignObject
-      // Make a large size to avoid the brick inside to be clipped by the foreignObject.
-      width={9999}
-      height={9999}
-      className="node"
-      ref={foreignObjectRef}
-    >
-      {useBrick && (
-        <ReactUseBrick
-          useBrick={useBrick}
-          data={memoizedData}
-          refCallback={refCallback}
-        />
+  return (
+    <>
+      {useBrick ? (
+        <foreignObject
+          // Make a large size to avoid the brick inside to be clipped by the foreignObject.
+          width={9999}
+          height={9999}
+          className="node"
+          ref={foreignObjectRef}
+        >
+          {useBrick && (
+            <ReactUseBrick
+              useBrick={useBrick}
+              data={memoizedData}
+              refCallback={refCallback}
+            />
+          )}
+        </foreignObject>
+      ) : degraded ? (
+        <g className="degraded" ref={degradedRefCallBack}>
+          <circle cx={8} cy={8} r={8} />
+          <text x={8} y={32}>
+            {label}
+          </text>
+        </g>
+      ) : null}
+      {locked && !containerLocked && x != null && y != null && (
+        <LockIcon x={x + node.view.width + 4} y={y + node.view.height - 12} />
       )}
-    </foreignObject>
-  ) : degraded ? (
-    <g className="degraded" ref={degradedRefCallBack}>
-      <circle cx={8} cy={8} r={8} />
-      <text x={8} y={32}>
-        {label}
-      </text>
-    </g>
-  ) : null;
+    </>
+  );
 }
 
 function useDeepMemo<T>(value: T): T {

bricks/diagram/src/draw-canvas/decorators/DecoratorArea.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import type { BasicDecoratorProps } from "../interfaces";
 import { handleMouseDown } from "../processors/handleMouseDown";
+import { LockIcon } from "../LockIcon";
 
 export function DecoratorArea({
   cell,
@@ -9,6 +10,7 @@ export function DecoratorArea({
   layoutOptions,
   activeTarget,
   cells,
+  locked,
   onCellResizing,
   onCellResized,
   onSwitchActiveTarget,
@@ -61,7 +63,7 @@ export function DecoratorArea({
           }}
         />
       </foreignObject>
-      {!readOnly && (
+      {!readOnly && !locked && (
         <g
           ref={resizeHandleRef}
           className="resize-handle"
@@ -71,6 +73,9 @@ export function DecoratorArea({
           <path d="M10 18L18 10 M15 18L18 15" />
         </g>
       )}
+      {locked && (
+        <LockIcon x={cell.view.width - 16} y={cell.view.height - 16} />
+      )}
     </g>
   );
 }

bricks/diagram/src/draw-canvas/decorators/DecoratorContainer.tsx

@@ -6,6 +6,8 @@ import { get } from "lodash";
 import { selectAllText } from "./DecoratorText";
 import { isNoManualLayout } from "../processors/asserts";
 import { uuidV4 } from "..";
+import { LockIcon } from "../LockIcon";
+import { getContentEditable } from "../processors/getContentEditable";
 
 export function DecoratorContainer({
   cell,
@@ -15,6 +17,7 @@ export function DecoratorContainer({
   view,
   activeTarget,
   cells,
+  locked,
   onCellResizing,
   onCellResized,
   onSwitchActiveTarget,
@@ -37,14 +40,14 @@ export function DecoratorContainer({
   });
   const handleEnableEdit = useCallback(
     (e: React.MouseEvent) => {
-      if (readOnly) {
+      if (readOnly || locked) {
         return;
       }
       e.preventDefault();
       e.stopPropagation();
       setEditingLabel(true);
     },
-    [readOnly]
+    [readOnly, locked]
   );
   const handleInput = useCallback(
     (event: React.FormEvent<HTMLDivElement>) => {
@@ -163,7 +166,7 @@ export function DecoratorContainer({
         >
           <div
             className="text"
-            contentEditable={editingLabel}
+            contentEditable={getContentEditable(editingLabel)}
             ref={textRef}
             onInput={handleInput}
             onBlur={handleBlur}
@@ -180,7 +183,7 @@ export function DecoratorContainer({
           }}
         />
       </foreignObject>
-      {!readOnly && !isNoManualLayout(layout) && (
+      {!readOnly && !locked && !isNoManualLayout(layout) && (
         <g
           ref={resizeHandleRef}
           className="resize-handle"
@@ -190,6 +193,9 @@ export function DecoratorContainer({
           <path d="M10 18L18 10 M15 18L18 15" />
         </g>
       )}
+      {locked && (
+        <LockIcon x={cell.view.width - 16} y={cell.view.height - 16} />
+      )}
     </g>
   );
 }