@osamash/floor-planner 1.2.5 → 1.2.6

package/dist/floor-planner.es.js

@@ -3666,6 +3666,37 @@ const immutable_es = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.define
   MODE_ROTATING_ITEM,
   MODE_WAITING_DRAWING_ROOM,
   MODE_DRAWING_ROOM
+], MODE_2D_VIEWER = [
+  MODE_IDLE$1,
+  MODE_2D_ZOOM_IN,
+  MODE_2D_ZOOM_OUT,
+  MODE_2D_PAN,
+  MODE_WAITING_DRAWING_ROOM,
+  MODE_WAITING_DRAWING_LINE,
+  MODE_WAITING_DRAWING_SURFACE,
+  MODE_DRAGGING_LINE,
+  MODE_DRAGGING_VERTEX,
+  MODE_DRAGGING_ITEM,
+  MODE_DRAWING_SURFACE,
+  MODE_DRAWING_LINE,
+  MODE_DRAWING_ROOM,
+  MODE_DRAWING_HOLE,
+  MODE_DRAWING_ITEM,
+  MODE_DRAGGING_HOLE,
+  MODE_ROTATING_ITEM,
+  MODE_RESIZING_ITEM
+], MODE_IN_PROGRESS = [
+  MODE_DRAWING_LINE,
+  MODE_DRAWING_SURFACE,
+  MODE_DRAWING_ROOM,
+  MODE_DRAWING_HOLE,
+  MODE_DRAWING_ITEM,
+  MODE_DRAGGING_LINE,
+  MODE_DRAGGING_VERTEX,
+  MODE_DRAGGING_ITEM,
+  MODE_DRAGGING_HOLE,
+  MODE_ROTATING_ITEM,
+  MODE_RESIZING_ITEM
 ], UNIT_MILLIMETER = "mm", UNIT_CENTIMETER = "cm", UNIT_METER = "m", UNIT_INCH = "in", UNIT_FOOT = "ft", UNIT_MILE = "mi", UNITS_LENGTH = [
   UNIT_MILLIMETER,
   UNIT_CENTIMETER,
@@ -3678,10 +3709,8 @@ const immutable_es = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.define
   BACKSPACE: 8,
   ESC: 27,
   Z: 90,
-  ALT: 18,
   C: 67,
   V: 86,
-  CTRL: 17,
   ENTER: 13,
   TAB: 9
 }, toFixedFloat = (i, e = 6) => i && e ? parseFloat(parseFloat(i.toString()).toFixed(e)) : 0, fAbs = (i) => {
@@ -18193,7 +18222,10 @@ function Layer({ layer: i, scene: e, catalog: t, mode: n, showDimensions: s }) {
       },
       v.get("id")
     )),
-    f && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    f && // Selection chrome, not plan content: dimming everything but the
+    // selected room is the right thing on screen and the wrong thing in a
+    // saved thumbnail, so the screenshot pass drops this whole group.
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "data-fp-screenshot": "omit", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "rect",
         {
@@ -18220,7 +18252,7 @@ function Layer({ layer: i, scene: e, catalog: t, mode: n, showDimensions: s }) {
         `sel-${v}`
       )) })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(WallHoverHandles, { layer: i })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("g", { "data-fp-screenshot": "omit", children: /* @__PURE__ */ jsxRuntimeExports.jsx(WallHoverHandles, { layer: i }) })
   ] });
 }
 const Scene$1 = ({ scene: i, catalog: e, mode: t, showDimensions: n }) => {
@@ -53879,25 +53911,6 @@ const STYLE_BOX$1 = {
       ]
     }
   );
-}, V_2D_MODES = {
-  MODE_IDLE: MODE_IDLE$1,
-  MODE_2D_ZOOM_IN,
-  MODE_2D_ZOOM_OUT,
-  MODE_2D_PAN,
-  MODE_WAITING_DRAWING_ROOM,
-  MODE_WAITING_DRAWING_LINE,
-  MODE_WAITING_DRAWING_SURFACE,
-  MODE_DRAGGING_LINE,
-  MODE_DRAGGING_VERTEX,
-  MODE_DRAGGING_ITEM,
-  MODE_DRAWING_SURFACE,
-  MODE_DRAWING_LINE,
-  MODE_DRAWING_ROOM,
-  MODE_DRAWING_HOLE,
-  MODE_DRAWING_ITEM,
-  MODE_DRAGGING_HOLE,
-  MODE_ROTATING_ITEM,
-  MODE_RESIZING_ITEM
 };
 function Content({ width: i, height: e, catalog: t }) {
   const n = useReactPlannerStore(), { planner: s } = n, { mode: o } = s;
@@ -53982,7 +53995,7 @@ function Content({ width: i, height: e, catalog: t }) {
         }
       }
     }
