@next-bricks/diagram 0.4.1 → 0.5.0

package/dist/types.json

@@ -141,6 +141,16 @@
           "type": "keyword",
           "value": "boolean"
         }
+      },
+      {
+        "name": "nodesConnect",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "NodesConnectOptions"
+          }
+        }
       }
     ],
     "events": [
@@ -188,6 +198,18 @@
             }
           }
         }
+      },
+      {
+        "name": "nodes.connect",
+        "detail": {
+          "annotation": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "ConnectLineDetail"
+            }
+          }
+        }
       }
     ],
     "methods": [
@@ -600,6 +622,36 @@
             },
             "optional": true,
             "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "cursor"
+            },
+            "annotation": {
+              "type": "indexedAccess",
+              "objectType": {
+                "type": "reference",
+                "typeName": {
+                  "type": "qualifiedName",
+                  "left": {
+                    "type": "identifier",
+                    "name": "React"
+                  },
+                  "right": {
+                    "type": "identifier",
+                    "name": "CSSProperties"
+                  }
+                }
+              },
+              "indexType": {
+                "type": "jsLiteral",
+                "value": "cursor"
+              }
+            },
+            "optional": true,
+            "computed": false
           }
         ]
       },
@@ -657,6 +709,10 @@
                 {
                   "type": "keyword",
                   "value": "boolean"
+                },
+                {
+                  "type": "keyword",
+                  "value": "null"
                 }
               ]
             },
@@ -798,6 +854,102 @@
           }
         ]
       },
+      {
+        "type": "interface",
+        "name": "NodesConnectOptions",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "sourceType"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                {
+                  "type": "array",
+                  "elementType": {
+                    "type": "keyword",
+                    "value": "string"
+                  }
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "if"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                {
+                  "type": "keyword",
+                  "value": "boolean"
+                },
+                {
+                  "type": "keyword",
+                  "value": "null"
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "strokeColor"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "strokeWidth"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "arrow"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "boolean"
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
+      },
       {
         "type": "interface",
         "name": "LineTarget",
@@ -830,6 +982,42 @@
             "computed": false
           }
         ]
+      },
+      {
+        "type": "interface",
+        "name": "ConnectLineDetail",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "source"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "DiagramNode"
+              }
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "target"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "DiagramNode"
+              }
+            },
+            "computed": false
+          }
+        ]
       }
     ]
   }

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { LineTextClipPath, RenderedLineLabel } from "./interfaces";
+export interface ClipPathComponentProps {
+    clipPathPrefix: string;
+    clipPath: LineTextClipPath;
+    renderedLineLabels: RenderedLineLabel[];
+}
+export declare function ClipPathComponent({ clipPath, clipPathPrefix, renderedLineLabels, }: ClipPathComponentProps): JSX.Element | null;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ConnectLineState, PositionTuple } from "./interfaces";
+export interface ConnectLineComponentProps {
+    connectLineState: ConnectLineState | null;
+    connectLineTo: PositionTuple;
+    markerPrefix: string;
+}
+export declare function ConnectLineComponent({ connectLineState, connectLineTo, markerPrefix, }: ConnectLineComponentProps): JSX.Element;

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface MarkerComponentProps {
+    id: string;
+    strokeColor?: string;
+}
+export declare function MarkerComponent({ id, strokeColor, }: MarkerComponentProps): JSX.Element;

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 } from "./interfaces";
+import type { DiagramEdge, DiagramNode, LayoutOptionsDagre, LineConf, NodeBrickConf, LineTarget, ConnectLineDetail, NodesConnectOptions } from "./interfaces";
 export interface EoDiagramProps {
     layout?: "dagre";
     nodes?: DiagramNode[];
@@ -9,6 +9,7 @@ export interface EoDiagramProps {
     nodeBricks?: NodeBrickConf[];
     lines?: LineConf[];
     layoutOptions?: LayoutOptionsDagre;
+    nodesConnect?: NodesConnectOptions;
     activeNodeId?: string;
     disableKeyboardAction?: boolean;
 }
@@ -35,6 +36,7 @@ export declare class EoDiagram extends ReactNextElement implements EoDiagramProp
     accessor layoutOptions: LayoutOptionsDagre | undefined;
     accessor activeNodeId: string | undefined;
     accessor disableKeyboardAction: boolean | undefined;
+    accessor nodesConnect: NodesConnectOptions | undefined;
     callOnLineLabel(id: string, method: string, ...args: unknown[]): void;
     render(): React.JSX.Element;
 }
@@ -43,5 +45,6 @@ export interface EoDiagramComponentProps extends EoDiagramProps {
     onSwitchActiveNode?(id: string | undefined): void;
     onNodeDelete?(node: DiagramNode): void;
     onLineDoubleClick?(line: LineTarget): void;
+    onNodesConnect?(detail: ConnectLineDetail): void;
 }
-export declare function LegacyEoDiagramComponent({ layout, nodes, edges, nodeBricks, lines, layoutOptions, activeNodeId, disableKeyboardAction, onActiveNodeChange, onSwitchActiveNode, onNodeDelete, onLineDoubleClick, }: EoDiagramComponentProps, ref: React.Ref<DiagramRef>): React.JSX.Element;
+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;

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

