@visactor/vrender-components
Version:
components library for dp visualization
540 lines (529 loc) • 30.9 kB
JavaScript
import { isNil, merge, clamp, isValid, array, isObject, isArray, clampRange } from "@visactor/vutils";
import { graphicCreator, vglobal } from "@visactor/vrender-core";
import { AbstractComponent } from "../core/base";
import { SLIDER_ELEMENT_NAME } from "./constant";
import { loadSliderComponent } from "./register";
import { getEndTriggersOfDrag } from "../util/event";
function convertValueToRange(value) {
return isArray(value) ? value : [ value, value ];
}
function getDefaultCursor(isHorizontal) {
return isHorizontal ? "ew-resize" : "ns-resize";
}
loadSliderComponent();
export class Slider extends AbstractComponent {
get track() {
return this._track;
}
get currentValue() {
return this._currentValue;
}
get startHandler() {
return this._startHandler;
}
get endHandler() {
return this._endHandler;
}
get tooltipShape() {
return this._tooltipShape;
}
constructor(attributes, options) {
super((null == options ? void 0 : options.skipDefault) ? attributes : 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._onTooltipShow = e => {
this._isChanging || this._tooltipState && this._tooltipState.isActive || (this._tooltipState ? this._tooltipState.isActive = !0 : this._tooltipState = {
isActive: !0
}, this._onTooltipUpdate(e), this._dispatchTooltipEvent("sliderTooltipShow"));
}, this._onTooltipUpdate = e => {
if (this._isChanging || !this._tooltipState || !this._tooltipState.isActive) return;
const railLen = this._isHorizontal ? this._rail.globalAABBBounds.width() : this._rail.globalAABBBounds.height(), pos = clamp(this._isHorizontal ? (e.viewX - this._rail.globalAABBBounds.x1) / railLen : (e.viewY - this._rail.globalAABBBounds.y1) / railLen, 0, 1);
pos !== this._tooltipState.pos && (this._tooltipState.pos = pos, this._tooltipState.value = this.calculateValueByPos(pos * railLen),
this._updateTooltip(), this._dispatchTooltipEvent("sliderTooltipUpdate"));
}, this._onTooltipHide = () => {
const {tooltip: tooltip} = this.attribute;
tooltip && tooltip.alwaysShow || (this._tooltipState = null, this._tooltipShape && this._tooltipShape.setAttribute("visible", !1),
this._tooltipText && this._tooltipText.setAttribute("visible", !1), this._dispatchTooltipEvent("sliderTooltipHide"));
}, this._onHandlerPointerdown = e => {
this._clearAllDragEvents(), this._isChanging = !0;
const {x: x, y: y} = this.stage.eventPointTransform(e);
this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y;
const triggers = getEndTriggersOfDrag(), obj = "browser" === vglobal.env ? vglobal : this.stage;
obj.addEventListener("pointermove", this._onHandlerPointerMove, {
capture: !0
}), triggers.forEach((trigger => {
obj.addEventListener(trigger, this._onHandlerPointerUp);
}));
}, this._onHandlerPointerMove = e => {
var _a, _b;
this._isChanging = !0;
const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute;
if (max === min) return;
const {x: x, y: y} = this.stage.eventPointTransform(e);
let currentPos, originPos, railLen, delta = 0;
this._isHorizontal ? (currentPos = x, delta = currentPos - this._prePos, originPos = null === (_b = this._currentHandler) || void 0 === _b ? void 0 : _b.attribute.x,
railLen = railWidth) : (currentPos = y, delta = currentPos - this._prePos, originPos = null === (_a = this._currentHandler) || void 0 === _a ? void 0 : _a.attribute.y,
railLen = railHeight);
const newPos = clamp(originPos + delta, 0, railLen), currentValue = this.calculateValueByPos(newPos);
"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 => {
this._isChanging = !1, this._currentHandler = null, this._clearAllDragEvents();
}, this._handleTouchMove = e => {
this._isChanging && e.preventDefault();
}, this._onTrackPointerdown = e => {
this._clearAllDragEvents(), this._isChanging = !0;
const {x: x, y: y} = this.stage.eventPointTransform(e);
this._prePos = this._isHorizontal ? x : y;
const triggers = getEndTriggersOfDrag(), obj = "browser" === vglobal.env ? vglobal : this.stage;
obj.addEventListener("pointermove", this._onTrackPointerMove, {
capture: !0
}), triggers.forEach((trigger => {
obj.addEventListener(trigger, this._onTrackPointerUp);
}));
}, this._onTrackPointerMove = e => {
this._isChanging = !0;
const {railWidth: railWidth, railHeight: railHeight, min: min, max: max, inverse: inverse} = this.attribute;
if (max === min) return;
const {startHandler: startHandler, endHandler: endHandler} = this._getHandlers();
let currentPos, trackLen, railLen;
const {x: x, y: y} = this.stage.eventPointTransform(e);
this._isHorizontal ? (currentPos = x, trackLen = this._track.attribute.width, railLen = railWidth) : (currentPos = y,
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 = inverse ? clamp(originPos + delta, trackLen, railLen) : clamp(originPos + delta, 0, railLen - trackLen), currentValue = this.calculateValueByPos(newPos);
this._updateHandler(startHandler, newPos, currentValue);
}
if (endHandler) {
const originPos = this._isHorizontal ? endHandler.attribute.x : endHandler.attribute.y, newPos = inverse ? clamp(originPos + delta, 0, railLen - trackLen) : clamp(originPos + delta, trackLen, railLen), currentValue = this.calculateValueByPos(newPos), startHandlerAttribute = null == startHandler ? void 0 : startHandler.attribute;
this._updateHandler(endHandler, newPos, currentValue), this._track.setAttributes(this._isHorizontal ? {
x: Math.min(startHandlerAttribute.x, endHandler.attribute.x),
width: Math.abs(startHandlerAttribute.x - endHandler.attribute.x)
} : {
y: Math.min(startHandlerAttribute.y, endHandler.attribute.y),
height: Math.abs(startHandlerAttribute.y - endHandler.attribute.y)
});
}
this._prePos = currentPos, this._dispatchChangeEvent();
}, this._onTrackPointerUp = e => {
this._isChanging = !1, this._clearAllDragEvents();
}, this._onRailPointerDown = e => {
this._clearAllDragEvents(), this._isChanging = !0;
const {railWidth: railWidth, railHeight: railHeight, min: min, max: max} = this.attribute;
if (max === min) return;
const 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 = this.calculateValueByPos(currentPos);
if (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();
};
}
calculatePosByValue(value, pos) {
const {layout: layout, railWidth: railWidth, railHeight: railHeight, min: min, max: max, inverse: inverse} = this.attribute;
let ratio = 0;
ratio = min === max ? "start" === pos ? 0 : "end" === pos ? 1 : 0 : (value - min) / (max - min);
return (inverse ? 1 - ratio : ratio) * ("vertical" === layout ? railHeight : railWidth);
}
calculateValueByPos(pos) {
const {layout: layout, railWidth: railWidth, railHeight: railHeight, min: min, max: max, inverse: inverse} = this.attribute, railLen = "vertical" === layout ? railHeight : railWidth;
return min + (max - min) * (inverse ? 1 - pos / railLen : pos / railLen);
}
setValue(value) {
const {min: min, max: max} = this.attribute;
if (max === min) return;
const [startValue, endValue] = array(value), {startHandler: startHandler, endHandler: endHandler} = this._getHandlers();
startHandler && this._updateHandler(startHandler, this.calculatePosByValue(startValue), startValue),
endHandler && this._updateHandler(endHandler, this.calculatePosByValue(endValue), endValue),
this._updateTrack();
}
render() {
var _a, _b;
this.removeAllChild(!0);
const {layout: layout = "horizontal", railWidth: railWidth, railHeight: railHeight, startText: startText, endText: endText, min: min, max: max, showHandler: showHandler = !0, showTooltip: showTooltip} = this.attribute;
let {value: value} = this.attribute;
isNil(value) && (value = [ min, max ]), this._currentValue = {
startValue: convertValueToRange(value)[0],
endValue: convertValueToRange(value)[1]
};
const isHorizontal = "horizontal" === layout;
this._isHorizontal = isHorizontal;
const innerView = graphicCreator.group({
x: 0,
y: 0
});
innerView.name = SLIDER_ELEMENT_NAME.innerView, this.add(innerView), this._innerView = innerView;
let startTextShape, startLen = 0;
if (startText && startText.visible) {
startTextShape = graphicCreator.text(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 = SLIDER_ELEMENT_NAME.startText, innerView.add(startTextShape);
const space = isValid(startText.space) ? startText.space : 0;
startLen += (isHorizontal ? startTextShape.AABBBounds.width() : startTextShape.AABBBounds.height()) + space;
}
const mainContainer = graphicCreator.group({
x: isHorizontal ? startLen : 0,
y: isHorizontal ? 0 : startLen
});
innerView.add(mainContainer);
const railContainer = graphicCreator.group({
x: 0,
y: 0
});
let endTextShape;
if (railContainer.name = SLIDER_ELEMENT_NAME.railContainer, this._railContainer = railContainer,
mainContainer.add(railContainer), this._mainContainer = mainContainer, this._renderRail(railContainer),
startLen += isHorizontal ? railWidth : railHeight, endText && endText.visible) {
const space = isValid(endText.space) ? endText.space : 0;
endTextShape = graphicCreator.text(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 = SLIDER_ELEMENT_NAME.endText, innerView.add(endTextShape);
}
this._renderTrack(railContainer), showHandler && (this._renderHandlers(mainContainer),
this._bindEvents()), showTooltip && (this._renderTooltip(), this._bindTooltipEvents());
}
_renderRail(container) {
const {railWidth: railWidth, railHeight: railHeight, railStyle: railStyle, slidable: slidable} = this.attribute;
let cursor = "default";
!1 !== slidable && (cursor = "pointer");
const railShape = graphicCreator.rect(Object.assign({
x: 0,
y: 0,
width: railWidth,
height: railHeight,
cursor: cursor
}, railStyle));
return railShape.name = 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;
isNil(value) && (value = [ min, max ]);
const handlerTextVisible = handlerText && handlerText.visible, isHorizontal = this._isHorizontal, [startValue, endValue] = convertValueToRange(value), startPos = this.calculatePosByValue(startValue, range ? "start" : "end"), startHandler = this._renderHandler(Object.assign({
x: isHorizontal ? startPos : railWidth / 2,
y: isHorizontal ? railHeight / 2 : startPos,
size: handlerSize,
strokeBoundsBuffer: 0,
cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
}, handlerStyle));
if (startHandler.name = SLIDER_ELEMENT_NAME.startHandler, this._startHandler = startHandler,
container.add(startHandler), this._currentValue.startPos = startPos, handlerTextVisible) {
const startHandlerText = this._renderHandlerText(startValue, range ? "start" : "end");
startHandlerText.name = SLIDER_ELEMENT_NAME.startHandlerText, container.add(startHandlerText),
this._startHandlerText = startHandlerText;
}
if (range) {
const endPos = this.calculatePosByValue(endValue, "end"), endHandler = this._renderHandler(Object.assign({
x: isHorizontal ? endPos : railWidth / 2,
y: isHorizontal ? railHeight / 2 : endPos,
size: handlerSize,
strokeBoundsBuffer: 0,
cursor: !1 === slidable ? "default" : getDefaultCursor(isHorizontal)
}, handlerStyle));
if (endHandler.name = SLIDER_ELEMENT_NAME.endHandler, this._endHandler = endHandler,
container.add(endHandler), this._currentValue.endPos = endPos, handlerTextVisible) {
const endHandlerText = this._renderHandlerText(endValue, "end");
endHandlerText.name = 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, value: value} = this.attribute;
let startValue, endValue;
if (isNil(value)) range ? (startValue = min, endValue = max) : startValue = endValue = min; else if (range) {
const clampValue = clampRange(value, min, max);
startValue = clampValue[0], endValue = clampValue[1];
} else startValue = min, endValue = clamp(value, min, max);
const isHorizontal = this._isHorizontal;
range || (startValue = min);
const trackContainer = graphicCreator.group({
x: 0,
y: 0,
width: railWidth,
height: railHeight,
cornerRadius: null == railStyle ? void 0 : railStyle.cornerRadius,
clip: !0,
pickable: !1
});
trackContainer.name = SLIDER_ELEMENT_NAME.trackContainer;
const draggableTrack = isObject(range) && !0 === range.draggableTrack;
let cursor;
cursor = !1 === slidable ? "default" : !1 === range || !1 === draggableTrack ? "pointer" : getDefaultCursor(isHorizontal);
const startPos = this.calculatePosByValue(startValue, "start"), endPos = this.calculatePosByValue(endValue, range ? "end" : "start"), track = graphicCreator.rect(Object.assign({
x: isHorizontal ? Math.min(startPos, endPos) : 0,
y: isHorizontal ? 0 : Math.min(startPos, endPos),
width: isHorizontal ? Math.abs(endPos - startPos) : railWidth,
height: isHorizontal ? railHeight : Math.abs(endPos - startPos),
cursor: cursor
}, trackStyle));
track.name = SLIDER_ELEMENT_NAME.track, this._track = track, trackContainer.add(track),
container.add(trackContainer);
}
_renderHandler(style) {
return graphicCreator.symbol(style);
}
_renderHandlerText(value, position) {
var _a, _b, _c;
const {align: align, handlerSize: handlerSize = 14, handlerText: handlerText = {}, railHeight: railHeight, railWidth: railWidth, slidable: slidable} = this.attribute, isHorizontal = this._isHorizontal, pos = this.calculatePosByValue(value, position), textSpace = null !== (_a = handlerText.space) && void 0 !== _a ? _a : 4, textStyle = {
text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_b = 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)
};
isHorizontal ? "top" === align ? (textStyle.textBaseline = "bottom", textStyle.textAlign = "center",
textStyle.x = pos, textStyle.y = (railHeight - handlerSize) / 2 - textSpace) : (textStyle.textBaseline = "top",
textStyle.textAlign = "center", textStyle.x = pos, textStyle.y = (railHeight + handlerSize) / 2 + textSpace) : "left" === align ? (textStyle.textBaseline = "middle",
textStyle.textAlign = "end", textStyle.x = (railWidth - handlerSize) / 2 - textSpace,
textStyle.y = pos) : (textStyle.textBaseline = "middle", textStyle.textAlign = "start",
textStyle.x = (railWidth + handlerSize) / 2 + textSpace, textStyle.y = pos);
return graphicCreator.text(Object.assign(Object.assign({}, textStyle), handlerText.style));
}
_renderTooltip() {
var _a;
const {tooltip: tooltip, railHeight: railHeight, railWidth: railWidth, align: align} = this.attribute;
tooltip && tooltip.alwaysShow ? this._tooltipState = {
value: this._currentValue.startValue,
pos: this._currentValue.startPos
} : this._tooltipState = null;
const cx = this._isHorizontal ? 0 : railWidth / 2, cy = this._isHorizontal ? railHeight / 2 : 0;
if (tooltip && tooltip.shape) {
const shape = graphicCreator.symbol(Object.assign({
pickable: !1,
visible: !!this._tooltipState,
x: cx,
y: cy,
symbolType: "circle"
}, tooltip.shapeStyle));
this._tooltipShape = shape, this._mainContainer.add(shape);
}
const textConfig = tooltip && tooltip.text || {}, space = null !== (_a = textConfig.space) && void 0 !== _a ? _a : 6, textStyle = {
pickable: !1,
visible: !!this._tooltipState,
text: ""
};
this._isHorizontal ? (textStyle.x = cx, textStyle.y = "top" === align ? cy - railHeight / 2 - space : cy + railHeight / 2 + space,
textStyle.textAlign = "center", textStyle.textBaseline = "top" === align ? "bottom" : "top") : (textStyle.y = cy,
textStyle.x = "left" === align ? cx - railWidth / 2 - space : cy + railWidth / 2 + space,
textStyle.textAlign = "left" === align ? "end" : "start", textStyle.textBaseline = "middle");
const text = graphicCreator.text(Object.assign(Object.assign({}, textStyle), textConfig.style));
this._mainContainer.add(text), this._tooltipText = text, this._tooltipState && this._updateTooltip();
}
_updateTooltip() {
var _a, _b;
if (!this._tooltipShape && !this._tooltipText || !this._tooltipState) return;
const {railWidth: railWidth, railHeight: railHeight} = this.attribute, railLen = this._isHorizontal ? railWidth : railHeight, coord = this._tooltipState.pos * railLen, coordKey = this._isHorizontal ? "x" : "y";
this._tooltipShape && this._tooltipShape.setAttributes({
visible: !0,
[coordKey]: coord
});
const {align: align} = this.attribute;
if (this._tooltipText) {
const textConfig = this.attribute.tooltip && this.attribute.tooltip.text || {};
this._tooltipText.setAttributes({
visible: !0,
[coordKey]: coord,
text: textConfig.formatter ? textConfig.formatter(this._tooltipState.value) : this._isHorizontal || "left" !== align ? `≈ ${this._tooltipState.value.toFixed(null !== (_b = textConfig.precision) && void 0 !== _b ? _b : 0)}` : `${this._tooltipState.value.toFixed(null !== (_a = textConfig.precision) && void 0 !== _a ? _a : 0)} ≈`
});
}
}
_bindEvents() {
if (this.attribute.disableTriggerEvent) return;
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),
isObject(range) && range.draggableTrack && this._track.addEventListener("pointerdown", this._onTrackPointerdown),
this._railContainer.addEventListener("pointerdown", this._onRailPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
passive: !1
}));
}
_bindTooltipEvents() {
this.attribute.disableTriggerEvent || (this._mainContainer.addEventListener("pointerenter", this._onTooltipShow),
this._mainContainer.addEventListener("pointermove", this._onTooltipUpdate), this._mainContainer.addEventListener("pointerleave", this._onTooltipHide));
}
_clearAllDragEvents() {
const triggers = getEndTriggersOfDrag(), obj = "browser" === vglobal.env ? vglobal : this.stage;
obj.removeEventListener("pointermove", this._onHandlerPointerMove, {
capture: !0
}), triggers.forEach((trigger => {
obj.removeEventListener(trigger, this._onHandlerPointerUp);
})), obj.removeEventListener("pointermove", this._onTrackPointerMove, {
capture: !0
}), triggers.forEach((trigger => {
obj.removeEventListener(trigger, this._onTrackPointerUp);
}));
}
_updateTrack() {
const {inverse: inverse, railWidth: railWidth, railHeight: railHeight} = this.attribute, 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 inverse ? this._track.setAttributes({
x: startHandlerPos,
width: railWidth - startHandlerPos
}) : 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 inverse ? this._track.setAttributes({
y: startHandlerPos,
height: railHeight - startHandlerPos
}) : 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 === SLIDER_ELEMENT_NAME.startHandler ? this._startHandlerText : this._endHandlerText;
if (updateHandlerText) {
const {handlerText: handlerText = {}} = this.attribute;
updateHandlerText.setAttributes({
text: handlerText.formatter ? handlerText.formatter(value) : value.toFixed(null !== (_a = handlerText.precision) && void 0 !== _a ? _a : 0),
[isHorizontal ? "x" : "y"]: position
});
}
handler.name === 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: handlerTextAttr.formatter ? handlerTextAttr.formatter(value) : value.toFixed(null !== (_a = handlerTextAttr.precision) && void 0 !== _a ? _a : 0)
});
const updateHandler = handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText ? this._startHandler : this._endHandler;
updateHandler && updateHandler.setAttributes({
[isHorizontal ? "x" : "y"]: position
}), handlerText.name === SLIDER_ELEMENT_NAME.startHandlerText ? (this._currentValue.startValue = value,
this._currentValue.startPos = position) : (this._currentValue.endValue = value,
this._currentValue.endPos = position);
}
_dispatchChangeEvent() {
const isRange = !!this.attribute.range, currentValue = this._currentValue;
this._dispatchEvent("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
});
}
_dispatchTooltipEvent(type) {
this._dispatchEvent("sliderTooltip", {
type: type,
position: this._tooltipState && this._tooltipState.pos,
value: this._tooltipState && this._tooltipState.value
});
}
_getHandlers() {
const {inverse: inverse} = this.attribute;
let startHandler = this._startHandler, endHandler = this._endHandler;
return endHandler ? (this._isHorizontal ? (!inverse && endHandler.attribute.x < (null == startHandler ? void 0 : startHandler.attribute.x) || inverse && endHandler.attribute.x > (null == startHandler ? void 0 : startHandler.attribute.x)) && ([startHandler, endHandler] = [ endHandler, startHandler ]) : (!inverse && endHandler.attribute.y < (null == startHandler ? void 0 : startHandler.attribute.y) || inverse && endHandler.attribute.y > (null == startHandler ? void 0 : startHandler.attribute.y)) && ([startHandler, endHandler] = [ endHandler, startHandler ]),
{
startHandler: startHandler,
endHandler: endHandler
}) : {
startHandler: startHandler,
endHandler: endHandler
};
}
release(all) {
super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
passive: !1
}), this._clearAllDragEvents();
}
}
Slider.defaultAttributes = {
slidable: !0,
layout: "horizontal",
align: "bottom",
height: 8,
showHandler: !0,
handlerSize: 14,
handlerStyle: {
symbolType: "circle",
fill: "#fff",
stroke: "#91caff",
lineWidth: 2
},
tooltip: {
shapeStyle: {
symbolType: "circle",
fill: "#fff",
stroke: "#91caff",
lineWidth: 2
},
text: {
style: {
fill: "#2C3542",
fontSize: 12
}
}
},
railStyle: {
fill: "rgba(0,0,0,.04)"
},
trackStyle: {
fill: "#91caff"
},
showValue: !0,
valueStyle: {
fill: "#2C3542",
fontSize: 12
},
startText: {
style: {
fill: "#2C3542",
fontSize: 12
}
},
endText: {
style: {
fill: "#2C3542",
fontSize: 12
}
},
handlerText: {
visible: !0,
space: 4,
precision: 0,
style: {
fill: "#2C3542",
fontSize: 12
}
}
};
//# sourceMappingURL=slider.js.map