How to display a bigger indicator or change the indicator component

[matias3981]

Is there a way to update the indicator to display where the component is going to be dropped? I mean, maybe adding a white space or something like that.

Thanks!

[Criztiandev]

I want to achieve this also, like an overlay dragg

[nikitakofman]

@prevwong Any update on this? I'm also looking to do this ! Would be great to have your input. Thank you

[prevwong]

No plans for this at the moment - I think it would complicate how we currently render/compute the dnd position

[Kendysond]

Hi, please were you able to figure this out on your end? @Criztiandev @nikitakofman @matias3981 ? Also looking to do this too.

[nikitakofman]

Hi, please were you able to figure this out on your end? @Criztiandev @nikitakofman @matias3981 ? Also looking to do this too.

I've been trying, but the results are sketchy. Also it depends how your builder is made.

You have to use custom event handlers, this is the code I got some far, I took the base from another post from here but can't find the discussion anymore:

import {
  CreateHandlerOptions,
  DefaultEventHandlers,
  NodeId,
  Node,
  ROOT_NODE,
} from "@craftjs/core";
import React from "react";

let placeholderNodeId = null;
let lastValidDropTargetId = null;
let lastValidIndex = null;
let draggedNode = null;

const debounce = (func, delay) => {
  let timer;
  return function (...args) {
    const context = this;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      func.apply(context, args);
    }, delay);
  };
};

export default class CustomEventHandlers extends DefaultEventHandlers {
  constructor(options) {
    super(options);
    this.initMutationObserver();
  }

  initMutationObserver() {
    const targetNode = document.body;
    const config = { childList: true, subtree: true };

    const callback = (mutationsList) => {
      for (let mutation of mutationsList) {
        if (mutation.type === "childList") {
          mutation.addedNodes.forEach((node) => {
            if (
              node.nodeType === 1 &&
              node.classList.contains("component-selected") &&
              node.classList.contains("component-hover")
            ) {
              this.updateClassesAndPosition(node);
              this.removeEmptySpans(node);
            }
          });
        } else if (mutation.type === "attributes") {
          const node = mutation.target;
          if (
            node.classList.contains("component-selected") &&
            node.classList.contains("component-hover")
          ) {
            this.updateClassesAndPosition(node);
          }
        }
      }
    };

    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
  }

  updateClassesAndPosition(node) {
    node.classList.remove(
      "component-selected",
      "component-active",
      "component-hover"
    );
    node.classList.add("-ml-10", "-mt-5");
  }

  removeEmptySpans(node) {
    const spans = node.querySelectorAll("span");

    spans.forEach((span) => {
      if (!span.textContent.trim()) {
        span.remove();
      }
    });
  }

