Sticky notes

I do my best to make Browserboard's existing features work well before adding new ones. I spent lots of time working on the pen tool before the selection tool, and then lots of time working on the selection tool before moving on to text. I address bugs before adding new features.

That's why it's taken me so long to add my next-most-requested feature, sticky notes.

Conceptually, sticky notes are simple. They're colored rectangles with text on them. But under the hood, supporting sticky notes forced me to modify the fundamental way things are displayed, to support a shape rendered behind a text box. In web browsers, there's a hard split between traditional graphics rendering and text; this split is why Browserboard's PNG export feature only supports one font per text box.

Now, I can combine any graphical shape with text. Today I shipped sticky notes, but in the future, I'll be able to replicate some of the features of sophisticated “node”-based editors like draw.io.

Top toolbar tweaks

As I add tools to Browserboard, I add more controls to the top toolbar to support each new tool's features. As a result, the top toolbar has become crowded and cramped.

To free up space for future improvements, I added a navigation bar above the whiteboard toolbar, and started hiding controls that don't apply to the selected tool. Here's what it looks like while editing a sticky note:

And here it is when you're using the marker tool. Check out the opacity slider!

Selection tool bug fixes

Selection behavior is really difficult to get right because there are so many possible interactions. I made a few small but important improvements this week: 1. When you mouse/touch down on a shape, you can start moving it immediately, instead of needing to drag a second time after selecting it. 2. When multiple shapes overlap, Browserboard will use pixel-perfect selection to choose exactly the shape you indicate. If you click multiple times, it will cycle through all shapes under your cursor, from front to back. 3. Getting in and out of text selection states is less finicky. 4. Resizing shapes while zoomed in or out should work correctly, rather than incorrectly.

Bonus: eraser size

A few people asked me to make the eraser a bit bigger than the pen by default, so I did.