Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] If transform scaling is applied, dragging out and back in will result in wrong positions being tracked #2575

Open
Amdoun opened this issue Dec 13, 2023 · 1 comment
Open

[BUG] If transform scaling is applied, dragging out and back in will result in wrong positions being tracked #2575

Amdoun opened this issue Dec 13, 2023 · 1 comment
Labels
severity:low type:bug

Comments

@Amdoun
Copy link

Amdoun commented Dec 13, 2023

Subject of the issue

What the title says. This is a feature that was part of 9.5.0 and there is even a demo here:
https://gridstackjs.com/demo/transform.html#
However, if the grid is set to acceptWidgets from outside, and you drag an element out of the grid then drag it back in (even if it's from the same grid), then the position of the cursor will follow the unscaled grid instead

Your environment

  • version of gridstack.js - 10.0.1
  • which browser/OS - Chrome/MacOS

Steps to reproduce

Here is a fiddle of the two vertical grids demo, but with scale(0.5) applied: https://jsfiddle.net/e2t65s1d/
Additionally, you can paste this code yourself if the fiddle does not work for some reason:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Two vertical grids demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://gridstackjs.com/demo/demo.css"/>
  <script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-all.js"></script>
</head>
<body>
  <div class="container-fluid" style="transform: scale(0.5)">
    <h1>Two vertical grids demo - with maxRow</h1>
    <p>special care is needed to prevent top grid from growing and causing shifts while you are dragging (which is a know issue).<br>
    You can either set a fix row, or have enough padding on a parent div to allow for an extra row to be created as needed), or....</p>
    <div class="grid-stack" id="grid1"></div>
    <br>
    <div class="grid-stack" id="grid2"></div>
  </div>
  <script src="events.js"></script>
  <script type="text/javascript">
    let opts = {
      row: 1, // set min and max row to freeze the height
      dragOut: true,
      acceptWidgets: true
    }
    GridStack.init(opts, document.getElementById('grid1'))
      .load([{x:0, y:0, content: '0'}, {x:1, y:0, content: '1'}]);
    GridStack.init(opts, document.getElementById('grid2'))
      .load([{x:0, y:0, content: '2'}, {x:1, y:0, content: '3'}]);
  </script>
</body>
</html>
  1. Drag an element in the grid out without letting go of the mouse
  2. Drag it back in (Still without letting go of the mouse)
  3. Move it around the row of the grid and you will see the position is half of what it is supposed to be (In this case, the document has a 0.5 scale)

Expected behavior

If elements are dragged back, they should have the right position
@adumesny
Copy link
Member

scale is not something high on my priority... maybe @elmehdiamlou can take a look since he added scale to start with.

@Amdoun Amdoun mentioned this issue Dec 15, 2023
Merged
3 tasks
@adumesny adumesny changed the title [BUG] If acceptWidgets is set to true and transform scaling is applied, dragging elements out of the grid and dragging them back in will result in wrong positions being tracked [BUG] If transform scaling is applied, dragging out and back in will result in wrong positions being tracked Mar 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
severity:low type:bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@adumesny @Amdoun