Add some fixes for creator vue3 perfomance (#6091)

* Add some fixies for creator vue3 perfomance * Add some fixies for creator vue3 perfomance * Fix item value reset root element * Fix popups * Fix panel rendering when adorner is disposed * Fix f test * Fix page adorner disposing busy element
surveyjs · Nov 20, 2024 · f0cdcff · f0cdcff
1 parent 967d718
commit f0cdcff
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 87 deletions.
diff --git a/functionalTests/designer/page-navigator.ts b/functionalTests/designer/page-navigator.ts
@@ -76,6 +76,7 @@ test("PageNavigator shown if scrolling exists", async t => {
     .expect(Selector(".svc-page-navigator").visible).notOk()
     .click(getAddNewQuestionButton(1))
     .expect(Selector("span").withText("question2").visible).ok()
+    .wait(1000)
     .expect(Selector(".svc-page-navigator").visible).notOk()
     .click(getAddNewQuestionButton(2))
     .expect(Selector("span").withText("question3").visible).ok()

diff --git a/packages/survey-creator-core/src/components/action-container-view-model.ts b/packages/survey-creator-core/src/components/action-container-view-model.ts
@@ -300,9 +300,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
 
   protected detachElement(surveyElement: T): void {
     if (surveyElement) {
-      if (surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName) === this && !surveyElement.isDisposed) {
-        surveyElement.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, null);
-      }
+      surveyElement.setPropertyValue(SurveyElementAdornerBase.AdornerValueName, null);
       surveyElement.unRegisterFunctionOnPropertyValueChanged("isSelectedInDesigner", "questionSelected");
       this.cleanActionsContainer();
     }
@@ -322,7 +320,7 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
     }
   }
   protected setSurveyElement(surveyElement: T): void {
-    this.detachElement(this.surveyElement);
+    this.detachOnlyMyElement();
     this.surveyElement = surveyElement;
     this.attachElement(this.surveyElement);
   }
@@ -342,9 +340,14 @@ export class SurveyElementAdornerBase<T extends SurveyElement = SurveyElement> e
       this.creator.expandCollapseManager.add(this);
     }
   }
+  private detachOnlyMyElement() {
+    if (this.surveyElement && this.surveyElement.getPropertyValue(SurveyElementAdornerBase.AdornerValueName) === this && !this.surveyElement.isDisposed) {
+      this.detachElement(this.surveyElement);
+    }
+  }
   public detachFromUI() {
     this.rootElement = undefined;
-    this.detachElement(this.surveyElement);
+    this.detachOnlyMyElement();
     this.surveyElement = undefined;
     this.creator.sidebar.onPropertyChanged.remove(this.sidebarFlyoutModeChangedFunc);
     this.creator.expandCollapseManager.remove(this);

diff --git a/packages/survey-creator-core/src/components/page.ts b/packages/survey-creator-core/src/components/page.ts
@@ -99,6 +99,7 @@ export class PageAdorner extends SurveyElementAdornerBase<PageModel> {
       surveyElement.unRegisterFunctionOnPropertiesValueChanged(["elements"], "updatePlaceholder");
       surveyElement.unRegisterFunctionOnPropertiesValueChanged(["dragTypeOverMe", "isDragMe"], "dragOver");
       surveyElement.unRegisterFunctionOnPropertiesValueChanged(["title", "description"], "add_ghost");
+      surveyElement.unRegisterFunctionOnPropertiesValueChanged(["visibleRows"], "updatePlaceholder");
       surveyElement["surveyChangedCallback"] = undefined;
     }
     super.detachElement(surveyElement);

diff --git a/packages/survey-creator-core/src/components/question.ts b/packages/survey-creator-core/src/components/question.ts
@@ -23,7 +23,8 @@ import {
   Helpers,
   PanelModel,
   classesToSelector,
-  QuestionFactory
+  QuestionFactory,
+  PopupModel
 } from "survey-core";
 import { SurveyCreatorModel } from "../creator-base";
 import { editorLocalization, getLocString } from "../editorLocalization";
@@ -669,13 +670,12 @@ export class QuestionAdornerViewModel extends SurveyElementAdornerBase {
       allowSelection: true,
       horizontalPosition: "center",
       cssClass: "svc-creator-popup",
-      onShow: () => {
+    });
+    newAction.popupModel.onVisibilityChanged.add((_: PopupModel, opt: { model: PopupModel, isVisible: boolean }) => {
+      if(opt.isVisible) {
         const listModel = newAction.popupModel.contentComponentData.model;
         options.updateListModel(listModel);
-        setTimeout(() => {
-          newAction.popupModel.recalculatePosition(true);
-        }, 1);
-      },
+      }
     });
     const listModel = newAction.popupModel.contentComponentData.model;
     // options.updateListModel(listModel);

