react-floor-mapper 0.1.18 → 0.1.20

package/dist/index.cjs

@@ -596,7 +596,8 @@ var usePoints = (initialPoints) => {
   const [points, setPoints] = React2.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;
@@ -612,30 +613,34 @@ var useZoom = (stage) => {
 };
 var Container = styled__default.default.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__default.default.div`
-  width:80px;
-  height:100%;
-  background:red;
-  flex-shrink:0;
-  display: flex;
-  justify-content: flex-start;
+var NavBase = styled__default.default.div`
+  display:flex;
   align-items: center;
-  flex-direction:column;
   gap:20px;
-  padding:20px 0;
+`;
+var NavContainer = styled__default.default(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__default.default.div`
-  width:calc(100% - 80px);
-  height:100%;
+  height:calc(100% - 60px);
+  width:100%;
   overflow: hidden;
 `;
 var ButtonBase = styled__default.default.button`
@@ -649,8 +654,8 @@ var ButtonBase = styled__default.default.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;
@@ -658,13 +663,51 @@ var ButtonBase = styled__default.default.button`
   }
 `;
 var Button = styled__default.default(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 = React2.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] = React2.useState(initialPoints.length >= 3);
@@ -672,11 +715,11 @@ var Mapper = ({
   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 [image, imageStatus] = useImage__default.default(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 scale = width / imgW;
+  const stageSize = { width, height: imgH * scale };
   const DRAG_THRESHOLD = 5;
   const LINE_HIT_THRESHOLD = 10;
   const handleZoomIn = () => {
@@ -795,6 +838,15 @@ var Mapper = ({
     }
     return null;
   };
+  const debouncedOnChange = React2.useMemo(
+    () => onChange ? debounce(onChange, 200) : null,
+    [onChange]
+  );
+  React2.useEffect(() => {
+    if (!debouncedOnChange) return;
+    debouncedOnChange(points);
+    return () => debouncedOnChange.cancel();
+  }, [points, debouncedOnChange]);
   React2.useEffect(() => {
     if (image) {
       const initialPos = getConstrainedPosition({ x: 0, y: 0 }, 1);
@@ -868,6 +920,10 @@ var Mapper = ({
     );
     setPoints(updatedPoints);
   };
+  const handlePointReset = () => {
+    setClosed(false);
+    resetPoints();
+  };
   const handlePointDragEnd = (e) => {
     e.cancelBubble = true;
     setIsDraggingPoint(false);
@@ -942,13 +998,55 @@ var Mapper = ({
     const dist = Math.hypot(dx, dy);
     setHoveringFirst(dist < 15);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style: { width, height }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(NavContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          onClick: handlePointReset,
+          disabled: !points.length,
+          title: "Reset Points",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { style: { width: "20px", height: "20px" } })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(NavBase, { 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),
+              "%"
+            ]
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(CanvasContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
       reactKonva.Stage,
       {
         ref: stageRef,
-        width: 1200,
-        height: 1200,
+        width,
+        height,
         onMouseDown: handleStageMouseDown,
         onMouseUp: handleStageMouseUp,
         onMouseMove: handleMouseMove,
@@ -1004,38 +1102,7 @@ var Mapper = ({
           )) })
         ] })
       }
-    ) }),
-    /* @__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),
-            "%"
-          ]
-        }
-      )
-    ] })
+    ) })
   ] });
 };