* Add alignment overlays * Made snapping / overlays not render extra times, made snapping distance larger * Revert snap tolerance change until user testing can be done * WIP conversion to messages * Revert "WIP conversion to messages" This reverts commitddcc23865a. * Overlay document always has (0,0) in top left * Fix AA on overlay lines * Merge branch 'master' into alignment-overlays * Squashed commit of the following: commitdbc19912caAuthor: asyncth <97792158+asyncth@users.noreply.github.com> Date: Sun Jan 16 12:57:03 2022 +0500 Set the mouse cursor in the canvas based on the current tool and its state (#480) * Add FrontendMouseCursor and DisplayMouseCursor * Add update_cursor method to the Fsm trait and implement it for all tools * Rename DisplayMouseCursor to UpdateMouseCursor * Add 'To CSS Cursor Property' transform decorator and change the mouse cursor in the canvas based on the current tool and its state * Implement update_cursor for Navigate tool properly * Keep the cursor when dragging outside of the canvas * Change the mouse cursor to 'zoom-in' when LMB dragging on canvas with Navigate tool * Rename FrontendMouseCursor to MouseCursorIcon * Rename 'event' to 'e' and replace v-on with @ * Change the definition of the MouseCursorIcon type in TS * Replace switch with dictionary look-up * Move the definition of MouseCursorIcon closer to where it's used commit9b36e6a909Author: Keavon Chambers <keavon@keavon.com> Date: Sat Jan 15 17:24:58 2022 -0800 Fix all remaining Vue/TS errors flagged in Volar commit2cc39cdb37Author: Keavon Chambers <keavon@keavon.com> Date: Sat Jan 15 12:55:51 2022 -0800 Tweak whitespace around `use` statements and other lint fixes commitfa390c3875Author: Keavon Chambers <keavon@keavon.com> Date: Sat Jan 15 06:35:06 2022 -0800 Change canvas artboard background color to be 1 shade lighter commitea2d003484Author: Keavon Chambers <keavon@keavon.com> Date: Fri Jan 14 20:54:38 2022 -0800 Modify all message enum data to use named struct values, not tuples (#479) * Massively reorganize and clean up the whole Rust codebase * Modify all message enum data to use named struct values, not tuples commit9b6cbb5f50Author: Keavon Chambers <keavon@keavon.com> Date: Fri Jan 14 14:58:08 2022 -0800 Massively reorganize and clean up the whole Rust codebase (#478) * Massively reorganize and clean up the whole Rust codebase * Additional changes during code review commita535f5c1c1Author: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 12 16:17:40 2022 -0800 Sort messages and message handlers commite70858884dAuthor: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 12 14:16:13 2022 -0800 Standardize FrontendMessage message names commit0b4934b4f3Author: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 12 12:45:07 2022 -0800 Rename document_file.rs to document_message_handler.rs commitec7bf4a771Author: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 12 12:19:14 2022 -0800 Rename DocumentsMessage to PortfolioMessage commit0991312ba0Author: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 12 11:44:49 2022 -0800 Rename document_message_handler.rs to portfolio_message_handler.rs commitc76c92e500Author: 0HyperCube <78500760+0HyperCube@users.noreply.github.com> Date: Wed Jan 12 19:05:55 2022 +0000 Migrate to using MoveSelectedLayersTo (#469) * migrate to using MoveSelectedLayersTo * Fix dragging a selected layer with multiple selected layers * Fix CreatedLayer overriding selection * Fix MoveSelectedLayersTo behaviour * Squashed commit of the following: commit095d577a49Author: Keavon Chambers <keavon@keavon.com> Date: Mon Jan 10 18:06:12 2022 -0800 Fix NumberInput clamping regression with undefined bounds commit9f54a376c4Author: mfish33 <32677537+mfish33@users.noreply.github.com> Date: Sun Jan 9 15:52:55 2022 -0800 Fix bounds with artboards for zoom-to-fit and scrollbar scaling (#473) * - document load keeps postition - zoom to fit - scrollbars use artboard dimensions * - review comments - svg export uses all artboard bounds Co-authored-by: Keavon Chambers <keavon@keavon.com> commit61432de480Author: 0HyperCube <78500760+0HyperCube@users.noreply.github.com> Date: Sat Jan 8 21:06:15 2022 +0000 Fix rotation input (#472) * Fix insert with no nesting at end of panel * Deselect other layers on paste * Resolve logging commit574028375bAuthor: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 12 06:14:32 2022 -0800 Add `npm start` script alias for `npm run serve` commit75e8fc6614Author: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 12 05:17:56 2022 -0800 Switch VS Code's Vue extension from Vetur to Volar commit389b445ef1Author: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 12 03:56:28 2022 -0800 Remove Charcoal references from the code for now commit095d577a49Author: Keavon Chambers <keavon@keavon.com> Date: Mon Jan 10 18:06:12 2022 -0800 Fix NumberInput clamping regression with undefined bounds commit9f54a376c4Author: mfish33 <32677537+mfish33@users.noreply.github.com> Date: Sun Jan 9 15:52:55 2022 -0800 Fix bounds with artboards for zoom-to-fit and scrollbar scaling (#473) * - document load keeps postition - zoom to fit - scrollbars use artboard dimensions * - review comments - svg export uses all artboard bounds Co-authored-by: Keavon Chambers <keavon@keavon.com> commit61432de480Author: 0HyperCube <78500760+0HyperCube@users.noreply.github.com> Date: Sat Jan 8 21:06:15 2022 +0000 Fix rotation input (#472) commit3eeac79f5aAuthor: 0HyperCube <78500760+0HyperCube@users.noreply.github.com> Date: Sat Jan 8 16:30:03 2022 +0000 Enhance the Navigate Tool zoom behavior (#461) * Snap zoom * Navigate zoom from centre * Ctrl to snap zoom in navigate * Use ctrl for global snap rotate * Fix the rotation input on snap rotate * Update hint to use ctrl * Fix mouse centre on drag * Click to zoom in * Clean up centre zoom * Update user input hints; tweak some variable names for clarity and standardization Co-authored-by: Keavon Chambers <keavon@keavon.com> commita2c2f7fc9dAuthor: 0HyperCube <78500760+0HyperCube@users.noreply.github.com> Date: Sat Jan 8 16:02:02 2022 +0000 Add support for resizing workspace panels (#443) * Resize panels * Removing move_selection test pending #444 resolved * Bind event listners and cursor to the document * Fix flex grow on document being reset when drawing * Call onresize when the boundry is dragged * Add min panel size * Add explicit function return types * Dispatch resize event * Lock pointer instead of setting cursor on document Co-authored-by: otdavies <oliver@psyfer.io> Co-authored-by: Keavon Chambers <keavon@keavon.com> commit54e9121115Author: mfish33 <32677537+mfish33@users.noreply.github.com> Date: Sat Jan 8 07:50:08 2022 -0800 Implement artboards and document version enforcement (#466) * - graphite document artboard implementation - autosave document load hitch fix - Autosave will delete saved files when graphite document version changes * formating * - top left 0,0 - fixed hitch on first document - vue calls first render * Revert * Merge branch 'master' into artboards * Small bug fixes and code review tweaks Co-authored-by: Oliver Davies <oliver@psyfer.io> Co-authored-by: Keavon Chambers <keavon@keavon.com> commit11f15bd6afAuthor: Leonard Pauli <leonardpauli@me.com> Date: Sat Jan 8 14:25:24 2022 +0100 Path Tool: Implement anchor point dragging (#451) * #82 path-tool: WIP selecting control point working * Fix bug where duplication with Ctrl+D doesn't properly duplicate (#423) * bug fix: duplication didn't properly duplicate * cargo fmt * changed the formatting slightly for readability * Small cleanups, changed color of handles upon selection * Fix changes from merge * Remove duplicate anchor points on top of one another * Fix possible issues with thumbnails not being updated from Graphene operations * path-tool: attempt to move control points on click * Add dragging for control points * Editing shape anchors functional. Handles next. * Comment cleanup & slight cleanup of closest_anchor(..) * Removing conflict with master * Tiny code tweaks Co-authored-by: Keavon Chambers <keavon@keavon.com> Co-authored-by: caleb <56044292+caleb-ad@users.noreply.github.com> Co-authored-by: otdavies <oliver@psyfer.io> Co-authored-by: Dennis <dennis@kobert.dev> commit05e8a98f46Author: Keavon Chambers <keavon@keavon.com> Date: Fri Jan 7 23:13:33 2022 -0800 Redesign the Layer Tree UI (#468) commit8e3d237228Author: Oliver Davies <oliver@psyfer.io> Date: Fri Jan 7 15:53:12 2022 -0800 Ungroup layers (#465) * WIP handling corner cases, like ungrouping subfolders * Resolved hanging * Fix recursive ungrouping * Functional, corner case free Ungroup. Small Undo issue & warnings * Update layertree upon undo * Also update layerdata upon redo * Add some polish * Resolved TODOs * Oops didn't save all after rename, ha. Co-authored-by: Dennis <dennis@kobert.dev> commitc1c7192948Author: TrueDoctor <dennis@kobert.dev> Date: Fri Jan 7 04:15:08 2022 +0100 Tidy up path handling in document_file (#464) * Tidy up path handling in document_file + Improve #455 * Cargo Clippy lints * Rename to_vec to map_to_vec Co-authored-by: Oliver Davies <oliver@psyfer.io> commitf4707f9b74Author: mfish33 <32677537+mfish33@users.noreply.github.com> Date: Thu Jan 6 18:45:37 2022 -0800 Better decimal rounding in the NumberInput widget (#457) * better decimal rounding in NumberInput * - created function to reuse - used math instead of string manipulation * updated comment to be correct * updated comment * updated comment commit0219f060b8Author: Keavon Chambers <keavon@keavon.com> Date: Wed Jan 5 05:40:32 2022 -0800 Fix build script to use correct branch name * Fix indentation * Overlays fade in * Fix formatting * Add consts for snap visible and opacity * Tweak constants for improved UX, rejigger imports * Fix AA bounding box * Snap only visible layers * Add some comments Co-authored-by: otdavies <oliver@psyfer.io> Co-authored-by: Keavon Chambers <keavon@keavon.com>
Powerful 2D vector and raster editing. Procedural and nondestructive.
Graphite is a digital content creation software package for 2D graphics, merging traditional tool-based interactive editing workflows with a powerful node-based approach to procedural, non-destructive editing and compositing. The application strives to be the most user-friendly and versatile tool for vector and raster illustration, graphic design, photo editing, procedural texturing, data-driven visualization, and technical art.
While the project is still in early development, implementation progress has been moving forward at a swift pace. The Graphite Alpha release is launching soon and focuses on vector art for SVG creation. The next major milestone will introduce a nondestructive backend for vector graphics with a powerful node graph system. Later releases will provide better vector rendering capabilities and then resolution-agnostic raster editing and compositing.
Play around with Graphite right now in your browser at editor.graphite.design. Windows, Mac, and Linux will additionally be supported with a native (not web-based) desktop client later in the development roadmap.
Contributing
We need Rust and web developers! See instructions here for getting started.
We are also in search of a new logo and brand style system. If you are an experienced designer, please get in touch for more details.
Discord
If the Graphite project strikes your fancy, join our Discord community to chat with the community and development team. You're invited to stop by just to lurk, ask questions, offer suggestions, or get involved in the project. We are seeking collaborators to help design and develop the software and this is where we communicate. Paste https://di----scord.gg/uMjBz----5N68W into your browser and delete the dashes. (To prevent spam bots, please don't share the link on any website without the dashes.)
Vision
Graphite is an open source, cross-platform digital content creation desktop and web application for 2D graphics editing, photo processing, vector art, digital painting, illustration, data visualization, compositing, and more. Inspired by the open source success of Blender in the 3D domain, it aims to bring 2D content creation to new heights with efficient workflows influenced by Photoshop/Gimp and Illustrator/Inkscape and backed by a powerful node-based, nondestructive approach proven by Houdini and Substance.
The user experience of Graphite is of central importance, offering a meticulously-designed UI catering towards an intuitive and efficient artistic process. Users may draw and edit in the traditional interactive (WYSIWYG) viewport with the Layer Tree panel or jump in or out of the node graph at any time to tweak previous work and construct powerful procedural image generators that seamlessly sync with the interactive viewport. A core principle of the application is its 100% nondestructive workflow that is resolution-agnostic, meaning that raster-style image editing can be infinitely zoomed and scaled to arbitrary resolutions at a later time because editing is done by recording brush strokes, vector shapes, and other manipulations parametrically.
One might use the painting tools on a small laptop display, zoom into specific areas to add detail to finish the artwork, then perhaps try changing the simulated brush style from a blunt pencil to a soft acrylic paintbrush after-the-fact, and finally export the complete drawing at ultra high resolution for printing on a large poster.
On the surface, Graphite is an artistic medium for drawing anything imaginable— under the hood, the node graph in Graphite powers procedural graphics and parametric rendering to produce unique artwork and automated data-driven visualizations. Graphite brings together artistic workflows and empowers your creativity in a free, open source package that feels familiar but lets you delve further.
This UI mockup illustrates a future concept for the raster-based workflow in a photo editing example.
Roadmap
The Graphite team is focusing initial feature development on a simple vector graphics editor for the Alpha release.
Following this MVP release, the layer system will be extended into a fleshed-out node graph system, called Graphene, to offer innovative nondestructive vector editing capabilities in the next milestone release.
The following major releases will add a purpose-built render engine to support node-based raster editing, thereby providing a seamless combined raster and vector workflow.
The interim web-based frontend will be replaced by an identical native desktop client for Windows, Mac, and Linux plus the web. This new frontend will mark the release of Graphite 1.0 when complete.
Development is broken into monthly sprints culminating in a presentation at the Rust Gamedev Meetup and a post in the Rust Gamedev Newsletter. Check out the Task Board to see the current features being built and prioritized.
Technology stack
Rust is the language of choice for many compelling reasons. It is low-level and highly efficient which is important because the nondestructive, resolution-agnostic editing approach will already be challenging to render quickly for interactive, real-time editing. Furthermore, Rust makes multithreading easy to implement and its safety guarantees will eliminate the inclusion of many bugs and crashes in the software. It is also simple to compile Rust code natively to Windows, Mac, Linux, and web browsers via WebAssembly, with the possibility of deploying Graphite to mobile devices down the road as well.
Vue.js is the web frontend framework initially used for building Graphite's user interface. This means, for the moment, Graphite will only run in a browser using Rust code compiled to WebAssembly (via wasm-bindgen). This web-based GUI is intended to be rewritten in a native Rust GUI framework once that ecosystem matures or the project has engineering resources to write a tailor-made GUI framework for Graphite's needs. Development initially began by writing a custom GUI system throughout 2020, but slow progress led to the decision of shelving it in lieu of a temporary web-based GUI.
WebGPU (via the WGPU Rust library) will be used as the graphics API for GPU-accelerated rendering because it is modern, portable, and safe. It makes deployment on the web and native platforms easy while ensuring consistent cross-platform behavior. Shaders will be written in Rust GPU to keep the codebase in a consistent language. Early Graphite releases are relying on web browsers' built-in SVG rendering capabilities before work begins building Graphite's sophisticated render engine.

