Snap to Grid functionality in Magic ETL

shaunq

Aligning the tiles in magic ETL can become quite cumbersome without any grid or guides for the tiles to line up with.

It would be great for the default behavior of tiles to snap to a grid or show guide-lines that signify when tiles are aligned.

skouzini

Technically, there is a grid-snap system in Magic ETL. Through some testing, my coworkers discovered that it seems to be a 3px by 3px grid.

We have come up with a simple command line script that overlays a grid for aligning tiles to this grid:

let canvasNode = document.querySelector(".df-inner-canvas");canvasNode.setAttribute("style",canvasNode.getAttribute("style")+"background-image: repeating-linear-gradient(0deg, #ccc 0 1px, transparent 1px 100%), repeating-linear-gradient(270deg, #ccc 0 1px, transparent 1px 100%); background-size: 108px 60px;");
console.log("%cGrid Applied!", "color: lime; font-weight: bold;")

While in the ETL window, use CTRL + SHIFT + i to open the console, or right click and select "Inspect." Navigate to the console and copy the above code into the command line and hit ENTER. After a moment, a grid should appear on the background of the ETL window. You can change the size of the grid by adjusting the "background-size" attribute.

JasonAltenburg

@skouzini Legendary! Thank you so much for this!