Skip to content

[#456]: Allow Model.fromJson to accept a second, optional argument that allows it to re-use mounted components from a previous Model instance #522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brownstein wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[#456]: Allow Model.fromJson to accept a second, optional argument that allows it to re-use mounted components from a previous Model instance #522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c83f15
[#456]: Allow Model.fromJson to accept a second, optional argument th…
brownstein May 29, 2026
a9cf221
Document param
brownstein May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/model/BorderNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class BorderNode extends Node implements IDropTarget {
static readonly TYPE = "border";

/** @internal */
static fromJson(json: IJsonBorderNode, model: Model) {
static fromJson(json: IJsonBorderNode, model: Model, extant?: BorderNode) {
const location = DockLocation.getByName(json.location);
const border = new BorderNode(location, json, model);
if (json.children) {
Expand All @@ -42,9 +42,12 @@ export class BorderNode extends Node implements IDropTarget {
private location: DockLocation;

/** @internal */
constructor(location: DockLocation, json: IJsonBorderNode, model: Model) {
constructor(location: DockLocation, json: IJsonBorderNode, model: Model, extant?: BorderNode) {
super(model);

if (extant) {
this.contentRect = extant.contentRect.clone();
this.tabHeaderRect = extant.tabHeaderRect.clone();
}
this.location = location;
this.attributes.id = `border_${location.getName()}`;
BorderNode.attributeDefinitions.fromJson(json, this.attributes);
Expand Down
27 changes: 13 additions & 14 deletions src/model/BorderSet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { Node } from "./Node";

export class BorderSet {
/** @internal */
static fromJson(json: any, model: Model) {
static fromJson(json: any, model: Model, extant?: BorderSet) {
const borderSet = new BorderSet(model);
borderSet.borders = json.map((borderJson: any) => BorderNode.fromJson(borderJson, model));
borderSet.borders = json.map((borderJson: any, index: number) => BorderNode.fromJson(borderJson, model, extant?.borders.at(index)));
for (const border of borderSet.borders) {
borderSet.borderMap.set(border.getLocation(), border);
}
Expand All @@ -34,7 +34,7 @@ export class BorderSet {
}

/** @internal */
getLayoutHorizontal () {
getLayoutHorizontal() {
return this.layoutHorizontal;
}

Expand All @@ -58,19 +58,18 @@ export class BorderSet {
}
}

/** @internal */
setPaths() {
for (const borderNode of this.borders) {
const path = "/border/" + borderNode.getLocation().getName();
borderNode.setPath(path);
let i = 0;
for (const node of borderNode.getChildren()) {
node.setPath( path + "/t" + i);
i++;
}
/** @internal */
setPaths() {
for (const borderNode of this.borders) {
const path = "/border/" + borderNode.getLocation().getName();
borderNode.setPath(path);
let i = 0;
for (const node of borderNode.getChildren()) {
node.setPath(path + "/t" + i);
i++;
}
}

}

/** @internal */
findDropTargetNode(dragNode: Node & IDraggable, x: number, y: number): DropInfo | undefined {
Expand Down
8 changes: 4 additions & 4 deletions src/model/Layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export class Layout {
private _activeTabSet?: TabSetNode | undefined;
private _toExportRectFunction: (rect: Rect, type: ILayoutType) => Rect;

constructor(layoutId: string, type: ILayoutType, rect: Rect) {
constructor(layoutId: string, type: ILayoutType, rect: Rect, extant?: Layout) {
this._layoutId = layoutId;
this._type = type;
this._rect = rect;
Expand Down Expand Up @@ -122,13 +122,13 @@ export class Layout {
return json;
}

static fromJson(layoutJson: IJsonSubLayout, model: Model, layoutId: string): Layout {
static fromJson(layoutJson: IJsonSubLayout, model: Model, layoutId: string, extant?: Layout): Layout {
const count = model.getLayouts().size;
const rect = layoutJson.rect ? Rect.fromJson(layoutJson.rect) : new Rect(50 + 50 * count, 50 + 50 * count, 600, 400);
rect.snap(10); // snapping prevents issue where window moves 1 pixel per save/restore on Chrome

const layout = new Layout(layoutId, layoutJson.type || "window", rect);
layout.setRootRow(RowNode.fromJson(layoutJson.layout, model, layout));
const layout = new Layout(layoutId, layoutJson.type || "window", rect, extant);
layout.setRootRow(RowNode.fromJson(layoutJson.layout, model, layout, extant?.getRootRow()));

return layout;
}
Expand Down
77 changes: 36 additions & 41 deletions src/model/Model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,13 @@ export class Model {

const layout = new Layout(layoutId, type, oldLayout.getToExportRectFunction()(node.getRect(), type));
const json = {
type: "row"
}
type: "row",
};
const row = RowNode.fromJson(json, this, layout);
layout.setRootRow(row);
this.layouts.set(layoutId, layout);
row.drop(node, DockLocation.CENTER, 0);

if (isMaximized) {
this.mainLayout.setMaximizedTabSet(undefined);
}
Expand All @@ -152,24 +152,22 @@ export class Model {
case Actions.POPOUT_TAB: {
const node = this.idMap.get(action.data.node);
if (node instanceof TabNode) {
const layoutId = randomUUID()
const layoutId = randomUUID();

const parent = node.getParent() as (TabSetNode | BorderNode);
const parent = node.getParent() as TabSetNode | BorderNode;
const popoutRect = parent.getContentRect();
const oldLayout = node.getLayout()!;
const type = action.data.type || "window";
const layout = new Layout(layoutId, type, oldLayout.getToExportRectFunction()(popoutRect, type));
const tabsetId = randomUUID();
const json: IJsonRowNode = {
type: "row",
children: [
{ type: "tabset", id: tabsetId }
]
}
children: [{ type: "tabset", id: tabsetId }],
};
const row = RowNode.fromJson(json, this, layout);
layout.setRootRow(row);
this.layouts.set(layoutId, layout);

const tabset = this.idMap.get(tabsetId) as TabSetNode & IDropTarget;
tabset.drop(node, DockLocation.CENTER, 0, true);
}
Expand Down Expand Up @@ -311,7 +309,6 @@ export class Model {
return returnVal;
}


/**
* Get the currently active tabset node
*/
Expand Down Expand Up @@ -392,23 +389,23 @@ export class Model {
const child = node.getChildren()[0];
if (child instanceof TabSetNode) {
return child;
}
else {
} else {
return this.getFirstTabSet(child);
}
}

/**
* Loads the model from the given json object
* @param json the json model to load
* @returns {Model} a new Model object
*/
static fromJson(json: IJsonModel) {
* Loads the model from the given json object
* @param json the json model to load
* @param extant an optional previous model instance
* @returns {Model} a new Model object
*/
static fromJson(json: IJsonModel, extant?: Model) {
const model = new Model();
Model.attributeDefinitions.fromJson(json.global, model.attributes);

if (json.borders) {
model.borders = BorderSet.fromJson(json.borders, model);
model.borders = BorderSet.fromJson(json.borders, model, extant?.borders);
}

const subLayouts = json.subLayouts || json.popouts;
Expand All @@ -420,7 +417,7 @@ export class Model {
model.layouts.set(layoutId, layout);
}
}
model.mainLayout.setRootRow(RowNode.fromJson(json.layout, model, model.mainLayout));
model.mainLayout.setRootRow(RowNode.fromJson(json.layout, model, model.mainLayout, extant?.mainLayout.getRootRow()));
model.tidy(); // initial tidy of node tree
return model;
}
Expand Down Expand Up @@ -449,7 +446,7 @@ export class Model {
global,
borders: this.borders.toJson(),
layout: this.mainLayout.getRootRow()!.toJson(),
subLayouts: subLayouts
subLayouts: subLayouts,
};
}

Expand Down Expand Up @@ -481,18 +478,18 @@ export class Model {
* set callback called when a new TabSet is created.
* The tabNode can be undefined if it's the auto created first tabset in the root row (when the last
* tab is deleted, the root tabset can be recreated)
* @param onCreateTabSet
* @param onCreateTabSet
*/
setOnCreateTabSet(onCreateTabSet: (tabNode?: TabNode) => ITabSetAttributes) {
this.onCreateTabSet = onCreateTabSet;
}

addChangeListener(listener: ((action: Action) => void)) {
addChangeListener(listener: (action: Action) => void) {
this.changeListeners.push(listener);
}

removeChangeListener(listener: ((action: Action) => void)) {
const pos = this.changeListeners.findIndex(l => l === listener);
removeChangeListener(listener: (action: Action) => void) {
const pos = this.changeListeners.findIndex((l) => l === listener);
if (pos !== -1) {
this.changeListeners.splice(pos, 1);
}
Expand Down Expand Up @@ -522,7 +519,7 @@ export class Model {
return priority[a.getType()] - priority[b.getType()];
});
this.layouts.clear();
sorted.forEach(layout => this.layouts.set(layout.getLayoutId(), layout));
sorted.forEach((layout) => this.layouts.set(layout.getLayoutId(), layout));
}

/** @internal */
Expand All @@ -538,7 +535,7 @@ export class Model {
}

/** @internal */
setMaximizedTabset(tabsetNode: (TabSetNode | undefined), layoutId: string) {
setMaximizedTabset(tabsetNode: TabSetNode | undefined, layoutId: string) {
const layout = this.layouts.get(layoutId);
if (layout) {
if (tabsetNode) {
Expand All @@ -554,7 +551,7 @@ export class Model {
// regenerate idMap to stop it building up
this.idMap.clear();
this.visitNodes((node) => {
this.idMap.set(node.getId(), node)
this.idMap.set(node.getId(), node);
// if (node instanceof RowNode) {
// node.normalizeWeights();
// }
Expand Down Expand Up @@ -597,7 +594,7 @@ export class Model {

/** @internal */
nextUniqueId() {
return '#' + randomUUID();
return "#" + randomUUID();
}

/** @internal */
Expand Down Expand Up @@ -634,18 +631,16 @@ export class Model {
private static createAttributeDefinitions(): Attributes {
const attributeDefinitions = new Attributes();

attributeDefinitions.add("enableEdgeDock", true).setType(Attribute.BOOLEAN).setDescription(
`enable docking to the edges of the layout`
);
attributeDefinitions.add("enableEdgeDockIndicators", true).setType(Attribute.BOOLEAN).setDescription(
`show the edge indicators when dragging`
);
attributeDefinitions.add("rootOrientationVertical", false).setType(Attribute.BOOLEAN).setDescription(
`the top level 'row' will layout horizontally by default, set this option true to make it layout vertically`
);
attributeDefinitions.add("enableRotateBorderIcons", true).setType(Attribute.BOOLEAN).setDescription(
`boolean indicating if tab icons should rotate with the text in the left and right borders`
);
attributeDefinitions.add("enableEdgeDock", true).setType(Attribute.BOOLEAN).setDescription(`enable docking to the edges of the layout`);
attributeDefinitions.add("enableEdgeDockIndicators", true).setType(Attribute.BOOLEAN).setDescription(`show the edge indicators when dragging`);
attributeDefinitions
.add("rootOrientationVertical", false)
.setType(Attribute.BOOLEAN)
.setDescription(`the top level 'row' will layout horizontally by default, set this option true to make it layout vertically`);
attributeDefinitions
.add("enableRotateBorderIcons", true)
.setType(Attribute.BOOLEAN)
.setDescription(`boolean indicating if tab icons should rotate with the text in the left and right borders`);

// tab
attributeDefinitions.add("tabEnableClose", true).setType(Attribute.BOOLEAN);
Expand Down
Loading