web-remarq 0.4.7 → 0.4.9

package/dist/index.cjs

@@ -1239,6 +1239,44 @@ var Toolbar = class {
   }
 };
 
+// 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 Overlay = class {
   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);
@@ -1334,7 +1348,9 @@ function describeElement(el) {
   if (el.id) {
     parts.push(`#${el.id}`);
   }
-  const classes = Array.from(el.classList).filter((c) => !c.match(/^(sc-|css-)/) && !c.match(/^[a-zA-Z0-9]{8,}$/) && !c.match(/__[a-zA-Z0-9]{3,}$/)).slice(0, 2);
+  const classes = Array.from(el.classList).filter(
+    (c) => !c.match(/^(sc-|css-)/) && !c.match(/^[a-zA-Z0-9]{8,}$/) && !c.match(/__[a-zA-Z0-9]{3,}$/)
+  ).slice(0, 2);
   if (classes.length) {
     parts.push(`.${classes.join(".")}`);
   }
@@ -1363,25 +1379,6 @@ function getDirectText(el) {
 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 +1411,19 @@ var SpacingOverlay = class {
     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,
@@ -1448,7 +1436,13 @@ var SpacingOverlay = class {
       const contentTop = border.top + padding.top;
       const contentW = w - border.left - border.right - padding.left - padding.right;
       const contentH = h - border.top - border.bottom - padding.top - padding.bottom;
-      this.positionEl(this.contentEl, contentLeft, contentTop, contentW, contentH);
+      this.positionEl(
+        this.contentEl,
+        contentLeft,
+        contentTop,
+        contentW,
+        contentH
+      );
       this.clearLabels();
       this.clearGaps();
       this.addMarginPaddingLabels(
@@ -1505,7 +1499,9 @@ var SpacingOverlay = class {
     return {
       top: parsePx(cs[`${prop}Top`]),
       right: parsePx(cs[`${prop}Right`]),
-      bottom: parsePx(cs[`${prop}Bottom`]),
+      bottom: parsePx(
+        cs[`${prop}Bottom`]
+      ),
       left: parsePx(cs[`${prop}Left`])
     };
   }
@@ -1601,18 +1597,40 @@ var SpacingOverlay = class {
       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 +1638,8 @@ var SpacingOverlay = class {
     } 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`;
@@ -2104,6 +2122,7 @@ var SHORTCUTS = [
   { key: `${modKey2}+I`, description: "Toggle inspect mode" },
   { key: "S", description: "Toggle spacing overlay", context: "inspect" },
   { key: `${modKey2}+C`, description: "Copy all annotations to clipboard" },
+  { key: `${modKey2}+D`, description: "Delete all annotations" },
   { key: "Esc", description: "Exit inspect mode / close popup" },
   { key: "?", description: "Show this help" },
   { key: "Enter", description: "Submit annotation", context: "popup" },
@@ -2397,6 +2416,13 @@ function handleInspectKeydown(e) {
     e.preventDefault();
     copyToClipboard();
   }
+  if (e.altKey && e.code === "KeyD") {
+    e.preventDefault();
+    elementCache.clear();
+    storage.clearAll();
+    refreshMarkers();
+    showToast(themeManager.container, "All annotations cleared");
+  }
   if (e.key === "?") {
     showShortcutsModal(themeManager.container);
   }