experiment: create transferable groups

src/components/canvas/groups/BlockGroups.ts

@@ -147,8 +147,15 @@ export class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends
           onDragUpdate: this.updateBlocks,
           draggable: this.props.draggable || false,
         },
-        { key: group.id }
+        { key: group.id, ref: group.id }
       );
     });
   }
+
+  /**
+   * Find a Group component by its ID
+   */
+  public getGroupById(groupId: string): Group | null {
+    return this.$?.[groupId];
+  }
 }

src/components/canvas/groups/Group.ts

@@ -18,6 +18,10 @@ export type TGroupStyle = {
   borderWidth: number;
   selectedBackground: string;
   selectedBorder: string;
+  /** Background color when group is highlighted (block is being dragged over it) */
+  highlightedBackground: string;
+  /** Border color when group is highlighted */
+  highlightedBorder: string;
 };
 
 export type TGroupGeometry = {
@@ -43,6 +47,8 @@ const defaultStyle: TGroupStyle = {
   borderWidth: 2,
   selectedBackground: "rgba(100, 100, 100, 1)",
   selectedBorder: "rgba(100, 100, 100, 1)",
+  highlightedBackground: "rgba(100, 200, 100, 0.3)",
+  highlightedBorder: "rgba(100, 200, 100, 0.8)",
 };
 
 const defaultGeometry: TGroupGeometry = {
@@ -85,6 +91,9 @@ export class Group<T extends TGroup = TGroup> extends GraphComponent<TGroupProps
   protected style: TGroupStyle;
   protected geometry: TGroupGeometry;
 
+  /** Whether the group is highlighted (block is being dragged over it) */
+  protected highlighted = false;
+
   constructor(props: TGroupProps, parent: BlockGroups) {
     super(props, parent);
 
@@ -109,6 +118,16 @@ export class Group<T extends TGroup = TGroup> extends GraphComponent<TGroupProps
     });
   }
 
+  /**
+   * Set the highlighted state of the group
+   */
+  public setHighlighted(highlighted: boolean): void {
+    if (this.highlighted !== highlighted) {
+      this.highlighted = highlighted;
+      this.performRender();
+    }
+  }
+
   public getEntityId() {
     return this.props.id;
   }
@@ -194,11 +213,20 @@ export class Group<T extends TGroup = TGroup> extends GraphComponent<TGroupProps
   }
 
   protected renderBody(ctx: CanvasRenderingContext2D, rect = this.getRect()) {
-    ctx.strokeStyle = this.state.selected ? this.style.selectedBorder : this.style.border;
-    ctx.fillStyle = this.state.selected ? this.style.selectedBackground : this.style.background;
-    ctx.lineWidth = this.style.borderWidth;
-
-    // Рисуем прямоугольник группы
+    // Determine colors based on state priority: highlighted > selected > default
+    if (this.highlighted) {
+      ctx.strokeStyle = this.style.highlightedBorder;
+      ctx.fillStyle = this.style.highlightedBackground;
+    } else if (this.state.selected) {
+      ctx.strokeStyle = this.style.selectedBorder;
+      ctx.fillStyle = this.style.selectedBackground;
+    } else {
+      ctx.strokeStyle = this.style.border;
+      ctx.fillStyle = this.style.background;
+    }
+    ctx.lineWidth = this.highlighted ? this.style.borderWidth + 1 : this.style.borderWidth;
+
+    // Draw group rectangle
     ctx.beginPath();
     ctx.roundRect(rect.x, rect.y, rect.width, rect.height, 8);
     ctx.fill();