react-os-shell 0.3.14 → 0.3.18

package/dist/{chunk-S6YDMZ6X.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,
@@ -759,7 +797,7 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
       const s = measureRef.current;
       if (s.label) return s.label;
       const el = document.createElement("div");
-      el.style.cssText = `position:absolute;transform:translate(-50%,-50%);padding:2px 6px;font-size:11px;font-weight:600;font-family:system-ui,-apple-system,sans-serif;background:rgba(255,136,0,0.95);color:#fff;border-radius:4px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.25);pointer-events:none;`;
+      el.style.cssText = `position:absolute;left:-9999px;top:-9999px;transform:translate(-50%,-50%);padding:2px 6px;font-size:11px;font-weight:600;font-family:system-ui,-apple-system,sans-serif;background:rgba(255,136,0,0.95);color:#fff;border-radius:4px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.25);pointer-events:none;`;
       overlay.appendChild(el);
       s.label = el;
       return el;
@@ -772,34 +810,36 @@ function DxfPanel({ url, filename, onDownload, onEmail }) {
     const computeRenderedEnds = () => {
       const s = measureRef.current;
       const a = s.picks[0];
-      let 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 } };
+      const b = s.picks[1];
+      const mode = measureModeRef.current;
+      if (mode === "horizontal") {
+        return { from: a, to: { x: b.x, y: a.y } };
+      }
+      if (mode === "vertical") {
+        return { from: a, to: { x: a.x, y: b.y } };
       }
       return { from: a, to: b };
     };
     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);
-      if (measureMode === "perp" && s.picks.length >= 1 && s.lineDir && s.refLine) {
+      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;
         const screenSpan = Math.hypot(w, h) * 4;
         const ap = pxFromScene(a.x, a.y);
-        const probe = pxFromScene(a.x + s.lineDir.dx, a.y + s.lineDir.dy);
+        const probe = pxFromScene(a.x + refDir.dx, a.y + refDir.dy);
         const pxLen = Math.hypot(probe.x - ap.x, probe.y - ap.y) || 1;
         const sceneStep = screenSpan / pxLen;
-        const x0 = a.x - s.lineDir.dx * sceneStep;
-        const y0 = a.y - s.lineDir.dy * sceneStep;
-        const x1 = a.x + s.lineDir.dx * sceneStep;
-        const y1 = a.y + s.lineDir.dy * sceneStep;
+        const x0 = a.x - refDir.dx * sceneStep;
+        const y0 = a.y - refDir.dy * sceneStep;
+        const x1 = a.x + refDir.dx * sceneStep;
+        const y1 = a.y + refDir.dy * sceneStep;
         const p0 = pxFromScene(x0, y0);
         const p1 = pxFromScene(x1, y1);
         s.refLine.setAttribute("x1", String(p0.x));
@@ -811,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);
@@ -819,12 +860,49 @@ 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) {
-          s.label.style.left = `${(fp.x + tp.x) / 2}px`;
-          s.label.style.top = `${(fp.y + tp.y) / 2}px`;
+          const cx = (fp.x + tp.x) / 2;
+          const cy = (fp.y + tp.y) / 2;
+          s.label.style.left = `${cx}px`;
+          s.label.style.top = `${cy}px`;
+          const w = canvas.clientWidth, h = canvas.clientHeight;
+          s.label.style.display = cx < 0 || cy < 0 || cx > w || cy > h ? "none" : "";
         }
       } 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;
@@ -870,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;
@@ -881,44 +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.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 {
-          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();
     };
@@ -956,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;
@@ -1049,30 +1129,63 @@ 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: [
-        /* @__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"
-          }
-        ),
+      measureEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__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"
           }
-        )
-      ] }),
-      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" : "Straight-line distance between the two picked points", children: [
-        formatMeasureDistance(measureDistance),
-        measureMode === "perp" ? " \u22A5" : ""
+        ),
+        /* @__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 === "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 === "horizontal" ? " \u2194" : measureMode === "vertical" ? " \u2195" : ""
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx("button", { onClick: handleResetView, className: btn, title: "Fit drawing to view", children: "Fit" }),
       /* @__PURE__ */ jsxs("button", { onClick: onDownload ?? handleDefaultDownload, className: btn, children: [
         /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" }) }),
@@ -1306,6 +1419,31 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
     if (!OV || !v?.viewer) return;
     try {
       v.viewer.SetEdgeSettings(new OV.EdgeSettings(showEdges, hexToRgb(OV, edgeColor), edgeThreshold));
+      const s = sectionRef.current;
+      if (s) {
+        const helperEdges = [];
+        v.viewer.mainModel?.EnumerateEdges?.((edge) => {
+          if (edge.userData?.__sectionHelper) helperEdges.push(edge);
+        });
+        for (const e of helperEdges) {
+          e.parent?.remove(e);
+          e.geometry?.dispose?.();
+          e.material?.dispose?.();
+        }
+        const plane = s.plane;
+        const applyMatClip = (mat) => {
+          if (!mat || s.materialState.has(mat)) return;
+          s.materialState.set(mat, { clippingPlanes: mat.clippingPlanes, clipShadows: mat.clipShadows });
+          mat.clippingPlanes = [plane];
+          mat.clipShadows = true;
+          mat.needsUpdate = true;
+        };
+        v.viewer.mainModel?.EnumerateEdges?.((edge) => {
+          const mat = edge.material;
+          if (Array.isArray(mat)) for (const m of mat) applyMatClip(m);
+          else applyMatClip(mat);
+        });
+      }
       v.viewer.Render?.();
     } catch {
     }
@@ -1738,6 +1876,8 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       if (s.label) return s.label;
       const el = document.createElement("div");
       el.style.position = "absolute";
+      el.style.left = "-9999px";
+      el.style.top = "-9999px";
       el.style.transform = "translate(-50%, -50%)";
       el.style.padding = "2px 6px";
       el.style.fontSize = "11px";
@@ -1768,7 +1908,8 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
       const y = (-projected.y + 1) / 2 * rect.height;
       s.label.style.left = `${x}px`;
       s.label.style.top = `${y}px`;
-      s.label.style.opacity = projected.z > 1 ? "0" : "1";
+      const offScreen = x < 0 || y < 0 || x > rect.width || y > rect.height;
+      s.label.style.opacity = projected.z > 1 || offScreen ? "0" : "1";
     };
     const tick = () => {
       const s = measureRef.current;
@@ -2405,5 +2546,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-S6YDMZ6X.js.map
-//# sourceMappingURL=chunk-S6YDMZ6X.js.map
+//# sourceMappingURL=chunk-HADXZNYO.js.map
+//# sourceMappingURL=chunk-HADXZNYO.js.map