diff --git a/packages/survey-creator-core/src/creator-base.ts b/packages/survey-creator-core/src/creator-base.ts
@@ -3754,21 +3754,19 @@ export class SurveyCreatorModel extends Base
       title: this.getLocString("ed.addNewQuestion"),
     }, {
       items: [],
-      onShow: () => {
-        const listModel = newAction.popupModel.contentComponentData.model;
-        listModel.setItems(getActions());
-        setTimeout(() => {
-          newAction.popupModel.recalculatePosition(true);
-        }, 1);
-      },
       allowSelection: false,
       cssClass: "svc-creator-popup",
       verticalPosition: "bottom",
       horizontalPosition: "center",
       displayMode: this.isTouch ? "overlay" : "popup"
     });
     newAction.popupModel.getTargetCallback = undefined;
-
+    newAction.popupModel.onVisibilityChanged.add((_: PopupModel, opt: { model: PopupModel, isVisible: boolean }) => {
+      if(opt.isVisible) {
+        const listModel = newAction.popupModel.contentComponentData.model;
+        listModel.setItems(getActions());
+      }
+    });
     return newAction;
   }
 

diff --git a/packages/survey-creator-vue/src/adorners/ItemValue.vue b/packages/survey-creator-vue/src/adorners/ItemValue.vue
@@ -69,7 +69,14 @@ import {
   ItemValueWrapperViewModel,
   type SurveyCreatorModel,
 } from "survey-creator-core";
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from "vue";
 
 const root = ref<HTMLElement>();
 const props = defineProps<{
@@ -102,6 +109,9 @@ onMounted(() => {
     item.value.setRootElement(root.value);
   }
 });
+onUnmounted(() => {
+  item.value.setRootElement(undefined as any);
+});
 const adorner = useCreatorModel(
   () =>
     new ItemValueWrapperViewModel(creator.value, question.value, item.value),
@@ -113,6 +123,5 @@ const adorner = useCreatorModel(
 
 onBeforeUnmount(() => {
   stopWatch();
-  item.value.setRootElement(undefined as any);
 });
 </script>
diff --git a/packages/survey-creator-vue/src/adorners/Panel.vue b/packages/survey-creator-vue/src/adorners/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="adorner"
+    v-if="adorner && !adorner.isDisposed"
     class="svc-question__adorner"
     :class="adorner.rootCss()"
     @dblclick="(e) => adorner.dblclick(e)"
@@ -14,12 +14,12 @@
       :class="adorner.cssCollapsedHiddenHeader"
     >
       <SvComponent
-          v-if="!!adorner.element.hasTitle"
-          :is="'survey-element-title'"
-          :element="adorner.element"
+        v-if="!!adorner.element.hasTitle"
+        :is="'survey-element-title'"
+        :element="adorner.element"
       />
       <div v-else :class="adorner.cssCollapsedHiddenTitle">
-        <span  class="svc-fake-title">{{ adorner.element.name }}</span>
+        <span class="svc-fake-title">{{ adorner.element.name }}</span>
       </div>
     </div>
     <div
@@ -65,64 +65,64 @@
         </div>
       </div>
       <template v-if="adorner.needToRenderContent">
-      <SvComponent :is="componentName" v-bind="componentData"></SvComponent>
-      <div
-        v-if="adorner.isEmptyElement"
-        class="svc-panel__placeholder_frame-wrapper"
-      >
-        <div class="svc-panel__placeholder_frame">
-          <div class="svc-panel__placeholder">
-            {{ adorner.placeholderText }}
+        <SvComponent :is="componentName" v-bind="componentData"></SvComponent>
+        <div
+          v-if="adorner.isEmptyElement"
+          class="svc-panel__placeholder_frame-wrapper"
+        >
+          <div class="svc-panel__placeholder_frame">
+            <div class="svc-panel__placeholder">
+              {{ adorner.placeholderText }}
+            </div>
+            <div
+              v-if="adorner.showAddQuestionButton"
+              class="svc-panel__add-new-question svc-action-button"
+              v-key2click
+              @click="addNewQuestion"
+            >
+              <SvComponent
+                :is="'sv-svg-icon'"
+                class="svc-panel__add-new-question-icon"
+                :iconName="'icon-add_24x24'"
+                :size="'auto'"
+              ></SvComponent>
+              <span class="svc-add-new-item-button__text">
+                {{ adorner.addNewQuestionText }}
+              </span>
+            </div>
           </div>
-          <div
-            v-if="adorner.showAddQuestionButton"
-            class="svc-panel__add-new-question svc-action-button"
-            v-key2click
-            @click="addNewQuestion"
-          >
+        </div>
+        <div
+          v-if="!adorner.isEmptyElement && adorner.showAddQuestionButton"
+          class="svc-panel__add-new-question-container"
+        >
+          <div class="svc-panel__question-type-selector-popup">
             <SvComponent
-              :is="'sv-svg-icon'"
-              class="svc-panel__add-new-question-icon"
-              :iconName="'icon-add_24x24'"
-              :size="'auto'"
+              :is="'sv-popup'"
+              :model="adorner.questionTypeSelectorModel.popupModel"
+            ></SvComponent>
+          </div>
+          <div class="svc-panel__add-new-question-wrapper">
+            <SvComponent
+              :is="'svc-add-new-question-btn'"
+              :item="{ data: adorner }"
+              :buttonClass="'svc-action-button'"
+              :renderPopup="false"
             ></SvComponent>
-            <span class="svc-add-new-item-button__text">
-              {{ adorner.addNewQuestionText }}
-            </span>
           </div>
         </div>
-      </div>
-      <div
-        v-if="!adorner.isEmptyElement && adorner.showAddQuestionButton"
-        class="svc-panel__add-new-question-container"
-      >
-        <div class="svc-panel__question-type-selector-popup">
-          <SvComponent
-            :is="'sv-popup'"
-            :model="adorner.questionTypeSelectorModel.popupModel"
-          ></SvComponent>
-        </div>
-        <div class="svc-panel__add-new-question-wrapper">
+
+        <div
+          v-if="adorner.element.isInteractiveDesignElement"
+          class="svc-question__content-actions"
+          @focusin="adorner.select(adorner, $event)"
+        >
           <SvComponent
-            :is="'svc-add-new-question-btn'"
-            :item="{ data: adorner }"
-            :buttonClass="'svc-action-button'"
-            :renderPopup="false"
+            :is="'sv-action-bar'"
+            :model="adorner.actionContainer"
+            :handleClick="false"
           ></SvComponent>
         </div>
-      </div>
-
-      <div
-        v-if="adorner.element.isInteractiveDesignElement"
-        class="svc-question__content-actions"
-        @focusin="adorner.select(adorner, $event)"
-      >
-        <SvComponent
-          :is="'sv-action-bar'"
-          :model="adorner.actionContainer"
-          :handleClick="false"
-        ></SvComponent>
-      </div>
       </template>
     </div>
   </div>

diff --git a/packages/survey-creator-vue/src/adorners/QuestionBase.vue b/packages/survey-creator-vue/src/adorners/QuestionBase.vue
@@ -100,12 +100,7 @@
       ></SvComponent>
       <div
         class="svc-question__content-actions"
-        v-on:focusin="
-          (e) => {
-            model.select(model, e);
-            e.stopPropagation();
-          }
-        "
+        v-on:focusin="onFocusIn"
       >
         <SvComponent
           :is="'sv-action-bar'"
@@ -155,4 +150,8 @@ onMounted(() => {
     model.value.rootElement = root.value;
   }
 });
+const onFocusIn = (e: any) => {
+  model.value.select(model.value, e);
+  e.stopPropagation();
+}
 </script>
diff --git a/packages/survey-creator-vue/src/header/Logo.vue b/packages/survey-creator-vue/src/header/Logo.vue
@@ -63,7 +63,7 @@ import { key2ClickDirective as vKey2click } from "survey-vue3-ui";
 import { SvComponent } from "survey-vue3-ui";
 import { useCreatorModel } from "@/creator-model";
 import { SurveyCreatorModel, LogoImageViewModel } from "survey-creator-core";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 const props = defineProps<{ data: SurveyCreatorModel }>();
 const creator = computed(() => props.data);
 const survey = computed(() => creator.value.survey);
@@ -92,4 +92,9 @@ onMounted(() => {
     model.value.root = root.value;
   }
 });
