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.