PR: Creator: V2: Icons: Issues: move out from core (#6095)

* work for the surveyjs/private-tasks#395 * Small refactor with new api * Fix icons sync with theme * Fixed unit tests --------- Co-authored-by: Dmitry Kuzin <[email protected]> Co-authored-by: tsv2013 <[email protected]>
surveyjs · Nov 22, 2024 · d4acba6 · d4acba6
1 parent 98b559d
commit d4acba6
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 23 deletions.
diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js
@@ -87,7 +87,7 @@ function isLightTheme(themeName) {
 }
 
 function writeTheme(themeName, cssVariables, variableName) {
-  const theme = { themeName, cssVariables };
+  const theme = { themeName, iconsSet: "v2", cssVariables };
   const themeJson = JSON.stringify(theme, null, 2);
   const result = `const Theme = ${themeJson};\nexport default Theme;\nexport const ${variableName} = Theme;`;
   fs.writeFileSync(_dirPath + themeName + ".ts", result);
@@ -99,7 +99,7 @@ function writeThemePalette(themeName, paletteName, cssVariables) {
   const variableName = [baseThemeVariable, capitalizedFirstLetter(paletteName)].join("");
   const isLight = isLightTheme(fileName);
 
-  const theme = { themeName: fileName, isLight: isLight, cssVariables: cssVariables };
+  const theme = { themeName: fileName, iconsSet: "v2", isLight: isLight, cssVariables: cssVariables };
   const themeJson = JSON.stringify(theme, null, 2);
   const importsString = `import { assign } from "./utils";\nimport { ${baseThemeVariable} } from "./${themeName}";\n`;
   const useImportString = `const themeCssVariables = {};\nassign(themeCssVariables, ${baseThemeVariable}.cssVariables, Theme.cssVariables);\nassign(Theme, { cssVariables: themeCssVariables });\n`;

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -6,7 +6,9 @@ import {
   dxSurveyService, ISurveyElement, PanelModelBase, surveyLocalization, QuestionMatrixDropdownModelBase, ITheme, Helpers,
   chooseFiles, createDropdownActionModel,
   CssClassBuilder,
-  SvgRegistry
+  SvgRegistry,
+  addIconsToThemeSet,
+  SvgThemeSets
 } from "survey-core";
 import { ICreatorPlugin, ISurveyCreatorOptions, settings, ICollectionItemAllowOperations } from "./creator-settings";
 import { editorLocalization } from "./editorLocalization";
@@ -60,12 +62,18 @@ import designTabSurveyThemeJSON from "./designTabSurveyThemeJSON";
 import { ICreatorTheme } from "./creator-theme/creator-themes";
 import { SurveyElementAdornerBase } from "./components/action-container-view-model";
 import { TabbedMenuContainer, TabbedMenuItem } from "./tabbed-menu";
-import { svgBundle } from "./svgbundle";
+
+import { iconsV1, iconsV2 } from "./svgbundle";
 
 require("./components/creator.scss");
 require("./components/string-editor.scss");
 require("./creator-theme/creator.scss");
 
+addIconsToThemeSet("v1", iconsV1);
+addIconsToThemeSet("v2", iconsV2);
+
+SvgRegistry.registerIcons(settings.useLegacyIcons ? iconsV1 : iconsV2);
+
 export interface IKeyboardShortcut {
   name?: string;
   affectedTab?: string;
@@ -1270,7 +1278,6 @@ export class SurveyCreatorModel extends Base
     this.tabbedMenu.locOwner = this;
     this.selectionHistoryControllerValue = new SelectionHistory(this);
     this.sidebar = new SidebarModel(this);
-    this.registerIcons();
     this.setOptions(this.options);
     this.patchMetadata();
     this.initSurveyWithJSON(undefined, false);
@@ -1588,20 +1595,6 @@ export class SurveyCreatorModel extends Base
   public getOptions(): ICreatorOptions {
     return this.options || {};
   }
-  protected registerIcons() {
-    let path;
-    if (settings.useLegacyIcons) {
-      SurveySettings.useLegacyIcons = true;
-      path = svgBundle.V1;
-    } else {
-      SurveySettings.useLegacyIcons = false;
-      path = svgBundle.V2;
-    }
-
-    if (!path) return;
-
-    SvgRegistry.registerIconsFromFolder(path);
-  }
   protected setOptions(options: ICreatorOptions): void {
     if (!options) options = {};
     const obsoleteOptions = {};
@@ -4001,6 +3994,7 @@ export class SurveyCreatorModel extends Base
     if (designerPlugin) {
       designerPlugin.setTheme();
     }
+
   }
   public syncTheme(theme: ICreatorTheme): void {
     if (!theme) return;
@@ -4009,6 +4003,8 @@ export class SurveyCreatorModel extends Base
     const newCssVariable = {};
     assign(newCssVariable, theme?.cssVariables);
     this.themeVariables = newCssVariable;
+    const iconsSetName = this.creatorTheme && this.creatorTheme["iconsSet"] ? this.creatorTheme["iconsSet"] : "v1";
+    SvgRegistry.registerIcons(SvgThemeSets[iconsSetName]);
   }
 
   public allowDragPages = false;

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
@@ -263,6 +263,12 @@ Serializer.addClass(
       type: "dropdown",
       name: "themeName",
       choices: PredefinedCreatorThemes.map(theme => ({ value: theme, text: getLocString("creatortheme.names." + theme) })),
+    },
+    {
+      type: "string",
+      visible: false,
+      name: "iconsSet",
+      default: "v1"
     }
   ],
   (json) => { return new CreatorThemeModel(); }

diff --git a/packages/survey-creator-core/src/creator-theme/creator-themes.ts b/packages/survey-creator-core/src/creator-theme/creator-themes.ts
@@ -3,6 +3,7 @@ import designTabSurveyThemeJSON from "../designTabSurveyThemeJSON";
 
 export interface ICreatorTheme {
   themeName?: string;
+  iconsSet?: string;
   cssVariables?: { [index: string]: string };
 }
 
@@ -23,6 +24,7 @@ assign(sc2020CssVariables, designTabSurveyThemeJSON.cssVariables, {
 export const CreatorThemes: { [index: string]: ICreatorTheme } = {
   "sc2020": {
     themeName: "sc2020",
-    cssVariables: sc2020CssVariables
+    cssVariables: sc2020CssVariables,
+    iconsSet: "v1"
   }
 };
diff --git a/packages/survey-creator-core/src/svgbundle.ts b/packages/survey-creator-core/src/svgbundle.ts
@@ -1,6 +1,12 @@
 export var svgBundle: {V1?: string, V2?: string} = {};
 
-if (typeof jest === "undefined") {
-  svgBundle.V1 = (<any>require).context("./images-v1", true, /\.svg$/);
-  svgBundle.V2 = (<any>require).context("./images-v2", true, /\.svg$/);
+function getIconsData(path) {
+  const icons: { [index: string]: string } = {};
+  path.keys().forEach((key: string) => {
+    icons[key.substring(2, key.length - 4).toLowerCase()] = path(key);
+  });
+  return icons;
 }
+
+export const iconsV1 = getIconsData((<any>require).context("./images-v1", true, /\.svg$/));
+export const iconsV2 = getIconsData((<any>require).context("./images-v2", true, /\.svg$/));