@thi.ng/rdom-canvas 0.5.41 → 0.5.43

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 (4) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/README.md +1 -1
  3. package/index.js +58 -72
  4. package/package.json +15 -10
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Change Log
2
2
 
3
- - **Last updated**: 2023-12-09T19:12:03Z
3
+ - **Last updated**: 2023-12-11T10:07:09Z
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.
package/README.md CHANGED
@@ -119,7 +119,7 @@ For Node.js REPL:
119
119
  const rdomCanvas = await import("@thi.ng/rdom-canvas");
120
120
  ```
121
121
 
122
- Package sizes (brotli'd, pre-treeshake): ESM: 703 bytes
122
+ Package sizes (brotli'd, pre-treeshake): ESM: 722 bytes
123
123
 
124
124
  ## Dependencies
125
125
 
package/index.js CHANGED
@@ -7,77 +7,63 @@ import { __nextID } from "@thi.ng/rdom/idgen";
7
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
- /**
11
- * Reactive [thi.ng/hiccup-canvas](https://thi.ng/hiccup-canvas) component
12
- * wrapper. Returns a canvas component wrapped in a {@link $sub} and
13
- * updates/re-renders canvas with each new input received from `body`.
14
- *
15
- * @remarks
16
- * If `size` is subscribable, the canvas is resized each time a new value is
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.
24
- */
25
- export const $canvas = (body, size, attribs) => $subWithID(body, new $Canvas(size, attribs), __nextID("canvas", body));
26
- export class $Canvas extends Component {
27
- attribs;
28
- ctx;
29
- inner;
30
- size;
31
- sizeSub;
32
- constructor(size, attribs = {}) {
33
- super();
34
- this.attribs = attribs;
35
- this.size = isSubscribable(size)
36
- ? size
37
- : reactive(size);
38
- this.sizeSub = this.size.subscribe({ next: this.resize.bind(this) }, { id: __nextID("canvas-resize") });
39
- }
40
- async mount(parent, index, shapes) {
41
- this.inner = this.$compile([
42
- "canvas",
43
- withoutKeysObj(this.attribs, [
44
- "onmount",
45
- "onunmount",
46
- "onresize",
47
- "ctx",
48
- ]),
49
- ]);
50
- this.el = await this.inner.mount(parent, index);
51
- this.ctx = this.el.getContext("2d", this.attribs.ctx);
52
- this.resize(this.size.deref() || [1, 1]);
53
- this.attribs.onmount && this.attribs.onmount(this.el, this.ctx);
54
- this.update(shapes);
55
- return this.el;
56
- }
57
- async unmount() {
58
- this.el && this.attribs.onunmount && this.attribs.onunmount(this.el);
59
- await this.inner.unmount();
60
- this.sizeSub.unsubscribe();
61
- this.inner = undefined;
62
- this.el = undefined;
63
- this.ctx = undefined;
64
- }
65
- resize(size) {
66
- if (this.el) {
67
- adaptDPI(this.el, size[0], size[1]);
68
- this.attribs.onresize &&
69
- this.attribs.onresize(this.el, this.ctx, size);
70
- }
71
- }
72
- update(tree) {
73
- if (tree == null)
74
- return;
75
- const shapes = implementsFunction(tree, "toHiccup")
76
- ? tree.toHiccup()
77
- : tree;
78
- const scale = window.devicePixelRatio || 1;
79
- this.ctx.resetTransform();
80
- this.ctx.scale(scale, scale);
81
- draw(this.ctx, shapes);
10
+ const $canvas = (body, size, attribs) => $subWithID(body, new $Canvas(size, attribs), __nextID("canvas", body));
11
+ class $Canvas extends Component {
12
+ constructor(size, attribs = {}) {
13
+ super();
14
+ this.attribs = attribs;
15
+ this.size = isSubscribable(size) ? size : reactive(size);
16
+ this.sizeSub = this.size.subscribe(
17
+ { next: this.resize.bind(this) },
18
+ { id: __nextID("canvas-resize") }
19
+ );
20
+ }
21
+ ctx;
22
+ inner;
23
+ size;
24
+ sizeSub;
25
+ async mount(parent, index, shapes) {
26
+ this.inner = this.$compile([
27
+ "canvas",
28
+ withoutKeysObj(this.attribs, [
29
+ "onmount",
30
+ "onunmount",
31
+ "onresize",
32
+ "ctx"
33
+ ])
34
+ ]);
35
+ this.el = await this.inner.mount(parent, index);
36
+ this.ctx = this.el.getContext("2d", this.attribs.ctx);
37
+ this.resize(this.size.deref() || [1, 1]);
38
+ this.attribs.onmount && this.attribs.onmount(this.el, this.ctx);
39
+ this.update(shapes);
40
+ return this.el;
41
+ }
42
+ async unmount() {
43
+ this.el && this.attribs.onunmount && this.attribs.onunmount(this.el);
44
+ await this.inner.unmount();
45
+ this.sizeSub.unsubscribe();
46
+ this.inner = void 0;
47
+ this.el = void 0;
48
+ this.ctx = void 0;
49
+ }
50
+ resize(size) {
51
+ if (this.el) {
52
+ adaptDPI(this.el, size[0], size[1]);
53
+ this.attribs.onresize && this.attribs.onresize(this.el, this.ctx, size);
82
54
  }
55
+ }
56
+ update(tree) {
57
+ if (tree == null)
58
+ return;
59
+ const shapes = implementsFunction(tree, "toHiccup") ? tree.toHiccup() : tree;
60
+ const scale = window.devicePixelRatio || 1;
61
+ this.ctx.resetTransform();
62
+ this.ctx.scale(scale, scale);
63
+ draw(this.ctx, shapes);
64
+ }
83
65
  }
66
+ export {
67
+ $Canvas,
68
+ $canvas
69
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thi.ng/rdom-canvas",
3
- "version": "0.5.41",
3
+ "version": "0.5.43",
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",
@@ -24,7 +24,9 @@
24
24
  "author": "Karsten Schmidt (https://thi.ng)",
25
25
  "license": "Apache-2.0",
26
26
  "scripts": {
27
- "build": "yarn clean && tsc --declaration",
27
+ "build": "yarn build:esbuild && yarn build:decl",
28
+ "build:decl": "tsc --declaration --emitDeclarationOnly",
29
+ "build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
28
30
  "clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
29
31
  "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
30
32
  "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -33,16 +35,17 @@
33
35
  "test": "bun test"
34
36
  },
35
37
  "dependencies": {
36
- "@thi.ng/adapt-dpi": "^2.2.27",
37
- "@thi.ng/api": "^8.9.11",
38
- "@thi.ng/associative": "^6.3.23",
39
- "@thi.ng/checks": "^3.4.11",
40
- "@thi.ng/hiccup-canvas": "^2.4.11",
41
- "@thi.ng/rdom": "^0.13.3",
42
- "@thi.ng/rstream": "^8.2.13"
38
+ "@thi.ng/adapt-dpi": "^2.2.28",
39
+ "@thi.ng/api": "^8.9.12",
40
+ "@thi.ng/associative": "^6.3.24",
41
+ "@thi.ng/checks": "^3.4.12",
42
+ "@thi.ng/hiccup-canvas": "^2.4.13",
43
+ "@thi.ng/rdom": "^0.13.4",
44
+ "@thi.ng/rstream": "^8.2.14"
43
45
  },
44
46
  "devDependencies": {
45
47
  "@microsoft/api-extractor": "^7.38.3",
48
+ "esbuild": "^0.19.8",
46
49
  "rimraf": "^5.0.5",
47
50
  "tools": "^0.0.1",
48
51
  "typedoc": "^0.25.4",
@@ -56,6 +59,8 @@
56
59
  "declarative",
57
60
  "graphics",
58
61
  "hiccup",
62
+ "rdom",
63
+ "reactive",
59
64
  "scenegraph",
60
65
  "typescript",
61
66
  "ui",
@@ -87,5 +92,5 @@
87
92
  "status": "alpha",
88
93
  "year": 2020
89
94
  },
90
- "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
95
+ "gitHead": "22e36fa838e5431d40165384918b395603bbd92f\n"
91
96
  }