@progress/kendo-charts 1.23.6 → 1.24.0-dev.202206130925

package/dist/es/map/constants.js

@@ -0,0 +1,2 @@
+export var SHOW_TOOLTIP = 'showTooltip';
+export var HIDE_TOOLTIP = 'hideTooltip';

package/dist/es/map/layers/bubble.js

@@ -125,6 +125,27 @@ export var BubbleLayer = (function (ShapeLayer) {
         }
     };
 
+    BubbleLayer.prototype._tooltipContext = function _tooltipContext (shape) {
+        return {
+            type: 'bubble',
+            layerIndex: this._layerIndex(),
+            className: 'k-map-bubble-tooltip',
+            dataItem: shape.dataItem,
+            location: shape.location,
+            value: shape.value
+        };
+    };
+
+    BubbleLayer.prototype._tooltipAnchor = function _tooltipAnchor (e) {
+        var shape = e.element;
+        var center = shape.bbox().center();
+
+        return {
+            top: center.y,
+            left: center.x
+        };
+    };
+
     return BubbleLayer;
 }(ShapeLayer));
 

package/dist/es/map/layers/layer.js

@@ -136,5 +136,10 @@ export var Layer = (function (Class) {
         return this._data && this._data.length > 0;
     };
 
+    Layer.prototype._layerIndex = function _layerIndex () {
+        var layers = this.map.layers || [];
+        return layers.indexOf(this);
+    };
+
     return Layer;
 }(Class));

package/dist/es/map/layers/marker.js

