Create property grid on demand (#6610)

* Create property grid on demand

* Make sure survey in PropertyGridViewModel is not undefined

* Fix unit test

* Delay creating property grid survey

* Fix theme survey root css classes

Author: andrewtelnov

packages/survey-creator-core/src/components/tabs/designer-plugin.ts

@@ -59,7 +59,6 @@ export class TabDesignerPlugin implements ICreatorPlugin {
   }
   private updateTabControl() {
     if (this.showOneCategoryInPropertyGrid) {
-      this.updateTabControlActions();
       this.creator.sidebar.sideAreaComponentName = "svc-tab-control";
       this.creator.sidebar.sideAreaComponentData = this.tabControlModel;
     } else {
@@ -136,11 +135,6 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     if (this.creator.showCreatorThemeSettings) {
       this.themeModel.loadTheme(this.creator.creatorTheme);
       this.themePropertyGrid.obj = this.themeModel;
-      this.themePropertyGrid.survey.onUpdatePanelCssClasses.add((_, options) => {
-        options.cssClasses.panel.container += " spg-panel--group";
-      });
-      this.updateThemeChooserChoices();
-      this.updatePredefinedColorChoices();
     }
   }
   setTheme() {
@@ -149,20 +143,15 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     }
   }
 
-  private updateThemeChooserChoices(): void {
-    const themeChooser = this.themePropertyGrid.survey.getQuestionByName("themeName") as QuestionDropdownModel;
-    if (!!themeChooser) {
-      themeChooser.choices = PredefinedCreatorThemes.map(theme => ({ value: theme, text: getLocString("creatortheme.names." + theme) }));
-    }
-    this.themePropertyGrid.survey.runExpressions();
-  }
   private createCreatorThemeSettingsPage(creator: SurveyCreatorModel) {
     this.themeModel = new CreatorThemeModel();
     this.themePropertyGrid = new PropertyGridModel(undefined, creator, creatorThemeModelPropertyGridDefinition);
-    this.themePropertyGrid.survey.css.root += "svc-creator-theme-settings";
     this.themePropertyGrid.showOneCategoryInPropertyGrid = true;
     this.themePropertyGrid.surveyInstanceCreatedArea = "designer-tab:creator-settings";
     const themePropertyGridViewModel = new PropertyGridViewModel(this.themePropertyGrid, creator);
+    themePropertyGridViewModel.onNewSurveyCreatedCallback = () => {
+      this.onThemePropertyGridSurveyCreated();
+    };
     themePropertyGridViewModel.searchEnabled = false;
     this.themePropertyGridTab = this.creator.sidebar.addPage("creatorTheme", "svc-property-grid", themePropertyGridViewModel);
     this.themePropertyGridTab.caption = editorLocalization.getString("ed.creatorSettingTitle");
@@ -200,6 +189,19 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     });
     this.tabControlModel.bottomToolbar.setItems([settingsAction]);
   }
