@thi.ng/rdom-canvas 0.2.2 → 0.3.4

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 +11 -8
  2. package/README.md +2 -1
  3. package/index.d.ts +23 -4
  4. package/index.js +23 -9
  5. package/package.json +11 -10
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [0.2.2](https://github.com/thi-ng/umbrella/compare/@thi.ng/rdom-canvas@0.2.1...@thi.ng/rdom-canvas@0.2.2) (2021-10-13)
6
+ ## [0.3.4](https://github.com/thi-ng/umbrella/compare/@thi.ng/rdom-canvas@0.3.3...@thi.ng/rdom-canvas@0.3.4) (2021-11-03)
7
7
 
8
8
  **Note:** Version bump only for package @thi.ng/rdom-canvas
9
9
 
@@ -11,9 +11,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
11
11
 
12
12
 
13
13
 
14
- ## [0.2.1](https://github.com/thi-ng/umbrella/compare/@thi.ng/rdom-canvas@0.2.0...@thi.ng/rdom-canvas@0.2.1) (2021-10-13)
14
+ # [0.3.0](https://github.com/thi-ng/umbrella/compare/@thi.ng/rdom-canvas@0.2.4...@thi.ng/rdom-canvas@0.3.0) (2021-10-25)
15
15
 
16
- **Note:** Version bump only for package @thi.ng/rdom-canvas
16
+
17
+ ### Features
18
+
19
+ * **rdom-canvas:** add lifecycle events, canvas opts ([a579904](https://github.com/thi-ng/umbrella/commit/a5799040ae6244ffe2695623f400962285cc5df0))
17
20
 
18
21
 
19
22
 
@@ -53,14 +56,14 @@ Also:
53
56
 
54
57
 
55
58
 
56
- ## [0.1.9](https://github.com/thi-ng/umbrella/compare/@thi.ng/rdom-canvas@0.1.8...@thi.ng/rdom-canvas@0.1.9) (2020-07-28)
59
+ ## [0.1.9](https://github.com/thi-ng/umbrella/compare/@thi.ng/rdom-canvas@0.1.8...@thi.ng/rdom-canvas@0.1.9) (2020-07-28)
57
60
 
58
- ### Bug Fixes
61
+ ### Bug Fixes
59
62
 
60
- - **rdom-canvas:** static canvas size handling ([1a03c70](https://github.com/thi-ng/umbrella/commit/1a03c70e3e9fe6c8b096f78084dc590102d96893))
63
+ - **rdom-canvas:** static canvas size handling ([1a03c70](https://github.com/thi-ng/umbrella/commit/1a03c70e3e9fe6c8b096f78084dc590102d96893))
61
64
 
62
- # 0.1.0 (2020-07-02)
65
+ # 0.1.0 (2020-07-02)
63
66
 
64
- ### Features
67
+ ### Features
65
68
 
66
69
  - **rdom-canvas:** import as new pkg ([369d4de](https://github.com/thi-ng/umbrella/commit/369d4de29c0b0c1ff3092126902f1835ac61870e))
package/README.md CHANGED
@@ -59,12 +59,13 @@ node --experimental-repl-await
59
59
  > const rdomCanvas = await import("@thi.ng/rdom-canvas");
60
60
  ```
61
61
 
62
- Package sizes (gzipped, pre-treeshake): ESM: 601 bytes
62
+ Package sizes (gzipped, pre-treeshake): ESM: 724 bytes
63
63
 
64
64
  ## Dependencies
65
65
 
66
66
  - [@thi.ng/adapt-dpi](https://github.com/thi-ng/umbrella/tree/develop/packages/adapt-dpi)
67
67
  - [@thi.ng/api](https://github.com/thi-ng/umbrella/tree/develop/packages/api)
68
+ - [@thi.ng/associative](https://github.com/thi-ng/umbrella/tree/develop/packages/associative)
68
69
  - [@thi.ng/checks](https://github.com/thi-ng/umbrella/tree/develop/packages/checks)
69
70
  - [@thi.ng/hiccup-canvas](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-canvas)
70
71
  - [@thi.ng/rdom](https://github.com/thi-ng/umbrella/tree/develop/packages/rdom)
package/index.d.ts CHANGED
@@ -1,7 +1,26 @@
1
- import type { IToHiccup } from "@thi.ng/api";
1
+ import type { Fn, Fn2, Fn3, IToHiccup } from "@thi.ng/api";
2
2
  import type { IComponent, IMountWithState, NumOrElement } from "@thi.ng/rdom";
3
3
  import { Component } from "@thi.ng/rdom/component";
4
4
  import type { ISubscription } from "@thi.ng/rstream";
5
+ export interface CanvasOpts {
6
+ /**
7
+ * Custom component lifecycle handler called when canvas first mounts.
8
+ */
9
+ onmount: Fn2<HTMLCanvasElement, CanvasRenderingContext2D, void>;
10
+ /**
11
+ * Custom component lifecycle handler called when canvas unmounts.
12
+ */
13
+ onunmount: Fn<HTMLCanvasElement, void>;
14
+ /**
15
+ * Custom component event handler called when canvas size has changed (only used when canvas size is initially given as reactive value).
16
+ */
17
+ onresize: Fn3<HTMLCanvasElement, CanvasRenderingContext2D, number[], void>;
18
+ /**
19
+ * Standard Canvas2D context options
20
+ */
21
+ ctx: CanvasRenderingContext2DSettings;
22
+ [id: string]: any;
23
+ }
5
24
  /**
6
25
  * Reactive {@link @thi.ng/hiccup-canvas} component wrapper. Returns a
7
26
  * canvas component wrapped in a {@link $sub} and updates/re-renders
@@ -13,15 +32,15 @@ import type { ISubscription } from "@thi.ng/rstream";
13
32
  * size. The `attribs` SHOULD not include `width`, `height`, since these
14
33
  * will be overriden in any way by `size` arg.
15
34
  */
16
- export declare const $canvas: (body: ISubscription<any, any[] | IToHiccup>, size: number[] | ISubscription<any, number[]>, attribs?: any) => IComponent<any[] | IToHiccup>;
35
+ export declare const $canvas: (body: ISubscription<any, any[] | IToHiccup>, size: number[] | ISubscription<any, number[]>, attribs?: Partial<CanvasOpts> | undefined) => IComponent<any[] | IToHiccup>;
17
36
  export declare class $Canvas extends Component implements IMountWithState<any[] | IToHiccup> {
18
- protected attribs: any;
37
+ protected attribs: Partial<CanvasOpts>;
19
38
  el?: HTMLCanvasElement;
20
39
  ctx?: CanvasRenderingContext2D;
21
40
  inner?: IComponent<any>;
22
41
  size: ISubscription<any, number[]>;
23
42
  sizeSub: ISubscription<number[], number[]>;
24
- constructor(size: number[] | ISubscription<any, number[]>, attribs?: any);
43
+ constructor(size: number[] | ISubscription<any, number[]>, attribs?: Partial<CanvasOpts>);
25
44
  mount(parent: Element, index: NumOrElement, shapes: any[] | IToHiccup): Promise<HTMLCanvasElement>;
26
45
  unmount(): Promise<void>;
27
46
  resize(size: number[]): void;
package/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { adaptDPI } from "@thi.ng/adapt-dpi";
2
+ import { withoutKeysObj } from "@thi.ng/associative/without-keys";
2
3
  import { implementsFunction } from "@thi.ng/checks/implements-function";
4
+ import { resolveColor } from "@thi.ng/hiccup-canvas/color";
3
5
  import { draw } from "@thi.ng/hiccup-canvas/draw";
4
6
  import { Component } from "@thi.ng/rdom/component";
5
7
  import { $sub } from "@thi.ng/rdom/sub";
@@ -19,11 +21,6 @@ import { sideEffect } from "@thi.ng/transducers/side-effect";
19
21
  */
20
22
  export const $canvas = (body, size, attribs) => $sub(body, new $Canvas(size, attribs));
21
23
  export class $Canvas extends Component {
22
- attribs;
23
- ctx;
24
- inner;
25
- size;
26
- sizeSub;
27
24
  constructor(size, attribs = {}) {
28
25
  super();
29
26
  this.attribs = attribs;
@@ -33,15 +30,25 @@ export class $Canvas extends Component {
33
30
  this.sizeSub = this.size.transform(sideEffect((size) => this.resize(size)));
34
31
  }
35
32
  async mount(parent, index, shapes) {
36
- this.inner = this.$compile(["canvas", this.attribs]);
33
+ this.inner = this.$compile([
34
+ "canvas",
35
+ withoutKeysObj(this.attribs, [
36
+ "onmount",
37
+ "onunmount",
38
+ "onresize",
39
+ "ctx",
40
+ ]),
41
+ ]);
37
42
  this.el = await this.inner.mount(parent, index);
38
- this.ctx = this.el.getContext("2d");
43
+ this.ctx = this.el.getContext("2d", this.attribs.ctx);
39
44
  this.resize(this.size.deref());
45
+ this.attribs.onmount && this.attribs.onmount(this.el, this.ctx);
40
46
  this.update(shapes);
41
47
  return this.el;
42
48
  }
43
49
  async unmount() {
44
- this.inner.unmount();
50
+ this.el && this.attribs.onunmount && this.attribs.onunmount(this.el);
51
+ await this.inner.unmount();
45
52
  this.sizeSub.unsubscribe();
46
53
  this.inner = undefined;
47
54
  this.el = undefined;
@@ -50,6 +57,8 @@ export class $Canvas extends Component {
50
57
  resize(size) {
51
58
  if (this.el) {
52
59
  adaptDPI(this.el, size[0], size[1]);
60
+ this.attribs.onresize &&
61
+ this.attribs.onresize(this.el, this.ctx, size);
53
62
  }
54
63
  }
55
64
  update(tree) {
@@ -58,8 +67,13 @@ export class $Canvas extends Component {
58
67
  const shapes = implementsFunction(tree, "toHiccup")
59
68
  ? tree.toHiccup()
60
69
  : tree;
61
- shapes[1].__clear !== false &&
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) {
62
75
  this.ctx.clearRect(0, 0, this.el.width, this.el.height);
76
+ }
63
77
  const scale = window.devicePixelRatio || 1;
64
78
  this.ctx.resetTransform();
65
79
  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.2.2",
3
+ "version": "0.3.4",
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,16 +34,17 @@
34
34
  "test": "testament test"
35
35
  },
36
36
  "dependencies": {
37
- "@thi.ng/adapt-dpi": "^2.0.1",
38
- "@thi.ng/api": "^8.0.1",
39
- "@thi.ng/checks": "^3.0.1",
40
- "@thi.ng/hiccup-canvas": "^2.0.2",
41
- "@thi.ng/rdom": "^0.7.1",
42
- "@thi.ng/rstream": "^7.0.1",
43
- "@thi.ng/transducers": "^8.0.1"
37
+ "@thi.ng/adapt-dpi": "^2.0.6",
38
+ "@thi.ng/api": "^8.1.0",
39
+ "@thi.ng/associative": "^6.0.8",
40
+ "@thi.ng/checks": "^3.0.6",
41
+ "@thi.ng/hiccup-canvas": "^2.0.8",
42
+ "@thi.ng/rdom": "^0.7.8",
43
+ "@thi.ng/rstream": "^7.0.8",
44
+ "@thi.ng/transducers": "^8.0.7"
44
45
  },
45
46
  "devDependencies": {
46
- "@thi.ng/testament": "^0.1.1"
47
+ "@thi.ng/testament": "^0.1.6"
47
48
  },
48
49
  "keywords": [
49
50
  "animation",
@@ -84,5 +85,5 @@
84
85
  "status": "alpha",
85
86
  "year": 2020
86
87
  },
87
- "gitHead": "ad5ea82893d1154c0ecc7a1886a4670c1d418222"
88
+ "gitHead": "852cd2450617c86d15d18477dc634f17f04202eb"
88
89
  }