diff --git a/examples/layout-manager-playground/src/layout/defaultLayout.js b/examples/layout-manager-playground/src/layout/defaultLayout.js index 91c00126f..c2bf34e87 100644 --- a/examples/layout-manager-playground/src/layout/defaultLayout.js +++ b/examples/layout-manager-playground/src/layout/defaultLayout.js @@ -21,7 +21,34 @@ export default { id: "root", weight: 100, children: [ + { + type: "row", + enableDeleteWhenEmpty: true, + weight:60, + children:[ + { type: "row", + id: "top", + children: [{ type: "tabset", + id: "topLeft", + enableDeleteWhenEmpty: false, + children: [] , + weight: 30, + },{ type: "tabset", + id: "topRight", + enableDeleteWhenEmpty: false, + children: [] , + weight: 70, + }] , + weight: 30, + }, + { type: "tabset", + id: "bottom", + enableDeleteWhenEmpty: false, + weight: 70, + children: [] } + ] + }, ] } diff --git a/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx b/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx index 08eb1f1e2..a1b6babd1 100644 --- a/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx +++ b/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx @@ -383,7 +383,7 @@ export class LayoutManager { let empty = true; - for (let child of node.getChildren()) { + for (const child of node.getChildren()) { empty = this.fixRowRecursive(child) && empty; } diff --git a/geppetto.js/geppetto-client/src/common/layout/helpers/FlexLayoutHelper.ts b/geppetto.js/geppetto-client/src/common/layout/helpers/FlexLayoutHelper.ts index 26995fdfd..b5aaf25c7 100644 --- a/geppetto.js/geppetto-client/src/common/layout/helpers/FlexLayoutHelper.ts +++ b/geppetto.js/geppetto-client/src/common/layout/helpers/FlexLayoutHelper.ts @@ -1,5 +1,5 @@ -import {TabsetPosition} from "../model"; +import {BaseNode, TabsetPosition} from "../model"; // @ts-ignore import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index'; @@ -16,43 +16,42 @@ import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index'; export function createTabSet(model, tabsetID, position = TabsetPosition.RIGHT, weight = 50) { const rootNode = model.getNodeById("root"); - // const tabset = new FlexLayout.TabSetNode(model, { id: tabsetID }); + const tabset = new FlexLayout.TabSetNode(model, { id: tabsetID }); + switch (position) { + case TabsetPosition.RIGHT: + rootNode.getChildren().forEach(node => node.setWeight(100 - weight)); + rootNode.addChild(tabset); + break; + case TabsetPosition.LEFT: + rootNode.getChildren().forEach(node => node.setWeight(100 - weight)); + rootNode.addChild(tabset, 0); + break; + case TabsetPosition.BOTTOM: + case TabsetPosition.TOP: { - // switch (position) { - // case TabsetPosition.RIGHT: - // rootNode.getChildren().forEach(node => node.setWeight(100 - weight)); - // rootNode.addChild(tabset); - // break; - // case TabsetPosition.LEFT: - // rootNode.getChildren().forEach(node => node.setWeight(100 - weight)); - // rootNode.addChild(tabset, 0); - // break; - // case TabsetPosition.BOTTOM: - // case TabsetPosition.TOP: { + model.doAction(FlexLayout.Actions.updateNodeAttributes(tabset.getId(), {weight: 80})) - // tabset.setWeight(80); - // const hrow = new FlexLayout.RowNode(model, rootNode.windowId, {}); - // hrow.setWeight(100); + const hrow = new FlexLayout.RowNode(model, rootNode.windowId, {}); + model.doAction(FlexLayout.Actions.updateNodeAttributes(hrow.getId(), {weight: 100})) - // rootNode.getChildren().forEach(child => { - // if (child['getWeight']) { - // const newWeight = (child as FlexLayout.TabSetNode).getWeight() / 2; - // child.setWeight(newWeight); - // hrow.addChild(child); - // } - // }); - // if (position === TabsetPosition.BOTTOM) { - // hrow.addChild(tabset) - // } else { - // hrow.addChild(tabset, 0); - // } + rootNode.getChildren().forEach(child => { + if (child.getWeight) { + const newWeight = (child as FlexLayout.TabSetNode).getWeight() / 2; + child.setWeight(newWeight); + model.doAction(FlexLayout.Actions.moveNode((child as BaseNode).getId(), hrow.getId(), FlexLayout.DockLocation.CENTER, -1)) + } + }); + if (position === TabsetPosition.BOTTOM) { + model.doAction(FlexLayout.Actions.moveNode(tabset.getId(), hrow.getId(), FlexLayout.DockLocation.CENTER, -1)) + } else { + model.doAction(FlexLayout.Actions.moveNode(tabset.getId(), hrow.getId(), FlexLayout.DockLocation.CENTER, 0)) + } - // rootNode._removeAll(); - // rootNode.addChild(hrow, 0); - // } - // } - // return tabset - return undefined + rootNode._removeAll(); + rootNode.addChild(hrow, 0); + } + } + return tabset } export function moveWidget(model, widget) { diff --git a/geppetto.js/geppetto-ui/src/flex-layout/src/model/RowNode.ts b/geppetto.js/geppetto-ui/src/flex-layout/src/model/RowNode.ts index 9e486c915..61d9ceafc 100755 --- a/geppetto.js/geppetto-ui/src/flex-layout/src/model/RowNode.ts +++ b/geppetto.js/geppetto-ui/src/flex-layout/src/model/RowNode.ts @@ -51,7 +51,6 @@ export class RowNode extends Node implements IDropTarget { /** @internal */ private maxWidth: number; - /** @internal */ constructor(model: Model, windowId: string, json: any) { super(model); diff --git a/geppetto.js/geppetto-ui/src/flex-layout/src/model/TabSetNode.ts b/geppetto.js/geppetto-ui/src/flex-layout/src/model/TabSetNode.ts index 1b6744a4e..30b9f547a 100755 --- a/geppetto.js/geppetto-ui/src/flex-layout/src/model/TabSetNode.ts +++ b/geppetto.js/geppetto-ui/src/flex-layout/src/model/TabSetNode.ts @@ -60,7 +60,6 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget { /** @internal */ private calculatedMaxWidth: number; - /** @internal */ constructor(model: Model, json: any) { super(model); this.calculatedMinHeight = 0;