flexlayout-react 0.8.13 → 0.8.15

package/README.md

@@ -55,16 +55,17 @@ import {Layout, Model} from 'flexlayout-react';
 
 Include the light, dark, underline, gray, rounded or combined theme by either:
 
-Adding an additional import:
+Adding an import in your js code:
 
 ```
 import 'flexlayout-react/style/light.css';  
 ```
 
-or by adding the css to your html:
+or by copying the relevant css from the node_modules/flexlayout-react/style directory to your 
+ public assets folder (e.g. public/style) and linking the css in your html:
 
 ```
-<link rel="stylesheet" href="node_modules/flexlayout-react/style/light.css" />
+<link rel="stylesheet" href="/style/light.css" />
 ```
 
 [How to change the theme dynamically in code](#dynamically-changing-the-theme)
@@ -94,7 +95,7 @@ The model can be created using the Model.fromJson(jsonObject) static method, and
 ## Example Configuration:
 
 ```javascript
-var json = {
+const json = {
     global: {},
     borders: [],
     layout: {
@@ -136,7 +137,7 @@ const model = Model.fromJson(json);
 function App() {
 
   const factory = (node) => {
-    var component = node.getComponent();
+    const component = node.getComponent();
 
     if (component === "placeholder") {
       return <div>{node.getName()}</div>;
@@ -265,6 +266,8 @@ You can use the `<Layout>` prop onRenderTabSet to customize the tabset rendering
 
 Update the renderValues parameter as needed:
 
+renderValues.leading : the blue block
+
 renderValues.stickyButtons : the red block
 
 renderValues.buttons : the green block
@@ -419,7 +422,7 @@ an additional icon is shown in the tab header bar allowing the tab to be popped
 into an external window.
 
 For popouts to work there needs to be an additional html page 'popout.html' hosted
-at the same location as the main page (copy the one from examples/demo). The popout.html is the host page for the
+at the same location as the main page (copy the one from the demo app). The popout.html is the host page for the
 popped out tab, the styles from the main page will be copied into it at runtime.
 
 Because popouts are rendering into a different document to the main layout any code in the popped out
@@ -457,7 +460,7 @@ enableWindowReMount tab attribute to force the component to re-mount.
 
 See this article about using React portals in this way: https://dev.to/noriste/the-challenges-of-rendering-an-openlayers-map-in-a-popup-through-react-2elh
 
-## Running the Examples and Building the Project
+## Running the Demo and Building the Project
 
 First install dependencies:
 
@@ -465,15 +468,13 @@ First install dependencies:
 pnpm install
 ```
 
-Compile the project and run the examples:
+Run the Demo app:
 
 ```
 pnpm dev
 ```
 
-Open your browser at the address shown to see the Demo app.
-
-The 'pnpm dev' command will watch for changes to flexlayout and the Demo, so you can make changes to the code and then refresh the browser to see the result.
+The 'pnpm dev' command will watch for changes to FlexLayout and the Demo, so you can make changes to the FlexLayout code and see the changes in your browser.
 
 Once the demo is running you can run the Playwright tests by running (in another terminal window)
 

package/{lib → dist}/index.js

@@ -1,3 +1,7 @@
+/**
+ * flexlayout-react
+ * @version 0.8.15
+ */
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -278,6 +282,7 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
   CLASSES2["FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER"] = "flexlayout__border_inner_tab_container";
   CLASSES2["FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_"] = "flexlayout__border_inner_tab_container_";
   CLASSES2["FLEXLAYOUT__BORDER_TAB_DIVIDER"] = "flexlayout__border_tab_divider";
+  CLASSES2["FLEXLAYOUT__BORDER_LEADING"] = "flexlayout__border_leading";
   CLASSES2["FLEXLAYOUT__BORDER_SIZER"] = "flexlayout__border_sizer";
   CLASSES2["FLEXLAYOUT__BORDER_TOOLBAR"] = "flexlayout__border_toolbar";
   CLASSES2["FLEXLAYOUT__BORDER_TOOLBAR_"] = "flexlayout__border_toolbar_";
@@ -324,6 +329,7 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
   CLASSES2["FLEXLAYOUT__TABSET_CONTENT"] = "flexlayout__tabset_content";
   CLASSES2["FLEXLAYOUT__TABSET_TABBAR_INNER"] = "flexlayout__tabset_tabbar_inner";
   CLASSES2["FLEXLAYOUT__TABSET_TABBAR_INNER_"] = "flexlayout__tabset_tabbar_inner_";
+  CLASSES2["FLEXLAYOUT__TABSET_LEADING"] = "flexlayout__tabset_leading";
   CLASSES2["FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER"] = "flexlayout__tabset_tabbar_inner_tab_container";
   CLASSES2["FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_"] = "flexlayout__tabset_tabbar_inner_tab_container_";
   CLASSES2["FLEXLAYOUT__TABSET_TABBAR_OUTER"] = "flexlayout__tabset_tabbar_outer";
@@ -887,11 +893,7 @@ class Node {
     for (const node of this.children) {
       let newPath = path;
       if (node.getType() === "row") {
-        if (node.getOrientation() === Orientation.VERT) {
-          newPath += "/c" + i;
-        } else {
-          newPath += "/r" + i;
-        }
+        newPath += "/r" + i;
       } else if (node.getType() === "tabset") {
         newPath += "/ts" + i;
       } else if (node.getType() === "tab") {
@@ -2644,7 +2646,7 @@ const _Model = class _Model {
       case Actions.CLOSE_WINDOW: {
         const window2 = this.windows.get(action.data.windowId);
         if (window2) {
-          (_a = this.rootWindow.root) == null ? void 0 : _a.drop(window2 == null ? void 0 : window2.root, DockLocation.CENTER, -1);
+          (_a = this.rootWindow.root) == null ? void 0 : _a.drop(window2.root, DockLocation.CENTER, -1);
           this.rootWindow.visitNodes((node, level) => {
             if (node instanceof RowNode) {
               node.setWindowId(_Model.MAIN_WINDOW_ID);
@@ -4346,10 +4348,13 @@ const BorderTabSet = (props) => {
   if (border.getClassName() !== void 0) {
     borderClasses += " " + border.getClassName();
   }
+  let leading = void 0;
   let buttons = [];
-  const stickyButtons = [];
-  const renderState = { buttons, stickyButtons, overflowPosition: void 0 };
+  let stickyButtons = [];
+  const renderState = { leading, buttons, stickyButtons, overflowPosition: void 0 };
   layout.customizeTabSet(border, renderState);
+  leading = renderState.leading;
+  stickyButtons = renderState.stickyButtons;
   buttons = renderState.buttons;
   if (renderState.overflowPosition === void 0) {
     renderState.overflowPosition = stickyButtons.length;
@@ -4449,6 +4454,10 @@ const BorderTabSet = (props) => {
       }
     );
   }
+  let leadingContainer = void 0;
+  if (leading) {
+    leadingContainer = /* @__PURE__ */ jsx("div", { className: cm(CLASSES.FLEXLAYOUT__BORDER_LEADING), children: leading });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4464,6 +4473,7 @@ const BorderTabSet = (props) => {
       onContextMenu,
       onWheel: onMouseWheel,
       children: [
+        leadingContainer,
         /* @__PURE__ */ jsxs("div", { className: cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER), children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -4506,31 +4516,6 @@ const DragContainer = (props) => {
     }
   );
 };
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    __publicField(this, "retry", () => {
-      this.setState({ hasError: false });
-    });
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.debug(error);
-    console.debug(errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsx("div", { className: CLASSES.FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER, children: /* @__PURE__ */ jsx("div", { className: CLASSES.FLEXLAYOUT__ERROR_BOUNDARY_CONTENT, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
-        this.props.message,
-        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("button", { onClick: this.retry, children: this.props.retryText }) })
-      ] }) }) });
-    }
-    return this.props.children;
-  }
-}
 const PopoutWindow = (props) => {
   const { title, layout, layoutWindow, url, onCloseWindow, onSetWindow, children } = props;
   const popoutWindow = React.useRef(null);
@@ -4696,6 +4681,15 @@ const AddIcon = () => {
     /* @__PURE__ */ jsx("path", { stroke: "var(--color-icon)", d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })
   ] });
 };
+const MenuIcon = () => {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style, height: "24px", width: "24px", viewBox: "0 -960 960 960", fill: "var(--color-icon)", children: /* @__PURE__ */ jsx("path", { d: "M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" }) });
+};
+const SettingsIcon = (props) => {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, style, viewBox: "0 0 24 24", fill: "var(--color-icon)", children: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("path", { d: "M0,0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" })
+  ] }) });
+};
 const Overlay = (props) => {
   const { layout, show } = props;
   return /* @__PURE__ */ jsx(
@@ -5005,10 +4999,12 @@ const TabSet = (props) => {
       }
     }
   }
