@tetacom/svg-charts 1.3.3 → 1.4.0

package/fesm2020/tetacom-svg-charts.mjs

@@ -409,7 +409,19 @@ class ZoomService {
         }
     }
     setBroadcastChannel(channel) {
+        if (this.broadcastSub) {
+            this.broadcastSub?.unsubscribe();
+        }
         this.broadcastChannel = channel;
+        if (this.broadcastChannel?.length) {
+            this.broadcastSub = combineLatest([this._broadcast.subscribeToZoom(this.broadcastChannel), this._chart.config])
+                .pipe(filter(([zoom, config]) => {
+                return zoom.message?.chartId !== config.id;
+            }))
+                .subscribe(([zoom, config]) => {
+                this.fireZoom(zoom.message);
+            });
+        }
     }
     getD3Transform(targetDomain, originalDomain, scale, orientation, inverted) {
         const zoomScale = Math.abs(scale(originalDomain[1]) - scale(originalDomain[0])) / Math.abs(scale(targetDomain[1]) - scale(targetDomain[0]));
@@ -432,6 +444,9 @@ class ZoomService {
         }
         return transform;
     }
+    ngOnDestroy() {
+        this.broadcastSub?.unsubscribe();
+    }
 }
 ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, deps: [{ token: BroadcastService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Injectable });
 ZoomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, providedIn: 'root' });
