web-remarq 0.4.7 → 0.4.8

package/dist/web-remarq.global.global.js

@@ -1239,6 +1239,44 @@ var WebRemarq = (() => {
     }
   };
 
+  // src/ui/transform.ts
+  function getElementToViewportMatrix(el) {
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    if (w === 0 && h === 0) return new DOMMatrix();
+    const rect = el.getBoundingClientRect();
+    if (Math.abs(rect.width - w) < 1 && Math.abs(rect.height - h) < 1) {
+      return new DOMMatrix([1, 0, 0, 1, rect.left, rect.top]);
+    }
+    const savedPosition = el.style.position;
+    const cs = getComputedStyle(el);
+    if (cs.position === "static") {
+      el.style.position = "relative";
+    }
+    const probe = document.createElement("div");
+    probe.style.cssText = "position:absolute;width:0;height:0;margin:0;padding:0;border:0;pointer-events:none;";
+    el.appendChild(probe);
+    probe.style.left = "0px";
+    probe.style.top = "0px";
+    let r = probe.getBoundingClientRect();
+    const tlx = r.left, tly = r.top;
+    probe.style.left = `${w}px`;
+    probe.style.top = "0px";
+    r = probe.getBoundingClientRect();
+    const trx = r.left, try_ = r.top;
+    probe.style.left = "0px";
+    probe.style.top = `${h}px`;
+    r = probe.getBoundingClientRect();
+    const blx = r.left, bly = r.top;
+    probe.remove();
+    el.style.position = savedPosition;
+    const a = (trx - tlx) / w;
+    const b = (try_ - tly) / w;
+    const c = (blx - tlx) / h;
+    const d = (bly - tly) / h;
+    return new DOMMatrix([a, b, c, d, tlx, tly]);
+  }
+
   // src/ui/overlay.ts
   var Overlay = class {
     constructor(container) {
@@ -1255,40 +1293,16 @@ var WebRemarq = (() => {
     show(target) {
       try {
         const rect = target.getBoundingClientRect();
-        const cs = window.getComputedStyle(target);
-        const transform = cs.transform;
-        const hasTransform = transform && transform !== "none";
+        const w = target.offsetWidth;
+        const h = target.offsetHeight;
+        const matrix = getElementToViewportMatrix(target);
         this.overlayEl.style.display = "block";
-        if (hasTransform) {
-          const w = target.offsetWidth;
-          const h = target.offsetHeight;
-          const origin = cs.transformOrigin;
-          const [ox, oy] = origin.split(" ").map(parseFloat);
-          const matrix = new DOMMatrix(transform);
-          const corners = [
-            matrix.transformPoint(new DOMPoint(-ox, -oy)),
-            matrix.transformPoint(new DOMPoint(w - ox, -oy)),
-            matrix.transformPoint(new DOMPoint(-ox, h - oy)),
-            matrix.transformPoint(new DOMPoint(w - ox, h - oy))
-          ];
-          const minX = Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x);
-          const minY = Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y);
-          const overlayX = rect.left - minX - ox;
-          const overlayY = rect.top - minY - oy;
-          this.overlayEl.style.left = `${overlayX}px`;
-          this.overlayEl.style.top = `${overlayY}px`;
-          this.overlayEl.style.width = `${w}px`;
-          this.overlayEl.style.height = `${h}px`;
-          this.overlayEl.style.transform = transform;
-          this.overlayEl.style.transformOrigin = origin;
-        } else {
-          this.overlayEl.style.left = `${rect.left}px`;
-          this.overlayEl.style.top = `${rect.top}px`;
-          this.overlayEl.style.width = `${rect.width}px`;
-          this.overlayEl.style.height = `${rect.height}px`;
-          this.overlayEl.style.transform = "";
-          this.overlayEl.style.transformOrigin = "";
-        }
+        this.overlayEl.style.left = "0px";
+        this.overlayEl.style.top = "0px";
+        this.overlayEl.style.width = `${w}px`;
+        this.overlayEl.style.height = `${h}px`;
+        this.overlayEl.style.transform = matrix.toString();
+        this.overlayEl.style.transformOrigin = "0 0";
         this.tooltipEl.textContent = describeElement(target);
         this.tooltipEl.style.display = "block";
         this.positionTooltip(rect.left, rect.top - 28);
@@ -1363,25 +1377,6 @@ var WebRemarq = (() => {
   function parsePx(value) {
     return parseFloat(value) || 0;
   }
-  function computeUntransformedOrigin(rect, offsetW, offsetH, transform, transformOrigin) {
-    if (!transform || transform === "none") {
-      return { x: rect.left, y: rect.top };
-    }
-    const [ox, oy] = transformOrigin.split(" ").map(parseFloat);
-    const matrix = new DOMMatrix(transform);
-    const corners = [
-      matrix.transformPoint(new DOMPoint(-ox, -oy)),
-      matrix.transformPoint(new DOMPoint(offsetW - ox, -oy)),
-      matrix.transformPoint(new DOMPoint(-ox, offsetH - oy)),
-      matrix.transformPoint(new DOMPoint(offsetW - ox, offsetH - oy))
-    ];
-    const minX = Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x);
-    const minY = Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y);
-    return {
-      x: rect.left - minX - ox,
-      y: rect.top - minY - oy
-    };
-  }
   var SpacingOverlay = class {
     constructor(parent) {
       this.parent = parent;
@@ -1414,28 +1409,19 @@ var WebRemarq = (() => {
       if (target === this.lastTarget) return;
       this.lastTarget = target;
       try {
-        const rect = target.getBoundingClientRect();
         const cs = window.getComputedStyle(target);
         const margin = this.readSides(cs, "margin");
         const padding = this.readSides(cs, "padding");
         const border = this.readBorderSides(cs);
-        const transform = cs.transform;
-        const transformOrigin = cs.transformOrigin;
-        const hasTransform = transform && transform !== "none";
         const w = target.offsetWidth;
         const h = target.offsetHeight;
-        const origin = computeUntransformedOrigin(rect, w, h, transform, transformOrigin);
-        this.containerEl.style.left = `${origin.x}px`;
-        this.containerEl.style.top = `${origin.y}px`;
+        const matrix = getElementToViewportMatrix(target);
+        this.containerEl.style.left = "0px";
+        this.containerEl.style.top = "0px";
         this.containerEl.style.width = `${w}px`;
         this.containerEl.style.height = `${h}px`;
-        if (hasTransform) {
-          this.containerEl.style.transform = transform;
-          this.containerEl.style.transformOrigin = transformOrigin;
-        } else {
-          this.containerEl.style.transform = "";
-          this.containerEl.style.transformOrigin = "";
-        }
+        this.containerEl.style.transform = matrix.toString();
+        this.containerEl.style.transformOrigin = "0 0";
         this.positionEl(
           this.marginEl,
           -margin.left,
@@ -1601,18 +1587,40 @@ var WebRemarq = (() => {
         this.renderGap(children[i], children[i + 1], gap, isRow);
       }
     }
+    /**
+     * Compute the parent's content box (border-box minus padding and border)
+     * to constrain gap dimensions to the actual content area.
+     */
+    getParentContentBox(parent) {
+      const rect = parent.getBoundingClientRect();
+      const cs = window.getComputedStyle(parent);
+      const pl = parsePx(cs.paddingLeft);
+      const pr = parsePx(cs.paddingRight);
+      const pt = parsePx(cs.paddingTop);
+      const pb = parsePx(cs.paddingBottom);
+      const bl = parsePx(cs.borderLeftWidth);
+      const br = parsePx(cs.borderRightWidth);
+      const bt = parsePx(cs.borderTopWidth);
+      const bb = parsePx(cs.borderBottomWidth);
+      return {
+        left: rect.left + bl + pl,
+        top: rect.top + bt + pt,
+        width: rect.width - bl - br - pl - pr,
+        height: rect.height - bt - bb - pt - pb
+      };
+    }
     renderGap(before, after, gap, isRow) {
       const rectBefore = before.getBoundingClientRect();
       const rectAfter = after.getBoundingClientRect();
       const parent = before.parentElement;
-      const parentRect = parent ? parent.getBoundingClientRect() : null;
+      const contentBox = parent ? this.getParentContentBox(parent) : null;
       const gapEl = document.createElement("div");
       gapEl.className = "remarq-spacing-gap";
       if (isRow) {
         const left = Math.min(rectBefore.right, rectAfter.right);
         const right = Math.max(rectBefore.left, rectAfter.left);
-        const top = parentRect ? parentRect.top : Math.min(rectBefore.top, rectAfter.top);
-        const height = parentRect ? parentRect.height : Math.max(rectBefore.height, rectAfter.height);
+        const top = contentBox ? contentBox.top : Math.min(rectBefore.top, rectAfter.top);
+        const height = contentBox ? contentBox.height : Math.max(rectBefore.height, rectAfter.height);
         gapEl.style.top = `${top}px`;
         gapEl.style.left = `${left}px`;
         gapEl.style.width = `${Math.abs(right - left)}px`;
@@ -1620,8 +1628,8 @@ var WebRemarq = (() => {
       } else {
         const top = Math.min(rectBefore.bottom, rectAfter.bottom);
         const bottom = Math.max(rectBefore.top, rectAfter.top);
-        const left = parentRect ? parentRect.left : Math.min(rectBefore.left, rectAfter.left);
-        const width = parentRect ? parentRect.width : Math.max(rectBefore.width, rectAfter.width);
+        const left = contentBox ? contentBox.left : Math.min(rectBefore.left, rectAfter.left);
+        const width = contentBox ? contentBox.width : Math.max(rectBefore.width, rectAfter.width);
         gapEl.style.top = `${top}px`;
         gapEl.style.left = `${left}px`;
         gapEl.style.width = `${width}px`;