+  let leading = void 0;
   let stickyButtons = [];
   let buttons = [];
-  const renderState = { stickyButtons, buttons, overflowPosition: void 0 };
+  const renderState = { leading, stickyButtons, buttons, overflowPosition: void 0 };
   layout.customizeTabSet(node, renderState);
+  leading = renderState.leading;
   stickyButtons = renderState.stickyButtons;
   buttons = renderState.buttons;
   const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;
@@ -5167,6 +5163,10 @@ const TabSet = (props) => {
       tabStripClasses += " " + tabNode.getTabSetClassName();
     }
   }
+  let leadingContainer = void 0;
+  if (leading) {
+    leadingContainer = /* @__PURE__ */ jsx("div", { className: cm(CLASSES.FLEXLAYOUT__TABSET_LEADING), children: leading });
+  }
   if (node.isEnableTabWrap()) {
     if (node.isEnableTabStrip()) {
       tabStrip = /* @__PURE__ */ jsxs(
@@ -5184,6 +5184,7 @@ const TabSet = (props) => {
           draggable: true,
           onDragStart,
           children: [
+            leadingContainer,
             tabs,
             /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
             buttonbar
@@ -5219,6 +5220,7 @@ const TabSet = (props) => {
           onWheel: onMouseWheel,
           onDragStart,
           children: [
+            leadingContainer,
             /* @__PURE__ */ jsxs("div", { className: cm(CLASSES.FLEXLAYOUT__MINI_SCROLLBAR_CONTAINER), children: [
               /* @__PURE__ */ jsx(
                 "div",
@@ -5443,11 +5445,45 @@ const Tab = (props) => {
     )
   ] });
 };
-const SizeTracker = React.memo(({ children }) => {
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}, (prevProps, nextProps) => {
-  return prevProps.rect.equalSize(nextProps.rect) && prevProps.selected === nextProps.selected && prevProps.forceRevision === nextProps.forceRevision && prevProps.tabsRevision === nextProps.tabsRevision;
-});
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "retry", () => {
+      this.setState({ hasError: false });
+    });
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.debug(error);
+    console.debug(errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx("div", { className: CLASSES.FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER, children: /* @__PURE__ */ jsx("div", { className: CLASSES.FLEXLAYOUT__ERROR_BOUNDARY_CONTENT, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+        this.props.message,
+        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("button", { onClick: this.retry, children: this.props.retryText }) })
+      ] }) }) });
+    }
+    return this.props.children;
+  }
+}
+const SizeTracker = React.memo(({ layout, node }) => {
+  return /* @__PURE__ */ jsx(
+    ErrorBoundary,
+    {
+      message: layout.i18nName(I18nLabel.Error_rendering_component),
+      retryText: layout.i18nName(I18nLabel.Error_rendering_component_retry),
+      children: layout.props.factory(node)
+    }
+  );
+}, arePropsEqual);
+function arePropsEqual(prevProps, nextProps) {
+  const reRender = nextProps.visible && (!prevProps.rect.equalSize(nextProps.rect) || prevProps.forceRevision !== nextProps.forceRevision || prevProps.tabsRevision !== nextProps.tabsRevision);
+  return !reRender;
+}
 class Layout extends React.Component {
   // so LayoutInternal knows this is a parent render (used for optimization)
   /** @internal */
@@ -5658,7 +5694,6 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
       }
     });
     __publicField(this, "onDragEnter", (event) => {
-      var _a;
       if (!_LayoutInternal.dragState && this.props.onExternalDrag) {
         const externalDrag = this.props.onExternalDrag(event);
         if (externalDrag) {
@@ -5687,7 +5722,7 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
         if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === void 0) {
           this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
         }
-        const clientRect = (_a = this.selfRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        const clientRect = this.selfRef.current.getBoundingClientRect();
         const r = new Rect(
           event.clientX - clientRect.left,
           event.clientY - clientRect.top,
@@ -5836,6 +5871,9 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
     if (this.selfRef.current) {
       (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.selfRef.current);
     }
+    if (this.isMainWindow) {
+      this.props.model.removeChangeListener(this.onModelChange);
+    }
     (_b = this.styleObserver) == null ? void 0 : _b.disconnect();
   }
   render() {
@@ -6007,18 +6045,23 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
         child.setMoveableElement(element);
         const selected = child.isSelected();
         const rect = child.getParent().getContentRect();
-        const renderTab = child.isRendered() || (selected || !child.isEnableRenderOnDemand()) && (rect.width > 0 && rect.height > 0);
+        const visible = selected || !child.isEnableRenderOnDemand();
+        const renderTab = child.isRendered() || visible && (rect.width > 0 && rect.height > 0);
         if (renderTab) {
           const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : "");
           tabMoveables.set(node.getId(), createPortal(
-            /* @__PURE__ */ jsx(SizeTracker, { rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, children: /* @__PURE__ */ jsx(
-              ErrorBoundary,
+            /* @__PURE__ */ jsx(
+              SizeTracker,
               {
-                message: this.i18nName(I18nLabel.Error_rendering_component),
-                retryText: this.i18nName(I18nLabel.Error_rendering_component_retry),
-                children: this.props.factory(child)
-              }
-            ) }, key),
+                layout: this,
+                node: child,
+                rect,
+                visible,
+                forceRevision: this.state.forceRevision,
+                tabsRevision: this.props.renderRevision
+              },
+              key
+            ),
             element,
             key
           ));
@@ -6047,20 +6090,16 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
         const path = child.getPath();
         const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();
         if (renderTab) {
-          tabs.set(
-            child.getId(),
-            // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>
-            /* @__PURE__ */ jsx(
-              Tab,
-              {
-                layout: this,
-                path,
-                node: child,
-                selected
-              },
-              child.getId()
-            )
-          );
+          tabs.set(child.getId(), /* @__PURE__ */ jsx(
+            Tab,
+            {
+              layout: this,
+              path,
+              node: child,
+              selected
+            },
+            child.getId()
+          ));
         }
       }
     });
@@ -6348,7 +6387,7 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
 };
 __publicField(_LayoutInternal, "dragState");
 let LayoutInternal = _LayoutInternal;
