react-os-shell 0.3.17 → 0.3.18

package/dist/{chunk-TB72OMUU.js → chunk-HADXZNYO.js}

@@ -513,8 +513,18 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
   const [showLayers, setShowLayers] = useState(false);
   const [showHint, setShowHint] = useState(true);
   const [measureEnabled, setMeasureEnabled] = useState(false);
-  const [measureMode, setMeasureMode] = useState("point");
+  const [measureMode, setMeasureMode] = useState("horizontal");
+  const [measureAutocad, setMeasureAutocad] = useState(true);
   const [measureDistance, setMeasureDistance] = useState(null);
+  const measureModeRef = useRef(measureMode);
+  const measureAutocadRef = useRef(measureAutocad);
+  useEffect(() => {
+    measureModeRef.current = measureMode;
+  }, [measureMode]);
+  useEffect(() => {
+    measureAutocadRef.current = measureAutocad;
+  }, [measureAutocad]);
+  const measureRedrawRef = useRef(null);
   const measureRef = useRef(null);
   useEffect(() => {
     let cancelled = false;
@@ -641,6 +651,21 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
     containerRef.current.appendChild(overlay);
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.setAttribute("style", "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;");
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+    marker.setAttribute("id", "dxf-measure-arrow");
+    marker.setAttribute("viewBox", "0 0 10 10");
+    marker.setAttribute("refX", "9");
+    marker.setAttribute("refY", "5");
+    marker.setAttribute("markerWidth", "6");
+    marker.setAttribute("markerHeight", "6");
+    marker.setAttribute("orient", "auto-start-reverse");
+    const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    arrowPath.setAttribute("d", "M 0 0 L 10 5 L 0 10 z");
+    arrowPath.setAttribute("fill", "#ff8800");
+    marker.appendChild(arrowPath);
+    defs.appendChild(marker);
+    svg.appendChild(defs);
     overlay.appendChild(svg);
     const refLineEl = document.createElementNS("http://www.w3.org/2000/svg", "line");
     refLineEl.setAttribute("stroke", "#ff8800");
@@ -649,6 +674,18 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
     refLineEl.setAttribute("opacity", "0.55");
     refLineEl.style.display = "none";
     svg.appendChild(refLineEl);
+    const extLineA = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    extLineA.setAttribute("stroke", "#ff8800");
+    extLineA.setAttribute("stroke-width", "1");
+    extLineA.setAttribute("opacity", "0.85");
+    extLineA.style.display = "none";
+    svg.appendChild(extLineA);
+    const extLineB = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    extLineB.setAttribute("stroke", "#ff8800");
+    extLineB.setAttribute("stroke-width", "1");
+    extLineB.setAttribute("opacity", "0.85");
+    extLineB.style.display = "none";
+    svg.appendChild(extLineB);
     const lineEl = document.createElementNS("http://www.w3.org/2000/svg", "line");
     lineEl.setAttribute("stroke", "#ff8800");
     lineEl.setAttribute("stroke-width", "1.5");
@@ -660,11 +697,12 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
     overlay.appendChild(snapEl);
     measureRef.current = {
       picks: [],
-      lineDir: null,
       overlay,
       svg,
       line: lineEl,
       refLine: refLineEl,
+      extLineA,
+      extLineB,
       markers: [],
       label: null,
       snap: snapEl,
@@ -773,18 +811,11 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
       const s = measureRef.current;
       const a = s.picks[0];
       const b = s.picks[1];
-      if (measureMode === "perp" && s.lineDir) {
-        const d = s.lineDir;
-        const ax = a.x, ay = a.y;
-        const t = (b.x - ax) * d.dx + (b.y - ay) * d.dy;
-        const fx = ax + d.dx * t;
-        const fy = ay + d.dy * t;
-        return { from: { x: fx, y: fy }, to: { x: b.x, y: b.y } };
-      }
-      if (measureMode === "horizontal") {
+      const mode = measureModeRef.current;
+      if (mode === "horizontal") {
         return { from: a, to: { x: b.x, y: a.y } };
       }
-      if (measureMode === "vertical") {
+      if (mode === "vertical") {
         return { from: a, to: { x: a.x, y: b.y } };
       }
       return { from: a, to: b };
@@ -792,9 +823,11 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
     const updateOverlay = () => {
       const s = measureRef.current;
       if (!s) return;
+      const mode = measureModeRef.current;
+      const autocad = measureAutocadRef.current;
       if (s.markers[0]) positionMarker(s.markers[0], s.picks[0].x, s.picks[0].y);
       if (s.markers[1]) positionMarker(s.markers[1], s.picks[1].x, s.picks[1].y);
-      const refDir = measureMode === "horizontal" ? { dx: 1, dy: 0 } : measureMode === "vertical" ? { dx: 0, dy: 1 } : measureMode === "perp" ? s.lineDir : null;
+      const refDir = mode === "horizontal" ? { dx: 1, dy: 0 } : mode === "vertical" ? { dx: 0, dy: 1 } : null;
       if (refDir && s.picks.length >= 1 && s.refLine) {
         const a = s.picks[0];
         const w = canvas.clientWidth, h = canvas.clientHeight;
@@ -818,6 +851,7 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
         s.refLine.style.display = "none";
       }
       if (s.picks.length === 2) {
+        const a = s.picks[0], b = s.picks[1];
         const ends = computeRenderedEnds();
         const fp = pxFromScene(ends.from.x, ends.from.y);
         const tp = pxFromScene(ends.to.x, ends.to.y);
@@ -826,6 +860,37 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
         s.line.setAttribute("x2", String(tp.x));
         s.line.setAttribute("y2", String(tp.y));
         s.line.style.display = "";
+        if (autocad) {
+          s.line.setAttribute("marker-start", "url(#dxf-measure-arrow)");
+          s.line.setAttribute("marker-end", "url(#dxf-measure-arrow)");
+        } else {
+          s.line.removeAttribute("marker-start");
+          s.line.removeAttribute("marker-end");
+        }
+        const extA = s.extLineA;
+        const extB = s.extLineB;
+        if (autocad && mode === "horizontal" && Math.abs(b.y - a.y) > 1e-9) {
+          const p = pxFromScene(b.x, a.y);
+          const q = pxFromScene(b.x, b.y);
+          extB.setAttribute("x1", String(p.x));
+          extB.setAttribute("y1", String(p.y));
+          extB.setAttribute("x2", String(q.x));
+          extB.setAttribute("y2", String(q.y));
+          extB.style.display = "";
+          extA.style.display = "none";
+        } else if (autocad && mode === "vertical" && Math.abs(b.x - a.x) > 1e-9) {
+          const p = pxFromScene(a.x, b.y);
+          const q = pxFromScene(b.x, b.y);
+          extB.setAttribute("x1", String(p.x));
+          extB.setAttribute("y1", String(p.y));
+          extB.setAttribute("x2", String(q.x));
+          extB.setAttribute("y2", String(q.y));
+          extB.style.display = "";
+          extA.style.display = "none";
+        } else {
+          extA.style.display = "none";
+          extB.style.display = "none";
+        }
         if (s.label) {
           const cx = (fp.x + tp.x) / 2;
           const cy = (fp.y + tp.y) / 2;
@@ -836,6 +901,8 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
         }
       } else {
         s.line.style.display = "none";
+        if (s.extLineA) s.extLineA.style.display = "none";
+        if (s.extLineB) s.extLineB.style.display = "none";
       }
     };
     const DRAG_TOL = 4;
@@ -881,10 +948,35 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
       if (dragging || elapsed > DRAG_TIME) return;
       const raw = ev?.detail?.position;
       if (!raw) return;
-      const useSnap = lastSnap && Math.hypot(downX - canvas.getBoundingClientRect().width, 0) >= 0;
-      const picked = useSnap && lastSnap ? { x: lastSnap.sx, y: lastSnap.sy, snapType: lastSnap.type, lineDir: lastSnap.dir } : { x: raw.x, y: raw.y, lineDir: void 0 };
+      const picked = lastSnap ? { x: lastSnap.sx, y: lastSnap.sy } : { x: raw.x, y: raw.y };
       doPick(picked);
     };
+    const recomputeLabel = () => {
+      const s = measureRef.current;
+      if (!s || s.picks.length !== 2) return;
+      const a = s.picks[0], b = s.picks[1];
+      const mode = measureModeRef.current;
+      let dist;
+      let suffix = "";
+      if (mode === "horizontal") {
+        dist = Math.abs(b.x - a.x);
+        suffix = " \u2194";
+      } else if (mode === "vertical") {
+        dist = Math.abs(b.y - a.y);
+        suffix = " \u2195";
+      } else {
+        const dx = b.x - a.x, dy = b.y - a.y;
+        dist = Math.sqrt(dx * dx + dy * dy);
+      }
+      setMeasureDistance(dist);
+      const label = ensureLabel();
+      label.style.opacity = "1";
+      label.textContent = `${formatMeasureDistance(dist)}${suffix}`;
+    };
+    measureRedrawRef.current = () => {
+      recomputeLabel();
+      updateOverlay();
+    };
     const doPick = (p) => {
       const s = measureRef.current;
       if (!s) return;
@@ -892,51 +984,17 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
         for (const m of s.markers) m.parentElement?.removeChild(m);
         s.markers = [];
         s.picks = [];
-        s.lineDir = null;
         s.line.style.display = "none";
         if (s.refLine) s.refLine.style.display = "none";
+        if (s.extLineA) s.extLineA.style.display = "none";
+        if (s.extLineB) s.extLineB.style.display = "none";
         if (s.label) s.label.style.opacity = "0";
         setMeasureDistance(null);
       }
-      if (measureMode === "perp" && s.picks.length === 0) {
-        if (!p.lineDir) {
-          const label = ensureLabel();
-          label.style.display = "";
-          label.style.opacity = "1";
-          label.style.left = `${pxFromScene(p.x, p.y).x}px`;
-          label.style.top = `${pxFromScene(p.x, p.y).y - 18}px`;
-          label.textContent = "\u22A5: snap to a line or corner first";
-          setTimeout(() => {
-            if (s.label && s.picks.length === 0) s.label.style.opacity = "0";
-          }, 1500);
-          return;
-        }
-        s.lineDir = p.lineDir;
-      }
       s.picks.push({ x: p.x, y: p.y });
       s.markers.push(makeMarker());
       if (s.picks.length === 2) {
-        const a = s.picks[0], b = s.picks[1];
-        let dist;
-        let suffix = "";
-        if (measureMode === "perp" && s.lineDir) {
-          const dx = b.x - a.x, dy = b.y - a.y;
-          dist = Math.abs(dx * s.lineDir.dy - dy * s.lineDir.dx);
-          suffix = " \u22A5";
-        } else if (measureMode === "horizontal") {
-          dist = Math.abs(b.x - a.x);
-          suffix = " \u2194";
-        } else if (measureMode === "vertical") {
-          dist = Math.abs(b.y - a.y);
-          suffix = " \u2195";
-        } else {
-          const dx = b.x - a.x, dy = b.y - a.y;
-          dist = Math.sqrt(dx * dx + dy * dy);
-        }
-        setMeasureDistance(dist);
-        const label = ensureLabel();
-        label.style.opacity = "1";
-        label.textContent = `${formatMeasureDistance(dist)}${suffix}`;
+        recomputeLabel();
       }
       updateOverlay();
     };
@@ -974,10 +1032,14 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
       }
       canvas.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("keydown", onKeyDown);
+      measureRedrawRef.current = null;
       teardown();
       setMeasureDistance(null);
     };
-  }, [measureEnabled, measureMode, loading, error]);
+  }, [measureEnabled, loading, error]);
+  useEffect(() => {
+    measureRedrawRef.current?.();
+  }, [measureMode, measureAutocad]);
   const toggleLayer = (name) => {
     setLayers((prev) => prev.map((l) => {
       if (l.name !== name) return l;
@@ -1067,52 +1129,60 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
           ]
         }
       ),
-      measureEnabled && /* @__PURE__ */ jsxs("div", { className: "flex items-stretch h-7 rounded border border-gray-200 overflow-hidden text-[11px] font-semibold", children: [
+      measureEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => setMeasureMode("point"),
-            className: `px-2 transition-colors ${measureMode === "point" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
-            title: "Point \u2014 straight-line distance between two picks",
-            children: "Point"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setMeasureMode("perp"),
-            className: `px-2 transition-colors ${measureMode === "perp" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
-            title: "Perpendicular \u2014 click on a line first, then pick a point. Reports the perpendicular distance.",
+            onClick: () => {
+              setMeasureAutocad((prev) => {
+                const next = !prev;
+                if (next && measureMode === "point") setMeasureMode("horizontal");
+                return next;
+              });
+            },
+            className: btn + (measureAutocad ? " bg-orange-100 text-orange-700" : ""),
+            title: measureAutocad ? "AutoCAD dim style is ON \u2014 extension lines + arrows" : "AutoCAD dim style is OFF \u2014 plain line. Click to turn on (also switches to H if you're in Point).",
             children: "\u22A5"
           }
         ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setMeasureMode("horizontal"),
-            className: `px-2 transition-colors ${measureMode === "horizontal" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
-            title: "Horizontal \u2014 distance along the X axis between two picks (AutoCAD DIMLINEAR horizontal)",
-            children: "H"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => setMeasureMode("vertical"),
-            className: `px-2 transition-colors ${measureMode === "vertical" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
-            title: "Vertical \u2014 distance along the Y axis between two picks (AutoCAD DIMLINEAR vertical)",
-            children: "V"
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch h-7 rounded border border-gray-200 overflow-hidden text-[11px] font-semibold", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setMeasureMode("point"),
+              className: `px-2 transition-colors ${measureMode === "point" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+              title: "Point \u2014 straight-line (Euclidean) distance between two picks",
+              children: "Point"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setMeasureMode("horizontal"),
+              className: `px-2 transition-colors ${measureMode === "horizontal" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+              title: "Horizontal \u2014 distance along the X axis between two picks (AutoCAD DIMLINEAR horizontal)",
+              children: "H"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setMeasureMode("vertical"),
+              className: `px-2 transition-colors ${measureMode === "vertical" ? "bg-orange-500 text-white" : "bg-white text-gray-600 hover:bg-gray-50"}`,
+              title: "Vertical \u2014 distance along the Y axis between two picks (AutoCAD DIMLINEAR vertical)",
+              children: "V"
+            }
+          )
+        ] })
       ] }),
       measureEnabled && measureDistance !== null && /* @__PURE__ */ jsxs(
         "div",
         {
           className: "px-2 py-1 text-[11px] font-mono font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded whitespace-nowrap",
-          title: measureMode === "perp" ? "Perpendicular distance from second pick to first line" : measureMode === "horizontal" ? "Horizontal distance (\u0394x) between the two picked points" : measureMode === "vertical" ? "Vertical distance (\u0394y) between the two picked points" : "Straight-line distance between the two picked points",
+          title: measureMode === "horizontal" ? "Horizontal distance (\u0394x) between the two picked points" : measureMode === "vertical" ? "Vertical distance (\u0394y) between the two picked points" : "Straight-line distance between the two picked points",
           children: [
             formatMeasureDistance(measureDistance),
-            measureMode === "perp" ? " \u22A5" : measureMode === "horizontal" ? " \u2194" : measureMode === "vertical" ? " \u2195" : ""
+            measureMode === "horizontal" ? " \u2194" : measureMode === "vertical" ? " \u2195" : ""
           ]
         }
       ),
@@ -2476,5 +2546,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-TB72OMUU.js.map
-//# sourceMappingURL=chunk-TB72OMUU.js.map
+//# sourceMappingURL=chunk-HADXZNYO.js.map
+//# sourceMappingURL=chunk-HADXZNYO.js.map