@progress/kendo-charts 1.28.0-dev.202302240817 → 1.28.0-dev.202303070933

package/dist/es/chart/constants.js

@@ -92,7 +92,7 @@ var INSIDE_END = "insideEnd";
 var INSIDE_BASE = "insideBase";
 var OUTSIDE_END = "outsideEnd";
 
-var MOUSEWHEEL = "DOMMouseScroll mousewheel";
+var MOUSEWHEEL = "wheel";
 var MOUSEWHEEL_DELAY = 150;
 var MOUSEWHEEL_ZOOM_RATE = 0.3;
 

package/dist/es/chart/selection.js

@@ -5,16 +5,16 @@ import { DateCategoryAxis, Point } from '../core';
 import { MOUSEWHEEL_DELAY, MOUSEWHEEL, SELECT_START, SELECT, SELECT_END } from './constants';
 
 import { LEFT, RIGHT, MIN_VALUE, MAX_VALUE, X } from '../common/constants';
-import { addClass, Class, removeClass, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
+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;
 
-function createDiv(className) {
+function createDiv(classNames) {
     var element = document.createElement("div");
-    if (className) {
-        element.className = className;
+    if (classNames) {
+        element.className = classNames;
     }
 
     return element;
@@ -65,7 +65,7 @@ var Selection = (function (Class) {
 
     Selection.prototype.createElements = function createElements () {
         var options = this.options;
-        var wrapper = this.wrapper = createDiv("k-selector");
+        var wrapper = this.wrapper = createDiv("k-selector k-pointer-events-none");
         elementStyles(wrapper, {
             top: options.offset.top,
             left: options.offset.left,
@@ -73,18 +73,21 @@ var Selection = (function (Class) {
             height: options.height,
             direction: 'ltr'
         });
-        var selection = this.selection = createDiv("k-selection");
-        this.leftMask = createDiv("k-mask");
-        this.rightMask = createDiv("k-mask");
+
+        var 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");
 
         wrapper.appendChild(this.leftMask);
         wrapper.appendChild(this.rightMask);
         wrapper.appendChild(selection);
 
-        selection.appendChild(createDiv("k-selection-bg"));
+        var body = this.body = createDiv("k-selection-bg k-pointer-events-none");
+        selection.appendChild(body);
 
-        var leftHandle = this.leftHandle = createDiv("k-handle k-left-handle");
-        var rightHandle = this.rightHandle = createDiv("k-handle k-right-handle");
+        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");
         leftHandle.appendChild(createDiv());
         rightHandle.appendChild(createDiv());
 
@@ -119,10 +122,10 @@ var Selection = (function (Class) {
 
         if (this.options.mousewheel !== false) {
             this._mousewheelHandler = this._mousewheel.bind(this);
-            bindEvents(this.wrapper, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
+            bindEvents(this.chartElement, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
         }
 
-        this._domEvents = DomEventsBuilder.create(this.wrapper, {
+        this._domEvents = DomEventsBuilder.create(this.chartElement, {
             stopPropagation: true, // applicable for the jQuery UserEvents
             start: this._start.bind(this),
             move: this._move.bind(this),
@@ -184,9 +187,10 @@ var Selection = (function (Class) {
 
         if (this.wrapper) {
             if (this._mousewheelHandler) {
-                unbindEvents(this.wrapper, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
+                unbindEvents(this.chartElement, ( obj = {}, obj[ MOUSEWHEEL ] = this._mousewheelHandler, obj ));
                 this._mousewheelHandler = null;
             }
+
             this.chartElement.removeChild(this.wrapper);
             this.wrapper = null;
         }
@@ -201,18 +205,35 @@ var Selection = (function (Class) {
         };
     };
 
+    Selection.prototype._pointInPane = function _pointInPane (x, y) {
+        var paneBox = this.categoryAxis.pane.box;
+        var modelCoords = this.chart._toModelCoordinates(x, y);
+        return paneBox.containsPoint(modelCoords);
+    };
+
     Selection.prototype._start = function _start (e) {
         var options = this.options;
         var target = eventElement(e);
-
         if (this._state || !target) {
             return;
         }
 
+        var coords = eventCoordinates(e);
+        var 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 &&
+                       coords.y >= bodyRect.y && coords.y <= bodyRect.y + bodyRect.height;
+
         this.chart._unsetActivePoint();
         this._state = {
-            moveTarget: closestHandle(target) || target,
+            moveTarget: handle,
             startLocation: e.x ? e.x.location : 0,
+            inBody: inBody,
             range: {
                 from: this._index(options.from),
                 to: this._index(options.to)
@@ -263,14 +284,14 @@ var Selection = (function (Class) {
         var scale = elementStyles(this.wrapper, "width").width / (categoryAxis.categoriesCount() - 1);
         var offset = Math.round(delta / scale) * (reverse ? -1 : 1);
 
-        if (!target) {
+        if (!target && !state.inBody) {
             return;
         }
 
-        var leftHandle = hasClasses(target, "k-left-handle");
-        var rightHandle = hasClasses(target, "k-right-handle");
+        var leftHandle = target && hasClasses(target, "k-left-handle");
+        var rightHandle = target && hasClasses(target, "k-right-handle");
 
-        if (hasClasses(target, "k-selection k-selection-bg")) {
+        if (state.inBody) {
             range.from = Math.min(
                 Math.max(min, from - offset),
                 max - span
@@ -349,6 +370,7 @@ var Selection = (function (Class) {
         range.to = Math.min(range.from + span, max);
 
         this._start(e);
+
         if (this._state) {
             this._state.range = range;
             this.trigger(SELECT, this._rangeEventArgs(range));
@@ -361,7 +383,7 @@ var Selection = (function (Class) {
 
         var delta = mousewheelDelta(e);
 
-        this._start({ target: this.selection });
+        this._start(e);
 
         if (this._state) {
             var range = this._state.range;
@@ -399,6 +421,12 @@ var Selection = (function (Class) {
 
     Selection.prototype._gesturestart = function _gesturestart (e) {
         var options = this.options;
+        var touch = e.touches[0];
+        var inPane = this._pointInPane(touch.pageX, touch.pageY);
+
+        if (!inPane) {
+            return;
+        }
 
         this._state = {
             range: {
@@ -423,6 +451,10 @@ var Selection = (function (Class) {
     };
 
     Selection.prototype._gesturechange = function _gesturechange (e) {
+        if (!this._state) {
+            return;
+        }
+
         var ref = this;
         var chart = ref.chart;
         var state = ref._state;

package/dist/es/common/has-classes.js

@@ -2,9 +2,9 @@ export default function hasClasses(element, classNames) {
     if (element.className) {
         var names = classNames.split(" ");
         for (var idx = 0; idx < names.length; idx++) {
-            if (element.className.indexOf(names[idx]) !== -1) {
+            if (element.className.indexOf && element.className.indexOf(names[idx]) !== -1) {
                 return true;
             }
         }
     }
-}
+}

package/dist/es/stock/stock-chart.js

@@ -189,7 +189,10 @@ setDefaultOptions(StockChart, {
                 visible: false
             },
             tooltip: {
-                visible: true
+                visible: false
+            },
+            highlight: {
+                visible: false
             },
             line: {
                 width: 2
@@ -206,4 +209,4 @@ setDefaultOptions(StockChart, {
     }
 });
 
-export default StockChart;
+export default StockChart;

package/dist/es2015/chart/constants.js

@@ -92,7 +92,7 @@ const INSIDE_END = "insideEnd";
 const INSIDE_BASE = "insideBase";
 const OUTSIDE_END = "outsideEnd";
 
-const MOUSEWHEEL = "DOMMouseScroll mousewheel";
+const MOUSEWHEEL = "wheel";
 const MOUSEWHEEL_DELAY = 150;
 const MOUSEWHEEL_ZOOM_RATE = 0.3;
 

package/dist/es2015/chart/selection.js

@@ -5,16 +5,16 @@ import { DateCategoryAxis, Point } from '../core';
 import { MOUSEWHEEL_DELAY, MOUSEWHEEL, SELECT_START, SELECT, SELECT_END } from './constants';
 
 import { LEFT, RIGHT, MIN_VALUE, MAX_VALUE, X } from '../common/constants';
-import { addClass, Class, removeClass, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
+import { addClass, Class, removeClass, eventCoordinates, deepExtend, elementStyles, eventElement, setDefaultOptions, limitValue, round, bindEvents, unbindEvents, mousewheelDelta, hasClasses } from '../common';
 import { parseDate } from '../date-utils';
 
 const ZOOM_ACCELERATION = 3;
 const SELECTOR_HEIGHT_ADJUST = 0.1;
 
-function createDiv(className) {
+function createDiv(classNames) {
     const element = document.createElement("div");
-    if (className) {
-        element.className = className;
+    if (classNames) {
+        element.className = classNames;
     }
 
     return element;
@@ -61,7 +61,7 @@ class Selection extends Class {
 
     createElements() {
         const options = this.options;
-        const wrapper = this.wrapper = createDiv("k-selector");
+        const wrapper = this.wrapper = createDiv("k-selector k-pointer-events-none");
         elementStyles(wrapper, {
             top: options.offset.top,
             left: options.offset.left,
@@ -69,18 +69,21 @@ class Selection extends Class {
             height: options.height,
             direction: 'ltr'
         });
-        const selection = this.selection = createDiv("k-selection");
-        this.leftMask = createDiv("k-mask");
-        this.rightMask = createDiv("k-mask");
+
+        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");
 
         wrapper.appendChild(this.leftMask);
         wrapper.appendChild(this.rightMask);
         wrapper.appendChild(selection);
 
-        selection.appendChild(createDiv("k-selection-bg"));
+        const body = this.body = createDiv("k-selection-bg k-pointer-events-none");
+        selection.appendChild(body);
 
-        const leftHandle = this.leftHandle = createDiv("k-handle k-left-handle");
-        const rightHandle = this.rightHandle = createDiv("k-handle k-right-handle");
+        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());
 
@@ -113,12 +116,12 @@ class Selection extends Class {
     bindEvents() {
         if (this.options.mousewheel !== false) {
             this._mousewheelHandler = this._mousewheel.bind(this);
-            bindEvents(this.wrapper, {
+            bindEvents(this.chartElement, {
                 [ MOUSEWHEEL ]: this._mousewheelHandler
             });
         }
 
-        this._domEvents = DomEventsBuilder.create(this.wrapper, {
+        this._domEvents = DomEventsBuilder.create(this.chartElement, {
             stopPropagation: true, // applicable for the jQuery UserEvents
             start: this._start.bind(this),
             move: this._move.bind(this),
@@ -174,11 +177,12 @@ class Selection extends Class {
 
         if (this.wrapper) {
             if (this._mousewheelHandler) {
-                unbindEvents(this.wrapper, {
+                unbindEvents(this.chartElement, {
                     [ MOUSEWHEEL ]: this._mousewheelHandler
                 });
                 this._mousewheelHandler = null;
             }
+
             this.chartElement.removeChild(this.wrapper);
             this.wrapper = null;
         }
@@ -193,18 +197,35 @@ class Selection extends Class {
         };
     }
 
+    _pointInPane(x, y) {
+        const paneBox = this.categoryAxis.pane.box;
+        const modelCoords = this.chart._toModelCoordinates(x, y);
+        return paneBox.containsPoint(modelCoords);
+    }
+
     _start(e) {
         const options = this.options;
         const target = eventElement(e);
-
         if (this._state || !target) {
             return;
         }
 
+        const coords = eventCoordinates(e);
+        const inPane = this._pointInPane(coords.x, coords.y);
+        if (!inPane) {
+            return;
+        }
+
+        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: closestHandle(target) || target,
+            moveTarget: handle,
             startLocation: e.x ? e.x.location : 0,
+            inBody,
             range: {
                 from: this._index(options.from),
                 to: this._index(options.to)
@@ -251,14 +272,14 @@ class Selection extends Class {
         const scale = elementStyles(this.wrapper, "width").width / (categoryAxis.categoriesCount() - 1);
         const offset = Math.round(delta / scale) * (reverse ? -1 : 1);
 
-        if (!target) {
+        if (!target && !state.inBody) {
             return;
         }
 
-        const leftHandle = hasClasses(target, "k-left-handle");
-        const rightHandle = hasClasses(target, "k-right-handle");
+        const leftHandle = target && hasClasses(target, "k-left-handle");
+        const rightHandle = target && hasClasses(target, "k-right-handle");
 
-        if (hasClasses(target, "k-selection k-selection-bg")) {
+        if (state.inBody) {
             range.from = Math.min(
                 Math.max(min, from - offset),
                 max - span
@@ -335,6 +356,7 @@ class Selection extends Class {
         range.to = Math.min(range.from + span, max);
 
         this._start(e);
+
         if (this._state) {
             this._state.range = range;
             this.trigger(SELECT, this._rangeEventArgs(range));
@@ -345,7 +367,7 @@ class Selection extends Class {
     _mousewheel(e) {
         let delta = mousewheelDelta(e);
 
-        this._start({ target: this.selection });
+        this._start(e);
 
         if (this._state) {
             const range = this._state.range;
@@ -383,6 +405,12 @@ class Selection extends Class {
 
     _gesturestart(e) {
         const options = this.options;
+        const touch = e.touches[0];
+        const inPane = this._pointInPane(touch.pageX, touch.pageY);
+
+        if (!inPane) {
+            return;
+        }
 
         this._state = {
             range: {
@@ -407,6 +435,10 @@ class Selection extends Class {
     }
 
     _gesturechange(e) {
+        if (!this._state) {
+            return;
+        }
+
         const { chart, _state: state, options, categoryAxis } = this;
         const range = state.range;
         const p0 = chart._toModelCoordinates(e.touches[0].x.location).x;

package/dist/es2015/common/has-classes.js

@@ -2,9 +2,9 @@ export default function hasClasses(element, classNames) {
     if (element.className) {
         const names = classNames.split(" ");
         for (let idx = 0; idx < names.length; idx++) {
-            if (element.className.indexOf(names[idx]) !== -1) {
+            if (element.className.indexOf && element.className.indexOf(names[idx]) !== -1) {
                 return true;
             }
         }
     }
-}
+}

package/dist/es2015/stock/stock-chart.js

@@ -180,7 +180,10 @@ setDefaultOptions(StockChart, {
                 visible: false
             },
             tooltip: {
-                visible: true
+                visible: false
+            },
+            highlight: {
+                visible: false
             },
             line: {
                 width: 2
@@ -197,4 +200,4 @@ setDefaultOptions(StockChart, {
     }
 });
 
-export default StockChart;
+export default StockChart;