diff --git a/src/main/js/bundles/dn_selectionactions/README.md b/src/main/js/bundles/dn_selectionactions/README.md index f013d87..b3f9e11 100644 --- a/src/main/js/bundles/dn_selectionactions/README.md +++ b/src/main/js/bundles/dn_selectionactions/README.md @@ -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. diff --git a/src/main/js/bundles/dn_selectionactions/actions/CircleSpatialInputAction.js b/src/main/js/bundles/dn_selectionactions/actions/CircleSpatialInputAction.js index a0380a0..0dc7f3d 100644 --- a/src/main/js/bundles/dn_selectionactions/actions/CircleSpatialInputAction.js +++ b/src/main/js/bundles/dn_selectionactions/actions/CircleSpatialInputAction.js @@ -20,6 +20,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 { @@ -28,6 +29,7 @@ export default class CircleSpatialInputAction { #highlighter = undefined; #serviceRegistration = undefined; #bundleContext = undefined; + #scaleWatcher = undefined; activate(componentContext) { this.#bundleContext = componentContext.getBundleContext(); @@ -62,6 +64,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; @@ -70,10 +74,26 @@ 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 = this._getScaleWatcher(view, model, vm); + } else { + this.#scaleWatcher.remove(); + this.#scaleWatcher = undefined; + vm.stepSize = model.stepSize; + } + }); + + // handle inital activation adjustStepSize via config + if (model.adjustStepSize) { + this.#scaleWatcher = this._getScaleWatcher(view, model, vm); + } + this.#binding = Binding.for(vm, model) - .syncAllToRight("innerRadius", "outerRadius") + .syncAllToRight("innerRadius", "outerRadius", "adjustStepSize") .enable(); const widget = new VueDijit(vm); @@ -85,7 +105,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(); @@ -172,4 +191,19 @@ export default class CircleSpatialInputAction { removeGraphicFromView() { this.#highlighter.clear(); } + + _getScaleWatcher(view, model, vm) { + return reactiveUtils.watch( + () => [view.scale], ([scale]) => { + const adjustedStepSize = this._adjustStepSize(scale, model); + vm.stepSize = adjustedStepSize.stepSize; + }, { + initial: true + } + ); + } + + _adjustStepSize(scale, model) { + return model.stepSizeRanges.find(range => range.scaleRange[0] <= scale && range.scaleRange[1] >= scale) + } } diff --git a/src/main/js/bundles/dn_selectionactions/manifest.json b/src/main/js/bundles/dn_selectionactions/manifest.json index 5738459..b357875 100644 --- a/src/main/js/bundles/dn_selectionactions/manifest.json +++ b/src/main/js/bundles/dn_selectionactions/manifest.json @@ -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" } }, diff --git a/src/main/js/bundles/dn_selectionactions/nls/bundle.js b/src/main/js/bundles/dn_selectionactions/nls/bundle.js index 4467598..48e1190 100644 --- a/src/main/js/bundles/dn_selectionactions/nls/bundle.js +++ b/src/main/js/bundles/dn_selectionactions/nls/bundle.js @@ -38,7 +38,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", diff --git a/src/main/js/bundles/dn_selectionactions/nls/de/bundle.js b/src/main/js/bundles/dn_selectionactions/nls/de/bundle.js index f7e7644..2a88450 100644 --- a/src/main/js/bundles/dn_selectionactions/nls/de/bundle.js +++ b/src/main/js/bundles/dn_selectionactions/nls/de/bundle.js @@ -37,7 +37,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", diff --git a/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue b/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue index f7d4fd9..8bf488d 100644 --- a/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue +++ b/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue @@ -83,6 +83,14 @@ hide-details /> + + + @@ -120,6 +128,10 @@ type: Boolean, default: true }, + adjustStepSize: { + type: Boolean, + default: false + }, i18n: { type: Object, default: () => { diff --git a/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidgetModel.js b/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidgetModel.js index 0f4d503..a4437e4 100644 --- a/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidgetModel.js +++ b/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidgetModel.js @@ -22,6 +22,7 @@ export default declare({ maxRadius: 0, innerRadius: 0, outerRadius: 0, - stepSize: 1 + stepSize: 1, + adjustStepSize: false });