Work for #7669 - use shared TOCModel and give access to it (#7672)

* Work for #7669 - use shared TOCModel and give access to it

* Fix f-tests

---------

Co-authored-by: tsv2013 <[email protected]>

packages/survey-angular-ui/src/components/progress/toc/progress.component.html

@@ -1,9 +1,9 @@
 <ng-template #template>
-  <div [class]="tocModel.containerCss">
-    <sv-ng-list *ngIf="!tocModel.isMobile" [model]="tocModel.listModel"></sv-ng-list>
-    <div *ngIf="tocModel.isMobile" (click)="tocModel.togglePopup()" data-bind="key2click">
-        <svg [iconName]="tocModel.icon" [size]="24" sv-ng-svg-icon></svg>
-        <sv-ng-popup [popupModel]="tocModel.popupModel"></sv-ng-popup>
+  <div [class]="model.containerCss">
+    <sv-ng-list *ngIf="!model.isMobile" [model]="model.listModel"></sv-ng-list>
+    <div *ngIf="model.isMobile" (click)="model.togglePopup()" data-bind="key2click">
+        <svg [iconName]="model.icon" [size]="24" sv-ng-svg-icon></svg>
+        <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
     </div>
   </div>  
 </ng-template>

packages/survey-angular-ui/src/components/progress/toc/progress.component.ts

@@ -4,22 +4,16 @@ import { createTOCListModel, getTocRootCss, ListModel, SurveyModel, TOCModel } f
 import { AngularComponentFactory } from "../../../component-factory";
 
 @Component({
-  selector: "sv-progress-toc, sv-ng-progress-toc",
+  selector: "sv-navigation-toc, sv-ng-navigation-toc",
   templateUrl: "./progress.component.html",
   styles: [":host { display: none; }"]
 })
 export class ProgressTocComponent extends EmbeddedViewContentComponent implements OnChanges, OnInit {
-  public tocModel!: TOCModel;
-  @Input() model!: SurveyModel;
-  private createProgressTOCModel() {
-    this.tocModel = new TOCModel(this.model);
-  }
+  @Input() model!: TOCModel;
   override ngOnInit(): void {
     super.ngOnInit();
-    this.createProgressTOCModel();
   }
   ngOnChanges(changes: SimpleChanges): void {
-    this.createProgressTOCModel();
   }
 }
-AngularComponentFactory.Instance.registerComponent("sv-progress-toc", ProgressTocComponent);
+AngularComponentFactory.Instance.registerComponent("sv-navigation-toc", ProgressTocComponent);

packages/survey-vue3-ui/src/components/progress/ProgressToc.vue

@@ -1,16 +1,15 @@
 <template>
-  <div :class="tocModel.containerCss">
-    <div v-if="tocModel.isMobile" v-on:click="tocModel.togglePopup" v-key2click>
-      <sv-svg-icon :iconName="tocModel.icon" :size="24"></sv-svg-icon>
-      <sv-popup :model="tocModel.popupModel"></sv-popup>
+  <div :class="model.containerCss">
+    <div v-if="model.isMobile" v-on:click="model.togglePopup" v-key2click>
+      <sv-svg-icon :iconName="model.icon" :size="24"></sv-svg-icon>
+      <sv-popup :model="model.popupModel"></sv-popup>
     </div>
-    <sv-list v-else :model="tocModel.listModel"></sv-list>
+    <sv-list v-else :model="model.listModel"></sv-list>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { type SurveyModel, TOCModel } from "survey-core";
 
-const props = defineProps<{ survey: SurveyModel }>();
-const tocModel = new TOCModel(props.survey);
+const props = defineProps<{ survey: SurveyModel, model: TOCModel }>();
 </script>

packages/survey-vue3-ui/src/index.ts

