Change minimum undroppable dimensions

packages/core/src/utils/sorter/CanvasComponentNode.ts

@@ -3,8 +3,8 @@ import { BaseComponentNode } from './BaseComponentNode';
 export default class CanvasComponentNode extends BaseComponentNode {
   protected _dropAreaConfig = {
     ratio: 0.8,
-    minDroppableDimension: 8, // 5px
-    maxUndroppableDimension: 15, // 15px
+    minUndroppableDimension: 1, // In px
+    maxUndroppableDimension: 15, // In px
   };
   /**
    * Get the associated view of this component.

packages/core/src/utils/sorter/Dimension.ts

@@ -134,18 +134,13 @@ export default class Dimension {
     position: number,
     config: DroppableZoneConfig,
   ): { newSize: number; newPosition: number } {
-    const { ratio, minDroppableDimension, maxUndroppableDimension } = config;
+    const { ratio, minUndroppableDimension: minUnDroppableDimension, maxUndroppableDimension } = config;
 
-    // Calculate the desired new size based on the ratio, ensuring it doesn't go below minDroppable
-    const minSize = Math.min(size, minDroppableDimension);
-    let newSize = Math.max(size * ratio, minSize);
-
-    // Adjust the newSize based on maxUndroppable to prevent exceeding the maximum undroppable area
-    newSize = size - Math.min(size - newSize, maxUndroppableDimension);
-
-    // Calculate the new position by adjusting it by half the reduction
-    const reduction = size - newSize;
-    const newPosition = position + reduction / 2;
+    let undroppableDimension = (size * (1 - ratio)) / 2;
+    undroppableDimension = Math.max(undroppableDimension, minUnDroppableDimension);
+    undroppableDimension = Math.min(undroppableDimension, maxUndroppableDimension);
+    const newSize = size - undroppableDimension * 2;
+    const newPosition = position + undroppableDimension;
 
     return { newSize, newPosition };
   }

packages/core/src/utils/sorter/DropLocationDeterminer.ts

@@ -140,8 +140,6 @@ export class DropLocationDeterminer<T, NodeType extends SortableTreeNode<T>> ext
       !placeholderDimensions.equals(this.lastMoveData.placeholderDimensions) ||
       placement !== this.lastMoveData.placement;
     if (placeHolderMoved) {
-      console.log('🚀 ~ DropLocationDeterminer<T, ~ handleMove ~ targetNode:', targetNode);
-      console.log('🚀 ~ DropLocationDeterminer<T, ~ handleMove ~ placeholderDimensions:', placeholderDimensions);
       this.eventHandlers.onPlaceholderPositionChange?.(placeholderDimensions!, placement!);
     }
 

packages/core/src/utils/sorter/SortableTreeNode.ts

@@ -13,8 +13,8 @@ export abstract class SortableTreeNode<T> {
   protected _dragSource: DragSource<T>;
   protected _dropAreaConfig: DroppableZoneConfig = {
     ratio: 1,
-    minDroppableDimension: Number.MAX_VALUE,
-    maxUndroppableDimension: 0,
+    minUndroppableDimension: 0, // In px
+    maxUndroppableDimension: 0, // In px
   };
   /** The dimensions of the node. */
   public nodeDimensions?: Dimension;

packages/core/src/utils/sorter/types.ts

@@ -28,7 +28,7 @@ export type Placement = 'inside' | 'before' | 'after';
 
 export type DroppableZoneConfig = {
   ratio: number;
-  minDroppableDimension: number; // In px
+  minUndroppableDimension: number; // In px
   maxUndroppableDimension: number; // In px
 };