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
2026-09-25 21:48:11 +08:00 · 2021-12-24 01:46:03 -08:00
parent 3500160bf7
commit d2b0411295
38 changed files with 1070 additions and 212 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>