+  private onThemePropertyGridSurveyCreated() {
+    const survey = this.themePropertyGrid.survey;
+    survey.css.root += " svc-creator-theme-settings";
+    survey.onUpdatePanelCssClasses.add((_, options) => {
+      options.cssClasses.panel.container += " spg-panel--group";
+    });
+    const themeChooser = survey.getQuestionByName("themeName") as QuestionDropdownModel;
+    if (!!themeChooser) {
+      themeChooser.choices = PredefinedCreatorThemes.map(theme => ({ value: theme, text: getLocString("creatortheme.names." + theme) }));
+    }
+    survey.runExpressions();
+    this.updatePredefinedColorChoices();
+  }
 
   constructor(private creator: SurveyCreatorModel) {
     creator.addTab({ name: "designer", plugin: this, iconName: "icon-config" });
@@ -208,10 +210,10 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     this.showOneCategoryInPropertyGrid = creator.showOneCategoryInPropertyGrid;
     this.propertyGrid.showOneCategoryInPropertyGrid = this.showOneCategoryInPropertyGrid;
     this.propertyGrid.obj = creator.survey;
-    this.propertyGrid.onSetNewObjectCallback = () => {
+    this.propertyGridViewModel = new PropertyGridViewModel(this.propertyGrid, creator);
+    this.propertyGridViewModel.onNewSurveyCreatedCallback = () => {
       this.updateTabControlActions();
     };
-    this.propertyGridViewModel = new PropertyGridViewModel(this.propertyGrid, creator);
     this.propertyGridPlaceholderPage = this.creator.sidebar.addPage("propertyGridPlaceholder", "svc-property-grid-placeholder", this.propertyGridViewModel);
     this.propertyGridPlaceholderPage.caption = editorLocalization.getString("ed.surveySettings");
 

packages/survey-creator-core/src/property-grid/index.ts

@@ -819,8 +819,7 @@ export class PropertyGridModel {
   currentlySelectedPanel: PanelModel;
   currentlySelectedPage: PageModel;
   public onSetNewObjectCallback: () => void;
-
-  public objValueChangedCallback: () => void;
+  public onNewSurveyCreatedCallback: () => void;
   public changedFromActionCallback: (obj: Base, propertyName: string) => void;
   public refresh(): void {
     this.setObj(this.objValue);
@@ -883,6 +882,9 @@ export class PropertyGridModel {
   }
   private setObj(value: Base) {
     this.objValue = value;
+    if(this.onSetNewObjectCallback) {
+      this.onSetNewObjectCallback();
+    }
     this.classNameProperty = !!this.obj
       ? PropertyJSONGenerator.getClassNameProperty(this.obj)
       : "";
@@ -893,24 +895,32 @@ export class PropertyGridModel {
     this.titleActionsCreator = !!this.obj
       ? new PropertyGridTitleActionsCreator(this.obj, this.options)
       : undefined;
-    var json = this.getSurveyJSON();
+    if(!this.surveyValue) return;
+    this.clearSurveyValue();
+    this.createSurveyValue();
+  }
+  private clearSurveyValue() {
+    this.surveyValue.onValidateQuestion.clear();
+    this.surveyValue.onValueChanging.clear();
+    this.surveyValue.onValueChanged.clear();
+    this.surveyValue.onMatrixCellValueChanging.clear();
+    this.surveyValue.onMatrixCellValidate.clear();
+    this.surveyValue.onMatrixCellValueChanged.clear();
+    this.surveyValue.editingObj = undefined;
+    this.surveyValue.data = {};
+    this.surveyValue.dispose();
+  }
+  private createSurveyValue(): void {
+    const json = this.getSurveyJSON();
     if (this.options.readOnly) {
       json.mode = "display";
     }
-    if (!!this.surveyValue) {
-      this.surveyValue.onValidateQuestion.clear();
-      this.surveyValue.onValueChanging.clear();
-      this.surveyValue.onValueChanged.clear();
-      this.surveyValue.onMatrixCellValueChanging.clear();
-      this.surveyValue.onMatrixCellValidate.clear();
-      this.surveyValue.onMatrixCellValueChanged.clear();
-      this.surveyValue.editingObj = undefined;
-      this.surveyValue.data = {};
-      this.surveyValue.dispose();
-    }
     this.surveyValue = this.createSurvey(json, (survey: SurveyModel): void => {
       this.onCreateSurvey(survey);
     });
+    if (this.onNewSurveyCreatedCallback) {
+      this.onNewSurveyCreatedCallback();
+    }
     if (!this.obj) return;
     this.survey.onValueChanged.add((sender, options) => {
       this.onValueChanged(options);
@@ -975,9 +985,6 @@ export class PropertyGridModel {
       }
     });
     this.survey.editingObj = this.obj;
-    if (this.objValueChangedCallback) {
-      this.objValueChangedCallback();
-    }
     this.updateDependedPropertiesEditors();
 
     if (this.showOneCategoryInPropertyGrid) {
@@ -1082,6 +1089,9 @@ export class PropertyGridModel {
     this.optionsValue = !!val ? val : new EmptySurveyCreatorOptions();
   }
   public get survey() {
+    if(!this.surveyValue) {
+      this.createSurveyValue();
+    }
     return this.surveyValue;
   }
   public showOneCategoryInPropertyGrid: boolean = false;
@@ -1124,6 +1134,7 @@ export class PropertyGridModel {
     });
   }
   public expandCategoryIfNeeded(): void {
+    if(!this.surveyValue) return;
     const expandedTabName = creatorSettings.propertyGrid.defaultExpandedTabName;
     if (!!expandedTabName && !this.getPropertyGridExpandedCategory()) {
       const panel = <PanelModel>this.survey.getPanelByName(expandedTabName);
@@ -1218,9 +1229,6 @@ export class PropertyGridModel {
       this.classNameValue !== options.value
     ) {
       this.setObj(this.obj);
-      if(this.onSetNewObjectCallback) {
-        this.onSetNewObjectCallback();
-      }
       if (!!this.survey) {
         const question = this.survey.getQuestionByName(options.name);
         if (!!question) {

packages/survey-creator-core/src/property-grid/property-grid-view-model.ts

@@ -14,11 +14,11 @@ export class PropertyGridViewModel extends Base {
   public prevSelectionAction: Action;
   public objectSelectionAction: MenuButton;
   public searchManager = new SearchManagerPropertyGrid();
+  public onNewSurveyCreatedCallback: () => void;
   private selectorPopupModel: PopupModel;
 
   @property() hasPrev: boolean;
   @property() hasNext: boolean;
-  @property() survey: SurveyModel;
   @property() selectedElementName: string;
   @property({
     onSet: (newValue: boolean, target: PropertyGridViewModel) => {
@@ -31,8 +31,11 @@ export class PropertyGridViewModel extends Base {
     super();
     this.searchEnabled = settings.propertyGrid.enableSearch;
     this.selectedElementName = this.getTitle();
-    this.propertyGridModel.objValueChangedCallback = () => {
-      this.onSurveyChanged();
+    this.propertyGridModel.onSetNewObjectCallback = () => {
+      this.onSurveyObjChanged();
+    };
+    this.propertyGridModel.onNewSurveyCreatedCallback = () => {
+      this.onNewSurveyCreated();
     };
     this.propertyGridModel.changedFromActionCallback = (obj: Base, propertyName: string) => {
       if (!!this.selectionController) {
@@ -46,9 +49,14 @@ export class PropertyGridViewModel extends Base {
         this.selectorPopupModel.horizontalPosition = this.creator.sidebarLocation == "right" ? "left" : "right";
       }
     });
-    this.onSurveyChanged();
+    this.onSurveyObjChanged();
+  }
+  public get survey(): SurveyModel {
+    return this.getPropertyValue("survey", undefined, () => this.propertyGridModel.survey);
+  }
+  public set survey(val: SurveyModel) {
+    this.setPropertyValue("survey", val);
   }
-
   public get rootCss(): string {
     return new CssClassBuilder()
       .append("spg-container")
@@ -71,7 +79,14 @@ export class PropertyGridViewModel extends Base {
     return this.creator.selectionHistoryController;
   }
 
-  private onSurveyChanged() {
+  private onSurveyObjChanged() {
+    this.updateTitle();
+    if (this.selectionController) {
+      this.hasPrev = this.selectionController.hasPrev;
+      this.hasNext = this.selectionController.hasNext;
+    }
+  }
+  private onNewSurveyCreated() {
     this.survey = this.propertyGridModel.survey;
     this.searchManager.setSurvey(this.survey);
     if (!!this.survey) {
@@ -81,10 +96,8 @@ export class PropertyGridViewModel extends Base {
         }
       });
     }
-    this.updateTitle();
-    if (this.selectionController) {
-      this.hasPrev = this.selectionController.hasPrev;
-      this.hasNext = this.selectionController.hasNext;
+    if(this.onNewSurveyCreatedCallback) {
+      this.onNewSurveyCreatedCallback();
     }
   }
   private updateTitle() {

packages/survey-creator-core/tests/creator-base-1.tests.ts

@@ -4088,6 +4088,7 @@ test("Initial Property Grid category expanded state", (): any => {
   const defaultJSON = settings.defaultNewSurveyJSON;
   settings.defaultNewSurveyJSON = {};
   creator.JSON = {};
+  expect(creator.propertyGrid).toBeTruthy();
   expect(getCategoryName()).toBeFalsy();
   creator.survey.addNewPage("page1");
   creator.selectElement(creator.survey.getPageByName("page1"));

packages/survey-creator-core/tests/property-grid/property-grid-viewmodel.tests.ts

@@ -184,4 +184,11 @@ test("Check object selector popup's display mode", () => {
   model = new PropertyGridViewModel(propertyGrid, creator);
   expect(model.objectSelectionAction.popupModel.displayMode).toEqual("overlay");
   _setIsTouch(false);
+});
+test("Create the property grid survey on request", () => {
+  const creator = new CreatorTester();
+  const propertyGrid = creator["designerPropertyGrid"];
+  const model = new PropertyGridViewModel(propertyGrid, creator);
+  expect(model.getPropertyValue("survey")).toBeFalsy();
+  expect(model.survey).toBeTruthy();
 });

packages/survey-creator-core/tests/property-grid/property-grid.tests.ts

@@ -612,22 +612,23 @@ test("Change editingObj of the property grid", () => {
   propertyGrid.obj = question2;
   expect(propertyGrid.survey.getValue("name")).toEqual("q2"); //"name property value is set for the second editingObj"
 });
-test("Check objValueChangedCallback", () => {
-  var count = 0;
-  var objValueChangedCallback = () => {
+test("Check onNewSurveyCreatedCallback", () => {
+  let count = 0;
+  const onNewSurveyCreatedCallback = () => {
     count++;
   };
-  var question = new QuestionTextModel("q1");
-  var question2 = new QuestionTextModel("q2");
-  var propertyGrid = new PropertyGridModelTester(question);
-  propertyGrid.objValueChangedCallback = objValueChangedCallback;
-  expect(count).toEqual(0); //"objValueChangedCallback isn't called");
+  const question = new QuestionTextModel("q1");
+  const question2 = new QuestionTextModel("q2");
+  const propertyGrid = new PropertyGridModelTester(question);
+  propertyGrid.onNewSurveyCreatedCallback = onNewSurveyCreatedCallback;
+  expect(count).toEqual(0); //"onNewSurveyCreatedCallback isn't called");
   propertyGrid.obj = question2;
-  expect(count).toEqual(1); //"objValueChangedCallback is called after changing obj value"
+  expect(propertyGrid.survey).toBeTruthy();
+  expect(count).toEqual(1); //"onNewSurveyCreatedCallback is called after changing obj value"
   propertyGrid.obj = question2;
-  expect(count).toEqual(1); //"objValueChangedCallback isn't called after setting same obj value"
+  expect(count).toEqual(1); //"onNewSurveyCreatedCallback isn't called after setting same obj value"
   propertyGrid.obj = question;
-  expect(count).toEqual(2); //"objValueChangedCallback is called after changing obj value"
+  expect(count).toEqual(2); //"onNewSurveyCreatedCallback is called after changing obj value"
 });
 test("Support property visibleIf attribute", () => {
   var question = new QuestionCheckboxModel("q1");

packages/survey-creator-core/tests/side-bar.test.ts

@@ -69,6 +69,7 @@ test("showOneCategoryInPropertyGrid: showPlaceholder into property grid if surve
   expect(creator.sidebar.header.componentName).toEqual("svc-side-bar-header");
   expect(creator.sidebar.header.componentData).toEqual(creator.sidebar.header);
 
+  expect(creator.propertyGrid).toBeTruthy();
   let tabs = designerPlugin["tabControlModel"].topToolbar.actions;
   expect(tabs.length).toBe(10);
   expect(tabs.map(t => t.id).join(",")).toBe("general,logo,navigation,question,pages,logic,data,validation,showOnCompleted,timer");