@@ -1,3 +1,4 @@
+/// <reference types="trusted-types" />
 import type { CSSProperties } from "react";
 import type { UseSingleBrickConf } from "@next-core/react-runtime";
 export interface DiagramNode {
@@ -81,9 +82,10 @@ export interface LineConf {
     arrow?: boolean;
     text?: TextOptions;
     label?: LineLabelConf;
+    cursor?: React.CSSProperties["cursor"];
 }
 export interface LineLabelConf {
-    if?: string | boolean;
+    if?: string | boolean | null;
     useBrick: UseSingleBrickConf;
 }
 export interface TextOptions {
@@ -116,3 +118,18 @@ export interface LineTarget {
     id: string;
     edge: DiagramEdge;
 }
+export interface ConnectLineDetail {
+    source: DiagramNode;
+    target: DiagramNode;
+}
+export interface NodesConnectOptions {
+    sourceType?: string | string[];
+    if?: string | boolean | null;
+    strokeColor?: string;
+    strokeWidth?: number;
+    arrow?: boolean;
+}
+export interface ConnectLineState {
+    from: PositionTuple;
+    options: NodesConnectOptions;
+}

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

@@ -1,2 +1,2 @@
-import type { RenderedNode } from "../interfaces";
-export declare function getCenterOffsets(renderedNodes: RenderedNode[], [canvasWidth, canvasHeight]: [canvasWidth: number, canvasHeight: number]): [offsetX: number, offsetY: number];
+import type { PositionTuple, RenderedNode } from "../interfaces";
+export declare function getCenterOffsets(renderedNodes: RenderedNode[], [canvasWidth, canvasHeight]: [canvasWidth: number, canvasHeight: number]): PositionTuple;

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

@@ -0,0 +1,2 @@
+import type { LineTextClipPath, RefRepository, RenderedLineLabel } from "../interfaces";
+export declare function getClipPathList(renderedLineLabels: RenderedLineLabel[], lineLabelsRefRepository: RefRepository): LineTextClipPath[];

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

@@ -0,0 +1,3 @@
+import dagre from "@dagrejs/dagre";
+import type { DiagramEdge, DiagramNode, RenderedNode } from "../interfaces";
+export declare function getDagreGraph(previousGraph: dagre.graphlib.Graph<RenderedNode> | null, nodes: DiagramNode[] | undefined, edges: DiagramEdge[] | undefined, dagreGraphOptions: dagre.GraphLabel): dagre.graphlib.Graph<RenderedNode>;

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

@@ -0,0 +1,11 @@
+import dagre from "@dagrejs/dagre";
+import type { RefRepository, RenderedEdge, RenderedNode } from "../interfaces";
+export interface RenderedDiagram {
+    nodes: RenderedNode[];
+    edges: RenderedEdge[];
+}
+export declare function getRenderedDiagram({ graph, nodesRefRepository, nodePadding, }: {
+    graph: dagre.graphlib.Graph<RenderedNode> | null;
+    nodesRefRepository: RefRepository | null;
+    nodePadding: number;
+}): RenderedDiagram | null;

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

@@ -0,0 +1,2 @@
+import type { RenderedLine, RenderedLineLabel } from "../interfaces";
+export declare function getRenderedLineLabels(previous: RenderedLineLabel[], renderedLines: RenderedLine[], linePaths: Map<string, SVGPathElement | null>): RenderedLineLabel[];

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

@@ -0,0 +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, }: {
+    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;
+    onNodesConnect?(detail: ConnectLineDetail): void;
+}): void;

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

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

package/docs/eo-diagram.md

@@ -244,18 +244,28 @@ children:
         - edgeType: link
           strokeColor: var(--theme-blue-color)
           arrow: true
-          text: |-
-            <%
-              DATA.edge.description
-                ? {
-                    content: DATA.edge.description,
-                    style: {
-                      color: "var(--color-secondary-text)",
-                      fontSize: "11px",
-                    },
-                  }
-                : null
-            %>
+          interactable: true
+          label:
+            useBrick:
+              brick: diagram.editable-label
+              properties:
+                label: <% DATA.edge.description %>
+                type: line
+              events:
+                label.change:
+                  if: <% (DATA.edge.description || "") !== (EVENT.detail || "") %>
+                  action: context.replace
+                  args:
+                    - edges
+                    - |-
+                      <%
+                        CTX.edges.map((edge) =>
+                          edge.source === DATA.edge.source &&
+                          edge.target === DATA.edge.target
+                            ? { ...edge, description: EVENT.detail }
+                            : edge
+                        )
+                      %>
         - edgeType: menu
           strokeColor: var(--palette-gray-5)
           arrow: true
@@ -263,6 +273,14 @@ children:
         nodePadding: 10
       activeNodeId: <%= CTX.activeNodeId %>
       disableKeyboardAction: <%= CTX.editingLabelNodes.length > 0 %>
