Add back the tree class paramater instead of abstract classes

GrapesJS · Sep 16, 2024 · d289046 · d289046
1 parent ef40cea
commit d289046
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 18 deletions.
diff --git a/packages/core/src/commands/view/SelectPosition.ts b/packages/core/src/commands/view/SelectPosition.ts
@@ -1,5 +1,5 @@
 import { $ } from '../../common';
-import { SorterDirection } from '../../utils/sorter/Sorter';
+import { SorterDirection } from '../../utils/sorter/types';
 import { CommandObject } from './CommandAbstract';
 export default {
   /**

diff --git a/packages/core/src/utils/sorter/ComponentSorter.ts b/packages/core/src/utils/sorter/ComponentSorter.ts
@@ -29,6 +29,7 @@ export default class ComponentSorter extends Sorter<Component> {
         super({
             // @ts-ignore
             em,
+            treeClass: ComponentNode,
             containerContext,
             positionOptions,
             dragBehavior,

diff --git a/packages/core/src/utils/sorter/DropLocationDeterminer.ts b/packages/core/src/utils/sorter/DropLocationDeterminer.ts
@@ -10,7 +10,7 @@ import { matches, findPosition, offset, isInFlow } from './SorterUtils';
 
 interface DropLocationDeterminerOptions<T> {
   em: EditorModel;
-  treeClass: (model: any) => TreeSorterBase<T>;
+  treeClass: new (model: any) => TreeSorterBase<T>;
   containerContext: SorterContainerContext;
   positionOptions: PositionOptions;
   dragBehavior: SorterDragBehaviorOptions;
@@ -19,7 +19,7 @@ interface DropLocationDeterminerOptions<T> {
 
 export class DropLocationDeterminer<T> extends View {
   em?: EditorModel;
-  treeClass!: (model: any) => TreeSorterBase<T>;
+  treeClass!: new (model: any) => TreeSorterBase<T>;
 
   positionOptions!: PositionOptions;
   containerContext!: SorterContainerContext;
@@ -53,7 +53,7 @@ export class DropLocationDeterminer<T> extends View {
    * */
   startSort(sourceElement?: HTMLElement) {
     const sourceModel = $(sourceElement).data('model')
-    const sourceNode = this.treeClass(sourceModel);
+    const sourceNode = new this.treeClass(sourceModel);
     this.sourceNode = sourceNode;
 
     this.bindDragEventHandlers(this.docs);
@@ -76,7 +76,7 @@ export class DropLocationDeterminer<T> extends View {
     if (!mouseTargetEl) return
 
     const mouseTargetModel = $(mouseTargetEl)?.data("model");
-    const mouseTargetNode = this.treeClass(mouseTargetModel);
+    const mouseTargetNode = new this.treeClass(mouseTargetModel);
     const targetNode = this.getValidParentNode(mouseTargetNode);
     if (!targetNode) return
     const dims = this.dimsFromTarget(targetNode.getElement()!);

diff --git a/packages/core/src/utils/sorter/Sorter.ts b/packages/core/src/utils/sorter/Sorter.ts
@@ -16,18 +16,18 @@ export type RequiredEmAndTreeClassPartialSorterOptions<T> = Partial<SorterOption
 
 export default class Sorter<T> extends View {
   em!: EditorModel;
+  treeClass!: new (model: T) => TreeSorterBase<T>;
   placeholder!: PlaceholderClass;
   dropLocationDeterminer!: DropLocationDeterminer<T>;
-
+  
   positionOptions!: PositionOptions;
   containerContext!: SorterContainerContext;
   dragBehavior!: SorterDragBehaviorOptions;
   eventHandlers?: SorterEventHandlers<T>;
-
+  
   options!: SorterOptions<T>;
   docs: any;
   sourceNode?: TreeSorterBase<T>;
-
   // TODO
   // @ts-ignore
   initialize(sorterOptions: RequiredEmAndTreeClassPartialSorterOptions<T> = {}) {
@@ -40,6 +40,7 @@ export default class Sorter<T> extends View {
     this.eventHandlers = mergedOptions.eventHandlers;
 
     this.em = sorterOptions.em;
+    this.treeClass = sorterOptions.treeClass;
     var el = mergedOptions.containerContext.container;
     this.el = typeof el === 'string' ? document.querySelector(el)! : el!;
     this.updateOffset();
@@ -61,7 +62,7 @@ export default class Sorter<T> extends View {
 
     this.dropLocationDeterminer = new DropLocationDeterminer({
       em: this.em,
-      treeClass: this.getNodeFromModel,
+      treeClass: this.treeClass,
       containerContext: this.containerContext,
       positionOptions: this.positionOptions,
       dragBehavior: this.dragBehavior,
@@ -79,10 +80,6 @@ export default class Sorter<T> extends View {
     });
   }
 
-  // TODO
-  getNodeFromModel(model: T) {
-    return '' as any;
-  }
 
   private getContainerEl(elem?: HTMLElement) {
     if (elem) this.el = elem;
@@ -119,7 +116,7 @@ export default class Sorter<T> extends View {
     }
 
     const sourceModel = $(sourceElement).data("model");
-    this.sourceNode = this.getNodeFromModel(sourceModel)
+    this.sourceNode = new this.treeClass(sourceModel)
     const docs = getDocuments(this.em, sourceElement);
     this.updateDocs(docs)
     this.dropLocationDeterminer.startSort(sourceElement);

diff --git a/packages/core/src/utils/sorter/StyleManagerSorter.ts b/packages/core/src/utils/sorter/StyleManagerSorter.ts
@@ -22,6 +22,7 @@ export default class StyleManagerSorter extends Sorter<Layers | Layer> {
         super({
             // @ts-ignore
             em,
+            treeClass: LayerNode,
             containerContext,
             positionOptions,
             dragBehavior,
@@ -42,10 +43,6 @@ export default class StyleManagerSorter extends Sorter<Layers | Layer> {
         });
     }
 
-    getNodeFromModel(model: Layer): LayerNode {
-        return new LayerNode(model);
-    }
-
     onLayerStartSort = (sourceNode: LayerNode) => {
         this.em.clearSelection();
         this.em.trigger('sorter:drag:start', sourceNode?.getElement(), sourceNode?.getmodel());