如何在Rete.js中从编辑器外拖放后将节点定位到鼠标位置

核心转换逻辑 #

要把屏幕鼠标坐标转成Rete编辑器内部的坐标，需要抵消容器偏移、编辑器平移和缩放倍数的影响，同时适配Rete以容器中心为原点的坐标体系。具体步骤和公式如下：

分步实现 #

1. 获取编辑器容器的位置信息
   先拿到编辑器DOM容器的视口位置，用于将屏幕坐标转成容器内的相对坐标：

   const area = editor.view.area; // 你的Rete Area实例
   const container = area.container;
   const rect = container.getBoundingClientRect(); // 容器的视口坐标和尺寸
   

2. 计算鼠标在容器内的相对坐标
   把屏幕坐标（event.clientX/event.clientY）转换成以容器左上角为原点的坐标：

   const mouseScreenX = event.clientX;
   const mouseScreenY = event.clientY;
   
   const mouseInContainerX = mouseScreenX - rect.left;
   const mouseInContainerY = mouseScreenY - rect.top;
   

3. 转换为Rete内部坐标
   结合area.transform的平移（x/y）和缩放（k）参数，将容器内坐标转成Rete以中心为原点的坐标：

   const { x: areaX, y: areaY, k: scaleK } = area.transform;
   
   const nodeX = (mouseInContainerX - areaX) / scaleK - rect.width / (2 * scaleK);
   const nodeY = (mouseInContainerY - areaY) / scaleK - rect.height / (2 * scaleK);
   

完整代码示例 #

// 拖放结束事件处理函数
async function handleDrop(event) {
  event.preventDefault();
  
  // 1. 获取基础参数
  const mouseScreenX = event.clientX;
  const mouseScreenY = event.clientY;
  const area = editor.view.area;
  const { x: areaX, y: areaY, k: scaleK } = area.transform;
  const container = area.container;
  const rect = container.getBoundingClientRect();

  // 2. 坐标转换
  const mouseInContainerX = mouseScreenX - rect.left;
  const mouseInContainerY = mouseScreenY - rect.top;
  
  const nodeX = (mouseInContainerX - areaX) / scaleK - rect.width / (2 * scaleK);
  const nodeY = (mouseInContainerY - areaY) / scaleK - rect.height / (2 * scaleK);

  // 3. 创建并定位节点
  const newNode = new YourCustomNode(); // 替换成你的节点类型
  await editor.addNode(newNode);
  newNode.position = [nodeX, nodeY];
  await editor.view.update(newNode);
}

// 给外部按钮列表绑定拖放事件（示例）
document.querySelectorAll('.external-button').forEach(btn => {
  btn.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('nodeType', 'your-node-type');
  });
});

// 给编辑器容器绑定drop事件
area.container.addEventListener('drop', handleDrop);
area.container.addEventListener('dragover', (e) => e.preventDefault());

关键参数说明 #

• area.transform.x/y：编辑器内容相对于容器的平移偏移量（缩放后的）
• area.transform.k：当前编辑器的缩放倍数
• rect.width/(2*scaleK)：将容器左上角原点偏移到中心位置的修正值（缩放后）

内容的提问来源于stack exchange，提问作者Maya Jane