Create a theme model that inherits from a base class with serialization information.

packages/survey-creator-core/src/components/tabs/theme-custom-questions/boxshadow-settings.ts

@@ -61,7 +61,10 @@ if(!ComponentCollection.Instance.getCustomQuestionByName("boxshadowsettings")) {
     internal: true,
     questionJSON: getQuestionJSON(),
     onCreated(question: QuestionCustomModel) {
-      question.valueFromDataCallback = (value: string | Array<Object>): Array<Object> => typeof value == "string" ? parseBoxShadow(value) : value;
+      question.valueFromDataCallback = (value: string | Array<Object>): Array<Object> => {
+        if (typeof value == "undefined") return [{}];
+        return typeof value == "string" ? parseBoxShadow(value) : value;
+      };
       question.valueToDataCallback = (value: string | Array<Object>): string => !!value ? (typeof value == "string" ? value : createBoxShadow(Array.isArray(value) ? value : [value])) : "";
       (<QuestionPanelDynamicModel>question.contentQuestion).panels.forEach(p => p.questions.forEach(q => q.allowRootStyle = false));
     },
@@ -95,7 +98,7 @@ export function createBoxShadowReset(value: string): string {
   return createBoxShadow(resetValue);
 }
 
-export function parseBoxShadow(value: string): Array<Object> {
+export function parseBoxShadow(value: string = ""): Array<Object> {
   return value.split(/,(?![^(]*\))/).map(value => {
     const color = value.match(/#[a-zA-Z0-9]+|rgba?\(.*?\)/);
     const isInset = value.indexOf("inset") > -1;

packages/survey-creator-core/src/components/tabs/theme-custom-questions/element-settings.ts

@@ -1,5 +1,6 @@
-import { ComponentCollection, Question, QuestionCompositeModel } from "survey-core";
+import { ComponentCollection, JsonObjectProperty, Question, QuestionCompositeModel } from "survey-core";
 import { getLocString } from "../../../editorLocalization";
+import { assign } from "../../../utils/utils";
 
 function getElementsJSON() {
   return [
@@ -21,23 +22,17 @@ function getElementsJSON() {
     },
     {
       type: "spinedit",
-      name: "corner",
+      name: "cornerRadius",
       title: getLocString("theme.cornerRadius"),
       titleLocation: "left",
       descriptionLocation: "hidden",
       unit: "px",
       min: 0
-    },
-    {
-      type: "expression",
-      name: "cornerRadius",
-      expression: "iif({composite.corner} notempty, {composite.corner} + 'px', '')",
-      visible: false
     }
   ];
 }
 
-if(!ComponentCollection.Instance.getCustomQuestionByName("elementsettings")) {
+if (!ComponentCollection.Instance.getCustomQuestionByName("elementsettings")) {
   ComponentCollection.Instance.add({
     name: "elementsettings",
     showInToolbox: false,
@@ -47,6 +42,9 @@ if(!ComponentCollection.Instance.getCustomQuestionByName("elementsettings")) {
     },
     onCreated(question) {
     },
+    valueToQuestion(value) {
+      return JSON.parse(JSON.stringify(value));
+    },
     onValueChanged(question, name, newValue) {
     },
   });
@@ -57,37 +55,37 @@ export function updateElementSettingsJSON() {
   config.json.elementsJSON = getElementsJSON();
 }
 
-export function elementSettingsToCssVariable(question: Question, themeCssVariables: { [index: string]: string }) {
-  Object.keys(question.value).forEach(key => {
-    if (key === "corner") return;
-
-    const propertyName = `--sjs-${question.name.toLocaleLowerCase()}-${key}`;
-    if (!question.defaultValue || question.value[key] !== (question as Question).defaultValue[key]) {
-      themeCssVariables[propertyName] = question.value[key];
+export function elementSettingsToCssVariable(value: any = {}, property: JsonObjectProperty, themeCssVariables: { [index: string]: string }) {
+  Object.keys(value).forEach(key => {
+    const propertyName = `--sjs-${property.name.toLocaleLowerCase()}-${key}`;
+    if (!property.defaultValue || value[key] !== property.defaultValue[key]) {
+      themeCssVariables[propertyName] = value[key];
     } else {
       themeCssVariables[propertyName] = undefined;
     }
   });
 }
 
-export function elementSettingsFromCssVariable(question: Question, themeCssVariables: { [index: string]: string }, defaultBackcolorVariable: string, defaultHovercolorVariable: string): void {
-  if (!question) return;
+export function elementSettingsFromCssVariable(property: JsonObjectProperty, themeCssVariables: { [index: string]: string }, defaultBackcolorVariableName: string, defaultHovercolorVariableName: string, defaultCornerRadius: number = 4): any {
+  if (!property) return;
+
+  if (!property.defaultValue) property.defaultValue = {};
+  assign(property.defaultValue, {
+    backcolor: themeCssVariables[defaultBackcolorVariableName],
+    hovercolor: themeCssVariables[defaultHovercolorVariableName],
+    cornerRadius: defaultCornerRadius
+  });
 
-  const compositeQuestion = <QuestionCompositeModel>question;
-  const elementSettingsFromTheme = Object.keys(themeCssVariables).filter(key => key.indexOf(question.name.toLocaleLowerCase()) !== -1);
+  const result = { ...property.defaultValue };
+  const elementSettingsFromTheme = Object.keys(themeCssVariables).filter(key => key.indexOf(property.name.toLocaleLowerCase()) !== -1);
 
   elementSettingsFromTheme.forEach(key => {
     const propertyName = key.split("-").pop();
-
     if (propertyName === "cornerRadius" && themeCssVariables[key] !== undefined) {
-      compositeQuestion.contentPanel.getQuestionByName("corner").value = parseFloat(themeCssVariables[key].toString());
+      result[propertyName] = parseFloat(themeCssVariables[key].toString());
     } else {
-      compositeQuestion.contentPanel.getQuestionByName(propertyName).value = themeCssVariables[key];
+      result[propertyName] = themeCssVariables[key];
     }
   });
-
-  if (elementSettingsFromTheme.length === 0) {
-    (<QuestionCompositeModel>question).contentPanel.getQuestionByName("backcolor").value = defaultBackcolorVariable;
-    (<QuestionCompositeModel>question).contentPanel.getQuestionByName("hovercolor").value = defaultHovercolorVariable;
-  }
+  return result;
 }

packages/survey-creator-core/src/components/tabs/theme-custom-questions/font-settings.ts

@@ -1,5 +1,6 @@
-import { ComponentCollection, Question, QuestionCompositeModel, Serializer } from "survey-core";
+import { Base, ComponentCollection, JsonObjectProperty, Question, QuestionCompositeModel, Serializer } from "survey-core";
 import { getLocString } from "../../../editorLocalization";
+import { assign } from "../../../utils/utils";
 
 export const DefaultFonts = [
   "Open Sans",
@@ -65,7 +66,7 @@ function getElementsJSON() {
   ];
 }
 
-if(!ComponentCollection.Instance.getCustomQuestionByName("fontsettings")) {
+if (!ComponentCollection.Instance.getCustomQuestionByName("fontsettings")) {
   ComponentCollection.Instance.add({
     name: "fontsettings",
     showInToolbox: false,
@@ -92,10 +93,14 @@ if(!ComponentCollection.Instance.getCustomQuestionByName("fontsettings")) {
       const placeholderColor = question.contentPanel.getQuestionByName("placeholdercolor");
       placeholderColor.visible = question.name === "editorFont";
     },
+    valueToQuestion(value) {
+      return JSON.parse(JSON.stringify(value));
+    },
     onValueChanged(question, name, newValue) {
     },
   });
 }
+
 function syncPropertiesFromComposite(question: Question, propertyName: string, newValue: any) {
   const colorQuestion = question.contentPanel.questions[2];
   if (propertyName == "allowEmptyColorValue") {
@@ -108,34 +113,47 @@ export function updateFontSettingsJSON() {
   config.json.elementsJSON = getElementsJSON();
 }
 
-export function fontsettingsToCssVariable(question: Question, themeCssVariables: { [index: string]: string }) {
-  Object.keys(question.value).forEach(key => {
-    const innerQ = (<QuestionCompositeModel>question).contentPanel.getQuestionByName(key);
-    const propertyName = `--sjs-font-${question.name.toLocaleLowerCase()}-${key}`;
-    if (!question.defaultValue || question.value[key] !== question.defaultValue[key]) {
-      themeCssVariables[propertyName] = question.value[key] + (innerQ.unit?.toString() || "");
+export function onSerializeFontSettingsValue(obj: Base, propertyName: string) {
+  const result = { ...obj[propertyName] };
+  if (result.size != obj.getPropertyByName(propertyName).defaultValue?.size) {
+    result.size = result.size + "px";
+  }
+  return result;
+}
+
+export function fontsettingsToCssVariable(value: any = {}, property: JsonObjectProperty, themeCssVariables: { [index: string]: string }) {
+  Object.keys(value).forEach(key => {
+    const propertyName = `--sjs-font-${property.name.toLocaleLowerCase()}-${key}`;
+    if (!property.defaultValue || value[key] !== property.defaultValue[key]) {
+      themeCssVariables[propertyName] = value[key];
     } else {
       themeCssVariables[propertyName] = undefined;
     }
   });
 }
 
-export function fontsettingsFromCssVariable(question: Question, themeCssVariables: { [index: string]: string }, defaultColorVariable?: string, defaultPlaceholderColorVariable?: string): void {
-  if (!question) return;
+export function fontsettingsFromCssVariable(property: JsonObjectProperty, themeCssVariables: { [index: string]: string }, defaultColorVariableName?: string, defaultPlaceholderColorVariableName?: string): any {
+  if (!property) return;
 
-  const compositeQuestion = <QuestionCompositeModel>question;
-  const fontSettingsFromTheme = Object.keys(themeCssVariables).filter(key => key.indexOf(question.name.toLocaleLowerCase()) !== -1);
+  if (!property.defaultValue) property.defaultValue = {};
+  assign(property.defaultValue, {
+    color: themeCssVariables[defaultColorVariableName],
+    placeholdercolor: !!defaultPlaceholderColorVariableName ? themeCssVariables[defaultPlaceholderColorVariableName] : undefined,
+  });
+  if (!property.defaultValue["size"]) {
+    property.defaultValue["size"] = parseFloat(themeCssVariables["--sjs-font-size"]);
+  }
+
+  const result = { ...property.defaultValue };
+  const fontSettingsFromTheme = Object.keys(themeCssVariables).filter(key => key.indexOf(property.name.toLocaleLowerCase()) !== -1);
   fontSettingsFromTheme.forEach(key => {
     const propertyName = key.split("-").pop();
-    compositeQuestion.contentPanel.getQuestionByName(propertyName).value = themeCssVariables[key];
+    if (propertyName === "size" && themeCssVariables[key] !== undefined) {
+      result[propertyName] = parseFloat(themeCssVariables[key].toString());
+    } else {
+      result[propertyName] = themeCssVariables[key];
+    }
   });
 
-  if (fontSettingsFromTheme.length === 0) {
-    if (!!defaultColorVariable) {
-      compositeQuestion.contentPanel.getQuestionByName("color").value = defaultColorVariable;
-    }
-    if (!!defaultPlaceholderColorVariable) {
-      compositeQuestion.contentPanel.getQuestionByName("placeholdercolor").value = defaultPlaceholderColorVariable;
-    }
-  }
+  return result;
 }

packages/survey-creator-core/src/components/tabs/theme-model-definition.ts

@@ -0,0 +1,103 @@
+import { ISurveyPropertiesDefinition, ISurveyPropertyGridDefinition } from "../../question-editor/definition";
+
+const themeModelProperties: ISurveyPropertiesDefinition = {
+  "theme": {
+    properties: [
+      { name: "header", tab: "header" },
+
+      { name: "--sjs-general-backcolor-dim", tab: "background" },
+      { name: "backgroundImage", tab: "background" },
+      { name: "backgroundImageFit", tab: "background" },
+      { name: "backgroundImageAttachment", tab: "background" },
+      { name: "backgroundOpacity", tab: "background" },
+
+      { name: "generalPrimaryColor", tab: "appearancecolor" },
+      { name: "panelBackgroundTransparency", tab: "appearancecolor" },
+      { name: "questionBackgroundTransparency", tab: "appearancecolor" },
+      { name: "--sjs-primary-backcolor", tab: "appearanceprimarycolor" },
+      { name: "--sjs-primary-backcolor-dark", tab: "appearanceprimarycolor" },
+      { name: "--sjs-primary-backcolor-light", tab: "appearanceprimarycolor" },
+      { name: "--sjs-primary-forecolor", tab: "appearanceprimarycolor" },
+      { name: "--sjs-primary-forecolor-light", tab: "appearanceprimarycolor" },
+
+      { name: "--sjs-font-family", tab: "appearancefont" },
+      { name: "commonFontSize", tab: "appearancefont" },
+
+      { name: "commonScale", tab: "appearanceother" },
+      { name: "cornerRadius", tab: "appearanceother" },
+
+      { name: "pageTitle", tab: "appearancepage" },
+      { name: "pageDescription", tab: "appearancepage" },
+
+      { name: "questionPanel", tab: "appearancequestion" },
+      { name: "--sjs-shadow-small", tab: "appearancequestion" },
+      { name: "questionTitle", tab: "appearancequestion" },
+      { name: "questionDescription", tab: "appearancequestion" },
+
+      { name: "editorPanel", tab: "appearanceinput" },
+      { name: "--sjs-shadow-inner", tab: "appearanceinput" },
+      { name: "editorFont", tab: "appearanceinput" },
+
+      { name: "--sjs-border-default", tab: "appearancelines" },
+      { name: "--sjs-border-light", tab: "appearancelines" },
+
+    ],
+    tabs: [
+      { name: "header", index: 100 },
+      { name: "background", index: 200 },
+      { name: "appearance", index: 300 },
+      { name: "appearancelines", parent: "appearance" },
+      { name: "appearanceinput", parent: "appearance" },
+      { name: "appearancequestion", parent: "appearance" },
+      { name: "appearancepage", parent: "appearance" },
+      { name: "appearanceother", parent: "appearance" },
+      { name: "appearancefont", parent: "appearance" },
+      { name: "appearancecolor", parent: "appearance" },
+      { name: "appearanceprimarycolor", parent: "appearance" },
+    ]
+  },
+  "headersettings@header": {
+    properties: [
+      { name: "headerView" },
+      { name: "logoPosition" },
+      { name: "surveyTitle" },
+      { name: "surveyDescription" },
+      { name: "height", tab: "layout" },
+      { name: "inheritWidthFrom", tab: "layout" },
+      { name: "textAreaWidth", tab: "layout" },
+
+      { name: "backgroundColorSwitch", tab: "background" },
+      { name: "backgroundColor", tab: "background" },
+      { name: "backgroundImage", tab: "background" },
+      { name: "backgroundImageFit", tab: "background" },
+      { name: "backgroundImageOpacity", tab: "background" },
+      { name: "overlapEnabled", tab: "background" },
+
+      { name: "headerTitle", tab: "header" },
+      { name: "headerDescription", tab: "header" },
+
+      { name: "logoPositionX", tab: "positions" },
+      { name: "logoPositionY", tab: "positions" },
+      { name: "titlePositionX", tab: "positions" },
+      { name: "titlePositionY", tab: "positions" },
+      { name: "descriptionPositionX", tab: "positions" },
+      { name: "descriptionPositionY", tab: "positions" },
+    ],
+    tabs: [
+      { name: "settings" },
+      { name: "positions", parent: "settings" },
+      { name: "header", parent: "settings" },
+      { name: "background", parent: "settings" },
+      { name: "layout", parent: "settings" },
+    ]
+  },
+};
+
+export const themeModelPropertyGridDefinition: ISurveyPropertyGridDefinition = {
+  autoGenerateProperties: true,
+  classes: themeModelProperties
+};
+
+export class ThemeModelEditorDefinition {
+  public static definition: ISurveyPropertiesDefinition = themeModelProperties;
+}