From 6886e9bb521b6928f968e60eb5c9ce14fb105d90 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Fri, 6 Dec 2024 09:38:40 +0300 Subject: [PATCH] work for #6189 Creator v2.0 Add ZoomIn/ZoomOut into designer surface --- .../designer/designer-survey.component.html | 2 +- .../src/components/tabs/designer.ts | 114 ++++++++++++++---- .../survey-creator-core/src/creator-base.ts | 16 +-- .../creator-theme-model-definition.ts | 1 - .../src/creator-theme/creator-theme-model.ts | 51 +------- .../src/images-v1/zoomin-24x24.svg | 3 + .../src/images-v1/zoomout-24x24.svg | 3 + .../src/images-v2/zoomin-24x24.svg | 3 + .../src/images-v2/zoomout-24x24.svg | 3 + .../src/localization/english.ts | 2 + .../tests/creator-base.tests.ts | 27 +++++ .../creator-theme-model.tests.ts | 7 -- .../src/tabs/designer.html | 3 +- .../src/tabs/Designer.tsx | 2 +- .../src/tabs/designer/Designer.vue | 2 +- 15 files changed, 136 insertions(+), 103 deletions(-) create mode 100644 packages/survey-creator-core/src/images-v1/zoomin-24x24.svg create mode 100644 packages/survey-creator-core/src/images-v1/zoomout-24x24.svg create mode 100644 packages/survey-creator-core/src/images-v2/zoomin-24x24.svg create mode 100644 packages/survey-creator-core/src/images-v2/zoomout-24x24.svg diff --git a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html index a05ae65d33..0f9e8133e5 100644 --- a/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html +++ b/packages/survey-creator-angular/src/tabs/designer/designer-survey.component.html @@ -1,6 +1,6 @@
+ [style]="model.surveyThemeVariables">
diff --git a/packages/survey-creator-core/src/components/tabs/designer.ts b/packages/survey-creator-core/src/components/tabs/designer.ts index b960ce34e8..35eb37f73e 100644 --- a/packages/survey-creator-core/src/components/tabs/designer.ts +++ b/packages/survey-creator-core/src/components/tabs/designer.ts @@ -5,6 +5,8 @@ import { PagesController } from "../../pages-controller"; import { SurveyHelper } from "../../survey-helper"; import { DragDropSurveyElements } from "../../survey-elements"; import { SurveyElementAdornerBase } from "../action-container-view-model"; +import { assign } from "../../utils/utils"; +import designTabSurveyThemeJSON from "../../designTabSurveyThemeJSON"; require("./designer.scss"); export const initialSettingsAllowShowEmptyTitleInDesignMode = settings.allowShowEmptyTitleInDesignMode; @@ -12,12 +14,25 @@ export const initialSettingsAllowShowEmptyTitleInDesignMode = settings.allowShow export class TabDesignerViewModel extends Base { private cssUpdater: ComputedUpdater; private pagesControllerValue: PagesController; + private scaleCssVariables = {}; + private surfaceScale = 100; + + unitDictionary: { [index: string]: number } = { + "--ctr-surface-base-unit": 8, + "--lbr-font-unit": 8, + "--lbr-line-height-unit": 8, + "--lbr-size-unit": 8, + "--lbr-spacing-unit": 8, + "--lbr-corner-radius-unit": 8, + "--lbr-stroke-unit": 1, + } @property() newPage: PageModel; @property({ defaultValue: false }) showNewPage: boolean; @property() pageCount: number; @property() designerCss: string; @property() showPlaceholder: boolean; + @property({ defaultValue: {} }) surveyThemeVariables: { [index: string]: string } = {}; public creator: SurveyCreatorModel; public surfaceToolbar: ActionContainer; @@ -67,15 +82,31 @@ export class TabDesignerViewModel extends Base { return Object.keys(page.toJSON()).filter(key => key !== "name").length > 0; } + private updateDesignTabSurveyThemeVariables(): void { + const cssVariables: { [index: string]: string } = {}; + assign(cssVariables, designTabSurveyThemeJSON.cssVariables, this.scaleCssVariables, { + "--sjs-base-unit": "var(--ctr-surface-base-unit)", + "--sjs-font-size": "calc(2 * var(--ctr-surface-base-unit))", + }); + this.surveyThemeVariables = cssVariables; + } + constructor(creator: SurveyCreatorModel) { super(); this.creator = creator; this.pagesControllerValue = new PagesController(creator); - this.initToolbar(); + this.creator.dragDropChoices.onShortcutCreated = (shortcut: HTMLElement) => { + Object.keys(this.surveyThemeVariables).forEach((key) => { + shortcut.style.setProperty(key, this.surveyThemeVariables[key]); + }); + }; + + this.initSurfaceToolbar(); this.initSurvey(); + this.updateDesignTabSurveyThemeVariables(); } - private initToolbar() { + private initSurfaceToolbar() { this.surfaceToolbar = new ActionContainer(); let defaultActionBarCss = { @@ -92,28 +123,61 @@ export class TabDesignerViewModel extends Base { }; this.surfaceToolbar.cssClasses = defaultActionBarCss; - this.surfaceToolbar.setItems([{ - id: "collapseAll", - locTooltipName: "ed.collapseAllTooltip", - iconName: "icon-collapseall-24x24", - iconSize: "auto", - action: () => this.creator.expandCollapseManager.expandCollapseElements("collapse-all", true) - }, { - id: "expandAll", - locTooltipName: "ed.expandAllTooltip", - iconName: "icon-expandall-24x24", - iconSize: "auto", - action: () => this.creator.expandCollapseManager.expandCollapseElements("expand-all", false) - }, { - id: "lockQuestions", - locTooltipName: "ed.lockQuestionsTooltip", - iconName: "icon-questionlock-24x24", - iconSize: "auto", - action: (action) => { - action.active = !action.active; - this.creator.expandCollapseManager.lockQuestions(action.active); - } - }]); + const surfaceToolbarItems = []; + if (this.creator.showCreatorThemeSettings) { + surfaceToolbarItems.push({ + id: "zoomIn", + locTooltipName: "ed.zoomInTooltip", + iconName: "icon-zoomin-24x24", + iconSize: "auto", + action: () => { this.scalingSurface(this.surfaceScale + 10); } + }); + surfaceToolbarItems.push({ + id: "zoomIn", + locTooltipName: "ed.zoomOutTooltip", + iconName: "icon-zoomout-24x24", + iconSize: "auto", + action: () => { this.scalingSurface(this.surfaceScale - 10); } + }); + } + if (this.creator.expandCollapseButtonVisibility != "never") { + surfaceToolbarItems.push({ + id: "collapseAll", + locTooltipName: "ed.collapseAllTooltip", + iconName: "icon-collapseall-24x24", + iconSize: "auto", + // needSeparator: this.creator.showCreatorThemeSettings, + action: () => this.creator.expandCollapseManager.expandCollapseElements("collapse-all", true) + }); + surfaceToolbarItems.push({ + id: "expandAll", + locTooltipName: "ed.expandAllTooltip", + iconName: "icon-expandall-24x24", + iconSize: "auto", + action: () => this.creator.expandCollapseManager.expandCollapseElements("expand-all", false) + }); + surfaceToolbarItems.push({ + id: "lockQuestions", + locTooltipName: "ed.lockQuestionsTooltip", + iconName: "icon-questionlock-24x24", + iconSize: "auto", + action: (action) => { + action.active = !action.active; + this.creator.expandCollapseManager.lockQuestions(action.active); + } + }); + } + this.surfaceToolbar.setItems(surfaceToolbarItems); + } + + private scalingSurface(scaleFactor: number): void { + if (scaleFactor <= 20 || scaleFactor > 200) return; + + this.surfaceScale = scaleFactor; + Object.keys(this.unitDictionary).forEach(key => { + this.scaleCssVariables[key] = (this.unitDictionary[key] * scaleFactor / 100) + "px"; + }); + this.updateDesignTabSurveyThemeVariables(); } get survey() { @@ -141,7 +205,7 @@ export class TabDesignerViewModel extends Base { return getLocString("ed.surveyPlaceholderDescription"); } public get hasToolbar() { - return this.creator.expandCollapseButtonVisibility != "never"; + return this.creator.expandCollapseButtonVisibility != "never" || this.creator.showCreatorThemeSettings; } private isUpdatingNewPage: boolean; public onDesignerSurveyPropertyChanged(obj: Base, propName: string): void { diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts index 5186db23e1..6559831253 100644 --- a/packages/survey-creator-core/src/creator-base.ts +++ b/packages/survey-creator-core/src/creator-base.ts @@ -1277,8 +1277,8 @@ export class SurveyCreatorModel extends Base this.initSurveyWithJSON(undefined, false); this.toolbox = new QuestionToolbox(this.options && this.options.questionTypes ? this.options.questionTypes : null, this, true); this.updateToolboxIsCompact(); - this.initTabs(); this.initDragDrop(); + this.initTabs(); this.syncSaveButtons = this.options.saveSurveyAndTheme !== undefined ? this.options.saveSurveyAndTheme : this.options.syncSaveButtons; this.isTouch = IsTouch; const expandAction = this.sidebar.getExpandAction(); @@ -1983,11 +1983,6 @@ export class SurveyCreatorModel extends Base this.stopUndoRedoTransaction(); this.selectElement(options.draggedElement, undefined, false); }); - this.dragDropChoices.onShortcutCreated = (shortcut: HTMLElement) => { - Object.keys(this.designTabSurveyThemeVariables).forEach((key) => { - shortcut.style.setProperty(key, this.designTabSurveyThemeVariables[key]); - }); - }; } public updateElementsOnLocaleChanged(obj: Base, propertyName: string): void { @@ -2220,15 +2215,6 @@ export class SurveyCreatorModel extends Base this.changeText(value, true); } - public get designTabSurveyThemeVariables(): {} { - const cssVariables = {}; - assign(cssVariables, designTabSurveyThemeJSON.cssVariables, { - "--sjs-base-unit": "var(--ctr-surface-base-unit)", - "--sjs-font-size": "calc(2 * var(--ctr-surface-base-unit))", - }); - return cssVariables; - } - public getSurveyJSON(): any { if (this.viewType != "editor") { return new JsonObject().toJsonObject(this.survey); diff --git a/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts b/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts index 0482c99644..1e82132b6e 100644 --- a/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts +++ b/packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts @@ -9,7 +9,6 @@ const creatorThemeModelProperties: ISurveyPropertiesDefinition = { { name: "--sjs-secondary-background-500", index: 20, tab: "accentColors" }, { name: "fontScale", index: 40, tab: "scaling" }, { name: "scale", index: 50, tab: "scaling" }, - { name: "surfaceScale", index: 60, tab: "scaling" }, ], tabs: [ { name: "accentColors", "parent": "general", index: 20 }, 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 index bd993407c5..b9609bd939 100644 --- a/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts +++ b/packages/survey-creator-core/src/creator-theme/creator-theme-model.ts @@ -23,25 +23,17 @@ export class CreatorThemeModel extends Base implements ICreatorTheme { private backgroundColorCalculator = new ColorCalculator(); unitDictionary: { [index: string]: number } = { - "--ctr-surface-base-unit": 8, "--ctr-font-unit": 8, "--ctr-line-height-unit": 8, "--ctr-size-unit": 8, "--ctr-spacing-unit": 8, "--ctr-corner-radius-unit": 8, "--ctr-stroke-unit": 1, - "--lbr-font-unit": 8, - "--lbr-line-height-unit": 8, - "--lbr-size-unit": 8, - "--lbr-spacing-unit": 8, - "--lbr-corner-radius-unit": 8, - "--lbr-stroke-unit": 1, } @property() themeName: string = CreatorThemeModel.defautlThemeName; @property() scale: number; @property() fontScale: number; - @property() surfaceScale: number; @property() isLight: boolean = true; public onThemeSelected = new EventBase(); @@ -162,7 +154,7 @@ export class CreatorThemeModel extends Base implements ICreatorTheme { this.updateColorPropertiesDependentOnBaseColor(this.backgroundColorCalculator, newValue, "--sjs-special-background", "--sjs-special-haze", "--sjs-special-glow"); } else if (name.indexOf("--") === 0) { this.setThemeCssVariablesChanges(name, newValue); - } else if (name == "fontScale" || name == "scale" || name == "surfaceScale") { + } else if (name == "fontScale" || name == "scale") { this.scalePropertiesChanged(name, newValue); } } @@ -174,15 +166,6 @@ export class CreatorThemeModel extends Base implements ICreatorTheme { this.scalingProperties("--ctr-size-unit", newValue); this.scalingProperties("--ctr-spacing-unit", newValue); this.scalingProperties("--ctr-corner-radius-unit", newValue); - - } else if (propertyName == "surfaceScale") { - this.scalingProperties("--ctr-surface-base-unit", newValue); - this.scalingProperties("--lbr-font-unit", newValue); - this.scalingProperties("--lbr-line-height-unit", newValue); - this.scalingProperties("--lbr-size-unit", newValue); - this.scalingProperties("--lbr-spacing-unit", newValue); - this.scalingProperties("--lbr-corner-radius-unit", newValue); - this.scalingProperties("--lbr-stroke-unit", newValue); } } private scalingProperties(cssName: string, newValue: number) { @@ -203,15 +186,6 @@ export class CreatorThemeModel extends Base implements ICreatorTheme { this.scaleValue("--ctr-spacing-unit", this.scale); this.scaleValue("--ctr-corner-radius-unit", this.scale); } - if (this.surfaceScale !== undefined) { - this.scaleValue("--ctr-surface-base-unit", this.surfaceScale); - this.scaleValue("--lbr-font-unit", this.surfaceScale); - this.scaleValue("--lbr-line-height-unit", this.surfaceScale); - this.scaleValue("--lbr-size-unit", this.surfaceScale); - this.scaleValue("--lbr-spacing-unit", this.surfaceScale); - this.scaleValue("--lbr-corner-radius-unit", this.surfaceScale); - this.scaleValue("--lbr-stroke-unit", this.surfaceScale); - } } private getScaleFactor(cssName: string): number { return !!this[cssName] ? roundTo2Decimals(parseFloat(this[cssName]) * 100 / this.unitDictionary[cssName]) : undefined; @@ -221,7 +195,6 @@ export class CreatorThemeModel extends Base implements ICreatorTheme { try { this.fontScale = this.getScaleFactor("--ctr-font-unit"); this.scale = this.getScaleFactor("--ctr-size-unit"); - this.surfaceScale = this.getScaleFactor("--ctr-surface-base-unit"); } finally { this.blockThemeChangedNotifications -= 1; } @@ -429,28 +402,6 @@ Serializer.addProperties("creatortheme", [ editor.descriptionLocation = "hidden"; } } - }, { - name: "--ctr-surface-base-unit", - default: "8px", - visible: false, - }, { - type: "spinedit", - name: "surfaceScale", - isSerializable: false, - default: 100, - enableIf: (obj: CreatorThemeModel): boolean => { - return !obj || obj.themeName !== CreatorThemeModel.defautlThemeName; - }, - onPropertyEditorUpdate: function (obj: any, editor: any) { - if (!!editor) { - editor.unit = "%"; - editor.min = 0; - editor.step = 5; - editor.title = getLocString("creatortheme.surfaceScale"); - editor.titleLocation = "left"; - editor.descriptionLocation = "hidden"; - } - } }, { name: "isLight:boolean", visible: false, diff --git a/packages/survey-creator-core/src/images-v1/zoomin-24x24.svg b/packages/survey-creator-core/src/images-v1/zoomin-24x24.svg new file mode 100644 index 0000000000..0c3ca80b1f --- /dev/null +++ b/packages/survey-creator-core/src/images-v1/zoomin-24x24.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/survey-creator-core/src/images-v1/zoomout-24x24.svg b/packages/survey-creator-core/src/images-v1/zoomout-24x24.svg new file mode 100644 index 0000000000..e0451ba95e --- /dev/null +++ b/packages/survey-creator-core/src/images-v1/zoomout-24x24.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/survey-creator-core/src/images-v2/zoomin-24x24.svg b/packages/survey-creator-core/src/images-v2/zoomin-24x24.svg new file mode 100644 index 0000000000..217d70b2a1 --- /dev/null +++ b/packages/survey-creator-core/src/images-v2/zoomin-24x24.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/survey-creator-core/src/images-v2/zoomout-24x24.svg b/packages/survey-creator-core/src/images-v2/zoomout-24x24.svg new file mode 100644 index 0000000000..535fe3b978 --- /dev/null +++ b/packages/survey-creator-core/src/images-v2/zoomout-24x24.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/survey-creator-core/src/localization/english.ts b/packages/survey-creator-core/src/localization/english.ts index 146f1bfecc..ca525ba7fd 100644 --- a/packages/survey-creator-core/src/localization/english.ts +++ b/packages/survey-creator-core/src/localization/english.ts @@ -111,6 +111,8 @@ export var enStrings = { redoTooltip: "Redo the change", expandAllTooltip: "Expand All", collapseAllTooltip: "Collapse All", + zoomInTooltip: "Zoom In", + zoomOutTooltip: "Zoom Out", lockQuestionsTooltip: "Lock expand/collapse state for questions", showMoreChoices: "Show more", showLessChoices: "Show less", diff --git a/packages/survey-creator-core/tests/creator-base.tests.ts b/packages/survey-creator-core/tests/creator-base.tests.ts index 2d98844cca..2d02cbc769 100644 --- a/packages/survey-creator-core/tests/creator-base.tests.ts +++ b/packages/survey-creator-core/tests/creator-base.tests.ts @@ -4723,4 +4723,31 @@ test("onModified options, on adding page and on copying page", () => { expect(modifiedOptions[0].newValue.name).toBe("page2"); expect(modifiedOptions[2].type).toBe("ELEMENT_COPIED"); expect(modifiedOptions[2].newValue.name).toBe("page3"); +}); + +test("ZoomIn/ZoomOut designer surface", (): any => { + const creator = new CreatorTester(); + const designerTab = creator.getPlugin("designer").model as TabDesignerViewModel; + expect(designerTab["surfaceScale"]).toBe(100); + expect(designerTab["scaleCssVariables"]).toStrictEqual({}); + expect(designerTab.surveyThemeVariables["--ctr-surface-base-unit"]).toBe(undefined); + + designerTab["scalingSurface"](10); + expect(designerTab["surfaceScale"]).toBe(100); + + designerTab["scalingSurface"](200); + expect(designerTab["surfaceScale"]).toBe(100); + + designerTab["scalingSurface"](150); + expect(designerTab["surfaceScale"]).toBe(150); + expect(designerTab["scaleCssVariables"]).toStrictEqual({ + "--ctr-surface-base-unit": "12px", + "--lbr-corner-radius-unit": "12px", + "--lbr-font-unit": "12px", + "--lbr-line-height-unit": "12px", + "--lbr-size-unit": "12px", + "--lbr-spacing-unit": "12px", + "--lbr-stroke-unit": "1.5px" + }); + expect(designerTab.surveyThemeVariables["--ctr-surface-base-unit"]).toBe("12px"); }); \ No newline at end of file diff --git a/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts b/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts index 94da1632ba..4405919a73 100644 --- a/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts +++ b/packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts @@ -140,12 +140,6 @@ test("creator.applyTheme", () => { "--ctr-size-unit": "6px", "--ctr-corner-radius-unit": "6px", "--ctr-spacing-unit": "6px", - "--ctr-surface-base-unit": "10px", - "--lbr-corner-radius-unit": "10px", - "--lbr-font-unit": "10px", - "--lbr-line-height-unit": "10px", - "--lbr-size-unit": "10px", - "--lbr-spacing-unit": "10px", "--sjs-test": "green" } }; @@ -288,7 +282,6 @@ test("Creator theme: apply custom theme", (): any => { "--ctr-size-unit": "6px", "--ctr-corner-radius-unit": "6px", "--ctr-spacing-unit": "6px", - "--ctr-surface-base-unit": "10px", "--sjs-test": "green" } }; diff --git a/packages/survey-creator-knockout/src/tabs/designer.html b/packages/survey-creator-knockout/src/tabs/designer.html index 86a94b5082..8be685f2fe 100644 --- a/packages/survey-creator-knockout/src/tabs/designer.html +++ b/packages/survey-creator-knockout/src/tabs/designer.html @@ -24,8 +24,7 @@ -
+
diff --git a/packages/survey-creator-react/src/tabs/Designer.tsx b/packages/survey-creator-react/src/tabs/Designer.tsx index 66617d9bf6..58bf9bfb26 100644 --- a/packages/survey-creator-react/src/tabs/Designer.tsx +++ b/packages/survey-creator-react/src/tabs/Designer.tsx @@ -142,7 +142,7 @@ export class TabDesignerComponent extends SurveyElementBase