@thangdevalone/meet-layout-grid-core 1.1.0 → 1.2.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/README.md +40 -62
- package/dist/index.cjs +247 -392
- package/dist/index.d.cts +18 -87
- package/dist/index.d.mts +18 -87
- package/dist/index.d.ts +18 -87
- package/dist/index.mjs +248 -391
- 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,79 +13,55 @@ npm install @thangdevalone/meet-layout-grid-core
|
|
|
11
13
|
## Usage
|
|
12
14
|
|
|
13
15
|
```typescript
|
|
14
|
-
import { createMeetGrid
|
|
15
|
-
|
|
16
|
-
// Simple grid
|
|
17
|
-
const grid = createGrid({
|
|
18
|
-
dimensions: { width: 800, height: 600 },
|
|
19
|
-
count: 6,
|
|
20
|
-
aspectRatio: '16:9',
|
|
21
|
-
gap: 8,
|
|
22
|
-
})
|
|
23
|
-
|
|
24
|
-
console.log(`Item size: ${grid.width}x${grid.height}`)
|
|
25
|
-
console.log(`Grid: ${grid.cols} cols, ${grid.rows} rows`)
|
|
26
|
-
|
|
27
|
-
for (let i = 0; i < 6; i++) {
|
|
28
|
-
const { top, left } = grid.getPosition(i)
|
|
29
|
-
console.log(`Item ${i}: top=${top}, left=${left}`)
|
|
30
|
-
}
|
|
16
|
+
import { createMeetGrid } from '@thangdevalone/meet-layout-grid-core'
|
|
31
17
|
|
|
32
|
-
|
|
33
|
-
const meetGrid = createMeetGrid({
|
|
18
|
+
const grid = createMeetGrid({
|
|
34
19
|
dimensions: { width: 800, height: 600 },
|
|
35
20
|
count: 6,
|
|
36
21
|
aspectRatio: '16:9',
|
|
37
22
|
gap: 8,
|
|
38
|
-
layoutMode: '
|
|
39
|
-
sidebarPosition: 'bottom', // 'left' | 'right' | 'top' | 'bottom'
|
|
23
|
+
layoutMode: 'gallery',
|
|
40
24
|
pinnedIndex: 0,
|
|
25
|
+
othersPosition: 'bottom',
|
|
41
26
|
})
|
|
42
27
|
|
|
43
28
|
for (let i = 0; i < 6; i++) {
|
|
44
|
-
const {
|
|
45
|
-
const
|
|
46
|
-
|
|
29
|
+
const { top, left } = grid.getPosition(i)
|
|
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}`)
|
|
47
33
|
}
|
|
48
34
|
```
|
|
49
35
|
|
|
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
|
-
|
|
79
|
-
- `getItemDimensions(index): { width, height }`
|
|
80
|
-
- `isMainItem(index): boolean`
|
|
81
|
-
|
|
82
|
-
## Layout modes
|
|
83
|
-
|
|
84
|
-
- **gallery** — Same-size tiles in a grid (use `pinnedIndex` for pin mode)
|
|
85
|
-
- **spotlight** — One participant only
|
|
86
|
-
- **sidebar** — Main area + thumbnail strip (use `sidebarPosition: 'bottom'` for speaker-like layout)
|
|
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 |
|
|
87
65
|
|
|
88
66
|
## License
|
|
89
67
|
|