flexlayout-react 0.7.15 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChangeLog.txt +23 -0
- package/README.md +157 -330
- package/Screenshot_light.png +0 -0
- package/Screenshot_rounded.png +0 -0
- package/declarations/Attribute.d.ts +1 -1
- package/declarations/AttributeDefinitions.d.ts +1 -1
- package/declarations/DockLocation.d.ts +12 -12
- package/declarations/DropInfo.d.ts +12 -12
- package/declarations/I18nLabel.d.ts +12 -14
- package/declarations/Orientation.d.ts +7 -7
- package/declarations/PopupMenu.d.ts +1 -1
- package/declarations/Rect.d.ts +41 -28
- package/declarations/Types.d.ts +95 -79
- package/declarations/examples/demo/Utils.d.ts +4 -0
- package/declarations/index.d.ts +21 -22
- package/declarations/model/Action.d.ts +5 -5
- package/declarations/model/Actions.d.ts +127 -110
- package/declarations/model/BorderNode.d.ts +30 -34
- package/declarations/model/BorderSet.d.ts +3 -4
- package/declarations/model/ICloseType.d.ts +5 -5
- package/declarations/model/IDraggable.d.ts +2 -2
- package/declarations/model/IDropTarget.d.ts +2 -2
- package/declarations/model/IJsonModel.d.ts +811 -149
- package/declarations/model/LayoutWindow.d.ts +28 -0
- package/declarations/model/Model.d.ts +91 -86
- package/declarations/model/Node.d.ts +17 -17
- package/declarations/model/RowNode.d.ts +10 -11
- package/declarations/model/TabNode.d.ts +44 -37
- package/declarations/model/TabSetNode.d.ts +44 -41
- package/declarations/model/Utils.d.ts +1 -1
- package/declarations/model/WindowLayout.d.ts +24 -0
- package/declarations/src/Attribute.d.ts +1 -0
- package/declarations/src/AttributeDefinitions.d.ts +1 -0
- package/declarations/src/DockLocation.d.ts +12 -0
- package/declarations/src/DropInfo.d.ts +12 -0
- package/declarations/src/I18nLabel.d.ts +10 -0
- package/declarations/src/Orientation.d.ts +7 -0
- package/declarations/src/PopupMenu.d.ts +1 -0
- package/declarations/src/Rect.d.ts +31 -0
- package/declarations/src/Types.d.ts +92 -0
- package/declarations/src/index.d.ts +20 -0
- package/declarations/src/model/Action.d.ts +5 -0
- package/declarations/src/model/Actions.d.ts +110 -0
- package/declarations/src/model/BorderNode.d.ts +28 -0
- package/declarations/src/model/BorderSet.d.ts +3 -0
- package/declarations/src/model/ICloseType.d.ts +5 -0
- package/declarations/src/model/IDraggable.d.ts +2 -0
- package/declarations/src/model/IDropTarget.d.ts +2 -0
- package/declarations/src/model/IJsonModel.d.ts +153 -0
- package/declarations/src/model/Model.d.ts +98 -0
- package/declarations/src/model/Node.d.ts +16 -0
- package/declarations/src/model/RowNode.d.ts +11 -0
- package/declarations/src/model/TabNode.d.ts +36 -0
- package/declarations/src/model/TabSetNode.d.ts +37 -0
- package/declarations/src/model/Utils.d.ts +1 -0
- package/declarations/src/view/BorderButton.d.ts +1 -0
- package/declarations/src/view/BorderTab.d.ts +2 -0
- package/declarations/src/view/BorderTabSet.d.ts +1 -0
- package/declarations/src/view/DragContainer.d.ts +1 -0
- package/declarations/src/view/ErrorBoundary.d.ts +1 -0
- package/declarations/src/view/FloatingWindow.d.ts +1 -0
- package/declarations/src/view/Icons.d.ts +7 -0
- package/declarations/src/view/Layout.d.ts +113 -0
- package/declarations/src/view/Overlay.d.ts +1 -0
- package/declarations/src/view/PopupMenu.d.ts +1 -0
- package/declarations/src/view/Row.d.ts +1 -0
- package/declarations/src/view/Splitter.d.ts +1 -0
- package/declarations/src/view/Tab.d.ts +1 -0
- package/declarations/src/view/TabButton.d.ts +1 -0
- package/declarations/src/view/TabButtonStamp.d.ts +1 -0
- package/declarations/src/view/TabOverflowHook.d.ts +1 -0
- package/declarations/src/view/TabSet.d.ts +1 -0
- package/declarations/src/view/Utils.d.ts +4 -0
- package/declarations/view/BorderButton.d.ts +1 -1
- package/declarations/view/BorderTab.d.ts +2 -0
- package/declarations/view/BorderTabSet.d.ts +1 -1
- package/declarations/view/DragContainer.d.ts +1 -0
- package/declarations/view/ErrorBoundary.d.ts +1 -1
- package/declarations/view/ExtendedResizeObserver.d.ts +23 -0
- package/declarations/view/FloatingWindow.d.ts +1 -1
- package/declarations/view/Icons.d.ts +8 -7
- package/declarations/view/Layout.d.ts +139 -161
- package/declarations/view/Overlay.d.ts +1 -0
- package/declarations/view/PopoutWindow.d.ts +1 -0
- package/declarations/view/PopupMenu.d.ts +1 -0
- package/declarations/view/Row.d.ts +1 -0
- package/declarations/view/SizeTracker.d.ts +10 -0
- package/declarations/view/Splitter.d.ts +1 -1
- package/declarations/view/Tab.d.ts +1 -1
- package/declarations/view/TabButton.d.ts +1 -1
- package/declarations/view/TabButtonStamp.d.ts +1 -1
- package/declarations/view/TabOverflowHook.d.ts +1 -1
- package/declarations/view/TabSet.d.ts +1 -1
- package/declarations/view/Utils.d.ts +11 -1
- package/dist/bundles/demo.js +232052 -0
- package/dist/bundles/demo.js.map +1 -0
- package/dist/flexlayout.js +122 -92
- package/dist/flexlayout_min.js +1 -1
- package/lib/Attribute.js +42 -31
- package/lib/Attribute.js.map +1 -1
- package/lib/AttributeDefinitions.js +131 -108
- package/lib/AttributeDefinitions.js.map +1 -1
- package/lib/DockLocation.js +120 -124
- package/lib/DockLocation.js.map +1 -1
- package/lib/DropInfo.js +9 -13
- package/lib/DropInfo.js.map +1 -1
- package/lib/I18nLabel.js +13 -18
- package/lib/I18nLabel.js.map +1 -1
- package/lib/Orientation.js +22 -26
- package/lib/Orientation.js.map +1 -1
- package/lib/Rect.js +104 -72
- package/lib/Rect.js.map +1 -1
- package/lib/Types.js +96 -83
- package/lib/Types.js.map +1 -1
- package/lib/index.js +21 -38
- package/lib/index.js.map +1 -1
- package/lib/model/Action.js +6 -10
- package/lib/model/Action.js.map +1 -1
- package/lib/model/Actions.js +169 -155
- package/lib/model/Actions.js.map +1 -1
- package/lib/model/BorderNode.js +385 -406
- package/lib/model/BorderNode.js.map +1 -1
- package/lib/model/BorderSet.js +66 -121
- package/lib/model/BorderSet.js.map +1 -1
- package/lib/model/ICloseType.js +6 -9
- package/lib/model/ICloseType.js.map +1 -1
- package/lib/model/IDraggable.js +1 -2
- package/lib/model/IDropTarget.js +1 -2
- package/lib/model/IJsonModel.js +1 -2
- package/lib/model/LayoutWindow.js +83 -0
- package/lib/model/LayoutWindow.js.map +1 -0
- package/lib/model/Model.js +614 -496
- package/lib/model/Model.js.map +1 -1
- package/lib/model/Node.js +217 -228
- package/lib/model/Node.js.map +1 -1
- package/lib/model/RowNode.js +491 -504
- package/lib/model/RowNode.js.map +1 -1
- package/lib/model/TabNode.js +289 -184
- package/lib/model/TabNode.js.map +1 -1
- package/lib/model/TabSetNode.js +457 -446
- package/lib/model/TabSetNode.js.map +1 -1
- package/lib/model/Utils.js +47 -82
- package/lib/model/Utils.js.map +1 -1
- package/lib/view/BorderButton.js +124 -138
- package/lib/view/BorderButton.js.map +1 -1
- package/lib/view/BorderTab.js +47 -0
- package/lib/view/BorderTab.js.map +1 -0
- package/lib/view/BorderTabSet.js +134 -128
- package/lib/view/BorderTabSet.js.map +1 -1
- package/lib/view/DragContainer.js +16 -0
- package/lib/view/DragContainer.js.map +1 -0
- package/lib/view/ErrorBoundary.js +23 -27
- package/lib/view/ErrorBoundary.js.map +1 -1
- package/lib/view/Icons.js +40 -45
- package/lib/view/Icons.js.map +1 -1
- package/lib/view/Layout.js +918 -907
- package/lib/view/Layout.js.map +1 -1
- package/lib/view/Overlay.js +9 -0
- package/lib/view/Overlay.js.map +1 -0
- package/lib/view/PopoutWindow.js +129 -0
- package/lib/view/PopoutWindow.js.map +1 -0
- package/lib/view/PopupMenu.js +71 -0
- package/lib/view/PopupMenu.js.map +1 -0
- package/lib/view/Row.js +45 -0
- package/lib/view/Row.js.map +1 -0
- package/lib/view/SizeTracker.js +11 -0
- package/lib/view/SizeTracker.js.map +1 -0
- package/lib/view/Splitter.js +191 -147
- package/lib/view/Splitter.js.map +1 -1
- package/lib/view/Tab.js +86 -60
- package/lib/view/Tab.js.map +1 -1
- package/lib/view/TabButton.js +122 -135
- package/lib/view/TabButton.js.map +1 -1
- package/lib/view/TabButtonStamp.js +16 -21
- package/lib/view/TabButtonStamp.js.map +1 -1
- package/lib/view/TabOverflowHook.js +150 -149
- package/lib/view/TabOverflowHook.js.map +1 -1
- package/lib/view/TabSet.js +267 -234
- package/lib/view/TabSet.js.map +1 -1
- package/lib/view/Utils.js +126 -68
- package/lib/view/Utils.js.map +1 -1
- package/package.json +36 -30
- package/src/Attribute.ts +23 -0
- package/src/AttributeDefinitions.ts +38 -15
- package/src/DockLocation.ts +13 -13
- package/src/I18nLabel.ts +7 -9
- package/src/Rect.ts +53 -1
- package/src/Types.ts +16 -0
- package/src/index.ts +1 -2
- package/src/model/Actions.ts +49 -29
- package/src/model/BorderNode.ts +208 -214
- package/src/model/BorderSet.ts +42 -91
- package/src/model/IJsonModel.ts +883 -103
- package/src/model/LayoutWindow.ts +121 -0
- package/src/model/Model.ts +488 -366
- package/src/model/Node.ts +98 -111
- package/src/model/RowNode.ts +323 -319
- package/src/model/TabNode.ts +294 -110
- package/src/model/TabSetNode.ts +300 -242
- package/src/model/Utils.ts +6 -32
- package/src/view/BorderButton.tsx +32 -52
- package/src/view/BorderTab.tsx +70 -0
- package/src/view/BorderTabSet.tsx +64 -52
- package/src/view/DragContainer.tsx +32 -0
- package/src/view/Icons.tsx +6 -0
- package/src/view/Layout.tsx +1051 -1046
- package/src/view/Overlay.tsx +22 -0
- package/src/view/PopoutWindow.tsx +152 -0
- package/src/{PopupMenu.tsx → view/PopupMenu.tsx} +36 -31
- package/src/view/Row.tsx +68 -0
- package/src/view/SizeTracker.tsx +20 -0
- package/src/view/Splitter.tsx +167 -112
- package/src/view/Tab.tsx +76 -42
- package/src/view/TabButton.tsx +36 -55
- package/src/view/TabButtonStamp.tsx +5 -9
- package/src/view/TabOverflowHook.tsx +14 -9
- package/src/view/TabSet.tsx +217 -176
- package/src/view/Utils.tsx +119 -39
- package/style/_base.scss +140 -34
- package/style/dark.css +685 -580
- package/style/dark.css.map +1 -1
- package/style/dark.scss +3 -1
- package/style/gray.css +668 -563
- package/style/gray.css.map +1 -1
- package/style/gray.scss +2 -0
- package/style/light.css +669 -564
- package/style/light.css.map +1 -1
- package/style/light.scss +4 -2
- package/style/rounded.css +697 -0
- package/style/rounded.css.map +1 -0
- package/style/rounded.scss +194 -0
- package/style/underline.css +690 -585
- package/style/underline.css.map +1 -1
- package/style/underline.scss +2 -0
- package/cypress.config.ts +0 -16
- package/lib/DragDrop.js +0 -316
- package/lib/DragDrop.js.map +0 -1
- package/lib/PopupMenu.js +0 -68
- package/lib/PopupMenu.js.map +0 -1
- package/lib/model/SplitterNode.js +0 -72
- package/lib/model/SplitterNode.js.map +0 -1
- package/lib/view/FloatingWindow.js +0 -123
- package/lib/view/FloatingWindow.js.map +0 -1
- package/lib/view/FloatingWindowTab.js +0 -19
- package/lib/view/FloatingWindowTab.js.map +0 -1
- package/lib/view/TabFloating.js +0 -66
- package/lib/view/TabFloating.js.map +0 -1
- package/src/DragDrop.ts +0 -392
- package/src/model/SplitterNode.ts +0 -78
- package/src/view/FloatingWindow.tsx +0 -140
- package/src/view/FloatingWindowTab.tsx +0 -29
- package/src/view/TabFloating.tsx +0 -101
|
@@ -1,150 +1,151 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
React.useLayoutEffect(() => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
});
|
|
25
|
-
const instance =
|
|
26
|
-
React.useEffect(() => {
|
|
27
|
-
if (!instance) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
instance.addEventListener("wheel", onWheel, { passive: false });
|
|
31
|
-
return () => {
|
|
32
|
-
instance.removeEventListener("wheel", onWheel);
|
|
33
|
-
};
|
|
34
|
-
}, [instance]);
|
|
35
|
-
// needed to prevent default mouse wheel over tabset/border (cannot do with react event?)
|
|
36
|
-
const onWheel = (event) => {
|
|
37
|
-
event.preventDefault();
|
|
38
|
-
};
|
|
39
|
-
const getNear = (rect) => {
|
|
40
|
-
if (orientation ===
|
|
41
|
-
return rect.x;
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
return rect.y;
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const getFar = (rect) => {
|
|
48
|
-
if (orientation ===
|
|
49
|
-
return rect.getRight();
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
return rect.getBottom();
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
const getSize = (rect) => {
|
|
56
|
-
if (orientation ===
|
|
57
|
-
return rect.width;
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
return rect.height;
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
const updateVisibleTabs = () => {
|
|
64
|
-
const tabMargin = 2;
|
|
65
|
-
if (firstRender.current === true) {
|
|
66
|
-
tabsTruncated.current = false;
|
|
67
|
-
}
|
|
68
|
-
const nodeRect = node instanceof
|
|
69
|
-
let lastChild = node.getChildren()[node.getChildren().length - 1];
|
|
70
|
-
const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());
|
|
71
|
-
if (firstRender.current === true ||
|
|
72
|
-
(lastHiddenCount.current === 0 && hiddenTabs.length !== 0) ||
|
|
73
|
-
nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second
|
|
74
|
-
nodeRect.height !== lastRect.current.height) {
|
|
75
|
-
lastHiddenCount.current = hiddenTabs.length;
|
|
76
|
-
lastRect.current = nodeRect;
|
|
77
|
-
const enabled = node instanceof
|
|
78
|
-
let endPos = getFar(nodeRect) - stickyButtonsSize;
|
|
79
|
-
if (toolbarRef.current !== null) {
|
|
80
|
-
endPos -= getSize(toolbarRef.current.getBoundingClientRect());
|
|
81
|
-
}
|
|
82
|
-
if (enabled && node.getChildren().length > 0) {
|
|
83
|
-
if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()) + tabMargin < endPos) {
|
|
84
|
-
return; // nothing to do all tabs are shown in available space
|
|
85
|
-
}
|
|
86
|
-
let shiftPos = 0;
|
|
87
|
-
const selectedTab = node.getSelectedNode();
|
|
88
|
-
if (selectedTab && !userControlledLeft.current) {
|
|
89
|
-
const selectedRect = selectedTab.getTabRect();
|
|
90
|
-
const selectedStart = getNear(selectedRect) - tabMargin;
|
|
91
|
-
const selectedEnd = getFar(selectedRect) + tabMargin;
|
|
92
|
-
// when selected tab is larger than available space then align left
|
|
93
|
-
if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {
|
|
94
|
-
shiftPos = getNear(nodeRect) - selectedStart;
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
const
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
};
|
|
149
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Rect } from "../Rect";
|
|
3
|
+
import { TabSetNode } from "../model/TabSetNode";
|
|
4
|
+
import { Orientation } from "../Orientation";
|
|
5
|
+
/** @internal */
|
|
6
|
+
export const useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
|
|
7
|
+
const firstRender = React.useRef(true);
|
|
8
|
+
const tabsTruncated = React.useRef(false);
|
|
9
|
+
const lastRect = React.useRef(Rect.empty());
|
|
10
|
+
const selfRef = React.useRef(null);
|
|
11
|
+
const [position, setPosition] = React.useState(0);
|
|
12
|
+
const userControlledLeft = React.useRef(false);
|
|
13
|
+
const [hiddenTabs, setHiddenTabs] = React.useState([]);
|
|
14
|
+
const lastHiddenCount = React.useRef(0);
|
|
15
|
+
// if selected node or tabset/border rectangle change then unset usercontrolled (so selected tab will be kept in view)
|
|
16
|
+
React.useLayoutEffect(() => {
|
|
17
|
+
userControlledLeft.current = false;
|
|
18
|
+
}, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
|
|
19
|
+
React.useLayoutEffect(() => {
|
|
20
|
+
const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
|
|
21
|
+
if (nodeRect.width > 0 && nodeRect.height > 0) {
|
|
22
|
+
updateVisibleTabs();
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
const instance = toolbarRef.current;
|
|
26
|
+
React.useEffect(() => {
|
|
27
|
+
if (!instance) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
instance.addEventListener("wheel", onWheel, { passive: false });
|
|
31
|
+
return () => {
|
|
32
|
+
instance.removeEventListener("wheel", onWheel);
|
|
33
|
+
};
|
|
34
|
+
}, [instance]);
|
|
35
|
+
// needed to prevent default mouse wheel over tabset/border (cannot do with react event?)
|
|
36
|
+
const onWheel = (event) => {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
};
|
|
39
|
+
const getNear = (rect) => {
|
|
40
|
+
if (orientation === Orientation.HORZ) {
|
|
41
|
+
return rect.x;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
return rect.y;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
const getFar = (rect) => {
|
|
48
|
+
if (orientation === Orientation.HORZ) {
|
|
49
|
+
return rect.getRight();
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
return rect.getBottom();
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
const getSize = (rect) => {
|
|
56
|
+
if (orientation === Orientation.HORZ) {
|
|
57
|
+
return rect.width;
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
return rect.height;
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
const updateVisibleTabs = () => {
|
|
64
|
+
const tabMargin = 2;
|
|
65
|
+
if (firstRender.current === true) {
|
|
66
|
+
tabsTruncated.current = false;
|
|
67
|
+
}
|
|
68
|
+
const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
|
|
69
|
+
let lastChild = node.getChildren()[node.getChildren().length - 1];
|
|
70
|
+
const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());
|
|
71
|
+
if (firstRender.current === true ||
|
|
72
|
+
(lastHiddenCount.current === 0 && hiddenTabs.length !== 0) ||
|
|
73
|
+
nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second
|
|
74
|
+
nodeRect.height !== lastRect.current.height) {
|
|
75
|
+
lastHiddenCount.current = hiddenTabs.length;
|
|
76
|
+
lastRect.current = nodeRect;
|
|
77
|
+
const enabled = node instanceof TabSetNode ? node.isEnableTabStrip() === true : true;
|
|
78
|
+
let endPos = getFar(nodeRect) - stickyButtonsSize;
|
|
79
|
+
if (toolbarRef.current !== null) {
|
|
80
|
+
endPos -= getSize(toolbarRef.current.getBoundingClientRect());
|
|
81
|
+
}
|
|
82
|
+
if (enabled && node.getChildren().length > 0) {
|
|
83
|
+
if (hiddenTabs.length === 0 && position === 0 && getFar(lastChild.getTabRect()) + tabMargin < endPos) {
|
|
84
|
+
return; // nothing to do all tabs are shown in available space
|
|
85
|
+
}
|
|
86
|
+
let shiftPos = 0;
|
|
87
|
+
const selectedTab = node.getSelectedNode();
|
|
88
|
+
if (selectedTab && !userControlledLeft.current) {
|
|
89
|
+
const selectedRect = selectedTab.getTabRect();
|
|
90
|
+
const selectedStart = getNear(selectedRect) - tabMargin;
|
|
91
|
+
const selectedEnd = getFar(selectedRect) + tabMargin;
|
|
92
|
+
// when selected tab is larger than available space then align left
|
|
93
|
+
if (getSize(selectedRect) + 2 * tabMargin >= endPos - getNear(nodeRect)) {
|
|
94
|
+
shiftPos = getNear(nodeRect) - selectedStart;
|
|
95
|
+
// console.log("shiftPos1", shiftPos, getNear(nodeRect), selectedStart);
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
if (selectedEnd > endPos || selectedStart < getNear(nodeRect)) {
|
|
99
|
+
if (selectedStart < getNear(nodeRect)) {
|
|
100
|
+
shiftPos = getNear(nodeRect) - selectedStart;
|
|
101
|
+
// console.log("shiftPos2", shiftPos, getNear(nodeRect), selectedStart);
|
|
102
|
+
}
|
|
103
|
+
// use second if statement to prevent tab moving back then forwards if not enough space for single tab
|
|
104
|
+
if (selectedEnd + shiftPos > endPos) {
|
|
105
|
+
shiftPos = endPos - selectedEnd;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
const extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos));
|
|
111
|
+
const newPosition = Math.min(0, position + shiftPos + extraSpace);
|
|
112
|
+
// console.log("newPosition", newPosition, position, shiftPos, extraSpace);
|
|
113
|
+
// find hidden tabs
|
|
114
|
+
const diff = newPosition - position;
|
|
115
|
+
const hidden = [];
|
|
116
|
+
for (let i = 0; i < node.getChildren().length; i++) {
|
|
117
|
+
const child = node.getChildren()[i];
|
|
118
|
+
if (getNear(child.getTabRect()) + diff < getNear(nodeRect) || getFar(child.getTabRect()) + diff > endPos) {
|
|
119
|
+
hidden.push({ node: child, index: i });
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
tabsTruncated.current = hidden.length > 0;
|
|
123
|
+
firstRender.current = false; // need to do a second render
|
|
124
|
+
setHiddenTabs(hidden);
|
|
125
|
+
// console.log(newPosition);
|
|
126
|
+
setPosition(newPosition);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
firstRender.current = true;
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
const onMouseWheel = (event) => {
|
|
134
|
+
let delta = 0;
|
|
135
|
+
if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
|
|
136
|
+
delta = -event.deltaX;
|
|
137
|
+
}
|
|
138
|
+
else {
|
|
139
|
+
delta = -event.deltaY;
|
|
140
|
+
}
|
|
141
|
+
if (event.deltaMode === 1) {
|
|
142
|
+
// DOM_DELTA_LINE 0x01 The delta values are specified in lines.
|
|
143
|
+
delta *= 40;
|
|
144
|
+
}
|
|
145
|
+
setPosition(position + delta);
|
|
146
|
+
userControlledLeft.current = true;
|
|
147
|
+
event.stopPropagation();
|
|
148
|
+
};
|
|
149
|
+
return { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated: tabsTruncated.current };
|
|
150
|
+
};
|
|
150
151
|
//# sourceMappingURL=TabOverflowHook.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabOverflowHook.js","sourceRoot":"","sources":["../../src/view/TabOverflowHook.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabOverflowHook.js","sourceRoot":"","sources":["../../src/view/TabOverflowHook.tsx"],"names":[],"mappings":"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"}
|