+      nodesConnect:
+        arrow: true
+        strokeColor: |-
+          <%
+            DATA.source.type === "board"
+              ? "var(--palette-gray-5)"
+              : "var(--theme-blue-color)"
+          %>
       nodeBricks:
         - useBrick:
             brick: visual-builder.page-arch-node
@@ -378,4 +396,34 @@ children:
                         target !== CTX.targetNode.id
                     )
                   %>
+      line.dblclick:
+        target: _self
+        method: callOnLineLabel
+        args:
+          - <% EVENT.detail.id %>
+          - enableEditing
+      nodes.connect:
+        if: |-
+          <%
+            EVENT.detail.target.type !== "board" &&
+            !CTX.edges.some(
+              (edge) =>
+                edge.source === EVENT.detail.source.id &&
+                edge.target === EVENT.detail.target.id
+            )
+          %>
+        action: context.replace
+        args:
+          - edges
+          - |-
+            <%
+              CTX.edges.concat({
+                source: EVENT.detail.source.id,
+                target: EVENT.detail.target.id,
+                type:
+                  EVENT.detail.source.type === "board"
+                    ? "menu"
+                    : "link",
+              })
+            %>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/diagram",
-  "version": "0.4.1",
+  "version": "0.5.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": "0cdc43e91e4e44b84465de1e39086faf891dfaf3"
+  "gitHead": "dd82c267e417e4c015842b9770e1c35be0154b10"
 }

