import { __decorate } from "tslib";
import { HPCCSVGElement, attribute, customElement, css, html, ref, display } from "@hpcc-js/wc-core";
import * as d3 from "d3";
const template = html `\
<svg ${ref("_svg")}>
    <foreignObject ${ref("_content")} x="0" y="0" width="100%" height="100%" style="overflow:visible">
        <slot></slot>
    </foreignObject>
</svg>`;
const styles = css `
${display("inline-block")} 
`;
let HPCCZoomElement = class HPCCZoomElement extends HPCCSVGElement {
    constructor() {
        super();
        /**
         * The minimum scale extent that can be applied to the content
         *
         * @defaultValue 0.5
         */
        this.scale_min = 0.5;
        /**
         * The maximum scale extent that can be applied to the content
         *
         * @defaultValue 0.5
         */
        this.scale_max = 1.5;
        /**
         * The current x-position of the content
         *
         * @defaultValue 0
         */
        this.x = 0;
        /**
         * The current y-position of the content
         *
         * @defaultValue 0
         */
        this.y = 0;
        /**
         * The current scale of the content
         *
         * @defaultValue 1
         */
        this.scale = 1;
        this._zoom = d3
            .zoom()
            .duration(0)
            .on("zoom", ({ transform }) => {
            this.x = transform.x;
            this.y = transform.y;
            this.scale = transform.k;
            this.$emit("change");
        });
    }
    enter() {
        super.enter();
        this.svg = d3.select(this.shadowRoot).select("svg");
        this.content = this.svg.select("foreignObject");
        this.svg.call(this._zoom, d3.zoomIdentity.translate(this.x, this.y).scale(this.scale));
    }
    update(changes) {
        super.update(changes);
        this.content
            .attr("width", `${this.clientWidth}`)
            .attr("height", `${this.clientHeight}`);
        this._zoom
            .extent([
            [0, 0],
            [this.clientWidth, this.clientHeight]
        ])
            .scaleExtent([this.scale_min, this.scale_max]);
        if (changes.x !== undefined || changes.y !== undefined || changes.scale !== undefined) {
            this.content.attr("transform", d3.zoomIdentity.translate(this.x, this.y).scale(this.scale).toString());
        }
        this._zoom.transform(this.svg, d3.zoomIdentity.translate(this.x, this.y).scale(this.scale));
    }
};
__decorate([
    attribute({ type: "number" })
], HPCCZoomElement.prototype, "scale_min", void 0);
__decorate([
    attribute({ type: "number" })
], HPCCZoomElement.prototype, "scale_max", void 0);
__decorate([
    attribute({ type: "number" })
], HPCCZoomElement.prototype, "x", void 0);
__decorate([
    attribute({ type: "number" })
], HPCCZoomElement.prototype, "y", void 0);
__decorate([
    attribute({ type: "number" })
], HPCCZoomElement.prototype, "scale", void 0);
HPCCZoomElement = __decorate([
    customElement("hpcc-zoom", { template, styles })
], HPCCZoomElement);
export { HPCCZoomElement };
//# sourceMappingURL=zoom.js.map