@thangdevalone/meet-layout-grid-core 1.0.9 → 1.1.1
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/README.md +40 -63
- package/dist/index.cjs +591 -275
- package/dist/index.d.cts +154 -14
- package/dist/index.d.mts +154 -14
- package/dist/index.d.ts +154 -14
- package/dist/index.mjs +589 -276
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# @thangdevalone/meet-layout-grid-core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Framework-agnostic grid calculation engine for meet-layout-grid. Zero dependencies.
|
|
4
|
+
|
|
5
|
+
> For full documentation, examples, and API reference, see the [main README](https://github.com/thangdevalone/meet-layout-grid#readme).
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
@@ -11,80 +13,55 @@ npm install @thangdevalone/meet-layout-grid-core
|
|
|
11
13
|
## Usage
|
|
12
14
|
|
|
13
15
|
```typescript
|
|
14
|
-
import { createMeetGrid
|
|
16
|
+
import { createMeetGrid } from '@thangdevalone/meet-layout-grid-core'
|
|
15
17
|
|
|
16
|
-
|
|
17
|
-
const grid = createGrid({
|
|
18
|
+
const grid = createMeetGrid({
|
|
18
19
|
dimensions: { width: 800, height: 600 },
|
|
19
20
|
count: 6,
|
|
20
21
|
aspectRatio: '16:9',
|
|
21
22
|
gap: 8,
|
|
23
|
+
layoutMode: 'gallery',
|
|
24
|
+
pinnedIndex: 0,
|
|
25
|
+
othersPosition: 'bottom',
|
|
22
26
|
})
|
|
23
27
|
|
|
24
|
-
console.log(`Item size: ${grid.width}x${grid.height}`)
|
|
25
|
-
console.log(`Grid: ${grid.cols} cols, ${grid.rows} rows`)
|
|
26
|
-
|
|
27
28
|
for (let i = 0; i < 6; i++) {
|
|
28
29
|
const { top, left } = grid.getPosition(i)
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
// Meet-style grid with layout modes
|
|
33
|
-
const meetGrid = createMeetGrid({
|
|
34
|
-
dimensions: { width: 800, height: 600 },
|
|
35
|
-
count: 6,
|
|
36
|
-
aspectRatio: '16:9',
|
|
37
|
-
gap: 8,
|
|
38
|
-
layoutMode: 'speaker', // 'gallery' | 'speaker' | 'spotlight' | 'sidebar'
|
|
39
|
-
speakerIndex: 0,
|
|
40
|
-
})
|
|
41
|
-
|
|
42
|
-
for (let i = 0; i < 6; i++) {
|
|
43
|
-
const { width, height } = meetGrid.getItemDimensions(i)
|
|
44
|
-
const isMain = meetGrid.isMainItem(i)
|
|
45
|
-
console.log(`Item ${i}: ${width}x${height}, main: ${isMain}`)
|
|
30
|
+
const { width, height } = grid.getItemDimensions(i)
|
|
31
|
+
const isMain = grid.isMainItem(i)
|
|
32
|
+
console.log(`Item ${i}: ${width}x${height} at (${left}, ${top}), main: ${isMain}`)
|
|
46
33
|
}
|
|
47
34
|
```
|
|
48
35
|
|
|
49
|
-
##
|
|
50
|
-
|
|
51
|
-
###
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
- `layoutMode`
|
|
79
|
-
- `getItemDimensions(index): { width, height }`
|
|
80
|
-
- `isMainItem(index): boolean`
|
|
81
|
-
|
|
82
|
-
## Layout modes
|
|
83
|
-
|
|
84
|
-
- **gallery** — Same-size tiles in a grid
|
|
85
|
-
- **speaker** — One large tile (~65% height), rest below
|
|
86
|
-
- **spotlight** — One participant only
|
|
87
|
-
- **sidebar** — Main area + thumbnail strip
|
|
36
|
+
## Exports
|
|
37
|
+
|
|
38
|
+
### Functions
|
|
39
|
+
|
|
40
|
+
| Function | Description |
|
|
41
|
+
| ------------------------------- | -------------------------------------------- |
|
|
42
|
+
| `createMeetGrid(options)` | Full meet-style grid with layout modes |
|
|
43
|
+
| `createGrid(options)` | Basic responsive grid (no layout modes) |
|
|
44
|
+
| `getAspectRatio(ratio)` | Parse aspect ratio string to numeric value |
|
|
45
|
+
| `getGridItemDimensions(…)` | Get dimensions for a specific grid item |
|
|
46
|
+
| `createGridItemPositioner(…)` | Create a reusable position calculator |
|
|
47
|
+
| `getSpringConfig(preset)` | Get spring animation config from preset name |
|
|
48
|
+
| `calculateContentDimensions(…)` | Calculate content size within a cell |
|
|
49
|
+
|
|
50
|
+
### Types
|
|
51
|
+
|
|
52
|
+
| Type | Description |
|
|
53
|
+
| ------------------- | ------------------------------------------ |
|
|
54
|
+
| `MeetGridOptions` | Options for `createMeetGrid` |
|
|
55
|
+
| `MeetGridResult` | Return type of `createMeetGrid` |
|
|
56
|
+
| `GridOptions` | Options for `createGrid` |
|
|
57
|
+
| `GridResult` | Return type of `createGrid` |
|
|
58
|
+
| `GridDimensions` | `{ width, height }` |
|
|
59
|
+
| `Position` | `{ top, left }` |
|
|
60
|
+
| `LayoutMode` | `'gallery' \| 'spotlight'` |
|
|
61
|
+
| `ItemAspectRatio` | `string \| 'auto'` |
|
|
62
|
+
| `ContentDimensions` | `{ width, height, offsetTop, offsetLeft }` |
|
|
63
|
+
| `PaginationInfo` | Pagination state details |
|
|
64
|
+
| `SpringPreset` | Animation preset names |
|
|
88
65
|
|
|
89
66
|
## License
|
|
90
67
|
|