@@ -153,14 +153,13 @@ export var MarkerLayer = (function (Layer) {
     };
 
     MarkerLayer.prototype._markerClick = function _markerClick (e) {
-        var layers = this.map.layers || [];
         var marker = e.target._kendoNode;
 
         var args = {
             // marker: $(e.target).data('kendoMarker'),
             // marker: e.target.getAttribute("data-kendoMarker"),
             layer: this,
-            layerIndex: layers.indexOf(this),
+            layerIndex: this._layerIndex(),
             marker: marker,
             markerIndex: (this.items || []).indexOf(marker),
             originalEvent: e
@@ -184,7 +183,7 @@ export var MarkerLayer = (function (Layer) {
 
         var args = extend({}, {
             layer: this,
-            layerIndex: this.map.layers.indexOf(this),
+            layerIndex: this._layerIndex(),
             marker: marker,
             markerIndex: (this.items || []).indexOf(marker)
         }, e);
@@ -241,12 +240,9 @@ export var Marker = (function (Class) {
     Marker.prototype.showAt = function showAt (point) {
         this.render();
 
-        this.element.style.left = toPixels(Math.round(point.x));
-        this.element.style.top = toPixels(Math.round(point.y));
-
-        if (this.tooltip && this.tooltip.popup) {
-            this.tooltip.popup._position();
-        }
+        this._anchor = { left: Math.round(point.x), top: Math.round(point.y) };
+        this.element.style.left = toPixels(this._anchor.left);
+        this.element.style.top = toPixels(this._anchor.top);
     };
 
     Marker.prototype.hide = function hide () {
@@ -254,10 +250,6 @@ export var Marker = (function (Class) {
             this.element.remove();
             this.element = null;
         }
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
     };
 
     Marker.prototype.bindEvents = function bindEvents () {
@@ -288,11 +280,13 @@ export var Marker = (function (Class) {
             var element = document.createElement('span');
             addClass(element, 'k-marker k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
 
-            element.setAttribute("title", options.title);
+            if (options.title) {
+                element.setAttribute("title", options.title);
+            }
 
             var attributes = options.attributes || {};
             Object.keys(attributes).forEach(function(key) {
-                element.setAttributett(key, attributes[key]);
+                element.setAttribute(key, attributes[key]);
             });
 
             element._kendoNode = this;
@@ -305,14 +299,28 @@ export var Marker = (function (Class) {
             }
 
             this.bindEvents();
-
-            this.renderTooltip();
         }
     };
 
     Marker.prototype._mouseEnter = function _mouseEnter (e) {
         var args = this._createEventArgs(e);
         this.layer._markerMouseEnter(args);
+
+        this.layer.map._tooltip.show({
+            top: this._anchor.top - this.element.offsetHeight,
+            left: this._anchor.left
+        }, this._tooltipContext());
+    };
+
+    Marker.prototype._tooltipContext = function _tooltipContext () {
+        return {
+            type: 'marker',
+            layerIndex: this.layer._layerIndex(),
+            className: 'k-map-marker-tooltip',
+            dataItem: this.dataItem,
+            title: this.options.title,
+            location: this.location()
+        };
     };
 
     Marker.prototype._mouseLeave = function _mouseLeave (e) {
@@ -329,9 +337,6 @@ export var Marker = (function (Class) {
         return args;
     };
 
-    Marker.prototype.renderTooltip = function renderTooltip () {
-    };
-
     Marker.create = function create (arg, defaults) {
         if (arg instanceof Marker) {
             return arg;

package/dist/es/map/layers/shape.js

@@ -45,10 +45,9 @@ export var ShapeLayer = (function (Layer) {
 
         this._click = this._handler('shapeClick');
         this.surface.bind('click', this._click);
-        this._mouseenter = this._handler('shapeMouseEnter');
-        this.surface.bind('mouseenter', this._mouseenter);
         this._mouseleave = this._handler('shapeMouseLeave');
         this.surface.bind('mouseleave', this._mouseleave);
+        this.surface.bind('mouseenter', this._mouseenter.bind(this));
     }
 
     if ( Layer ) ShapeLayer.__proto__ = Layer;
@@ -202,24 +201,56 @@ export var ShapeLayer = (function (Layer) {
         }
     };
 
-    ShapeLayer.prototype._handler = function _handler (event) {
-        var layer = this;
+    ShapeLayer.prototype._eventArgs = function _eventArgs (e) {
+        return {
+            layer: this,
+            layerIndex: this._layerIndex(),
+            shape: e.element,
+            shapeIndex: (this._data || []).indexOf(e.element.dataItem),
+            originalEvent: e.originalEvent
+        };
+    };
+
+    ShapeLayer.prototype._handler = function _handler (eventName) {
+        var this$1 = this;
 
-        return function(e) {
+        return function (e) {
             if (e.element) {
-                var args = {
-                    layer: layer,
-                    layerIndex: (layer.map.layers || []).indexOf(layer),
-                    shape: e.element,
-                    shapeIndex: (layer._data || []).indexOf(e.element.dataItem),
-                    originalEvent: e.originalEvent
-                };
-
-                layer.map.trigger(event, args);
+                this$1.map.trigger(eventName, this$1._eventArgs(e));
             }
         };
     };
 
+    ShapeLayer.prototype._mouseenter = function _mouseenter (e) {
+        if (!e.element) {
+            return;
+        }
+
+        this.map.trigger('shapeMouseEnter', this._eventArgs(e));
+
+        var shape = e.element;
+        var anchor = this._tooltipAnchor(e);
+        this.map._tooltip.show(anchor, this._tooltipContext(shape));
+    };
+
+    ShapeLayer.prototype._tooltipContext = function _tooltipContext (shape) {
+        return {
+            type: 'shape',
+            layerIndex: this._layerIndex,
+            className: 'k-map-shape-tooltip',
+            dataItem: shape.dataItem,
+            location: shape.location
+        };
+    };
+
+    ShapeLayer.prototype._tooltipAnchor = function _tooltipAnchor (e) {
+        var cursor = this.map.eventOffset(e.originalEvent);
+        return {
+            top: cursor.y,
+            left: cursor.x
+        };
+    };
+
     ShapeLayer.prototype._activate = function _activate () {
         Layer.prototype._activate.call(this);
         this._panHandler = proxy(this._pan, this);
@@ -350,6 +381,7 @@ var GeoJsonLoader = (function (Class) {
     GeoJsonLoader.prototype._loadPolygon = function _loadPolygon (container, rings, dataItem) {
         var shape = this._buildPolygon(rings);
         shape.dataItem = dataItem;
+        shape.location = this.locator.viewToLocation(shape.bbox().center());
         return this._loadShape(container, shape);
     };
 

package/dist/es/map/map.js

@@ -11,7 +11,8 @@ import {
     limitValue,
     deepExtend,
     elementOffset,
-    isArray
+    isArray,
+    round
 } from '../common';
 
 import {
@@ -38,6 +39,8 @@ import {
     Extent
 } from './extent';
 
+import { Tooltip } from './tooltip/tooltip';
+
 import {
     TileLayer
 } from './layers/tile';
@@ -117,7 +120,6 @@ var Map = (function (Observable) {
 
         Observable.call(this);
 
-
         this._init(element, options, themeOptions, context);
     }
 
@@ -130,6 +132,10 @@ var Map = (function (Observable) {
 
         this.scroller.destroy();
 
+        if (this._tooltip) {
+            this._tooltip.destroy();
+        }
+
         if (this.navigator) {
             this.navigator.destroy();
         }
@@ -176,6 +182,7 @@ var Map = (function (Observable) {
 
         this._viewOrigin = this._getOrigin();
 
+        this._tooltip = this._createTooltip();
         this._initScroller();
         this._initMarkers();
         this._initControls();
@@ -418,6 +425,12 @@ var Map = (function (Observable) {
         return false;
     };
 
+    Map.prototype.hideTooltip = function hideTooltip () {
+        if (this._tooltip) {
+            this._tooltip.hide();
+        }
+    };
+
     Map.prototype._setOrigin = function _setOrigin (origin, zoom) {
         var size = this.viewSize(),
             topLeft;
@@ -637,6 +650,10 @@ var Map = (function (Observable) {
         return layer;
     };
 
+    Map.prototype._createTooltip = function _createTooltip () {
+        return new Tooltip(this.widgetService, this.options.tooltip);
+    };
+
     /* eslint-disable arrow-body-style */
     Map.prototype._initMarkers = function _initMarkers () {
         var markerLayers = (this.options.layers || []).filter(function (x) {
@@ -663,6 +680,9 @@ var Map = (function (Observable) {
         origin.y += offset.y;
         this._scrollOffset = offset;
 
+        this._tooltip.offset = offset;
+        this.hideTooltip();
+
         this._setOrigin(this.layerToLocation(origin));
 
         this.trigger('pan', {
@@ -732,6 +752,7 @@ var Map = (function (Observable) {
         this._viewOrigin = this._getOrigin(true);
 
         this._resetScroller();
+        this.hideTooltip();
 
         this.trigger('beforeReset');
         this.trigger('reset');
@@ -803,6 +824,7 @@ var Map = (function (Observable) {
         }
 
         var cursor = this.eventOffset(e);
+        this.hideTooltip();
 
         this.trigger('click', {
             originalEvent: e,
@@ -853,6 +875,15 @@ var Map = (function (Observable) {
         }
     };
 
+    Map.prototype._toDocumentCoordinates = function _toDocumentCoordinates (point) {
+        var offset = elementOffset(this.element);
+
+        return {
+            left: round(point.x + offset.left),
+            top: round(point.y + offset.top)
+        };
+    };
+
     return Map;
 }(Observable));
 

package/dist/es/map/tooltip/tooltip.js

@@ -0,0 +1,73 @@
+import { Class, deepExtend, setDefaultOptions } from '../../common';
+import { SHOW_TOOLTIP, HIDE_TOOLTIP } from '../constants';
+
+export var Tooltip = (function (Class) {
+    function Tooltip(widgetService, options) {
+        Class.call(this);
+
+        this.widgetService = widgetService;
+        this.options = deepExtend({}, this.options, options);
+        this.offset = { x: 0, y: 0 };
+    }
+
+    if ( Class ) Tooltip.__proto__ = Class;
+    Tooltip.prototype = Object.create( Class && Class.prototype );
+    Tooltip.prototype.constructor = Tooltip;
+
+    var prototypeAccessors = { anchor: { configurable: true } };
+
+    Tooltip.prototype.show = function show (anchor, args) {
+        if (this.location === args.location) {
+            return;
+        }
+
+        this.anchor = anchor;
+        this.location = args.location;
+
+        this.widgetService.notify(SHOW_TOOLTIP,
+            Object.assign({ anchor: this.anchor }, args)
+        );
+
+        this.visible = true;
+    };
+
+    Tooltip.prototype.hide = function hide () {
+        if (this.widgetService) {
+            this.widgetService.notify(HIDE_TOOLTIP);
+        }
+
+        this.visible = false;
+        this.location = null;
+    };
+
+    prototypeAccessors.anchor.get = function () {
+        return this._anchor;
+    };
+
+    prototypeAccessors.anchor.set = function (anchor) {
+        var documentPoint = this.widgetService.widget._toDocumentCoordinates({
+            x: anchor.left - this.offset.x,
+            y: anchor.top - this.offset.y
+        });
+
+        this._anchor = {
+            left: documentPoint.left,
+            top: documentPoint.top
+        };
+    };
+
+    Tooltip.prototype.destroy = function destroy () {
+        this.widgetService = null;
+    };
+
+    Object.defineProperties( Tooltip.prototype, prototypeAccessors );
+
+    return Tooltip;
+}(Class));
+
+setDefaultOptions(Tooltip, {
+    border: {
+        width: 1
+    },
+    opacity: 1
+});

package/dist/es2015/map/constants.js

@@ -0,0 +1,2 @@
+export const SHOW_TOOLTIP = 'showTooltip';
+export const HIDE_TOOLTIP = 'hideTooltip';

package/dist/es2015/map/layers/bubble.js

@@ -114,6 +114,27 @@ export class BubbleLayer extends ShapeLayer {
             this.surface.draw(shape);
         }
     }
+
+    _tooltipContext(shape) {
+        return {
+            type: 'bubble',
+            layerIndex: this._layerIndex(),
+            className: 'k-map-bubble-tooltip',
+            dataItem: shape.dataItem,
+            location: shape.location,
+            value: shape.value
+        };
+    }
+
+    _tooltipAnchor(e) {
+        const shape = e.element;
+        const center = shape.bbox().center();
+
+        return {
+            top: center.y,
+            left: center.x
+        };
+    }
 }
 
 setDefaultOptions(BubbleLayer, {

package/dist/es2015/map/layers/layer.js

@@ -131,4 +131,9 @@ export class Layer extends Class {
     _hasData() {
         return this._data && this._data.length > 0;
     }
+
+    _layerIndex() {
+        const layers = this.map.layers || [];
+        return layers.indexOf(this);
+    }
 }

package/dist/es2015/map/layers/marker.js

@@ -141,14 +141,13 @@ export class MarkerLayer extends Layer {
     }
 
     _markerClick(e) {
-        const layers = this.map.layers || [];
         const marker = e.target._kendoNode;
 
         let args = {
             // marker: $(e.target).data('kendoMarker'),
             // marker: e.target.getAttribute("data-kendoMarker"),
             layer: this,
-            layerIndex: layers.indexOf(this),
+            layerIndex: this._layerIndex(),
             marker: marker,
             markerIndex: (this.items || []).indexOf(marker),
             originalEvent: e
@@ -172,7 +171,7 @@ export class MarkerLayer extends Layer {
 
         let args = extend({}, {
             layer: this,
-            layerIndex: this.map.layers.indexOf(this),
+            layerIndex: this._layerIndex(),
             marker: marker,
             markerIndex: (this.items || []).indexOf(marker)
         }, e);
@@ -223,12 +222,9 @@ export class Marker extends Class {
     showAt(point) {
         this.render();
 
-        this.element.style.left = toPixels(Math.round(point.x));
-        this.element.style.top = toPixels(Math.round(point.y));
-
-        if (this.tooltip && this.tooltip.popup) {
-            this.tooltip.popup._position();
-        }
+        this._anchor = { left: Math.round(point.x), top: Math.round(point.y) };
+        this.element.style.left = toPixels(this._anchor.left);
+        this.element.style.top = toPixels(this._anchor.top);
     }
 
     hide() {
@@ -236,10 +232,6 @@ export class Marker extends Class {
             this.element.remove();
             this.element = null;
         }
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
     }
 
     bindEvents() {
@@ -270,11 +262,13 @@ export class Marker extends Class {
             const element = document.createElement('span');
             addClass(element, 'k-marker k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
 
-            element.setAttribute("title", options.title);
+            if (options.title) {
+                element.setAttribute("title", options.title);
+            }
 
             const attributes = options.attributes || {};
             Object.keys(attributes).forEach(function(key) {
-                element.setAttributett(key, attributes[key]);
+                element.setAttribute(key, attributes[key]);
             });
 
             element._kendoNode = this;
@@ -287,14 +281,28 @@ export class Marker extends Class {
             }
 
             this.bindEvents();
-
-            this.renderTooltip();
         }
     }
 
     _mouseEnter(e) {
         const args = this._createEventArgs(e);
         this.layer._markerMouseEnter(args);
+
+        this.layer.map._tooltip.show({
+            top: this._anchor.top - this.element.offsetHeight,
+            left: this._anchor.left
+        }, this._tooltipContext());
+    }
+
+    _tooltipContext() {
+        return {
+            type: 'marker',
+            layerIndex: this.layer._layerIndex(),
+            className: 'k-map-marker-tooltip',
+            dataItem: this.dataItem,
+            title: this.options.title,
+            location: this.location()
+        };
     }
 
     _mouseLeave(e) {
@@ -311,9 +319,6 @@ export class Marker extends Class {
         return args;
     }
 
-    renderTooltip() {
-    }
-
     static create(arg, defaults) {
         if (arg instanceof Marker) {
             return arg;

package/dist/es2015/map/layers/shape.js

@@ -45,10 +45,9 @@ export class ShapeLayer extends Layer {
 
         this._click = this._handler('shapeClick');
         this.surface.bind('click', this._click);
-        this._mouseenter = this._handler('shapeMouseEnter');
-        this.surface.bind('mouseenter', this._mouseenter);
         this._mouseleave = this._handler('shapeMouseLeave');
         this.surface.bind('mouseleave', this._mouseleave);
+        this.surface.bind('mouseenter', this._mouseenter.bind(this));
     }
 
     destroy() {
@@ -194,24 +193,54 @@ export class ShapeLayer extends Layer {
         }
     }
 
-    _handler(event) {
-        let layer = this;
+    _eventArgs(e) {
+        return {
+            layer: this,
+            layerIndex: this._layerIndex(),
+            shape: e.element,
+            shapeIndex: (this._data || []).indexOf(e.element.dataItem),
+            originalEvent: e.originalEvent
+        };
+    }
 
-        return function(e) {
+    _handler(eventName) {
+        return (e) => {
             if (e.element) {
-                let args = {
-                    layer: layer,
-                    layerIndex: (layer.map.layers || []).indexOf(layer),
-                    shape: e.element,
-                    shapeIndex: (layer._data || []).indexOf(e.element.dataItem),
-                    originalEvent: e.originalEvent
-                };
-
-                layer.map.trigger(event, args);
+                this.map.trigger(eventName, this._eventArgs(e));
             }
         };
     }
 
+    _mouseenter(e) {
+        if (!e.element) {
+            return;
+        }
+
+        this.map.trigger('shapeMouseEnter', this._eventArgs(e));
+
+        const shape = e.element;
+        const anchor = this._tooltipAnchor(e);
+        this.map._tooltip.show(anchor, this._tooltipContext(shape));
+    }
+
+    _tooltipContext(shape) {
+        return {
+            type: 'shape',
+            layerIndex: this._layerIndex,
+            className: 'k-map-shape-tooltip',
+            dataItem: shape.dataItem,
+            location: shape.location
+        };
+    }
+
+    _tooltipAnchor(e) {
+        const cursor = this.map.eventOffset(e.originalEvent);
+        return {
+            top: cursor.y,
+            left: cursor.x
+        };
+    }
+
     _activate() {
         super._activate();
         this._panHandler = proxy(this._pan, this);
@@ -334,6 +363,7 @@ class GeoJsonLoader extends Class {
     _loadPolygon(container, rings, dataItem) {
         let shape = this._buildPolygon(rings);
         shape.dataItem = dataItem;
+        shape.location = this.locator.viewToLocation(shape.bbox().center());
         return this._loadShape(container, shape);
     }