Hide placeholder if no target

GrapesJS · Sep 22, 2024 · 782851b · 782851b
1 parent 92302db
commit 782851b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
diff --git a/packages/core/src/utils/sorter/DropLocationDeterminer.ts b/packages/core/src/utils/sorter/DropLocationDeterminer.ts
@@ -79,11 +79,14 @@ export class DropLocationDeterminer<T, NodeType extends SortableTreeNode<T>> ext
     const targetModel = $(targetEl)?.data("model");
     const mouseTargetNode = new this.treeClass(targetModel);
     const targetNode = this.getValidParentNode(mouseTargetNode);
-    if (!targetNode) return
+    if (!targetNode) {
+      this.eventHandlers.onPlaceholderPositionChange?.(false);
+      return
+    }
     const dims = this.dimsFromTarget(targetNode);
     const pos = findPosition(dims, mouseXRelativeToContainer, mouseYRelativeToContainer);
 
-    this.eventHandlers.onPlaceholderPositionChange?.(dims, pos);
+    this.eventHandlers.onPlaceholderPositionChange?.(true, dims, pos);
     this.eventHandlers.onTargetChange?.(this.targetNode, targetNode);
     this.targetNode = targetNode;
     this.lastPos = pos;

diff --git a/packages/core/src/utils/sorter/Sorter.ts b/packages/core/src/utils/sorter/Sorter.ts
@@ -6,7 +6,7 @@ import { SortableTreeNode } from './SortableTreeNode';
 import { DropLocationDeterminer } from './DropLocationDeterminer';
 import { PlaceholderClass } from './PlaceholderClass';
 import { getMergedOptions, getDocument, matches, closest } from './SorterUtils';
-import { SorterContainerContext, PositionOptions, SorterDragBehaviorOptions, SorterEventHandlers, Dimension, Position } from './types';
+import { SorterContainerContext, PositionOptions, SorterDragBehaviorOptions, SorterEventHandlers, Dimension, Position, OnPlaceholderPositionChangeHandler } from './types';
 import { SorterOptions } from './types';
 
 export type RequiredEmAndTreeClassPartialSorterOptions<T, NodeType extends SortableTreeNode<T>> = Partial<SorterOptions<T, NodeType>> & {
@@ -41,6 +41,8 @@ export default class Sorter<T, NodeType extends SortableTreeNode<T>> {
     this.em.on(this.em.Canvas.events.refresh, this.updateOffset);
     this.placeholder = this.createPlaceholder();
 
+    const onPlaceholderPositionChange = this.handlePlaceholderMove().bind(this) as OnPlaceholderPositionChangeHandler;
+
     this.dropLocationDeterminer = new DropLocationDeterminer({
       em: this.em,
       treeClass: this.treeClass,
@@ -49,17 +51,26 @@ export default class Sorter<T, NodeType extends SortableTreeNode<T>> {
       dragBehavior: this.dragBehavior,
       eventHandlers: {
         ...this.eventHandlers,
-        onPlaceholderPositionChange: ((
-          dims: Dimension[],
-          newPosition: Position) => {
-          this.ensurePlaceholderElement();
-          this.placeholder.show();
-          this.updatePlaceholderPosition(dims, newPosition);
-        }).bind(this)
+        onPlaceholderPositionChange
       },
     });
   }
 
+  private handlePlaceholderMove() {
+    return (
+      show: boolean,
+      dims: Dimension[],
+      newPosition: Position) => {
+      if (show) {
+        this.ensurePlaceholderElement();
+        this.placeholder.show();
+        this.updatePlaceholderPosition(dims, newPosition);
+      } else {
+        this.placeholder.hide();
+      }
+    };
+  }
+
   /**
    * Creates a new placeholder element for the drag-and-drop operation.
    *
@@ -153,12 +164,12 @@ export default class Sorter<T, NodeType extends SortableTreeNode<T>> {
   /**
    * Called when the drag operation should be cancelled
   */
- cancelDrag(): void {
-   this.placeholder.hide();
-   this.dropLocationDeterminer.cancelDrag()
-   this.finalizeMove();
+  cancelDrag(): void {
+    this.placeholder.hide();
+    this.dropLocationDeterminer.cancelDrag()
+    this.finalizeMove();
   }
-  
+
   /**
    * Called to drop an item onto a valid target.
   */

diff --git a/packages/core/src/utils/sorter/types.ts b/packages/core/src/utils/sorter/types.ts
@@ -62,7 +62,10 @@ type OnDragStartHandler = (mouseEvent: MouseEvent) => void;
 type OnMouseMoveHandler = (mouseEvent: MouseEvent) => void;
 type OnDropHandler<NodeType> = (targetNode: NodeType | undefined, sourceNodes: NodeType[], index: number) => void;
 type OnTargetChangeHandler<NodeType> = (oldTargetNode: NodeType | undefined, newTargetNode: NodeType | undefined) => void;
-type OnPlaceholderPositionChangeHandler = (dims: Dimension[], newPosition: Position) => void;
+export type OnPlaceholderPositionChangeHandler = {
+  (show: false): void;
+  (show: true, dims: Dimension[], newPosition: Position): void;
+};
 type OnEndMoveHandler = () => void;
 
 /**