@sqlrooms/layout 0.6.0 → 0.7.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 +89 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
This package is part of the SQLRooms framework and provides flexible layout components for building complex, resizable, and draggable interfaces.
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
The `@sqlrooms/layout` package offers a set of components and utilities for creating dynamic, multi-pane layouts in SQLRooms applications. It's primarily built around the [react-mosaic](https://nomcopter.github.io/react-mosaic/) library, which provides a powerful windowing system similar to the one found in advanced IDEs.
|
|
6
|
+
|
|
7
|
+
> **Note:** This package uses [react-mosaic](https://nomcopter.github.io/react-mosaic/) which should not be confused with [uwdata/mosaic](https://github.com/uwdata/mosaic) used in the [`@sqlrooms/mosaic`](/api/mosaic/) package for data visualization purposes.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @sqlrooms/layout
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Mosaic Tree Structure
|
|
16
|
+
|
|
17
|
+
The mosaic layout is defined by a tree structure where each node is either a string (representing a panel ID) or an object with `direction`, `first`, `second`, and optional `splitPercentage` properties. Here's an example of how a mosaic tree might look:
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
// Simple two-panel layout with 30/70 split
|
|
21
|
+
const simpleMosaicTree = {
|
|
22
|
+
direction: 'row',
|
|
23
|
+
first: 'data-sources', // Left panel (30% width)
|
|
24
|
+
second: 'main', // Right panel (70% width)
|
|
25
|
+
splitPercentage: 30,
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
// More complex nested layout
|
|
29
|
+
const complexMosaicTree = {
|
|
30
|
+
direction: 'row',
|
|
31
|
+
first: 'data-sources', // Left panel
|
|
32
|
+
second: {
|
|
33
|
+
// Right side contains a nested layout
|
|
34
|
+
direction: 'column',
|
|
35
|
+
first: 'main', // Top panel
|
|
36
|
+
second: {
|
|
37
|
+
// Bottom contains another nested layout
|
|
38
|
+
direction: 'row',
|
|
39
|
+
first: 'sql-editor',
|
|
40
|
+
second: 'visualization',
|
|
41
|
+
splitPercentage: 50,
|
|
42
|
+
},
|
|
43
|
+
splitPercentage: 60,
|
|
44
|
+
},
|
|
45
|
+
splitPercentage: 20,
|
|
46
|
+
};
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Components
|
|
50
|
+
|
|
51
|
+
### MosaicLayout
|
|
52
|
+
|
|
53
|
+
A wrapper around the `Mosaic` component from react-mosaic-component that provides a customized look and feel consistent with SQLRooms styling.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import {MosaicLayout} from '@sqlrooms/layout';
|
|
57
|
+
|
|
58
|
+
// Example usage
|
|
59
|
+
<MosaicLayout
|
|
60
|
+
renderTile={(id, path) => <YourTileContent id={id} />}
|
|
61
|
+
value={yourMosaicTree}
|
|
62
|
+
onChange={handleLayoutChange}
|
|
63
|
+
/>;
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### MosaicTile
|
|
67
|
+
|
|
68
|
+
A component for rendering individual tiles within the mosaic layout.
|
|
69
|
+
|
|
70
|
+
## Utility Functions
|
|
71
|
+
|
|
72
|
+
The package provides several utility functions for working with mosaic layouts:
|
|
73
|
+
|
|
74
|
+
- `makeMosaicStack`: Creates a stack of mosaic nodes with specified weights and direction
|
|
75
|
+
- `visitMosaicLeafNodes`: Traverses all leaf nodes in a mosaic tree
|
|
76
|
+
- `getVisibleMosaicLayoutPanels`: Gets an array of all visible panel IDs
|
|
77
|
+
- `findMosaicNodePathByKey`: Finds the path to a specific node by its key
|
|
78
|
+
- `removeMosaicNodeByKey`: Removes a node from the mosaic tree by its key
|
|
79
|
+
|
|
80
|
+
## Learn More
|
|
81
|
+
|
|
82
|
+
For more information about the underlying react-mosaic library, visit:
|
|
83
|
+
|
|
84
|
+
- [react-mosaic documentation](https://nomcopter.github.io/react-mosaic/)
|
|
85
|
+
- [react-mosaic GitHub repository](https://github.com/nomcopter/react-mosaic)
|
|
86
|
+
|
|
87
|
+
## License
|
|
88
|
+
|
|
89
|
+
MIT
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,UAAU,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,UAAU,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport * from './mosaic';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/layout",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@sqlrooms/project-config": "0.
|
|
23
|
-
"@sqlrooms/ui": "0.
|
|
22
|
+
"@sqlrooms/project-config": "0.7.0",
|
|
23
|
+
"@sqlrooms/ui": "0.7.0"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"react": "*",
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"lint": "eslint .",
|
|
33
33
|
"typedoc": "typedoc"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "8be65f051c588d3a963f721322429657913b6c63"
|
|
36
36
|
}
|