[BUG] In absolute dragmode the components are not dropped properly if zoom is applied
Question
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:
- Open jsfiddle above (with editor.Canvas.setZoom(50))
- Try to add a new text component
- 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.
Answers (2)
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.
I close this issue as I'm planning to solve all ones related to absolute positioning here: https://github.com/artf/grapesjs/issues/3770
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2422
[BUG] Unable to add 'space' character if zoom is applied on canvas
Cannot edit text components properly if a zoom value is applied on the canvas. GrapesJS version:0.15.8 The issue can be reproduced in the d...
Issue #6409
BUG: Cannot drag to move components on mobile
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v133 Reproducible demo link https:/...
Issue #4323
BUG: Performance issue while dragging component to canvas when you have 2k component on canvas
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Officia...
Issue #6324
BUG: sorter.setDragHelper is not a function on block drag
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? 131.0.6778.86Reproducible demo link https://...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.