@progress/kendo-charts 2.7.2-dev.202502101310 → 2.7.2-develop.1

package/dist/es/chart/selection.js

@@ -8,11 +8,11 @@ import { LEFT, RIGHT, MIN_VALUE, MAX_VALUE, X } from '../common/constants';
 import { addClass, Class, removeClass, eventCoordinates, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
 import { parseDate } from '../date-utils';
 
-var ZOOM_ACCELERATION = 3;
-var SELECTOR_HEIGHT_ADJUST = 0.1;
+const ZOOM_ACCELERATION = 3;
+const SELECTOR_HEIGHT_ADJUST = 0.1;
 
 function createDiv(classNames) {
-    var element = document.createElement("div");
+    const element = document.createElement("div");
     if (classNames) {
         element.className = classNames;
     }
@@ -21,7 +21,7 @@ function createDiv(classNames) {
 }
 
 function closestHandle(element) {
-    var current = element;
+    let current = element;
     while (current && !hasClasses(current, "k-handle")) {
         current = current.parentNode;
     }
@@ -29,11 +29,11 @@ function closestHandle(element) {
     return current;
 }
 
-var Selection = (function (Class) {
-    function Selection(chart, categoryAxis, options, observer) {
-        Class.call(this);
+class Selection extends Class {
+    constructor(chart, categoryAxis, options, observer) {
+        super();
 
-        var chartElement = chart.element;
+        const chartElement = chart.element;
 
         this.options = deepExtend({}, this.options, options);
         this.chart = chart;
@@ -55,17 +55,13 @@ var Selection = (function (Class) {
         }
     }
 
-    if ( Class ) Selection.__proto__ = Class;
-    Selection.prototype = Object.create( Class && Class.prototype );
-    Selection.prototype.constructor = Selection;
-
-    Selection.prototype.onPane = function onPane (pane) {
+    onPane(pane) {
         return this.categoryAxis.pane === pane;
-    };
+    }
 
-    Selection.prototype.createElements = function createElements () {
-        var options = this.options;
-        var wrapper = this.wrapper = createDiv("k-selector k-pointer-events-none");
+    createElements() {
+        const options = this.options;
+        const wrapper = this.wrapper = createDiv("k-selector k-pointer-events-none");
         elementStyles(wrapper, {
             top: options.offset.top,
             left: options.offset.left,
@@ -74,7 +70,7 @@ var Selection = (function (Class) {
             direction: 'ltr'
         });
 
-        var selection = this.selection = createDiv("k-selection k-pointer-events-none");
+        const selection = this.selection = createDiv("k-selection k-pointer-events-none");
 
         this.leftMask = createDiv("k-mask k-pointer-events-none");
         this.rightMask = createDiv("k-mask k-pointer-events-none");
@@ -83,11 +79,11 @@ var Selection = (function (Class) {
         wrapper.appendChild(this.rightMask);
         wrapper.appendChild(selection);
 
-        var body = this.body = createDiv("k-selection-bg k-pointer-events-none");
+        const body = this.body = createDiv("k-selection-bg k-pointer-events-none");
         selection.appendChild(body);
 
-        var leftHandle = this.leftHandle = createDiv("k-handle k-left-handle k-pointer-events-auto");
-        var rightHandle = this.rightHandle = createDiv("k-handle k-right-handle k-pointer-events-auto");
+        const leftHandle = this.leftHandle = createDiv("k-handle k-left-handle k-pointer-events-auto");
+        const rightHandle = this.rightHandle = createDiv("k-handle k-right-handle k-pointer-events-auto");
         leftHandle.appendChild(createDiv());
         rightHandle.appendChild(createDiv());
 
@@ -95,9 +91,9 @@ var Selection = (function (Class) {
         selection.appendChild(rightHandle);
 
         this.chartElement.appendChild(wrapper);
-        var selectionStyles = elementStyles(selection, [ "borderLeftWidth", "borderRightWidth", "height" ]);
-        var leftHandleHeight = elementStyles(leftHandle, "height").height;
-        var rightHandleHeight = elementStyles(rightHandle, "height").height;
+        const selectionStyles = elementStyles(selection, [ "borderLeftWidth", "borderRightWidth", "height" ]);
+        const leftHandleHeight = elementStyles(leftHandle, "height").height;
+        const rightHandleHeight = elementStyles(rightHandle, "height").height;
 
         options.selection = {
             border: {
@@ -116,14 +112,14 @@ var Selection = (function (Class) {
 
         /* eslint no-self-assign: "off" */
         wrapper.style.cssText = wrapper.style.cssText;
-    };
-
-    Selection.prototype.bindEvents = function bindEvents$1 () {
-        var obj;
+    }
 
+    bindEvents() {
         if (this.options.mousewheel !== false) {
             this._mousewheelHandler = this._mousewheel.bind(this);
-            bindEvents(this.chartElement, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
+            bindEvents(this.chartElement, {
+                [ MOUSEWHEEL ]: this._mousewheelHandler
+            });
         }
 
         this._domEvents = DomEventsBuilder.create(this.chartElement, {
@@ -137,14 +133,12 @@ var Selection = (function (Class) {
             gesturechange: this._gesturechange.bind(this),
             gestureend: this._gestureend.bind(this)
         });
-    };
+    }
 
-    Selection.prototype.initOptions = function initOptions () {
-        var ref = this;
-        var options = ref.options;
-        var categoryAxis = ref.categoryAxis;
-        var box = categoryAxis.pane.chartsBox();
-        var intlService = this.chart.chartService.intl;
+    initOptions() {
+        const { options, categoryAxis } = this;
+        const box = categoryAxis.pane.chartsBox();
+        const intlService = this.chart.chartService.intl;
 
         if (this._dateAxis) {
             deepExtend(options, {
@@ -155,9 +149,7 @@ var Selection = (function (Class) {
             });
         }
 
-        var ref$1 = elementStyles(this.chartElement, [ "paddingLeft", "paddingTop" ]);
-        var paddingLeft = ref$1.paddingLeft;
-        var paddingTop = ref$1.paddingTop;
+        const { paddingLeft, paddingTop } = elementStyles(this.chartElement, [ "paddingLeft", "paddingTop" ]);
 
         this.options = deepExtend({}, {
             width: box.width(),
@@ -173,11 +165,9 @@ var Selection = (function (Class) {
             from: options.min,
             to: options.max
         }, options);
-    };
-
-    Selection.prototype.destroy = function destroy () {
-        var obj;
+    }
 
+    destroy() {
         if (this._domEvents) {
             this._domEvents.destroy();
             delete this._domEvents;
@@ -188,60 +178,62 @@ var Selection = (function (Class) {
 
         if (this.wrapper) {
             if (this._mousewheelHandler) {
-                unbindEvents(this.chartElement, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
+                unbindEvents(this.chartElement, {
+                    [ MOUSEWHEEL ]: this._mousewheelHandler
+                });
                 this._mousewheelHandler = null;
             }
 
             this.chartElement.removeChild(this.wrapper);
             this.wrapper = null;
         }
-    };
+    }
 
-    Selection.prototype._rangeEventArgs = function _rangeEventArgs (range) {
+    _rangeEventArgs(range) {
 
         return {
             axis: this.categoryAxis.options,
             from: this._value(range.from),
             to: this._value(range.to)
         };
-    };
+    }
 
-    Selection.prototype._pointInPane = function _pointInPane (x, y) {
-        var paneBox = this.categoryAxis.pane.box;
-        var modelCoords = this.chart._toModelCoordinates(x, y);
+    _pointInPane(x, y) {
+        const paneBox = this.categoryAxis.pane.box;
+        const modelCoords = this.chart._toModelCoordinates(x, y);
         return paneBox.containsPoint(modelCoords);
-    };
+    }
 
-    Selection.prototype._start = function _start (e) {
-        var options = this.options;
-        var target = eventElement(e);
+    _start(e) {
+        const options = this.options;
+        const target = eventElement(e);
         if (this._state || !target) {
             return;
         }
 
-        var coords = eventCoordinates(e);
-        var inPane = this._pointInPane(coords.x, coords.y);
+        const coords = eventCoordinates(e);
+        const inPane = this._pointInPane(coords.x, coords.y);
         if (!inPane) {
             return;
         }
 
-        var handle = closestHandle(target);
-        var bodyRect = this.body.getBoundingClientRect();
-        var inBody = !handle && coords.x >= bodyRect.x && coords.x <= bodyRect.x + bodyRect.width &&
+        const handle = closestHandle(target);
+        const bodyRect = this.body.getBoundingClientRect();
+        const inBody = !handle && coords.x >= bodyRect.x && coords.x <= bodyRect.x + bodyRect.width &&
                        coords.y >= bodyRect.y && coords.y <= bodyRect.y + bodyRect.height;
 
         this.chart._unsetActivePoint();
         this._state = {
             moveTarget: handle,
             startLocation: e.x ? e.x.location : 0,
-            inBody: inBody,
+            inBody,
             range: {
                 from: this._index(options.from),
                 to: this._index(options.to)
             }
         };
 
-        var args = this._rangeEventArgs({
+        const args = this._rangeEventArgs({
             from: this._index(options.from),
             to: this._index(options.to)
         });
@@ -249,10 +241,10 @@ var Selection = (function (Class) {
         if (this.trigger(SELECT_START, args)) {
             this._state = null;
         }
-    };
+    }
 
-    Selection.prototype._press = function _press (e) {
-        var handle;
+    _press(e) {
+        let handle;
         if (this._state) {
             handle = this._state.moveTarget;
         } else {
@@ -261,36 +253,32 @@ var Selection = (function (Class) {
         if (handle) {
             addClass(handle, "k-handle-active");
         }
-    };
+    }
 
-    Selection.prototype._move = function _move (e) {
+    _move(e) {
         if (!this._state) {
             return;
         }
 
-        var ref = this;
-        var state = ref._state;
-        var options = ref.options;
-        var categoryAxis = ref.categoryAxis;
-        var range = state.range;
-        var target = state.moveTarget;
-        var reverse = categoryAxis.options.reverse;
-        var from = this._index(options.from);
-        var to = this._index(options.to);
-        var min = this._index(options.min);
-        var max = this._index(options.max);
-        var delta = state.startLocation - e.x.location;
-        var oldRange = { from: range.from, to: range.to };
-        var span = range.to - range.from;
-        var scale = elementStyles(this.wrapper, "width").width / (categoryAxis.categoriesCount() - 1);
-        var offset = Math.round(delta / scale) * (reverse ? -1 : 1);
+        const { _state: state, options, categoryAxis } = this;
+        const { range, moveTarget: target } = state;
+        const reverse = categoryAxis.options.reverse;
+        const from = this._index(options.from);
+        const to = this._index(options.to);
+        const min = this._index(options.min);
+        const max = this._index(options.max);
+        const delta = state.startLocation - e.x.location;
+        const oldRange = { from: range.from, to: range.to };
+        const span = range.to - range.from;
+        const scale = elementStyles(this.wrapper, "width").width / (categoryAxis.categoriesCount() - 1);
+        const offset = Math.round(delta / scale) * (reverse ? -1 : 1);
 
         if (!target && !state.inBody) {
             return;
         }
 
-        var leftHandle = target && hasClasses(target, "k-left-handle");
-        var rightHandle = target && hasClasses(target, "k-right-handle");
+        const leftHandle = target && hasClasses(target, "k-left-handle");
+        const rightHandle = target && hasClasses(target, "k-right-handle");
 
         if (state.inBody) {
             range.from = Math.min(
@@ -319,38 +307,36 @@ var Selection = (function (Class) {
             this.move(range.from, range.to);
             this.trigger(SELECT, this._rangeEventArgs(range));
         }
-    };
+    }
 
-    Selection.prototype._end = function _end () {
+    _end() {
         if (this._state) {
-            var moveTarget = this._state.moveTarget;
+            const moveTarget = this._state.moveTarget;
             if (moveTarget) {
                 removeClass(moveTarget, "k-handle-active");
             }
 
-            var range = this._state.range;
+            const range = this._state.range;
             this.set(range.from, range.to);
             this.trigger(SELECT_END, this._rangeEventArgs(range));
 
             delete this._state;
         }
-    };
-
-    Selection.prototype._tap = function _tap (e) {
-        var ref = this;
-        var options = ref.options;
-        var categoryAxis = ref.categoryAxis;
-        var coords = this.chart._eventCoordinates(e);
-        var categoryIx = categoryAxis.pointCategoryIndex(new Point(coords.x, categoryAxis.box.y1));
-        var from = this._index(options.from);
-        var to = this._index(options.to);
-        var min = this._index(options.min);
-        var max = this._index(options.max);
-        var span = to - from;
-        var mid = from + span / 2;
-        var range = {};
-        var rightClick = e.event.which === 3;
-        var offset = Math.round(mid - categoryIx);
+    }
+
+    _tap(e) {
+        const { options, categoryAxis } = this;
+        const coords = this.chart._eventCoordinates(e);
+        const categoryIx = categoryAxis.pointCategoryIndex(new Point(coords.x, categoryAxis.box.y1));
+        const from = this._index(options.from);
+        const to = this._index(options.to);
+        const min = this._index(options.min);
+        const max = this._index(options.max);
+        const span = to - from;
+        const mid = from + span / 2;
+        const range = {};
+        const rightClick = e.event.which === 3;
+        let offset = Math.round(mid - categoryIx);
 
         if (this._state || rightClick) {
             return;
@@ -377,17 +363,15 @@ var Selection = (function (Class) {
             this.trigger(SELECT, this._rangeEventArgs(range));
             this._end();
         }
-    };
-
-    Selection.prototype._mousewheel = function _mousewheel (e) {
-        var this$1 = this;
+    }
 
-        var delta = mousewheelDelta(e);
+    _mousewheel(e) {
+        let delta = mousewheelDelta(e);
 
         this._start(e);
 
         if (this._state) {
-            var range = this._state.range;
+            const range = this._state.range;
 
             e.preventDefault();
             e.stopPropagation();
@@ -414,16 +398,16 @@ var Selection = (function (Class) {
                 clearTimeout(this._mwTimeout);
             }
 
-            this._mwTimeout = setTimeout(function () {
-                this$1._end();
+            this._mwTimeout = setTimeout(() => {
+                this._end();
             }, MOUSEWHEEL_DELAY);
         }
-    };
+    }
 
-    Selection.prototype._gesturestart = function _gesturestart (e) {
-        var options = this.options;
-        var touch = e.touches[0];
-        var inPane = this._pointInPane(touch.pageX, touch.pageY);
+    _gesturestart(e) {
+        const options = this.options;
+        const touch = e.touches[0];
+        const inPane = this._pointInPane(touch.pageX, touch.pageY);
 
         if (!inPane) {
             return;
@@ -435,37 +419,33 @@ var Selection = (function (Class) {
                 to: this._index(options.to)
             }
         };
-        var args = this._rangeEventArgs(this._state.range);
+        const args = this._rangeEventArgs(this._state.range);
 
         if (this.trigger(SELECT_START, args)) {
             this._state = null;
         } else {
             e.preventDefault();
         }
-    };
+    }
 
-    Selection.prototype._gestureend = function _gestureend () {
+    _gestureend() {
         if (this._state) {
             this.trigger(SELECT_END, this._rangeEventArgs(this._state.range));
             delete this._state;
         }
-    };
+    }
 
-    Selection.prototype._gesturechange = function _gesturechange (e) {
+    _gesturechange(e) {
         if (!this._state) {
             return;
         }
 
-        var ref = this;
-        var chart = ref.chart;
-        var state = ref._state;
-        var options = ref.options;
-        var categoryAxis = ref.categoryAxis;
-        var range = state.range;
-        var p0 = chart._toModelCoordinates(e.touches[0].x.location).x;
-        var p1 = chart._toModelCoordinates(e.touches[1].x.location).x;
-        var left = Math.min(p0, p1);
-        var right = Math.max(p0, p1);
+        const { chart, _state: state, options, categoryAxis } = this;
+        const range = state.range;
+        const p0 = chart._toModelCoordinates(e.touches[0].x.location).x;
+        const p1 = chart._toModelCoordinates(e.touches[1].x.location).x;
+        const left = Math.min(p0, p1);
+        const right = Math.max(p0, p1);
 
         e.preventDefault();
 
@@ -476,20 +456,20 @@ var Selection = (function (Class) {
         this.move(range.from, range.to);
 
         this.trigger(SELECT, this._rangeEventArgs(range));
-    };
+    }
 
-    Selection.prototype._index = function _index (value) {
-        var index = value;
+    _index(value) {
+        let index = value;
 
         if (value instanceof Date) {
             index = this.categoryAxis.categoryIndex(value);
         }
 
         return index;
-    };
+    }
 
-    Selection.prototype._value = function _value (index) {
-        var value = index;
+    _value(index) {
+        let value = index;
         if (this._dateAxis) {
             value = this.categoryAxis.categoryAt(index);
             if (value > this.options.max) {
@@ -498,27 +478,25 @@ var Selection = (function (Class) {
         }
 
         return value;
-    };
+    }
 
-    Selection.prototype._slot = function _slot (value) {
-        var categoryAxis = this.categoryAxis;
-        var index = this._index(value);
+    _slot(value) {
+        const categoryAxis = this.categoryAxis;
+        const index = this._index(value);
 
         return categoryAxis.getSlot(index, index, true);
-    };
+    }
 
-    Selection.prototype.move = function move (from, to) {
-        var options = this.options;
-        var reverse = this.categoryAxis.options.reverse;
-        var offset = options.offset;
-        var padding = options.padding;
-        var border = options.selection.border;
-        var left = reverse ? to : from;
-        var right = reverse ? from : to;
-        var edge = 'x' + (reverse ? 2 : 1);
+    move(from, to) {
+        const options = this.options;
+        const reverse = this.categoryAxis.options.reverse;
+        const { offset, padding, selection: { border } } = options;
+        const left = reverse ? to : from;
+        const right = reverse ? from : to;
+        const edge = 'x' + (reverse ? 2 : 1);
 
-        var box = this._slot(left);
-        var leftMaskWidth = round(box[edge] - offset.left + padding.left);
+        let box = this._slot(left);
+        const leftMaskWidth = round(box[edge] - offset.left + padding.left);
 
         elementStyles(this.leftMask, {
             width: leftMaskWidth
@@ -529,12 +507,12 @@ var Selection = (function (Class) {
 
         box = this._slot(right);
 
-        var rightMaskWidth = round(options.width - (box[edge] - offset.left + padding.left));
+        const rightMaskWidth = round(options.width - (box[edge] - offset.left + padding.left));
         elementStyles(this.rightMask, {
             width: rightMaskWidth
         });
 
-        var distance = options.width - rightMaskWidth;
+        let distance = options.width - rightMaskWidth;
         if (distance !== options.width) {
             distance += border.right;
         }
@@ -545,14 +523,14 @@ var Selection = (function (Class) {
         elementStyles(this.selection, {
             width: Math.max(options.width - (leftMaskWidth + rightMaskWidth) - border.right, 0)
         });
-    };
+    }
 
-    Selection.prototype.set = function set (from, to) {
-        var options = this.options;
-        var min = this._index(options.min);
-        var max = this._index(options.max);
-        var fromValue = limitValue(this._index(from), min, max);
-        var toValue = limitValue(this._index(to), fromValue + 1, max);
+    set(from, to) {
+        const options = this.options;
+        const min = this._index(options.min);
+        const max = this._index(options.max);
+        const fromValue = limitValue(this._index(from), min, max);
+        const toValue = limitValue(this._index(to), fromValue + 1, max);
 
         if (options.visible) {
             this.move(fromValue, toValue);
@@ -560,17 +538,17 @@ var Selection = (function (Class) {
 
         options.from = this._value(fromValue);
         options.to = this._value(toValue);
-    };
-
-    Selection.prototype.expand = function expand (delta) {
-        var options = this.options;
-        var min = this._index(options.min);
-        var max = this._index(options.max);
-        var zDir = options.mousewheel.zoom;
-        var from = this._index(options.from);
-        var to = this._index(options.to);
-        var range = { from: from, to: to };
-        var oldRange = deepExtend({}, range);
+    }
+
+    expand(delta) {
+        const options = this.options;
+        const min = this._index(options.min);
+        const max = this._index(options.max);
+        const zDir = options.mousewheel.zoom;
+        const from = this._index(options.from);
+        const to = this._index(options.to);
+        let range = { from: from, to: to };
+        const oldRange = deepExtend({}, range);
 
         if (this._state) {
             range = this._state.range;
@@ -595,26 +573,25 @@ var Selection = (function (Class) {
             this.set(range.from, range.to);
             return true;
         }
-    };
-
-    Selection.prototype.zoom = function zoom (delta, coords) {
-        var options = this.options;
-        var min = this._index(options.min);
-        var max = this._index(options.max);
-        var from = this._index(options.from);
-        var to = this._index(options.to);
-        var range = { from: from, to: to };
-        var oldRange = deepExtend({}, range);
-
-        var ref = this.categoryAxis.options;
-        var reverse = ref.reverse;
-        var origin = X + (reverse ? '2' : '1');
-        var lineBox = this.categoryAxis.lineBox();
-        var relative = Math.abs(lineBox[origin] - coords[X]);
-        var size = lineBox.width();
-        var position = round(relative / size, 2);
-        var minDelta = round(position * delta);
-        var maxDelta = round((1 - position) * delta);
+    }
+
+    zoom(delta, coords) {
+        const options = this.options;
+        const min = this._index(options.min);
+        const max = this._index(options.max);
+        const from = this._index(options.from);
+        const to = this._index(options.to);
+        let range = { from: from, to: to };
+        const oldRange = deepExtend({}, range);
+
+        const { reverse } = this.categoryAxis.options;
+        const origin = X + (reverse ? '2' : '1');
+        const lineBox = this.categoryAxis.lineBox();
+        const relative = Math.abs(lineBox[origin] - coords[X]);
+        const size = lineBox.width();
+        const position = round(relative / size, 2);
+        const minDelta = round(position * delta);
+        const maxDelta = round((1 - position) * delta);
 
         if (this._state) {
             range = this._state.range;
@@ -635,14 +612,12 @@ var Selection = (function (Class) {
             this.set(range.from, range.to);
             return true;
         }
-    };
+    }
 
-    Selection.prototype.trigger = function trigger (name, args) {
+    trigger(name, args) {
         return (this.observer || this.chart).trigger(name, args);
-    };
-
-    return Selection;
-}(Class));
+    }
+}
 
 setDefaultOptions(Selection, {
     visible: true,