@@ -770,9 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; } });
 
 class BrushService {
-    // private _outBrushDomain = new ReplaySubject<[number, number]>(1);
     constructor() {
-        // outBrushDomain: Observable<[number, number]>;
         this._brushDomain = new ReplaySubject(1);
         this.brushDomain = this._brushDomain.asObservable();
     }
@@ -1969,41 +1982,37 @@ class BrushMessage {
 }
 
 class ZoomableDirective {
-    constructor(elementRef, zoomService, chartService, broadcast, zone) {
+    constructor(elementRef, zoomService, chartService, zone) {
         this.elementRef = elementRef;
         this.zoomService = zoomService;
         this.chartService = chartService;
-        this.broadcast = broadcast;
         this.zone = zone;
         this.zoomable = false;
         this.crosshair = false;
         this.alive = true;
         this.currentTransform = zoomIdentity;
         this.zoomed = (event) => {
-            if (!event.sourceEvent)
-                return;
-            const origin = this.axis.scale.copy().domain(this.axis.originDomain);
-            let domain = this.axis.orientation === AxisOrientation.y
-                ? event.transform.rescaleY(origin).domain()
-                : event.transform.rescaleX(origin).domain();
-            const message = new ZoomMessage({
-                eventType: event.type,
-                axis: {
-                    index: this.axis.index,
-                    orientation: this.axis.orientation,
-                },
-                element: this.elementRef,
-                domain: domain,
-                chartId: this.config.id
-            });
-            if (event.sourceEvent.type === 'broadcast') {
-                this.zoomService.fireZoom(message);
-            }
-            if (event.sourceEvent.type === 'wheeling' || event.sourceEvent instanceof MouseEvent || (window.TouchEvent && event.sourceEvent instanceof TouchEvent)) {
-                this.zoomService.fireZoom(message);
-                this.zoomService.broadcastZoom(message);
+            if (event.sourceEvent) {
+                if (Object.keys(event.sourceEvent).length !== 0) {
+                    const origin = this.axis.scale.copy().domain(this.axis.originDomain);
+                    let domain = this.axis.orientation === AxisOrientation.y
+                        ? event.transform.rescaleY(origin).domain()
+                        : event.transform.rescaleX(origin).domain();
+                    const message = new ZoomMessage({
+                        eventType: event.type,
+                        axis: {
+                            index: this.axis.index,
+                            orientation: this.axis.orientation,
+                        },
+                        element: this.elementRef,
+                        domain: domain,
+                        chartId: this.config.id
+                    });
+                    this.zoomService.fireZoom(message);
+                    this.zoomService.broadcastZoom(message);
+                }
+                this.currentTransform = event.transform;
             }
-            this.currentTransform = event.transform;
         };
     }
     ngOnInit() {
@@ -2025,7 +2034,7 @@ class ZoomableDirective {
         this.zoomService.zoomed.pipe(takeWhile(() => this.alive)).subscribe((zoomed) => {
             if (this._element && this.elementRef !== zoomed?.element
                 && zoomed?.axis?.index === this.axis.index
-                && zoomed?.axis?.orientation === this.axis.orientation && zoomed.eventType === 'end') {
+                && zoomed?.axis?.orientation === this.axis.orientation) {
                 const scale = this.axis.scale.copy().domain(this.axis.originDomain);
                 let transform;
                 if (zoomed.domain === null) {
@@ -2035,12 +2044,7 @@ class ZoomableDirective {
                     transform =
                         this.zoomService.getD3Transform(zoomed.domain, this.axis.originDomain, scale, this.axis.orientation, this.axis.options.inverted);
                 }
-                if (zoomed.style?.transition) {
-                    this._element.transition().call(this.zoom.transform, transform);
-                }
-                else {
-                    this._element.call(this.zoom.transform, transform);
-                }
+                this._element.call(this.zoom.transform, transform);
                 this.currentTransform = transform;
             }
         });
@@ -2058,30 +2062,31 @@ class ZoomableDirective {
         ]);
         const min = this.config?.zoom?.minTranslate
             ? this.axis.scale(this.config?.zoom?.minTranslate)
-            : 0;
-        const max = this.config?.zoom?.maxTranslate
-            ? this.axis.scale(this.config?.zoom?.maxTranslate)
-            : this.axis.orientation === AxisOrientation.x ? this.size.width : this.size.height;
-        if (this.axis.orientation === AxisOrientation.x && this.config.zoom?.type === ZoomType.x) {
+            : -Infinity;
+        const max = (this.config?.zoom?.maxTranslate
+            ? this.axis.scale(this.config?.zoom?.maxTranslate) - (this.axis.orientation === AxisOrientation.x ? this.size.width : this.size.height)
+            : Infinity);
+        if (this.axis.orientation === AxisOrientation.x && this.config.zoom.type === ZoomType.x) {
             this.zoom.translateExtent([
-                [min, 0],
-                [max, this.size.height],
+                [min, -Infinity],
+                [max, Infinity],
             ]);
         }
-        if (this.axis.orientation === AxisOrientation.y && this.config.zoom?.type === ZoomType.y) {
+        if (this.axis.orientation === AxisOrientation.y && this.config.zoom.type === ZoomType.y) {
             this.zoom.translateExtent([
-                [0, min],
-                [this.size.width, max],
+                [-Infinity, min],
+                [Infinity, max],
             ]);
         }
         if (this.config.zoom?.wheelDelta) {
             this.zoom.wheelDelta(this.config.zoom?.wheelDelta);
         }
         const maxZoom = this.config.zoom?.max
-            ? (this.axis.extremes[1] - this.axis.extremes[0]) / this.config.zoom?.max : this.config.zoom?.limitZoomByData ? 1 : 0;
-        if (this.config.zoom?.wheelDelta) {
-            this.zoom.wheelDelta(this.config.zoom?.wheelDelta);
-        }
+            ? (this.axis.extremes[1] - this.axis.extremes[0]) /
+                this.config.zoom?.max
+            : this.config.zoom?.limitZoomByData
+                ? 1
+                : 0;
         const minZoom = this.config.zoom?.min
             ? (this.axis.extremes[1] - this.axis.extremes[0]) /
                 this.config.zoom?.min
@@ -2092,18 +2097,6 @@ class ZoomableDirective {
         if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
             this.runWheelTranslate();
         }
-        this.broadcast.subscribeToZoom(this.config?.zoom.syncChannel).subscribe((zoom) => {
-            if (zoom.message.chartId !== this.config?.id && zoom.message.axis.orientation === this.axis.orientation && zoom.message.axis.index === this.axis.index) {
-                const scale = this.axis.scale.copy().domain(this.axis.originDomain);
-                const transform = this.zoomService.getD3Transform(zoom.message.domain, this.axis.originDomain, scale, this.axis.orientation, this.axis.options.inverted);
-                if (zoom.message.style?.transition) {
-                    this._element.transition().duration(300).call(this.zoom.transform, transform, null, { type: 'broadcast' });
-                }
-                else {
-                    this._element.call(this.zoom.transform, transform, null, { type: 'broadcast' });
-                }
-            }
-        });
     }
     runWheelTranslate() {
         let type = 'start';
@@ -2120,6 +2113,7 @@ class ZoomableDirective {
             return delta * 0.002;
         });
         const emit = (type, event) => {
+            const origin = this.axis.scale.copy().domain(this.axis.originDomain);
             let transform = zoomIdentity;
             const delta = type === 'end'
                 ? 0
@@ -2133,7 +2127,22 @@ class ZoomableDirective {
                 transform = transform.translate(this.currentTransform.x - delta / 2, 0);
             }
             transform = transform.scale(this.currentTransform.k);
-            this._element?.call(this.zoom.transform, transform, null, { type: 'wheeling' });
+            let domain = this.axis.orientation === AxisOrientation.y
+                ? transform.rescaleY(origin).domain()
+                : transform.rescaleX(origin).domain();
+            const message = new ZoomMessage({
+                eventType: type,
+                element: this.elementRef,
+                axis: {
+                    index: this.axis.index,
+                    orientation: this.axis.orientation
+                },
+                domain,
+                chartId: this.config.id,
+            });
+            this._element?.call(this.zoom.transform, transform);
+            this.zoomService.fireZoom(message);
+            this.zoomService.broadcastZoom(message);
             this.currentTransform = transform;
         };
         this._element.on('wheel', (event) => {
@@ -2153,14 +2162,14 @@ class ZoomableDirective {
         });
     }
 }
-ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaZoomable]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: ChartService }, { type: BroadcastService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: ChartService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
                 type: Input
             }], axis: [{
                 type: Input
@@ -2201,7 +2210,7 @@ class BrushableDirective {
         if (this.config?.brush?.enable) {
             const brushMessage = new BrushMessage({
                 chartId: this.config.id,
-                selection: [this.config.brush?.from, this.config.brush?.to],
+                selection: [this.config?.brush?.from, this.config?.brush?.to],
             });
             this.brushService.setBrush(brushMessage);
         }