@impargo/react-here-maps - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/HEREMap.js

@@ -194,2 +194,4 @@ "use strict";
             if (behavior) {
+                // @ts-ignore
+                behavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
                 // create the default UI for the map
@@ -196,0 +198,0 @@ ui = H.ui.UI.createDefault(newMap, defaultLayersRef.current, language);

dist/Marker.d.ts

 /// <reference types="heremaps" />
 import React, { FC } from "react";
-export interface MarkerProps extends H.map.Marker.Options {
+import { EventHandlers } from "./useEventHandlers";
+export interface MarkerProps extends H.map.Marker.Options, EventHandlers {
     lat: number;
@@ -19,9 +20,2 @@ lng: number;
     anchor?: H.math.IPoint;
-    onPointerEnter?: (evt: H.mapevents.Event) => void;
-    onPointerMove?: (evt: H.mapevents.Event) => void;
-    onPointerLeave?: (evt: H.mapevents.Event) => void;
-    onTap?: (evt: H.mapevents.Event) => void;
-    onDragStart?: (evt: H.mapevents.Event) => void;
-    onDrag?: (evt: H.mapevents.Event) => void;
-    onDragEnd?: (evt: H.mapevents.Event) => void;
 }
@@ -28,0 +22,0 @@ /**

dist/Marker.js

@@ -55,2 +55,3 @@ "use strict";
 var context_1 = require("./context");
+var useEventHandlers_1 = require("./useEventHandlers");
 var get_dom_marker_icon_1 = __importDefault(require("./utils/get-dom-marker-icon"));
@@ -105,59 +106,12 @@ var get_marker_icon_1 = __importDefault(require("./utils/get-marker-icon"));
     };
+    (0, useEventHandlers_1.useEventHandlers)(marker, {
+        onDrag: onDrag,
+        onDragEnd: onDragEnd,
+        onDragStart: onDragStart,
+        onPointerEnter: onPointerEnter,
+        onPointerLeave: onPointerLeave,
+        onPointerMove: onPointerMove,
+        onTap: onTap
+    });
     (0, react_1.useEffect)(function () {
-        if (marker && onTap) {
-            marker.addEventListener("tap", onTap);
-            return function () {
-                marker.removeEventListener("tap", onTap);
-            };
-        }
-    }, [marker, onTap]);
-    (0, react_1.useEffect)(function () {
-        if (marker && onPointerEnter) {
-            marker.addEventListener("pointerenter", onPointerEnter);
-            return function () {
-                marker.removeEventListener("pointerenter", onPointerEnter);
-            };
-        }
-    }, [marker, onPointerEnter]);
-    (0, react_1.useEffect)(function () {
-        if (marker && onPointerLeave) {
-            marker.addEventListener("pointerleave", onPointerLeave);
-            return function () {
-                marker.removeEventListener("pointerleave", onPointerLeave);
-            };
-        }
-    }, [marker, onPointerLeave]);
-    (0, react_1.useEffect)(function () {
-        if (marker && onPointerMove) {
-            marker.addEventListener("pointermove", onPointerMove);
-            return function () {
-                marker.removeEventListener("pointermove", onPointerMove);
-            };
-        }
-    }, [marker, onPointerMove]);
-    (0, react_1.useEffect)(function () {
-        if (marker && onDragStart) {
-            marker.addEventListener("dragstart", onDragStart);
-            return function () {
-                marker.removeEventListener("dragstart", onDragStart);
-            };
-        }
-    }, [marker, onDragStart]);
-    (0, react_1.useEffect)(function () {
-        if (marker && onDrag) {
-            marker.addEventListener("drag", onDrag);
-            return function () {
-                marker.removeEventListener("drag", onDrag);
-            };
-        }
-    }, [marker, onDrag]);
-    (0, react_1.useEffect)(function () {
-        if (marker && onDragEnd) {
-            marker.addEventListener("dragend", onDragEnd);
-            return function () {
-                marker.removeEventListener("dragend", onDragEnd);
-            };
-        }
-    }, [marker, onDragEnd]);
-    (0, react_1.useEffect)(function () {
         var addedMarker = addMarkerToMap();
@@ -164,0 +118,0 @@ return function () {

dist/Route.d.ts

 /// <reference types="heremaps" />
 import { FC } from "react";
+import { EventHandlers } from "./useEventHandlers";
 export interface Coordinates {
@@ -7,3 +8,3 @@ lat: number;
 }
-export interface RoutesProps {
+export interface RoutesProps extends EventHandlers {
     points?: Coordinates[];
@@ -18,6 +19,3 @@ data?: object;
     arrows?: object;
-    onPointerMove?: (evt: H.mapevents.Event) => void;
-    onPointerLeave?: (evt: H.mapevents.Event) => void;
-    onPointerEnter?: (evt: H.mapevents.Event) => void;
-    onTap?: (evt: H.mapevents.Event) => void;
+    draggable?: boolean;
 }
@@ -24,0 +22,0 @@ export interface RoutesContext {

dist/Route.js

@@ -6,2 +6,3 @@ "use strict";
 var context_1 = require("./context");
+var useEventHandlers_1 = require("./useEventHandlers");
 var defaultMapStyles = {
@@ -13,9 +14,7 @@ fillColor: "blue",
 var Route = function (_a) {
-    var _b = _a.style, style = _b === void 0 ? defaultMapStyles : _b, arrows = _a.arrows, data = _a.data, zIndex = _a.zIndex, points = _a.points, onPointerMove = _a.onPointerMove, onPointerLeave = _a.onPointerLeave, onPointerEnter = _a.onPointerEnter, onTap = _a.onTap;
+    var _b = _a.style, style = _b === void 0 ? defaultMapStyles : _b, arrows = _a.arrows, data = _a.data, zIndex = _a.zIndex, points = _a.points, onPointerMove = _a.onPointerMove, onPointerLeave = _a.onPointerLeave, onPointerEnter = _a.onPointerEnter, onDrag = _a.onDrag, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onTap = _a.onTap, draggable = _a.draggable;
     var routesGroup = (0, react_1.useContext)(context_1.HEREMapContext).routesGroup;
     var _c = (0, react_1.useState)(null), polyline = _c[0], setPolyline = _c[1];
-    var createPolyline = function () {
-        var route;
-        var routeLine;
-        route = new H.geo.LineString();
+    var line = (0, react_1.useMemo)(function () {
+        var route = new H.geo.LineString();
         points.forEach(function (point) {
@@ -25,38 +24,23 @@ var lat = point.lat, lon = point.lon;
         });
-        routeLine = new H.map.Polyline(route, { style: style, arrows: arrows, zIndex: zIndex, data: data });
-        return routeLine;
-    };
+        return route;
+    }, [points]);
+    (0, useEventHandlers_1.useEventHandlers)(polyline, {
+        onDrag: onDrag,
+        onDragEnd: onDragEnd,
+        onDragStart: onDragStart,
+        onPointerEnter: onPointerEnter,
+        onPointerLeave: onPointerLeave,
+        onPointerMove: onPointerMove,
+        onTap: onTap
+    });
     (0, react_1.useEffect)(function () {
-        if (polyline && onTap) {
-            polyline.addEventListener("tap", onTap);
-            return function () {
-                polyline.removeEventListener("tap", onTap);
-            };
+        if (polyline && typeof draggable === "boolean") {
+            // @ts-ignore
+            polyline.draggable = draggable;
         }
-    }, [polyline, onTap]);
+    }, [polyline, draggable]);
     (0, react_1.useEffect)(function () {
-        if (polyline && onPointerLeave) {
-            polyline.addEventListener("pointerleave", onPointerLeave);
-            return function () {
-                polyline.removeEventListener("pointerleave", onPointerLeave);
-            };
-        }
-    }, [polyline, onPointerLeave]);
+        polyline === null || polyline === void 0 ? void 0 : polyline.setGeometry(line);
+    }, [line]);
     (0, react_1.useEffect)(function () {
-        if (polyline && onPointerMove) {
-            polyline.addEventListener("pointermove", onPointerMove);
-            return function () {
-                polyline.removeEventListener("pointermove", onPointerMove);
-            };
-        }
-    }, [polyline, onPointerMove]);
-    (0, react_1.useEffect)(function () {
-        if (polyline && onPointerEnter) {
-            polyline.addEventListener("pointerenter", onPointerEnter);
-            return function () {
-                polyline.removeEventListener("pointerenter", onPointerEnter);
-            };
-        }
-    }, [polyline, onPointerEnter]);
-    (0, react_1.useEffect)(function () {
         polyline === null || polyline === void 0 ? void 0 : polyline.setData(data);
@@ -71,4 +55,4 @@ }, [polyline, data]);
     (0, react_1.useEffect)(function () {
-        if (routesGroup && points.length > 1) {
-            var routeLine_1 = createPolyline();
+        if (routesGroup) {
+            var routeLine_1 = new H.map.Polyline(line, { style: style, arrows: arrows, zIndex: zIndex, data: data });
             routesGroup.addObject(routeLine_1);
@@ -80,3 +64,3 @@ setPolyline(routeLine_1);
         }
-    }, [points, routesGroup]);
+    }, [routesGroup]);
     return null;
@@ -83,0 +67,0 @@ };

package.json

 {
   "name": "@impargo/react-here-maps",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "React.js HERE Maps component",
@@ -5,0 +5,0 @@ "main": "dist/main.js",

No alert changes

Improved metrics

Number of package files

37

increased by5.71%

Worsened metrics

Total package byte prevSize

79365

decreased by-1.02%

Lines of code

1248

decreased by-2.42%

No dependency changes