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:
@@ -16,15 +16,6 @@ tags: "draw, edit, modify, vector, snap"
|
||||
<input type="radio" name="interaction" value="draw" id="draw" checked>
|
||||
Draw
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="interaction" value="modify">
|
||||
Modify
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="draw-type">Draw type </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
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user