Work for #6646 - Introduce an API to restrict questions and panels from being added or dropped into other container elements (e.g., other panels or dynamic panels) - Implemented maxNestingLevel option

Author: tsv2013

packages/survey-creator-core/src/creator-base.ts

@@ -1191,6 +1191,8 @@ export class SurveyCreatorModel extends Base
    */
   public maxNestedPanels: number = -1;
 
+  public maxNestingLevel: number = -1;
+
   public showPagesInTestSurveyTab = true;
   /**
    * Specifies whether to show a page selector at the bottom of the Preview tab.
@@ -2250,6 +2252,7 @@ export class SurveyCreatorModel extends Base
       settings.dragDrop.restrictDragQuestionBetweenPages;
     this.dragDropSurveyElements = new DragDropSurveyElements(null, this);
     this.dragDropSurveyElements.onGetMaxNestedPanels = (): number => { return this.maxNestedPanels; };
+    this.dragDropSurveyElements.onGetMaxNestedLevel = (): number => { return this.maxNestingLevel; };
     this.dragDropSurveyElements.onDragOverLocationCalculating = (options) => { this.onDragOverLocationCalculating.fire(this, options); };
     let isDraggedFromToolbox = false;
     this.dragDropSurveyElements.onDragStart.add((sender, options) => {
@@ -4155,10 +4158,16 @@ export class SurveyCreatorModel extends Base
     const res: Array<QuestionToolboxItem> = [];
     this.toolbox.items.forEach((item) => { if (!item.showInToolboxOnly) res.push(item); });
 
-    if (!element || this.maxNestedPanels < 0) return res;
-    if (!isAddNew && element.isPanel) return res;
+    if (!element) return res;
+    if (!isAddNew && (element.isPanel || SurveyHelper.isPanelDynamic(element))) return res;
 
-    if (this.maxNestedPanels < SurveyHelper.getElementDeepLength(element)) {
+    if (this.maxNestingLevel >= 0 && this.maxNestingLevel < SurveyHelper.getElementParentContainers(element).length) {
+      for (let i = res.length - 1; i >= 0; i--) {
+        if (res[i].isPanel || Serializer.isDescendantOf(res[i].typeName, "paneldynamic")) {
+          res.splice(i, 1);
+        }
+      }
+    } else if (this.maxNestedPanels >= 0 && this.maxNestedPanels < SurveyHelper.getElementDeepLength(element)) {
       for (let i = res.length - 1; i >= 0; i--) {
         if (res[i].isPanel) {
           res.splice(i, 1);

packages/survey-creator-core/src/creator-options.ts

@@ -295,6 +295,9 @@ export interface ICreatorOptions {
    * Default value: -1 (unlimited)
    */
   maxNestedPanels?: number;
+
+  maxNestingLevel?: number;
+
   /**
    * @deprecated Survey Creator no longer supports switching between UI themes in the Preview tab.
    */

packages/survey-creator-core/src/creator-settings.ts

