fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-06 01:38:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update the user manual's most outdated parts and improve its table styling

Browse Source
This commit is contained in:
Keavon Chambers
2025-11-28 03:00:32 -08:00
parent f4608a6e40
commit 221c2e9b47
8 changed files with 235 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs
+1 -1
View File
@@ -394,7 +394,7 @@ impl LayoutHolder for MenuBarMessageHandler {
action: MenuBarEntry::no_action(), action: MenuBarEntry::no_action(),
disabled: no_active_document || !has_selected_layers, disabled: no_active_document || !has_selected_layers,
children: MenuBarEntryChildren(vec![{ children: MenuBarEntryChildren(vec![{
[(FlipAxis::X, "FlipHorizontal", "Horizontal"), (FlipAxis::Y, "FlipVertical", "Vertical")] [(FlipAxis::X, "FlipHorizontal", "Flip Horizontal"), (FlipAxis::Y, "FlipVertical", "Flip Vertical")]
.into_iter() .into_iter()
.map(|(flip_axis, icon, name)| MenuBarEntry { .map(|(flip_axis, icon, name)| MenuBarEntry {
label: name.into(), label: name.into(),
website/content/features.md
+80 -76
View File
@@ -77,7 +77,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
<h3>— Pre-Alpha —</h3> <h3>— Pre-Alpha —</h3>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Editor systems; basic vector art tools</span> <span>Editor systems; basic vector art tools</span>
</div> </div>
<!-- Alpha 1 --> <!-- Alpha 1 -->
@@ -85,7 +85,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
<h3>— Alpha 1 —</h3> <h3>— Alpha 1 —</h3>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Better tools; node graph prototyping</span> <span>Better tools; node graph prototyping</span>
</div> </div>
<!-- Alpha 2 --> <!-- Alpha 2 -->
@@ -93,7 +93,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
<h3>— Alpha 2 —</h3> <h3>— Alpha 2 —</h3>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Node graph integration in documents</span> <span>Node graph integration in documents</span>
</div> </div>
<!-- Alpha 3 --> <!-- Alpha 3 -->
@@ -101,7 +101,7 @@ Marrying vector and raster under one roof enables both art forms to complement e
<h3>— Alpha 3 —</h3> <h3>— Alpha 3 —</h3>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Procedural vector editing and usability</span> <span>Procedural vector editing and usability</span>
</div> </div>
<!-- Alpha 4 --> <!-- Alpha 4 -->
@@ -109,63 +109,63 @@ Marrying vector and raster under one roof enables both art forms to complement e
<h3>— Alpha 4 —</h3> <h3>— Alpha 4 —</h3>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Parametric animation</span> <span>Parametric animation</span>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 58" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 58" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Instancer nodes for looped generation</span> <span>Instancer nodes for looped generation</span>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 59" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 59" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Enhanced Pen, Path, and Shape tools</span> <span>Enhanced Pen, Path, and Shape tools</span>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 63" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 63" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Table-based graphical data format</span> <span>Table-based graphical data format</span>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 67" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 67" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Data panel for graphical introspection</span> <span>Data panel for graphical introspection</span>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Layer clipping masks</span> <span>Layer clipping masks</span>
</div> </div>
<div class="feature-icon complete" title="Development Complete"> <div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 66" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 66" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>All-around performance optimizations</span> <span>All-around performance optimizations</span>
</div> </div>
<div class="feature-icon ongoing" title="Development Ongoing"> <div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 73" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Blend tool to morph between shapes</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Desktop app (Windows, Mac, Linux)</span> <span>Desktop app (Windows, Mac, Linux)</span>
</div> </div>
<div class="feature-icon ongoing" title="Development Ongoing"> <div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>GPU-accelerated raster rendering</span> <span>GPU-accelerated raster rendering</span>
</div> </div>
<div class="feature-icon ongoing" title="Development Ongoing"> <div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Expanded imaging model data format</span> <span>Expanded imaging model data format</span>
</div> </div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 71" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Automatic image trace vectorization</span>
</div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 51" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 51" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Context menus throughout the editor</span> <span>Context menus throughout the editor</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Simplified main properties panel</span> <span>Simplified main properties panel</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 64" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 64" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Node version management</span> <span>Node version management</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Stable document format</span> <span>Stable document format</span>
</div> </div>
<!-- Beta 1 --> <!-- Beta 1 -->
@@ -173,67 +173,71 @@ Marrying vector and raster under one roof enables both art forms to complement e
<h3>— Beta 1 —</h3> <h3>— Beta 1 —</h3>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Local fonts access</span> <span>Local fonts access</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Saving over local files (web version)</span> <span>Saving over local files (web version)</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Timeline panel for animation curves</span> <span>Timeline panel for animation curves</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 62" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 62" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Nested documents as custom nodes</span> <span>Nested documents as custom nodes</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Variables and color swatches</span> <span>Variables and color swatches</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Custom attributes for table data</span> <span>Custom attributes for table data</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Physical measurement units</span> <span>Physical measurement units</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 65" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 65" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Text-on-path tool support</span> <span>Text-on-path tool support</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Per-glyph text style controls</span> <span>Per-glyph text style controls</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Robust vector mesh editing/rendering</span> <span>Robust vector mesh editing/rendering</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Nondestructive shape builder tool</span> <span>Nondestructive shape builder tool</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 71" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Automatic image trace vectorization</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Broader SVG support including filters</span> <span>Broader SVG support including filters</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Parametric art standalone export</span> <span>Parametric art standalone export</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>New and improved brush tool</span> <span>New and improved brush tool</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 43" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 43" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Stylus and touch interaction</span> <span>Stylus and touch interaction</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 70" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 70" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>MIDI and audio-reactive visualization</span> <span>MIDI and audio-reactive visualization</span>
</div> </div>
<!-- Beta 2 --> <!-- Beta 2 -->
@@ -241,59 +245,59 @@ Marrying vector and raster under one roof enables both art forms to complement e
<h3>— Beta 2 —</h3> <h3>— Beta 2 —</h3>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Dockable and multi-window panels</span> <span>Dockable and multi-window panels</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Command palette</span> <span>Command palette</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 68" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 68" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Onion skinning mode for animation</span> <span>Onion skinning mode for animation</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 69" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 69" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Animatable deformation meshes/rigs</span> <span>Animatable deformation meshes/rigs</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 72" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 72" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Simulation domains</span> <span>Simulation domains</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 57" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 57" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Signed distance field rendering</span> <span>Signed distance field rendering</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Procedural PBR material generation</span> <span>Procedural PBR material generation</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Code editor for custom nodes</span> <span>Code editor for custom nodes</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 34" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 34" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Asset libraries and node marketplace</span> <span>Asset libraries and node marketplace</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Automation/batch processing tools</span> <span>Automation/batch processing tools</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Select mode (marquee masking)</span> <span>Select mode (marquee masking)</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Raster adjustments, filters, and effects</span> <span>Raster adjustments, filters, and effects</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Liquify and warp transforms</span> <span>Liquify and warp transforms</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Raw photo processing</span> <span>Raw photo processing</span>
</div> </div>
<!-- LTS Releases --> <!-- LTS Releases -->
@@ -301,99 +305,99 @@ Marrying vector and raster under one roof enables both art forms to complement e
<h3>— LTS Releases —</h3> <h3>— LTS Releases —</h3>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Advanced typesetting features</span> <span>Advanced typesetting features</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>PDF, EPS, AI, DXF, PSD, and TIFF</span> <span>PDF, EPS, AI, DXF, PSD, and TIFF</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 55" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 55" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>CMYK, spot color, and ICC profiles</span> <span>CMYK, spot color, and ICC profiles</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>HDR and WCG color handling</span> <span>HDR and WCG color handling</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Outliner panel (node graph tree view)</span> <span>Outliner panel (node graph tree view)</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Document history management</span> <span>Document history management</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Offline edit resolution with CRDTs</span> <span>Offline edit resolution with CRDTs</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>History brush and clone stamp tools</span> <span>History brush and clone stamp tools</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Internationalization and accessibility</span> <span>Internationalization and accessibility</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>AI nodes and tools (e.g. magic wand)</span> <span>AI nodes and tools (e.g. magic wand)</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Procedural styling of paint brushes</span> <span>Procedural styling of paint brushes</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 60" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 60" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Infinite generative vector patterns</span> <span>Infinite generative vector patterns</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Geometric constraint system solver</span> <span>Geometric constraint system solver</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Responsive design layout solver</span> <span>Responsive design layout solver</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 61" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 61" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Authoring animated SVGs, Lottie, etc.</span> <span>Authoring animated SVGs, Lottie, etc.</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Live video stream compositing</span> <span>Live video stream compositing</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 44" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 44" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Tablet app and keyboard-free controls</span> <span>Tablet app and keyboard-free controls</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Media collection manager/browser</span> <span>Media collection manager/browser</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 37" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 37" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Cloud document storage/device sync</span> <span>Cloud document storage/device sync</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 38" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 38" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Multiplayer collaborative editing</span> <span>Multiplayer collaborative editing</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Predictive graph rendering/caching</span> <span>Predictive graph rendering/caching</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Multi-device distributed rendering</span> <span>Multi-device distributed rendering</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span>Hosted rendering accelerator service</span> <span>Hosted rendering accelerator service</span>
</div> </div>
<div class="feature-icon"> <div class="feature-icon">
<img class="atlas" style="--atlas-index: 47" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" /> <img class="atlas" style="--atlas-index: 47" src="https://static.graphite.rs/icons/icon-atlas-roadmap__5.png" alt="" />
<span><em>…and that's all just the beginning…</em></span> <span><em>…and that's all just the beginning…</em></span>
</div> </div>
</div> </div>
website/content/learn/interface/_index.md
+14 -13
View File
@@ -13,27 +13,28 @@ This chapter formally introduces the concepts and terminology for the user inter
The bar running across the top of the editor is called the **title bar**. In the (forthcoming) desktop release of Graphite, this acts as the draggable window frame. The bar running across the top of the editor is called the **title bar**. In the (forthcoming) desktop release of Graphite, this acts as the draggable window frame.
<p><img src="https://static.graphite.rs/content/learn/interface/title-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The title bar" /></p> <!-- <p><img src="https://static.graphite.rs/content/learn/interface/title-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The title bar" /></p> -->
### Menu bar ### Menu bar
On the left, the [**menu bar**](./menu-bar) provides quick access to many editor, document, and artwork related controls. Its functions are covered in detail on the next page. On the left, the [**menu bar**](./menu-bar) provides quick access to many editor, document, and artwork related controls. Its functions are covered in detail on the next page.
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The menu bar" /></p> <!-- <p><img src="https://static.graphite.rs/content/learn/interface/menu-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The menu bar" /></p> -->
<!-- In the (forthcoming) macOS desktop release, the menu bar is absent from the editor window; its functions are instead located in macOS menu bar. --> <!-- In the (forthcoming) macOS desktop release, the menu bar is absent from the editor window; its functions are instead located in macOS menu bar. -->
### Window buttons ### Window buttons
On the right, the **window buttons** provide platform-specific controls for the application. On the right (and on Mac, the left), the **window buttons** provide platform-specific controls for the application.
<!-- In the (forthcoming) macOS desktop release, this appears on the left side instead. --> <!-- In the (forthcoming) macOS desktop release, this appears on the left side instead. -->
| | | | | |
|-|-| |-|-|
| **Web** | <p>A button to enter fullscreen mode is displayed.</p><p>Some shortcut keys like <kbd>Ctrl</kbd><kbd>N</kbd> (macOS: <kbd>⌘</kbd><kbd>N</kbd>) are reserved by the web browser and can only be used in fullscreen mode. (Alternative to going fullscreen: include <kbd>Alt</kbd> in the shortcut combinations for browser-reserved hotkeys.)</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-web.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Fullscreen button" /></p> | | **Web** | <p>Fullscreen:</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-web__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Fullscreen button" /></p> |
<!-- | **Windows<br />& Linux** | The standard window controls are displayed: minimize, maximize/restore down, and close.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/window-buttons-windows-linux.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Minimize/maximize/close window buttons" /> | --> | **Windows** | <p>Minimize, maximize/restore down, close:</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-windows.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Minimize/maximize/close window buttons" /></p> |
<!-- | **macOS** | The standard window controls are displayed: close, minimize, and fullscreen. These are located on the left of the title bar.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/window-buttons-macos.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Close/minimize/fullscreen window buttons" /> | --> | **Linux** | <p>Minimize, maximize/unmaximize, close:</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-linux.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Minimize/maximize/close window buttons" /></p> |
| **macOS** | <p>Close, minimize, fullscreen:</p><p><img src="https://static.graphite.rs/content/learn/interface/window-buttons-macos.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Close/minimize/fullscreen window buttons" /></p> |
## Workspace ## Workspace
@@ -55,7 +56,7 @@ Beneath the panel header, the **panel content** displays the content for its pan
The bar running across the bottom of the editor is called the **status bar**. The bar running across the bottom of the editor is called the **status bar**.
<p><img src="https://static.graphite.rs/content/learn/interface/status-bar__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Status bar" /></p> <p><img src="https://static.graphite.rs/content/learn/interface/status-bar__2.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Status bar" /></p>
### Input hints ### Input hints
@@ -63,17 +64,17 @@ The **input hints** are presently the only occupant of the status bar. They indi
Hints with a **`+`** mean that adding the indicated modifier key will change the base action. For example: in the following action, dragging with left-click held down will zoom the canvas; then additionally holding the <kbd>Ctrl</kbd> key will make the zoom action snap to whole increments. Hints with a **`+`** mean that adding the indicated modifier key will change the base action. For example: in the following action, dragging with left-click held down will zoom the canvas; then additionally holding the <kbd>Ctrl</kbd> key will make the zoom action snap to whole increments.
<p><img src="https://static.graphite.rs/content/learn/interface/input-hints-plus.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example hint" /></p> <p><img src="https://static.graphite.rs/content/learn/interface/input-hints-plus.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example hint" /></p>
Hints with a **`/`** mean that either indicated input combination can be used to trigger the same action. For example: in the following action, either holding the space bar while dragging with the left mouse button held down, or just dragging with the middle mouse button held down, will both pan around the document in the viewport. Hints with a **`/`** mean that either indicated input combination can be used to trigger the same action. For example: in the following action, either holding the space bar while dragging with the left mouse button held down, or just dragging with the middle mouse button held down, will both pan around the document in the viewport.
<p><img src="https://static.graphite.rs/content/learn/interface/input-hints-slash.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example hint" /></p> <p><img src="https://static.graphite.rs/content/learn/interface/input-hints-slash.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example hint" /></p>
The following chart describes each icon representing the mouse inputs you can perform so a hint's prescribed action occurs. The following chart describes each icon representing the mouse inputs you can perform so a hint's prescribed action occurs.
| | Clicks | Drags | Others | | | Clicks | Drags | Others |
|-|:-:|:-:|:-:| |-|:-:|:-:|:-:|
| | | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-drag.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Drag icon" /><br style="line-height: 4" />Drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-stationary.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Mouse kept stationary icon" /><br style="line-height: 4" />Stationary | | **Left<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left click icon" /><br /><br />Left click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left click drag icon" /><br /><br />Left click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-double-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left double-click icon" /><br /><br />Left double-click |
| **Left<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-click.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left click icon" /><br style="line-height: 4" />Left click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-click-drag.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left click drag icon" /><br style="line-height: 4" />Left click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-left-double-click.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Left double-click icon" /><br style="line-height: 4" />Left double-click | | **Right<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right click icon" /><br /><br />Right click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right click drag icon" /><br /><br />Right click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-double-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right double-click icon" /><br /><br />Right double-click |
| **Right<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-click.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right click icon" /><br style="line-height: 4" />Right click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-click-drag.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right click drag icon" /><br style="line-height: 4" />Right click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-right-double-click.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Right double-click icon" /><br style="line-height: 4" />Right double-click | | **Middle<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-middle-click.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Middle click icon" /><br /><br />Middle click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-middle-click-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Middle click drag icon" /><br /><br />Middle click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-scroll.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Scroll up/down icons" /><br /><br />Scroll up/down |
| **Middle<br />mouse<br />button** | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-middle-click.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Middle click icon" /><br style="line-height: 4" />Middle click | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-middle-click-drag.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Middle click drag icon" /><br style="line-height: 4" />Middle click drag | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-scroll.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Scroll up/down icons" /><br style="line-height: 4" />Scroll up/down | | **No<br />mouse<br />button** | | <img src="https://static.graphite.rs/content/learn/interface/mouse-icon-drag.avif" onload="this.width = this.naturalWidth / 2" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Drag icon" /><br /><br />Drag | |
website/content/learn/interface/document-panel.md
+16 -6
View File
@@ -71,19 +71,29 @@ This narrow bar runs vertically down the left side of the Document panel beside
### Tools ### Tools
Located at the top of the tool shelf area, the **tool shelf** provides a selection of **tools** for interactively editing the artwork. <img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-shelf__2.avif" style="float: left; width: 64px; padding-right: 40px" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The tool shelf" />
Located at the top of the tool shelf area, the **tool shelf** provides a selection of **tools** for interactively editing the artwork. It is composed of three sections:
<div style="margin-left: calc(64px + 40px)">
| | | | | |
|-|-| |-|-|
| <img src="https://static.graphite.rs/content/learn/interface/document-panel/tool-shelf__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="The tool shelf" /> | <p>The tool shelf is split into three sections: the **general tools** (gray icons), **vector tools** (blue icons), and **raster tools** (orange icons).</p><p><ul><li>**General tools** are used for assorted editing tasks within the viewport.</li><li>**Vector tools** are used for drawing and editing vector shapes, paths, and text.</li><li>**Raster tools** are used for drawing and editing raster image content. The grayed out icons are placeholders for upcoming tools.</li></ul></p> | | **General tools** | (Gray icons) Used for assorted editing tasks within the viewport. |
| **Vector tools** | (Blue icons) Used for drawing and editing vector shapes, paths, and text. |
| **Raster tools** | (Orange icons) Used for drawing and editing raster image content. The grayed out icons are placeholders for upcoming tools. |
</div>
<div style="clear: both;"></div>
### Working colors ### Working colors
The **working colors** are the two colors used by the active tool. <img src="https://static.graphite.rs/content/learn/interface/document-panel/working-colors.avif" style="float: left; width: 64px; padding-right: 40px;" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The working colors" />
| | | The **working colors** are the two colors used by the active tool. The upper circle is the **primary color**. The lower circle is the **secondary color**.
|-|-|
| <img src="https://static.graphite.rs/content/learn/interface/document-panel/working-colors.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The working colors" /> | <p>The upper circle is the **primary color**. The lower circle is the **secondary color**.</p><p>There are two buttons located underneath: **Swap** which reverses the current color choices, and **Reset** which restores the primary color to black and the secondary color to white.</p> | There are two buttons located underneath: **Swap** which reverses the current color choices, and **Reset** which restores the primary color to black and the secondary color to white.
The tool controls (above the viewport) for some of the tools offer choices for using the primary and secondary colors. For example, the vector drawing tools have **Fill** and **Stroke** options that use the current secondary and primary colors, respectively, as defaults: The tool controls (above the viewport) for some of the tools offer choices for using the primary and secondary colors. For example, the vector drawing tools have **Fill** and **Stroke** options that use the current secondary and primary colors, respectively, as defaults:
website/content/learn/interface/menu-bar.md
+87 -68
View File
@@ -7,112 +7,131 @@ order = 1
The **menu bar** is the series of menus running across the top left of the editor's [**title bar**](../#title-bar). It provides organized access to many actions which are described on this page. The **menu bar** is the series of menus running across the top left of the editor's [**title bar**](../#title-bar). It provides organized access to many actions which are described on this page.
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The menu bar" /></p> Clicking **File**, **Edit**, **Layer**, **Select**, **View**, **Window**, and **Help** opens a dropdown menu with clickable actions. Pay attention to the keyboard shortcut listed on the right of each row in the dropdown menus. Learning to use them can help speed up your workflow.
Clicking **File**, **Edit**, **Layer**, **Document**, **View**, and **Help** opens a dropdown menu with clickable actions. Pay attention to the keyboard shortcut listed on the right of each row in the dropdown menus. Learning to use them can help speed up your workflow. ## Menu actions reference
The rest of this page is intended as a reference resource. Skip ahead to the next page if this is your first read-through of the manual. The rest of this page is intended as a reference resource. Skip ahead to the next page if this is your first read-through of the manual.
## App button ### App button
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/menu-app-button.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The app button" /></p> The **app button** appears as the Graphite [logo](/logo). Clicking it opens the website [home page](/).
The **app button** shows the [Graphite logo](/logo). Clicking it opens the Graphite website [home page](/). ### File
## File
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/menu-file__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The File menu" /></p>
The **File menu** lists actions related to file handling: The **File menu** lists actions related to file handling:
| | | | | |
|-|-| |-|-|
| New… | <p>Opens the **New Document** dialog for creating a blank canvas in a new editor tab.</p><p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-new-document.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'New Document' dialog" /></p> | | **New…** | <p>Opens the **New Document** dialog for creating a blank canvas in a new editor tab.</p><p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-new-document.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'New Document' dialog" /></p><p><ul><li><strong>Name</strong> determines the initial filename of the new document.</li><li><strong>Infinite Canvas</strong>, if set, skips adding an artboard and thereby starts with a boundless white canvas extending in all directions.</li><li><strong>Dimensions</strong> sets the width and height, in pixels, of the initial artboard. Ignored if *Infinite Canvas* is ticked.</li></ul></p> |
| Open… | <p>Opens the operating system file picker dialog for selecting a `.graphite` file from disk to be opened in a new editor tab.</p> | | **Open…** | <p>Opens the operating system file picker dialog for selecting a `.graphite` file from disk to be opened in a new editor tab.</p> |
| Open Demo Artwork… | <p>Opens the **Demo Artwork** dialog for loading a choice of premade sample artwork files provided for you to explore. Click the button below each image to open it.</p><p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-demo-artwork__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Demo Artwork' dialog" /></p> | | **Open Demo Artwork…** | <p>Opens the **Demo Artwork** dialog for loading a choice of premade sample artwork files provided for you to explore. Click the button below each image to open it.</p><p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-demo-artwork__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Demo Artwork' dialog" /></p> |
| Close | <p>Closes the active document. If it has unsaved changes (denoted by the `*` after the file name), you will be asked to save or discard the changes.</p> | | **Close** | <p>Closes the active document. If it has unsaved changes (denoted by the `*` after the file name), you will be asked to save or discard the changes.</p> |
| Close All | <p>Closes all open documents. To avoid accidentally losing unsaved work, you will be asked to confirm that you want to proceed which will discard the unsaved changes in all open documents.</p> | | **Close All** | <p>Closes all open documents. To avoid accidentally losing unsaved work, you will be asked to confirm that you want to proceed which will discard the unsaved changes in all open documents.</p> |
| Save | <p>Saves the active document by writing the `.graphite` file to disk. An operating system file download dialog may appear asking where to place it. That dialog will provide an opportunity to save over a previous version of the file, if you wish, by picking the identical name instead of saving another instance with a number after it.</p> | | **Save** | <p>Saves the active document by writing the `.graphite` file to disk. An operating system file download dialog may appear asking where to place it. That dialog will provide an opportunity to save over a previous version of the file, if you wish, by picking the identical name instead of saving another instance with a number after it.</p> |
| Import… | <p>Opens the operating system file picker dialog for selecting an image file from disk to be placed as a new bitmap image layer or SVG content into the active document.</p> | | **Import…** | <p>Opens the operating system file picker dialog for selecting an image file from disk to be placed as a new bitmap image layer or SVG content into the active document.</p> |
| Export… | <p>Opens the **Export** dialog for saving the artwork as a *File Type* of *PNG*, *JPG*, or *SVG*. *Scale Factor* multiplies the content's document scale, so a value of 2 would export 300x400 content as 600x800 pixels. *Bounds* picks what area to render: *All Artwork* uses the bounding box of all layers, *Selection* uses the bounding box of the currently selected layers, and an *Artboard: \[Name\]* uses the bounds of that artboard. *Transparency* exports PNG or SVG files with transparency instead of the artboard background color.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-export.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Export' dialog" /></p> | | **Export…** | <p>Opens the **Export** dialog for saving the artwork as a *File Type* of *PNG*, *JPG*, or *SVG*. *Scale Factor* multiplies the content's document scale, so a value of 2 would export 300x400 content as 600x800 pixels. *Bounds* picks what area to render: *All Artwork* uses the bounding box of all layers, *Selection* uses the bounding box of the currently selected layers, and an *Artboard: \[Name\]* uses the bounds of that artboard. *Transparency* exports PNG or SVG files with transparency instead of the artboard background color.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-export.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Export' dialog" /></p> |
| Preferences… | <p>Opens the **Editor Preferences** dialog for configuring Graphite's settings.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-editor-preferences__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Editor Preferences' dialog" /></p> | | **Preferences…** | <p>Opens the **Editor Preferences** dialog for configuring Graphite's settings.<br /><br /><img src="https://static.graphite.rs/content/learn/interface/menu-bar/dialog-editor-preferences__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The 'Editor Preferences' dialog" /></p> |
## Edit ### Edit
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/menu-edit__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The Edit menu" /></p>
The **Edit menu** lists actions related to the editing workflow: The **Edit menu** lists actions related to the editing workflow:
| | | | | |
|-|-| |-|-|
| Undo | <p>Steps back in the history of changes in the active document.</p> | | **Undo** | <p>Steps back in the history of changes in the active document.</p> |
| Redo | <p>Steps forward in the history of changes in the active document.</p> | | **Redo** | <p>Steps forward in the history of changes in the active document.</p> |
| Cut | <p>Copies the selected layer(s) to the clipboard, then deletes them.</p> | | **Cut** | <p>Copies the selected layer(s) to the clipboard, then deletes them.</p> |
| Copy | <p>Copies the selected layer(s) to the clipboard.</p> | | **Copy** | <p>Copies the selected layer(s) to the clipboard.</p> |
| Paste | <p>Pastes the copied layer(s) from the clipboard into the document. It will end up directly above the selected layer, or otherwise at the base of the folder structure.</p><p>In the web version of Graphite, your browser will ask for permission to read from your clipboard which you must grant; alternatively, using the hotkey <kbd>Ctrl</kbd><kbd>V</kbd> (macOS: <kbd>⌘</kbd><kbd>V</kbd>) works without the browser needing this permission.</p> | | **Paste** | <p>Pastes the copied layer(s) from the clipboard into the document. It will end up directly above the selected layer, or otherwise at the base of the folder structure.</p><p>In the web version of Graphite, your browser will ask for permission to read from your clipboard which you must grant; alternatively, using the hotkey <kbd>Ctrl</kbd><kbd>V</kbd> (macOS: <kbd>⌘</kbd><kbd>V</kbd>) works without the browser needing this permission.</p> |
| **Duplicate** | <p>Creates a copy of the selected layer(s) directly above their original(s) in the layer stack.</p> |
| **Delete** | <p>Removes all selected layers and folders.</p> |
| **Convert to Infinite Canvas** | <p>Replaces all artboards in the document with standard layers. With no artboards present, the document becomes an infinite canvas.</p> |
## Layer ### Layer
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/menu-layer__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The Layer menu" /></p>
The **Layer menu** lists actions related to the layers within a document: The **Layer menu** lists actions related to the layers within a document:
| | | | | |
|-|-| |-|-|
| New | <p>Creates a new layer in the active document. It will end up directly above the selected layer, or otherwise at the base of the folder structure.</p> | | **New** | <p>Creates a new layer in the active document. It will end up directly above the selected layer, or otherwise at the base of the folder structure.</p> |
| Select All | <p>Selects all layers and folders in the document.</p> | | **Group** | <p>Creates a new folder in place of the selected layer(s), then moves them into that folder.</p> |
| Deselect All | <p>Deselects everything in the document.</p> | | **Ungroup** | <p>Removes the selected folder(s), moving their contents up one level in the layer stack.</p> |
| Previous Selection | <p>Goes back to the previously selected set of layers/nodes in the selection history.</p><p>If the side of your mouse has navigation buttons, you can use the back button as a shortcut (not supported in Firefox).</p> | | **Hide/Show** | <p>Toggles visibility of the selected layer(s), including or excluding them from rendering as part of the artwork.</p> |
| Next Selection | <p>Goes forward to the next selected set of layers/nodes in the selection history.</p><p>If the side of your mouse has navigation buttons, you can use the forward button as a shortcut (not supported in Firefox).</p> | | **Lock/Unlock** | <p>Toggles the locked state of the selected layer(s), preventing them from being selected by tools in the viewport.</p> |
| Group Selected | <p>Creates a new folder in place of the selected layer(s), then moves them into that folder.</p> | | **Grab** | <p>Begin grabbing the selected layer(s) to translate (move) them around with your cursor's movement. Lock to an axis with <kbd>X</kbd> or <kbd>Y</kbd> then use the number keys to type a pixel distance value. Confirm with a left click or <kbd>Enter</kbd>. Cancel with a right click or <kbd>Esc</kbd>.</p> |
| Delete Selected | <p>Removes all selected layers and folders.</p> | | **Rotate** | <p>Begin rotating the selected layer(s) around their pivot point with your cursor's movement. Use the number keys to type an angle value in degrees. Confirm with a left click or <kbd>Enter</kbd>. Cancel with a right click or <kbd>Esc</kbd>.</p> |
| Grab Selected | <p>Begin grabbing the selected layer(s) to translate (move) them around with your cursor's movement. Lock to an axis with <kbd>X</kbd> or <kbd>Y</kbd> then use the number keys to type a pixel distance value. Confirm with a left click or <kbd>Enter</kbd>. Cancel with a right click or <kbd>Esc</kbd>.</p> | | **Scale** | <p>Begin scaling the selected layer(s) around their pivot point with your cursor's movement. Lock to an axis with <kbd>X</kbd> or <kbd>Y</kbd>. Use the number keys to type a scale multiplier value. Confirm with a left click or <kbd>Enter</kbd>. Cancel with a right click or <kbd>Esc</kbd>.</p> |
| Rotate Selected | <p>Begin rotating the selected layer(s) around their pivot point with your cursor's movement. Use the number keys to type an angle value in degrees. Confirm with a left click or <kbd>Enter</kbd>. Cancel with a right click or <kbd>Esc</kbd>.</p> | | **Arrange ><br />Raise to Front** | <p>Reorders the selected layer(s) above all others within their same folder(s), so they appear in the layer stack and render above those other layers.</p> |
| Scale Selected | <p>Begin scaling the selected layer(s) around their pivot point with your cursor's movement. Lock to an axis with <kbd>X</kbd> or <kbd>Y</kbd>. Use the number keys to type a scale multiplier value. Confirm with a left click or <kbd>Enter</kbd>. Cancel with a right click or <kbd>Esc</kbd>.</p> | | **Arrange ><br />Raise** | <p>Reorders the selected layers(s) up by one in the layer stack, so any layer that was immediately above the selected layer(s) ends up immediately below.</p> |
| Order ><br />Raise to Front | <p>Reorders the selected layer(s) above all others within their same folder(s), so they appear in the layer stack and render above those other layers.</p> | | **Arrange ><br />Lower** | <p>Reorders the selected layers(s) down by one in the layer stack, so any layer that was immediately below the selected layer(s) ends up immediately above.</p> |
| Order ><br />Raise | <p>Reorders the selected layers(s) up by one in the layer stack, so any layer that was immediately above the selected layer(s) ends up immediately below.</p> | | **Arrange ><br />Lower to Back** | <p>Reorders the selected layer(s) below all others within their same folder(s), so they appear in the layer stack and render below those other layers.</p> |
| Order ><br />Lower | <p>Reorders the selected layers(s) down by one in the layer stack, so any layer that was immediately below the selected layer(s) ends up immediately above.</p> | | **Arrange ><br />Reverse** | <p>Reorders the selected layers by swapping their positions from top to bottom. Reversal applies amongst each set of selected sibling layers (those with a shared parent).</p> |
| Order ><br />Lower to Back | <p>Reorders the selected layer(s) below all others within their same folder(s), so they appear in the layer stack and render below those other layers.</p> | | **Align ><br />Align Left** | <p>Moves the selected layer(s) so their left edges line up with the leftmost edge of the selection's bounding box.</p> |
| **Align ><br />Align Horizontal Center** | <p>Moves the selected layer(s) so their horizontal centers line up with the horizontal center of the selection's bounding box.</p> |
| **Align ><br />Align Right** | <p>Moves the selected layer(s) so their right edges line up with the rightmost edge of the selection's bounding box.</p> |
| **Align ><br />Align Top** | <p>Moves the selected layer(s) so their top edges line up with the topmost edge of the selection's bounding box.</p> |
| **Align ><br />Align Vertical Center** | <p>Moves the selected layer(s) so their vertical centers line up with the vertical center of the selection's bounding box.</p> |
| **Align ><br />Align Bottom** | <p>Moves the selected layer(s) so their bottom edges line up with the bottommost edge of the selection's bounding box.</p> |
| **Flip ><br />Flip Horizontal** | <p>Reflects the selected layer(s) horizontally within the selection's bounding box.</p> |
| **Flip ><br />Flip Vertical** | <p>Reflects the selected layer(s) vertically within the selection's bounding box.</p> |
| **Turn ><br />Turn -90°** | <p>Rotates the selected layer(s) a quarter turn counterclockwise about the selection's bounding box center.</p> |
| **Turn ><br />Turn 90°** | <p>Rotates the selected layer(s) a quarter turn clockwise about the selection's bounding box center.</p> |
| **Boolean ><br />Union** | <p>Combines all paths of the selected vector layer(s) while cutting out overlapping areas (even the interiors of a single path)
| **Boolean ><br />Subtract Front** | <p>Cuts overlapping areas out from the last of the selected vector layers.</p> |
| **Boolean ><br />Subtract Back** | <p>Cuts overlapping areas out from the first of the selected vector layers.</p> |
| **Boolean ><br />Intersect** | <p>Cuts away all but the overlapping areas shared by every path of the selected vector layer(s).</p> |
| **Boolean ><br />Difference** | <p>Cuts away the overlapping areas shared by every path of the selected vector layer(s), leaving only the non-overlapping areas.</p> |
| **Make Path Editable** | <p>Applies a path edit operation (the **Path node**) to the selected vector layer, capturing the geometry after other nondestructive operations to enable its direct modification by the **Path** and **Pen** tools.</p> |
## Document ### Select
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/menu-document__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The Document menu" /></p> The **Select menu** lists actions related to the selection of layers within a document:
The **Document menu** lists actions related to the document and artwork:
| | | | | |
|-|-| |-|-|
| Clear Artboards | <p>Removes all artboards from the document, resulting in an infinite canvas.</p> | | **Select All** | <p>Selects all layers and folders in the document.</p> |
| **Deselect All** | <p>Deselects everything in the document.</p> |
| **Select Parent** | <p>Selects the parent folder(s) of the currently selected layer(s).</p> |
| **Previous Selection** | <p>Goes back to the previously selected set of layers or nodes in the selection history.</p><p>If the side of your mouse has navigation buttons, you can use the back button as a shortcut (not supported in Firefox).</p> |
| **Next Selection** | <p>Goes forward to the next selected set of layers or nodes in the selection history.</p><p>If the side of your mouse has navigation buttons, you can use the forward button as a shortcut (not supported in Firefox).</p> |
## View ### View
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/menu-view__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The View menu" /></p>
The **View menu** lists actions related to the view of the canvas within the viewport: The **View menu** lists actions related to the view of the canvas within the viewport:
| | | | | |
|-|-| |-|-|
| Tilt | <p>Begins tilting the viewport angle based on your mouse movements.</p><p>While tilting, hold <kbd>Shift</kbd> to snap to 15° increments. Confirm with a left click or <kbd>Enter</kbd>. Cancel with a right click or <kbd>Esc</kbd>.</p> | | **Tilt** | <p>Begins tilting the viewport angle based on your mouse movements.</p><p>While tilting, hold <kbd>Shift</kbd> to snap to 15° increments. Confirm with a left click or <kbd>Enter</kbd>. Cancel with a right click or <kbd>Esc</kbd>.</p> |
| Reset Tilt | <p>Sets the viewport tilt angle back to 0°.</p> | | **Reset Tilt** | <p>Sets the viewport tilt angle back to 0°.</p> |
| Zoom In | <p>Narrows the view to the next whole zoom increment, such as:</p><p>25%, 33.33%, 40%, 50%, 66.67%, 80%, 100%, 125%, 160%, 200%, 250%, 320%, 400%, 500%</p> | | **Zoom In** | <p>Narrows the view to the next whole zoom increment, such as:</p><p>25%, 33.33%, 40%, 50%, 66.67%, 80%, 100%, 125%, 160%, 200%, 250%, 320%, 400%, 500%</p> |
| Zoom Out | <p>Widens the view to the next whole zoom increment, such as above.</p> | | **Zoom Out** | <p>Widens the view to the next whole zoom increment, such as above.</p> |
| Zoom to Selection | <p>Zooms and frames the viewport to the bounding box of the selected layer(s).</p> | | **Zoom to Selection** | <p>Zooms and frames the viewport to the bounding box of the selected layer(s).</p> |
| Zoom to Fit | <p>Zooms and frames the viewport to fit all artboards, or all artwork if using infinite canvas.</p> | | **Zoom to Fit** | <p>Zooms and frames the viewport to fit all artboards, or all artwork if using infinite canvas.</p> |
| Zoom to 100% | <p>Zooms the viewport in or out to 100% scale, making the document and viewport scales match 1:1.</p> | | **Zoom to 100%** | <p>Zooms the viewport in or out to 100% scale, making the document and viewport scales match 1:1.</p> |
| Zoom to 200% | <p>Zooms the viewport in or out to 200% scale, displaying the artwork at twice the actual size.</p> | | **Zoom to 200%** | <p>Zooms the viewport in or out to 200% scale, displaying the artwork at twice the actual size.</p> |
| Flip | <p>Mirrors the viewport horizontally, flipping the view of the artwork until deactivated.</p> | | **Flip** | <p>Mirrors the viewport horizontally, flipping the view of the artwork until deactivated.</p> |
| Rulers | <p>Toggles visibility of the rulers along the top/left edges of the viewport.</p> | | **Rulers** | <p>Toggles visibility of the rulers along the top/left edges of the viewport.</p> |
## Help ### Window
<p><img src="https://static.graphite.rs/content/learn/interface/menu-bar/menu-help__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="The Help menu" /></p> The **Window menu** lists actions related to the visibility of workspace panels within the application window:
| | |
|-|-|
| **Properties** | <p>Toggles visibility of the **Properties panel** on the upper-right side of the workspace. It is used to inspect and edit the values of graphics operation (node) parameters. Selected layers or nodes display their parametric controls in this panel.</p> |
| **Layers** | <p>Toggles visibility of the **Layers panel** on the lower-right side of the workspace. It is used to organize and select the artboards and layers that form the structure of a document.</p> |
| **Data** | <p>Toggles visibility of the **Data panel** on the lower-left side of the workspace. It is used to introspect data flow from the output of a selected node for technical debugging of content generated within the node graph.</p> |
### Help
The **Help menu** lists actions related to information about Graphite: The **Help menu** lists actions related to information about Graphite:
| | | | | |
|-|-| |-|-|
| About Graphite… | <p>Opens the **About Graphite** dialog for displaying release and license information. You can check it for the release date of the current editor version.</p> | | **About Graphite…** | <p>Opens the **About Graphite** dialog for displaying release and license information. You can check it for the release date of the current editor version.</p> |
| User Manual | <p>Opens this [user manual](./learn).</p> | | **User Manual** | <p>Opens this [user manual](./learn).</p> |
| Report a Bug | <p>Opens a page to file a [new GitHub issue](https://github.com/GraphiteEditor/Graphite/issues/new).</p> | | **Donate to Graphite** | <p>Opens the Graphite [development fund](/donate) page where you can contribute financially to support ongoing development of the project.</p> |
| Visit on GitHub | <p>Opens the [Graphite GitHub repository](https://github.com/GraphiteEditor/Graphite).</p> | | **Report a Bug** | <p>Opens a page to file a [new GitHub issue](https://github.com/GraphiteEditor/Graphite/issues/new).</p> |
| *Debug section* | <p>Developer-only actions. Users should ignore these.</p> | | **Visit on GitHub** | <p>Opens the [Graphite GitHub repository](https://github.com/GraphiteEditor/Graphite).</p> |
| **Developer Debug** | <p>A section with developer-only actions. Users should ignore these.</p> |
website/content/learn/introduction/features-and-limitations.md
+4 -37
View File
@@ -13,9 +13,9 @@ A lot is planned on the future [roadmap](/features#roadmap), but here's an overv
### Vector illustration and graphic design ### Vector illustration and graphic design
| | | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/cactus-vector-art.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example vector artwork of a potted cactus" style="max-width: unset; float: right; margin-left: 40px" />
|-|-|
| <p>Vector editing is the core competency of the Graphite editor at this stage in its development. That means you can create shape-based vector artwork and designs with the available tools.</p><p>Primitive geometry like rectangles and ellipses can be drawn and, as desired, modified into more complex shapes using the Path tool. Fully organic shapes may also be created from scratch with the Pen tool. They can then be given colors and gradients to add visual style. This cactus is an example of the style of artwork you can create with vector graphics.</p> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/cactus-vector-art.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Example vector artwork of a potted cactus" style="max-width: unset" /> | Vector editing is the core competency of the Graphite editor at this stage in its development. That means you can create shape-based vector artwork and designs with the available tools.</p><p>Primitive geometry like rectangles and ellipses can be drawn and, as desired, modified into more complex shapes using the Path tool. Fully organic shapes may also be created from scratch with the Pen tool. They can then be given colors and gradients to add visual style. This cactus is an example of the style of artwork you can create with vector graphics.
### Procedural design ### Procedural design
@@ -32,18 +32,13 @@ Starting from the left, the <img src="https://static.graphite.rs/content/learn/i
Next, that is fed into the <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" style="vertical-align: middle" alt="Circular Repeat" /> node which has several parameters you can modify and get different output data based on your choices, like in these examples: Next, that is fed into the <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node__3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" style="vertical-align: middle" alt="Circular Repeat" /> node which has several parameters you can modify and get different output data based on your choices, like in these examples:
<style class="table-1-style"> <style class="table-1-style">
.table-1-style + table {
width: auto;
}
.table-1-style + table td { .table-1-style + table td {
vertical-align: middle; vertical-align: middle;
text-align: center;
} }
</style> </style>
| | | | | |
|-|-| |:-:|:-:|
| <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-1__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-1.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-1__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-1.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> |
| <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-2__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-2__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> |
| <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-3__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-parameters-3__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> | <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/circular-repeat-node-output-3.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" /> |
@@ -57,31 +52,3 @@ The node's properties offer controls over settings like *Angle Offset* (what ang
Raster image editing is a growing capability that will develop over time into the central focus of Graphite. Raster imagery is composed of pixels which are grids of color that can represent anything visual, like paintings and photographs. The current feature set lets you import images, manipulate them using the node-based compositor, and apply nondestructive global effects like color adjustment filters. Raster image editing is a growing capability that will develop over time into the central focus of Graphite. Raster imagery is composed of pixels which are grids of color that can represent anything visual, like paintings and photographs. The current feature set lets you import images, manipulate them using the node-based compositor, and apply nondestructive global effects like color adjustment filters.
A prototype <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/brush-tool-icon.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" style="vertical-align: bottom" /> Brush tool exists letting you draw simple doodles and sketches. However it is very limited in its capabilities and there are multiple bugs and performance issues with the feature. It can be used in a basic capacity, but don't expect to paint anything too impressive using raster brushes quite yet. The tool will be fully rewritten in the future. A prototype <img src="https://static.graphite.rs/content/learn/introduction/features-and-limitations/brush-tool-icon.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" onload="this.width = this.naturalWidth / 2" alt="" style="vertical-align: bottom" /> Brush tool exists letting you draw simple doodles and sketches. However it is very limited in its capabilities and there are multiple bugs and performance issues with the feature. It can be used in a basic capacity, but don't expect to paint anything too impressive using raster brushes quite yet. The tool will be fully rewritten in the future.
## Status and limitations
Please make yourself aware of these factors to better understand and work around the rough edges in today's Graphite editor.
### Evolving document format
Saved documents will eventually fail to render in future versions of the Graphite editor because of code changes. Since node implementations and other systems are in flux, file format stability isn't possible yet during this alpha stage of development. If a file opens but there's a rendering error, you may need to open the node graph and replace outdated nodes by creating new ones near the site of an error. Later in the development roadmap, a redesigned file format with a `.gdd` (Graphite Design Document) extension will replace `.graphite` files and it will be built with seamless backwards-compatability in mind.
### Limited raster tooling
While you can import bitmap images, apply image effects in the node graph, and draw brush strokes, there is not much tooling yet to make the overall raster workflow that useful. Marquee selection is an upcoming feature slated for later in 2025 which will significantly improve the utility of raster editing in Graphite.
Hardware accelerated rendering, to offload pixel processing from the CPU to GPU, is also planned for 2025. It will drastically improve the performance of working with millions of pixels.
### Performance bottlenecks
Graphite has several temporary performance bottlenecks that currently yield poor responsiveness when working with raster content, complex vector artwork, and large procedural node graphs. This is especially impactful for raster content. It also currently applies to large volumes of vector data, such as paragraphs worth of text (which is represented as vector paths).
Each of these limitations will be resolved by finishing the implementations of incomplete systems that impose slowdowns in their current forms. For example, certain opportunities for node graph caching are not operational and GPU-accelerated rendering isn't enabled yet.
Performance will be a high-priority focus throughout 2025.
### Best-effort Safari support
Old versions of Safari lack support for the web standards Graphite is built upon. The latest version of the browser still won't run Graphite as well as Chrome and you may encounter extra bugs because we have limited resources to regularly test for Safari issues. Feel free to file issues only if you're using the latest Safari version and find a bug that isn't present in Chrome.
The latest Chrome, Edge, or Opera browser is recommended for the best-supported experience. Firefox works reasonably well, with only some minor loss of quality-of-life features. Brave is likely to encounter issues due to its aggressive degradation of web standards.
website/content/volunteer/guide/graphene/_index.md
+4 -4
View File
@@ -46,11 +46,11 @@ This sliding scale of latency/performance concerns maps directly to programming
We designed Graphene to operate in all three regimes: We designed Graphene to operate in all three regimes:
| Regime | Usage | | Regime | Usage |
|:------------|:----------------------------------------------------------------------| |-|-|
| Interpreted | While editing. Simple and currently the only mode that's implemented. | | Interpreted | While editing. Simple and currently the only mode that's implemented. |
| JIT | While editing. Dynamically bridges the gap between both other regimes by selectively substituting branches of the graph with interpreted and compiled nodes to keep latency low and work towards higher execution performance. | | JIT | While editing. Dynamically bridges the gap between both other regimes by selectively substituting branches of the graph with interpreted and compiled nodes to keep latency low and work towards higher execution performance. |
| Compiled | When exported. The entire graph is compiled as a standalone program. | | Compiled | When exported. The entire graph is compiled as a standalone program. |
### Building upon the Rust compiler ### Building upon the Rust compiler
website/sass/base.scss
+29 -8
View File
@@ -483,23 +483,44 @@ img {
} }
table { table {
margin: 20px -20px; margin: 40px -10px;
width: calc(100% + 40px); width: calc(100% + 20px);
font-size: 16px;
border-collapse: collapse;
th, th,
td { td {
border: 20px solid transparent; border: solid var(--color-fog);
border-width: 1px 0;
vertical-align: top; vertical-align: top;
margin: 0; margin: 0;
padding: 0; padding: 20px;
&:first-child {
padding-left: 10px;
}
&:last-child {
padding-right: 10px;
}
&:not(:first-child) img {
max-width: 100%;
}
} }
th:not(:first-child) img, thead:not(:has(tr th:not(:empty))) {
td:not(:first-child) img { th {
max-width: 100%; padding: 0;
}
+ tbody tr:first-child td {
border: none;
}
} }
th:empty { tr th,
tr:last-child td {
border: none; border: none;
} }