@visactor/vrender-components/es/legend/size/size.js

components library for dp visualization

import { graphicCreator } from "@visactor/vrender-core";

import { merge, get } from "@visactor/vutils";

import { LegendBase } from "../base";

import { Slider } from "../../slider";

import { DEFAULT_TITLE_SPACE } from "../constant";

import { getSizeHandlerPath } from "../util";

import { loadSizeContinuousLegendComponent } from "../register";

loadSizeContinuousLegendComponent();

export class SizeContinuousLegend extends LegendBase {
    constructor(attributes, options) {
        super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, SizeContinuousLegend.defaultAttributes, attributes)), 
        this.name = "sizeLegend", this._onSliderChange = e => {
            this.dispatchEvent(e);
        }, this._onSliderToolipChange = e => {
            this.dispatchEvent(e);
        };
    }
    setSelected(value) {
        this._slider && this._slider.setValue(value);
    }
    _renderContent() {
        const {slidable: slidable, layout: layout, align: align, min: min, max: max, value: value, railWidth: railWidth, railHeight: railHeight, showHandler: showHandler = !0, handlerSize: handlerSize, handlerStyle: handlerStyle, railStyle: railStyle, trackStyle: trackStyle, startText: startText, endText: endText, handlerText: handlerText, showTooltip: showTooltip, tooltip: tooltip, sizeBackground: sizeBackground, disableTriggerEvent: disableTriggerEvent, inverse: inverse} = this.attribute, mainContainer = graphicCreator.group({
            x: 0,
            y: 0
        });
        this._innerView.add(mainContainer);
        const slider = new Slider({
            x: 0,
            y: 0,
            zIndex: 1,
            range: {
                draggableTrack: !0
            },
            slidable: slidable,
            layout: layout,
            align: align,
            min: min,
            max: max,
            value: value,
            railWidth: railWidth,
            railHeight: railHeight,
            showHandler: showHandler,
            handlerSize: handlerSize,
            handlerStyle: Object.assign({
                symbolType: getSizeHandlerPath(align)
            }, handlerStyle),
            railStyle: railStyle,
            trackStyle: trackStyle,
            startText: startText,
            endText: endText,
            handlerText: handlerText,
            showTooltip: showTooltip,
            tooltip: tooltip,
            disableTriggerEvent: disableTriggerEvent,
            inverse: inverse
        });
        mainContainer.add(slider);
        let path, start = 0;
        "horizontal" === layout ? "top" === align ? (path = `M0,0L${railWidth},0L${inverse ? 0 : railWidth},12Z`, 
        start = railHeight) : (path = `M0,12L${railWidth},12L${inverse ? 0 : railWidth},0Z`, 
        slider.setAttribute("y", 12)) : "left" === align ? path = `M${railWidth},0L${railWidth + 12},${inverse ? 0 : railHeight}L${railWidth},${railHeight}Z` : (path = `M0,${inverse ? 0 : railHeight}L12,${railHeight}L12,0Z`, 
        slider.setAttribute("x", 12));
        const background = graphicCreator.path(Object.assign(Object.assign({
            x: 0,
            y: start,
            path: path
        }, sizeBackground), {
            zIndex: 0
        }));
        mainContainer.add(background);
        const titleSpace = this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", DEFAULT_TITLE_SPACE) : 0;
        mainContainer.translate(0 - mainContainer.AABBBounds.x1, titleSpace - mainContainer.AABBBounds.y1), 
        this._slider = slider;
    }
    _bindEvents() {
        this.attribute.disableTriggerEvent || this._slider && (this._slider.addEventListener("change", this._onSliderChange), 
        this._slider.addEventListener("sliderTooltip", this._onSliderToolipChange));
    }
}

SizeContinuousLegend.defaultAttributes = {
    layout: "horizontal",
    title: {
        align: "start",
        space: DEFAULT_TITLE_SPACE,
        textStyle: {
            fontSize: 12,
            fontWeight: "bold",
            fill: "rgba(46, 47, 50, 1)"
        }
    },
    handlerSize: 10,
    handlerStyle: {
        lineWidth: 1,
        stroke: "#ccc",
        fill: "#fff"
    },
    sizeBackground: {
        fill: "rgba(20,20,20,0.1)"
    }
};
//# sourceMappingURL=size.js.map