Dockable Panels

Abstract
The rwt-dockable-panels DOM component is an accordion-style component with panels that expand/collapse and dock/float.

Motivation

Some apps have lots of interactive manipulations for working with a canvas or object. Putting the tools and options for these manipulation commands within menus is a weak design pattern. The use of floatable, dockable, and collapsable panels is a better alternative because it lets the user initiate commands with shorter mouse transit times and fewer clicks. It also provides the user with a personalized mental map of where the commands can be initiated, something that a hierarchical menu doesn't do well.

The component has these features:

• The component comprises a collection of panels that contain logically related information.
• Each panel has a titlebar for self-identification and a panel area comprising DOM elements.
• The titlebar has an expand/collapse button which allows the panel's elements to be shown or hidden.
• The titlebar has a float/dock button which allows the panel to be detached/attached from the main panel.
• Floating panels can be moved with the mouse by dragging the titlebar.
• The initial position of the menu is relative to any one of the four viewport corners.

In the wild

To see an example of this component in use, visit the simply.earth website. It uses this component for its Tangent, Scale, Rotate, Locate, and Identify panels. To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity, and follow along as you read this documentation.

Reference

	Documentation	READ WRITE HUB
	Source code	github
	Component catalog	DOM COMPONENTS
	Package installation	npm
	Publication venue	READ WRITE STACK