@thi.ng/hiccup-canvas 2.3.22 → 2.3.24
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/CHANGELOG.md +12 -1
- package/README.md +10 -9
- package/arc.d.ts +1 -1
- package/arc.js +2 -2
- package/draw.js +8 -2
- package/package.json +5 -5
- package/path.js +3 -0
- package/rect.js +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
- **Last updated**: 2023-
|
|
3
|
+
- **Last updated**: 2023-10-11T10:05:08Z
|
|
4
4
|
- **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
|
|
5
5
|
|
|
6
6
|
All notable changes to this project will be documented in this file.
|
|
@@ -9,6 +9,17 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
|
|
|
9
9
|
**Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
|
|
10
10
|
and/or version bumps of transitive dependencies.
|
|
11
11
|
|
|
12
|
+
### [2.3.24](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-canvas@2.3.24) (2023-10-11)
|
|
13
|
+
|
|
14
|
+
#### 🩹 Bug fixes
|
|
15
|
+
|
|
16
|
+
- fix "ellipse" shape handling (off-by-one error) ([d1985c4](https://github.com/thi-ng/umbrella/commit/d1985c4))
|
|
17
|
+
- update draw() to include last (CCW flag) shape arg
|
|
18
|
+
- also related to [#418](https://github.com/thi-ng/umbrella/issues/418)
|
|
19
|
+
- update circular arc handling in draw() ([18173c5](https://github.com/thi-ng/umbrella/commit/18173c5))
|
|
20
|
+
- actually use CCW shape arg
|
|
21
|
+
- add issue references for upcoming fixes
|
|
22
|
+
|
|
12
23
|
## [2.3.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-canvas@2.3.0) (2023-04-08)
|
|
13
24
|
|
|
14
25
|
#### 🚀 Features
|
package/README.md
CHANGED
|
@@ -115,15 +115,16 @@ directory are using this package.
|
|
|
115
115
|
|
|
116
116
|
A selection:
|
|
117
117
|
|
|
118
|
-
| Screenshot | Description
|
|
119
|
-
|
|
120
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/
|
|
121
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/
|
|
122
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/
|
|
123
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-canvas-
|
|
124
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-canvas-
|
|
125
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/
|
|
126
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/
|
|
118
|
+
| Screenshot | Description | Live demo | Source |
|
|
119
|
+
|:-------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------|:------------------------------------------------------------|:-----------------------------------------------------------------------------------------|
|
|
120
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/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://github.com/thi-ng/umbrella/tree/develop/examples/canvas-recorder) |
|
|
121
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/fiber-basics.png" width="240"/> | Fiber-based cooperative multitasking basics | [Demo](https://demo.thi.ng/umbrella/fiber-basics/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/fiber-basics) |
|
|
122
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/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://github.com/thi-ng/umbrella/tree/develop/examples/geom-fuzz-basics) |
|
|
123
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hdom-canvas-clock.png" width="240"/> | Realtime analog clock demo | [Demo](https://demo.thi.ng/umbrella/hdom-canvas-clock/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-clock) |
|
|
124
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/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://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-draw) |
|
|
125
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/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://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-particles) |
|
|
126
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/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://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-shapes) |
|
|
127
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/hiccup-canvas-arcs.png" width="240"/> | Animated arcs & drawing using hiccup-canvas | [Demo](https://demo.thi.ng/umbrella/hiccup-canvas-arcs/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/hiccup-canvas-arcs) |
|
|
127
128
|
|
|
128
129
|
## API
|
|
129
130
|
|
package/arc.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { IObjectOf } from "@thi.ng/api";
|
|
2
2
|
import type { ReadonlyVec } from "@thi.ng/vectors";
|
|
3
|
-
export declare const circularArc: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>, pos: ReadonlyVec, r: number, start?: number, end?: number,
|
|
3
|
+
export declare const circularArc: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>, pos: ReadonlyVec, r: number, start?: number, end?: number, ccw?: boolean) => void;
|
|
4
4
|
export declare const ellipticArc: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>, pos: ReadonlyVec, r: ReadonlyVec, axis?: number, start?: number, end?: number, ccw?: boolean) => void;
|
|
5
5
|
//# sourceMappingURL=arc.d.ts.map
|
package/arc.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { TAU } from "@thi.ng/math/api";
|
|
2
2
|
import { __endShape } from "./internal/end-shape.js";
|
|
3
|
-
export const circularArc = (ctx, attribs, pos, r, start = 0, end = TAU,
|
|
3
|
+
export const circularArc = (ctx, attribs, pos, r, start = 0, end = TAU, ccw = false) => {
|
|
4
4
|
ctx.beginPath();
|
|
5
|
-
ctx.arc(pos[0], pos[1], r, start, end,
|
|
5
|
+
ctx.arc(pos[0], pos[1], r, start, end, ccw);
|
|
6
6
|
__endShape(ctx, attribs);
|
|
7
7
|
};
|
|
8
8
|
export const ellipticArc = (ctx, attribs, pos, r, axis = 0, start = 0, end = TAU, ccw = false) => {
|
package/draw.js
CHANGED
|
@@ -72,13 +72,19 @@ export const draw = (ctx, shape, pstate = { attribs: {}, edits: [] }) => {
|
|
|
72
72
|
rect(ctx, attribs, shape[2], shape[3], shape[4], shape[5]);
|
|
73
73
|
break;
|
|
74
74
|
case "circle":
|
|
75
|
+
// FIXME need better handling / clarity around arcs & ellipse
|
|
76
|
+
// see issues #69 & #418
|
|
75
77
|
circularArc(ctx, attribs, shape[2], shape[3]);
|
|
76
78
|
break;
|
|
77
79
|
case "ellipse":
|
|
78
|
-
|
|
80
|
+
// FIXME need better handling / clarity around arcs & ellipse
|
|
81
|
+
// see issues #69 & #418
|
|
82
|
+
ellipticArc(ctx, attribs, shape[2], shape[3], shape[4], shape[5], shape[6], shape[7]);
|
|
79
83
|
break;
|
|
80
84
|
case "arc":
|
|
81
|
-
|
|
85
|
+
// FIXME need new type ID for circular arcs
|
|
86
|
+
// see issues #69 & #418
|
|
87
|
+
circularArc(ctx, attribs, shape[2], shape[3], shape[4], shape[5], shape[6]);
|
|
82
88
|
break;
|
|
83
89
|
case "text":
|
|
84
90
|
text(ctx, attribs, shape[2], shape[3], shape[4]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/hiccup-canvas",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.24",
|
|
4
4
|
"description": "Hiccup shape tree renderer for vanilla Canvas 2D contexts",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@thi.ng/api": "^8.9.5",
|
|
38
38
|
"@thi.ng/checks": "^3.4.5",
|
|
39
|
-
"@thi.ng/color": "^5.5.
|
|
39
|
+
"@thi.ng/color": "^5.5.21",
|
|
40
40
|
"@thi.ng/math": "^5.6.1",
|
|
41
|
-
"@thi.ng/pixel": "^4.2.
|
|
42
|
-
"@thi.ng/vectors": "^7.7.
|
|
41
|
+
"@thi.ng/pixel": "^4.2.24",
|
|
42
|
+
"@thi.ng/vectors": "^7.7.17"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@microsoft/api-extractor": "^7.36.4",
|
|
@@ -130,5 +130,5 @@
|
|
|
130
130
|
],
|
|
131
131
|
"year": 2018
|
|
132
132
|
},
|
|
133
|
-
"gitHead": "
|
|
133
|
+
"gitHead": "e9f04908dc37ae9e29320f098d195f9f8445a1ad\n"
|
|
134
134
|
}
|
package/path.js
CHANGED
|
@@ -74,6 +74,9 @@ export const path = (ctx, attribs, segments) => {
|
|
|
74
74
|
break;
|
|
75
75
|
// circular arc rel
|
|
76
76
|
// Note: NOT compatible w/ SVG arc segments
|
|
77
|
+
// FIXME need new type ID for circular arcs
|
|
78
|
+
// see issues #69 & #418
|
|
79
|
+
// can use ellipse() for elliptic arcs
|
|
77
80
|
case "a":
|
|
78
81
|
c = s[2];
|
|
79
82
|
c = [a[0] + c[0], a[1] + c[1]];
|
package/rect.js
CHANGED
|
@@ -8,6 +8,8 @@ export const rect = (ctx, attribs, pos, w, h, r = 0) => {
|
|
|
8
8
|
return path(ctx, attribs, [
|
|
9
9
|
["M", [pos[0] + r, pos[1]]],
|
|
10
10
|
["h", w],
|
|
11
|
+
// FIXME need new type ID for circular arcs
|
|
12
|
+
// see issues #69 & #418
|
|
11
13
|
["a", [r, 0], [r, r], r],
|
|
12
14
|
["v", h],
|
|
13
15
|
["a", [0, r], [-r, r], r],
|