Parts, tools, library

title

Parts, tools, library

dated

Juli '26

This labnote outlines the design & prototype of how parts, tools and the tool-library work (and are currently implemented) in Playbook. I’d say this design is at least directionally correct, though there are some missing parts.

The current design treats essentially any action you can take in the system as a tool. A tool can either be a dynamic tool, or a tap tool. Dynamic tools track pen-down, pen-move and pen-up movement. Pens, selection or scrolling are all dynamic tools. Tap tools trigger an action once when you pick them. Duplicate, Delete, Group, and Exit Part are all tap tools. We might not strictly need this distinction, since you could have a tool that handles all the events, but in practice I’ve found there are only really these two types.

The Tool Library

The interactions for tools are mostly built around a single psuedo-modal overlay menu. The overlay contains swatches for different tools.

You open the menu and pick a tool by either:

• Squeezing the stylus (and holding it squeezed)
• Hovering the pen over a swatch, and releasing the sequeeze gesture.

Or, alternatively:

• Holding a finger in the bottom left corner of the screen
• Tapping a swatch with either the stylus or a finger

If the iPad/pencil configuration supports hover, directly underneath the pencil, a set of common tools appear, in a radial menu style layout. You don’t have to hover exactly over a swatch, the closest swatch to your pencil will be selected. This allows you to quickly switch between tools by flicking the pen in a certain direction while squeezing. Keeping the items nearby the pencil means you can do this very rapidly without ever moving your hand away.

The spot in the middle of the radial menu is reserved for your favorite default pen. If you simply squeeze and release immediately, you will immediately switch to this tool.

This pattern enables extremely rapid tool switching, once you’ve habituated to the gestures, while also providing a certain level of discoverability for novice users.

In the top corners of the screen, there is space for other tools which serve more general purposes (more on these later). You can either squeeze and then move the pencil to the corner of screen, or hold the pencil at the top of the screen, squeeze and immediately release. Again, you can habituate to this quite easily. If you know the tool is in the top-right corner, you can pick it without even looking.

When holding the pen in the corner the radial menu will appear in the middle of the screen, to prevent overlap.

Conceptually, the elements in the menu are just transcluded from another page in your notebook. This means that you can customise the tools in your library simply by editing this page.

I also experimented with a pseudo mode, which allows the user to switch between different pages in the library. I think, if we extend this we might be able to have several tabs for things like shapes, ui elements or programming primitives. This would enable basically instant access to a very large number of composable parts without ever having to navigate away from the page you’re working on.

Making & navigating parts

Making a part and grouping are currently treated as the same thing. You select the things you want to group, and from the action menu, pick the ‘group’ swatch. Which wraps it up into a group.

You can move into the part by selecting it, and tapping the enter part swatch.

You can also firm-press on a selected part. This gives you a nice short-cut where entering a part can be done by firm-pressing twice (once to select, once to enter).

You can ‘move out’ of the part by picking the exit part swatch which appears in the top right corner of the library.

This also gives you a shortcut, because you can exit the part by squeezing the stylus in the top right corner of the screen. Or, alternatively, by holding the bottom-left and top right corner of the screen with your fingers.

When you’re ‘inside’ a part, the surrounding ink is greyed out. This works, though it’s not currently obvious you’re inside of a part when there is no other ink on the screen, so we might need some additional on-screen indications.

This approach still has a gap, because navigation needs selection, you can’t bring things into a part from the outside, in the same way you can currently move selections to different pages.

I also tried a different approach that uses a ‘navigate tool’ to move into and out of parts, which didn’t feel particularly good to use. Switching tools opens up the gesture space, but it feels strange to have to switch to an entirely different context just to navigate. Maybe we could model this as some kind of temporary tool like the selection lasso that would make this feel better?

Visibility

In order to be able to hide part internals, I added a visibility property to all entities in the scene graph. You can set this property in the same way you set ink style, with a swatch in the action menu. The swatches aggregate in the same way, allowing you to set the property for whole selections at once. There are three different settings:

• visible: the default value, meaning you can see this at all times.
• hidden: meaning, this won’t be visible when outside of a component, but you will still be able to see it when inside the component.
• peeking: an in-between option, which is hidden by default, but also becomes visible when the part is selected. This is used for things like handles.

In the top-left corner of the tool library I’ve put a swatch that allows you to show or hide hidden-by default elements, this allows you to check all the hidden elements, though we might want to

Tools are just parts

This is still work in progress, but it’s worth noting that tools and their penpots are, conceptually, themselves just parts. This means that:

• When you’re picking a tool, this actually creates a copy of the penpot in a specific spot. Ultimately I want this to be a page somewhere in a notebook, so all state becomes represented in userspace.

• I think we could have the implementation for all tools live inside the penpot.

• One initial experiment I tried is the idea of a ‘draw arrow’ which reifies the action of drawing (putting the pen down, and moving it) into a userpace part. This then gives the part a public interface so it can be use be used as a dynamic tool. For instance like a rectangle where you place the top-left and bottom right corner by dragging the pen.

• Currently, this is done with built-in ‘make a penpot’ action, but I think can be done in a slightly more elegant way.

Further work

• The ability to move things into and out of parts
• Improving show/hide and greyout rendering styles
• Properly designing the internals for penpots & tools
• Try to properly design a multi-page tool library