@zag-js/splitter 1.34.0 → 1.35.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/dist/index.d.mts +9 -254
- package/dist/index.d.ts +9 -254
- package/dist/index.js +37 -1158
- package/dist/index.mjs +11 -1151
- package/dist/splitter.anatomy.d.mts +6 -0
- package/dist/splitter.anatomy.d.ts +6 -0
- package/dist/splitter.anatomy.js +34 -0
- package/dist/splitter.anatomy.mjs +8 -0
- package/dist/splitter.connect.d.mts +7 -0
- package/dist/splitter.connect.d.ts +7 -0
- package/dist/splitter.connect.js +298 -0
- package/dist/splitter.connect.mjs +263 -0
- package/dist/splitter.dom.d.mts +19 -0
- package/dist/splitter.dom.d.ts +19 -0
- package/dist/splitter.dom.js +89 -0
- package/dist/splitter.dom.mjs +52 -0
- package/dist/splitter.machine.d.mts +7 -0
- package/dist/splitter.machine.d.ts +7 -0
- package/dist/splitter.machine.js +509 -0
- package/dist/splitter.machine.mjs +482 -0
- package/dist/splitter.props.d.mts +12 -0
- package/dist/splitter.props.d.ts +12 -0
- package/dist/splitter.props.js +63 -0
- package/dist/splitter.props.mjs +33 -0
- package/dist/splitter.types.d.mts +237 -0
- package/dist/splitter.types.d.ts +237 -0
- package/dist/splitter.types.js +18 -0
- package/dist/splitter.types.mjs +0 -0
- package/dist/utils/aria.d.mts +27 -0
- package/dist/utils/aria.d.ts +27 -0
- package/dist/utils/aria.js +79 -0
- package/dist/utils/aria.mjs +53 -0
- package/dist/utils/fuzzy.d.mts +10 -0
- package/dist/utils/fuzzy.d.ts +10 -0
- package/dist/utils/fuzzy.js +60 -0
- package/dist/utils/fuzzy.mjs +32 -0
- package/dist/utils/panel.d.mts +34 -0
- package/dist/utils/panel.d.ts +34 -0
- package/dist/utils/panel.js +147 -0
- package/dist/utils/panel.mjs +114 -0
- package/dist/utils/resize-by-delta.d.mts +20 -0
- package/dist/utils/resize-by-delta.d.ts +20 -0
- package/dist/utils/resize-by-delta.js +165 -0
- package/dist/utils/resize-by-delta.mjs +140 -0
- package/dist/utils/resize-panel.d.mts +16 -0
- package/dist/utils/resize-panel.d.ts +16 -0
- package/dist/utils/resize-panel.js +51 -0
- package/dist/utils/resize-panel.mjs +26 -0
- package/dist/utils/validate-sizes.d.mts +15 -0
- package/dist/utils/validate-sizes.d.ts +15 -0
- package/dist/utils/validate-sizes.js +72 -0
- package/dist/utils/validate-sizes.mjs +47 -0
- package/package.json +17 -7
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/utils/fuzzy.ts
|
|
21
|
+
var fuzzy_exports = {};
|
|
22
|
+
__export(fuzzy_exports, {
|
|
23
|
+
PRECISION: () => PRECISION,
|
|
24
|
+
fuzzyCompareNumbers: () => fuzzyCompareNumbers,
|
|
25
|
+
fuzzyNumbersEqual: () => fuzzyNumbersEqual,
|
|
26
|
+
fuzzySizeEqual: () => fuzzySizeEqual
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(fuzzy_exports);
|
|
29
|
+
var PRECISION = 10;
|
|
30
|
+
function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
|
|
31
|
+
if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
|
|
32
|
+
return 0;
|
|
33
|
+
} else {
|
|
34
|
+
return actual > expected ? 1 : -1;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
function fuzzyNumbersEqual(actual, expected, fractionDigits = PRECISION) {
|
|
38
|
+
if (actual == null || expected == null) return false;
|
|
39
|
+
return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
|
|
40
|
+
}
|
|
41
|
+
function fuzzySizeEqual(actual, expected, fractionDigits) {
|
|
42
|
+
if (actual.length !== expected.length) {
|
|
43
|
+
return false;
|
|
44
|
+
}
|
|
45
|
+
for (let index = 0; index < actual.length; index++) {
|
|
46
|
+
const actualSize = actual[index];
|
|
47
|
+
const expectedSize = expected[index];
|
|
48
|
+
if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
return true;
|
|
53
|
+
}
|
|
54
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
55
|
+
0 && (module.exports = {
|
|
56
|
+
PRECISION,
|
|
57
|
+
fuzzyCompareNumbers,
|
|
58
|
+
fuzzyNumbersEqual,
|
|
59
|
+
fuzzySizeEqual
|
|
60
|
+
});
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// src/utils/fuzzy.ts
|
|
2
|
+
var PRECISION = 10;
|
|
3
|
+
function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
|
|
4
|
+
if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
|
|
5
|
+
return 0;
|
|
6
|
+
} else {
|
|
7
|
+
return actual > expected ? 1 : -1;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
function fuzzyNumbersEqual(actual, expected, fractionDigits = PRECISION) {
|
|
11
|
+
if (actual == null || expected == null) return false;
|
|
12
|
+
return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
|
|
13
|
+
}
|
|
14
|
+
function fuzzySizeEqual(actual, expected, fractionDigits) {
|
|
15
|
+
if (actual.length !== expected.length) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
for (let index = 0; index < actual.length; index++) {
|
|
19
|
+
const actualSize = actual[index];
|
|
20
|
+
const expectedSize = expected[index];
|
|
21
|
+
if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return true;
|
|
26
|
+
}
|
|
27
|
+
export {
|
|
28
|
+
PRECISION,
|
|
29
|
+
fuzzyCompareNumbers,
|
|
30
|
+
fuzzyNumbersEqual,
|
|
31
|
+
fuzzySizeEqual
|
|
32
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Style } from '@zag-js/types';
|
|
2
|
+
import { PanelData, DragState, PanelId } from '../splitter.types.mjs';
|
|
3
|
+
import '@zag-js/core';
|
|
4
|
+
|
|
5
|
+
declare function getPanelById(panels: PanelData[], id: string): PanelData;
|
|
6
|
+
declare function findPanelDataIndex(panels: PanelData[], panel: PanelData): number;
|
|
7
|
+
declare function findPanelIndex(panels: PanelData[], id: string): number;
|
|
8
|
+
declare function panelDataHelper(panels: PanelData[], panel: PanelData, sizes: number[]): {
|
|
9
|
+
panelSize: number;
|
|
10
|
+
pivotIndices: number[];
|
|
11
|
+
id: PanelId;
|
|
12
|
+
order?: number | undefined;
|
|
13
|
+
minSize?: number | undefined;
|
|
14
|
+
maxSize?: number | undefined;
|
|
15
|
+
collapsible?: boolean | undefined;
|
|
16
|
+
collapsedSize?: number | undefined;
|
|
17
|
+
};
|
|
18
|
+
declare function sortPanels(panels: PanelData[]): PanelData[];
|
|
19
|
+
declare function getPanelLayout(panels: PanelData[]): string;
|
|
20
|
+
declare function serializePanels(panels: PanelData[]): string;
|
|
21
|
+
declare function getPanelFlexBoxStyle({ defaultSize, dragState, sizes, panels, panelIndex, precision, }: {
|
|
22
|
+
defaultSize: number | undefined;
|
|
23
|
+
sizes: number[];
|
|
24
|
+
dragState: DragState | null;
|
|
25
|
+
panels: PanelData[];
|
|
26
|
+
panelIndex: number;
|
|
27
|
+
precision?: number | undefined;
|
|
28
|
+
}): Style;
|
|
29
|
+
declare function getUnsafeDefaultSize({ panels, size: sizes }: {
|
|
30
|
+
panels: PanelData[];
|
|
31
|
+
size: number[];
|
|
32
|
+
}): number[];
|
|
33
|
+
|
|
34
|
+
export { findPanelDataIndex, findPanelIndex, getPanelById, getPanelFlexBoxStyle, getPanelLayout, getUnsafeDefaultSize, panelDataHelper, serializePanels, sortPanels };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { Style } from '@zag-js/types';
|
|
2
|
+
import { PanelData, DragState, PanelId } from '../splitter.types.js';
|
|
3
|
+
import '@zag-js/core';
|
|
4
|
+
|
|
5
|
+
declare function getPanelById(panels: PanelData[], id: string): PanelData;
|
|
6
|
+
declare function findPanelDataIndex(panels: PanelData[], panel: PanelData): number;
|
|
7
|
+
declare function findPanelIndex(panels: PanelData[], id: string): number;
|
|
8
|
+
declare function panelDataHelper(panels: PanelData[], panel: PanelData, sizes: number[]): {
|
|
9
|
+
panelSize: number;
|
|
10
|
+
pivotIndices: number[];
|
|
11
|
+
id: PanelId;
|
|
12
|
+
order?: number | undefined;
|
|
13
|
+
minSize?: number | undefined;
|
|
14
|
+
maxSize?: number | undefined;
|
|
15
|
+
collapsible?: boolean | undefined;
|
|
16
|
+
collapsedSize?: number | undefined;
|
|
17
|
+
};
|
|
18
|
+
declare function sortPanels(panels: PanelData[]): PanelData[];
|
|
19
|
+
declare function getPanelLayout(panels: PanelData[]): string;
|
|
20
|
+
declare function serializePanels(panels: PanelData[]): string;
|
|
21
|
+
declare function getPanelFlexBoxStyle({ defaultSize, dragState, sizes, panels, panelIndex, precision, }: {
|
|
22
|
+
defaultSize: number | undefined;
|
|
23
|
+
sizes: number[];
|
|
24
|
+
dragState: DragState | null;
|
|
25
|
+
panels: PanelData[];
|
|
26
|
+
panelIndex: number;
|
|
27
|
+
precision?: number | undefined;
|
|
28
|
+
}): Style;
|
|
29
|
+
declare function getUnsafeDefaultSize({ panels, size: sizes }: {
|
|
30
|
+
panels: PanelData[];
|
|
31
|
+
size: number[];
|
|
32
|
+
}): number[];
|
|
33
|
+
|
|
34
|
+
export { findPanelDataIndex, findPanelIndex, getPanelById, getPanelFlexBoxStyle, getPanelLayout, getUnsafeDefaultSize, panelDataHelper, serializePanels, sortPanels };
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/utils/panel.ts
|
|
21
|
+
var panel_exports = {};
|
|
22
|
+
__export(panel_exports, {
|
|
23
|
+
findPanelDataIndex: () => findPanelDataIndex,
|
|
24
|
+
findPanelIndex: () => findPanelIndex,
|
|
25
|
+
getPanelById: () => getPanelById,
|
|
26
|
+
getPanelFlexBoxStyle: () => getPanelFlexBoxStyle,
|
|
27
|
+
getPanelLayout: () => getPanelLayout,
|
|
28
|
+
getUnsafeDefaultSize: () => getUnsafeDefaultSize,
|
|
29
|
+
panelDataHelper: () => panelDataHelper,
|
|
30
|
+
serializePanels: () => serializePanels,
|
|
31
|
+
sortPanels: () => sortPanels
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(panel_exports);
|
|
34
|
+
var import_utils = require("@zag-js/utils");
|
|
35
|
+
function getPanelById(panels, id) {
|
|
36
|
+
const panel = panels.find((panel2) => panel2.id === id);
|
|
37
|
+
(0, import_utils.ensure)(panel, () => `Panel data not found for id "${id}"`);
|
|
38
|
+
return panel;
|
|
39
|
+
}
|
|
40
|
+
function findPanelDataIndex(panels, panel) {
|
|
41
|
+
return panels.findIndex((prevPanel) => prevPanel === panel || prevPanel.id === panel.id);
|
|
42
|
+
}
|
|
43
|
+
function findPanelIndex(panels, id) {
|
|
44
|
+
return panels.findIndex((panel) => panel.id === id);
|
|
45
|
+
}
|
|
46
|
+
function panelDataHelper(panels, panel, sizes) {
|
|
47
|
+
const index = findPanelIndex(panels, panel.id);
|
|
48
|
+
const pivotIndices = index === panels.length - 1 ? [index - 1, index] : [index, index + 1];
|
|
49
|
+
const panelSize = sizes[index];
|
|
50
|
+
return { ...panel, panelSize, pivotIndices };
|
|
51
|
+
}
|
|
52
|
+
function sortPanels(panels) {
|
|
53
|
+
return panels.sort((panelA, panelB) => {
|
|
54
|
+
const orderA = panelA.order;
|
|
55
|
+
const orderB = panelB.order;
|
|
56
|
+
if (orderA == null && orderB == null) {
|
|
57
|
+
return 0;
|
|
58
|
+
} else if (orderA == null) {
|
|
59
|
+
return -1;
|
|
60
|
+
} else if (orderB == null) {
|
|
61
|
+
return 1;
|
|
62
|
+
} else {
|
|
63
|
+
return orderA - orderB;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
function getPanelLayout(panels) {
|
|
68
|
+
return panels.map((panel) => panel.id).sort().join(":");
|
|
69
|
+
}
|
|
70
|
+
function serializePanels(panels) {
|
|
71
|
+
const keys = panels.map((panel) => panel.id);
|
|
72
|
+
const sortedKeys = keys.sort();
|
|
73
|
+
const serialized = sortedKeys.map((key) => {
|
|
74
|
+
const panel = panels.find((panel2) => panel2.id === key);
|
|
75
|
+
return JSON.stringify(panel);
|
|
76
|
+
});
|
|
77
|
+
return serialized.join(",");
|
|
78
|
+
}
|
|
79
|
+
function getPanelFlexBoxStyle({
|
|
80
|
+
defaultSize,
|
|
81
|
+
dragState,
|
|
82
|
+
sizes,
|
|
83
|
+
panels,
|
|
84
|
+
panelIndex,
|
|
85
|
+
precision = 3
|
|
86
|
+
}) {
|
|
87
|
+
const size = sizes[panelIndex];
|
|
88
|
+
let flexGrow;
|
|
89
|
+
if (size == null) {
|
|
90
|
+
flexGrow = defaultSize != void 0 ? defaultSize.toPrecision(precision) : "1";
|
|
91
|
+
} else if (panels.length === 1) {
|
|
92
|
+
flexGrow = "1";
|
|
93
|
+
} else {
|
|
94
|
+
flexGrow = size.toPrecision(precision);
|
|
95
|
+
}
|
|
96
|
+
return {
|
|
97
|
+
flexBasis: 0,
|
|
98
|
+
flexGrow,
|
|
99
|
+
flexShrink: 1,
|
|
100
|
+
// Without this, Panel sizes may be unintentionally overridden by their content
|
|
101
|
+
overflow: "hidden",
|
|
102
|
+
// Disable pointer events inside of a panel during resize
|
|
103
|
+
// This avoid edge cases like nested iframes
|
|
104
|
+
pointerEvents: dragState !== null ? "none" : void 0
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
function getUnsafeDefaultSize({ panels, size: sizes }) {
|
|
108
|
+
const finalSizes = Array(panels.length);
|
|
109
|
+
let numPanelsWithSizes = 0;
|
|
110
|
+
let remainingSize = 100;
|
|
111
|
+
for (let index = 0; index < panels.length; index++) {
|
|
112
|
+
const panel = panels[index];
|
|
113
|
+
(0, import_utils.ensure)(panel, () => `Panel data not found for index ${index}`);
|
|
114
|
+
const defaultSize = sizes[index];
|
|
115
|
+
if (defaultSize != null) {
|
|
116
|
+
numPanelsWithSizes++;
|
|
117
|
+
finalSizes[index] = defaultSize;
|
|
118
|
+
remainingSize -= defaultSize;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
for (let index = 0; index < panels.length; index++) {
|
|
122
|
+
const panel = panels[index];
|
|
123
|
+
(0, import_utils.ensure)(panel, () => `Panel data not found for index ${index}`);
|
|
124
|
+
const defaultSize = sizes[index];
|
|
125
|
+
if (defaultSize != null) {
|
|
126
|
+
continue;
|
|
127
|
+
}
|
|
128
|
+
const numRemainingPanels = panels.length - numPanelsWithSizes;
|
|
129
|
+
const size = remainingSize / numRemainingPanels;
|
|
130
|
+
numPanelsWithSizes++;
|
|
131
|
+
finalSizes[index] = size;
|
|
132
|
+
remainingSize -= size;
|
|
133
|
+
}
|
|
134
|
+
return finalSizes;
|
|
135
|
+
}
|
|
136
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
137
|
+
0 && (module.exports = {
|
|
138
|
+
findPanelDataIndex,
|
|
139
|
+
findPanelIndex,
|
|
140
|
+
getPanelById,
|
|
141
|
+
getPanelFlexBoxStyle,
|
|
142
|
+
getPanelLayout,
|
|
143
|
+
getUnsafeDefaultSize,
|
|
144
|
+
panelDataHelper,
|
|
145
|
+
serializePanels,
|
|
146
|
+
sortPanels
|
|
147
|
+
});
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
// src/utils/panel.ts
|
|
2
|
+
import { ensure } from "@zag-js/utils";
|
|
3
|
+
function getPanelById(panels, id) {
|
|
4
|
+
const panel = panels.find((panel2) => panel2.id === id);
|
|
5
|
+
ensure(panel, () => `Panel data not found for id "${id}"`);
|
|
6
|
+
return panel;
|
|
7
|
+
}
|
|
8
|
+
function findPanelDataIndex(panels, panel) {
|
|
9
|
+
return panels.findIndex((prevPanel) => prevPanel === panel || prevPanel.id === panel.id);
|
|
10
|
+
}
|
|
11
|
+
function findPanelIndex(panels, id) {
|
|
12
|
+
return panels.findIndex((panel) => panel.id === id);
|
|
13
|
+
}
|
|
14
|
+
function panelDataHelper(panels, panel, sizes) {
|
|
15
|
+
const index = findPanelIndex(panels, panel.id);
|
|
16
|
+
const pivotIndices = index === panels.length - 1 ? [index - 1, index] : [index, index + 1];
|
|
17
|
+
const panelSize = sizes[index];
|
|
18
|
+
return { ...panel, panelSize, pivotIndices };
|
|
19
|
+
}
|
|
20
|
+
function sortPanels(panels) {
|
|
21
|
+
return panels.sort((panelA, panelB) => {
|
|
22
|
+
const orderA = panelA.order;
|
|
23
|
+
const orderB = panelB.order;
|
|
24
|
+
if (orderA == null && orderB == null) {
|
|
25
|
+
return 0;
|
|
26
|
+
} else if (orderA == null) {
|
|
27
|
+
return -1;
|
|
28
|
+
} else if (orderB == null) {
|
|
29
|
+
return 1;
|
|
30
|
+
} else {
|
|
31
|
+
return orderA - orderB;
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
function getPanelLayout(panels) {
|
|
36
|
+
return panels.map((panel) => panel.id).sort().join(":");
|
|
37
|
+
}
|
|
38
|
+
function serializePanels(panels) {
|
|
39
|
+
const keys = panels.map((panel) => panel.id);
|
|
40
|
+
const sortedKeys = keys.sort();
|
|
41
|
+
const serialized = sortedKeys.map((key) => {
|
|
42
|
+
const panel = panels.find((panel2) => panel2.id === key);
|
|
43
|
+
return JSON.stringify(panel);
|
|
44
|
+
});
|
|
45
|
+
return serialized.join(",");
|
|
46
|
+
}
|
|
47
|
+
function getPanelFlexBoxStyle({
|
|
48
|
+
defaultSize,
|
|
49
|
+
dragState,
|
|
50
|
+
sizes,
|
|
51
|
+
panels,
|
|
52
|
+
panelIndex,
|
|
53
|
+
precision = 3
|
|
54
|
+
}) {
|
|
55
|
+
const size = sizes[panelIndex];
|
|
56
|
+
let flexGrow;
|
|
57
|
+
if (size == null) {
|
|
58
|
+
flexGrow = defaultSize != void 0 ? defaultSize.toPrecision(precision) : "1";
|
|
59
|
+
} else if (panels.length === 1) {
|
|
60
|
+
flexGrow = "1";
|
|
61
|
+
} else {
|
|
62
|
+
flexGrow = size.toPrecision(precision);
|
|
63
|
+
}
|
|
64
|
+
return {
|
|
65
|
+
flexBasis: 0,
|
|
66
|
+
flexGrow,
|
|
67
|
+
flexShrink: 1,
|
|
68
|
+
// Without this, Panel sizes may be unintentionally overridden by their content
|
|
69
|
+
overflow: "hidden",
|
|
70
|
+
// Disable pointer events inside of a panel during resize
|
|
71
|
+
// This avoid edge cases like nested iframes
|
|
72
|
+
pointerEvents: dragState !== null ? "none" : void 0
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
function getUnsafeDefaultSize({ panels, size: sizes }) {
|
|
76
|
+
const finalSizes = Array(panels.length);
|
|
77
|
+
let numPanelsWithSizes = 0;
|
|
78
|
+
let remainingSize = 100;
|
|
79
|
+
for (let index = 0; index < panels.length; index++) {
|
|
80
|
+
const panel = panels[index];
|
|
81
|
+
ensure(panel, () => `Panel data not found for index ${index}`);
|
|
82
|
+
const defaultSize = sizes[index];
|
|
83
|
+
if (defaultSize != null) {
|
|
84
|
+
numPanelsWithSizes++;
|
|
85
|
+
finalSizes[index] = defaultSize;
|
|
86
|
+
remainingSize -= defaultSize;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
for (let index = 0; index < panels.length; index++) {
|
|
90
|
+
const panel = panels[index];
|
|
91
|
+
ensure(panel, () => `Panel data not found for index ${index}`);
|
|
92
|
+
const defaultSize = sizes[index];
|
|
93
|
+
if (defaultSize != null) {
|
|
94
|
+
continue;
|
|
95
|
+
}
|
|
96
|
+
const numRemainingPanels = panels.length - numPanelsWithSizes;
|
|
97
|
+
const size = remainingSize / numRemainingPanels;
|
|
98
|
+
numPanelsWithSizes++;
|
|
99
|
+
finalSizes[index] = size;
|
|
100
|
+
remainingSize -= size;
|
|
101
|
+
}
|
|
102
|
+
return finalSizes;
|
|
103
|
+
}
|
|
104
|
+
export {
|
|
105
|
+
findPanelDataIndex,
|
|
106
|
+
findPanelIndex,
|
|
107
|
+
getPanelById,
|
|
108
|
+
getPanelFlexBoxStyle,
|
|
109
|
+
getPanelLayout,
|
|
110
|
+
getUnsafeDefaultSize,
|
|
111
|
+
panelDataHelper,
|
|
112
|
+
serializePanels,
|
|
113
|
+
sortPanels
|
|
114
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { PanelData } from '../splitter.types.mjs';
|
|
2
|
+
import '@zag-js/core';
|
|
3
|
+
import '@zag-js/types';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* This code was modified from react-resizable-panels by Brian Vaughn
|
|
7
|
+
* @see https://github.com/bvaughn/react-resizable-panels
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
interface Layout {
|
|
11
|
+
delta: number;
|
|
12
|
+
initialSize: number[];
|
|
13
|
+
panels: PanelData[];
|
|
14
|
+
pivotIndices: number[];
|
|
15
|
+
prevSize: number[];
|
|
16
|
+
trigger: "imperative-api" | "keyboard" | "mouse-or-touch";
|
|
17
|
+
}
|
|
18
|
+
declare function resizeByDelta(props: Layout): number[];
|
|
19
|
+
|
|
20
|
+
export { resizeByDelta };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { PanelData } from '../splitter.types.js';
|
|
2
|
+
import '@zag-js/core';
|
|
3
|
+
import '@zag-js/types';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* This code was modified from react-resizable-panels by Brian Vaughn
|
|
7
|
+
* @see https://github.com/bvaughn/react-resizable-panels
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
interface Layout {
|
|
11
|
+
delta: number;
|
|
12
|
+
initialSize: number[];
|
|
13
|
+
panels: PanelData[];
|
|
14
|
+
pivotIndices: number[];
|
|
15
|
+
prevSize: number[];
|
|
16
|
+
trigger: "imperative-api" | "keyboard" | "mouse-or-touch";
|
|
17
|
+
}
|
|
18
|
+
declare function resizeByDelta(props: Layout): number[];
|
|
19
|
+
|
|
20
|
+
export { resizeByDelta };
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/utils/resize-by-delta.ts
|
|
21
|
+
var resize_by_delta_exports = {};
|
|
22
|
+
__export(resize_by_delta_exports, {
|
|
23
|
+
resizeByDelta: () => resizeByDelta
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(resize_by_delta_exports);
|
|
26
|
+
var import_utils = require("@zag-js/utils");
|
|
27
|
+
var import_fuzzy = require("./fuzzy.cjs");
|
|
28
|
+
var import_resize_panel = require("./resize-panel.cjs");
|
|
29
|
+
function resizeByDelta(props) {
|
|
30
|
+
let { delta, initialSize, panels, pivotIndices, prevSize, trigger } = props;
|
|
31
|
+
if ((0, import_fuzzy.fuzzyNumbersEqual)(delta, 0)) {
|
|
32
|
+
return initialSize;
|
|
33
|
+
}
|
|
34
|
+
const nextSize = [...initialSize];
|
|
35
|
+
const [firstPivotIndex, secondPivotIndex] = pivotIndices;
|
|
36
|
+
(0, import_utils.ensure)(firstPivotIndex, () => "Invalid first pivot index");
|
|
37
|
+
(0, import_utils.ensure)(secondPivotIndex, () => "Invalid second pivot index");
|
|
38
|
+
let deltaApplied = 0;
|
|
39
|
+
{
|
|
40
|
+
if (trigger === "keyboard") {
|
|
41
|
+
{
|
|
42
|
+
const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
43
|
+
const panel = panels[index];
|
|
44
|
+
(0, import_utils.ensure)(panel, () => `Panel data not found for index ${index}`);
|
|
45
|
+
const { collapsedSize = 0, collapsible, minSize = 0 } = panel;
|
|
46
|
+
if (collapsible) {
|
|
47
|
+
const prevSize2 = initialSize[index];
|
|
48
|
+
(0, import_utils.ensure)(prevSize2, () => `Previous size not found for panel index ${index}`);
|
|
49
|
+
if ((0, import_fuzzy.fuzzyNumbersEqual)(prevSize2, collapsedSize)) {
|
|
50
|
+
const localDelta = minSize - prevSize2;
|
|
51
|
+
if ((0, import_fuzzy.fuzzyCompareNumbers)(localDelta, Math.abs(delta)) > 0) {
|
|
52
|
+
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
{
|
|
58
|
+
const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
|
|
59
|
+
const panel = panels[index];
|
|
60
|
+
(0, import_utils.ensure)(panel, () => `No panel data found for index ${index}`);
|
|
61
|
+
const { collapsedSize = 0, collapsible, minSize = 0 } = panel;
|
|
62
|
+
if (collapsible) {
|
|
63
|
+
const prevSize2 = initialSize[index];
|
|
64
|
+
(0, import_utils.ensure)(prevSize2, () => `Previous size not found for panel index ${index}`);
|
|
65
|
+
if ((0, import_fuzzy.fuzzyNumbersEqual)(prevSize2, minSize)) {
|
|
66
|
+
const localDelta = prevSize2 - collapsedSize;
|
|
67
|
+
if ((0, import_fuzzy.fuzzyCompareNumbers)(localDelta, Math.abs(delta)) > 0) {
|
|
68
|
+
delta = delta < 0 ? 0 - localDelta : localDelta;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
{
|
|
76
|
+
const increment = delta < 0 ? 1 : -1;
|
|
77
|
+
let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
78
|
+
let maxAvailableDelta = 0;
|
|
79
|
+
while (true) {
|
|
80
|
+
const prevSize2 = initialSize[index];
|
|
81
|
+
(0, import_utils.ensure)(prevSize2, () => `Previous size not found for panel index ${index}`);
|
|
82
|
+
const maxSafeSize = (0, import_resize_panel.resizePanel)({
|
|
83
|
+
panels,
|
|
84
|
+
index,
|
|
85
|
+
size: 100
|
|
86
|
+
});
|
|
87
|
+
const delta2 = maxSafeSize - prevSize2;
|
|
88
|
+
maxAvailableDelta += delta2;
|
|
89
|
+
index += increment;
|
|
90
|
+
if (index < 0 || index >= panels.length) {
|
|
91
|
+
break;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
|
|
95
|
+
delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
|
|
96
|
+
}
|
|
97
|
+
{
|
|
98
|
+
const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
|
|
99
|
+
let index = pivotIndex;
|
|
100
|
+
while (index >= 0 && index < panels.length) {
|
|
101
|
+
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
102
|
+
const prevSize2 = initialSize[index];
|
|
103
|
+
(0, import_utils.ensure)(prevSize2, () => `Previous size not found for panel index ${index}`);
|
|
104
|
+
const unsafeSize = prevSize2 - deltaRemaining;
|
|
105
|
+
const safeSize = (0, import_resize_panel.resizePanel)({ panels, index, size: unsafeSize });
|
|
106
|
+
if (!(0, import_fuzzy.fuzzyNumbersEqual)(prevSize2, safeSize)) {
|
|
107
|
+
deltaApplied += prevSize2 - safeSize;
|
|
108
|
+
nextSize[index] = safeSize;
|
|
109
|
+
if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), void 0, {
|
|
110
|
+
numeric: true
|
|
111
|
+
}) >= 0) {
|
|
112
|
+
break;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
if (delta < 0) {
|
|
116
|
+
index--;
|
|
117
|
+
} else {
|
|
118
|
+
index++;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
if ((0, import_fuzzy.fuzzySizeEqual)(prevSize, nextSize)) {
|
|
123
|
+
return prevSize;
|
|
124
|
+
}
|
|
125
|
+
{
|
|
126
|
+
const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
127
|
+
const prevSize2 = initialSize[pivotIndex];
|
|
128
|
+
(0, import_utils.ensure)(prevSize2, () => `Previous size not found for panel index ${pivotIndex}`);
|
|
129
|
+
const unsafeSize = prevSize2 + deltaApplied;
|
|
130
|
+
const safeSize = (0, import_resize_panel.resizePanel)({ panels, index: pivotIndex, size: unsafeSize });
|
|
131
|
+
nextSize[pivotIndex] = safeSize;
|
|
132
|
+
if (!(0, import_fuzzy.fuzzyNumbersEqual)(safeSize, unsafeSize)) {
|
|
133
|
+
let deltaRemaining = unsafeSize - safeSize;
|
|
134
|
+
const pivotIndex2 = delta < 0 ? secondPivotIndex : firstPivotIndex;
|
|
135
|
+
let index = pivotIndex2;
|
|
136
|
+
while (index >= 0 && index < panels.length) {
|
|
137
|
+
const prevSize3 = nextSize[index];
|
|
138
|
+
(0, import_utils.ensure)(prevSize3, () => `Previous size not found for panel index ${index}`);
|
|
139
|
+
const unsafeSize2 = prevSize3 + deltaRemaining;
|
|
140
|
+
const safeSize2 = (0, import_resize_panel.resizePanel)({ panels, index, size: unsafeSize2 });
|
|
141
|
+
if (!(0, import_fuzzy.fuzzyNumbersEqual)(prevSize3, safeSize2)) {
|
|
142
|
+
deltaRemaining -= safeSize2 - prevSize3;
|
|
143
|
+
nextSize[index] = safeSize2;
|
|
144
|
+
}
|
|
145
|
+
if ((0, import_fuzzy.fuzzyNumbersEqual)(deltaRemaining, 0)) {
|
|
146
|
+
break;
|
|
147
|
+
}
|
|
148
|
+
if (delta > 0) {
|
|
149
|
+
index--;
|
|
150
|
+
} else {
|
|
151
|
+
index++;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
const totalSize = nextSize.reduce((total, size) => size + total, 0);
|
|
157
|
+
if (!(0, import_fuzzy.fuzzyNumbersEqual)(totalSize, 100)) {
|
|
158
|
+
return prevSize;
|
|
159
|
+
}
|
|
160
|
+
return nextSize;
|
|
161
|
+
}
|
|
162
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
163
|
+
0 && (module.exports = {
|
|
164
|
+
resizeByDelta
|
|
165
|
+
});
|