Commit Graph

38 Commits

Author SHA1 Message Date
Keavon Chambers cf6bbcfd30 Revamp key/code input processing which fixes Option key on Mac and other locales
Closes #742
Closes #746
2022-08-11 02:53:46 -07:00
Keavon Chambers 765b648704 Extend welcome screen button click area to labels
Closes #738
2022-08-08 01:29:23 -07:00
Keavon Chambers f39d6bf00c Add full support for Mac-specific keyboard layouts (#736)
* IPP for Mac, flawed initial experiments

* Cleanup and progress, but not compiling yet

* Fix error and rename nonmac -> standard

* Extentd ipp macros to accomodate mac input

* Add Mac versions of shortcuts; refactor and document the input mapper macros

* Change frontend styling for user input labels in floating menus

* Additional macro documentation

* A little more documentation

* Improve entry macro syntax

* Move input mapper macros to a separate file

* Adapt the keyboard shortcuts to the user's OS

* Display keyboard shortcuts in the menu bar based on OS

* Change Input Mapper macro syntax from {} to ()

* Fix esc key bug in Vue

* Tweaks

* Interim solution for Mac-specific hints

* Feed tooltip input hotkeys from their actions

* Fix hotkeys for tools because of missing actions

* Make Vue respect Ctrl/Cmd differences per platform

* Remove commented lines

* Code review pass by me

* Code review suggestions with TrueDoctor

* Turn FutureKeyMapping struct into ActionKeys enum which is a bit cleaner

* Add serde derive attributes for message discriminants

* Re-add serde deserialize

* Fix not mutating ActionKeys conversion; remove custom serializer

* Add serde to dev dependencies

Co-authored-by: Dennis <dennis@kobert.dev>
2022-08-03 14:12:28 -07:00
mfish33 a0c22d20b6 Welcome screen, refactor to allow zero documents, and add TS typing to widgets (#702)
* unfinished implementation

* Add frontend for the empty panel screen

* Add an icon for Folder based on NodeFolder

* fixed messages causing peicees of ui not to render on new document

* Standardize nextTick syntax

* WIP generisization of component subscriptions (not compiling yet)

* Fix crash when loading font and there is no active document

* Only advertise tool actions with a document

* Fix failure to create new document

* Initalise the properties panel

* Fix highlight tab, canvas jump, warns and layer tree

* Fix tests

* Possibly fix some things?

* Move WorkingColors layout definition to backend

* Standardize action macro formatting

* Provide typing for widgets in TS/Vue and associated cleanup

* Fix viewport positioning initialization

* Fix menu bar init at startup not document creation

* Fix no viewport bounds bug

* Change !=0 to >0

* Simplify the init system

Closes #656

Co-authored-by: Keavon Chambers <keavon@keavon.com>
Co-authored-by: 0hypercube <0hypercube@gmail.com>
2022-07-22 16:09:13 -06:00
mfish33 5d6d2b22bc Menu bar definition in backend (#681)
* initial menu layout working

* removed api.rs functions

* no action shortcut for no-op

* code review

* nitpicks
2022-06-18 18:46:23 -06:00
Keavon Chambers 9bd27ec3f8 Change MenuList checkbox to be an icon from a widget 2022-06-17 17:55:04 -07:00
0HyperCube 8923b68e30 Refactor font loading from per-document to the portfolio (#659)
* Cleanup default font loading

* Refactor fonts

* Fix menulist mouse navigation

* Format

* Formatting

* Move default font into consts.rs

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-05-27 00:27:33 +01:00
0HyperCube 81c3420470 Keyboard menu/widget navigation (#628)
* Keyboard menu navigation

* Fix dropdown keyboard navigation

* Fix merge error

* Some code review

* Interactive dropdowns

* Query by data attr not class name

* Add locking behaviour

* Change query selector style

* Change query selector style (again)

* Code review feedback

* Fix highlighted entry regression

* Styling and disabling checkbox tabindex in MenuLists

* Don't redirect space off canvas to backend

* Do not emit update if value same

* Escape closes all floating menus

* Close dropdowns on blur

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-05-25 22:10:18 +01:00
Keavon Chambers d5b43ef2da Add frontend file structure docs and some related cleanup 2022-05-23 19:13:51 -07:00
Keavon Chambers e4e37cca7b Reorganize Vue components and add documentation explaining each folder 2022-05-23 19:03:34 -07:00
Keavon Chambers fc2d983bd7 Vue initialization and FloatingMenu codebase refactoring and cleanup (#649)
* Clean up Vue initialization-related code

* Rename folder: dispatcher -> interop

* Rename folder: state -> providers

* Comments and clarification

* Rename JS dispatcher to subscription router

* Assorted cleanup and renaming

* Rename: js-messages.ts -> messages.ts

* Comments

* Remove unused Vue component injects

* Clean up coming soon and add warning about freezing the app

* Further cleanup

* Dangerous changes

* Simplify App.vue code

* Move more disparate init code from components into managers

* Rename folder: providers -> state-providers

* Other

* Move Document panel options bar separator to backend

* Add destructors to managers to fix HMR

* Comments and code style

* Rename variable: font -> font_file_url

* Fix async font loading; refactor janky floating menu openness and min-width measurement; fix Vetur errors

* Fix misaligned canvas in viewport until panning on page (re)load

* Add Vue bidirectional props documentation

* More folder renaming for better terminology; add some documentation
2022-05-21 19:46:15 -07:00
Keavon Chambers 29e00e488b Move layouts definitions to backend and fix Firefox overlay scrollbars (#647)
* Fix two-axis scrollbars in scrollable regions on Firefox

* Move Document Mode dropdown to the backend; and related code cleanup

* Port the Layer Tree options bar layout to the backend

* Port the tool shelf to the backend

* Clean up initialization and wasm wrapper

* Fix crash

* Fix missing document bar

* Remove unused functions in api.rs

* Code review

* Tool initalisation

* Remove some frontend functions

* Initalise -> Init so en-US/GB doesn't have to matter :)

* Remove blend_mode and opacity from LayerPanelEntry

Co-authored-by: 0hypercube <0hypercube@gmail.com>
2022-05-17 13:12:52 -07:00
Keavon Chambers 19b2d3f859 Build the node graph frontend with placeholder graph info (#581)
* Build the node graph frontend

* Graph pan and zoom

* Graph's dot grid now pans/zooms also

* Interactive horisontal to vertical curves

* Data types and zooming on wires

* Icon definitions code beautification

* Add a visibility toggle

Co-authored-by: 0hypercube <0hypercube@gmail.com>
2022-05-10 22:34:25 -07:00
0HyperCube 4b7d8b7ab0 Migrate dialogs to Rust and add a New File dialog (#623)
* Migrate coming soon and about dialog to Rust

* Migrate confirm close and close all

* Migrate dialog error

* Improve keyboard navigation throughout UI

* Cleanup and fix panic dialog

* Reduce css spacing to better match old dialogs

* Add new document modal

* Fix crash when generating default name

* Populate rust about graphite data on startup

* Code review changes

* Move one more :focus CSS rule into App.vue

* Add a dialog message and move dialogs

* Split out keyboard input navigation from this branch

* Improvements including simplifying panic dialog code

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-05-07 09:59:52 +01:00
Keavon Chambers 07736a9fca Tidy up the full frontend codebase and use optional chaining where possible (#620)
* Tidy up the full frontend codebase and use optional chaining where possible

* Code review changes
2022-04-30 02:52:53 -07:00
0HyperCube 51c31f042b Add embedable images (#564)
* Add embedable bitmaps

* Initial work on blob urls

* Finish implementing data url

* Fix some bugs

* Rename bitmap to image

* Fix loading image on document load

* Add transform properties for image

* Remove some logging

* Add image dimensions

* Implement system copy and paste

* Fix pasting images

* Fix test

* Address code review

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-03-27 11:43:41 +01:00
Keavon Chambers f6726c1427 Various website fixes 2022-03-17 02:12:23 -07: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
Keavon Chambers e877eea457 Fix all remaining Vue/TS errors flagged in Volar 2022-01-15 17:24:58 -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
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
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
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
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
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 c5f44a8c1d Add an intentional panic for debug 2021-09-11 09:46:55 -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 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
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
Azeem Bande-Ali 42c3b1f6e9 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.

Example document:

```json
{
    "nodes": {},
    "root": {
        "blend_mode": "Normal",
        "cache": "...",
        "cache_dirty": false,
        "data": {
            "Folder": {
                "layer_ids": [
                    3902938778642561358
                ],
                "layers": [
                    {
                        "blend_mode": "Normal",
                        "cache": "...",
                        "cache_dirty": false,
                        "data": {
                            "Shape": {
                                "path": [
                                    {
                                        "MoveTo": {
                                            "x": 0.0,
                                            "y": 0.0
                                        }
                                    },
                                    {
                                        "LineTo": {
                                            "x": 1.0,
                                            "y": 0.0
                                        }
                                    },
                                    {
                                        "LineTo": {
                                            "x": 1.0,
                                            "y": 1.0
                                        }
                                    },
                                    {
                                        "LineTo": {
                                            "x": 0.0,
                                            "y": 1.0
                                        }
                                    },
                                    "ClosePath"
                                ],
                                "render_index": 1,
                                "solid": true,
                                "style": {
                                    "fill": {
                                        "color": {
                                            "alpha": 1.0,
                                            "blue": 0.0,
                                            "green": 0.0,
                                            "red": 0.0
                                        }
                                    },
                                    "stroke": null
                                }
                            }
                        },
                        "name": null,
                        "opacity": 1.0,
                        "thumbnail_cache": "...",
                        "transform": {
                            "matrix2": [
                                223.0,
                                0.0,
                                -0.0,
                                348.0
                            ],
                            "translation": [
                                -188.0,
                                -334.0
                            ]
                        },
                        "visible": true
                    }
                ],
                "next_assignment_id": 3902938778642561359
            }
        },
        "name": null,
        "opacity": 1.0,
        "thumbnail_cache": "...",
        "transform": {
            "matrix2": [
                1.0,
                0.0,
                0.0,
                1.0
            ],
            "translation": [
                479.0,
                563.0
            ]
        },
        "visible": true
    },
    "version": 0
}
```

* 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>
2021-08-14 03:56:52 -04:00
Keavon Chambers a1fec1c93f Add DisplayError to show user errors from the backend 2021-08-08 16:52:09 -07:00
Keavon Chambers 53ad105f57 Restructure project directories (#333)
`/client/web` -> `/frontend`
`/client/cli` -> *delete for now*
`/client/native` -> *delete for now*
`/core/editor` -> `/editor`
`/core/document` -> `/graphene`
`/core/renderer` -> `/charcoal`
`/core/proc-macro` -> `/proc-macros` *(now plural)*
2021-08-07 05:17:18 -07:00