From 70624656154b64f29a9922e4defb92a0853c0cbd Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Mon, 18 Nov 2024 17:19:39 +0400 Subject: [PATCH 1/4] Add some fixies for vue3 creator perfomance --- packages/survey-core/src/mask/input_element_adapter.ts | 1 + packages/survey-core/src/question_text.ts | 1 + packages/survey-core/src/utils/text-area.ts | 5 ++++- packages/survey-vue3-ui/src/PanelDynamic.vue | 6 +++--- packages/survey-vue3-ui/src/Survey.vue | 1 + packages/survey-vue3-ui/src/base.ts | 6 +++--- packages/survey-vue3-ui/src/components/TextArea.vue | 3 +++ packages/survey-vue3-ui/src/components/list/List.vue | 8 +++++++- 8 files changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/survey-core/src/mask/input_element_adapter.ts b/packages/survey-core/src/mask/input_element_adapter.ts index 20f6261a6b..caa2fda1e3 100644 --- a/packages/survey-core/src/mask/input_element_adapter.ts +++ b/packages/survey-core/src/mask/input_element_adapter.ts @@ -84,6 +84,7 @@ export class InputElementAdapter { } public dispose(): void { this.removeInputEventListener(); + this.inputElement = undefined as any; this.inputMaskInstance.onPropertyChanged.remove(this.inputMaskInstancePropertyChangedHandler); } } \ No newline at end of file diff --git a/packages/survey-core/src/question_text.ts b/packages/survey-core/src/question_text.ts index 9376a61268..b8f193d34e 100644 --- a/packages/survey-core/src/question_text.ts +++ b/packages/survey-core/src/question_text.ts @@ -659,6 +659,7 @@ export class QuestionTextModel extends QuestionTextBase { } public beforeDestroyQuestionElement(el: HTMLElement) { this.deleteMaskAdapter(); + this.input = undefined; } } diff --git a/packages/survey-core/src/utils/text-area.ts b/packages/survey-core/src/utils/text-area.ts index d850bf436b..b3a43af262 100644 --- a/packages/survey-core/src/utils/text-area.ts +++ b/packages/survey-core/src/utils/text-area.ts @@ -54,6 +54,9 @@ export class TextAreaModel { this.updateElement(); } } + public resetElement() { + this.element = undefined as any; + } public getTextValue(): string { if (!!this.options.getTextValue) @@ -144,10 +147,10 @@ export class TextAreaModel { if (this.options.ariaErrormessage) return this.options.ariaErrormessage(); } - public dispose(): void { if (this.question) { this.question.unRegisterFunctionOnPropertyValueChanged(this.options.propertyName, "__textarea"); } + this.resetElement(); } } \ No newline at end of file diff --git a/packages/survey-vue3-ui/src/PanelDynamic.vue b/packages/survey-vue3-ui/src/PanelDynamic.vue index bec81b3d4c..2e3594d245 100644 --- a/packages/survey-vue3-ui/src/PanelDynamic.vue +++ b/packages/survey-vue3-ui/src/PanelDynamic.vue @@ -107,9 +107,9 @@ useQuestion( }; }, (value) => { - value.panelCountChangedCallback = () => {}; - value.currentIndexChangedCallback = () => {}; - value.renderModeChangedCallback = () => {}; + value.panelCountChangedCallback = undefined as any; + value.currentIndexChangedCallback = undefined as any; + value.renderModeChangedCallback = undefined as any; } ); diff --git a/packages/survey-vue3-ui/src/Survey.vue b/packages/survey-vue3-ui/src/Survey.vue index dc3ca54a27..8fb8a997f2 100644 --- a/packages/survey-vue3-ui/src/Survey.vue +++ b/packages/survey-vue3-ui/src/Survey.vue @@ -209,6 +209,7 @@ onMounted(() => { onUnmounted(() => { vueSurvey.value.stopTimer(); + vueSurvey.value.rootElement = undefined as any; vueSurvey.value.renderCallback = undefined as any; }); diff --git a/packages/survey-vue3-ui/src/base.ts b/packages/survey-vue3-ui/src/base.ts index 3fb4be1e39..5145c39c63 100644 --- a/packages/survey-vue3-ui/src/base.ts +++ b/packages/survey-vue3-ui/src/base.ts @@ -147,7 +147,7 @@ export function useQuestion( props.question.beforeDestroyQuestionElement(root.value); }); } - +function noop() {} export function useLocString( getLocString: () => LocalizableString ): Ref { @@ -161,7 +161,7 @@ export function useLocString( const stopWatch = watch( getLocString, (newValue, oldValue) => { - if (oldValue) oldValue.onChanged = () => {}; + if (oldValue) oldValue.onChanged = noop; setupOnChangedCallback(newValue); }, { immediate: true } @@ -169,7 +169,7 @@ export function useLocString( onBeforeUnmount(() => { const locString = getLocString(); if (locString) { - locString.onChanged = () => {}; + locString.onChanged = noop; } stopWatch(); }); diff --git a/packages/survey-vue3-ui/src/components/TextArea.vue b/packages/survey-vue3-ui/src/components/TextArea.vue index 1436c1ff06..e9780cdeb0 100644 --- a/packages/survey-vue3-ui/src/components/TextArea.vue +++ b/packages/survey-vue3-ui/src/components/TextArea.vue @@ -61,4 +61,7 @@ onMounted(() => { onUpdated(() => { props.model.setElement(contentElement.value); }); +onUnmounted(() => { + props.model.resetElement(); +}); diff --git a/packages/survey-vue3-ui/src/components/list/List.vue b/packages/survey-vue3-ui/src/components/list/List.vue index c41e2dedae..0601cfc20e 100644 --- a/packages/survey-vue3-ui/src/components/list/List.vue +++ b/packages/survey-vue3-ui/src/components/list/List.vue @@ -76,7 +76,7 @@ import SvComponent from "@/SvComponent.vue"; import { useBase, useComputedArray } from "@/base"; import type { ListModel } from "survey-core"; -import { onMounted, ref } from "vue"; +import { onMounted, ref, onUnmounted } from "vue"; const props = defineProps<{ model: ListModel }>(); const listContainerElement = ref(null as any); @@ -100,4 +100,10 @@ useBase(() => props.model); onMounted(() => { props.model.initListContainerHtmlElement(listContainerElement.value); }); +onUnmounted(() => { + if (props.model) { + props.model.removeScrollEventListener(); + props.model.initListContainerHtmlElement(undefined as any); + } +}); From 27e449bf080a59700481fe2e368b25617fe04099 Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Tue, 19 Nov 2024 18:09:20 +0400 Subject: [PATCH 2/4] Add some fixies for creator vue3 perfomance --- packages/survey-core/src/dropdownListModel.ts | 1 + packages/survey-core/src/survey.ts | 5 +++++ packages/survey-vue3-ui/src/Survey.vue | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/survey-core/src/dropdownListModel.ts b/packages/survey-core/src/dropdownListModel.ts index cc4504aafe..95bf748c98 100644 --- a/packages/survey-core/src/dropdownListModel.ts +++ b/packages/survey-core/src/dropdownListModel.ts @@ -633,6 +633,7 @@ export class DropdownListModel extends Base { if (!!this.popupModel) { this.popupModel.dispose(); } + this.htmlCleanerElement = undefined; } scrollToFocusedItem(): void { diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts index f0229003a8..578bb0d76b 100644 --- a/packages/survey-core/src/survey.ts +++ b/packages/survey-core/src/survey.ts @@ -4976,6 +4976,11 @@ export class SurveyModel extends SurveyElementCore this.rootElement = htmlElement; this.addScrollEventListener(); } + beforeDestroySurveyElement() { + this.destroyResizeObserver(); + this.removeScrollEventListener(); + this.rootElement = undefined; + } /** * An event that is raised when the survey's width or height is changed. */ diff --git a/packages/survey-vue3-ui/src/Survey.vue b/packages/survey-vue3-ui/src/Survey.vue index 8fb8a997f2..7d558074c3 100644 --- a/packages/survey-vue3-ui/src/Survey.vue +++ b/packages/survey-vue3-ui/src/Survey.vue @@ -209,7 +209,7 @@ onMounted(() => { onUnmounted(() => { vueSurvey.value.stopTimer(); - vueSurvey.value.rootElement = undefined as any; + vueSurvey.value.beforeDestroySurveyElement(); vueSurvey.value.renderCallback = undefined as any; }); From 9a486fe8a80041828b707e245f327cc658bbf1c0 Mon Sep 17 00:00:00 2001 From: Dmitry Kuzin Date: Tue, 19 Nov 2024 19:20:38 +0400 Subject: [PATCH 3/4] Fix item's reseting root element --- .../survey-vue3-ui/src/selectbase-item.ts | 31 ++++++++----------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/packages/survey-vue3-ui/src/selectbase-item.ts b/packages/survey-vue3-ui/src/selectbase-item.ts index c1f58a050f..f8245a2cfe 100644 --- a/packages/survey-vue3-ui/src/selectbase-item.ts +++ b/packages/survey-vue3-ui/src/selectbase-item.ts @@ -1,5 +1,5 @@ import type { ItemValue, QuestionSelectBase } from "survey-core"; -import { onMounted, type Ref } from "vue"; +import { onMounted, onUnmounted, type Ref } from "vue"; import { useBase } from "./base"; export function useSelectBaseItem( @@ -14,24 +14,19 @@ export function useSelectBaseItem( } } }); - useBase( - getItem, - (newValue, oldValue) => { - if (!getQuestion().isDesignMode) { - if (newValue && root.value) { - newValue.setRootElement(root.value); - } - if (oldValue) { - oldValue.setRootElement(undefined as any); - } + onUnmounted(() => { + if (!getQuestion().isDesignMode) { + getItem().setRootElement(undefined as any); + } + }); + useBase(getItem, (newValue, oldValue) => { + if (!getQuestion().isDesignMode) { + if (newValue && root.value) { + newValue.setRootElement(root.value); } - }, - () => { - const item = getItem(); - const question = getQuestion(); - if (question && item && question.isDesignMode) { - item.setRootElement(undefined as any); + if (oldValue) { + oldValue.setRootElement(undefined as any); } } - ); + }); } From fb19134407a72a36061cc2696014b8c3648620e1 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Wed, 20 Nov 2024 14:08:52 +0400 Subject: [PATCH 4/4] Fix setActionsMode is not updating mode for actions with disableShrink: true (#9078) --- .../src/actions/adaptive-container.ts | 7 +++++-- packages/survey-core/tests/responsivityTests.ts | 17 +++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/survey-core/src/actions/adaptive-container.ts b/packages/survey-core/src/actions/adaptive-container.ts index dfce6891a0..dbb05bd665 100644 --- a/packages/survey-core/src/actions/adaptive-container.ts +++ b/packages/survey-core/src/actions/adaptive-container.ts @@ -152,8 +152,11 @@ export class AdaptiveActionContainer extends ActionCo } public setActionsMode(mode: actionModeType) { this.actions.forEach((action) => { - if(mode == "small" && action.disableShrink) return; - action.mode = mode; + if(mode == "small" && action.disableShrink) { + action.mode = "large"; + } else { + action.mode = mode; + } }); } public dispose(): void { diff --git a/packages/survey-core/tests/responsivityTests.ts b/packages/survey-core/tests/responsivityTests.ts index ed3d686050..16276dcf2f 100644 --- a/packages/survey-core/tests/responsivityTests.ts +++ b/packages/survey-core/tests/responsivityTests.ts @@ -593,4 +593,21 @@ QUnit.test("check title change calls raise update", function (assert) { assert.equal(log, "->called: true->called: true", "called from title change"); item1.title = "Test"; assert.equal(log, "->called: true->called: true"); +}); + +QUnit.test("check actions mode is set correctly when disableShrink is set", function (assert) { + const model: AdaptiveActionContainer = new AdaptiveActionContainer(); + const action = model.addAction({ + disableShrink: true, + title: "test" + }); + assert.equal(action.mode, "large"); + model.setActionsMode("removed"); + assert.equal(action.mode, "removed"); + model.setActionsMode("large"); + assert.equal(action.mode, "large"); + model.setActionsMode("popup"); + assert.equal(action.mode, "popup"); + model.setActionsMode("small"); + assert.equal(action.mode, "large"); }); \ No newline at end of file