save layout

Author: rinick

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/*.js.map": true,
+    "**/*.js": {
+      "when": "$(basename).ts"
+    },
+    "**/*?.js": {
+      "when": "$(basename).tsx"
+    }
+  },
+  "files.eol": "\n",
+  "editor.tabSize": 2,
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false
+}

lib/DockAlgorithm.js

@@ -12,6 +12,7 @@ export interface BoxData extends DockDataBase {
     children: (BoxData | PanelData)[];
 }
 export interface TabGroup {
+    name?: string;
     floatable?: boolean;
     multiTabs?: boolean;
     tabLocked?: boolean;
@@ -21,7 +22,7 @@ export interface TabGroup {
 export interface TabData extends DockDataBase {
     id?: string;
     parent?: PanelData;
-    title: string;
+    title: React.ReactChild;
     content: React.ReactElement | (() => React.ReactElement);
     closable?: boolean;
     group: TabGroup;

lib/DockData.d.ts

@@ -0,0 +1,43 @@
+import { DockMode, LayoutData, PanelData, TabData } from "./DockData";
+interface DefaultLayoutCache {
+    panels: Map<string | number, PanelData>;
+    tabs: Map<string, TabData>;
+}
+interface SavedTab {
+    id: string;
+    groupName: string;
+}
+interface SavedPanel {
+    id: string | number;
+    groupName: string;
+    size: number;
+    tabs: SavedTab[];
+    activeId: string;
+    x?: number;
+    y?: number;
+    z?: number;
+    w?: number;
+    h?: number;
+}
+interface SavedBox {
+    id: string | number;
+    mode: DockMode;
+    size: number;
+    children: (SavedBox | SavedPanel)[];
+}
+interface SavedLayout {
+    dockbox: SavedBox;
+    floatbox: SavedBox;
+}
+export declare function createLayoutCache(defaultLayout: LayoutData): DefaultLayoutCache;
+export interface SaveModifier {
+    modifySavedPanel?(savedPanel: SavedPanel, panelData: PanelData): void;
+    modifySavedTab?(savedTab: SavedTab, tabData: TabData): void;
+}
+export interface LoadModifier {
+    loadPanel?(savedPanel: SavedPanel): PanelData;
+    loadTab?(savedTab: SavedTab): TabData;
+}
+export declare function saveLayout(layout: LayoutData, modifier?: SaveModifier): SavedLayout;
+export declare function loadLayout(savedLayout: SavedLayout, defaultLayout: LayoutData, modifier?: LoadModifier): LayoutData;
+export {};

lib/Serializer.d.ts

@@ -2,6 +2,8 @@ import {BoxData, DockMode, DropDirection, LayoutData, nextId, PanelData, TabData
 
 
 export const placeHolderGroup: TabGroup = {
+  /** used by serialization */
+  name: '-place-holder-',
   panelClass: 'dock-placeholder-panel',
   floatable: false,
 };
@@ -247,7 +249,7 @@ export function fixLayoutData(layout: LayoutData): LayoutData {
   fixBoxData(layout.dockbox);
   fixBoxData(layout.floatbox);
   if (layout.dockbox.children.length === 0) {
-    let newPanel: PanelData = {id: '+0', group: placeHolderGroup, panelLock: true, size: 200, tabs: []};
+    let newPanel: PanelData = {id: '+0', group: placeHolderGroup, panelLock: {}, size: 200, tabs: []};
     newPanel.parent = layout.dockbox;
     layout.dockbox.children.push(newPanel);
   } else {
@@ -261,7 +263,6 @@ export function fixLayoutData(layout: LayoutData): LayoutData {
   }
   layout.dockbox.parent = null;
   layout.floatbox.parent = null;
-  console.log(layout)
   return layout;
 }
 

lib/Serializer.js

@@ -17,6 +17,7 @@ export interface BoxData extends DockDataBase {
 
 
 export interface TabGroup {
+  name?: string;
   floatable?: boolean;
   multiTabs?: boolean;
   // when tabs are locked, you can only drag the whole panel
@@ -28,7 +29,7 @@ export interface TabGroup {
 export interface TabData extends DockDataBase {
   id?: string;
   parent?: PanelData;
-  title: string;
+  title: React.ReactChild;
   content: React.ReactElement | (() => React.ReactElement);
   closable?: boolean;
   group: TabGroup;