react-map4d-map 1.0.1 → 1.0.2

package/dist/components/MFMap.d.ts

@@ -15,10 +15,14 @@ declare class MFMap extends React.Component<MapProps, any> {
     mapRef: map4d.Map;
     scriptElement: any;
     url: string | null;
+    eventClickMarker: any;
+    eventRightClickMarker: any;
+    eventDragEndMarker: any;
     constructor(props: MapProps);
     setMapDomRef(e: any): void;
     componentWillUnmount(): void;
     destroy(): void;
+    registerEvent(): void;
     createCallback(): void;
     render(): JSX.Element;
 }

package/dist/components/MFMarker.d.ts

@@ -1,6 +1,24 @@
 interface MarkerProps extends map4d.MarkerOptions {
+    position: any;
+    visible?: boolean;
+    anchor?: any;
+    labelAnchor?: any;
+    icon?: any;
+    elevation?: number;
+    rotation?: number;
+    title?: string;
+    snippet?: string;
+    windowAnchor?: any;
+    zIndex?: number;
+    label?: any;
+    draggable?: boolean;
+    iconView?: string | Node;
+    userInteractionEnabled?: boolean;
     map?: map4d.Map;
-    onCreated: (marker: map4d.Marker) => void;
+    onClick: (marker: any) => void;
+    onCreated: (marker: any) => void;
+    onRightClick: (marker: any) => void;
+    onDragEnd: (marker: any) => void;
 }
 declare const MFMarker: (props: MarkerProps) => null;
 export default MFMarker;

package/dist/enum/index.d.ts

@@ -0,0 +1,2 @@
+import { MapEventEnum } from "./mapEventEnum";
+export { MapEventEnum };

package/dist/enum/mapEventEnum.d.ts

@@ -0,0 +1,5 @@
+export declare const enum MapEventEnum {
+    click = "click",
+    rightClick = "rightClick",
+    dragEnd = "dragEnd"
+}

package/dist/index.js

