improved(editor): use cross layer styling to ensure routing-point is always rendered below display-point

Signed-off-by: Tim Deubler <[email protected]>

Author: TerminalTim

packages/editor/src/features/location/RoutingPoint.js

@@ -156,17 +156,22 @@ function NvtRoutingPoint(location, locTools, lnkTools) {
         if (cLink && !car) {
             const editorType = location.class;
 
+            let zLayer = EDITOR.display.getLayers().indexOf(EDITOR.getLayer(this.getLink()));
+
+            zLayer = zLayer == -1 ? UNDEF : zLayer + 1;
+
             streetLine = EDITOR.objects.overlay.addPath([
                 location.coord().slice(),
                 routingPoint.slice()
             ],
             UNDEF, {
-                type: editorType + '_LINE'
+                type: editorType + '_LINE',
+                zLayer: zLayer
             });
 
-
             car = EDITOR.objects.overlay.addPoint(routingPoint.slice(), {
-                type: editorType + '_ROUTING_POINT'
+                type: editorType + '_ROUTING_POINT',
+                zLayer: zLayer
             });
 
             car.pointerdown = clickCar;

packages/editor/src/styles/OverlayStyles.ts

@@ -46,6 +46,7 @@ const getValue = (val, feature, zoomlevel: number) => {
 
 
 const createHighlightLineStyle = () => [{
+    // zLayer: 2,
     zIndex: 0,
     type: 'Line',
     strokeWidth: 2,
@@ -61,13 +62,15 @@ const createSelectorStyle = () => [{
 }];
 
 const createRoutingPointStyle = () => [{
-    zIndex: 0,
+    zLayer: (feature) => feature.properties.zLayer,
+    zIndex: 999990,
     type: 'Circle',
     radius: 8,
     fill: '#FF0000',
     stroke: '#FF0000'
 }, {
-    zIndex: 1,
+    zLayer: (feature) => feature.properties.zLayer,
+    zIndex: 999991,
     type: 'Circle',
     radius: 5,
     fill: '#FF0000',