fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-22 01:28:12 +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/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>