Split view

[raineorshine]

Add a two-column split view.

Requirements

• Render minimal toolbar in upper-right corner that displays two icons: one for a single column and one for two columns (split view). Initially the single column icon will be white (enabled) and the two column will be gray (disabled). When one is tapped, it enables the respective mode, which is tracked in state and local storage.
• 50/50 split, left and right columns, each with their own hierarchy, with reasonable margin in between.
• Make all keyboard shortcuts and gestures affect the cursor only in the “active view”.
• Clicking or tapping a thought activates the respective view and sets the cursor.
• Cursor should be hidden in the inactive view.
• Fade in second column upon activation.
• When entering split view, default the left column to the cursor and default the right column to its last known cursor, or the same as the left column if it has yet to get a cursor.
• Able to drag and drop between views.
• Automatically enter split view on mobile when switching from portrait to landscape.
• Separate breadcrumb navigation centered over each column.
• “Single Column” link centered at the top of each column with reasonable margins should return the user to single the column view for the given column.
• Dark and Light Mode support.

Rough mockup (partial):

[aqkhan]

@raineorshine

Both views should have their own hierarchies, i.e. distinct thoughts. How are we going to merge those hierarchies upon single column view activation? Is there certain criteria for splitting and merging thoughts while moving in and out of the split view?

Thanks!

[raineorshine]

Both views should have their own hierarchies, i.e. distinct thoughts.

They should have their own cursor position, but they operate on the same thoughts.

A hierarchy is just a view of the thought graph. The underlying thoughts are not stored in a hierarchy, but rather in a specialized graph. So "their own hierarchies" means "their own views" of the same underlying thoughts.

[aqkhan]

@raineorshine

So here’s the (summarised) approach that I am following now:

• Once the split view is activated, ranked thoughts are split in half and both the halves are rendered in both the views.
• To keep track of the thoughts’ parent view, I am adding a new variable i.e viewIndex in the application state. This will be used to evaluate the parent view of a thought whenever a thought is engaged:
• If a thought is clicked or tapped, the respective cursor will be set after determining the parent view of the thought.
• If a thought is dropped into a different view, it will be determined by getting the parent view of the context it being dropped in.
• cursorUp and cursorDown will also be be halted if the next/prev thought is in different view.
• Cursor and expanded will also be updated relatively, the parent view of the active thought will determine what cursor to update.

PS: As discussed earlier, there are two ‘cursor’ and two ‘expanded’ variables in the application state to handle the ops in each view. i.e cursor | secondaryCursor and expanded | secondaryExpanded.

Also, determining the parent view on each interaction can be a downside in terms of performance.

Please review and share your thoughts.

[raineorshine]

Notes:

• Trigger height recalculations on resize
• Move breadcrumbs into split view
• state.activeSplitView
  • Defines which split view the cursor is in
• Hide cursor in non-active split views
• Dim inactive views
• Disable multigesture during resize
• Add split view toolbar button