option to further customize panes #1272

TurtIeSocks · 2022-12-18T17:12:02Z

Adds circlePane, polylinePane, and polygonPane to globalOptions.panes
Maintains backwards compatibility with defaults all falling back to overlayPane

- Adds `circlePane`, `polylinePane`, and `polygonPane` to `globalOptions.panes` - Maintains backwards compatibility with defaults all falling back to `overlayPane`

Falke-Design

Thank you for adding this, can you please add a option for every shape. CircleMarker, Text, Rectangle

Falke-Design · 2023-02-19T14:19:27Z

src/js/L.PM.Map.js

+    if (o.panes && o.panes.layerPane && !o.panes.circleMarkerPane) {
+      options.panes.polygonPane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.rectanglePane) {
+      options.panes.polylinePane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.textPane) {
+      options.panes.circlePane = o.panes.markerPane;
+    }


Suggested change

if (o.panes && o.panes.layerPane && !o.panes.circleMarkerPane) {

options.panes.polygonPane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.rectanglePane) {

options.panes.polylinePane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.textPane) {

options.panes.circlePane = o.panes.markerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.circleMarkerPane) {

options.panes.circleMarkerPane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.rectanglePane) {

options.panes.rectanglePane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.textPane) {

options.panes.textPane = o.panes.markerPane;

}

Falke-Design · 2023-02-19T14:23:46Z

src/js/L.PM.Map.js

+    if (o.panes && o.panes.layerPane && !o.panes.polygonPane) {
+      options.panes.polygonPane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.polylinePane) {
+      options.panes.polylinePane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.circlePane) {
+      options.panes.circlePane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.circleMarkerPane) {
+      options.panes.polygonPane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.rectanglePane) {
+      options.panes.polylinePane = o.panes.layerPane;
+    }
+    if (o.panes && o.panes.layerPane && !o.panes.textPane) {
+      options.panes.circlePane = o.panes.markerPane;
+    }


Suggested change

if (o.panes && o.panes.layerPane && !o.panes.polygonPane) {

options.panes.polygonPane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.polylinePane) {

options.panes.polylinePane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.circlePane) {

options.panes.circlePane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.circleMarkerPane) {

options.panes.polygonPane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.rectanglePane) {

options.panes.polylinePane = o.panes.layerPane;

}

if (o.panes && o.panes.layerPane && !o.panes.textPane) {

options.panes.circlePane = o.panes.markerPane;

}

if (o.panes) {

if(o.panes.layerPane){

if(!o.panes.polygonPane) {

options.panes.polygonPane = o.panes.layerPane;

}

if (!o.panes.polylinePane) {

options.panes.polylinePane = o.panes.layerPane;

}

if (!o.panes.circlePane) {

options.panes.circlePane = o.panes.layerPane;

}

if (!o.panes.circleMarkerPane) {

options.panes.circleMarkerPane = o.panes.layerPane;

}

if (!o.panes.rectanglePane) {

options.panes.rectanglePane= o.panes.layerPane;

}

}

if (o.panes.markerPane && !o.panes.textPane) {

options.panes.textPane = o.panes.markerPane;

}

}

Falke-Design · 2023-02-19T14:27:43Z

README.md

+| :------------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| snappingOrder | `Array`  | Prioritize the order of snapping. Default: `['Marker','CircleMarker','Circle','Line','Polygon','Rectangle']`.                                                                                                          |
+| layerGroup    | `map`    | add the created layers to a layergroup instead to the map.                                                                                                                                                             |
+| panes         | `Object` | Defines in which [panes](https://leafletjs.com/reference.html#map-pane) the layers and helper vertices are created. Default: `{ vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane', circlePane: 'overlayPane', polylinePane: 'overlayPane', polygonPane: 'overlayPane', circleMarkerPane: 'overlayPane', rectanglePane: 'overlayPane', textPane: 'markerPane' }`. |


Let us remove layerPane from the docs because it is now deprecated, but keep the logic in L.PM.Edit with a deprecated comment

Falke-Design · 2023-02-19T14:28:07Z

leaflet-geoman.d.ts

+      /** Defines in which panes the layers and helper vertices are created. Default: { vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane', circlePane: 'overlayPane', polygonPane: 'overlayPane', polylinePane: 'overlayPane' } */
+      panes?: { vertexPane?: PANE; layerPane?: PANE; markerPane?: PANE, circlePane?: PANE, polygonPane?: PANE, polylinePane?: PANE, circleMarkerPane?: PANE, rectanglePane?: PANE, textPane?: PANE };


Remove layerPane

Falke-Design · 2023-02-19T14:32:40Z

src/js/Draw/L.PM.Draw.js

+    } else if (type === 'polygonPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.polygonPane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'circlePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.circlePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'circleMarkerPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.circleMarkerPane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'polylinePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.polylinePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'rectanglePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.rectanglePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'textPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.textPane ||
+            this._map.pm.globalOptions.panes.markerPane)) ||
+        'markerPane';


