feat: make number input "scroll updatable"

romgere · May 31, 2024 · b6804c3 · b6804c3
1 parent 944b1bb
commit b6804c3
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 0 deletions.
diff --git a/app/components/settings-form/handle.hbs b/app/components/settings-form/handle.hbs
@@ -49,6 +49,7 @@
       suffix-text={{t 'mm_unit'}}
       value={{@model.handleSettings.size}}
       {{on 'calciteInputNumberChange' (fn this.setHandleSettingsValue 'size')}}
+      {{scrollable-input-number}}
       step='1'
       number-button-type='horizontal'
       icon='measure'
@@ -64,6 +65,7 @@
         suffix-text={{t 'mm_unit'}}
         value={{@model.handleSettings.size2}}
         {{on 'calciteInputNumberChange' (fn this.setHandleSettingsValue 'size2')}}
+        {{scrollable-input-number}}
         step='1'
         number-button-type='horizontal'
         icon='dimensions'
@@ -79,6 +81,7 @@
       suffix-text={{t 'mm_unit'}}
       value={{@model.handleSettings.offsetX}}
       {{on 'calciteInputNumberChange' (fn this.setHandleSettingsValue 'offsetX')}}
+      {{scrollable-input-number}}
       step='1'
       number-button-type='horizontal'
       icon='center-horizontal'
@@ -93,6 +96,7 @@
         suffix-text={{t 'mm_unit'}}
         value={{@model.handleSettings.offsetY}}
         {{on 'calciteInputNumberChange' (fn this.setHandleSettingsValue 'offsetY')}}
+        {{scrollable-input-number}}
         step='1'
         number-button-type='horizontal'
         icon='center-vertical'

diff --git a/app/components/settings-form/support.hbs b/app/components/settings-form/support.hbs
@@ -5,6 +5,7 @@
     suffix-text={{t 'mm_unit'}}
     value={{@model.supportHeight}}
     {{on 'calciteInputNumberChange' (fn this.setNumber 'supportHeight')}}
+    {{scrollable-input-number}}
     step='1'
     number-button-type='horizontal'
     icon='antenna-height'
@@ -19,6 +20,7 @@
     suffix-text={{t 'mm_unit'}}
     value={{@model.supportBorderRadius}}
     {{on 'calciteInputNumberChange' (fn this.setNumber 'supportBorderRadius')}}
+    {{scrollable-input-number}}
     step='1'
     number-button-type='horizontal'
     icon='border-radius-rounded'
@@ -44,6 +46,7 @@
         suffix-text={{t 'mm_unit'}}
         value={{get @model.supportPadding pos}}
         {{on 'calciteInputNumberChange' (fn this.setSupportPaddingDir pos)}}
+        {{scrollable-input-number}}
         step='1'
         icon={{get this.supportPositionIcon pos}}
         data-test-settings-supportPadding={{pos}}
@@ -58,6 +61,7 @@
       suffix-text={{t 'mm_unit'}}
       value={{this.supportPadding}}
       {{on 'calciteInputNumberChange' this.setSupportPadding}}
+      {{scrollable-input-number}}
       step='1'
       number-button-type='horizontal'
       icon='dimensions-unit'

diff --git a/app/components/settings-form/text.hbs b/app/components/settings-form/text.hbs
@@ -73,6 +73,7 @@
     {{!-- suffix-text={{t "mm_unit"}} --}}
     value={{@model.size}}
     {{on 'calciteInputNumberChange' (fn this.setNumber 'size')}}
+    {{scrollable-input-number}}
     step='1'
     number-button-type='horizontal'
     icon='change-font-size'
@@ -87,6 +88,7 @@
     suffix-text={{t 'mm_unit'}}
     value={{@model.height}}
     {{on 'calciteInputNumberChange' (fn this.setNumber 'height')}}
+    {{scrollable-input-number}}
     step='1'
     number-button-type='horizontal'
     icon='dimensions-wall'
@@ -101,6 +103,7 @@
     suffix-text={{t 'mm_unit'}}
     value={{@model.spacing}}
     {{on 'calciteInputNumberChange' (fn this.setNumber 'spacing')}}
+    {{scrollable-input-number}}
     step='1'
     number-button-type='horizontal'
     icon='distribute-width-evenly'
@@ -116,6 +119,7 @@
       suffix-text={{t 'mm_unit'}}
       value={{@model.vSpacing}}
       {{on 'calciteInputNumberChange' (fn this.setNumber 'vSpacing')}}
+      {{scrollable-input-number}}
       step='1'
       number-button-type='horizontal'
       icon='distribute-height-evenly'

diff --git a/app/modifiers/scrollable-input-number.ts b/app/modifiers/scrollable-input-number.ts
@@ -0,0 +1,45 @@
+import Modifier from 'ember-modifier';
+import type DefaultSignature from 'ember-modifier';
+import type { ArgsFor } from 'ember-modifier';
+
+import type { CalciteInputText } from '@esri/calcite-components/dist/components/calcite-input-text';
+import { registerDestructor } from '@ember/destroyable';
+import { action } from '@ember/object';
+
+import type Owner from '@ember/owner';
+
+export default class ThreeRendererModifier extends Modifier<DefaultSignature> {
+  element?: CalciteInputText;
+
+  constructor(owner: Owner, args: ArgsFor<DefaultSignature>) {
+    super(owner, args);
+    registerDestructor(this, this.cleanup);
+  }
+
+  @action
+  onWHeel(e: WheelEvent) {
+    if (!e.deltaY) {
+      return;
+    }
+
+    const step = e.ctrlKey ? 10 : e.altKey ? 0.1 : 1;
+    const factor = e.deltaY < 0 ? 1 : -1;
+    const newValue = Number(parseFloat(this.element!.value) + step * factor).toFixed(2);
+
+    this.element!.value = `${newValue}`;
+    this.element!.dispatchEvent(new Event('calciteInputNumberChange'));
+
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  @action
+  cleanup() {
+    this.element?.removeEventListener('wheel', this.onWHeel);
+  }
+
+  modify(element: CalciteInputText) {
+    this.element = element;
+    element.addEventListener('wheel', this.onWHeel);
+  }
+}