[Design] Design "case study": Ecco outlining

[Don Dwiggins]

Here's a contribution to the Chandler's design discussion, specifically
oriented to outlining.  It's a description of the basics of Ecco's outlining
functionality, intended as an exemplar for study.

Ecco outlining is as close to WYSIWG as any outliner I've seen.  Some
applications apparently use "outlining" to mean "organizing information in
hierarchies", and use various kinds of presentations and operations derived
from their interpretations of this.  In Ecco, an outline can be created,
edited, and viewed as a document in outline form.  (In this description, I'm
purposely ignoring the many useful things that can be done with items in an
Ecco outline, in order to focus on this aspect.  Also, I focus on the most
common and basic operations on outlines -- the ones that will be "at your
fingertips" when you've gotten some experience with the application.)

The unit of outlining is the "item", which is roughly equivalent to a
paragraph in a word processing application.  It contains rich text, possibly
including embedded newlines, and can be of indefinite length.  The usual
tools are available for editing text in an item (which is done in place in
the outline, without losing any visibility to the neighboring items):
cut/copy/paste, Ctrl-B to make text bold, Ctrl-I for italic, etc.  Menu
items are available to change font, size, style, and color.  All font
settings can be made down to the character level.

You begin with a blank "notepad", which looks like a sheet of ruled paper.
Click on the first blank line, and a small bullet appears, with the cursor
placed to its right.  After typing the item, you can press Ctrl-Enter to
begin the next item at the same level (Shift-Enter to embed a newline in the
same item), Ctrl-R to begin a new item at the next level down, or Ctrl-L to
begin a new item at the next higher level (if the item's not at the top
level).  (You can use these when on any item, to insert a new one after the
current one.)  The outline structure is shown by indentation in the usual
way.

If the currently selected item already has a child, pressing Enter will
insert a new child before it; pressing Ctrl-Enter will insert a new item at
the same level as the current one, after all its children.  (If the current
item doesn't have children, Enter will insert a new item at the same level.)

Outlines can be collapsed and expanded, either globally (all items at a
given level) or locally (subitems of the currently selected one).  Hold down
the Ctrl key while pressing a digit (1 through 9), and all items at that
level and below (in the entire outline) will be hidden.  With an item
selected, hold Ctrl and Shift to get the same effect, but only on that
item's children.  For convenience, Ctrl-H is the same as Ctrl-Shift-1 (hide
all descendants), Ctrl-J is the same as Ctrl-Shift-2 (show only immediate
children), and Ctrl-G will expand all descendants of the item.

To move an item up or down a level, use the Alt-LeftArrow and Alt-RightArrow
keys.  Alt-UpArrow and Alt-DownArrow keys move an item up or down with
respect to its siblings at the same level.  (In all these moves, the
children of the item move with it.)  An item can also be moved with the
mouse anywhere in the outline, at any level, by "grabbing" the small bullet
and dragging it.  As the mouse moves, a small indicator will become visible
in each place where the item can be "dropped", to make it clear what the
effect of releasing the mouse button will be.  If several items are
selected, they can be moved as a unit by grabbing any one of their
bullets. To cancel the drag operation, return the mouse to the item you
started at and release.

As with text, entire items may be deleted, cut, copied, and pasted.  To
select an item, click to the left of its bullet.  To select several items,
click and drag, or hold down Shift while pressing the up or down arrow
keys.  Also, as with most text editors, Ctrl-Shift-End will select
all items from the current  to the last, and Ctrl-Shift-Home from the
current to the first.

Items may be split or joined.  To split an item, put the cursor in it at
some point and press Ctrl-Shift-S; the text after the cursor will become a
new item just after the current one.  (As with pressing Enter, the new item
will become the first child of the current one if there's already a child;
otherwise it'll become the next sibling.)  To join a sequence of items,
select them all and press Ctrl-Shift-J; their test will be pasted together,
separated by spaces, and appended to the first item.  (These operations
can't be undone.)
-- 

Don Dwiggins			 I'm sorry for creating such a complex design,
d.l.dwiggins@computer.org         but I didn't have time to make a simple one.
                                  -- Hermann Püterschein
Here's a contribution to Chandler's design team, specifically oriented to
outlining.  It's a description of the basics of Ecco's outlining
functionality, intended as an exemplar for study.

Ecco outlining is as close to WYSIWG as any outliner I've seen.  Some
applications apparently use "outlining" to mean "organizing information in
hierarchies", and use various kinds of presentations and operations derived
from their interpretations of this.  In Ecco, an outline can be created,
edited, and viewed as a document in outline form.  (In this description, I'm
purposely ignoring the many useful things that can be done with items in an
Ecco outline, in order to focus on this aspect.  Also, I focus on the most
common and basic operations on outlines -- the ones that will be "at your
fingertips" when you've gotten some experience with the application.)

The unit of outlining is the "item", which is roughly equivalent to a
paragraph in a word processing application.  It contains rich text, possibly
including embedded newlines, and can be of indefinite length.  The usual
tools are available for editing text in an item (which is done in place in
the outline, without losing any visibility to the neighboring items):
cut/copy/paste, Ctrl-B to make text bold, Ctrl-I for italic, etc.  Menu
items are available to change font, size, style, and color.  All font
settings can be made down to the character level.

You begin with a blank "notepad", which looks like a sheet of ruled paper.
Click on the first blank line, and a small bullet appears, with the cursor
placed to its right.  After typing the item, you can press Ctrl-Enter to
begin the next item at the same level (Shift-Enter to embed a newline in the
same item), Ctrl-R to begin a new item at the next level down, or Ctrl-L to
begin a new item at the next higher level (if the item's not at the top
level).  (You can use these when on any item, to insert a new one after the
current one.)  The outline structure is shown by indentation in the usual
way.

If the currently selected item already has a child, pressing Enter will
insert a new child before it; pressing Ctrl-Enter will insert a new item at
the same level as the current one, after all its children.  (If the current
item doesn't have children, Enter will insert a new item at the same level.)

Outlines can be collapsed and expanded, either globally (all items at a
given level) or locally (subitems of the currently selected one).  Hold down
the Ctrl key while pressing a digit (1 through 9), and all items at that
level and below (in the entire outline) will be hidden.  With an item
selected, hold Ctrl and Shift to get the same effect, but only on that
item's children.  For convenience, Ctrl-H is the same as Ctrl-Shift-1 (hide
all descendants), Ctrl-J is the same as Ctrl-Shift-2 (show only immediate
children), and Ctrl-G will expand all descendants of the item.

To move an item up or down a level, use the Alt-LeftArrow and Alt-RightArrow
keys.  Alt-UpArrow and Alt-DownArrow keys move an item up or down with
respect to its siblings at the same level.  (In all these moves, the
children of the item move with it.)  An item can also be moved with the
mouse anywhere in the outline, at any level, by "grabbing" the small bullet
and dragging it.  As the mouse moves, a small indicator will become visible
in each place where the item can be "dropped", to make it clear what the
effect of releasing the mouse button will be.  If several items are
selected, they can be moved as a unit by grabbing any one of their
bullets. To cancel the drag operation, return the mouse to the item you
started at and release.

As with text, entire items may be deleted, cut, copied, and pasted.  To
select an item, click to the left of its bullet.  To select several items,
click and drag, or hold down Shift while pressing the up or down arrow
keys.  Also, as with most text editors, Ctrl-Shift-End will select
all items from the current  to the last, and Ctrl-Shift-Home from the
current to the first.

Items may be split or joined.  To split an item, put the cursor in it at
some point and press Ctrl-Shift-S; the text after the cursor will become a
new item just after the current one.  (As with pressing Enter, the new item
will become the first child of the current one if there's already a child;
otherwise it'll become the next sibling.)  To join a sequence of items,
select them all and press Ctrl-Shift-J; their test will be pasted together,
separated by spaces, and appended to the first item.  (These operations
can't be undone.)
-- 

Don Dwiggins			 I'm sorry for creating such a complex design,
d.l.dwiggins@computer.org         but I didn't have time to make a simple one.
                                  -- Hermann Püterschein