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

package/dist/browser/pacem-ui.js

@@ -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
  */
@@ -1288,6 +1288,10 @@
                         this._setPathVisibility();
                     }
                     break;
+                case 'layer':
+                    this._hostSvg();
+                    this._draw();
+                    break;
             }
         }
         disconnectedCallback() {
@@ -1329,27 +1333,67 @@
                 pacemCore.Utils.addClass(svg, pacemCore.PCSS + '-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 !pacemCore.Utils.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 (pacemCore.Utils.isNull(svg)) {
+                return;
+            }
+            const layered = this._layered;
+            // a full-page overlay must not grow the document, a layer must not crop the curve
+            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 (!pacemCore.Utils.isNull(svg)) {
-                svg.setAttribute('width', document.body.scrollWidth.toString());
-                svg.setAttribute('height', document.body.scrollHeight.toString());
+            if (pacemCore.Utils.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 = pacemCore.Utils.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;
@@ -1702,7 +1746,8 @@
                 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;
@@ -1798,6 +1843,9 @@
     __decorate$y([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
     ], PacemBinderElement.prototype, "interactive", void 0);
+    __decorate$y([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Element })
+    ], PacemBinderElement.prototype, "layer", void 0);
     PacemBinderElement = __decorate$y([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-binder' })
     ], PacemBinderElement);