@progress/kendo-charts 1.21.0 → 1.23.0-dev.202201120958

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

@@ -0,0 +1,348 @@
+import {
+    Class,
+    addClass,
+    isArray,
+    getter,
+    deepExtend,
+    setDefaultOptions
+} from '../../common';
+
+import { Layer } from './layer';
+import { Location } from '../location';
+
+import {
+    proxy,
+    on,
+    off,
+    toHyphens,
+    toPixels
+} from '../utils';
+
+var CLICK = "click";
+var MOUSE_ENTER = "mouseenter";
+var MOUSE_LEAVE = "mouseleave";
+
+var extend = Object.assign;
+var MARKER_CLASS = ".k-marker";
+
+var doc = document;
+var math = Math;
+
+export var MarkerLayer = (function (Layer) {
+    function MarkerLayer(map, options) {
+        Layer.call(this, map, options);
+
+        this._markerClickHandler = proxy(this._markerClick, this);
+        on(this.element, CLICK, MARKER_CLASS, this._markerClickHandler);
+
+        this.items = [];
+
+        this._load(this._readData());
+    }
+
+    if ( Layer ) MarkerLayer.__proto__ = Layer;
+    MarkerLayer.prototype = Object.create( Layer && Layer.prototype );
+    MarkerLayer.prototype.constructor = MarkerLayer;
+
+    MarkerLayer.prototype.destroy = function destroy () {
+        Layer.prototype.destroy.call(this);
+        off(this.element, CLICK, this._markerClickHandler);
+        this.clear();
+    };
+
+    MarkerLayer.prototype.add = function add (args) {
+        var this$1 = this;
+
+        if (isArray(args)) {
+            for (var i = 0; i < args.length; i++) {
+                this$1._addOne(args[i]);
+            }
+        } else {
+            return this._addOne(args);
+        }
+    };
+
+    MarkerLayer.prototype.remove = function remove (marker) {
+        marker.destroy();
+        var index = (this.items || []).indexOf(marker);
+
+        if (index > -1) {
+            this.items.splice(index, 1);
+        }
+    };
+
+    MarkerLayer.prototype.clear = function clear () {
+        var this$1 = this;
+
+        for (var i = 0; i < this.items.length; i++) {
+            this$1.items[i].destroy();
+        }
+
+        this.items = [];
+    };
+
+    MarkerLayer.prototype.update = function update (marker) {
+        var location = marker.location();
+
+        if (location) {
+            marker.showAt(this.map.locationToView(location));
+
+            var args = {
+                marker: marker,
+                layer: this
+            };
+
+            this.map.trigger('markerActivate', args);
+        }
+    };
+
+    MarkerLayer.prototype._reset = function _reset () {
+        var this$1 = this;
+
+        Layer.prototype._reset.call(this);
+
+        var items = this.items;
+
+        for (var i = 0; i < items.length; i++) {
+            this$1.update(items[i]);
+        }
+    };
+
+    MarkerLayer.prototype.bind = function bind (options, dataItem) {
+        var marker = Marker.create(options, this.options);
+        marker.dataItem = dataItem;
+
+        var args = {
+            marker: marker,
+            layer: this
+        };
+
+        var cancelled = this.map.trigger('markerCreated', args);
+
+        if (!cancelled) {
+            this.add(marker);
+            return marker;
+        }
+    };
+
+    MarkerLayer.prototype._addOne = function _addOne (arg) {
+        var marker = Marker.create(arg, this.options);
+        marker.addTo(this);
+        return marker;
+    };
+
+    MarkerLayer.prototype._readData = function _readData () {
+        var data = this.options.data || [];
+        return data;
+    };
+
+    MarkerLayer.prototype._load = function _load (data) {
+        var this$1 = this;
+
+        this._data = data;
+        this.clear();
+
+        var getLocation = getter(this.options.locationField);
+        var getTitle = getter(this.options.titleField);
+
+        for (var i = 0; i < data.length; i++) {
+            var dataItem = data[i];
+
+            this$1.bind({
+                location: getLocation(dataItem),
+                title: getTitle(dataItem)
+            }, dataItem);
+        }
+    };
+
+    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),
+            marker: marker,
+            markerIndex: (this.items || []).indexOf(marker),
+            originalEvent: e
+        };
+
+        this.map.trigger('markerClick', args);
+    };
+
+    MarkerLayer.prototype._markerMouseEnter = function _markerMouseEnter (e) {
+        var args = this._createMarkerEventArgs(e);
+        this.map.trigger("markerMouseEnter", args);
+    };
+
+    MarkerLayer.prototype._markerMouseLeave = function _markerMouseLeave (e) {
+        var args = this._createMarkerEventArgs(e);
+        this.map.trigger("markerMouseLeave", args);
+    };
+
+    MarkerLayer.prototype._createMarkerEventArgs = function _createMarkerEventArgs (e) {
+        var marker = e.marker;
+
+        var args = extend({}, {
+            layer: this,
+            layerIndex: this.map.layers.indexOf(this),
+            marker: marker,
+            markerIndex: (this.items || []).indexOf(marker)
+        }, e);
+
+        return args;
+    };
+
+    return MarkerLayer;
+}(Layer));
+
+setDefaultOptions(MarkerLayer, {
+    zIndex: 1000,
+    autoBind: true,
+    dataSource: {},
+    locationField: 'location',
+    titleField: 'title'
+});
+
+export var Marker = (function (Class) {
+    function Marker(options) {
+        Class.call(this);
+        this.options = options || {};
+    }
+
+    if ( Class ) Marker.__proto__ = Class;
+    Marker.prototype = Object.create( Class && Class.prototype );
+    Marker.prototype.constructor = Marker;
+
+    Marker.prototype.destroy = function destroy () {
+        this.layer = null;
+        this.unbindEvents();
+        this.hide();
+    };
+
+    Marker.prototype.addTo = function addTo (parent) {
+        this.layer = parent.markers || parent;
+        this.layer.items.push(this);
+        this.layer.update(this);
+    };
+
+    Marker.prototype.location = function location (value) {
+        if (value) {
+            this.options.location = Location.create(value).toArray();
+
+            if (this.layer) {
+                this.layer.update(this);
+            }
+
+            return this;
+        }
+
+        return Location.create(this.options.location);
+    };
+
+    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();
+        }
+    };
+
+    Marker.prototype.hide = function hide () {
+        if (this.element) {
+            this.element.remove();
+            this.element = null;
+        }
+        if (this.tooltip) {
+            this.tooltip.destroy();
+            this.tooltip = null;
+        }
+    };
+
+    Marker.prototype.bindEvents = function bindEvents () {
+        if (!this.element) {
+            return;
+        }
+
+        this._mouseEnterHandler = proxy(this._mouseEnter, this);
+        on(this.element, MOUSE_ENTER, MARKER_CLASS, this._mouseEnterHandler);
+        this._mouseLeaveHandler = proxy(this._mouseLeave, this);
+        on(this.element, MOUSE_LEAVE, MARKER_CLASS, this._mouseLeaveHandler);
+    };
+
+    Marker.prototype.unbindEvents = function unbindEvents () {
+        if (!this.element) {
+            return;
+        }
+
+        off(this.element, MOUSE_ENTER, this._mouseEnterHandler);
+        off(this.element, MOUSE_LEAVE, this._mouseLeaveHandler);
+    };
+
+    Marker.prototype.render = function render () {
+        if (!this.element) {
+            var options = this.options;
+            var layer = this.layer;
+
+            var element = doc.createElement('span');
+            addClass(element, 'k-marker k-icon k-i-marker-' + toHyphens(options.shape || 'pin'));
+
+            element.setAttribute("title", options.title);
+
+            var attributes = options.attributes || {};
+            Object.keys(attributes).forEach(function(key) {
+                element.setAttributett(key, attributes[key]);
+            });
+
+            element._kendoNode = this;
+            element.style.zIndex = options.zIndex;
+
+            this.element = element;
+
+            if (layer) {
+                layer.element.appendChild(this.element);
+            }
+
+            this.bindEvents();
+
+            this.renderTooltip();
+        }
+    };
+
+    Marker.prototype._mouseEnter = function _mouseEnter (e) {
+        var args = this._createEventArgs(e);
+        this.layer._markerMouseEnter(args);
+    };
+
+    Marker.prototype._mouseLeave = function _mouseLeave (e) {
+        var args = this._createEventArgs(e);
+        this.layer._markerMouseLeave(args);
+    };
+
+    Marker.prototype._createEventArgs = function _createEventArgs (e) {
+        var args = {
+            marker: this,
+            originalEvent: e
+        };
+
+        return args;
+    };
+
+    Marker.prototype.renderTooltip = function renderTooltip () {
+    };
+
+    Marker.create = function create (arg, defaults) {
+        if (arg instanceof Marker) {
+            return arg;
+        }
+
+        return new Marker(deepExtend({}, defaults, arg));
+    };
+
+    return Marker;
+}(Class));