@stemy/ngx-utils 19.9.11 → 19.9.13

package/fesm2022/stemy-ngx-utils.mjs

@@ -8356,9 +8356,6 @@ class InteractiveItemComponent {
     get id() {
         return null;
     }
-    get frame() {
-        return this.mFrame;
-    }
     get shapes() {
         return this.mShapes;
     }
@@ -8433,6 +8430,17 @@ class InteractiveItemComponent {
             return;
         this.canvas.selectedItem = value ? this : null;
     }
+    get cursor() {
+        switch (this.direction) {
+            case "free":
+                return "all-scroll";
+            case "horizontal":
+                return "col-resize";
+            case "vertical":
+                return "row-resize";
+        }
+        return "pointer";
+    }
     constructor() {
         this.active = false;
         this.index = -1;
@@ -8442,7 +8450,6 @@ class InteractiveItemComponent {
         this.rot = 0;
         this.validRot = 0;
         this.direction = "none";
-        this.mFrame = new Rect(0, 0, 3, 3);
         this.mShapes = [];
     }
     draw(ctx, shape) {
@@ -8550,7 +8557,7 @@ class InteractiveItemComponent {
         return !this.canvas ? 1 : (isNaN(value) || value < 0 ? 0 : value) * (this.canvas.ratio ?? 1);
     }
     getMinDistance(other) {
-        return !other ? 0 : 10;
+        return !other ? null : 0.1;
     }
     calcShape(x, y) {
         return new Point(x, y);
@@ -8644,9 +8651,7 @@ class InteractiveCanvasComponent {
         /**
          * Canvas params
          */
-        this.params = input({}, {
-            transform: (v) => v || {}
-        });
+        this.params = input({});
         /**
          * Model signal for selected index
          */
@@ -8699,7 +8704,7 @@ class InteractiveCanvasComponent {
         effect(() => {
             const realWidth = this.width();
             const realHeight = this.height();
-            const params = this.params();
+            const params = this.params() || {};
             this.xRange = normalizeRange(params.xRange || [0, realWidth]);
             this.yRange = normalizeRange(params.yRange || [0, realHeight]);
             this.resize();
@@ -8835,13 +8840,13 @@ class InteractiveCanvasComponent {
     fixRotation() {
         // No need to track params changes because this function will be called from an effect
         // already depending on params anyway
-        const params = untracked(() => this.params());
+        const params = untracked(() => this.params()) || {};
         if (this.fullHeight <= 0)
             return;
         this.rotation = overflow(Math.round(this.rotation * 100) / 100, -180, 180);
         this.basePan = this.rotation / 360 * this.fullHeight
             + this.canvasHeight * untracked(() => this.panOffset());
-        this.cycles = this.infinite
+        this.cycles = this.isInfinite
             ? [this.basePan - this.fullHeight, this.basePan, this.basePan + this.fullHeight] : [0];
         this.excludedAreas = (params.excludedAreas || []).map(coords => {
             const x = coords.x * this.ratio;
@@ -8890,23 +8895,11 @@ class InteractiveCanvasComponent {
         return -1;
     }
     updateCursor() {
-        const cursor = this.getCursor();
+        if (!this.containerElem)
+            return;
+        const cursor = this.hoveredItem?.cursor ?? "default";
         this.renderer.setStyle(this.containerElem.nativeElement, "cursor", cursor);
     }
-    getCursor() {
-        const hovered = this.hoveredItem;
-        if (!hovered)
-            return "default";
-        switch (hovered.direction) {
-            case "free":
-                return "all-scroll";
-            case "horizontal":
-                return "";
-            case "vertical":
-                return "row-resize";
-        }
-        return "pointer";
-    }
     redraw() {
         if (!this.shouldDraw)
             return;
@@ -8958,15 +8951,16 @@ class InteractiveCanvasComponent {
             ctx.translate(-this.canvasWidth, 0);
         }
         const renderCtx = untracked(() => this.renderCtx());
+        const params = untracked(() => this.params());
         const beforeItems = untracked(() => this.beforeItems());
         const afterItems = untracked(() => this.afterItems());
         try {
             for (const renderer of beforeItems) {
-                await renderer(this, renderCtx);
+                await renderer(this, renderCtx, params);
             }
             await this.drawItems();
             for (const renderer of afterItems) {
-                await renderer(this, renderCtx);
+                await renderer(this, renderCtx, params);
             }
         }
         catch (e) {
@@ -8975,17 +8969,17 @@ class InteractiveCanvasComponent {
         ctx.restore();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: InteractiveCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd()", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], ngImport: i0, template: "<div #containerElem\r\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n     (resize)=\"resize()\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (panend)=\"onPanEnd()\"\r\n     (panmove)=\"onPanMove($event)\"\r\n     (panstart)=\"onPanStart()\">\r\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd()", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true }], ngImport: i0, template: "<div #containerElem\r\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n     (resize)=\"resize()\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (panend)=\"onPanEnd()\"\r\n     (panmove)=\"onPanMove($event)\"\r\n     (panstart)=\"onPanStart()\">\r\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: InteractiveCanvasComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "interactive-canvas", encapsulation: ViewEncapsulation.None, template: "<div #containerElem\r\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\r\n     (resize)=\"resize()\"\r\n     (touchstart)=\"onTouchStart($event)\"\r\n     (mousedown)=\"onMouseDown($event)\"\r\n     (mousemove)=\"onMouseMove($event)\"\r\n     (mouseleave)=\"onMouseLeave()\"\r\n     (panend)=\"onPanEnd()\"\r\n     (panmove)=\"onPanMove($event)\"\r\n     (panstart)=\"onPanStart()\">\r\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\r\n</div>\r\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerElem: [{
                 type: ViewChild,
-                args: ["containerElem", { static: true }]
+                args: ["containerElem"]
             }], canvasElem: [{
                 type: ViewChild,
-                args: ["canvasElem", { static: true }]
+                args: ["canvasElem"]
             }], onTouchEnd: [{
                 type: HostListener,
                 args: ["window:touchend"]