search

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

[BUG] In absolute dragmode the components are not dropped properly if zoom is applied #2423

Closed MartinPutz closed 2 years ago

MartinPutz commented 4 years ago

Components are not dropped to the exact position if dragmode set to absolute and there is a zoom value applied on the canvas.

GrapesJS version:0.15.8

The issue can be reproduced in the demo as well: https://jsfiddle.net/y8m1x4a3/

Expected behavior: Components can be dropped to the cursor position even if the dragmode is set to absolute and a zoom is applied on the canvas.

Current behavior: When dragmode is absolute and there is a zoom value, the components are dropped away from the cursor position. (the distance/offset depends on the zoom level)

Steps to reproduce:

  1. Open jsfiddle above (with editor.Canvas.setZoom(50))
  2. Try to add a new text component
  3. Check the distance between the cursor position and the component's position.

The distance/offset depends on the zoom value.

The editor.Canvas.setZoom function uses a transform:scale() CSS property and then the 'drop' position is not accurate anymore.

artf commented 4 years ago

Should be fixed in this branch https://github.com/artf/grapesjs/tree/multi-frame Multi framing is still far from being complete but I hope to merge soon that branch (big canvas refactoring but without breaking changes), definitely not for this release (should be published this days) but probably in the next one.

artf commented 2 years ago

I close this issue as I'm planning to solve all ones related to absolute positioning here: https://github.com/artf/grapesjs/issues/3770