devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
240 lines (237 loc) • 7.84 kB
JavaScript
/**
* DevExtreme (esm/__internal/viz/chart_components/scroll_bar.js)
* Version: 25.2.3
* Build date: Fri Dec 12 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import eventsEngine from "../../../common/core/events/core/events_engine";
import {
end as dragEventEnd,
move as dragEventMove,
start as dragEventStart
} from "../../../common/core/events/drag";
import {
fireEvent
} from "../../../common/core/events/utils/index";
import {
noop
} from "../../../core/utils/common";
import {
extend
} from "../../../core/utils/extend";
import {
isDefined
} from "../../../core/utils/type";
import {
Translator2D
} from "../translators/translator2d";
const _min = Math.min;
const _max = Math.max;
const MIN_SCROLL_BAR_SIZE = 10;
export const ScrollBar = function(renderer, group) {
this._translator = new Translator2D({}, {}, {});
this._scroll = renderer.rect().append(group);
this._addEvents()
};
function _getXCoord(canvas, pos, offset, width) {
let x = 0;
if ("right" === pos) {
x = canvas.width - canvas.right + offset
} else if ("left" === pos) {
x = canvas.left - offset - width
}
return x
}
function _getYCoord(canvas, pos, offset, width) {
let y = 0;
if ("top" === pos) {
y = canvas.top - offset
} else if ("bottom" === pos) {
y = canvas.height - canvas.bottom + width + offset
}
return y
}
ScrollBar.prototype = {
_addEvents() {
const scrollElement = this._scroll.element;
eventsEngine.on(scrollElement, dragEventStart, (e => {
fireEvent({
type: "dxc-scroll-start",
originalEvent: e,
target: scrollElement
})
}));
eventsEngine.on(scrollElement, dragEventMove, (e => {
const dX = -e.offset.x * this._scale;
const dY = -e.offset.y * this._scale;
const lx = this._offset - (this._layoutOptions.vertical ? dY : dX) / this._scale;
this._applyPosition(lx, lx + this._translator.canvasLength / this._scale);
fireEvent({
type: "dxc-scroll-move",
originalEvent: e,
target: scrollElement,
offset: {
x: dX,
y: dY
}
})
}));
eventsEngine.on(scrollElement, dragEventEnd, (e => {
fireEvent({
type: "dxc-scroll-end",
originalEvent: e,
target: scrollElement,
offset: {
x: -e.offset.x * this._scale,
y: -e.offset.y * this._scale
}
})
}))
},
update(options) {
let position = options.position;
const isVertical = options.rotated;
const defaultPosition = isVertical ? "right" : "top";
const secondaryPosition = isVertical ? "left" : "bottom";
if (position !== defaultPosition && position !== secondaryPosition) {
position = defaultPosition
}
this._scroll.attr({
rotate: !options.rotated ? -90 : 0,
rotateX: 0,
rotateY: 0,
fill: options.color,
width: options.width,
opacity: options.opacity
});
this._layoutOptions = {
width: options.width,
offset: options.offset,
vertical: isVertical,
position: position
};
return this
},
init(range, stick) {
const isDiscrete = "discrete" === range.axisType;
this._translateWithOffset = isDiscrete && !stick ? 1 : 0;
this._translator.update(extend({}, range, {
minVisible: null,
maxVisible: null,
visibleCategories: null
}, isDiscrete && {
min: null,
max: null
} || {}), this._canvas, {
isHorizontal: !this._layoutOptions.vertical,
stick: stick
});
return this
},
getOptions() {
return this._layoutOptions
},
setPane(panes) {
const position = this._layoutOptions.position;
let pane;
if ("left" === position || "top" === position) {
pane = panes[0]
} else {
pane = panes[panes.length - 1]
}
this.pane = pane.name;
return this
},
updateSize(canvas) {
this._canvas = extend({}, canvas);
const options = this._layoutOptions;
const pos = options.position;
const offset = options.offset;
const width = options.width;
this._scroll.attr({
translateX: _getXCoord(canvas, pos, offset, width),
translateY: _getYCoord(canvas, pos, offset, width)
})
},
getMultipleAxesSpacing: () => 0,
estimateMargins() {
return this.getMargins()
},
getMargins() {
const options = this._layoutOptions;
const margins = {
left: 0,
top: 0,
right: 0,
bottom: 0
};
margins[options.position] = options.width + options.offset;
return margins
},
shift(margins) {
const options = this._layoutOptions;
const side = options.position;
const isVertical = options.vertical;
const attr = {
translateX: this._scroll.attr("translateX") ?? 0,
translateY: this._scroll.attr("translateY") ?? 0
};
const shift = margins[side];
attr[isVertical ? "translateX" : "translateY"] += ("left" === side || "top" === side ? -1 : 1) * shift;
this._scroll.attr(attr)
},
hideTitle: noop,
hideOuterElements: noop,
setPosition(min, max) {
const translator = this._translator;
const minPoint = isDefined(min) ? translator.translate(min, -this._translateWithOffset) : translator.translate("canvas_position_start");
const maxPoint = isDefined(max) ? translator.translate(max, this._translateWithOffset) : translator.translate("canvas_position_end");
this._offset = _min(minPoint, maxPoint);
this._scale = translator.getScale(min, max);
this._applyPosition(_min(minPoint, maxPoint), _max(minPoint, maxPoint))
},
customPositionIsAvailable: () => false,
dispose() {
this._scroll.dispose();
this._scroll = this._translator = null
},
_applyPosition(x1, x2) {
const visibleArea = this._translator.getCanvasVisibleArea();
const min = visibleArea.min;
const max = visibleArea.max;
if (max <= min) {
return
}
if (x1 > x2) {
[x1, x2] = [x2, x1]
}
x1 = Math.max(x1, min);
x2 = Math.min(x2, max);
if (x2 - x1 < 10) {
if (max - min < 10) {
x1 = min;
x2 = max
} else {
const center = (x1 + x2) / 2;
x1 = center - 5;
x2 = center + 5;
if (x1 < min) {
x1 = min;
x2 = min + 10
} else if (x2 > max) {
x2 = max;
x1 = max - 10
}
}
}
x1 = Math.max(x1, min);
x2 = Math.min(x2, max);
const height = Math.max(x2 - x1, 0);
this._scroll.attr({
y: x1,
height: height
})
}
};