@thi.ng/layout 4.0.16 → 4.1.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 +11 -10
- package/grid-layout.d.ts +7 -3
- package/grid-layout.js +26 -17
- package/package.json +5 -5
- package/stacked-layout.js +7 -4
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
[](https://mastodon.thi.ng/@toxi)
|
|
8
8
|
|
|
9
9
|
> [!NOTE]
|
|
10
|
-
> This is one of
|
|
10
|
+
> This is one of 213 standalone projects, maintained as part
|
|
11
11
|
> of the [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo
|
|
12
12
|
> and anti-framework.
|
|
13
13
|
>
|
|
@@ -74,7 +74,7 @@ For Node.js REPL:
|
|
|
74
74
|
const l = await import("@thi.ng/layout");
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
-
Package sizes (brotli'd, pre-treeshake): ESM: 1.
|
|
77
|
+
Package sizes (brotli'd, pre-treeshake): ESM: 1.24 KB
|
|
78
78
|
|
|
79
79
|
## Dependencies
|
|
80
80
|
|
|
@@ -86,16 +86,17 @@ Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
|
|
|
86
86
|
|
|
87
87
|
## Usage examples
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
Five projects in this repo's
|
|
90
90
|
[/examples](https://github.com/thi-ng/umbrella/tree/develop/examples)
|
|
91
91
|
directory are using this package:
|
|
92
92
|
|
|
93
|
-
| Screenshot
|
|
94
|
-
|
|
95
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/
|
|
96
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/
|
|
97
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/
|
|
98
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/
|
|
93
|
+
| Screenshot | Description | Live demo | Source |
|
|
94
|
+
|:--------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------|:--------------------------------------------------------|:-------------------------------------------------------------------------------------|
|
|
95
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/calibration-sheet.avif" width="240"/> | Parametrically design calibration sheet for B&W photography | [Demo](https://demo.thi.ng/umbrella/calibration-sheet/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/calibration-sheet) |
|
|
96
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/fft-synth.png" width="240"/> | Interactive inverse FFT toy synth | [Demo](https://demo.thi.ng/umbrella/fft-synth/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/fft-synth) |
|
|
97
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/imgui/imgui-all.png" width="240"/> | Canvas based Immediate Mode GUI components | [Demo](https://demo.thi.ng/umbrella/imgui/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/imgui) |
|
|
98
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/imgui-basics.png" width="240"/> | Minimal IMGUI usage example | [Demo](https://demo.thi.ng/umbrella/imgui-basics/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/imgui-basics) |
|
|
99
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/layout-gridgen.png" width="240"/> | Randomized space-filling, nested grid layout generator | [Demo](https://demo.thi.ng/umbrella/layout-gridgen/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/layout-gridgen) |
|
|
99
100
|
|
|
100
101
|
## API
|
|
101
102
|
|
|
@@ -303,4 +304,4 @@ If this project contributes to an academic publication, please cite it as:
|
|
|
303
304
|
|
|
304
305
|
## License
|
|
305
306
|
|
|
306
|
-
© 2019 -
|
|
307
|
+
© 2019 - 2026 Karsten Schmidt // Apache License 2.0
|
package/grid-layout.d.ts
CHANGED
|
@@ -13,10 +13,14 @@ export declare class GridLayout implements IGridLayout<GridLayout> {
|
|
|
13
13
|
readonly cellHG: number;
|
|
14
14
|
readonly gapX: number;
|
|
15
15
|
readonly gapY: number;
|
|
16
|
-
protected
|
|
17
|
-
protected
|
|
18
|
-
protected
|
|
16
|
+
protected _currCol: number;
|
|
17
|
+
protected _currRow: number;
|
|
18
|
+
protected _rows: number;
|
|
19
19
|
constructor(parent: GridLayout | null, x: number, y: number, width: number, cols: number, rowH: number, gapX: number, gapY?: number);
|
|
20
|
+
get currX(): number;
|
|
21
|
+
get currY(): number;
|
|
22
|
+
get currCol(): number;
|
|
23
|
+
get currRow(): number;
|
|
20
24
|
get height(): number;
|
|
21
25
|
colsForWidth(w: number): number;
|
|
22
26
|
rowsForHeight(h: number): number;
|
package/grid-layout.js
CHANGED
|
@@ -13,9 +13,9 @@ class GridLayout {
|
|
|
13
13
|
cellHG;
|
|
14
14
|
gapX;
|
|
15
15
|
gapY;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
_currCol = 0;
|
|
17
|
+
_currRow = 0;
|
|
18
|
+
_rows = 0;
|
|
19
19
|
constructor(parent, x, y, width, cols, rowH, gapX, gapY = gapX) {
|
|
20
20
|
this.parent = parent;
|
|
21
21
|
this.cols = cols;
|
|
@@ -28,12 +28,21 @@ class GridLayout {
|
|
|
28
28
|
this.cellHG = rowH + gapY;
|
|
29
29
|
this.gapX = gapX;
|
|
30
30
|
this.gapY = gapY;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
this.
|
|
31
|
+
}
|
|
32
|
+
get currX() {
|
|
33
|
+
return this.x + this._currCol * this.cellWG;
|
|
34
|
+
}
|
|
35
|
+
get currY() {
|
|
36
|
+
return this.y + this._currRow * this.cellHG;
|
|
37
|
+
}
|
|
38
|
+
get currCol() {
|
|
39
|
+
return this._currCol;
|
|
40
|
+
}
|
|
41
|
+
get currRow() {
|
|
42
|
+
return this._currRow;
|
|
34
43
|
}
|
|
35
44
|
get height() {
|
|
36
|
-
return this.y + this.
|
|
45
|
+
return this.y + this._rows * this.cellHG;
|
|
37
46
|
}
|
|
38
47
|
colsForWidth(w) {
|
|
39
48
|
return Math.ceil(w / this.cellWG);
|
|
@@ -49,18 +58,18 @@ class GridLayout {
|
|
|
49
58
|
const { cellWG, cellHG, gapX, gapY, cols } = this;
|
|
50
59
|
const cspan = Math.min(spans[0], cols);
|
|
51
60
|
const rspan = spans[1];
|
|
52
|
-
if (this.
|
|
53
|
-
if (this.
|
|
54
|
-
this.
|
|
55
|
-
this.
|
|
61
|
+
if (this._currCol > 0) {
|
|
62
|
+
if (this._currCol + cspan > cols) {
|
|
63
|
+
this._currCol = 0;
|
|
64
|
+
this._currRow = this._rows;
|
|
56
65
|
}
|
|
57
66
|
} else {
|
|
58
|
-
this.
|
|
67
|
+
this._currRow = this._rows;
|
|
59
68
|
}
|
|
60
69
|
const h = rspan * cellHG - gapY;
|
|
61
70
|
const cell = layoutBox(
|
|
62
|
-
this.x + this.
|
|
63
|
-
this.y + this.
|
|
71
|
+
this.x + this._currCol * cellWG,
|
|
72
|
+
this.y + this._currRow * cellHG,
|
|
64
73
|
cspan * cellWG - gapX,
|
|
65
74
|
h,
|
|
66
75
|
this.cellW,
|
|
@@ -70,7 +79,7 @@ class GridLayout {
|
|
|
70
79
|
[cspan, rspan]
|
|
71
80
|
);
|
|
72
81
|
this.propagateSize(rspan);
|
|
73
|
-
this.
|
|
82
|
+
this._currCol = Math.min(this._currCol + cspan, cols) % cols;
|
|
74
83
|
return cell;
|
|
75
84
|
}
|
|
76
85
|
// TODO add optional colspan arg, fix rounding
|
|
@@ -89,8 +98,8 @@ class GridLayout {
|
|
|
89
98
|
* @param rspan -
|
|
90
99
|
*/
|
|
91
100
|
propagateSize(rspan) {
|
|
92
|
-
this.
|
|
93
|
-
this.parent?.propagateSize(this.
|
|
101
|
+
this._rows = Math.max(this._rows, this._currRow + rspan);
|
|
102
|
+
this.parent?.propagateSize(this._rows);
|
|
94
103
|
}
|
|
95
104
|
}
|
|
96
105
|
const gridLayout = (x, y, width, cols = 1, rowH = 16, gapX = 4, gapY = gapX) => new GridLayout(null, x, y, width, cols, rowH, gapX, gapY);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/layout",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "Configurable nested 2D grid layout generators",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@thi.ng/api": "^8.12.
|
|
43
|
-
"@thi.ng/arrays": "^2.14.
|
|
44
|
-
"@thi.ng/checks": "^3.8.
|
|
42
|
+
"@thi.ng/api": "^8.12.12",
|
|
43
|
+
"@thi.ng/arrays": "^2.14.5",
|
|
44
|
+
"@thi.ng/checks": "^3.8.2"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"esbuild": "^0.27.0",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
],
|
|
99
99
|
"year": 2019
|
|
100
100
|
},
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "deb511294f7a120091b654af0ff7e8a399a465b3\n"
|
|
102
102
|
}
|
package/stacked-layout.js
CHANGED
|
@@ -42,8 +42,8 @@ class StackedLayout extends GridLayout {
|
|
|
42
42
|
gapY,
|
|
43
43
|
[cspan, rspan]
|
|
44
44
|
);
|
|
45
|
-
this.
|
|
46
|
-
this.
|
|
45
|
+
this._currRow = maxY;
|
|
46
|
+
this._currCol = column;
|
|
47
47
|
offsets.fill(maxY + rspan, column, column + cspan);
|
|
48
48
|
this.currSpan = cspan;
|
|
49
49
|
this.parent?.propagateSize(Math.max(...offsets));
|
|
@@ -81,8 +81,11 @@ class StackedLayout extends GridLayout {
|
|
|
81
81
|
return result;
|
|
82
82
|
}
|
|
83
83
|
propagateSize(rspan) {
|
|
84
|
-
const newY = Math.max(
|
|
85
|
-
|
|
84
|
+
const newY = Math.max(
|
|
85
|
+
this._currRow + rspan,
|
|
86
|
+
this.offsets[this._currCol]
|
|
87
|
+
);
|
|
88
|
+
this.offsets.fill(newY, this._currCol, this._currCol + this.currSpan);
|
|
86
89
|
this.parent?.propagateSize(newY);
|
|
87
90
|
}
|
|
88
91
|
/**
|