在可视化系统中拖拽组件的实现

2023-09-18 11:42:22

拖拽组件到主舞台

在前两篇文章中，我们搭建了可视化系统的基础架构，包括创建编辑面板和实现组件在编辑面板上的自由移动。在本篇教程中，我们将继续深入探讨，介绍如何将组件从组件面板拖拽到主舞台上。

组件拖拽的原理

组件拖拽功能的实现，本质上是监听组件在编辑面板上的鼠标事件，当鼠标按下时，记录组件的初始位置和鼠标位置；当鼠标移动时，计算组件移动的偏移量，并更新组件在编辑面板上的位置；当鼠标松开时，判断组件是否拖拽到主舞台的范围内，如果是，则将组件添加到主舞台上。

实现步骤

1. 监听鼠标事件

首先，我们需要监听组件在编辑面板上的鼠标事件。为此，可以使用 React 的 onMouseDown、onMouseMove 和 onMouseUp 事件处理函数。

const Component = () => {
  const [isDragging, setIsDragging] = useState(false);
  const [offsetX, setOffsetX] = useState(0);
  const [offsetY, setOffsetY] = useState(0);

  const onMouseDown = (e) => {
    setIsDragging(true);
    setOffsetX(e.clientX - e.target.getBoundingClientRect().left);
    setOffsetY(e.clientY - e.target.getBoundingClientRect().top);
  };

  const onMouseMove = (e) => {
    if (!isDragging) return;

    const newX = e.clientX - offsetX;
    const newY = e.clientY - offsetY;

    // 更新组件在编辑面板上的位置
    e.target.style.transform = `translate(${newX}px, ${newY}px)`;
  };

  const onMouseUp = (e) => {
    setIsDragging(false);

    // 判断组件是否拖拽到主舞台的范围内
    if (isInsideMainStage(e.clientX, e.clientY)) {
      // 添加组件到主舞台
      addCompToMainStage(e.target.id);
    }
  };

  return (
    <div
      className="component"
      onMouseDown={onMouseDown}
      onMouseMove={onMouseMove}
      onMouseUp={onMouseUp}
    >
      组件内容
    </div>
  );
};

2. 判断组件是否在主舞台范围内

接下来，我们需要编写一个函数来判断组件是否在主舞台的范围内。

const isInsideMainStage = (x, y) => {
  const mainStageRect = document.getElementById("main-stage").getBoundingClientRect();

  return (
    x >= mainStageRect.left &&
    x <= mainStageRect.right &&
    y >= mainStageRect.top &&
    y <= mainStageRect.bottom
  );
};

3. 将组件添加到主舞台

最后，当判断组件在主舞台范围内时，我们需要编写一个函数将组件添加到主舞台上。

const addCompToMainStage = (id) => {
  const component = document.getElementById(id);

  // 创建组件的克隆
  const clone = component.cloneNode(true);

  // 将克隆添加到主舞台
  document.getElementById("main-stage").appendChild(clone);
};