6b274b3f1c
* Add folders to frontend and folder creation to backend Closes #149 * Add Group keybind * Add logic to handle expanding of folders * Send all paths as (u32, u32) * Add custom serialization for path * Merge two layer_panel files * Refactor frontend layer merging * Fix JS linting * Update upstream thumbnail changes * Add paste into selected folder + fix thumbnail dirtification * Implement CollapseFolder function * Skip folders on a different indentation level during reorder * Only reorder within the same folder * Add folder node icon for folder layers * Add expand/collapse folder button; partly implement new layer tree design * Update terminology in the docs * Add number labels to ruler marks * Replace promise with await in MenuList.vue * Miscellaneous minor code cleanup * Disallow snake_case variable names in frontend * Add support for saving and opening files (#325) * Add support for saving a document This is similar to the "export" functionality, except that we store all metadata needed to open the file again. Currently we store the internal representation of the layer which is probably pretty fragile. * Add support for opening a saved document User can select a file using the browser's file input selector. We parse it as JSON and load it into the internal representation. Concerns: - The file format is fragile - Loading data directly into internal data structures usually creates security vulnerabilities - Error handling: The user is not informed of errors * Serialize Document and skip "cache" fields in Layer Instead of serializing the root layer, we serialize the Document struct directly. Additionally, we mark the "cache" fields in layer as "skip" fields so they don't get serialized. * Opened files use the filename as the tab title * Split "new document" and "open document" handling Open document needs name and content to be provided so having a different interface is cleaner. Also did some refactoring to reuse code. * Show error to user when a file fails to open * Clean up code: better variable naming and structure * Use document name for saved and exported files We pass through the document name in the export and save messages. Additionally, we check if the appropriate file suffixes (.graphite and .svg) need to be added before passing it to the frontend. * Refactor document name generation * Don't assign a default of 1 to Documents that start with something other than DEFAULT_DOCUMENT_NAME * Improve runtime complexity by using binary instead of linear search * Update Layer panel upon document selection * Add File>Open/Ctrl+O; File>Save (As)/Ctrl+(Shift)+S; browse filters extension; split out download()/upload() into files.ts; change unsaved close dialog text Co-authored-by: Dennis Kobert <dennis@kobert.dev> Co-authored-by: Keavon Chambers <keavon@keavon.com> * Refactor ViewportPosition from u32 (UVec2) to f64 (DVec2) (#345) * Refactor ViewportPosition from u32 (UVec2) to f64 (DVec2) * Fix pseudo_hash call * Replace hash function with proper function for uuid generation * Cargo fmt Co-authored-by: Dennis Kobert <dennis@kobert.dev> * Improve Frontend -> Backend user input system (#348) Includes refactor that sends coordinates of the document viewports to the backend so input is sent relative to the application window Closes #124 Fixes #291 * Improve Frontend -> Backend user input system * Code review changes * More code review changes * Fix TS error * Update the readme * Make scrollbars interactable (#328) * Make scrollbars interactable * Add watcher for position change * Fix case of data * Fix updateHandlePosition capitalization * Clean up class name thing * Scroll bars between 0 and 1 * Allow width to be 100% * Scrollbars reflect backend * Include viewport in scrollbar * Add half viewport padding for scrollbars * Refactor scrollbar using lerp * Send messages to backend * Refactor * Use glam::DVec2 * Remove glam:: * Remove unnecessary abs * Add TrueDoctor's change * Add missing minus * Fix vue issues * Fix viewport size * Remove unnecessary log * Linear dragging * Improve scrollbar behavior (#351) * Change scrollbar behavior * Leave space at the end of the scrollbar * Change mid to center * Use shorter array initialization * Add space around scrollbar * Fix scrollbar spacing * Smooth end of scrollbars * Add page up and down * Page up and down on click in scrollbar track * Add shift pageup to translate horizontally * Implement bounding box for selected layers (#349) * Implement bounding box for selected layers * Add shift modifier for multi selection * Fix collapsing of folders * Add have pixel offset to selection bounding box * Don't panic on Ctrl + A * Rename to camel case * Add todo comment for Keavon * Apply @Hypercubes review suggestions * Fix many panics, improve behavior of copy/paste and grouping (but grouping still can panic) Co-authored-by: Dennis Kobert <dennis@kobert.dev> |
||
|---|---|---|
| .deployment | ||
| .github | ||
| .vscode | ||
| charcoal | ||
| docs | ||
| editor | ||
| frontend | ||
| graphene | ||
| proc-macros | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| Cargo.lock | ||
| Cargo.toml | ||
| LICENSE.txt | ||
| README.md | ||
| deny.toml | ||
| graphite_splash.png | ||
| package.json | ||
| rustfmt.toml | ||
| vetur.config.js | ||
README.md
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 first release, Graphite 0.1, is launching this month (August 2021) and focuses on vector art for SVG creation. Later this year, version 0.2 will introduce a nondestructive backend for vector graphics with a powerful node graph system. Later releases throughout 2022 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 next year.
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 0.1 release coming August 2021.
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 a 0.2 release.
The following major releases will add the Charcoal 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, called Diamond, will mark the release of Graphite 1.0 when complete next year.
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. Graphite 0.1 and 0.2 are relying on web browsers' built-in SVG rendering capabilities before work begins building Graphite's sophisticated render engine, Charcoal.