Commit Graph

63 Commits

Author SHA1 Message Date
Keavon Chambers f6726c1427 Various website fixes 2022-03-17 02:12:23 -07:00
Keavon Chambers 788f8db127 Remake node type icons (closes #483); color picker cleanup 2022-03-04 22:48:22 -08:00
mfish33 8387ffe735 Color Input (#565)
* initial working prototype

* clean up component

* Fix alignment

* Code review tweaks

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-02-22 13:52:58 -08:00
mfish33 a73d9b5811 Can set stroke and fill on text and shapes (#551)
* Can set stroke and fill on text and shapes

* resend layout on failed update

* text input properly resets on bad input

* support modifying gradients

* can modify gradients in the properties panel

* updated labels

* remove heap allocation in favor of RC

* removed redundent line

* oops
2022-02-15 09:04:11 -08:00
mfish33 91e4201cb1 Implement the Properties panel with a transform section for layers (#527)
* initial layout system with tool options

* cargo fmt

* cargo fmt again

* document bar defined on the backend

* cargo fmt

* removed RC<RefCell>

* cargo fmt

* - fix increment behavior
- removed hashmap from layout message handler
- removed no op message from layoutMessage

* cargo fmt

* only send documentBar when zoom or rotation is updated

* ctrl-0 changes zoom properly

* unfinished layer hook in

* fix layerData name

* layer panel options bar

* basic x/y movment

* working transform section

* changed messages from tuples to structs

* hook up text input

* - fixed number input to be more clear
- fixed actions for properties message handler

* Add styling

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-02-12 08:22:57 -08:00
Keavon Chambers 77dc125095 Polishing: standardize binding JS resize event (fixes non-integer AA rendering); remove "X" to delete; cleanup 2022-02-10 02:29:45 -08:00
0HyperCube 29485001e9 Fix TextInput widget casting from string to number by mistake (#528) 2022-02-09 23:12:56 +00:00
Keavon Chambers bd844aaf94 Add the TextInput widget (#518)
* Separate out the number input from a generic field input

* Add TextInput widget

Co-authored-by: mfish33 <32677537+mfish33@users.noreply.github.com>
2022-02-09 12:16:44 -08:00
Keavon Chambers ca46767cf2 Solve "Coming Soon" dialog from bubbled click event on sub-menu entries (#517) 2022-02-05 13:49:12 -08:00
Paul Kupper 62fc269b8a Add log level selection to help menu (#511)
* Add log level selection to help menu

* Show keyboard shortcuts in loglevel menu items
2022-02-05 19:53:42 +01:00
mfish33 96d3ef2650 Layout system implementation and applied to tool options bar (#499)
* initial layout system with tool options

* cargo fmt

* cargo fmt again

* document bar defined on the backend

* cargo fmt

* removed RC<RefCell>

* cargo fmt

* - fix increment behavior
- removed hashmap from layout message handler
- removed no op message from layoutMessage

* cargo fmt

* only send documentBar when zoom or rotation is updated

* ctrl-0 changes zoom properly

* Code review changes

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-01-30 17:53:37 -08:00
0HyperCube 121a68ad3c Implement the Text Tool and text layer MVP (#492)
* Add text tool

* Double click with the select tool to edit text

* Fix (I think?) transitioning to select tool

* Commit and abort text editing

* Transition to a contenteditable div and autosize

* Fix right click blocking

* Cleanup hints

* Ctrl + enter leaves text edit mode

* Render indervidual bounding boxes for text

* Re-format space indents

* Reflect font size in the textarea

* Fix change tool behaviour

* Remove starting text

* Populate the cache (caused doc load bug)

* Remove console log

* Chrome display the flashing text entry cursor

* Update overlay on input

* Cleanup input.ts

* Fix bounding boxes

* Apply review feedback

* Remove manual test

* Remove svg from gitignore

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-01-30 15:10:10 +00:00
Paul Kupper 1d2768c26d Implement Freehand Tool (#503)
* Implement freehand tool

* Address review comments

* Consistent ordering of tools

* Add hotkey N for freehand tool

* Tweak freehand tool hint
2022-01-30 11:39:49 +01:00
Keavon Chambers 434970aa16 Implement layer renaming (#501)
* Implement layer renaming

* Fix sneaky typo in CSS

Co-authored-by: Moritz Vetter <16950410+HansAuger@users.noreply.github.com>

Co-authored-by: Moritz Vetter <16950410+HansAuger@users.noreply.github.com>
2022-01-29 11:04:15 -08:00
Keavon Chambers 8c29592db8 Clean up web code's use of display CSS properties, using <LayoutRow>/<LayoutCol> where intended 2022-01-23 20:23:35 -08:00
Keavon Chambers 45d75bd13f Move scrollable behavior into LayoutRow/LayoutCol 2022-01-22 23:02:59 -08:00
Keavon Chambers e877eea457 Fix all remaining Vue/TS errors flagged in Volar 2022-01-15 17:24:58 -08:00
Keavon Chambers e9e43eb79b 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
2022-01-14 20:54:38 -08:00
Keavon Chambers 7dfabcedfc Fix NumberInput clamping regression with undefined bounds 2022-01-10 18:06:12 -08:00
mfish33 9d2718006f 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>
2022-01-09 15:52:55 -08:00
0HyperCube 9089a25199 Fix rotation input (#472) 2022-01-08 21:06:15 +00:00
mfish33 439418896a 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>
2022-01-08 07:50:08 -08:00
mfish33 52e5501d18 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
2022-01-06 18:45:37 -08:00
Keavon Chambers 5518384ec1 Vue/TS bug and bad typing fixes 2022-01-02 20:02:35 -08:00
Keavon Chambers 2c8d70acb4 Major frontend code cleanup (#452)
Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed
2022-01-02 06:00:02 -08:00
Keavon Chambers 5b3cbb30fc Fix all clippy lint errors 2021-12-30 23:05:54 -08:00
0HyperCube 3de426b7cc Drag to rearrange layers in the layer panel (#434)
* Add insert line

* Implement dragging

* Improve CSS and variable naming consistency

* Resolved folder crash, added Undo/Redo support

* Removed marker TODO leftover

* JS cleanup

* WIP preserving expanded state (via LayerData) when copy/pasting and moving layers in layer panel

* Finish making folders copy/paste preserving expanded state, but not recursively yet

* Add cut, copy, and paste to the Edit menu (#440)

* Add cut

* Hook up edit dropdown

* Use copy message

Co-authored-by: Keavon Chambers <keavon@keavon.com>
Co-authored-by: otdavies <oliver@psyfer.io>
2021-12-30 17:18:18 +00:00
0HyperCube 451c9fcd46 Add cut, copy, and paste to the Edit menu (#440)
* Add cut

* Hook up edit dropdown

* Use copy message
2021-12-30 11:02:57 +00:00
mfish33 04c1b2ed03 Remove all use of document indices (#406)
* removed all use of document indicies

* -add u64 support for wasm bridge

* fixed rust formating

* Cleaned up FrontendDocumentState in js-messages

* Tiny tweaks from code review

* - moved more of closeDocumentWithConfirmation to rust
- updated serde_wasm_bindgen to add feature flag

* changed to upsteam version of serde_wasm_bindgen

* cargo fmt

* -fix event propigation on delete
- Js message change class extention to typedef

* changed another typedef

* cargo fmt

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2021-12-24 19:07:19 -05:00
Keavon Chambers d2b0411295 Implement input hints based on the active tool state (#388)
* Hook up user input hints to display in the frontend status bar

Closes #171

* MVP hint system based on tool FSM

* Fix hints for Fill and Eyedropper tools

* Add icons for keyboard shortcuts

* Fix hints for Pen Tool

* Cleanup
2021-12-24 01:46:03 -08:00
SonyStone 6da903011a Change mouse to pointer events (#403)
* Change mouse to pointer events

* Add `npm start` command

* Change all mouse to pointer events;
Fix `touch-action: none;`

* Merge with master

* Fix middle mouse click

* Remove console.log

* Delete the empty line

* Re-add middle click auto-scroll blocking

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2021-12-21 14:37:58 +03:00
Christian Authmann 5ec8aaa31d Rework wasm initialization and reduce global state (#379)
* wasm: do the async initialization only once

This allows the rest of the app to access wasm synchronously.

This allows removing of a global.

* provide the wasm via vue provide/inject.

There's still code directly accessing the wasm. That will be changed later.

* MenuBarInput: use injected wasm instead of the global instance

* Let the App handle event listeners

* move stateful modules into state/

* state/fullscreen: create per instance

* App: load the initial document list on mount.
This got lost a few commits ago. Now it's back.

* state/dialog: create per instance

* util/input: remove dependency on global dialog instance

* state/documents: create per instance

* reponse-handler: move into EditorWasm

* comingSoon: move into dialog

* wasm: allow instantiating multiple editors

* input handlers: do not look at canvases outside the mounted App

* input: listen on the container instead of the window when possible

* - removed proxy from wasm-loader
- integrated with js-dispatcher
- state functions to classes
- integrated some upstream changes

* fix errors caused by merge

* Getting closer:
- added global state to track all instances
- fix fullscreen close trigger
- wasm-loader is statefull
- panic across instanes

* - fix outline while using editor
- removed circular import rule
- added editorInstance to js message constructor

* - changed input handler to a class
- still need a better way of handeling it in App.vue

* - fixed single instance of inputManager to weakmap

* - fix no-explicit-any in a few places
- removed global state from input.ts

* simplified two long lines

* removed global state

* removed $data from App

* add mut self to functions in api.rs

* Update Workspace.vue

remove outdated import

* fixed missing import

* Changes throughout code review; note this causes some bugs to be fixed in a later commit

* PR review round 1

* - fix coming soon bugs
- changed folder structure

* moved declaration to .d.ts

* - changed from classes to functions
- moved decs back to app.vue

* removed need to export js function to rust

* changed folder structure

* fixed indentation breaking multiline strings

* Fix eslint rule to whitelist @/../

* Simplify strip-indents implementation

* replace type assertions with better annotations or proper runtime checks

* Small tweaks and code rearranging improvements after second code review pass

* maybe fix mouse events

* Add back preventDefault for mouse scroll

* code review round 2

* Comment improvements

* -removed runtime checks
- fixed layers not showing

* - extened proxy to cover classes
- stopped multiple panics from logging
- Stop wasm-bindgen from mut ref counting our struct

* cleaned up messageConstructors exports

* Fix input and fullscreen regressions

Co-authored-by: Max Fisher <maxmfishernj@gmail.com>
Co-authored-by: mfish33 <32677537+mfish33@users.noreply.github.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
2021-12-20 07:37:19 +01:00
Keavon Chambers 471610accd Add the Help > About Graphite dialog with build info
Closes #404
2021-12-16 02:31:41 -08:00
Keavon Chambers 1cf90bde9a Fix floating menus above scrollable content; they now respect content's preferred width at edges 2021-12-15 04:04:59 -08:00
mfish33 a3bb9160a2 Change responses to use classes instead of interfaces (#394)
* ability to mark an open document as unsaved

* unsaved detection now being triggered based on layer tree height

* Changed responses to use classes instead of interfaces

* - rust implementation of unsaved markers
- upgraded eslint

* updated eslint in package.json

* - Renamed GetOpenDocumentsList -> UpdateOpenDocumentsList
- is not -> was not

* changed hash to current identifier to better reflect its meaning

* resolve some merge conflicts

* removed console.log statement leftover from debuging

* - changed Response to jsMessage
- split files
- Array<> -> []

* -remove path from UpdateLayer

* - remove unused if statements

* - comment for reflect-metadata
- registerJsMessageHandler -> subscribeJsMessage
- readonly message properties
- fixed binding filename and comment
- toRgb -> toRgba

* - newOpacity -> transformer
- added comments

* MessageMaker -> messageMaker
2021-12-05 19:14:16 -08:00
Keavon Chambers 54590d594a CSS editor layout fixes and scrolling
Major CSS improvements to layout at small screen sizes. By adding min-width: 0 and min-height: 0 on the nested display: flex structure, widgets no longer coerce the whole layout into large-scale resizing. Scrollbars are now used to allow correct overflowing of the tab bar (fixes #177), Document Panel options bar, and tool shelf. Improvements to responsive resizing are also included for viewing the UI correctly on mobile now. Additional small fixes to styling of widget colors and corner roundness. The ruler has been darkened one shade to improve text contrast and aesthetics.
2021-12-04 22:30:07 -08:00
Keavon Chambers fa64cfad4b Switch to Node.js 16 LTS, upgrade TypeScript, ESLint, and other dependencies (#395)
* Upgrade TypeScript, ESLint, and other dependencies

This also cleans up various other files where newer ESLint rules complained

* Set CI and CD to use Node.js version 16

* Small tweak

* Fix CD version printing

* Add nvm version for Cloudflare Pages
2021-11-29 03:32:09 -08:00
0HyperCube 029b8ff8b3 Implement interactive scaling/motion of rulers (#306) (#385)
* Update ruler origin

* Fix ruler text

* Handle zoom

* Remove log

* Fix origin
2021-10-25 10:03:14 +01:00
Keavon Chambers 225b46300d Hook up layer tree structure with frontend (#372)
* Hook up layer tree structure with frontend (decoding and Vue are WIP)

* Fix off by one error

* Avoid leaking memory

* Parse layer structure into list of layers

* Fix thumbnail updates

* Correctly popagate deletions

* Fix selection state in layer tree

* Respect expansion during root serialization

* Allow expanding of subfolders

* Fix arrow direction

Co-authored-by: Dennis Kobert <dennis@kobert.dev>
2021-09-11 17:15:51 -07:00
Keavon Chambers c5f44a8c1d Add an intentional panic for debug 2021-09-11 09:46:55 -07:00
Keavon Chambers 096f437740 Change scrollbar drag color 2021-09-11 08:17:05 -07:00
Keavon Chambers b60091b6f8 Additional improvements to license notice formatting 2021-09-06 23:45:10 -07:00
Keavon Chambers fc7d3aa457 Auto-generate third-party license notices (#370)
Closes #294
Closes #371
2021-09-06 06:57:35 -07:00
Keavon Chambers 5675126a89 Reorganize and clean up the WASM wrapper 2021-09-01 06:10:05 -07:00
Keavon Chambers 699657974a Improve and clean up panic dialog code and wasm wrapper (#368)
Part of #357
2021-09-01 04:09:23 -07:00
Keavon Chambers d290aaf712 Show a crash dialog when the editor panics (#362)
* Show a crash dialog when the editor panics

Closes #357

* Suppress console usage lints

* Proxy cleanup and comments
2021-08-31 18:34:19 -07:00
Keavon Chambers 6b274b3f1c Add folders to frontend and folder creation to backend (#315)
* 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>
2021-08-29 08:27:49 -07:00
Henry Sloan 9e73cce281 Add two-way tool option messaging system between frontend/backend (#361)
* Add two-way tool option messaging system

* Rename tool option functions

* Move repeated frontend messaging code to function

* Address style comments

* Rename variable to be more descriptive

* Move tool options update to SetActiveTool message

* Refactor record of all tool options

* Only pass active tool options to bar

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2021-08-29 00:43:27 -04:00
TrueDoctor 0ccb181e2c Implement Undo and Redo (#354)
* Implement undo and redo

* Create more save points and hook up menu entry

* Fix operation ordering

* Remove debug statement

* Fix folder changed order

* Don't store overlays in the history chain

* Keep selection
2021-08-26 12:20:00 +02:00
Henry Sloan 44f244fb5f Add a stroke width option to the Line Tool (#355)
* Add a stroke width option to the Line Tool

* Fix title case for line options

* Add px unit to line stroke width

* Add stroke width to pen tool

* Rename stroke width to weight

* Change number input width to min-width

* Remove the word "stroke" from "stroke weight"
2021-08-23 21:55:59 -04:00