mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 13:30:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Improve snapping with better snap target names, tooltips, cleaner overlay labels, code cleanup

Browse source
This commit is contained in:
Keavon Chambers 2025-01-09 00:47:12 -08:00
parent ae2637e08e
commit 07601a5c6c
12 changed files with 422 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

2
website/content/learn/interface/document-panel.md
View file

@ -55,7 +55,7 @@ The right side of the control bar has controls related to the active document an
| | |
|-|-|
| Overlays | <p>When checked (default), overlays are shown. When unchecked, they are hidden. Overlays are the temporary contextual visualizations (like bounding boxes and vector manipulators) that are usually blue and appear atop the viewport when using tools.</p> |
| Snapping | <p>When checked (default), drawing and dragging shapes and vector points means they will snap to other areas of geometric interest like corners or anchor points. When unchecked, the selection moves freely.<br /><br />Fine-grained options are available by clicking the overflow button to access its options popover menu:</p><p><img src="https://static.graphite.rs/content/learn/interface/document-panel/snapping-popover__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>Snapping options relating to **Bounding Boxes**:</p><p><ul><li>**Box Center** enables snapping to the center point of any layer's bounding box.</li><li>**Box Corner** enables snapping to the four corners of any layer's bounding box.</li><li>**Along Edge** enables snapping anywhere along the four edges of any layer's bounding box.</li><li>**Midpoint of Edge** enables snapping to any of the four points at the middle of the edges of any layer's bounding box.</li><li>**Align to Box** enables snapping to anywhere outside any layer's bounding box along the four lines extending outward from its edges.</li><li>**Evenly Distribute Boxes** enables snapping to a consistent distance offset established by the bounding boxes of nearby layers (due to a bug, **Box Center** and **Box Corner** must be enabled).</li></ul></p><p>Snapping options relating to **Geometry**:</p><p><ul><li>**Anchor** enables snapping to the anchor point of any vector path.</li><li>**Line Midpoint** enables snapping to the point at the middle of any straight line segment of a vector path.</li><li>**Path** enables snapping along the length of any vector path.</li><li>**Normal to Path** enables snapping a line to a point perpendicular to a vector path (due to a bug, **Intersection** must be enabled).</li><li>**Tangent to Path** enables snapping a line to a point tangent to a vector path (due to a bug, **Intersection** must be enabled).</li><li>**Intersection** enables snapping to any points where vector paths intersect.</li><li>**Align to Selected Path** enables snapping to the handle control points of a selected vector layer.</li></ul></p> |
| Snapping | <p>When checked (default), drawing and dragging shapes and vector points means they will snap to other areas of geometric interest like corners or anchor points. When unchecked, the selection moves freely.<br /><br />Fine-grained options are available by clicking the overflow button to access its options popover menu:</p><p><img src="https://static.graphite.rs/content/learn/interface/document-panel/snapping-popover__4.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>Snapping options relating to **Bounding Boxes**:</p><p><ul><li>**Align with Corner Points**: Snaps to horizontal/vertical alignment with the corner points of any layer's bounding box.</li><li>**Corner Points**: Snaps to the four corners of any layer's bounding box.</li><li>**Center Points**: Snaps to the center point of any layer's bounding box.</li><li>**Edge Midpoints**: Snaps to any of the four points at the middle of the edges of any layer's bounding box.</li><li>**Along Edges**: Snaps anywhere along the four edges of any layer's bounding box.</li><li>**Distribute Evenly**: Snaps to a consistent distance offset established by the bounding boxes of nearby layers (due to a bug, **Center Points** and **Corner Points** must be enabled).</li></ul></p><p>Snapping options relating to **Paths**:</p><p><ul><li>**Align with Anchor Points**: Snaps to horizontal/vertical alignment with the anchor points of any vector path.</li><li>**Anchor Points**: Snaps to the anchor point of any vector path.</li><li>**Line Midpoints**: Snaps to the point at the middle of any straight line segment of a vector path.</li><li>**Path Intersection Points**: Snaps to any points where vector paths intersect.</li><li>**Along Paths**: Snaps along the length of any vector path.</li><li>**Normal to Paths**: Snaps a line to a point perpendicular to a vector path (due to a bug, **Intersections of Paths** must be enabled).</li><li>**Tangent to Paths**: Snaps a line to a point tangent to a vector path (due to a bug, **Intersections of Paths** must be enabled).</li></ul></p> |
| Grid | <p>When checked (off by default), grid lines are shown and snapping to them becomes active. The initial grid scale is 1 document unit, helping you draw pixel-perfect artwork.</p><ul><li><p>**Type** sets whether the grid pattern is made of squares or triangles.</p><p>**Rectangular** is a pattern of horizontal and vertical lines:</p><p><img src="https://static.graphite.rs/content/learn/interface/document-panel/grid-rectangular-popover__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>It has one option unique to this mode:</p><ul><li>**Spacing** is the width and height of the rectangle grid cells.</li></ul><p>**Isometric** is a pattern of triangles:</p><p><img src="https://static.graphite.rs/content/learn/interface/document-panel/grid-isometric-popover__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="Snapping options popover menu" /></p><p>It has two options unique to this mode:</p><ul><li>**Y Spacing** is the height between vertical repetitions of the grid.</li><li>**Angles** is the slant of the upward and downward sloped grid lines.</li></ul></li><li>**Display** gives control over the appearance of the grid. The **Display as dotted grid** checkbox (off by default) replaces the solid lines with dots at their intersection points.</li><li>**Origin** is the position in the canvas where the repeating grid pattern begins from. If you need an offset for the grid where an intersection occurs at a specific location, set those coordinates.</li></ul> |
| View Mode | <p>**Normal** (default): The artwork is rendered normally.</p><p>**Outline**: The artwork is rendered as a wireframe.</p><p>**Pixels**: **Not implemented yet.** The artwork is rendered as it would appear when exported as a bitmap image at 100% scale regardless of the viewport zoom level.</p> |
| Zoom In | <p>Zooms the viewport in to the next whole increment.</p> |