dishui 0.0.55 → 0.0.57

package/dist/components/pro/Flow/FlowCanvas.js

@@ -1,562 +1,508 @@
-import { useFlowContext as Be } from "./context/FlowContext.js";
-import { useFlowUI as Ke } from "./context/FlowUIContext.js";
-import { usePixiApp as je } from "./hooks/usePixiApp.js";
-import { useViewport as Ue } from "./hooks/useViewport.js";
-import { GridRenderer as $e } from "./canvas/GridRenderer.js";
-import { SelectionOverlay as Je } from "./canvas/SelectionOverlay.js";
-import { shapeDrawers as Ge } from "./nodes/shapes.js";
-import { findClosestHandleWorld as Et, getHandlePositions as gt, handleWorldPos as Zt } from "./nodes/NodeHandles.js";
-import { distToSegment as me, generateId as Qe, isPointInNode as Dt, rectsOverlap as tn } from "./nodes/nodeUtils.js";
-import { NodeRenderer as en } from "./nodes/NodeRenderer.js";
-import { buildEdgePath as Ze, linearizeSegments as qe, resolveEdgeEndpoints as Mt } from "./edges/edgePaths.js";
-import { EdgeRenderer as nn } from "./edges/EdgeRenderer.js";
-import { LineRenderer as rn } from "./lines/LineRenderer.js";
-import { FreehandTool as on } from "./lines/FreehandTool.js";
-import { GeometricLineTool as sn } from "./lines/GeometricLineTool.js";
-import { computeAlignmentSnap as ne } from "./hooks/useAlignmentGuides.js";
-import { AlignmentGuidesRenderer as cn } from "./canvas/AlignmentGuides.js";
-import { getDocumentSlides as dn, nextAnimIndex as an } from "./nodes/animAnchors.js";
-import { useCallback as qt, useEffect as wt, useRef as b, useState as We } from "react";
-import { jsx as Le, jsxs as ln } from "react/jsx-runtime";
-import { Graphics as Ot } from "pixi.js";
-var un = {
+import { useFlowContext as sn } from "./context/FlowContext.js";
+import { useFlowUI as cn } from "./context/FlowUIContext.js";
+import { usePixiApp as dn } from "./hooks/usePixiApp.js";
+import { useViewport as an } from "./hooks/useViewport.js";
+import { GridRenderer as ln } from "./canvas/GridRenderer.js";
+import { SelectionOverlay as un } from "./canvas/SelectionOverlay.js";
+import { shapeDrawers as Be } from "./nodes/shapes.js";
+import { findClosestHandleWorld as Gt, getHandlePositions as vt, handleWorldPos as Ut } from "./nodes/NodeHandles.js";
+import { distToSegment as Ce, generateId as fn, isPointInNode as Lt, rectsOverlap as hn } from "./nodes/nodeUtils.js";
+import { NodeRenderer as yn } from "./nodes/NodeRenderer.js";
+import { buildEdgePath as en, linearizeSegments as nn, resolveEdgeEndpoints as Et } from "./edges/edgePaths.js";
+import { EdgeRenderer as pn } from "./edges/EdgeRenderer.js";
+import { LineRenderer as xn } from "./lines/LineRenderer.js";
+import { FreehandTool as gn } from "./lines/FreehandTool.js";
+import { GeometricLineTool as wn } from "./lines/GeometricLineTool.js";
+import { computeAlignmentSnap as ae } from "./hooks/useAlignmentGuides.js";
+import { AlignmentGuidesRenderer as mn } from "./canvas/AlignmentGuides.js";
+import { getDocumentSlides as vn, nextAnimIndex as In } from "./nodes/animAnchors.js";
+import { useCallback as jt, useEffect as It, useRef as w, useState as Ke } from "react";
+import { jsx as Se, jsxs as Ue } from "react/jsx-runtime";
+import { Graphics as $t } from "pixi.js";
+var bn = {
   nw: "nwse-resize",
   ne: "nesw-resize",
   se: "nwse-resize",
   sw: "nesw-resize"
 };
-function Ae(F, E, G) {
-  const { x: Z, y: D } = E.position, W = E.width, k = E.height, z = [
+function je(_, z, P) {
+  const { x: V, y: N } = z.position, G = z.width, T = z.height, C = [
     [
       "nw",
-      Z,
-      D
+      V,
+      N
     ],
     [
       "ne",
-      Z + W,
-      D
+      V + G,
+      N
     ],
     [
       "se",
-      Z + W,
-      D + k
+      V + G,
+      N + T
     ],
     [
       "sw",
-      Z,
-      D + k
+      V,
+      N + T
     ]
   ];
-  let M = null, _ = G;
-  for (const [U, it, tt] of z) {
-    const K = Math.hypot(F.x - it, F.y - tt);
-    K < _ && (_ = K, M = U);
+  let R = null, q = P;
+  for (const [U, dt, et] of C) {
+    const K = Math.hypot(_.x - dt, _.y - et);
+    K < q && (q = K, R = U);
   }
-  return M;
+  return R;
 }
-function Ye(F, E, G, Z, D) {
-  let W = null, k = D;
-  for (const z of G) {
-    const M = Mt(z, Z);
-    if (!M) continue;
-    const _ = Math.hypot(F - M.sx, E - M.sy);
-    _ < k && (k = _, W = {
-      edgeId: z.id,
+function $e(_, z, P, V, N) {
+  let G = null, T = N;
+  for (const C of P) {
+    const R = Et(C, V);
+    if (!R) continue;
+    const q = Math.hypot(_ - R.sx, z - R.sy);
+    q < T && (T = q, G = {
+      edgeId: C.id,
       end: "source",
-      worldX: M.sx,
-      worldY: M.sy
+      worldX: R.sx,
+      worldY: R.sy
     });
-    const U = Math.hypot(F - M.tx, E - M.ty);
-    U < k && (k = U, W = {
-      edgeId: z.id,
+    const U = Math.hypot(_ - R.tx, z - R.ty);
+    U < T && (T = U, G = {
+      edgeId: C.id,
       end: "target",
-      worldX: M.tx,
-      worldY: M.ty
+      worldX: R.tx,
+      worldY: R.ty
     });
   }
-  return W;
+  return G;
 }
-function Xe(F, E, G, Z) {
-  let D = null, W = Z;
-  for (const k of G) {
-    const z = k.data.waypoints;
-    if (z)
-      for (let M = 0; M < z.length; M++) {
-        const _ = Math.hypot(F - z[M].x, E - z[M].y);
-        _ < W && (W = _, D = {
-          edgeId: k.id,
-          waypointIndex: M,
-          wx: z[M].x,
-          wy: z[M].y
+function Je(_, z, P, V) {
+  let N = null, G = V;
+  for (const T of P) {
+    const C = T.data.waypoints;
+    if (C)
+      for (let R = 0; R < C.length; R++) {
+        const q = Math.hypot(_ - C[R].x, z - C[R].y);
+        q < G && (G = q, N = {
+          edgeId: T.id,
+          waypointIndex: R,
+          wx: C[R].x,
+          wy: C[R].y
         });
       }
   }
-  return D;
+  return N;
 }
-function Fe(F, E, G, Z, D) {
-  let W = null, k = D;
-  for (const z of G) {
-    if (z.type !== "simplebezier") continue;
-    const M = Mt(z, Z);
-    if (!M) continue;
-    const _ = z.data.waypoints ?? [], U = [
+function Qe(_, z, P, V, N) {
+  let G = null, T = N;
+  for (const C of P) {
+    if (C.type !== "simplebezier") continue;
+    const R = Et(C, V);
+    if (!R) continue;
+    const q = C.data.waypoints ?? [], U = [
       {
-        x: M.sx,
-        y: M.sy
+        x: R.sx,
+        y: R.sy
       },
-      ..._,
+      ...q,
       {
-        x: M.tx,
-        y: M.ty
+        x: R.tx,
+        y: R.ty
       }
-    ], it = z.data.bezierControls, tt = U.length - 2;
-    for (let K = 0; K <= tt; K++) {
-      const et = U[K], nt = U[K + 1], mt = it?.[K], Vt = Math.hypot(nt.x - et.x, nt.y - et.y), kt = Math.max(30, Vt * 0.3), Bt = mt?.c1x ?? (K === 0 ? et.x + M.snx * kt : et.x + (nt.x - et.x) * 0.4), Ht = mt?.c1y ?? (K === 0 ? et.y + M.sny * kt : et.y), Tt = mt?.c2x ?? (K === tt ? nt.x + M.tnx * kt : nt.x - (nt.x - et.x) * 0.4), Rt = mt?.c2y ?? (K === tt ? nt.y + M.tny * kt : nt.y), It = Math.hypot(F - Bt, E - Ht);
-      It < k && (k = It, W = {
-        edgeId: z.id,
+    ], dt = C.data.bezierControls, et = U.length - 2;
+    for (let K = 0; K <= et; K++) {
+      const nt = U[K], rt = U[K + 1], bt = dt?.[K], Wt = Math.hypot(rt.x - nt.x, rt.y - nt.y), Nt = Math.max(30, Wt * 0.3), Jt = bt?.c1x ?? (K === 0 ? nt.x + R.snx * Nt : nt.x + (rt.x - nt.x) * 0.4), At = bt?.c1y ?? (K === 0 ? nt.y + R.sny * Nt : nt.y), Yt = bt?.c2x ?? (K === et ? rt.x + R.tnx * Nt : rt.x - (rt.x - nt.x) * 0.4), Mt = bt?.c2y ?? (K === et ? rt.y + R.tny * Nt : rt.y), Rt = Math.hypot(_ - Jt, z - At);
+      Rt < T && (T = Rt, G = {
+        edgeId: C.id,
         segmentIndex: K,
         controlEnd: "c1",
-        wx: Bt,
-        wy: Ht
+        wx: Jt,
+        wy: At
       });
-      const yt = Math.hypot(F - Tt, E - Rt);
-      yt < k && (k = yt, W = {
-        edgeId: z.id,
+      const yt = Math.hypot(_ - Yt, z - Mt);
+      yt < T && (T = yt, G = {
+        edgeId: C.id,
         segmentIndex: K,
         controlEnd: "c2",
-        wx: Tt,
-        wy: Rt
+        wx: Yt,
+        wy: Mt
       });
     }
   }
-  return W;
+  return G;
 }
-function fn(F, E, G, Z) {
-  const D = Mt(G, Z);
-  if (!D) return 0;
-  const W = G.data.waypoints ?? [], k = [
+function Mn(_, z, P, V) {
+  const N = Et(P, V);
+  if (!N) return 0;
+  const G = P.data.waypoints ?? [], T = [
     {
-      x: D.sx,
-      y: D.sy
+      x: N.sx,
+      y: N.sy
     },
-    ...W,
+    ...G,
     {
-      x: D.tx,
-      y: D.ty
+      x: N.tx,
+      y: N.ty
     }
   ];
-  let z = 1 / 0, M = 0;
-  for (let _ = 0; _ < k.length - 1; _++) {
-    const U = me(F, E, k[_].x, k[_].y, k[_ + 1].x, k[_ + 1].y);
-    U < z && (z = U, M = _);
+  let C = 1 / 0, R = 0;
+  for (let q = 0; q < T.length - 1; q++) {
+    const U = Ce(_, z, T[q].x, T[q].y, T[q + 1].x, T[q + 1].y);
+    U < C && (C = U, R = q);
   }
-  return M;
+  return R;
 }
-function hn(F, E, G, Z, D = 24) {
-  let { x: W, y: k, w: z, h: M } = { ...F };
-  const _ = E === "nw" || E === "sw", U = E === "ne" || E === "se", it = E === "nw" || E === "ne", tt = E === "sw" || E === "se";
-  return _ && (W += G, z -= G), U && (z += G), it && (k += Z, M -= Z), tt && (M += Z), z < D && (_ && (W = F.x + F.w - D), z = D), M < D && (it && (k = F.y + F.h - D), M = D), {
-    x: W,
-    y: k,
-    w: z,
-    h: M
+function Rn(_, z, P, V, N = 24) {
+  let { x: G, y: T, w: C, h: R } = { ..._ };
+  const q = z === "nw" || z === "sw", U = z === "ne" || z === "se", dt = z === "nw" || z === "ne", et = z === "sw" || z === "se";
+  return q && (G += P, C -= P), U && (C += P), dt && (T += V, R -= V), et && (R += V), C < N && (q && (G = _.x + _.w - N), C = N), R < N && (dt && (T = _.y + _.h - N), R = N), {
+    x: G,
+    y: T,
+    w: C,
+    h: R
   };
 }
-function we(F, E, G, Z, D) {
-  const W = Mt(G, Z);
-  if (!W) return !1;
-  const k = qe(Ze(G.type, W, G.data.waypoints, G.data.bezierControls));
-  for (let z = 0; z < k.length - 1; z++) if (me(F, E, k[z].x, k[z].y, k[z + 1].x, k[z + 1].y) < D) return !0;
+function ze(_, z, P, V, N) {
+  const G = Et(P, V);
+  if (!G) return !1;
+  const T = nn(en(P.type, G, P.data.waypoints, P.data.bezierControls));
+  for (let C = 0; C < T.length - 1; C++) if (Ce(_, z, T[C].x, T[C].y, T[C + 1].x, T[C + 1].y) < N) return !0;
   return !1;
 }
-function _e(F, E, G, Z) {
-  const D = G.points;
-  for (let W = 0; W < D.length - 1; W++) if (me(F, E, D[W].x, D[W].y, D[W + 1].x, D[W + 1].y) < Z) return !0;
+function tn(_, z, P, V) {
+  const N = P.points;
+  for (let G = 0; G < N.length - 1; G++) if (Ce(_, z, N[G].x, N[G].y, N[G + 1].x, N[G + 1].y) < V) return !0;
   return !1;
 }
-function Wn({ onPixiReady: F }) {
-  const E = b(null), G = b(null), Z = b(13751771), { pixiRef: D, readyRef: W } = je(E, qt((l) => {
-    Z.current = l.gridDot, G.current && (G.current.dotColor = l.gridDot);
-  }, [])), { setViewportInternal: k, viewportReqRef: z, viewport: M, autoFocus: _, showGrid: U, showAnchors: it, gridSize: tt, toolMode: K, edgeType: et, focusOnRect: nt, setFocusOnRect: mt, pendingPlacement: Vt, setPendingPlacement: kt, setContextMenu: Bt, beginNodeDrag: Ht, endNodeDrag: Tt, presentation: Rt, editingNodeId: It, setEditingNodeId: yt } = Ke(), { currentCanvas: re, selection: Ie, setSelection: lt, setDoc: J, currentCanvasId: oe, pushCanvas: Oe, doc: ve } = Be(), St = b(null), Kt = b(null), jt = b(null), Ut = b(null), se = b(null), ce = b(null), $t = b(null), Pt = b(null), Gt = b(null), Jt = b(null), zt = b([]), ie = b(null), de = b(null), ut = b(null), Wt = b(null), be = b({
+function Bn({ onPixiReady: _ }) {
+  const z = w(null), P = w(null), V = w(13751771), { pixiRef: N, readyRef: G } = dn(z, jt((a) => {
+    V.current = a.gridDot, P.current && (P.current.dotColor = a.gridDot);
+  }, [])), { setViewportInternal: T, viewportReqRef: C, viewport: R, autoFocus: q, showGrid: U, showAnchors: dt, gridSize: et, toolMode: K, edgeType: nt, focusOnRect: rt, setFocusOnRect: bt, pendingPlacement: Wt, setPendingPlacement: Nt, setContextMenu: Jt, beginNodeDrag: At, endNodeDrag: Yt, presentation: Mt, editingNodeId: Rt, setEditingNodeId: yt } = cn(), { currentCanvas: le, selection: Ee, setSelection: ft, setDoc: J, currentCanvasId: ue, pushCanvas: rn, doc: Ne } = sn(), St = w(null), Qt = w(null), te = w(null), ee = w(null), fe = w(null), he = w(null), ne = w(null), Xt = w(null), Ft = w(null), re = w(null), Dt = w([]), ye = w(null), pe = w(null), at = w(null), _t = w(null), De = w({
     time: 0,
     wx: 0,
     wy: 0
-  }), Lt = b({
+  }), Tt = w({
     time: 0,
     wx: 0,
     wy: 0
-  }), At = b(null), Me = b({
+  }), Te = w(0), qt = w(null), ke = w({
     x: 0,
     y: 0
-  }), Re = it || Rt ? re : {
-    ...re,
-    nodes: re.nodes.filter((l) => l.type !== "animAnchor")
-  }, A = b(Re);
-  A.current = Re;
-  const V = b(oe);
-  V.current = oe;
-  const Yt = b(Ie);
-  Yt.current = Ie;
-  const Se = b(ve);
-  Se.current = ve;
-  const Xt = b(K);
-  Xt.current = K;
-  const Ft = b(_);
-  Ft.current = _;
-  const _t = b(nt);
-  _t.current = nt;
-  const ze = b(et);
-  ze.current = et;
-  const Ce = b(it);
-  Ce.current = it;
-  const Ct = b(Rt);
-  Ct.current = Rt;
-  const ae = b(Vt);
-  ae.current = Vt;
-  const Ne = b(Ht);
-  Ne.current = Ht;
-  const le = b(Tt);
-  le.current = Tt;
-  const ft = b(null), rt = b(null), ot = b(null), dt = b(null), xt = b(null), pt = b(null), vt = b(null), ue = b(M), fe = b(0), { vmRef: $, screenToWorld: Ee } = Ue(D, qt((l) => {
-    ue.current = l, fe.current || (fe.current = requestAnimationFrame(() => {
-      fe.current = 0, k(ue.current);
+  }), He = dt || Mt ? le : {
+    ...le,
+    nodes: le.nodes.filter((a) => a.type !== "animAnchor")
+  }, W = w(He);
+  W.current = He;
+  const B = w(ue);
+  B.current = ue;
+  const Zt = w(Ee);
+  Zt.current = Ee;
+  const Pe = w(Ne);
+  Pe.current = Ne;
+  const Ot = w(K);
+  Ot.current = K;
+  const Vt = w(q);
+  Vt.current = q;
+  const Bt = w(rt);
+  Bt.current = rt;
+  const Ge = w(nt);
+  Ge.current = nt;
+  const Le = w(dt);
+  Le.current = dt;
+  const kt = w(Mt);
+  kt.current = Mt;
+  const oe = w(Wt);
+  oe.current = Wt;
+  const We = w(At);
+  We.current = At;
+  const se = w(Yt);
+  se.current = Yt;
+  const ot = w(null), Q = w(null), tt = w(null), st = w(null), pt = w(null), ht = w(null), xt = w(null), xe = w(R), ge = w(0), { vmRef: Z, screenToWorld: Ae } = an(N, jt((a) => {
+    xe.current = a, ge.current || (ge.current = requestAnimationFrame(() => {
+      ge.current = 0, T(xe.current);
     }));
-  }, [k])), st = b(Ee);
-  st.current = Ee;
-  const [at, he] = We(null), [ye, xe] = We(null), pe = b(at);
-  pe.current = at;
-  const Qt = b(() => {
+  }, [T])), ct = w(Ae);
+  ct.current = Ae;
+  const [lt, we] = Ke(null), [me, ve] = Ke(null), Ie = w(lt);
+  Ie.current = lt;
+  const ce = w(() => {
   });
-  Qt.current = (l, T, Y) => {
-    yt(l === "node" ? T : null), he({
-      kind: l,
-      id: T,
-      value: Y
+  ce.current = (a, k, X) => {
+    yt(a === "node" ? k : null), we({
+      kind: a,
+      id: k,
+      value: X
     });
   };
-  const De = qt((l) => {
-    const T = pe.current;
-    T && (J((Y) => {
-      const L = V.current, q = Y.canvases[L];
-      if (!q) return Y;
-      let X = q;
-      if (T.kind === "node") X = {
-        ...q,
-        nodes: q.nodes.map((B) => B.id === T.id ? {
-          ...B,
+  const Ye = jt((a) => {
+    const k = Ie.current;
+    k && (J((X) => {
+      const L = B.current, O = X.canvases[L];
+      if (!O) return X;
+      let F = O;
+      if (k.kind === "node") F = {
+        ...O,
+        nodes: O.nodes.map((A) => A.id === k.id ? {
+          ...A,
           data: {
-            ...B.data,
-            label: l
+            ...A.data,
+            label: a
           }
-        } : B)
+        } : A)
       };
-      else if (T.kind === "edge") X = {
-        ...q,
-        edges: q.edges.map((B) => B.id === T.id ? {
-          ...B,
+      else if (k.kind === "edge") F = {
+        ...O,
+        edges: O.edges.map((A) => A.id === k.id ? {
+          ...A,
           data: {
-            ...B.data,
-            labelText: l
+            ...A.data,
+            labelText: a
           }
-        } : B)
+        } : A)
       };
-      else return Y;
+      else return X;
       return {
-        ...Y,
+        ...X,
         canvases: {
-          ...Y.canvases,
-          [L]: X
+          ...X.canvases,
+          [L]: F
         }
       };
-    }), he(null), yt(null), xe(null));
-  }, [J, yt]), Ve = qt(() => {
-    he(null), yt(null), xe(null);
+    }), we(null), yt(null), ve(null));
+  }, [J, yt]), on = jt(() => {
+    we(null), yt(null), ve(null);
   }, [yt]);
-  wt(() => {
-    if (!It || pe.current?.id === It) return;
-    const l = A.current.nodes.find((T) => T.id === It);
-    l && Qt.current("node", l.id, l.data.label);
-  }, [It]), wt(() => {
-    if (!at) return;
-    const l = $.current;
-    if (!l) return;
-    const T = A.current;
-    let Y = null;
-    if (at.kind === "node") {
-      const L = T.nodes.find((q) => q.id === at.id);
-      L && (Y = {
+  It(() => {
+    if (!Rt || Ie.current?.id === Rt) return;
+    const a = W.current.nodes.find((k) => k.id === Rt);
+    a && ce.current("node", a.id, a.data.label);
+  }, [Rt]), It(() => {
+    if (!lt) return;
+    const a = Z.current;
+    if (!a) return;
+    const k = W.current;
+    let X = null;
+    if (lt.kind === "node") {
+      const L = k.nodes.find((O) => O.id === lt.id);
+      L && (X = {
         x: L.position.x + L.width / 2,
         y: L.position.y + L.height / 2
       });
-    } else if (at.kind === "edge") {
-      const L = T.edges.find((X) => X.id === at.id), q = /* @__PURE__ */ new Map();
-      for (const X of T.nodes) q.set(X.id, X);
+    } else if (lt.kind === "edge") {
+      const L = k.edges.find((F) => F.id === lt.id), O = /* @__PURE__ */ new Map();
+      for (const F of k.nodes) O.set(F.id, F);
       if (L) {
-        const X = Mt(L, q);
-        if (X) {
-          const B = qe(Ze(L.type, X, L.data.waypoints, L.data.bezierControls)), Q = B[Math.floor(B.length / 2)] ?? {
-            x: (X.sx + X.tx) / 2,
-            y: (X.sy + X.ty) / 2
+        const F = Et(L, O);
+        if (F) {
+          const A = nn(en(L.type, F, L.data.waypoints, L.data.bezierControls)), it = A[Math.floor(A.length / 2)] ?? {
+            x: (F.sx + F.tx) / 2,
+            y: (F.sy + F.ty) / 2
           };
-          Y = {
-            x: Q.x,
-            y: Q.y
+          X = {
+            x: it.x,
+            y: it.y
           };
         }
       }
     }
-    if (Y) {
-      const L = l.worldToScreen(Y.x, Y.y);
-      xe({
+    if (X) {
+      const L = a.worldToScreen(X.x, X.y);
+      ve({
         x: L.x,
         y: L.y
       });
     }
-  }, [at, $]);
-  const ke = b(0);
-  wt(() => {
-    z.current !== ke.current && (ke.current = z.current, ue.current = M, $.current?.setState(M));
+  }, [lt, Z]);
+  const Xe = w(0);
+  It(() => {
+    C.current !== Xe.current && (Xe.current = C.current, xe.current = R, Z.current?.setState(R));
   }, [
-    M,
-    $,
-    z
-  ]), wt(() => {
-    mt((l, T, Y, L, q) => {
-      const X = $.current, B = E.current;
-      if (!X || !B) return;
-      const Q = B.clientWidth || 800, ct = B.clientHeight || 600, bt = Math.max(0, q?.padding ?? 60), te = Math.max(1, Q - bt * 2), m = Math.max(1, ct - bt * 2), s = q?.preserveZoom ? X.state.zoom : Math.min(te / Math.max(Y, 1), m / Math.max(L, 1), q?.maxZoom ?? 2), u = l + Y / 2, v = T + L / 2, P = Q / 2 - u * s, N = ct / 2 - v * s;
-      X.animateTo({
-        x: P,
-        y: N,
-        zoom: s
-      }, q?.duration ?? 350);
+    R,
+    Z,
+    C
+  ]), It(() => {
+    bt((a, k, X, L, O) => {
+      const F = Z.current, A = z.current;
+      if (!F || !A) return;
+      const it = A.clientWidth || 800, gt = A.clientHeight || 600, wt = Math.max(0, O?.padding ?? 60), Ht = Math.max(1, it - wt * 2), mt = Math.max(1, gt - wt * 2), zt = O?.preserveZoom ? F.state.zoom : Math.min(Ht / Math.max(X, 1), mt / Math.max(L, 1), O?.maxZoom ?? 2), Ct = a + X / 2, ut = k + L / 2, Kt = it / 2 - Ct * zt, Me = gt / 2 - ut * zt;
+      F.animateTo({
+        x: Kt,
+        y: Me,
+        zoom: zt
+      }, O?.duration ?? 350);
     });
-  }, [mt, $]);
-  const He = qt((l) => {
-    J((T) => {
-      const Y = T.canvases[V.current];
-      return Y ? {
-        ...T,
+  }, [bt, Z]);
+  const Fe = jt((a) => {
+    J((k) => {
+      const X = k.canvases[B.current];
+      return X ? {
+        ...k,
         canvases: {
-          ...T.canvases,
-          [V.current]: {
-            ...Y,
-            lines: [...Y.lines, l]
+          ...k.canvases,
+          [B.current]: {
+            ...X,
+            lines: [...X.lines, a]
           }
         }
-      } : T;
+      } : k;
     });
-  }, [J, oe]), ge = b(He);
-  return ge.current = He, wt(() => {
-    const l = D.current;
-    if (!l || l.destroyed) return;
-    let T = !1;
-    const Y = () => {
-      if (T) return;
-      if (!W.current) {
-        setTimeout(Y, 30);
+  }, [J, ue]), be = w(Fe);
+  return be.current = Fe, It(() => {
+    const a = N.current;
+    if (!a || a.destroyed) return;
+    let k = !1, X = null, L = null, O = null;
+    const F = () => {
+      if (k) return;
+      if (!G.current) {
+        setTimeout(F, 30);
         return;
       }
-      G.current = new $e(l.app.stage, tt, U), G.current.dotColor = Z.current, St.current = new Je(l.app.stage), Kt.current = new en(l.world), jt.current = new nn(l.world), Ut.current = new rn(l.world);
-      const L = new Ot();
-      L.label = "connect-line", L.visible = !1, l.world.addChild(L), xt.current = L;
-      const q = new Ot();
-      q.label = "transform-handles", l.app.stage.addChild(q), Pt.current = q;
-      const X = new Ot();
-      X.label = "handle-hover", l.world.addChild(X), Gt.current = X;
-      const B = new Ot();
-      B.label = "edge-edit-handles", l.world.addChild(B), Wt.current = B;
-      const Q = new Ot();
-      Q.label = "ghost-placement", Q.alpha = 0.5, l.world.addChild(Q), At.current = Q, Jt.current = new cn(l.world), se.current = new on(l.app.stage, l.world, {
-        onLineComplete: (m) => ge.current(m),
-        screenToWorld: (m, s) => st.current(m, s)
-      }), ce.current = new sn(l.app.stage, l.world, {
-        onLineComplete: (m) => ge.current(m),
-        screenToWorld: (m, s) => st.current(m, s)
-      }), F?.(l);
-      const ct = l.app.stage;
-      ct.on("pointerdown", (m) => {
-        if (E.current?.focus({ preventScroll: !0 }), $.current?.isPanning || $.current?.isSpaceHeld || m.button !== 0) return;
-        const s = Xt.current;
-        if (s === "pan") {
-          $.current?.startPan(m.global.x, m.global.y);
+      P.current = new ln(a.app.stage, et, U), P.current.dotColor = V.current, St.current = new un(a.app.stage), Qt.current = new yn(a.world), te.current = new pn(a.world), ee.current = new xn(a.world);
+      const A = new $t();
+      A.label = "connect-line", A.visible = !1, a.world.addChild(A), pt.current = A;
+      const it = new $t();
+      it.label = "transform-handles", a.app.stage.addChild(it), Xt.current = it;
+      const gt = new $t();
+      gt.label = "handle-hover", a.world.addChild(gt), Ft.current = gt;
+      const wt = new $t();
+      wt.label = "edge-edit-handles", a.world.addChild(wt), _t.current = wt;
+      const Ht = new $t();
+      Ht.label = "ghost-placement", Ht.alpha = 0.5, a.world.addChild(Ht), qt.current = Ht, re.current = new mn(a.world), fe.current = new gn(a.app.stage, a.world, {
+        onLineComplete: (h) => be.current(h),
+        screenToWorld: (h, r) => ct.current(h, r)
+      }), he.current = new wn(a.app.stage, a.world, {
+        onLineComplete: (h) => be.current(h),
+        screenToWorld: (h, r) => ct.current(h, r)
+      }), _?.(a);
+      const mt = a.app.stage;
+      mt.on("pointerdown", (h) => {
+        if (z.current?.focus({ preventScroll: !0 }), Z.current?.multiTouchActive || Z.current?.isPanning || Z.current?.isSpaceHeld || h.button !== 0) return;
+        const r = Ot.current;
+        if (r === "pan") {
+          Z.current?.startPan(h.global.x, h.global.y);
           return;
         }
-        if (s === "freehand" || s === "line" || s === "polyline" || s === "arrow") return;
-        const u = st.current(m.global.x, m.global.y), v = A.current.nodes, P = A.current.edges, N = A.current.lines, I = Yt.current, S = m.metaKey || m.ctrlKey || m.shiftKey, O = $.current?.state.zoom ?? 1, e = ae.current;
-        if (e) {
-          const t = Qe("node"), i = u.x - e.width / 2, n = u.y - e.height / 2, o = ne([{
-            id: "__ghost__",
-            type: e.type,
-            position: {
-              x: i,
-              y: n
-            },
-            width: e.width,
-            height: e.height,
-            data: {}
-          }], v), r = i + o.dx, d = n + o.dy;
-          J((w) => {
-            const g = w.canvases[V.current];
-            if (!g) return w;
-            const C = {};
-            e.type === "animAnchor" && (C.animIndex = an(w));
-            const H = Math.max(0, ...g.nodes.map((h) => h.zIndex ?? 0), ...g.lines.map((h) => h.zIndex ?? 0));
-            return {
-              ...w,
-              canvases: {
-                ...w.canvases,
-                [V.current]: {
-                  ...g,
-                  nodes: [...g.nodes, {
-                    id: t,
-                    type: e.type,
-                    position: {
-                      x: r,
-                      y: d
-                    },
-                    width: e.width,
-                    height: e.height,
-                    zIndex: H + 1,
-                    data: {
-                      ...e.data,
-                      ...C
-                    }
-                  }]
-                }
-              }
-            };
-          }), lt({
-            nodeIds: /* @__PURE__ */ new Set([t]),
-            edgeIds: /* @__PURE__ */ new Set(),
-            lineIds: /* @__PURE__ */ new Set()
-          }), Ft.current && window.setTimeout(() => {
-            _t.current(r, d, e.width, e.height, {
-              padding: 80,
-              preserveZoom: !0,
-              duration: 280
-            });
-          }, 0);
-          return;
-        }
-        const c = Date.now(), y = be.current, f = c - y.time < 350 && Math.hypot(u.x - y.wx, u.y - y.wy) < 8 / O;
-        if (be.current = {
-          time: c,
-          wx: u.x,
-          wy: u.y
-        }, I.nodeIds.size === 1 && !S && s === "select") {
-          const t = v.find((i) => i.id === [...I.nodeIds][0]);
+        if (r === "freehand" || r === "line" || r === "polyline" || r === "arrow") return;
+        const d = ct.current(h.global.x, h.global.y), p = W.current.nodes, D = W.current.edges, E = W.current.lines, m = Zt.current, S = h.metaKey || h.ctrlKey || h.shiftKey, Y = Z.current?.state.zoom ?? 1;
+        if (oe.current) return;
+        const o = Date.now(), f = De.current, u = o - f.time < 350 && Math.hypot(d.x - f.wx, d.y - f.wy) < 8 / Y;
+        if (De.current = {
+          time: o,
+          wx: d.x,
+          wy: d.y
+        }, m.nodeIds.size === 1 && !S && r === "select") {
+          const t = p.find((s) => s.id === [...m.nodeIds][0]);
           if (t) {
-            const i = Ae(u, t, Math.min(10 / O, 16));
-            if (i) {
-              const n = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), r = t.type === "geometryGroup", d = r || t.type === "flowGroup" || t.data.isGroup, w = t.position.x, g = t.position.y, C = t.width, H = t.height;
-              for (const h of v)
-                h.id !== t.id && (h.parentId === t.id ? n.set(h.id, {
-                  x: h.position.x,
-                  y: h.position.y,
-                  w: h.width,
-                  h: h.height
-                }) : r && h.position.x >= w && h.position.y >= g && h.position.x + h.width <= w + C && h.position.y + h.height <= g + H && n.set(h.id, {
-                  x: h.position.x,
-                  y: h.position.y,
-                  w: h.width,
-                  h: h.height
+            const s = je(d, t, Math.min(10 / Y, 16));
+            if (s) {
+              const l = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), n = t.type === "geometryGroup", i = n || t.type === "flowGroup" || t.data.isGroup, I = t.position.x, g = t.position.y, b = t.width, H = t.height;
+              for (const y of p)
+                y.id !== t.id && (y.parentId === t.id ? l.set(y.id, {
+                  x: y.position.x,
+                  y: y.position.y,
+                  w: y.width,
+                  h: y.height
+                }) : n && y.position.x >= I && y.position.y >= g && y.position.x + y.width <= I + b && y.position.y + y.height <= g + H && l.set(y.id, {
+                  x: y.position.x,
+                  y: y.position.y,
+                  w: y.width,
+                  h: y.height
                 }));
-              if (d)
-                for (const h of A.current.lines) h.parentId === t.id ? o.set(h.id, h.points.map((R) => ({ ...R }))) : r && h.points.length > 0 && h.points.every((R) => R.x >= w && R.x <= w + C && R.y >= g && R.y <= g + H) && o.set(h.id, h.points.map((R) => ({ ...R })));
-              pt.current = {
+              if (i)
+                for (const y of W.current.lines) y.parentId === t.id ? c.set(y.id, y.points.map((M) => ({ ...M }))) : n && y.points.length > 0 && y.points.every((M) => M.x >= I && M.x <= I + b && M.y >= g && M.y <= g + H) && c.set(y.id, y.points.map((M) => ({ ...M })));
+              ht.current = {
                 active: !0,
                 nodeId: t.id,
-                handle: i,
-                startWorld: u,
+                handle: s,
+                startWorld: d,
                 startBounds: {
                   x: t.position.x,
                   y: t.position.y,
                   w: t.width,
                   h: t.height
                 },
-                childStarts: n,
-                childLineStarts: o.size > 0 ? o : void 0
+                childStarts: l,
+                childLineStarts: c.size > 0 ? c : void 0
               };
               return;
             }
           }
         }
-        let x = null;
-        for (let t = v.length - 1; t >= 0; t--) if (Dt(u.x, u.y, v[t])) {
-          x = v[t];
+        let e = null;
+        for (let t = p.length - 1; t >= 0; t--) if (Lt(d.x, d.y, p[t])) {
+          e = p[t];
           break;
         }
-        if (x?.parentId) {
-          const t = v.find((i) => i.id === x.parentId);
-          t && (x = t);
+        if (e?.parentId) {
+          const t = p.find((s) => s.id === e.parentId);
+          t && (e = t);
         }
-        if (x && (s === "select" || s === "connect")) {
-          const t = Et(gt(x.width, x.height), x, u.x, u.y, Math.min(14 / O, 20));
+        if (e && (r === "select" || r === "connect")) {
+          const t = Gt(vt(e.width, e.height), e, d.x, d.y, Math.min(14 / Y, 20));
           if (t) {
-            ot.current = {
+            tt.current = {
               active: !0,
-              sourceNodeId: x.id,
+              sourceNodeId: e.id,
               sourceHandleId: t.id
             };
             return;
           }
         }
-        if ((s === "select" || s === "connect") && !S && I.edgeIds.size > 0) {
+        if ((r === "select" || r === "connect") && !S && m.edgeIds.size > 0) {
           const t = /* @__PURE__ */ new Map();
-          for (const o of v) t.set(o.id, o);
-          const i = P.filter((o) => I.edgeIds.has(o.id)), n = Ye(u.x, u.y, i, t, Math.min(14 / O, 20));
-          if (n) {
-            const o = P.find((r) => r.id === n.edgeId);
-            if (o) {
-              const r = n.end === "source" ? "target" : "source";
-              dt.current = {
+          for (const c of p) t.set(c.id, c);
+          const s = D.filter((c) => m.edgeIds.has(c.id)), l = $e(d.x, d.y, s, t, Math.min(14 / Y, 20));
+          if (l) {
+            const c = D.find((n) => n.id === l.edgeId);
+            if (c) {
+              const n = l.end === "source" ? "target" : "source";
+              st.current = {
                 active: !0,
-                edgeId: o.id,
-                movingEnd: n.end,
-                fixedNodeId: r === "source" ? o.source : o.target,
-                fixedHandleId: r === "source" ? o.sourceHandle : o.targetHandle
+                edgeId: c.id,
+                movingEnd: l.end,
+                fixedNodeId: n === "source" ? c.source : c.target,
+                fixedHandleId: n === "source" ? c.sourceHandle : c.targetHandle
               };
               return;
             }
           }
         }
-        if (s === "select" && I.edgeIds.size > 0 && !x) {
+        if (r === "select" && m.edgeIds.size > 0 && !e) {
           const t = /* @__PURE__ */ new Map();
-          for (const d of v) t.set(d.id, d);
-          const i = P.filter((d) => I.edgeIds.has(d.id)), n = Math.min(10 / O, 14), o = Fe(u.x, u.y, i, t, n);
-          if (o) {
-            ut.current = {
+          for (const i of p) t.set(i.id, i);
+          const s = D.filter((i) => m.edgeIds.has(i.id)), l = Math.min(10 / Y, 14), c = Qe(d.x, d.y, s, t, l);
+          if (c) {
+            at.current = {
               active: !0,
-              edgeId: o.edgeId,
-              type: o.controlEnd === "c1" ? "bezierC1" : "bezierC2",
-              index: o.segmentIndex
+              edgeId: c.edgeId,
+              type: c.controlEnd === "c1" ? "bezierC1" : "bezierC2",
+              index: c.segmentIndex
             };
             return;
           }
-          const r = Xe(u.x, u.y, i, n);
-          if (r) {
-            if (f) {
-              J((d) => {
-                const w = d.canvases[V.current];
-                return w ? {
-                  ...d,
+          const n = Je(d.x, d.y, s, l);
+          if (n) {
+            if (u) {
+              J((i) => {
+                const I = i.canvases[B.current];
+                return I ? {
+                  ...i,
                   canvases: {
-                    ...d.canvases,
-                    [V.current]: {
-                      ...w,
-                      edges: w.edges.map((g) => {
-                        if (g.id !== r.edgeId) return g;
-                        const C = [...g.data.waypoints ?? []];
-                        C.splice(r.waypointIndex, 1);
+                    ...i.canvases,
+                    [B.current]: {
+                      ...I,
+                      edges: I.edges.map((g) => {
+                        if (g.id !== n.edgeId) return g;
+                        const b = [...g.data.waypoints ?? []];
+                        b.splice(n.waypointIndex, 1);
                         const H = {
                           ...g.data,
-                          waypoints: C.length > 0 ? C : void 0
+                          waypoints: b.length > 0 ? b : void 0
                         };
                         if (g.type === "simplebezier" && g.data.bezierControls) {
-                          const h = [...g.data.bezierControls];
-                          h.splice(r.waypointIndex, 2, null), H.bezierControls = h.some((R) => R !== null) ? h : void 0;
+                          const y = [...g.data.bezierControls];
+                          y.splice(n.waypointIndex, 2, null), H.bezierControls = y.some((M) => M !== null) ? y : void 0;
                         }
                         return {
                           ...g,
@@ -565,133 +511,133 @@ function Wn({ onPixiReady: F }) {
                       })
                     }
                   }
-                } : d;
+                } : i;
               });
               return;
             }
-            ut.current = {
+            at.current = {
               active: !0,
-              edgeId: r.edgeId,
+              edgeId: n.edgeId,
               type: "waypoint",
-              index: r.waypointIndex
+              index: n.waypointIndex
             };
             return;
           }
-          if (f) {
-            for (const d of i) if (we(u.x, u.y, d, t, Math.min(8 / O, 12))) {
-              const w = fn(u.x, u.y, d, t), g = {
-                x: u.x,
-                y: u.y
+          if (u) {
+            for (const i of s) if (ze(d.x, d.y, i, t, Math.min(8 / Y, 12))) {
+              const I = Mn(d.x, d.y, i, t), g = {
+                x: d.x,
+                y: d.y
               };
-              J((C) => {
-                const H = C.canvases[V.current];
+              J((b) => {
+                const H = b.canvases[B.current];
                 return H ? {
-                  ...C,
+                  ...b,
                   canvases: {
-                    ...C.canvases,
-                    [V.current]: {
+                    ...b.canvases,
+                    [B.current]: {
                       ...H,
-                      edges: H.edges.map((h) => {
-                        if (h.id !== d.id) return h;
-                        const R = [...h.data.waypoints ?? []];
-                        R.splice(w, 0, g);
+                      edges: H.edges.map((y) => {
+                        if (y.id !== i.id) return y;
+                        const M = [...y.data.waypoints ?? []];
+                        M.splice(I, 0, g);
                         const j = {
-                          ...h.data,
-                          waypoints: R
+                          ...y.data,
+                          waypoints: M
                         };
-                        if (h.type === "simplebezier" && h.data.bezierControls) {
-                          const ht = [...h.data.bezierControls];
-                          for (; ht.length < (h.data.waypoints ?? []).length + 1; ) ht.push(null);
-                          ht.splice(w, 1, null, null), j.bezierControls = ht;
+                        if (y.type === "simplebezier" && y.data.bezierControls) {
+                          const $ = [...y.data.bezierControls];
+                          for (; $.length < (y.data.waypoints ?? []).length + 1; ) $.push(null);
+                          $.splice(I, 1, null, null), j.bezierControls = $;
                         }
                         return {
-                          ...h,
+                          ...y,
                           data: j
                         };
                       })
                     }
                   }
-                } : C;
-              }), ut.current = {
+                } : b;
+              }), at.current = {
                 active: !0,
-                edgeId: d.id,
+                edgeId: i.id,
                 type: "waypoint",
-                index: w
+                index: I
               };
               return;
             }
           }
         }
-        if (x && (s === "select" || s === "connect")) {
-          !S && !I.nodeIds.has(x.id) ? lt({
-            nodeIds: /* @__PURE__ */ new Set([x.id]),
+        if (e && (r === "select" || r === "connect")) {
+          !S && !m.nodeIds.has(e.id) ? ft({
+            nodeIds: /* @__PURE__ */ new Set([e.id]),
             edgeIds: /* @__PURE__ */ new Set(),
             lineIds: /* @__PURE__ */ new Set()
-          }) : S && lt((r) => {
-            const d = new Set(r.nodeIds);
-            return d.has(x.id) ? d.delete(x.id) : d.add(x.id), {
-              nodeIds: d,
+          }) : S && ft((n) => {
+            const i = new Set(n.nodeIds);
+            return i.has(e.id) ? i.delete(e.id) : i.add(e.id), {
+              nodeIds: i,
               edgeIds: /* @__PURE__ */ new Set(),
               lineIds: /* @__PURE__ */ new Set()
             };
-          }), Ft.current && _t.current(x.position.x, x.position.y, x.width, x.height, {
+          }), Vt.current && Bt.current(e.position.x, e.position.y, e.width, e.height, {
             padding: 80,
             preserveZoom: !0,
             duration: 280
           });
-          const t = I.nodeIds.has(x.id) ? new Set(I.nodeIds) : /* @__PURE__ */ new Set([x.id]);
-          S && !I.nodeIds.has(x.id) && t.add(x.id);
-          const i = /* @__PURE__ */ new Set();
-          for (const r of [...t]) {
-            const d = v.find((R) => R.id === r);
-            if (!d || d.type !== "flowGroup" && d.type !== "geometryGroup" && !d.data.isGroup) continue;
-            const w = d.type === "geometryGroup", g = d.position.x, C = d.position.y, H = d.width, h = d.height;
-            for (const R of v)
-              if (!(t.has(R.id) || R.id === r)) {
-                if (R.parentId === r) {
-                  t.add(R.id);
+          const t = m.nodeIds.has(e.id) ? new Set(m.nodeIds) : /* @__PURE__ */ new Set([e.id]);
+          S && !m.nodeIds.has(e.id) && t.add(e.id);
+          const s = /* @__PURE__ */ new Set();
+          for (const n of [...t]) {
+            const i = p.find((M) => M.id === n);
+            if (!i || i.type !== "flowGroup" && i.type !== "geometryGroup" && !i.data.isGroup) continue;
+            const I = i.type === "geometryGroup", g = i.position.x, b = i.position.y, H = i.width, y = i.height;
+            for (const M of p)
+              if (!(t.has(M.id) || M.id === n)) {
+                if (M.parentId === n) {
+                  t.add(M.id);
                   continue;
                 }
-                w && R.position.x >= g && R.position.y >= C && R.position.x + R.width <= g + H && R.position.y + R.height <= C + h && t.add(R.id);
+                I && M.position.x >= g && M.position.y >= b && M.position.x + M.width <= g + H && M.position.y + M.height <= b + y && t.add(M.id);
               }
-            for (const R of A.current.lines) R.parentId === r && i.add(R.id);
-            if (w) for (const R of A.current.lines)
-              i.has(R.id) || R.points.length > 0 && R.points.every((j) => j.x >= g && j.x <= g + H && j.y >= C && j.y <= C + h) && i.add(R.id);
+            for (const M of W.current.lines) M.parentId === n && s.add(M.id);
+            if (I) for (const M of W.current.lines)
+              s.has(M.id) || M.points.length > 0 && M.points.every((j) => j.x >= g && j.x <= g + H && j.y >= b && j.y <= b + y) && s.add(M.id);
           }
-          const n = /* @__PURE__ */ new Map();
-          for (const r of v) t.has(r.id) && n.set(r.id, { ...r.position });
-          const o = /* @__PURE__ */ new Map();
-          if (i.size > 0)
-            for (const r of A.current.lines) i.has(r.id) && o.set(r.id, r.points.map((d) => ({ ...d })));
-          ft.current = {
+          const l = /* @__PURE__ */ new Map();
+          for (const n of p) t.has(n.id) && l.set(n.id, { ...n.position });
+          const c = /* @__PURE__ */ new Map();
+          if (s.size > 0)
+            for (const n of W.current.lines) s.has(n.id) && c.set(n.id, n.points.map((i) => ({ ...i })));
+          ot.current = {
             active: !0,
             nodeIds: t,
-            lineIds: i.size > 0 ? i : void 0,
-            startWorld: u,
-            nodeStarts: n,
-            linePointStarts: o.size > 0 ? o : void 0
-          }, Ne.current();
+            lineIds: s.size > 0 ? s : void 0,
+            startWorld: d,
+            nodeStarts: l,
+            linePointStarts: c.size > 0 ? c : void 0
+          }, We.current();
           return;
         }
-        const p = /* @__PURE__ */ new Map();
-        for (const t of v) p.set(t.id, t);
-        const a = Math.min(8 / O, 12);
-        for (const t of P) if (we(u.x, u.y, t, p, a)) {
-          if (lt(S ? (i) => {
-            const n = new Set(i.edgeIds);
-            return n.has(t.id) ? n.delete(t.id) : n.add(t.id), {
-              ...i,
-              edgeIds: n
+        const v = /* @__PURE__ */ new Map();
+        for (const t of p) v.set(t.id, t);
+        const x = Math.min(8 / Y, 12);
+        for (const t of D) if (ze(d.x, d.y, t, v, x)) {
+          if (ft(S ? (s) => {
+            const l = new Set(s.edgeIds);
+            return l.has(t.id) ? l.delete(t.id) : l.add(t.id), {
+              ...s,
+              edgeIds: l
             };
           } : {
             nodeIds: /* @__PURE__ */ new Set(),
             edgeIds: /* @__PURE__ */ new Set([t.id]),
             lineIds: /* @__PURE__ */ new Set()
-          }), Ft.current) {
-            const i = p.get(t.source), n = p.get(t.target);
-            if (i && n) {
-              const o = Math.min(i.position.x, n.position.x), r = Math.min(i.position.y, n.position.y), d = Math.max(i.position.x + i.width, n.position.x + n.width), w = Math.max(i.position.y + i.height, n.position.y + n.height);
-              _t.current(o, r, d - o, w - r, {
+          }), Vt.current) {
+            const s = v.get(t.source), l = v.get(t.target);
+            if (s && l) {
+              const c = Math.min(s.position.x, l.position.x), n = Math.min(s.position.y, l.position.y), i = Math.max(s.position.x + s.width, l.position.x + l.width), I = Math.max(s.position.y + s.height, l.position.y + l.height);
+              Bt.current(c, n, i - c, I - n, {
                 padding: 80,
                 preserveZoom: !0,
                 duration: 280
@@ -700,465 +646,465 @@ function Wn({ onPixiReady: F }) {
           }
           return;
         }
-        for (const t of N) if (_e(u.x, u.y, t, a)) {
-          const i = I.lineIds.has(t.id);
-          if (S ? lt((r) => {
-            const d = new Set(r.lineIds);
-            return d.has(t.id) ? d.delete(t.id) : d.add(t.id), {
-              ...r,
-              lineIds: d
+        for (const t of E) if (tn(d.x, d.y, t, x)) {
+          const s = m.lineIds.has(t.id);
+          if (S ? ft((n) => {
+            const i = new Set(n.lineIds);
+            return i.has(t.id) ? i.delete(t.id) : i.add(t.id), {
+              ...n,
+              lineIds: i
             };
-          }) : i || lt({
+          }) : s || ft({
             nodeIds: /* @__PURE__ */ new Set(),
             edgeIds: /* @__PURE__ */ new Set(),
             lineIds: /* @__PURE__ */ new Set([t.id])
-          }), Ft.current && t.points.length > 0) {
-            const r = t.points.map((h) => h.x), d = t.points.map((h) => h.y), w = Math.min(...r), g = Math.min(...d), C = Math.max(...r), H = Math.max(...d);
-            _t.current(w, g, Math.max(1, C - w), Math.max(1, H - g), {
+          }), Vt.current && t.points.length > 0) {
+            const n = t.points.map((y) => y.x), i = t.points.map((y) => y.y), I = Math.min(...n), g = Math.min(...i), b = Math.max(...n), H = Math.max(...i);
+            Bt.current(I, g, Math.max(1, b - I), Math.max(1, H - g), {
               padding: 80,
               preserveZoom: !0,
               duration: 280
             });
           }
-          const n = i ? new Set(I.lineIds) : /* @__PURE__ */ new Set([t.id]), o = /* @__PURE__ */ new Map();
-          for (const r of N) n.has(r.id) && o.set(r.id, r.points.map((d) => ({ ...d })));
-          vt.current = {
+          const l = s ? new Set(m.lineIds) : /* @__PURE__ */ new Set([t.id]), c = /* @__PURE__ */ new Map();
+          for (const n of E) l.has(n.id) && c.set(n.id, n.points.map((i) => ({ ...i })));
+          xt.current = {
             active: !0,
-            lineIds: n,
-            startWorld: u,
-            pointStarts: o
+            lineIds: l,
+            startWorld: d,
+            pointStarts: c
           };
           return;
         }
-        S || lt({
+        S || ft({
           nodeIds: /* @__PURE__ */ new Set(),
           edgeIds: /* @__PURE__ */ new Set(),
           lineIds: /* @__PURE__ */ new Set()
-        }), s === "select" && (rt.current = {
+        }), r === "select" && (Q.current = {
           active: !0,
           startScreen: {
-            x: m.global.x,
-            y: m.global.y
+            x: h.global.x,
+            y: h.global.y
           }
         });
-      }), ct.on("globalpointermove", (m) => {
-        const s = st.current(m.global.x, m.global.y);
-        Me.current = s;
-        const u = Xt.current;
-        if (u === "freehand" || u === "line" || u === "polyline" || u === "arrow") return;
-        const v = A.current.nodes, P = A.current.edges, N = $.current?.state.zoom ?? 1, I = !ft.current?.active && !ot.current?.active && !pt.current?.active && !dt.current?.active && !ut.current?.active && !vt.current?.active;
+      }), mt.on("globalpointermove", (h) => {
+        const r = ct.current(h.global.x, h.global.y);
+        if (ke.current = r, Z.current?.multiTouchActive) return;
+        const d = Ot.current;
+        if (d === "freehand" || d === "line" || d === "polyline" || d === "arrow") return;
+        const p = W.current.nodes, D = W.current.edges, E = Z.current?.state.zoom ?? 1, m = !ot.current?.active && !tt.current?.active && !ht.current?.active && !st.current?.active && !at.current?.active && !xt.current?.active;
         let S = null;
-        for (let e = v.length - 1; e >= 0; e--) if (Dt(s.x, s.y, v[e])) {
-          const c = v[e];
-          S = c.parentId ? v.find((y) => y.id === c.parentId)?.id ?? c.id : c.id;
+        for (let o = p.length - 1; o >= 0; o--) if (Lt(r.x, r.y, p[o])) {
+          const f = p[o];
+          S = f.parentId ? p.find((u) => u.id === f.parentId)?.id ?? f.id : f.id;
           break;
         }
-        if ($t.current = S, I && (u === "select" || u === "connect")) {
-          const e = /* @__PURE__ */ new Map();
-          for (const p of v) e.set(p.id, p);
-          const c = Yt.current, y = c.edgeIds.size > 0 ? P.filter((p) => c.edgeIds.has(p.id)) : [], f = y.length > 0 ? Ye(s.x, s.y, y, e, Math.min(12 / N, 18)) : null;
-          de.current = f;
-          let x = null;
+        if (ne.current = S, m && (d === "select" || d === "connect")) {
+          const o = /* @__PURE__ */ new Map();
+          for (const x of p) o.set(x.id, x);
+          const f = Zt.current, u = f.edgeIds.size > 0 ? D.filter((x) => f.edgeIds.has(x.id)) : [], e = u.length > 0 ? $e(r.x, r.y, u, o, Math.min(12 / E, 18)) : null;
+          pe.current = e;
+          let v = null;
           if (S) {
-            const p = v.find((a) => a.id === S);
-            if (p) {
-              const a = Et(gt(p.width, p.height), p, s.x, s.y, Math.min(14 / N, 20));
-              if (a) {
-                const t = Zt(a, p);
-                x = {
-                  nodeId: p.id,
-                  handleId: a.id,
-                  wx: t.x,
-                  wy: t.y
+            const x = p.find((t) => t.id === S);
+            if (x) {
+              const t = Gt(vt(x.width, x.height), x, r.x, r.y, Math.min(14 / E, 20));
+              if (t) {
+                const s = Ut(t, x);
+                v = {
+                  nodeId: x.id,
+                  handleId: t.id,
+                  wx: s.x,
+                  wy: s.y
                 };
               }
             }
           }
-          ie.current = x;
+          ye.current = v;
         }
-        const O = E.current;
-        if (O && I) {
-          const e = Yt.current;
-          let c = "";
-          if (de.current) c = "crosshair";
-          else if (ie.current) c = "crosshair";
-          else if (e.edgeIds.size > 0 && u === "select") {
-            const y = P.filter((p) => e.edgeIds.has(p.id)), f = /* @__PURE__ */ new Map();
-            for (const p of v) f.set(p.id, p);
-            const x = Math.min(10 / N, 14);
-            (Xe(s.x, s.y, y, x) || Fe(s.x, s.y, y, f, x)) && (c = "grab");
+        const Y = z.current;
+        if (Y && m) {
+          const o = Zt.current;
+          let f = "";
+          if (pe.current) f = "crosshair";
+          else if (ye.current) f = "crosshair";
+          else if (o.edgeIds.size > 0 && d === "select") {
+            const u = D.filter((x) => o.edgeIds.has(x.id)), e = /* @__PURE__ */ new Map();
+            for (const x of p) e.set(x.id, x);
+            const v = Math.min(10 / E, 14);
+            (Je(r.x, r.y, u, v) || Qe(r.x, r.y, u, e, v)) && (f = "grab");
           }
-          if (!c && e.nodeIds.size === 1 && u === "select") {
-            const y = v.find((f) => f.id === [...e.nodeIds][0]);
-            if (y) {
-              const f = Ae(s, y, Math.min(10 / N, 16));
-              f && (c = un[f]);
+          if (!f && o.nodeIds.size === 1 && d === "select") {
+            const u = p.find((e) => e.id === [...o.nodeIds][0]);
+            if (u) {
+              const e = je(r, u, Math.min(10 / E, 16));
+              e && (f = bn[e]);
             }
           }
-          if (!c && u === "select") {
-            const y = A.current.lines, f = Math.min(8 / N, 12);
-            for (const x of y) if (_e(s.x, s.y, x, f)) {
-              c = "move";
+          if (!f && d === "select") {
+            const u = W.current.lines, e = Math.min(8 / E, 12);
+            for (const v of u) if (tn(r.x, r.y, v, e)) {
+              f = "move";
               break;
             }
           }
-          O.style.cursor = c;
+          Y.style.cursor = f;
         }
-        if (pt.current?.active) {
-          const e = pt.current, c = s.x - e.startWorld.x, y = s.y - e.startWorld.y, f = hn(e.startBounds, e.handle, c, y), x = A.current.nodes, p = ne([{
-            id: e.nodeId,
+        if (ht.current?.active) {
+          const o = ht.current, f = r.x - o.startWorld.x, u = r.y - o.startWorld.y, e = Rn(o.startBounds, o.handle, f, u), v = W.current.nodes, x = ae([{
+            id: o.nodeId,
             type: "shapeRect",
             position: {
-              x: f.x,
-              y: f.y
+              x: e.x,
+              y: e.y
             },
-            width: f.w,
-            height: f.h,
+            width: e.w,
+            height: e.h,
             data: {}
-          }], x);
-          f.x += p.dx, f.y += p.dy, (e.handle === "ne" || e.handle === "se") && (f.w += p.dx), (e.handle === "se" || e.handle === "sw") && (f.h += p.dy), zt.current = p.guides;
-          const a = e.startBounds, t = Math.max(f.w, 24), i = Math.max(f.h, 24), n = a.w > 0 ? t / a.w : 1, o = a.h > 0 ? i / a.h : 1;
-          J((r) => {
-            const d = r.canvases[V.current];
-            return d ? {
-              ...r,
+          }], v);
+          e.x += x.dx, e.y += x.dy, (o.handle === "ne" || o.handle === "se") && (e.w += x.dx), (o.handle === "se" || o.handle === "sw") && (e.h += x.dy), Dt.current = x.guides;
+          const t = o.startBounds, s = Math.max(e.w, 24), l = Math.max(e.h, 24), c = t.w > 0 ? s / t.w : 1, n = t.h > 0 ? l / t.h : 1;
+          J((i) => {
+            const I = i.canvases[B.current];
+            return I ? {
+              ...i,
               canvases: {
-                ...r.canvases,
-                [V.current]: {
-                  ...d,
-                  nodes: d.nodes.map((w) => {
-                    if (w.id === e.nodeId) return {
-                      ...w,
+                ...i.canvases,
+                [B.current]: {
+                  ...I,
+                  nodes: I.nodes.map((g) => {
+                    if (g.id === o.nodeId) return {
+                      ...g,
                       position: {
-                        x: f.x,
-                        y: f.y
+                        x: e.x,
+                        y: e.y
                       },
-                      width: t,
-                      height: i
+                      width: s,
+                      height: l
                     };
-                    const g = e.childStarts.get(w.id);
-                    return g ? {
-                      ...w,
+                    const b = o.childStarts.get(g.id);
+                    return b ? {
+                      ...g,
                       position: {
-                        x: f.x + (g.x - a.x) * n,
-                        y: f.y + (g.y - a.y) * o
+                        x: e.x + (b.x - t.x) * c,
+                        y: e.y + (b.y - t.y) * n
                       },
-                      width: Math.max(g.w * n, 24),
-                      height: Math.max(g.h * o, 24)
-                    } : w;
+                      width: Math.max(b.w * c, 24),
+                      height: Math.max(b.h * n, 24)
+                    } : g;
                   }),
-                  lines: e.childLineStarts ? d.lines.map((w) => {
-                    const g = e.childLineStarts.get(w.id);
-                    return g ? {
-                      ...w,
-                      points: g.map((C) => ({
-                        x: f.x + (C.x - a.x) * n,
-                        y: f.y + (C.y - a.y) * o
+                  lines: o.childLineStarts ? I.lines.map((g) => {
+                    const b = o.childLineStarts.get(g.id);
+                    return b ? {
+                      ...g,
+                      points: b.map((H) => ({
+                        x: e.x + (H.x - t.x) * c,
+                        y: e.y + (H.y - t.y) * n
                       }))
-                    } : w;
-                  }) : d.lines
+                    } : g;
+                  }) : I.lines
                 }
               }
-            } : r;
+            } : i;
           });
           return;
         }
-        if (ut.current?.active) {
-          const e = ut.current, c = A.current.nodes, y = /* @__PURE__ */ new Map();
-          for (const f of c) y.set(f.id, f);
-          J((f) => {
-            const x = f.canvases[V.current];
-            return x ? {
-              ...f,
+        if (at.current?.active) {
+          const o = at.current, f = W.current.nodes, u = /* @__PURE__ */ new Map();
+          for (const e of f) u.set(e.id, e);
+          J((e) => {
+            const v = e.canvases[B.current];
+            return v ? {
+              ...e,
               canvases: {
-                ...f.canvases,
-                [V.current]: {
-                  ...x,
-                  edges: x.edges.map((p) => {
-                    if (p.id !== e.edgeId) return p;
-                    if (e.type === "waypoint") {
-                      const Nt = [...p.data.waypoints ?? []];
-                      return e.index < Nt.length && (Nt[e.index] = {
-                        x: s.x,
-                        y: s.y
+                ...e.canvases,
+                [B.current]: {
+                  ...v,
+                  edges: v.edges.map((x) => {
+                    if (x.id !== o.edgeId) return x;
+                    if (o.type === "waypoint") {
+                      const Pt = [...x.data.waypoints ?? []];
+                      return o.index < Pt.length && (Pt[o.index] = {
+                        x: r.x,
+                        y: r.y
                       }), {
-                        ...p,
+                        ...x,
                         data: {
-                          ...p.data,
-                          waypoints: Nt
+                          ...x.data,
+                          waypoints: Pt
                         }
                       };
                     }
-                    const a = Mt(p, y);
-                    if (!a) return p;
-                    const t = p.data.waypoints ?? [], i = [
+                    const t = Et(x, u);
+                    if (!t) return x;
+                    const s = x.data.waypoints ?? [], l = [
                       {
-                        x: a.sx,
-                        y: a.sy
+                        x: t.sx,
+                        y: t.sy
                       },
-                      ...t,
+                      ...s,
                       {
-                        x: a.tx,
-                        y: a.ty
+                        x: t.tx,
+                        y: t.ty
                       }
-                    ], n = i.length - 1, o = [...p.data.bezierControls ?? []];
-                    for (; o.length < n; ) o.push(null);
-                    const r = e.index;
-                    if (r >= n) return p;
-                    const d = i[r], w = i[r + 1], g = o[r], C = Math.hypot(w.x - d.x, w.y - d.y), H = Math.max(30, C * 0.3), h = n - 1, R = r === 0 ? d.x + a.snx * H : d.x + (w.x - d.x) * 0.4, j = r === 0 ? d.y + a.sny * H : d.y, ht = r === h ? w.x + a.tnx * H : w.x - (w.x - d.x) * 0.4, ee = r === h ? w.y + a.tny * H : w.y;
-                    return e.type === "bezierC1" ? o[r] = {
-                      c1x: s.x,
-                      c1y: s.y,
-                      c2x: g?.c2x ?? ht,
-                      c2y: g?.c2y ?? ee
-                    } : o[r] = {
-                      c1x: g?.c1x ?? R,
-                      c1y: g?.c1y ?? j,
-                      c2x: s.x,
-                      c2y: s.y
+                    ], c = l.length - 1, n = [...x.data.bezierControls ?? []];
+                    for (; n.length < c; ) n.push(null);
+                    const i = o.index;
+                    if (i >= c) return x;
+                    const I = l[i], g = l[i + 1], b = n[i], H = Math.hypot(g.x - I.x, g.y - I.y), y = Math.max(30, H * 0.3), M = c - 1, j = i === 0 ? I.x + t.snx * y : I.x + (g.x - I.x) * 0.4, $ = i === 0 ? I.y + t.sny * y : I.y, ie = i === M ? g.x + t.tnx * y : g.x - (g.x - I.x) * 0.4, de = i === M ? g.y + t.tny * y : g.y;
+                    return o.type === "bezierC1" ? n[i] = {
+                      c1x: r.x,
+                      c1y: r.y,
+                      c2x: b?.c2x ?? ie,
+                      c2y: b?.c2y ?? de
+                    } : n[i] = {
+                      c1x: b?.c1x ?? j,
+                      c1y: b?.c1y ?? $,
+                      c2x: r.x,
+                      c2y: r.y
                     }, {
-                      ...p,
+                      ...x,
                       data: {
-                        ...p.data,
-                        bezierControls: o
+                        ...x.data,
+                        bezierControls: n
                       }
                     };
                   })
                 }
               }
-            } : f;
+            } : e;
           });
           return;
         }
-        if (vt.current?.active) {
-          const e = vt.current, c = s.x - e.startWorld.x, y = s.y - e.startWorld.y;
-          J((f) => {
-            const x = f.canvases[V.current];
-            return x ? {
-              ...f,
+        if (xt.current?.active) {
+          const o = xt.current, f = r.x - o.startWorld.x, u = r.y - o.startWorld.y;
+          J((e) => {
+            const v = e.canvases[B.current];
+            return v ? {
+              ...e,
               canvases: {
-                ...f.canvases,
-                [V.current]: {
-                  ...x,
-                  lines: x.lines.map((p) => {
-                    const a = e.pointStarts.get(p.id);
-                    return a ? {
-                      ...p,
-                      points: a.map((t) => ({
-                        x: t.x + c,
-                        y: t.y + y
+                ...e.canvases,
+                [B.current]: {
+                  ...v,
+                  lines: v.lines.map((x) => {
+                    const t = o.pointStarts.get(x.id);
+                    return t ? {
+                      ...x,
+                      points: t.map((s) => ({
+                        x: s.x + f,
+                        y: s.y + u
                       }))
-                    } : p;
+                    } : x;
                   })
                 }
               }
-            } : f;
+            } : e;
           });
           return;
         }
-        if (ft.current?.active) {
-          const e = ft.current, c = s.x - e.startWorld.x, y = s.y - e.startWorld.y, f = A.current.nodes, x = ne(f.filter((t) => e.nodeIds.has(t.id)).map((t) => {
-            const i = e.nodeStarts.get(t.id);
+        if (ot.current?.active) {
+          const o = ot.current, f = r.x - o.startWorld.x, u = r.y - o.startWorld.y, e = W.current.nodes, v = ae(e.filter((s) => o.nodeIds.has(s.id)).map((s) => {
+            const l = o.nodeStarts.get(s.id);
             return {
-              ...t,
+              ...s,
               position: {
-                x: i.x + c,
-                y: i.y + y
+                x: l.x + f,
+                y: l.y + u
               }
             };
-          }), f), p = c + x.dx, a = y + x.dy;
-          zt.current = x.guides, J((t) => {
-            const i = t.canvases[V.current];
-            return i ? {
-              ...t,
+          }), e), x = f + v.dx, t = u + v.dy;
+          Dt.current = v.guides, J((s) => {
+            const l = s.canvases[B.current];
+            return l ? {
+              ...s,
               canvases: {
-                ...t.canvases,
-                [V.current]: {
-                  ...i,
-                  nodes: i.nodes.map((n) => {
-                    const o = e.nodeStarts.get(n.id);
-                    return o ? {
-                      ...n,
+                ...s.canvases,
+                [B.current]: {
+                  ...l,
+                  nodes: l.nodes.map((c) => {
+                    const n = o.nodeStarts.get(c.id);
+                    return n ? {
+                      ...c,
                       position: {
-                        x: o.x + p,
-                        y: o.y + a
+                        x: n.x + x,
+                        y: n.y + t
                       }
-                    } : n;
+                    } : c;
                   }),
-                  lines: e.linePointStarts ? i.lines.map((n) => {
-                    const o = e.linePointStarts.get(n.id);
-                    return o ? {
-                      ...n,
-                      points: o.map((r) => ({
-                        x: r.x + p,
-                        y: r.y + a
+                  lines: o.linePointStarts ? l.lines.map((c) => {
+                    const n = o.linePointStarts.get(c.id);
+                    return n ? {
+                      ...c,
+                      points: n.map((i) => ({
+                        x: i.x + x,
+                        y: i.y + t
                       }))
-                    } : n;
-                  }) : i.lines
+                    } : c;
+                  }) : l.lines
                 }
               }
-            } : t;
+            } : s;
           });
           return;
         }
-        if (rt.current?.active && St.current) {
-          const e = Math.min(rt.current.startScreen.x, m.global.x), c = Math.min(rt.current.startScreen.y, m.global.y), y = Math.abs(m.global.x - rt.current.startScreen.x), f = Math.abs(m.global.y - rt.current.startScreen.y);
-          St.current.showMarquee(e, c, y, f);
+        if (Q.current?.active && St.current) {
+          const o = Math.min(Q.current.startScreen.x, h.global.x), f = Math.min(Q.current.startScreen.y, h.global.y), u = Math.abs(h.global.x - Q.current.startScreen.x), e = Math.abs(h.global.y - Q.current.startScreen.y);
+          St.current.showMarquee(o, f, u, e);
         }
-        if (ot.current?.active && xt.current) {
-          const e = A.current.nodes.find((c) => c.id === ot.current.sourceNodeId);
-          if (e) {
-            const c = gt(e.width, e.height).find((y) => y.id === ot.current.sourceHandleId);
-            if (c) {
-              const y = Zt(c, e), f = y.x, x = y.y;
-              let p = s.x, a = s.y;
-              const t = $t.current;
-              if (t && t !== ot.current.sourceNodeId) {
-                const n = A.current.nodes.find((o) => o.id === t);
-                if (n) {
-                  const o = Et(gt(n.width, n.height), n, s.x, s.y, 1 / 0);
-                  if (o) {
-                    const r = Zt(o, n);
-                    p = r.x, a = r.y;
+        if (tt.current?.active && pt.current) {
+          const o = W.current.nodes.find((f) => f.id === tt.current.sourceNodeId);
+          if (o) {
+            const f = vt(o.width, o.height).find((u) => u.id === tt.current.sourceHandleId);
+            if (f) {
+              const u = Ut(f, o), e = u.x, v = u.y;
+              let x = r.x, t = r.y;
+              const s = ne.current;
+              if (s && s !== tt.current.sourceNodeId) {
+                const c = W.current.nodes.find((n) => n.id === s);
+                if (c) {
+                  const n = Gt(vt(c.width, c.height), c, r.x, r.y, 1 / 0);
+                  if (n) {
+                    const i = Ut(n, c);
+                    x = i.x, t = i.y;
                   }
                 }
               }
-              const i = xt.current;
-              i.clear(), i.moveTo(f, x).lineTo(p, a).stroke({
+              const l = pt.current;
+              l.clear(), l.moveTo(e, v).lineTo(x, t).stroke({
                 color: 3900150,
                 width: 2,
                 alpha: 0.6
-              }), i.visible = !0;
+              }), l.visible = !0;
             }
           }
         }
-        if (dt.current?.active && xt.current && !xt.current.destroyed) {
-          const e = dt.current, c = A.current.nodes.find((y) => y.id === e.fixedNodeId);
-          if (c) {
-            const y = gt(c.width, c.height).find((o) => o.id === e.fixedHandleId), f = y ? Zt(y, c) : {
-              x: c.position.x + c.width / 2,
-              y: c.position.y + c.height / 2
-            }, x = f.x, p = f.y;
-            let a = s.x, t = s.y;
-            const i = $t.current;
-            if (i && i !== e.fixedNodeId) {
-              const o = A.current.nodes.find((r) => r.id === i);
-              if (o) {
-                const r = Et(gt(o.width, o.height), o, s.x, s.y, 1 / 0);
-                if (r) {
-                  const d = Zt(r, o);
-                  a = d.x, t = d.y;
+        if (st.current?.active && pt.current && !pt.current.destroyed) {
+          const o = st.current, f = W.current.nodes.find((u) => u.id === o.fixedNodeId);
+          if (f) {
+            const u = vt(f.width, f.height).find((n) => n.id === o.fixedHandleId), e = u ? Ut(u, f) : {
+              x: f.position.x + f.width / 2,
+              y: f.position.y + f.height / 2
+            }, v = e.x, x = e.y;
+            let t = r.x, s = r.y;
+            const l = ne.current;
+            if (l && l !== o.fixedNodeId) {
+              const n = W.current.nodes.find((i) => i.id === l);
+              if (n) {
+                const i = Gt(vt(n.width, n.height), n, r.x, r.y, 1 / 0);
+                if (i) {
+                  const I = Ut(i, n);
+                  t = I.x, s = I.y;
                 }
               }
             }
-            const n = xt.current;
-            n.clear(), n.moveTo(x, p).lineTo(a, t).stroke({
+            const c = pt.current;
+            c.clear(), c.moveTo(v, x).lineTo(t, s).stroke({
               color: 16347926,
               width: 2,
               alpha: 0.7
-            }), n.visible = !0;
+            }), c.visible = !0;
           }
         }
       });
-      const bt = () => {
-        zt.current = [];
+      const zt = () => {
+        Dt.current = [];
         try {
-          Jt.current?.clear();
+          re.current?.clear();
         } catch {
         }
         try {
-          const m = xt.current;
-          m && !m.destroyed && (m.clear(), m.visible = !1);
+          const h = pt.current;
+          h && !h.destroyed && (h.clear(), h.visible = !1);
         } catch {
         }
-        E.current && (E.current.style.cursor = "");
+        z.current && (z.current.style.cursor = "");
       };
-      ct.on("pointerup", (m) => {
-        if (bt(), ut.current?.active) {
-          ut.current = null;
+      mt.on("pointerup", (h) => {
+        if (zt(), at.current?.active) {
+          at.current = null;
           return;
         }
-        if (pt.current?.active) {
-          pt.current = null;
+        if (ht.current?.active) {
+          ht.current = null;
           return;
         }
-        if (vt.current?.active) {
-          vt.current = null;
+        if (xt.current?.active) {
+          xt.current = null;
           return;
         }
-        if (ft.current?.active && (ft.current = null, le.current()), rt.current?.active) {
-          const s = st.current(rt.current.startScreen.x, rt.current.startScreen.y), u = st.current(m.global.x, m.global.y), v = Math.min(s.x, u.x), P = Math.min(s.y, u.y), N = Math.abs(u.x - s.x), I = Math.abs(u.y - s.y);
-          if (N > 4 && I > 4) {
-            const S = A.current.nodes.filter((e) => tn(v, P, N, I, e.position.x, e.position.y, e.width, e.height)), O = A.current.lines.filter((e) => e.points.length === 0 ? !1 : e.points.every((c) => c.x >= v && c.x <= v + N && c.y >= P && c.y <= P + I));
-            lt({
-              nodeIds: new Set(S.map((e) => e.id)),
+        if (ot.current?.active && (ot.current = null, se.current()), Q.current?.active) {
+          const r = ct.current(Q.current.startScreen.x, Q.current.startScreen.y), d = ct.current(h.global.x, h.global.y), p = Math.min(r.x, d.x), D = Math.min(r.y, d.y), E = Math.abs(d.x - r.x), m = Math.abs(d.y - r.y);
+          if (E > 4 && m > 4) {
+            const S = W.current.nodes.filter((o) => hn(p, D, E, m, o.position.x, o.position.y, o.width, o.height)), Y = W.current.lines.filter((o) => o.points.length === 0 ? !1 : o.points.every((f) => f.x >= p && f.x <= p + E && f.y >= D && f.y <= D + m));
+            ft({
+              nodeIds: new Set(S.map((o) => o.id)),
               edgeIds: /* @__PURE__ */ new Set(),
-              lineIds: new Set(O.map((e) => e.id))
+              lineIds: new Set(Y.map((o) => o.id))
             });
           }
-          rt.current = null, St.current?.hideMarquee();
+          Q.current = null, St.current?.hideMarquee();
         }
-        if (dt.current?.active) {
-          const s = dt.current.edgeId, u = dt.current.movingEnd, v = dt.current.fixedNodeId;
-          dt.current = null;
-          const P = st.current(m.global.x, m.global.y), N = A.current.nodes;
-          let I = null;
-          for (let S = N.length - 1; S >= 0; S--) if (Dt(P.x, P.y, N[S]) && N[S].id !== v) {
-            I = N[S];
+        if (st.current?.active) {
+          const r = st.current.edgeId, d = st.current.movingEnd, p = st.current.fixedNodeId;
+          st.current = null;
+          const D = ct.current(h.global.x, h.global.y), E = W.current.nodes;
+          let m = null;
+          for (let S = E.length - 1; S >= 0; S--) if (Lt(D.x, D.y, E[S]) && E[S].id !== p) {
+            m = E[S];
             break;
           }
-          if (I) {
-            const S = I.id, O = Et(gt(I.width, I.height), I, P.x, P.y, 1 / 0)?.id;
-            J((e) => {
-              const c = e.canvases[V.current];
-              return c ? {
-                ...e,
+          if (m) {
+            const S = m.id, Y = Gt(vt(m.width, m.height), m, D.x, D.y, 1 / 0)?.id;
+            J((o) => {
+              const f = o.canvases[B.current];
+              return f ? {
+                ...o,
                 canvases: {
-                  ...e.canvases,
-                  [V.current]: {
-                    ...c,
-                    edges: c.edges.map((y) => y.id !== s ? y : u === "source" ? {
-                      ...y,
+                  ...o.canvases,
+                  [B.current]: {
+                    ...f,
+                    edges: f.edges.map((u) => u.id !== r ? u : d === "source" ? {
+                      ...u,
                       source: S,
-                      sourceHandle: O
+                      sourceHandle: Y
                     } : {
-                      ...y,
+                      ...u,
                       target: S,
-                      targetHandle: O
+                      targetHandle: Y
                     })
                   }
                 }
-              } : e;
+              } : o;
             });
           }
           return;
         }
-        if (ot.current?.active) {
-          const s = ot.current.sourceNodeId, u = ot.current.sourceHandleId;
-          ot.current = null;
-          const v = st.current(m.global.x, m.global.y), P = A.current.nodes;
-          let N = null;
-          for (let I = P.length - 1; I >= 0; I--) if (Dt(v.x, v.y, P[I]) && P[I].id !== s) {
-            N = P[I];
+        if (tt.current?.active) {
+          const r = tt.current.sourceNodeId, d = tt.current.sourceHandleId;
+          tt.current = null;
+          const p = ct.current(h.global.x, h.global.y), D = W.current.nodes;
+          let E = null;
+          for (let m = D.length - 1; m >= 0; m--) if (Lt(p.x, p.y, D[m]) && D[m].id !== r) {
+            E = D[m];
             break;
           }
-          if (N) {
-            const I = N.id, S = Et(gt(N.width, N.height), N, v.x, v.y, 1 / 0)?.id, O = `edge_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 6)}`, e = ze.current;
-            J((c) => {
-              const y = c.canvases[V.current];
-              return !y || y.edges.some((f) => f.source === s && f.target === I && f.sourceHandle === u && f.targetHandle === S) ? c : {
-                ...c,
+          if (E) {
+            const m = E.id, S = Gt(vt(E.width, E.height), E, p.x, p.y, 1 / 0)?.id, Y = `edge_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 6)}`, o = Ge.current;
+            J((f) => {
+              const u = f.canvases[B.current];
+              return !u || u.edges.some((e) => e.source === r && e.target === m && e.sourceHandle === d && e.targetHandle === S) ? f : {
+                ...f,
                 canvases: {
-                  ...c.canvases,
-                  [V.current]: {
-                    ...y,
-                    edges: [...y.edges, {
-                      id: O,
-                      source: s,
-                      target: I,
-                      sourceHandle: u,
+                  ...f.canvases,
+                  [B.current]: {
+                    ...u,
+                    edges: [...u.edges, {
+                      id: Y,
+                      source: r,
+                      target: m,
+                      sourceHandle: d,
                       targetHandle: S,
-                      type: e,
+                      type: o,
                       data: {
                         strokeColor: "theme:base-content",
                         strokeWidth: 2,
@@ -1172,49 +1118,145 @@ function Wn({ onPixiReady: F }) {
             });
           }
         }
-      }), ct.on("pointerupoutside", () => {
-        bt(), ft.current?.active && le.current(), ft.current = null, pt.current = null, rt.current = null, dt.current = null, ot.current = null, ut.current = null, vt.current = null, St.current?.hideMarquee();
-      }), ct.on("rightclick", (m) => {
-        if (m.preventDefault?.(), $.current?.didRightPan) return;
-        const s = st.current(m.global.x, m.global.y), u = A.current.nodes;
-        let v = null;
-        for (let S = u.length - 1; S >= 0; S--) if (Dt(s.x, s.y, u[S])) {
-          v = u[S].id;
+      }), mt.on("pointerupoutside", () => {
+        zt(), ot.current?.active && se.current(), ot.current = null, ht.current = null, Q.current = null, st.current = null, tt.current = null, at.current = null, xt.current = null, St.current?.hideMarquee();
+      });
+      const Ct = z.current;
+      let ut = null;
+      const Kt = (h) => {
+        const r = Ct.getBoundingClientRect(), d = h[0].clientX, p = h[0].clientY, D = h[1].clientX, E = h[1].clientY;
+        return {
+          dist: Math.hypot(D - d, E - p),
+          midX: (d + D) / 2 - r.left,
+          midY: (p + E) / 2 - r.top
+        };
+      }, Me = () => {
+        zt(), ot.current?.active && se.current(), ot.current = null, ht.current = null, Q.current = null, st.current = null, tt.current = null, at.current = null, xt.current = null, St.current?.hideMarquee(), Z.current?.cancelPan();
+      }, _e = (h) => {
+        if (h.touches.length < 2) return;
+        const r = Z.current;
+        r && (r.multiTouchActive = !0, Me(), ut = Kt(h.touches), h.preventDefault());
+      }, qe = (h) => {
+        if (!ut || h.touches.length < 2) return;
+        h.preventDefault();
+        const r = Z.current;
+        if (!r) return;
+        const d = Kt(h.touches), p = d.dist / Math.max(1, ut.dist);
+        Number.isFinite(p) && p > 0 && r.zoomAt(d.midX, d.midY, p), r.setState({
+          x: r.state.x + (d.midX - ut.midX),
+          y: r.state.y + (d.midY - ut.midY)
+        }), ut = d;
+      }, Re = (h) => {
+        if (h.touches.length >= 2) {
+          ut = Kt(h.touches);
+          return;
+        }
+        if (ut = null, h.touches.length === 0) {
+          const r = Z.current;
+          r && (r.multiTouchActive = !1), Te.current = performance.now() + 350;
+        }
+      };
+      Ct?.addEventListener("touchstart", _e, { passive: !1 }), Ct?.addEventListener("touchmove", qe, { passive: !1 }), Ct?.addEventListener("touchend", Re), Ct?.addEventListener("touchcancel", Re), X = _e, L = qe, O = Re, mt.on("rightclick", (h) => {
+        if (h.preventDefault?.(), Z.current?.didRightPan) return;
+        const r = ct.current(h.global.x, h.global.y), d = W.current.nodes;
+        let p = null;
+        for (let S = d.length - 1; S >= 0; S--) if (Lt(r.x, r.y, d[S])) {
+          p = d[S].id;
           break;
         }
-        const P = m.nativeEvent, N = P?.clientX ?? m.global.x, I = P?.clientY ?? m.global.y;
-        Bt({
-          x: N,
-          y: I,
-          nodeId: v
+        const D = h.nativeEvent, E = D?.clientX ?? h.global.x, m = D?.clientY ?? h.global.y;
+        Jt({
+          x: E,
+          y: m,
+          nodeId: p
         });
-      }), ct.on("pointertap", (m) => {
-        if (m.button !== 0) return;
-        const s = Date.now(), u = st.current(m.global.x, m.global.y), v = Lt.current, P = u.x - v.wx, N = u.y - v.wy;
-        if (s - v.time < 400 && Math.abs(P) < 10 && Math.abs(N) < 10) {
-          const I = A.current.nodes;
-          for (let c = I.length - 1; c >= 0; c--) if (Dt(u.x, u.y, I[c])) {
-            const y = I[c], f = y.data.childCanvasId;
-            if (f) {
-              Oe(f), Lt.current = {
+      }), mt.on("pointertap", (h) => {
+        if (Z.current?.multiTouchActive || performance.now() < Te.current || h.button !== 0) return;
+        const r = Date.now(), d = ct.current(h.global.x, h.global.y), p = oe.current;
+        if (p) {
+          const S = fn("node"), Y = d.x - p.width / 2, o = d.y - p.height / 2, f = ae([{
+            id: "__ghost__",
+            type: p.type,
+            position: {
+              x: Y,
+              y: o
+            },
+            width: p.width,
+            height: p.height,
+            data: {}
+          }], W.current.nodes), u = Y + f.dx, e = o + f.dy;
+          J((v) => {
+            const x = v.canvases[B.current];
+            if (!x) return v;
+            const t = {};
+            p.type === "animAnchor" && (t.animIndex = In(v));
+            const s = Math.max(0, ...x.nodes.map((l) => l.zIndex ?? 0), ...x.lines.map((l) => l.zIndex ?? 0));
+            return {
+              ...v,
+              canvases: {
+                ...v.canvases,
+                [B.current]: {
+                  ...x,
+                  nodes: [...x.nodes, {
+                    id: S,
+                    type: p.type,
+                    position: {
+                      x: u,
+                      y: e
+                    },
+                    width: p.width,
+                    height: p.height,
+                    zIndex: s + 1,
+                    data: {
+                      ...p.data,
+                      ...t
+                    }
+                  }]
+                }
+              }
+            };
+          }), ft({
+            nodeIds: /* @__PURE__ */ new Set([S]),
+            edgeIds: /* @__PURE__ */ new Set(),
+            lineIds: /* @__PURE__ */ new Set()
+          }), Vt.current && window.setTimeout(() => {
+            Bt.current(u, e, p.width, p.height, {
+              padding: 80,
+              preserveZoom: !0,
+              duration: 280
+            });
+          }, 0), Tt.current = {
+            time: 0,
+            wx: 0,
+            wy: 0
+          };
+          return;
+        }
+        const D = Tt.current, E = d.x - D.wx, m = d.y - D.wy;
+        if (r - D.time < 400 && Math.abs(E) < 10 && Math.abs(m) < 10) {
+          const S = W.current.nodes;
+          for (let u = S.length - 1; u >= 0; u--) if (Lt(d.x, d.y, S[u])) {
+            const e = S[u], v = e.data.childCanvasId;
+            if (v) {
+              rn(v), Tt.current = {
                 time: 0,
                 wx: 0,
                 wy: 0
               };
               return;
             }
-            Qt.current("node", y.id, y.data.label ?? ""), Lt.current = {
+            ce.current("node", e.id, e.data.label ?? ""), Tt.current = {
               time: 0,
               wx: 0,
               wy: 0
             };
             return;
           }
-          const S = A.current.edges, O = /* @__PURE__ */ new Map();
-          for (const c of I) O.set(c.id, c);
-          const e = $.current?.state.zoom ?? 1;
-          for (let c = S.length - 1; c >= 0; c--) if (we(u.x, u.y, S[c], O, Math.min(8 / e, 12))) {
-            Qt.current("edge", S[c].id, S[c].data.labelText ?? ""), Lt.current = {
+          const Y = W.current.edges, o = /* @__PURE__ */ new Map();
+          for (const u of S) o.set(u.id, u);
+          const f = Z.current?.state.zoom ?? 1;
+          for (let u = Y.length - 1; u >= 0; u--) if (ze(d.x, d.y, Y[u], o, Math.min(8 / f, 12))) {
+            ce.current("edge", Y[u].id, Y[u].data.labelText ?? ""), Tt.current = {
               time: 0,
               wx: 0,
               wy: 0
@@ -1222,161 +1264,161 @@ function Wn({ onPixiReady: F }) {
             return;
           }
         }
-        Lt.current = {
-          time: s,
-          wx: u.x,
-          wy: u.y
+        Tt.current = {
+          time: r,
+          wx: d.x,
+          wy: d.y
         };
       });
-      let te = !1;
-      l.app.ticker.add((m) => {
-        if (l.destroyed) return;
-        const s = m.deltaMS, u = l.app.screen, v = $.current?.state ?? {
+      let Ze = !1;
+      a.app.ticker.add((h) => {
+        if (a.destroyed) return;
+        const r = h.deltaMS, d = a.app.screen, p = Z.current?.state ?? {
           x: 0,
           y: 0,
           zoom: 1
         };
-        G.current?.update(v, u.width, u.height);
-        const P = $.current?.isPanning ?? !1;
-        P !== te && (te = P, E.current && (E.current.style.cursor = P ? "grabbing" : ""));
-        const N = A.current, I = Yt.current, S = dn(Se.current), O = /* @__PURE__ */ new Map();
-        S.forEach((a, t) => O.set(a.node.id, t + 1)), Kt.current?.advanceAnimation(s);
-        const e = Ct.current ? S[Ct.current.current] : void 0;
-        Kt.current?.sync(N.nodes, I.nodeIds, $t.current, O, {
-          showAnchors: Ce.current,
-          presentation: Ct.current !== null,
-          presentationAnchorId: e?.node.id,
-          presentationAnchorVisible: Ct.current?.showAnchor ?? !1
+        P.current?.update(p, d.width, d.height);
+        const D = Z.current?.isPanning ?? !1;
+        D !== Ze && (Ze = D, z.current && (z.current.style.cursor = D ? "grabbing" : ""));
+        const E = W.current, m = Zt.current, S = vn(Pe.current), Y = /* @__PURE__ */ new Map();
+        S.forEach((t, s) => Y.set(t.node.id, s + 1)), Qt.current?.advanceAnimation(r);
+        const o = kt.current ? S[kt.current.current] : void 0;
+        Qt.current?.sync(E.nodes, m.nodeIds, ne.current, Y, {
+          showAnchors: Le.current,
+          presentation: kt.current !== null,
+          presentationAnchorId: o?.node.id,
+          presentationAnchorVisible: kt.current?.showAnchor ?? !1
         });
-        const c = /* @__PURE__ */ new Map();
-        for (const a of N.nodes) c.set(a.id, a);
-        jt.current?.advanceAnimation(s), jt.current?.sync(N.edges, c, I.edgeIds, null, { presentation: Ct.current !== null }), Ut.current?.advanceAnimation(s), Ut.current?.sync(N.lines, I.lineIds), Jt.current?.update(zt.current, u.width, u.height, v);
-        const y = Gt.current;
-        if (y) {
-          y.clear();
-          const a = ie.current;
-          a && (y.circle(a.wx, a.wy, 10).fill({
+        const f = /* @__PURE__ */ new Map();
+        for (const t of E.nodes) f.set(t.id, t);
+        te.current?.advanceAnimation(r), te.current?.sync(E.edges, f, m.edgeIds, null, { presentation: kt.current !== null }), ee.current?.advanceAnimation(r), ee.current?.sync(E.lines, m.lineIds), re.current?.update(Dt.current, d.width, d.height, p);
+        const u = Ft.current;
+        if (u) {
+          u.clear();
+          const t = ye.current;
+          t && (u.circle(t.wx, t.wy, 10).fill({
             color: 3900150,
             alpha: 0.12
           }).stroke({
             color: 3900150,
             width: 1.5,
             alpha: 0.5
-          }), y.circle(a.wx, a.wy, 4).fill({
+          }), u.circle(t.wx, t.wy, 4).fill({
             color: 3900150,
             alpha: 0.9
           }));
-          const t = de.current;
-          t && !a && (y.circle(t.worldX, t.worldY, 10).fill({
+          const s = pe.current;
+          s && !t && (u.circle(s.worldX, s.worldY, 10).fill({
             color: 16347926,
             alpha: 0.12
           }).stroke({
             color: 16347926,
             width: 1.5,
             alpha: 0.5
-          }), y.circle(t.worldX, t.worldY, 4).fill({
+          }), u.circle(s.worldX, s.worldY, 4).fill({
             color: 16347926,
             alpha: 0.9
           }));
         }
-        const f = At.current;
-        if (f) {
-          f.clear();
-          const a = ae.current;
-          if (a) {
-            const t = Me.current, i = t.x - a.width / 2, n = t.y - a.height / 2, o = ne([{
+        const e = qt.current;
+        if (e) {
+          e.clear();
+          const t = oe.current;
+          if (t) {
+            const s = ke.current, l = s.x - t.width / 2, c = s.y - t.height / 2, n = ae([{
               id: "__ghost__",
-              type: a.type,
+              type: t.type,
               position: {
-                x: i,
-                y: n
+                x: l,
+                y: c
               },
-              width: a.width,
-              height: a.height,
+              width: t.width,
+              height: t.height,
               data: {}
-            }], N.nodes);
-            zt.current = o.guides, f.position.set(i + o.dx, n + o.dy), (Ge[a.type] ?? Ge.shapeRect)(f, {
-              width: a.width,
-              height: a.height,
+            }], E.nodes);
+            Dt.current = n.guides, e.position.set(l + n.dx, c + n.dy), (Be[t.type] ?? Be.shapeRect)(e, {
+              width: t.width,
+              height: t.height,
               fill: "#3b82f6",
               stroke: "#3b82f6",
               strokeWidth: 1.5,
-              borderStyle: a.data.borderStyle
+              borderStyle: t.data.borderStyle
             });
           } else
-            f.position.set(0, 0), !ft.current?.active && !pt.current?.active && (zt.current = []);
+            e.position.set(0, 0), !ot.current?.active && !ht.current?.active && (Dt.current = []);
         }
-        const x = Wt.current;
-        if (x && (x.clear(), I.edgeIds.size > 0 && Xt.current === "select")) {
-          const a = 1 / v.zoom;
-          for (const t of N.edges) {
-            if (!I.edgeIds.has(t.id)) continue;
-            const i = t.data.waypoints;
-            if (i) for (const n of i) x.circle(n.x, n.y, 5 * a).fill({ color: 16777215 }).stroke({
+        const v = _t.current;
+        if (v && (v.clear(), m.edgeIds.size > 0 && Ot.current === "select")) {
+          const t = 1 / p.zoom;
+          for (const s of E.edges) {
+            if (!m.edgeIds.has(s.id)) continue;
+            const l = s.data.waypoints;
+            if (l) for (const c of l) v.circle(c.x, c.y, 5 * t).fill({ color: 16777215 }).stroke({
               color: 3900150,
-              width: 1.5 * a
+              width: 1.5 * t
             });
-            if (t.type === "simplebezier") {
-              const n = Mt(t, c);
-              if (!n) continue;
-              const o = i ?? [], r = [
+            if (s.type === "simplebezier") {
+              const c = Et(s, f);
+              if (!c) continue;
+              const n = l ?? [], i = [
                 {
-                  x: n.sx,
-                  y: n.sy
+                  x: c.sx,
+                  y: c.sy
                 },
-                ...o,
+                ...n,
                 {
-                  x: n.tx,
-                  y: n.ty
+                  x: c.tx,
+                  y: c.ty
                 }
-              ], d = t.data.bezierControls, w = r.length - 2;
-              for (let g = 0; g <= w; g++) {
-                const C = r[g], H = r[g + 1], h = d?.[g], R = Math.hypot(H.x - C.x, H.y - C.y), j = Math.max(30, R * 0.3), ht = h?.c1x ?? (g === 0 ? C.x + n.snx * j : C.x + (H.x - C.x) * 0.4), ee = h?.c1y ?? (g === 0 ? C.y + n.sny * j : C.y), Nt = h?.c2x ?? (g === w ? H.x + n.tnx * j : H.x - (H.x - C.x) * 0.4), Te = h?.c2y ?? (g === w ? H.y + n.tny * j : H.y);
-                x.moveTo(C.x, C.y).lineTo(ht, ee).stroke({
+              ], I = s.data.bezierControls, g = i.length - 2;
+              for (let b = 0; b <= g; b++) {
+                const H = i[b], y = i[b + 1], M = I?.[b], j = Math.hypot(y.x - H.x, y.y - H.y), $ = Math.max(30, j * 0.3), ie = M?.c1x ?? (b === 0 ? H.x + c.snx * $ : H.x + (y.x - H.x) * 0.4), de = M?.c1y ?? (b === 0 ? H.y + c.sny * $ : H.y), Pt = M?.c2x ?? (b === g ? y.x + c.tnx * $ : y.x - (y.x - H.x) * 0.4), Oe = M?.c2y ?? (b === g ? y.y + c.tny * $ : y.y);
+                v.moveTo(H.x, H.y).lineTo(ie, de).stroke({
                   color: 10265519,
-                  width: 1 * a
-                }), x.moveTo(H.x, H.y).lineTo(Nt, Te).stroke({
+                  width: 1 * t
+                }), v.moveTo(y.x, y.y).lineTo(Pt, Oe).stroke({
                   color: 10265519,
-                  width: 1 * a
+                  width: 1 * t
                 });
-                const Pe = 4 * a;
-                x.circle(ht, ee, Pe).fill({ color: 16777215 }).stroke({
+                const Ve = 4 * t;
+                v.circle(ie, de, Ve).fill({ color: 16777215 }).stroke({
                   color: 3900150,
-                  width: 1.5 * a
-                }), x.circle(Nt, Te, Pe).fill({ color: 16777215 }).stroke({
+                  width: 1.5 * t
+                }), v.circle(Pt, Oe, Ve).fill({ color: 16777215 }).stroke({
                   color: 3900150,
-                  width: 1.5 * a
+                  width: 1.5 * t
                 });
               }
             }
           }
         }
-        const p = Pt.current;
-        if (p && (p.clear(), I.nodeIds.size === 1 && Xt.current === "select")) {
-          const a = [...I.nodeIds][0], t = N.nodes.find((i) => i.id === a);
-          if (t) {
-            const i = v.zoom, n = t.position.x * i + v.x, o = t.position.y * i + v.y, r = t.width * i, d = t.height * i;
-            p.rect(n, o, r, d).stroke({
+        const x = Xt.current;
+        if (x && (x.clear(), m.nodeIds.size === 1 && Ot.current === "select")) {
+          const t = [...m.nodeIds][0], s = E.nodes.find((l) => l.id === t);
+          if (s) {
+            const l = p.zoom, c = s.position.x * l + p.x, n = s.position.y * l + p.y, i = s.width * l, I = s.height * l;
+            x.rect(c, n, i, I).stroke({
               color: 3900150,
               width: 1.5
             });
-            const w = 7, g = w / 2, C = [
-              [n, o],
-              [n + r, o],
-              [n + r, o + d],
-              [n, o + d]
+            const g = 7, b = g / 2, H = [
+              [c, n],
+              [c + i, n],
+              [c + i, n + I],
+              [c, n + I]
             ];
-            for (const [R, j] of C) p.rect(R - g, j - g, w, w).fill({ color: 16777215 }).stroke({
+            for (const [j, $] of H) x.rect(j - b, $ - b, g, g).fill({ color: 16777215 }).stroke({
               color: 3900150,
               width: 1.5
             });
-            const H = 4, h = [
-              [n + r / 2, o],
-              [n + r, o + d / 2],
-              [n + r / 2, o + d],
-              [n, o + d / 2]
+            const y = 4, M = [
+              [c + i / 2, n],
+              [c + i, n + I / 2],
+              [c + i / 2, n + I],
+              [c, n + I / 2]
             ];
-            for (const [R, j] of h) p.circle(R, j, H).fill({
+            for (const [j, $] of M) x.circle(j, $, y).fill({
               color: 3900150,
               alpha: 0.9
             });
@@ -1384,72 +1426,87 @@ function Wn({ onPixiReady: F }) {
         }
       });
     };
-    return Y(), () => {
-      if (T = !0, l && !l.destroyed) try {
-        l.app.stage.removeAllListeners();
+    return F(), () => {
+      if (k = !0, a && !a.destroyed) try {
+        a.app.stage.removeAllListeners();
       } catch {
       }
-      G.current?.destroy(), St.current?.destroy(), Kt.current?.destroy(), jt.current?.destroy(), Ut.current?.destroy(), se.current?.destroy(), ce.current?.destroy(), xt.current?.destroy(), Pt.current && (Pt.current.destroy(), Pt.current = null), Gt.current && (Gt.current.destroy(), Gt.current = null), Wt.current && (Wt.current.destroy(), Wt.current = null), At.current && (At.current.destroy(), At.current = null), Jt.current?.destroy();
+      const A = z.current;
+      X && A?.removeEventListener("touchstart", X), L && A?.removeEventListener("touchmove", L), O && (A?.removeEventListener("touchend", O), A?.removeEventListener("touchcancel", O)), P.current?.destroy(), St.current?.destroy(), Qt.current?.destroy(), te.current?.destroy(), ee.current?.destroy(), fe.current?.destroy(), he.current?.destroy(), pt.current?.destroy(), Xt.current && (Xt.current.destroy(), Xt.current = null), Ft.current && (Ft.current.destroy(), Ft.current = null), _t.current && (_t.current.destroy(), _t.current = null), qt.current && (qt.current.destroy(), qt.current = null), re.current?.destroy();
     };
-  }, [D.current]), wt(() => {
-    const l = se.current, T = ce.current;
-    if (!(!l || !T))
-      switch (l.deactivate(), T.deactivate(), K) {
+  }, [N.current]), It(() => {
+    const a = fe.current, k = he.current;
+    if (!(!a || !k))
+      switch (a.deactivate(), k.deactivate(), K) {
         case "freehand":
-          l.activate();
+          a.activate();
           break;
         case "line":
-          T.activate("straight");
+          k.activate("straight");
           break;
         case "polyline":
-          T.activate("polyline");
+          k.activate("polyline");
           break;
         case "arrow":
-          T.activate("arrow");
+          k.activate("arrow");
           break;
       }
-  }, [K]), wt(() => {
-    G.current && (G.current.visible = U, G.current.gridSize = tt);
-  }, [U, tt]), wt(() => {
-    const l = E.current;
-    if (!l) return;
-    const T = 1e-3, Y = (L) => {
+  }, [K]), It(() => {
+    P.current && (P.current.visible = U, P.current.gridSize = et);
+  }, [U, et]), It(() => {
+    const a = z.current;
+    if (!a) return;
+    const k = 1e-3, X = (L) => {
       L.preventDefault();
-      const q = $.current;
-      if (!q) return;
-      const X = l.getBoundingClientRect(), B = L.clientX - X.left, Q = L.clientY - X.top, ct = L.ctrlKey ? 3 : 1, bt = -L.deltaY * T * ct;
-      q.zoomAt(B, Q, 1 + bt);
+      const O = Z.current;
+      if (!O) return;
+      const F = a.getBoundingClientRect(), A = L.clientX - F.left, it = L.clientY - F.top, gt = L.ctrlKey ? 3 : 1, wt = -L.deltaY * k * gt;
+      O.zoomAt(A, it, 1 + wt);
     };
-    return l.addEventListener("wheel", Y, { passive: !1 }), () => l.removeEventListener("wheel", Y);
-  }, [$]), /* @__PURE__ */ ln("div", {
+    return a.addEventListener("wheel", X, { passive: !1 }), () => a.removeEventListener("wheel", X);
+  }, [Z]), /* @__PURE__ */ Ue("div", {
     style: {
       position: "relative",
       width: "100%",
       height: "100%"
     },
-    children: [/* @__PURE__ */ Le("div", {
-      ref: E,
-      className: "flow-canvas-wrapper",
-      tabIndex: -1,
-      onContextMenu: (l) => l.preventDefault()
-    }), at && ye && /* @__PURE__ */ Le("input", {
-      className: "flow-label-editor",
-      autoFocus: !0,
-      defaultValue: at.value,
-      style: {
-        left: ye.x,
-        top: ye.y
-      },
-      onKeyDown: (l) => {
-        l.key === "Enter" ? (l.preventDefault(), De(l.target.value)) : l.key === "Escape" && (l.preventDefault(), Ve()), l.stopPropagation();
-      },
-      onBlur: (l) => De(l.target.value),
-      onPointerDown: (l) => l.stopPropagation()
-    })]
+    children: [
+      /* @__PURE__ */ Se("div", {
+        ref: z,
+        className: "flow-canvas-wrapper",
+        tabIndex: -1,
+        onContextMenu: (a) => a.preventDefault()
+      }),
+      lt && me && /* @__PURE__ */ Se("input", {
+        className: "flow-label-editor",
+        autoFocus: !0,
+        defaultValue: lt.value,
+        style: {
+          left: me.x,
+          top: me.y
+        },
+        onFocus: (a) => a.currentTarget.select(),
+        onKeyDown: (a) => {
+          a.key === "Enter" ? (a.preventDefault(), Ye(a.target.value)) : a.key === "Escape" && (a.preventDefault(), on()), a.stopPropagation();
+        },
+        onBlur: (a) => Ye(a.target.value),
+        onPointerDown: (a) => a.stopPropagation()
+      }),
+      Wt && !Mt && /* @__PURE__ */ Ue("button", {
+        type: "button",
+        className: "flow-esc-button",
+        onClick: () => Nt(null),
+        title: "取消连续放置 (Esc)",
+        children: [/* @__PURE__ */ Se("span", {
+          "aria-hidden": !0,
+          children: "⎋"
+        }), " 取消放置 (ESC)"]
+      })
+    ]
   });
 }
 export {
-  Wn as default
+  Bn as default
 };
 
 //# sourceMappingURL=FlowCanvas.js.map