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!

AndreaHenderson

While there is already a "snap-to-grid" feature underlying the current Magic canvas, we do recognize that it is possibly too fine-grained to be useful. We are reviewing a more pronounced version of this feature for inclusion in some general updates we're looking to make to the authoring canvas.

skouzini

Since the last Domo shadow update, the previous ETL grid overlay has stopped working. I'm currently working on a fix.