Add drop area calculation to tree nodes

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

@@ -1,6 +1,11 @@
 import { BaseComponentNode } from './BaseComponentNode';
 
 export default class CanvasComponentNode extends BaseComponentNode {
+  protected _dropAreaConfig = {
+    ratio: 0.8,
+    minDroppableDimension: 8, // 5px
+    maxUndroppableDimension: 15, // 15px
+  };
   /**
    * Get the associated view of this component.
    * @returns The view associated with the component, or undefined if none.

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

@@ -1,5 +1,6 @@
 import { View } from '../../common';
 import Dimension from './Dimension';
+import { DroppableZoneConfig } from './types';
 import { DragSource } from './types';
 
 /**
@@ -10,6 +11,11 @@ import { DragSource } from './types';
 export abstract class SortableTreeNode<T> {
   protected _model: T;
   protected _dragSource: DragSource<T>;
+  protected _dropAreaConfig: DroppableZoneConfig = {
+    ratio: 1,
+    minDroppableDimension: Number.MAX_VALUE,
+    maxUndroppableDimension: 0,
+  };
   /** The dimensions of the node. */
   public nodeDimensions?: Dimension;
   /** The dimensions of the child elements within the target node. */
@@ -92,6 +98,23 @@ export abstract class SortableTreeNode<T> {
     return this._dragSource;
   }
 
+  get dropArea(): Dimension | undefined {
+    // If no parent, there's no reason to reduce the drop zone
+    if (!this.getParent()) return this.nodeDimensions?.clone();
+    return this.nodeDimensions?.getDropArea(this._dropAreaConfig);
+  }
+
+  /**
+   * Checks if the given coordinates are within the bounds of this node.
+   *
+   * @param {number} x - The X coordinate to check.
+   * @param {number} y - The Y coordinate to check.
+   * @returns {boolean} - True if the coordinates are within bounds, otherwise false.
+   */
+  public isWithinDropBounds(x: number, y: number): boolean {
+    return !!this.dropArea && this.dropArea.isWithinBounds(x, y);
+  }
+
   equals(node?: SortableTreeNode<T>): node is SortableTreeNode<T> {
     return !!node?._model && this._model === node._model;
   }