Advanced Coloring Part 1

[johnhyde]

Done:

• Updated README
• Changed mousing so that you can keep drawing if your mouse leaves the canvas and comes back (but doesn't leave the page
• Added a toolbar with tools:
  • brush (standard drawing)
  • eraser (dedicated 0-alpha brush, for those who want it)
  • eyedropper for selecting colors
  • fill tool for easily filling in chunks of color
• Added keyboard shortcuts for tools
  • press the button to select the tool
  • press and hold the button to use the tool briefly, and then switch back to your previous tool when you release the button

Todo:

• Tell the user about the shortcuts somehow (help menu? tooltip on hover?)
• Create a box to display the currently selected color
• (maybe later) Show last few used colors in boxes
• Probably something else I forgot

[yosoyubik]

This is insanely cool! Super grateful that you took the time to work on this.

eraser (dedicated 0-alpha brush, for those who want it)

Yes, because it was not obvious that you can already do that by clicking/dragging with the same color selected—I saw big chunks of white on the public canvas.

Some comments:

I noticed an issue with the fill-tool (pasting it here to keep track of it):

Tell the user about the shortcuts somehow (help menu? tooltip on hover?)

We can update the "Welcome Message" tooltip and add them there.

Create a box to display the currently selected color

Yes, this would be very useful. I'm thinking that we can replace what I had currently for the "last used color" (just a black square around one of the 18 visible colors) and update the box/square when:

• you choose a color from the color picker
• you choose a color from the 18 available
• you use the eyedropper

Wondering what the best place to put it—I can imagine a version where only the active color is shown, but when you click on it, it expands showing you the last N colors—but maybe next to the 18 we have visible now?

Added keyboard shortcuts for tools

I noticed that Brave entered into caret mode sometimes, not sure if there's a way to detect that and tell the user? I managed to get it working by turning it on/off but otherwise you might go to the previous page you've visited...

Again, this is awesome :) :) Thanks!

[johnhyde]

Ok, I've made some updates!

• Fixed (rewrote) the fill tool (sorry about that)
• Reworked Color Palette/Picker and Toolbar
  • A large square shows current color, and you click on it to bring up the color picker
  • Standard colors are shown in one row, and recently used colors in the next (up to 19)
  • The color picker allows you to enter hex values or RGB values (alpha values are still slider-only for now)
  • Toolbar buttons are bigger and look like the other buttons

After installing the Caret Browsing extension (I'm on Chrome), I'm also seeing the issue you reported. I haven't found a fix yet, but hopefully I will. I don't think it's actually caused by the keyboard shortcuts, but more investigation is required. 🤷‍♂️

[johnhyde]

Added some welcome info, and made a few small fixes here and there.