@thi.ng/hdom-canvas 4.2.16 → 4.2.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 +49 -48
- 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/hdom-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
|
- [Status](#status)
|
|
@@ -32,13 +33,13 @@
|
|
|
32
33
|
|
|
33
34
|
## About
|
|
34
35
|
|
|
35
|
-
[@thi.ng/hdom](https://
|
|
36
|
+
[@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom) component wrapper for declarative canvas scenegraphs.
|
|
36
37
|
|
|
37
38
|
This package provides a [re-usable canvas
|
|
38
|
-
component](https://
|
|
39
|
+
component](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom-canvas/src/index.ts#L66),
|
|
39
40
|
which accepts child nodes defining a scene tree of different shape types
|
|
40
41
|
in standard
|
|
41
|
-
[@thi.ng/hiccup](https://
|
|
42
|
+
[@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup)
|
|
42
43
|
syntax/format (i.e. nested arrays) and then translates these into canvas
|
|
43
44
|
API draw calls during the hdom update process / cycle.
|
|
44
45
|
|
|
@@ -46,21 +47,21 @@ API draw calls during the hdom update process / cycle.
|
|
|
46
47
|
|
|
47
48
|
**STABLE** - used in production
|
|
48
49
|
|
|
49
|
-
[Search or submit any issues for this package](https://
|
|
50
|
+
[Search or submit any issues for this package](https://codeberg.org/thi.ng/umbrella/issues?q=%5Bhdom-canvas%5D)
|
|
50
51
|
|
|
51
52
|
### BREAKING CHANGES 3.0.0
|
|
52
53
|
|
|
53
54
|
The actual tree traversal & drawing has been extracted to the new
|
|
54
|
-
[@thi.ng/hiccup-canvas](https://
|
|
55
|
+
[@thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas)
|
|
55
56
|
package for better re-usability, also outside without hdom.
|
|
56
57
|
|
|
57
58
|
## Related packages
|
|
58
59
|
|
|
59
|
-
- [@thi.ng/geom](https://
|
|
60
|
-
- [@thi.ng/hdom](https://
|
|
61
|
-
- [@thi.ng/hiccup-canvas](https://
|
|
62
|
-
- [@thi.ng/hiccup-svg](https://
|
|
63
|
-
- [@thi.ng/rdom-canvas](https://
|
|
60
|
+
- [@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom) - Functional, polymorphic API for 2D geometry types & SVG generation
|
|
61
|
+
- [@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom) - Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors
|
|
62
|
+
- [@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
|
|
63
|
+
- [@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
|
|
64
|
+
- [@thi.ng/rdom-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/rdom-canvas) - [@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
|
|
64
65
|
|
|
65
66
|
## Installation
|
|
66
67
|
|
|
@@ -86,42 +87,42 @@ Package sizes (brotli'd, pre-treeshake): ESM: 828 bytes
|
|
|
86
87
|
|
|
87
88
|
## Dependencies
|
|
88
89
|
|
|
89
|
-
- [@thi.ng/api](https://
|
|
90
|
-
- [@thi.ng/canvas](https://
|
|
91
|
-
- [@thi.ng/checks](https://
|
|
92
|
-
- [@thi.ng/diff](https://
|
|
93
|
-
- [@thi.ng/errors](https://
|
|
94
|
-
- [@thi.ng/hdom](https://
|
|
95
|
-
- [@thi.ng/hiccup-canvas](https://
|
|
90
|
+
- [@thi.ng/api](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/api)
|
|
91
|
+
- [@thi.ng/canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/canvas)
|
|
92
|
+
- [@thi.ng/checks](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/checks)
|
|
93
|
+
- [@thi.ng/diff](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/diff)
|
|
94
|
+
- [@thi.ng/errors](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/errors)
|
|
95
|
+
- [@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom)
|
|
96
|
+
- [@thi.ng/hiccup-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas)
|
|
96
97
|
|
|
97
98
|
Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
|
|
98
99
|
|
|
99
100
|
## Usage examples
|
|
100
101
|
|
|
101
102
|
18 projects in this repo's
|
|
102
|
-
[/examples](https://
|
|
103
|
+
[/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
|
|
103
104
|
directory are using this package:
|
|
104
105
|
|
|
105
|
-
| Screenshot | Description | Live demo | Source
|
|
106
|
-
|
|
107
|
-
| <img src="https://
|
|
108
|
-
| <img src="https://
|
|
109
|
-
| <img src="https://
|
|
110
|
-
| <img src="https://
|
|
111
|
-
| <img src="https://
|
|
112
|
-
| <img src="https://
|
|
113
|
-
| <img src="https://
|
|
114
|
-
| <img src="https://
|
|
115
|
-
| <img src="https://
|
|
116
|
-
| <img src="https://
|
|
117
|
-
| <img src="https://
|
|
118
|
-
| <img src="https://
|
|
119
|
-
| | Basic rstream-gestures multi-touch demo | [Demo](https://demo.thi.ng/umbrella/multitouch/) | [Source](https://
|
|
120
|
-
| <img src="https://
|
|
121
|
-
| <img src="https://
|
|
122
|
-
| <img src="https://
|
|
123
|
-
| <img src="https://
|
|
124
|
-
| <img src="https://
|
|
106
|
+
| Screenshot | Description | Live demo | Source |
|
|
107
|
+
|:-------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------|:------------------------------------------------------------|:-------------------------------------------------------------------------------------------------|
|
|
108
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/fft-synth.png" width="240"/> | Interactive inverse FFT toy synth | [Demo](https://demo.thi.ng/umbrella/fft-synth/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/fft-synth) |
|
|
109
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-convex-hull.png" width="240"/> | Convex hull & shape clipping of 2D polygons | [Demo](https://demo.thi.ng/umbrella/geom-convex-hull/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-convex-hull) |
|
|
110
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-knn.jpg" width="240"/> | Doodle w/ K-nearest neighbor search result visualization | [Demo](https://demo.thi.ng/umbrella/geom-knn/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-knn) |
|
|
111
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-knn-hash.jpg" width="240"/> | K-nearest neighbor search in an hash grid | [Demo](https://demo.thi.ng/umbrella/geom-knn-hash/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-knn-hash) |
|
|
112
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-voronoi-mst.jpg" width="240"/> | Poisson-disk shape-aware sampling, Voronoi & Minimum Spanning Tree visualization | [Demo](https://demo.thi.ng/umbrella/geom-voronoi-mst/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-voronoi-mst) |
|
|
113
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/hdom-canvas-clock.png" width="240"/> | Realtime analog clock demo | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-clock/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hdom-canvas-clock) |
|
|
114
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/hdom-canvas-draw.jpg" width="240"/> | Interactive pattern drawing demo using transducers | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-draw/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hdom-canvas-draw) |
|
|
115
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/hdom-canvas-particles.jpg" width="240"/> | 2D Bezier curve-guided particle system | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-particles/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hdom-canvas-particles) |
|
|
116
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/hdom-canvas/hdom-canvas-shapes-results.png" width="240"/> | Various hdom-canvas shape drawing examples & SVG conversion / export | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-shapes/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hdom-canvas-shapes) |
|
|
117
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/imgui/imgui-all.png" width="240"/> | Canvas based Immediate Mode GUI components | [Demo](https://demo.thi.ng/umbrella/imgui/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/imgui) |
|
|
118
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/imgui-basics.png" width="240"/> | Minimal IMGUI usage example | [Demo](https://demo.thi.ng/umbrella/imgui-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/imgui-basics) |
|
|
119
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/geom/geom-isoline.png" width="240"/> | Animated sine plasma effect visualized using contour lines | [Demo](https://demo.thi.ng/umbrella/iso-plasma/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/iso-plasma) |
|
|
120
|
+
| | Basic rstream-gestures multi-touch demo | [Demo](https://demo.thi.ng/umbrella/multitouch/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/multitouch) |
|
|
121
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/ramp-synth.png" width="240"/> | Unison wavetable synth with waveform editor | [Demo](https://demo.thi.ng/umbrella/ramp-synth/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/ramp-synth) |
|
|
122
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/rotating-voronoi.jpg" width="240"/> | Animated Voronoi diagram, cubic splines & SVG download | [Demo](https://demo.thi.ng/umbrella/rotating-voronoi/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/rotating-voronoi) |
|
|
123
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/scenegraph.png" width="240"/> | 2D scenegraph & shape picking | [Demo](https://demo.thi.ng/umbrella/scenegraph/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/scenegraph) |
|
|
124
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/scenegraph-image.png" width="240"/> | 2D scenegraph & image map based geometry manipulation | [Demo](https://demo.thi.ng/umbrella/scenegraph-image/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/scenegraph-image) |
|
|
125
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/shader-ast-workers.jpg" width="240"/> | Fork-join worker-based raymarch renderer (JS/CPU only) | [Demo](https://demo.thi.ng/umbrella/shader-ast-workers/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/shader-ast-workers) |
|
|
125
126
|
|
|
126
127
|
## API
|
|
127
128
|
|
|
@@ -140,7 +141,7 @@ start(() => {
|
|
|
140
141
|
```
|
|
141
142
|
|
|
142
143
|
Usage with
|
|
143
|
-
[@thi.ng/geom](https://
|
|
144
|
+
[@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom)
|
|
144
145
|
shape primitives:
|
|
145
146
|
|
|
146
147
|
```ts
|
|
@@ -169,7 +170,7 @@ start(() => {
|
|
|
169
170
|
|
|
170
171
|
The package provides a `canvas` component which uses the branch-local
|
|
171
172
|
behavior implementation feature of
|
|
172
|
-
[@thi.ng/hdom](https://
|
|
173
|
+
[@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom)
|
|
173
174
|
v5.0.0 to support virtual SVG-like shape elements / components. These
|
|
174
175
|
are defined as part of the main UI component tree just like any other
|
|
175
176
|
component, but are then translated into canvas API draw commands during
|
|
@@ -179,7 +180,7 @@ the user context object as first arg, just like normal hdom components.
|
|
|
179
180
|
Shape components are expressed in standard hiccup syntax (or as objects
|
|
180
181
|
implementing the `IToHiccup()` interface, like the shape types provided
|
|
181
182
|
by
|
|
182
|
-
[@thi.ng/geom](https://
|
|
183
|
+
[@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom)),
|
|
183
184
|
and with the following...
|
|
184
185
|
|
|
185
186
|
### Restrictions & behavior controls
|
|
@@ -250,7 +251,7 @@ further details.
|
|
|
250
251
|
Even though the element names & syntax are *very similar* to SVG
|
|
251
252
|
elements, for performance reasons all geometry data given to each shape
|
|
252
253
|
remains un-stringified (only styling attributes are). However, the
|
|
253
|
-
[@thi.ng/hiccup-svg](https://
|
|
254
|
+
[@thi.ng/hiccup-svg](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-svg)
|
|
254
255
|
package provides a `convertTree()` function which takes the arguably
|
|
255
256
|
more "raw" shape format used by hdom-canvas and converts an entire shape
|
|
256
257
|
tree into SVG compatible & serializable format. Note: the tree MUST
|
|
@@ -296,7 +297,7 @@ serialize(
|
|
|
296
297
|
## Supported shape types
|
|
297
298
|
|
|
298
299
|
Please see the [@thi.ng/hiccup-canvas
|
|
299
|
-
README](https://
|
|
300
|
+
README](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-canvas/README.md#supported-shape-types)
|
|
300
301
|
for the full list of supported shapes, gradients, attributes, colors and
|
|
301
302
|
transformations.
|
|
302
303
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/hdom-canvas",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.18",
|
|
4
4
|
"description": "@thi.ng/hdom component wrapper for declarative canvas scenegraphs",
|
|
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/hdom-canvas"
|
|
13
13
|
},
|
|
14
14
|
"homepage": "https://thi.ng/hiccup-canvas",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@thi.ng/api": "^8.12.
|
|
47
|
-
"@thi.ng/canvas": "^1.1.
|
|
48
|
-
"@thi.ng/checks": "^3.8.
|
|
49
|
-
"@thi.ng/diff": "^5.1.
|
|
50
|
-
"@thi.ng/errors": "^2.6.
|
|
51
|
-
"@thi.ng/hdom": "^9.4.
|
|
52
|
-
"@thi.ng/hiccup-canvas": "^3.2.
|
|
46
|
+
"@thi.ng/api": "^8.12.18",
|
|
47
|
+
"@thi.ng/canvas": "^1.1.10",
|
|
48
|
+
"@thi.ng/checks": "^3.8.8",
|
|
49
|
+
"@thi.ng/diff": "^5.1.119",
|
|
50
|
+
"@thi.ng/errors": "^2.6.7",
|
|
51
|
+
"@thi.ng/hdom": "^9.4.108",
|
|
52
|
+
"@thi.ng/hiccup-canvas": "^3.2.18"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"esbuild": "^0.27.2",
|
|
@@ -96,5 +96,5 @@
|
|
|
96
96
|
],
|
|
97
97
|
"year": 2018
|
|
98
98
|
},
|
|
99
|
-
"gitHead": "
|
|
99
|
+
"gitHead": "929fb6590178a41cbb77cbb87e07c59c61381607\n"
|
|
100
100
|
}
|