Trigger Drop event for node dragged from custom panel of node components

[Altenrion]

In my project i need to have unified design of droppable panels. So i have my sidepanel that opens on the left side of screen with custom list of components, and i need to drag & drop them into editor field of baklava.

I know how to trigger dragging & drop but how to hook drop event to the baklava & do it with correct coordinates?

Help me please with any correct directions on searching that or code examples.

[Altenrion]

Found that you can do smth like this

const mouseAt = reactive(useMouse());

function draggableCardDropped(){
  const n = new NodeEntity();

  baklava.displayedGraph.addNode(n);

  // const scale = baklava.displayedGraph.scaling
  const mouseX = mouseAt.x; // Example mouse X coordinate
  const mouseY = mouseAt.y; // Example mouse Y coordinate

  n.position = { x: mouseX, y:  mouseY};
}

But the scaling modification of coorditaes is complicated. It is solved somehow inside this project if you drag & drop from its own left panel, but there is no public method like DropNode(node, x, y) or addNode(n).moveNode(x, y) that would make math for us, taking into account browser mouse coordinates and counting real with scaling by itself.

So for now i'm still in search for a solution that would help in implementation of this correction of coordinates due taking into account scaling parameter.

[Altenrion]

Found non documented but presented solution:

import { BaklavaEditor, useBaklava, useTransform } from "@baklavajs/renderer-vue";
 // some code here 

const n = new NodeEntity();
baklava.displayedGraph.addNode(n);

const mouseX = mouseAt.x; // Example mouse X coordinate
const mouseY = mouseAt.y; // Example mouse Y coordinate

const coordinates = useTransform().transform(mouseX, mouseY)

n.position = { x:coordinates[0], y:  coordinates[1]};

That was hard to find. I hope that this code snippet would help others if they would search for such problem.