@pacem/pacem-ui 2.0.0-abel → 2.0.0-cauchy
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/pacem-ui.js +57 -9
- package/dist/browser/pacem-ui.js.map +1 -1
- package/dist/browser/pacem-ui.min.js +2 -2
- package/dist/bundle/pacem-ui.min.mjs +57 -57
- package/dist/bundle/pacem-ui.mjs +56 -9
- package/dist/bundle/pacem-ui.mjs.map +2 -2
- package/dist/docs/pacem-ui.json +32 -1
- package/dist/esm/adapter.js +1 -1
- package/dist/esm/anchor.js +1 -1
- package/dist/esm/balloon.js +1 -1
- package/dist/esm/binder.js +57 -9
- package/dist/esm/blade.js +1 -1
- package/dist/esm/bottom-sheet.js +1 -1
- package/dist/esm/button.js +1 -1
- package/dist/esm/buttonset.js +1 -1
- package/dist/esm/calendar.js +1 -1
- package/dist/esm/collapse.js +1 -1
- package/dist/esm/dialog-abstractions.js +1 -1
- package/dist/esm/dialog.js +1 -1
- package/dist/esm/divider.js +1 -1
- package/dist/esm/icon.js +1 -1
- package/dist/esm/image.js +1 -1
- package/dist/esm/index-components-ui.js +1 -1
- package/dist/esm/index-components.js +1 -1
- package/dist/esm/index-iife.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/infinite-scroller.js +1 -1
- package/dist/esm/iterative.js +1 -1
- package/dist/esm/lightbox-abstractions.js +1 -1
- package/dist/esm/lightbox.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/markdown-svc.js +1 -1
- package/dist/esm/markdown.js +1 -1
- package/dist/esm/marquee.js +1 -1
- package/dist/esm/media-query.js +1 -1
- package/dist/esm/menu.js +1 -1
- package/dist/esm/pager.js +1 -1
- package/dist/esm/picture.js +1 -1
- package/dist/esm/progressbar.js +1 -1
- package/dist/esm/sidebar.js +1 -1
- package/dist/esm/slideshow.js +1 -1
- package/dist/esm/social-twitter.js +1 -1
- package/dist/esm/sticky-header.js +1 -1
- package/dist/esm/tabs.js +1 -1
- package/dist/esm/ticker.js +1 -1
- package/dist/esm/toast.js +1 -1
- package/dist/esm/toc.js +1 -1
- package/dist/esm/tuner.js +1 -1
- package/dist/esm/types.js +1 -1
- package/dist/esm/vibration.js +1 -1
- package/dist/esm/view.js +1 -1
- package/dist/esm/window.js +1 -1
- package/package.json +1 -1
- package/typings/index.d.ts +11 -1
package/dist/docs/pacem-ui.json
CHANGED
|
@@ -5378,7 +5378,7 @@
|
|
|
5378
5378
|
{
|
|
5379
5379
|
"kind": "Method",
|
|
5380
5380
|
"canonicalReference": "@pacem/pacem-ui!Components.UI.PacemBinderElement#invalidateSize:member(1)",
|
|
5381
|
-
"docComment": "/**\n * 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.\n */\n",
|
|
5381
|
+
"docComment": "/**\n * 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.\n */\n",
|
|
5382
5382
|
"excerptTokens": [
|
|
5383
5383
|
{
|
|
5384
5384
|
"kind": "Content",
|
|
@@ -5406,6 +5406,37 @@
|
|
|
5406
5406
|
"isAbstract": false,
|
|
5407
5407
|
"name": "invalidateSize"
|
|
5408
5408
|
},
|
|
5409
|
+
{
|
|
5410
|
+
"kind": "Property",
|
|
5411
|
+
"canonicalReference": "@pacem/pacem-ui!Components.UI.PacemBinderElement#layer:member",
|
|
5412
|
+
"docComment": "/**\n * Gets or sets the element hosting the curve's SVG (default: `document.body`). It should be a positioned element: the curve is drawn relative to its padding box and isn't cropped at its edges.\n */\n",
|
|
5413
|
+
"excerptTokens": [
|
|
5414
|
+
{
|
|
5415
|
+
"kind": "Content",
|
|
5416
|
+
"text": "layer: "
|
|
5417
|
+
},
|
|
5418
|
+
{
|
|
5419
|
+
"kind": "Reference",
|
|
5420
|
+
"text": "Element",
|
|
5421
|
+
"canonicalReference": "!Element:interface"
|
|
5422
|
+
},
|
|
5423
|
+
{
|
|
5424
|
+
"kind": "Content",
|
|
5425
|
+
"text": ";"
|
|
5426
|
+
}
|
|
5427
|
+
],
|
|
5428
|
+
"isReadonly": false,
|
|
5429
|
+
"isOptional": false,
|
|
5430
|
+
"releaseTag": "Public",
|
|
5431
|
+
"name": "layer",
|
|
5432
|
+
"propertyTypeTokenRange": {
|
|
5433
|
+
"startIndex": 1,
|
|
5434
|
+
"endIndex": 2
|
|
5435
|
+
},
|
|
5436
|
+
"isStatic": false,
|
|
5437
|
+
"isProtected": false,
|
|
5438
|
+
"isAbstract": false
|
|
5439
|
+
},
|
|
5409
5440
|
{
|
|
5410
5441
|
"kind": "Method",
|
|
5411
5442
|
"canonicalReference": "@pacem/pacem-ui!Components.UI.PacemBinderElement#propertyChangedCallback:member(1)",
|
package/dist/esm/adapter.js
CHANGED
package/dist/esm/anchor.js
CHANGED
package/dist/esm/balloon.js
CHANGED
package/dist/esm/binder.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @pacem/pacem-ui v2.0.0-
|
|
2
|
+
* @pacem/pacem-ui v2.0.0-cauchy (https://js.pacem.it)
|
|
3
3
|
* Pacem (https://pacem.it)
|
|
4
4
|
* Licensed under Apache-2.0
|
|
5
5
|
*/
|
|
@@ -188,6 +188,10 @@ let PacemBinderElement = class PacemBinderElement extends Components.PacemElemen
|
|
|
188
188
|
this._setPathVisibility();
|
|
189
189
|
}
|
|
190
190
|
break;
|
|
191
|
+
case 'layer':
|
|
192
|
+
this._hostSvg();
|
|
193
|
+
this._draw();
|
|
194
|
+
break;
|
|
191
195
|
}
|
|
192
196
|
}
|
|
193
197
|
disconnectedCallback() {
|
|
@@ -229,27 +233,67 @@ let PacemBinderElement = class PacemBinderElement extends Components.PacemElemen
|
|
|
229
233
|
Utils.addClass(svg, PCSS + '-binder ' + this.className);
|
|
230
234
|
svg.style.top = '0';
|
|
231
235
|
svg.style.left = '0';
|
|
232
|
-
svg.style.overflow = 'hidden';
|
|
233
236
|
svg.style.pointerEvents = 'none';
|
|
234
237
|
const path = this._path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
235
238
|
path.setAttribute('fill', 'none');
|
|
236
239
|
path.setAttribute('display', 'none');
|
|
237
240
|
this._setPathVisibility();
|
|
238
241
|
svg.appendChild(path);
|
|
239
|
-
this.
|
|
240
|
-
document.body.appendChild(svg);
|
|
242
|
+
this._hostSvg();
|
|
241
243
|
STD_EVENTS.forEach(e => {
|
|
242
244
|
path.addEventListener(e, this._broadcastHandler, false);
|
|
243
245
|
});
|
|
244
246
|
}
|
|
245
247
|
}
|
|
246
|
-
/**
|
|
248
|
+
/** Whether the SVG lives in a custom {@link layer} rather than in the full-page overlay. */
|
|
249
|
+
get _layered() {
|
|
250
|
+
const layer = this.layer;
|
|
251
|
+
return !Utils.isNull(layer) && layer !== document.body;
|
|
252
|
+
}
|
|
253
|
+
/** Appends the SVG to its host ({@link layer} or `document.body`), adapting its overflow and size accordingly. */
|
|
254
|
+
_hostSvg() {
|
|
255
|
+
const svg = this._svg;
|
|
256
|
+
if (Utils.isNull(svg)) {
|
|
257
|
+
return;
|
|
258
|
+
}
|
|
259
|
+
const layered = this._layered;
|
|
260
|
+
// a full-page overlay must not grow the document, a layer must not crop the curve
|
|
261
|
+
svg.style.overflow = layered ? 'visible' : 'hidden';
|
|
262
|
+
this.invalidateSize();
|
|
263
|
+
const host = layered ? this.layer : document.body;
|
|
264
|
+
if (svg.parentNode !== host) {
|
|
265
|
+
host.appendChild(svg);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
/** 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. */
|
|
247
269
|
invalidateSize() {
|
|
248
270
|
const svg = this._svg;
|
|
249
|
-
if (
|
|
250
|
-
|
|
251
|
-
|
|
271
|
+
if (Utils.isNull(svg)) {
|
|
272
|
+
return;
|
|
273
|
+
}
|
|
274
|
+
if (this._layered) {
|
|
275
|
+
svg.setAttribute('width', '100%');
|
|
276
|
+
svg.setAttribute('height', '100%');
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
svg.setAttribute('width', document.body.scrollWidth.toString());
|
|
280
|
+
svg.setAttribute('height', document.body.scrollHeight.toString());
|
|
281
|
+
}
|
|
282
|
+
/** Page coordinates of the origin the curve is drawn against: the {@link layer}'s (scrolled) padding box, or the page itself. */
|
|
283
|
+
_getOrigin() {
|
|
284
|
+
if (!this._layered) {
|
|
285
|
+
return { x: 0, y: 0 };
|
|
252
286
|
}
|
|
287
|
+
const layer = this.layer;
|
|
288
|
+
const offset = Utils.offset(layer);
|
|
289
|
+
return {
|
|
290
|
+
x: offset.left + layer.clientLeft - layer.scrollLeft,
|
|
291
|
+
y: offset.top + layer.clientTop - layer.scrollTop
|
|
292
|
+
};
|
|
293
|
+
}
|
|
294
|
+
/** Translates a page-based layout into the coordinates of the drawing origin. */
|
|
295
|
+
_toLocal(size, origin) {
|
|
296
|
+
return { ...size, left: size.left - origin.x, top: size.top - origin.y };
|
|
253
297
|
}
|
|
254
298
|
_computeAnchorPoints(target, anchor, end, ref, refAnchor, refEnd, tension) {
|
|
255
299
|
var p1, p2, c1, c2;
|
|
@@ -602,7 +646,8 @@ let PacemBinderElement = class PacemBinderElement extends Components.PacemElemen
|
|
|
602
646
|
path.setAttribute('d', '');
|
|
603
647
|
return;
|
|
604
648
|
}
|
|
605
|
-
const
|
|
649
|
+
const origin = this._getOrigin(), size1 = this._toLocal(state1.size, origin), size2 = this._toLocal(state2.size, origin);
|
|
650
|
+
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];
|
|
606
651
|
const x0 = p0.x;
|
|
607
652
|
const y0 = p0.y;
|
|
608
653
|
const cx0 = c0.x;
|
|
@@ -698,6 +743,9 @@ __decorate([
|
|
|
698
743
|
__decorate([
|
|
699
744
|
Watch({ emit: false, converter: PropertyConverters.Boolean })
|
|
700
745
|
], PacemBinderElement.prototype, "interactive", void 0);
|
|
746
|
+
__decorate([
|
|
747
|
+
Watch({ emit: false, converter: PropertyConverters.Element })
|
|
748
|
+
], PacemBinderElement.prototype, "layer", void 0);
|
|
701
749
|
PacemBinderElement = __decorate([
|
|
702
750
|
CustomElement({ tagName: P + '-binder' })
|
|
703
751
|
], PacemBinderElement);
|
package/dist/esm/blade.js
CHANGED
package/dist/esm/bottom-sheet.js
CHANGED
package/dist/esm/button.js
CHANGED
package/dist/esm/buttonset.js
CHANGED
package/dist/esm/calendar.js
CHANGED
package/dist/esm/collapse.js
CHANGED
package/dist/esm/dialog.js
CHANGED
package/dist/esm/divider.js
CHANGED
package/dist/esm/icon.js
CHANGED
package/dist/esm/image.js
CHANGED
package/dist/esm/index-iife.js
CHANGED
package/dist/esm/index.js
CHANGED
package/dist/esm/iterative.js
CHANGED
package/dist/esm/lightbox.js
CHANGED
package/dist/esm/loader.js
CHANGED
package/dist/esm/markdown-svc.js
CHANGED
package/dist/esm/markdown.js
CHANGED
package/dist/esm/marquee.js
CHANGED
package/dist/esm/media-query.js
CHANGED
package/dist/esm/menu.js
CHANGED
package/dist/esm/pager.js
CHANGED
package/dist/esm/picture.js
CHANGED
package/dist/esm/progressbar.js
CHANGED
package/dist/esm/sidebar.js
CHANGED
package/dist/esm/slideshow.js
CHANGED
package/dist/esm/tabs.js
CHANGED
package/dist/esm/ticker.js
CHANGED
package/dist/esm/toast.js
CHANGED
package/dist/esm/toc.js
CHANGED
package/dist/esm/tuner.js
CHANGED
package/dist/esm/types.js
CHANGED
package/dist/esm/vibration.js
CHANGED
package/dist/esm/view.js
CHANGED
package/dist/esm/window.js
CHANGED
package/package.json
CHANGED
package/typings/index.d.ts
CHANGED
|
@@ -456,6 +456,8 @@ declare class PacemBinderElement extends Components_2.PacemElement {
|
|
|
456
456
|
color: string;
|
|
457
457
|
/** Gets or sets whether the curve's path responds to pointer interaction (dispatching {@link BinderInteractionEvent}). */
|
|
458
458
|
interactive: boolean;
|
|
459
|
+
/** Gets or sets the element hosting the curve's SVG (default: `document.body`). It should be a positioned element: the curve is drawn relative to its padding box and isn't cropped at its edges. */
|
|
460
|
+
layer: Element;
|
|
459
461
|
connectedCallback(): void;
|
|
460
462
|
viewActivatedCallback(): void;
|
|
461
463
|
propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
|
|
@@ -463,8 +465,16 @@ declare class PacemBinderElement extends Components_2.PacemElement {
|
|
|
463
465
|
disconnectedCallback(): void;
|
|
464
466
|
private _setPathVisibility;
|
|
465
467
|
private _ensurePath;
|
|
466
|
-
/**
|
|
468
|
+
/** Whether the SVG lives in a custom {@link layer} rather than in the full-page overlay. */
|
|
469
|
+
private get _layered();
|
|
470
|
+
/** Appends the SVG to its host ({@link layer} or `document.body`), adapting its overflow and size accordingly. */
|
|
471
|
+
private _hostSvg;
|
|
472
|
+
/** 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. */
|
|
467
473
|
invalidateSize(): void;
|
|
474
|
+
/** Page coordinates of the origin the curve is drawn against: the {@link layer}'s (scrolled) padding box, or the page itself. */
|
|
475
|
+
private _getOrigin;
|
|
476
|
+
/** Translates a page-based layout into the coordinates of the drawing origin. */
|
|
477
|
+
private _toLocal;
|
|
468
478
|
private _path;
|
|
469
479
|
private _svg;
|
|
470
480
|
private _state;
|