@maplibre/maplibre-gl-directions - npm Package Compare versions

Comparing version 0.1.6 to 0.2.0

dist/maplibre-gl-directions.es.js

@@ -90,3 +90,4 @@ var __defProp = Object.defineProperty;
   sensitiveAltRoutelineLayers: ["maplibre-gl-directions-alt-routeline", "maplibre-gl-directions-alt-routeline-casing"],
-  dragThreshold: 10
+  dragThreshold: 10,
+  refreshOnMove: false
 };
@@ -109,3 +110,3 @@ function layersFactory(pointsScalingFactor = 1, linesScalingFactor = 1, sourceName = "maplibre-gl-directions") {
       },
-      filter: ["all", ["in", "$type", "LineString"], ["in", "type", "SNAPLINE"]]
+      filter: ["==", ["get", "type"], "SNAPLINE"]
     },
@@ -135,3 +136,3 @@ {
       },
-      filter: ["all", ["in", "$type", "LineString"], ["in", "route", "ALT"]]
+      filter: ["==", ["get", "route"], "ALT"]
     },
@@ -161,3 +162,3 @@ {
       },
-      filter: ["all", ["in", "$type", "LineString"], ["in", "route", "ALT"]]
+      filter: ["==", ["get", "route"], "ALT"]
     },
@@ -197,3 +198,3 @@ {
       },
-      filter: ["all", ["in", "$type", "LineString"], ["in", "route", "SELECTED"]]
+      filter: ["==", ["get", "route"], "SELECTED"]
     },
@@ -233,3 +234,3 @@ {
       },
-      filter: ["all", ["in", "$type", "LineString"], ["in", "route", "SELECTED"]]
+      filter: ["==", ["get", "route"], "SELECTED"]
     },
@@ -255,3 +256,3 @@ {
       },
-      filter: ["all", ["in", "$type", "Point"], ["in", "type", "HOVERPOINT"]]
+      filter: ["==", ["get", "type"], "HOVERPOINT"]
     },
@@ -276,3 +277,3 @@ {
       },
-      filter: ["all", ["in", "$type", "Point"], ["in", "type", "HOVERPOINT"]]
+      filter: ["==", ["get", "type"], "HOVERPOINT"]
     },
@@ -298,3 +299,3 @@ {
       },
-      filter: ["all", ["in", "$type", "Point"], ["in", "type", "SNAPPOINT"]]
+      filter: ["==", ["get", "type"], "SNAPPOINT"]
     },
@@ -319,3 +320,3 @@ {
       },
-      filter: ["all", ["in", "$type", "Point"], ["in", "type", "SNAPPOINT"]]
+      filter: ["==", ["get", "type"], "SNAPPOINT"]
     },
@@ -341,3 +342,3 @@ {
       },
-      filter: ["all", ["in", "$type", "Point"], ["in", "type", "WAYPOINT"]]
+      filter: ["==", ["get", "type"], "WAYPOINT"]
     },
@@ -362,3 +363,3 @@ {
       },
-      filter: ["all", ["in", "$type", "Point"], ["in", "type", "WAYPOINT"]]
+      filter: ["==", ["get", "type"], "WAYPOINT"]
     }
@@ -669,2 +670,3 @@ ];
     __publicField(this, "onClickHandler");
+    __publicField(this, "liveRefreshHandler");
     __publicField(this, "_waypoints", []);
@@ -684,2 +686,12 @@ __publicField(this, "snappoints", []);
     __publicField(this, "departSnappointIndex", -1);
+    __publicField(this, "currentMousePosition", {
+      x: 0,
+      y: 0
+    });
+    __publicField(this, "refreshOnMoveIsRefreshing", false);
+    __publicField(this, "noMouseMovementTimer");
+    __publicField(this, "lastRequestMousePosition", {
+      x: 0,
+      y: 0
+    });
     __publicField(this, "abortController");
@@ -693,2 +705,3 @@ this.map = map;
     this.onClickHandler = this.onClick.bind(this);
+    this.liveRefreshHandler = this.liveRefresh.bind(this);
     this.init();
