work for #6625 Scaling options accept invalid values

surveyjs · Feb 24, 2025 · 3a97f8e · 3a97f8e
1 parent 7b6f8db
commit 3a97f8e
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 5 deletions.
diff --git a/packages/survey-creator-angular/src/custom-questions/spin-editor.component.html b/packages/survey-creator-angular/src/custom-questions/spin-editor.component.html
@@ -8,11 +8,13 @@
     [class]="model.cssClasses.control" />
   <span [class]="model.cssClasses.buttonsContainer">
     <button [disabled]="model.isInputReadOnly" [class]="model.cssClasses.arrowButton"
+      (click)="model.onDownButtonClick()"
       (mousedown)="model.onDownButtonMouseDown()" (mouseup)="model.onButtonMouseUp()"
       (mouseleave)="model.onButtonMouseLeave()" (blur)="model.onBlur($event)" (focus)="model.onFocus($event)" tabindex="-1">
       <svg [iconName]="model.cssClasses.decreaseButtonIcon" [size]="'auto'" sv-ng-svg-icon></svg>
     </button>
     <button [disabled]="model.isInputReadOnly" [class]="model.cssClasses.arrowButton"
+      (click)="model.onUpButtonClick()"
       (mousedown)="model.onUpButtonMouseDown()" (mouseup)="model.onButtonMouseUp()"
       (mouseleave)="model.onButtonMouseLeave()" (blur)="model.onBlur($event)" (focus)="model.onFocus($event)" tabindex="-1">
       <svg [iconName]="model.cssClasses.increaseButtonIcon" [size]="'auto'" sv-ng-svg-icon></svg>

diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts
@@ -310,11 +310,13 @@ Serializer.addProperties("creatortheme", [
     onPropertyEditorUpdate: function (obj: any, editor: any) {
       if (!!editor) {
         editor.unit = "%";
-        editor.min = 0;
+        editor.min = 50;
+        editor.max = 200;
         editor.step = 5;
         editor.title = getLocString("creatortheme.fontScale");
         editor.titleLocation = "left";
         editor.descriptionLocation = "hidden";
+        editor.changeValueOnPressing = false;
       }
     }
   }, {
@@ -364,11 +366,13 @@ Serializer.addProperties("creatortheme", [
     onPropertyEditorUpdate: function (obj: any, editor: any) {
       if (!!editor) {
         editor.unit = "%";
-        editor.min = 0;
+        editor.min = 25;
+        editor.max = 200;
         editor.step = 5;
         editor.title = getLocString("creatortheme.userInterfaceBaseUnit");
         editor.titleLocation = "left";
         editor.descriptionLocation = "hidden";
+        editor.changeValueOnPressing = false;
       }
     }
   }, {

diff --git a/packages/survey-creator-core/src/custom-questions/question-spin-editor.ts b/packages/survey-creator-core/src/custom-questions/question-spin-editor.ts
@@ -2,6 +2,7 @@ import { QuestionFactory, QuestionTextModel, Serializer, property } from "survey
 
 export class QuestionSpinEditorModel extends QuestionTextModel {
   @property() public unit: string;
+  @property() public changeValueOnPressing: boolean;
   @property() private _showUnitsInEditor: boolean = true;
 
   private parseValue(val: string | number): { unit?: string, value: number } {
@@ -65,19 +66,37 @@ export class QuestionSpinEditorModel extends QuestionTextModel {
     clearTimeout(this.increaseTimer);
   }
   public onUpButtonMouseDown = () => {
+    if (!this.changeValueOnPressing) return;
+
     this.increase();
     this.clearTimers();
     this.increaseTimer = setTimeout(this.onUpButtonMouseDown, 200);
   }
   public onDownButtonMouseDown = () => {
+    if (!this.changeValueOnPressing) return;
+
     this.decrease();
     this.clearTimers();
     this.decreaseTimer = setTimeout(this.onDownButtonMouseDown, 200);
   }
+  public onUpButtonClick = () => {
+    if (!this.changeValueOnPressing) {
+      this.increase();
+    }
+  }
+  public onDownButtonClick = () => {
+    if (!this.changeValueOnPressing) {
+      this.decrease();
+    }
+  }
   public onButtonMouseLeave = () => {
+    if (!this.changeValueOnPressing) return;
+
     this.onButtonMouseUp();
   }
   public onButtonMouseUp = () => {
+    if (!this.changeValueOnPressing) return;
+
     this.clearTimers();
   }
   public onKeyDown = (event: KeyboardEvent) => {
@@ -138,7 +157,8 @@ export class QuestionSpinEditorModel extends QuestionTextModel {
   }
 }
 Serializer.addClass("spinedit", [
-  "unit"
+  "unit",
+  { name: "changeValueOnPressing:boolean", default: true }
 ], () => new QuestionSpinEditorModel(""), "text");
 QuestionFactory.Instance.registerQuestion("spinedit", name => {
   return new QuestionSpinEditorModel(name);

diff --git a/packages/survey-creator-core/tests/property-grid/spin-editor.tests.ts b/packages/survey-creator-core/tests/property-grid/spin-editor.tests.ts
@@ -54,9 +54,9 @@ test("Check spin editor question event callbacks", (done) => {
   question.onBeforeInput(<any>{ data: "-", target: { selectionStart: 1 }, preventDefault: () => { beforeInputlog += "->-"; } });
   expect(beforeInputlog).toBe("->-");
 
-  question.onKeyDown(<any>{ key: "ArrowDown", stopPropagation: () => {}, preventDefault: () => {} });
+  question.onKeyDown(<any>{ key: "ArrowDown", stopPropagation: () => { }, preventDefault: () => { } });
   expect(question.value).toBe(15);
-  question.onKeyDown(<any>{ key: "ArrowUp", stopPropagation: () => {}, preventDefault: () => {} });
+  question.onKeyDown(<any>{ key: "ArrowUp", stopPropagation: () => { }, preventDefault: () => { } });
   expect(question.value).toBe(16);
 
   question.onDownButtonMouseDown();
@@ -89,3 +89,46 @@ test("Check spin editor question event callbacks", (done) => {
     }, 200);
   }, 200);
 });
+
+test("Check spin editor question event callbacks if changeValueOnPressing is false", (done) => {
+  const question = new QuestionSpinEditorModel("q1");
+  question.changeValueOnPressing = false;
+  question.value = 16;
+
+  question.onDownButtonMouseDown();
+  question.onButtonMouseUp();
+  expect(question.value).toBe(16);
+
+  question.onDownButtonClick();
+  expect(question.value).toBe(15);
+
+  question.onUpButtonMouseDown();
+  question.onButtonMouseUp();
+  expect(question.value).toBe(15);
+
+  question.onUpButtonClick();
+  expect(question.value).toBe(16);
+
+  question.onBlur(<any>{ target: { tagName: "BUTTON", value: "17" } });
+  expect(question.value).toBe(16);
+  question.onBlur(<any>{ target: { tagName: "INPUT", value: "17" } });
+  expect(question.value).toBe(17);
+
+  question.value = 16;
+  question.onDownButtonMouseDown();
+  setTimeout(() => {
+    question.onButtonMouseUp();
+    expect(question.value).toBe(16);
+    question.onUpButtonMouseDown();
+    setTimeout(() => {
+      question.onButtonMouseLeave();
+      expect(question.value).toBe(16);
+      question.onDownButtonMouseDown();
+      setTimeout(() => {
+        question.onButtonMouseUp();
+        expect(question.value).toBe(16);
+        done();
+      }, 200);
+    }, 200);
+  }, 200);
+});
diff --git a/packages/survey-creator-react/src/custom-questions/SpinEditor.tsx b/packages/survey-creator-react/src/custom-questions/SpinEditor.tsx
@@ -51,6 +51,7 @@ export class SurveyQuestionSpinEditor extends SurveyQuestionText {
           tabIndex={-1}
           className={this.question.cssClasses.arrowButton}
           disabled={this.isDisplayMode}
+          onClick={this.question.onDownButtonClick}
           onMouseDown={this.question.onDownButtonMouseDown}
           onMouseUp={this.question.onButtonMouseUp}
           onMouseLeave={this.question.onButtonMouseLeave}
@@ -62,6 +63,7 @@ export class SurveyQuestionSpinEditor extends SurveyQuestionText {
           tabIndex={-1}
           className={this.question.cssClasses.arrowButton}
           disabled={this.isDisplayMode}
+          onClick={this.question.onUpButtonClick}
           onMouseDown={this.question.onUpButtonMouseDown}
           onMouseUp={this.question.onButtonMouseUp}
           onMouseLeave={this.question.onButtonMouseLeave}

diff --git a/packages/survey-creator-vue/src/custom-questions/SpinEditor.vue b/packages/survey-creator-vue/src/custom-questions/SpinEditor.vue
@@ -22,6 +22,7 @@
       <button
         :disabled="question.isInputReadOnly"
         :class="question.cssClasses.arrowButton"
+        @click="question.onDownButtonClick"
         @mousedown="question.onDownButtonMouseDown"
         @mouseup="question.onButtonMouseUp"
         @mouseleave="question.onButtonMouseLeave"
@@ -38,6 +39,7 @@
       <button
         :disabled="question.isInputReadOnly"
         :class="question.cssClasses.arrowButton"
+        @click="question.onUpButtonClick"
         @mousedown="question.onUpButtonMouseDown"
         @mouseup="question.onButtonMouseUp"
         @mouseleave="question.onButtonMouseLeave"