dock-spawn-ts 2.513.0 → 2.514.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/lib/css/dock-manager.css +9 -1
- package/lib/es5/dock-spawn-ts.js +1 -1
- package/lib/js/ContainerType.d.ts +6 -6
- package/lib/js/ContainerType.js +7 -7
- package/lib/js/Dialog.d.ts +43 -43
- package/lib/js/Dialog.js +136 -136
- package/lib/js/DockConfig.d.ts +7 -7
- package/lib/js/DockConfig.js +8 -8
- package/lib/js/DockGraphDeserializer.d.ts +18 -18
- package/lib/js/DockGraphDeserializer.js +116 -116
- package/lib/js/DockGraphSerializer.d.ts +13 -13
- package/lib/js/DockGraphSerializer.js +40 -40
- package/lib/js/DockLayoutEngine.d.ts +35 -35
- package/lib/js/DockLayoutEngine.js +319 -319
- package/lib/js/DockManager.d.ts +153 -153
- package/lib/js/DockManager.js +728 -728
- package/lib/js/DockManagerContext.d.ts +9 -9
- package/lib/js/DockManagerContext.js +9 -9
- package/lib/js/DockModel.d.ts +8 -8
- package/lib/js/DockModel.js +5 -5
- package/lib/js/DockNode.d.ts +15 -15
- package/lib/js/DockNode.js +61 -61
- package/lib/js/DockWheel.d.ts +40 -40
- package/lib/js/DockWheel.js +200 -200
- package/lib/js/DockWheelItem.d.ts +15 -15
- package/lib/js/DockWheelItem.js +27 -27
- package/lib/js/DocumentManagerContainer.d.ts +16 -16
- package/lib/js/DocumentManagerContainer.js +28 -28
- package/lib/js/DocumentTabPage.d.ts +14 -14
- package/lib/js/DocumentTabPage.js +26 -26
- package/lib/js/DraggableContainer.d.ts +52 -52
- package/lib/js/DraggableContainer.js +183 -183
- package/lib/js/EventHandler.d.ts +7 -7
- package/lib/js/EventHandler.js +11 -11
- package/lib/js/Exports.d.ts +30 -30
- package/lib/js/Exports.js +30 -30
- package/lib/js/FillDockContainer.d.ts +33 -33
- package/lib/js/FillDockContainer.js +69 -69
- package/lib/js/HorizontalDockContainer.d.ts +6 -6
- package/lib/js/HorizontalDockContainer.js +9 -9
- package/lib/js/PanelContainer.d.ts +101 -101
- package/lib/js/PanelContainer.js +384 -384
- package/lib/js/PanelContainer.js.map +1 -1
- package/lib/js/Point.d.ts +5 -5
- package/lib/js/Point.js +6 -6
- package/lib/js/ResizableContainer.d.ts +55 -55
- package/lib/js/ResizableContainer.js +241 -241
- package/lib/js/ResizeHandle.d.ts +15 -15
- package/lib/js/ResizeHandle.js +48 -48
- package/lib/js/SplitterBar.d.ts +35 -35
- package/lib/js/SplitterBar.js +149 -149
- package/lib/js/SplitterDockContainer.d.ts +35 -35
- package/lib/js/SplitterDockContainer.js +65 -65
- package/lib/js/SplitterPanel.d.ts +26 -26
- package/lib/js/SplitterPanel.js +191 -191
- package/lib/js/TabHandle.d.ts +55 -55
- package/lib/js/TabHandle.js +261 -260
- package/lib/js/TabHandle.js.map +1 -1
- package/lib/js/TabHost.d.ts +46 -46
- package/lib/js/TabHost.js +223 -223
- package/lib/js/TabHost.js.map +1 -1
- package/lib/js/TabPage.d.ts +19 -19
- package/lib/js/TabPage.js +74 -73
- package/lib/js/TabPage.js.map +1 -1
- package/lib/js/UndockInitiator.d.ts +31 -31
- package/lib/js/UndockInitiator.js +140 -140
- package/lib/js/Utils.d.ts +14 -14
- package/lib/js/Utils.js +70 -69
- package/lib/js/Utils.js.map +1 -1
- package/lib/js/VerticalDockContainer.d.ts +6 -6
- package/lib/js/VerticalDockContainer.js +9 -9
- package/lib/js/enums/PanelType.d.ts +4 -4
- package/lib/js/enums/PanelType.js +5 -5
- package/lib/js/enums/TabHostDirection.d.ts +6 -6
- package/lib/js/enums/TabHostDirection.js +7 -7
- package/lib/js/enums/WheelTypes.d.ts +11 -11
- package/lib/js/enums/WheelTypes.js +14 -14
- package/lib/js/interfaces/IDockContainer.d.ts +25 -25
- package/lib/js/interfaces/IDockContainer.js +1 -1
- package/lib/js/interfaces/IDockContainerWithSize.d.ts +5 -5
- package/lib/js/interfaces/IDockContainerWithSize.js +1 -1
- package/lib/js/interfaces/ILayoutEventListener.d.ts +26 -26
- package/lib/js/interfaces/ILayoutEventListener.js +1 -1
- package/lib/js/interfaces/IMouseOrTouchEvent.d.ts +6 -6
- package/lib/js/interfaces/IMouseOrTouchEvent.js +1 -1
- package/lib/js/interfaces/INodeInfo.d.ts +7 -7
- package/lib/js/interfaces/INodeInfo.js +1 -1
- package/lib/js/interfaces/IPanelInfo.d.ts +9 -9
- package/lib/js/interfaces/IPanelInfo.js +1 -1
- package/lib/js/interfaces/IRectangle.d.ts +6 -6
- package/lib/js/interfaces/IRectangle.js +1 -1
- package/lib/js/interfaces/ISize.d.ts +4 -4
- package/lib/js/interfaces/ISize.js +1 -1
- package/lib/js/interfaces/IState.d.ts +10 -10
- package/lib/js/interfaces/IState.js +1 -1
- package/lib/js/interfaces/IThickness.d.ts +6 -6
- package/lib/js/interfaces/IThickness.js +1 -1
- package/lib/js/webcomponent/DockSpawnTsWebcomponent.d.ts +30 -30
- package/lib/js/webcomponent/DockSpawnTsWebcomponent.js +153 -152
- package/lib/js/webcomponent/DockSpawnTsWebcomponent.js.map +1 -1
- package/package.json +6 -6
- package/src/PanelContainer.ts +1 -1
- package/src/TabHost.ts +5 -5
- package/src/TabPage.ts +4 -3
package/lib/js/SplitterPanel.js
CHANGED
|
@@ -1,192 +1,192 @@
|
|
|
1
|
-
import { SplitterBar } from "./SplitterBar.js";
|
|
2
|
-
import { Utils } from "./Utils.js";
|
|
3
|
-
/**
|
|
4
|
-
* A splitter panel manages the child containers inside it with splitter bars.
|
|
5
|
-
* It can be stacked horizontally or vertically
|
|
6
|
-
*/
|
|
7
|
-
export class SplitterPanel {
|
|
8
|
-
constructor(childContainers, stackedVertical) {
|
|
9
|
-
this.childContainers = childContainers;
|
|
10
|
-
this.stackedVertical = stackedVertical;
|
|
11
|
-
this.panelElement = document.createElement('div');
|
|
12
|
-
this.spiltterBars = [];
|
|
13
|
-
this._buildSplitterDOMAndAddElements();
|
|
14
|
-
}
|
|
15
|
-
_buildSplitterDOMAndAddElements() {
|
|
16
|
-
if (this.childContainers.length <= 1)
|
|
17
|
-
throw new Error('Splitter panel should contain atleast 2 panels');
|
|
18
|
-
this.spiltterBars = [];
|
|
19
|
-
let afterElement = null;
|
|
20
|
-
for (let i = 0; i < this.childContainers.length - 1; i++) {
|
|
21
|
-
let previousContainer = this.childContainers[i];
|
|
22
|
-
let nextContainer = this.childContainers[i + 1];
|
|
23
|
-
let splitterBar = new SplitterBar(previousContainer, nextContainer, this.stackedVertical);
|
|
24
|
-
this.spiltterBars.push(splitterBar);
|
|
25
|
-
// Add the container and split bar to the panel's base div element
|
|
26
|
-
if (!Array.from(this.panelElement.children).includes(previousContainer.containerElement))
|
|
27
|
-
this._insertContainerIntoPanel(previousContainer, afterElement);
|
|
28
|
-
this.panelElement.insertBefore(splitterBar.barElement, previousContainer.containerElement.nextSibling);
|
|
29
|
-
afterElement = splitterBar.barElement;
|
|
30
|
-
}
|
|
31
|
-
let last = this.childContainers.slice(-1)[0];
|
|
32
|
-
if (!Array.from(this.panelElement.children).includes(last.containerElement))
|
|
33
|
-
this._insertContainerIntoPanel(last, afterElement);
|
|
34
|
-
}
|
|
35
|
-
performLayout(children, relayoutEvenIfEqual) {
|
|
36
|
-
let containersEqual = Utils.arrayEqual(this.childContainers, children);
|
|
37
|
-
if (!containersEqual || relayoutEvenIfEqual) {
|
|
38
|
-
this.childContainers.forEach((container) => {
|
|
39
|
-
if (!children.some((item) => item == container)) {
|
|
40
|
-
if (container.containerElement) {
|
|
41
|
-
container.containerElement.classList.remove('splitter-container-vertical');
|
|
42
|
-
container.containerElement.classList.remove('splitter-container-horizontal');
|
|
43
|
-
Utils.removeNode(container.containerElement);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
this.spiltterBars.forEach((bar) => { Utils.removeNode(bar.barElement); });
|
|
48
|
-
// rebuild
|
|
49
|
-
this.childContainers = children;
|
|
50
|
-
this._buildSplitterDOMAndAddElements();
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
removeFromDOM() {
|
|
54
|
-
this.childContainers.forEach((container) => {
|
|
55
|
-
if (container.containerElement) {
|
|
56
|
-
container.containerElement.classList.remove('splitter-container-vertical');
|
|
57
|
-
container.containerElement.classList.remove('splitter-container-horizontal');
|
|
58
|
-
Utils.removeNode(container.containerElement);
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
this.spiltterBars.forEach((bar) => { Utils.removeNode(bar.barElement); });
|
|
62
|
-
}
|
|
63
|
-
destroy() {
|
|
64
|
-
this.removeFromDOM();
|
|
65
|
-
this.panelElement.parentNode.removeChild(this.panelElement);
|
|
66
|
-
}
|
|
67
|
-
_insertContainerIntoPanel(container, afterElement) {
|
|
68
|
-
if (!container) {
|
|
69
|
-
console.error('container is undefined');
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
if (container.containerElement.parentNode != this.panelElement) {
|
|
73
|
-
Utils.removeNode(container.containerElement);
|
|
74
|
-
if (afterElement)
|
|
75
|
-
this.panelElement.insertBefore(container.containerElement, afterElement.nextSibling);
|
|
76
|
-
else {
|
|
77
|
-
if (this.panelElement.children.length > 0)
|
|
78
|
-
this.panelElement.insertBefore(container.containerElement, this.panelElement.children[0]);
|
|
79
|
-
else
|
|
80
|
-
this.panelElement.appendChild(container.containerElement);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
container.containerElement.classList.add(this.stackedVertical ? 'splitter-container-vertical' : 'splitter-container-horizontal');
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* Sets the percentage of space the specified [container] takes in the split panel
|
|
87
|
-
* The percentage is specified in [ratio] and is between 0..1
|
|
88
|
-
*/
|
|
89
|
-
setContainerRatio(container, ratio) {
|
|
90
|
-
let splitPanelSize = this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth;
|
|
91
|
-
let newContainerSize = splitPanelSize * ratio;
|
|
92
|
-
let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
|
|
93
|
-
let otherPanelSizeQuota = splitPanelSize - newContainerSize - barSize * this.spiltterBars.length;
|
|
94
|
-
let otherPanelScaleMultipler = otherPanelSizeQuota / splitPanelSize;
|
|
95
|
-
for (let i = 0; i < this.childContainers.length; i++) {
|
|
96
|
-
let child = this.childContainers[i];
|
|
97
|
-
let size;
|
|
98
|
-
if (child !== container) {
|
|
99
|
-
size = this.stackedVertical ? child.containerElement.parentElement.clientHeight : child.containerElement.parentElement.clientWidth;
|
|
100
|
-
size *= otherPanelScaleMultipler;
|
|
101
|
-
}
|
|
102
|
-
else
|
|
103
|
-
size = newContainerSize;
|
|
104
|
-
if (this.stackedVertical)
|
|
105
|
-
child.resize(child.width, Math.floor(size));
|
|
106
|
-
else
|
|
107
|
-
child.resize(Math.floor(size), child.height);
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
getRatios() {
|
|
111
|
-
let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
|
|
112
|
-
let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
|
|
113
|
-
let result = [];
|
|
114
|
-
for (let i = 0; i < this.childContainers.length; i++) {
|
|
115
|
-
let child = this.childContainers[i];
|
|
116
|
-
let sizeOld = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
|
|
117
|
-
result.push(sizeOld / splitPanelSize);
|
|
118
|
-
}
|
|
119
|
-
return result;
|
|
120
|
-
}
|
|
121
|
-
setRatios(ratios) {
|
|
122
|
-
let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
|
|
123
|
-
let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
|
|
124
|
-
for (let i = 0; i < this.childContainers.length; i++) {
|
|
125
|
-
let child = this.childContainers[i];
|
|
126
|
-
let size = splitPanelSize * ratios[i];
|
|
127
|
-
if (this.stackedVertical)
|
|
128
|
-
child.resize(child.width, Math.floor(size));
|
|
129
|
-
else
|
|
130
|
-
child.resize(Math.floor(size), child.height);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
resize(width, height) {
|
|
134
|
-
if (this.childContainers.length <= 1)
|
|
135
|
-
return;
|
|
136
|
-
this.panelElement.style.width = width + 'px';
|
|
137
|
-
this.panelElement.style.height = height + 'px';
|
|
138
|
-
let i;
|
|
139
|
-
// Adjust the fixed dimension that is common to all (i.e. width, if stacked vertical; height, if stacked horizontally)
|
|
140
|
-
for (i = 0; i < this.childContainers.length; i++) {
|
|
141
|
-
let childContainer = this.childContainers[i];
|
|
142
|
-
if (this.stackedVertical)
|
|
143
|
-
childContainer.resize(width, !childContainer.height ? height : childContainer.height);
|
|
144
|
-
else
|
|
145
|
-
childContainer.resize(!childContainer.width ? width : childContainer.width, height);
|
|
146
|
-
if (i < this.spiltterBars.length) {
|
|
147
|
-
let splitBar = this.spiltterBars[i];
|
|
148
|
-
if (this.stackedVertical)
|
|
149
|
-
splitBar.barElement.style.width = width + 'px';
|
|
150
|
-
else
|
|
151
|
-
splitBar.barElement.style.height = height + 'px';
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
// Adjust the varying dimension
|
|
155
|
-
let totalChildPanelSize = 0;
|
|
156
|
-
// Find out how much space existing child containers take up (excluding the splitter bars)
|
|
157
|
-
this.childContainers.forEach((container) => {
|
|
158
|
-
let size = this.stackedVertical ?
|
|
159
|
-
container.height :
|
|
160
|
-
container.width;
|
|
161
|
-
totalChildPanelSize += size;
|
|
162
|
-
});
|
|
163
|
-
const barRect = this.spiltterBars[0].barElement.getBoundingClientRect();
|
|
164
|
-
// Get the thickness of the bar
|
|
165
|
-
let barSize = this.stackedVertical ? barRect.height : barRect.width;
|
|
166
|
-
// Find out how much space existing child containers will take after being resized (excluding the splitter bars)
|
|
167
|
-
let targetTotalChildPanelSize = this.stackedVertical ? height : width;
|
|
168
|
-
targetTotalChildPanelSize -= barSize * this.spiltterBars.length;
|
|
169
|
-
// Get the scale multiplier
|
|
170
|
-
totalChildPanelSize = Math.max(totalChildPanelSize, 1);
|
|
171
|
-
let scaleMultiplier = targetTotalChildPanelSize / totalChildPanelSize;
|
|
172
|
-
// Update the size with this multiplier
|
|
173
|
-
let updatedTotalChildPanelSize = 0;
|
|
174
|
-
for (i = 0; i < this.childContainers.length; i++) {
|
|
175
|
-
let child = this.childContainers[i];
|
|
176
|
-
if (child.containerElement.style.display == 'none')
|
|
177
|
-
child.containerElement.style.display = 'block';
|
|
178
|
-
let original = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
|
|
179
|
-
let newSize = scaleMultiplier > 1 ? Math.floor(original * scaleMultiplier) : Math.ceil(original * scaleMultiplier);
|
|
180
|
-
updatedTotalChildPanelSize += newSize;
|
|
181
|
-
// If this is the last node, add any extra pixels to fix the rounding off errors and match the requested size
|
|
182
|
-
if (i === this.childContainers.length - 1)
|
|
183
|
-
newSize += targetTotalChildPanelSize - updatedTotalChildPanelSize;
|
|
184
|
-
// Set the size of the panel
|
|
185
|
-
if (this.stackedVertical)
|
|
186
|
-
child.resize(child.width, newSize);
|
|
187
|
-
else
|
|
188
|
-
child.resize(newSize, child.height);
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
}
|
|
1
|
+
import { SplitterBar } from "./SplitterBar.js";
|
|
2
|
+
import { Utils } from "./Utils.js";
|
|
3
|
+
/**
|
|
4
|
+
* A splitter panel manages the child containers inside it with splitter bars.
|
|
5
|
+
* It can be stacked horizontally or vertically
|
|
6
|
+
*/
|
|
7
|
+
export class SplitterPanel {
|
|
8
|
+
constructor(childContainers, stackedVertical) {
|
|
9
|
+
this.childContainers = childContainers;
|
|
10
|
+
this.stackedVertical = stackedVertical;
|
|
11
|
+
this.panelElement = document.createElement('div');
|
|
12
|
+
this.spiltterBars = [];
|
|
13
|
+
this._buildSplitterDOMAndAddElements();
|
|
14
|
+
}
|
|
15
|
+
_buildSplitterDOMAndAddElements() {
|
|
16
|
+
if (this.childContainers.length <= 1)
|
|
17
|
+
throw new Error('Splitter panel should contain atleast 2 panels');
|
|
18
|
+
this.spiltterBars = [];
|
|
19
|
+
let afterElement = null;
|
|
20
|
+
for (let i = 0; i < this.childContainers.length - 1; i++) {
|
|
21
|
+
let previousContainer = this.childContainers[i];
|
|
22
|
+
let nextContainer = this.childContainers[i + 1];
|
|
23
|
+
let splitterBar = new SplitterBar(previousContainer, nextContainer, this.stackedVertical);
|
|
24
|
+
this.spiltterBars.push(splitterBar);
|
|
25
|
+
// Add the container and split bar to the panel's base div element
|
|
26
|
+
if (!Array.from(this.panelElement.children).includes(previousContainer.containerElement))
|
|
27
|
+
this._insertContainerIntoPanel(previousContainer, afterElement);
|
|
28
|
+
this.panelElement.insertBefore(splitterBar.barElement, previousContainer.containerElement.nextSibling);
|
|
29
|
+
afterElement = splitterBar.barElement;
|
|
30
|
+
}
|
|
31
|
+
let last = this.childContainers.slice(-1)[0];
|
|
32
|
+
if (!Array.from(this.panelElement.children).includes(last.containerElement))
|
|
33
|
+
this._insertContainerIntoPanel(last, afterElement);
|
|
34
|
+
}
|
|
35
|
+
performLayout(children, relayoutEvenIfEqual) {
|
|
36
|
+
let containersEqual = Utils.arrayEqual(this.childContainers, children);
|
|
37
|
+
if (!containersEqual || relayoutEvenIfEqual) {
|
|
38
|
+
this.childContainers.forEach((container) => {
|
|
39
|
+
if (!children.some((item) => item == container)) {
|
|
40
|
+
if (container.containerElement) {
|
|
41
|
+
container.containerElement.classList.remove('splitter-container-vertical');
|
|
42
|
+
container.containerElement.classList.remove('splitter-container-horizontal');
|
|
43
|
+
Utils.removeNode(container.containerElement);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
this.spiltterBars.forEach((bar) => { Utils.removeNode(bar.barElement); });
|
|
48
|
+
// rebuild
|
|
49
|
+
this.childContainers = children;
|
|
50
|
+
this._buildSplitterDOMAndAddElements();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
removeFromDOM() {
|
|
54
|
+
this.childContainers.forEach((container) => {
|
|
55
|
+
if (container.containerElement) {
|
|
56
|
+
container.containerElement.classList.remove('splitter-container-vertical');
|
|
57
|
+
container.containerElement.classList.remove('splitter-container-horizontal');
|
|
58
|
+
Utils.removeNode(container.containerElement);
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
this.spiltterBars.forEach((bar) => { Utils.removeNode(bar.barElement); });
|
|
62
|
+
}
|
|
63
|
+
destroy() {
|
|
64
|
+
this.removeFromDOM();
|
|
65
|
+
this.panelElement.parentNode.removeChild(this.panelElement);
|
|
66
|
+
}
|
|
67
|
+
_insertContainerIntoPanel(container, afterElement) {
|
|
68
|
+
if (!container) {
|
|
69
|
+
console.error('container is undefined');
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
if (container.containerElement.parentNode != this.panelElement) {
|
|
73
|
+
Utils.removeNode(container.containerElement);
|
|
74
|
+
if (afterElement)
|
|
75
|
+
this.panelElement.insertBefore(container.containerElement, afterElement.nextSibling);
|
|
76
|
+
else {
|
|
77
|
+
if (this.panelElement.children.length > 0)
|
|
78
|
+
this.panelElement.insertBefore(container.containerElement, this.panelElement.children[0]);
|
|
79
|
+
else
|
|
80
|
+
this.panelElement.appendChild(container.containerElement);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
container.containerElement.classList.add(this.stackedVertical ? 'splitter-container-vertical' : 'splitter-container-horizontal');
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Sets the percentage of space the specified [container] takes in the split panel
|
|
87
|
+
* The percentage is specified in [ratio] and is between 0..1
|
|
88
|
+
*/
|
|
89
|
+
setContainerRatio(container, ratio) {
|
|
90
|
+
let splitPanelSize = this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth;
|
|
91
|
+
let newContainerSize = splitPanelSize * ratio;
|
|
92
|
+
let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
|
|
93
|
+
let otherPanelSizeQuota = splitPanelSize - newContainerSize - barSize * this.spiltterBars.length;
|
|
94
|
+
let otherPanelScaleMultipler = otherPanelSizeQuota / splitPanelSize;
|
|
95
|
+
for (let i = 0; i < this.childContainers.length; i++) {
|
|
96
|
+
let child = this.childContainers[i];
|
|
97
|
+
let size;
|
|
98
|
+
if (child !== container) {
|
|
99
|
+
size = this.stackedVertical ? child.containerElement.parentElement.clientHeight : child.containerElement.parentElement.clientWidth;
|
|
100
|
+
size *= otherPanelScaleMultipler;
|
|
101
|
+
}
|
|
102
|
+
else
|
|
103
|
+
size = newContainerSize;
|
|
104
|
+
if (this.stackedVertical)
|
|
105
|
+
child.resize(child.width, Math.floor(size));
|
|
106
|
+
else
|
|
107
|
+
child.resize(Math.floor(size), child.height);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
getRatios() {
|
|
111
|
+
let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
|
|
112
|
+
let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
|
|
113
|
+
let result = [];
|
|
114
|
+
for (let i = 0; i < this.childContainers.length; i++) {
|
|
115
|
+
let child = this.childContainers[i];
|
|
116
|
+
let sizeOld = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
|
|
117
|
+
result.push(sizeOld / splitPanelSize);
|
|
118
|
+
}
|
|
119
|
+
return result;
|
|
120
|
+
}
|
|
121
|
+
setRatios(ratios) {
|
|
122
|
+
let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
|
|
123
|
+
let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
|
|
124
|
+
for (let i = 0; i < this.childContainers.length; i++) {
|
|
125
|
+
let child = this.childContainers[i];
|
|
126
|
+
let size = splitPanelSize * ratios[i];
|
|
127
|
+
if (this.stackedVertical)
|
|
128
|
+
child.resize(child.width, Math.floor(size));
|
|
129
|
+
else
|
|
130
|
+
child.resize(Math.floor(size), child.height);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
resize(width, height) {
|
|
134
|
+
if (this.childContainers.length <= 1)
|
|
135
|
+
return;
|
|
136
|
+
this.panelElement.style.width = width + 'px';
|
|
137
|
+
this.panelElement.style.height = height + 'px';
|
|
138
|
+
let i;
|
|
139
|
+
// Adjust the fixed dimension that is common to all (i.e. width, if stacked vertical; height, if stacked horizontally)
|
|
140
|
+
for (i = 0; i < this.childContainers.length; i++) {
|
|
141
|
+
let childContainer = this.childContainers[i];
|
|
142
|
+
if (this.stackedVertical)
|
|
143
|
+
childContainer.resize(width, !childContainer.height ? height : childContainer.height);
|
|
144
|
+
else
|
|
145
|
+
childContainer.resize(!childContainer.width ? width : childContainer.width, height);
|
|
146
|
+
if (i < this.spiltterBars.length) {
|
|
147
|
+
let splitBar = this.spiltterBars[i];
|
|
148
|
+
if (this.stackedVertical)
|
|
149
|
+
splitBar.barElement.style.width = width + 'px';
|
|
150
|
+
else
|
|
151
|
+
splitBar.barElement.style.height = height + 'px';
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
// Adjust the varying dimension
|
|
155
|
+
let totalChildPanelSize = 0;
|
|
156
|
+
// Find out how much space existing child containers take up (excluding the splitter bars)
|
|
157
|
+
this.childContainers.forEach((container) => {
|
|
158
|
+
let size = this.stackedVertical ?
|
|
159
|
+
container.height :
|
|
160
|
+
container.width;
|
|
161
|
+
totalChildPanelSize += size;
|
|
162
|
+
});
|
|
163
|
+
const barRect = this.spiltterBars[0].barElement.getBoundingClientRect();
|
|
164
|
+
// Get the thickness of the bar
|
|
165
|
+
let barSize = this.stackedVertical ? barRect.height : barRect.width;
|
|
166
|
+
// Find out how much space existing child containers will take after being resized (excluding the splitter bars)
|
|
167
|
+
let targetTotalChildPanelSize = this.stackedVertical ? height : width;
|
|
168
|
+
targetTotalChildPanelSize -= barSize * this.spiltterBars.length;
|
|
169
|
+
// Get the scale multiplier
|
|
170
|
+
totalChildPanelSize = Math.max(totalChildPanelSize, 1);
|
|
171
|
+
let scaleMultiplier = targetTotalChildPanelSize / totalChildPanelSize;
|
|
172
|
+
// Update the size with this multiplier
|
|
173
|
+
let updatedTotalChildPanelSize = 0;
|
|
174
|
+
for (i = 0; i < this.childContainers.length; i++) {
|
|
175
|
+
let child = this.childContainers[i];
|
|
176
|
+
if (child.containerElement.style.display == 'none')
|
|
177
|
+
child.containerElement.style.display = 'block';
|
|
178
|
+
let original = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
|
|
179
|
+
let newSize = scaleMultiplier > 1 ? Math.floor(original * scaleMultiplier) : Math.ceil(original * scaleMultiplier);
|
|
180
|
+
updatedTotalChildPanelSize += newSize;
|
|
181
|
+
// If this is the last node, add any extra pixels to fix the rounding off errors and match the requested size
|
|
182
|
+
if (i === this.childContainers.length - 1)
|
|
183
|
+
newSize += targetTotalChildPanelSize - updatedTotalChildPanelSize;
|
|
184
|
+
// Set the size of the panel
|
|
185
|
+
if (this.stackedVertical)
|
|
186
|
+
child.resize(child.width, newSize);
|
|
187
|
+
else
|
|
188
|
+
child.resize(newSize, child.height);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
192
|
//# sourceMappingURL=SplitterPanel.js.map
|
package/lib/js/TabHandle.d.ts
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import { TabPage } from "./TabPage.js";
|
|
2
|
-
import { UndockInitiator } from "./UndockInitiator.js";
|
|
3
|
-
import { EventHandler } from "./EventHandler.js";
|
|
4
|
-
import { DockNode } from "./DockNode.js";
|
|
5
|
-
/**
|
|
6
|
-
* A tab handle represents the tab button on the tab strip
|
|
7
|
-
*/
|
|
8
|
-
export declare class TabHandle {
|
|
9
|
-
parent: TabPage;
|
|
10
|
-
elementBase: HTMLDivElement;
|
|
11
|
-
elementText: HTMLDivElement;
|
|
12
|
-
elementCloseButton: HTMLDivElement;
|
|
13
|
-
undockInitiator: UndockInitiator;
|
|
14
|
-
mouseDownHandler: EventHandler;
|
|
15
|
-
touchDownHandler: EventHandler;
|
|
16
|
-
closeButtonHandler: EventHandler;
|
|
17
|
-
closeButtonTouchHandler: EventHandler;
|
|
18
|
-
auxClickHandler: EventHandler;
|
|
19
|
-
contextMenuHandler: EventHandler;
|
|
20
|
-
mouseMoveHandler: EventHandler;
|
|
21
|
-
touchMoveHandler: EventHandler;
|
|
22
|
-
mouseUpHandler: EventHandler;
|
|
23
|
-
touchUpHandler: EventHandler;
|
|
24
|
-
stargDragPosition: any;
|
|
25
|
-
dragged: boolean;
|
|
26
|
-
eventListeners: any[];
|
|
27
|
-
undockListener: {
|
|
28
|
-
onDockEnabled: (e: any) => void;
|
|
29
|
-
onHideCloseButton: (e: any) => void;
|
|
30
|
-
};
|
|
31
|
-
prev: number;
|
|
32
|
-
current: number;
|
|
33
|
-
direction: number;
|
|
34
|
-
_ctxMenu: HTMLDivElement;
|
|
35
|
-
_windowsContextMenuCloseBound: any;
|
|
36
|
-
constructor(parent: TabPage);
|
|
37
|
-
addListener(listener: any): void;
|
|
38
|
-
removeListener(listener: any): void;
|
|
39
|
-
undockEnabled(state: boolean): void;
|
|
40
|
-
static createContextMenuContentCallback: (tabHandle: TabHandle, contextMenuContainer: HTMLDivElement, documentMangerNodes: DockNode[]) => void;
|
|
41
|
-
oncontextMenuClicked(e: MouseEvent): void;
|
|
42
|
-
closeContextMenu(): void;
|
|
43
|
-
windowsContextMenuClose(e: Event): void;
|
|
44
|
-
onMouseDown(e: any): void;
|
|
45
|
-
onMouseUp(e: any): void;
|
|
46
|
-
moveTabEvent(that: any, state: any): void;
|
|
47
|
-
onMouseMove(e: any): void;
|
|
48
|
-
hideCloseButton(state: any): void;
|
|
49
|
-
updateTitle(): void;
|
|
50
|
-
destroy(): void;
|
|
51
|
-
_performUndock(e: any, dragOffset: any): import("./Dialog.js").Dialog;
|
|
52
|
-
onCloseButtonClicked(e: any): void;
|
|
53
|
-
setSelected(isSelected: boolean): void;
|
|
54
|
-
setActive(isActive: boolean): void;
|
|
55
|
-
}
|
|
1
|
+
import { TabPage } from "./TabPage.js";
|
|
2
|
+
import { UndockInitiator } from "./UndockInitiator.js";
|
|
3
|
+
import { EventHandler } from "./EventHandler.js";
|
|
4
|
+
import { DockNode } from "./DockNode.js";
|
|
5
|
+
/**
|
|
6
|
+
* A tab handle represents the tab button on the tab strip
|
|
7
|
+
*/
|
|
8
|
+
export declare class TabHandle {
|
|
9
|
+
parent: TabPage;
|
|
10
|
+
elementBase: HTMLDivElement;
|
|
11
|
+
elementText: HTMLDivElement;
|
|
12
|
+
elementCloseButton: HTMLDivElement;
|
|
13
|
+
undockInitiator: UndockInitiator;
|
|
14
|
+
mouseDownHandler: EventHandler;
|
|
15
|
+
touchDownHandler: EventHandler;
|
|
16
|
+
closeButtonHandler: EventHandler;
|
|
17
|
+
closeButtonTouchHandler: EventHandler;
|
|
18
|
+
auxClickHandler: EventHandler;
|
|
19
|
+
contextMenuHandler: EventHandler;
|
|
20
|
+
mouseMoveHandler: EventHandler;
|
|
21
|
+
touchMoveHandler: EventHandler;
|
|
22
|
+
mouseUpHandler: EventHandler;
|
|
23
|
+
touchUpHandler: EventHandler;
|
|
24
|
+
stargDragPosition: any;
|
|
25
|
+
dragged: boolean;
|
|
26
|
+
eventListeners: any[];
|
|
27
|
+
undockListener: {
|
|
28
|
+
onDockEnabled: (e: any) => void;
|
|
29
|
+
onHideCloseButton: (e: any) => void;
|
|
30
|
+
};
|
|
31
|
+
prev: number;
|
|
32
|
+
current: number;
|
|
33
|
+
direction: number;
|
|
34
|
+
_ctxMenu: HTMLDivElement;
|
|
35
|
+
_windowsContextMenuCloseBound: any;
|
|
36
|
+
constructor(parent: TabPage);
|
|
37
|
+
addListener(listener: any): void;
|
|
38
|
+
removeListener(listener: any): void;
|
|
39
|
+
undockEnabled(state: boolean): void;
|
|
40
|
+
static createContextMenuContentCallback: (tabHandle: TabHandle, contextMenuContainer: HTMLDivElement, documentMangerNodes: DockNode[]) => void;
|
|
41
|
+
oncontextMenuClicked(e: MouseEvent): void;
|
|
42
|
+
closeContextMenu(): void;
|
|
43
|
+
windowsContextMenuClose(e: Event): void;
|
|
44
|
+
onMouseDown(e: any): void;
|
|
45
|
+
onMouseUp(e: any): void;
|
|
46
|
+
moveTabEvent(that: any, state: any): void;
|
|
47
|
+
onMouseMove(e: any): void;
|
|
48
|
+
hideCloseButton(state: any): void;
|
|
49
|
+
updateTitle(): void;
|
|
50
|
+
destroy(): void;
|
|
51
|
+
_performUndock(e: any, dragOffset: any): import("./Dialog.js").Dialog;
|
|
52
|
+
onCloseButtonClicked(e: any): void;
|
|
53
|
+
setSelected(isSelected: boolean): void;
|
|
54
|
+
setActive(isActive: boolean): void;
|
|
55
|
+
}
|