@thi.ng/rdom-canvas 1.1.17 → 1.1.18
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 +37 -36
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- This file is generated - DO NOT EDIT! -->
|
|
2
|
-
<!-- Please see: https://
|
|
3
|
-
# 
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@thi.ng/rdom-canvas)
|
|
6
6
|
|
|
@@ -8,11 +8,12 @@
|
|
|
8
8
|
|
|
9
9
|
> [!NOTE]
|
|
10
10
|
> This is one of 214 standalone projects, maintained as part
|
|
11
|
-
> of the [@thi.ng/umbrella](https://
|
|
11
|
+
> of the [@thi.ng/umbrella](https://codeberg.org/thi.ng/umbrella/) ecosystem
|
|
12
12
|
> and anti-framework.
|
|
13
13
|
>
|
|
14
|
-
> 🚀 Please help me to work full-time on these projects by [sponsoring
|
|
15
|
-
>
|
|
14
|
+
> 🚀 Please help me to work full-time on these projects by [sponsoring
|
|
15
|
+
> me](https://codeberg.org/thi.ng/umbrella/src/branch/develop/CONTRIBUTING.md#donations).
|
|
16
|
+
> Thank you! ❤️
|
|
16
17
|
|
|
17
18
|
- [About](#about)
|
|
18
19
|
- [General usage](#general-usage)
|
|
@@ -28,24 +29,24 @@
|
|
|
28
29
|
|
|
29
30
|
## About
|
|
30
31
|
|
|
31
|
-
[@thi.ng/rdom](https://
|
|
32
|
+
[@thi.ng/rdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom) component wrapper for [@thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas) and declarative canvas drawing. Please consult these packages' READMEs for further
|
|
32
33
|
background information...
|
|
33
34
|
|
|
34
35
|
### General usage
|
|
35
36
|
|
|
36
37
|
As with most thi.ng/rdom components, the state (aka geometry/scenegraph) for the
|
|
37
38
|
canvas component is being sourced from a
|
|
38
|
-
[thi.ng/rstream](https://
|
|
39
|
+
[thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream)
|
|
39
40
|
subscription. The canvas redraws every time that subscription delivers a new
|
|
40
41
|
value. The size of the canvas can be given as a subscription too and if so will
|
|
41
42
|
also automatically trigger resizing of the canvas.
|
|
42
43
|
|
|
43
44
|
The geometry to rendered to the canvas is expressed as
|
|
44
|
-
[thi.ng/hiccup](https://
|
|
45
|
+
[thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup),
|
|
45
46
|
specifically the flavor used by
|
|
46
|
-
[thi.ng/hiccup-canvas](https://
|
|
47
|
+
[thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas),
|
|
47
48
|
which (not just coincidentally) is the same as also used by
|
|
48
|
-
[thi.ng/geom](https://
|
|
49
|
+
[thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom)
|
|
49
50
|
shapes.
|
|
50
51
|
|
|
51
52
|
```ts tangle:export/readme1.ts
|
|
@@ -90,20 +91,20 @@ The root shape/group support the following special attributes:
|
|
|
90
91
|
`window.devicePixelRatio`)
|
|
91
92
|
|
|
92
93
|
Also see relevant section in the [thi.ng/hiccup-canvas
|
|
93
|
-
README](https://
|
|
94
|
+
README](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas/README.md#special-attributes)...
|
|
94
95
|
|
|
95
96
|
## Status
|
|
96
97
|
|
|
97
98
|
**ALPHA** - bleeding edge / work-in-progress
|
|
98
99
|
|
|
99
|
-
[Search or submit any issues for this package](https://
|
|
100
|
+
[Search or submit any issues for this package](https://codeberg.org/thi.ng/umbrella/issues?q=%5Brdom-canvas%5D)
|
|
100
101
|
|
|
101
102
|
## Related packages
|
|
102
103
|
|
|
103
|
-
- [@thi.ng/hiccup-canvas](https://
|
|
104
|
-
- [@thi.ng/hiccup-svg](https://
|
|
105
|
-
- [@thi.ng/geom](https://
|
|
106
|
-
- [@thi.ng/scenegraph](https://
|
|
104
|
+
- [@thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas) - Hiccup shape tree renderer for vanilla Canvas 2D contexts
|
|
105
|
+
- [@thi.ng/hiccup-svg](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-svg) - SVG element functions for [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) & related tooling
|
|
106
|
+
- [@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom) - Functional, polymorphic API for 2D geometry types & SVG generation
|
|
107
|
+
- [@thi.ng/scenegraph](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/scenegraph) - Extensible 2D/3D scene graph with [@thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas) support
|
|
107
108
|
|
|
108
109
|
## Installation
|
|
109
110
|
|
|
@@ -129,34 +130,34 @@ Package sizes (brotli'd, pre-treeshake): ESM: 718 bytes
|
|
|
129
130
|
|
|
130
131
|
## Dependencies
|
|
131
132
|
|
|
132
|
-
- [@thi.ng/api](https://
|
|
133
|
-
- [@thi.ng/canvas](https://
|
|
134
|
-
- [@thi.ng/checks](https://
|
|
135
|
-
- [@thi.ng/hiccup-canvas](https://
|
|
136
|
-
- [@thi.ng/object-utils](https://
|
|
137
|
-
- [@thi.ng/rdom](https://
|
|
138
|
-
- [@thi.ng/rstream](https://
|
|
133
|
+
- [@thi.ng/api](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/api)
|
|
134
|
+
- [@thi.ng/canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/canvas)
|
|
135
|
+
- [@thi.ng/checks](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/checks)
|
|
136
|
+
- [@thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas)
|
|
137
|
+
- [@thi.ng/object-utils](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/object-utils)
|
|
138
|
+
- [@thi.ng/rdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom)
|
|
139
|
+
- [@thi.ng/rstream](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rstream)
|
|
139
140
|
|
|
140
141
|
Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
|
|
141
142
|
|
|
142
143
|
## Usage examples
|
|
143
144
|
|
|
144
145
|
10 projects in this repo's
|
|
145
|
-
[/examples](https://
|
|
146
|
+
[/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
|
|
146
147
|
directory are using this package:
|
|
147
148
|
|
|
148
|
-
| Screenshot | Description | Live demo | Source
|
|
149
|
-
|
|
150
|
-
| <img src="https://
|
|
151
|
-
| <img src="https://
|
|
152
|
-
| <img src="https://
|
|
153
|
-
| <img src="https://
|
|
154
|
-
| <img src="https://
|
|
155
|
-
| <img src="https://
|
|
156
|
-
| <img src="https://
|
|
157
|
-
| <img src="https://
|
|
158
|
-
| <img src="https://
|
|
159
|
-
| <img src="https://
|
|
149
|
+
| Screenshot | Description | Live demo | Source |
|
|
150
|
+
|:--------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------|:---------------------------------------------------------|:----------------------------------------------------------------------------------------------|
|
|
151
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/boid-basics.png" width="240"/> | Basic 2D boid simulation and spatial indexing neighbor lookups | [Demo](https://demo.thi.ng/umbrella/boid-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/boid-basics) |
|
|
152
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/ellipse-proximity.png" width="240"/> | Interactive visualization of closest points on ellipses | [Demo](https://demo.thi.ng/umbrella/ellipse-proximity/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/ellipse-proximity) |
|
|
153
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-terrain-viz.jpg" width="240"/> | 2.5D hidden line visualization of digital elevation files (DEM) | [Demo](https://demo.thi.ng/umbrella/geom-terrain-viz/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-terrain-viz) |
|
|
154
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/pointfree-geom.jpg" width="240"/> | Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang | [Demo](https://demo.thi.ng/umbrella/pointfree-geom/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/pointfree-geom) |
|
|
155
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/quasi-lattice.png" width="240"/> | Quasi-random lattice generator | [Demo](https://demo.thi.ng/umbrella/quasi-lattice/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/quasi-lattice) |
|
|
156
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-canvas-basics.jpg" width="240"/> | Minimal rdom-canvas animation | [Demo](https://demo.thi.ng/umbrella/rdom-canvas-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-canvas-basics) |
|
|
157
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rdom-lissajous.png" width="240"/> | rdom & hiccup-canvas interop test | [Demo](https://demo.thi.ng/umbrella/rdom-lissajous/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rdom-lissajous) |
|
|
158
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/simd-plot.png" width="240"/> | Fitting, transforming & plotting 10k data points per frame using SIMD | [Demo](https://demo.thi.ng/umbrella/simd-plot/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/simd-plot) |
|
|
159
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/trace-bitmap.jpg" width="240"/> | Multi-layer vectorization & dithering of bitmap images | [Demo](https://demo.thi.ng/umbrella/trace-bitmap/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/trace-bitmap) |
|
|
160
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/tsne-colors.avif" width="240"/> | Animated t-SNE visualization of 4D data | [Demo](https://demo.thi.ng/umbrella/tsne-colors/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/tsne-colors) |
|
|
160
161
|
|
|
161
162
|
## API
|
|
162
163
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/rdom-canvas",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.18",
|
|
4
4
|
"description": "@thi.ng/rdom component wrapper for @thi.ng/hiccup-canvas and declarative canvas drawing",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "git+https://
|
|
11
|
+
"url": "git+https://codeberg.org/thi.ng/umbrella.git",
|
|
12
12
|
"directory": "packages/rdom-canvas"
|
|
13
13
|
},
|
|
14
14
|
"homepage": "https://thi.ng/rdom-canvas",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@thi.ng/api": "^8.12.
|
|
44
|
-
"@thi.ng/canvas": "^1.1.
|
|
45
|
-
"@thi.ng/checks": "^3.8.
|
|
46
|
-
"@thi.ng/hiccup-canvas": "^3.2.
|
|
47
|
-
"@thi.ng/object-utils": "^1.3.
|
|
48
|
-
"@thi.ng/rdom": "^1.7.
|
|
49
|
-
"@thi.ng/rstream": "^9.4.
|
|
43
|
+
"@thi.ng/api": "^8.12.18",
|
|
44
|
+
"@thi.ng/canvas": "^1.1.10",
|
|
45
|
+
"@thi.ng/checks": "^3.8.8",
|
|
46
|
+
"@thi.ng/hiccup-canvas": "^3.2.17",
|
|
47
|
+
"@thi.ng/object-utils": "^1.3.10",
|
|
48
|
+
"@thi.ng/rdom": "^1.7.84",
|
|
49
|
+
"@thi.ng/rstream": "^9.4.2"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"esbuild": "^0.27.2",
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
"status": "alpha",
|
|
95
95
|
"year": 2020
|
|
96
96
|
},
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "8ddf86ea0a1e658ddbf19cc645b29d0c176e29c4\n"
|
|
98
98
|
}
|