@milaboratories/miplots4 1.0.176 → 1.0.178

package/dist/scatterplot-umap/components/Lasso.js

@@ -1,251 +1,233 @@
-import { j as c } from "../../_virtual/jsx-runtime.js";
-import { SCATTERPLOT_CONTROLS_EVENTS as h } from "../constants.js";
-import { BLACK as _ } from "../../constants.js";
-import { r as n } from "../../_virtual/index.js";
-import ft from "../../node_modules/.pnpm/d3-drag@3.0.0/node_modules/d3-drag/src/drag.js";
-import B from "../../node_modules/.pnpm/d3-selection@3.0.0/node_modules/d3-selection/src/select.js";
-const g = "#845CFF", $ = "#CFD1DB", dt = 20, A = 3, yt = 6, ht = 10;
-function St({
-  scales: o,
-  chartSizes: k,
-  zoomStateKey: q,
-  defaultPolygons: W,
-  onPolygonsApply: E,
-  onLassoControlsStateUpdate: V
-}) {
-  n.useEffect(() => {
-    function t() {
-      y.current.length > 0 ? L() : T.current === null ? (v([]), E([])) : (v([...d.current.filter((i, u) => u !== T.current)]), I(null), E(d.current));
-    }
-    function e(i) {
-      K(i.detail);
-    }
-    function a() {
-      X(S.current - 1);
-    }
-    function s() {
-      X(S.current + 1);
-    }
-    return document.addEventListener(h.lassoDelete, t), document.addEventListener(h.lassoSelectMode, e), document.addEventListener(h.lassoBack, a), document.addEventListener(h.lassoForward, s), () => {
-      document.removeEventListener(h.lassoDelete, t), document.removeEventListener(h.lassoSelectMode, e), document.removeEventListener(h.lassoBack, a), document.removeEventListener(h.lassoForward, s);
-    };
-  }, []);
-  const [p, J] = n.useState("pen"), [m, Q] = n.useState(W), d = n.useRef(W), [Z, Y] = n.useState(null), [P, z] = n.useState(null), T = n.useRef(null), [l, tt] = n.useState([]), y = n.useRef(l), [M, et] = n.useState([{ newPolygonPoints: l, closedPolygons: m }]), [C, G] = n.useState(0), R = n.useRef(M), S = n.useRef(C), [f, nt] = n.useState(null), j = n.useRef(null), [H, D] = n.useState(!1), x = n.useRef(null), b = n.useRef(null), F = n.useCallback(function() {
-    const t = {
-      newPolygonPoints: [...y.current],
-      closedPolygons: [...d.current]
-    }, e = R.current.slice(0, S.current + 1);
-    e.push(t), e.length > ht && e.shift(), et(e), G(e.length - 1), R.current = e, S.current = e.length - 1;
-  }, []), X = n.useCallback(function(t) {
-    if (t > R.current.length - 1 || t < 0)
-      return;
-    K("selection");
-    const e = R.current[t];
-    v(e.closedPolygons, !1), w(e.newPolygonPoints, !1), G(t), S.current = t;
-  }, []);
-  function v(t, e = !0) {
-    Q(t), d.current = t, e && F();
-  }
-  function w(t, e = !0) {
-    y.current = t, tt(t), e && F();
-  }
-  function I(t) {
-    z(t), T.current = t;
-  }
-  function K(t) {
-    if (J(t), t === "selection" && (I(null), b.current = null, x.current = null), t === "pen") {
-      if (y.current.length > 2) {
-        const e = { points: y.current, closed: !0 };
-        v([...d.current, e]), E([...d.current, e]);
-      }
-      L();
-    }
-  }
-  function L(t = !0) {
-    j.current = null, w([], t);
-  }
-  function U(t) {
-    t.key === "Escape" && L();
-  }
-  n.useEffect(() => (document.addEventListener("keydown", U), () => document.removeEventListener("keydown", U)), []), n.useEffect(() => {
-    var t;
-    (t = b.current) == null || t.attr("cx", (e) => o.x(e.p[0])).attr("cy", (e) => o.y(e.p[1]));
-  }, [q, k.chartWidth, k.chartHeight]);
-  const ot = n.useCallback(function() {
-    if (D(!1), !j.current || p === "pen")
-      return;
-    const t = [...j.current], e = o.x.invert(t[0]), a = o.y.invert(t[1]);
-    if (!y.current.length) {
-      w([[e, a]]);
-      return;
-    }
-    const s = y.current;
-    if (!H || s.length < 3)
-      w([...s, [e, a]]);
-    else {
-      const u = { points: [...s], closed: !0 };
-      L(!1), v([...m, u]), setTimeout(() => E([...m, u]), 0);
-    }
-  }, [p, H]), rt = n.useCallback(function(t) {
-    const e = [t.nativeEvent.offsetX, t.nativeEvent.offsetY], a = y.current, s = y.current[0];
-    if (s) {
-      const i = o.x(s[0]), u = o.y(s[1]), r = a.length > 1 ? Math.sqrt((e[0] - i) ** 2 + (e[1] - u) ** 2) : 1 / 0;
-      D(r < dt);
-    } else
-      D(!1);
-    nt(e), j.current = e;
-  }, []);
-  function st() {
-    x.current && B(x.current).data([]).exit().remove();
-  }
-  function ct(t) {
-    t !== x.current && t && (st(), x.current = t, it(P));
-  }
-  const it = n.useCallback(function(t) {
-    if (p !== "selection" && t !== null) {
-      const e = ft().on("drag", function(i) {
-        const u = B(this), r = u.data()[0];
-        r[0] = i.x, r[1] = i.y, r.p = [o.x.invert(r[0]), o.y.invert(r[1])], u.attr("cx", r[0]).attr("cy", r[1]);
-        const N = d.current.map((O, lt) => t !== lt ? O : {
-          ...O,
-          points: O.points.map(
-            (ut, at) => at === r.idx ? [o.x.invert(r[0]), o.y.invert(r[1])] : ut
-          )
-        });
-        v(N, !1);
-      }).on("end", function() {
-        F(), E(d.current);
-      }), a = d.current[t].points.map((i, u) => ({ idx: u, p: i })), s = B(x.current).selectAll("circle").data(a, (i) => i.idx).join("circle");
-      b.current = s, s.attr("cx", (i) => o.x(i.p[0])).attr("cy", (i) => o.y(i.p[1])).attr("r", A).attr("fill", "white").attr("stroke", g), s.call(e);
-    }
-  }, []);
-  return n.useEffect(() => {
-    V({
-      mode: p,
-      backEnabled: C > 0,
-      forwardEnabled: C < M.length - 1,
-      deleteEnabled: P !== null || m.length > 0 || l.length > 0
-    });
-  }, [p, P, m, l, C, M]), /* @__PURE__ */ c.jsx(c.Fragment, { children: /* @__PURE__ */ c.jsxs("g", { children: [
-    /* @__PURE__ */ c.jsx("defs", { children: /* @__PURE__ */ c.jsx(
-      "pattern",
-      {
-        id: "diagonalStripes",
-        width: "5",
-        height: "5",
-        patternTransform: "rotate(45 0 0)",
-        patternUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */ c.jsx("line", { x1: "0", y1: "0", x2: "0", y2: "10", stroke: g, strokeWidth: "1" })
-      }
-    ) }),
-    /* @__PURE__ */ c.jsx(
-      "rect",
-      {
-        fill: "transparent",
-        width: k.chartWidth,
-        height: k.chartHeight,
-        onMouseMove: rt,
-        onClick: ot
-      }
-    ),
-    m.map((t, e) => {
-      const a = e === Z, s = e === P, u = t.points.map((r) => [o.x(r[0]), o.y(r[1])]).map((r, N) => (N === 0 ? "M" : "L") + r[0] + "," + r[1]).join("") + "z";
-      return /* @__PURE__ */ c.jsxs("g", { children: [
-        /* @__PURE__ */ c.jsx(
-          "path",
-          {
-            d: u,
-            fill: a && !s ? "url(#diagonalStripes)" : "transparent",
-            stroke: s || a ? g : _,
-            onMouseOver: () => Y(e),
-            onMouseLeave: () => Y(null),
-            onClick: () => I(e),
-            style: { pointerEvents: p === "selection" || s ? "none" : "auto" }
-          }
-        ),
-        s && /* @__PURE__ */ c.jsx("g", { ref: (r) => ct(r) })
-      ] }, e);
-    }),
-    /* @__PURE__ */ c.jsx(
-      "polyline",
-      {
-        points: l.map((t) => `${o.x(t[0])},${o.y(t[1])}`).join(" "),
-        stroke: _,
-        fill: "none",
-        style: { pointerEvents: "none" }
-      }
-    ),
-    l.length > 1 && f && /* @__PURE__ */ c.jsxs("g", { style: { pointerEvents: "none" }, children: [
-      /* @__PURE__ */ c.jsx(
-        "circle",
-        {
-          cx: o.x(l[0][0]),
-          cy: o.y(l[0][1]),
-          r: yt,
-          fill: "none",
-          stroke: $,
-          strokeDasharray: "3 3"
-        }
-      ),
-      /* @__PURE__ */ c.jsx(
-        "line",
-        {
-          x1: f[0],
-          y1: f[1],
-          x2: o.x(l[0][0]),
-          y2: o.y(l[0][1]),
-          stroke: $,
-          strokeDasharray: "3 3"
-        }
-      )
-    ] }),
-    l.length > 0 && f && /* @__PURE__ */ c.jsxs("g", { style: { pointerEvents: "none" }, children: [
-      /* @__PURE__ */ c.jsx(
-        "line",
-        {
-          x1: o.x(l[l.length - 1][0]),
-          y1: o.y(l[l.length - 1][1]),
-          x2: f[0],
-          y2: f[1],
-          stroke: g
-        }
-      ),
-      l.map((t, e) => /* @__PURE__ */ c.jsx(
-        "circle",
-        {
-          cx: o.x(t[0]),
-          cy: o.y(t[1]),
-          r: A,
-          fill: "white",
-          stroke: e > 0 ? g : _
-        },
-        e
-      )),
-      /* @__PURE__ */ c.jsx(
-        "circle",
-        {
-          cx: f[0],
-          cy: f[1],
-          r: A,
-          fill: "white",
-          stroke: g
-        }
-      )
-    ] }),
-    H && f && /* @__PURE__ */ c.jsx(
-      "circle",
-      {
-        cx: f[0] + 5,
-        cy: f[1] - 5,
-        r: 2,
-        fill: "none",
-        stroke: g,
-        strokeWidth: 0.5
-      }
-    )
-  ] }) });
+import { BLACK as e } from "../../constants.js";
+import { SCATTERPLOT_CONTROLS_EVENTS as t } from "../constants.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { Fragment as ee, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { select as c } from "d3-selection";
+import { drag as l } from "d3-drag";
+var u = "#845CFF", d = "#CFD1DB", f = 20, p = 3, m = 6, h = 10;
+function g({ scales: g, chartSizes: _, zoomStateKey: v, defaultPolygons: y, onPolygonsApply: b, onLassoControlsStateUpdate: x }) {
+	r(() => {
+		function e() {
+			N.current.length > 0 ? Q() : j.current === null ? (J([]), b([])) : (J([...E.current.filter((e, t) => t !== j.current)]), X(null), b(E.current));
+		}
+		function n(e) {
+			Z(e.detail);
+		}
+		function r() {
+			q(z.current - 1);
+		}
+		function i() {
+			q(z.current + 1);
+		}
+		return document.addEventListener(t.lassoDelete, e), document.addEventListener(t.lassoSelectMode, n), document.addEventListener(t.lassoBack, r), document.addEventListener(t.lassoForward, i), () => {
+			document.removeEventListener(t.lassoDelete, e), document.removeEventListener(t.lassoSelectMode, n), document.removeEventListener(t.lassoBack, r), document.removeEventListener(t.lassoForward, i);
+		};
+	}, []);
+	let [S, C] = a("pen"), [w, T] = a(y), E = i(y), [D, O] = a(null), [k, A] = a(null), j = i(null), [M, te] = a([]), N = i(M), [P, F] = a([{
+		newPolygonPoints: M,
+		closedPolygons: w
+	}]), [I, L] = a(0), R = i(P), z = i(I), [B, ne] = a(null), V = i(null), [H, U] = a(!1), W = i(null), G = i(null), K = n(function() {
+		let e = {
+			newPolygonPoints: [...N.current],
+			closedPolygons: [...E.current]
+		}, t = R.current.slice(0, z.current + 1);
+		t.push(e), t.length > h && t.shift(), F(t), L(t.length - 1), R.current = t, z.current = t.length - 1;
+	}, []), q = n(function(e) {
+		if (e > R.current.length - 1 || e < 0) return;
+		Z("selection");
+		let t = R.current[e];
+		J(t.closedPolygons, !1), Y(t.newPolygonPoints, !1), L(e), z.current = e;
+	}, []);
+	function J(e, t = !0) {
+		T(e), E.current = e, t && K();
+	}
+	function Y(e, t = !0) {
+		N.current = e, te(e), t && K();
+	}
+	function X(e) {
+		A(e), j.current = e;
+	}
+	function Z(e) {
+		if (C(e), e === "selection" && (X(null), G.current = null, W.current = null), e === "pen") {
+			if (N.current.length > 2) {
+				let e = {
+					points: N.current,
+					closed: !0
+				};
+				J([...E.current, e]), b([...E.current, e]);
+			}
+			Q();
+		}
+	}
+	function Q(e = !0) {
+		V.current = null, Y([], e);
+	}
+	function $(e) {
+		e.key === "Escape" && Q();
+	}
+	r(() => (document.addEventListener("keydown", $), () => document.removeEventListener("keydown", $)), []), r(() => {
+		G.current?.attr("cx", (e) => g.x(e.p[0])).attr("cy", (e) => g.y(e.p[1]));
+	}, [
+		v,
+		_.chartWidth,
+		_.chartHeight
+	]);
+	let re = n(function() {
+		if (U(!1), !V.current || S === "pen") return;
+		let e = [...V.current], t = g.x.invert(e[0]), n = g.y.invert(e[1]);
+		if (!N.current.length) {
+			Y([[t, n]]);
+			return;
+		}
+		let r = N.current;
+		if (!H || r.length < 3) Y([...r, [t, n]]);
+		else {
+			let e = {
+				points: [...r],
+				closed: !0
+			};
+			Q(!1), J([...w, e]), setTimeout(() => b([...w, e]), 0);
+		}
+	}, [S, H]), ie = n(function(e) {
+		let t = [e.nativeEvent.offsetX, e.nativeEvent.offsetY], n = N.current, r = N.current[0];
+		if (r) {
+			let e = g.x(r[0]), i = g.y(r[1]);
+			U((n.length > 1 ? Math.sqrt((t[0] - e) ** 2 + (t[1] - i) ** 2) : Infinity) < f);
+		} else U(!1);
+		ne(t), V.current = t;
+	}, []);
+	function ae() {
+		W.current && c(W.current).data([]).exit().remove();
+	}
+	function oe(e) {
+		e !== W.current && e && (ae(), W.current = e, se(k));
+	}
+	let se = n(function(e) {
+		if (S !== "selection" && e !== null) {
+			let t = l().on("drag", function(t) {
+				let n = c(this), r = n.data()[0];
+				r[0] = t.x, r[1] = t.y, r.p = [g.x.invert(r[0]), g.y.invert(r[1])], n.attr("cx", r[0]).attr("cy", r[1]), J(E.current.map((t, n) => e === n ? {
+					...t,
+					points: t.points.map((e, t) => t === r.idx ? [g.x.invert(r[0]), g.y.invert(r[1])] : e)
+				} : t), !1);
+			}).on("end", function() {
+				K(), b(E.current);
+			}), n = E.current[e].points.map((e, t) => ({
+				idx: t,
+				p: e
+			})), r = c(W.current).selectAll("circle").data(n, (e) => e.idx).join("circle");
+			G.current = r, r.attr("cx", (e) => g.x(e.p[0])).attr("cy", (e) => g.y(e.p[1])).attr("r", p).attr("fill", "white").attr("stroke", u), r.call(t);
+		}
+	}, []);
+	return r(() => {
+		x({
+			mode: S,
+			backEnabled: I > 0,
+			forwardEnabled: I < P.length - 1,
+			deleteEnabled: k !== null || w.length > 0 || M.length > 0
+		});
+	}, [
+		S,
+		k,
+		w,
+		M,
+		I,
+		P
+	]), /* @__PURE__ */ o(ee, { children: /* @__PURE__ */ s("g", { children: [
+		/* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("pattern", {
+			id: "diagonalStripes",
+			width: "5",
+			height: "5",
+			patternTransform: "rotate(45 0 0)",
+			patternUnits: "userSpaceOnUse",
+			children: /* @__PURE__ */ o("line", {
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "10",
+				stroke: u,
+				strokeWidth: "1"
+			})
+		}) }),
+		/* @__PURE__ */ o("rect", {
+			fill: "transparent",
+			width: _.chartWidth,
+			height: _.chartHeight,
+			onMouseMove: ie,
+			onClick: re
+		}),
+		w.map((t, n) => {
+			let r = n === D, i = n === k;
+			return /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("path", {
+				d: t.points.map((e) => [g.x(e[0]), g.y(e[1])]).map((e, t) => (t === 0 ? "M" : "L") + e[0] + "," + e[1]).join("") + "z",
+				fill: r && !i ? "url(#diagonalStripes)" : "transparent",
+				stroke: i || r ? u : e,
+				onMouseOver: () => O(n),
+				onMouseLeave: () => O(null),
+				onClick: () => X(n),
+				style: { pointerEvents: S === "selection" || i ? "none" : "auto" }
+			}), i && /* @__PURE__ */ o("g", { ref: (e) => oe(e) })] }, n);
+		}),
+		/* @__PURE__ */ o("polyline", {
+			points: M.map((e) => `${g.x(e[0])},${g.y(e[1])}`).join(" "),
+			stroke: e,
+			fill: "none",
+			style: { pointerEvents: "none" }
+		}),
+		M.length > 1 && B && /* @__PURE__ */ s("g", {
+			style: { pointerEvents: "none" },
+			children: [/* @__PURE__ */ o("circle", {
+				cx: g.x(M[0][0]),
+				cy: g.y(M[0][1]),
+				r: m,
+				fill: "none",
+				stroke: d,
+				strokeDasharray: "3 3"
+			}), /* @__PURE__ */ o("line", {
+				x1: B[0],
+				y1: B[1],
+				x2: g.x(M[0][0]),
+				y2: g.y(M[0][1]),
+				stroke: d,
+				strokeDasharray: "3 3"
+			})]
+		}),
+		M.length > 0 && B && /* @__PURE__ */ s("g", {
+			style: { pointerEvents: "none" },
+			children: [
+				/* @__PURE__ */ o("line", {
+					x1: g.x(M[M.length - 1][0]),
+					y1: g.y(M[M.length - 1][1]),
+					x2: B[0],
+					y2: B[1],
+					stroke: u
+				}),
+				M.map((e, t) => /* @__PURE__ */ o("circle", {
+					cx: g.x(e[0]),
+					cy: g.y(e[1]),
+					r: p,
+					fill: "white",
+					stroke: t > 0 ? u : "#110529"
+				}, t)),
+				/* @__PURE__ */ o("circle", {
+					cx: B[0],
+					cy: B[1],
+					r: p,
+					fill: "white",
+					stroke: u
+				})
+			]
+		}),
+		H && B && /* @__PURE__ */ o("circle", {
+			cx: B[0] + 5,
+			cy: B[1] - 5,
+			r: 2,
+			fill: "none",
+			stroke: u,
+			strokeWidth: .5
+		})
+	] }) });
 }