package/dist/chunks/4922.d504ca2a.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_next_bricks_diagram=self.webpackChunk_next_bricks_diagram||[]).push([[4922],{4922:(e,t,a)=>{a.r(t);var n=a(3028),l=a(3395),i=a(1815),r=a(381),o=a(687),s=a(5066),c=a(8657),d=a.n(c),u=a(5727),h=a(305),v=(a(928),a(908)),f=a.n(v),b=a(1105),p=a(7397),g=a(2779),m=a.n(g),k=a(1211),y=a(9494),w=a(9464);function Z(e){var{nodes:t,nodeBricks:a,onRendered:n}=e,[l,i]=(0,c.useState)(!1),[r,o]=(0,c.useState)([]),s=(0,c.useMemo)((()=>new Map),[]),u=(0,c.useCallback)(((e,t)=>{t&&s.set(e,t),o((t=>t.includes(e)?t:t.concat(e)))}),[s]),h=(0,c.useCallback)((e=>{o((t=>{var a=t.indexOf(e);return-1===a?t:t.slice(0,a).concat(t.slice(a+1))})),s.delete(e)}),[s]);return(0,c.useEffect)((()=>{i(!(null!=t&&t.some((e=>!r.includes(e.id)))))}),[t,r]),(0,c.useEffect)((()=>{null==n||n(l?s:null)}),[s,l]),d().createElement(d().Fragment,null,null==t?void 0:t.map((e=>d().createElement("div",{key:e.id,className:"node"},d().createElement(x,{nodeBricks:a,node:e,onRendered:u,onUnmount:h})))))}function x(e){var{node:t,nodeBricks:a,onRendered:n,onUnmount:l}=e,i=(0,c.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,w.checkIfByTransform)(t,{node:e})))}(t,a))||void 0===e?void 0:e.useBrick}),[t,a]),r=(0,c.useMemo)((()=>({node:t})),[t]);(0,c.useEffect)((()=>{i||setTimeout((()=>{null==n||n(t.id,null)}))}),[t.id,n,i]),(0,c.useEffect)((()=>()=>{null==l||l(t.id)}),[]);var o=(0,c.useCallback)((e=>{e&&setTimeout((()=>{null==n||n(t.id,e)}))}),[t.id,n]),s=(0,c.useCallback)((()=>{setTimeout((()=>{null==n||n(t.id,null)}))}),[t.id,n]);return i?d().createElement(y.ReactUseBrick,{refCallback:o,ignoredCallback:s,useBrick:i,data:r}):null}function E(e,t,a){var n,l=e.filter((e=>e!==t&&(n=(e.x-t.x)*a)>0&&n>Math.abs(t.y-e.y)));return(0,k.minBy)(l,(e=>(t.y-e.y)**2+(t.x-e.x)**2))}function M(e,t,a,n){var l=1===n?"source":"target",i=1===n?"target":"source",r=t.filter((e=>{var{data:t}=e;return t[l]===a.id&&t[i]!==a.id})).map((t=>{var{data:a}=t;return e.find((e=>e.id===a[i]))})).filter((e=>e&&(e.y-a.y)*n>0));return(0,k.minBy)(r,(e=>(a.y-e.y)**2+(a.x-e.x)**2))}var C=a(2159),N="var(--palette-gray-5)",W=1,B="curveBasis",S=20,R=a(3698),D=a(1479),L=a(6481),T=a(9389),A=a(8282),I=a(5004);function O(e,t,a){if(!Array.isArray(e))return"";var n;switch(a){case"curveBasis":n=R.ZP;break;case"curveBumpX":n=D.sj;break;case"curveBumpY":n=D.BW;break;case"curveMonotoneX":n=L.Z;break;case"curveMonotoneY":n=L.s;break;case"curveNatural":n=T.Z;break;default:n=A.Z}var l=0,i=0;if(t){var{x:r,y:o}=e[e.length-2],{x:s,y:c}=e[e.length-1],d=t/Math.sqrt(Math.pow(s-r,2)+Math.pow(c-o,2));l=(r-s)*d,i=(o-c)*d}var u=e;return(0,I.Z)().x(((t,a)=>t.x-(a===e.length-1?l:0))).y(((t,a)=>t.y-(a===e.length-1?i:0))).curve(n)(u)}var z=["label"];var P,_,K,U,$,H,X,Y,q,j,F,G,J,Q,V,ee,te,ae,ne,le,ie,re,oe,se,ce,de,ue,he,ve,fe,be,pe,ge,me=a(6436);function ke(e){var{labels:t,onRendered:a}=e,[n,l]=(0,c.useState)(!1),[i,r]=(0,c.useState)([]),o=(0,c.useMemo)((()=>new Map),[]),s=(0,c.useCallback)(((e,t)=>{t&&o.set(e,t),r((t=>t.includes(e)?t:t.concat(e)))}),[o]),u=(0,c.useCallback)((e=>{r((t=>{var a=t.indexOf(e);return-1===a?t:t.slice(0,a).concat(t.slice(a+1))})),o.delete(e)}),[o]);return(0,c.useEffect)((()=>{l(!(null!=t&&t.some((e=>!i.includes(e.id)))))}),[t,i]),(0,c.useEffect)((()=>{null==a||a(n?o:null)}),[o,n]),d().createElement(d().Fragment,null,null==t?void 0:t.map((e=>{var{text:t,label:a,position:n,id:l,edge:i}=e;return a?d().createElement("div",{key:l,className:"line-label",style:{left:n[0],top:n[1]}},d().createElement(we,{id:l,edge:i,label:a,onRendered:s,onUnmount:u})):d().createElement(ye,{key:l,id:l,text:t,position:n,onRendered:s})})))}function ye(e){var{id:t,text:a,position:l,onRendered:i}=e,r=(0,c.useCallback)((e=>{null==i||i(t,e)}),[t,i]);return d().createElement("div",{className:"line-label",ref:r,style:(0,n.Z)({left:l[0],top:l[1]},a.style)},a.content)}function we(e){var{id:t,edge:a,label:n,onRendered:l,onUnmount:i}=e,r=(0,c.useMemo)((()=>(0,w.checkIfByTransform)(n,{edge:a})?n.useBrick:null),[a,n]),o=(0,c.useMemo)((()=>({edge:a})),[a]);(0,c.useEffect)((()=>{r||setTimeout((()=>{null==l||l(t,null)}))}),[t,l,r]),(0,c.useEffect)((()=>()=>{null==i||i(t)}),[]);var s=(0,c.useCallback)((e=>{e&&setTimeout((()=>{null==l||l(t,e.parentElement)}))}),[t,l]),u=(0,c.useCallback)((()=>{setTimeout((()=>{null==l||l(t,null)}))}),[t,l]);return r?d().createElement(y.ReactUseBrick,{refCallback:s,ignoredCallback:u,useBrick:r,data:o}):null}var Ze,{defineElement:xe,property:Ee,event:Me,method:Ce}=(0,u.createDecorators)(),Ne=(0,c.forwardRef)(et);_=xe("eo-diagram",{styleTexts:[me.Z]}),K=Ee({type:String}),$=Ee({attribute:!1}),X=Ee({attribute:!1}),q=Ee({attribute:!1}),F=Ee({attribute:!1}),J=Ee({attribute:!1}),V=Ee({type:String}),te=Ee({type:Boolean}),ne=Me({type:"activeNode.change"}),oe=Me({type:"node.delete"}),ue=Me({type:"line.dblclick"}),be=Ce();var We=new WeakMap,Be=new WeakMap,Se=new WeakMap,Re=new WeakMap,De=new WeakMap,Le=new WeakMap,Te=new WeakMap,Ae=new WeakMap,Ie=new WeakMap,Oe=new WeakMap,ze=new WeakMap,Pe=new WeakMap,_e=new WeakMap,Ke=new WeakMap,Ue=new WeakMap,$e=new WeakMap,He=new WeakMap,Xe=new WeakMap,Ye=new WeakMap;class qe extends h.ReactNextElement{constructor(){super(...arguments),(0,l.Z)(this,$e,{get:Ve,set:Qe}),(0,l.Z)(this,_e,{get:Je,set:Ge}),(0,l.Z)(this,Oe,{get:Fe,set:je}),(0,l.Z)(this,We,{writable:!0,value:(pe(this),U(this))}),(0,l.Z)(this,Be,{writable:!0,value:H(this)}),(0,l.Z)(this,Se,{writable:!0,value:Y(this)}),(0,l.Z)(this,Re,{writable:!0,value:j(this)}),(0,l.Z)(this,De,{writable:!0,value:G(this)}),(0,l.Z)(this,Le,{writable:!0,value:Q(this)}),(0,l.Z)(this,Te,{writable:!0,value:ee(this)}),(0,l.Z)(this,Ae,{writable:!0,value:ae(this)}),(0,l.Z)(this,Ie,{writable:!0,value:le(this)}),(0,l.Z)(this,ze,{writable:!0,value:e=>{(0,o.Z)(this,Oe).emit(e)}}),(0,l.Z)(this,Pe,{writable:!0,value:se(this)}),(0,l.Z)(this,Ke,{writable:!0,value:e=>{(0,o.Z)(this,_e).emit(e)}}),(0,l.Z)(this,Ue,{writable:!0,value:he(this)}),(0,l.Z)(this,He,{writable:!0,value:e=>{(0,o.Z)(this,$e).emit(e)}}),(0,l.Z)(this,Xe,{writable:!0,value:e=>{this.activeNodeId=e}}),(0,l.Z)(this,Ye,{writable:!0,value:(0,c.createRef)()})}get layout(){return(0,o.Z)(this,We)}set layout(e){(0,r.Z)(this,We,e)}get nodes(){return(0,o.Z)(this,Be)}set nodes(e){(0,r.Z)(this,Be,e)}get edges(){return(0,o.Z)(this,Se)}set edges(e){(0,r.Z)(this,Se,e)}get nodeBricks(){return(0,o.Z)(this,Re)}set nodeBricks(e){(0,r.Z)(this,Re,e)}get lines(){return(0,o.Z)(this,De)}set lines(e){(0,r.Z)(this,De,e)}get layoutOptions(){return(0,o.Z)(this,Le)}set layoutOptions(e){(0,r.Z)(this,Le,e)}get activeNodeId(){return(0,o.Z)(this,Te)}set activeNodeId(e){(0,r.Z)(this,Te,e)}get disableKeyboardAction(){return(0,o.Z)(this,Ae)}set disableKeyboardAction(e){(0,r.Z)(this,Ae,e)}callOnLineLabel(e,t){for(var a,n=arguments.length,l=new Array(n>2?n-2:0),i=2;i<n;i++)l[i-2]=arguments[i];null===(a=(0,o.Z)(this,Ye).current)||void 0===a||a.callOnLineLabel(e,t,...l)}render(){return d().createElement(Ne,{ref:(0,o.Z)(this,Ye),layout:this.layout,nodes:this.nodes,edges:this.edges,nodeBricks:this.nodeBricks,lines:this.lines,layoutOptions:this.layoutOptions,activeNodeId:this.activeNodeId,disableKeyboardAction:this.disableKeyboardAction,onActiveNodeChange:(0,o.Z)(this,ze),onSwitchActiveNode:(0,o.Z)(this,Xe),onNodeDelete:(0,o.Z)(this,Ke),onLineDoubleClick:(0,o.Z)(this,He)})}}function je(e){re(this,e)}function Fe(){return ie(this)}function Ge(e){de(this,e)}function Je(){return ce(this)}function Qe(e){fe(this,e)}function Ve(){return ve(this)}function et(e,t){var{layout:a,nodes:l,edges:i,nodeBricks:r,lines:o,layoutOptions:s,activeNodeId:u,disableKeyboardAction:h,onActiveNodeChange:v,onSwitchActiveNode:g,onNodeDelete:y,onLineDoubleClick:x}=e,[R,D]=(0,c.useState)(null),[L,T]=(0,c.useState)(!1),[A,I]=(0,c.useState)(0),[P,_]=(0,c.useState)(null),[K,U]=(0,c.useState)(0),[$,H]=(0,c.useState)(null),[X,Y]=(0,c.useState)([]),[q,j]=(0,c.useState)([]),[F,G]=(0,c.useState)([]),J=(0,c.useRef)(null),[Q,V]=(0,c.useState)(!1),[ee,te]=(0,c.useState)({k:1,x:0,y:0}),ae=(0,c.useRef)(new Map),ne=(0,c.useRef)(null),le=(0,c.useRef)(null),[ie,re]=(0,c.useState)([0,0]),[oe,se]=(0,c.useState)(!1);(0,c.useImperativeHandle)(t,(()=>({callOnLineLabel(e,t){for(var a,n=arguments.length,l=new Array(n>2?n-2:0),i=2;i<n;i++)l[i-2]=arguments[i];null==$||null===(a=$.get(e))||void 0===a||null===(a=a.firstElementChild)||void 0===a||a[t](...l)}})));var ce=(0,c.useMemo)((()=>(0,n.Z)({rankdir:"TB",ranksep:50,edgesep:10,nodesep:50,nodePadding:0},s)),[s]),{nodePadding:de}=ce,ue=(0,c.useMemo)((()=>(0,k.pick)(ce,["rankdir","ranksep","edgesep","nodesep","align"])),[ce]);(0,c.useEffect)((()=>{var e=u?null==l?void 0:l.find((e=>e.id===u)):void 0;null==v||v(e)}),[l,u,v]),(0,c.useEffect)((()=>{D((e=>{var t=new(f().graphlib.Graph);for(var a of(t.setGraph(ue),t.setDefaultEdgeLabel((function(){return{}})),null!=l?l:[])){var n=null==e?void 0:e.node(a.id);t.setNode(a.id,(null==n?void 0:n.data)===a?n:{id:a.id,data:a})}for(var r of null!=i?i:[])t.setEdge(r.source,r.target,{data:r});return t}))}),[i,l,ue]),(0,c.useEffect)((()=>{if(R&&P&&0!==R.nodeCount()){for(var e of R.nodes()){var t,a,n=R.node(e);if(n){var l=P.get(e);n.width=(null!==(t=null==l?void 0:l.offsetWidth)&&void 0!==t?t:10)+2*de,n.height=(null!==(a=null==l?void 0:l.offsetHeight)&&void 0!==a?a:10)+2*de}else console.error("Diagram node not found: %s",e)}f().layout(R);var i=[];for(var r of R.nodes()){var o,s=R.node(r);if(s){i.push(s);var c=s.x-s.width/2+de,d=s.y-s.height/2+de,u=null===(o=P.get(r))||void 0===o?void 0:o.parentElement;u&&(u.style.left="".concat(c,"px"),u.style.top="".concat(d,"px"),u.style.visibility="visible")}}Y(i),j(R.edges().map((e=>R.edge(e))))}}),[R,P,A,de]);var{renderedLines:he,markers:ve}=(0,c.useMemo)((()=>function(e,t){var a=[],l=[],i=function(e){var i,r=null!==(i=null==t?void 0:t.find((t=>{return a=e,!!(n=t)&&(n.edgeType?[].concat(n.edgeType).includes(a.type):(0,w.checkIfByTransform)(n,{edge:a}));var a,n})))&&void 0!==i?i:{},{label:s}=r,c=(0,C.Z)(r,z),d=w.__secret_internals.legacyDoTransform({edge:e},c);if(!1===(null==d?void 0:d.draw))return 1;var u,h=(0,n.Z)((0,n.Z)({strokeColor:N,strokeWidth:W,curveType:B,interactStrokeWidth:S},d),{},{label:s,$id:(0,k.uniqueId)("line-")});if(h.arrow){var v={strokeColor:h.strokeColor};-1===(u=(0,k.findIndex)(l,v))&&(u=l.push(v)-1)}var f=O(o,h.arrow?-5:0,h.curveType);a.push({line:h,d:f,markerIndex:u,edge:e})};for(var{data:r,points:o}of e)i(r);return{renderedLines:a,markers:l}}(q,o)),[o,q]);(0,c.useEffect)((()=>{var e=ne.current;if(e&&!h){var t=e=>{var t=function(e,t){var{renderedNodes:a,renderedEdges:n,activeNodeId:l}=t,i=l?a.find((e=>e.id===l)):void 0;if(i){var r,o,s;switch(e.key||e.keyCode||e.which){case"ArrowLeft":case 37:o=E(a,i,-1),r="switch-active-node";break;case"ArrowUp":case 38:o=M(a,n,i,-1),r="switch-active-node";break;case"ArrowRight":case 39:o=E(a,i,1),r="switch-active-node";break;case"ArrowDown":case 40:o=M(a,n,i,1),r="switch-active-node";break;case"Backspace":case 8:case"Delete":case 46:r="delete-node",o=i}if(r)return e.preventDefault(),e.stopPropagation(),{action:r,node:null===(s=o)||void 0===s?void 0:s.data}}}(e,{renderedNodes:X,renderedEdges:q,activeNodeId:u});"delete-node"===(null==t?void 0:t.action)?null==y||y(t.node):"switch-active-node"===(null==t?void 0:t.action)&&t.node&&(null==g||g(t.node.id))};return e.addEventListener("keydown",t),()=>{e.removeEventListener("keydown",t)}}}),[u,X,q,h,g,y]);var fe=(0,c.useCallback)((e=>{e&&(I((e=>e+1)),_(e)),T((t=>t||!!e))}),[]),be=(0,c.useCallback)((e=>{e&&(U((e=>e+1)),H(e))}),[]);(0,c.useEffect)((()=>{var e=ne.current,t=J.current;if(e&&t){var a=!1,n=(0,p.sP)().scaleExtent([1,1]).on("start",(()=>{a=!1,V(!0)})).on("zoom",(e=>{a=!0,te(e.transform)})).on("end",(()=>{V(!1),a||null==g||g(void 0)}));(0,b.Z)(t).call(n),(0,b.Z)(e).on("wheel.zoom",(e=>{e.stopPropagation(),e.preventDefault(),n.translateBy((0,b.Z)(t),e.wheelDeltaX/5,e.wheelDeltaY/5)}))}}),[g]),(0,c.useEffect)((()=>{var e=ne.current;0!==X.length&&e&&!oe&&(re(function(e,t){var[a,n]=t,l=1/0,i=1/0,r=-1/0,o=-1/0;for(var s of e){var c=s.width/2,d=s.height/2,u=s.x-c,h=s.x+c,v=s.y-d,f=s.y+d;u<l&&(l=u),h>r&&(r=h),v<i&&(i=v),f>o&&(o=f)}return[(a-(r-l))/2-i,(n-(o-i))/2-l]}(X,[e.clientWidth,e.clientHeight])),se(!0))}),[oe,X]);var pe=(0,c.useMemo)((()=>"".concat((0,k.uniqueId)("diagram-"),"-")),[]),ge="".concat(pe,"line-arrow-"),me="".concat(pe,"clip-path-");(0,c.useEffect)((()=>{G((e=>0===e.length&&0===he.length?e:he.map((e=>{var{line:{text:t,label:a,$id:n},edge:l}=e,i=ae.current.get(n);if((t||a)&&i&&i.getAttribute("d")){var{x:r,y:o,width:s,height:c}=i.getBBox(),d=1e3,u=r-d,h=o-d,v=r+s+d,f=o+c+d,b=i.getPointAtLength(i.getTotalLength()/2);return{text:t,label:a,edge:l,position:[b.x,b.y],lineRect:{left:u,top:h,right:v,bottom:f},id:n}}})).filter(Boolean)))}),[he]);var[ye,we]=d().useState([]);return(0,c.useEffect)((()=>{$&&we(F.map((e=>{var{id:t}=e,a=null==$?void 0:$.get(t);if(a){var{offsetWidth:n,offsetHeight:l}=a;if(0!==n&&0!==l)return{x0:a.offsetLeft-n/2-3,y0:a.offsetTop-l/2-3,w:n+6,h:l+6,id:t}}})).filter(Boolean))}),[K,$,F]),"dagre"!==a?d().createElement("div",null,'Diagram layout not supported: "'.concat(a,'"')):d().createElement("div",{className:m()("diagram",{ready:L&&oe}),tabIndex:-1,ref:ne},d().createElement("div",{className:m()("dragger",{grabbing:Q}),ref:J}),d().createElement("svg",{width:"100%",height:"100%",className:"lines"},d().createElement("defs",null,ve.map(((e,t)=>{var{strokeColor:a}=e;return d().createElement("marker",{key:t,id:"".concat(ge).concat(t),viewBox:"0 0 6 6",refX:3,refY:3,markerWidth:6,markerHeight:6,orient:"auto"},d().createElement("path",{d:"M 0.5 0.5 L 5.5 3 L 0.5 5.5 z",stroke:a,strokeWidth:1,fill:a}))})),ye.map((e=>{var{x0:t,y0:a,w:n,h:l,id:i}=e,r=F.find((e=>e.id===i));if(r){var{left:o,top:s,right:c,bottom:u}=r.lineRect;return d().createElement("clipPath",{key:i,id:"".concat(me).concat(i)},d().createElement("polygon",{points:["".concat(t,",").concat(a+l),"".concat(t+n,",").concat(a+l),"".concat(t+n,",").concat(a),"".concat(t,",").concat(a),"".concat(t,",").concat(s),"".concat(c,",").concat(s),"".concat(c,",").concat(u),"".concat(o,",").concat(u),"".concat(o,",").concat(s),"".concat(t,",").concat(s)].join(" ")}))}}))),d().createElement("g",{transform:"translate(".concat(ie[0]+ee.x," ").concat(ie[1]+ee.y,") scale(").concat(ee.k,")")},he.map((e=>{var t,{line:a,d:n,markerIndex:l,edge:i}=e;return d().createElement("g",{className:m()("line",{interactable:a.interactable}),key:a.$id,onDoubleClick:a.interactable?e=>(e.preventDefault(),e.stopPropagation(),null==x?void 0:x({id:a.$id,edge:i})):void 0},d().createElement("path",{ref:e=>ae.current.set(a.$id,e),stroke:a.strokeColor,strokeWidth:a.strokeWidth,d:n,fill:"none",markerEnd:void 0===l?void 0:"url(#".concat(ge).concat(l,")"),clipPath:ye.some((e=>e.id===a.$id))?"url(#".concat(me).concat(a.$id,")"):void 0}),a.interactable&&d().createElement("path",{d:n,fill:"none",stroke:"transparent",strokeWidth:null!==(t=a.interactStrokeWidth)&&void 0!==t?t:5}))})))),d().createElement("div",{className:"line-labels",style:{left:ie[0]+ee.x,top:ie[1]+ee.y}},d().createElement(ke,{labels:F,onRendered:be})),d().createElement("div",{className:"nodes",ref:le,style:{left:ie[0]+ee.x,top:ie[1]+ee.y}},d().createElement(Z,{nodes:l,nodeBricks:r,onRendered:fe})))}ge=qe,({e:[U,H,Y,j,G,Q,ee,ae,le,ie,re,se,ce,de,he,ve,fe,pe],c:[Ze,P]}=(0,s.Z)(ge,[[K,1,"layout"],[$,1,"nodes"],[X,1,"edges"],[q,1,"nodeBricks"],[F,1,"lines"],[J,1,"layoutOptions"],[V,1,"activeNodeId"],[te,1,"disableKeyboardAction"],[ne,1,"activeNodeChangeEvent",e=>(0,o.Z)(e,Ie),(e,t)=>(0,r.Z)(e,Ie,t)],[oe,1,"nodeDelete",e=>(0,o.Z)(e,Pe),(e,t)=>(0,r.Z)(e,Pe,t)],[ue,1,"lineDoubleClick",e=>(0,o.Z)(e,Ue),(e,t)=>(0,r.Z)(e,Ue,t)],[be,2,"callOnLineLabel"]],[_],0,(e=>Ye.has((0,i.Z)(e))),h.ReactNextElement)),P();var tt,at,nt,lt,it,rt,ot,st,ct,dt,ut,ht,vt,ft,bt=a(8074),{defineElement:pt,property:gt,event:mt,method:kt}=(0,u.createDecorators)(),yt=(0,c.forwardRef)(St);at=pt("diagram.editable-label",{styleTexts:[bt.Z]}),nt=gt(),it=gt({render:!1}),ot=mt({type:"label.change"}),ut=kt();var wt=new WeakMap,Zt=new WeakMap,xt=new WeakMap,Et=new WeakMap,Mt=new WeakMap,Ct=new WeakMap;class Nt extends h.ReactNextElement{constructor(){super(...arguments),(0,l.Z)(this,Et,{get:Bt,set:Wt}),(0,l.Z)(this,wt,{writable:!0,value:(ht(this),lt(this))}),(0,l.Z)(this,Zt,{writable:!0,value:rt(this)}),(0,l.Z)(this,xt,{writable:!0,value:st(this)}),(0,l.Z)(this,Mt,{writable:!0,value:e=>{(0,o.Z)(this,Et).emit(e)}}),(0,l.Z)(this,Ct,{writable:!0,value:(0,c.createRef)()})}get label(){return(0,o.Z)(this,wt)}set label(e){(0,r.Z)(this,wt,e)}get type(){return(0,o.Z)(this,Zt)}set type(e){(0,r.Z)(this,Zt,e)}enableEditing(){var e;null===(e=(0,o.Z)(this,Ct).current)||void 0===e||e.enableEditing()}render(){return d().createElement(yt,{ref:(0,o.Z)(this,Ct),label:this.label,onLabelChange:(0,o.Z)(this,Mt)})}}function Wt(e){dt(this,e)}function Bt(){return ct(this)}function St(e,t){var{label:a,onLabelChange:n}=e,l=null!=a?a:"",[i,r]=(0,c.useState)(l),[o,s]=(0,c.useState)(!1),[u,h]=(0,c.useState)(!1),v=(0,c.useRef)(null);(0,c.useImperativeHandle)(t,(()=>({enableEditing(){s(!0)}}))),(0,c.useEffect)((()=>{r(l)}),[l]);var f=(0,c.useCallback)((e=>{e.preventDefault(),e.stopPropagation(),s(!0)}),[]);(0,c.useEffect)((()=>{var e,t;o&&(null===(e=v.current)||void 0===e||e.focus({preventScroll:!0}),null===(t=v.current)||void 0===t||t.select())}),[o]);var b=(0,c.useCallback)((e=>{r(e.target.value)}),[]),p=(0,c.useCallback)((e=>{var t,a=e.key||e.keyCode||e.which;"Enter"!==a&&13!==a||null===(t=v.current)||void 0===t||t.blur()}),[]),g=(0,c.useCallback)((()=>{s(!1),h(!0)}),[]);return(0,c.useEffect)((()=>{u&&(null==n||n(i),h(!1))}),[i,n,u]),d().createElement("div",{className:m()("label",{editing:o,empty:!i})},d().createElement("input",{className:"label-input",value:i,ref:v,onChange:b,onKeyDown:p,onBlur:g}),d().createElement("div",{className:"label-text",onDoubleClick:f},i))}vt=Nt,({e:[lt,rt,st,ct,dt,ht],c:[ft,tt]}=(0,s.Z)(vt,[[nt,1,"label"],[it,1,"type"],[ot,1,"labelChange",e=>(0,o.Z)(e,xt),(e,t)=>(0,r.Z)(e,xt,t)],[ut,2,"enableEditing"]],[at],0,(e=>Ct.has((0,i.Z)(e))),h.ReactNextElement)),tt()},6436:(e,t,a)=>{a.d(t,{Z:()=>o});var n=a(9601),l=a.n(n),i=a(2609),r=a.n(i)()(l());r.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}",""]);const o=r.toString()},8074:(e,t,a)=>{a.d(t,{Z:()=>o});var n=a(9601),l=a.n(n),i=a(2609),r=a.n(i)()(l());r.push([e.id,':host{display:block;--local-label-line-height:inherit;--local-label-font-size:inherit;--local-label-color:inherit;--local-label-font-weight:inherit}:host([hidden]){display:none}:host([type="line"]){--local-label-line-height:18px;--local-label-font-size:11px;--local-label-color:var(--color-secondary-text);--local-label-font-weight:400}*{box-sizing:border-box}.label{max-width:168px;margin:-3px}.label-text,\n.label-input{width:100%;height:24px;padding:3px;border:none;line-height:var(--local-label-line-height);font-size:var(--local-label-font-size);color:var(--local-label-color);font-weight:var(--local-label-font-weight);text-align:center;font-family:inherit;cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.label-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label.editing .label-text,\n.label.empty:not(.editing) .label-text,\n.label:not(.editing) .label-input{display:none}',""]);const o=r.toString()}}]);
-//# sourceMappingURL=4922.d504ca2a.js.map