-const FlexLayoutVersion = "0.8.13";
+const FlexLayoutVersion = "0.8.15";
 const defaultIcons = {
   close: /* @__PURE__ */ jsx(CloseIcon, {}),
   closeTabset: /* @__PURE__ */ jsx(CloseIcon, {}),
@@ -6397,6 +6436,7 @@ export {
   LayoutInternal,
   LayoutWindow,
   MaximizeIcon,
+  MenuIcon,
   Model,
   Node,
   Orientation,
@@ -6405,6 +6445,7 @@ export {
   Rect,
   RestoreIcon,
   RowNode,
+  SettingsIcon,
   TabNode,
   TabSetNode
 };

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "flexlayout-react",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "description": "A multi-tab docking layout manager",
   "author": "Caplin Systems Ltd",
   "repository": "https://github.com/caplin/FlexLayout",
   "license": "ISC",
   "type":"module",
-  "main": "./lib/index.js",
-  "module": "./lib/index.js",
-  "types": "./declarations/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.js"
+      "import": "./dist/index.js",
+      "types": "./types/index.d.ts"
     },
     "./style/*": "./style/*"
   },
   "files": [
-    "declarations/",
-    "lib/",
+    "dist/",
+    "types/",
     "style/"
   ],
   "keywords": [
@@ -42,16 +43,16 @@
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
-    "build": "npm run build:clean && npm run css && npm run doc && npm run build:demo && npm run build:types && npm run build:libs",
-    "build:clean": "rimraf lib/ declarations/ typedoc/",
+    "build": "npm run build:clean && npm run build:demo && npm run css && npm run build:lib && npm run build:types && npm run doc",
+    "build:clean": "rimraf demo/dist dist/ types/ typedoc/",
     "build:demo": "vite build",
     "build:types": "tsc -p tsconfig-types.json",
-    "build:libs": "vite build --config vite.config.lib.ts",
+    "build:lib": "vite build --config vite.config.lib.ts",
     "test": "vitest",
     "playwright": "playwright test --ui",
     "lint": "eslint src/*",
     "doc": "typedoc --out typedoc --exclude \"**/demo/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
-    "css": "sass style/rounded.scss  style/rounded.css && sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/dark.scss style/dark.css  && sass style/combined.scss style/combined.css"
+    "css": "sass style:style"
   },
   "eslintConfig": {
     "extends": "react-app"

package/style/_base.scss

@@ -195,6 +195,10 @@
                 position: relative;
             }
 
+            &_leading {
+                display:flex;
+            }
+
             &_header {
                 // tabset header bar
                 display: flex;
@@ -478,6 +482,10 @@
                 overflow: hidden;
                 background-color: var(--color-border-tab-content);
             }
+            
+            &_leading {
+                display:flex;
+            }
 
             &_top {
                 border-bottom: 1px solid var(--color-border-divider-line);