@mlightcad/cad-simple-viewer 1.3.2 → 1.3.3

package/dist/index.js

@@ -1527,7 +1527,7 @@ class e0 extends nr {
    * @param message - The prompt message shown to the user.
    */
   constructor(e) {
-    super(e), this._useBasePoint = !1, this._useDashedLine = !1, this._useAngleBase = !1, this._defaultValue = 0, this._useDefaultValue = !1, this._allowZero = !0, this._allowNegative = !1;
+    super(e), this._useBasePoint = !0, this._useDashedLine = !0, this._useAngleBase = !1, this._defaultValue = 0, this._useDefaultValue = !1, this._allowZero = !0, this._allowNegative = !1;
   }
   /**
    * Gets or sets the base point for the angle prompt.
@@ -1690,7 +1690,7 @@ class ml extends ys {
    * @param message - The message shown to the user in the prompt.
    */
   constructor(e) {
-    super(e), this._useBasePoint = !1, this._useDashedLine = !1, this._only2d = !1, this.allowNegative = !1;
+    super(e), this._useBasePoint = !0, this._useDashedLine = !0, this._only2d = !0, this.allowNegative = !1;
   }
   /**
    * Gets or sets the base point for the distance prompt.
@@ -2189,6 +2189,81 @@ class vl {
     return this.validateFn({ x: e, y: t });
   }
 }
+class xl {
+  constructor(e) {
+    this.container = null, this.baseLine = null, this.perpLineAtBase = null, this.perpLineAtCursor = null, this.connectorLine = null, this.labelEl = null, this.angleLabelEl = null, this.xAxisLine = null, this.angleSvg = null, this.anglePath = null, this.options = {}, this.view = e;
+  }
+  /** Returns the parent container element that holds all rubber-band HTML elements. */
+  get element() {
+    return this.container;
+  }
+  /**
+   * Starts the rubber-band preview.
+   * @param basePoint The starting point in world coordinates.
+   */
+  start(e, t) {
+    this.basePoint = new He(e), this.options = t || {};
+    const n = this.options.color || "#0f0";
+    this.container = document.createElement("div"), this.container.style.position = "fixed", this.container.style.left = "0", this.container.style.top = "0", this.container.style.pointerEvents = "none", this.container.style.zIndex = "99999", document.body.appendChild(this.container), this.baseLine = document.createElement("div"), this.baseLine.style.position = "fixed", this.baseLine.style.borderTop = `1px solid ${n}`, this.container.appendChild(this.baseLine);
+    const s = () => {
+      const i = document.createElement("div");
+      return i.style.position = "fixed", i.style.borderTop = `1px dashed ${n}`, this.container.appendChild(i), i;
+    };
+    this.options.showBaseLineOnly || (this.perpLineAtBase = s(), this.perpLineAtCursor = s(), this.connectorLine = s(), this.labelEl = document.createElement("div"), this.labelEl.style.position = "fixed", this.labelEl.style.color = n, this.labelEl.style.fontSize = "12px", this.labelEl.style.padding = "2px 4px", this.labelEl.style.borderRadius = "4px", this.container.appendChild(this.labelEl), this.xAxisLine = document.createElement("div"), this.xAxisLine.style.position = "fixed", this.xAxisLine.style.borderTop = `1px solid ${n}`, this.container.appendChild(this.xAxisLine), this.angleSvg = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "svg"
+    ), this.angleSvg.setAttribute(
+      "style",
+      "position:absolute; overflow:visible; pointer-events:none;"
+    ), this.anglePath = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "path"
+    ), this.anglePath.setAttribute("fill", "none"), this.anglePath.setAttribute("stroke", n), this.anglePath.setAttribute("stroke-width", "1"), this.anglePath.setAttribute("stroke-dasharray", "4 4"), this.angleSvg.appendChild(this.anglePath), this.container.appendChild(this.angleSvg), this.angleLabelEl = document.createElement("div"), this.angleLabelEl.style.position = "fixed", this.angleLabelEl.style.color = n, this.angleLabelEl.style.fontSize = "12px", this.angleLabelEl.style.padding = "2px 4px", this.angleLabelEl.style.borderRadius = "4px", this.container.appendChild(this.angleLabelEl));
+  }
+  /**
+   * Updates the rubber-band lines to a new target point.
+   * @param targetPoint The current cursor position in world coordinates.
+   */
+  update(e) {
+    if (!this.container || !this.basePoint || !this.baseLine) return;
+    const t = this.view.canvas.getBoundingClientRect(), n = this.view.wcs2Cwcs(this.basePoint), s = this.view.wcs2Cwcs(e), i = t.left, a = t.top, o = (x, v, w) => {
+      const S = w.x - v.x, _ = w.y - v.y, T = Math.sqrt(S * S + _ * _), k = Math.atan2(_, S) * (180 / Math.PI);
+      x.style.width = `${T}px`, x.style.transformOrigin = "0 0", x.style.transform = `translate(${v.x + i}px, ${v.y + a}px) rotate(${k}deg)`;
+    };
+    if (o(this.baseLine, n, s), this.options.showBaseLineOnly || !this.perpLineAtBase || !this.perpLineAtCursor || !this.connectorLine)
+      return;
+    const c = s.x - n.x, l = s.y - n.y, h = Math.sqrt(c * c + l * l);
+    if (h === 0) {
+      this.perpLineAtBase && (this.perpLineAtBase.style.width = "0px"), this.perpLineAtCursor && (this.perpLineAtCursor.style.width = "0px"), this.connectorLine && (this.connectorLine.style.width = "0px"), this.xAxisLine && (this.xAxisLine.style.width = "0px"), this.anglePath && this.anglePath.setAttribute("d", ""), this.angleLabelEl && (this.angleLabelEl.style.display = "none");
+      return;
+    }
+    const d = this.options.perpendicularLength ?? 50, u = -l / h, f = c / h, y = { x: n.x + u * d, y: n.y + f * d }, m = { x: s.x + u * d, y: s.y + f * d };
+    if (o(this.perpLineAtBase, n, y), o(this.perpLineAtCursor, s, m), o(this.connectorLine, y, m), this.labelEl) {
+      const x = (y.x + m.x) / 2 + i, v = (y.y + m.y) / 2 + a - 24, w = Math.sqrt(
+        (e.x - this.basePoint.x) ** 2 + (e.y - this.basePoint.y) ** 2
+      );
+      this.labelEl.textContent = w.toFixed(3), this.labelEl.style.left = `${x - 20}px`, this.labelEl.style.top = `${v}px`, this.labelEl.style.display = "";
+    }
+    if (this.xAxisLine) {
+      const x = { x: n.x + h, y: n.y };
+      o(this.xAxisLine, n, x);
+    }
+    if (this.angleSvg && this.anglePath && this.angleLabelEl) {
+      const x = h, v = n.x + i, w = n.y + a, S = Math.atan2(s.y - n.y, s.x - n.x), _ = S * 180 / Math.PI, T = S / 2, k = v - x, B = w - x, A = x * 2;
+      this.angleSvg.style.left = `${k}px`, this.angleSvg.style.top = `${B}px`, this.angleSvg.setAttribute("width", `${A}`), this.angleSvg.setAttribute("height", `${A}`), this.angleSvg.setAttribute("viewBox", `0 0 ${A} ${A}`);
+      const G = x, j = x, Y = G + x, he = j, ne = G + x * Math.cos(S), H = j + x * Math.sin(S), $ = Math.abs(S) > Math.PI ? "1" : "0", q = S >= 0 ? "1" : "0", K = `M ${Y} ${he} A ${x} ${x} 0 ${$} ${q} ${ne} ${H}`;
+      this.anglePath.setAttribute("d", K);
+      const J = `${Math.abs(_).toFixed(1)}°`, ie = v + x * Math.cos(T), z = w + x * Math.sin(T);
+      this.angleLabelEl.textContent = J;
+      const V = 40;
+      this.angleLabelEl.style.left = `${ie - V / 2}px`, this.angleLabelEl.style.top = `${z - 12}px`, this.angleLabelEl.style.display = "";
+    }
+  }
+  /** Disposes all HTML elements associated with this rubber-band. */
+  dispose() {
+    this.container && this.container.remove(), this.container = null, this.baseLine = null, this.perpLineAtBase = null, this.perpLineAtCursor = null, this.connectorLine = null, this.labelEl = null, this.angleLabelEl = null, this.xAxisLine = null, this.angleSvg = null, this.anglePath = null;
+  }
+}
 const rn = class rn {
   // ---------------------------------------------------------------------------
   // CONSTRUCTOR
@@ -2201,7 +2276,10 @@ const rn = class rn {
    *                validation, and display mode.
    */
   constructor(e, t) {
-    this.lastPoint = null, this.visible = !1, this.disposed = !1, this.view = e, t.disableOSnap || (this.osnapMarkerManager = new bl(e)), this.parent = t.parent ?? document.body, this.validateFn = t.validate, this.getDynamicValue = t.getDynamicValue, this.drawPreview = t.drawPreview, this.onCommit = t.onCommit, this.onChange = t.onChange, this.onCancel = t.onCancel, this.container = document.createElement("div"), this.container.className = "ml-floating-input";
+    this.lastPoint = null, this.visible = !1, this.disposed = !1, this.view = e, t.disableOSnap || (this.osnapMarkerManager = new bl(e)), t.basePoint && (this.rubberBand = new xl(this.view), this.rubberBand.start(t.basePoint, {
+      color: "#0f0",
+      showBaseLineOnly: t.showBaseLineOnly
+    })), this.parent = t.parent ?? document.body, this.validateFn = t.validate, this.getDynamicValue = t.getDynamicValue, this.drawPreview = t.drawPreview, this.onCommit = t.onCommit, this.onChange = t.onChange, this.onCancel = t.onCancel, this.container = document.createElement("div"), this.container.className = "ml-floating-input";
     const n = document.createElement("span");
     n.className = "ml-floating-input-label", n.textContent = t.message ?? "", this.container.appendChild(n), this.inputs = new vl({
       parent: this.container,
@@ -2290,8 +2368,8 @@ const rn = class rn {
    * Safe to call multiple times; subsequent calls have no effect.
    */
   dispose() {
-    var e;
-    this.disposed || (this.disposed = !0, (e = this.osnapMarkerManager) == null || e.clear(), this.inputs.dispose(), this.removeListener(!0), this.container.remove());
+    var e, t;
+    this.disposed || (this.disposed = !0, (e = this.osnapMarkerManager) == null || e.clear(), this.inputs.dispose(), (t = this.rubberBand) == null || t.dispose(), this.removeListener(!0), this.container.remove());
   }
   /**
    * Sets position of this floating input
@@ -2338,10 +2416,10 @@ const rn = class rn {
    * @param e The mouse move event containing the current cursor position.
    */
   handleMouseMove(e) {
-    var s;
+    var s, i;
     if (!this.visible) return;
     const t = this.getPosition(e), n = this.getDynamicValue(t);
-    this.inputs.setValue(n.raw), this.inputs.focused || this.inputs.focus(), (s = this.drawPreview) == null || s.call(this, t);
+    this.inputs.setValue(n.raw), (s = this.rubberBand) == null || s.update(t), this.inputs.focused || this.inputs.focus(), (i = this.drawPreview) == null || i.call(this, t);
   }
   /**
    * Handles click events to commit inputs.
@@ -2431,81 +2509,6 @@ const rn = class rn {
 };
 rn.stylesInjected = !1;
 let Wr = rn;
-class xl {
-  constructor(e) {
-    this.container = null, this.baseLine = null, this.perpLineAtBase = null, this.perpLineAtCursor = null, this.connectorLine = null, this.labelEl = null, this.angleLabelEl = null, this.xAxisLine = null, this.angleSvg = null, this.anglePath = null, this.options = {}, this.view = e;
-  }
-  /** Returns the parent container element that holds all rubber-band HTML elements. */
-  get element() {
-    return this.container;
-  }
-  /**
-   * Starts the rubber-band preview.
-   * @param basePoint The starting point in world coordinates.
-   */
-  start(e, t) {
-    this.basePoint = new He(e), this.options = t || {};
-    const n = this.options.color || "#0f0";
-    this.container = document.createElement("div"), this.container.style.position = "fixed", this.container.style.left = "0", this.container.style.top = "0", this.container.style.pointerEvents = "none", this.container.style.zIndex = "99999", document.body.appendChild(this.container), this.baseLine = document.createElement("div"), this.baseLine.style.position = "fixed", this.baseLine.style.borderTop = `1px solid ${n}`, this.container.appendChild(this.baseLine);
-    const s = () => {
-      const i = document.createElement("div");
-      return i.style.position = "fixed", i.style.borderTop = `1px dashed ${n}`, this.container.appendChild(i), i;
-    };
-    this.options.showBaseLineOnly || (this.perpLineAtBase = s(), this.perpLineAtCursor = s(), this.connectorLine = s(), this.labelEl = document.createElement("div"), this.labelEl.style.position = "fixed", this.labelEl.style.color = n, this.labelEl.style.fontSize = "12px", this.labelEl.style.padding = "2px 4px", this.labelEl.style.borderRadius = "4px", this.container.appendChild(this.labelEl), this.xAxisLine = document.createElement("div"), this.xAxisLine.style.position = "fixed", this.xAxisLine.style.borderTop = `1px solid ${n}`, this.container.appendChild(this.xAxisLine), this.angleSvg = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "svg"
-    ), this.angleSvg.setAttribute(
-      "style",
-      "position:absolute; overflow:visible; pointer-events:none;"
-    ), this.anglePath = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path"
-    ), this.anglePath.setAttribute("fill", "none"), this.anglePath.setAttribute("stroke", n), this.anglePath.setAttribute("stroke-width", "1"), this.anglePath.setAttribute("stroke-dasharray", "4 4"), this.angleSvg.appendChild(this.anglePath), this.container.appendChild(this.angleSvg), this.angleLabelEl = document.createElement("div"), this.angleLabelEl.style.position = "fixed", this.angleLabelEl.style.color = n, this.angleLabelEl.style.fontSize = "12px", this.angleLabelEl.style.padding = "2px 4px", this.angleLabelEl.style.borderRadius = "4px", this.container.appendChild(this.angleLabelEl));
-  }
-  /**
-   * Updates the rubber-band lines to a new target point.
-   * @param targetPoint The current cursor position in world coordinates.
-   */
-  update(e) {
-    if (!this.container || !this.basePoint || !this.baseLine) return;
-    const t = this.view.canvas.getBoundingClientRect(), n = this.view.wcs2Cwcs(this.basePoint), s = this.view.wcs2Cwcs(e), i = t.left, a = t.top, o = (x, v, w) => {
-      const S = w.x - v.x, _ = w.y - v.y, T = Math.sqrt(S * S + _ * _), k = Math.atan2(_, S) * (180 / Math.PI);
-      x.style.width = `${T}px`, x.style.transformOrigin = "0 0", x.style.transform = `translate(${v.x + i}px, ${v.y + a}px) rotate(${k}deg)`;
-    };
-    if (o(this.baseLine, n, s), this.options.showBaseLineOnly || !this.perpLineAtBase || !this.perpLineAtCursor || !this.connectorLine)
-      return;
-    const c = s.x - n.x, l = s.y - n.y, h = Math.sqrt(c * c + l * l);
-    if (h === 0) {
-      this.perpLineAtBase && (this.perpLineAtBase.style.width = "0px"), this.perpLineAtCursor && (this.perpLineAtCursor.style.width = "0px"), this.connectorLine && (this.connectorLine.style.width = "0px"), this.xAxisLine && (this.xAxisLine.style.width = "0px"), this.anglePath && this.anglePath.setAttribute("d", ""), this.angleLabelEl && (this.angleLabelEl.style.display = "none");
-      return;
-    }
-    const d = this.options.perpendicularLength ?? 50, u = -l / h, f = c / h, y = { x: n.x + u * d, y: n.y + f * d }, m = { x: s.x + u * d, y: s.y + f * d };
-    if (o(this.perpLineAtBase, n, y), o(this.perpLineAtCursor, s, m), o(this.connectorLine, y, m), this.labelEl) {
-      const x = (y.x + m.x) / 2 + i, v = (y.y + m.y) / 2 + a - 24, w = Math.sqrt(
-        (e.x - this.basePoint.x) ** 2 + (e.y - this.basePoint.y) ** 2
-      );
-      this.labelEl.textContent = w.toFixed(3), this.labelEl.style.left = `${x - 20}px`, this.labelEl.style.top = `${v}px`, this.labelEl.style.display = "";
-    }
-    if (this.xAxisLine) {
-      const x = { x: n.x + h, y: n.y };
-      o(this.xAxisLine, n, x);
-    }
-    if (this.angleSvg && this.anglePath && this.angleLabelEl) {
-      const x = h, v = n.x + i, w = n.y + a, S = Math.atan2(s.y - n.y, s.x - n.x), _ = S * 180 / Math.PI, T = S / 2, k = v - x, B = w - x, A = x * 2;
-      this.angleSvg.style.left = `${k}px`, this.angleSvg.style.top = `${B}px`, this.angleSvg.setAttribute("width", `${A}`), this.angleSvg.setAttribute("height", `${A}`), this.angleSvg.setAttribute("viewBox", `0 0 ${A} ${A}`);
-      const G = x, j = x, Y = G + x, he = j, ne = G + x * Math.cos(S), H = j + x * Math.sin(S), $ = Math.abs(S) > Math.PI ? "1" : "0", q = S >= 0 ? "1" : "0", K = `M ${Y} ${he} A ${x} ${x} 0 ${$} ${q} ${ne} ${H}`;
-      this.anglePath.setAttribute("d", K);
-      const J = `${Math.abs(_).toFixed(1)}°`, ie = v + x * Math.cos(T), z = w + x * Math.sin(T);
-      this.angleLabelEl.textContent = J;
-      const V = 40;
-      this.angleLabelEl.style.left = `${ie - V / 2}px`, this.angleLabelEl.style.top = `${z - 12}px`, this.angleLabelEl.style.display = "";
-    }
-  }
-  /** Disposes all HTML elements associated with this rubber-band. */
-  dispose() {
-    this.container && this.container.remove(), this.container = null, this.baseLine = null, this.perpLineAtBase = null, this.perpLineAtCursor = null, this.connectorLine = null, this.labelEl = null, this.angleLabelEl = null, this.xAxisLine = null, this.angleSvg = null, this.anglePath = null;
-  }
-}
 const sn = class sn {
   /**
    * Construct the manager and attach mousemove listener used for floating input
@@ -2606,8 +2609,9 @@ const sn = class sn {
       message: e.message,
       twoInputs: !1,
       jig: e.jig,
-      showBaseLineOnly: !1,
+      showBaseLineOnly: !e.useDashedLine,
       useBasePoint: !0,
+      basePoint: e.basePoint,
       handler: n,
       getDynamicValue: t
     });
@@ -2625,8 +2629,9 @@ const sn = class sn {
       message: e.message,
       twoInputs: !1,
       jig: e.jig,
-      showBaseLineOnly: !1,
+      showBaseLineOnly: !e.useDashedLine,
       useBasePoint: !0,
+      basePoint: e.basePoint,
       handler: n,
       getDynamicValue: t
     });
@@ -2700,6 +2705,7 @@ const sn = class sn {
       jig: e.jig,
       showBaseLineOnly: !e.useDashedLine,
       useBasePoint: e.useBasePoint,
+      basePoint: e.basePoint,
       cleanup: t,
       handler: i,
       getDynamicValue: s,
@@ -2722,11 +2728,16 @@ const sn = class sn {
           isValid: u != null,
           value: u ?? void 0
         };
-      }, i = new Wr(this.view, {
+      };
+      let i;
+      e.useBasePoint && (e.basePoint ? i = e.basePoint : this.lastPoint && (i = { x: this.lastPoint.x, y: this.lastPoint.y }));
+      const a = new Wr(this.view, {
         parent: this.view.canvas,
         twoInputs: e.twoInputs,
         message: e.message,
         disableOSnap: e.disableOSnap,
+        showBaseLineOnly: e.showBaseLineOnly,
+        basePoint: i,
         validate: s,
         getDynamicValue: e.getDynamicValue,
         drawPreview: (d) => {
@@ -2735,24 +2746,18 @@ const sn = class sn {
             const f = e.getDynamicValue(d);
             e.jig.update(f.value), e.jig.render();
           }
-          a && (a == null || a.update(d)), (u = e.drawPreview) == null || u.call(e, d);
+          (u = e.drawPreview) == null || u.call(e, d);
         },
         onCommit: (d) => {
-          c(d), i.lastPoint && (this.lastPoint = {
-            x: i.lastPoint.x,
-            y: i.lastPoint.y
+          c(d), a.lastPoint && (this.lastPoint = {
+            x: a.lastPoint.x,
+            y: a.lastPoint.y
           });
         },
         onCancel: () => l()
-      });
-      let a;
-      this.lastPoint && e.useBasePoint && (a = new xl(this.view), a.start(this.lastPoint, {
-        color: "#0f0",
-        showBaseLineOnly: e.showBaseLineOnly
-      }));
-      const o = () => {
+      }), o = () => {
         var d, u;
-        this.active = !1, (d = e.cleanup) == null || d.call(e), (u = e.jig) == null || u.end(), document.removeEventListener("keydown", h), a == null || a.dispose(), i.dispose();
+        this.active = !1, (d = e.cleanup) == null || d.call(e), (u = e.jig) == null || u.end(), document.removeEventListener("keydown", h), a.dispose();
       }, c = (d) => {
         o(), t(d);
       }, l = () => {
@@ -2760,7 +2765,7 @@ const sn = class sn {
       }, h = (d) => {
         d.key === "Escape" && l();
       };
-      document.addEventListener("keydown", h), i.showAt(this.view.curMousePos);
+      document.addEventListener("keydown", h), a.showAt(this.view.curMousePos);
     });
   }
 };