@aptre/flex-layout 0.5.8 → 0.5.10

package/dist/index.mjs

@@ -5934,7 +5934,7 @@ var DragState = class {
 
 // src/view/OptimizedLayout.tsx
 import * as React20 from "react";
-import { memo as memo2, useCallback, useEffect as useEffect6, useMemo, useState as useState4 } from "react";
+import { memo as memo2, useCallback, useEffect as useEffect6, useLayoutEffect as useLayoutEffect9, useMemo, useRef as useRef12, useState as useState4 } from "react";
 function createTabInfo(node) {
   const parent = node.getParent();
   const contentRect = parent?.getContentRect() ?? Rect.empty();
@@ -5988,16 +5988,32 @@ var TabPanel = memo2(function TabPanel2({
   contentClassName,
   className,
   renderTab,
-  onPointerDown,
+  model,
   isMaximized,
   hasMaximizedTabset
 }) {
+  const selfRef = useRef12(null);
   const hasValidDimensions = rect.width > 0 && rect.height > 0;
   const content = useMemo(() => renderTab(node), [renderTab, node]);
-  let isHidden = !visible;
+  useLayoutEffect9(() => {
+    const element = selfRef.current;
+    if (!element) return;
+    const onPointerDown = () => {
+      const parent = node.getParent();
+      if (parent instanceof TabSetNode) {
+        model.doAction(Actions.setActiveTabset(parent.getId(), Model.MAIN_WINDOW_ID));
+      }
+    };
+    element.addEventListener("pointerdown", onPointerDown, true);
+    return () => {
+      element.removeEventListener("pointerdown", onPointerDown, true);
+    };
+  }, [node, model, nodeId]);
+  const isSelected = visible || node.isSelected();
+  let isHidden = !isSelected;
   let zIndex;
   if (hasMaximizedTabset) {
-    if (isMaximized && visible) {
+    if (isMaximized && isSelected) {
       zIndex = 11;
       isHidden = false;
     } else {
@@ -6007,6 +6023,7 @@ var TabPanel = memo2(function TabPanel2({
   return /* @__PURE__ */ React20.createElement(
     "div",
     {
+      ref: selfRef,
       role: "tabpanel",
       "data-tab-id": nodeId,
       className: className + (contentClassName ? " " + contentClassName : ""),
@@ -6021,8 +6038,7 @@ var TabPanel = memo2(function TabPanel2({
         zIndex,
         // Tab panels receive pointer events when visible and not dragging
         pointerEvents: !isHidden && !isDragging ? "auto" : "none"
-      },
-      onPointerDown
+      }
     },
     content
   );
@@ -6032,23 +6048,15 @@ function TabContainer({
   renderTab,
   isDragging,
   classNameMapper,
-  model
+  model,
+  maximizedTabsetId
 }) {
+  void maximizedTabsetId;
   const className = classNameMapper ? classNameMapper("flexlayout__tab") : "flexlayout__tab";
   const maximizedTabset = model.getMaximizedTabset(Model.MAIN_WINDOW_ID);
   const hasMaximizedTabset = maximizedTabset !== void 0;
-  const handlePointerDown = useCallback(
-    (node) => {
-      const parent = node.getParent();
-      if (parent instanceof TabSetNode) {
-        if (!parent.isActive()) {
-          model.doAction(Actions.setActiveTabset(parent.getId(), Model.MAIN_WINDOW_ID));
-        }
-      }
-    },
-    [model]
-  );
-  return /* @__PURE__ */ React20.createElement("div", { className: "flexlayout__optimized_layout_tab_container", "data-layout-path": "/tab-container" }, Array.from(tabs.entries()).map(([nodeId, tabInfo]) => {
+  const containerStyle = hasMaximizedTabset ? { zIndex: 10 } : {};
+  return /* @__PURE__ */ React20.createElement("div", { className: "flexlayout__optimized_layout_tab_container", "data-layout-path": "/tab-container", style: containerStyle }, Array.from(tabs.entries()).map(([nodeId, tabInfo]) => {
     const parent = tabInfo.node.getParent();
     const isMaximized = parent instanceof TabSetNode && parent.isMaximized();
     return /* @__PURE__ */ React20.createElement(
@@ -6063,7 +6071,7 @@ function TabContainer({
         contentClassName: tabInfo.node.getContentClassName(),
         className,
         renderTab,
-        onPointerDown: () => handlePointerDown(tabInfo.node),
+        model,
         isMaximized,
         hasMaximizedTabset
       }
@@ -6073,6 +6081,7 @@ function TabContainer({
 function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, onModelChange: userOnModelChange, ...layoutProps }) {
   const [isDragging, setIsDragging] = useState4(false);
   const [tabs, setTabs] = useState4(() => /* @__PURE__ */ new Map());
+  const [maximizedTabsetId, setMaximizedTabsetId] = useState4(() => model.getMaximizedTabset(Model.MAIN_WINDOW_ID)?.getId());
   const syncTabsWithModel = useCallback(
     (prevTabs) => {
       const modelTabNodes = /* @__PURE__ */ new Map();
@@ -6148,6 +6157,8 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
   );
   const handleModelChange = useCallback(
     (changedModel, action) => {
+      const newMaximizedId = changedModel.getMaximizedTabset(Model.MAIN_WINDOW_ID)?.getId();
+      setMaximizedTabsetId(newMaximizedId);
       setTabs((prevTabs) => {
         const synced = syncTabsWithModel(prevTabs);
         let hasVisibilityChange = false;
@@ -6173,7 +6184,7 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
     },
     [handleTabMount, handleRectChange, handleVisibilityChange]
   );
-  return /* @__PURE__ */ React20.createElement("div", { className: "flexlayout__optimized_layout" }, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs, renderTab, isDragging, classNameMapper, model }));
+  return /* @__PURE__ */ React20.createElement("div", { className: "flexlayout__optimized_layout" }, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs, renderTab, isDragging, classNameMapper, model, maximizedTabsetId }));
 }
 
 // src/model/walk.ts

package/package.json

@@ -2,7 +2,7 @@
   "name": "@aptre/flex-layout",
   "author": "Caplin Systems Ltd",
   "description": "A multi-tab docking layout manager",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -78,7 +78,7 @@
     "release:minor": "npm run release:version:minor && npm run release:commit",
     "release:version": "npm version patch -m \"release: v%s\" --no-git-tag-version",
     "release:version:minor": "npm version minor -m \"release: v%s\" --no-git-tag-version",
-    "release:commit": "git reset && git add package.json && git commit -s -m \"release: v$npm_package_version\" && git tag v$npm_package_version",
+    "release:commit": "git reset && git add package.json && git commit -s -m \"release: v$(node -p \"require('./package.json').version\")\" && git tag v$(node -p \"require('./package.json').version\")",
     "release:publish": "git push && git push --tags && npm run build && npm publish"
   },
   "peerDependencies": {