flexlayout-react 0.7.15 → 0.8.0

package/src/Types.ts

@@ -2,6 +2,7 @@ export enum CLASSES {
     FLEXLAYOUT__BORDER = "flexlayout__border",
     FLEXLAYOUT__BORDER_ = "flexlayout__border_",
 
+    FLEXLAYOUT__BORDER_TAB_CONTENTS = "flexlayout__border_tab_contents",
     FLEXLAYOUT__BORDER_BUTTON = "flexlayout__border_button",
     FLEXLAYOUT__BORDER_BUTTON_ = "flexlayout__border_button_",
     FLEXLAYOUT__BORDER_BUTTON_CONTENT = "flexlayout__border_button_content",
@@ -40,6 +41,12 @@ export enum CLASSES {
     FLEXLAYOUT__FLOATING_WINDOW_TAB = "flexlayout__floating_window_tab",
 
     FLEXLAYOUT__LAYOUT = "flexlayout__layout",
+    FLEXLAYOUT__LAYOUT_MOVEABLES = "flexlayout__layout_moveables",
+    FLEXLAYOUT__LAYOUT_OVERLAY = "flexlayout__layout_overlay",
+    FLEXLAYOUT__LAYOUT_TAB_STAMPS = "flexlayout__layout_tab_stamps",
+    FLEXLAYOUT__LAYOUT_MAIN = "flexlayout__layout_main",
+    FLEXLAYOUT__LAYOUT_BORDER_CONTAINER = "flexlayout__layout_border_container",
+    FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER = "flexlayout__layout_border_container_inner",
 
     FLEXLAYOUT__OUTLINE_RECT = "flexlayout__outline_rect",
     FLEXLAYOUT__OUTLINE_RECT_EDGE = "flexlayout__outline_rect_edge",
@@ -49,10 +56,18 @@ export enum CLASSES {
     FLEXLAYOUT__SPLITTER_ = "flexlayout__splitter_",
     FLEXLAYOUT__SPLITTER_BORDER = "flexlayout__splitter_border",
     FLEXLAYOUT__SPLITTER_DRAG = "flexlayout__splitter_drag",
+    FLEXLAYOUT__SPLITTER_HANDLE = "flexlayout__splitter_handle",
+    FLEXLAYOUT__SPLITTER_HANDLE_HORZ = "flexlayout__splitter_handle_horz",
+    FLEXLAYOUT__SPLITTER_HANDLE_VERT = "flexlayout__splitter_handle_vert",
 
+    FLEXLAYOUT__ROW = "flexlayout__row",
     FLEXLAYOUT__TAB = "flexlayout__tab",
+    FLEXLAYOUT__TAB_POSITION = "flexlayout__tab_position",
+    FLEXLAYOUT__TAB_MOVEABLE = "flexlayout__tab_moveable",
+    FLEXLAYOUT__TAB_OVERLAY = "flexlayout__tab_overlay",
 
     FLEXLAYOUT__TABSET = "flexlayout__tabset",
+    FLEXLAYOUT__TABSET_CONTAINER = "flexlayout__tabset_container",
     FLEXLAYOUT__TABSET_HEADER = "flexlayout__tabset_header",
     FLEXLAYOUT__TABSET_HEADER_SIZER = "flexlayout__tabset_header_sizer",
     FLEXLAYOUT__TABSET_HEADER_CONTENT = "flexlayout__tabset_header_content",
@@ -87,6 +102,7 @@ export enum CLASSES {
 
     FLEXLAYOUT__TAB_TOOLBAR = "flexlayout__tab_toolbar",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON = "flexlayout__tab_toolbar_button",
+    FLEXLAYOUT__TAB_TOOLBAR_ICON = "flexlayout__tab_toolbar_icon",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ = "flexlayout__tab_toolbar_button-",
     FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT = "flexlayout__tab_toolbar_button-float",
     FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER = "flexlayout__tab_toolbar_sticky_buttons_container",

package/src/index.ts

@@ -11,12 +11,11 @@ export * from './model/IJsonModel';
 export * from './model/Model';
 export * from './model/Node';
 export * from './model/RowNode';
-export * from './model/SplitterNode';
 export * from './model/TabNode';
 export * from './model/TabSetNode';
+export * from './model/LayoutWindow';
 
 export * from './DockLocation';
-export * from './DragDrop';
 export * from './DropInfo';
 export * from './I18nLabel';
 export * from './Orientation';

package/src/model/Actions.ts

@@ -1,5 +1,6 @@
 import { DockLocation } from "../DockLocation";
 import { Action } from "./Action";
+import { IJsonRect, IJsonRowNode } from "./IJsonModel";
 
 /**
  * The Action creator class for FlexLayout model actions
@@ -12,13 +13,15 @@ export class Actions {
     static RENAME_TAB = "FlexLayout_RenameTab";
     static SELECT_TAB = "FlexLayout_SelectTab";
     static SET_ACTIVE_TABSET = "FlexLayout_SetActiveTabset";
-    static ADJUST_SPLIT = "FlexLayout_AdjustSplit";
+    static ADJUST_WEIGHTS = "FlexLayout_AdjustWeights";
     static ADJUST_BORDER_SPLIT = "FlexLayout_AdjustBorderSplit";
     static MAXIMIZE_TOGGLE = "FlexLayout_MaximizeToggle";
     static UPDATE_MODEL_ATTRIBUTES = "FlexLayout_UpdateModelAttributes";
     static UPDATE_NODE_ATTRIBUTES = "FlexLayout_UpdateNodeAttributes";
-    static FLOAT_TAB = "FlexLayout_FloatTab";
-    static UNFLOAT_TAB = "FlexLayout_UnFloatTab";
+    static POPOUT_TAB = "FlexLayout_PopoutTab";
+    static POPOUT_TABSET = "FlexLayout_PopoutTabset";
+    static CLOSE_WINDOW = "FlexLayout_CloseWindow";
+    static CREATE_WINDOW = "FlexLayout_CreateWindow";
 
     /**
      * Adds a tab node to the given tabset node
@@ -60,7 +63,7 @@ export class Actions {
 
     /**
      * Deletes a tab node from the layout
-     * @param tabsetNodeId the id of the tab node to delete
+     * @param tabNodeId the id of the tab node to delete
      * @returns {Action} the action
      */
     static deleteTab(tabNodeId: string): Action {
@@ -100,30 +103,18 @@ export class Actions {
      * @param tabsetNodeId the id of the tabset node to set as active
      * @returns {Action} the action
      */
-    static setActiveTabset(tabsetNodeId: string | undefined): Action {
-        return new Action(Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId });
+    static setActiveTabset(tabsetNodeId: string | undefined, windowId?: string | undefined): Action {
+        return new Action(Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId, windowId: windowId });
     }
 
     /**
-     * Adjust the splitter between two tabsets
-     * @example
-     *  Actions.adjustSplit({node1: "1", weight1:30, pixelWidth1:300, node2: "2", weight2:70, pixelWidth2:700});
-     *
-     * @param splitSpec an object the defines the new split between two tabsets, see example below.
+     * Adjust the weights of a row, used when the splitter is moved
+     * @param nodeId the row node whose childrens weights are being adjusted
+     * @param weights an array of weights to be applied to the children 
      * @returns {Action} the action
      */
-    static adjustSplit(splitSpec: { node1Id: string; weight1: number; pixelWidth1: number; node2Id: string; weight2: number; pixelWidth2: number }): Action {
-        const node1 = splitSpec.node1Id;
-        const node2 = splitSpec.node2Id;
-
-        return new Action(Actions.ADJUST_SPLIT, {
-            node1,
-            weight1: splitSpec.weight1,
-            pixelWidth1: splitSpec.pixelWidth1,
-            node2,
-            weight2: splitSpec.weight2,
-            pixelWidth2: splitSpec.pixelWidth2,
-        });
+    static adjustWeights(nodeId: string, weights: number[]): Action {
+        return new Action(Actions.ADJUST_WEIGHTS, {nodeId, weights});
     }
 
     static adjustBorderSplit(nodeId: string, pos: number): Action {
@@ -135,8 +126,8 @@ export class Actions {
      * @param tabsetNodeId the id of the tabset to maximize
      * @returns {Action} the action
      */
-    static maximizeToggle(tabsetNodeId: string): Action {
-        return new Action(Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId });
+    static maximizeToggle(tabsetNodeId: string, windowId?: string | undefined): Action {
+        return new Action(Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId, windowId: windowId });
     }
 
     /**
@@ -158,11 +149,40 @@ export class Actions {
         return new Action(Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
     }
 
-    static floatTab(nodeId: string): Action {
-        return new Action(Actions.FLOAT_TAB, { node: nodeId });
+    /**
+     * Pops out the given tab node into a new browser window
+     * @param nodeId the tab node to popout
+     * @returns 
+     */
+    static popoutTab(nodeId: string): Action {
+        return new Action(Actions.POPOUT_TAB, { node: nodeId });
+    }
+
+    /**
+     * Pops out the given tab set node into a new browser window
+     * @param nodeId the tab set node to popout
+     * @returns 
+     */
+    static popoutTabset(nodeId: string): Action {
+        return new Action(Actions.POPOUT_TABSET, { node: nodeId });
     }
 
-    static unFloatTab(nodeId: string): Action {
-        return new Action(Actions.UNFLOAT_TAB, { node: nodeId });
+    /**
+     * Closes the popout window
+     * @param windowId the id of the popout window to close
+     * @returns 
+     */
+    static closeWindow(windowId: string): Action {
+        return new Action(Actions.CLOSE_WINDOW, { windowId });
+    }
+
+    /**
+     * Creates a new empty popout window with the given layout
+     * @param layout the json layout for the new window
+     * @param rect the window rectangle in screen coordinates
+     * @returns 
+     */
+    static createWindow(layout: IJsonRowNode, rect: IJsonRect): Action {
+        return new Action(Actions.CREATE_WINDOW, { layout, rect});
     }
 }