Graphite/frontend
Oliver Davies 58675eb64d Refactor internal shape and reduce reliance on Kurbo (#617)
* Dissolve Points from path

* Add handling for removing the first anchor

* Add function to turn handles into bez_paths

* Created overlay manager, wip

* WIP Refactor of VectorShape / Overlays / ShapeEditor

* WIP stripping vector shape, anchor, point.

* WIP Removed kurbo deps from vector shape, anchor, point

* WIP Further work to make vector shapes / anchors / points more standalone.

* WIP more pruning

* WIP Progress on overlay_renderer

* WIP more overlay_renderer work

* WIP more pruning, cleared warnings

* WIP decided ShapeRenderer wasn't an accurate name, ShapeAdapter now. Error squashing continues.

* WIP squashed more errors, now need to decide if anchors should have unique IDs

* WIP Errors squashed, now to actually make it work.

* WIP Moved vector structs to graphene, beginning to remove bezpath from shape_layer

* Refactoring: disentangle kurbo from apply_affine

* Refactor internal shape and remove reliance on Kurbo (PR #617) - Disentangle Kurbo (#619)

* Refactoring: disentangle kurbo from apply_affine

* Broke boolean operations, refactor in state which compiles

* "fixed" boolean operation refactor related errors

* fixed apply_affine, which would not have applied any type of affine

* Small Cleanup, readability

* Fix issue with overlay styles no longer showing selection state.

* Resolved error with point option

* WIP, figuring out how to have one source of truth for VectorShape. Trying to avoid cloning.

* WIP work on single source of truth vectorshapes

* More steps toward single source of truth VectorShape

* Continued wip on making VectorShapes mutably accessible without cloning

* Wip using paths to reference vectorshapes instead, need to restructure ShapeEditor

* Decided to allow temporary copies of vectorshapes.

* Removed HashSet for selected shape indices

* Added @TrueDoctor's id_storage.rs with some heavy modification. Added it to VectorShape. Isn't yet used for folders.

* Integrated UniqueElements<T> with VectorShape to store VectorAnchors

* Improved storage_id.rs perf and cleaned up it's interface

* Iterator Implementations and fixes (#637)

* Refactoring: disentangle kurbo from apply_affine

* Broke boolean operations, refactor in state which compiles

* "fixed" boolean operation refactor related errors

* fixed apply_affine, which would not have applied any type of affine

* implemented transforms for VectorAnchors
implemented Not for VectorControlPointType

* started adding Vector Shape implementations of shape prototypes

* added several useful implemtations to UniqueElements

* added another implemnation for UniqueElements to make working with iterators easier, fixed vector-shape errors

* package-lock.json

* clean up rebase, added back Layer paths

* added deref implementation for VectorShape

* unnecesary variable

* simplify code by removing levels of indirection

* fixed errors

* merge cleanup

* removed package-lock.json

* Removed .selected from VectorShape, it isn't needed as layers are selected not shapes specifically.

* Removed transform and layer_path from VectorShape

* Auto-saving tentitively working. Work toward Overlay transform issues.

* Overlays properly hiding and caching. Not clearing cache yet and some tool switching issues remain, but progress.

* Putting layers in folders changes their unique ID. This is problematic. Assumed this was not the case.

* Removed need for closed bool, changed VectorShape to a tuple struct.

* WIP Switched to layer paths as opposed to VectorShapes. Next up add messages for changing VectorShapes.

* Added initial messages to edit VectorShape points.

* DeleteSelectedPoints messages implemented, selection isn't working currently though.

* Selection messages arriving in document, but transform is wrong.

* Selection, Deselection working, delete working for first point.

* Working towards moving points again

* Removed extra vec from UniqueElements, attempting to squash ordering bug. Still appears to occur though.

* Delete more stable, clean up, renamed to HandleIn, HandleOut

* Further vec_unique cleanup

* Further cleanup

* Removed Deref / DerefMut from VectorShape

* Document version++, will likely revert before merge into master

* Seleting / deleting handles tentitively working again.

* Version number bump, fixed tests.

* Fixed comment in VecUnique

* Improved VecUnique descriptor comment

* Renamed VecUnique to IdBackedVec to further clarify usage.

* Resolved formatting.

* WIP Fixing dragging points

* Fixed an instance where an OverlayMessage could be sent to the main document incorrectly.

* Deleting all of a shapes points now gracefully deletes the layer instead of crashing.

* Fixed handle configurations that would panic on deletion

* Single anchor dragging restored with multi-dragging next plus handles

* sides.into()

* Handle and Multi-point dragging working

* WIP Handle symmetry working again

* Handle mirroring functional again.

* Cleaned up warnings

* Fixed overlay outline not matching shape

* Git branch fix of compatibility with new master

* Fixed closed shape bug, replaced kurbo ellipse

* Removed unused func, updated comments

* Deleting points can undo, multiple shape selection deletes now working

* Removed AddOverlay* operations

* Partial fix for select drift, added helpers

* Don't snap against dragging points

* Properly cleanup path outline with multiple shapes

* Clear all points in other selected shapes

* Actually don't snap against dragging points

* Fix path tool & add snap angle and break handle

* Fix handle being set to NaN causing render issues

* Fix cached overlays not showing line -> curve

* Add operations for modifying paths

* Remove kurbo from pen tool

* Do not snap against handles when anchor selected

* Fix overlays not being cleaned up on path tool

* Fix handle position after dragging

* Use `Anchor` for text & no kurbo in operations

* Replace kurbo to_svg function

* Ngon no longer center scales by default, still some weird behaviour when holding alt

* Cleanup overlays

* Fix render and bounding box doctests

* Fix fun to_svg error

* Fix compile error

* Some code review

* Remove legacy `SelectPoint` on doubleclick

* Remove font from test document

* Fix the pen tool selection changed

* Reorder imports

Co-authored-by: Dennis <dennis@kobert.dev>
Co-authored-by: Caleb Dennis <caleb.dennis429@gmail.com>
Co-authored-by: caleb <56044292+caleb-ad@users.noreply.github.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
Co-authored-by: 0hypercube <0hypercube@gmail.com>
Co-authored-by: 0HyperCube <78500760+0HyperCube@users.noreply.github.com>
2022-07-05 15:02:18 -07:00
..
assets Change MenuList checkbox to be an icon from a widget 2022-06-17 17:55:04 -07:00
public Fix nudge and textbox creation (#672) 2022-06-10 17:25:37 +01:00
src Image and text bug fixes (#685) 2022-06-30 02:18:01 +01:00
wasm Refactor internal shape and reduce reliance on Kurbo (#617) 2022-07-05 15:02:18 -07:00
.eslintrc.js Update the assets directory to prefix icon folders with "icon-" 2022-05-22 00:06:10 -07:00
.gitignore Add frontend file structure docs and some related cleanup 2022-05-23 19:13:51 -07:00
package-lock.json Update npm dependencies (#678) 2022-06-13 12:32:01 -07:00
package.json Update npm dependencies (#678) 2022-06-13 12:32:01 -07:00
README.md Add frontend file structure docs and some related cleanup 2022-05-23 19:13:51 -07:00
tsconfig.json Add the Help > About Graphite dialog with build info 2021-12-16 02:31:41 -08:00
vue-svg-loader.js Replace vue-svg-loader dependency with simple JS file (fixes a security alert) (#389) 2021-11-01 00:14:31 -07:00
vue.config.js Refactor source of Git commit build info (closes #661) 2022-05-24 14:33:58 -07:00

Overview of /frontend/

The Graphite frontend is a web app that provides the presentation for the editor. It displays the GUI based on state from the backend and provides users with interactive widgets that send updates to the backend, which is the source of truth for state information. The frontend is built out of reactive components using the Vue framework. The backend is written in Rust and compiled to WebAssembly (WASM) to be run in the browser alongside the JS code.

For lack of other options, the frontend is currently written as a web app. Maintaining web compatibility will always be a requirement, but the long-term plan is to port this code to a Rust-based native GUI framework, either written by the Rust community or created by our project if necessary. As a medium-term compromise, we may wrap the web-based frontend in a desktop webview windowing solution like Electron (probably not) or Tauri (probably).

Bundled assets: assets/

Icons and images that are used in components and embedded into the application bundle by the build system using loaders.

Public assets: public/

Static content like favicons that are copied directly into the root of the build output by the build system.

Vue/TypeScript source: src/

Source code for the web app in the form of Vue components and TypeScript files.

WebAssembly wrapper: wasm/

Wraps the editor backend codebase (/editor) and provides a JS-centric API for the web app to use unburdened by Rust's complex data types that are incompatible with JS data types. Bindings (JS functions that call into the WASM module) are provided by wasm-bindgen in concert with wasm-pack.

ESLint configurations: .eslintrc.js

ESLint is the tool which enforces style rules on the JS, TS, and Vue files in our frontend codebase. As it is set up in this config file, ESLint will complain about bad practices and often help reformat code automatically when (in VS Code) the file is saved or npm run lint is executed. (If you don't use VS Code, remember to run this command before committing!) This config file for ESLint sets our style preferences and configures our usage of extensions/plugins for Vue support, Airbnb's popular catalog of sane defaults, and Prettier's role as a code formatter.

npm ecosystem packages: package.json

While we don't use Node.js as a JS-based server, we do have to rely on its wide ecosystem of packages for our build system toolchain. If you're just getting started, make sure to install the latest LTS copy of Node.js and then run cd frontend && npm install to install these packages on your system. Our project's philosophy on third-party packages is to keep our dependency tree as light as possible, so adding anything new to our package.json should have overwhelming justification. Most of the packages are just development tooling (TypeScript, Vue CLI, ESLint, Prettier, wasm-pack, and Sass) that run in your console during the build process.

npm package installed versions: package-lock.json

Specifies the exact versions of packages installed in the npm dependency tree. While package.json specifies which packages to install and their minimum/maximum acceptable version numbers, package-lock.json represents the exact versions of each dependency and sub-dependency. Running npm install will grab these exact versions to ensure you are using the same packages as everyone else working on Graphite. npm update will modify package-lock.json to specify newer versions of any updated (sub-)dependencies and download those, as long as they don't exceed the maximum version allowed in package.json. To check for newer versions that exceed the max version, run npm outdated to see a list. Unless you know why you are doing it, try to avoid committing updates to package-lock.json by mistake if your code changes don't pertain to package updates. And never manually modify the file.

TypeScript configurations: tsconfig.json

Basic configuration options for the TypeScript build tool to do its job in our repository.

vue-svg-loader.js

An extremely simple Webpack loader that allows us to import SVG files into our JS to be used like they are Vue components. They end up as inline SVG elements in the web page like <svg ...>...</svg>, rather than being <img src="..." /> elements, which provides some benefits like being able to apply CSS styles to them. These get embedded into the bundle (they live somewhere all together in a big, messy JS file) rather than being separate static SVG files that would have to be served individually.

Vue CLI/Webpack configurations: vue.config.js

Vue CLI is a command line tool built around the Webpack bundler/build system. This file is where we configure Webpack to set up plugins (like wasm-pack and license-checker) and loaders (like for Vue and SVG files). Part of the license-checker plugin setup includes some functions to format web package licenses, as well as Rust package licenses provided by cargo-about, into a text file that's distributed with the application to provide license notices for third-party code.