@thi.ng/rdom-canvas 0.4.57 → 0.5.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +15 -1
  2. package/README.md +70 -7
  3. package/index.d.ts +8 -4
  4. package/index.js +12 -16
  5. package/package.json +11 -12
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Change Log
2
2
 
3
- - **Last updated**: 2023-03-27T19:05:49Z
3
+ - **Last updated**: 2023-04-08T11:09:50Z
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,20 @@ 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
+ ## [0.5.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-canvas@0.5.0) (2023-04-08)
13
+
14
+ #### 🚀 Features
15
+
16
+ - set fallback canvas size if given as sub ([7fe9d63](https://github.com/thi-ng/umbrella/commit/7fe9d63))
17
+
18
+ #### 🩹 Bug fixes
19
+
20
+ - fix generics, internal refactoring ([18ebe32](https://github.com/thi-ng/umbrella/commit/18ebe32))
21
+ - update internal resize handling
22
+ - remove obsolete bg/clear handling (now part of hiccup-canvas)
23
+ - add subscription IDs
24
+ - update deps
25
+
12
26
  ## [0.4.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom-canvas@0.4.0) (2021-11-17)
13
27
 
14
28
  #### 🚀 Features
package/README.md CHANGED
@@ -10,6 +10,8 @@ This project is part of the
10
10
  [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo.
11
11
 
12
12
  - [About](#about)
13
+ - [General usage](#general-usage)
14
+ - [Control attributes](#control-attributes)
13
15
  - [Status](#status)
14
16
  - [Related packages](#related-packages)
15
17
  - [Installation](#installation)
@@ -21,7 +23,67 @@ This project is part of the
21
23
 
22
24
  ## About
23
25
 
24
- [@thi.ng/rdom](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom) component wrapper for [@thi.ng/hiccup-canvas](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-canvas) and declarative canvas drawing.
26
+ [@thi.ng/rdom](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom) component wrapper for [@thi.ng/hiccup-canvas](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-canvas) and declarative canvas drawing. Please consult these packages' READMEs for further
27
+ background information...
28
+
29
+ ### General usage
30
+
31
+ As with most thi.ng/rdom components, the state (aka geometry/scenegraph) for the
32
+ canvas component is being sourced from a
33
+ [thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream)
34
+ subscription. The canvas redraws every time that subscription delivers a new
35
+ value. The size of the canvas can be given as a subscription too and if so will
36
+ also automatically trigger resizing of the canvas.
37
+
38
+ The geometry to rendered to the canvas is expressed as
39
+ [thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/develop/packages/),
40
+ specifically the flavor used by
41
+ [thi.ng/hiccup-canvas](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-canvas),
42
+ which (not just coincidentally) is the same as also used by
43
+ [thi.ng/geom](https://github.com/thi-ng/umbrella/tree/develop/packages/geom)
44
+ shapes.
45
+
46
+ ```ts tangle:export/readme1.ts
47
+ import { circle, group } from "@thi.ng/geom";
48
+ import { $canvas } from "@thi.ng/rdom-canvas";
49
+ import { fromRAF } from "@thi.ng/rstream";
50
+ import { repeatedly } from "@thi.ng/transducers";
51
+
52
+ // create geometry stream/subscription
53
+ const geo = fromRAF().map((t) =>
54
+ // shape group w/ attribs (also see section in readme)
55
+ group({ __background: "#0ff" }, [
56
+ // create 10 circles
57
+ ...repeatedly(
58
+ (i) =>
59
+ circle(
60
+ [
61
+ Math.sin(t * 0.01 + i * 0.5) * 150 + 300,
62
+ Math.sin(t * 0.03 + i * 0.5) * 150 + 300
63
+ ],
64
+ 50,
65
+ // colors can be given as RGBA vectors or CSS
66
+ { fill: [i * 0.1, 0, i * 0.05] }
67
+ ),
68
+ 10
69
+ )
70
+ ])
71
+ );
72
+
73
+ // create & mount canvas component (w/ fixed size)
74
+ $canvas(geo, [600, 600]).mount(document.body);
75
+ ```
76
+
77
+ ### Control attributes
78
+
79
+ The root shape/group support the following special attributes:
80
+
81
+ - `__background`: background color. If given, fills the canvas will given color
82
+ before drawing
83
+ - `__clear`: clear background flag. If true clears the canvas before drawing
84
+
85
+ Also see relevant section in the [thi.ng/hiccup-canvas
86
+ README](https://github.com/thi-ng/umbrella/blob/develop/packages/hiccup-canvas/README.md#special-attributes)...
25
87
 
26
88
  ## Status
27
89
 
@@ -56,7 +118,7 @@ For Node.js REPL:
56
118
  const rdomCanvas = await import("@thi.ng/rdom-canvas");
57
119
  ```
58
120
 
59
- Package sizes (brotli'd, pre-treeshake): ESM: 646 bytes
121
+ Package sizes (brotli'd, pre-treeshake): ESM: 596 bytes
60
122
 
61
123
  ## Dependencies
62
124
 
@@ -67,7 +129,6 @@ Package sizes (brotli'd, pre-treeshake): ESM: 646 bytes
67
129
  - [@thi.ng/hiccup-canvas](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-canvas)
68
130
  - [@thi.ng/rdom](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom)
69
131
  - [@thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream)
70
- - [@thi.ng/transducers](https://github.com/thi-ng/umbrella/tree/develop/packages/transducers)
71
132
 
72
133
  ## Usage examples
73
134
 
@@ -77,10 +138,12 @@ directory are using this package.
77
138
 
78
139
  A selection:
79
140
 
80
- | Screenshot | Description | Live demo | Source |
81
- |:-------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------|:--------------------------------------------------------|:-------------------------------------------------------------------------------------|
82
- | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/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://github.com/thi-ng/umbrella/tree/develop/examples/ellipse-proximity) |
83
- | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lissajous.png" width="240"/> | rdom & hiccup-canvas interop test | [Demo](https://demo.thi.ng/umbrella/rdom-lissajous/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lissajous) |
141
+ | Screenshot | Description | Live demo | Source |
142
+ |:--------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------|:---------------------------------------------------------|:--------------------------------------------------------------------------------------|
143
+ | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/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://github.com/thi-ng/umbrella/tree/develop/examples/ellipse-proximity) |
144
+ | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-canvas-basics.png" width="240"/> | Minimal rdom-canvas animation | [Demo](https://demo.thi.ng/umbrella/rdom-canvas-basics/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-canvas-basics) |
145
+ | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lissajous.png" width="240"/> | rdom & hiccup-canvas interop test | [Demo](https://demo.thi.ng/umbrella/rdom-lissajous/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lissajous) |
146
+ | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/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://github.com/thi-ng/umbrella/tree/develop/examples/trace-bitmap) |
84
147
 
85
148
  ## API
86
149
 
package/index.d.ts CHANGED
@@ -29,11 +29,15 @@ export interface CanvasOpts {
29
29
  *
30
30
  * @remarks
31
31
  * If `size` is subscribable, the canvas is resized each time a new value is
32
- * received, else will only be used to define initial canvas size. The `attribs`
33
- * SHOULD not include `width`, `height`, since these will be overriden in any
34
- * way by `size` arg.
32
+ * received, else will only be used to define initial canvas size.
33
+ *
34
+ * If given a sub (for size) and it has not (yet) produced a value, a default
35
+ * canvas size of 1x1 pixel will be used.
36
+ *
37
+ * The `attribs` SHOULD not include `width`, `height`, since these will be
38
+ * overriden in any way by `size` arg.
35
39
  */
36
- export declare const $canvas: (body: ISubscription<any, any[] | IToHiccup>, size: number[] | ISubscription<any, number[]>, attribs?: Partial<CanvasOpts>) => IComponent<any[] | IToHiccup>;
40
+ export declare const $canvas: <T extends any[] | IToHiccup>(body: ISubscription<any, T>, size: number[] | ISubscription<any, number[]>, attribs?: Partial<CanvasOpts>) => IComponent<T>;
37
41
  export declare class $Canvas extends Component implements IMountWithState<any[] | IToHiccup> {
38
42
  protected attribs: Partial<CanvasOpts>;
39
43
  el?: HTMLCanvasElement;
package/index.js CHANGED
@@ -1,13 +1,12 @@
1
1
  import { adaptDPI } from "@thi.ng/adapt-dpi";
2
2
  import { withoutKeysObj } from "@thi.ng/associative/without-keys";
3
3
  import { implementsFunction } from "@thi.ng/checks/implements-function";
4
- import { resolveColor } from "@thi.ng/hiccup-canvas/color";
5
4
  import { draw } from "@thi.ng/hiccup-canvas/draw";
6
5
  import { Component } from "@thi.ng/rdom/component";
7
- import { $sub } from "@thi.ng/rdom/sub";
6
+ import { __nextID } from "@thi.ng/rdom/idgen";
7
+ import { $subWithID } from "@thi.ng/rdom/sub";
8
8
  import { isSubscribable } from "@thi.ng/rstream/checks";
9
9
  import { reactive } from "@thi.ng/rstream/stream";
10
- import { sideEffect } from "@thi.ng/transducers/side-effect";
11
10
  /**
12
11
  * Reactive [thi.ng/hiccup-canvas](https://thi.ng/hiccup-canvas) component
13
12
  * wrapper. Returns a canvas component wrapped in a {@link $sub} and
@@ -15,11 +14,15 @@ import { sideEffect } from "@thi.ng/transducers/side-effect";
15
14
  *
16
15
  * @remarks
17
16
  * If `size` is subscribable, the canvas is resized each time a new value is
18
- * received, else will only be used to define initial canvas size. The `attribs`
19
- * SHOULD not include `width`, `height`, since these will be overriden in any
20
- * way by `size` arg.
17
+ * received, else will only be used to define initial canvas size.
18
+ *
19
+ * If given a sub (for size) and it has not (yet) produced a value, a default
20
+ * canvas size of 1x1 pixel will be used.
21
+ *
22
+ * The `attribs` SHOULD not include `width`, `height`, since these will be
23
+ * overriden in any way by `size` arg.
21
24
  */
22
- export const $canvas = (body, size, attribs) => $sub(body, new $Canvas(size, attribs));
25
+ export const $canvas = (body, size, attribs) => $subWithID(body, new $Canvas(size, attribs), __nextID("canvas", body));
23
26
  export class $Canvas extends Component {
24
27
  constructor(size, attribs = {}) {
25
28
  super();
@@ -27,7 +30,7 @@ export class $Canvas extends Component {
27
30
  this.size = isSubscribable(size)
28
31
  ? size
29
32
  : reactive(size);
30
- this.sizeSub = this.size.transform(sideEffect((size) => this.resize(size)));
33
+ this.sizeSub = this.size.subscribe({ next: this.resize.bind(this) }, { id: __nextID("canvas-resize") });
31
34
  }
32
35
  async mount(parent, index, shapes) {
33
36
  this.inner = this.$compile([
@@ -41,7 +44,7 @@ export class $Canvas extends Component {
41
44
  ]);
42
45
  this.el = await this.inner.mount(parent, index);
43
46
  this.ctx = this.el.getContext("2d", this.attribs.ctx);
44
- this.resize(this.size.deref());
47
+ this.resize(this.size.deref() || [1, 1]);
45
48
  this.attribs.onmount && this.attribs.onmount(this.el, this.ctx);
46
49
  this.update(shapes);
47
50
  return this.el;
@@ -67,13 +70,6 @@ export class $Canvas extends Component {
67
70
  const shapes = implementsFunction(tree, "toHiccup")
68
71
  ? tree.toHiccup()
69
72
  : tree;
70
- if (shapes[1].__bg) {
71
- this.ctx.fillStyle = resolveColor(shapes[1].__bg);
72
- this.ctx.fillRect(0, 0, this.el.width, this.el.height);
73
- }
74
- else if (shapes[1].__clear !== false) {
75
- this.ctx.clearRect(0, 0, this.el.width, this.el.height);
76
- }
77
73
  const scale = window.devicePixelRatio || 1;
78
74
  this.ctx.resetTransform();
79
75
  this.ctx.scale(scale, scale);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thi.ng/rdom-canvas",
3
- "version": "0.4.57",
3
+ "version": "0.5.0",
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",
@@ -34,22 +34,21 @@
34
34
  "test": "testament test"
35
35
  },
36
36
  "dependencies": {
37
- "@thi.ng/adapt-dpi": "^2.2.10",
38
- "@thi.ng/api": "^8.7.5",
39
- "@thi.ng/associative": "^6.2.33",
40
- "@thi.ng/checks": "^3.3.11",
41
- "@thi.ng/hiccup-canvas": "^2.2.12",
42
- "@thi.ng/rdom": "^0.10.18",
43
- "@thi.ng/rstream": "^7.2.46",
44
- "@thi.ng/transducers": "^8.4.1"
37
+ "@thi.ng/adapt-dpi": "^2.2.11",
38
+ "@thi.ng/api": "^8.7.6",
39
+ "@thi.ng/associative": "^6.2.34",
40
+ "@thi.ng/checks": "^3.3.12",
41
+ "@thi.ng/hiccup-canvas": "^2.3.0",
42
+ "@thi.ng/rdom": "^0.11.0",
43
+ "@thi.ng/rstream": "^8.0.0"
45
44
  },
46
45
  "devDependencies": {
47
46
  "@microsoft/api-extractor": "^7.34.4",
48
- "@thi.ng/testament": "^0.3.14",
47
+ "@thi.ng/testament": "^0.3.15",
49
48
  "rimraf": "^4.4.1",
50
49
  "tools": "^0.0.1",
51
50
  "typedoc": "^0.23.28",
52
- "typescript": "^5.0.2"
51
+ "typescript": "^5.0.4"
53
52
  },
54
53
  "keywords": [
55
54
  "animation",
@@ -90,5 +89,5 @@
90
89
  "status": "alpha",
91
90
  "year": 2020
92
91
  },
93
- "gitHead": "83b15b34326d480cbca0472b20390d4d3bbb792a\n"
92
+ "gitHead": "abcedd9e4e06a4b631f363610eec572f79b571c1\n"
94
93
  }