@pacem/pacem-ui 2.0.0-babbage → 2.0.0-cauchy

package/dist/bundle/pacem-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-ui v2.0.0-babbage (https://js.pacem.it)
+ * @pacem/pacem-ui v2.0.0-cauchy (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -1318,6 +1318,10 @@ var PacemBinderElement = class PacemBinderElement2 extends Components4.PacemElem
           this._setPathVisibility();
         }
         break;
+      case "layer":
+        this._hostSvg();
+        this._draw();
+        break;
     }
   }
   disconnectedCallback() {
@@ -1357,27 +1361,66 @@ var PacemBinderElement = class PacemBinderElement2 extends Components4.PacemElem
       Utils4.addClass(svg, PCSS4 + "-binder " + this.className);
       svg.style.top = "0";
       svg.style.left = "0";
-      svg.style.overflow = "hidden";
       svg.style.pointerEvents = "none";
       const path = this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
       path.setAttribute("fill", "none");
       path.setAttribute("display", "none");
       this._setPathVisibility();
       svg.appendChild(path);
-      this.invalidateSize();
-      document.body.appendChild(svg);
+      this._hostSvg();
       STD_EVENTS.forEach((e) => {
         path.addEventListener(e, this._broadcastHandler, false);
       });
     }
   }
-  /** Resizes the shared full-page SVG overlay to match the current document size; call after layout changes that may affect `document.body`'s scroll size. */
+  /** Whether the SVG lives in a custom {@link layer} rather than in the full-page overlay. */
+  get _layered() {
+    const layer = this.layer;
+    return !Utils4.isNull(layer) && layer !== document.body;
+  }
+  /** Appends the SVG to its host ({@link layer} or `document.body`), adapting its overflow and size accordingly. */
+  _hostSvg() {
+    const svg = this._svg;
+    if (Utils4.isNull(svg)) {
+      return;
+    }
+    const layered = this._layered;
+    svg.style.overflow = layered ? "visible" : "hidden";
+    this.invalidateSize();
+    const host = layered ? this.layer : document.body;
+    if (svg.parentNode !== host) {
+      host.appendChild(svg);
+    }
+  }
+  /** Resizes the shared full-page SVG overlay to match the current document size; call after layout changes that may affect `document.body`'s scroll size. A {@link layer}-hosted SVG just fills its host. */
   invalidateSize() {
     const svg = this._svg;
-    if (!Utils4.isNull(svg)) {
-      svg.setAttribute("width", document.body.scrollWidth.toString());
-      svg.setAttribute("height", document.body.scrollHeight.toString());
+    if (Utils4.isNull(svg)) {
+      return;
     }
+    if (this._layered) {
+      svg.setAttribute("width", "100%");
+      svg.setAttribute("height", "100%");
+      return;
+    }
+    svg.setAttribute("width", document.body.scrollWidth.toString());
+    svg.setAttribute("height", document.body.scrollHeight.toString());
+  }
+  /** Page coordinates of the origin the curve is drawn against: the {@link layer}'s (scrolled) padding box, or the page itself. */
+  _getOrigin() {
+    if (!this._layered) {
+      return { x: 0, y: 0 };
+    }
+    const layer = this.layer;
+    const offset = Utils4.offset(layer);
+    return {
+      x: offset.left + layer.clientLeft - layer.scrollLeft,
+      y: offset.top + layer.clientTop - layer.scrollTop
+    };
+  }
+  /** Translates a page-based layout into the coordinates of the drawing origin. */
+  _toLocal(size, origin) {
+    return { ...size, left: size.left - origin.x, top: size.top - origin.y };
   }
   _computeAnchorPoints(target, anchor, end, ref, refAnchor, refEnd, tension) {
     var p1, p2, c1, c2;
@@ -1709,7 +1752,8 @@ var PacemBinderElement = class PacemBinderElement2 extends Components4.PacemElem
       path.setAttribute("d", "");
       return;
     }
-    const { points, anchors } = this._computeAnchorPoints(state1.size, state1.anchor, this.fromEnd, state2.size, state2.anchor, this.toEnd, this.tension), p0 = points[0], c0 = points[1], p1 = points[2], c1 = points[3], anchor0 = anchors[0], anchor1 = anchors[1];
+    const origin = this._getOrigin(), size1 = this._toLocal(state1.size, origin), size2 = this._toLocal(state2.size, origin);
+    const { points, anchors } = this._computeAnchorPoints(size1, state1.anchor, this.fromEnd, size2, state2.anchor, this.toEnd, this.tension), p0 = points[0], c0 = points[1], p1 = points[2], c1 = points[3], anchor0 = anchors[0], anchor1 = anchors[1];
     const x0 = p0.x;
     const y0 = p0.y;
     const cx0 = c0.x;
@@ -1805,6 +1849,9 @@ __decorate4([
 __decorate4([
   Watch4({ emit: false, converter: PropertyConverters4.Boolean })
 ], PacemBinderElement.prototype, "interactive", void 0);
+__decorate4([
+  Watch4({ emit: false, converter: PropertyConverters4.Element })
+], PacemBinderElement.prototype, "layer", void 0);
 PacemBinderElement = __decorate4([
   CustomElement4({ tagName: P4 + "-binder" })
 ], PacemBinderElement);