fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-21 01:28:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implement input hints based on the active tool state (#388)

Browse Source 
* 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
This commit is contained in:
Keavon Chambers
2021-12-24 01:46:03 -08:00
parent 3500160bf7
commit d2b0411295
38 changed files with 1070 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/12px-solid/keyboard-arrow-down.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<polygon class="bright" points="6,11 10,6 7,6 7,1 5,1 5,6 2,6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 135 B

frontend/assets/12px-solid/keyboard-arrow-left.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<polygon class="bright" points="1,6 6,10 6,7 11,7 11,5 6,5 6,2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 136 B

frontend/assets/12px-solid/keyboard-arrow-right.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<polygon class="bright" points="11,6 6,2 6,5 1,5 1,7 6,7 6,10" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 135 B

frontend/assets/12px-solid/keyboard-arrow-up.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<polygon class="bright" points="6,1 2,6 5,6 5,11 7,11 7,6 10,6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 136 B

frontend/assets/12px-solid/keyboard-backspace.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path class="bright" d="M11,3v6H4.41l-3-3l3-3H11 M12,2H4L0,6l4,4h8V2L12,2z" />
<polygon class="bright" points="9.35,4.35 8.65,3.65 7,5.29 5.35,3.65 4.65,4.35 6.29,6 4.65,7.65 5.35,8.35 7,6.71 8.65,8.35 9.35,7.65 7.71,6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 293 B

frontend/assets/12px-solid/keyboard-command.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path class="bright" d="M9,7H8V5h1c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2S7,1.9,7,3v1H5V3c0-1.1-0.9-2-2-2S1,1.9,1,3c0,1.1,0.9,2,2,2h1v2H3C1.9,7,1,7.9,1,9c0,1.1,0.9,2,2,2s2-0.9,2-2V8h2v1c0,1.1,0.9,2,2,2s2-0.9,2-2C11,7.9,10.1,7,9,7z M8,3c0-0.55,0.45-1,1-1s1,0.45,1,1S9.55,4,9,4H8V3z M3,4C2.45,4,2,3.55,2,3s0.45-1,1-1s1,0.45,1,1v1H3z M4,9c0,0.55-0.45,1-1,1S2,9.55,2,9s0.45-1,1-1h1V9z M5,7V5h2v2H5z M9,10c-0.55,0-1-0.45-1-1V8h1c0.55,0,1,0.45,1,1S9.55,10,9,10z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 522 B

frontend/assets/12px-solid/keyboard-enter.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path class="bright" d="M11,3v2c0,0.55-0.45,1-1,1H3V4L0,6.5L3,9V7h7c1.1,0,2-0.9,2-2V3H11z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 163 B

frontend/assets/12px-solid/keyboard-option.svg
+4
View File
@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<rect class="bright" x="6" y="3" width="5" height="1" />
<polygon class="bright" points="11,9 5.72,9 2.72,4 1,4 1,3 3.28,3 6.28,8 11,8" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 209 B

frontend/assets/12px-solid/keyboard-shift.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path class="bright" d="M6,0L0,6h3v6h6V6h3L6,0z M8,5v6H4V5H2.41L6,1.41L9.59,5H8z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 154 B

frontend/assets/12px-solid/keyboard-space.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<path class="bright" d="M11,8v1c0,0.55-0.45,1-1,1H2c-0.55,0-1-0.45-1-1V8H0v1c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V8H11z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B

frontend/assets/12px-solid/keyboard-tab.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<polygon class="bright" points="4,3 4,1 1,3.5 4,6 4,4 12,4 12,3" />
<polygon class="bright" points="0,1 0,6 1,6 1,3.5 1,1" />
<polygon class="bright" points="8,8 0,8 0,9 8,9 8,11 11,8.5 8,6" />
<polygon class="bright" points="11,8.5 11,11 12,11 12,6 11,6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

frontend/assets/16px-two-tone/mouse-hint-rmb.svg
+3 -3
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path class="dim" d="M8,1h2c1.65,0,3,1.35,3,3v4H8V1z" />
<path class="bright" d="M6,1h1v1H6C4.9,2,4,2.9,4,4v6c0,2.21,1.79,4,4,4s4-1.79,4-4V9h1v1c0,2.76-2.24,5-5,5s-5-2.24-5-5V4C3,2.35,4.35,1,6,1z" />
</svg>
<path class="bright" d="M8,1h2c1.65,0,3,1.35,3,3v4H8V1z" />
<path class="dim" d="M6,1h1v1H6C4.9,2,4,2.9,4,4v6c0,2.21,1.79,4,4,4s4-1.79,4-4V9h1v1c0,2.76-2.24,5-5,5s-5-2.24-5-5V4C3,2.35,4.35,1,6,1z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 269 B

After

Width:  |  Height:  |  Size: 270 B

frontend/src/components/widgets/floating-menus/MenuList.vue
+1 -1
View File
@@ -78,7 +78,7 @@
.user-input-label {
margin: 0;
margin-left: 4px;
margin-left: 16px;
}
.submenu-arrow {
frontend/src/components/widgets/inputs/MenuBarInput.vue
+31 -23
View File
@@ -66,13 +66,13 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
ref: undefined,
children: [
[
{ label: "New", icon: "File", shortcut: ["Ctrl", "N"], shortcutRequiresLock: true, action: async () => editor.instance.new_document() },
{ label: "Open…", shortcut: ["Ctrl", "O"], action: async () => editor.instance.open_document() },
{ label: "New", icon: "File", shortcut: ["KeyControl", "KeyN"], shortcutRequiresLock: true, action: async () => editor.instance.new_document() },
{ label: "Open…", shortcut: ["KeyControl", "KeyO"], action: async () => editor.instance.open_document() },
{
label: "Open Recent",
shortcut: ["Ctrl", "⇧", "O"],
shortcut: ["KeyControl", "KeyShift", "KeyO"],
children: [
[{ label: "Reopen Last Closed", shortcut: ["Ctrl", "⇧", "T"], shortcutRequiresLock: true }, { label: "Clear Recently Opened" }],
[{ label: "Reopen Last Closed", shortcut: ["KeyControl", "KeyShift", "KeyT"], shortcutRequiresLock: true }, { label: "Clear Recently Opened" }],
[
{ label: "Some Recent File.gdd" },
{ label: "Another Recent File.gdd" },
@@ -84,20 +84,20 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
},
],
[
{ label: "Close", shortcut: ["Ctrl", "W"], shortcutRequiresLock: true, action: async () => editor.instance.close_active_document_with_confirmation() },
{ label: "Close All", shortcut: ["Ctrl", "Alt", "W"], action: async () => editor.instance.close_all_documents_with_confirmation() },
{ label: "Close", shortcut: ["KeyControl", "KeyW"], shortcutRequiresLock: true, action: async () => editor.instance.close_active_document_with_confirmation() },
{ label: "Close All", shortcut: ["KeyControl", "KeyAlt", "KeyW"], action: async () => editor.instance.close_all_documents_with_confirmation() },
],
[
{ label: "Save", shortcut: ["Ctrl", "S"], action: async () => editor.instance.save_document() },
{ label: "Save As…", shortcut: ["Ctrl", "⇧", "S"], action: async () => editor.instance.save_document() },
{ label: "Save All", shortcut: ["Ctrl", "Alt", "S"] },
{ label: "Save", shortcut: ["KeyControl", "KeyS"], action: async () => editor.instance.save_document() },
{ label: "Save As…", shortcut: ["KeyControl", "KeyShift", "KeyS"], action: async () => editor.instance.save_document() },
{ label: "Save All", shortcut: ["KeyControl", "KeyAlt", "KeyS"] },
{ label: "Auto-Save", checkbox: true, checked: true },
],
[
{ label: "Import…", shortcut: ["Ctrl", "I"] },
{ label: "Export…", shortcut: ["Ctrl", "E"], action: async () => editor.instance.export_document() },
{ label: "Import…", shortcut: ["KeyControl", "KeyI"] },
{ label: "Export…", shortcut: ["KeyControl", "KeyE"], action: async () => editor.instance.export_document() },
],
[{ label: "Quit", shortcut: ["Ctrl", "Q"] }],
[{ label: "Quit", shortcut: ["KeyControl", "KeyQ"] }],
],
},
{
@@ -105,13 +105,13 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
ref: undefined,
children: [
[
{ label: "Undo", shortcut: ["Ctrl", "Z"], action: async () => editor.instance.undo() },
{ label: "Redo", shortcut: ["Ctrl", "⇧", "Z"], action: async () => editor.instance.redo() },
{ label: "Undo", shortcut: ["KeyControl", "KeyZ"], action: async () => editor.instance.undo() },
{ label: "Redo", shortcut: ["KeyControl", "KeyShift", "KeyZ"], action: async () => editor.instance.redo() },
],
[
{ label: "Cut", shortcut: ["Ctrl", "X"] },
{ label: "Copy", icon: "Copy", shortcut: ["Ctrl", "C"] },
{ label: "Paste", icon: "Paste", shortcut: ["Ctrl", "V"] },
{ label: "Cut", shortcut: ["KeyControl", "KeyX"] },
{ label: "Copy", icon: "Copy", shortcut: ["KeyControl", "KeyC"] },
{ label: "Paste", icon: "Paste", shortcut: ["KeyControl", "KeyV"] },
],
],
},
@@ -120,16 +120,24 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
ref: undefined,
children: [
[
{ label: "Select All", shortcut: ["Ctrl", "A"], action: async () => editor.instance.select_all_layers() },
{ label: "Deselect All", shortcut: ["Ctrl", "Alt", "A"], action: async () => editor.instance.deselect_all_layers() },
{ label: "Select All", shortcut: ["KeyControl", "KeyA"], action: async () => editor.instance.select_all_layers() },
{ label: "Deselect All", shortcut: ["KeyControl", "KeyAlt", "KeyA"], action: async () => editor.instance.deselect_all_layers() },
{
label: "Order",
children: [
[
{ label: "Raise To Front", shortcut: ["Ctrl", "Shift", "]"], action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_max()) },
{ label: "Raise", shortcut: ["Ctrl", "]"], action: async () => editor.instance.reorder_selected_layers(1) },
{ label: "Lower", shortcut: ["Ctrl", "["], action: async () => editor.instance.reorder_selected_layers(-1) },
{ label: "Lower to Back", shortcut: ["Ctrl", "Shift", "["], action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_min()) },
{
label: "Raise To Front",
shortcut: ["KeyControl", "KeyShift", "KeyLeftBracket"],
action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_max()),
},
{ label: "Raise", shortcut: ["KeyControl", "KeyRightBracket"], action: async () => editor.instance.reorder_selected_layers(1) },
{ label: "Lower", shortcut: ["KeyControl", "KeyLeftBracket"], action: async () => editor.instance.reorder_selected_layers(-1) },
{
label: "Lower to Back",
shortcut: ["KeyControl", "KeyShift", "KeyRightBracket"],
action: async () => editor.instance.reorder_selected_layers(editor.rawWasm.i32_min()),
},
],
],
},
frontend/src/components/widgets/labels/IconLabel.vue
+34 -12
View File
@@ -99,17 +99,28 @@ import WindowButtonWinMinimize from "@/../assets/12px-solid/window-button-win-mi
import WindowButtonWinMaximize from "@/../assets/12px-solid/window-button-win-maximize.svg";
import WindowButtonWinRestoreDown from "@/../assets/12px-solid/window-button-win-restore-down.svg";
import WindowButtonWinClose from "@/../assets/12px-solid/window-button-win-close.svg";
import KeyboardArrowUp from "@/../assets/12px-solid/keyboard-arrow-up.svg";
import KeyboardArrowRight from "@/../assets/12px-solid/keyboard-arrow-right.svg";
import KeyboardArrowDown from "@/../assets/12px-solid/keyboard-arrow-down.svg";
import KeyboardArrowLeft from "@/../assets/12px-solid/keyboard-arrow-left.svg";
import KeyboardBackspace from "@/../assets/12px-solid/keyboard-backspace.svg";
import KeyboardCommand from "@/../assets/12px-solid/keyboard-command.svg";
import KeyboardEnter from "@/../assets/12px-solid/keyboard-enter.svg";
import KeyboardOption from "@/../assets/12px-solid/keyboard-option.svg";
import KeyboardShift from "@/../assets/12px-solid/keyboard-shift.svg";
import KeyboardSpace from "@/../assets/12px-solid/keyboard-space.svg";
import KeyboardTab from "@/../assets/12px-solid/keyboard-tab.svg";
import MouseHintNone from "@/../assets/16px-two-tone/mouse-hint-none.svg";
import MouseHintLMB from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
import MouseHintRMB from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
import MouseHintMMB from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
import MouseHintLmb from "@/../assets/16px-two-tone/mouse-hint-lmb.svg";
import MouseHintRmb from "@/../assets/16px-two-tone/mouse-hint-rmb.svg";
import MouseHintMmb from "@/../assets/16px-two-tone/mouse-hint-mmb.svg";
import MouseHintScrollUp from "@/../assets/16px-two-tone/mouse-hint-scroll-up.svg";
import MouseHintScrollDown from "@/../assets/16px-two-tone/mouse-hint-scroll-down.svg";
import MouseHintDrag from "@/../assets/16px-two-tone/mouse-hint-drag.svg";
import MouseHintLMBDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
import MouseHintRMBDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
import MouseHintMMBDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
import MouseHintLmbDrag from "@/../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
import MouseHintRmbDrag from "@/../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
import MouseHintMmbDrag from "@/../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
import NodeTypePath from "@/../assets/24px-full-color/node-type-path.svg";
import NodeTypeFolder from "@/../assets/24px-full-color/node-type-folder.svg";
@@ -182,16 +193,27 @@ const icons = {
WindowButtonWinMaximize: { component: WindowButtonWinMaximize, size: 12 },
WindowButtonWinRestoreDown: { component: WindowButtonWinRestoreDown, size: 12 },
WindowButtonWinClose: { component: WindowButtonWinClose, size: 12 },
KeyboardArrowUp: { component: KeyboardArrowUp, size: 12 },
KeyboardArrowRight: { component: KeyboardArrowRight, size: 12 },
KeyboardArrowDown: { component: KeyboardArrowDown, size: 12 },
KeyboardArrowLeft: { component: KeyboardArrowLeft, size: 12 },
KeyboardBackspace: { component: KeyboardBackspace, size: 12 },
KeyboardCommand: { component: KeyboardCommand, size: 12 },
KeyboardEnter: { component: KeyboardEnter, size: 12 },
KeyboardOption: { component: KeyboardOption, size: 12 },
KeyboardShift: { component: KeyboardShift, size: 12 },
KeyboardSpace: { component: KeyboardSpace, size: 12 },
KeyboardTab: { component: KeyboardTab, size: 12 },
MouseHintNone: { component: MouseHintNone, size: 16 },
MouseHintLMB: { component: MouseHintLMB, size: 16 },
MouseHintRMB: { component: MouseHintRMB, size: 16 },
MouseHintMMB: { component: MouseHintMMB, size: 16 },
MouseHintLmb: { component: MouseHintLmb, size: 16 },
MouseHintRmb: { component: MouseHintRmb, size: 16 },
MouseHintMmb: { component: MouseHintMmb, size: 16 },
MouseHintScrollUp: { component: MouseHintScrollUp, size: 16 },
MouseHintScrollDown: { component: MouseHintScrollDown, size: 16 },
MouseHintDrag: { component: MouseHintDrag, size: 16 },
MouseHintLMBDrag: { component: MouseHintLMBDrag, size: 16 },
MouseHintRMBDrag: { component: MouseHintRMBDrag, size: 16 },
MouseHintMMBDrag: { component: MouseHintMMBDrag, size: 16 },
MouseHintLmbDrag: { component: MouseHintLmbDrag, size: 16 },
MouseHintRmbDrag: { component: MouseHintRmbDrag, size: 16 },
MouseHintMmbDrag: { component: MouseHintMmbDrag, size: 16 },
NodeTypePath: { component: NodeTypePath, size: 24 },
NodeTypeFolder: { component: NodeTypeFolder, size: 24 },
};
frontend/src/components/widgets/labels/UserInputLabel.vue
+110 -41
View File
@@ -2,12 +2,15 @@
<div class="user-input-label">
<template v-for="(keyGroup, keyGroupIndex) in inputKeys" :key="keyGroupIndex">
<span class="group-gap" v-if="keyGroupIndex > 0"></span>
<span class="input-key" v-for="inputKey in keyGroup" :key="inputKey" :class="keyCapWidth(inputKey)">
{{ inputKey }}
</span>
<template v-for="inputKey in keyGroup" :key="((keyInfo = keyTextOrIcon(inputKey)), inputKey)">
<span class="input-key" :class="keyInfo.width">
<IconLabel v-if="keyInfo.icon" :icon="keyInfo.icon" />
<template v-else>{{ keyInfo.text }}</template>
</span>
</template>
</template>
<span class="input-mouse" v-if="inputMouse">
<IconLabel :icon="mouseInputInteractionToIcon(inputMouse)" />
<IconLabel :icon="mouseMovementIcon(inputMouse)" />
</span>
<span class="hint-text" v-if="hasSlotContent">
<slot></slot>
@@ -46,27 +49,33 @@
border-color: var(--color-7-middlegray);
border-radius: 4px;
height: 16px;
line-height: 16px;
}
// Firefox renders the text 1px lower than Chrome (tested on Windows) with 16px line-height, so moving it up 1 pixel with 15px makes them agree
line-height: 15px;
.input-key.width-16 {
width: 16px;
}
&.width-16 {
width: 16px;
}
.input-key.width-24 {
width: 24px;
}
&.width-24 {
width: 24px;
}
.input-key.width-32 {
width: 32px;
}
&.width-32 {
width: 32px;
}
.input-key.width-40 {
width: 40px;
}
&.width-40 {
width: 40px;
}
.input-key.width-48 {
width: 48px;
&.width-48 {
width: 48px;
}
.icon-label {
margin: 1px;
display: inline-block;
}
}
.input-mouse {
@@ -92,15 +101,15 @@ import IconLabel from "@/components/widgets/labels/IconLabel.vue";
export enum MouseInputInteraction {
"None" = "None",
"LMB" = "LMB",
"RMB" = "RMB",
"MMB" = "MMB",
"Lmb" = "Lmb",
"Rmb" = "Rmb",
"Mmb" = "Mmb",
"ScrollUp" = "ScrollUp",
"ScrollDown" = "ScrollDown",
"Drag" = "Drag",
"LMBDrag" = "LMBDrag",
"RMBDrag" = "RMBDrag",
"MMBDrag" = "MMBDrag",
"LmbDrag" = "LmbDrag",
"RmbDrag" = "RmbDrag",
"MmbDrag" = "MmbDrag",
}
export default defineComponent({
@@ -115,29 +124,89 @@ export default defineComponent({
},
},
methods: {
keyCapWidth(keyText: string) {
return `width-${keyText.length * 8 + 8}`;
keyTextOrIcon(keyText: string): { text: string | null; icon: string | null; width: string } {
// Definitions
const textMap: Record<string, string> = {
Control: "Ctrl",
Alt: "Alt",
Delete: "Del",
PageUp: "PgUp",
PageDown: "PgDn",
Equals: "=",
Minus: "-",
Plus: "+",
Escape: "Esc",
Comma: ",",
Period: ".",
LeftBracket: "[",
RightBracket: "]",
LeftCurlyBracket: "{",
RightCurlyBracket: "}",
};
const iconsAndWidths: Record<string, number> = {
ArrowUp: 1,
ArrowRight: 1,
ArrowDown: 1,
ArrowLeft: 1,
Backspace: 2,
Command: 2,
Enter: 2,
Option: 2,
Shift: 2,
Tab: 2,
Space: 3,
};
// Strip off the "Key" prefix
const text = keyText.replace(/^(?:Key)?(.*)$/, "$1");
// If it's an icon, return the icon identifier
if (text in iconsAndWidths) {
return {
text: null,
icon: `Keyboard${text}`,
width: `width-${iconsAndWidths[text] * 8 + 8}`,
};
}
// Otherwise, return the text string
let result;
// Letters and numbers
if (/^[A-Z0-9]$/.test(text)) {
result = text;
}
// Abbreviated names
else if (text in textMap) {
result = textMap[text];
}
// Other
else {
result = text;
}
return { text: result, icon: null, width: `width-${(result || " ").length * 8 + 8}` };
},
mouseInputInteractionToIcon(mouseInputInteraction: MouseInputInteraction) {
mouseMovementIcon(mouseInputInteraction: MouseInputInteraction) {
switch (mouseInputInteraction) {
case MouseInputInteraction.LMB:
return "MouseHintLMB";
case MouseInputInteraction.RMB:
return "MouseHintRMB";
case MouseInputInteraction.MMB:
return "MouseHintMMB";
case MouseInputInteraction.Lmb:
return "MouseHintLmb";
case MouseInputInteraction.Rmb:
return "MouseHintRmb";
case MouseInputInteraction.Mmb:
return "MouseHintMmb";
case MouseInputInteraction.ScrollUp:
return "MouseHintScrollUp";
case MouseInputInteraction.ScrollDown:
return "MouseHintScrollDown";
case MouseInputInteraction.Drag:
return "MouseHintDrag";
case MouseInputInteraction.LMBDrag:
return "MouseHintLMBDrag";
case MouseInputInteraction.RMBDrag:
return "MouseHintRMBDrag";
case MouseInputInteraction.MMBDrag:
return "MouseHintMMBDrag";
case MouseInputInteraction.LmbDrag:
return "MouseHintLmbDrag";
case MouseInputInteraction.RmbDrag:
return "MouseHintRmbDrag";
case MouseInputInteraction.MmbDrag:
return "MouseHintMmbDrag";
default:
case MouseInputInteraction.None:
return "MouseHintNone";
frontend/src/components/window/status-bar/StatusBar.vue
+20 -29
View File
@@ -1,43 +1,22 @@
<template>
<div class="status-bar">
<UserInputLabel :inputMouse="'LMBDrag'">Drag Selected</UserInputLabel>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputKeys="[['G']]">Grab Selected</UserInputLabel>
<UserInputLabel :inputKeys="[['R']]">Rotate Selected</UserInputLabel>
<UserInputLabel :inputKeys="[['S']]">Scale Selected</UserInputLabel>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="[['Ctrl']]">Innermost</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="[['⇧']]">Grow/Shrink Selection</UserInputLabel>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="[['⇧']]">Grow/Shrink Selection</UserInputLabel>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputKeys="[['↑'], ['→'], ['↓'], ['←']]">Nudge Selected</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="[['⇧']]">Big Increment Nudge</UserInputLabel>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputKeys="[['Alt']]" :inputMouse="'LMBDrag'">Move Duplicate</UserInputLabel>
<UserInputLabel :inputKeys="[['Ctrl', 'D']]">Duplicate</UserInputLabel>
<template v-for="(hintGroup, index) in hintData" :key="hintGroup">
<Separator :type="SeparatorType.Section" v-if="index !== 0" />
<template v-for="hint in hintGroup" :key="hint">
<span v-if="hint.plus" class="plus">+</span>
<UserInputLabel :inputMouse="hint.mouse" :inputKeys="hint.key_groups">{{ hint.label }}</UserInputLabel>
</template>
</template>
</div>
</template>
<style lang="scss">
.status-bar {
display: flex;
flex-wrap: wrap;
height: 24px;
margin: 0 -4px;
// TODO: Use CSS grid to solve issue that makes overflowed items have inconsistent left padding on second row when overflowed
> * {
height: 24px;
}
.separator.section {
height: 24px;
margin: 0;
}
@@ -60,8 +39,10 @@ import { SeparatorType } from "@/components/widgets/widgets";
import UserInputLabel from "@/components/widgets/labels/UserInputLabel.vue";
import Separator from "@/components/widgets/separators/Separator.vue";
import { HintData, UpdateInputHints } from "@/dispatcher/js-messages";
export default defineComponent({
inject: ["editor"],
components: {
UserInputLabel,
Separator,
@@ -69,7 +50,17 @@ export default defineComponent({
data() {
return {
SeparatorType,
hintData: [] as HintData,
};
},
mounted() {
this.editor.dispatcher.subscribeJsMessage(UpdateInputHints, (updateInputHints) => {
this.hintData = updateInputHints.hint_data;
});
// Switch away from, and back to, the Select Tool to make it display the correct hints in the status bar
this.editor.instance.select_tool("Path");
this.editor.instance.select_tool("Select");
},
});
</script>
frontend/src/dispatcher/js-dispatcher.ts
+4 -1
View File
@@ -21,7 +21,10 @@ export function createJsDispatcher() {
const messageConstructor = messageConstructors[messageType];
if (!messageConstructor) {
// eslint-disable-next-line no-console
console.error(`Received a frontend message of type "${messageType}" but but was not able to parse the data.`);
console.error(
`Received a frontend message of type "${messageType}" but was not able to parse the data. ` +
"(Perhaps this message parser isn't exported in `messageConstructors` at the bottom of `js-messages.ts`.)"
);
return;
}
frontend/src/dispatcher/js-messages.ts
+31
View File
@@ -10,11 +10,41 @@ export class JsMessage {
static readonly jsMessageMarker = true;
}
// ============================================================================
// Add additional classes to replicate Rust's FrontendMessages and data structures below.
//
// Remember to add each message to the `messageConstructors` export at the bottom of the file.
//
// Read class-transformer docs at https://github.com/typestack/class-transformer#table-of-contents
// for details about how to transform the JSON from wasm-bindgen into classes.
// ============================================================================
export class UpdateOpenDocumentsList extends JsMessage {
@Transform(({ value }) => value.map((tuple: [string, boolean]) => ({ name: tuple[0], isSaved: tuple[1] })))
readonly open_documents!: { name: string; isSaved: boolean }[];
}
export class UpdateInputHints extends JsMessage {
@Type(() => HintInfo)
readonly hint_data!: HintData;
}
export class HintGroup extends Array<HintInfo> {}
export class HintData extends Array<HintGroup> {}
export class HintInfo {
readonly keys!: string[];
readonly mouse!: KeysGroup | null;
readonly label!: string;
readonly plus!: boolean;
}
export class KeysGroup extends Array<string> {}
const To255Scale = Transform(({ value }) => value * 255);
export class Color {
@To255Scale
@@ -277,6 +307,7 @@ export const messageConstructors: Record<string, MessageMaker> = {
SetActiveTool,
SetActiveDocument,
UpdateOpenDocumentsList,
UpdateInputHints,
UpdateWorkingColors,
SetCanvasZoom,
SetCanvasRotation,
frontend/wasm/src/api.rs
+2 -1
View File
@@ -83,7 +83,8 @@ impl JsEditorHandle {
}
// ========================================================================
// Create JS -> Rust wrapper functions below
// Add additional JS -> Rust wrapper functions below as needed for calling the
// backend from the web frontend.
// ========================================================================
pub fn has_crashed(&self) -> JsValue {