devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
207 lines (204 loc) • 7.65 kB
JavaScript
/**
* DevExtreme (cjs/viz/range_selector/slider_marker.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.default = void 0;
var _utils = require("../core/utils");
var _common = require("./common");
const POINTER_SIZE = _common.consts.pointerSize;
const SLIDER_MARKER_UPDATE_DELAY = 75;
function SliderMarker(renderer, root, isLeftPointer) {
this._isLeftPointer = isLeftPointer;
this._isOverlapped = false;
this._group = renderer.g().attr({
class: "slider-marker"
}).append(root);
this._area = renderer.path(null, "area").append(this._group);
this._label = renderer.text().attr({
align: "left"
}).append(this._group);
this._tracker = renderer.rect().attr({
class: "slider-marker-tracker",
fill: "#000000",
opacity: 1e-4
}).css({
cursor: "pointer"
}).append(this._group);
this._border = renderer.rect(0, 0, 1, 0)
}
SliderMarker.prototype = {
constructor: SliderMarker,
_getRectSize: function(textSize) {
return {
width: Math.round(2 * this._paddingLeftRight + textSize.width),
height: Math.round(2 * this._paddingTopBottom + textSize.height)
}
},
_getTextSize: function() {
const textSize = this._label.getBBox();
if (!this._textHeight && isFinite(textSize.height)) {
this._textHeight = textSize.height
}
return {
width: textSize.width,
height: this._textHeight,
y: textSize.y
}
},
_getAreaPointsInfo: function(textSize) {
const that = this;
const rectSize = that._getRectSize(textSize);
const rectWidth = rectSize.width;
const rectHeight = rectSize.height;
let rectLeftBorder = -rectWidth;
let rectRightBorder = 0;
let pointerRightPoint = POINTER_SIZE;
let pointerCenterPoint = 0;
let pointerLeftPoint = -POINTER_SIZE;
const position = that._position;
const isLeft = that._isLeftPointer;
const correctCloudBorders = function() {
rectLeftBorder++;
rectRightBorder++;
pointerRightPoint++;
pointerCenterPoint++;
pointerLeftPoint++
};
const checkPointerBorders = function() {
if (pointerRightPoint > rectRightBorder) {
pointerRightPoint = rectRightBorder
} else if (pointerLeftPoint < rectLeftBorder) {
pointerLeftPoint = rectLeftBorder
}
isLeft && correctCloudBorders()
};
let borderPosition = position;
if (isLeft) {
if (position > that._range[1] - rectWidth) {
rectRightBorder = -position + that._range[1];
rectLeftBorder = rectRightBorder - rectWidth;
checkPointerBorders();
borderPosition += rectLeftBorder
} else {
rectLeftBorder = pointerLeftPoint = 0;
rectRightBorder = rectWidth
}
} else if (position - that._range[0] < rectWidth) {
rectLeftBorder = -(position - that._range[0]);
rectRightBorder = rectLeftBorder + rectWidth;
checkPointerBorders();
borderPosition += rectRightBorder
} else {
pointerRightPoint = 0;
correctCloudBorders()
}
that._borderPosition = borderPosition;
return {
offset: rectLeftBorder,
isCut: (!isLeft || pointerCenterPoint !== pointerLeftPoint) && (isLeft || pointerCenterPoint !== pointerRightPoint),
points: [rectLeftBorder, 0, rectRightBorder, 0, rectRightBorder, rectHeight, pointerRightPoint, rectHeight, pointerCenterPoint, rectHeight + POINTER_SIZE, pointerLeftPoint, rectHeight, rectLeftBorder, rectHeight]
}
},
_update: function() {
const that = this;
let textSize;
clearTimeout(that._timeout);
that._label.attr({
text: that._text || ""
});
const currentTextSize = that._getTextSize();
const rectSize = that._getRectSize(currentTextSize);
textSize = that._textSize || currentTextSize;
textSize = that._textSize = currentTextSize.width > textSize.width || currentTextSize.height > textSize.height ? currentTextSize : textSize;
that._timeout = setTimeout((function() {
updateSliderMarker(currentTextSize, rectSize);
that._textSize = currentTextSize
}), 75);
function updateSliderMarker(size, rectSize) {
rectSize = rectSize || that._getRectSize(size);
that._group.attr({
translateY: -(rectSize.height + POINTER_SIZE)
});
const pointsData = that._getAreaPointsInfo(size);
const points = pointsData.points;
const offset = pointsData.offset;
that._area.attr({
points: points
});
that._border.attr({
x: that._isLeftPointer ? points[0] - 1 : points[2],
height: pointsData.isCut ? rectSize.height : rectSize.height + POINTER_SIZE
});
that._tracker.attr({
translateX: offset,
width: rectSize.width,
height: rectSize.height + POINTER_SIZE
});
that._label.attr({
translateX: that._paddingLeftRight + offset,
translateY: rectSize.height / 2 - (size.y + size.height / 2)
})
}
updateSliderMarker(textSize)
},
setText: function(value) {
this._text = value
},
setPosition: function(position) {
this._position = position;
this._update()
},
applyOptions: function(options, screenRange) {
this._range = screenRange;
this._paddingLeftRight = options.paddingLeftRight;
this._paddingTopBottom = options.paddingTopBottom;
this._textHeight = null;
this._colors = [options.invalidRangeColor, options.color];
this._area.attr({
fill: options.color
});
this._border.attr({
fill: options.borderColor
});
this._label.css((0, _utils.patchFontOptions)(options.font));
this._update()
},
getTracker: function() {
return this._tracker
},
setValid: function(isValid) {
this._area.attr({
fill: this._colors[Number(isValid)]
})
},
setColor: function(color) {
this._area.attr({
fill: color
})
},
dispose: function() {
clearTimeout(this._timeout)
},
setOverlapped: function(isOverlapped) {
const that = this;
if (that._isOverlapped !== isOverlapped) {
if (isOverlapped) {
that._border.append(that._group)
} else {
that._isOverlapped && that._border.remove()
}
that._isOverlapped = isOverlapped
}
},
getBorderPosition: function() {
return this._borderPosition
}
};
var _default = exports.default = SliderMarker;
module.exports = exports.default;
module.exports.default = exports.default;