@tetacom/svg-charts 1.7.10 → 1.7.12

package/chart/directives/zoomable.directive.d.ts

@@ -3,12 +3,12 @@ import { ZoomService } from '../service/zoom.service';
 import { IChartConfig } from '../model/i-chart-config';
 import { Axis } from '../core/axis/axis';
 import { D3ZoomEvent } from 'd3';
-import { ChartService } from '../service/chart.service';
+import { ScaleService } from '../service/scale.service';
 import * as i0 from "@angular/core";
 export declare class ZoomableDirective implements OnDestroy, AfterViewInit {
     private elementRef;
     private zoomService;
-    private chartService;
+    private scaleService;
     private zone;
     config: IChartConfig;
     axis: Axis;
@@ -21,7 +21,7 @@ export declare class ZoomableDirective implements OnDestroy, AfterViewInit {
     mouseenter(): void;
     mouseleave(): void;
     private currentTransform;
-    constructor(elementRef: ElementRef, zoomService: ZoomService, chartService: ChartService, zone: NgZone);
+    constructor(elementRef: ElementRef, zoomService: ZoomService, scaleService: ScaleService, zone: NgZone);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/fesm2022/tetacom-svg-charts.mjs

@@ -119,7 +119,7 @@ const defaultChartConfig = () => ({
         enable: true,
     },
     controls: {
-        enable: true,
+        enable: false,
     },
     tooltip: {
         enable: true,
@@ -1231,7 +1231,6 @@ class ZoomableDirective {
     mouseenter() {
         this.zoom?.on('start zoom end', this.zoomed);
         this._element?.call(this.zoom).on('dblclick.zoom', null);
-        // Run wheel event listener
         if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
             this.runWheelTranslate();
         }
@@ -1240,10 +1239,10 @@ class ZoomableDirective {
         this.zoom?.on('start zoom end', null);
         this._element?.on('wheel', null);
     }
-    constructor(elementRef, zoomService, chartService, zone) {
+    constructor(elementRef, zoomService, scaleService, zone) {
         this.elementRef = elementRef;
         this.zoomService = zoomService;
-        this.chartService = chartService;
+        this.scaleService = scaleService;
         this.zone = zone;
         this.zoomable = false;
         this.crosshair = false;
@@ -1301,20 +1300,21 @@ class ZoomableDirective {
         this.alive = false;
     }
     initZoomSync() {
-        this.zoomService.zoomed.pipe(takeWhile(() => this.alive)).subscribe((zoomed) => {
+        combineLatest([this.scaleService.scales, this.zoomService.zoomed]).pipe(takeWhile(() => this.alive)).subscribe((data) => {
+            const [scales, zoomed] = data;
             if (this._element &&
-                this.elementRef !== zoomed?.element &&
                 zoomed?.axis?.index === this.axis.index &&
                 zoomed?.axis?.orientation === this.axis.orientation) {
-                const scale = this.axis.scale.copy().domain(this.axis.originDomain);
+                const axis = this.axis.orientation === AxisOrientation.x ? scales.x.get(this.axis.index) : scales.y.get(this.axis.index);
+                const scale = axis.scale.copy().domain(this.axis.originDomain);
                 let transform;
                 if (zoomed.domain === null) {
                     transform = zoomIdentity;
                 }
                 else {
-                    transform = this.zoomService.getD3Transform(zoomed.domain, this.axis.originDomain, scale, this.axis.orientation, this.axis.options.inverted);
+                    transform = this.zoomService.getD3Transform(zoomed.domain, axis.originDomain, scale, axis.orientation, axis.options.inverted);
                 }
-                this._element.call(this.zoom.transform, transform);
+                this.elementRef.nativeElement.__zoom = transform;
                 this.currentTransform = transform;
             }
         });
@@ -1408,7 +1408,7 @@ class ZoomableDirective {
                 domain,
                 chartId: this.config.id,
             });
-            this._element?.call(this.zoom.transform, transform);
+            this.elementRef.nativeElement.__zoom = transform;
             this.zoomService.fireZoom(message);
             this.zoomService.broadcastZoom(message);
             this.currentTransform = transform;
@@ -1429,7 +1429,7 @@ class ZoomableDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ScaleService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: ZoomableDirective, isStandalone: true, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ZoomableDirective, decorators: [{
@@ -1438,7 +1438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     selector: '[tetaZoomable]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ZoomService }, { type: ChartService }, { type: i0.NgZone }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ZoomService }, { type: ScaleService }, { type: i0.NgZone }], propDecorators: { config: [{
                 type: Input
             }], axis: [{
                 type: Input