  handlers() {
    const defaultEventHandlers = super.handlers();
    const {
      store: { query, actions },
    } = this.options;

    const clearDragPreview = () => {
      const dragPreview = document.querySelector(".dragging");
      if (dragPreview) {
        dragPreview.remove();
      }
    };

    const handleDragStart = (e, currentId) => {
      e.stopPropagation();

      const dragEle = e.target;

      draggedNode = query.node(currentId).get();

      setTimeout(() => {
        dragEle.style.opacity = "0.3";
      }, 1);

      if (
        e.target.nextSibling &&
        e.target.nextSibling.tagName.toLowerCase() === "h2"
      ) {
        setTimeout(() => {
          e.target.nextSibling.style.opacity = "0.3";
        }, 1);
      }

      const dragImage = document.createElement("div");
      dragImage.className = "card";
      dragImage.innerHTML = `
        <div class="card_load"></div>
        <div class="card_load_extreme_title"></div>
        <div class="card_load_extreme_description"></div>
      `;
      dragImage.style.position = "absolute";
      dragImage.style.top = "-9999px";

      document.body.appendChild(dragImage);

      e.dataTransfer.setDragImage(dragImage, 0, 0);

      const handleDragEnd = () => {
        if (placeholderNodeId) {
          actions.history.ignore().delete(placeholderNodeId);
          placeholderNodeId = null;
        }
        dragEle.style.opacity = "1";
        if (
          e.target.nextSibling &&
          e.target.nextSibling.tagName.toLowerCase() === "h2"
        ) {
          e.target.nextSibling.style.opacity = "1";
        }

        dragImage.remove();

        clearDragPreview();
        dragEle.removeEventListener("dragend", handleDragEnd);

        if (lastValidDropTargetId) {
          actions.move(currentId, lastValidDropTargetId, lastValidIndex);
        }
      };

      dragEle.addEventListener("dragend", handleDragEnd);
    };

    const handleDragEnd = () => {
      if (placeholderNodeId) {
        actions.history.ignore().delete(placeholderNodeId);
        placeholderNodeId = null;
      }
      clearDragPreview();
      draggedNode = null;
    };

    const addPlaceholder = (indicator, dropTargetId, index) => {
      if (
        placeholderNodeId &&
        lastValidDropTargetId === dropTargetId &&
        lastValidIndex === index
      ) {
        return;
      }

      if (placeholderNodeId) {
        try {
          actions.history.ignore().delete(placeholderNodeId);
        } catch (error) {
          console.error("Failed to delete placeholderNodeId", error);
        }
        placeholderNodeId = null;
      }

      const placeholderElement = query
        .parseReactElement(
          <div
            className="transition-all w-20 h-20 flex items-center justify-center duration-200 ease-in-out"
            style={{
              backgroundColor: "rgba(255, 255, 255, 1)",
              display: "flex",
              borderRadius: "10px",
              padding: "3px",
              border: "2px dashed rgba(211, 211, 211, 1)",
              alignItems: "center",
              justifyContent: "center",
              zIndex: 9999,
              backgroundImage: `
      repeating-linear-gradient(
        45deg,
        rgba(211, 211, 211, 0.3) 0,
        rgba(211, 211, 211, 0.3) 10px,
        transparent 10px,
        transparent 20px
      )`,
            }}
          ></div>
        )
        .toNodeTree();

      placeholderNodeId = Object.keys(placeholderElement.nodes)[0];

      actions.history
        .ignore()
        .addNodeTree(placeholderElement, dropTargetId, index);

      lastValidDropTargetId = dropTargetId;
      lastValidIndex = index;
    };

    const debouncedAddPlaceholder = debounce(addPlaceholder, 100);

    return {
      ...defaultEventHandlers,
      hover: (el: HTMLElement, id: NodeId) => {
        if (!id) return () => {};

        const node = query.node(id)?.get();
        if (!node) return () => {};

        const unbindMouseover = this.addCraftEventListener(
          el,
          "mouseover",
          (e) => {
            e.craft.stopPropagation();
            actions.setNodeEvent("hovered", id);
          }
        );

        const unbindMouseleave = this.addCraftEventListener(
          el,
          "mouseleave",
          (e) => {
            e.craft.stopPropagation();
            actions.setNodeEvent("hovered", []);
          }
        );

        return () => {
          unbindMouseover();
          unbindMouseleave();
        };
      },
      select: (el: HTMLElement, id: NodeId) => {
        if (!id) return () => {};

        const node = query.node(id)?.get();

        if (!node) return () => {};

        const unbindClick = this.addCraftEventListener(el, "click", (e) => {
          e.craft.stopPropagation();
          actions.setNodeEvent("selected", [id]);
        });

        return () => {
          unbindClick();
        };
      },
      drop: (
        el: HTMLElement,
        targetId: NodeId,
        options?: Partial<CreateHandlerOptions>
      ) => {
        if (!targetId) return () => {};

        const unbindDragover = this.addCraftEventListener(
          el,
          "dragover",
          (e) => {
            e.craft.stopPropagation();
            e.preventDefault();

            if (!this.positioner || !query.node(targetId)?.get()) return;

            const indicator = this.positioner.computeIndicator(
              targetId,
              e.clientX,
              e.clientY
            );

            if (!indicator) return;

            let dropTargetId = indicator.placement.parent.id;
            let dropTarget: Node | null = query.node(dropTargetId).get();

            if (dropTargetId === ROOT_NODE) {
              if (draggedNode && draggedNode.data.name !== "Frame") {
                return;
              }
            }

            let index =
              indicator.placement.index +
              (indicator.placement.where === "after" ? 1 : 0);

            debouncedAddPlaceholder(indicator, dropTargetId, index);
          }
        );

        const unbindDragenter = this.addCraftEventListener(
          el,
          "dragenter",
          (e) => {
            e.craft.stopPropagation();
            e.preventDefault();
          }
        );

        const unbindDrop = this.addCraftEventListener(el, "drop", (e) => {
          clearDragPreview();
          if (placeholderNodeId) {
            try {
              actions.history.ignore().delete(placeholderNodeId);
            } catch (error) {
              console.error("Failed to delete placeholderNodeId", error);
            }
            placeholderNodeId = null;
          }
        });

        return () => {
          unbindDragenter();
          unbindDragover();
          unbindDrop();
        };
      },
      drag: (el: HTMLElement, id: NodeId) => {
        if (!id || !query.node(id)?.isDraggable()) return () => {};

        const parentId = query.node(id).get().data.parent;

        const unbindDefaultDragHandlers = defaultEventHandlers.drag(el, id);

        const unbindDragStart = this.addCraftEventListener(
          el,
          "dragstart",
          (e) => {
            handleDragStart(e, id);
          }
        );

        const unbindDragEnd = this.addCraftEventListener(el, "dragend", (e) => {
          e.craft.stopPropagation();
          handleDragEnd();
        });

        return () => {
          el.setAttribute("draggable", "true");
          unbindDefaultDragHandlers();
          unbindDragStart();
          unbindDragEnd();
        };
      },
    };
  }
}

You can change the style of the placeholder in the parseReactElement placeholder function. It's not perfect and the main problem is that the placeholder gets 'in between' elements and starts doing infinite loops because it can't determine a proper placeholder. Also when it is in a flex direction Row parent, it doesn't properly put the placholder between elements, it puts it only to the far right or far left. It's smoother if parent is flex direction Column. Like I said, you have to adapt this to how your builder is made.

If anyone can improve on this mechanic would be awesome !