@@ -709,23 +709,6 @@ var MFImageOverlay = function MFImageOverlay(props) {
   return null;
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
@@ -802,7 +785,7 @@ var MFMap = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.destroy = function destroy() {
-    var _this$mapRef;
+    var _this$eventClickMarke, _this$eventRightClick, _this$eventDragEndMar, _this$mapRef;
 
     delete window[this.callback];
 
@@ -810,10 +793,39 @@ var MFMap = /*#__PURE__*/function (_React$Component) {
       this.scriptElement.remove();
     }
 
+    (_this$eventClickMarke = this.eventClickMarker) === null || _this$eventClickMarke === void 0 ? void 0 : _this$eventClickMarke.remove();
+    (_this$eventRightClick = this.eventRightClickMarker) === null || _this$eventRightClick === void 0 ? void 0 : _this$eventRightClick.remove();
+    (_this$eventDragEndMar = this.eventDragEndMarker) === null || _this$eventDragEndMar === void 0 ? void 0 : _this$eventDragEndMar.remove();
     ((_this$mapRef = this.mapRef) === null || _this$mapRef === void 0 ? void 0 : _this$mapRef.destroy) && this.mapRef.destroy();
     this.url = null;
   };
 
+  _proto.registerEvent = function registerEvent() {
+    var _this$mapRef2, _this$mapRef3, _this$mapRef4;
+
+    this.eventClickMarker = (_this$mapRef2 = this.mapRef) === null || _this$mapRef2 === void 0 ? void 0 : _this$mapRef2.addListener("click", function (args) {
+      var _args$marker, _args$marker2;
+
+      ((_args$marker = args.marker) === null || _args$marker === void 0 ? void 0 : _args$marker.onClick) && ((_args$marker2 = args.marker) === null || _args$marker2 === void 0 ? void 0 : _args$marker2.onClick());
+    }, {
+      marker: true
+    });
+    this.eventRightClickMarker = (_this$mapRef3 = this.mapRef) === null || _this$mapRef3 === void 0 ? void 0 : _this$mapRef3.addListener("rightClick", function (args) {
+      var _args$marker3, _args$marker4;
+
+      ((_args$marker3 = args.marker) === null || _args$marker3 === void 0 ? void 0 : _args$marker3.onRightClick) && ((_args$marker4 = args.marker) === null || _args$marker4 === void 0 ? void 0 : _args$marker4.onRightClick());
+    }, {
+      marker: true
+    });
+    this.eventDragEndMarker = (_this$mapRef4 = this.mapRef) === null || _this$mapRef4 === void 0 ? void 0 : _this$mapRef4.addListener("dragEnd", function (args) {
+      var _args$marker5, _args$marker6;
+
+      ((_args$marker5 = args.marker) === null || _args$marker5 === void 0 ? void 0 : _args$marker5.onDragEnd) && ((_args$marker6 = args.marker) === null || _args$marker6 === void 0 ? void 0 : _args$marker6.onDragEnd());
+    }, {
+      marker: true
+    });
+  };
+
   _proto.createCallback = function createCallback() {
     var _this2 = this;
 
@@ -826,6 +838,8 @@ var MFMap = /*#__PURE__*/function (_React$Component) {
           _this2.props.onMapReady(_this2.mapRef, _this2.mapKey);
         }
 
+        _this2.registerEvent();
+
         _this2.setState({
           map: _this2.mapRef
         });
@@ -853,10 +867,9 @@ var MFMap = /*#__PURE__*/function (_React$Component) {
     }
 
     this.url = url;
-
-    var newContext = _extends({}, this.context);
-
-    newContext.map = this.state.map;
+    var newContext = {
+      map: this.state.map
+    };
     return React__default.createElement(Map4dContext.Provider, {
       value: newContext
     }, React__default.createElement("div", {
@@ -893,7 +906,8 @@ var MFMarker = function MFMarker(props) {
       iconView = props.iconView,
       userInteractionEnabled = props.userInteractionEnabled,
       map = props.map,
-      onCreated = props.onCreated;
+      onCreated = props.onCreated,
+      onClick = props.onClick;
   var map4dContext = React.useContext(Map4dContext);
   var markerClusterContext = React.useContext(MarkerClusterContext);
   var theMap = map || map4dContext.map;
@@ -928,11 +942,12 @@ var MFMarker = function MFMarker(props) {
       markerRef.current = new map4d.Marker(option);
 
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
-        var _markerRef$current;
-
-        (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.setMap(theMap);
+        markerRef.current.setMap(theMap);
       }
 
+      markerRef.current.onClick = onClick;
+      markerRef.current.onRightClick = props.onRightClick;
+      markerRef.current.onDragEnd = props.onDragEnd;
       onCreated && onCreated(markerRef.current);
       (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.addMarker) && (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.addMarker(markerRef.current));
     }
@@ -940,105 +955,105 @@ var MFMarker = function MFMarker(props) {
   React.useEffect(function () {
     if (theMap) {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
-        var _markerRef$current2;
+        var _markerRef$current;
 
-        (_markerRef$current2 = markerRef.current) === null || _markerRef$current2 === void 0 ? void 0 : _markerRef$current2.setMap(theMap);
+        (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.setMap(theMap);
       }
     }
 
     return function () {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
-        var _markerRef$current3;
+        var _markerRef$current2;
 
-        (_markerRef$current3 = markerRef.current) === null || _markerRef$current3 === void 0 ? void 0 : _markerRef$current3.setMap(null);
+        (_markerRef$current2 = markerRef.current) === null || _markerRef$current2 === void 0 ? void 0 : _markerRef$current2.setMap(null);
       }
     };
   }, [theMap]);
   React.useEffect(function () {
     return function () {
       if (!(markerClusterContext !== null && markerClusterContext !== void 0 && markerClusterContext.addMarker)) {
-        var _markerRef$current4;
+        var _markerRef$current3;
 
-        (_markerRef$current4 = markerRef.current) === null || _markerRef$current4 === void 0 ? void 0 : _markerRef$current4.setMap(null);
+        (_markerRef$current3 = markerRef.current) === null || _markerRef$current3 === void 0 ? void 0 : _markerRef$current3.setMap(null);
       }
 
       markerRef.current && (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.removeMarker) && (markerClusterContext === null || markerClusterContext === void 0 ? void 0 : markerClusterContext.removeMarker(markerRef.current));
     };
   }, []);
   React.useEffect(function () {
-    var _markerRef$current5;
+    var _markerRef$current4;
 
-    (_markerRef$current5 = markerRef.current) === null || _markerRef$current5 === void 0 ? void 0 : _markerRef$current5.setPosition(position);
+    (_markerRef$current4 = markerRef.current) === null || _markerRef$current4 === void 0 ? void 0 : _markerRef$current4.setPosition(position);
   }, [position]);
   React.useEffect(function () {
-    var _markerRef$current6;
+    var _markerRef$current5;
 
-    (_markerRef$current6 = markerRef.current) === null || _markerRef$current6 === void 0 ? void 0 : _markerRef$current6.setVisible(visible);
+    (_markerRef$current5 = markerRef.current) === null || _markerRef$current5 === void 0 ? void 0 : _markerRef$current5.setVisible(visible);
   }, [visible]);
   React.useEffect(function () {
-    var _markerRef$current7;
+    var _markerRef$current6;
 
-    anchor != undefined && ((_markerRef$current7 = markerRef.current) === null || _markerRef$current7 === void 0 ? void 0 : _markerRef$current7.setAnchor(anchor));
+    anchor != undefined && ((_markerRef$current6 = markerRef.current) === null || _markerRef$current6 === void 0 ? void 0 : _markerRef$current6.setAnchor(anchor));
   }, [anchor]);
   React.useEffect(function () {
-    var _markerRef$current8;
+    var _markerRef$current7;
 
-    labelAnchor != undefined && ((_markerRef$current8 = markerRef.current) === null || _markerRef$current8 === void 0 ? void 0 : _markerRef$current8.setLabelAnchor(labelAnchor));
+    labelAnchor != undefined && ((_markerRef$current7 = markerRef.current) === null || _markerRef$current7 === void 0 ? void 0 : _markerRef$current7.setLabelAnchor(labelAnchor));
   }, [labelAnchor]);
   React.useEffect(function () {
-    var _markerRef$current9;
+    var _markerRef$current8;
 
-    icon != undefined && ((_markerRef$current9 = markerRef.current) === null || _markerRef$current9 === void 0 ? void 0 : _markerRef$current9.setIcon(icon));
+    icon != undefined && ((_markerRef$current8 = markerRef.current) === null || _markerRef$current8 === void 0 ? void 0 : _markerRef$current8.setIcon(icon));
   }, [icon]);
   React.useEffect(function () {
-    var _markerRef$current10;
+    var _markerRef$current9;
 
-    elevation != undefined && ((_markerRef$current10 = markerRef.current) === null || _markerRef$current10 === void 0 ? void 0 : _markerRef$current10.setElevation(elevation));
+    elevation != undefined && ((_markerRef$current9 = markerRef.current) === null || _markerRef$current9 === void 0 ? void 0 : _markerRef$current9.setElevation(elevation));
   }, [elevation]);
   React.useEffect(function () {
-    var _markerRef$current11;
+    var _markerRef$current10;
 
-    rotation != undefined && ((_markerRef$current11 = markerRef.current) === null || _markerRef$current11 === void 0 ? void 0 : _markerRef$current11.setRotation(rotation));
+    rotation != undefined && ((_markerRef$current10 = markerRef.current) === null || _markerRef$current10 === void 0 ? void 0 : _markerRef$current10.setRotation(rotation));
   }, [rotation]);
   React.useEffect(function () {
-    var _markerRef$current12;
+    var _markerRef$current11;
 
-    title != undefined && ((_markerRef$current12 = markerRef.current) === null || _markerRef$current12 === void 0 ? void 0 : _markerRef$current12.setTitle(title));
+    title != undefined && ((_markerRef$current11 = markerRef.current) === null || _markerRef$current11 === void 0 ? void 0 : _markerRef$current11.setTitle(title));
   }, [title]);
   React.useEffect(function () {
-    var _markerRef$current13;
+    var _markerRef$current12;
 
-    snippet != undefined && ((_markerRef$current13 = markerRef.current) === null || _markerRef$current13 === void 0 ? void 0 : _markerRef$current13.setSnippet(snippet));
+    snippet != undefined && ((_markerRef$current12 = markerRef.current) === null || _markerRef$current12 === void 0 ? void 0 : _markerRef$current12.setSnippet(snippet));
   }, [snippet]);
   React.useEffect(function () {
-    var _markerRef$current14;
+    var _markerRef$current13;
 
-    windowAnchor != undefined && ((_markerRef$current14 = markerRef.current) === null || _markerRef$current14 === void 0 ? void 0 : _markerRef$current14.setWindowAnchor(windowAnchor));
+    windowAnchor != undefined && ((_markerRef$current13 = markerRef.current) === null || _markerRef$current13 === void 0 ? void 0 : _markerRef$current13.setWindowAnchor(windowAnchor));
   }, [windowAnchor]);
   React.useEffect(function () {
-    var _markerRef$current15;
+    var _markerRef$current14;
 
-    zIndex != undefined && ((_markerRef$current15 = markerRef.current) === null || _markerRef$current15 === void 0 ? void 0 : _markerRef$current15.setZIndex(zIndex));
+    zIndex != undefined && ((_markerRef$current14 = markerRef.current) === null || _markerRef$current14 === void 0 ? void 0 : _markerRef$current14.setZIndex(zIndex));
   }, [zIndex]);
   React.useEffect(function () {
-    var _markerRef$current16;
+    var _markerRef$current15;
 
-    label != undefined && ((_markerRef$current16 = markerRef.current) === null || _markerRef$current16 === void 0 ? void 0 : _markerRef$current16.setLabel(label));
+    label != undefined && ((_markerRef$current15 = markerRef.current) === null || _markerRef$current15 === void 0 ? void 0 : _markerRef$current15.setLabel(label));
   }, [label]);
   React.useEffect(function () {
-    var _markerRef$current17;
+    var _markerRef$current16;
 
-    draggable != undefined && ((_markerRef$current17 = markerRef.current) === null || _markerRef$current17 === void 0 ? void 0 : _markerRef$current17.setDraggable(draggable));
+    draggable != undefined && ((_markerRef$current16 = markerRef.current) === null || _markerRef$current16 === void 0 ? void 0 : _markerRef$current16.setDraggable(draggable));
   }, [draggable]);
   React.useEffect(function () {
-    var _markerRef$current18;
+    var _markerRef$current17;
 
-    iconView != undefined && ((_markerRef$current18 = markerRef.current) === null || _markerRef$current18 === void 0 ? void 0 : _markerRef$current18.setIconView(iconView));
+    iconView != undefined && ((_markerRef$current17 = markerRef.current) === null || _markerRef$current17 === void 0 ? void 0 : _markerRef$current17.setIconView(iconView));
   }, [iconView]);
   React.useEffect(function () {
-    var _markerRef$current19;
+    var _markerRef$current18;
 
-    userInteractionEnabled != undefined && ((_markerRef$current19 = markerRef.current) === null || _markerRef$current19 === void 0 ? void 0 : _markerRef$current19.setUserInteraction(userInteractionEnabled));
+    userInteractionEnabled != undefined && ((_markerRef$current18 = markerRef.current) === null || _markerRef$current18 === void 0 ? void 0 : _markerRef$current18.setUserInteraction(userInteractionEnabled));
   }, [userInteractionEnabled]);
   return null;
 };