Make collection items undraggable

GrapesJS · Jan 10, 2025 · de7a712 · de7a712
1 parent 7b0ca1f
commit de7a712
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts b/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts
@@ -67,6 +67,8 @@ export default class CollectionComponent extends Component {
 
   private getBlockDefinition() {
     const firstChild = this.components().at(0)?.toJSON() || {};
+    delete firstChild.draggable;
+
     return firstChild;
   }
 
@@ -148,6 +150,7 @@ function getCollectionItems(
           ...block,
           [keyCollectionsStateMap]: collectionsStateMap,
           isCollectionItem: true,
+          draggable: false,
         },
         opt,
       );

diff --git a/packages/core/src/utils/sorter/CanvasComponentNode.ts b/packages/core/src/utils/sorter/CanvasComponentNode.ts
@@ -6,6 +6,17 @@ export default class CanvasComponentNode extends BaseComponentNode {
     minUndroppableDimension: 1, // In px
     maxUndroppableDimension: 15, // In px
   };
+  /**
+   * Check if a source node can be moved to a specified index within this component.
+   * @param {BaseComponentNode} source - The source node to move.
+   * @param {number} index - The display index to move the source to.
+   * @returns {boolean} - True if the move is allowed, false otherwise.
+   */
+  canMove(source: BaseComponentNode, index: number): boolean {
+    console.log('🚀 ~ CanvasComponentNode ~ canMove ~ this.model:', this.model);
+    console.log('🚀 ~ CanvasComponentNode ~ canMove ~ source.model:', source.model);
+    return this.model.em.Components.canMove(this.model, source.model, this.getRealIndex(index)).result;
+  }
   /**
    * Get the associated view of this component.
    * @returns The view associated with the component, or undefined if none.

diff --git a/packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts b/packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts
@@ -7,7 +7,7 @@ import {
 import { CollectionStateVariableType } from '../../../../../src/data_sources/model/collection_component/types';
 import EditorModel from '../../../../../src/editor/model/Editor';
 import { filterObjectForSnapshot, setupTestEditor } from '../../../../common';
-import { getSymbolMain, getSymbolTop } from '../../../../../src/dom_components/model/SymbolUtils';
+import { getSymbolMain } from '../../../../../src/dom_components/model/SymbolUtils';
 import { ProjectData } from '../../../../../src/storage_manager';
 
 describe('Collection component', () => {
@@ -39,7 +39,7 @@ describe('Collection component', () => {
     em.destroy();
   });
 
-  test('Should be undroppable', () => {
+  test('Collection component should be undroppable', () => {
     const cmp = wrapper.components({
       type: CollectionComponentType,
       collectionDefinition: {
@@ -58,6 +58,27 @@ describe('Collection component', () => {
     expect(cmp.get('droppable')).toBe(false);
   });
 
+  test('Collection items should be undraggable', () => {
+    const cmp = wrapper.components({
+      type: CollectionComponentType,
+      collectionDefinition: {
+        block: {
+          type: 'default',
+        },
+        config: {
+          dataSource: {
+            type: DataVariableType,
+            path: 'my_data_source_id',
+          },
+        },
+      },
+    })[0];
+
+    cmp.components().forEach((child) => {
+      expect(child.get('draggable')).toBe(false);
+    });
+  });
+
   test('Collection items should be symbols', () => {
     const cmp = wrapper.components({
       type: CollectionComponentType,