Drag and Drop Block based on the mouse position

[Hiskias Melke]

Hello,

I was working with a drag and drop functionality when I drag a png of a block and the drop data is the xml of the blocks. I wanted to "drop" them into blockly by using something like

Blockly.Xml.domToWorkspace(

        Blockly.Xml.textToDom(xmlText),

        workspace

);

which works fine. But I want to create this xml block at a position where my mouse is at and I was wondering how I could do that...

Thank you,

Hiskias Dingeto

[Hiskias Melke]

To clarify, all I want to do is create a block from xml at a specific position from the mouse.

[Beka Westberg]

Hello,

I don't know of a sure way to do this :/ AFAIK Blockly doesn't provide any API hooks for getting the location of the mouse in workspace coordinates (aka XML coordinates). But you may be able to reverse-engineer the code for workspace dragging and related functionality to get what you want. Here are some links that may be helpful:

  * Workspace dragger source

  * Gesture source (handles most user interaction)

  * Workspace scroll

  * Workspace translate

Sorry I can't be more help :/ Other people may have other recommendations =)

Best wishes,

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/0338516a-59a8-444e-b6d8-b6da97190788n%40googlegroups.com.

[Abby Schmiedt]

Hello!

This solution assumes that you are already getting a mouse event when the user wants to drop the block. If that is not the case, let me know and I can try to help there as well. If however that is the case then the below code converts the mouse x and y position to workspace coordinates.

// Gets the x and y position of the cursor relative to the workspace's parent svg element.

var mouseXY = Blockly.utils.mouseToSvg(_e,

ws.getParentSvg(),

ws.getInverseScreenCTM()

);

// Gets where the visible workspace starts in relation to the workspace's parent svg element.

var absoluteMetrics = ws.getMetricsManager().getAbsoluteMetrics();

// In workspace coordinates 0,0 is where the visible workspace starts.

mouseXY.x -= absoluteMetrics.left;

mouseXY.y -= absoluteMetrics.top;

// Takes into account if the workspace is scrolled.

mouseXY.x -= ws.scrollX;

mouseXY.y -= ws.scrollY;

// Takes into account if the workspace is zoomed in or not.

mouseXY.x /= ws.scale;

mouseXY.y /= ws.scale;

I don't know if this image is helpful, but the red line is what we originally get from Blockly.utils.mouseToSvg and the green line is after we take into account absoluteMetrics.left.

Let me know if you have any questions!

Cheers,

Abby

[Hiskias Melke]

Oh thank you very much, your answers were very helpful and I think I'm one step closer to solving my problem. I'm able to get the correct coordinates inside the blockly workspace based on the mouse location. But I got stuck when trying to actually make the block based on the coordinates I have, if you guys have any suggestions, it will be appreciated. 

Thanks!

[Hiskias Melke]

Oh I just figured that part out, what I did was to use ws.getBlockById('blockid').moveBy(mouseX, mouseY) after discovering the relative location of the mouse inside the workspace using the above method. Thank you very much for your help everyone!