From fd607e59b00e4f9224546c3095882d0d8044350c Mon Sep 17 00:00:00 2001 From: "s.holtkamp" Date: Thu, 9 Feb 2023 11:54:24 +0100 Subject: [PATCH] Add dynamic adjustements of stepSize based on current scale --- .../js/bundles/dn_selectionactions/README.md | 31 +++++++++++++------ .../actions/CircleSpatialInputAction.js | 29 +++++++++++++++-- .../bundles/dn_selectionactions/manifest.json | 11 +++++++ .../bundles/dn_selectionactions/nls/bundle.js | 3 +- .../dn_selectionactions/nls/de/bundle.js | 3 +- .../widgets/CircleSpatialInputWidget.vue | 12 +++++++ .../widgets/CircleSpatialInputWidgetModel.js | 3 +- 7 files changed, 78 insertions(+), 14 deletions(-) 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 94dfd48..b762eab 100644 --- a/src/main/js/bundles/dn_selectionactions/actions/CircleSpatialInputAction.js +++ b/src/main/js/bundles/dn_selectionactions/actions/CircleSpatialInputAction.js @@ -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 { @@ -29,6 +30,7 @@ export default class CircleSpatialInputAction { #highlighter = undefined; #serviceRegistration = undefined; #bundleContext = undefined; + #scaleWatcher = undefined; activate(componentContext) { this.#bundleContext = componentContext.getBundleContext(); @@ -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; @@ -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); @@ -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(); @@ -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) + } } diff --git a/src/main/js/bundles/dn_selectionactions/manifest.json b/src/main/js/bundles/dn_selectionactions/manifest.json index 80b9197..118e4f1 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 83e72ff..3fe0852 100644 --- a/src/main/js/bundles/dn_selectionactions/nls/bundle.js +++ b/src/main/js/bundles/dn_selectionactions/nls/bundle.js @@ -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", 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 32492b2..6503bf0 100644 --- a/src/main/js/bundles/dn_selectionactions/nls/de/bundle.js +++ b/src/main/js/bundles/dn_selectionactions/nls/de/bundle.js @@ -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", diff --git a/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue b/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue index 2a903f7..7157336 100644 --- a/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue +++ b/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidget.vue @@ -84,6 +84,14 @@ hide-details /> + + + @@ -121,6 +129,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 b1085be..64f36da 100644 --- a/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidgetModel.js +++ b/src/main/js/bundles/dn_selectionactions/widgets/CircleSpatialInputWidgetModel.js @@ -23,6 +23,7 @@ export default declare({ maxRadius: 0, innerRadius: 0, outerRadius: 0, - stepSize: 1 + stepSize: 1, + adjustStepSize: false });