@tetacom/svg-charts 1.1.12 → 1.1.13

package/fesm2020/tetacom-svg-charts.mjs

@@ -676,11 +676,24 @@ class BrushService {
                     if (to - from === 0) {
                         const selection = this.selection?.map(brushScale) ?? [config.brush?.from, config.brush?.to].map(brushScale);
                         const halfBrushHeight = (selection[1] - selection[0]) / 2;
+                        const invertedSelection = [from - halfBrushHeight, to + halfBrushHeight].map(brushScale.invert);
+                        if (invertedSelection[1] - invertedSelection[0] > config.brush?.max) {
+                            container.call(this.brush.move, [invertedSelection[0], invertedSelection[0] + config.brush?.max].map(brushScale));
+                            return;
+                        }
+                        if (invertedSelection[1] - invertedSelection[0] < config.brush?.min) {
+                            container.call(this.brush.move, [invertedSelection[0], invertedSelection[0] + config.brush?.min].map(brushScale));
+                            return;
+                        }
                         container.call(this.brush.move, [from - halfBrushHeight, to + halfBrushHeight]);
                         return;
                     }
-                    if (brushScale.invert(to) - brushScale.invert(from) > config.brush?.limit) {
-                        container.call(this.brush.move, this.selection ? this.selection.map(brushScale) : [config.brush?.from, config.brush?.to].map(brushScale));
+                    if (brushScale.invert(to) - brushScale.invert(from) > config.brush?.max) {
+                        container.call(this.brush.move, this.selection ? [this.selection[0], this.selection[0] + config.brush?.max].map(brushScale) : [config.brush?.from, config.brush?.to].map(brushScale));
+                        return;
+                    }
+                    if (brushScale.invert(to) - brushScale.invert(from) < config.brush?.min) {
+                        container.call(this.brush.move, this.selection ? [this.selection[0], this.selection[0] + config.brush?.min].map(brushScale) : [config.brush?.from, config.brush?.to].map(brushScale));
                         return;
                     }
                     if (_.sourceEvent instanceof MouseEvent) {
@@ -690,7 +703,7 @@ class BrushService {
                         event: _,
                         selection: [brushScale.invert(from), brushScale.invert(to)],
                         brushType: config?.brush?.type ?? BrushType.x,
-                        brushScale,
+                        brushScale
                     });
                     this.broadcastService.broadcastBrush({
                         channel: config?.zoom?.syncChannel,
@@ -1814,8 +1827,6 @@ class ZoomableDirective {
             this.zoomable = true;
         }
     }
-    ngOnChanges(changes) {
-    }
     ngAfterViewInit() {
         const enable = this.axis?.options?.zoom && this.axis?.options.visible || this.config?.zoom?.enable;
         if (!enable) {
@@ -1824,7 +1835,6 @@ class ZoomableDirective {
         this._element = d3.select(this.elementRef.nativeElement);
         this.zoom = d3
             .zoom()
-            .scaleExtent([0, Infinity])
             .extent([
             [0, 0],
             [this.size.width, this.size.height],
@@ -1832,26 +1842,26 @@ class ZoomableDirective {
         const commonZoomAxis = Axis.createAxis(this.config?.zoom.type === ZoomType.x ? AxisOrientation.x : AxisOrientation.y, this.config, 0, true);
         this.zoomAxis = this.axis ?? commonZoomAxis;
         if (enable) {
+            const maxZoom = this.config.zoom?.max ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.max : 0;
+            const minZoom = this.config.zoom?.min ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.min : Infinity;
+            this.zoom.scaleExtent([maxZoom, minZoom]);
+            console.log(this.zoom.scaleExtent());
             this.zoom.on('start zoom end', this.zoomed);
             this._element.call(this.zoom);
         }
         // Subscribe to zoom events
-        this.broadcastService.subscribeToZoom(this.config?.zoom.syncChannel).pipe(filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), debounceTime(50), filter((m) => {
+        this.broadcastService.subscribeToZoom(this.config?.zoom.syncChannel).pipe(filter((m) => m.message.event.sourceEvent instanceof MouseEvent || m.message.event.sourceEvent instanceof WheelEvent), debounceTime(30), filter((m) => {
             return this.zoomAxis.index === m.message?.axis?.index && this.zoomAxis.orientation === m.message?.axis?.orientation;
         }), tap$1((m) => {
             const currentTransform = d3.zoomTransform(this.elementRef.nativeElement);
             if (currentTransform !== m.message.event.transform) {
-                if (this.zoomAxis.isFake && !m.message.axis.isFake || !this.zoomAxis.isFake && m.message.axis.isFake) {
-                    this._element.call(this.zoom.transform, m.message.event.transform, null, {});
-                    return;
-                }
-                this._element.transition().call(this.zoom.transform, m.message.event.transform, null, {});
+                this._element.call(this.zoom.transform, m.message.event.transform, null, {});
             }
         }), takeWhile((_) => this.alive)).subscribe();
         // Subscribe to brush events x or y
         if ((this.config.brush?.type === BrushType.x && this.zoomAxis.orientation === AxisOrientation.x) ||
             (this.config.brush?.type === BrushType.y && this.zoomAxis.orientation === AxisOrientation.y)) {
-            this.broadcastService.subscribeToBrush(this.config?.zoom.syncChannel).pipe(throttleTime(0, animationFrameScheduler, { leading: false, trailing: true }), filter((m) => Boolean(m.message.selection)), tap$1((m) => {
+            this.broadcastService.subscribeToBrush(this.config?.zoom.syncChannel).pipe(debounceTime(30), filter((m) => Boolean(m.message.selection)), tap$1((m) => {
                 const currentTransform = d3.zoomTransform(this.elementRef.nativeElement);
                 if (!m.message.event && this.currentSelection && currentTransform.k !== 1) {
                     return;
@@ -1885,7 +1895,7 @@ class ZoomableDirective {
     }
 }
 ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale" }, host: { properties: { "class.zoomable": "this.zoomable" } }, usesOnChanges: true, ngImport: i0 });
+ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size", brushScale: "brushScale" }, host: { properties: { "class.zoomable": "this.zoomable" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{