Tracking Issue: NLnet grant milestones

[Keavon]

The ongoing development milestones tracked here are graciously funded with support of the NLNet NGI0 Commons Fund More details: https://nlnet.nl/project/Graphite/

Within the scope of this project, Graphite will be integrating keyframe animation to bring vector graphics to life with motion, expanding upon existing support for live playback of mathematically-driven motion. Also, new and updated tool controls and panel layouts will make the interface more familiar, intuitive, and accessible to users of all skill levels. Furthermore, development of a new document file format will usher Graphite out of its experimental era by supporting backwards-compatible save files that can be relied upon to open correctly after many new application versions.

Floating menus system support for context menus and tooltips

Many current features in Graphite are buried behind keyboard shortcuts and lack discoverability. This set of improvements will make the interface more accessible by surfacing functionality through right-click context menu actions and tooltips, helping introduce functionality and shortcuts all throughout the editor.

• Refactor floating menu system to be controlled fully from the Rust side of the codebase (Make font selection show a live preview on hover; move its code to the backend #3487)
• Replace plaintext tooltips with custom-styled floating menu tooltips supporting rich styling and hotkey hints (Replace text-only tooltips with custom richly styled tooltips #3436, Improve tooltip docs with Markdown styling and refined math node explanations #3488, commit 415d4b5)
• Write new tooltip descriptions for prominent tools, buttons, nodes, and commonly-used functionality throughout the editor to improve clarity and discoverability (Improve tooltip docs with Markdown styling and refined math node explanations #3488, Add tooltip documentation to the Text node and tidy up node catalog categorization #3645)
• Implement support for general context menus
• Replace the node graph's existing hacky placeholder context menus with the new general ones
• Populate the editor with context menus on layers, objects in the viewport, and other prominent UI areas most expected by users to have them

Tool control bar

Graphite's current tool control bar UI dates back to the application's earliest code and has never offered a clear, intuitive way to adjust tool settings and object styling. This task will redesign its behavior to align its conceptual model with user expectations, providing a clearer way to adjust the appearance of existing selected objects and of new objects that will be drawn with the active tool.

• Design and finalize plan for new, intuitive UI behavior to reduce confusion about how tools, drawing, and layer styling concepts interact
  • Design mockups for how object styling controls and working colors will look and behave
  • Design mockups for how tool modes and each tool's control bar UI will look and behave
• Implement redesigned tool control bar UI for object styling/appearance
• Implement redesigned working colors UI and its interactions with selected objects and tools

Node Properties panel

The existing node system in Graphite exposes some moderately technical parameters for adjusting the graphical properties of its operations. But as the node graph evolved with more support for more expressive functionality, the panel's UI has lagged behind and no longer provides the most user-friendly way to understand and control these parameters. This task will revamp the panel to provide an easier to use and understand interface for this commonly used functionality.

• Refine the existing design mockup for the node Properties panel
• Implement the redesigned panel UI to make existing graphics editing functionality more accessible and user-friendly by not requiring the node graph
• Support explicitly choosing the desired data types of node parameters in a user-friendly way
  • Refactor internal type handling system to support custom application-specific data types like percentages and angles
  • Clean up the user-facing naming of existing data types to be more consistent and intuitive, like DVec2 (internal) to Vec2 (user-facing)
  • Integrate a context menu for viewing and selecting a compatible data type of a node parameter
  • Clean up existing nodes to cleanly utilize this new capability in place of prior workarounds

Object Properties panel

In addition to the technical node parameters, Graphite users also needs a more designer-friendly way to adjust common visual properties of selected objects in the viewport. This goes hand-in-hand with the revamped node Properties panel, the redesigned tool control bar, and the new Timeline panel's keyframe editor, since these four features provide connected conceptual models for adjusting the parameters of graphics in the document. This task involves designing and building this new panel so Graphite feels more like a nontechnical design tool by default.

• Refactor the UI widget layout description format system so it is flexible enough to represent the new UI requirements (Refactor the old menu bar plumbing to use standard TextButtons #3444, Restyle and refactor shortcut labels to send hints bar and welcome screen layouts from Rust #3447, commit 4581689, commit 3c4ad8b, Unwrap the Layout enum to replace it with the WidgetLayout struct now called Layout #3448, commit 2ee8e56, commit 74d9c91, Move the MenuBarMessage up from within PortfolioMessage to the root Message #3459, commit 63217fe, commit e99f30e)
• Design a mockup for new this new panel with contextual areas for common object types like primitive shapes, text, vector, and raster
• Implement this new panel with support for editing common properties of selected objects (like colors, dimensions, and fonts) in a non-technical way

Layers panel

The Layers panel is an important tool for organization and goes alongside the properties panels in exposing common functionality. This task involves minor improvements to the existing panel to improve discoverability and visual clarity of some features, as well as fixing layout issues that arise at smaller window sizes.

• Build a design mockup for the Layers panel and add new minor design UI/UX refinements
• Improve the existing panel with minor UI/UX enhancements, like making clipping masks more discoverable
• Fix widgets overlapping each other in the Layers panel and throughout the editor at smaller window sizes

Timeline panel basic animation controls

Bringing animation to Graphite requires a new panel for managing playback time. This is the first step in building the full keyframe animation system, setting out a way to control playback and export.

• Rendering multiple frames for animation export to PNG, JPEG, and SVG image sequences
• Initial UI for the Timeline panel with playback controls, time display, and playhead within the time ruler
• Playback controls for framerate, scrubbing, and looping animation time ranges
• Modes for both continuous seconds and discrete frames and conversions between them

Timeline panel dope sheet editor

The dope sheet is a common, intuitive way to visualize and edit keyframes for animation. This task involves extending the basic Timeline panel with functionality for driving node parameters with keyframes.

• Base infrastructure and plumbing for the Timeline panel's connection to the node graph
• UI for dope sheet channels and keyframes and hook up its basic functionality for scalar values
• Driving node parameter values with animation curves data created in the Timeline panel

Timeline panel advanced features and animation curves editor

Building upon the dope sheet editor, this task involves adding more advanced features that animators expect for precise control over motion and timing. This task puts the finishing touches on the initial animation system.

• Animatable composite data types like Vec2 decomposable into multiple scalar channels that can be controlled by curves
• Modes for both manual keying and auto keying
• Design a mockup for the Timeline panel's curves editor view
• UI for the curves editor view according to standard animation software conventions

Stable document format history management

Graphite has been built without a permanent document file format which it requires to be depended on for production use and adopted as an open standard in the graphics ecosystem. This task involves the initial research and development for the core building blocks of this newly designed format.

• Design the structure of the new replacement format
• Build the on-disk representation of the node graph data and of deltas for authoring history
• Add support for reusable node definitions by "aliasing" another node in the document
• Research and integrate a CRDT algorithm for applying graph data deltas to sync up concurrent offline edits to the same file
• Additional time for inevitable but not-yet-known research challenges

Stable document integration of new storage layer with existing code

After building the new document storage format in isolation, this task involves integrating it with the existing codebase so that Graphite can start using it for representing documents in memory and authoring history.

• Conversion from current in memory document representation to new storage format
• Conversion from storage format to in memory representation
• Translation of in-memory graph modification deltas to storage deltas and vice versa
• Hooking up the current history system to use the new storage representation

Stable document asset database + on-disk storage

Once the new document storage layer is integrated, this task involves additional requirements for handling embedded and linked assets like image files, as well as extending the new system to write to, and be read from, actual files on disk. At this point, it can replace the existing bulky, fragile JSON serialization files in use today.

• Create a content-addressable asset database to store resources like imported images
• Allow referencing nodes from other files
• Design and implement compressed container format and metadata storage
• Design and implement template for document format migrations

Stable document format serialization and backwards-compatibility

After the new document format is fully integrated and able to read and write files, this task involves building the systems required to ensure that files remain backwards-compatible as Graphite continues to develop over time. This will ensure users can rely on their files opening correctly in future versions of the application, easing adoption for production use of Graphite.

• Develop a system for providing an upgrade path from old to new versions of nodes and their usages in the document
• Implement a system for testing a collection of example files for backwards-compatibility failures
• Build a way for users to choose whether specific assets should be embedded in the document file or linked from disk