Remove Static mode from the constants and use Expressions syntax in t…

…heme.js (#1078) * Remove references to `static` mode * Midpoints and Vertexes should extend Feature() * Update theme to make use of the `mode` * Fix unit tests --------- Co-authored-by: Stepan Kuzmin <[email protected]>
mapbox · Jun 28, 2024 · caa5811 · caa5811
1 parent 1c59954
commit caa5811
Show file tree

Hide file tree

Showing 7 changed files with 595 additions and 251 deletions.
diff --git a/debug/index.html b/debug/index.html
@@ -9,7 +9,6 @@
     body { margin:0; padding:0; }
     html, body, #map { height: 100%; }
     .start-draw {
-      width: 315px;
       position: absolute;
       left :10px;
       bottom: 10px;
@@ -34,8 +33,7 @@
 
 <body>
 <div id='map'></div>
-<div class='start-draw' >
-  <div id='start-static'>STATIC</div>
+<div class='start-draw'>
   <div id='start-point'>POINT</div>
   <div id='start-line'>LINE</div>
   <div id='start-polygon'>POLYGON</div>
@@ -66,17 +64,6 @@
 
   mapboxgl.accessToken = getAccessToken();
 
-  const StaticMode = {};
-
-  StaticMode.onSetup = function () {
-    this.setActionableState(); // default actionable state is false for all actions
-    return {};
-  };
-
-  StaticMode.toDisplayFeatures = function (state, geojson, display) {
-    display(geojson);
-  };
-
   const map = new mapboxgl.Map({
     container: 'map',
     zoom: 1,
@@ -91,7 +78,6 @@
   map.addControl(new mapboxgl.NavigationControl(), 'top-left');
 
   const modes = MapboxDraw.modes;
-  modes.static = StaticMode;
   const Draw = window.Draw = new MapboxDraw({ modes });
   let drawIsActive = true;
   map.addControl(Draw, 'bottom-right');
@@ -154,12 +140,6 @@
     startPolygon.onclick = function () {
       Draw.changeMode('draw_polygon');
     };
-
-    // Jump into static mode via a custom UI element
-    const startStatic = document.getElementById('start-static');
-    startStatic.onclick = function () {
-      Draw.changeMode('static');
-    };
   });
 
 </script>

diff --git a/docs/EXAMPLES.md b/docs/EXAMPLES.md
@@ -44,7 +44,7 @@ var draw = new MapboxDraw({
 
 ### lines and polygons
 
-With this style, all line and polygon features are have dashed red outline and transparent fill while being drawn, including the point vertices. When the Draw mode is changed the 'static', these features will be drawn with solid black outline and transparent fill. Point vertices use the same point filter, and render these points twice: once as a larger-radius halo, and again as the vertex inset point.
+With this style, all line and polygon features are have dashed red outline and transparent fill while being drawn, including the point vertices. Point vertices use the same point filter, and render these points twice: once as a larger-radius halo, and again as the vertex inset point.
 
 ```js
 var draw = new MapboxDraw({
@@ -56,7 +56,7 @@ var draw = new MapboxDraw({
     {
         "id": "gl-draw-line",
         "type": "line",
-        "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]],
+        "filter": ["all", ["==", "$type", "LineString"]],
         "layout": {
           "line-cap": "round",
           "line-join": "round"
@@ -71,7 +71,7 @@ var draw = new MapboxDraw({
     {
       "id": "gl-draw-polygon-fill",
       "type": "fill",
-      "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+      "filter": ["all", ["==", "$type", "Polygon"]],
       "paint": {
         "fill-color": "#D20C0C",
         "fill-outline-color": "#D20C0C",
@@ -95,7 +95,7 @@ var draw = new MapboxDraw({
     {
       "id": "gl-draw-polygon-stroke-active",
       "type": "line",
-      "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]],
+      "filter": ["all", ["==", "$type", "Polygon"]],
       "layout": {
         "line-cap": "round",
         "line-join": "round"
@@ -110,7 +110,7 @@ var draw = new MapboxDraw({
     {
       "id": "gl-draw-polygon-and-line-vertex-halo-active",
       "type": "circle",
-      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
+      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"]],
       "paint": {
         "circle-radius": 5,
         "circle-color": "#FFF"
@@ -120,52 +120,11 @@ var draw = new MapboxDraw({
     {
       "id": "gl-draw-polygon-and-line-vertex-active",
       "type": "circle",
-      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]],
+      "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"]],
       "paint": {
         "circle-radius": 3,
         "circle-color": "#D20C0C",
       }
-    },
-
-    // INACTIVE (static, already drawn)
-    // line stroke
-    {
-        "id": "gl-draw-line-static",
-        "type": "line",
-        "filter": ["all", ["==", "$type", "LineString"], ["==", "mode", "static"]],
-        "layout": {
-          "line-cap": "round",
-          "line-join": "round"
-        },
-        "paint": {
-          "line-color": "#000",
-          "line-width": 3
-        }
-    },
-    // polygon fill
-    {
-      "id": "gl-draw-polygon-fill-static",
-      "type": "fill",
-      "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
-      "paint": {
-        "fill-color": "#000",
-        "fill-outline-color": "#000",
-        "fill-opacity": 0.1
-      }
-    },
-    // polygon outline
-    {
-      "id": "gl-draw-polygon-stroke-static",
-      "type": "line",
-      "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]],
-      "layout": {
-        "line-cap": "round",
-        "line-join": "round"
-      },
-      "paint": {
-        "line-color": "#000",
-        "line-width": 3
-      }
     }
   ]
 });

diff --git a/src/constants.js b/src/constants.js
@@ -50,8 +50,7 @@ export const modes = {
   DRAW_POLYGON: 'draw_polygon',
   DRAW_POINT: 'draw_point',
   SIMPLE_SELECT: 'simple_select',
-  DIRECT_SELECT: 'direct_select',
-  STATIC: 'static'
+  DIRECT_SELECT: 'direct_select'
 };
 
 export const events = {

diff --git a/src/lib/create_vertex.js b/src/lib/create_vertex.js
@@ -11,6 +11,7 @@ import * as Constants from '../constants.js';
  * @param {boolean} selected
  * @return {GeoJSON} Point
  */
+
 export default function(parentId, coordinates, path, selected) {
   return {
     type: Constants.geojsonTypes.FEATURE,