v0.8.1

Author: nealus

ChangeLog.txt

@@ -1,3 +1,8 @@
+0.8.1
+Fixed enableDrag on tab and tabset nodes.
+Fixed calc for min/max tabset height from min/max tab height.
+Modified style sheet code in demo to reduce flash.
+
 0.8.0
 New:
   * Wrap tabs option

examples/demo/App.tsx

@@ -339,27 +339,35 @@ class App extends React.Component<any, { layoutFile: string | null, model: Model
         var target = event.target as HTMLSelectElement;
 
         let flexlayout_stylesheet: any = window.document.getElementById("flexlayout-stylesheet");
+        let page_stylesheet = window.document.getElementById("page-stylesheet");
         let index = flexlayout_stylesheet.href.lastIndexOf("/");
         let newAddress = flexlayout_stylesheet.href.substr(0, index);
-        document.head.removeChild(flexlayout_stylesheet);
-
-        flexlayout_stylesheet = document.createElement("link");
-        flexlayout_stylesheet.setAttribute("id", "flexlayout-stylesheet");
-        flexlayout_stylesheet.setAttribute("rel", "stylesheet");
-        flexlayout_stylesheet.setAttribute("href", newAddress + "/" + target.value + ".css");
-        document.head.appendChild(flexlayout_stylesheet);
-
-        let page_stylesheet = window.document.getElementById("page-stylesheet");
-        document.head.removeChild(page_stylesheet!);
-
-        page_stylesheet!.setAttribute("id", "page-stylesheet");
-        page_stylesheet!.setAttribute("rel", "stylesheet");
-        page_stylesheet!.setAttribute("href", target.value + ".css");
-        document.head.appendChild(page_stylesheet!);
 
-        setTimeout(() => {
+        let s1 = document.createElement("link");
+        s1.setAttribute("id", "flexlayout-stylesheet");
+        s1.setAttribute("rel", "stylesheet");
+        s1.setAttribute("href", newAddress + "/" + target.value + ".css");
+
+        let s2 = document.createElement("link");
+        s2.setAttribute("id", "page-stylesheet");
+        s2.setAttribute("rel", "stylesheet");
+        s2.setAttribute("href", target.value + ".css");
+
+        const promises: Promise<boolean>[] = [];
+        promises.push(new Promise((resolve) => {
+            s1.onload = () => resolve(true);
+        }));
+        promises.push(new Promise((resolve) => {
+            s2.onload = () => resolve(true);
+        }));
+        document.head.appendChild(s1);
+        document.head.appendChild(s2);
+
+        Promise.all(promises).then(() => {
+            document.head.removeChild(flexlayout_stylesheet);
+            document.head.removeChild(page_stylesheet!);
             this.forceUpdate();
-        }, 300);
+        });
     }
 
     onFontSizeChange = (event: React.FormEvent) => {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexlayout-react",
-    "version": "0.8.0",
+    "version": "0.8.1",
     "description": "A multi-tab docking layout manager",
     "main": "lib/index.js",
     "types": "./declarations/index.d.ts",

src/model/TabSetNode.ts

@@ -248,6 +248,9 @@ export class TabSetNode extends Node implements IDraggable, IDropTarget {
             this.calculatedMaxWidth = Math.min(this.calculatedMaxWidth, c.getMaxWidth());
             this.calculatedMaxHeight = Math.min(this.calculatedMaxHeight, c.getMaxHeight());
         }
+
+        this.calculatedMinHeight += this.tabStripRect.height;
+        this.calculatedMaxHeight += this.tabStripRect.height;
     }
 
     /** @internal */

src/view/BorderButton.tsx

@@ -24,8 +24,12 @@ export const BorderButton = (props: IBorderButtonProps) => {
     const contentRef = React.useRef<HTMLInputElement | null>(null);
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
-        event.stopPropagation();
-        layout.setDragNode(event.nativeEvent, node as TabNode);
+        if (node.isEnableDrag()) {
+            event.stopPropagation();
+            layout.setDragNode(event.nativeEvent, node as TabNode);
+        } else {
+            event.preventDefault();
+        }
     };
 
     const onDragEnd = (event: React.DragEvent<HTMLElement>) => {

src/view/Layout.tsx

@@ -1224,6 +1224,8 @@ export class LayoutInternal extends React.Component<ILayoutInternalProps, ILayou
     // *************************** End Drag Drop *************************************
 }
 
+export const FlexLayoutVersion = "0.8.1";
+
 export type DragRectRenderCallback = (
     content: React.ReactNode | undefined,
     node?: Node,

src/view/TabButton.tsx

@@ -31,8 +31,12 @@ export const TabButton = (props: ITabButtonProps) => {
     });
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
-        event.stopPropagation(); // prevent starting a tabset drag as well
-        layout.setDragNode(event.nativeEvent, node as TabNode);
+        if (node.isEnableDrag()) {
+            event.stopPropagation(); // prevent starting a tabset drag as well
+            layout.setDragNode(event.nativeEvent, node as TabNode);
+        } else {
+            event.preventDefault();
+        }
     };
 
     const onDragEnd = (event: React.DragEvent<HTMLElement>) => {

src/view/TabSet.tsx

@@ -73,8 +73,12 @@ export const TabSet = (props: ITabSetProps) => {
 
     const onDragStart = (event: React.DragEvent<HTMLElement>) => {
         if (!layout.getEditingTab()) {
-            event.stopPropagation();
-            layout.setDragNode(event.nativeEvent, node as TabSetNode);
+            if (node.isEnableDrag()) {
+                event.stopPropagation();
+                layout.setDragNode(event.nativeEvent, node as TabSetNode);
+            } else {
+                event.preventDefault();
+            }
         } else {
             event.preventDefault();
         }