@@ -215,7 +215,7 @@ function registerComponents(app: App) {
   app.component("sv-components-container", Container);
 
   app.component("sv-progress-buttons", ProgressButtons);
-  app.component("sv-progress-toc", ProgressToc);
+  app.component("sv-navigation-toc", ProgressToc);
   app.component("sv-progress-pages", Progress);
   app.component("sv-progress-questions", Progress);
   app.component("sv-progress-correctquestions", Progress);

src/knockout/components/progress/toc.html

@@ -1,3 +1,4 @@
+<!-- ko with: tocModel -->
 <div data-bind="css: containerCss">
     <!-- ko ifnot: isMobile -->
     <sv-list params="model: listModel"></sv-list>
@@ -8,4 +9,5 @@
         <sv-popup params="model: popupModel"></sv-popup>
     </div>
     <!-- /ko -->
-</div>
+</div>
+<!-- /ko -->

src/knockout/components/progress/toc.ts

@@ -2,10 +2,12 @@ import * as ko from "knockout";
 import { TOCModel } from "survey-core";
 const template: any = require("html-loader?interpolate!val-loader!./toc.html");
 
-ko.components.register("sv-progress-toc", {
+ko.components.register("sv-navigation-toc", {
   viewModel: {
     createViewModel: (params: any, componentInfo: any) => {
-      return new TOCModel(params.model);
+      return {
+        tocModel: params.model as TOCModel
+      };
     },
   },
   template: template

src/main.scss

@@ -3,13 +3,15 @@
   background-repeat: no-repeat;
   background-position: center;
 }
+
 :root {
   --sjs-default-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+
 $font-family: var(--font-family, var(--sjs-default-font-family));
 
 @import "./common-styles/sv-progress-buttons.scss";
-@import "./common-styles/sv-progress-toc.scss";
+@import "./common-styles/sv-navigation-toc.scss";
 @import "./common-styles/window.scss";
 @import "./common-styles/sv-brand-info.scss";
 @import "./common-styles/sv-drag-drop.scss";
@@ -949,6 +951,7 @@ body {
 .sv_q_dropdown_control input[readonly] {
   pointer-events: none;
 }
+
 @import "./main.rtl.scss";
 @import "./main.m600.scss";
 

src/modern.fontless.scss

@@ -3,7 +3,7 @@
 @import "./modern/blocks/sv-window.scss";
 @import "./common-styles/sv-popup.scss";
 @import "./common-styles/sv-progress-buttons.scss";
-@import "./common-styles/sv-progress-toc.scss";
+@import "./common-styles/sv-navigation-toc.scss";
 @import "./modern/blocks/sv-container.scss";
 @import "./modern/blocks/sv-body.scss";
 @import "./modern/blocks/sv-page.scss";
@@ -52,6 +52,7 @@ body {
 .sv-matrixdynamic__drag-icon {
   padding-top: 16px;
 }
+
 .sv-matrixdynamic__drag-icon:after {
   content: " ";
   display: block;
@@ -63,10 +64,12 @@ body {
   cursor: move;
   margin-top: 12px;
 }
+
 .sv-matrix__drag-drop-ghost-position-top,
 .sv-matrix__drag-drop-ghost-position-bottom {
   position: relative;
 }
+
 .sv-matrix__drag-drop-ghost-position-top::after,
 .sv-matrix__drag-drop-ghost-position-bottom::after {
   content: "";
@@ -76,13 +79,15 @@ body {
   position: absolute;
   left: 0;
 }
+
 .sv-matrix__drag-drop-ghost-position-top::after {
   top: 0;
 }
+
 .sv-matrix__drag-drop-ghost-position-bottom::after {
   bottom: 0;
 }
 
 .sv-skeleton-element {
   background-color: var(--background-dim, $background-dim);
-}
+}

src/react/reactSurveyProgressToc.tsx

@@ -8,7 +8,7 @@ import { SvgIcon } from "./components/svg-icon/svg-icon";
 
 export class SurveyProgressToc extends SurveyNavigationBase {
   render(): JSX.Element {
-    const tocModel = new TOCModel(this.props.model);
+    const tocModel = this.props.model;
     let content: JSX.Element;
     if(tocModel.isMobile) {
       content = <div onClick={tocModel.togglePopup}>
@@ -26,6 +26,6 @@ export class SurveyProgressToc extends SurveyNavigationBase {
   }
 }
 
-ReactElementFactory.Instance.registerElement("sv-progress-toc", (props) => {
+ReactElementFactory.Instance.registerElement("sv-navigation-toc", (props) => {
   return React.createElement(SurveyProgressToc, props);
 });

src/survey.ts

@@ -76,6 +76,7 @@ import { Cover } from "./header";
 import { surveyTimerFunctions } from "./surveytimer";
 import { QuestionSignaturePadModel } from "./question_signaturepad";
 import { SurveyTaskManagerModel } from "./surveyTaskManager";
+import { TOCModel } from "./surveyToc";
 
 /**
  * The `SurveyModel` object contains properties and methods that allow you to control the survey and access its elements.
@@ -997,8 +998,8 @@ export class SurveyModel extends SurveyElementCore
     });
     this.addLayoutElement({
       id: "toc-navigation",
-      component: "sv-progress-toc",
-      data: this
+      component: "sv-navigation-toc",
+      data: new TOCModel(this)
     });
     this.layoutElements.push({
       id: "navigationbuttons",
@@ -1198,7 +1199,7 @@ export class SurveyModel extends SurveyElementCore
   @property({
     onSet: (newValue, target: SurveyModel) => {
       if (newValue === "advanced") {
-        const layoutElement = target.layoutElements.filter(a => a.id === "advanced-header")[0];
+        const layoutElement = target.findLayoutElement("advanced-header");
         if (!layoutElement) {
           var advHeader = new Cover();
           advHeader.logoPositionX = target.logoPosition === "right" ? "right" : "left";
@@ -2793,7 +2794,7 @@ export class SurveyModel extends SurveyElementCore
     this.setDataCore(newData);
   }
   public setDataCore(data: any, clearData: boolean = false): void {
-    if(clearData) {
+    if (clearData) {
       this.valuesHash = {};
     }
     if (data) {
@@ -3142,15 +3143,15 @@ export class SurveyModel extends SurveyElementCore
   public tryNavigateToPage(page: PageModel): boolean {
     if (this.isDesignMode) return false;
     const index = this.visiblePages.indexOf(page);
-    if(index < 0) return false;
-    if(index === this.currentPageNo) return false;
+    if (index < 0) return false;
+    if (index === this.currentPageNo) return false;
     if (index < this.currentPageNo) {
       this.currentPageNo = index;
       return true;
     }
     for (let i = this.currentPageNo; i < index; i++) {
       const page = this.visiblePages[i];
-      if(!page.validate(true, true)) return false;
+      if (!page.validate(true, true)) return false;
       page.passed = true;
     }
     this.currentPage = page;
@@ -6335,7 +6336,7 @@ export class SurveyModel extends SurveyElementCore
     allowNotifyValueChanged: boolean = true,
     questionName?: string
   ): void {
-    if(this.isCreatingPagesForPreview) return;
+    if (this.isCreatingPagesForPreview) return;
     var newValue = newQuestionValue;
     if (allowNotifyValueChanged) {
       newValue = this.questionOnValueChanging(name, newQuestionValue);
@@ -7085,7 +7086,7 @@ export class SurveyModel extends SurveyElementCore
     return this.getLocalizationFormatString(strName, surveySpent, surveyLimit);
   }
   private getDisplayClockTime(val: number): string {
-    if(val < 0) {
+    if (val < 0) {
       val = 0;
     }
     const min: number = Math.floor(val / 60);
@@ -7394,8 +7395,12 @@ export class SurveyModel extends SurveyElementCore
     this.layoutElements.push(layoutElement);
     return existingLayoutElement;
   }
-  public removeLayoutElement(layoutElementId: string): ISurveyLayoutElement {
+  public findLayoutElement(layoutElementId: string): ISurveyLayoutElement {
     const layoutElement = this.layoutElements.filter(a => a.id === layoutElementId)[0];
+    return layoutElement;
+  }
+  public removeLayoutElement(layoutElementId: string): ISurveyLayoutElement {
+    const layoutElement = this.findLayoutElement(layoutElementId);
     if (!!layoutElement) {
       const layoutElementIndex = this.layoutElements.indexOf(layoutElement);
       this.layoutElements.splice(layoutElementIndex, 1);
@@ -7418,7 +7423,7 @@ export class SurveyModel extends SurveyElementCore
           }
         }
       } else if (this.state === "running" && isStrCiEqual(layoutElement.id, "progress-" + this.progressBarType)) {
-        const headerLayoutElement = this.layoutElements.filter(a => a.id === "advanced-header")[0];
+        const headerLayoutElement = this.findLayoutElement("advanced-header");
         const advHeader = headerLayoutElement && headerLayoutElement.data as Cover;
         let isBelowHeader = !advHeader || advHeader.hasBackground;
         if (container === "header" && !isBelowHeader) {
@@ -7518,6 +7523,14 @@ export class SurveyModel extends SurveyElementCore
     this.removeScrollEventListener();
     this.destroyResizeObserver();
     this.rootElement = undefined;
+    if (this.layoutElements) {
+      for (var i = 0; i < this.layoutElements.length; i++) {
+        if (!!this.layoutElements[i].data && this.layoutElements[i].data !== this && this.layoutElements[i].data.dispose) {
+          this.layoutElements[i].data.dispose();
+        }
+      }
+      this.layoutElements.splice(0, this.layoutElements.length);
+    }
     super.dispose();
     this.editingObj = null;
     if (!this.pages) return;

src/surveyToc.ts

@@ -47,7 +47,7 @@ export function createTOCListModel(survey: SurveyModel, onAction?: () => void) {
   listModel.locOwner = survey;
   listModel.searchEnabled = false;
   survey.onCurrentPageChanged.add((s, o) => {
-    listModel.selectedItem = items.filter(i => i.id === survey.currentPage.name)[0];
+    listModel.selectedItem = items.filter(i => !!survey.currentPage && i.id === survey.currentPage.name)[0];
   });
   return listModel;
 }

src/vue/progressToc.vue

@@ -1,10 +1,10 @@
 <template>
-  <div :class="tocModel.containerCss">
-      <div v-if="tocModel.isMobile" v-on:click="tocModel.togglePopup" v-key2click>
-          <sv-svg-icon :iconName="tocModel.icon" :size="24"></sv-svg-icon>
-          <sv-popup :model="tocModel.popupModel"></sv-popup>
+  <div :class="model.containerCss">
+      <div v-if="model.isMobile" v-on:click="model.togglePopup" v-key2click>
+          <sv-svg-icon :iconName="model.icon" :size="24"></sv-svg-icon>
+          <sv-popup :model="model.popupModel"></sv-popup>
       </div>
-      <sv-list v-else :model="tocModel.listModel"></sv-list>
+      <sv-list v-else :model="model.listModel"></sv-list>
   </div>  
 </template>
 
@@ -15,15 +15,14 @@ import { SurveyModel, createTOCListModel, getTocRootCss, TOCModel } from "survey
 
 @Component
 export class ProgressToc extends Vue {
+  @Prop() model: TOCModel;
   @Prop() survey: SurveyModel;
   @Prop() css: any;
-  public tocModel: any = undefined;
   constructor() {
     super();
-    this.tocModel = new TOCModel(this.survey);
   }
 }
 
-Vue.component("sv-progress-toc", ProgressToc);
+Vue.component("sv-navigation-toc", ProgressToc);
 export default ProgressToc;
 </script>