react-floor-mapper 0.1.6 → 0.1.8

package/dist/lite.js

@@ -0,0 +1,473 @@
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { Stage, Layer, Image, Line, Group, Circle } from 'react-konva';
+import useImage from 'use-image';
+import { ZoomIn, ZoomOut } from 'lucide-react';
+import styled from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/MapperEditor/Mapper.tsx
+
+// 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] = 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] = useState(DEFAULT_SCALE);
+  return {
+    stageScale,
+    setStageScale,
+    MIN_SCALE,
+    MAX_SCALE
+  };
+};
+var Container = styled.div`
+  overflow: hidden;
+  width:1200px;
+  height:1200px;
+  display: flex;
+  align-items: stretch;
+  border:1px solid #ccc;
+  border-radius:4px;
+`;
+var NavContainer = styled.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.div`
+  width:calc(100% - 80px);
+  height:100%;
+  overflow: hidden;
+`;
+var ButtonBase = styled.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(ButtonBase)``;
+var Mapper = ({
+  src = "https://konvajs.org/assets/line-building.png",
+  initialPoints = [],
+  maxWidth = 1200
+}) => {
+  const stageRef = useRef(null);
+  const { points, setPoints } = usePoints(initialPoints);
+  const { stageScale, setStageScale, MAX_SCALE, MIN_SCALE } = useZoom(stageRef == null ? void 0 : stageRef.current);
+  const SCALE_BY = 1.2;
+  const [closed, setClosed] = useState(initialPoints.length >= 3);
+  const [hoveringFirst, setHoveringFirst] = useState(false);
+  const [stagePosition, setStagePosition] = useState({ x: 0, y: 0 });
+  const [dragStart, setDragStart] = useState(null);
+  const [isDraggingPoint, setIsDraggingPoint] = useState(false);
+  const [image] = useImage(src, "anonymous");
+  const imgW = (image == null ? void 0 : image.width) || 1;
+  const imgH = (image == null ? void 0 : 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;
+  };
+  useEffect(() => {
+    if (image) {
+      const initialPos = getConstrainedPosition({ x: 0, y: 0 }, 1);
+      setStagePosition(initialPos);
+    }
+  }, [image]);
+  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 = 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__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(CanvasContainer, { children: /* @__PURE__ */ jsx(
+      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__ */ jsxs(Layer, { children: [
+          /* @__PURE__ */ jsx(
+            Image,
+            {
+              image,
+              width: stageSize.width,
+              height: stageSize.height,
+              listening: false
+            }
+          ),
+          points.length >= 2 && /* @__PURE__ */ jsx(
+            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__ */ jsx(Group, { children: points.map((p, i) => /* @__PURE__ */ jsx(
+            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__ */ jsxs(NavContainer, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleZoomIn,
+          disabled: stageScale >= MAX_SCALE,
+          title: "Zoom In (Ctrl/Cmd + +)",
+          children: /* @__PURE__ */ jsx(ZoomIn, { style: { width: "20px", height: "20px" } })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleZoomOut,
+          disabled: stageScale <= MIN_SCALE,
+          title: "Zoom Out (Ctrl/Cmd + -)",
+          children: /* @__PURE__ */ jsx(ZoomOut, { style: { width: "20px", height: "20px" } })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: handleResetZoom,
+          title: "Reset Zoom (Ctrl/Cmd + 0)",
+          children: [
+            Math.round(stageScale * 100),
+            "%"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+export { Mapper };
+//# sourceMappingURL=lite.js.map
+//# sourceMappingURL=lite.js.map

package/dist/lite.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/closest-segment-point.ts","../src/components/MapperEditor/hooks/usePoints.ts","../src/components/MapperEditor/hooks/useZoom.ts","../src/components/MapperEditor/Mapper.style.tsx","../src/components/MapperEditor/Mapper.tsx"],"names":["useState","KonvaImage"],"mappings":"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","file":"lite.js","sourcesContent":["export const getClosestPointOnSegment = (\n        px: number, py: number,\n        x1: number, y1: number,\n        x2: number, y2: number\n) => {\n    const dx = x2 - x1;\n    const dy = y2 - y1;\n    const lengthSquared = dx * dx + dy * dy;\n    \n    if (lengthSquared === 0) return { x: x1, y: y1, t: 0 };\n    \n    let t = ((px - x1) * dx + (py - y1) * dy) / lengthSquared;\n    t = Math.max(0, Math.min(1, t));\n    \n    return {\n        x: x1 + t * dx,\n        y: y1 + t * dy,\n        t\n    };\n};","import { useState } from \"react\";\nimport { Point, Points } from \"../../../types/points.type\";\n\nexport const usePoints = (initialPoints: Omit<Point, \"id\">[]) => {\n    const [points, setPoints] = useState<Points>(() =>\n        initialPoints.map((p, i) => ({ id: i + 1, x: p.x, y: p.y }))\n    );\n\n    return { points, setPoints };\n}","import Konva from \"konva\";\nimport { KonvaEventObject } from \"konva/lib/Node\";\nimport { useState } from \"react\";\n\nexport const useZoom = (stage:Konva.Stage | null) => {\n    const MIN_SCALE = 0.5;\n    const MAX_SCALE = 5;\n    const DEFAULT_SCALE = 1;\n    \n    const [stageScale, setStageScale] = useState(DEFAULT_SCALE);\n\n    return{\n        stageScale,\n        setStageScale,\n        MIN_SCALE,\n        MAX_SCALE,\n    }\n}","import styled from \"styled-components\";\n\nexport const Container = styled.div`\n  overflow: hidden;\n  width:1200px;\n  height:1200px;\n  display: flex;\n  align-items: stretch;\n  border:1px solid #ccc;\n  border-radius:4px;\n`;\n\nexport const NavContainer = styled.div`\n  width:80px;\n  height:100%;\n  background:red;\n  flex-shrink:0;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-direction:column;\n  gap:20px;\n  padding:20px 0;\n  background:#ebebeb;\n  border-left:1px solid #ccc;\n`\n\nexport const CanvasContainer = styled.div`\n  width:calc(100% - 80px);\n  height:100%;\n  overflow: hidden;\n`\n\nexport const ButtonBase = styled.button`\n  padding:2px;\n  background:white;\n  border:none;\n  border-radius:8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size:12px;\n  min-width:50px;\n  min-height:50px;\n  border-left:1px solid #ccc;\n  &:disabled:{\n    opacity:0.5;\n    cursor:not-allowed;\n  }\n`\n\nexport const Button = styled(ButtonBase)``;","import { KonvaEventObject } from \"konva/lib/Node\";\nimport React, { useMemo, useState, useRef, useEffect } from \"react\";\nimport { Stage, Layer, Image as KonvaImage, Circle, Line, Group } from \"react-konva\";\nimport useImage from \"use-image\";\nimport Konva from \"konva\";\nimport { ZoomIn, ZoomOut } from \"lucide-react\";\nimport { getClosestPointOnSegment } from \"../../utils/closest-segment-point\";\nimport { usePoints } from \"./hooks/usePoints\";\nimport { Point, Points } from \"../../types/points.type\";\nimport { useZoom } from \"./hooks/useZoom\";\nimport { Button, CanvasContainer, Container, NavContainer } from \"./Mapper.style\";\n\nexport interface MapperProps {\n  src?: string;\n  initialPoints?: Omit<Point, \"id\">[];\n  maxWidth?: number;\n}\n\nexport const Mapper = ({\n  src = \"https://konvajs.org/assets/line-building.png\",\n  initialPoints = [], \n  maxWidth = 1200,\n}: MapperProps) => {\n  const stageRef = useRef<Konva.Stage>(null);\n  const { points, setPoints } = usePoints(initialPoints);\n  const { stageScale, setStageScale, MAX_SCALE, MIN_SCALE } = useZoom(stageRef?.current);\n  const SCALE_BY = 1.2;\n\n  const [closed, setClosed] = useState(initialPoints.length >= 3);\n  \n  const [hoveringFirst, setHoveringFirst] = useState(false);\n  const [stagePosition, setStagePosition] = useState({ x: 0, y: 0 });\n  const [dragStart, setDragStart] = useState<{ x: number; y: number } | null>(null);\n  const [isDraggingPoint, setIsDraggingPoint] = useState(false);\n  \n  \n  const [image] = useImage(src, \"anonymous\");\n  const imgW = image?.width || 1;\n  const imgH = image?.height || 1;\n  const scale = maxWidth / imgW;\n  const stageSize = { width: maxWidth, height: imgH * scale } ;\n\n  \n  const DRAG_THRESHOLD = 5;\n  const LINE_HIT_THRESHOLD = 10;\n\n  const handleZoomIn = () => {\n    const stage = stageRef.current;\n        if (!stage) return;\n\n        const oldScale = stageScale;\n        const newScale = Math.min(oldScale * SCALE_BY, MAX_SCALE);\n\n        if (newScale === oldScale) return;\n\n        const centerX = stage.width() / 2;\n        const centerY = stage.height() / 2;\n\n        const pointTo = {\n            x: (centerX - stagePosition.x) / oldScale,\n            y: (centerY - stagePosition.y) / oldScale,\n        };\n\n        const newPos = {\n            x: centerX - pointTo.x * newScale,\n            y: centerY - pointTo.y * newScale,\n        };\n\n        const constrainedPos = getConstrainedPosition(newPos, newScale);\n        setStageScale(newScale);\n        setStagePosition(constrainedPos);\n    };\n    \n    const handleZoomOut = () => {\n      const stage = stageRef.current;\n        if (!stage) return;\n    \n        const oldScale = stageScale;\n        const newScale = Math.max(oldScale / SCALE_BY, MIN_SCALE);\n    \n        if (newScale === oldScale) return;\n    \n        const centerX = stage.width() / 2;\n        const centerY = stage.height() / 2;\n    \n        const pointTo = {\n          x: (centerX - stagePosition.x) / oldScale,\n          y: (centerY - stagePosition.y) / oldScale,\n        };\n    \n        const newPos = {\n          x: centerX - pointTo.x * newScale,\n          y: centerY - pointTo.y * newScale,\n        };\n    \n        const constrainedPos = getConstrainedPosition(newPos, newScale);\n        setStageScale(newScale);\n        setStagePosition(constrainedPos);\n    };\n    \n    const handleResetZoom = () => {\n        const newScale = 1;\n        const constrainedPos = getConstrainedPosition({ x: 0, y: 0 }, newScale);\n        setStageScale(newScale);\n        setStagePosition(constrainedPos);\n    };\n    \n    const handleWheel = (e: KonvaEventObject<WheelEvent>) => {\n        e.evt.preventDefault();\n    \n        const stage = stageRef.current;\n        if (!stage) return;\n    \n        const oldScale = stageScale;\n        const pointer = stage.getPointerPosition();\n        if (!pointer) return;\n    \n        const mousePointTo = {\n          x: (pointer.x - stagePosition.x) / oldScale,\n          y: (pointer.y - stagePosition.y) / oldScale,\n        };\n    \n        const direction = e.evt.deltaY > 0 ? -1 : 1;\n        const newScale = direction > 0 \n          ? Math.min(oldScale * SCALE_BY, MAX_SCALE)\n          : Math.max(oldScale / SCALE_BY, MIN_SCALE);\n    \n        if (newScale === oldScale) return;\n    \n        const newPos = {\n          x: pointer.x - mousePointTo.x * newScale,\n          y: pointer.y - mousePointTo.y * newScale,\n        };\n    \n        const constrainedPos = getConstrainedPosition(newPos, newScale);\n        setStageScale(newScale);\n        setStagePosition(constrainedPos);\n    };\n\n  // Function to constrain position within bounds\n  const getConstrainedPosition = (pos: { x: number; y: number }, currentScale: number) => {\n    const stage = stageRef.current;\n    if (!stage) return pos;\n\n    const stageWidth = stage.width();\n    const stageHeight = stage.height();\n    const imageWidth = stageSize.width * currentScale;\n    const imageHeight = stageSize.height * currentScale;\n\n    let newX = pos.x;\n    let newY = pos.y;\n\n    // Constrain X axis\n    if (imageWidth > stageWidth) {\n      if (newX > 0) newX = 0;\n      if (newX < stageWidth - imageWidth) newX = stageWidth - imageWidth;\n    } else {\n      newX = (stageWidth - imageWidth) / 2;\n    }\n\n    // Constrain Y axis\n    if (imageHeight > stageHeight) {\n      if (newY > 0) newY = 0;\n      if (newY < stageHeight - imageHeight) newY = stageHeight - imageHeight;\n    } else {\n      newY = (stageHeight - imageHeight) / 2;\n    }\n\n    return { x: newX, y: newY };\n  };\n\n\n  // Function to check if click is near a line segment\n  const findLineSegmentNearClick = (clickX: number, clickY: number) => {\n    if (points.length < 2) return null;\n\n    const threshold = LINE_HIT_THRESHOLD / (scale * stageScale);\n    \n    const segments = [];\n    for (let i = 0; i < points.length - 1; i++) {\n      segments.push({ start: i, end: i + 1 });\n    }\n    \n    // If closed, add segment from last to first\n    if (closed) {\n      segments.push({ start: points.length - 1, end: 0 });\n    }\n\n    for (const segment of segments) {\n      const p1 = points[segment.start];\n      const p2 = points[segment.end];\n      \n      const closest = getClosestPointOnSegment(clickX, clickY, p1.x, p1.y, p2.x, p2.y);\n      const distance = Math.hypot(closest.x - clickX, closest.y - clickY);\n      \n      if (distance < threshold) {\n        return {\n          segmentIndex: segment.start,\n          insertPosition: closest.t,\n          point: { x: closest.x, y: closest.y }\n        };\n      }\n    }\n    \n    return null;\n  };\n\n  // Initialize position on image load\n  useEffect(() => {\n    if (image) {\n      const initialPos = getConstrainedPosition({ x: 0, y: 0 }, 1);\n      setStagePosition(initialPos);\n    }\n  }, [image]);\n\n  // Keyboard shortcuts\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.ctrlKey || e.metaKey) {\n        if (e.key === \"=\" || e.key === \"+\") {\n          e.preventDefault();\n          handleZoomIn();\n        } else if (e.key === \"-\") {\n          e.preventDefault();\n          handleZoomOut();\n        } else if (e.key === \"0\") {\n          e.preventDefault();\n          handleResetZoom();\n        }\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [stageScale, stagePosition]);\n\n  const handleStageDragStart = (e: KonvaEventObject<MouseEvent>) => {\n    // Only allow stage dragging if not clicking on a point\n    const clickedShape = e.target;\n    if (clickedShape && clickedShape.name() === \"point\") {\n      e.target.stopDrag();\n      return;\n    }\n\n    const stage = e.target.getStage();\n    if (!stage) return;\n    \n    const pos = stage.getPointerPosition();\n    if (pos) {\n      setDragStart(pos);\n    }\n  };\n\n  const handleStageDragEnd = (e: KonvaEventObject<DragEvent>) => {\n    const newPos = {\n      x: e.target.x(),\n      y: e.target.y(),\n    };\n    const constrainedPos = getConstrainedPosition(newPos, stageScale);\n    setStagePosition(constrainedPos);\n    setDragStart(null);\n  };\n\n  const toImageCoords = (stage: Konva.Stage | null): { x: number; y: number } => {\n    if (!stage) return { x: 0, y: 0 };\n    const pos = stage.getPointerPosition();\n    if (!pos) return { x: 0, y: 0 };\n    \n    const x = (pos.x - stagePosition.x) / (scale * stageScale);\n    const y = (pos.y - stagePosition.y) / (scale * stageScale);\n    \n    return { x, y };\n  };\n\n  const linePointsScaled = useMemo(() => {\n    const flat = points.flatMap((p) => [p.x * scale, p.y * scale]);\n    return flat;\n  }, [points, scale]);\n\n  const commit = (nextPoints: Points) => {\n    setPoints(nextPoints);\n  };\n\n  const handlePointDragStart = (e: KonvaEventObject<DragEvent>) => {\n    e.cancelBubble = true; // Prevent stage from dragging\n    setIsDraggingPoint(true);\n  };\n\n  const handlePointDragMove = (id: number, e: KonvaEventObject<DragEvent>) => {\n    const newX = e.target.x() / scale;\n    const newY = e.target.y() / scale;\n    \n    const updatedPoints = points.map((p) => \n      p.id === id ? { ...p, x: newX, y: newY } : p\n    );\n    \n    setPoints(updatedPoints);\n  };\n\n  const handlePointDragEnd = (e: KonvaEventObject<DragEvent>) => {\n    e.cancelBubble = true; // Prevent stage from processing this event\n    setIsDraggingPoint(false);\n  };\n\n  const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {\n    if (!image) return;\n\n    const clickedShape = e.target;\n    \n    // Check if we clicked on a point\n    if (clickedShape && clickedShape.name() === \"point\") {\n      if (!closed) {\n        const clickedIndex = points.findIndex((p) => \n          Math.abs(p.x * scale - clickedShape.x()) < 1 && \n          Math.abs(p.y * scale - clickedShape.y()) < 1\n        );\n        \n        if (clickedIndex === 0 && points.length >= 3) {\n          setClosed(true);\n          setHoveringFirst(false);\n        }\n      }\n      return;\n    }\n\n    // Track drag start for stage\n    const stage = e.target.getStage();\n    if (!stage) return;\n    \n    const pos = stage.getPointerPosition();\n    if (pos) {\n      setDragStart(pos);\n    }\n  };\n\n  const handleStageMouseUp = (e: KonvaEventObject<MouseEvent>) => {\n    if (!image || isDraggingPoint) return;\n\n    const clickedShape = e.target;\n    \n    // Don't add point if clicked on a point\n    if (clickedShape && clickedShape.name() === \"point\") {\n      return;\n    }\n\n    // Check if this was a drag or a click\n    if (dragStart) {\n      const stage = e.target.getStage();\n      if (!stage) return;\n      \n      const currentPos = stage.getPointerPosition();\n      if (currentPos) {\n        const dx = currentPos.x - dragStart.x;\n        const dy = currentPos.y - dragStart.y;\n        const distance = Math.sqrt(dx * dx + dy * dy);\n        \n        // If moved less than threshold, it's a click\n        if (distance < DRAG_THRESHOLD) {\n          const p = toImageCoords(stage);\n          \n          // Check if click is near an existing line\n          const lineHit = findLineSegmentNearClick(p.x, p.y);\n          \n          if (lineHit) {\n            // Insert point into the line\n            const newPoint = {\n              id: Date.now(),\n              x: lineHit.point.x,\n              y: lineHit.point.y\n            };\n            \n            const newPoints = [...points];\n            newPoints.splice(lineHit.segmentIndex + 1, 0, newPoint);\n            commit(newPoints);\n          } else if (!closed) {\n            // Add point to the end (only if not closed)\n            const next = [...points, { id: Date.now(), x: p.x, y: p.y }];\n            commit(next);\n          }\n        }\n      }\n      \n      setDragStart(null);\n    }\n  };\n\n  const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {\n    if (closed || points.length < 3) {\n      setHoveringFirst(false);\n      return;\n    }\n\n    const stage = e.target.getStage();\n    const p = toImageCoords(stage);\n    const fp = points[0];\n    const dx = (p.x - fp.x) * scale * stageScale;\n    const dy = (p.y - fp.y) * scale * stageScale;\n    const dist = Math.hypot(dx, dy);\n\n    setHoveringFirst(dist < 15);\n  };\n\n  return (\n    <Container>\n      <CanvasContainer>\n        <Stage\n          ref={stageRef}\n          width={1200}\n          height={1200}\n          onMouseDown={handleStageMouseDown}\n          onMouseUp={handleStageMouseUp}\n          onMouseMove={handleMouseMove}\n          onWheel={handleWheel}\n          scaleX={stageScale}\n          scaleY={stageScale}\n          x={stagePosition.x}\n          y={stagePosition.y}\n          draggable={!isDraggingPoint}\n          onDragStart={handleStageDragStart}\n          onDragEnd={handleStageDragEnd}\n          dragBoundFunc={(pos) => getConstrainedPosition(pos, stageScale)}\n        >\n          <Layer>\n            <KonvaImage \n              image={image} \n              width={stageSize.width} \n              height={stageSize.height} \n              listening={false} \n            />\n\n            {points.length >= 2 && (\n              <Line\n                points={linePointsScaled}\n                closed={closed}\n                stroke=\"#2563eb\"\n                strokeWidth={2 / stageScale}\n                lineCap=\"round\"\n                lineJoin=\"round\"\n                tension={0}\n                fill={closed ? \"rgba(37, 99, 235, 0.3)\" : undefined}\n                hitStrokeWidth={LINE_HIT_THRESHOLD / stageScale}\n              />\n            )}\n\n            <Group>\n              {points.map((p, i) => (\n                <Circle\n                  key={p.id}\n                  name=\"point\"\n                  x={p.x * scale}\n                  y={p.y * scale}\n                  radius={(i === 0 && hoveringFirst ? 10 : 6) / stageScale}\n                  fill={i === 0 ? \"#ef4444\" : \"#7e9de1\"}\n                  stroke={i === 0 && hoveringFirst ? \"#fbbf24\" : undefined}\n                  strokeWidth={i === 0 && hoveringFirst ? 2 / stageScale : 0}\n                  draggable={true}\n                  onDragStart={handlePointDragStart}\n                  onDragMove={(e) => handlePointDragMove(p.id, e)}\n                  onDragEnd={handlePointDragEnd}\n                />\n              ))}\n            </Group>\n          </Layer>\n        </Stage>\n      </CanvasContainer>\n      <NavContainer>\n        <Button\n          onClick={handleZoomIn}\n          disabled={stageScale >= MAX_SCALE}\n          title=\"Zoom In (Ctrl/Cmd + +)\"\n        >\n          <ZoomIn style={{ width: '20px', height: '20px' }} />\n        </Button>\n        <Button\n          onClick={handleZoomOut}\n          disabled={stageScale <= MIN_SCALE}\n          title=\"Zoom Out (Ctrl/Cmd + -)\"\n        >\n          <ZoomOut style={{ width: '20px', height: '20px' }} />\n        </Button>\n        <Button\n          onClick={handleResetZoom}\n          title=\"Reset Zoom (Ctrl/Cmd + 0)\"\n        >\n          {Math.round(stageScale * 100)}%\n        </Button>\n      </NavContainer>\n    </Container>\n  );\n};"]}

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "react-floor-mapper",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Interactive image overlay (points/lines) with pan & zoom for React/Next.js",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,12 +21,10 @@
       "require": "./dist/lite.cjs"
     }
   },
-  "files": [
-    "dist"
-  ],
   "sideEffects": false,
   "scripts": {
     "build": "tsup",
+    "prepublishOnly": "npm run build",
     "dev": "tsup --watch",
     "test": "vitest",
     "typecheck": "tsc -p tsconfig.json --noEmit",