@visactor/vrender-components 0.0.38-brush.2-alpha.0

package/cjs/segment/type.d.ts

@@ -0,0 +1,22 @@
+import { IGraphicAttribute, IGroupGraphicAttribute, ILineGraphicAttribute, ISymbolGraphicAttribute, SymbolType } from '@visactor/vrender';
+import { Point, State } from '../core/type';
+export type SymbolAttributes = {
+    visible: boolean;
+    symbolType?: SymbolType;
+    size?: number;
+    refX?: number;
+    refY?: number;
+    refAngle?: number;
+    clip?: boolean;
+    style?: Partial<IGraphicAttribute>;
+};
+export interface SegmentAttributes extends IGroupGraphicAttribute {
+    points: Point[];
+    startSymbol?: SymbolAttributes;
+    endSymbol?: SymbolAttributes;
+    lineStyle?: Partial<ILineGraphicAttribute>;
+    state?: {
+        line?: State<Partial<ILineGraphicAttribute>>;
+        symbol?: State<Partial<ISymbolGraphicAttribute>>;
+    };
+}

package/cjs/segment/type.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+});
+//# sourceMappingURL=type.js.map

package/cjs/segment/type.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segment/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import {\n  IGraphicAttribute,\n  IGroupGraphicAttribute,\n  ILineGraphicAttribute,\n  ISymbolGraphicAttribute,\n  SymbolType\n} from '@visactor/vrender';\nimport { Point, State } from '../core/type';\n\nexport type SymbolAttributes = {\n  /** 是否展示 symbol */\n  visible: boolean;\n  /**\n   * symbol 形状，默认为带左右方向的箭头\n   */\n  symbolType?: SymbolType;\n  /**\n   * symbol 大小\n   */\n  size?: number;\n  /**\n   * symbol 相对line平行方向上的偏移\n   */\n  refX?: number;\n  /**\n   * symbol 相对line正交方向上的偏移\n   */\n  refY?: number;\n  /**\n   * symbol 相对默认角度的偏移\n   * @description (@chensiji: 默认角度为笛卡尔坐标系y正方向，即默认symbol包围盒的角度为笛卡尔坐标系y正方向, 做自动旋转时, 会在此基础上，将包围盒转换到line平行方向上。)\n   */\n  refAngle?: number;\n  /**\n   * symbol 是否clip line，即当symbol fill为false时，line在symbol内部的部分是否展示\n   * @defalut false\n   */\n  clip?: boolean;\n  /**\n   * symbol 样式配置\n   */\n  style?: Partial<IGraphicAttribute>;\n};\n\nexport interface SegmentAttributes extends IGroupGraphicAttribute {\n  points: Point[];\n  /** 轴线起始点 symbol 配置 */\n  startSymbol?: SymbolAttributes;\n  /** 轴线末端 symbol 配置 */\n  endSymbol?: SymbolAttributes;\n  /**\n   * 线样式配置\n   */\n  lineStyle?: Partial<ILineGraphicAttribute>;\n\n  state?: {\n    line?: State<Partial<ILineGraphicAttribute>>;\n    symbol?: State<Partial<ISymbolGraphicAttribute>>;\n  };\n}\n"]}

package/cjs/slider/constant.d.ts

@@ -0,0 +1,13 @@
+export declare enum SLIDER_ELEMENT_NAME {
+    innerView = "innerView",
+    railContainer = "sliderRailContainer",
+    rail = "sliderRail",
+    startText = "sliderStartText",
+    endText = "sliderEndText",
+    startHandler = "sliderStartHandler",
+    startHandlerText = "startHandlerText",
+    endHandler = "sliderEndHandler",
+    endHandlerText = "sliderEndHandlerText",
+    track = "sliderTrack",
+    trackContainer = "sliderTrackContainer"
+}

