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

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-chebyshev (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);
@@ -5886,6 +5934,8 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
     let PacemViewElement = class PacemViewElement extends pacemCore.PacemEventTarget {
         constructor() {
             super(...arguments);
+            /** Bumped by every new content: a pending `render` dispatch from superseded content is dropped. */
+            this.#renderVersion = 0;
             this._templateChangeHandler = (evt) => {
                 const tmplProxy = evt.target;
                 this._setTmpl(tmplProxy.target);
@@ -5903,6 +5953,8 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 }, 100 /* tenth of a second limit */);
             };
         }
+        /** 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);
             // url
@@ -5967,6 +6019,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         }
         _setTmpl(tmpl) {
             cancelAnimationFrame(this._renderHandle);
+            this.#renderVersion++;
             // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
             this.innerHTML = '';
             this._dispatchPrerender();
@@ -6039,6 +6092,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
         _manageResult(result) {
             // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
             cancelAnimationFrame(this._renderHandle);
+            const version = ++this.#renderVersion;
             this.scrollTo({ top: 0, left: 0, behavior: 'instant' });
             this.innerHTML = '';
             this._dispatchPrerender();
@@ -6049,12 +6103,20 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 // setting fetching to `false` triggers a css class change that could/should cause a css transition to happen
                 // TODO: manage to switch to native in a near future (https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API or https://youtu.be/oDcb3fvtETs)
                 pacemCore.Utils.addAnimationEndCallback(this, () => {
+                    if (version !== this.#renderVersion) {
+                        return;
+                    }
                     this._dispatchRender();
                 }, ANIM_TIMEOUT);
             });
         }
         #resizeHandle;
         _dispatchRender() {
+            // the view might have been removed meanwhile (e.g. a nested view whose container got re-rendered):
+            // no shell to host the resizer, nothing to notify.
+            if (!this.isConnected) {
+                return;
+            }
             const resizer = new pacemCore.Components.PacemResizeElement();
             resizer.target = this;
             resizer.addEventListener(pacemCore.Components.ResizeEventName, this._debounceDispatchHandler);