-  ) : o === MODE_3D_FIRST_PERSON ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}) : o === MODE_VIEWING_CATALOG ? /* @__PURE__ */ jsxRuntimeExports.jsx(CatalogList, { width: i, height: e, catalog: t }) : V_2D_MODES[o] ? /* @__PURE__ */ jsxRuntimeExports.jsx(Viewer2D, { width: i, height: e, catalog: t }) : o === MODE_CONFIGURING_PROJECT ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}) : null;
+  ) : o === MODE_3D_FIRST_PERSON ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}) : o === MODE_VIEWING_CATALOG ? /* @__PURE__ */ jsxRuntimeExports.jsx(CatalogList, { width: i, height: e, catalog: t }) : MODE_2D_VIEWER.includes(o) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Viewer2D, { width: i, height: e, catalog: t }) : o === MODE_CONFIGURING_PROJECT ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}) : null;
 }
 const Footerbar = () => null, Panel = ({ children: i, name: e, subtitle: t, ...n }) => {
   const [s, o] = useState(n.opened || !0);
@@ -56491,7 +56504,7 @@ const SimilarElementsGrid = ({
       `Largest SVG is ${l}x${c}, too small to be the plan viewer`
     );
   const u = a.cloneNode(!0);
-  await Promise.all(
+  u.querySelectorAll('[data-fp-screenshot="omit"]').forEach((p) => p.remove()), await Promise.all(
     Array.from(u.querySelectorAll("image")).map(async (p) => {
       const f = p.getAttribute("href") || p.getAttribute("xlink:href");
       if (!(!f || f.startsWith("data:")))
@@ -57875,14 +57888,43 @@ function autosave(i, e) {
     };
   };
 }
+const SNAPPING_OFF = {
+  [SNAP_POINT]: !1,
+  [SNAP_LINE]: !1,
+  [SNAP_SEGMENT]: !1,
+  [SNAP_GRID]: !1,
+  [SNAP_GUIDE]: !1
+};
 function keyboard() {
   return (i) => {
-    const e = (n) => {
-      const s = i.planner, o = s.get("mode");
-      switch (n.keyCode) {
+    const e = () => useReactPlannerStore.getState().planner;
+    let t = null;
+    const n = () => {
+      if (t) return;
+      const d = e();
+      MODE_SNAPPING.includes(d.get("mode")) && (t = d.snapMask, i.toggleSnap(d.snapMask.merge(SNAPPING_OFF)));
+    }, s = () => {
+      if (!t) return;
+      const d = t;
+      t = null, i.toggleSnap(e().snapMask.merge(d));
+    }, o = () => {
+      e().alterate || i.setAlterateState();
+    }, a = () => {
+      e().alterate && i.setAlterateState();
+    }, l = (d) => {
+      d.getModifierState("Alt") ? n() : s(), d.getModifierState("Control") ? o() : a();
+    }, c = () => {
+      s(), a();
+    }, u = (d) => {
+      const p = d;
+      return p != null && p.tagName ? ["INPUT", "TEXTAREA", "SELECT"].includes(p.tagName) || p.isContentEditable : !1;
+    }, h = (d) => {
+      if (l(d), u(d.target)) return;
+      const p = e(), f = p.get("mode");
+      switch (d.keyCode) {
         case KEYBOARD_BUTTON_CODE.BACKSPACE:
         case KEYBOARD_BUTTON_CODE.DELETE: {
-          [MODE_IDLE$1, MODE_3D_FIRST_PERSON, MODE_3D_VIEW].includes(o) && i.remove();
+          [MODE_IDLE$1, MODE_3D_FIRST_PERSON, MODE_3D_VIEW].includes(f) && i.remove();
           break;
         }
         case KEYBOARD_BUTTON_CODE.ESC: {
@@ -57890,66 +57932,53 @@ function keyboard() {
           break;
         }
         case KEYBOARD_BUTTON_CODE.Z: {
-          (n.getModifierState("Control") || n.getModifierState("Meta")) && (n.getModifierState("Shift") ? i.redo() : i.undo());
-          break;
-        }
-        case KEYBOARD_BUTTON_CODE.ALT: {
-          MODE_SNAPPING.includes(o) && i.toggleSnap(
-            s.snapMask.merge({
-              SNAP_POINT: !1,
-              SNAP_LINE: !1,
-              SNAP_SEGMENT: !1,
-              SNAP_GRID: !1,
-              SNAP_GUIDE: !1,
-              tempSnapConfiguartion: s.snapMask.toJS()
-            })
-          );
+          (d.getModifierState("Control") || d.getModifierState("Meta")) && (d.getModifierState("Shift") ? i.redo() : i.undo());
           break;
         }
         case KEYBOARD_BUTTON_CODE.C: {
-          let a = s.getIn(["scene", "selectedLayer"]), l = s.getIn([
+          let g = p.getIn(["scene", "selectedLayer"]), _ = p.getIn([
             "scene",
             "layers",
-            a,
+            g,
             "selected"
           ]);
-          if ((o === MODE_IDLE$1 || o === MODE_3D_VIEW) && (l.holes.size || l.areas.size || l.items.size || l.lines.size)) {
-            if (l.holes.size) {
-              let c = s.getIn([
+          if ((f === MODE_IDLE$1 || f === MODE_3D_VIEW) && (_.holes.size || _.areas.size || _.items.size || _.lines.size)) {
+            if (_.holes.size) {
+              let x = p.getIn([
                 "scene",
                 "layers",
-                a,
+                g,
                 "holes",
-                l.holes.get(0)
+                _.holes.get(0)
               ]);
-              i.copyProperties(c.get("properties"));
-            } else if (l.areas.size) {
-              const c = s.getIn([
+              i.copyProperties(x.get("properties"));
+            } else if (_.areas.size) {
+              const x = p.getIn([
                 "scene",
                 "layers",
-                a,
+                g,
                 "areas",
-                l.areas.get(0)
+                _.areas.get(0)
               ]);
-              i.copyProperties(c.properties);
-            } else if (l.items.size) {
-              const c = s.getIn([
+              i.copyProperties(x.properties);
+            } else if (_.items.size) {
+              const x = p.getIn([
                 "scene",
                 "layers",
-                a,
+                g,
                 "items",
-                l.items.get(0)
+                _.items.get(0)
               ]);
-              i.copyProperties(c.properties);
-            } else if (l.lines.size) {
-              const c = s.getIn([
+              i.copyProperties(x.properties);
+            } else if (_.lines.size) {
+              const x = p.getIn([
                 "scene",
                 "layers",
-                a,
+                g,
                 "lines",
-                l.lines.get(0)
+                _.lines.get(0)
               ]);
-              i.copyProperties(c.properties);
+              i.copyProperties(x.properties);
             }
           }
           break;
@@ -57958,30 +57987,10 @@ function keyboard() {
           i.pasteProperties();
           break;
         }
-        case KEYBOARD_BUTTON_CODE.CTRL: {
-          i.setAlterateState();
-          break;
-        }
-      }
-    }, t = (n) => {
-      const s = i.planner, o = s.get("mode");
-      switch (n.keyCode) {
-        case KEYBOARD_BUTTON_CODE.ALT: {
-          MODE_SNAPPING.includes(o) && i.toggleSnap(
-            s.snapMask.merge(
-              s.snapMask.get("tempSnapConfiguartion")
-            )
-          );
-          break;
-        }
-        case KEYBOARD_BUTTON_CODE.CTRL: {
-          i.setAlterateState();
-          break;
-        }
       }
     };
-    return window.addEventListener("keydown", e), window.addEventListener("keyup", t), () => {
-      window.removeEventListener("keydown", e), window.removeEventListener("keyup", t);
+    return window.addEventListener("keydown", h), window.addEventListener("keyup", l), window.addEventListener("mousemove", l, { passive: !0 }), window.addEventListener("mousedown", l, { passive: !0 }), window.addEventListener("blur", c), document.addEventListener("visibilitychange", c), () => {
+      s(), window.removeEventListener("keydown", h), window.removeEventListener("keyup", l), window.removeEventListener("mousemove", l), window.removeEventListener("mousedown", l), window.removeEventListener("blur", c), document.removeEventListener("visibilitychange", c);
     };
   };
 }
@@ -59036,38 +59045,76 @@ const ContainerDimensions = ({
       s.current && o && s.current.uninstall(o);
     };
   }, []), e ? typeof i == "function" ? i(e) : React.cloneElement(i, e) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: n });
-}, IDLE_DELAY = 15e3, MAX_WIDTH = 1200;
+}, DRAWABLE = ["vertices", "lines", "holes", "areas", "items"], sameIgnoringSelection = (i, e) => i.size !== e.size ? !1 : i.every((t, n) => {
+  const s = e.get(n);
+  return s === void 0 ? !1 : t === s ? !0 : t.set("selected", !1).equals(s.set("selected", !1));
+}), layerChanged = (i, e) => {
+  if (!e) return !0;
+  if (i === e) return !1;
+  if (i.visible !== e.visible || i.opacity !== e.opacity || i.altitude !== e.altitude || i.order !== e.order)
+    return !0;
+  const t = i.selected !== e.selected;
+  return DRAWABLE.some((n) => {
+    const s = i[n], o = e[n];
+    return s === o ? !1 : t ? !sameIgnoringSelection(s, o) : !0;
+  });
+};
+function hasVisualChange(i, e) {
+  if (i.showDimensions !== e.showDimensions || i.showGrid !== e.showGrid || i.theme !== e.theme)
+    return !0;
+  const t = i.planner.scene, n = e.planner.scene;
+  if (t === n) return !1;
+  if (t.width !== n.width || t.height !== n.height || t.unit !== n.unit || t.grids !== n.grids || t.guides !== n.guides)
+    return !0;
+  if (t.layers === n.layers) return !1;
+  if (t.layers.size !== n.layers.size) return !0;
+  const s = n.layers;
+  return t.layers.some(
+    (o, a) => layerChanged(o, s.get(a))
+  );
+}
+const SETTLE_DELAY = 800, MAX_WAIT = 6e3, RETRY_DELAY = 2e3, MAX_RETRIES = 3, MAX_WIDTH = 1200, isCapturable = (i) => MODE_2D_VIEWER.includes(i) && !MODE_IN_PROGRESS.includes(i);
 function usePlanThumbnail(i) {
   const e = useRef(i);
   e.current = i;
-  const t = useRef(!1), n = useRef(null), s = useRef(null), o = useCallback((a = !1) => {
-    if (!a && !t.current) return n.current ?? Promise.resolve();
-    if (n.current) return n.current;
-    const l = useReactPlannerStore.getState().planner.get("mode");
-    return l === MODE_3D_VIEW || l === MODE_3D_FIRST_PERSON ? Promise.resolve() : (t.current = !1, n.current = (async () => {
-      var c;
-      try {
-        const u = await getSVGScreenshot({ maxWidth: MAX_WIDTH });
-        if (u === s.current) return;
-        s.current = u, (c = e.current) == null || c.call(e, u);
-      } catch (u) {
-        console.warn("Plan screenshot failed:", u), t.current = !0;
-      } finally {
-        n.current = null;
-      }
-    })(), n.current);
-  }, []);
+  const t = useRef(!1), n = useRef(null), s = useRef(null), o = useCallback((a = !1) => !a && !t.current ? n.current ?? Promise.resolve() : n.current ? n.current : isCapturable(useReactPlannerStore.getState().planner.get("mode")) ? (t.current = !1, n.current = (async () => {
+    var l;
+    try {
+      const c = await getSVGScreenshot({ maxWidth: MAX_WIDTH });
+      if (c === s.current) return;
+      s.current = c, (l = e.current) == null || l.call(e, c);
+    } catch (c) {
+      console.warn("Plan screenshot failed:", c), t.current = !0;
+    } finally {
+      n.current = null;
+    }
+  })(), n.current) : Promise.resolve(), []);
   return useEffect(() => {
-    let a = null, l = useReactPlannerStore.getState().planner.scene;
-    const c = useReactPlannerStore.subscribe((d) => {
-      d.planner.scene !== l && (l = d.planner.scene, t.current = !0, a && clearTimeout(a), a = setTimeout(() => o(), IDLE_DELAY));
-    }), u = () => {
-      a && clearTimeout(a), o();
+    let a = null, l = null, c = 0;
+    const u = () => {
+      a = null, l = null, isCapturable(useReactPlannerStore.getState().planner.get("mode")) && o().then(() => {
+        a || !t.current || c >= MAX_RETRIES || (c += 1, a = setTimeout(u, RETRY_DELAY * c));
+      });
     }, h = () => {
-      document.visibilityState === "hidden" && u();
+      const g = Date.now();
+      l === null && (l = g), a && clearTimeout(a), a = setTimeout(
+        u,
+        Math.max(0, Math.min(SETTLE_DELAY, l + MAX_WAIT - g))
+      );
+    }, d = useReactPlannerStore.subscribe((g, _) => {
+      if (hasVisualChange(g, _)) {
+        t.current = !0, c = 0, h();
+        return;
+      }
+      const x = g.planner.get("mode");
+      t.current && isCapturable(x) && !isCapturable(_.planner.get("mode")) && h();
+    }), p = () => {
+      a && clearTimeout(a), a = null, l = null, o();
+    }, f = () => {
+      document.visibilityState === "hidden" && p();
     };
-    return document.addEventListener("visibilitychange", h), window.addEventListener("pagehide", u), () => {
-      a && clearTimeout(a), c(), document.removeEventListener("visibilitychange", h), window.removeEventListener("pagehide", u);
+    return document.addEventListener("visibilitychange", f), window.addEventListener("pagehide", p), () => {
+      a && clearTimeout(a), d(), document.removeEventListener("visibilitychange", f), window.removeEventListener("pagehide", p), o();
     };
   }, [o]), { ensureScreenshot: o };
 }