@zag-js/splitter 0.70.0 → 0.71.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.js +36 -82
- package/dist/index.mjs +9 -30
- package/package.json +9 -10
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/index.ts +0 -14
- package/src/splitter.anatomy.ts +0 -5
- package/src/splitter.connect.ts +0 -179
- package/src/splitter.dom.ts +0 -61
- package/src/splitter.machine.ts +0 -285
- package/src/splitter.props.ts +0 -22
- package/src/splitter.types.ts +0 -156
- package/src/splitter.utils.ts +0 -143
package/src/splitter.utils.ts
DELETED
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import type { MachineContext as Ctx, NormalizedPanelData } from "./splitter.types"
|
|
2
|
-
|
|
3
|
-
function validateSize(key: string, size: number) {
|
|
4
|
-
if (Math.floor(size) > 100) {
|
|
5
|
-
throw new Error(`Total ${key} of panels cannot be greater than 100`)
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export function getNormalizedPanels(ctx: Ctx): NormalizedPanelData {
|
|
10
|
-
let numOfPanelsWithoutSize = 0
|
|
11
|
-
let totalSize = 0
|
|
12
|
-
let totalMinSize = 0
|
|
13
|
-
|
|
14
|
-
const panels = ctx.size.map((panel) => {
|
|
15
|
-
const minSize = panel.minSize ?? 0
|
|
16
|
-
const maxSize = panel.maxSize ?? 100
|
|
17
|
-
|
|
18
|
-
totalMinSize += minSize
|
|
19
|
-
|
|
20
|
-
if (panel.size == null) {
|
|
21
|
-
numOfPanelsWithoutSize++
|
|
22
|
-
} else {
|
|
23
|
-
totalSize += panel.size
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
return {
|
|
27
|
-
...panel,
|
|
28
|
-
minSize,
|
|
29
|
-
maxSize,
|
|
30
|
-
}
|
|
31
|
-
})
|
|
32
|
-
|
|
33
|
-
validateSize("minSize", totalMinSize)
|
|
34
|
-
validateSize("size", totalSize)
|
|
35
|
-
|
|
36
|
-
let end = 0
|
|
37
|
-
let remainingSize = 0
|
|
38
|
-
|
|
39
|
-
const result = panels.map((panel) => {
|
|
40
|
-
let start = end
|
|
41
|
-
|
|
42
|
-
if (panel.size != null) {
|
|
43
|
-
end += panel.size
|
|
44
|
-
remainingSize = panel.size - panel.minSize
|
|
45
|
-
return {
|
|
46
|
-
...panel,
|
|
47
|
-
start,
|
|
48
|
-
end,
|
|
49
|
-
remainingSize,
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
const size = (100 - totalSize) / numOfPanelsWithoutSize
|
|
54
|
-
end += size
|
|
55
|
-
remainingSize = size - panel.minSize
|
|
56
|
-
|
|
57
|
-
return { ...panel, size, start, end, remainingSize }
|
|
58
|
-
})
|
|
59
|
-
|
|
60
|
-
return result as NormalizedPanelData
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
export function getHandlePanels(ctx: Ctx, id = ctx.activeResizeId) {
|
|
64
|
-
const [beforeId, afterId] = id?.split(":") ?? []
|
|
65
|
-
if (!beforeId || !afterId) return
|
|
66
|
-
|
|
67
|
-
const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId)
|
|
68
|
-
const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId)
|
|
69
|
-
if (beforeIndex === -1 || afterIndex === -1) return
|
|
70
|
-
|
|
71
|
-
const before = ctx.previousPanels[beforeIndex]
|
|
72
|
-
const after = ctx.previousPanels[afterIndex]
|
|
73
|
-
|
|
74
|
-
return {
|
|
75
|
-
before: {
|
|
76
|
-
...before,
|
|
77
|
-
index: beforeIndex,
|
|
78
|
-
},
|
|
79
|
-
after: {
|
|
80
|
-
...after,
|
|
81
|
-
index: afterIndex,
|
|
82
|
-
},
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
export function getHandleBounds(ctx: Ctx, id = ctx.activeResizeId) {
|
|
87
|
-
const panels = getHandlePanels(ctx, id)
|
|
88
|
-
if (!panels) return
|
|
89
|
-
|
|
90
|
-
const { before, after } = panels
|
|
91
|
-
|
|
92
|
-
return {
|
|
93
|
-
min: Math.max(before.start + before.minSize, after.end - after.maxSize),
|
|
94
|
-
max: Math.min(after.end - after.minSize, before.maxSize + before.start),
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
export function getPanelBounds(ctx: Ctx, id?: string | null) {
|
|
99
|
-
const bounds = getHandleBounds(ctx, id)
|
|
100
|
-
const panels = getHandlePanels(ctx, id)
|
|
101
|
-
|
|
102
|
-
if (!bounds || !panels) return
|
|
103
|
-
const { before, after } = panels
|
|
104
|
-
|
|
105
|
-
const beforeMin = Math.abs(before.start - bounds.min)
|
|
106
|
-
const afterMin = after.size + (before.size - beforeMin)
|
|
107
|
-
|
|
108
|
-
const beforeMax = Math.abs(before.start - bounds.max)
|
|
109
|
-
const afterMax = after.size - (beforeMax - before.size)
|
|
110
|
-
|
|
111
|
-
return {
|
|
112
|
-
before: {
|
|
113
|
-
index: before.index,
|
|
114
|
-
min: beforeMin,
|
|
115
|
-
max: beforeMax,
|
|
116
|
-
isAtMin: beforeMin === before.size,
|
|
117
|
-
isAtMax: beforeMax === before.size,
|
|
118
|
-
up(step: number) {
|
|
119
|
-
return Math.min(before.size + step, beforeMax)
|
|
120
|
-
},
|
|
121
|
-
down(step: number) {
|
|
122
|
-
return Math.max(before.size - step, beforeMin)
|
|
123
|
-
},
|
|
124
|
-
},
|
|
125
|
-
after: {
|
|
126
|
-
index: after.index,
|
|
127
|
-
min: afterMin,
|
|
128
|
-
max: afterMax,
|
|
129
|
-
isAtMin: afterMin === after.size,
|
|
130
|
-
isAtMax: afterMax === after.size,
|
|
131
|
-
up(step: number) {
|
|
132
|
-
return Math.min(after.size + step, afterMin)
|
|
133
|
-
},
|
|
134
|
-
down(step: number) {
|
|
135
|
-
return Math.max(after.size - step, afterMax)
|
|
136
|
-
},
|
|
137
|
-
},
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
export function clamp(value: number, min: number, max: number) {
|
|
142
|
-
return Math.min(Math.max(value, min), max)
|
|
143
|
-
}
|