Components Overview - TJohn2017/Laputa GitHub Wiki

The app has five main sections:

Main Page

The Main Page allows the user to add, edit, and select Hosts and Canvases.

Session Page

The Session Page is where a user can interact with a canvases or terminals alone, or a canvas and a terminal in split view.

Terminal

The Terminal component spins up a terminal session with a provided SSH connection.

SSH Connection

The SSHConnection class maintains the ssh connection for each terminal and provides it connection, authorization, reading, and writing functionality.

Canvases and Code Cards

Canvases contain draggable code cards and annotations through the Apple pencil.

Architecture Overview

The Main Page component is the starting page for the Laputa app and, as a result, it sits at the top of the code hierarchy in Laputa although most of its functionality has been abstracted into smaller components (see Main Page for more). It's largely responsible for simply managing the header component and hosts / canvases list component as well as hosting the editing and selection sheet views. It's also responsible for launching a Session Page component once the user decides to initiate a session.

The Session Page component is responsible for managing any canvas and / or terminal sessions which include managing SSH connections (one or more at a time), initializing any global canvas entities, managing navigation bar features, managing the slider-resizing gestures, and managing adding terminal and canvas components to an active session. Along with this Session Page is responsible for dealing with all of the state changes that can occur when a user is working through a session (adding a terminal, adding a canvas, supporting multiple terminals). Most of the internal terminal operations and canvas operations are abstracted down into the other corresponding components but any features (like active SSH connections of the navigation bar canvas features) that need to managed and passed around by a parent entity are forced to be held by the Session Page component. Any functionality that can't be managed directly by the Session Page component (like capturing terminal highlighting for code-card creation or terminal resizing) has to be communicated from the Session Page component to the corresponding child component.

The Terminal component is intended to be responsible for providing a terminal emulator component that can be given an SSH connection and then actively present a responsive terminal experience for the given ssh connection. The Terminal component also has to take care of a lot of session-page management on behalf of the Session Page component including managing terminal resizing when the session changes into a split session state, highlighting and capturing terminal outputs, as well as managing the keyboard and code-card-creation button. It also has to actively store and manage any active terminal states that are present in the current session --- this is especially important in order to achieve robust multiple-terminal / terminal-tab-bar functionality.

The Canvas component is intended to be responsible for providing a robust canvas experience where the user can annotate on and interact with entities like the canvas code cards. Some of its features are communicated from the parent Session Page component (e.g. navigation bar features like pencil / pen / color selection, etc) but it's largely independent and manages its features very well.