import { select } from 'd3-selection';
import { zoom, ZoomTransform } from 'd3-zoom';
import { Observable } from '@ni/fast-element';
/**
 * ZoomHandler deals with user interactions and events like zooming
 */
export class ZoomHandler {
    constructor(wafermap) {
        this.wafermap = wafermap;
        this.scaleExtent = [1, 100];
        this.minExtentPoint = [0, 0];
        this.onWheelMove = (event) => {
            event.preventDefault();
        };
        this.wafermapNotifier = Observable.getNotifier(this.wafermap);
        this.wafermapNotifier.subscribe(this, 'canvasWidth');
        this.wafermapNotifier.subscribe(this, 'canvasHeight');
    }
    /**
     * @internal
     */
    connect() {
        this.createZoomBehavior();
        this.wafermap.addEventListener('wheel', this.onWheelMove, {
            passive: false
        });
    }
    /**
     * @internal
     */
    disconnect() {
        zoom().on('zoom', null)(select(this.wafermap));
        this.wafermap.removeEventListener('wheel', this.onWheelMove);
    }
    handleChange(source, propertyName) {
        if (source === this.wafermap
            && (propertyName === 'canvasWidth' || propertyName === 'canvasHeight')) {
            this.createZoomBehavior();
        }
    }
    createZoomBehavior() {
        zoom()
            .scaleExtent(this.scaleExtent)
            .translateExtent([
            this.minExtentPoint,
            [this.wafermap.canvasWidth, this.wafermap.canvasHeight]
        ])
            .on('zoom', (event) => {
            // D3 will automatically remove existing handlers when adding new ones
            // See: https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_on
            this.wafermap.transform = event.transform;
        })(select(this.wafermap));
    }
}
//# sourceMappingURL=zoom-handler.js.map