@thi.ng/hiccup-canvas 3.2.16 → 3.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 +44 -43
- package/package.json +11 -11
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/hiccup-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)
|
|
@@ -60,11 +61,11 @@
|
|
|
60
61
|
|
|
61
62
|
## About
|
|
62
63
|
|
|
63
|
-
Hiccup shape tree renderer for vanilla Canvas 2D contexts. This is a support package for [@thi.ng/hiccup](https://
|
|
64
|
+
Hiccup shape tree renderer for vanilla Canvas 2D contexts. This is a support package for [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup).
|
|
64
65
|
|
|
65
66
|
This package provides a simple `draw()` function, which accepts a scene tree of
|
|
66
67
|
different shape types in
|
|
67
|
-
[@thi.ng/hiccup](https://
|
|
68
|
+
[@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup)
|
|
68
69
|
syntax/format (i.e. nested arrays,
|
|
69
70
|
[`IToHiccup`](https://docs.thi.ng/umbrella/api/interfaces/IToHiccup.html)
|
|
70
71
|
implementations) and then translates these into canvas API draw calls.
|
|
@@ -73,12 +74,12 @@ implementations) and then translates these into canvas API draw calls.
|
|
|
73
74
|
|
|
74
75
|
**STABLE** - used in production
|
|
75
76
|
|
|
76
|
-
[Search or submit any issues for this package](https://
|
|
77
|
+
[Search or submit any issues for this package](https://codeberg.org/thi.ng/umbrella/issues?q=%5Bhiccup-canvas%5D)
|
|
77
78
|
|
|
78
79
|
## Related packages
|
|
79
80
|
|
|
80
|
-
- [@thi.ng/hdom-canvas](https://
|
|
81
|
-
- [@thi.ng/hiccup](https://
|
|
81
|
+
- [@thi.ng/hdom-canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom-canvas) - [@thi.ng/hdom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hdom) component wrapper for declarative canvas scenegraphs
|
|
82
|
+
- [@thi.ng/hiccup](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup) - HTML/SVG/XML serialization of nested data structures, iterables & closures
|
|
82
83
|
|
|
83
84
|
## Installation
|
|
84
85
|
|
|
@@ -110,41 +111,41 @@ Package sizes (brotli'd, pre-treeshake): ESM: 2.65 KB
|
|
|
110
111
|
|
|
111
112
|
## Dependencies
|
|
112
113
|
|
|
113
|
-
- [@thi.ng/api](https://
|
|
114
|
-
- [@thi.ng/canvas](https://
|
|
115
|
-
- [@thi.ng/checks](https://
|
|
116
|
-
- [@thi.ng/color](https://
|
|
117
|
-
- [@thi.ng/geom-arc](https://
|
|
118
|
-
- [@thi.ng/math](https://
|
|
119
|
-
- [@thi.ng/pixel](https://
|
|
120
|
-
- [@thi.ng/vectors](https://
|
|
114
|
+
- [@thi.ng/api](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/api)
|
|
115
|
+
- [@thi.ng/canvas](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/canvas)
|
|
116
|
+
- [@thi.ng/checks](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/checks)
|
|
117
|
+
- [@thi.ng/color](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/color)
|
|
118
|
+
- [@thi.ng/geom-arc](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom-arc)
|
|
119
|
+
- [@thi.ng/math](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/math)
|
|
120
|
+
- [@thi.ng/pixel](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/pixel)
|
|
121
|
+
- [@thi.ng/vectors](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/vectors)
|
|
121
122
|
|
|
122
123
|
Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
|
|
123
124
|
|
|
124
125
|
## Usage examples
|
|
125
126
|
|
|
126
127
|
16 projects in this repo's
|
|
127
|
-
[/examples](https://
|
|
128
|
+
[/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
|
|
128
129
|
directory are using this package:
|
|
129
130
|
|
|
130
|
-
| Screenshot | Description | Live demo | Source
|
|
131
|
-
|
|
132
|
-
| <img src="https://
|
|
133
|
-
| <img src="https://
|
|
134
|
-
| <img src="https://
|
|
135
|
-
| <img src="https://
|
|
136
|
-
| <img src="https://
|
|
137
|
-
| <img src="https://
|
|
138
|
-
| <img src="https://
|
|
139
|
-
| <img src="https://
|
|
140
|
-
| <img src="https://
|
|
141
|
-
| <img src="https://
|
|
142
|
-
| <img src="https://
|
|
143
|
-
| <img src="https://
|
|
144
|
-
| <img src="https://
|
|
145
|
-
| <img src="https://
|
|
146
|
-
| <img src="https://
|
|
147
|
-
| <img src="https://
|
|
131
|
+
| Screenshot | Description | Live demo | Source |
|
|
132
|
+
|:-------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------|:------------------------------------------------------------|:-------------------------------------------------------------------------------------------------|
|
|
133
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/calibration-sheet) |
|
|
134
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/canvas-recorder.png" width="240"/> | Self-modifying, animated typographic grid with emergent complex patterns | [Demo](https://demo.thi.ng/umbrella/canvas-recorder/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/canvas-recorder) |
|
|
135
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/fiber-basics.png" width="240"/> | Fiber-based cooperative multitasking basics | [Demo](https://demo.thi.ng/umbrella/fiber-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/fiber-basics) |
|
|
136
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-classify-point.png" width="240"/> | Polygon point classification (inside/boundary/outside) | [Demo](https://demo.thi.ng/umbrella/geom-classify-point/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-classify-point) |
|
|
137
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-complex-poly.png" width="240"/> | Shape conversions & operations using polygons with holes | [Demo](https://demo.thi.ng/umbrella/geom-complex-poly/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-complex-poly) |
|
|
138
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-extra-hiccup.jpg" width="240"/> | Embedding thi.ng/hiccup data/elements in thi.ng/geom shape hierarchies | [Demo](https://demo.thi.ng/umbrella/geom-extra-hiccup/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-extra-hiccup) |
|
|
139
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/geom/geom-fuzz.png" width="240"/> | geom-fuzz basic shape & fill examples | [Demo](https://demo.thi.ng/umbrella/geom-fuzz-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-fuzz-basics) |
|
|
140
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/geom-unique-edges.png" width="240"/> | Iterating the unique edges of a tessellation | [Demo](https://demo.thi.ng/umbrella/geom-unique-edges/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/geom-unique-edges) |
|
|
141
|
+
| <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) |
|
|
142
|
+
| <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) |
|
|
143
|
+
| <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) |
|
|
144
|
+
| <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) |
|
|
145
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/hiccup-canvas-arcs.jpg" width="240"/> | Animated arcs & drawing using hiccup-canvas | [Demo](https://demo.thi.ng/umbrella/hiccup-canvas-arcs/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hiccup-canvas-arcs) |
|
|
146
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/hiccup-canvas-basics.png" width="240"/> | Basic hiccup-based canvas drawing | [Demo](https://demo.thi.ng/umbrella/hiccup-canvas-basics/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/hiccup-canvas-basics) |
|
|
147
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/poly-subdiv.jpg" width="240"/> | Animated, iterative polygon subdivisions & visualization | [Demo](https://demo.thi.ng/umbrella/poly-subdiv/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/poly-subdiv) |
|
|
148
|
+
| <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/scenegraph-pan-zoom.avif" width="240"/> | Basic 2D scenegraph example with pan/zoom functionality | [Demo](https://demo.thi.ng/umbrella/scenegraph-pan-zoom/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/scenegraph-pan-zoom) |
|
|
148
149
|
|
|
149
150
|
## API
|
|
150
151
|
|
|
@@ -154,7 +155,7 @@ The shape tree given to
|
|
|
154
155
|
[`draw()`](https://docs.thi.ng/umbrella/hiccup-canvas/functions/draw.html) MUST
|
|
155
156
|
consist of well-formed, normalized hiccup syntax (incl. objects implementing the
|
|
156
157
|
`IToHiccup()` interface, like the shape types provided by
|
|
157
|
-
[@thi.ng/geom](https://
|
|
158
|
+
[@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom)).
|
|
158
159
|
|
|
159
160
|
## SVG conversion
|
|
160
161
|
|
|
@@ -162,13 +163,13 @@ Even though the shape element names & syntax are intentionally *very
|
|
|
162
163
|
similar* (largely the same) to SVG elements, for performance reasons all
|
|
163
164
|
geometry data given to each shape remains un-stringified (only styling
|
|
164
165
|
attributes can be strings). However, the
|
|
165
|
-
[@thi.ng/hiccup-svg](https://
|
|
166
|
+
[@thi.ng/hiccup-svg](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-svg)
|
|
166
167
|
package provides a `convertTree()` function which takes the arguably
|
|
167
168
|
more "raw" shape format used by this package and converts an entire
|
|
168
169
|
shape tree into SVG compatible & serializable format.
|
|
169
170
|
|
|
170
171
|
It's very likely (and recommended) you're using the shape type provided
|
|
171
|
-
[@thi.ng/geom](https://
|
|
172
|
+
[@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom),
|
|
172
173
|
in which case these can be provided as-is to this package's
|
|
173
174
|
[`draw()`](https://docs.thi.ng/umbrella/hiccup-canvas/functions/draw.html)
|
|
174
175
|
function and SVG conversion (from the same geometry) can be done like so:
|
|
@@ -313,7 +314,7 @@ Since v3.0.0 this package supports both circular and elliptic arc path segments,
|
|
|
313
314
|
however only the latter segment type is compatible with SVG (circular arcs are
|
|
314
315
|
only supported by the HTML Canvas API). We recommended to use one of the
|
|
315
316
|
available path constructor functions in
|
|
316
|
-
[@thi.ng/geom](https://
|
|
317
|
+
[@thi.ng/geom](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/geom) to
|
|
317
318
|
create individual arcs or paths which ensure SVG compatibility:
|
|
318
319
|
|
|
319
320
|
Arcs:
|
|
@@ -502,7 +503,7 @@ Interpreted as float RGB(A):
|
|
|
502
503
|
#### @thi.ng/color values
|
|
503
504
|
|
|
504
505
|
Colors defined via the
|
|
505
|
-
[@thi.ng/color](https://
|
|
506
|
+
[@thi.ng/color](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/color)
|
|
506
507
|
package can be automatically converted to CSS color strings:
|
|
507
508
|
|
|
508
509
|
`{ fill: hcya(0.1666, 1, 0.8859) }` => `{ fill: "#ffff00" }`
|
|
@@ -536,7 +537,7 @@ docs](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/
|
|
|
536
537
|
for further details.
|
|
537
538
|
|
|
538
539
|
Also see the [2x3 matrix functions in the
|
|
539
|
-
@thi.ng/matrices](https://
|
|
540
|
+
@thi.ng/matrices](https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/matrices/README.md)
|
|
540
541
|
package for creating different kinds of transformation matrices, e.g.
|
|
541
542
|
|
|
542
543
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/hiccup-canvas",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.18",
|
|
4
4
|
"description": "Hiccup shape tree renderer for vanilla Canvas 2D contexts",
|
|
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/hiccup-canvas"
|
|
13
13
|
},
|
|
14
14
|
"homepage": "https://thi.ng/hiccup-canvas",
|
|
@@ -40,14 +40,14 @@
|
|
|
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/color": "^5.8.
|
|
47
|
-
"@thi.ng/geom-arc": "^2.1.
|
|
48
|
-
"@thi.ng/math": "^5.15.
|
|
49
|
-
"@thi.ng/pixel": "^7.5.
|
|
50
|
-
"@thi.ng/vectors": "^8.6.
|
|
43
|
+
"@thi.ng/api": "^8.12.18",
|
|
44
|
+
"@thi.ng/canvas": "^1.1.10",
|
|
45
|
+
"@thi.ng/checks": "^3.8.8",
|
|
46
|
+
"@thi.ng/color": "^5.8.20",
|
|
47
|
+
"@thi.ng/geom-arc": "^2.1.216",
|
|
48
|
+
"@thi.ng/math": "^5.15.7",
|
|
49
|
+
"@thi.ng/pixel": "^7.5.27",
|
|
50
|
+
"@thi.ng/vectors": "^8.6.27"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"esbuild": "^0.27.2",
|
|
@@ -138,5 +138,5 @@
|
|
|
138
138
|
],
|
|
139
139
|
"year": 2018
|
|
140
140
|
},
|
|
141
|
-
"gitHead": "
|
|
141
|
+
"gitHead": "929fb6590178a41cbb77cbb87e07c59c61381607\n"
|
|
142
142
|
}
|