web-remarq 0.4.5 → 0.4.7

package/dist/index.js

@@ -877,28 +877,26 @@ var CSS = `
 
 .remarq-spacing {
   position: fixed;
-  top: 0;
-  left: 0;
   pointer-events: none;
   z-index: 2147483646;
 }
 
 .remarq-spacing-margin {
-  position: fixed;
+  position: absolute;
   background: rgba(249, 115, 22, 0.2);
   pointer-events: none;
   z-index: 1;
 }
 
 .remarq-spacing-padding {
-  position: fixed;
+  position: absolute;
   background: rgba(34, 197, 94, 0.2);
   pointer-events: none;
   z-index: 2;
 }
 
 .remarq-spacing-content {
-  position: fixed;
+  position: absolute;
   background: rgba(59, 130, 246, 0.3);
   border: 1px dashed rgba(96, 165, 250, 0.8);
   pointer-events: none;
@@ -916,7 +914,7 @@ var CSS = `
 }
 
 .remarq-spacing-label {
-  position: fixed;
+  position: absolute;
   font-size: 11px;
   font-weight: 700;
   pointer-events: none;
@@ -1234,11 +1232,40 @@ var Overlay = class {
   show(target) {
     try {
       const rect = target.getBoundingClientRect();
+      const cs = window.getComputedStyle(target);
+      const transform = cs.transform;
+      const hasTransform = transform && transform !== "none";
       this.overlayEl.style.display = "block";
-      this.overlayEl.style.top = `${rect.top}px`;
-      this.overlayEl.style.left = `${rect.left}px`;
-      this.overlayEl.style.width = `${rect.width}px`;
-      this.overlayEl.style.height = `${rect.height}px`;
+      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.tooltipEl.textContent = describeElement(target);
       this.tooltipEl.style.display = "block";
       this.positionTooltip(rect.left, rect.top - 28);
@@ -1313,6 +1340,25 @@ 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;
@@ -1350,36 +1396,67 @@ var SpacingOverlay = class {
       const margin = this.readSides(cs, "margin");
       const padding = this.readSides(cs, "padding");
       const border = this.readBorderSides(cs);
-      const marginBox = {
-        top: rect.top - margin.top,
-        left: rect.left - margin.left,
-        width: rect.width + margin.left + margin.right,
-        height: rect.height + margin.top + margin.bottom
-      };
-      const paddingBox = {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height
-      };
-      const contentBox = {
-        top: rect.top + border.top + padding.top,
-        left: rect.left + border.left + padding.left,
-        width: rect.width - border.left - border.right - padding.left - padding.right,
-        height: rect.height - border.top - border.bottom - padding.top - padding.bottom
-      };
-      this.positionEl(this.marginEl, marginBox);
-      this.positionEl(this.paddingEl, paddingBox);
-      this.positionEl(this.contentEl, contentBox);
+      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`;
+      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.positionEl(
+        this.marginEl,
+        -margin.left,
+        -margin.top,
+        w + margin.left + margin.right,
+        h + margin.top + margin.bottom
+      );
+      this.positionEl(this.paddingEl, 0, 0, w, h);
+      const contentLeft = border.left + padding.left;
+      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.clearLabels();
       this.clearGaps();
-      this.addSideLabels(margin, marginBox, paddingBox, "margin");
-      this.addSideLabels(padding, paddingBox, contentBox, "padding");
-      if (contentBox.width > 40 && contentBox.height > 14) {
+      this.addMarginPaddingLabels(
+        margin,
+        -margin.left,
+        -margin.top,
+        w + margin.left + margin.right,
+        h + margin.top + margin.bottom,
+        0,
+        0,
+        w,
+        h,
+        "margin"
+      );
+      this.addMarginPaddingLabels(
+        padding,
+        0,
+        0,
+        w,
+        h,
+        contentLeft,
+        contentTop,
+        contentW,
+        contentH,
+        "padding"
+      );
+      if (contentW > 40 && contentH > 14) {
         this.addLabel(
-          `${Math.round(contentBox.width)} \xD7 ${Math.round(contentBox.height)}`,
-          contentBox.top + contentBox.height / 2 - 6,
-          contentBox.left + contentBox.width / 2,
+          `${Math.round(contentW)} \xD7 ${Math.round(contentH)}`,
+          contentTop + contentH / 2 - 6,
+          contentLeft + contentW / 2,
           "content"
         );
       }
@@ -1417,34 +1494,34 @@ var SpacingOverlay = class {
       left: parsePx(cs.borderLeftWidth)
     };
   }
-  positionEl(el, box) {
-    el.style.top = `${box.top}px`;
-    el.style.left = `${box.left}px`;
-    el.style.width = `${Math.max(0, box.width)}px`;
-    el.style.height = `${Math.max(0, box.height)}px`;
+  positionEl(el, left, top, width, height) {
+    el.style.left = `${left}px`;
+    el.style.top = `${top}px`;
+    el.style.width = `${Math.max(0, width)}px`;
+    el.style.height = `${Math.max(0, height)}px`;
   }
-  addSideLabels(sides, outerBox, innerBox, type) {
+  addMarginPaddingLabels(sides, outerLeft, outerTop, outerW, outerH, innerLeft, innerTop, innerW, innerH, type) {
     if (sides.top > 0) {
-      const y = outerBox.top + (innerBox.top - outerBox.top) / 2 - 6;
-      const x = outerBox.left + outerBox.width / 2;
+      const y = outerTop + (innerTop - outerTop) / 2 - 6;
+      const x = outerLeft + outerW / 2;
       this.addLabel(String(Math.round(sides.top)), y, x, type);
     }
     if (sides.bottom > 0) {
-      const innerBottom = innerBox.top + innerBox.height;
-      const outerBottom = outerBox.top + outerBox.height;
+      const innerBottom = innerTop + innerH;
+      const outerBottom = outerTop + outerH;
       const y = innerBottom + (outerBottom - innerBottom) / 2 - 6;
-      const x = outerBox.left + outerBox.width / 2;
+      const x = outerLeft + outerW / 2;
       this.addLabel(String(Math.round(sides.bottom)), y, x, type);
     }
     if (sides.left > 0) {
-      const y = outerBox.top + outerBox.height / 2 - 6;
-      const x = outerBox.left + (innerBox.left - outerBox.left) / 2;
+      const y = outerTop + outerH / 2 - 6;
+      const x = outerLeft + (innerLeft - outerLeft) / 2;
       this.addLabel(String(Math.round(sides.left)), y, x, type);
     }
     if (sides.right > 0) {
-      const innerRight = innerBox.left + innerBox.width;
-      const outerRight = outerBox.left + outerBox.width;
-      const y = outerBox.top + outerBox.height / 2 - 6;
+      const innerRight = innerLeft + innerW;
+      const outerRight = outerLeft + outerW;
+      const y = outerTop + outerH / 2 - 6;
       const x = innerRight + (outerRight - innerRight) / 2;
       this.addLabel(String(Math.round(sides.right)), y, x, type);
     }
@@ -1504,13 +1581,15 @@ var SpacingOverlay = class {
   renderGap(before, after, gap, isRow) {
     const rectBefore = before.getBoundingClientRect();
     const rectAfter = after.getBoundingClientRect();
+    const parent = before.parentElement;
+    const parentRect = parent ? parent.getBoundingClientRect() : 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 = Math.min(rectBefore.top, rectAfter.top);
-      const height = Math.max(rectBefore.height, rectAfter.height);
+      const top = parentRect ? parentRect.top : Math.min(rectBefore.top, rectAfter.top);
+      const height = parentRect ? parentRect.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`;
@@ -1518,8 +1597,8 @@ var SpacingOverlay = class {
     } else {
       const top = Math.min(rectBefore.bottom, rectAfter.bottom);
       const bottom = Math.max(rectBefore.top, rectAfter.top);
-      const left = Math.min(rectBefore.left, rectAfter.left);
-      const width = Math.max(rectBefore.width, rectAfter.width);
+      const left = parentRect ? parentRect.left : Math.min(rectBefore.left, rectAfter.left);
+      const width = parentRect ? parentRect.width : Math.max(rectBefore.width, rectAfter.width);
       gapEl.style.top = `${top}px`;
       gapEl.style.left = `${left}px`;
       gapEl.style.width = `${width}px`;
@@ -1532,7 +1611,7 @@ var SpacingOverlay = class {
       label.style.cssText = "font-size:10px;font-weight:700;pointer-events:none;";
       gapEl.appendChild(label);
     }
-    this.containerEl.appendChild(gapEl);
+    this.parent.appendChild(gapEl);
     this.gapEls.push(gapEl);
   }
   clearGaps() {
@@ -2001,7 +2080,7 @@ var modKey2 = isMac2 ? "\u2325" : "Alt";
 var SHORTCUTS = [
   { key: `${modKey2}+I`, description: "Toggle inspect mode" },
   { key: "S", description: "Toggle spacing overlay", context: "inspect" },
-  { key: "C", description: "Copy all annotations to clipboard", context: "inspect" },
+  { key: `${modKey2}+C`, description: "Copy all annotations to clipboard" },
   { key: "Esc", description: "Exit inspect mode / close popup" },
   { key: "?", description: "Show this help" },
   { key: "Enter", description: "Submit annotation", context: "popup" },
@@ -2291,7 +2370,8 @@ function handleInspectKeydown(e) {
       spacingOverlay.hide();
     }
   }
-  if (e.key === "c" && inspecting) {
+  if (e.altKey && e.code === "KeyC") {
+    e.preventDefault();
     copyToClipboard();
   }
   if (e.key === "?") {