From b6804c3dd0f306da4590822e3783d8b966145547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Mestres?= Date: Fri, 31 May 2024 14:23:58 +0200 Subject: [PATCH] feat: make number input "scroll updatable" --- app/components/settings-form/handle.hbs | 4 +++ app/components/settings-form/support.hbs | 4 +++ app/components/settings-form/text.hbs | 4 +++ app/modifiers/scrollable-input-number.ts | 45 ++++++++++++++++++++++++ 4 files changed, 57 insertions(+) create mode 100644 app/modifiers/scrollable-input-number.ts diff --git a/app/components/settings-form/handle.hbs b/app/components/settings-form/handle.hbs index 4352e3a..db78185 100644 --- 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 index b64163d..7cbf8ca 100644 --- 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 index 45825a1..50c18f7 100644 --- 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 new file mode 100644 index 0000000..1d9b62e --- /dev/null +++ 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 { + element?: CalciteInputText; + + constructor(owner: Owner, args: ArgsFor) { + 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); + } +}