web-remarq 0.4.4 → 0.4.6

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

@@ -900,28 +900,26 @@ var WebRemarq = (() => {
 
 .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;
@@ -939,7 +937,7 @@ var WebRemarq = (() => {
 }
 
 .remarq-spacing-label {
-  position: fixed;
+  position: absolute;
   font-size: 11px;
   font-weight: 700;
   pointer-events: none;
@@ -1257,11 +1255,40 @@ var WebRemarq = (() => {
     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);
@@ -1336,6 +1363,25 @@ 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;
@@ -1373,36 +1419,67 @@ var WebRemarq = (() => {
         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"
           );
         }
@@ -1440,34 +1517,34 @@ var WebRemarq = (() => {
         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);
       }
@@ -1527,13 +1604,15 @@ var WebRemarq = (() => {
     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`;
@@ -1541,8 +1620,8 @@ var WebRemarq = (() => {
       } 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`;
@@ -1555,7 +1634,7 @@ var WebRemarq = (() => {
         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() {
@@ -2024,7 +2103,7 @@ var WebRemarq = (() => {
   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" },
@@ -2314,7 +2393,8 @@ var WebRemarq = (() => {
         spacingOverlay.hide();
       }
     }
-    if (e.key === "c" && inspecting) {
+    if (e.altKey && e.key === "c") {
+      e.preventDefault();
       copyToClipboard();
     }
     if (e.key === "?") {