+onUnmounted(() => {
+  if (model.value) {
+    model.value.root = undefined as any;
+  }
+});
 </script>
diff --git a/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue b/packages/survey-creator-vue/src/page-navigator/PageNavigator.vue
@@ -18,8 +18,8 @@
     <div>
       <SvComponent
         :is="'svc-page-navigator-item'"
-        v-for="(item, index) in model.visibleItems"
-        :key="index"
+        v-for="item in model.visibleItems"
+        :key="item.id"
         :model="item"
       ></SvComponent>
     </div>
@@ -34,7 +34,7 @@ import {
   PageNavigatorViewModel,
   type PagesController,
 } from "survey-creator-core";
-import { onMounted, onUnmounted, ref } from "vue";
+import { onBeforeUnmount, onMounted, onUnmounted, ref } from "vue";
 
 const props = defineProps<{
   pagesController: PagesController;
@@ -64,13 +64,16 @@ onMounted(() => {
   }
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   const el = root.value;
   const modelValue = model.value;
   if (!!el && !!el.parentElement?.parentElement?.parentElement) {
     el.parentElement.parentElement.parentElement.onscroll = undefined as any;
   }
   modelValue.stopItemsContainerHeightObserver();
+});
+onUnmounted(() => {
+  const modelValue = model.value;
   modelValue.dispose();
 });
 </script>
diff --git a/packages/survey-creator-vue/src/tabbed-menu/TabbedMenu.vue b/packages/survey-creator-vue/src/tabbed-menu/TabbedMenu.vue
@@ -27,5 +27,6 @@ onMounted(() => {
 });
 onUnmounted(() => {
   responsivityManager.dispose();
+  responsivityManager = undefined as any;
 });
 </script>