Merge branch 'GEOLYTIX:main' into main

cityremade · May 8, 2024 · 0dd69c8 · 0dd69c8
2 parents 53d79f8 + 8b68b79
commit 0dd69c8
Showing 1 changed file with 62 additions and 62 deletions.
diff --git a/lib/ui/elements/drawing.mjs b/lib/ui/elements/drawing.mjs
@@ -28,8 +28,8 @@ mapp.utils.merge(mapp.dictionaries, {
     draw_polygon: 'Polygon',
     draw_rectangle: 'Rechteck',
     circle_config: 'Zirkel Einstellung',
-    draw_circle: '2 Punkt Zirkel',
-    draw_circle_2pt: 'Zirkel',
+    draw_circle: 'Zirkel',
+    draw_circle_2pt: '2 Punkt Zirkel',
     radius: 'Radius',
     units: 'Masseinheit',
     draw_line: 'Linie',
@@ -375,62 +375,61 @@ function rectangle(layer) {
 function circle_2pt(layer) {
 
   // Set the default values
-  layer.draw.circle_2pt = Object.assign({
+  layer.draw.circle_2pt = {
     layer,
     type: 'Circle',
     geometryFunction: ol.interaction.Draw.createRegularPolygon(33),
-  }, typeof layer.draw.circle_2pt === 'object' && layer.draw.circle_2pt || {})
-
-  // If a label is provided, use it, otherwise use the default
-  let label = layer.draw.circle_2pt?.label || mapp.dictionary.draw_circle_2pt
+    label: mapp.dictionary.draw_circle_2pt,
+    ...layer.draw.circle_2pt
+  }
 
   // Create the button
   layer.draw.circle_2pt.btn = mapp.utils.html.node`
     <button
       class="flat wide bold primary-colour"
-      onclick=${e => {
+      onclick=${drawCircle_2pt}>${layer.draw.circle_2pt.label}`
 
-      const btn = e.target
+  function drawCircle_2pt(e) {
 
-      if (btn.classList.contains('active')) {
+    const btn = e.target
 
-        // Cancel draw interaction.
-        btn.classList.remove('active')
-        layer.mapview.interactions.highlight()
-        return;
-      }
+    if (btn.classList.contains('active')) {
 
-      btn.classList.add('active')
+      // Cancel draw interaction.
+      btn.classList.remove('active')
+      layer.mapview.interactions.highlight()
+      return;
+    }
 
-      !layer.display && layer.show()
+    btn.classList.add('active')
 
-      layer.draw.circle_2pt.callback = feature => {
+    !layer.display && layer.show()
 
-        layer.draw.callback(feature, layer.draw.circle_2pt)
+    layer.draw.circle_2pt.callback = feature => {
 
-        btn.classList.remove('active')
+      layer.draw.callback(feature, layer.draw.circle_2pt)
 
-        delete layer.mapview.interaction
+      btn.classList.remove('active')
 
-        // Set highlight interaction if no other interaction is current after 400ms.
-        setTimeout(() => {
-          !layer.mapview.interaction && layer.mapview.interactions.highlight()
-        }, 400)
+      delete layer.mapview.interaction
 
-      }
+      // Set highlight interaction if no other interaction is current after 400ms.
+      setTimeout(() => {
+        !layer.mapview.interaction && layer.mapview.interactions.highlight()
+      }, 400)
 
-      layer.mapview.interactions.draw(layer.draw.circle_2pt)
+    }
 
-    }}>
-      ${label}`
+    layer.mapview.interactions.draw(layer.draw.circle_2pt)
+  }
 
   return layer.draw.circle_2pt.btn
 }
 
 function circle(layer) {
 
   // Set the default values
-  layer.draw.circle = Object.assign({
+  layer.draw.circle = {
     layer,
     type: 'Point',
     units: 'meter',
@@ -455,13 +454,11 @@ function circle(layer) {
       );
 
       return polygonCircular.transform('EPSG:4326', 'EPSG:3857')
-    }
-  }, typeof layer.draw.circle === 'object' && layer.draw.circle || {})
-
-  // if label is provided, use it, otherwise use the default
-  let label = layer.draw.circle?.label || mapp.dictionary.draw_circle;
+    },
+    label: mapp.dictionary.draw_circle,
+    ...layer.draw.circle
+  }
 
-  // Create the button
   const unitsDropDown = mapp.utils.html.node`
     <div style="display: grid; grid-template-columns: 100px 1fr; align-items: center;">
       <div style="grid-column: 1;">${mapp.dictionary.units}</div>
@@ -513,52 +510,55 @@ function circle(layer) {
   layer.draw.circle.btn = mapp.utils.html.node`
   <button
     class="flat wide bold primary-colour"
-    onclick=${e => {
+    onclick=${drawCircle}>${layer.draw.circle.label}`
 
-      const btn = e.target
+  function drawCircle(e) {
 
-      if (btn.classList.contains('active')) {
+    const btn = e.target
 
-        // Cancel draw interaction.
-        btn.classList.remove('active')
-        layer.mapview.interactions.highlight()
-        return;
-      }
+    if (btn.classList.contains('active')) {
 
-      // Expand the config drawer.
-      btn.previousElementSibling.classList.add('expanded')
+      // Cancel draw interaction.
+      btn.classList.remove('active')
+      layer.mapview.interactions.highlight()
+      return;
+    }
 
-      btn.classList.add('active')
+    // Expand the config drawer.
+    btn.previousElementSibling.classList.add('expanded')
 
-      !layer.display && layer.show()
+    btn.classList.add('active')
 
-      layer.draw.circle.callback = feature => {
+    !layer.display && layer.show()
 
-        layer.draw.callback(feature, layer.draw.circle)
+    layer.draw.circle.callback = feature => {
 
-        btn.classList.remove('active')
+      layer.draw.callback(feature, layer.draw.circle)
 
-        delete layer.mapview.interaction
+      btn.classList.remove('active')
 
-        // Set highlight interaction if no other interaction is current after 400ms.
-        setTimeout(() => {
-          !layer.mapview.interaction && layer.mapview.interactions.highlight()
-        }, 400)
+      delete layer.mapview.interaction
 
-      }
+      // Set highlight interaction if no other interaction is current after 400ms.
+      setTimeout(() => {
+        !layer.mapview.interaction && layer.mapview.interactions.highlight()
+      }, 400)
+    }
 
-      layer.mapview.interactions.draw(layer.draw.circle)
+    layer.mapview.interactions.draw(layer.draw.circle)
+  } 
 
-    }}>${label}`
+  // The config elements are not shown.
+  if (layer.draw.circle.hidePanel) return layer.draw.circle.btn
 
   // Return the config element in a drawer with the interaction toggle button as sibling.
   return mapp.utils.html.node`<div>
     ${mapp.ui.elements.drawer({
-    header: mapp.utils.html`
+      header: mapp.utils.html`
         <h3>${mapp.dictionary.circle_config}</h3>
         <div class="mask-icon expander"></div>`,
-    content: layer.draw.circle.panel
-  })}
+      content: layer.draw.circle.panel
+    })}
     ${layer.draw.circle.btn}`
 }