react-floor-mapper 0.1.19 → 0.1.21

package/dist/index.js

@@ -1,9 +1,9 @@
 import * as React2 from 'react';
-import { useRef, useState, useEffect, useMemo } from 'react';
+import { useRef, useState, useMemo, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Stage, Layer, Image as Image$1, Line, Group, Circle } from 'react-konva';
 import useImage from 'use-image';
-import { ZoomIn, ZoomOut } from 'lucide-react';
+import { RotateCcw, ZoomIn, ZoomOut } from 'lucide-react';
 import styled from 'styled-components';
 
 // src/components/ImageWithPoints.tsx
@@ -571,7 +571,8 @@ var usePoints = (initialPoints) => {
   const [points, setPoints] = useState(
     () => initialPoints.map((p, i) => ({ id: i + 1, x: p.x, y: p.y }))
   );
-  return { points, setPoints };
+  const resetPoints = () => setPoints([]);
+  return { points, setPoints, resetPoints };
 };
 var useZoom = (stage) => {
   const MIN_SCALE = 0.5;
@@ -587,30 +588,34 @@ var useZoom = (stage) => {
 };
 var Container = styled.div`
   overflow: hidden;
-  width:1200px;
-  height:1200px;
+  width:100%;
+  height:250px;
   display: flex;
+  flex-direction:column;
   align-items: stretch;
   border:1px solid #ccc;
   border-radius:4px;
+  *{
+    box-sizing:border-box;
+  }
 `;
-var NavContainer = styled.div`
-  width:80px;
-  height:100%;
-  background:red;
-  flex-shrink:0;
-  display: flex;
-  justify-content: flex-start;
+var NavBase = styled.div`
+  display:flex;
   align-items: center;
-  flex-direction:column;
   gap:20px;
-  padding:20px 0;
+`;
+var NavContainer = styled(NavBase)`
+  width:100%;
+  height:60px;
+  flex-shrink:0;
+  justify-content: space-between;
+  padding:0 10px;
   background:#ebebeb;
   border-left:1px solid #ccc;
 `;
 var CanvasContainer = styled.div`
-  width:calc(100% - 80px);
-  height:100%;
+  height:calc(100% - 60px);
+  width:100%;
   overflow: hidden;
 `;
 var ButtonBase = styled.button`
@@ -624,8 +629,8 @@ var ButtonBase = styled.button`
   justify-content: center;
   align-items: center;
   font-size:12px;
-  min-width:50px;
-  min-height:50px;
+  min-width:45px;
+  min-height:45px;
   border-left:1px solid #ccc;
   &:disabled:{
     opacity:0.5;
@@ -633,13 +638,51 @@ var ButtonBase = styled.button`
   }
 `;
 var Button = styled(ButtonBase)``;
+
+// src/utils/debounce.ts
+var debounce = (fn, delay = 200) => {
+  let timeoutId = null;
+  let lastArgs = null;
+  const debounced = (...args) => {
+    lastArgs = args;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      if (lastArgs) {
+        fn(...lastArgs);
+        lastArgs = null;
+      }
+    }, delay);
+  };
+  debounced.cancel = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    lastArgs = null;
+  };
+  debounced.flush = () => {
+    if (!timeoutId) return;
+    clearTimeout(timeoutId);
+    timeoutId = null;
+    if (lastArgs) {
+      fn(...lastArgs);
+      lastArgs = null;
+    }
+  };
+  return debounced;
+};
 var Mapper = ({
-  src = "https://konvajs.org/assets/line-building.png",
+  src = "",
   initialPoints = [],
-  maxWidth = 1200
+  width = 600,
+  height = 600,
+  onChange
 }) => {
   const stageRef = useRef(null);
-  const { points, setPoints } = usePoints(initialPoints);
+  const { points, setPoints, resetPoints } = 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);
@@ -647,11 +690,11 @@ var Mapper = ({
   const [stagePosition, setStagePosition] = useState({ x: 0, y: 0 });
   const [dragStart, setDragStart] = useState(null);
   const [isDraggingPoint, setIsDraggingPoint] = useState(false);
-  const [image] = useImage(src, "anonymous");
+  const [image, imageStatus] = useImage(src, "anonymous", "no-referrer");
   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 scale = width / imgW;
+  const stageSize = { width, height: imgH * scale };
   const DRAG_THRESHOLD = 5;
   const LINE_HIT_THRESHOLD = 10;
   const handleZoomIn = () => {
@@ -770,6 +813,15 @@ var Mapper = ({
     }
     return null;
   };
+  const debouncedOnChange = useMemo(
+    () => onChange ? debounce(onChange, 200) : null,
+    [onChange]
+  );
+  useEffect(() => {
+    if (!debouncedOnChange) return;
+    debouncedOnChange(points);
+    return () => debouncedOnChange.cancel();
+  }, [points, debouncedOnChange]);
   useEffect(() => {
     if (image) {
       const initialPos = getConstrainedPosition({ x: 0, y: 0 }, 1);
@@ -843,6 +895,10 @@ var Mapper = ({
     );
     setPoints(updatedPoints);
   };
+  const handlePointReset = () => {
+    setClosed(false);
+    resetPoints();
+  };
   const handlePointDragEnd = (e) => {
     e.cancelBubble = true;
     setIsDraggingPoint(false);
@@ -917,13 +973,55 @@ var Mapper = ({
     const dist = Math.hypot(dx, dy);
     setHoveringFirst(dist < 15);
   };
-  return /* @__PURE__ */ jsxs(Container, { children: [
+  return /* @__PURE__ */ jsxs(Container, { style: { width, height }, children: [
+    /* @__PURE__ */ jsxs(NavContainer, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handlePointReset,
+          disabled: !points.length,
+          title: "Reset Points",
+          children: /* @__PURE__ */ jsx(RotateCcw, { style: { width: "20px", height: "20px" } })
+        }
+      ),
+      /* @__PURE__ */ jsxs(NavBase, { 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),
+              "%"
+            ]
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsx(CanvasContainer, { children: /* @__PURE__ */ jsx(
       Stage,
       {
         ref: stageRef,
-        width: 1200,
-        height: 1200,
+        width,
+        height,
         onMouseDown: handleStageMouseDown,
         onMouseUp: handleStageMouseUp,
         onMouseMove: handleMouseMove,
@@ -979,38 +1077,7 @@ var Mapper = ({
           )) })
         ] })
       }
-    ) }),
-    /* @__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),
-            "%"
-          ]
-        }
-      )
-    ] })
+    ) })
   ] });
 };