@next-bricks/diagram 0.5.2 → 0.7.0

package/dist/types.json

@@ -138,10 +138,22 @@
         }
       },
       {
-        "name": "activeNodeId",
+        "name": "activeTarget",
         "annotation": {
-          "type": "keyword",
-          "value": "string"
+          "type": "union",
+          "types": [
+            {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "ActiveTarget"
+              }
+            },
+            {
+              "type": "keyword",
+              "value": "null"
+            }
+          ]
         }
       },
       {
@@ -160,11 +172,35 @@
             "name": "NodesConnectOptions"
           }
         }
+      },
+      {
+        "name": "zoomable",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      },
+      {
+        "name": "scrollable",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      },
+      {
+        "name": "scaleRange",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "RangeTuple"
+          }
+        }
       }
     ],
     "events": [
       {
-        "name": "activeNode.change",
+        "name": "activeTarget.change",
         "detail": {
           "annotation": {
             "type": "union",
@@ -173,12 +209,12 @@
                 "type": "reference",
                 "typeName": {
                   "type": "identifier",
-                  "name": "DiagramNode"
+                  "name": "ActiveTarget"
                 }
               },
               {
                 "type": "keyword",
-                "value": "undefined"
+                "value": "null"
               }
             ]
           }
@@ -196,6 +232,30 @@
           }
         }
       },
+      {
+        "name": "edge.delete",
+        "detail": {
+          "annotation": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "DiagramEdge"
+            }
+          }
+        }
+      },
+      {
+        "name": "line.click",
+        "detail": {
+          "annotation": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "LineTarget"
+            }
+          }
+        }
+      },
       {
         "name": "line.dblclick",
         "detail": {
@@ -989,6 +1049,92 @@
           ]
         }
       },
+      {
+        "type": "typeAlias",
+        "name": "ActiveTarget",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "ActiveTargetOfNode"
+              }
+            },
+            {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "ActiveTargetOfEdge"
+              }
+            }
+          ]
+        }
+      },
+      {
+        "type": "interface",
+        "name": "ActiveTargetOfNode",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "type"
+            },
+            "annotation": {
+              "type": "jsLiteral",
+              "value": "node"
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "nodeId"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "computed": false
+          }
+        ]
+      },
+      {
+        "type": "interface",
+        "name": "ActiveTargetOfEdge",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "type"
+            },
+            "annotation": {
+              "type": "jsLiteral",
+              "value": "edge"
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "edge"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "DiagramEdge"
+              }
+            },
+            "computed": false
+          }
+        ]
+      },
       {
         "type": "interface",
         "name": "NodesConnectOptions",
@@ -1085,6 +1231,33 @@
           }
         ]
       },
