Merge pull request #21 from tohu12/feature/add-snapGetFeatures

Readme.md

@@ -52,6 +52,10 @@ const draw = new MapboxDraw({
     snapPx: 15, // defaults to 15
     snapToMidPoints: true, // defaults to false
     snapVertexPriorityDistance: 0.0025, // defaults to 1.25
+    snapGetFeatures: (map, draw) => [
+      ...map.queryRenderedFeatures({ layers: ["not-editable-layer-name"] }),
+      ...draw.getAll().features,
+    ], // defaults to all features from the draw layer (draw.getAll().features)
   },
   guides: false,
 });
@@ -65,7 +69,7 @@ draw.changeMode("draw_polygon");
 
 #### `snapPx`
 
-The min distnace (in pixels) where snapping to the line/segments would take effect.
+The min distance (in pixels) where snapping to the line/segments would take effect.
 
 #### `snapToMidPoints`
 
@@ -81,7 +85,7 @@ Defaults to `true`. When creating polygons, if `false`, will use `turf.differenc
 
 ### Changing settings
 
-Changing settings would take effect while snapping imidiately, so you can control snapping behaivior using `draw.options.snap`, like so:
+Changing settings would take effect while snapping immediately, so you can control snapping behavior using `draw.options.snap`, like so:
 
 ```js
 // turn snapping off

docs/index.html

@@ -213,7 +213,13 @@
             // snapOptions: {
             //   snapPx: 15,
             //   snapToMidPoints: true,
-            //   snapVertexPriorityDistance: 0.0025
+            //   snapVertexPriorityDistance: 0.0025,
+            //   snapGetFeatures: (map, draw) => [
+            //       ...map.queryRenderedFeatures({
+            //         layers: ["not-editable-layer-name"],
+            //       }),
+            //       ...draw.getAll().features,
+            //     ],
             // },
             guides: false,
           });

src/index.js

@@ -4,4 +4,4 @@ export { default as SnapPolygonMode } from "./modes/snap_polygon.js";
 export { default as SnapDirectSelect } from "./modes/snap_direct_select.js";
 
 export { default as SnapModeDrawStyles } from "./utils/customDrawStyles.js";
-export * as Utils from "./utils/index.js"
+export * as Utils from "./utils/index.js";

src/modes/snap_direct_select.js

@@ -1,8 +1,14 @@
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import { createSnapList, getGuideFeature, IDS, snap } from "./../utils/index.js";
+import {
+  createSnapList,
+  getGuideFeature,
+  IDS,
+  snap,
+} from "./../utils/index.js";
+
 const { doubleClickZoom } = MapboxDraw.lib;
-const DirectSelect = MapboxDraw.modes.direct_select;
 const Constants = MapboxDraw.constants;
