Scaling options accept invalid values (#6639)

* work for #6625 Scaling options accept invalid values

* work for #6625 Scaling options accept invalid values

---------

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>

Author: OlgaLarina

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>

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;
       }
     }
   }, {

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);

packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts

@@ -179,11 +179,11 @@ test("Creator theme check scale", (): any => {
   expect(themeModelJsonCssVariables["--ctr-font-unit"]).toEqual("12px");
   expect(themeModelJsonCssVariables["--ctr-line-height-unit"]).toEqual("12px");
 
-  scale.value = 225;
+  scale.value = 225; // max = 200 
   themeModelJsonCssVariables = themeModel.toJSON().cssVariables || {};
-  expect(themeModelJsonCssVariables["--ctr-size-unit"]).toEqual("18px");
-  expect(themeModelJsonCssVariables["--ctr-spacing-unit"]).toEqual("18px");
-  expect(themeModelJsonCssVariables["--ctr-corner-radius-unit"]).toEqual("18px");
+  expect(themeModelJsonCssVariables["--ctr-size-unit"]).toEqual("16px");
+  expect(themeModelJsonCssVariables["--ctr-spacing-unit"]).toEqual("16px");
+  expect(themeModelJsonCssVariables["--ctr-corner-radius-unit"]).toEqual("16px");
 });
 
 test("Creator theme: apply custom theme", (): any => {

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);
+});

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}

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"