fix(draw-canvas): new event: edge.add

easyops-cn · Aug 30, 2024 · 620ddbb · 620ddbb
1 parent ae302a2
commit 620ddbb
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 25 deletions.
diff --git a/bricks/diagram/docs/eo-draw-canvas.md b/bricks/diagram/docs/eo-draw-canvas.md
@@ -369,6 +369,11 @@
                 args:
                   - targetCell
                   - <% EVENT.detail.cell %>
+            edge.add:
+              action: message.info
+              args:
+                - |
+                  <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>
             decorator.text.change:
               action: message.info
               args:
@@ -424,11 +429,11 @@
         - <% CTX.targetCell.id %>
       callback:
         success:
-          target: eo-draw-canvas
-          method: addEdge
-          args:
-            - source: <% EVENT.detail.source.id %>
-              target: <% EVENT.detail.target.id %>
+          - target: eo-draw-canvas
+            method: addEdge
+            args:
+              - source: <% EVENT.detail.source.id %>
+                target: <% EVENT.detail.target.id %>
 ```
 
 ### Force layout

diff --git a/bricks/diagram/src/draw-canvas/LineConnectorComponent.tsx b/bricks/diagram/src/draw-canvas/LineConnectorComponent.tsx
@@ -9,17 +9,20 @@ const HELPER_IMAGE =
   "data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1cHgiIGhlaWdodD0iNXB4IiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9Im0gMCAwIEwgNSA1IE0gMCA1IEwgNSAwIiBzdHJva2Utd2lkdGg9IjIiIHN0eWxlPSJzdHJva2Utb3BhY2l0eTowLjQiIHN0cm9rZT0iI2ZmZmZmZiIvPjxwYXRoIGQ9Im0gMCAwIEwgNSA1IE0gMCA1IEwgNSAwIiBzdHJva2U9IiMyOWI2ZjIiLz48L3N2Zz4=";
 const HELPER_RADIUS = 5;
 const HELPER_BG_RADIUS = 8;
+const HALF_HELPER_RADIUS = HELPER_RADIUS / 2;
 
 export interface LineConnectorComponentProps {
   activeTarget: ActiveTarget | null;
   transform: TransformLiteral;
   smartConnectLineState: ConnectLineState | null;
+  disabled?: boolean;
 }
 
 export function LineConnectorComponent({
   activeTarget,
   transform,
   smartConnectLineState,
+  disabled,
 }: LineConnectorComponentProps): JSX.Element | null {
   const { unsetHoverStateTimeoutRef, hoverState, setHoverState } =
     useHoverStateContext();
@@ -47,6 +50,7 @@ export function LineConnectorComponent({
   }, [setHoverState, unsetHoverStateTimeoutRef]);
 
   const available =
+    !disabled &&
     hoverState &&
     (!!smartConnectLineState || !targetIsActive(hoverState.cell, activeTarget));
 
@@ -204,8 +208,8 @@ function ConnectPointComponent({
         fill="transparent"
       />
       <image
-        x={point.x - HELPER_RADIUS / 2}
-        y={point.y - HELPER_RADIUS / 2}
+        x={point.x - HALF_HELPER_RADIUS}
+        y={point.y - HALF_HELPER_RADIUS}
         width={HELPER_RADIUS}
         height={HELPER_RADIUS}
         xlinkHref={HELPER_IMAGE}

diff --git a/bricks/diagram/src/draw-canvas/index.tsx b/bricks/diagram/src/draw-canvas/index.tsx
@@ -341,6 +341,16 @@ class EoDrawCanvas extends ReactNextElement implements EoDrawCanvasProps {
     this.#cellContextMenu.emit(detail);
   };
 
+  /**
+   * 通过画布绘图的方式添加边（手动调用 `addEdge` 方法不会触发该事件）。
+   */
+  @event({ type: "edge.add" })
+  accessor #edgeAdd!: EventEmitter<EdgeCell>;
+
+  #handleEdgeAdd = (edge: EdgeCell) => {
+    this.#edgeAdd.emit(edge);
+  };
+
   @event({ type: "decorator.text.change" })
   accessor #decoratorTextChange!: EventEmitter<DecoratorTextChangeDetail>;
 
@@ -547,6 +557,7 @@ class EoDrawCanvas extends ReactNextElement implements EoDrawCanvasProps {
         onCellResize={this.#handleCellResize}
         onCellDelete={this.#handleCellDelete}
         onCellsDelete={this.#handleCellsDelete}
+        onEdgeAdd={this.#handleEdgeAdd}
         onCellContextMenu={this.#handleCellContextMenu}
         onDecoratorTextChange={this.#handleDecoratorTextChange}
         onContainerContainerChange={this.#handleContainerContainerChange}
@@ -566,6 +577,7 @@ export interface EoDrawCanvasComponentProps extends EoDrawCanvasProps {
   onCellsMove(info: MoveCellPayload[]): void;
   onCellsDelete(cells: Cell[]): void;
   onCellContextMenu(detail: CellContextMenuDetail): void;
+  onEdgeAdd(detail: EdgeCell): void;
   onDecoratorTextChange(detail: DecoratorTextChangeDetail): void;
   onContainerContainerChange(detail: MoveCellPayload[]): void;
   onScaleChange(scale: number): void;
@@ -620,6 +632,7 @@ function LegacyEoDrawCanvasComponent(
     onCellsMove,
     onCellsDelete,
     onCellContextMenu,
+    onEdgeAdd,
     onDecoratorTextChange,
     onScaleChange,
     onContainerContainerChange,
@@ -1021,22 +1034,24 @@ function LegacyEoDrawCanvasComponent(
         exitPosition: NodePosition,
         entryPosition: NodePosition
       ) {
+        const newEdge: EdgeCell = {
+          type: "edge",
+          source: source.id,
+          target: target.id,
+          view: {
+            exitPosition,
+            entryPosition,
+            ...(isObject(lineConnector) ? lineConnector : null),
+          },
+        };
         dispatch({
           type: "add-edge",
-          payload: {
-            type: "edge",
-            source: source.id,
-            target: target.id,
-            view: {
-              exitPosition,
-              entryPosition,
-              ...(isObject(lineConnector) ? lineConnector : null),
-            },
-          },
+          payload: newEdge,
         });
+        onEdgeAdd(newEdge);
       },
     }),
-    [smartConnectLineState, hoverState, lineConnector]
+    [smartConnectLineState, hoverState, lineConnector, onEdgeAdd]
   );
 
   useEffect(() => {
@@ -1088,6 +1103,7 @@ function LegacyEoDrawCanvasComponent(
       root.removeEventListener("mousedown", onMouseDown);
     };
   }, [transform, cells, dragBehavior, onSwitchActiveTarget]);
+
   return (
     <HoverStateContext.Provider value={hoverStateContextValue}>
       <svg
@@ -1183,6 +1199,7 @@ function LegacyEoDrawCanvasComponent(
           <LineConnectorComponent
             activeTarget={activeTarget}
             transform={transform}
+            disabled={!!connectLineState}
             smartConnectLineState={smartConnectLineState}
           />
         )}

diff --git a/bricks/diagram/src/draw-canvas/interfaces.ts b/bricks/diagram/src/draw-canvas/interfaces.ts
@@ -198,13 +198,6 @@ export interface SmartConnectLineState {
   exitPosition: NodeConnectPoint;
 }
 
-export interface SmartConnectLineState {
-  source: NodeCell;
-  from: PositionTuple;
-  offset: PositionTuple;
-  exitPosition: NodeConnectPoint;
-}
-
 export interface Deferred<T> {
   resolve: (value: T) => void;
   reject: (reason: unknown) => void;