Clear previous layout when applying portable layout to tab (#382)

frontend/layout/lib/layoutModel.ts

@@ -8,6 +8,7 @@ import { createRef, CSSProperties } from "react";
 import { debounce } from "throttle-debounce";
 import { balanceNode, findNode, newLayoutNode, walkNodes } from "./layoutNode";
 import {
+    clearTree,
     computeMoveNode,
     deleteNode,
     focusNode,
@@ -25,6 +26,7 @@ import {
     LayoutNodeAdditionalProps,
     LayoutTreeAction,
     LayoutTreeActionType,
+    LayoutTreeClearTreeAction,
     LayoutTreeComputeMoveNodeAction,
     LayoutTreeDeleteNodeAction,
     LayoutTreeFocusNodeAction,
@@ -354,6 +356,9 @@ export class LayoutModel {
             case LayoutTreeActionType.MagnifyNodeToggle:
                 magnifyNodeToggle(this.treeState, action as LayoutTreeMagnifyNodeToggleAction);
                 break;
+            case LayoutTreeActionType.ClearTree: {
+                clearTree(this.treeState);
+            }
             default:
                 console.error("Invalid reducer action", this.treeState, action);
         }
@@ -431,6 +436,11 @@ export class LayoutModel {
                             this.treeReducer(insertAction);
                             break;
                         }
+                        case LayoutTreeActionType.ClearTree: {
+                            this.treeReducer({
+                                type: LayoutTreeActionType.ClearTree,
+                            } as LayoutTreeClearTreeAction);
+                        }
                         default:
                             console.warn("unsupported layout action", action);
                             break;

frontend/layout/lib/layoutTree.ts

@@ -417,3 +417,11 @@ export function magnifyNodeToggle(layoutState: LayoutTreeState, action: LayoutTr
     }
     layoutState.generation++;
 }
+
+export function clearTree(layoutState: LayoutTreeState) {
+    layoutState.rootNode = undefined;
+    layoutState.leafOrder = undefined;
+    layoutState.focusedNodeId = undefined;
+    layoutState.magnifiedNodeId = undefined;
+    layoutState.generation++;
+}

frontend/layout/lib/types.ts

@@ -69,6 +69,7 @@ export enum LayoutTreeActionType {
     DeleteNode = "delete",
     FocusNode = "focus",
     MagnifyNodeToggle = "magnify",
+    ClearTree = "clear",
 }
 
 /**
@@ -236,6 +237,13 @@ export interface LayoutTreeMagnifyNodeToggleAction extends LayoutTreeAction {
     nodeId: string;
 }
 
+/**
+ * Action for clearing all nodes from the layout tree.
+ */
+export interface LayoutTreeClearTreeAction extends LayoutTreeAction {
+    type: LayoutTreeActionType.ClearTree;
+}
+
 /**
  * Represents a single node in the layout tree.
  */