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

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-chebyshev (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);
@@ -5789,6 +5836,7 @@ var ElementOrStringPropertyConverter = {
 var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
   constructor() {
     super(...arguments);
+    this.#renderVersion = 0;
     this._templateChangeHandler = (evt) => {
       const tmplProxy = evt.target;
       this._setTmpl(tmplProxy.target);
@@ -5809,6 +5857,8 @@ var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
       );
     };
   }
+  /** Bumped by every new content: a pending `render` dispatch from superseded content is dropped. */
+  #renderVersion;
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
     if (name === "url" || name === "disabled") {
@@ -5865,6 +5915,7 @@ var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
   }
   _setTmpl(tmpl) {
     cancelAnimationFrame(this._renderHandle);
+    this.#renderVersion++;
     this.innerHTML = "";
     this._dispatchPrerender();
     this._renderHandle = requestAnimationFrame(() => {
@@ -5927,6 +5978,7 @@ var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
   }
   _manageResult(result) {
     cancelAnimationFrame(this._renderHandle);
+    const version = ++this.#renderVersion;
     this.scrollTo({ top: 0, left: 0, behavior: "instant" });
     this.innerHTML = "";
     this._dispatchPrerender();
@@ -5935,12 +5987,18 @@ var PacemViewElement = class PacemViewElement2 extends PacemEventTarget6 {
       this.fetching = false;
       this.progress = Number.NaN;
       Utils32.addAnimationEndCallback(this, () => {
+        if (version !== this.#renderVersion) {
+          return;
+        }
         this._dispatchRender();
       }, ANIM_TIMEOUT);
     });
   }
   #resizeHandle;
   _dispatchRender() {
+    if (!this.isConnected) {
+      return;
+    }
     const resizer = new Components33.PacemResizeElement();
     resizer.target = this;
     resizer.addEventListener(Components33.ResizeEventName, this._debounceDispatchHandler);