@amcharts/amcharts5/.internal/core/render/ZoomTools.js

amCharts 5

import { Container } from "../../core/render/Container";
import { Button } from "../../core/render/Button";
import { Graphics } from "../../core/render/Graphics";
import { MultiDisposer } from "../../core/util/Disposer";
import { ZoomableContainer } from "./ZoomableContainer";
/**
 * A tool that displays button for zoomable targets.
 *
 * @since 5.8.0
 * @important
 */
export class ZoomTools extends Container {
    constructor() {
        super(...arguments);
        /**
         * A [[Button]] for home.
         */
        this.homeButton = this.children.push(Button.new(this._root, { width: 35, height: 35, themeTags: ["home"] })._markC("width", "height", "themeTags"));
        /**
         * A [[Button]] for zoom in.
         */
        this.plusButton = this.children.push(Button.new(this._root, { width: 35, height: 35, themeTags: ["plus"] })._markC("width", "height", "themeTags"));
        /**
         * A [[Button]] for zoom out.
         */
        this.minusButton = this.children.push(Button.new(this._root, { width: 35, height: 35, themeTags: ["minus"] })._markC("width", "height", "themeTags"));
    }
    _afterNew() {
        super._afterNew();
        this._setC("position", "absolute");
        this._setC("layout", this._root.verticalLayout);
        this.addTag("zoomtools");
        this.plusButton._setCAll({
            icon: Graphics.new(this._root, { themeTags: ["icon"] }),
            layout: undefined
        });
        this.minusButton._setCAll({
            icon: Graphics.new(this._root, { themeTags: ["icon"] }),
            layout: undefined
        });
        this.homeButton._setCAll({
            icon: Graphics.new(this._root, { themeTags: ["icon"] }),
            layout: undefined
        });
    }
    _prepareChildren() {
        super._prepareChildren();
        if (this.isDirty("target")) {
            const target = this.get("target");
            const previous = this._prevSettings.target;
            if (target) {
                if (target instanceof ZoomableContainer) {
                    this._targetDisposer = this.addDisposer(target.contents.on("scale", (scale) => {
                        if (scale == target.get("minZoomLevel")) {
                            this.minusButton._setC("disabled", true);
                        }
                        else {
                            this.minusButton._setC("disabled", false);
                        }
                        if (scale == target.get("maxZoomLevel")) {
                            this.plusButton._setC("disabled", true);
                        }
                        else {
                            this.plusButton._setC("disabled", false);
                        }
                    }));
                    this.root.events.once("frameended", () => {
                        if (target.get("scale") == target.get("minZoomLevel")) {
                            this.minusButton._setC("disabled", true);
                        }
                    });
                }
                this._disposer = new MultiDisposer([
                    this.plusButton.events.on("click", () => {
                        target.zoomIn();
                    }),
                    this.minusButton.events.on("click", () => {
                        target.zoomOut();
                    }),
                    this.homeButton.events.on("click", () => {
                        target.goHome();
                    })
                ]);
            }
            if (previous) {
                if (this._disposer) {
                    this._disposer.dispose();
                }
                if (this._targetDisposer) {
                    this._targetDisposer.dispose();
                }
            }
        }
    }
}
ZoomTools.className = "ZoomTools";
ZoomTools.classNames = Container.classNames.concat([ZoomTools.className]);
//# sourceMappingURL=ZoomTools.js.map