+      {
+        "type": "typeAlias",
+        "name": "RangeTuple",
+        "annotation": {
+          "type": "tuple",
+          "elementTypes": [
+            {
+              "type": "namedTupleMember",
+              "label": "min",
+              "optional": false,
+              "elementType": {
+                "type": "keyword",
+                "value": "number"
+              }
+            },
+            {
+              "type": "namedTupleMember",
+              "label": "max",
+              "optional": false,
+              "elementType": {
+                "type": "keyword",
+                "value": "number"
+              }
+            }
+          ]
+        }
+      },
       {
         "type": "interface",
         "name": "LineTarget",

package/dist-types/diagram/LineComponent.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="react" />
-import type { LineTarget, LineTextClipPath, RenderedLine } from "./interfaces";
+import type { DiagramEdge, LineTarget, LineTextClipPath, RenderedLine } from "./interfaces";
 export interface LineComponentProps {
     line: RenderedLine;
     linePaths: Map<string, SVGPathElement | null>;
     clipPathList: LineTextClipPath[];
     markerPrefix: string;
     clipPathPrefix: string;
+    activeLineMarkerPrefix: string;
+    activeEdge: DiagramEdge | null;
+    onLineClick?(line: LineTarget): void;
     onLineDoubleClick?(line: LineTarget): void;
 }
-export declare function LineComponent({ line: { line, d, markerIndex, edge }, linePaths, clipPathList, markerPrefix, clipPathPrefix, onLineDoubleClick, }: LineComponentProps): JSX.Element;
+export declare function LineComponent({ line: { line, d, markerIndex, edge }, linePaths, clipPathList, markerPrefix, clipPathPrefix, activeLineMarkerPrefix, activeEdge, onLineClick, onLineDoubleClick, }: LineComponentProps): JSX.Element;

package/dist-types/diagram/constants.d.ts

@@ -2,3 +2,5 @@ export declare const DEFAULT_LINE_STROKE_COLOR = "var(--palette-gray-5)";
 export declare const DEFAULT_LINE_STROKE_WIDTH = 1;
 export declare const DEFAULT_LINE_CURVE_TYPE = "curveBasis";
 export declare const DEFAULT_LINE_INTERACT_STROKE_WIDTH = 20;
+export declare const DEFAULT_SCALE_RANGE_MIN = 0.5;
+export declare const DEFAULT_SCALE_RANGE_MAX = 2;

package/dist-types/diagram/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
-import type { DiagramEdge, DiagramNode, LayoutOptionsDagre, LineConf, NodeBrickConf, LineTarget, ConnectLineDetail, NodesConnectOptions } from "./interfaces";
+import type { DiagramEdge, DiagramNode, LayoutOptionsDagre, LineConf, NodeBrickConf, LineTarget, ConnectLineDetail, NodesConnectOptions, ActiveTarget, RangeTuple } from "./interfaces";
 export interface EoDiagramProps {
     layout?: "dagre";
     nodes?: DiagramNode[];
@@ -10,15 +10,15 @@ export interface EoDiagramProps {
     lines?: LineConf[];
     layoutOptions?: LayoutOptionsDagre;
     nodesConnect?: NodesConnectOptions;
-    activeNodeId?: string;
+    activeTarget?: ActiveTarget | null;
     disableKeyboardAction?: boolean;
+    zoomable?: boolean;
+    scrollable?: boolean;
+    scaleRange?: RangeTuple;
 }
 export interface DiagramRef {
     callOnLineLabel(id: string, method: string, ...args: unknown[]): void;
 }
-export interface DiagramHandler {
-    moveIntoView(id: string): void;
-}
 export declare const EoDiagramComponent: React.ForwardRefExoticComponent<EoDiagramComponentProps & React.RefAttributes<DiagramRef>>;
 /**
  * 构件 `eo-diagram`
@@ -34,17 +34,22 @@ export declare class EoDiagram extends ReactNextElement implements EoDiagramProp
     accessor nodeBricks: NodeBrickConf[] | undefined;
     accessor lines: LineConf[] | undefined;
     accessor layoutOptions: LayoutOptionsDagre | undefined;
-    accessor activeNodeId: string | undefined;
+    accessor activeTarget: ActiveTarget | null | undefined;
     accessor disableKeyboardAction: boolean | undefined;
     accessor nodesConnect: NodesConnectOptions | undefined;
+    accessor zoomable: boolean | undefined;
+    accessor scrollable: boolean | undefined;
+    accessor scaleRange: RangeTuple | undefined;
     callOnLineLabel(id: string, method: string, ...args: unknown[]): void;
     render(): React.JSX.Element;
 }
 export interface EoDiagramComponentProps extends EoDiagramProps {
-    onActiveNodeChange?(node: DiagramNode | undefined): void;
-    onSwitchActiveNode?(id: string | undefined): void;
+    onActiveTargetChange?(target: ActiveTarget | null): void;
+    onSwitchActiveTarget?(target: ActiveTarget | null): void;
     onNodeDelete?(node: DiagramNode): void;
+    onEdgeDelete?(edge: DiagramEdge): void;
+    onLineClick?(line: LineTarget): void;
     onLineDoubleClick?(line: LineTarget): void;
     onNodesConnect?(detail: ConnectLineDetail): void;
 }
-export declare function LegacyEoDiagramComponent({ layout, nodes, edges, nodeBricks, lines, layoutOptions, nodesConnect, activeNodeId, disableKeyboardAction, onActiveNodeChange, onSwitchActiveNode, onNodeDelete, onLineDoubleClick, onNodesConnect, }: EoDiagramComponentProps, ref: React.Ref<DiagramRef>): React.JSX.Element;
+export declare function LegacyEoDiagramComponent({ layout, nodes, edges, nodeBricks, lines, layoutOptions, nodesConnect, activeTarget, disableKeyboardAction, zoomable, scrollable, scaleRange: _scaleRange, onActiveTargetChange, onSwitchActiveTarget, onNodeDelete, onEdgeDelete, onLineClick, onLineDoubleClick, onNodesConnect, }: EoDiagramComponentProps, ref: React.Ref<DiagramRef>): React.JSX.Element;

package/dist-types/diagram/interfaces.d.ts

@@ -54,6 +54,7 @@ export interface RenderedLineLabel {
     id: string;
 }
 export type PositionTuple = [x: number, y: number];
+export type RangeTuple = [min: number, max: number];
 export interface LineMarker {
     strokeColor: string;
 }
@@ -140,3 +141,12 @@ export interface ConnectLineState {
     from: PositionTuple;
     options: NodesConnectOptions;
 }
+export type ActiveTarget = ActiveTargetOfNode | ActiveTargetOfEdge;
+export interface ActiveTargetOfNode {
+    type: "node";
+    nodeId: string;
+}
+export interface ActiveTargetOfEdge {
+    type: "edge";
+    edge: DiagramEdge;
+}

package/dist-types/diagram/processors/handleKeyboard.d.ts

@@ -1,5 +1,5 @@
-import type { DiagramNode, RenderedEdge, RenderedNode } from "../interfaces";
-export type KeyboardAction = KeyboardActionSwitchActiveNode | KeyboardActionDeleteNode;
+import type { ActiveTarget, DiagramEdge, DiagramNode, RenderedEdge, RenderedNode } from "../interfaces";
+export type KeyboardAction = KeyboardActionSwitchActiveNode | KeyboardActionDeleteNode | KeyboardActionDeleteEdge;
 export interface KeyboardActionSwitchActiveNode {
     action: "switch-active-node";
     node?: DiagramNode;
@@ -8,8 +8,12 @@ export interface KeyboardActionDeleteNode {
     action: "delete-node";
     node: DiagramNode;
 }
-export declare function handleKeyboard(event: KeyboardEvent, { renderedNodes, renderedEdges, activeNodeId, }: {
+export interface KeyboardActionDeleteEdge {
+    action: "delete-edge";
+    edge: DiagramEdge;
+}
+export declare function handleKeyboard(event: KeyboardEvent, { renderedNodes, renderedEdges, activeTarget, }: {
     renderedNodes: RenderedNode[];
     renderedEdges: RenderedEdge[];
-    activeNodeId: string | undefined;
+    activeTarget: ActiveTarget | null | undefined;
 }): KeyboardAction | undefined;

package/dist-types/diagram/processors/{handleDiagramMouseDown.d.ts → handleNodesMouseDown.d.ts}

@@ -1,11 +1,11 @@
 import type React from "react";
-import type { ConnectLineState, DiagramNode, ConnectLineDetail, NodesConnectOptions, PositionTuple, RefRepository } from "../interfaces";
-export declare function handleDiagramMouseDown(event: React.MouseEvent, { nodes, nodesRefRepository, nodesConnect, setConnectLineState, setConnectLineTo, onSwitchActiveNode, onNodesConnect, }: {
+import type { ConnectLineState, DiagramNode, ConnectLineDetail, NodesConnectOptions, PositionTuple, RefRepository, ActiveTarget } from "../interfaces";
+export declare function handleNodesMouseDown(event: MouseEvent, { nodes, nodesRefRepository, nodesConnect, setConnectLineState, setConnectLineTo, onSwitchActiveTarget, onNodesConnect, }: {
     nodes: DiagramNode[] | undefined;
     nodesConnect: NodesConnectOptions | undefined;
     nodesRefRepository: RefRepository | null;
     setConnectLineState: (value: React.SetStateAction<ConnectLineState | null>) => void;
     setConnectLineTo: (value: React.SetStateAction<PositionTuple>) => void;
-    onSwitchActiveNode?(id: string | undefined): void;
+    onSwitchActiveTarget?(target: ActiveTarget | null): void;
     onNodesConnect?(detail: ConnectLineDetail): void;
 }): void;

package/dist-types/diagram/processors/transformToCenter.d.ts

@@ -0,0 +1,7 @@
+import type { RenderedNode, TransformLiteral } from "../interfaces";
+export interface TransformToCenterOptions {
+    canvasWidth: number;
+    canvasHeight: number;
+    scaleRange?: [min: number, max: number];
+}
+export declare function transformToCenter(renderedNodes: RenderedNode[], { canvasWidth, canvasHeight, scaleRange }: TransformToCenterOptions): TransformLiteral;

package/dist-types/diagram/processors/transformToCenter.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/docs/eo-diagram.md

@@ -151,11 +151,14 @@ properties:
     top: 0px
     left: 0px
 context:
-  - name: activeNodeId
+  - name: activeTarget
+    value: null
   - name: tempNodeId
   - name: targetNode
   - name: editingLabelNodes
     value: []
+  - name: editingLabelEdges
+    value: []
   - name: nodes
     value:
       - type: board
@@ -266,13 +269,35 @@ children:
                             : edge
                         )
                       %>
+                label.editing.change:
+                  action: context.replace
+                  args:
+                    - editingLabelEdges
+                    - |-
+                      <%
+                        EVENT.detail
+                          ? CTX.editingLabelEdges.concat(
+                              `${DATA.edge.source}-:-${DATA.edge.target}`
+                            )
+                          : CTX.editingLabelEdges.filter(
+                              (id) =>
+                                id !== `${DATA.edge.source}-:-${DATA.edge.target}`
+                            )
+                      %>
+                click:
+                  action: context.replace
+                  args:
+                    - activeTarget
+                    - type: edge
+                      edge: <% DATA.edge %>
         - edgeType: menu
           strokeColor: var(--palette-gray-5)
           arrow: true
+          interactable: true
       layoutOptions:
-        nodePadding: 10
-      activeNodeId: <%= CTX.activeNodeId %>
-      disableKeyboardAction: <%= CTX.editingLabelNodes.length > 0 %>
+        nodePadding: [4, 10, 10]
+      activeTarget: <%= CTX.activeTarget %>
+      disableKeyboardAction: <%= CTX.editingLabelNodes.length > 0 || CTX.editingLabelEdges.length > 0 %>
       nodesConnect:
         arrow: true
         strokeColor: |-
@@ -289,13 +314,14 @@ children:
               type: <% DATA.node.type %>
               autoFocusOnce: |
                 <% DATA.node.$temp ? DATA.node.id : undefined %>
-              active: <%= CTX.activeNodeId === DATA.node.id %>
+              active: <%= CTX.activeTarget?.type === "node" && CTX.activeTarget.nodeId === DATA.node.id %>
             events:
               click:
                 action: context.replace
                 args:
-                  - activeNodeId
-                  - <% DATA.node.id %>
+                  - activeTarget
+                  - type: node
+                    nodeId: <% DATA.node.id %>
               label.editing.change:
                 action: context.replace
                 args:
@@ -352,17 +378,30 @@ children:
                       <% CTX.edges.concat({ source: DATA.node.id, target: CTX.tempNodeId, name: "未命名", type: "link", $temp: true }) %>
                 - action: context.replace
                   args:
-                    - activeNodeId
-                    - <% CTX.tempNodeId %>
+                    - activeTarget
+                    - type: node
+                      nodeId: <% CTX.tempNodeId %>
     events:
-      activeNode.change:
+      activeTarget.change:
         - action: context.replace
           # Take reaction only if the active node has been changed
           # Otherwise it may cause infinite loop
-          if: <% CTX.activeNodeId !== EVENT.detail?.id %>
+          if: |
+            <%
+              ((newTarget, previousTarget) =>
+                (newTarget
+                  ? !previousTarget ||
+                    newTarget.type !== previousTarget.type ||
+                    (newTarget.type === "node"
+                      ? newTarget.nodeId !== previousTarget.nodeId
+                      : newTarget.edge.source !== previousTarget.edge.source ||
+                        newTarget.edge.target !== previousTarget.edge.target)
+                : !!previousTarget)
+              )(EVENT.detail, CTX.activeTarget)
+            %>
           args:
-            - activeNodeId
-            - <% EVENT.detail?.id %>
+            - activeTarget
+            - <% EVENT.detail %>
       node.delete:
         - action: context.replace
           args:
@@ -396,6 +435,24 @@ children:
                         target !== CTX.targetNode.id
                     )
                   %>
+      edge.delete:
+        action: context.replace
+        args:
+          - edges
+          - |-
+            <%
+              CTX.edges.filter(
+                ({ source, target }) =>
+                  source !== EVENT.detail.source ||
+                  target !== EVENT.detail.target
+              )
+            %>
+      line.click:
+        action: context.replace
+        args:
+          - activeTarget
+          - type: edge
+            edge: <% EVENT.detail.edge %>
       line.dblclick:
         target: _self
         method: callOnLineLabel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/diagram",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/diagram",
   "repository": {
     "type": "git",
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "@next-bricks/icons": "*"
   },
-  "gitHead": "84f6f3e270489b955eeeecf7100b2655ce33d94c"
+  "gitHead": "67c0b7aa44a1c6e314d8f0e200fde7d87ddda9c2"
 }

package/dist/chunks/6457.0e22ff80.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_next_bricks_diagram=self.webpackChunk_next_bricks_diagram||[]).push([[6457],{2260:(e,t,n)=>{n.d(t,{K:()=>a});var r=n(8657),o=n.n(r);function a(e){var{clipPath:t,clipPathPrefix:n,renderedLineLabels:r}=e,{x0:a,y0:i,w:l,h:c,id:d}=t,s=r.find((e=>e.id===d));if(!s)return null;var{left:u,top:f,right:v,bottom:h}=s.lineRect;return o().createElement("clipPath",{key:d,id:"".concat(n).concat(d)},o().createElement("polygon",{points:["".concat(a,",").concat(i+c),"".concat(a+l,",").concat(i+c),"".concat(a+l,",").concat(i),"".concat(a,",").concat(i),"".concat(a,",").concat(f),"".concat(v,",").concat(f),"".concat(v,",").concat(h),"".concat(u,",").concat(h),"".concat(u,",").concat(f),"".concat(a,",").concat(f)].join(" ")}))}},7587:(e,t,n)=>{n.d(t,{f:()=>c});var r=n(8657),o=n.n(r),a=n(2779),i=n.n(a),l=n(9575);function c(e){var{connectLineState:t,connectLineTo:n,markerPrefix:r}=e;return o().createElement("svg",{width:"100%",height:"100%",className:i()("connect-line",{connecting:!!t})},o().createElement("defs",null,o().createElement(l.C,{id:"".concat(r,"connect-line"),strokeColor:null==t?void 0:t.options.strokeColor})),o().createElement("path",{d:t?"M".concat(t.from.join(" "),"L").concat(n.join(" ")):"",fill:"none",stroke:null==t?void 0:t.options.strokeColor,strokeWidth:null==t?void 0:t.options.strokeWidth,markerEnd:null!=t&&t.options.arrow?"url(#".concat(r,"connect-line)"):void 0}))}},6462:(e,t,n)=>{n.d(t,{y:()=>l});var r=n(8657),o=n.n(r),a=n(2779),i=n.n(a);function l(e){var{line:{line:t,d:n,markerIndex:r,edge:a},linePaths:l,clipPathList:c,markerPrefix:d,clipPathPrefix:s,onLineDoubleClick:u}=e;return o().createElement("g",{className:i()("line",{interactable:t.interactable}),onDoubleClick:t.interactable?e=>(e.preventDefault(),e.stopPropagation(),null==u?void 0:u({id:t.$id,edge:a})):void 0,style:{cursor:t.cursor}},o().createElement("path",{ref:e=>l.set(t.$id,e),stroke:t.strokeColor,strokeWidth:t.strokeWidth,d:n,fill:"none",markerEnd:void 0===r?void 0:"url(#".concat(d).concat(r,")"),clipPath:c.some((e=>e.id===t.$id))?"url(#".concat(s).concat(t.$id,")"):void 0}),t.interactable&&o().createElement("path",{d:n,fill:"none",stroke:"transparent",strokeWidth:t.interactStrokeWidth}))}},7853:(e,t,n)=>{n.d(t,{L8:()=>c});var r=n(3028),o=n(8657),a=n.n(o),i=n(9494),l=n(9464);function c(e){var{labels:t,onRendered:n}=e,[r,i]=(0,o.useState)(!1),[l,c]=(0,o.useState)([]),u=(0,o.useMemo)((()=>new Map),[]),f=(0,o.useCallback)(((e,t)=>{t&&u.set(e,t),c((t=>t.includes(e)?t:t.concat(e)))}),[u]),v=(0,o.useCallback)((e=>{c((t=>{var n=t.indexOf(e);return-1===n?t:t.slice(0,n).concat(t.slice(n+1))})),u.delete(e)}),[u]);return(0,o.useEffect)((()=>{i(!(null!=t&&t.some((e=>!l.includes(e.id)))))}),[t,l]),(0,o.useEffect)((()=>{null==n||n(r?u:null)}),[u,r]),a().createElement(a().Fragment,null,null==t?void 0:t.map((e=>{var{text:t,label:n,position:r,id:o,edge:i}=e;return n?a().createElement("div",{key:o,className:"line-label",style:{left:r[0],top:r[1]}},a().createElement(s,{id:o,edge:i,label:n,onRendered:f,onUnmount:v})):a().createElement(d,{key:o,id:o,text:t,position:r,onRendered:f})})))}function d(e){var{id:t,text:n,position:i,onRendered:l}=e,c=(0,o.useCallback)((e=>{null==l||l(t,e)}),[t,l]);return a().createElement("div",{className:"line-label",ref:c,style:(0,r.Z)({left:i[0],top:i[1]},n.style)},n.content)}function s(e){var{id:t,edge:n,label:r,onRendered:c,onUnmount:d}=e,s=(0,o.useMemo)((()=>(0,l.checkIfByTransform)(r,{edge:n})?r.useBrick:null),[n,r]),u=(0,o.useMemo)((()=>({edge:n})),[n]);(0,o.useEffect)((()=>{s||setTimeout((()=>{null==c||c(t,null)}))}),[t,c,s]),(0,o.useEffect)((()=>()=>{null==d||d(t)}),[]);var f=(0,o.useCallback)((e=>{e&&setTimeout((()=>{null==c||c(t,e.parentElement)}))}),[t,c]),v=(0,o.useCallback)((()=>{setTimeout((()=>{null==c||c(t,null)}))}),[t,c]);return s?a().createElement(i.ReactUseBrick,{refCallback:f,ignoredCallback:v,useBrick:s,data:u}):null}},9575:(e,t,n)=>{n.d(t,{C:()=>a});var r=n(8657),o=n.n(r);function a(e){var{id:t,strokeColor:n}=e;return o().createElement("marker",{id:t,viewBox:"0 0 6 6",refX:3,refY:3,markerWidth:6,markerHeight:6,orient:"auto"},o().createElement("path",{d:"M 0.5 0.5 L 5.5 3 L 0.5 5.5 z",stroke:n,strokeWidth:1,fill:n}))}},2370:(e,t,n)=>{n.d(t,{n:()=>l});var r=n(8657),o=n.n(r),a=n(9494),i=n(9464);function l(e){var{nodes:t,nodeBricks:n,onRendered:a}=e,[i,l]=(0,r.useState)(!1),[d,s]=(0,r.useState)([]),u=(0,r.useMemo)((()=>new Map),[]),f=(0,r.useCallback)(((e,t)=>{t&&u.set(e,t),s((t=>t.includes(e)?t:t.concat(e)))}),[u]),v=(0,r.useCallback)((e=>{s((t=>{var n=t.indexOf(e);return-1===n?t:t.slice(0,n).concat(t.slice(n+1))})),u.delete(e)}),[u]);return(0,r.useEffect)((()=>{l(!(null!=t&&t.some((e=>!d.includes(e.id)))))}),[t,d]),(0,r.useEffect)((()=>{null==a||a(i?u:null)}),[u,i]),o().createElement(o().Fragment,null,null==t?void 0:t.map((e=>o().createElement("div",{key:e.id,className:"node"},o().createElement(c,{nodeBricks:n,node:e,onRendered:f,onUnmount:v})))))}function c(e){var{node:t,nodeBricks:n,onRendered:l,onUnmount:c}=e,d=(0,r.useMemo)((()=>{var e;return null===(e=function(e,t){return null==t?void 0:t.find((t=>t.nodeType?[].concat(t.nodeType).includes(e.type):(0,i.checkIfByTransform)(t,{node:e})))}(t,n))||void 0===e?void 0:e.useBrick}),[t,n]),s=(0,r.useMemo)((()=>({node:t})),[t]);(0,r.useEffect)((()=>{d||setTimeout((()=>{null==l||l(t.id,null)}))}),[t.id,l,d]),(0,r.useEffect)((()=>()=>{null==c||c(t.id)}),[]);var u=(0,r.useCallback)((e=>{e&&setTimeout((()=>{null==l||l(t.id,e)}))}),[t.id,l]),f=(0,r.useCallback)((()=>{setTimeout((()=>{null==l||l(t.id,null)}))}),[t.id,l]);return d?o().createElement(a.ReactUseBrick,{refCallback:u,ignoredCallback:f,useBrick:d,data:s}):null}},5318:(e,t,n)=>{n.d(t,{IC:()=>r,_w:()=>o,no:()=>a,wl:()=>i});var r="var(--palette-gray-5)",o=1,a="curveBasis",i=20},6365:(e,t,n)=>{function r(e,t){var[n,r]=t,o=1/0,a=1/0,i=-1/0,l=-1/0;for(var c of e){var d=c.width/2,s=c.height/2,u=c.x-d,f=c.x+d,v=c.y-s,h=c.y+s;u<o&&(o=u),f>i&&(i=f),v<a&&(a=v),h>l&&(l=h)}return[(n-(i-o))/2-a,(r-(l-a))/2-o]}n.d(t,{i:()=>r})},1251:(e,t,n)=>{function r(e,t){return e.map((e=>{var{id:n}=e,r=null==t?void 0:t.get(n);if(r){var{offsetWidth:o,offsetHeight:a}=r;if(0!==o&&0!==a)return{x0:r.offsetLeft-o/2-3,y0:r.offsetTop-a/2-3,w:o+6,h:a+6,id:n}}})).filter(Boolean)}n.d(t,{i:()=>r})},5173:(e,t,n)=>{n.d(t,{T:()=>a});var r=n(908),o=n.n(r);function a(e,t,n,r){var a=new(o().graphlib.Graph);for(var i of(a.setGraph(r),a.setDefaultEdgeLabel((function(){return{}})),null!=t?t:[])){var l=null==e?void 0:e.node(i.id);a.setNode(i.id,(null==l?void 0:l.data)===i?l:{id:i.id,data:i})}for(var c of null!=n?n:[])a.setEdge(c.source,c.target,{data:c});return a}},7201:(e,t,n)=>{n.d(t,{E:()=>a});var r=n(908),o=n.n(r);function a(e){var{graph:t,nodesRefRepository:n,nodePadding:r}=e;if(!t||!n||0===t.nodeCount())return null;var a=function(e){if(Array.isArray(e)){var t=e[0],n=e.length>1?e[1]:t;return[t,n,e.length>2?e[2]:t,e.length>3?e[3]:n]}return new Array(4).fill(e)}(r);for(var i of t.nodes()){var l,c,d=t.node(i);if(d){var s=n.get(i);d.width=(null!==(l=null==s?void 0:s.offsetWidth)&&void 0!==l?l:10)+a[1]+a[3],d.height=(null!==(c=null==s?void 0:s.offsetHeight)&&void 0!==c?c:10)+a[0]+a[2]}else console.error("Diagram node not found: %s",i)}o().layout(t);var u=[];for(var f of t.nodes()){var v,h=t.node(f);if(h){u.push(h);var m=h.x-h.width/2+a[3],p=h.y-h.height/2+a[0],g=null===(v=n.get(f))||void 0===v?void 0:v.parentElement;g&&(g.style.left="".concat(m,"px"),g.style.top="".concat(p,"px"),g.style.visibility="visible")}}return{nodes:u,edges:t.edges().map((e=>t.edge(e)))}}},4126:(e,t,n)=>{function r(e,t,n){return 0===e.length&&0===t.length?e:t.map((e=>{var{line:{text:t,label:r,$id:o},edge:a}=e,i=n.get(o);if((t||r)&&i&&i.getAttribute("d")){var{x:l,y:c,width:d,height:s}=i.getBBox(),u=1e3,f=l-u,v=c-u,h=l+d+u,m=c+s+u,p=i.getPointAtLength(i.getTotalLength()/2);return{text:t,label:r,edge:a,position:[p.x,p.y],lineRect:{left:f,top:v,right:h,bottom:m},id:o}}})).filter(Boolean)}n.d(t,{K:()=>r})},5731:(e,t,n)=>{n.d(t,{b:()=>p});var r=n(3028),o=n(2159),a=n(1211),i=n(9464),l=n(5318),c=n(3698),d=n(1479),s=n(6481),u=n(9389),f=n(8282),v=n(5004);function h(e,t,n){if(!Array.isArray(e))return"";var r;switch(n){case"curveBasis":r=c.ZP;break;case"curveBumpX":r=d.sj;break;case"curveBumpY":r=d.BW;break;case"curveMonotoneX":r=s.Z;break;case"curveMonotoneY":r=s.s;break;case"curveNatural":r=u.Z;break;default:r=f.Z}var o=0,a=0;if(t){var{x:i,y:l}=e[e.length-2],{x:h,y:m}=e[e.length-1],p=t/Math.sqrt(Math.pow(h-i,2)+Math.pow(m-l,2));o=(i-h)*p,a=(l-m)*p}var g=e;return(0,v.Z)().x(((t,n)=>t.x-(n===e.length-1?o:0))).y(((t,n)=>t.y-(n===e.length-1?a:0))).curve(r)(g)}var m=["label"];function p(e,t){var n=[],c=[],d=function(e){var d,s=null!==(d=null==t?void 0:t.find((t=>{return n=e,!!(r=t)&&(r.edgeType?[].concat(r.edgeType).includes(n.type):(0,i.checkIfByTransform)(r,{edge:n}));var n,r})))&&void 0!==d?d:{},{label:f}=s,v=(0,o.Z)(s,m),p=i.__secret_internals.legacyDoTransform({edge:e},v);if(!1===(null==p?void 0:p.draw))return 1;var g,k=(0,r.Z)((0,r.Z)({strokeColor:l.IC,strokeWidth:l._w,curveType:l.no,interactStrokeWidth:l.wl},p),{},{label:f,$id:(0,a.uniqueId)("line-")});if(k.arrow){var b={strokeColor:k.strokeColor};-1===(g=(0,a.findIndex)(c,b))&&(g=c.push(b)-1)}var y=h(u,k.arrow?-5:0,k.curveType);n.push({line:k,d:y,markerIndex:g,edge:e})};for(var{data:s,points:u}of e)d(s);return{renderedLines:n,markers:c}}},4510:(e,t,n)=>{n.d(t,{k:()=>i});var r=n(3028),o=n(9464),a=n(5318);function i(e,t){var{nodes:n,nodesRefRepository:i,nodesConnect:l,setConnectLineState:c,setConnectLineTo:d,onSwitchActiveNode:s,onNodesConnect:u}=t;function f(e){if(i){var t,r=function(t){if(e(a))return{v:null==n?void 0:n.find((e=>e.id===t))}};for(var[o,a]of i)if(t=r(o))return t.v}}if(l){var v=f((t=>t.contains(e.target)));if(v){if(l.sourceType){if(![].concat(l.sourceType).includes(v.type))return}else if(!(0,o.checkIfByTransform)(l,{source:v}))return;c({from:[e.clientX,e.clientY],options:(0,r.Z)({strokeColor:a.IC,strokeWidth:a._w},o.__secret_internals.legacyDoTransform({source:v},l))}),d([e.clientX,e.clientY]),null==s||s(v.id);var h=e=>{d([e.clientX,e.clientY])},m=e=>{document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",m),c(null);var t=e.composedPath(),n=f((e=>t.includes(e)));n&&v!==n&&(null==u||u({source:v,target:n}))};document.addEventListener("mousemove",h),document.addEventListener("mouseup",m)}}}},5702:(e,t,n)=>{n.d(t,{p:()=>o});var r=n(1211);function o(e,t){var{renderedNodes:n,renderedEdges:r,activeNodeId:o}=t,l=o?n.find((e=>e.id===o)):void 0;if(l){var c,d,s;switch(e.key||e.keyCode||e.which){case"ArrowLeft":case 37:d=a(n,l,-1),c="switch-active-node";break;case"ArrowUp":case 38:d=i(n,r,l,-1),c="switch-active-node";break;case"ArrowRight":case 39:d=a(n,l,1),c="switch-active-node";break;case"ArrowDown":case 40:d=i(n,r,l,1),c="switch-active-node";break;case"Backspace":case 8:case"Delete":case 46:c="delete-node",d=l}if(c)return e.preventDefault(),e.stopPropagation(),{action:c,node:null===(s=d)||void 0===s?void 0:s.data}}}function a(e,t,n){var o,a=e.filter((e=>e!==t&&(o=(e.x-t.x)*n)>0&&o>Math.abs(t.y-e.y)));return(0,r.minBy)(a,(e=>(t.y-e.y)**2+(t.x-e.x)**2))}function i(e,t,n,o){var a=1===o?"source":"target",i=1===o?"target":"source",l=t.filter((e=>{var{data:t}=e;return t[a]===n.id&&t[i]!==n.id})).map((t=>{var{data:n}=t;return e.find((e=>e.id===n[i]))})).filter((e=>e&&(e.y-n.y)*o>0));return(0,r.minBy)(l,(e=>(n.y-e.y)**2+(n.x-e.x)**2))}},6436:(e,t,n)=>{n.d(t,{Z:()=>l});var r=n(9601),o=n.n(r),a=n(2609),i=n.n(a)()(o());i.push([e.id,":host{display:block;width:100%;height:100%;overflow:hidden}:host([hidden]){display:none}*{box-sizing:border-box}.diagram{width:100%;height:100%;position:relative;opacity:0}.diagram:focus{outline:none}.ready{opacity:1}.dragger,\n.lines,\n.line-labels,\n.nodes{position:absolute;top:0;left:0}.node{position:absolute;visibility:hidden}.dragger{width:100%;height:100%;cursor:-webkit-grab;cursor:grab}.grabbing{cursor:-webkit-grabbing;cursor:grabbing}.line-label{position:absolute;transform:translate(-50%,-50%);white-space:pre-line;width:-webkit-max-content;width:-moz-max-content;width:max-content;text-align:center}.lines{pointer-events:none}.line.interactable{pointer-events:auto}.connect-line{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none}.connect-line:not(.connecting){display:none}",""]);const l=i.toString()}}]);
-//# sourceMappingURL=6457.0e22ff80.js.map