+const DirectSelect = MapboxDraw.modes.direct_select;
 const SnapDirectSelect = { ...DirectSelect };
 
 SnapDirectSelect.onSetup = function (opts) {
@@ -17,7 +23,12 @@ SnapDirectSelect.onSetup = function (opts) {
     throw new TypeError("direct_select mode doesn't handle point features");
   }
 
-  const [snapList, vertices] = createSnapList(this.map, this._ctx.api, feature);
+  const [snapList, vertices] = createSnapList(
+    this.map,
+    this._ctx.api,
+    feature,
+    this._ctx.options.snapOptions?.snapGetFeatures
+  );
 
   const verticalGuide = this.newFeature(getGuideFeature(IDS.VERTICAL_GUIDE));
   const horizontalGuide = this.newFeature(
@@ -53,13 +64,13 @@ SnapDirectSelect.onSetup = function (opts) {
     trash: true,
   });
 
-  const optionsChangedCallBAck = (options) => {
+  const optionsChangedCallback = (options) => {
     state.options = options;
   };
 
   // for removing listener later on close
-  state["optionsChangedCallBAck"] = optionsChangedCallBAck;
-  this.map.on("draw.snap.options_changed", optionsChangedCallBAck);
+  state["optionsChangedCallback"] = optionsChangedCallback;
+  this.map.on("draw.snap.options_changed", optionsChangedCallback);
 
   return state;
 };
@@ -76,7 +87,7 @@ SnapDirectSelect.onStop = function (state) {
 
   // remove moveend callback
   //   this.map.off("moveend", state.moveendCallback);
-  this.map.off("draw.snap.options_changed", state.optionsChangedCallBAck);
+  this.map.off("draw.snap.options_changed", state.optionsChangedCallback);
 
   // This relies on the the state of SnapPolygonMode being similar to DrawPolygon
   DirectSelect.onStop.call(this, state);

src/modes/snap_line.js

@@ -1,12 +1,4 @@
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
-const {
-  geojsonTypes,
-  modes,
-  cursors,
-} = MapboxDraw.constants;
-const { doubleClickZoom } = MapboxDraw.lib;
-const DrawLine = MapboxDraw.modes.draw_line_string;
-
 import {
   addPointToVertices,
   createSnapList,
@@ -16,6 +8,9 @@ import {
   snap,
 } from "./../utils/index.js";
 
+const { doubleClickZoom } = MapboxDraw.lib;
+const { geojsonTypes, modes, cursors } = MapboxDraw.constants;
+const DrawLine = MapboxDraw.modes.draw_line_string;
 const SnapLineMode = { ...DrawLine };
 
 SnapLineMode.onSetup = function (options) {
@@ -41,7 +36,12 @@ SnapLineMode.onSetup = function (options) {
   this.clearSelectedFeatures();
   doubleClickZoom.disable(this);
 
-  const [snapList, vertices] = createSnapList(this.map, this._ctx.api, line);
+  const [snapList, vertices] = createSnapList(
+    this.map,
+    this._ctx.api,
+    line,
+    this._ctx.options.snapOptions?.snapGetFeatures
+  );
 
   const state = {
     map: this.map,
@@ -58,21 +58,26 @@ SnapLineMode.onSetup = function (options) {
   state.options = this._ctx.options;
 
   const moveendCallback = () => {
-    const [snapList, vertices] = createSnapList(this.map, this._ctx.api, line);
+    const [snapList, vertices] = createSnapList(
+      this.map,
+      this._ctx.api,
+      line,
+      this._ctx.options.snapOptions?.snapGetFeatures
+    );
     state.vertices = vertices;
     state.snapList = snapList;
   };
   // for removing listener later on close
   state["moveendCallback"] = moveendCallback;
 
-  const optionsChangedCallBAck = (options) => {
+  const optionsChangedCallback = (options) => {
     state.options = options;
   };
   // for removing listener later on close
-  state["optionsChangedCallBAck"] = optionsChangedCallBAck;
+  state["optionsChangedCallback"] = optionsChangedCallback;
 
   this.map.on("moveend", moveendCallback);
-  this.map.on("draw.snap.options_changed", optionsChangedCallBAck);
+  this.map.on("draw.snap.options_changed", optionsChangedCallback);
 
   return state;
 };

src/modes/snap_point.js

@@ -1,6 +1,5 @@
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 import {
-  addPointToVertices,
   createSnapList,
   getGuideFeature,
   IDS,
@@ -9,9 +8,8 @@ import {
 } from "./../utils/index.js";
 
 const { doubleClickZoom } = MapboxDraw.lib;
-const DrawPoint = MapboxDraw.modes.draw_point;
 const { geojsonTypes, cursors } = MapboxDraw.constants;
-
+const DrawPoint = MapboxDraw.modes.draw_point;
 const SnapPointMode = { ...DrawPoint };
 
 SnapPointMode.onSetup = function (options) {
@@ -37,7 +35,12 @@ SnapPointMode.onSetup = function (options) {
   this.clearSelectedFeatures();
   doubleClickZoom.disable(this);
 
-  const [snapList, vertices] = createSnapList(this.map, this._ctx.api, point);
+  const [snapList, vertices] = createSnapList(
+    this.map,
+    this._ctx.api,
+    point,
+    this._ctx.options.snapOptions?.snapGetFeatures
+  );
 
   const state = {
     map: this.map,
@@ -52,21 +55,26 @@ SnapPointMode.onSetup = function (options) {
   state.options = this._ctx.options;
 
   const moveendCallback = () => {
-    const [snapList, vertices] = createSnapList(this.map, this._ctx.api, point);
+    const [snapList, vertices] = createSnapList(
+      this.map,
+      this._ctx.api,
+      point,
+      this._ctx.options.snapOptions?.snapGetFeatures
+    );
     state.vertices = vertices;
     state.snapList = snapList;
   };
   // for removing listener later on close
   state["moveendCallback"] = moveendCallback;
 
-  const optionsChangedCallBAck = (options) => {
+  const optionsChangedCallback = (options) => {
     state.options = options;
   };
   // for removing listener later on close
-  state["optionsChangedCallBAck"] = optionsChangedCallBAck;
+  state["optionsChangedCallback"] = optionsChangedCallback;
 
   this.map.on("moveend", moveendCallback);
-  this.map.on("draw.snap.options_changed", optionsChangedCallBAck);
+  this.map.on("draw.snap.options_changed", optionsChangedCallback);
 
   return state;
 };

src/modes/snap_polygon.js

@@ -1,8 +1,4 @@
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
-const { geojsonTypes, modes, cursors } = MapboxDraw.constants;
-const { doubleClickZoom } = MapboxDraw.lib;
-const DrawPolygon = MapboxDraw.modes.draw_polygon;
-
 import {
   addPointToVertices,
   createSnapList,
@@ -13,6 +9,9 @@ import {
 } from "./../utils/index.js";
 import booleanIntersects from "@turf/boolean-intersects";
 
+const { doubleClickZoom } = MapboxDraw.lib;
+const { geojsonTypes, modes, cursors } = MapboxDraw.constants;
+const DrawPolygon = MapboxDraw.modes.draw_polygon;
 const SnapPolygonMode = { ...DrawPolygon };
 
 SnapPolygonMode.onSetup = function (options) {
@@ -38,7 +37,12 @@ SnapPolygonMode.onSetup = function (options) {
   this.clearSelectedFeatures();
   doubleClickZoom.disable(this);
 
-  const [snapList, vertices] = createSnapList(this.map, this._ctx.api, polygon);
+  const [snapList, vertices] = createSnapList(
+    this.map,
+    this._ctx.api,
+    polygon,
+    this._ctx.options.snapOptions?.snapGetFeatures
+  );
 
   const state = {
     map: this.map,
@@ -60,23 +64,24 @@ SnapPolygonMode.onSetup = function (options) {
     const [snapList, vertices] = createSnapList(
       this.map,
       this._ctx.api,
-      polygon
+      polygon,
+      this._ctx.options.snapOptions?.snapGetFeatures
     );
     state.vertices = vertices;
     state.snapList = snapList;
   };
   // for removing listener later on close
   state["moveendCallback"] = moveendCallback;
 
-  const optionsChangedCallBAck = (options) => {
+  const optionsChangedCallback = (options) => {
     state.options = options;
   };
 
   // for removing listener later on close
-  state["optionsChangedCallBAck"] = optionsChangedCallBAck;
+  state["optionsChangedCallback"] = optionsChangedCallback;
 
   this.map.on("moveend", moveendCallback);
-  this.map.on("draw.snap.options_changed", optionsChangedCallBAck);
+  this.map.on("draw.snap.options_changed", optionsChangedCallback);
 
   return state;
 };
@@ -151,7 +156,7 @@ SnapPolygonMode.onStop = function (state) {
 
   // remove moveend callback
   this.map.off("moveend", state.moveendCallback);
-  this.map.off("draw.snap.options_changed", state.optionsChangedCallBAck);
+  this.map.off("draw.snap.options_changed", state.optionsChangedCallback);
 
   var userPolygon = state.polygon;
   if (state.options.overlap) {

src/utils/index.js

@@ -40,9 +40,18 @@ export const addPointToVertices = (
   }
 };
 
-export const createSnapList = (map, draw, currentFeature) => {
-  // Get all drawn features
-  const features = draw.getAll().features;
+export const createSnapList = (map, draw, currentFeature, getFeatures) => {
+  // Get all features
+  let features = [];
+
+  if (typeof getFeatures === "function") {
+    features = getFeatures(map, draw);
+  }
+
+  if (!Array.isArray(features) || features.length === 0) {
+    features = draw.getAll().features;
+  }
+
   const snapList = [];
 
   // Get current bbox as polygon
@@ -321,7 +330,7 @@ function snapToLineOrPolygon(
   // the distance that needs to be undercut to trigger priority
   const priorityDistance = snapVertexPriorityDistance;
 
-  // the latlng we ultemately want to snap to
+  // the latlng we ultimately want to snap to
   let snapLatlng;
 
   // if C is closer to the closestVertexLatLng (A, B or M) than the snapDistance,