dishui 0.0.56 → 0.0.59

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

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