From 3b637a793903d7ca721f2b63639e59422fdc2a7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sun, 6 Mar 2022 17:28:36 +0100
Subject: [PATCH] Improve input form on snap example

Put the geometry type select input next to the 'draw' radio and select this
whenever the geometry type is changed.
---
 examples/snap.html | 15 ++++++---------
 examples/snap.js   | 28 ++++++++++++++--------------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/examples/snap.html b/examples/snap.html
index 3827370d60..ecd7551103 100644
--- a/examples/snap.html
+++ b/examples/snap.html
@@ -16,15 +16,6 @@ tags: "draw, edit, modify, vector, snap"
       <input type="radio" name="interaction" value="draw" id="draw" checked>
       Draw &nbsp;
     </label>
-  </div>
-  <div class="radio">
-    <label>
-      <input type="radio" name="interaction" value="modify">
-      Modify &nbsp;
-    </label>
-  </div>
-  <div class="form-group">
-    <label for="draw-type">Draw type &nbsp;</label>
     <select name="draw-type" id="draw-type">
       <option value="Point">Point</option>
       <option value="LineString">LineString</option>
@@ -32,4 +23,10 @@ tags: "draw, edit, modify, vector, snap"
       <option value="Circle">Circle</option>
     </select>
   </div>
+  <div class="radio">
+    <label>
+      <input type="radio" name="interaction" value="modify">
+      Modify &nbsp;
+    </label>
+  </div>
 </form>
diff --git a/examples/snap.js b/examples/snap.js
index 80cf489d11..c9f7c53ea5 100644
--- a/examples/snap.js
+++ b/examples/snap.js
@@ -94,18 +94,16 @@ const ExampleDraw = {
     source: vector.getSource(),
     type: 'Circle',
   }),
-  getActive: function () {
-    return this.activeType ? this[this.activeType].getActive() : false;
-  },
+  activeDraw: null,
   setActive: function (active) {
-    const type = optionsForm.elements['draw-type'].value;
+    if (this.activeDraw) {
+      this.activeDraw.setActive(false);
+      this.activeDraw = null;
+    }
     if (active) {
-      this.activeType && this[this.activeType].setActive(false);
-      this[type].setActive(true);
-      this.activeType = type;
-    } else {
-      this.activeType && this[this.activeType].setActive(false);
-      this.activeType = null;
+      const type = optionsForm.elements['draw-type'].value;
+      this.activeDraw = this[type];
+      this.activeDraw.setActive(true);
     }
   },
 };
@@ -117,14 +115,16 @@ ExampleDraw.init();
  */
 optionsForm.onchange = function (e) {
   const type = e.target.getAttribute('name');
-  const value = e.target.value;
   if (type == 'draw-type') {
-    ExampleDraw.getActive() && ExampleDraw.setActive(true);
+    ExampleModify.setActive(false);
+    ExampleDraw.setActive(true);
+    optionsForm.elements['interaction'].value = 'draw';
   } else if (type == 'interaction') {
-    if (value == 'modify') {
+    const interactionType = e.target.value;
+    if (interactionType == 'modify') {
       ExampleDraw.setActive(false);
       ExampleModify.setActive(true);
-    } else if (value == 'draw') {
+    } else if (interactionType == 'draw') {
       ExampleDraw.setActive(true);
       ExampleModify.setActive(false);
     }