如何使用 Rete.js 从外部编辑器拖放节点后将节点放置到鼠标位置

Question

我目前正在使用 rete.js。我对此有点陌生。 我有一个应用程序，一侧有编辑器，另一侧有按钮列表。 按钮列表不是编辑器的一部分，但是当我从中拖放元素时，它会触发我创建的一个函数，该函数在编辑器中创建一个节点。我的问题是放置后节点的定位。编辑器的 (0,0) 坐标位于编辑器的中间，加上能够放大和缩小的问题，这会消耗坐标量。为了定位节点，我可以访问鼠标在放置时在整个屏幕中的坐标。

我尝试过使用

const { x, y, k } = area.area.transform

但我不太确定如何使用它来翻译我的坐标。 到目前为止，我一直在到处调整坐标，试图找到相关性，但我的大脑没有思考。

预先感谢您的帮助

Answer 1

我也遇到了同样的问题。我做了以下事情。

function dragAndDropToAddNode(
  areaPlugin: AreaPlugin<Schemes, AreaExtra>,
  editor: NodeEditor<Schemes>
){
  const containerEle = areaPlugin.container;
  containerEle.addEventListener('drop',async (e) => {
    const nodeName = e.dataTransfer.getData('node');
    let newNode: Schemes['Node'];
    if(nodeName == 'message'){
      newNode = new Message('vinod');
    } else{
      return;
    }
    await editor.addNode(newNode);
    // translating the node to the drop location.----------------s
    const {x, y, k} = areaPlugin.area.transform;
    const box = containerEle.getBoundingClientRect();
    await areaPlugin.translate(newNode.id, {
      x: (e.clientX - box.left - x)/k - newNode.width/2,
      y: (e.clientY - box.top - y)/k,
    });
    //   ------------------------------------------------------------
  })
  containerEle.addEventListener('dragover',(e) => {
    e.preventDefault();
    e.dataTransfer!.dropEffect = 'copy';
  })
}

当然你需要在要放置的元素中添加一个可拖动的元素。