From b6ce559d8648ef9ab71634bf256bfecfa3cd637e Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 29 Apr 2021 00:41:38 -0700 Subject: [PATCH] Add design documentation about user input and masking --- docs/design/index.md | 1 + docs/design/inputs-and-keybindings.md | 153 ++++++++++++++++++++++++++ docs/design/tool-behavior.md | 11 ++ docs/editor/2-interface.md | 0 docs/editor/3-panels.md | 11 ++ docs/editor/4-documents-and-assets.md | 0 docs/editor/5-tools.md | 0 docs/editor/6-masking.md | 5 + docs/editor/index.md | 2 + 9 files changed, 183 insertions(+) create mode 100644 docs/design/inputs-and-keybindings.md create mode 100644 docs/design/tool-behavior.md create mode 100644 docs/editor/2-interface.md create mode 100644 docs/editor/3-panels.md create mode 100644 docs/editor/4-documents-and-assets.md create mode 100644 docs/editor/5-tools.md create mode 100644 docs/editor/6-masking.md diff --git a/docs/design/index.md b/docs/design/index.md index 6948f207..2d700d95 100644 --- a/docs/design/index.md +++ b/docs/design/index.md @@ -5,3 +5,4 @@ Notes and details about the product design, workflow, user experience, and UI fo - [Feature goals](feature-goals.md) - [Possible use cases](feature-goals.md#possible-use-cases) - [User stories](feature-goals.md#user-stories) +- [Inputs and keybindings](inputs-and-keybindings.md) diff --git a/docs/design/inputs-and-keybindings.md b/docs/design/inputs-and-keybindings.md new file mode 100644 index 00000000..85fc7316 --- /dev/null +++ b/docs/design/inputs-and-keybindings.md @@ -0,0 +1,153 @@ +# Inputs and keybindings + +## Input categories + +- Keyboard + - Modifier keys (Ctrl, Shift, Alt) + - Letter keys (A–Z) + - Number keys (0–9) + - Left edge keys (Escape, \`, Tab) + - Right edge keys (Backspace, \\, Return, /) + - Space bar (⎵) + - Symbol pair keys (-/=, \[/\], ;/', ,/.) + - Function keys (F1–F12) + - Navigation keys (Insert/Delete, Home/End, Page Up/Page Down) + - Arrow keys (↑, →, ↓, ←) + - Numpad Enter should be equivalent to CtrlReturn (Enter) + - Other numpad keys should reflect their main keyboard counterparts +- Mouse + - Cursor movement + - LMB + - RMB + - MMB + - Vertical scroll wheel up/down + - Horizontal scroll wheel (less common) + - Forward navigation (less common) + - Backward navigation (less common) +- Tablet + - Hover movement + - Stroke movement + - With pressure + - With tilt + - With angle (less common) + - Lower stylus button + - Upper stylus button + - Eraser hover movement (less common) + - Eraser stroke movement (less common) +- Touch + - Tap + - Drag + - Pinch + - Rotate + - Multiple fingers (1–4) + +## Document-specific commands + +- CtrlS Save document. +- CtrlShiftS Save as. +- CtrlE Export. + +## Panel-specific commands + +### Document Panel + +#### Viewport navigation + +Ctrl- Zoom out to the next discrete increment. +Ctrl=/Ctrl+ Zoom in to the next discrete increment. +Ctrl0 Zoom to show the entire canvas. +Ctrl` Zoom to show the entire selection. +Ctrl1 Zoom to 100% scale. +Ctrl2 Zoom to 200% scale. + +#### Selection-specific + +- H Hide/show selection, equivalent to turning off the eye icon on every selected layer +- AltH Show hidden direct children of the selection, equivalent to turning on the eye icon on every direct child layer of the selected layers +- X Delete selection (with confirmation) +- CtrlI Invert selected, by applying an Invert node. + +#### Masking + +- Tab Enter/exit Mask Mode. + +#### Working colors + +- ShiftX Swap the primary and secondary working colors. +- CtrlShiftX Reset the primary and secondary working colors to black and white. + +#### Tool shelf + +| Tool | Graphite | Photoshop | Illustrator | XD | Affinity Designer | Inkscape | Gimp | +| --------------- | ------------ | ------------------------------------------ | ----------------------------- | ---------------- | ----------------------------- | -------- | -------- | +Select Tool | V | **V** | V | V | V | | | +Crop Tool | | C | ShiftO | A | | | | +Navigate Tool | Z | **Z**/H/R | **Z**/H | **Z** | **Z**/H | | | +Eyedropper Tool | I | **I** | **I** | | **I** | | | +Text Tool | T | **T** | **T** | **T** | **T** | | | +Fill Tool | F | G | | | G | | | +Gradient Tool | H | G | G | | G | | | +Brush Tool | B | **B** | **B** | | **B** | | | +Heal Tool | J | **J** | | | | | | +Clone Tool | C | S | | | | | | +Patch Tool | | J | | | | | | +Detail Tool | D | | | | | | | +Relight Tool | O | **O** | | | | | | +Path Tool | A | **A** | **A** | | **A** | | | +Pen Tool | P | **P** | **P** | **P** | **P** | | | +Freehand Tool | N | P | **N** | | **N** | | | +Spline Tool | | P | Shift~ | | P | | | +Line Tool | L | U | \\ | **L** | P | | | +Rectangle Tool | M | U/**M** | **M** | R | **M** | | | +Ellipse Tool | E | U/M | L | **E** | M | | | +Shape Tool | Y | U | | **Y** | | | | + +#### Tool-specific keys + +Excluding mouse inputs and modifier keys. + +##### Select Tool + +- G Grab (translate) the selected items. Hit X or Y to constrain to that global axis, hit X or Y again to constrain to that local axis. Type a number to move along that axis by that many pixels (`px` or `pixel` or `pixels`), or type a unit suffix. +- R Rotate the selected items. Type a number to rotate by that many degrees (`°` or `deg` or `degree` or `degrees`), or type a unit suffix (`turn` or `turns` or `rev` or `revs`, `rad` or `radians`, `min` or `minutes` or `'`, `sec` or `seconds` or `"`, `grad`). +- S Scale the selected items. Hit X or Y to constrain to that global axis, hit X or Y again to constrain to that local axis. Type a number to scale along that axis by that factor (`fac` or `factor`), or type a unit suffix (`%`). + +##### Crop Tool + +##### Navigate Tool + +##### Eyedropper Tool + +##### Text Tool + +##### Fill Tool + +##### Gradient Tool + +##### Brush Tool + +##### Heal Tool + +##### Clone Tool + +##### Patch Tool + +##### Detail Tool + +##### Relight Tool + +##### Path Tool + +##### Pen Tool + +##### Freehand Tool + +##### Spline Tool + +##### Line Tool + +##### Rectangle Tool + +##### Ellipse Tool + +##### Shape Tool diff --git a/docs/design/tool-behavior.md b/docs/design/tool-behavior.md new file mode 100644 index 00000000..fb147ac8 --- /dev/null +++ b/docs/design/tool-behavior.md @@ -0,0 +1,11 @@ +# Tool behavior + +# Select Tool + +LMB Click selects the outermost group. + +LMB ClickLMB Click "digs down" the layer tree and selects the layer or group in the currently selected group. + +LMB ClickLMB Click lets you pick the innermost layer. While holding down the click, the cursor can be dragged outwards from that innermost layer and it selects parent groups that contain it. + +Holding Ctrl displays vector points and they can be LMB Clicked on to select the individual points, and so long as the modifier key is still held down, they may be dragged. Instead of selecting individual points, they are all selected by default and individual points can be dragged to move the entire shape around, which is useful for snapping the final destination in relation to the point being dragged from. \ No newline at end of file diff --git a/docs/editor/2-interface.md b/docs/editor/2-interface.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/editor/3-panels.md b/docs/editor/3-panels.md new file mode 100644 index 00000000..aede6bd5 --- /dev/null +++ b/docs/editor/3-panels.md @@ -0,0 +1,11 @@ +# Panels + +## Document + +### Canvas and frames + +### Rulers + +### Tool menu + +### Options bar diff --git a/docs/editor/4-documents-and-assets.md b/docs/editor/4-documents-and-assets.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/editor/5-tools.md b/docs/editor/5-tools.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/editor/6-masking.md b/docs/editor/6-masking.md new file mode 100644 index 00000000..b88f3d17 --- /dev/null +++ b/docs/editor/6-masking.md @@ -0,0 +1,5 @@ +# Masking + +## Mask mode + +At any time while in the viewport, Tab may be pressed to enter mask mode. The underlying canvas seen before entering this mode is still shown, but masks are drawn as marching ants (or other optional overlays) above the main document content. While in this mode, an island layer group is provided as the destination for drawing new mask layers using the regular set of tools. The Layer Panel also still shows the underlying main document, which lets the user select layers as contextual inputs for tools that are aware of input layers, like the Fill Tool. Rather than showing the full-color shapes over the main document canvas, they are overlaid in wireframe display mode and surrounded by a marching ants marquee outline. The mask group may be isolated (meaning it becomes the render output to the viewport, and a breadcrumb trail is shown leading from the document to the isolated layer/group) which makes the viewport output show the mask in grayscale and has the Layer Panel host the contents of the mask group. While in mask mode, the working colors are temporarily replaced with a grayscale pair. Certain tools, such as the Freehand Tool and Pen Tool, may default to a "closed" form in mask mode by turning off stroke and setting fill to white in order to provide functionality akin to the lasso or polygonal lasso selection tools. Tab may be hit again to exit mask mode, but the marching ants still show up. However now, all tools used and commands performed will take into account the working mask. CtrlD will discard the working mask. \ No newline at end of file diff --git a/docs/editor/index.md b/docs/editor/index.md index 0229b160..b587f102 100644 --- a/docs/editor/index.md +++ b/docs/editor/index.md @@ -69,6 +69,8 @@ Work in progress. - Parametric tool group - Raster tool group - Vector tool group +- Masking + - Mask mode - Vector editing - Data types - Data flow