integration-modules 0.1.16 → 0.1.17

package/dist/chunks/ShapeBoardWidget-BmgYD5zN.js

@@ -0,0 +1,1321 @@
+import { j as s, b as vt, u as z } from "./useStickersStore-BUOBakV7.js";
+import kt, { useState as I, useRef as F, useEffect as T, useMemo as _t } from "react";
+import { useReactFlow as bt, NodeResizer as jt, Handle as nt, Position as rt } from "@xyflow/react";
+const Et = [
+  { id: "line", name: "Линия", defaultSize: { width: 80, height: 20 } },
+  { id: "arrow", name: "Стрелка", defaultSize: { width: 180, height: 60 } },
+  { id: "dblarrow", name: "Двойная стрелка", defaultSize: { width: 200, height: 60 } },
+  { id: "square", name: "Квадрат", defaultSize: { width: 140, height: 140 } },
+  { id: "circle", name: "Круг", defaultSize: { width: 140, height: 140 } },
+  { id: "triangle", name: "Треугольник", defaultSize: { width: 160, height: 150 } },
+  { id: "star", name: "Звезда", defaultSize: { width: 160, height: 160 } },
+  { id: "parallelogram", name: "Параллелограмм", defaultSize: { width: 200, height: 120 } },
+  { id: "stick", name: "Палка", defaultSize: { width: 20, height: 160 } },
+  { id: "roundedRect", name: "Скруглённый прямоугольник", defaultSize: { width: 160, height: 100 } },
+  { id: "capsule", name: "Капсула", defaultSize: { width: 160, height: 60 } },
+  { id: "pentagon", name: "Пятиугольник", defaultSize: { width: 140, height: 140 } },
+  { id: "chevron", name: "Галка", defaultSize: { width: 160, height: 80 } },
+  { id: "table3x3", name: "Таблица 3×3", defaultSize: { width: 180, height: 180 } },
+  { id: "pyramid", name: "Пирамида", defaultSize: { width: 160, height: 160 } },
+  { id: "circleArrow", name: "Круг со стрелкой", defaultSize: { width: 140, height: 140 } },
+  { id: "table3x3LeftMerge", name: "Таблица 3×3", defaultSize: { width: 180, height: 180 } }
+], St = {
+  square: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", children: /* @__PURE__ */ s.jsx("rect", { x: "4", y: "4", width: "32", height: "32", stroke: "black", fill: "none", strokeWidth: "2" }) }),
+  circle: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", children: /* @__PURE__ */ s.jsx("circle", { cx: "20", cy: "20", r: "14", stroke: "black", fill: "none", strokeWidth: "2" }) }),
+  triangle: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", children: /* @__PURE__ */ s.jsx("polygon", { points: "20,6 34,34 6,34", stroke: "black", fill: "none", strokeWidth: "2" }) }),
+  star: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", children: /* @__PURE__ */ s.jsx(
+    "polygon",
+    {
+      points: "20,4 25,16 38,16 27,24 32,36 20,28 8,36 13,24 2,16 15,16",
+      stroke: "black",
+      fill: "none",
+      strokeWidth: "2"
+    }
+  ) }),
+  stick: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", children: /* @__PURE__ */ s.jsx("rect", { x: "16", y: "4", width: "8", height: "32", stroke: "black", fill: "none", strokeWidth: "2" }) }),
+  line: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", children: /* @__PURE__ */ s.jsx("line", { x1: "4", y1: "20", x2: "36", y2: "20", stroke: "black", strokeWidth: "2" }) }),
+  arrow: /* @__PURE__ */ s.jsxs("svg", { width: "40", height: "40", children: [
+    /* @__PURE__ */ s.jsx("line", { x1: "4", y1: "20", x2: "30", y2: "20", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("polygon", { points: "30,14 38,20 30,26", fill: "black" })
+  ] }),
+  dblarrow: /* @__PURE__ */ s.jsxs("svg", { width: "40", height: "40", children: [
+    /* @__PURE__ */ s.jsx("polygon", { points: "4,20 12,14 12,26", fill: "black" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "12", y1: "20", x2: "28", y2: "20", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("polygon", { points: "28,14 36,20 28,26", fill: "black" })
+  ] }),
+  parallelogram: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: /* @__PURE__ */ s.jsx("polygon", { points: "8,8 34,8 26,32 0,32", stroke: "black", fill: "none", strokeWidth: "2" }) }),
+  roundedRect: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: /* @__PURE__ */ s.jsx("rect", { x: "6", y: "10", width: "28", height: "20", rx: "4", ry: "4", stroke: "black", fill: "none", strokeWidth: "2" }) }),
+  capsule: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: /* @__PURE__ */ s.jsx("rect", { x: "6", y: "14", width: "28", height: "12", rx: "6", ry: "6", stroke: "black", fill: "none", strokeWidth: "2" }) }),
+  pentagon: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: /* @__PURE__ */ s.jsx("polygon", { points: "20,6 34,15 28,32 12,32 6,15", stroke: "black", fill: "none", strokeWidth: "2" }) }),
+  chevron: /* @__PURE__ */ s.jsx("svg", { width: "40", height: "40", viewBox: "0 0 100 100", children: /* @__PURE__ */ s.jsx(
+    "polyline",
+    {
+      points: "0,0 50,100 100,0",
+      fill: "none",
+      stroke: "black",
+      strokeWidth: "5"
+    }
+  ) }),
+  table3x3: /* @__PURE__ */ s.jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: [
+    /* @__PURE__ */ s.jsx("rect", { x: "4", y: "4", width: "32", height: "32", stroke: "black", fill: "none", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "14", y1: "4", x2: "14", y2: "36", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "26", y1: "4", x2: "26", y2: "36", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "4", y1: "14", x2: "36", y2: "14", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "4", y1: "26", x2: "36", y2: "26", stroke: "black", strokeWidth: "2" })
+  ] }),
+  pyramid: /* @__PURE__ */ s.jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: [
+    /* @__PURE__ */ s.jsx("polygon", { points: "20,4 36,36 4,36", stroke: "black", fill: "none", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "15", y1: "12", x2: "25", y2: "12", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "11", y1: "20", x2: "28", y2: "20", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "7", y1: "28", x2: "32", y2: "28", stroke: "black", strokeWidth: "2" })
+  ] }),
+  circleArrow: /* @__PURE__ */ s.jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: [
+    /* @__PURE__ */ s.jsx("circle", { cx: "20", cy: "20", r: "14", stroke: "black", fill: "none", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "20", y1: "6", x2: "20", y2: "0", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("polygon", { points: "18,2 22,2 20,0", fill: "black" })
+  ] }),
+  table3x3LeftMerge: /* @__PURE__ */ s.jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: [
+    /* @__PURE__ */ s.jsx("rect", { x: "4", y: "4", width: "32", height: "32", stroke: "black", fill: "none", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "14", y1: "4", x2: "14", y2: "36", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "26", y1: "4", x2: "26", y2: "36", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "14", y1: "16", x2: "36", y2: "16", stroke: "black", strokeWidth: "2" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "14", y1: "28", x2: "36", y2: "28", stroke: "black", strokeWidth: "2" })
+  ] })
+}, Wt = "data:image/svg+xml,%3csvg%20width='50'%20height='50'%20viewBox='0%200%2050%2050'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3%201.5H47C47.8284%201.5%2048.5%202.17157%2048.5%203V47C48.5%2047.8284%2047.8284%2048.5%2047%2048.5H3C2.17157%2048.5%201.5%2047.8284%201.5%2047V3C1.5%202.17157%202.17157%201.5%203%201.5Z'%20stroke='black'%20stroke-width='3'/%3e%3c/svg%3e", At = "data:image/svg+xml,%3csvg%20width='50'%20height='50'%20viewBox='0%200%2050%2050'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3%201.5H47C47.8284%201.5%2048.5%202.17157%2048.5%203V47C48.5%2047.8284%2047.8284%2048.5%2047%2048.5H3C2.17157%2048.5%201.5%2047.8284%201.5%2047V3C1.5%202.17157%202.17157%201.5%203%201.5Z'%20stroke='%230000FF'%20stroke-width='3'/%3e%3c/svg%3e", Ct = () => {
+  const [t, e] = I(!1), n = F(null), r = (o) => {
+    o.stopPropagation(), e((a) => !a);
+  };
+  T(() => {
+    if (!t) return;
+    const o = (a) => {
+      n.current && !n.current.contains(a.target) && e(!1);
+    };
+    return window.addEventListener("pointerdown", o), () => window.removeEventListener("pointerdown", o);
+  }, [t]);
+  const i = (o) => (a) => {
+    a.stopPropagation(), a.dataTransfer.setData(vt, JSON.stringify({ shapeId: o.id })), a.dataTransfer.effectAllowed = "copy";
+  };
+  return /* @__PURE__ */ s.jsxs("div", { className: "left-toolbar-container dragHandle__custom", ref: n, onClick: (o) => o.stopPropagation(), children: [
+    /* @__PURE__ */ s.jsx("div", { className: `toolbar-card ${t ? "toolbar-card--open" : ""}`, children: /* @__PURE__ */ s.jsx("button", { onClick: r, className: `toolbar-btn toolbar-btn--icon toolbar-btn--shape ${t ? "toolbar-btn--active" : ""}`, children: /* @__PURE__ */ s.jsx("div", { className: `toolbar-shape-plate ${t ? "toolbar-shape-plate--active" : ""}`, children: /* @__PURE__ */ s.jsx("img", { src: t ? At : Wt, alt: "Фигуры", draggable: !1 }) }) }) }),
+    t && /* @__PURE__ */ s.jsx("div", { className: "palette-wrapper", onClick: (o) => o.stopPropagation(), children: /* @__PURE__ */ s.jsx("div", { className: "shape-panel", children: /* @__PURE__ */ s.jsx("div", { className: "shape-grid", children: Et.map((o) => /* @__PURE__ */ s.jsx(
+      "button",
+      {
+        className: "shape-item",
+        draggable: !0,
+        onDragStart: i(o),
+        title: o.name,
+        children: St[o.id]
+      },
+      o.id
+    )) }) }) })
+  ] });
+};
+async function C(t) {
+  return await t.text() || `HTTP ${t.status}`;
+}
+const J = {
+  async getAll() {
+    const t = await fetch("/api/v1/shapes/get-all");
+    if (!t.ok)
+      throw new Error(await C(t));
+    const e = await t.json();
+    return Array.isArray(e) ? e : [];
+  },
+  async getById(t) {
+    const e = await fetch(`/api/v1/shapes/${t}`);
+    if (!e.ok)
+      throw new Error(await C(e));
+    return await e.json();
+  },
+  async addToBoard(t, e, n, r) {
+    const i = await fetch("/api/v1/shapes/board", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ shapeId: t, width: e, height: n, rotation: r })
+    });
+    if (!i.ok)
+      throw new Error(await C(i));
+    return await i.json();
+  },
+  async getBoard() {
+    const t = await fetch("/api/v1/shapes/board");
+    if (!t.ok)
+      throw new Error(await C(t));
+    const e = await t.json();
+    return Array.isArray(e) ? e : [];
+  },
+  async getBoardById(t) {
+    const e = await fetch(`/api/v1/shapes/board/${t}`);
+    if (!e.ok)
+      throw new Error(await C(e));
+    return await e.json();
+  },
+  async updateBoardTransform(t, e, n, r) {
+    const i = await fetch(`/api/v1/shapes/board/${t}/transform`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ width: e, height: n, rotation: r })
+    });
+    if (!i.ok)
+      throw new Error(await C(i));
+    return await i.json();
+  },
+  async delete(t) {
+    const e = await fetch(`/api/v1/shapes/${t}`, { method: "DELETE" });
+    if (!e.ok) throw new Error(await C(e));
+    return !0;
+  }
+}, it = {
+  line: ({ stroke: t, sw: e = 2 }) => /* @__PURE__ */ s.jsx("line", { x1: "0", y1: "50%", x2: "100%", y2: "50%", stroke: t || "#000", strokeWidth: e, vectorEffect: "non-scaling-stroke" }),
+  arrow: ({ stroke: t, sw: e = 2 }) => /* @__PURE__ */ s.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", children: [
+    /* @__PURE__ */ s.jsx("defs", { children: /* @__PURE__ */ s.jsx(
+      "marker",
+      {
+        id: "arrowhead-end",
+        markerWidth: "10",
+        markerHeight: "10",
+        refX: "10",
+        refY: "5",
+        orient: "auto",
+        markerUnits: "strokeWidth",
+        children: /* @__PURE__ */ s.jsx("polygon", { points: "0 0, 10 5, 0 10", fill: t || "#000" })
+      }
+    ) }),
+    /* @__PURE__ */ s.jsx(
+      "line",
+      {
+        x1: "0",
+        y1: "50",
+        x2: "100",
+        y2: "50",
+        stroke: t || "#000",
+        strokeWidth: e,
+        markerEnd: "url(#arrowhead-end)",
+        vectorEffect: "non-scaling-stroke"
+      }
+    )
+  ] }),
+  dblarrow: ({ stroke: t, sw: e = 2 }) => /* @__PURE__ */ s.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", children: [
+    /* @__PURE__ */ s.jsxs("defs", { children: [
+      /* @__PURE__ */ s.jsx(
+        "marker",
+        {
+          id: "arrowhead-end",
+          markerWidth: "10",
+          markerHeight: "10",
+          refX: "10",
+          refY: "5",
+          orient: "auto",
+          markerUnits: "strokeWidth",
+          children: /* @__PURE__ */ s.jsx("polygon", { points: "0 0, 10 5, 0 10", fill: t || "#000" })
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        "marker",
+        {
+          id: "arrowhead-start",
+          markerWidth: "10",
+          markerHeight: "10",
+          refX: "0",
+          refY: "5",
+          orient: "auto",
+          markerUnits: "strokeWidth",
+          children: /* @__PURE__ */ s.jsx("polygon", { points: "10 0, 0 5, 10 10", fill: t || "#000" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s.jsx(
+      "line",
+      {
+        x1: "0",
+        y1: "50",
+        x2: "100",
+        y2: "50",
+        stroke: t || "#000",
+        strokeWidth: e,
+        markerStart: "url(#arrowhead-start)",
+        markerEnd: "url(#arrowhead-end)",
+        vectorEffect: "non-scaling-stroke"
+      }
+    )
+  ] }),
+  square: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsx("rect", { width: "100%", height: "100%", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+  circle: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsx("ellipse", { cx: "50%", cy: "50%", rx: "50%", ry: "50%", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+  triangle: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsx("polygon", { points: "50,0 100,100 0,100", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+  star: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsx("polygon", { points: "50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+  parallelogram: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsx("polygon", { points: "20,0 100,0 80,100 0,100", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+  roundedRect: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsx("rect", { width: "100%", height: "100%", rx: "20", ry: "20", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+  capsule: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsx("rect", { width: "100%", height: "100%", rx: "50", ry: "50", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+  pentagon: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsx("polygon", { points: "50,0 100,38 82,100 18,100 0,38", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+  chevron: ({ stroke: t, sw: e = 2 }) => /* @__PURE__ */ s.jsx("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", children: /* @__PURE__ */ s.jsx("polyline", { points: "0,0 50,100 100,0", fill: "none", stroke: t || "#000", strokeWidth: e, vectorEffect: "non-scaling-stroke" }) }),
+  table3x3: ({ fill: t, stroke: e, sw: n = 2, innerSw: r = 1 }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+    /* @__PURE__ */ s.jsx("rect", { width: "100%", height: "100%", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "0", y1: "33%", x2: "100%", y2: "33%", stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "0", y1: "66%", x2: "100%", y2: "66%", stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "33%", y1: "0", x2: "33%", y2: "100%", stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "66%", y1: "0", x2: "66%", y2: "100%", stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" })
+  ] }),
+  table3x3LeftMerge: ({ fill: t, stroke: e, sw: n = 2, innerSw: r = 1 }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+    /* @__PURE__ */ s.jsx("rect", { width: "100%", height: "100%", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "33%", y1: "0", x2: "33%", y2: "100%", stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "66%", y1: "0", x2: "66%", y2: "100%", stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "33%", y1: "33%", x2: "100%", y2: "33%", stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ s.jsx("line", { x1: "33%", y1: "66%", x2: "100%", y2: "66%", stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" })
+  ] }),
+  pyramid: ({ fill: t, stroke: e, sw: n = 2, innerSw: r = 1 }) => /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+    /* @__PURE__ */ s.jsx("polygon", { points: "50,0 100,100 0,100", fill: t || "transparent", stroke: e || "#000", strokeWidth: n, vectorEffect: "non-scaling-stroke" }),
+    [0.2, 0.4, 0.6, 0.8].map((i, o) => /* @__PURE__ */ s.jsx("line", { x1: 50 - 50 * i, y1: i * 100, x2: 50 + 50 * i, y2: i * 100, stroke: e || "#000", strokeWidth: r, vectorEffect: "non-scaling-stroke" }, o))
+  ] }),
+  circleArrow: ({ fill: t, stroke: e, sw: n = 2 }) => /* @__PURE__ */ s.jsxs("svg", { width: "100%", height: "100%", viewBox: "0 -30 100 130", preserveAspectRatio: "xMidYMid meet", children: [
+    /* @__PURE__ */ s.jsx("defs", { children: /* @__PURE__ */ s.jsx(
+      "marker",
+      {
+        id: "arrowhead-circle",
+        markerWidth: "8",
+        markerHeight: "8",
+        refX: "4",
+        refY: "4",
+        orient: "auto",
+        markerUnits: "strokeWidth",
+        children: /* @__PURE__ */ s.jsx("polygon", { points: "0 0, 8 4, 0 8", fill: e || "#000" })
+      }
+    ) }),
+    /* @__PURE__ */ s.jsx(
+      "circle",
+      {
+        cx: "50",
+        cy: "50",
+        r: "48",
+        fill: t || "transparent",
+        stroke: e || "#000",
+        strokeWidth: n,
+        vectorEffect: "non-scaling-stroke"
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      "line",
+      {
+        x1: "50",
+        y1: "2",
+        x2: "50",
+        y2: "-20",
+        stroke: e || "#000",
+        strokeWidth: n,
+        markerEnd: "url(#arrowhead-circle)",
+        vectorEffect: "non-scaling-stroke"
+      }
+    )
+  ] })
+};
+var Z = "http://www.w3.org/1999/xhtml";
+const st = {
+  svg: "http://www.w3.org/2000/svg",
+  xhtml: Z,
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace",
+  xmlns: "http://www.w3.org/2000/xmlns/"
+};
+function lt(t) {
+  var e = t += "", n = e.indexOf(":");
+  return n >= 0 && (e = t.slice(0, n)) !== "xmlns" && (t = t.slice(n + 1)), st.hasOwnProperty(e) ? { space: st[e], local: t } : t;
+}
+function Nt(t) {
+  return function() {
+    var e = this.ownerDocument, n = this.namespaceURI;
+    return n === Z && e.documentElement.namespaceURI === Z ? e.createElement(t) : e.createElementNS(n, t);
+  };
+}
+function Bt(t) {
+  return function() {
+    return this.ownerDocument.createElementNS(t.space, t.local);
+  };
+}
+function ct(t) {
+  var e = lt(t);
+  return (e.local ? Bt : Nt)(e);
+}
+function Rt() {
+}
+function ht(t) {
+  return t == null ? Rt : function() {
+    return this.querySelector(t);
+  };
+}
+function zt(t) {
+  typeof t != "function" && (t = ht(t));
+  for (var e = this._groups, n = e.length, r = new Array(n), i = 0; i < n; ++i)
+    for (var o = e[i], a = o.length, l = r[i] = new Array(a), h, u, d = 0; d < a; ++d)
+      (h = o[d]) && (u = t.call(h, h.__data__, d, o)) && ("__data__" in h && (u.__data__ = h.__data__), l[d] = u);
+  return new E(r, this._parents);
+}
+function Tt(t) {
+  return t == null ? [] : Array.isArray(t) ? t : Array.from(t);
+}
+function Mt() {
+  return [];
+}
+function Pt(t) {
+  return t == null ? Mt : function() {
+    return this.querySelectorAll(t);
+  };
+}
+function It(t) {
+  return function() {
+    return Tt(t.apply(this, arguments));
+  };
+}
+function Ft(t) {
+  typeof t == "function" ? t = It(t) : t = Pt(t);
+  for (var e = this._groups, n = e.length, r = [], i = [], o = 0; o < n; ++o)
+    for (var a = e[o], l = a.length, h, u = 0; u < l; ++u)
+      (h = a[u]) && (r.push(t.call(h, h.__data__, u, a)), i.push(h));
+  return new E(r, i);
+}
+function Ht(t) {
+  return function() {
+    return this.matches(t);
+  };
+}
+function ut(t) {
+  return function(e) {
+    return e.matches(t);
+  };
+}
+var Lt = Array.prototype.find;
+function Dt(t) {
+  return function() {
+    return Lt.call(this.children, t);
+  };
+}
+function Vt() {
+  return this.firstElementChild;
+}
+function Ot(t) {
+  return this.select(t == null ? Vt : Dt(typeof t == "function" ? t : ut(t)));
+}
+var qt = Array.prototype.filter;
+function Xt() {
+  return Array.from(this.children);
+}
+function $t(t) {
+  return function() {
+    return qt.call(this.children, t);
+  };
+}
+function Ut(t) {
+  return this.selectAll(t == null ? Xt : $t(typeof t == "function" ? t : ut(t)));
+}
+function Yt(t) {
+  typeof t != "function" && (t = Ht(t));
+  for (var e = this._groups, n = e.length, r = new Array(n), i = 0; i < n; ++i)
+    for (var o = e[i], a = o.length, l = r[i] = [], h, u = 0; u < a; ++u)
+      (h = o[u]) && t.call(h, h.__data__, u, o) && l.push(h);
+  return new E(r, this._parents);
+}
+function ft(t) {
+  return new Array(t.length);
+}
+function Kt() {
+  return new E(this._enter || this._groups.map(ft), this._parents);
+}
+function U(t, e) {
+  this.ownerDocument = t.ownerDocument, this.namespaceURI = t.namespaceURI, this._next = null, this._parent = t, this.__data__ = e;
+}
+U.prototype = {
+  constructor: U,
+  appendChild: function(t) {
+    return this._parent.insertBefore(t, this._next);
+  },
+  insertBefore: function(t, e) {
+    return this._parent.insertBefore(t, e);
+  },
+  querySelector: function(t) {
+    return this._parent.querySelector(t);
+  },
+  querySelectorAll: function(t) {
+    return this._parent.querySelectorAll(t);
+  }
+};
+function Jt(t) {
+  return function() {
+    return t;
+  };
+}
+function Zt(t, e, n, r, i, o) {
+  for (var a = 0, l, h = e.length, u = o.length; a < u; ++a)
+    (l = e[a]) ? (l.__data__ = o[a], r[a] = l) : n[a] = new U(t, o[a]);
+  for (; a < h; ++a)
+    (l = e[a]) && (i[a] = l);
+}
+function Gt(t, e, n, r, i, o, a) {
+  var l, h, u = /* @__PURE__ */ new Map(), d = e.length, x = o.length, g = new Array(d), m;
+  for (l = 0; l < d; ++l)
+    (h = e[l]) && (g[l] = m = a.call(h, h.__data__, l, e) + "", u.has(m) ? i[l] = h : u.set(m, h));
+  for (l = 0; l < x; ++l)
+    m = a.call(t, o[l], l, o) + "", (h = u.get(m)) ? (r[l] = h, h.__data__ = o[l], u.delete(m)) : n[l] = new U(t, o[l]);
+  for (l = 0; l < d; ++l)
+    (h = e[l]) && u.get(g[l]) === h && (i[l] = h);
+}
+function Qt(t) {
+  return t.__data__;
+}
+function te(t, e) {
+  if (!arguments.length) return Array.from(this, Qt);
+  var n = e ? Gt : Zt, r = this._parents, i = this._groups;
+  typeof t != "function" && (t = Jt(t));
+  for (var o = i.length, a = new Array(o), l = new Array(o), h = new Array(o), u = 0; u < o; ++u) {
+    var d = r[u], x = i[u], g = x.length, m = ee(t.call(d, d && d.__data__, u, r)), v = m.length, S = l[u] = new Array(v), W = a[u] = new Array(v), N = h[u] = new Array(g);
+    n(d, x, S, W, N, m, e);
+    for (var j = 0, A = 0, c, f; j < v; ++j)
+      if (c = S[j]) {
+        for (j >= A && (A = j + 1); !(f = W[A]) && ++A < v; ) ;
+        c._next = f || null;
+      }
+  }
+  return a = new E(a, r), a._enter = l, a._exit = h, a;
+}
+function ee(t) {
+  return typeof t == "object" && "length" in t ? t : Array.from(t);
+}
+function ne() {
+  return new E(this._exit || this._groups.map(ft), this._parents);
+}
+function re(t, e, n) {
+  var r = this.enter(), i = this, o = this.exit();
+  return typeof t == "function" ? (r = t(r), r && (r = r.selection())) : r = r.append(t + ""), e != null && (i = e(i), i && (i = i.selection())), n == null ? o.remove() : n(o), r && i ? r.merge(i).order() : i;
+}
+function ie(t) {
+  for (var e = t.selection ? t.selection() : t, n = this._groups, r = e._groups, i = n.length, o = r.length, a = Math.min(i, o), l = new Array(i), h = 0; h < a; ++h)
+    for (var u = n[h], d = r[h], x = u.length, g = l[h] = new Array(x), m, v = 0; v < x; ++v)
+      (m = u[v] || d[v]) && (g[v] = m);
+  for (; h < i; ++h)
+    l[h] = n[h];
+  return new E(l, this._parents);
+}
+function se() {
+  for (var t = this._groups, e = -1, n = t.length; ++e < n; )
+    for (var r = t[e], i = r.length - 1, o = r[i], a; --i >= 0; )
+      (a = r[i]) && (o && a.compareDocumentPosition(o) ^ 4 && o.parentNode.insertBefore(a, o), o = a);
+  return this;
+}
+function oe(t) {
+  t || (t = ae);
+  function e(x, g) {
+    return x && g ? t(x.__data__, g.__data__) : !x - !g;
+  }
+  for (var n = this._groups, r = n.length, i = new Array(r), o = 0; o < r; ++o) {
+    for (var a = n[o], l = a.length, h = i[o] = new Array(l), u, d = 0; d < l; ++d)
+      (u = a[d]) && (h[d] = u);
+    h.sort(e);
+  }
+  return new E(i, this._parents).order();
+}
+function ae(t, e) {
+  return t < e ? -1 : t > e ? 1 : t >= e ? 0 : NaN;
+}
+function le() {
+  var t = arguments[0];
+  return arguments[0] = this, t.apply(null, arguments), this;
+}
+function ce() {
+  return Array.from(this);
+}
+function he() {
+  for (var t = this._groups, e = 0, n = t.length; e < n; ++e)
+    for (var r = t[e], i = 0, o = r.length; i < o; ++i) {
+      var a = r[i];
+      if (a) return a;
+    }
+  return null;
+}
+function ue() {
+  let t = 0;
+  for (const e of this) ++t;
+  return t;
+}
+function fe() {
+  return !this.node();
+}
+function de(t) {
+  for (var e = this._groups, n = 0, r = e.length; n < r; ++n)
+    for (var i = e[n], o = 0, a = i.length, l; o < a; ++o)
+      (l = i[o]) && t.call(l, l.__data__, o, i);
+  return this;
+}
+function ge(t) {
+  return function() {
+    this.removeAttribute(t);
+  };
+}
+function pe(t) {
+  return function() {
+    this.removeAttributeNS(t.space, t.local);
+  };
+}
+function ye(t, e) {
+  return function() {
+    this.setAttribute(t, e);
+  };
+}
+function we(t, e) {
+  return function() {
+    this.setAttributeNS(t.space, t.local, e);
+  };
+}
+function xe(t, e) {
+  return function() {
+    var n = e.apply(this, arguments);
+    n == null ? this.removeAttribute(t) : this.setAttribute(t, n);
+  };
+}
+function me(t, e) {
+  return function() {
+    var n = e.apply(this, arguments);
+    n == null ? this.removeAttributeNS(t.space, t.local) : this.setAttributeNS(t.space, t.local, n);
+  };
+}
+function ve(t, e) {
+  var n = lt(t);
+  if (arguments.length < 2) {
+    var r = this.node();
+    return n.local ? r.getAttributeNS(n.space, n.local) : r.getAttribute(n);
+  }
+  return this.each((e == null ? n.local ? pe : ge : typeof e == "function" ? n.local ? me : xe : n.local ? we : ye)(n, e));
+}
+function dt(t) {
+  return t.ownerDocument && t.ownerDocument.defaultView || t.document && t || t.defaultView;
+}
+function ke(t) {
+  return function() {
+    this.style.removeProperty(t);
+  };
+}
+function _e(t, e, n) {
+  return function() {
+    this.style.setProperty(t, e, n);
+  };
+}
+function be(t, e, n) {
+  return function() {
+    var r = e.apply(this, arguments);
+    r == null ? this.style.removeProperty(t) : this.style.setProperty(t, r, n);
+  };
+}
+function je(t, e, n) {
+  return arguments.length > 1 ? this.each((e == null ? ke : typeof e == "function" ? be : _e)(t, e, n ?? "")) : Ee(this.node(), t);
+}
+function Ee(t, e) {
+  return t.style.getPropertyValue(e) || dt(t).getComputedStyle(t, null).getPropertyValue(e);
+}
+function Se(t) {
+  return function() {
+    delete this[t];
+  };
+}
+function We(t, e) {
+  return function() {
+    this[t] = e;
+  };
+}
+function Ae(t, e) {
+  return function() {
+    var n = e.apply(this, arguments);
+    n == null ? delete this[t] : this[t] = n;
+  };
+}
+function Ce(t, e) {
+  return arguments.length > 1 ? this.each((e == null ? Se : typeof e == "function" ? Ae : We)(t, e)) : this.node()[t];
+}
+function gt(t) {
+  return t.trim().split(/^|\s+/);
+}
+function Q(t) {
+  return t.classList || new pt(t);
+}
+function pt(t) {
+  this._node = t, this._names = gt(t.getAttribute("class") || "");
+}
+pt.prototype = {
+  add: function(t) {
+    var e = this._names.indexOf(t);
+    e < 0 && (this._names.push(t), this._node.setAttribute("class", this._names.join(" ")));
+  },
+  remove: function(t) {
+    var e = this._names.indexOf(t);
+    e >= 0 && (this._names.splice(e, 1), this._node.setAttribute("class", this._names.join(" ")));
+  },
+  contains: function(t) {
+    return this._names.indexOf(t) >= 0;
+  }
+};
+function yt(t, e) {
+  for (var n = Q(t), r = -1, i = e.length; ++r < i; ) n.add(e[r]);
+}
+function wt(t, e) {
+  for (var n = Q(t), r = -1, i = e.length; ++r < i; ) n.remove(e[r]);
+}
+function Ne(t) {
+  return function() {
+    yt(this, t);
+  };
+}
+function Be(t) {
+  return function() {
+    wt(this, t);
+  };
+}
+function Re(t, e) {
+  return function() {
+    (e.apply(this, arguments) ? yt : wt)(this, t);
+  };
+}
+function ze(t, e) {
+  var n = gt(t + "");
+  if (arguments.length < 2) {
+    for (var r = Q(this.node()), i = -1, o = n.length; ++i < o; ) if (!r.contains(n[i])) return !1;
+    return !0;
+  }
+  return this.each((typeof e == "function" ? Re : e ? Ne : Be)(n, e));
+}
+function Te() {
+  this.textContent = "";
+}
+function Me(t) {
+  return function() {
+    this.textContent = t;
+  };
+}
+function Pe(t) {
+  return function() {
+    var e = t.apply(this, arguments);
+    this.textContent = e ?? "";
+  };
+}
+function Ie(t) {
+  return arguments.length ? this.each(t == null ? Te : (typeof t == "function" ? Pe : Me)(t)) : this.node().textContent;
+}
+function Fe() {
+  this.innerHTML = "";
+}
+function He(t) {
+  return function() {
+    this.innerHTML = t;
+  };
+}
+function Le(t) {
+  return function() {
+    var e = t.apply(this, arguments);
+    this.innerHTML = e ?? "";
+  };
+}
+function De(t) {
+  return arguments.length ? this.each(t == null ? Fe : (typeof t == "function" ? Le : He)(t)) : this.node().innerHTML;
+}
+function Ve() {
+  this.nextSibling && this.parentNode.appendChild(this);
+}
+function Oe() {
+  return this.each(Ve);
+}
+function qe() {
+  this.previousSibling && this.parentNode.insertBefore(this, this.parentNode.firstChild);
+}
+function Xe() {
+  return this.each(qe);
+}
+function $e(t) {
+  var e = typeof t == "function" ? t : ct(t);
+  return this.select(function() {
+    return this.appendChild(e.apply(this, arguments));
+  });
+}
+function Ue() {
+  return null;
+}
+function Ye(t, e) {
+  var n = typeof t == "function" ? t : ct(t), r = e == null ? Ue : typeof e == "function" ? e : ht(e);
+  return this.select(function() {
+    return this.insertBefore(n.apply(this, arguments), r.apply(this, arguments) || null);
+  });
+}
+function Ke() {
+  var t = this.parentNode;
+  t && t.removeChild(this);
+}
+function Je() {
+  return this.each(Ke);
+}
+function Ze() {
+  var t = this.cloneNode(!1), e = this.parentNode;
+  return e ? e.insertBefore(t, this.nextSibling) : t;
+}
+function Ge() {
+  var t = this.cloneNode(!0), e = this.parentNode;
+  return e ? e.insertBefore(t, this.nextSibling) : t;
+}
+function Qe(t) {
+  return this.select(t ? Ge : Ze);
+}
+function tn(t) {
+  return arguments.length ? this.property("__data__", t) : this.node().__data__;
+}
+function en(t) {
+  return function(e) {
+    t.call(this, e, this.__data__);
+  };
+}
+function nn(t) {
+  return t.trim().split(/^|\s+/).map(function(e) {
+    var n = "", r = e.indexOf(".");
+    return r >= 0 && (n = e.slice(r + 1), e = e.slice(0, r)), { type: e, name: n };
+  });
+}
+function rn(t) {
+  return function() {
+    var e = this.__on;
+    if (e) {
+      for (var n = 0, r = -1, i = e.length, o; n < i; ++n)
+        o = e[n], (!t.type || o.type === t.type) && o.name === t.name ? this.removeEventListener(o.type, o.listener, o.options) : e[++r] = o;
+      ++r ? e.length = r : delete this.__on;
+    }
+  };
+}
+function sn(t, e, n) {
+  return function() {
+    var r = this.__on, i, o = en(e);
+    if (r) {
+      for (var a = 0, l = r.length; a < l; ++a)
+        if ((i = r[a]).type === t.type && i.name === t.name) {
+          this.removeEventListener(i.type, i.listener, i.options), this.addEventListener(i.type, i.listener = o, i.options = n), i.value = e;
+          return;
+        }
+    }
+    this.addEventListener(t.type, o, n), i = { type: t.type, name: t.name, value: e, listener: o, options: n }, r ? r.push(i) : this.__on = [i];
+  };
+}
+function on(t, e, n) {
+  var r = nn(t + ""), i, o = r.length, a;
+  if (arguments.length < 2) {
+    var l = this.node().__on;
+    if (l) {
+      for (var h = 0, u = l.length, d; h < u; ++h)
+        for (i = 0, d = l[h]; i < o; ++i)
+          if ((a = r[i]).type === d.type && a.name === d.name)
+            return d.value;
+    }
+    return;
+  }
+  for (l = e ? sn : rn, i = 0; i < o; ++i) this.each(l(r[i], e, n));
+  return this;
+}
+function xt(t, e, n) {
+  var r = dt(t), i = r.CustomEvent;
+  typeof i == "function" ? i = new i(e, n) : (i = r.document.createEvent("Event"), n ? (i.initEvent(e, n.bubbles, n.cancelable), i.detail = n.detail) : i.initEvent(e, !1, !1)), t.dispatchEvent(i);
+}
+function an(t, e) {
+  return function() {
+    return xt(this, t, e);
+  };
+}
+function ln(t, e) {
+  return function() {
+    return xt(this, t, e.apply(this, arguments));
+  };
+}
+function cn(t, e) {
+  return this.each((typeof e == "function" ? ln : an)(t, e));
+}
+function* hn() {
+  for (var t = this._groups, e = 0, n = t.length; e < n; ++e)
+    for (var r = t[e], i = 0, o = r.length, a; i < o; ++i)
+      (a = r[i]) && (yield a);
+}
+var un = [null];
+function E(t, e) {
+  this._groups = t, this._parents = e;
+}
+function fn() {
+  return this;
+}
+E.prototype = {
+  constructor: E,
+  select: zt,
+  selectAll: Ft,
+  selectChild: Ot,
+  selectChildren: Ut,
+  filter: Yt,
+  data: te,
+  enter: Kt,
+  exit: ne,
+  join: re,
+  merge: ie,
+  selection: fn,
+  order: se,
+  sort: oe,
+  call: le,
+  nodes: ce,
+  node: he,
+  size: ue,
+  empty: fe,
+  each: de,
+  attr: ve,
+  style: je,
+  property: Ce,
+  classed: ze,
+  text: Ie,
+  html: De,
+  raise: Oe,
+  lower: Xe,
+  append: $e,
+  insert: Ye,
+  remove: Je,
+  clone: Qe,
+  datum: tn,
+  on,
+  dispatch: cn,
+  [Symbol.iterator]: hn
+};
+function H(t) {
+  return typeof t == "string" ? new E([[document.querySelector(t)]], [document.documentElement]) : new E([[t]], un);
+}
+function dn(t) {
+  let e;
+  for (; e = t.sourceEvent; ) t = e;
+  return t;
+}
+function ot(t, e) {
+  if (t = dn(t), e === void 0 && (e = t.currentTarget), e) {
+    var n = e.ownerSVGElement || e;
+    if (n.createSVGPoint) {
+      var r = n.createSVGPoint();
+      return r.x = t.clientX, r.y = t.clientY, r = r.matrixTransform(e.getScreenCTM().inverse()), [r.x, r.y];
+    }
+    if (e.getBoundingClientRect) {
+      var i = e.getBoundingClientRect();
+      return [t.clientX - i.left - e.clientLeft, t.clientY - i.top - e.clientTop];
+    }
+  }
+  return [t.pageX, t.pageY];
+}
+const gn = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.75%200.75V6.75M0.75%206.75H6.75M0.75%206.75C3.07744%204.66141%205.23287%202.29676%208.49532%201.83779C10.4277%201.56593%2012.3961%201.92941%2014.1039%202.87343C15.8117%203.81746%2017.1664%205.29091%2017.9639%207.07177M18.75%2018.75V12.75M18.75%2012.75H12.75M18.75%2012.75C16.4225%2014.8386%2014.2671%2017.2032%2011.0047%2017.6622C9.07229%2017.9341%207.10391%2017.5706%205.3961%2016.6266C3.68829%2015.6825%202.33356%2014.2091%201.53604%2012.4282'%20stroke='%233367d9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+var pn = { value: () => {
+} };
+function mt() {
+  for (var t = 0, e = arguments.length, n = {}, r; t < e; ++t) {
+    if (!(r = arguments[t] + "") || r in n || /[\s.]/.test(r)) throw new Error("illegal type: " + r);
+    n[r] = [];
+  }
+  return new $(n);
+}
+function $(t) {
+  this._ = t;
+}
+function yn(t, e) {
+  return t.trim().split(/^|\s+/).map(function(n) {
+    var r = "", i = n.indexOf(".");
+    if (i >= 0 && (r = n.slice(i + 1), n = n.slice(0, i)), n && !e.hasOwnProperty(n)) throw new Error("unknown type: " + n);
+    return { type: n, name: r };
+  });
+}
+$.prototype = mt.prototype = {
+  constructor: $,
+  on: function(t, e) {
+    var n = this._, r = yn(t + "", n), i, o = -1, a = r.length;
+    if (arguments.length < 2) {
+      for (; ++o < a; ) if ((i = (t = r[o]).type) && (i = wn(n[i], t.name))) return i;
+      return;
+    }
+    if (e != null && typeof e != "function") throw new Error("invalid callback: " + e);
+    for (; ++o < a; )
+      if (i = (t = r[o]).type) n[i] = at(n[i], t.name, e);
+      else if (e == null) for (i in n) n[i] = at(n[i], t.name, null);
+    return this;
+  },
+  copy: function() {
+    var t = {}, e = this._;
+    for (var n in e) t[n] = e[n].slice();
+    return new $(t);
+  },
+  call: function(t, e) {
+    if ((i = arguments.length - 2) > 0) for (var n = new Array(i), r = 0, i, o; r < i; ++r) n[r] = arguments[r + 2];
+    if (!this._.hasOwnProperty(t)) throw new Error("unknown type: " + t);
+    for (o = this._[t], r = 0, i = o.length; r < i; ++r) o[r].value.apply(e, n);
+  },
+  apply: function(t, e, n) {
+    if (!this._.hasOwnProperty(t)) throw new Error("unknown type: " + t);
+    for (var r = this._[t], i = 0, o = r.length; i < o; ++i) r[i].value.apply(e, n);
+  }
+};
+function wn(t, e) {
+  for (var n = 0, r = t.length, i; n < r; ++n)
+    if ((i = t[n]).name === e)
+      return i.value;
+}
+function at(t, e, n) {
+  for (var r = 0, i = t.length; r < i; ++r)
+    if (t[r].name === e) {
+      t[r] = pn, t = t.slice(0, r).concat(t.slice(r + 1));
+      break;
+    }
+  return n != null && t.push({ name: e, value: n }), t;
+}
+const xn = { passive: !1 }, L = { capture: !0, passive: !1 };
+function K(t) {
+  t.stopImmediatePropagation();
+}
+function M(t) {
+  t.preventDefault(), t.stopImmediatePropagation();
+}
+function mn(t) {
+  var e = t.document.documentElement, n = H(t).on("dragstart.drag", M, L);
+  "onselectstart" in e ? n.on("selectstart.drag", M, L) : (e.__noselect = e.style.MozUserSelect, e.style.MozUserSelect = "none");
+}
+function vn(t, e) {
+  var n = t.document.documentElement, r = H(t).on("dragstart.drag", null);
+  e && (r.on("click.drag", M, L), setTimeout(function() {
+    r.on("click.drag", null);
+  }, 0)), "onselectstart" in n ? r.on("selectstart.drag", null) : (n.style.MozUserSelect = n.__noselect, delete n.__noselect);
+}
+const q = (t) => () => t;
+function G(t, {
+  sourceEvent: e,
+  subject: n,
+  target: r,
+  identifier: i,
+  active: o,
+  x: a,
+  y: l,
+  dx: h,
+  dy: u,
+  dispatch: d
+}) {
+  Object.defineProperties(this, {
+    type: { value: t, enumerable: !0, configurable: !0 },
+    sourceEvent: { value: e, enumerable: !0, configurable: !0 },
+    subject: { value: n, enumerable: !0, configurable: !0 },
+    target: { value: r, enumerable: !0, configurable: !0 },
+    identifier: { value: i, enumerable: !0, configurable: !0 },
+    active: { value: o, enumerable: !0, configurable: !0 },
+    x: { value: a, enumerable: !0, configurable: !0 },
+    y: { value: l, enumerable: !0, configurable: !0 },
+    dx: { value: h, enumerable: !0, configurable: !0 },
+    dy: { value: u, enumerable: !0, configurable: !0 },
+    _: { value: d }
+  });
+}
+G.prototype.on = function() {
+  var t = this._.on.apply(this._, arguments);
+  return t === this._ ? this : t;
+};
+function kn(t) {
+  return !t.ctrlKey && !t.button;
+}
+function _n() {
+  return this.parentNode;
+}
+function bn(t, e) {
+  return e ?? { x: t.x, y: t.y };
+}
+function jn() {
+  return navigator.maxTouchPoints || "ontouchstart" in this;
+}
+function En() {
+  var t = kn, e = _n, n = bn, r = jn, i = {}, o = mt("start", "drag", "end"), a = 0, l, h, u, d, x = 0;
+  function g(c) {
+    c.on("mousedown.drag", m).filter(r).on("touchstart.drag", W).on("touchmove.drag", N, xn).on("touchend.drag touchcancel.drag", j).style("touch-action", "none").style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
+  }
+  function m(c, f) {
+    if (!(d || !t.call(this, c, f))) {
+      var p = A(this, e.call(this, c, f), c, f, "mouse");
+      p && (H(c.view).on("mousemove.drag", v, L).on("mouseup.drag", S, L), mn(c.view), K(c), u = !1, l = c.clientX, h = c.clientY, p("start", c));
+    }
+  }
+  function v(c) {
+    if (M(c), !u) {
+      var f = c.clientX - l, p = c.clientY - h;
+      u = f * f + p * p > x;
+    }
+    i.mouse("drag", c);
+  }
+  function S(c) {
+    H(c.view).on("mousemove.drag mouseup.drag", null), vn(c.view, u), M(c), i.mouse("end", c);
+  }
+  function W(c, f) {
+    if (t.call(this, c, f)) {
+      var p = c.changedTouches, y = e.call(this, c, f), w = p.length, k, _;
+      for (k = 0; k < w; ++k)
+        (_ = A(this, y, c, f, p[k].identifier, p[k])) && (K(c), _("start", c, p[k]));
+    }
+  }
+  function N(c) {
+    var f = c.changedTouches, p = f.length, y, w;
+    for (y = 0; y < p; ++y)
+      (w = i[f[y].identifier]) && (M(c), w("drag", c, f[y]));
+  }
+  function j(c) {
+    var f = c.changedTouches, p = f.length, y, w;
+    for (d && clearTimeout(d), d = setTimeout(function() {
+      d = null;
+    }, 500), y = 0; y < p; ++y)
+      (w = i[f[y].identifier]) && (K(c), w("end", c, f[y]));
+  }
+  function A(c, f, p, y, w, k) {
+    var _ = o.copy(), b = ot(k || p, f), D, V, B;
+    if ((B = n.call(c, new G("beforestart", {
+      sourceEvent: p,
+      target: g,
+      identifier: w,
+      active: a,
+      x: b[0],
+      y: b[1],
+      dx: 0,
+      dy: 0,
+      dispatch: _
+    }), y)) != null)
+      return D = B.x - b[0] || 0, V = B.y - b[1] || 0, function tt(R, P, O) {
+        var et = b, Y;
+        switch (R) {
+          case "start":
+            i[w] = tt, Y = a++;
+            break;
+          case "end":
+            delete i[w], --a;
+          case "drag":
+            b = ot(O || P, f), Y = a;
+            break;
+        }
+        _.call(
+          R,
+          c,
+          new G(R, {
+            sourceEvent: P,
+            subject: B,
+            target: g,
+            identifier: w,
+            active: Y,
+            x: b[0] + D,
+            y: b[1] + V,
+            dx: b[0] - et[0],
+            dy: b[1] - et[1],
+            dispatch: _
+          }),
+          y
+        );
+      };
+  }
+  return g.filter = function(c) {
+    return arguments.length ? (t = typeof c == "function" ? c : q(!!c), g) : t;
+  }, g.container = function(c) {
+    return arguments.length ? (e = typeof c == "function" ? c : q(c), g) : e;
+  }, g.subject = function(c) {
+    return arguments.length ? (n = typeof c == "function" ? c : q(c), g) : n;
+  }, g.touchable = function(c) {
+    return arguments.length ? (r = typeof c == "function" ? c : q(!!c), g) : r;
+  }, g.on = function() {
+    var c = o.on.apply(o, arguments);
+    return c === o ? g : c;
+  }, g.clickDistance = function(c) {
+    return arguments.length ? (x = (c = +c) * c, g) : Math.sqrt(x);
+  }, g;
+}
+const Sn = ({ id: t, data: e, style: n }) => {
+  const r = z(
+    (f) => f.stickers.find((p) => p.id === e.stickerId)
+  ), i = z((f) => f.updateSticker), o = z((f) => f.bringToFront), a = z((f) => f.selectSticker), l = z((f) => f.selectedId), { setNodes: h } = bt(), u = F(null), d = F(0), x = F({ width: 0, height: 0 }), [g, m] = I(0), [v, S] = I({ width: 140, height: 140 }), [W, N] = I(!1), j = l === (r == null ? void 0 : r.id);
+  T(() => {
+    if (!r) return;
+    const f = Number(r.width) || 140, p = Number(r.height) || 140, y = Number(r.rotation) || 0;
+    S({ width: f, height: p }), x.current = { width: f, height: p }, d.current = y, m(y);
+  }, [r]), T(() => {
+    d.current = g;
+  }, [g]), T(() => {
+    if (!r || !j) return;
+    const f = u.current;
+    if (!f) return;
+    const p = H(f), y = En().on("start", (w) => {
+      var k, _;
+      (_ = (k = w.sourceEvent) == null ? void 0 : k.stopPropagation) == null || _.call(k), N(!0);
+    }).on("drag", (w) => {
+      var P, O;
+      const k = (O = (P = w.sourceEvent) == null ? void 0 : P.target) == null ? void 0 : O.parentElement;
+      if (!k) return;
+      const _ = k.getBoundingClientRect(), b = _.left + _.width / 2, D = _.top + _.height / 2, V = w.sourceEvent.clientX - b, B = w.sourceEvent.clientY - D, R = Math.atan2(B, V) * (180 / Math.PI) + 90;
+      d.current = R, m(R);
+    }).on("end", () => {
+      N(!1);
+      const w = Number(d.current) || 0;
+      i(r.id, { rotation: w });
+    });
+    return p.call(y), () => p.on(".drag", null);
+  }, [j, r, i]);
+  const A = _t(() => {
+    if (!r) return null;
+    const f = it[r.shapeId];
+    return f ? f(r) : it.square(r);
+  }, [r]), c = (f) => {
+    f.stopPropagation(), r && (o(r.id), a(r.id));
+  };
+  return r ? /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      onClick: c,
+      className: "dragHandle__custom",
+      style: {
+        ...n,
+        position: "relative",
+        zIndex: r.zIndex,
+        cursor: W ? "grabbing" : "grab",
+        width: v.width,
+        height: v.height,
+        transform: `rotate(${g}deg)`,
+        transformOrigin: "50% 50%",
+        pointerEvents: "auto"
+      },
+      "data-drag-disabled": W,
+      children: [
+        /* @__PURE__ */ s.jsx(
+          jt,
+          {
+            isVisible: j,
+            minWidth: 30,
+            minHeight: 30,
+            resizeHandles: [
+              "top",
+              "right",
+              "bottom",
+              "left",
+              "topRight",
+              "topLeft",
+              "bottomRight",
+              "bottomLeft"
+            ],
+            onResize: (f, p) => {
+              const y = Number(p.width) || 1, w = Number(p.height) || 1;
+              S({ width: y, height: w }), x.current = { width: y, height: w };
+            },
+            onResizeEnd: async (f, p) => {
+              const y = Math.max(1, Math.round(p.width)), w = Math.max(1, Math.round(p.height)), k = Number(d.current) || 0;
+              S({ width: y, height: w }), x.current = { width: y, height: w }, h(
+                (_) => _.map((b) => b.id === t ? { ...b, style: { ...b.style, width: y, height: w } } : b)
+              ), i(r.id, { width: y, height: w });
+              try {
+                await J.updateBoardTransform(t, y, w, k);
+              } catch (_) {
+                console.warn("Не удалось сохранить размеры фигуры", _);
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ s.jsx(
+          "svg",
+          {
+            width: v.width,
+            height: v.height,
+            viewBox: "0 0 100 100",
+            preserveAspectRatio: "none",
+            children: A
+          }
+        ),
+        j && /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            ref: u,
+            className: "nodrag nopan",
+            style: {
+              position: "absolute",
+              width: 15,
+              height: 15,
+              top: -24,
+              right: -8,
+              cursor: "grab",
+              zIndex: 1e3,
+              pointerEvents: "auto",
+              transform: `translateX(-50%) rotate(${g}deg)`,
+              transition: W ? "none" : "transform 0.15s ease-out"
+            },
+            children: /* @__PURE__ */ s.jsx(
+              "img",
+              {
+                src: gn,
+                alt: "Rotate",
+                draggable: !1,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "contain"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ s.jsx(nt, { type: "target", position: rt.Left, className: "z-100000" }),
+        /* @__PURE__ */ s.jsx(nt, { type: "source", position: rt.Right, className: "z-100000" })
+      ]
+    }
+  ) }) : null;
+}, Wn = {
+  shape: Sn
+}, X = ({ children: t }) => /* @__PURE__ */ s.jsx("div", { children: t }), Bn = ({ nodeTypes: t }) => {
+  const e = z((o) => o.setStickers);
+  F(null);
+  const [n, r] = I(() => X);
+  ({
+    ...Wn,
+    ...t || {}
+  }, T(() => {
+    (async () => {
+      try {
+        const [a, l] = await Promise.all([
+          J.getAll(),
+          J.getBoard()
+        ]), h = new Map(a.map((g) => [String(g.id), g.shapeId]));
+        let u = 30, d = 30;
+        const x = [];
+        for (const g of l) {
+          const m = g.width ?? 140, v = g.height ?? 140, S = g.rotation ?? 0, W = h.get(String(g.shapeId)) ?? "square";
+          x.push({
+            id: g.id,
+            stickerId: g.id,
+            type: "shape",
+            shapeId: W,
+            shapeDbId: g.shapeId,
+            x: u,
+            y: d,
+            width: m,
+            height: v,
+            rotation: S,
+            zIndex: 1,
+            fill: "transparent",
+            stroke: "#000"
+          }), u += 24, d += 24;
+        }
+        e(x);
+      } catch (a) {
+        console.warn("Не удалось загрузить доску для фигур:", a);
+      }
+    })();
+  }, [e])), T(() => {
+    let o = !0;
+    return import("@xyflow/react").then((a) => {
+      if (!o)
+        return;
+      const l = (a && (a.Widget || a.default || (a == null ? void 0 : a.widget) || (a == null ? void 0 : a.XyflowWidget))) ?? null;
+      typeof l == "function" || kt.isValidElement(l) ? r(() => l) : r(() => X);
+    }).catch(() => {
+      o && r(() => X);
+    }), () => {
+      o = !1;
+    };
+  }, []);
+  const i = n || X;
+  return /* @__PURE__ */ s.jsx(i, { children: /* @__PURE__ */ s.jsx("div", { className: "relative flex h-screen w-screen bg-gray-100", children: /* @__PURE__ */ s.jsx(Ct, {}) }) });
+};
+export {
+  Bn as S,
+  Et as a,
+  J as b,
+  Sn as c,
+  Ct as d,
+  Wn as s
+};
+//# sourceMappingURL=ShapeBoardWidget-BmgYD5zN.js.map