Screen layout

(Show an image labelling the Overview/Detail View/Menu bar/Context Panel/Search Box areas)

Menu Items

• File

  • Open Choose a tree to view

  • Get Image Generate a PNG image of the current view

  • Export to SVG Generate an SVG image of the current view

• View

  • Layout

    • Rectangular (diagram of a rectangular layout)

    • Circular (diagram of a circular layout)

  • Style

    • Import tree styling Apply coloring/sizing rules to the tree. (link to styling json API page)

    • Toggle Context Panel Show/hide the context panel (link to context panel section)

Overview

• Displays the entire tree, highlighting the area currently visible in the detail view.

• Hovering the mouse over a node in the overview highlights it. Clicking the node zooms the detail view to show that node's subtree.

Detail View

• Initially shows the entire tree, with the root node on the left and leaf nodes on the right.

• Where space allows, leaf nodes are labelled on their right. When two or more labels will overlap, only one label is shown.

• Subtrees that are too large to draw are collapsed into a triangle. The triangle is labelled with the name of one of the subtree's leaf nodes.

Navigation Mode

• Use navigation mode to browse the tree.

• Press N to enter navigation mode. When the mouse cursor is (cross-arrow image), the viewer is in navigation mode.

• Click and hold the left mouse button to pan the view.

  • Rectangular layout only pans vertically.

• Mousewheel up/down zooms in/out.

  • Rectangular layout only zooms vertically.

• Double-click on a node to zoom the view to fit that node's subtree.

  • In the rectangular layout, click and drag left to expand the view to show the clicked node's parent's subtree. (I.e. to zoom back out one level.)

    • (image or gif here to demo the click-and-drag gesture)

• Press the space bar to zoom the view to fit the entire tree.

Selection Mode

• Use selection mode to pick which nodes are displayed in the Context Panel (link to context panel section).

• Press S to enter selection mode. When the mouse cursor is (normal pointer image), the viewer is in navigation mode.

• Click a node to select it. Selected nodes are highlighted.

• Click and drag to select all of the nodes in an area. The selection area will be highlighted.

• Hold Shift and click to select all of the nodes in a subtree.

• Hold Ctrl and click to add a node to the current selection. (Similarly, you can hold Ctrl+Shift to add a subtree to the current selection, or hold Ctrl and drag to add all of the nodes in an area to the current selection.)

• (TODO document Alt-click here. Seems not to be working properly right now. Should select subtree containing all selected nodes.)

Context Panel

• Use the context panel to view information about selected nodes and to edit how they are displayed.

• Select nodes in the Detail View in Selection Mode (link to selection mode section)

Search Box

• Use the search box to find nodes by name.

• Begin typing the name of a node and matching names will be shown in a pop-up box above the search box. Click a name to zoom in on that node.