package/cjs/slider/constant.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var SLIDER_ELEMENT_NAME;
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.SLIDER_ELEMENT_NAME = void 0, function(SLIDER_ELEMENT_NAME) {
+    SLIDER_ELEMENT_NAME.innerView = "innerView", SLIDER_ELEMENT_NAME.railContainer = "sliderRailContainer", 
+    SLIDER_ELEMENT_NAME.rail = "sliderRail", SLIDER_ELEMENT_NAME.startText = "sliderStartText", 
+    SLIDER_ELEMENT_NAME.endText = "sliderEndText", SLIDER_ELEMENT_NAME.startHandler = "sliderStartHandler", 
+    SLIDER_ELEMENT_NAME.startHandlerText = "startHandlerText", SLIDER_ELEMENT_NAME.endHandler = "sliderEndHandler", 
+    SLIDER_ELEMENT_NAME.endHandlerText = "sliderEndHandlerText", SLIDER_ELEMENT_NAME.track = "sliderTrack", 
+    SLIDER_ELEMENT_NAME.trackContainer = "sliderTrackContainer";
+}(SLIDER_ELEMENT_NAME = exports.SLIDER_ELEMENT_NAME || (exports.SLIDER_ELEMENT_NAME = {}));
+//# sourceMappingURL=constant.js.map

package/cjs/slider/constant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/constant.ts"],"names":[],"mappings":";;;AAAA,IAAY,mBAeX;AAfD,WAAY,mBAAmB;IAC7B,8CAAuB,CAAA;IACvB,4DAAqC,CAAA;IACrC,0CAAmB,CAAA;IACnB,oDAA6B,CAAA;IAC7B,gDAAyB,CAAA;IAEzB,0DAAmC,CAAA;IACnC,4DAAqC,CAAA;IACrC,sDAA+B,CAAA;IAC/B,8DAAuC,CAAA;IAEvC,4CAAqB,CAAA;IAErB,8DAAuC,CAAA;AACzC,CAAC,EAfW,mBAAmB,GAAnB,2BAAmB,KAAnB,2BAAmB,QAe9B","file":"constant.js","sourcesContent":["export enum SLIDER_ELEMENT_NAME {\n  innerView = 'innerView',\n  railContainer = 'sliderRailContainer',\n  rail = 'sliderRail',\n  startText = 'sliderStartText',\n  endText = 'sliderEndText',\n\n  startHandler = 'sliderStartHandler',\n  startHandlerText = 'startHandlerText',\n  endHandler = 'sliderEndHandler',\n  endHandlerText = 'sliderEndHandlerText',\n\n  track = 'sliderTrack',\n\n  trackContainer = 'sliderTrackContainer'\n}\n"]}

package/cjs/slider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './type';
+export * from './slider';
+export * from './constant';

