update draw line and shape

2026-06-21 06:31:18 +02:00
parent 365a15c32a
commit 064c9b5758
9 changed files with 551 additions and 175 deletions
--- a/www/style.css
+++ b/www/style.css
@@ -4280,21 +4280,16 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {

 .mapEditorObjectsSvg .mapObjFloor {
  fill: rgba(255, 255, 255, 0.82);
-  stroke: #888;
-  stroke-width: 1.5;
+  stroke: none;
  vector-effect: non-scaling-stroke;
 }

 .mapEditorObjectsSvg .mapObjFloor--selected {
  fill: rgba(230, 126, 34, 0.25);
-  stroke: #e67e22;
-  stroke-width: 2.5;
 }

 .mapEditorObjectsSvg .mapObjFloor--draft {
  fill: rgba(52, 152, 219, 0.2);
-  stroke: #3498db;
-  stroke-dasharray: 6 4;
 }

 .mapEditorObjectsSvg .mapObjDraftLine {
@@ -4317,134 +4312,158 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
  vector-effect: non-scaling-stroke;
 }

+/* Zone colours: polygon = fill only, polyline = stroke (same colour). */
 .mapEditorObjectsSvg .mapObjForbidden {
-  fill: rgba(231, 76, 60, 0.28);
-  stroke: #c0392b;
-  stroke-width: 2;
+  --map-obj-color: rgba(231, 76, 60, 0.28);
+  fill: var(--map-obj-color);
+  stroke: var(--map-obj-color);
  vector-effect: non-scaling-stroke;
 }

+.mapEditorObjectsSvg polygon.mapObjForbidden {
+  stroke: none;
+}
+
+.mapEditorObjectsSvg polyline.mapObjForbidden {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .mapEditorObjectsSvg .mapObjForbidden--selected {
-  fill: rgba(231, 76, 60, 0.42);
-  stroke: #e74c3c;
-  stroke-width: 2.5;
+  --map-obj-color: rgba(231, 76, 60, 0.42);
 }

 .mapEditorObjectsSvg .mapObjForbidden--draft {
-  fill: rgba(231, 76, 60, 0.18);
-  stroke: #e74c3c;
+  --map-obj-color: rgba(231, 76, 60, 0.18);
+}
+
+.mapEditorObjectsSvg polyline.mapObjForbidden--draft {
  stroke-dasharray: 6 4;
 }

 .mapEditorObjectsSvg .mapObjPreferred {
-  fill: rgba(92, 184, 92, 0.28);
-  stroke: #27ae60;
-  stroke-width: 2;
+  --map-obj-color: rgba(92, 184, 92, 0.28);
+  fill: var(--map-obj-color);
+  stroke: var(--map-obj-color);
  vector-effect: non-scaling-stroke;
 }

+.mapEditorObjectsSvg polygon.mapObjPreferred {
+  stroke: none;
+}
+
+.mapEditorObjectsSvg polyline.mapObjPreferred {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .mapEditorObjectsSvg .mapObjPreferred--selected {
-  fill: rgba(92, 184, 92, 0.42);
-  stroke: #2ecc71;
-  stroke-width: 2.5;
+  --map-obj-color: rgba(92, 184, 92, 0.42);
 }

 .mapEditorObjectsSvg .mapObjPreferred--draft {
-  fill: rgba(92, 184, 92, 0.18);
-  stroke: #2ecc71;
+  --map-obj-color: rgba(92, 184, 92, 0.18);
+}
+
+.mapEditorObjectsSvg polyline.mapObjPreferred--draft {
  stroke-dasharray: 6 4;
 }

 .mapEditorObjectsSvg .mapObjUnpreferred {
-  fill: rgba(155, 89, 182, 0.24);
-  stroke: #8e44ad;
-  stroke-width: 2;
+  --map-obj-color: rgba(155, 89, 182, 0.24);
+  fill: var(--map-obj-color);
+  stroke: var(--map-obj-color);
  vector-effect: non-scaling-stroke;
 }

+.mapEditorObjectsSvg polygon.mapObjUnpreferred {
+  stroke: none;
+}
+
+.mapEditorObjectsSvg polyline.mapObjUnpreferred {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .mapEditorObjectsSvg .mapObjUnpreferred--selected {
-  fill: rgba(155, 89, 182, 0.38);
-  stroke: #9b59b6;
-  stroke-width: 2.5;
+  --map-obj-color: rgba(155, 89, 182, 0.38);
 }

 .mapEditorObjectsSvg .mapObjUnpreferred--draft {
-  fill: rgba(155, 89, 182, 0.16);
-  stroke: #9b59b6;
+  --map-obj-color: rgba(155, 89, 182, 0.16);
+}
+
+.mapEditorObjectsSvg polyline.mapObjUnpreferred--draft {
  stroke-dasharray: 6 4;
 }

 .mapEditorObjectsSvg .mapObjSpeed {
-  fill: rgba(243, 156, 18, 0.28);
-  stroke: #e67e22;
-  stroke-width: 2;
+  --map-obj-color: rgba(243, 156, 18, 0.28);
+  fill: var(--map-obj-color);
+  stroke: var(--map-obj-color);
  vector-effect: non-scaling-stroke;
 }

+.mapEditorObjectsSvg polygon.mapObjSpeed {
+  stroke: none;
+}
+
 .mapEditorObjectsSvg .mapObjSpeed--selected {
-  fill: rgba(243, 156, 18, 0.42);
-  stroke: #f39c12;
-  stroke-width: 2.5;
+  --map-obj-color: rgba(243, 156, 18, 0.42);
 }

 .mapEditorObjectsSvg .mapObjSpeed--draft {
-  fill: rgba(243, 156, 18, 0.18);
-  stroke: #f39c12;
-  stroke-dasharray: 6 4;
+  --map-obj-color: rgba(243, 156, 18, 0.18);
 }

 .mapEditorObjectsSvg .mapObjSound {
-  fill: rgba(52, 152, 219, 0.24);
-  stroke: #2980b9;
-  stroke-width: 2;
+  --map-obj-color: rgba(52, 152, 219, 0.24);
+  fill: var(--map-obj-color);
+  stroke: var(--map-obj-color);
  vector-effect: non-scaling-stroke;
 }

+.mapEditorObjectsSvg polygon.mapObjSound {
+  stroke: none;
+}
+
 .mapEditorObjectsSvg .mapObjSound--selected {
-  fill: rgba(52, 152, 219, 0.38);
-  stroke: #3498db;
-  stroke-width: 2.5;
+  --map-obj-color: rgba(52, 152, 219, 0.38);
 }

 .mapEditorObjectsSvg .mapObjSound--draft {
-  fill: rgba(52, 152, 219, 0.16);
-  stroke: #3498db;
-  stroke-dasharray: 6 4;
+  --map-obj-color: rgba(52, 152, 219, 0.16);
 }

 .mapEditorObjectsSvg .mapObjDirectional {
-  fill: rgba(26, 188, 156, 0.22);
-  stroke: #16a085;
-  stroke-width: 2;
+  --map-obj-color: rgba(26, 188, 156, 0.22);
+  fill: var(--map-obj-color);
+  stroke: var(--map-obj-color);
  vector-effect: non-scaling-stroke;
 }

+.mapEditorObjectsSvg polygon.mapObjDirectional {
+  stroke: none;
+}
+
+.mapEditorObjectsSvg polyline.mapObjDirectional {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .mapEditorObjectsSvg .mapObjDirectional--selected {
-  fill: rgba(26, 188, 156, 0.36);
-  stroke: #1abc9c;
-  stroke-width: 2.5;
+  --map-obj-color: rgba(26, 188, 156, 0.36);
 }

 .mapEditorObjectsSvg .mapObjDirectional--draft {
-  fill: rgba(26, 188, 156, 0.14);
-  stroke: #1abc9c;
-  stroke-dasharray: 6 4;
+  --map-obj-color: rgba(26, 188, 156, 0.14);
 }

-.mapEditorObjectsSvg .mapObjDirectionalLine {
-  fill: none;
-  stroke: #16a085;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  vector-effect: non-scaling-stroke;
-}
-
-.mapEditorObjectsSvg .mapObjDirectionalLine--selected {
-  stroke: #1abc9c;
-}
-
-.mapEditorObjectsSvg .mapObjDirectionalLine--draft {
-  stroke: #48c9b0;
+.mapEditorObjectsSvg polyline.mapObjDirectional--draft {
  stroke-dasharray: 6 4;
 }

@@ -4473,42 +4492,51 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
 }

 .mapEditorObjectsSvg .mapObjPlannerSettings {
-  fill: rgba(127, 140, 141, 0.22);
-  stroke: #7f8c8d;
-  stroke-width: 2;
-  stroke-dasharray: 5 3;
+  --map-obj-color: rgba(127, 140, 141, 0.22);
+  fill: var(--map-obj-color);
+  stroke: var(--map-obj-color);
  vector-effect: non-scaling-stroke;
 }

+.mapEditorObjectsSvg polygon.mapObjPlannerSettings {
+  stroke: none;
+}
+
+.mapEditorObjectsSvg polyline.mapObjPlannerSettings {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 .mapEditorObjectsSvg .mapObjPlannerSettings--selected {
-  fill: rgba(127, 140, 141, 0.34);
-  stroke: #95a5a6;
-  stroke-width: 2.5;
+  --map-obj-color: rgba(127, 140, 141, 0.34);
 }

 .mapEditorObjectsSvg .mapObjPlannerSettings--draft {
-  fill: rgba(127, 140, 141, 0.14);
-  stroke: #95a5a6;
+  --map-obj-color: rgba(127, 140, 141, 0.14);
+}
+
+.mapEditorObjectsSvg polyline.mapObjPlannerSettings--draft {
  stroke-dasharray: 6 4;
 }

 .mapEditorObjectsSvg .mapObjIo {
-  fill: rgba(86, 101, 115, 0.24);
-  stroke: #566573;
-  stroke-width: 2;
+  --map-obj-color: rgba(86, 101, 115, 0.24);
+  fill: var(--map-obj-color);
+  stroke: var(--map-obj-color);
  vector-effect: non-scaling-stroke;
 }

+.mapEditorObjectsSvg polygon.mapObjIo {
+  stroke: none;
+}
+
 .mapEditorObjectsSvg .mapObjIo--selected {
-  fill: rgba(86, 101, 115, 0.38);
-  stroke: #5d6d7e;
-  stroke-width: 2.5;
+  --map-obj-color: rgba(86, 101, 115, 0.38);
 }

 .mapEditorObjectsSvg .mapObjIo--draft {
-  fill: rgba(86, 101, 115, 0.16);
-  stroke: #5d6d7e;
-  stroke-dasharray: 6 4;
+  --map-obj-color: rgba(86, 101, 115, 0.16);
 }

 .mapEditorObjectsSvg .mapObjVertex--handle {