Skip to content

Commit

Permalink
Add dynamic adjustements of stepSize based on current scale
Browse files Browse the repository at this point in the history
  • Loading branch information
@sholtkamp
sholtkamp committed Feb 9, 2023
1 parent 8fb6316 commit fd607e5
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 14 deletions.
31 changes: 22 additions & 9 deletions src/main/js/bundles/dn_selectionactions/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,32 @@ Configure the available selection methods in the selection-ui bundle. The ones a
"innerRadius": 50000,
"outerRadius": 100000,
"stepSize": 1000,
"adjustStepSize": false,
"stepSizeRanges": [
{
"scaleRange": [1, 100000],
"stepSize": 1
},
{
"scaleRange": [100000, 100000000],
"stepSize": 100
}
],
"unit": "meters"
}
```

| Property | Type | Possible Values | Default | Description |
|--------------------------------|---------|--------------------------------------------------------|--------------|------------------------------------------------------------------------------------------------------------------------ |
| enableDonut | Boolean | ```true``` | ```false``` | ```true``` | Enable inner and outer radius. If disabled only outer radius will be used. |
| minRadius | Number | | ```0``` | Minimal radius |
| maxRadius | Number | | ```500000``` | Maximum radius |
| innerRadius | Number | | ```50000``` | Initial inner radius |
| outerRadius | Number | | ```100000``` | Initial outer radius |
| stepSize | Number | | ```1000``` | Step size |
| unit | String | ```meters``` | ```kilometers``` | ```feet``` | ```meters``` | Circle radius unit (https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Circle.html#radiusUnit) |
| Property | Type | Possible Values | Default | Description |
|--------------------------------|---------|--------------------------------------------------------|------------------|-------------------------------------------------------------------------------------------------------------------------|
| enableDonut | Boolean | ```true``` | ```false``` | ```true``` | Enable inner and outer radius. If disabled only outer radius will be used. |
| minRadius | Number | | ```0``` | Minimal radius |
| maxRadius | Number | | ```500000``` | Maximum radius |
| innerRadius | Number | | ```50000``` | Initial inner radius |
| outerRadius | Number | | ```100000``` | Initial outer radius |
| stepSize | Number | | ```1000``` | Step size |
| adjustStepSize | Boolean | ```true``` | ```false``` | ```false``` | Enables or disables scale based stepSize adjustments |
| stepSizeRanges | Array | | ```see sample``` | Array containing objects with disjunct scale ranges desired stepSize for these ranges |
| unit | String | ```meters``` | ```kilometers``` | ```feet``` | ```meters``` | Circle radius unit (https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Circle.html#radiusUnit) |

### AreaSelectSpatialInputWidgetModel:
Use _selection-actions-area_ useIn-property to show stores in the area selection widget.
Expand Down
29 changes: 27 additions & 2 deletions src/main/js/bundles/dn_selectionactions/actions/CircleSpatialInputAction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import CircleSpatialInputWidget from "../widgets/CircleSpatialInputWidget.vue";
import Vue from "apprt-vue/Vue";
import VueDijit from "apprt-vue/VueDijit";
import Binding from "apprt-binding/Binding";
import * as reactiveUtils from "esri/core/reactiveUtils";

export default class CircleSpatialInputAction {

Expand All @@ -29,6 +30,7 @@ export default class CircleSpatialInputAction {
#highlighter = undefined;
#serviceRegistration = undefined;
#bundleContext = undefined;
#scaleWatcher = undefined;

activate(componentContext) {
this.#bundleContext = componentContext.getBundleContext();
Expand Down Expand Up @@ -63,6 +65,8 @@ export default class CircleSpatialInputAction {
model.innerRadius = 0;
}

const view = this._mapWidgetModel.get("view");

const vm = new Vue(CircleSpatialInputWidget);
vm.i18n = this.i18n;
vm.enableDonut = model.enableDonut;
Expand All @@ -71,10 +75,28 @@ export default class CircleSpatialInputAction {
vm.innerRadius = model.innerRadius;
vm.outerRadius = model.outerRadius;
vm.stepSize = model.stepSize;
vm.adjustStepSize = model.adjustStepSize;
vm.unit = model.unit;

vm.$on("adjustStepSize-changed", adjustStepSize => {
if (adjustStepSize) {
this.#scaleWatcher = reactiveUtils.watch(
() => [view.scale], ([scale]) => {
const adjustedStepSize = this._adjustStepSize(scale, model);
vm.stepSize = adjustedStepSize.stepSize;
}, {
initial: true
}
);
} else {
this.#scaleWatcher.remove();
this.#scaleWatcher = undefined;
vm.stepSize = model.stepSize;
}
});

this.#binding = Binding.for(vm, model)
.syncAllToRight("innerRadius", "outerRadius")
.syncAllToRight("innerRadius", "outerRadius", "adjustStepSize")
.enable();

const widget = new VueDijit(vm);
Expand All @@ -86,7 +108,6 @@ export default class CircleSpatialInputAction {
this.#serviceRegistration = this.#bundleContext.registerService(interfaces, widget, serviceProperties);
}

const view = this._mapWidgetModel.get("view");
const clickHandle = view.on("click", (evt) => {
this.removeGraphicFromView();
clickHandle.remove();
Expand Down Expand Up @@ -173,4 +194,8 @@ export default class CircleSpatialInputAction {
removeGraphicFromView() {
this.#highlighter.clear();
}

_adjustStepSize(scale, model) {
return model.stepSizeRanges.find(range => range.scaleRange[0] <= scale && range.scaleRange[1] >= scale)
}
}
11 changes: 11 additions & 0 deletions src/main/js/bundles/dn_selectionactions/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,17 @@
"innerRadius": 0,
"outerRadius": 100000,
"stepSize": 1000,
"adjustStepSize": true,
"stepSizeRanges": [
{
"scaleRange": [1, 100000],
"stepSize": 1
},
{
"scaleRange": [100000, 100000000],
"stepSize": 100
}
],
"unit": "meters"
}
},
Expand Down
3 changes: 2 additions & 1 deletion src/main/js/bundles/dn_selectionactions/nls/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ module.exports = {
widgetTitle: "Configure circle selection",
innerRadius: "Inner Radius",
outerRadius: "Outer Radius",
radius: "Radius"
radius: "Radius",
adjustStepSize: "Adjust Step Size to Scale"
},
search: {
title: "Searchresult",
Expand Down
3 changes: 2 additions & 1 deletion src/main/js/bundles/dn_selectionactions/nls/de/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ module.exports = {
widgetTitle: "Kreisselektion konfigurieren",
innerRadius: "Innerer Radius",
outerRadius: "Äußerer Radius",
radius: "Radius"
radius: "Radius",
adjustStepSize: "Schrittweite an Maßstab anpassen"
},
search: {
title: "Suchergebnis",
Expand Down
12 changes: 12 additions & 0 deletions src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,14 @@
hide-details
/>
</v-flex>
<v-flex md12>
<v-switch
v-model="adjustStepSize"
:label="i18n.adjustStepSize"
color="primary"
@change="$emit('adjustStepSize-changed', adjustStepSize)"
/>
</v-flex>
</v-layout>
</v-container>
</template>
Expand Down Expand Up @@ -121,6 +129,10 @@
type: Boolean,
default: true
},
adjustStepSize: {
type: Boolean,
default: false
},
i18n: {
type: Object,
default: () => {
Expand Down
3 changes: 2 additions & 1 deletion src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidgetModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export default declare({
maxRadius: 0,
innerRadius: 0,
outerRadius: 0,
stepSize: 1
stepSize: 1,
adjustStepSize: false

});

0 comments on commit fd607e5

Please sign in to comment.