@visactor/vrender-components/cjs/switch/switch.js

components library for dp visualization

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: !0
}), exports.Switch = void 0;

const vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), vrender_core_1 = require("@visactor/vrender-core"), register_1 = require("./register"), util_1 = require("../util");

(0, register_1.loadSwitchComponent)();

class Switch extends base_1.AbstractComponent {
    constructor(attributes, options) {
        super((null == options ? void 0 : options.skipDefault) ? attributes : (0, vutils_1.merge)({}, Switch.defaultAttributes, attributes)), 
        this._handlePointerUp = () => {
            this.attribute.disabled || (this.attribute.checked ? this.setAttribute("checked", !1) : this.setAttribute("checked", !0), 
            this._dispatchEvent("switch_state_change", {
                eventType: "switch_state_change",
                checked: this.attribute.checked
            }), this.stage.renderNextFrame());
        }, this.renderGroup(), this.onBeforeAttributeUpdate = (val, attributes, key) => {
            "interactive" in val && this.setAttribute("pickable", val.interactive), "disabled" in val && this.setAttribute("cursor", val.disable ? this.attribute.disableCursor : this.attribute.cursor);
        }, this.addEventListener("pointerup", this._handlePointerUp);
    }
    render() {
        this.removeAllChild(!0), this.renderBox(), this.renderCircle(), this.renderText(), 
        this.layout();
    }
    renderBox() {
        this._box = new vrender_core_1.Rect((0, vutils_1.merge)({}, this.attribute.box)), 
        this.attribute.disabled && this.attribute.checked ? this._box.setAttributes({
            fill: this.attribute.box.disableCheckedFill
        }) : this.attribute.disabled && !this.attribute.checked ? this._box.setAttributes({
            fill: this.attribute.box.disableUncheckedFill
        }) : this.attribute.checked ? this._box.setAttributes({
            fill: this.attribute.box.checkedFill
        }) : this._box.setAttributes({
            fill: this.attribute.box.uncheckedFill
        }), this.appendChild(this._box);
    }
    renderCircle() {
        this._circle = new vrender_core_1.Circle((0, vutils_1.merge)({}, this.attribute.circle)), 
        this.appendChild(this._circle);
    }
    renderText() {
        var _a, _b, _c;
        this._text = new vrender_core_1.Text((0, vutils_1.merge)({}, null !== (_a = this.attribute.text) && void 0 !== _a ? _a : {})), 
        this.attribute.checked && (null === (_b = this.attribute.text) || void 0 === _b ? void 0 : _b.checkedText) ? this._text.setAttributes({
            text: this.attribute.text.checkedText
        }) : (null === (_c = this.attribute.text) || void 0 === _c ? void 0 : _c.uncheckedText) && this._text.setAttributes({
            text: this.attribute.text.uncheckedText
        }), this.appendChild(this._text);
    }
    renderGroup() {
        this.attribute.interactive || this.setAttribute("pickable", !1), this.attribute.disabled && this.setAttribute("cursor", this.attribute.disableCursor);
    }
    layout() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        const space = this.attribute.spaceBetweenTextAndCircle, radius = this.attribute.circle.radius, boxHeight = this.attribute.box.height, circleHeight = 2 * radius, textHeight = this._text.AABBBounds.height(), maxHeight = Math.max(boxHeight, circleHeight, textHeight), circleY = maxHeight / 2 - circleHeight / 2 + radius, textY = maxHeight / 2 - textHeight / 2, boxWidth = this.attribute.box.width, circleWidth = 2 * radius, textWidth = (0, 
        util_1.measureTextSize)((null !== (_c = null === (_b = null === (_a = this.attribute.text) || void 0 === _a ? void 0 : _a.checkedText) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0) > (null !== (_f = null === (_e = null === (_d = this.attribute.text) || void 0 === _d ? void 0 : _d.uncheckedText) || void 0 === _e ? void 0 : _e.length) && void 0 !== _f ? _f : 0) ? null !== (_h = null === (_g = this.attribute.text) || void 0 === _g ? void 0 : _g.checkedText) && void 0 !== _h ? _h : "" : null !== (_k = null === (_j = this.attribute.text) || void 0 === _j ? void 0 : _j.uncheckedText) && void 0 !== _k ? _k : "", this._text.attribute).width, maxWidth = Math.max(boxWidth, circleWidth + textWidth + 3 * space), circleX = boxHeight / 2 - circleWidth / 2 + radius, textX = circleX + radius + space;
        this._box.setAttributes({
            width: maxWidth,
            height: maxHeight
        }), this._circle.setAttributes({
            y: circleY,
            x: this.attribute.checked ? maxWidth - circleX : circleX
        }), this._text.setAttributes({
            x: this.attribute.checked ? maxWidth - textX - textWidth : textX,
            y: textY
        });
    }
    initAttributes(params, options) {
        params = (null == options ? void 0 : options.skipDefault) ? params : (0, vutils_1.merge)({}, Switch.defaultAttributes, params), 
        super.initAttributes(params), this.renderGroup(), this.render();
    }
}

exports.Switch = Switch, Switch.defaultAttributes = {
    interactive: !0,
    disabled: !1,
    checked: !1,
    cursor: "pointer",
    disableCursor: "not-allowed",
    circle: {
        radius: 8,
        fill: "#FFF",
        pickable: !1
    },
    box: {
        width: 40,
        height: 24,
        cornerRadius: 12,
        uncheckedFill: "rgb(201,205,212)",
        checkedFill: "#165DFF",
        disableUncheckedFill: "rgb(242,243,245)",
        disableCheckedFill: "rgb(148,191,255)",
        pickable: !1
    },
    text: {
        textAlign: "left",
        textBaseline: "top",
        pickable: !1
    },
    spaceBetweenTextAndCircle: 6
};
//# sourceMappingURL=switch.js.map