Grid and snapping

[pgilfernandez]

Hi,

I've been developing a grid and snapping system, it started as an experiment with IA, but I think it turned pretty damn good at the end 😅 (and very useful indeed):

grid_v04e.mp4

It features:

• snapping system based on pivot points, nodes, tangent handles and special nodes (gradients, rectangle and circle....)
• snaps to canvas corners, edged midpoints and center
• snaps to grid points
• visual grid created with minor and major lines (ala Inkscape) configurable in X and Y
• snapping radius (threshold)
• menu entry under View > Grid & snapping
• grid visual options:
  - hide/show grid
  - snap to grid and/or canvas (independent)
  - draw grid at back or on top
• grid settings are stored per project (that way each project can have its own settings)
• settings can be stored as default for new projects
• grid settings dialog stays always on top while allowing to continue editing in Friction
• for new projects it is possible to save your preferred defaults
• Friction remembers your "grid visual options"

It indeed changes Friction document, needed a new version and touches lots of files so feel free to review when you have some spare time.

It works very well and it is so handy (at least for the kind of animations I use to create).
Try it and let me know 😄

[pgilfernandez]

Less is more

Yes, this is what I think 😉

[rodlie]

Ignore my last post, for some reason I was missing several commits 😄

[rodlie]

Would snapping to other objects be doable?

When scaling (using gizmo) snapping would be nice, also for rotate if possible (if snap to box is enabled).

• Grid & Snapping

  • Snap to Canvas
  • Snap to Grid

To:

• Grid & Snapping

  • Snap to Canvas
  • Snap to Pivot
  • Span to Bounding Box

I'm still unsure about it, I don't know if adding more options is good or bad... when you have time to test it let me know what it your opinion about it, OK?

After testing I think we need to split out box and pivot. Snap to pivot can be a bit irritating at times :)

[pgilfernandez]

Would snapping to other objects be doable?

Yes! I'm on it

When scaling (using gizmo) snapping would be nice, also for rotate if possible (if snap to box is enabled).

I can try, but I'm unsure how it would behave...
How it would work for rotation? I don't really understand it...

After testing I think we need to split out box and pivot. Snap to pivot can be a bit irritating at times :)

Hehehe, I agree and I'm introducing "snap to nodes" too when the object is based on them

I'll let you know later

[rodlie]

Yes! I'm on it

Awesome 👍

How it would work for rotation? I don't really understand it...

We use the bounding box corners of the object, if in snapping range during rotation calc how much added rotation (based on pivot) is needed before we match the snap target, then apply(?).

Anyway, not important for v1.0, this is something we can look at for v1.1 (or beyond).

[pgilfernandez]

There it is, a step forward. It works pretty well.
At this state we have all thing optional:

• Snapping: global switch to activate/deactivate all
• Snapping points: the available points in the canvas (destination)
  • canvas (corners, midpoints and center)
  • grid
  • pivot
  • bounding box (corners, midpoints and center)
  • nodes
• Anchors: the available points on the selected object (origin)
  • pivot
  • bounding box (corners, midpoints and center)
  • nodes (in case the object is based on them)
• Visible grid settings
  • show grid
  • show on top
  • grid settings

It is turning big, at least on available options... I don't know if it still makes sense to place it buried in a menu or we need to think about some buttons/toggles in the main GUI, what do you think?
It not, we can rearrange and group items as you want... any suggestion?

About the scaling I think it won't be able to do it with the current implementation as the gizmos just modify the values of the related parameters, that is, for scaling it just edit the scaling values based on mouse interaction.
If we want to scale an object and snap to other we are going to need to scale it grabbing a bounding box handle as it is done is lot of other softwares, but it would need a new gizmo that is drawn in the bounding box corners. Once we can edit the scale based on them is when we could add it into the snapping system.
I can try but it could be treated as a "different project", hehehe

I guess we should add a shortcut for the global snapping toggle, do you agree?

[rodlie]

It is turning big, at least on available options...

That's ok, I will add a new toolbar for grid/snapping with the most relevant options.

[rodlie]

Suggestion for buttons in toolbar:

friction-snap-2025-10-25_23.57.18.mp4

click enable/disable, long-click open menu.

[pgilfernandez]

I like it! very simple and faster than menus.

Do we need icons for each option or just text? I would bet for no more icons and just checkbox and label

Is the "grid" icon going to behave the same?

• Click show/hide
• long press options and settings

[rodlie]

Added some comments. Don't do anything yet.

I'm a bit confused by the usage of both eSettings and AppSupport settings.

[rodlie]

I like it! very simple and faster than menus.

Do we need icons for each option or just text? I would bet for no more icons and just checkbox and label

Is the "grid" icon going to behave the same?

• Click show/hide
• long press options and settings

Yes the grid will behave the same. I don't think we need more icons, checkbox are good enough.

[rodlie]

Ok, don't do any more changes to the settings stuff, and don't give me AI answers ;) (if you don't know just say so)

I will rewrite the settings stuff.

[pgilfernandez]

OK, I will.

It's all yours, I'm not touching the code anymore, in case I find any bug or thing that's should be added I will tell you first, so you can work in this PR

[rodlie]

in case I find any bug or thing that's should be added

Ok 👍

[pgilfernandez]

BTW, the settings are supposed to work as the following:

• store all of them into the document so that if you open a project it loads them as you wanted for that specific one.
• in case you create a new document don't just load default settings but let users store their own preferred ones, that's why there is a checkbox in Grid Settings dialog

[rodlie]

store all of them into the document so that if you open a project it loads them as you wanted for that specific one.

That looks ok, I'm not able to test the XML stuff, since development of the XML file format happens in a dedicated branch. I will mark the XML load/save as TODO or something in the code, so that I remember to check/fix it when I continue on that branch.

in case you create a new document don't just load default settings but let users store their own preferred ones, that's why there is a checkbox in Grid Settings dialog

I understand.

Unsure if I have time today, if not I will fix the settings stuff tomorrow. I will probably also move some code around.

[rodlie]

Been a bit busy with other things this last week, but I'm working on getting this ready for merging.

I had to remove most code related to GridSettings, but I should be done in a day or so (depends on how much free time I get).

[pgilfernandez]

Great! Take your time. I knew GridSetting needed some love and adaptation to Friction system but they are great news 👏🏻

[rodlie]

btw, we need on/off icons for grid and gizmo. Similar to the snap icon. (snap_on/snap_off):

Screen.Recording.2025-11-09.at.22.54.16.mp4