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.
This commit is contained in:
Maximilian Krög
2022-03-06 17:28:36 +01:00
parent bcebd73388
commit 3b637a7939
2 changed files with 20 additions and 23 deletions

View File

@@ -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>

View File

@@ -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);
}