Let us simplify this a little bit:

Suggested change

} else if (type === 'polygonPane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.polygonPane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'circlePane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.circlePane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'circleMarkerPane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.circleMarkerPane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'polylinePane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.polylinePane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'rectanglePane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.rectanglePane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'textPane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.textPane ||

this._map.pm.globalOptions.panes.markerPane)) ||

'markerPane';

_setPane(layer, type) {

const panes = this._map.pm.globalOptions.panes || {};

if (type === 'layerPane') {

layer.options.pane = panes.layerPane || 'overlayPane';

} else if (type === 'vertexPane') {

layer.options.pane = panes.vertexPane || 'markerPane';

} else if (type === 'markerPane') {

layer.options.pane = panes.markerPane || 'markerPane';

}

},

Falke-Design · 2023-02-19T14:33:20Z

src/js/Edit/L.PM.Edit.js

+    } else if (type === 'polygonPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.polygonPane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'circlePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.circlePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'circleMarkerPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.circleMarkerPane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'polylinePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.polylinePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'rectanglePane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.rectanglePane ||
+            this._map.pm.globalOptions.panes.layerPane)) ||
+        'overlayPane';
+    } else if (type === 'textPane') {
+      layer.options.pane =
+        (this._map.pm.globalOptions.panes &&
+          (this._map.pm.globalOptions.panes.textPane ||
+            this._map.pm.globalOptions.panes.markerPane)) ||
+        'markerPane';


Suggested change

} else if (type === 'polygonPane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.polygonPane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'circlePane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.circlePane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'circleMarkerPane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.circleMarkerPane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'polylinePane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.polylinePane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'rectanglePane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.rectanglePane ||

this._map.pm.globalOptions.panes.layerPane)) ||

'overlayPane';

} else if (type === 'textPane') {

layer.options.pane =

(this._map.pm.globalOptions.panes &&

(this._map.pm.globalOptions.panes.textPane ||

this._map.pm.globalOptions.panes.markerPane)) ||

'markerPane';

_setPane(layer, type) {

const panes = this._map.pm.globalOptions.panes || {};

if (type === 'layerPane') {

layer.options.pane = panes.layerPane || 'overlayPane';

} else if (type === 'vertexPane') {

layer.options.pane = panes.vertexPane || 'markerPane';

} else if (type === 'markerPane') {

layer.options.pane = panes.markerPane || 'markerPane';

}

},

TurtIeSocks added 2 commits December 18, 2022 12:11

option to further customize panes

9a5dd1b

- Adds `circlePane`, `polylinePane`, and `polygonPane` to `globalOptions.panes` - Maintains backwards compatibility with defaults all falling back to `overlayPane`

backwards compatibility fix

d1ccb98

Falke-Design requested changes Dec 30, 2022

View reviewed changes

TurtIeSocks added 2 commits January 18, 2023 19:07

add circleMarker, rectangle, and text panes

88c5dab

Merge remote-tracking branch 'upstream/develop' into split-panes

fbe3d67

TurtIeSocks requested a review from Falke-Design January 19, 2023 03:13

Merge branch 'develop' into split-panes

0abf2a3

Falke-Design requested changes Feb 19, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

option to further customize panes #1272

option to further customize panes #1272

TurtIeSocks commented Dec 18, 2022

Falke-Design left a comment •

edited

Falke-Design Feb 19, 2023

Falke-Design Feb 19, 2023

Falke-Design Feb 19, 2023

Falke-Design Feb 19, 2023

Falke-Design Feb 19, 2023

Falke-Design Feb 19, 2023

		/** Defines in which panes the layers and helper vertices are created. Default: { vertexPane: 'markerPane', layerPane: 'overlayPane', markerPane: 'markerPane', circlePane: 'overlayPane', polygonPane: 'overlayPane', polylinePane: 'overlayPane' } */
		panes?: { vertexPane?: PANE; layerPane?: PANE; markerPane?: PANE, circlePane?: PANE, polygonPane?: PANE, polylinePane?: PANE, circleMarkerPane?: PANE, rectanglePane?: PANE, textPane?: PANE };

option to further customize panes #1272

Are you sure you want to change the base?

option to further customize panes #1272

Conversation

TurtIeSocks commented Dec 18, 2022

Falke-Design left a comment • edited

Choose a reason for hiding this comment

Falke-Design Feb 19, 2023

Choose a reason for hiding this comment

Falke-Design Feb 19, 2023

Choose a reason for hiding this comment

Falke-Design Feb 19, 2023

Choose a reason for hiding this comment

Falke-Design Feb 19, 2023

Choose a reason for hiding this comment

Falke-Design Feb 19, 2023

Choose a reason for hiding this comment

Falke-Design Feb 19, 2023

Choose a reason for hiding this comment

Falke-Design left a comment •

edited