package/cjs/slider/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./type"), exports), __exportStar(require("./slider"), exports), 
+__exportStar(require("./constant"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slider/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yCAAuB;AACvB,2CAAyB;AACzB,6CAA2B","file":"index.js","sourcesContent":["export * from './type';\nexport * from './slider';\nexport * from './constant';\n"]}

package/cjs/slider/slider.d.ts

@@ -0,0 +1,96 @@
+import { IGroup, ISymbol, IGraphic, ISymbolGraphicAttribute, IText } from '@visactor/vrender';
+import { AbstractComponent } from '../core/base';
+import type { SliderAttributes } from './type';
+export declare class Slider extends AbstractComponent<Required<SliderAttributes>> {
+    name: string;
+    static defaultAttributes: {
+        slidable: boolean;
+        layout: string;
+        align: string;
+        height: number;
+        showHandler: boolean;
+        handlerSize: number;
+        handlerStyle: {
+            symbolType: string;
+            fill: boolean;
+            fillColor: string;
+            stroke: string;
+            strokeColor: string;
+            lineWidth: number;
+        };
+        railStyle: {
+            fillColor: string;
+        };
+        trackStyle: {
+            fillColor: string;
+        };
+        showValue: boolean;
+        valueStyle: {
+            fillColor: string;
+            fontSize: number;
+        };
+        startText: {
+            style: {
+                fillColor: string;
+                fontSize: number;
+            };
+        };
+        endText: {
+            style: {
+                fillColor: string;
+                fontSize: number;
+            };
+        };
+        handlerText: {
+            visible: boolean;
+            space: number;
+            precision: number;
+            style: {
+                fillColor: string;
+                fontSize: number;
+            };
+        };
+    };
+    protected _isHorizontal: boolean;
+    protected _innerView: IGroup;
+    protected _startHandler: ISymbol | null;
+    protected _endHandler: ISymbol | null;
+    protected _startHandlerText: IText | null;
+    protected _endHandlerText: IText | null;
+    protected _railContainer: IGroup;
+    protected _rail: IGraphic;
+    protected _track: IGraphic;
+    private _prePos;
+    private _currentHandler;
+    private _currentValue;
+    get track(): IGraphic<Partial<import("@visactor/vrender").IGraphicAttribute>>;
+    get currentValue(): {
+        startValue?: number;
+        endValue?: number;
+        startPos?: number;
+        endPos?: number;
+    };
+    get startHandler(): ISymbol;
+    get endHandler(): ISymbol;
+    constructor(attributes: SliderAttributes);
+    setValue(value: number | number[]): void;
+    render(): void;
+    protected _renderRail(container: IGroup): import("@visactor/vrender").IRect;
+    protected _renderHandlers(container: IGroup): void;
+    protected _renderTrack(container: IGroup): void;
+    protected _renderHandler(style: Partial<ISymbolGraphicAttribute>): ISymbol;
+    private _renderHandlerText;
+    private _bindEvents;
+    private _onHandlerPointerdown;
+    private _onHandlerPointerMove;
+    private _onHandlerPointerUp;
+    private _onTrackPointerdown;
+    private _onTrackPointerMove;
+    private _onTrackPointerUp;
+    private _onRailPointerDown;
+    private _updateTrack;
+    private _updateHandler;
+    private _updateHandlerText;
+    private _dispatchChangeEvent;
+    private _getHandlers;
+}

package/cjs/slider/slider.js

@@ -0,0 +1,405 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Slider = void 0;
+
+const vutils_1 = require("@visactor/vutils"), vrender_1 = require("@visactor/vrender"), base_1 = require("../core/base"), constant_1 = require("./constant");
+
+function convertValueToRange(value) {
+    return (0, vutils_1.isArray)(value) ? value : [ value, value ];
+}
+
+function getDefaultCursor(isHorizontal) {
+    return isHorizontal ? "ew-resize" : "ns-resize";
+}
+
+class Slider extends base_1.AbstractComponent {
+    get track() {
+        return this._track;
+    }
+    get currentValue() {
+        return this._currentValue;
+    }
+    get startHandler() {
+        return this._startHandler;
+    }
+    get endHandler() {
+        return this._endHandler;
+    }
+    constructor(attributes) {
+        super((0, vutils_1.merge)({}, Slider.defaultAttributes, attributes)), this.name = "slider", 
+        this._isHorizontal = !0, this._startHandler = null, this._endHandler = null, this._startHandlerText = null, 
+        this._endHandlerText = null, this._currentHandler = null, this._currentValue = {}, 
+        this._onHandlerPointerdown = e => {
+            e.stopPropagation(), this._currentHandler = e.target, this._prePos = this._isHorizontal ? e.clientX : e.clientY, 
+            "browser" === vrender_1.global.env ? (vrender_1.global.addEventListener("pointermove", this._onHandlerPointerMove), 
+            vrender_1.global.addEventListener("pointerup", this._onHandlerPointerUp)) : (this._currentHandler.addEventListener("pointermove", this._onHandlerPointerMove), 
+            this._currentHandler.addEventListener("pointerup", this._onHandlerPointerUp), this._currentHandler.addEventListener("pointerupoutside", this._onHandlerPointerUp));
+        }, this._onHandlerPointerMove = e => {
+            var _a, _b;
+            e.stopPropagation();
+            const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute;
+            let currentPos, originPos, railLen, delta = 0;
+            this._isHorizontal ? (currentPos = e.clientX, delta = currentPos - this._prePos, 
+            originPos = null === (_b = this._currentHandler) || void 0 === _b ? void 0 : _b.attribute.x, 
+            railLen = railWidth) : (currentPos = e.clientY, delta = currentPos - this._prePos, 
+            originPos = null === (_a = this._currentHandler) || void 0 === _a ? void 0 : _a.attribute.y, 
+            railLen = railHeight);
+            const newPos = (0, vutils_1.clamp)(originPos + delta, 0, railLen), currentValue = newPos / railLen * (max - min) + min;
+            "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), 
+            this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
+        }, this._onHandlerPointerUp = e => {
+            if (e.preventDefault(), this._currentHandler = null, "browser" === vrender_1.global.env) vrender_1.global.removeEventListener("pointermove", this._onHandlerPointerMove), 
+            vrender_1.global.removeEventListener("pointerup", this._onHandlerPointerUp); else {
+                const currentTarget = e.target;
+                currentTarget.removeEventListener("pointermove", this._onHandlerPointerMove), currentTarget.removeEventListener("pointerup", this._onHandlerPointerUp), 
+                currentTarget.removeEventListener("pointerupoutside", this._onHandlerPointerUp);
+            }
+        }, this._onTrackPointerdown = e => {
+            e.stopPropagation(), this._prePos = this._isHorizontal ? e.clientX : e.clientY, 
+            "browser" === vrender_1.global.env ? (vrender_1.global.addEventListener("pointermove", this._onTrackPointerMove), 
+            vrender_1.global.addEventListener("pointerup", this._onTrackPointerUp)) : (this._track.addEventListener("pointermove", this._onTrackPointerMove), 
+            this._track.addEventListener("pointerup", this._onTrackPointerUp), this._track.addEventListener("pointerupoutside", this._onTrackPointerUp));
+        }, this._onTrackPointerMove = e => {
+            e.stopPropagation();
+            const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute, {startHandler: startHandler, endHandler: endHandler} = this._getHandlers();
+            let currentPos, trackLen, railLen;
+            this._isHorizontal ? (currentPos = e.clientX, trackLen = this._track.attribute.width, 
+            railLen = railWidth) : (currentPos = e.clientY, trackLen = this._track.attribute.height, 
+            railLen = railHeight);
+            const delta = currentPos - this._prePos;
+            if (startHandler) {
+                const originPos = this._isHorizontal ? startHandler.attribute.x : startHandler.attribute.y, newPos = (0, 
+                vutils_1.clamp)(originPos + delta, 0, railLen - trackLen), currentValue = newPos / railLen * (max - min) + min;
+                this._updateHandler(startHandler, newPos, currentValue);
+            }
+            if (endHandler) {
+                const originPos = this._isHorizontal ? endHandler.attribute.x : endHandler.attribute.y, newPos = (0, 
+                vutils_1.clamp)(originPos + delta, trackLen, railLen), currentValue = newPos / railLen * (max - min) + min;
+                this._updateHandler(endHandler, newPos, currentValue), this._track.setAttributes(this._isHorizontal ? {
+                    x: Math.min(null == startHandler ? void 0 : startHandler.attribute.x, null == endHandler ? void 0 : endHandler.attribute.x),
+                    width: Math.abs((null == startHandler ? void 0 : startHandler.attribute.x) - (null == endHandler ? void 0 : endHandler.attribute.x))
+                } : {
+                    y: Math.min(null == startHandler ? void 0 : startHandler.attribute.y, null == endHandler ? void 0 : endHandler.attribute.y),
+                    height: Math.abs((null == startHandler ? void 0 : startHandler.attribute.y) - (null == endHandler ? void 0 : endHandler.attribute.y))
+                });
+            }
+            this._prePos = currentPos, this._dispatchChangeEvent();
+        }, this._onTrackPointerUp = e => {
+            e.preventDefault(), "browser" === vrender_1.global.env ? (vrender_1.global.removeEventListener("pointermove", this._onTrackPointerMove), 
+            vrender_1.global.removeEventListener("pointerup", this._onTrackPointerUp)) : (this._track.removeEventListener("pointermove", this._onTrackPointerMove), 
+            this._track.removeEventListener("pointerup", this._onTrackPointerUp), this._track.removeEventListener("pointerupoutside", this._onTrackPointerUp));
+        }, this._onRailPointerDown = e => {
+            e.stopPropagation();
+            const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute, startHandler = this._startHandler, endHandler = this._endHandler;
+            let currentPos, startHandlerPos, endHandlerPos, railLen;
+            this._isHorizontal ? (currentPos = e.viewX - this._rail.globalAABBBounds.x1, startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x, 
+            endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.x, railLen = railWidth) : (currentPos = e.viewY - this._rail.globalAABBBounds.y1, 
+            startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.y, endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.y, 
+            railLen = railHeight);
+            const currentValue = currentPos / railLen * (max - min) + min;
+            if ((0, vutils_1.isValid)(endHandlerPos)) {
+                const updateHandler = Math.abs(currentPos - startHandlerPos) > Math.abs(currentPos - endHandlerPos) ? endHandler : startHandler;
+                this._updateHandler(updateHandler, currentPos, currentValue);
+            } else this._updateHandler(startHandler, currentPos, currentValue);
+            this._updateTrack(), this._dispatchChangeEvent();
+        };
+    }
+    setValue(value) {
+        const [startValue, endValue] = (0, vutils_1.array)(value), {layout: layout, railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute, {startHandler: startHandler, endHandler: endHandler} = this._getHandlers(), railLen = "vertical" === layout ? railHeight : railWidth, startPos = (startValue - min) / (max - min) * railLen;
+        if (startHandler && this._updateHandler(startHandler, startPos, startValue), endHandler) {
+            const endPos = (endValue - min) / (max - min) * railLen;
+            this._updateHandler(endHandler, endPos, endValue);
+        }
+        this._updateTrack();
+    }
+    render() {
+        var _a, _b;
+        this.removeAllChild();
+        const {layout: layout = "horizontal", railWidth: railWidth, railHeight: railHeight, startText: startText, endText: endText, min: min, max: max, showHandler: showHandler = !0} = this.attribute;
+        let {value: value} = this.attribute;
+        (0, vutils_1.isNil)(value) && (value = [ min, max ]), this._currentValue = {
+            startValue: convertValueToRange(value)[0],
+            endValue: convertValueToRange(value)[1]
+        };
+        const isHorizontal = "horizontal" === layout;
+        this._isHorizontal = isHorizontal;
+        const innerView = (0, vrender_1.createGroup)({
+            x: 0,
+            y: 0
+        });
+        innerView.name = constant_1.SLIDER_ELEMENT_NAME.innerView, this.add(innerView), 
+        this._innerView = innerView;
+        let startTextShape, startLen = 0;
+        if (startText && startText.visible) {
+            startTextShape = (0, vrender_1.createText)(Object.assign({
+                x: isHorizontal ? 0 : railWidth / 2,
+                y: isHorizontal ? railHeight / 2 : 0,
+                textAlign: isHorizontal ? "start" : "center",
+                textBaseline: isHorizontal ? "middle" : "top",
+                text: startText.text,
+                lineHeight: null === (_a = startText.style) || void 0 === _a ? void 0 : _a.fontSize
+            }, startText.style)), startTextShape.name = constant_1.SLIDER_ELEMENT_NAME.startText, 
+            innerView.add(startTextShape);
+            const space = (0, vutils_1.isValid)(startText.space) ? startText.space : 0;
+            startLen += (isHorizontal ? startTextShape.AABBBounds.width() : startTextShape.AABBBounds.height()) + space;
+        }
+        const mainContainer = (0, vrender_1.createGroup)({
+            x: isHorizontal ? startLen : 0,
+            y: isHorizontal ? 0 : startLen
+        });
+        innerView.add(mainContainer);
+        const railContainer = (0, vrender_1.createGroup)({
+            x: 0,
+            y: 0
+        });
+        let endTextShape;
+        if (railContainer.name = constant_1.SLIDER_ELEMENT_NAME.railContainer, this._railContainer = railContainer, 
+        mainContainer.add(railContainer), this._renderRail(railContainer), startLen += isHorizontal ? railWidth : railHeight, 
+        endText && endText.visible) {
+            const space = (0, vutils_1.isValid)(endText.space) ? endText.space : 0;
+            endTextShape = (0, vrender_1.createText)(Object.assign({
+                x: isHorizontal ? startLen + space : railWidth / 2,
+                y: isHorizontal ? railHeight / 2 : startLen + space,
+                textAlign: isHorizontal ? "start" : "center",
+                textBaseline: isHorizontal ? "middle" : "top",
+                text: endText.text,
+                lineHeight: null === (_b = endText.style) || void 0 === _b ? void 0 : _b.fontSize
+            }, endText.style)), endTextShape.name = constant_1.SLIDER_ELEMENT_NAME.endText, 
+            innerView.add(endTextShape);
+        }
+        this._renderTrack(railContainer), showHandler && (this._renderHandlers(mainContainer), 
+        this._bindEvents());
+    }
+    _renderRail(container) {
+        const {railWidth: railWidth, railHeight: railHeight, railStyle: railStyle, slidable: slidable} = this.attribute;
+        let cursor = "default";
+        !1 !== slidable && (cursor = "pointer");
+        const railShape = (0, vrender_1.createRect)(Object.assign({
+            x: 0,
+            y: 0,
+            width: railWidth,
+            height: railHeight,
+            cursor: cursor
+        }, railStyle));
+        return railShape.name = constant_1.SLIDER_ELEMENT_NAME.rail, container.add(railShape), 
+        this._rail = railShape, railShape;
+    }
+    _renderHandlers(container) {
+        const {range: range, min: min, max: max, handlerSize: handlerSize = 14, handlerStyle: handlerStyle, handlerText: handlerText, railHeight: railHeight, railWidth: railWidth, slidable: slidable} = this.attribute;
+        let {value: value} = this.attribute;
+        (0, vutils_1.isNil)(value) && (value = [ min, max ]);
+        const handlerTextVisible = handlerText && handlerText.visible, isHorizontal = this._isHorizontal, railLen = isHorizontal ? railWidth : railHeight, [startValue, endValue] = convertValueToRange(value), handlerStart = (startValue - min) / (max - min) * railLen, startHandler = this._renderHandler(Object.assign({
+            x: isHorizontal ? handlerStart : railWidth / 2,
+            y: isHorizontal ? railHeight / 2 : handlerStart,
+            size: handlerSize,
+            strokeBoundsBuffer: 0,
+            cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
+        }, handlerStyle));
+        if (startHandler.name = constant_1.SLIDER_ELEMENT_NAME.startHandler, this._startHandler = startHandler, 
+        container.add(startHandler), this._currentValue.startPos = handlerStart, handlerTextVisible) {
+            const startHandlerText = this._renderHandlerText(startValue);
+            startHandlerText.name = constant_1.SLIDER_ELEMENT_NAME.startHandlerText, container.add(startHandlerText), 
+            this._startHandlerText = startHandlerText;
+        }
+        if (range) {
+            const handlerStart = (endValue - min) / (max - min) * railLen, endHandler = this._renderHandler(Object.assign({
+                x: isHorizontal ? handlerStart : railWidth / 2,
+                y: isHorizontal ? railHeight / 2 : handlerStart,
+                size: handlerSize,
+                strokeBoundsBuffer: 0,
+                cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
+            }, handlerStyle));
+            endHandler.name = constant_1.SLIDER_ELEMENT_NAME.endHandler, this._endHandler = endHandler, 
+            container.add(endHandler), this._currentValue.endPos = handlerStart;
+        }
+        if (handlerTextVisible) {
+            const endHandlerText = this._renderHandlerText(endValue);
+            endHandlerText.name = constant_1.SLIDER_ELEMENT_NAME.endHandlerText, container.add(endHandlerText), 
+            this._endHandlerText = endHandlerText;
+        }
+    }
+    _renderTrack(container) {
+        const {range: range, min: min, max: max, railHeight: railHeight, railWidth: railWidth, trackStyle: trackStyle, railStyle: railStyle, slidable: slidable} = this.attribute;
+        let {value: value} = this.attribute;
+        (0, vutils_1.isNil)(value) && (value = [ min, max ]);
+        const isHorizontal = this._isHorizontal, railLen = isHorizontal ? railWidth : railHeight;
+        let [startValue, endValue] = convertValueToRange(value);
+        range || (startValue = min);
+        const trackContainer = (0, vrender_1.createGroup)({
+            x: 0,
+            y: 0,
+            width: railWidth,
+            height: railHeight,
+            borderRadius: null == railStyle ? void 0 : railStyle.borderRadius,
+            clip: !0,
+            pickable: !1
+        });
+        trackContainer.name = constant_1.SLIDER_ELEMENT_NAME.trackContainer;
+        const draggableTrack = (0, vutils_1.isObject)(range) && !0 === range.draggableTrack;
+        let cursor;
+        cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
+        const trackWidth = (endValue - startValue) / (max - min) * railLen, track = (0, 
+        vrender_1.createRect)(Object.assign({
+            x: isHorizontal ? (startValue - min) / (max - min) * railLen : 0,
+            y: isHorizontal ? 0 : (startValue - min) / (max - min) * railLen,
+            width: isHorizontal ? trackWidth : railWidth,
+            height: isHorizontal ? railHeight : trackWidth,
+            cursor: cursor
+        }, trackStyle));
+        track.name = constant_1.SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track), 
+        container.add(trackContainer);
+    }
+    _renderHandler(style) {
+        return (0, vrender_1.createSymbol)(style);
+    }
+    _renderHandlerText(value) {
+        var _a, _b, _c;
+        const {align: align, min: min, max: max, handlerSize: handlerSize = 14, handlerText: handlerText = {}, railHeight: railHeight, railWidth: railWidth, slidable: slidable} = this.attribute, isHorizontal = this._isHorizontal, handlerStart = (value - min) / (max - min) * (isHorizontal ? railWidth : railHeight), textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4, textStyle = Object.assign({
+            text: (null == handlerText ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed(null !== (_b = null == handlerText ? void 0 : handlerText.precision) && void 0 !== _b ? _b : 0),
+            lineHeight: null === (_c = handlerText.style) || void 0 === _c ? void 0 : _c.lineHeight,
+            cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
+        }, handlerText.style);
+        isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center", 
+        textStyle.x = handlerStart, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top", 
+        textStyle.textAlign = "center", textStyle.x = handlerStart, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle", 
+        textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace, 
+        textStyle.y = handlerStart) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start", 
+        textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = handlerStart);
+        return (0, vrender_1.createText)(textStyle);
+    }
+    _bindEvents() {
+        const {slidable: slidable, range: range} = this.attribute;
+        slidable && (this._startHandler && this._startHandler.addEventListener("pointerdown", this._onHandlerPointerdown), 
+        this._startHandlerText && this._startHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), 
+        this._endHandler && this._endHandler.addEventListener("pointerdown", this._onHandlerPointerdown), 
+        this._endHandlerText && this._endHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), 
+        (0, vutils_1.isObject)(range) && range.draggableTrack && this._track.addEventListener("pointerdown", this._onTrackPointerdown), 
+        this._railContainer.addEventListener("pointerdown", this._onRailPointerDown));
+    }
+    _updateTrack() {
+        const startHandler = this._startHandler, endHandler = this._endHandler;
+        if (this._isHorizontal) {
+            const startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.x;
+            if (endHandler) {
+                const endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.x;
+                this._track.setAttributes({
+                    x: Math.min(startHandlerPos, endHandlerPos),
+                    width: Math.abs(startHandlerPos - endHandlerPos)
+                });
+            } else this._track.setAttributes({
+                width: startHandlerPos
+            });
+        } else {
+            const startHandlerPos = null == startHandler ? void 0 : startHandler.attribute.y;
+            if (endHandler) {
+                const endHandlerPos = null == endHandler ? void 0 : endHandler.attribute.y;
+                this._track.setAttributes({
+                    y: Math.min(startHandlerPos, endHandlerPos),
+                    height: Math.abs(startHandlerPos - endHandlerPos)
+                });
+            } else this._track.setAttributes({
+                height: startHandlerPos
+            });
+        }
+    }
+    _updateHandler(handler, position, value) {
+        var _a;
+        const isHorizontal = this._isHorizontal;
+        handler.setAttribute(isHorizontal ? "x" : "y", position);
+        const updateHandlerText = handler.name === constant_1.SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
+        if (updateHandlerText) {
+            const {handlerText: handlerText} = this.attribute;
+            null == updateHandlerText || updateHandlerText.setAttributes({
+                text: (null == handlerText ? void 0 : handlerText.formatter) ? handlerText.formatter(value) : value.toFixed(null !== (_a = null == handlerText ? void 0 : handlerText.precision) && void 0 !== _a ? _a : 0),
+                [isHorizontal ? "x" : "y"]: position
+            });
+        }
+        handler.name === constant_1.SLIDER_ELEMENT_NAME.startHandler ? (this._currentValue.startValue = value, 
+        this._currentValue.startPos = position) : (this._currentValue.endValue = value, 
+        this._currentValue.endPos = position);
+    }
+    _updateHandlerText(handlerText, position, value) {
+        var _a;
+        const isHorizontal = this._isHorizontal, {handlerText: handlerTextAttr} = this.attribute;
+        handlerText.setAttributes({
+            [isHorizontal ? "x" : "y"]: position,
+            text: (null == handlerTextAttr ? void 0 : handlerTextAttr.formatter) ? handlerTextAttr.formatter(value) : value.toFixed(null !== (_a = null == handlerTextAttr ? void 0 : handlerTextAttr.precision) && void 0 !== _a ? _a : 0)
+        });
+        const updateHandler = handlerText.name === constant_1.SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
+        updateHandler && (null == updateHandler || updateHandler.setAttributes({
+            [isHorizontal ? "x" : "y"]: position
+        })), handlerText.name === constant_1.SLIDER_ELEMENT_NAME.startHandlerText ? (this._currentValue.startValue = value, 
+        this._currentValue.startPos = position) : (this._currentValue.endValue = value, 
+        this._currentValue.endPos = position);
+    }
+    _dispatchChangeEvent() {
+        var _a;
+        const isRange = !!this.attribute.range, currentValue = this._currentValue, changeEvent = new vrender_1.CustomEvent("change", {
+            value: isRange ? [ Math.min(currentValue.endValue, currentValue.startValue), Math.max(currentValue.endValue, currentValue.startValue) ] : currentValue.startValue,
+            position: isRange ? [ Math.min(currentValue.endPos, currentValue.startPos), Math.max(currentValue.endPos, currentValue.startPos) ] : currentValue.startPos
+        });
+        changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, 
+        this.dispatchEvent(changeEvent);
+    }
+    _getHandlers() {
+        let temp, startHandler = this._startHandler, endHandler = this._endHandler;
+        return this._isHorizontal ? endHandler && endHandler.attribute.x < (null == startHandler ? void 0 : startHandler.attribute.x) && (temp = startHandler, 
+        startHandler = endHandler, endHandler = temp) : endHandler && endHandler.attribute.y < (null == startHandler ? void 0 : startHandler.attribute.y) && (temp = startHandler, 
+        startHandler = endHandler, endHandler = temp), {
+            startHandler: startHandler,
+            endHandler: endHandler
+        };
+    }
+}
+
+exports.Slider = Slider, Slider.defaultAttributes = {
+    slidable: !0,
+    layout: "horizontal",
+    align: "bottom",
+    height: 8,
+    showHandler: !0,
+    handlerSize: 14,
+    handlerStyle: {
+        symbolType: "circle",
+        fill: !0,
+        fillColor: "#fff",
+        stroke: "true",
+        strokeColor: "#91caff",
+        lineWidth: 2
+    },
+    railStyle: {
+        fillColor: "rgba(0,0,0,.04)"
+    },
+    trackStyle: {
+        fillColor: "#91caff"
+    },
+    showValue: !0,
+    valueStyle: {
+        fillColor: "#2C3542",
+        fontSize: 12
+    },
+    startText: {
+        style: {
+            fillColor: "#2C3542",
+            fontSize: 12
+        }
+    },
+    endText: {
+        style: {
+            fillColor: "#2C3542",
+            fontSize: 12
+        }
+    },
+    handlerText: {
+        visible: !0,
+        space: 4,
+        precision: 0,
+        style: {
+            fillColor: "#2C3542",
+            fontSize: 12
+        }
+    }
+};
+//# sourceMappingURL=slider.js.map