Take canvas offsets into account when dropping a new block on the canvas.

[contentfree]

Relates to #2824 / #3770

I'm not sure this is how you'll want to solve this globally, @artf, but it does seem to fix the dropping of blocks in designer mode on a narrow canvas. I believe there's similar issues with the initial position of the dragged element: Canvas.getMouseRelativeCanvas doesn't correctly take into account the canvas offset but I think the main cause may be CanvasView.getPosition and the way it combines frame offset & canvas offset in a strange way.

[contentfree]

Also, I'm a grapesjs newb and it's likely there's a more elegant way to solve this more broadly.

[artf]

I guess there is a lot of stuff to check/improve for the absolute mode but at least I see how it fixes the current issue, so at the moment is better than nothing.

Thank you 🙇

[contentfree]

Yeah, it's a bit brute force for this specific fix. I'm very new to GrapesJS but willing to take another crack at it if you've got some guidance on where a better and broader fix would be applied. Sent from my phone. Sorry if I sound curt.

…

On Jun 18, 2022, at 04:47, Artur Arseniev ***@***.***> wrote:  @artf approved this pull request. I guess there is a lot of stuff to check/improve for the absolute mode but at least I see how it fixes the current issue, so at the moment is better than nothing. Thank you 🙇 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[artf]

Honestly, I'm not sure if this is something I'd suggest to someone new to GrapesJS 😅
There are different places where the D&D of components can start (from blocks, inside the iframe, native HTML5 D&D outside the editor) and in each case, there are different constraints and you have to make it work in different modes (absolute/translate/standard).

[contentfree]

Strangely, this line const canvasOffset = editor.Canvas.getOffset(); works for me locally but doesn't once incorporated to grapesjs. I might need to push an update to you that does something like em.get("Canvas") instead.

[artf]

@contentfree you're right, my bad I didn't notice it. I'll push a fix