@@ -217,7 +217,10 @@ export interface ISurveyCreatorOptions {
   maximumChoicesCount: number;
   maximumRowsCount: number;
   maximumRateValues: number;
+
   maxNestedPanels: number;
+  maxNestingLevel: number;
+
   enableLinkFileEditor: boolean;
   inplaceEditForValues: boolean;
   rootElement?: HTMLElement;
@@ -367,7 +370,10 @@ export class EmptySurveyCreatorOptions implements ISurveyCreatorOptions {
   maximumRateValues: number = settings.propertyGrid.maximumRateValues;
   machineTranslationValue: boolean = false;
   inplaceEditForValues: boolean = false;
+
   maxNestedPanels: number = -1;
+  maxNestingLevel: number = -1;
+
   showOneCategoryInPropertyGrid: boolean;
 
   getObjectDisplayName(obj: Base, area: string, reason: string, displayName: string): string {

packages/survey-creator-core/src/dragdrop-survey-elements.ts

@@ -81,11 +81,10 @@ export class DragDropSurveyElements extends DragDropCore<any> {
   }
   protected isDraggedElementSelected: boolean = false;
   public onGetMaxNestedPanels: () => number;
+  public onGetMaxNestedLevel: () => number;
   public onDragOverLocationCalculating: (options: any) => void;
   public get maxNestedPanels(): number { return this.onGetMaxNestedPanels ? this.onGetMaxNestedPanels() : -1; }
-
-  // private isRight: boolean;
-  // protected prevIsRight: boolean;
+  public get maxNestingLevel(): number { return this.onGetMaxNestedLevel ? this.onGetMaxNestedLevel() : -1; }
 
   public startDragToolboxItem(
     event: PointerEvent,
@@ -162,10 +161,6 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     return newElement;
   }
 
-  private isPanelDynamic(element: ISurveyElement) {
-    return element instanceof QuestionPanelDynamicModel;
-  }
-
   protected findDropTargetNodeByDragOverNode(dragOverNode: HTMLElement): HTMLElement {
     const ghostRow = dragOverNode.closest(".svc-row--ghost");
     if (!!ghostRow) {
@@ -246,17 +241,21 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     if (!dropTarget) return false;
     if (dropTarget === this.draggedElement) return false;
 
-    if (this.draggedElement.getType() === "paneldynamic" && dropTarget === this.draggedElement.template) {
+    if (SurveyHelper.isPanelDynamic(this.draggedElement) && dropTarget === this.draggedElement.template) {
       return false;
     }
-    if (this.maxNestedPanels >= 0 && this.draggedElement.isPanel) {
-      const pnl: any = <PanelModel>this.draggedElement;
-      if (pnl.deepNested === undefined) {
-        pnl.deepNested = this.getMaximumNestedPanelCount(pnl, 0);
-      }
+    if (this.maxNestingLevel >= 0 && (this.draggedElement.isPanel || SurveyHelper.isPanelDynamic(this.draggedElement))) {
+      const pnl: any = this.draggedElement as PanelModel;
+      const childPanelsMaxNesting = SurveyHelper.getMaximumNestedPanelDepth(pnl, 0);
+      let len = SurveyHelper.getElementParentContainers(dropTarget, false).length;
+      if (dragOverLocation !== DropIndicatorPosition.Inside && dropTarget.isPanel) len--;
+      if (this.maxNestingLevel < len + childPanelsMaxNesting) return false;
+    } else if (this.maxNestedPanels >= 0 && this.draggedElement.isPanel) {
+      const pnl: any = this.draggedElement as PanelModel;
+      const childPanelsMaxNesting = SurveyHelper.getMaximumNestedPanelDepth(pnl, 0);
       let len = SurveyHelper.getElementDeepLength(dropTarget);
       if (dragOverLocation !== DropIndicatorPosition.Inside && dropTarget.isPanel) len--;
-      if (this.maxNestedPanels < len + pnl.deepNested) return false;
+      if (this.maxNestedPanels < len + childPanelsMaxNesting) return false;
     }
 
     if (
@@ -268,18 +267,6 @@ export class DragDropSurveyElements extends DragDropCore<any> {
 
     return true;
   }
-  private getMaximumNestedPanelCount(panel: PanelModel, deep: number): number {
-    let max = deep;
-    panel.elements.forEach(el => {
-      if (el.isPanel) {
-        const pDeep = this.getMaximumNestedPanelCount(<PanelModel>el, deep + 1);
-        if (pDeep > max) {
-          max = pDeep;
-        }
-      }
-    });
-    return max;
-  }
 
   protected doBanDropHere = () => {
     this.removeDragOverMarker(this.dragOverIndicatorElement);
@@ -458,7 +445,7 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     const calcDirection = !settings.dragDrop.allowDragToTheSameLine || (!!this.draggedElement && this.draggedElement.isPage) ? "top-bottom" : null;
     let dragOverLocation = calculateDragOverLocation(event.clientX, event.clientY, dropTargetRect, calcDirection);
 
-    if (!this.draggedElement.isPage && dropTarget && ((dropTarget.isPanel || dropTarget.isPage) && dropTarget.elements.length === 0 || this.isPanelDynamic(dropTarget) && dropTarget.template.elements.length == 0)) {
+    if (!this.draggedElement.isPage && dropTarget && ((dropTarget.isPanel || dropTarget.isPage) && dropTarget.elements.length === 0 || SurveyHelper.isPanelDynamic(dropTarget) && dropTarget.template.elements.length == 0)) {
       if (dropTarget.isPage || this.insideElement) {
         dragOverLocation = DropIndicatorPosition.Inside;
       }
@@ -468,39 +455,14 @@ export class DragDropSurveyElements extends DragDropCore<any> {
       dragOverLocation = DropIndicatorPosition.Inside;
     }
 
-    if ((dropTarget.isPanel || this.isPanelDynamic(dropTarget)) && this.insideElement && dropTargetAdorner.collapsed) {
+    if ((dropTarget.isPanel || SurveyHelper.isPanelDynamic(dropTarget)) && this.insideElement && dropTargetAdorner.collapsed) {
       dragOverLocation = DropIndicatorPosition.Inside;
     }
 
     if (!this.draggedElement.isPage && dropTarget.isPage && dropTarget.elements.length !== 0 && !dropTargetAdorner.collapsed) {
       dragOverLocation = null;
     }
 
-    // const dropTargetType = this.getDragDropElementType(dropTarget);
-    // const draggedElementType = this.getDragDropElementType(this.draggedElement);
-    // switch (dropTargetType) {
-    //   case ElType.Page: {
-    //     console.log("dropTargetType", dropTargetType);
-    //     break;
-    //   }
-    //   case ElType.Panel: {
-    //     console.log("dropTargetType", dropTargetType);
-    //     break;
-    //   }
-    //   case ElType.DynamicPanel: {
-    //     console.log("dropTargetType", dropTargetType);
-    //     break;
-    //   }
-    //   case ElType.Question: {
-    //     console.log("dropTargetType", dropTargetType);
-    //     break;
-    //   }
-    //   // case ElType.EmptySurvey: {
-    //   //   console.log("dropTargetType", dropTargetType);
-    //   //   break;
-    //   // }
-    // }
-
     const options = {
       survey: this.survey,
       draggedSurveyElement: this.draggedElement,
@@ -591,7 +553,7 @@ export class DragDropSurveyElements extends DragDropCore<any> {
     let dest = this.dragOverIndicatorElement?.isPanel ? this.dragOverIndicatorElement : this.dropTarget;
 
     if (this.dragOverLocation === DropIndicatorPosition.Inside) {
-      if (this.isPanelDynamic(dest)) dest = dest.template;
+      if (SurveyHelper.isPanelDynamic(dest)) dest = dest.template;
       (<PanelModelBase>dest).insertElement(src);
     } else {
       const destParent = dest.parent || dest.page;

packages/survey-creator-core/src/survey-helper.ts

@@ -8,6 +8,7 @@ import {
   Serializer,
   SurveyModel,
   PageModel,
+  PanelModel,
 } from "survey-core";
 import { editorLocalization } from "./editorLocalization";
 import { ISurveyCreatorOptions } from "./creator-settings";
@@ -371,4 +372,30 @@ export class SurveyHelper {
     }
     return res;
   }
+  public static getMaximumNestedPanelDepth(panel: PanelModel, currentDepth: number): number {
+    let maxDepth = currentDepth;
+    panel.elements.forEach(el => {
+      if (el.isPanel) {
+        const pDeep = SurveyHelper.getMaximumNestedPanelDepth(<PanelModel>el, currentDepth + 1);
+        if (pDeep > maxDepth) {
+          maxDepth = pDeep;
+        }
+      }
+    });
+    return maxDepth;
+  }
+  public static getElementParentContainers(element: SurveyElement, includingPage = true): SurveyElement[] {
+    const containers: SurveyElement[] = [];
+    let current = (element.parent || element.parentQuestion) as SurveyElement;
+    while(!!current) {
+      if (current.isInteractiveDesignElement && (!current.isPage || includingPage)) {
+        containers.push(current);
+      }
+      current = (current.parent || current.parentQuestion) as SurveyElement;
+    }
+    return containers;
+  }
+  public static isPanelDynamic(element: any) {
+    return !!element && (element as Base).isDescendantOf("paneldynamic");
+  }
 }

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

@@ -93,6 +93,7 @@ test("json editor default indent", (): any => {
   expect(settings.jsonEditor.indentation).toBe(2);
   expect(creator.text).toBe("{\n  \"pages\": [\n    {\n      \"name\": \"page1\"\n    }\n  ]\n}");
 });
+
 test("onSetPropertyEditorOptions -> onConfigureTablePropertyEditor", (): any => {
   const creator = new CreatorTester();
   creator.JSON = { elements: [{ type: "dropdown", name: "q1", choices: [1, 2] }] };
@@ -123,6 +124,7 @@ test("onSetPropertyEditorOptions -> onConfigureTablePropertyEditor", (): any =>
   creator.onSetPropertyEditorOptionsCallback("choices", question, callBackOptions);
   expect(callBackOptions.allowBatchEdit).toBeFalsy();
 });
+
 test("creator.onSurveyInstanceCreated from property Grid", () => {
   const creator = new CreatorTester();
   const selectedTypes = new Array<string>();
@@ -146,6 +148,7 @@ test("creator.onSurveyInstanceCreated from property Grid", () => {
   creator.selectQuestionByName("q2");
   expect(selectedTypes).toStrictEqual(["survey", "text", "radiogroup"]);
 });
+
 test("creator.onSurveyInstanceSetupHandlers event", () => {
   const creator = new CreatorTester();
   let json = undefined;
@@ -189,6 +192,7 @@ test("check tabResponsivenessMode property", () => {
   creator.tabResponsivenessMode = "menu";
   expect(creator.tabbedMenu.actions.every((action) => action.disableShrink)).toBeTruthy();
 });
+
 test("onModified options, on adding page and on copying page", () => {
   const creator = new CreatorTester();
   creator.JSON = {
@@ -480,6 +484,7 @@ test("creator set theme should update headerView survey property", (): any => {
   creator.theme = { headerView: "basic" };
   expect(creator.survey.headerView).toBe("basic");
 });
+
 test("creator set theme should update headerView survey property", (): any => {
   const creator = new CreatorTester({
     clearTranslationsOnSourceTextChange: true
@@ -553,4 +558,83 @@ test("creator set theme should update headerView survey property", (): any => {
   expect(q2.locTitle.getJson()).toStrictEqual({
     de: "de: my question_new"
   });
+});
+
+test("ConvertTo and addNewQuestion for panel with maxNestingLevel set", (): any => {
+  const creator = new CreatorTester({ maxNestingLevel: 0 });
+  creator.JSON = {
+    elements: [
+      {
+        type: "panel", name: "panel1",
+        elements: [
+          {
+            type: "panel", name: "panel3",
+            elements: [
+              { type: "panel", name: "panel5" },
+              { type: "paneldynamic", name: "panel6" }
+            ]
+          },
+          { type: "paneldynamic", name: "panel4" }
+        ]
+      },
+      { type: "paneldynamic", name: "panel2" }
+    ]
+  };
+  expect(creator.maxNestedPanels).toBe(-1);
+  expect(creator.maxNestingLevel).toBe(0);
+  expect(creator.dragDropSurveyElements.maxNestedPanels).toBe(-1);
+  expect(creator.dragDropSurveyElements.maxNestingLevel).toBe(0);
+  creator.maxNestingLevel = -1;
+  expect(creator.dragDropSurveyElements.maxNestingLevel).toBe(-1);
+  const panel1 = creator.survey.getPanelByName("panel1");
+  const panel2 = creator.survey.getQuestionByName("panel2");
+  const panel3 = creator.survey.getPanelByName("panel3");
+  const panel4 = creator.survey.getQuestionByName("panel4");
+  const panel5 = creator.survey.getPanelByName("panel5");
+  const panel6 = creator.survey.getQuestionByName("panel6");
+  const itemCount = creator.getAvailableToolboxItems().length;
+  expect(itemCount).toBe(21);
+  const panel6Model = new QuestionAdornerViewModel(creator, panel6, undefined);
+  const panel5Model = new QuestionAdornerViewModel(creator, panel5, undefined);
+  expect(creator.getAvailableToolboxItems(panel5)).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems(panel6)).toHaveLength(itemCount);
+  creator.maxNestingLevel = 3;
+  expect(creator.dragDropSurveyElements.maxNestingLevel).toBe(3);
+  expect(creator.getAvailableToolboxItems(panel5)).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems(panel6)).toHaveLength(itemCount);
+  expect(panel6Model.getConvertToTypesActions()).toHaveLength(itemCount);
+  expect(panel5Model.getConvertToTypesActions()).toHaveLength(itemCount);
+  creator.maxNestingLevel = 2;
+  expect(creator.dragDropSurveyElements.maxNestingLevel).toBe(2);
+  expect(creator.getAvailableToolboxItems(panel5)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel6)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel3)).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems(panel4)).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems(panel2)).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems(panel1)).toHaveLength(itemCount);
+  expect(panel6Model.getConvertToTypesActions()).toHaveLength(itemCount);
+  expect(panel5Model.getConvertToTypesActions()).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems()).toHaveLength(itemCount);
+  creator.maxNestingLevel = 1;
+  expect(creator.dragDropSurveyElements.maxNestingLevel).toBe(1);
+  expect(creator.getAvailableToolboxItems(panel5)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel6)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel3)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel4)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel2)).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems(panel1)).toHaveLength(itemCount);
+  expect(panel6Model.getConvertToTypesActions()).toHaveLength(itemCount);
+  expect(panel5Model.getConvertToTypesActions()).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems()).toHaveLength(itemCount);
+  creator.maxNestingLevel = 0;
+  expect(creator.dragDropSurveyElements.maxNestingLevel).toBe(0);
+  expect(creator.getAvailableToolboxItems(panel5)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel6)).toHaveLength(itemCount - 2);
+  expect(panel6Model.getConvertToTypesActions()).toHaveLength(itemCount);
+  expect(panel5Model.getConvertToTypesActions()).toHaveLength(itemCount);
+  expect(creator.getAvailableToolboxItems(panel3)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel4)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel1)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems(panel2)).toHaveLength(itemCount - 2);
+  expect(creator.getAvailableToolboxItems()).toHaveLength(itemCount);
 });