@@ -723,8 +736,13 @@ }
   async fetchDirections(originalEvent) {
-    var _a;
+    var _a, _b;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
     const prevInteractive = this.interactive;
     if (this._waypoints.length >= 2) {
       this.fire(new MapLibreGlDirectionsRoutingEvent("fetchroutesstart", originalEvent));
+      this.abortController = new AbortController();
+      const signal = this.abortController.signal;
+      signal.onabort = () => {
+        this.interactive = prevInteractive;
+      };
       this.interactive = false;
-      this.abortController = new AbortController();
       let timer;
@@ -753,3 +771,3 @@ if (this.configuration.requestTimeout !== null) {
         if (response.code !== "Ok")
-          throw new Error((_a = response.message) != null ? _a : "An unexpected error occurred.");
+          throw new Error((_b = response.message) != null ? _b : "An unexpected error occurred.");
       } finally {
@@ -905,3 +923,3 @@ this.interactive = prevInteractive;
   onDragDown(e) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     if (e.type === "touchstart" && e.originalEvent.touches.length !== 1)
@@ -919,2 +937,3 @@ return;
     this.dragDownPosition = e.point;
+    this.currentMousePosition = e.point;
     if (this.configuration.sensitiveWaypointLayers.includes((_a = feature == null ? void 0 : feature.layer.id) != null ? _a : "")) {
@@ -927,15 +946,22 @@ this.waypointBeingDragged = this._waypoints.find((waypoint) => {
     } else if (this.configuration.sensitiveRoutelineLayers.includes((_c = feature == null ? void 0 : feature.layer.id) != null ? _c : "")) {
+      this.departSnappointIndex = JSON.parse((_d = feature == null ? void 0 : feature.properties) == null ? void 0 : _d.legIndex);
       if (this.hoverpoint) {
-        this.hoverpoint.geometry.coordinates = [e.lngLat.lng, e.lngLat.lat];
+        if (this.configuration.refreshOnMove) {
+          const departedSnapPointIndex = this.departSnappointIndex !== void 0 ? this.departSnappointIndex + 1 : void 0;
+          this._addWaypoint([e.lngLat.lng, e.lngLat.lat], departedSnapPointIndex, e);
+          this.waypointBeingDragged = this._waypoints[departedSnapPointIndex];
+          this.hoverpoint = void 0;
+        } else {
+          this.hoverpoint.geometry.coordinates = [e.lngLat.lng, e.lngLat.lat];
+        }
       } else {
         this.hoverpoint = this.buildPoint([e.lngLat.lng, e.lngLat.lat], "HOVERPOINT", {
-          departSnappointProperties: __spreadValues({}, JSON.parse((_e = (_d = feature == null ? void 0 : feature.properties) == null ? void 0 : _d.departSnappointProperties) != null ? _e : "{}")),
-          arriveSnappointProperties: __spreadValues({}, JSON.parse((_g = (_f = feature == null ? void 0 : feature.properties) == null ? void 0 : _f.arriveSnappointProperties) != null ? _g : "{}"))
+          departSnappointProperties: __spreadValues({}, JSON.parse((_f = (_e = feature == null ? void 0 : feature.properties) == null ? void 0 : _e.departSnappointProperties) != null ? _f : "{}")),
+          arriveSnappointProperties: __spreadValues({}, JSON.parse((_h = (_g = feature == null ? void 0 : feature.properties) == null ? void 0 : _g.arriveSnappointProperties) != null ? _h : "{}"))
         });
       }
-      if (this.hoverpoint.properties) {
+      if ((_i = this.hoverpoint) == null ? void 0 : _i.properties) {
         this.hoverpoint.properties.showSnaplines = true;
       }
-      this.departSnappointIndex = JSON.parse((_h = feature == null ? void 0 : feature.properties) == null ? void 0 : _h.legIndex);
-      if (~this.departSnappointIndex && ((_i = this.snappoints[this.departSnappointIndex]) == null ? void 0 : _i.properties)) {
+      if (~this.departSnappointIndex && ((_j = this.snappoints[this.departSnappointIndex]) == null ? void 0 : _j.properties)) {
         this.snappoints[this.departSnappointIndex].properties.highlight = true;
@@ -959,2 +985,6 @@ this.highlightedSnappoints.push(this.snappoints[this.departSnappointIndex]);
   onDragMove(e) {
+    if (this.configuration.refreshOnMove) {
+      clearTimeout(this.noMouseMovementTimer);
+      this.noMouseMovementTimer = setTimeout(this.liveRefreshHandler, 300, e);
+    }
     if (e.type === "touchmove" && e.originalEvent.touches.length !== 1)
@@ -969,6 +999,13 @@ return e.originalEvent.preventDefault();
     }
+    this.currentMousePosition = e.point;
     this.draw();
+    if (this.configuration.refreshOnMove && !this.refreshOnMoveIsRefreshing) {
+      this.liveRefreshHandler(e);
+    }
   }
   async onDragUp(e) {
     var _a, _b, _c;
+    if (this.configuration.refreshOnMove) {
+      clearTimeout(this.noMouseMovementTimer);
+    }
     if (e.type === "mouseup" && e.originalEvent.which !== 1)
@@ -989,4 +1026,6 @@ return;
         } catch (err) {
-          if (this.waypointBeingDraggedInitialCoordinates) {
-            this.waypointBeingDragged.geometry.coordinates = this.waypointBeingDraggedInitialCoordinates;
+          if (!(err instanceof DOMException && err.name == "AbortError")) {
+            if (this.waypointBeingDraggedInitialCoordinates) {
+              this.waypointBeingDragged.geometry.coordinates = this.waypointBeingDraggedInitialCoordinates;
+            }
           }
@@ -1021,2 +1060,21 @@ }
   }
+  async liveRefresh(e) {
+    var _a, _b, _c, _d;
+    if (Math.abs(((_a = this.lastRequestMousePosition) == null ? void 0 : _a.x) - ((_b = this.currentMousePosition) == null ? void 0 : _b.x)) > (this.configuration.dragThreshold >= 0 ? this.configuration.dragThreshold : 0) || Math.abs(((_c = this.lastRequestMousePosition) == null ? void 0 : _c.y) - ((_d = this.currentMousePosition) == null ? void 0 : _d.y)) > (this.configuration.dragThreshold >= 0 ? this.configuration.dragThreshold : 0)) {
+      this.refreshOnMoveIsRefreshing = true;
+      this.lastRequestMousePosition = this.currentMousePosition;
+      if (this.waypointBeingDragged) {
+        const waypointEvent = new MapLibreGlDirectionsWaypointEvent("movewaypoint", e, {
+          index: this._waypoints.indexOf(this.waypointBeingDragged),
+          initialCoordinates: this.waypointBeingDraggedInitialCoordinates
+        });
+        this.fire(waypointEvent);
+        try {
+          await this.fetchDirections(waypointEvent);
+        } catch (err) {
+        }
+      }
+      this.refreshOnMoveIsRefreshing = false;
+    }
+  }
   onClick(e) {
@@ -1558,4 +1616,4 @@ var _a, _b, _c, _d;
 }
-var common = "";
-export { LoadingControl, LoadingControl as LoadingIndicatorControl, MapLibreGlDirections as default, layersFactory, utils };
+var common = /* @__PURE__ */ (() => "")();
+export { LoadingControl as LoadingIndicatorControl, MapLibreGlDirectionsRoutingEvent, MapLibreGlDirectionsWaypointEvent, MapLibreGlDirections as default, layersFactory, utils };
 //# sourceMappingURL=maplibre-gl-directions.es.js.map

dist/src/directions/main.d.ts

@@ -18,7 +18,8 @@ import type { Map, MapMouseEvent, MapTouchEvent } from "maplibre-gl";
     protected buildRoutelines: typeof buildRoutelines;
-    protected onMoveHandler: (e: MapMouseEvent) => void;
-    protected onDragDownHandler: (e: MapMouseEvent) => void;
-    protected onDragMoveHandler: (e: MapMouseEvent) => void;
-    protected onDragUpHandler: (e: MapMouseEvent) => void;
-    protected onClickHandler: (e: MapMouseEvent) => void;
+    protected onMoveHandler: (e: MapMouseEvent | MapTouchEvent) => void;
+    protected onDragDownHandler: (e: MapMouseEvent | MapTouchEvent) => void;
+    protected onDragMoveHandler: (e: MapMouseEvent | MapTouchEvent) => void;
+    protected onDragUpHandler: (e: MapMouseEvent | MapTouchEvent) => void;
+    protected onClickHandler: (e: MapMouseEvent | MapTouchEvent) => void;
+    protected liveRefreshHandler: (e: MapMouseEvent | MapTouchEvent) => void;
     protected _waypoints: Feature<Point>[];
@@ -51,5 +52,16 @@ protected snappoints: Feature<Point>[];
     protected departSnappointIndex: number;
+    protected currentMousePosition: {
+        x: number;
+        y: number;
+    };
     protected onDragDown(e: MapMouseEvent | MapTouchEvent): void;
+    protected refreshOnMoveIsRefreshing: boolean;
     protected onDragMove(e: MapMouseEvent | MapTouchEvent): void;
+    protected noMouseMovementTimer: ReturnType<typeof setTimeout>;
     protected onDragUp(e: MapMouseEvent | MapTouchEvent): Promise<void>;
+    protected lastRequestMousePosition: {
+        x: number;
+        y: number;
+    };
+    protected liveRefresh(e: MapMouseEvent | MapTouchEvent): Promise<void>;
     protected onClick(e: MapMouseEvent): void;
@@ -56,0 +68,0 @@ protected assignWaypointsCategories(): void;

dist/src/directions/types.d.ts

@@ -243,3 +243,4 @@ import type { LayerSpecification } from "maplibre-gl";
      * A minimal amount of pixels a waypoint or the hoverpoint must be dragged in order for the drag-event to be
-     * respected. Should be a number >= `0`. Any negative value is treated as `0`.
+     * respected, and for network requests to be made when using {@link refreshOnMove|`refreshOnMove: true`}. Should be a number >= `0`.
+     * Any negative value is treated as `0`.
      *
@@ -255,2 +256,14 @@ * @default `10`
     dragThreshold: number;
+    /**
+     * Whether to update a route while dragging a waypoint/hoverpoint instead of only when dropping it
+     *
+     * @default `false`
+     *
+     * @example
+     * ```
+     * // make the route update while dragging
+     * refreshOnMove: true
+     * ```
+     */
+    refreshOnMove: boolean;
 }
@@ -257,0 +270,0 @@ export declare const MapLibreGlDirectionsDefaultConfiguration: Omit<MapLibreGlDirectionsConfiguration, "layers">;

dist/src/main.d.ts

 import MapLibreGlDirections from "./directions/main";
 import type { MapLibreGlDirectionsConfiguration, PointType, Directions, Route, Leg, Snappoint } from "./directions/types";
-import { MapLibreGlDirectionsEventType, MapLibreGlDirectionsWaypointEvent, MapLibreGlDirectionsWaypointEventData, MapLibreGlDirectionsRoutingEvent, MapLibreGlDirectionsRoutingEventData } from "./directions/events";
+import { type MapLibreGlDirectionsEventType, MapLibreGlDirectionsWaypointEvent, type MapLibreGlDirectionsWaypointEventData, MapLibreGlDirectionsRoutingEvent, type MapLibreGlDirectionsRoutingEventData } from "./directions/events";
 import layersFactory from "./directions/layers";
@@ -18,5 +18,9 @@ import type { LayerSpecification, MapMouseEvent, MapTouchEvent } from "maplibre-gl";
  */
-export type { Directions, Route, Leg, Snappoint, MapLibreGlDirectionsWaypointEvent, MapLibreGlDirectionsWaypointEventData, MapLibreGlDirectionsRoutingEvent, MapLibreGlDirectionsRoutingEventData, };
+export type { Directions, Route, Leg, Snappoint, MapLibreGlDirectionsWaypointEventData, MapLibreGlDirectionsRoutingEventData, };
 /**
  * @protected
+ */
+export { MapLibreGlDirectionsWaypointEvent, MapLibreGlDirectionsRoutingEvent };
+/**
+ * @protected
  * @see {@link https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/|Layers | Style Specification}
@@ -37,7 +41,3 @@ */
 export type { Feature, Point, PointType, LineString };
-/**
- * @deprecated in favor of {@link LoadingIndicatorControl}
- */
-export { LoadingIndicatorControl as LoadingControl };
 export { LoadingIndicatorControl };
 export type { LoadingIndicatorControlConfiguration };

package.json

 {
   "name": "@maplibre/maplibre-gl-directions",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "license": "MIT",
@@ -59,3 +59,3 @@ "homepage": "https://maplibre.org/maplibre-gl-directions/#/",
     "@mapbox/polyline": "^1.1.1",
-    "nanoid": "^3.3.3",
+    "nanoid": "^4.0.0",
     "svelte-spa-router": "^3.2.0"
@@ -67,5 +67,5 @@ },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
-    "@tailwindcss/forms": "^0.5.0",
-    "@tsconfig/svelte": "^2.0.1",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
+    "@tailwindcss/forms": "^0.5.2",
+    "@tsconfig/svelte": "^3.0.0",
     "@types/geojson": "^7946.0.8",
@@ -75,24 +75,24 @@ "@types/mapbox__point-geometry": "^0.1.2",
     "@types/mapbox__vector-tile": "^1.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
-    "autoprefixer": "^10.4.4",
-    "eslint": "^8.14.0",
-    "eslint-plugin-svelte3": "^3.4.1",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.4.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.3",
+    "@typescript-eslint/parser": "^5.30.3",
+    "autoprefixer": "^10.4.7",
+    "eslint": "^8.19.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
     "maplibre-gl": "^2.1.9",
     "postcss": "^8.4.12",
-    "postcss-load-config": "^3.1.4",
-    "prettier": "^2.6.2",
+    "postcss-load-config": "^4.0.1",
+    "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "rollup-plugin-visualizer": "^5.6.0",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.2.7",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.5",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.1.4",
     "tslib": "^2.3.1",
-    "typedoc": "^0.22.15",
-    "typescript": "^4.5.4",
-    "vite": "^2.9.5"
+    "typedoc": "^0.23.4",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.13"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

310768

increased by3.98%

Lines of code

2277

increased by3.83%

Dependency changes

• + Addednanoid@4.0.2(transitive)

• - Removednanoid@3.3.8(transitive)

• Updatednanoid@^4.0.0