vzcode 1.11.0 → 1.13.0

package/src/client/vzReducer/updatePane.ts

@@ -0,0 +1,44 @@
+import {
+  FileId,
+  Pane,
+  PaneId,
+  TabState,
+} from '../../types';
+
+// Immutable update pattern for updating a pane's tab list.
+export const updatePane = ({
+  pane,
+  activePaneId,
+  newTabList,
+  newActiveFileId,
+}: {
+  pane: Pane;
+  activePaneId: PaneId;
+  newTabList?: Array<TabState>;
+  newActiveFileId?: FileId | null;
+}): Pane =>
+  pane.type === 'splitPane'
+    ? {
+        ...pane,
+        children: pane.children.map((child) =>
+          updatePane({
+            pane: child,
+            activePaneId,
+            newTabList,
+            newActiveFileId,
+          }),
+        ),
+      }
+    : pane.id === activePaneId
+      ? {
+          ...pane,
+          tabList:
+            newTabList !== undefined
+              ? newTabList
+              : pane.tabList,
+          activeFileId:
+            newActiveFileId !== undefined
+              ? newActiveFileId
+              : pane.activeFileId,
+        }
+      : pane;

package/src/client/vzReducer/updatePresenceIndicatorReducer.ts

@@ -0,0 +1,30 @@
+import { VZAction, VZState } from '.';
+
+export const updatePresenceIndicatorReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'update_presence_indicator') {
+    // True if there's already an entry for this user.
+    const needsUpdate =
+      state.sidebarPresenceIndicators.find(
+        (d) =>
+          d.username === action.presenceIndicator.username,
+      );
+
+    return {
+      ...state,
+      sidebarPresenceIndicators: needsUpdate
+        ? state.sidebarPresenceIndicators.map((d) =>
+            d.username === action.presenceIndicator.username
+              ? action.presenceIndicator
+              : d,
+          )
+        : [
+            ...state.sidebarPresenceIndicators,
+            action.presenceIndicator,
+          ],
+    };
+  }
+  return state;
+};

package/src/server/index.js

@@ -313,6 +313,7 @@ server.listen(port, async () => {
     // Sets the port to the one specified in the environment
     // variable (for development) or the default port.
     let livePort = process.env.EDITOR_PORT || port;
+    console.log(`EDITOR_PORT: ${process.env.EDITOR_PORT}`);
     console.log(
       `Editor is live at http://localhost:${livePort}`,
     );

package/src/types.ts

@@ -80,8 +80,70 @@ export interface SearchFile {
 export interface SearchResults {
   pattern: string;
   results: SearchResult;
+  focused: boolean;
 }
 
+// Representation of an open tab.
+export type TabState = {
+  // `fileId`
+  // The ID of the file that the tab represents.
+  fileId: FileId;
+
+  // `isTransient`
+  // Represents whether the tab is temporary or persistent.
+  //  * `true` if the tab is temporary, meaning its text
+  //    appears as italic, and it will be automatically
+  //    closed when the user switches to another file.
+  //    If `true` and the tab is opened, the editor will not focus.
+  //  * `false` or `undefined` if the tab is persistent, meaning its text
+  //    appears as normal, and it will not be automatically
+  //    closed when the user switches to another file.
+  //    If `false` and the tab is opened, the editor will focus.
+  isTransient?: boolean;
+};
+
+// PaneId
+//   * A unique ID for a pane.
+//   * This is a random string.
+export type PaneId = string;
+
+// The leaf node of the tree data structure
+export type LeafPane = {
+  type: 'leafPane';
+  // The list of tabs
+  // Mutually exclusive with `children`.
+  tabList: Array<TabState>;
+
+  // The ID of the file that is currently active
+  // within this leaf pane.
+  // Invariant: `activeFileId` is always in `tabList`.
+  activeFileId: FileId | null;
+};
+
+// Internal node of the tree data structure
+export type SplitPane = {
+  type: 'splitPane';
+
+  // Which orientation is it? Vertical split or horizontal split?
+  // Applies only to `children`
+  orientation: 'vertical' | 'horizontal';
+
+  // The children panels
+  // Mutually exclusive with `tabList`.
+  children: Array<Pane>;
+};
+
+// The node data structure of the split pane tree
+export type Pane = {
+  // Every pane gets a unique ID,
+  // so we can refer to it in actions.
+  id: PaneId;
+
+  // The type of the pane
+  // Either a leaf pane or a split pane.
+  type: 'leafPane' | 'splitPane';
+} & (LeafPane | SplitPane);
+
 export type JSONOp = any;
 
 // `ShareDBDoc`
@@ -130,13 +192,36 @@ export type VZCodeContent = {
   isInteracting?: boolean;
 };
 // Example Presence object, from ShareDB:
-// {"start":["files","69064344","text",183],"end":["files","69064344","text",183],"username":"Jim"}
+// {
+//   "start": [
+//     "files",
+//     "71898298",
+//     "text",
+//     415
+//   ],
+//   "end": [
+//     "files",
+//     "71898298",
+//     "text",
+//     415
+//   ],
+//   "username": "Tim"
+// }
 export type Presence = {
   start: Array<string | number>;
   end: Array<string | number>;
   username: Username;
 };
 
+// An item in the list of sidebar presence indicators.
+// It needs to know:
+// * What user the presence is associated with
+// * What file the presence is associated with
+export type PresenceIndicator = {
+  username: Username;
+  fileId: FileId;
+};
+
 // An id used for presence.
 export type PresenceId = string;