-export {
-  St as Lasso
-};
-//# sourceMappingURL=Lasso.js.map
+export { g as Lasso };
+
+//# sourceMappingURL=Lasso.js.map

package/dist/scatterplot-umap/components/Lasso.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lasso.js","sources":["../../../src/scatterplot-umap/components/Lasso.tsx"],"sourcesContent":["import {SCATTERPLOT_CONTROLS_EVENTS} from '../constants';\nimport type {LassoControlsState, LassoMode} from '../types';\nimport type {Polygon} from '../types';\nimport type {Selection} from 'd3-selection';\nimport {select} from 'd3-selection';\nimport {BLACK} from '../../constants';\nimport type {ChartScales, ChartSizes, Point} from '../types';\nimport type {MouseEvent} from 'react';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {drag} from 'd3-drag';\n\nconst SELECTION_COLOR = '#845CFF';\nconst START_GREY = '#CFD1DB';\nconst CLOSING_DISTANCE = 20;\nconst R = 3;\nconst R_START = 6;\nconst MAX_HISTORY_LENGTH = 10;\n\ntype CircleData = { // moving point for editing\n    idx: number;\n    p: Point;\n};\ntype CirclesSelection = Selection<SVGCircleElement, CircleData, SVGGElement | null, CircleData>;\n\ntype HistoryFrame = {\n    newPolygonPoints: Point[],\n    closedPolygons: Polygon[]\n}\n\n// Mode = 'selection': creating new polygons, pan with button\n// Mode = 'pen': selecting polygon to edit or delete, any zooming actions\nexport function Lasso({\n    scales,\n    chartSizes,\n    zoomStateKey,\n    defaultPolygons,\n    onPolygonsApply,\n    onLassoControlsStateUpdate,\n}: {\n    scales: ChartScales;\n    chartSizes: ChartSizes;\n    zoomStateKey: string;\n    defaultPolygons: Polygon[];\n    onPolygonsApply: (data: Polygon[]) => void;\n    onLassoControlsStateUpdate: (v: LassoControlsState) => void;\n}) {\n    useEffect(() => {\n        // Events from outer controls\n        function onPolygonDelete() {\n            if (newPolygonPointsRef.current.length > 0) {\n                clearNotFinishedPolygon();\n            } else if (selectedPolygonRef.current === null) {\n                updatePolygons([]);\n                onPolygonsApply([]);\n            } else {\n                updatePolygons([...closedPolygonsRef.current.filter((_p, idx) => idx !== selectedPolygonRef.current)]);\n                updateSelectedPolygon(null);\n                onPolygonsApply(closedPolygonsRef.current);\n            }\n        }\n\n        function onModeSelect(e: CustomEvent<LassoMode>) {\n            updateMode(e.detail);\n        }\n        function onClickBack() {\n            loadHistoryItem(historyIndexRef.current - 1);\n        }\n        function onClickForward() {\n            loadHistoryItem(historyIndexRef.current + 1);\n        }\n        document.addEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoDelete, onPolygonDelete);\n        document.addEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, onModeSelect as EventListener);\n        document.addEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoBack, onClickBack);\n        document.addEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoForward, onClickForward);\n        return () => {\n            document.removeEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoDelete, onPolygonDelete);\n            document.removeEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, onModeSelect as EventListener);\n            document.removeEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoBack, onClickBack);\n            document.removeEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoForward, onClickForward);\n        };\n    }, []);\n\n    // inner state\n    const [lassoMode, setLassoMode] = useState<LassoMode>('pen');\n\n    const [closedPolygons, setClosedPolygons] = useState<Polygon[]>(defaultPolygons);\n    const closedPolygonsRef = useRef<Polygon[]>(defaultPolygons);\n\n    const [hoveredPolygon, setHoveredPolygon] = useState<number | null>(null);\n\n    const [selectedPolygon, setSelectedPolygon] = useState<number | null>(null);\n    const selectedPolygonRef = useRef<number | null>(null);\n\n    const [newPolygonPoints, setNewPolygonPoints] = useState<Point[]>([]);\n    const newPolygonPointsRef = useRef(newPolygonPoints);\n\n    const [history, setHistory] = useState<HistoryFrame[]>([{newPolygonPoints, closedPolygons}]);\n    const [historyIndex, setHistoryIndex] = useState(0);\n    const historyRef = useRef(history);\n    const historyIndexRef = useRef(historyIndex);\n\n    const [movingPoint, setMovingPoint] = useState<null | Point>(null);\n    const movingPointRef = useRef<null | Point>(null);\n\n    const [closeToStartPoint, setCloseToStartPoint] = useState(false);\n\n    const selectedCirclesContainerRef = useRef<SVGGElement | null>(null);\n    const selectedCirclesSelectionRef = useRef<CirclesSelection | null>(null);\n\n    const saveCurrentStateToHistory = useCallback(function () {\n        const newHistoryItem = {\n            newPolygonPoints: [...newPolygonPointsRef.current],\n            closedPolygons: [...closedPolygonsRef.current]\n        };\n        const newHistory = historyRef.current.slice(0, historyIndexRef.current + 1);\n        newHistory.push(newHistoryItem);\n        if (newHistory.length > MAX_HISTORY_LENGTH) {\n            newHistory.shift();\n        }\n        setHistory(newHistory);\n        setHistoryIndex(newHistory.length - 1);\n        historyRef.current = newHistory;\n        historyIndexRef.current = newHistory.length - 1;\n    }, []);\n\n   const loadHistoryItem = useCallback(function (index:number) {\n        if (index > historyRef.current.length - 1 || index < 0) {\n            return;\n        }\n        updateMode('selection');\n        const historyState = historyRef.current[index];\n        updatePolygons(historyState.closedPolygons, false);\n        updateNewPolygon(historyState.newPolygonPoints, false);\n        setHistoryIndex(index);\n        historyIndexRef.current = index;\n    }, []);\n    function updatePolygons(p: Polygon[], saveToHistory = true) {\n        setClosedPolygons(p);\n        closedPolygonsRef.current = p;\n        if (saveToHistory) {\n            saveCurrentStateToHistory();\n        }\n    }\n\n    function updateNewPolygon(points:Point[], saveToHistory = true) {\n        newPolygonPointsRef.current = points;\n        setNewPolygonPoints(points);\n        if (saveToHistory) {\n            saveCurrentStateToHistory();\n        }\n    }\n\n    function updateSelectedPolygon(idx: number | null) {\n        setSelectedPolygon(idx);\n        selectedPolygonRef.current = idx;\n    }\n\n    function updateMode(v: LassoMode) {\n        setLassoMode(v);\n        if (v === 'selection') {\n            updateSelectedPolygon(null);\n            selectedCirclesSelectionRef.current = null;\n            selectedCirclesContainerRef.current = null;\n        }\n        if (v === 'pen') {\n            if (newPolygonPointsRef.current.length > 2) {\n                const polygon:Polygon = {points: newPolygonPointsRef.current, closed: true};\n                updatePolygons([...closedPolygonsRef.current, polygon]);\n                onPolygonsApply([...closedPolygonsRef.current, polygon]);\n            }\n            clearNotFinishedPolygon();\n        }\n    }\n    function clearNotFinishedPolygon(saveToHistory = true) {\n        movingPointRef.current = null;\n        updateNewPolygon([], saveToHistory);\n    }\n\n    function onKeyDown(e: KeyboardEvent) {\n        const escape = e.key === 'Escape';\n        if (!escape) {\n            return;\n        }\n        clearNotFinishedPolygon();\n    }\n\n    useEffect(() => {\n        document.addEventListener('keydown', onKeyDown);\n        return () => document.removeEventListener('keydown', onKeyDown);\n    }, []);\n\n    useEffect(() => {\n        selectedCirclesSelectionRef.current?.attr('cx', d => scales.x(d.p[0])).attr('cy', d => scales.y(d.p[1]));\n    }, [zoomStateKey, chartSizes.chartWidth, chartSizes.chartHeight]);\n\n    const onNewPointAddByClick = useCallback(function () {\n        setCloseToStartPoint(false);\n        if (!movingPointRef.current || lassoMode === 'pen') {\n            return;\n        }\n        const currentCoords = [...movingPointRef.current] as Point;\n        const x = scales.x.invert(currentCoords[0]);\n        const y = scales.y.invert(currentCoords[1]);\n\n        if (!newPolygonPointsRef.current.length) {\n            updateNewPolygon([[x, y]]);\n            return;\n        }\n\n        const points = newPolygonPointsRef.current;\n        const tooFar = !closeToStartPoint;\n        if (tooFar || points.length < 3) {\n            updateNewPolygon([...points, [x, y]]);\n        } else {\n            const polygon:Polygon = {points: [...points], closed: true};\n            clearNotFinishedPolygon(false);\n            updatePolygons([...closedPolygons, polygon]);\n            // to avoid freezing of ui updating in case of big amount of points to apply polygons and change opacity\n            setTimeout(() => onPolygonsApply([...closedPolygons, polygon]), 0);\n        }\n    }, [lassoMode, closeToStartPoint]);\n\n    const onMouseMove = useCallback(function(e: MouseEvent<SVGRectElement>) {\n        const p: Point = [e.nativeEvent.offsetX, e.nativeEvent.offsetY];\n        const points = newPolygonPointsRef.current;\n        const startPoint = newPolygonPointsRef.current[0];\n        if (startPoint) {\n            const startX = scales.x(startPoint[0]);\n            const startY = scales.y(startPoint[1]);\n            const distance = points.length > 1\n                ? Math.sqrt((p[0] - startX) ** 2 + (p[1] - startY) ** 2)\n                : Infinity;\n            setCloseToStartPoint(distance < CLOSING_DISTANCE);\n        } else {\n            setCloseToStartPoint(false);\n        }\n\n        setMovingPoint(p);\n        movingPointRef.current = p;\n    }, []);\n\n    function clearSelectedCircles() {\n        if (selectedCirclesContainerRef.current) {\n            select(selectedCirclesContainerRef.current).data([]).exit().remove();\n        }\n    }\n\n    function updateSelectedCircles(el: SVGGElement | null) {\n        if (el !== selectedCirclesContainerRef.current && el) {\n            clearSelectedCircles();\n            selectedCirclesContainerRef.current = el;\n            onPolygonSelect(selectedPolygon);\n        }\n    }\n\n    const onPolygonSelect = useCallback(function (idx: number | null) {\n        if (lassoMode === 'selection') {\n            return;\n        }\n        if (idx !== null) {\n            const d = drag<SVGCircleElement, CircleData, SVGGElement | null>()\n                .on('drag', function (e) {\n                    const el = select<SVGCircleElement, CircleData>(this);\n                    const d = el.data()[0] as number[] & CircleData;\n                    d[0] = e.x;\n                    d[1] = e.y;\n                    d.p = [scales.x.invert(d[0]), scales.y.invert(d[1])];\n                    el.attr('cx', d[0]).attr('cy', d[1]);\n                    const editedPolygons = closedPolygonsRef.current.map((polygon, polygonIdx) => {\n                        return idx !== polygonIdx ? polygon : {\n                            ...polygon,\n                            points: polygon.points.map((el, pointIdx) =>\n                                pointIdx === d.idx ? ([scales.x.invert(d[0]), scales.y.invert(d[1])] as Point) : el\n                            ),\n                        };\n                    });\n                    updatePolygons(editedPolygons, false);\n                })\n                .on('end', function () {\n                    saveCurrentStateToHistory();\n                    onPolygonsApply(closedPolygonsRef.current);\n                });\n            const draggablePointsData = closedPolygonsRef.current[idx].points.map((p, idx) => ({idx, p}));\n            const selectedCircles = select(selectedCirclesContainerRef.current)\n                .selectAll<SVGCircleElement, CircleData>('circle')\n                .data(draggablePointsData, (d) => d.idx)\n                .join('circle');\n            selectedCirclesSelectionRef.current = selectedCircles;\n\n            selectedCircles\n                .attr('cx', d => scales.x(d.p[0]))\n                .attr('cy', d => scales.y(d.p[1]))\n                .attr('r', R)\n                .attr('fill', 'white')\n                .attr('stroke', SELECTION_COLOR);\n            selectedCircles.call(d);\n        }\n    }, []);\n\n    useEffect(() => {\n        onLassoControlsStateUpdate({\n            mode: lassoMode,\n            backEnabled: historyIndex > 0,\n            forwardEnabled: historyIndex < history.length - 1,\n            deleteEnabled: selectedPolygon !== null || closedPolygons.length > 0 || newPolygonPoints.length > 0,\n        });\n    }, [lassoMode, selectedPolygon, closedPolygons, newPolygonPoints, historyIndex, history]);\n\n    return (\n        <>\n            <g>\n                <defs>\n                    <pattern\n                        id=\"diagonalStripes\"\n                        width=\"5\"\n                        height=\"5\"\n                        patternTransform=\"rotate(45 0 0)\"\n                        patternUnits=\"userSpaceOnUse\"\n                    >\n                        <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"10\" stroke={SELECTION_COLOR} strokeWidth=\"1\" />\n                    </pattern>\n                </defs>\n                <rect\n                    fill=\"transparent\"\n                    width={chartSizes.chartWidth}\n                    height={chartSizes.chartHeight}\n                    onMouseMove={onMouseMove}\n                    onClick={onNewPointAddByClick}\n                />\n                {closedPolygons.map((p, idx) => {\n                    const isHovered = idx === hoveredPolygon;\n                    const isSelected = idx === selectedPolygon;\n                    const points = p.points.map(p => [scales.x(p[0]), scales.y(p[1])]);\n                    const pathD =\n                        points\n                            .map((p, idx) => {\n                                return (idx === 0 ? 'M' : 'L') + p[0] + ',' + p[1];\n                            })\n                            .join('') + 'z';\n                    return (\n                        <g key={idx}>\n                            <path\n                                d={pathD}\n                                fill={isHovered && !isSelected ? 'url(#diagonalStripes)' : 'transparent'}\n                                stroke={isSelected || isHovered ? SELECTION_COLOR : BLACK}\n                                onMouseOver={() => setHoveredPolygon(idx)}\n                                onMouseLeave={() => setHoveredPolygon(null)}\n                                onClick={() => updateSelectedPolygon(idx)}\n                                style={{pointerEvents: lassoMode === 'selection' || isSelected ? 'none' : 'auto'}}\n                            />\n                            {isSelected && <g ref={el => updateSelectedCircles(el)} />}\n                        </g>\n                    );\n                })}\n                <polyline\n                    points={newPolygonPoints.map((p) => `${scales.x(p[0])},${scales.y(p[1])}`).join(' ')}\n                    stroke={BLACK}\n                    fill=\"none\"\n                    style={{pointerEvents: 'none'}}\n                />\n                {newPolygonPoints.length > 1 && movingPoint && (\n                    <g style={{pointerEvents: 'none'}}>\n                        <circle\n                            cx={scales.x(newPolygonPoints[0][0])}\n                            cy={scales.y(newPolygonPoints[0][1])}\n                            r={R_START}\n                            fill=\"none\"\n                            stroke={START_GREY}\n                            strokeDasharray=\"3 3\"\n                        />\n                        <line\n                            x1={movingPoint[0]}\n                            y1={movingPoint[1]}\n                            x2={scales.x(newPolygonPoints[0][0])}\n                            y2={scales.y(newPolygonPoints[0][1])}\n                            stroke={START_GREY}\n                            strokeDasharray=\"3 3\"\n                        />\n                    </g>\n                )}\n                {newPolygonPoints.length > 0 && movingPoint && (\n                    <g style={{pointerEvents: 'none'}}>\n                        <line\n                            x1={scales.x(newPolygonPoints[newPolygonPoints.length - 1][0])}\n                            y1={scales.y(newPolygonPoints[newPolygonPoints.length - 1][1])}\n                            x2={movingPoint[0]}\n                            y2={movingPoint[1]}\n                            stroke={SELECTION_COLOR}\n                        />\n                        {newPolygonPoints.map((p, idx) => (\n                            <circle\n                                key={idx}\n                                cx={scales.x(p[0])}\n                                cy={scales.y(p[1])}\n                                r={R}\n                                fill=\"white\"\n                                stroke={idx > 0 ? SELECTION_COLOR : BLACK}\n                            />\n                        ))}\n                        <circle\n                            cx={movingPoint[0]}\n                            cy={movingPoint[1]}\n                            r={R}\n                            fill=\"white\"\n                            stroke={SELECTION_COLOR}\n                        />\n                    </g>\n                )}\n                {closeToStartPoint && movingPoint && (\n                    <circle\n                        cx={movingPoint[0] + 5}\n                        cy={movingPoint[1] - 5}\n                        r={2}\n                        fill=\"none\"\n                        stroke={SELECTION_COLOR}\n                        strokeWidth={0.5}\n                    />\n                )}\n            </g>\n        </>\n    );\n}\n"],"names":["SELECTION_COLOR","START_GREY","CLOSING_DISTANCE","R","R_START","MAX_HISTORY_LENGTH","Lasso","scales","chartSizes","zoomStateKey","defaultPolygons","onPolygonsApply","onLassoControlsStateUpdate","useEffect","onPolygonDelete","newPolygonPointsRef","clearNotFinishedPolygon","selectedPolygonRef","updatePolygons","closedPolygonsRef","_p","idx","updateSelectedPolygon","onModeSelect","e","updateMode","onClickBack","loadHistoryItem","historyIndexRef","onClickForward","SCATTERPLOT_CONTROLS_EVENTS","lassoMode","setLassoMode","useState","closedPolygons","setClosedPolygons","useRef","hoveredPolygon","setHoveredPolygon","selectedPolygon","setSelectedPolygon","newPolygonPoints","setNewPolygonPoints","history","setHistory","historyIndex","setHistoryIndex","historyRef","movingPoint","setMovingPoint","movingPointRef","closeToStartPoint","setCloseToStartPoint","selectedCirclesContainerRef","selectedCirclesSelectionRef","saveCurrentStateToHistory","useCallback","newHistoryItem","newHistory","index","historyState","updateNewPolygon","p","saveToHistory","points","v","polygon","onKeyDown","_a","d","onNewPointAddByClick","currentCoords","x","y","onMouseMove","startPoint","startX","startY","distance","clearSelectedCircles","select","updateSelectedCircles","el","onPolygonSelect","drag","editedPolygons","polygonIdx","pointIdx","draggablePointsData","selectedCircles","jsx","Fragment","isHovered","isSelected","pathD","BLACK","jsxs"],"mappings":"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"}
+{"version":3,"file":"Lasso.js","names":[],"sources":["../../../src/scatterplot-umap/components/Lasso.tsx"],"sourcesContent":["import {SCATTERPLOT_CONTROLS_EVENTS} from '../constants';\nimport type {LassoControlsState, LassoMode} from '../types';\nimport type {Polygon} from '../types';\nimport type {Selection} from 'd3-selection';\nimport {select} from 'd3-selection';\nimport {BLACK} from '../../constants';\nimport type {ChartScales, ChartSizes, Point} from '../types';\nimport type {MouseEvent} from 'react';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {drag} from 'd3-drag';\n\nconst SELECTION_COLOR = '#845CFF';\nconst START_GREY = '#CFD1DB';\nconst CLOSING_DISTANCE = 20;\nconst R = 3;\nconst R_START = 6;\nconst MAX_HISTORY_LENGTH = 10;\n\ntype CircleData = { // moving point for editing\n    idx: number;\n    p: Point;\n};\ntype CirclesSelection = Selection<SVGCircleElement, CircleData, SVGGElement | null, CircleData>;\n\ntype HistoryFrame = {\n    newPolygonPoints: Point[],\n    closedPolygons: Polygon[]\n}\n\n// Mode = 'selection': creating new polygons, pan with button\n// Mode = 'pen': selecting polygon to edit or delete, any zooming actions\nexport function Lasso({\n    scales,\n    chartSizes,\n    zoomStateKey,\n    defaultPolygons,\n    onPolygonsApply,\n    onLassoControlsStateUpdate,\n}: {\n    scales: ChartScales;\n    chartSizes: ChartSizes;\n    zoomStateKey: string;\n    defaultPolygons: Polygon[];\n    onPolygonsApply: (data: Polygon[]) => void;\n    onLassoControlsStateUpdate: (v: LassoControlsState) => void;\n}) {\n    useEffect(() => {\n        // Events from outer controls\n        function onPolygonDelete() {\n            if (newPolygonPointsRef.current.length > 0) {\n                clearNotFinishedPolygon();\n            } else if (selectedPolygonRef.current === null) {\n                updatePolygons([]);\n                onPolygonsApply([]);\n            } else {\n                updatePolygons([...closedPolygonsRef.current.filter((_p, idx) => idx !== selectedPolygonRef.current)]);\n                updateSelectedPolygon(null);\n                onPolygonsApply(closedPolygonsRef.current);\n            }\n        }\n\n        function onModeSelect(e: CustomEvent<LassoMode>) {\n            updateMode(e.detail);\n        }\n        function onClickBack() {\n            loadHistoryItem(historyIndexRef.current - 1);\n        }\n        function onClickForward() {\n            loadHistoryItem(historyIndexRef.current + 1);\n        }\n        document.addEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoDelete, onPolygonDelete);\n        document.addEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, onModeSelect as EventListener);\n        document.addEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoBack, onClickBack);\n        document.addEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoForward, onClickForward);\n        return () => {\n            document.removeEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoDelete, onPolygonDelete);\n            document.removeEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoSelectMode, onModeSelect as EventListener);\n            document.removeEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoBack, onClickBack);\n            document.removeEventListener(SCATTERPLOT_CONTROLS_EVENTS.lassoForward, onClickForward);\n        };\n    }, []);\n\n    // inner state\n    const [lassoMode, setLassoMode] = useState<LassoMode>('pen');\n\n    const [closedPolygons, setClosedPolygons] = useState<Polygon[]>(defaultPolygons);\n    const closedPolygonsRef = useRef<Polygon[]>(defaultPolygons);\n\n    const [hoveredPolygon, setHoveredPolygon] = useState<number | null>(null);\n\n    const [selectedPolygon, setSelectedPolygon] = useState<number | null>(null);\n    const selectedPolygonRef = useRef<number | null>(null);\n\n    const [newPolygonPoints, setNewPolygonPoints] = useState<Point[]>([]);\n    const newPolygonPointsRef = useRef(newPolygonPoints);\n\n    const [history, setHistory] = useState<HistoryFrame[]>([{newPolygonPoints, closedPolygons}]);\n    const [historyIndex, setHistoryIndex] = useState(0);\n    const historyRef = useRef(history);\n    const historyIndexRef = useRef(historyIndex);\n\n    const [movingPoint, setMovingPoint] = useState<null | Point>(null);\n    const movingPointRef = useRef<null | Point>(null);\n\n    const [closeToStartPoint, setCloseToStartPoint] = useState(false);\n\n    const selectedCirclesContainerRef = useRef<SVGGElement | null>(null);\n    const selectedCirclesSelectionRef = useRef<CirclesSelection | null>(null);\n\n    const saveCurrentStateToHistory = useCallback(function () {\n        const newHistoryItem = {\n            newPolygonPoints: [...newPolygonPointsRef.current],\n            closedPolygons: [...closedPolygonsRef.current]\n        };\n        const newHistory = historyRef.current.slice(0, historyIndexRef.current + 1);\n        newHistory.push(newHistoryItem);\n        if (newHistory.length > MAX_HISTORY_LENGTH) {\n            newHistory.shift();\n        }\n        setHistory(newHistory);\n        setHistoryIndex(newHistory.length - 1);\n        historyRef.current = newHistory;\n        historyIndexRef.current = newHistory.length - 1;\n    }, []);\n\n   const loadHistoryItem = useCallback(function (index:number) {\n        if (index > historyRef.current.length - 1 || index < 0) {\n            return;\n        }\n        updateMode('selection');\n        const historyState = historyRef.current[index];\n        updatePolygons(historyState.closedPolygons, false);\n        updateNewPolygon(historyState.newPolygonPoints, false);\n        setHistoryIndex(index);\n        historyIndexRef.current = index;\n    }, []);\n    function updatePolygons(p: Polygon[], saveToHistory = true) {\n        setClosedPolygons(p);\n        closedPolygonsRef.current = p;\n        if (saveToHistory) {\n            saveCurrentStateToHistory();\n        }\n    }\n\n    function updateNewPolygon(points:Point[], saveToHistory = true) {\n        newPolygonPointsRef.current = points;\n        setNewPolygonPoints(points);\n        if (saveToHistory) {\n            saveCurrentStateToHistory();\n        }\n    }\n\n    function updateSelectedPolygon(idx: number | null) {\n        setSelectedPolygon(idx);\n        selectedPolygonRef.current = idx;\n    }\n\n    function updateMode(v: LassoMode) {\n        setLassoMode(v);\n        if (v === 'selection') {\n            updateSelectedPolygon(null);\n            selectedCirclesSelectionRef.current = null;\n            selectedCirclesContainerRef.current = null;\n        }\n        if (v === 'pen') {\n            if (newPolygonPointsRef.current.length > 2) {\n                const polygon:Polygon = {points: newPolygonPointsRef.current, closed: true};\n                updatePolygons([...closedPolygonsRef.current, polygon]);\n                onPolygonsApply([...closedPolygonsRef.current, polygon]);\n            }\n            clearNotFinishedPolygon();\n        }\n    }\n    function clearNotFinishedPolygon(saveToHistory = true) {\n        movingPointRef.current = null;\n        updateNewPolygon([], saveToHistory);\n    }\n\n    function onKeyDown(e: KeyboardEvent) {\n        const escape = e.key === 'Escape';\n        if (!escape) {\n            return;\n        }\n        clearNotFinishedPolygon();\n    }\n\n    useEffect(() => {\n        document.addEventListener('keydown', onKeyDown);\n        return () => document.removeEventListener('keydown', onKeyDown);\n    }, []);\n\n    useEffect(() => {\n        selectedCirclesSelectionRef.current?.attr('cx', d => scales.x(d.p[0])).attr('cy', d => scales.y(d.p[1]));\n    }, [zoomStateKey, chartSizes.chartWidth, chartSizes.chartHeight]);\n\n    const onNewPointAddByClick = useCallback(function () {\n        setCloseToStartPoint(false);\n        if (!movingPointRef.current || lassoMode === 'pen') {\n            return;\n        }\n        const currentCoords = [...movingPointRef.current] as Point;\n        const x = scales.x.invert(currentCoords[0]);\n        const y = scales.y.invert(currentCoords[1]);\n\n        if (!newPolygonPointsRef.current.length) {\n            updateNewPolygon([[x, y]]);\n            return;\n        }\n\n        const points = newPolygonPointsRef.current;\n        const tooFar = !closeToStartPoint;\n        if (tooFar || points.length < 3) {\n            updateNewPolygon([...points, [x, y]]);\n        } else {\n            const polygon:Polygon = {points: [...points], closed: true};\n            clearNotFinishedPolygon(false);\n            updatePolygons([...closedPolygons, polygon]);\n            // to avoid freezing of ui updating in case of big amount of points to apply polygons and change opacity\n            setTimeout(() => onPolygonsApply([...closedPolygons, polygon]), 0);\n        }\n    }, [lassoMode, closeToStartPoint]);\n\n    const onMouseMove = useCallback(function(e: MouseEvent<SVGRectElement>) {\n        const p: Point = [e.nativeEvent.offsetX, e.nativeEvent.offsetY];\n        const points = newPolygonPointsRef.current;\n        const startPoint = newPolygonPointsRef.current[0];\n        if (startPoint) {\n            const startX = scales.x(startPoint[0]);\n            const startY = scales.y(startPoint[1]);\n            const distance = points.length > 1\n                ? Math.sqrt((p[0] - startX) ** 2 + (p[1] - startY) ** 2)\n                : Infinity;\n            setCloseToStartPoint(distance < CLOSING_DISTANCE);\n        } else {\n            setCloseToStartPoint(false);\n        }\n\n        setMovingPoint(p);\n        movingPointRef.current = p;\n    }, []);\n\n    function clearSelectedCircles() {\n        if (selectedCirclesContainerRef.current) {\n            select(selectedCirclesContainerRef.current).data([]).exit().remove();\n        }\n    }\n\n    function updateSelectedCircles(el: SVGGElement | null) {\n        if (el !== selectedCirclesContainerRef.current && el) {\n            clearSelectedCircles();\n            selectedCirclesContainerRef.current = el;\n            onPolygonSelect(selectedPolygon);\n        }\n    }\n\n    const onPolygonSelect = useCallback(function (idx: number | null) {\n        if (lassoMode === 'selection') {\n            return;\n        }\n        if (idx !== null) {\n            const d = drag<SVGCircleElement, CircleData, SVGGElement | null>()\n                .on('drag', function (e) {\n                    const el = select<SVGCircleElement, CircleData>(this);\n                    const d = el.data()[0] as number[] & CircleData;\n                    d[0] = e.x;\n                    d[1] = e.y;\n                    d.p = [scales.x.invert(d[0]), scales.y.invert(d[1])];\n                    el.attr('cx', d[0]).attr('cy', d[1]);\n                    const editedPolygons = closedPolygonsRef.current.map((polygon, polygonIdx) => {\n                        return idx !== polygonIdx ? polygon : {\n                            ...polygon,\n                            points: polygon.points.map((el, pointIdx) =>\n                                pointIdx === d.idx ? ([scales.x.invert(d[0]), scales.y.invert(d[1])] as Point) : el\n                            ),\n                        };\n                    });\n                    updatePolygons(editedPolygons, false);\n                })\n                .on('end', function () {\n                    saveCurrentStateToHistory();\n                    onPolygonsApply(closedPolygonsRef.current);\n                });\n            const draggablePointsData = closedPolygonsRef.current[idx].points.map((p, idx) => ({idx, p}));\n            const selectedCircles = select(selectedCirclesContainerRef.current)\n                .selectAll<SVGCircleElement, CircleData>('circle')\n                .data(draggablePointsData, (d) => d.idx)\n                .join('circle');\n            selectedCirclesSelectionRef.current = selectedCircles;\n\n            selectedCircles\n                .attr('cx', d => scales.x(d.p[0]))\n                .attr('cy', d => scales.y(d.p[1]))\n                .attr('r', R)\n                .attr('fill', 'white')\n                .attr('stroke', SELECTION_COLOR);\n            selectedCircles.call(d);\n        }\n    }, []);\n\n    useEffect(() => {\n        onLassoControlsStateUpdate({\n            mode: lassoMode,\n            backEnabled: historyIndex > 0,\n            forwardEnabled: historyIndex < history.length - 1,\n            deleteEnabled: selectedPolygon !== null || closedPolygons.length > 0 || newPolygonPoints.length > 0,\n        });\n    }, [lassoMode, selectedPolygon, closedPolygons, newPolygonPoints, historyIndex, history]);\n\n    return (\n        <>\n            <g>\n                <defs>\n                    <pattern\n                        id=\"diagonalStripes\"\n                        width=\"5\"\n                        height=\"5\"\n                        patternTransform=\"rotate(45 0 0)\"\n                        patternUnits=\"userSpaceOnUse\"\n                    >\n                        <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"10\" stroke={SELECTION_COLOR} strokeWidth=\"1\" />\n                    </pattern>\n                </defs>\n                <rect\n                    fill=\"transparent\"\n                    width={chartSizes.chartWidth}\n                    height={chartSizes.chartHeight}\n                    onMouseMove={onMouseMove}\n                    onClick={onNewPointAddByClick}\n                />\n                {closedPolygons.map((p, idx) => {\n                    const isHovered = idx === hoveredPolygon;\n                    const isSelected = idx === selectedPolygon;\n                    const points = p.points.map(p => [scales.x(p[0]), scales.y(p[1])]);\n                    const pathD =\n                        points\n                            .map((p, idx) => {\n                                return (idx === 0 ? 'M' : 'L') + p[0] + ',' + p[1];\n                            })\n                            .join('') + 'z';\n                    return (\n                        <g key={idx}>\n                            <path\n                                d={pathD}\n                                fill={isHovered && !isSelected ? 'url(#diagonalStripes)' : 'transparent'}\n                                stroke={isSelected || isHovered ? SELECTION_COLOR : BLACK}\n                                onMouseOver={() => setHoveredPolygon(idx)}\n                                onMouseLeave={() => setHoveredPolygon(null)}\n                                onClick={() => updateSelectedPolygon(idx)}\n                                style={{pointerEvents: lassoMode === 'selection' || isSelected ? 'none' : 'auto'}}\n                            />\n                            {isSelected && <g ref={el => updateSelectedCircles(el)} />}\n                        </g>\n                    );\n                })}\n                <polyline\n                    points={newPolygonPoints.map((p) => `${scales.x(p[0])},${scales.y(p[1])}`).join(' ')}\n                    stroke={BLACK}\n                    fill=\"none\"\n                    style={{pointerEvents: 'none'}}\n                />\n                {newPolygonPoints.length > 1 && movingPoint && (\n                    <g style={{pointerEvents: 'none'}}>\n                        <circle\n                            cx={scales.x(newPolygonPoints[0][0])}\n                            cy={scales.y(newPolygonPoints[0][1])}\n                            r={R_START}\n                            fill=\"none\"\n                            stroke={START_GREY}\n                            strokeDasharray=\"3 3\"\n                        />\n                        <line\n                            x1={movingPoint[0]}\n                            y1={movingPoint[1]}\n                            x2={scales.x(newPolygonPoints[0][0])}\n                            y2={scales.y(newPolygonPoints[0][1])}\n                            stroke={START_GREY}\n                            strokeDasharray=\"3 3\"\n                        />\n                    </g>\n                )}\n                {newPolygonPoints.length > 0 && movingPoint && (\n                    <g style={{pointerEvents: 'none'}}>\n                        <line\n                            x1={scales.x(newPolygonPoints[newPolygonPoints.length - 1][0])}\n                            y1={scales.y(newPolygonPoints[newPolygonPoints.length - 1][1])}\n                            x2={movingPoint[0]}\n                            y2={movingPoint[1]}\n                            stroke={SELECTION_COLOR}\n                        />\n                        {newPolygonPoints.map((p, idx) => (\n                            <circle\n                                key={idx}\n                                cx={scales.x(p[0])}\n                                cy={scales.y(p[1])}\n                                r={R}\n                                fill=\"white\"\n                                stroke={idx > 0 ? SELECTION_COLOR : BLACK}\n                            />\n                        ))}\n                        <circle\n                            cx={movingPoint[0]}\n                            cy={movingPoint[1]}\n                            r={R}\n                            fill=\"white\"\n                            stroke={SELECTION_COLOR}\n                        />\n                    </g>\n                )}\n                {closeToStartPoint && movingPoint && (\n                    <circle\n                        cx={movingPoint[0] + 5}\n                        cy={movingPoint[1] - 5}\n                        r={2}\n                        fill=\"none\"\n                        stroke={SELECTION_COLOR}\n                        strokeWidth={0.5}\n                    />\n                )}\n            </g>\n        </>\n    );\n}\n"],"mappings":"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"}