reac-mapper 0.1.1

package/dist/index.js

@@ -0,0 +1,1044 @@
+'use strict';
+
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactKonva = require('react-konva');
+var useImage = require('use-image');
+var lucideReact = require('lucide-react');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var useImage__default = /*#__PURE__*/_interopDefault(useImage);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+// src/components/ImageWithPoints.tsx
+
+// src/utils/imageMetrics.ts
+async function getImageNaturalSize(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+function ImageWithPoints({
+  image,
+  naturalSize,
+  edges = [],
+  pointRadius = 5,
+  pointFill = "#1f6feb",
+  lineWidth = 2,
+  lineStroke = "#111",
+  className,
+  style,
+  title,
+  desc,
+  children,
+  points
+}) {
+  const [size, setSize] = React2__namespace.useState(naturalSize ?? null);
+  React2__namespace.useEffect(() => {
+    let alive = true;
+    (async () => {
+      if (!naturalSize && image.type === "img") {
+        try {
+          const s = await getImageNaturalSize(image.src);
+          if (alive) setSize(s);
+        } catch {
+        }
+      } else if (!naturalSize && image.type === "next") {
+        setSize({ width: image.width, height: image.height });
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [image, naturalSize]);
+  if (!size) return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, aspectRatio: "16/9", background: "#f6f8fa" } });
+  const { width, height } = size;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className,
+      style,
+      viewBox: `0 0 ${width} ${height}`,
+      role: "img",
+      "aria-label": title,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
+        desc && /* @__PURE__ */ jsxRuntime.jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsxRuntime.jsx("image", { href: image.src, x: 0, y: 0, width, height, preserveAspectRatio: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { stroke: lineStroke, strokeWidth: lineWidth, strokeLinecap: "round", children: edges.map((e) => {
+          const a = points.find((p) => p.id === e.from);
+          const b = points.find((p) => p.id === e.to);
+          if (!a || !b) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx("line", { x1: a.x, y1: a.y, x2: b.x, y2: b.y }, e.id);
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { fill: pointFill, children: points.map((p) => /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: p.x, cy: p.y, r: pointRadius }, p.id)) }),
+        children
+      ]
+    }
+  );
+}
+function FloorMapDrawer(props) {
+  const {
+    image,
+    naturalSize,
+    points,
+    edges,
+    defaultPoints = [],
+    defaultEdges = [],
+    onChange,
+    onModeChange,
+    pointRadius = 5,
+    activePointRadius = 6.5,
+    pointFill = "#1f6feb",
+    activePointFill = "#ff7b72",
+    lineWidth = 2,
+    lineStroke = "#111",
+    connectSequential = true,
+    panEnabled = true,
+    zoomEnabled = true,
+    minZoom = 0.3,
+    maxZoom = 6,
+    zoomStep = 1.12,
+    zoomOnCtrlWheel = false,
+    showToolbar = true,
+    initialMode = "pan",
+    className,
+    style,
+    svgClassName,
+    title,
+    desc
+  } = props;
+  const wrapperRef = React2__namespace.useRef(null);
+  const svgRef = React2__namespace.useRef(null);
+  const [size, setSize] = React2__namespace.useState(naturalSize ?? null);
+  const isControlled = points !== void 0 || edges !== void 0;
+  const [localPoints, setLocalPoints] = React2__namespace.useState(defaultPoints);
+  const [localEdges, setLocalEdges] = React2__namespace.useState(defaultEdges);
+  const pts = points ?? localPoints;
+  const eds = edges ?? localEdges;
+  const [scale, setScale] = React2__namespace.useState(1);
+  const [tx, setTx] = React2__namespace.useState(0);
+  const [ty, setTy] = React2__namespace.useState(0);
+  const [mode, setMode] = React2__namespace.useState(initialMode);
+  const [hoverId, setHoverId] = React2__namespace.useState(null);
+  const [drag, setDrag] = React2__namespace.useState(null);
+  const spacePanningRef = React2__namespace.useRef(false);
+  const [undoStack, setUndoStack] = React2__namespace.useState([]);
+  const [redoStack, setRedoStack] = React2__namespace.useState([]);
+  React2__namespace.useEffect(() => {
+    let alive = true;
+    (async () => {
+      if (!naturalSize && image.type === "img") {
+        try {
+          const s = await getImageNaturalSize(image.src);
+          if (alive) setSize(s);
+        } catch {
+        }
+      } else if (!naturalSize && image.type === "next") {
+        setSize({ width: image.width, height: image.height });
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [image, naturalSize]);
+  const clamp = React2__namespace.useCallback((n, a, b) => Math.max(a, Math.min(b, n)), []);
+  const cryptoRandomId = React2__namespace.useCallback(
+    () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2),
+    []
+  );
+  const screenToImage = React2__namespace.useCallback((clientX, clientY) => {
+    const svg = svgRef.current;
+    if (!svg || !size) return null;
+    const rect = svg.getBoundingClientRect();
+    const cx = clientX - rect.left;
+    const cy = clientY - rect.top;
+    const x = (cx - tx) / scale;
+    const y = (cy - ty) / scale;
+    return { x, y };
+  }, [size, tx, ty, scale]);
+  const pushHistory = React2__namespace.useCallback((entry) => {
+    if (isControlled) return;
+    setUndoStack((s) => [...s, entry]);
+    setRedoStack([]);
+  }, [isControlled]);
+  const undo = React2__namespace.useCallback(() => {
+    if (isControlled) return;
+    setUndoStack((s) => {
+      if (s.length === 0) return s;
+      const prev = s[s.length - 1];
+      setRedoStack((r) => [{
+        points: localPoints,
+        edges: localEdges
+      }, ...r]);
+      setLocalPoints(prev.points);
+      setLocalEdges(prev.edges);
+      onChange?.({ points: prev.points, edges: prev.edges });
+      return s.slice(0, -1);
+    });
+  }, [isControlled, localPoints, localEdges, onChange]);
+  const redo = React2__namespace.useCallback(() => {
+    if (isControlled) return;
+    setRedoStack((r) => {
+      if (r.length === 0) return r;
+      const next = r[0];
+      setUndoStack((s) => [...s, {
+        points: localPoints,
+        edges: localEdges
+      }]);
+      setLocalPoints(next.points);
+      setLocalEdges(next.edges);
+      onChange?.({ points: next.points, edges: next.edges });
+      return r.slice(1);
+    });
+  }, [isControlled, localPoints, localEdges, onChange]);
+  const setAndEmitMode = React2__namespace.useCallback((m) => {
+    setMode(m);
+    onModeChange?.(m);
+  }, [onModeChange]);
+  const update = React2__namespace.useCallback((next) => {
+    const newPoints = next.points ?? pts;
+    const newEdges = next.edges ?? eds;
+    if (!isControlled) {
+      pushHistory({ points: pts, edges: eds });
+      if (next.points) setLocalPoints(newPoints);
+      if (next.edges) setLocalEdges(newEdges);
+    }
+    onChange?.({ points: newPoints, edges: newEdges });
+  }, [isControlled, pts, eds, onChange, pushHistory]);
+  const removePoint = React2__namespace.useCallback((id) => {
+    update({
+      points: pts.filter((p) => p.id !== id),
+      edges: eds.filter((e) => e.from !== id && e.to !== id)
+    });
+  }, [pts, eds, update]);
+  const addPointAt = React2__namespace.useCallback((clientX, clientY) => {
+    const img = screenToImage(clientX, clientY);
+    if (!img || !size) return;
+    const x = clamp(img.x, 0, size.width);
+    const y = clamp(img.y, 0, size.height);
+    const id = cryptoRandomId();
+    const newPoint = { id, x, y };
+    const newPoints = [...pts, newPoint];
+    let newEdges = eds;
+    if (connectSequential && pts.length > 0) {
+      const last = pts[pts.length - 1];
+      const edgeExists = eds.some(
+        (e) => e.from === last.id && e.to === id || e.from === id && e.to === last.id
+      );
+      if (!edgeExists) {
+        newEdges = [...eds, { id: cryptoRandomId(), from: last.id, to: id }];
+      }
+    }
+    update({ points: newPoints, edges: newEdges });
+  }, [screenToImage, size, clamp, cryptoRandomId, pts, eds, connectSequential, update]);
+  const resetZoom = React2__namespace.useCallback(() => {
+    setScale(1);
+    setTx(0);
+    setTy(0);
+  }, []);
+  const fitToContainer = React2__namespace.useCallback(() => {
+    if (!wrapperRef.current || !size) return;
+    const rect = wrapperRef.current.getBoundingClientRect();
+    const pad = 16;
+    const availW = Math.max(1, rect.width - pad * 2);
+    const availH = Math.max(1, rect.height - pad * 2);
+    const s = Math.min(availW / size.width, availH / size.height);
+    setScale(s);
+    setTx((rect.width - size.width * s) / 2);
+    setTy((rect.height - size.height * s) / 2);
+  }, [size]);
+  React2__namespace.useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.code === "Space") spacePanningRef.current = true;
+      if (e.target && e.target.tagName === "INPUT") return;
+      if (e.metaKey || e.ctrlKey) {
+        if (e.key.toLowerCase() === "z" && !e.shiftKey) {
+          e.preventDefault();
+          undo();
+        }
+        if (e.key.toLowerCase() === "z" && e.shiftKey || e.key.toLowerCase() === "y") {
+          e.preventDefault();
+          redo();
+        }
+      }
+      if (e.key.toLowerCase() === "f") {
+        e.preventDefault();
+        fitToContainer();
+      }
+      if (e.key === "1") {
+        e.preventDefault();
+        resetZoom();
+      }
+      if (e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        setAndEmitMode("add");
+      }
+      if (e.key.toLowerCase() === "m") {
+        e.preventDefault();
+        setAndEmitMode("move");
+      }
+      if (e.key.toLowerCase() === "e") {
+        e.preventDefault();
+        setAndEmitMode("erase");
+      }
+    };
+    const onKeyUp = (e) => {
+      if (e.code === "Space") spacePanningRef.current = false;
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+    };
+  }, [undo, redo, fitToContainer, resetZoom, setAndEmitMode]);
+  const onSvgClick = (e) => {
+    if (!size) return;
+    if (mode === "add") addPointAt(e.clientX, e.clientY);
+  };
+  const wantPan = React2__namespace.useCallback(
+    () => panEnabled && (mode === "pan" || spacePanningRef.current),
+    [panEnabled, mode]
+  );
+  const onBackgroundPointerDown = (e) => {
+    if (!wantPan()) return;
+    e.target.setPointerCapture(e.pointerId);
+    setDrag({ kind: "panning", lastX: e.clientX, lastY: e.clientY });
+  };
+  const onPointPointerDown = React2__namespace.useCallback((p) => (e) => {
+    if (mode === "erase") {
+      e.stopPropagation();
+      removePoint(p.id);
+      return;
+    }
+    if (mode !== "move") return;
+    e.target.setPointerCapture(e.pointerId);
+    setDrag({ kind: "point", id: p.id });
+  }, [mode, removePoint]);
+  const onPointerMove = (e) => {
+    if (!drag) return;
+    if (drag.kind === "point") {
+      const img = screenToImage(e.clientX, e.clientY);
+      if (!img || !size) return;
+      const { x, y } = img;
+      update({
+        points: pts.map(
+          (pp) => pp.id === drag.id ? { ...pp, x: clamp(x, 0, size.width), y: clamp(y, 0, size.height) } : pp
+        )
+      });
+    } else if (drag.kind === "panning") {
+      const dx = e.clientX - drag.lastX;
+      const dy = e.clientY - drag.lastY;
+      setTx((t) => t + dx);
+      setTy((t) => t + dy);
+      setDrag({ kind: "panning", lastX: e.clientX, lastY: e.clientY });
+    }
+  };
+  const onPointerUp = (e) => {
+    if (drag) {
+      e.target.releasePointerCapture?.(e.pointerId);
+    }
+    setDrag(null);
+  };
+  const onWheel = (e) => {
+    if (!zoomEnabled) return;
+    if (zoomOnCtrlWheel && !e.ctrlKey) return;
+    e.preventDefault();
+    const direction = e.deltaY < 0 ? 1 : -1;
+    const factor = direction > 0 ? zoomStep : 1 / zoomStep;
+    const newScale = clamp(scale * factor, minZoom, maxZoom);
+    const svg = svgRef.current;
+    const rect = svg.getBoundingClientRect();
+    const cx = e.clientX - rect.left;
+    const cy = e.clientY - rect.top;
+    const imgX = (cx - tx) / scale;
+    const imgY = (cy - ty) / scale;
+    setScale(newScale);
+    setTx(cx - imgX * newScale);
+    setTy(cy - imgY * newScale);
+  };
+  React2__namespace.useEffect(() => {
+    if (!size || !wrapperRef.current) return;
+    const id = requestAnimationFrame(() => fitToContainer());
+    return () => cancelAnimationFrame(id);
+  }, [size?.width, size?.height, fitToContainer]);
+  if (!size) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, className, style: { position: "relative", ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "16/9", background: "#f6f8fa", width: "100%" } }) });
+  }
+  const { width, height } = size;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className, style: { position: "relative", ...style }, children: [
+    showToolbar && /* @__PURE__ */ jsxRuntime.jsx(
+      Toolbar,
+      {
+        mode,
+        onModeChange: setAndEmitMode,
+        onFit: fitToContainer,
+        onReset: resetZoom,
+        onUndo: undo,
+        onRedo: redo,
+        canUndo: !isControlled && undoStack.length > 0,
+        canRedo: !isControlled && redoStack.length > 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        className: svgClassName,
+        style: { touchAction: "none", display: "block", width: "100%", height: "auto" },
+        viewBox: `0 0 ${width} ${height}`,
+        onClick: onSvgClick,
+        onPointerMove,
+        onPointerUp,
+        onWheel,
+        xmlns: "http://www.w3.org/2000/svg",
+        role: "img",
+        "aria-label": title,
+        children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
+          desc && /* @__PURE__ */ jsxRuntime.jsx("desc", { children: desc }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: 0,
+              y: 0,
+              width,
+              height,
+              fill: "transparent",
+              onPointerDown: onBackgroundPointerDown,
+              style: { cursor: wantPan() ? "grab" : mode === "add" ? "crosshair" : "default" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `matrix(${scale},0,0,${scale},${tx},${ty})`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("image", { href: image.src, x: 0, y: 0, width, height, preserveAspectRatio: "none" }),
+            /* @__PURE__ */ jsxRuntime.jsx("g", { stroke: lineStroke, strokeWidth: lineWidth, strokeLinecap: "round", children: eds.map((e) => {
+              const a = pts.find((p) => p.id === e.from);
+              const b = pts.find((p) => p.id === e.to);
+              if (!a || !b) return null;
+              return /* @__PURE__ */ jsxRuntime.jsx("line", { x1: a.x, y1: a.y, x2: b.x, y2: b.y }, e.id);
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("g", { children: pts.map((p) => {
+              const active = hoverId === p.id;
+              const showDelete = mode === "erase" && active;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "g",
+                {
+                  onPointerDown: onPointPointerDown(p),
+                  onMouseEnter: () => setHoverId(p.id),
+                  onMouseLeave: () => setHoverId((curr) => curr === p.id ? null : curr),
+                  style: { cursor: mode === "move" ? "grab" : mode === "erase" ? "pointer" : "default" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: p.x,
+                        cy: p.y,
+                        r: active ? activePointRadius : pointRadius,
+                        fill: active ? activePointFill : pointFill
+                      }
+                    ),
+                    showDelete && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "g",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          removePoint(p.id);
+                        },
+                        style: { cursor: "pointer" },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "rect",
+                            {
+                              x: p.x + 8,
+                              y: p.y - 16,
+                              width: 18,
+                              height: 18,
+                              rx: 3,
+                              fill: "#fff",
+                              stroke: "#d0d7de"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "text",
+                            {
+                              x: p.x + 17,
+                              y: p.y - 3,
+                              textAnchor: "middle",
+                              fontFamily: "system-ui",
+                              fontSize: 12,
+                              fill: "#cf222e",
+                              children: "\xD7"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                },
+                p.id
+              );
+            }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Toolbar(props) {
+  const Btn = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...rest,
+      style: {
+        padding: "6px 10px",
+        borderRadius: 8,
+        border: "1px solid #d0d7de",
+        background: rest.disabled ? "#f6f8fa" : "#fff",
+        cursor: rest.disabled ? "not-allowed" : "pointer",
+        font: "600 12px system-ui",
+        opacity: rest.disabled ? 0.5 : 1,
+        ...rest.style
+      },
+      children
+    }
+  );
+  const Tab = ({ active, onClick, children }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        padding: "6px 10px",
+        borderRadius: 8,
+        border: active ? "2px solid #1f6feb" : "1px solid #d0d7de",
+        background: active ? "#eff6ff" : "#fff",
+        font: "600 12px system-ui",
+        cursor: "pointer"
+      },
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 8,
+        left: 8,
+        display: "flex",
+        gap: 8,
+        alignItems: "center",
+        background: "rgba(255,255,255,0.9)",
+        padding: 8,
+        border: "1px solid #d0d7de",
+        borderRadius: 12,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+        zIndex: 10
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { active: props.mode === "pan", onClick: () => props.onModeChange("pan"), children: "Pan" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { active: props.mode === "add", onClick: () => props.onModeChange("add"), children: "Add" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { active: props.mode === "move", onClick: () => props.onModeChange("move"), children: "Move" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { active: props.mode === "erase", onClick: () => props.onModeChange("erase"), children: "Erase" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 22, background: "#d0d7de", margin: "0 6px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: props.onFit, title: "Fit (F)", children: "Fit" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: props.onReset, title: "1:1 (1)", children: "1:1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 22, background: "#d0d7de", margin: "0 6px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: props.onUndo, disabled: !props.canUndo, title: "Undo (Ctrl/Cmd+Z)", children: "Undo" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: props.onRedo, disabled: !props.canRedo, title: "Redo (Shift+Ctrl/Cmd+Z)", children: "Redo" })
+      ]
+    }
+  );
+}
+
+// src/utils/closest-segment-point.ts
+var getClosestPointOnSegment = (px, py, x1, y1, x2, y2) => {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const lengthSquared = dx * dx + dy * dy;
+  if (lengthSquared === 0) return { x: x1, y: y1, t: 0 };
+  let t = ((px - x1) * dx + (py - y1) * dy) / lengthSquared;
+  t = Math.max(0, Math.min(1, t));
+  return {
+    x: x1 + t * dx,
+    y: y1 + t * dy,
+    t
+  };
+};
+var usePoints = (initialPoints) => {
+  const [points, setPoints] = React2.useState(
+    () => initialPoints.map((p, i) => ({ id: i + 1, x: p.x, y: p.y }))
+  );
+  return { points, setPoints };
+};
+var useZoom = (stage) => {
+  const MIN_SCALE = 0.5;
+  const MAX_SCALE = 5;
+  const DEFAULT_SCALE = 1;
+  const [stageScale, setStageScale] = React2.useState(DEFAULT_SCALE);
+  return {
+    stageScale,
+    setStageScale,
+    MIN_SCALE,
+    MAX_SCALE
+  };
+};
+var Container = styled__default.default.div`
+  overflow: hidden;
+  width:1200px;
+  height:1200px;
+  display: flex;
+  align-items: stretch;
+  border:1px solid #ccc;
+  border-radius:4px;
+`;
+var NavContainer = styled__default.default.div`
+  width:80px;
+  height:100%;
+  background:red;
+  flex-shrink:0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction:column;
+  gap:20px;
+  padding:20px 0;
+  background:#ebebeb;
+  border-left:1px solid #ccc;
+`;
+var CanvasContainer = styled__default.default.div`
+  width:calc(100% - 80px);
+  height:100%;
+  overflow: hidden;
+`;
+var ButtonBase = styled__default.default.button`
+  padding:2px;
+  background:white;
+  border:none;
+  border-radius:8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size:12px;
+  min-width:50px;
+  min-height:50px;
+  border-left:1px solid #ccc;
+  &:disabled:{
+    opacity:0.5;
+    cursor:not-allowed;
+  }
+`;
+var Button = styled__default.default(ButtonBase)``;
+var Mapper = ({
+  src = "https://konvajs.org/assets/line-building.png",
+  initialPoints = [],
+  maxWidth = 1200
+}) => {
+  const stageRef = React2.useRef(null);
+  const { points, setPoints } = usePoints(initialPoints);
+  const { stageScale, setStageScale, MAX_SCALE, MIN_SCALE } = useZoom(stageRef?.current);
+  const SCALE_BY = 1.2;
+  const [closed, setClosed] = React2.useState(initialPoints.length >= 3);
+  const [hoveringFirst, setHoveringFirst] = React2.useState(false);
+  const [stagePosition, setStagePosition] = React2.useState({ x: 0, y: 0 });
+  const [dragStart, setDragStart] = React2.useState(null);
+  const [isDraggingPoint, setIsDraggingPoint] = React2.useState(false);
+  const [image] = useImage__default.default(src, "anonymous");
+  const imgW = image?.width || 1;
+  const imgH = image?.height || 1;
+  const scale = maxWidth / imgW;
+  const stageSize = { width: maxWidth, height: imgH * scale };
+  const DRAG_THRESHOLD = 5;
+  const LINE_HIT_THRESHOLD = 10;
+  const handleZoomIn = () => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const oldScale = stageScale;
+    const newScale = Math.min(oldScale * SCALE_BY, MAX_SCALE);
+    if (newScale === oldScale) return;
+    const centerX = stage.width() / 2;
+    const centerY = stage.height() / 2;
+    const pointTo = {
+      x: (centerX - stagePosition.x) / oldScale,
+      y: (centerY - stagePosition.y) / oldScale
+    };
+    const newPos = {
+      x: centerX - pointTo.x * newScale,
+      y: centerY - pointTo.y * newScale
+    };
+    const constrainedPos = getConstrainedPosition(newPos, newScale);
+    setStageScale(newScale);
+    setStagePosition(constrainedPos);
+  };
+  const handleZoomOut = () => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const oldScale = stageScale;
+    const newScale = Math.max(oldScale / SCALE_BY, MIN_SCALE);
+    if (newScale === oldScale) return;
+    const centerX = stage.width() / 2;
+    const centerY = stage.height() / 2;
+    const pointTo = {
+      x: (centerX - stagePosition.x) / oldScale,
+      y: (centerY - stagePosition.y) / oldScale
+    };
+    const newPos = {
+      x: centerX - pointTo.x * newScale,
+      y: centerY - pointTo.y * newScale
+    };
+    const constrainedPos = getConstrainedPosition(newPos, newScale);
+    setStageScale(newScale);
+    setStagePosition(constrainedPos);
+  };
+  const handleResetZoom = () => {
+    const newScale = 1;
+    const constrainedPos = getConstrainedPosition({ x: 0, y: 0 }, newScale);
+    setStageScale(newScale);
+    setStagePosition(constrainedPos);
+  };
+  const handleWheel = (e) => {
+    e.evt.preventDefault();
+    const stage = stageRef.current;
+    if (!stage) return;
+    const oldScale = stageScale;
+    const pointer = stage.getPointerPosition();
+    if (!pointer) return;
+    const mousePointTo = {
+      x: (pointer.x - stagePosition.x) / oldScale,
+      y: (pointer.y - stagePosition.y) / oldScale
+    };
+    const direction = e.evt.deltaY > 0 ? -1 : 1;
+    const newScale = direction > 0 ? Math.min(oldScale * SCALE_BY, MAX_SCALE) : Math.max(oldScale / SCALE_BY, MIN_SCALE);
+    if (newScale === oldScale) return;
+    const newPos = {
+      x: pointer.x - mousePointTo.x * newScale,
+      y: pointer.y - mousePointTo.y * newScale
+    };
+    const constrainedPos = getConstrainedPosition(newPos, newScale);
+    setStageScale(newScale);
+    setStagePosition(constrainedPos);
+  };
+  const getConstrainedPosition = (pos, currentScale) => {
+    const stage = stageRef.current;
+    if (!stage) return pos;
+    const stageWidth = stage.width();
+    const stageHeight = stage.height();
+    const imageWidth = stageSize.width * currentScale;
+    const imageHeight = stageSize.height * currentScale;
+    let newX = pos.x;
+    let newY = pos.y;
+    if (imageWidth > stageWidth) {
+      if (newX > 0) newX = 0;
+      if (newX < stageWidth - imageWidth) newX = stageWidth - imageWidth;
+    } else {
+      newX = (stageWidth - imageWidth) / 2;
+    }
+    if (imageHeight > stageHeight) {
+      if (newY > 0) newY = 0;
+      if (newY < stageHeight - imageHeight) newY = stageHeight - imageHeight;
+    } else {
+      newY = (stageHeight - imageHeight) / 2;
+    }
+    return { x: newX, y: newY };
+  };
+  const findLineSegmentNearClick = (clickX, clickY) => {
+    if (points.length < 2) return null;
+    const threshold = LINE_HIT_THRESHOLD / (scale * stageScale);
+    const segments = [];
+    for (let i = 0; i < points.length - 1; i++) {
+      segments.push({ start: i, end: i + 1 });
+    }
+    if (closed) {
+      segments.push({ start: points.length - 1, end: 0 });
+    }
+    for (const segment of segments) {
+      const p1 = points[segment.start];
+      const p2 = points[segment.end];
+      const closest = getClosestPointOnSegment(clickX, clickY, p1.x, p1.y, p2.x, p2.y);
+      const distance = Math.hypot(closest.x - clickX, closest.y - clickY);
+      if (distance < threshold) {
+        return {
+          segmentIndex: segment.start,
+          insertPosition: closest.t,
+          point: { x: closest.x, y: closest.y }
+        };
+      }
+    }
+    return null;
+  };
+  React2.useEffect(() => {
+    if (image) {
+      const initialPos = getConstrainedPosition({ x: 0, y: 0 }, 1);
+      setStagePosition(initialPos);
+    }
+  }, [image]);
+  React2.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === "=" || e.key === "+") {
+          e.preventDefault();
+          handleZoomIn();
+        } else if (e.key === "-") {
+          e.preventDefault();
+          handleZoomOut();
+        } else if (e.key === "0") {
+          e.preventDefault();
+          handleResetZoom();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [stageScale, stagePosition]);
+  const handleStageDragStart = (e) => {
+    const clickedShape = e.target;
+    if (clickedShape && clickedShape.name() === "point") {
+      e.target.stopDrag();
+      return;
+    }
+    const stage = e.target.getStage();
+    if (!stage) return;
+    const pos = stage.getPointerPosition();
+    if (pos) {
+      setDragStart(pos);
+    }
+  };
+  const handleStageDragEnd = (e) => {
+    const newPos = {
+      x: e.target.x(),
+      y: e.target.y()
+    };
+    const constrainedPos = getConstrainedPosition(newPos, stageScale);
+    setStagePosition(constrainedPos);
+    setDragStart(null);
+  };
+  const toImageCoords = (stage) => {
+    if (!stage) return { x: 0, y: 0 };
+    const pos = stage.getPointerPosition();
+    if (!pos) return { x: 0, y: 0 };
+    const x = (pos.x - stagePosition.x) / (scale * stageScale);
+    const y = (pos.y - stagePosition.y) / (scale * stageScale);
+    return { x, y };
+  };
+  const linePointsScaled = React2.useMemo(() => {
+    const flat = points.flatMap((p) => [p.x * scale, p.y * scale]);
+    return flat;
+  }, [points, scale]);
+  const commit = (nextPoints) => {
+    setPoints(nextPoints);
+  };
+  const handlePointDragStart = (e) => {
+    e.cancelBubble = true;
+    setIsDraggingPoint(true);
+  };
+  const handlePointDragMove = (id, e) => {
+    const newX = e.target.x() / scale;
+    const newY = e.target.y() / scale;
+    const updatedPoints = points.map(
+      (p) => p.id === id ? { ...p, x: newX, y: newY } : p
+    );
+    setPoints(updatedPoints);
+  };
+  const handlePointDragEnd = (e) => {
+    e.cancelBubble = true;
+    setIsDraggingPoint(false);
+  };
+  const handleStageMouseDown = (e) => {
+    if (!image) return;
+    const clickedShape = e.target;
+    if (clickedShape && clickedShape.name() === "point") {
+      if (!closed) {
+        const clickedIndex = points.findIndex(
+          (p) => Math.abs(p.x * scale - clickedShape.x()) < 1 && Math.abs(p.y * scale - clickedShape.y()) < 1
+        );
+        if (clickedIndex === 0 && points.length >= 3) {
+          setClosed(true);
+          setHoveringFirst(false);
+        }
+      }
+      return;
+    }
+    const stage = e.target.getStage();
+    if (!stage) return;
+    const pos = stage.getPointerPosition();
+    if (pos) {
+      setDragStart(pos);
+    }
+  };
+  const handleStageMouseUp = (e) => {
+    if (!image || isDraggingPoint) return;
+    const clickedShape = e.target;
+    if (clickedShape && clickedShape.name() === "point") {
+      return;
+    }
+    if (dragStart) {
+      const stage = e.target.getStage();
+      if (!stage) return;
+      const currentPos = stage.getPointerPosition();
+      if (currentPos) {
+        const dx = currentPos.x - dragStart.x;
+        const dy = currentPos.y - dragStart.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance < DRAG_THRESHOLD) {
+          const p = toImageCoords(stage);
+          const lineHit = findLineSegmentNearClick(p.x, p.y);
+          if (lineHit) {
+            const newPoint = {
+              id: Date.now(),
+              x: lineHit.point.x,
+              y: lineHit.point.y
+            };
+            const newPoints = [...points];
+            newPoints.splice(lineHit.segmentIndex + 1, 0, newPoint);
+            commit(newPoints);
+          } else if (!closed) {
+            const next = [...points, { id: Date.now(), x: p.x, y: p.y }];
+            commit(next);
+          }
+        }
+      }
+      setDragStart(null);
+    }
+  };
+  const handleMouseMove = (e) => {
+    if (closed || points.length < 3) {
+      setHoveringFirst(false);
+      return;
+    }
+    const stage = e.target.getStage();
+    const p = toImageCoords(stage);
+    const fp = points[0];
+    const dx = (p.x - fp.x) * scale * stageScale;
+    const dy = (p.y - fp.y) * scale * stageScale;
+    const dist = Math.hypot(dx, dy);
+    setHoveringFirst(dist < 15);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CanvasContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactKonva.Stage,
+      {
+        ref: stageRef,
+        width: 1200,
+        height: 1200,
+        onMouseDown: handleStageMouseDown,
+        onMouseUp: handleStageMouseUp,
+        onMouseMove: handleMouseMove,
+        onWheel: handleWheel,
+        scaleX: stageScale,
+        scaleY: stageScale,
+        x: stagePosition.x,
+        y: stagePosition.y,
+        draggable: !isDraggingPoint,
+        onDragStart: handleStageDragStart,
+        onDragEnd: handleStageDragEnd,
+        dragBoundFunc: (pos) => getConstrainedPosition(pos, stageScale),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactKonva.Layer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactKonva.Image,
+            {
+              image,
+              width: stageSize.width,
+              height: stageSize.height,
+              listening: false
+            }
+          ),
+          points.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx(
+            reactKonva.Line,
+            {
+              points: linePointsScaled,
+              closed,
+              stroke: "#2563eb",
+              strokeWidth: 2 / stageScale,
+              lineCap: "round",
+              lineJoin: "round",
+              tension: 0,
+              fill: closed ? "rgba(37, 99, 235, 0.3)" : void 0,
+              hitStrokeWidth: LINE_HIT_THRESHOLD / stageScale
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactKonva.Group, { children: points.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            reactKonva.Circle,
+            {
+              name: "point",
+              x: p.x * scale,
+              y: p.y * scale,
+              radius: (i === 0 && hoveringFirst ? 10 : 6) / stageScale,
+              fill: i === 0 ? "#ef4444" : "#7e9de1",
+              stroke: i === 0 && hoveringFirst ? "#fbbf24" : void 0,
+              strokeWidth: i === 0 && hoveringFirst ? 2 / stageScale : 0,
+              draggable: true,
+              onDragStart: handlePointDragStart,
+              onDragMove: (e) => handlePointDragMove(p.id, e),
+              onDragEnd: handlePointDragEnd
+            },
+            p.id
+          )) })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(NavContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          onClick: handleZoomIn,
+          disabled: stageScale >= MAX_SCALE,
+          title: "Zoom In (Ctrl/Cmd + +)",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { style: { width: "20px", height: "20px" } })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          onClick: handleZoomOut,
+          disabled: stageScale <= MIN_SCALE,
+          title: "Zoom Out (Ctrl/Cmd + -)",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { style: { width: "20px", height: "20px" } })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          onClick: handleResetZoom,
+          title: "Reset Zoom (Ctrl/Cmd + 0)",
+          children: [
+            Math.round(stageScale * 100),
+            "%"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+exports.FloorMapDrawer = FloorMapDrawer;
+exports.ImageWithPoints = ImageWithPoints;
+exports.Mapper = Mapper;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map