@stemy/ngx-utils 19.4.10 → 19.4.11

package/fesm2022/stemy-ngx-utils.mjs

@@ -6904,7 +6904,7 @@ class InteractiveItemComponent {
         this.pos = new Point(this.pos.x, value);
     }
     set position(value) {
-        if (typeof value !== "object" || isNaN(value.x) || isNaN(value.y))
+        if (typeof value !== "object" || isNaN(value.x) || isNaN(value.y) || value === this.pos)
             return;
         this.pos = new Point(value.x, value.y);
     }
@@ -6933,34 +6933,27 @@ class InteractiveItemComponent {
         this.onPanEnd = new EventEmitter();
         this.active = false;
         this.index = -1;
-        this.basePan = 0;
+        this.cycles = [0];
         this.pos = Point.Zero;
         this.rotation = 0;
         this.direction = "none";
         this.mShapes = [];
-        this.subscription = ObservableUtils.multiSubscription(this.onPanStart.subscribe(() => {
-            this.deltaX = 0;
-            this.deltaY = 0;
-        }), this.onPan.subscribe(ev => {
-            const dx = ev.deltaX - this.deltaX;
-            const dy = ev.deltaY - this.deltaY;
+        this.subscription = ObservableUtils.multiSubscription(this.onPan.subscribe(ev => {
             switch (this.direction) {
                 case "free":
-                    this.x += dx;
-                    this.y += dy;
+                    this.x += ev.deltaX;
+                    this.y += ev.deltaY;
                     break;
                 case "horizontal":
-                    this.x += dx;
+                    this.x += ev.deltaX;
                     break;
                 case "vertical":
-                    this.y += dy;
+                    this.y += ev.deltaY;
                     break;
             }
             if (this.direction !== "none") {
                 this.calcShapes();
             }
-            this.deltaX = ev.deltaX;
-            this.deltaY = ev.deltaY;
         }));
     }
     ngOnDestroy() {
@@ -6969,13 +6962,13 @@ class InteractiveItemComponent {
     ngOnChanges() {
         this.calcShapes();
     }
-    calcShapes(basePan) {
+    calcShapes(cycles) {
         const canvas = this.canvas;
         const ratio = canvas.ratio;
         const x = this.pos.x * ratio;
-        this.basePan = basePan ?? this.basePan;
-        this.mShapes = [0, 1, 2].map(cycle => {
-            const y = this.pos.y * ratio + this.basePan + cycle * canvas.fullHeight;
+        this.cycles = cycles ?? this.cycles;
+        this.mShapes = this.cycles.map(pan => {
+            const y = this.pos.y * ratio + pan;
             return this.calcShape(x, y);
         });
     }
@@ -7031,6 +7024,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             }] } });
 
 class InteractiveCanvasComponent {
+    get selectedItem() {
+        return this.items[this.selectedIndex];
+    }
+    get hoveredItem() {
+        return this.items[this.hoveredIndex];
+    }
+    get lockedItem() {
+        return this.items[this.lockedIndex];
+    }
     constructor(renderer) {
         this.renderer = renderer;
         this.horizontal = false;
@@ -7044,11 +7046,11 @@ class InteractiveCanvasComponent {
         this.rotation = 0;
         this.canvasWidth = 0;
         this.canvasHeight = 0;
-        this.hoveredItem = null;
-        this.selectedItem = null;
+        this.hoveredIndex = null;
         this.items = [];
         this.touched = false;
-        this.panFrom = 0;
+        this.deltaX = 0;
+        this.deltaY = 0;
     }
     ngOnInit() {
         this.redraw();
@@ -7087,7 +7089,7 @@ class InteractiveCanvasComponent {
         this.fixPan();
     }
     onTouchStart($event) {
-        this.hoveredItem = this.getItemUnderPointer($event.touches.item(0));
+        this.hoveredIndex = this.getIndexUnderPointer($event.touches.item(0));
         this.touched = true;
     }
     onTouchEnd($event) {
@@ -7102,45 +7104,51 @@ class InteractiveCanvasComponent {
     onMouseMove($event) {
         if (this.touched)
             return;
-        this.hoveredItem = this.getItemUnderPointer($event);
+        this.hoveredIndex = this.getIndexUnderPointer($event);
         this.updateCursor();
     }
     onMouseLeave() {
-        this.hoveredItem = null;
+        this.hoveredIndex = null;
         this.updateCursor();
     }
     onPanStart($event) {
-        this.lockedItem = this.getItemUnderPointer($event?.pointers[0]);
+        this.lockedIndex = this.getIndexUnderPointer($event?.pointers[0]);
         this.lockedItem?.onPanStart.emit({
             pointers: [],
             deltaX: 0,
             deltaY: 0,
             item: this.lockedItem
         });
-        this.panFrom = this.pan;
+        this.deltaX = 0;
+        this.deltaY = 0;
     }
     onPan($event) {
-        if (this.lockedItem) {
+        const item = this.lockedItem;
+        const deltaX = ($event.deltaX - this.deltaX) / this.ratio;
+        const deltaY = ($event.deltaY - this.deltaY) / this.ratio;
+        if (item) {
             const data = this.horizontal
-                ? { pointers: $event.pointers, deltaX: -$event.deltaY / this.ratio, deltaY: $event.deltaX / this.ratio }
-                : { pointers: $event.pointers, deltaX: $event.deltaX / this.ratio, deltaY: $event.deltaY / this.ratio };
-            data.item = this.lockedItem;
-            this.lockedItem.onPan.emit(data);
-            return;
+                ? { pointers: $event.pointers, deltaX: -deltaY, deltaY: +deltaX }
+                : { pointers: $event.pointers, deltaX, deltaY };
+            data.item = item;
+            item.onPan.emit(data);
         }
-        // if (this.useCanvasRatio) return;
-        // this.pan = this.panFrom + (this.horizontal ? $event.deltaX : $event.deltaY);
-        // this.fixPan();
+        else if (this.resizeMode == "fill") {
+            this.pan += this.horizontal ? deltaX : deltaY;
+            this.fixPan();
+        }
+        this.deltaX = $event.deltaX;
+        this.deltaY = $event.deltaY;
     }
     onPanEnd() {
-        this.lockedItem?.onPanEnd.emit({
+        const item = this.lockedItem;
+        item?.onPanEnd.emit({
             pointers: [],
             deltaX: 0,
             deltaY: 0,
-            item: this.lockedItem
+            item
         });
-        this.lockedItem = null;
-        this.panFrom = this.pan;
+        this.lockedIndex = -1;
     }
     fixPan() {
         if (this.fullHeight <= 0)
@@ -7153,8 +7161,9 @@ class InteractiveCanvasComponent {
         }
         this.rotation = Math.round(this.pan / this.fullHeight * 360);
         const basePan = (this.rotation / 360 - 1) * this.fullHeight;
+        const cycles = this.resizeMode == "fit" ? [0] : [basePan - this.fullHeight, basePan, basePan + this.fullHeight];
         this.items.forEach(item => {
-            item.calcShapes(basePan);
+            item.calcShapes(cycles);
         });
     }
     fixItems() {
@@ -7165,29 +7174,32 @@ class InteractiveCanvasComponent {
         this.fixPan();
     }
     selectItem(pointer) {
-        const selected = this.getItemUnderPointer(pointer);
+        const selected = this.getIndexUnderPointer(pointer);
         this.touched = false;
-        this.selectedItem = selected;
-        if (selected) {
-            selected.active = !selected.active;
-            const items = Array.from(this.items);
-            this.selectedIndex = items.indexOf(selected);
+        if (selected !== this.selectedIndex) {
+            this.selectedIndex = selected;
             this.selectedIndexChange.emit(this.selectedIndex);
+            const item = this.selectedItem;
+            if (!item)
+                return;
+            item.active = !item.active;
         }
     }
-    getItemUnderPointer(pointer) {
+    getIndexUnderPointer(pointer) {
         if (!pointer || !this.canvasElem || !this.items)
             return null;
         const canvasRect = this.canvasElem.nativeElement.getBoundingClientRect();
         const point = this.horizontal
             ? new Point(canvasRect.bottom - pointer.clientY, pointer.clientX - canvasRect.left)
             : new Point(pointer.clientX - canvasRect.left, pointer.clientY - canvasRect.top);
-        for (const item of this.items) {
+        const length = this.items.length;
+        for (let ix = 0; ix < length; ix++) {
+            const item = this.items[ix];
             if (item?.hit(point)) {
-                return item.disabled ? null : item;
+                return item.disabled ? null : ix;
             }
         }
-        return null;
+        return -1;
     }
     updateCursor() {
         const cursor = this.getCursor();
@@ -7195,9 +7207,10 @@ class InteractiveCanvasComponent {
         this.renderer.setStyle(this.containerElem.nativeElement, "cursor", cursor);
     }
     getCursor() {
-        if (!this.hoveredItem)
+        const hovered = this.hoveredItem;
+        if (!hovered)
             return "default";
-        switch (this.hoveredItem.direction) {
+        switch (hovered.direction) {
             case "free":
                 return "all-scroll";
             case "horizontal":