@thi.ng/hdom-canvas 4.1.227 → 4.2.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.
- package/README.md +15 -6
- package/index.js +7 -12
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -82,11 +82,12 @@ Browser ESM import:
|
|
|
82
82
|
|
|
83
83
|
[JSDelivr documentation](https://www.jsdelivr.com/)
|
|
84
84
|
|
|
85
|
-
Package sizes (brotli'd, pre-treeshake): ESM:
|
|
85
|
+
Package sizes (brotli'd, pre-treeshake): ESM: 826 bytes
|
|
86
86
|
|
|
87
87
|
## Dependencies
|
|
88
88
|
|
|
89
89
|
- [@thi.ng/api](https://github.com/thi-ng/umbrella/tree/develop/packages/api)
|
|
90
|
+
- [@thi.ng/canvas](https://github.com/thi-ng/umbrella/tree/develop/packages/canvas)
|
|
90
91
|
- [@thi.ng/checks](https://github.com/thi-ng/umbrella/tree/develop/packages/checks)
|
|
91
92
|
- [@thi.ng/diff](https://github.com/thi-ng/umbrella/tree/develop/packages/diff)
|
|
92
93
|
- [@thi.ng/errors](https://github.com/thi-ng/umbrella/tree/develop/packages/errors)
|
|
@@ -218,24 +219,32 @@ import { canvas } from "@thi.ng/hdom-components";
|
|
|
218
219
|
|
|
219
220
|
### HDPI support
|
|
220
221
|
|
|
221
|
-
|
|
222
|
-
adding CSS `width` & `height` properties and pre-scaling the drawing
|
|
223
|
-
context accordingly before any shapes are processed.
|
|
224
|
-
|
|
222
|
+
By default, the canvas component automatically adjusts its size for HDPI
|
|
223
|
+
displays by adding CSS `width` & `height` properties and pre-scaling the drawing
|
|
224
|
+
context accordingly before any shapes are processed. Since v4.2.0 the density
|
|
225
|
+
can also be directly controlled via the `__dpr` control attribute. For
|
|
226
|
+
fullscreen canvases simply set the `width` & `height` attribs to:
|
|
225
227
|
|
|
226
228
|
```ts
|
|
227
229
|
import { canvas } from "@thi.ng/hdom-components";
|
|
228
230
|
|
|
229
231
|
[canvas,
|
|
230
232
|
{
|
|
233
|
+
// fullscreen canvas (assuming no borders)
|
|
231
234
|
width: window.innerWidth,
|
|
232
|
-
height: window.innerHeight
|
|
235
|
+
height: window.innerHeight,
|
|
236
|
+
// force fixed pixel density (else defaults to window.devicePixelRatio)
|
|
237
|
+
__dpr: 1
|
|
233
238
|
},
|
|
234
239
|
// shapes
|
|
235
240
|
...
|
|
236
241
|
]
|
|
237
242
|
```
|
|
238
243
|
|
|
244
|
+
See [thi.ng/hiccup-canvas
|
|
245
|
+
readme](https://docs.thi.ng/umbrella/hiccup-canvas/#device-pixel-ratio) for
|
|
246
|
+
further details.
|
|
247
|
+
|
|
239
248
|
## SVG conversion
|
|
240
249
|
|
|
241
250
|
Even though the element names & syntax are *very similar* to SVG
|
package/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { NO_OP } from "@thi.ng/api/api";
|
|
2
|
+
import { adaptDPI } from "@thi.ng/canvas";
|
|
2
3
|
import { isArray } from "@thi.ng/checks/is-array";
|
|
3
4
|
import { isNotStringAndIterable } from "@thi.ng/checks/is-not-string-iterable";
|
|
4
5
|
import { diffArray } from "@thi.ng/diff/array";
|
|
@@ -12,14 +13,6 @@ const canvas = {
|
|
|
12
13
|
const cattribs = { ...attribs };
|
|
13
14
|
delete cattribs.__diff;
|
|
14
15
|
delete cattribs.__normalize;
|
|
15
|
-
const dpr = window.devicePixelRatio || 1;
|
|
16
|
-
if (dpr !== 1) {
|
|
17
|
-
!cattribs.style && (cattribs.style = {});
|
|
18
|
-
cattribs.style.width = `${cattribs.width}px`;
|
|
19
|
-
cattribs.style.height = `${cattribs.height}px`;
|
|
20
|
-
cattribs.width *= dpr;
|
|
21
|
-
cattribs.height *= dpr;
|
|
22
|
-
}
|
|
23
16
|
return [
|
|
24
17
|
"canvas",
|
|
25
18
|
cattribs,
|
|
@@ -31,8 +24,10 @@ const canvas = {
|
|
|
31
24
|
__normalize: attribs.__normalize !== false,
|
|
32
25
|
__release: attribs.__release === true,
|
|
33
26
|
__serialize: false,
|
|
34
|
-
__clear: attribs.__clear,
|
|
35
|
-
|
|
27
|
+
__clear: attribs.__clear !== false,
|
|
28
|
+
__dpr: attribs.__dpr ?? window.devicePixelRatio,
|
|
29
|
+
__width: cattribs.width,
|
|
30
|
+
__height: cattribs.height
|
|
36
31
|
},
|
|
37
32
|
...body
|
|
38
33
|
]
|
|
@@ -45,8 +40,8 @@ const createTree = (_, canvas2, tree) => {
|
|
|
45
40
|
const attribs = tree[1];
|
|
46
41
|
if (attribs) {
|
|
47
42
|
if (attribs.__skip) return;
|
|
48
|
-
if (attribs.
|
|
49
|
-
|
|
43
|
+
if (attribs.__width !== void 0 && attribs.__width != canvas2.dataset.origWidth || attribs.__height !== void 0 && attribs.__height != canvas2.dataset.origHeight) {
|
|
44
|
+
adaptDPI(canvas2, attribs.__width, attribs.__height, 1);
|
|
50
45
|
}
|
|
51
46
|
}
|
|
52
47
|
draw(ctx, tree);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/hdom-canvas",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "@thi.ng/hdom component wrapper for declarative canvas scenegraphs",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -43,11 +43,12 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@thi.ng/api": "^8.12.7",
|
|
46
|
+
"@thi.ng/canvas": "^1.1.0",
|
|
46
47
|
"@thi.ng/checks": "^3.7.23",
|
|
47
48
|
"@thi.ng/diff": "^5.1.108",
|
|
48
49
|
"@thi.ng/errors": "^2.5.47",
|
|
49
|
-
"@thi.ng/hdom": "^9.4.
|
|
50
|
-
"@thi.ng/hiccup-canvas": "^3.
|
|
50
|
+
"@thi.ng/hdom": "^9.4.94",
|
|
51
|
+
"@thi.ng/hiccup-canvas": "^3.2.0"
|
|
51
52
|
},
|
|
52
53
|
"devDependencies": {
|
|
53
54
|
"esbuild": "^0.25.11",
|
|
@@ -94,5 +95,5 @@
|
|
|
94
95
|
],
|
|
95
96
|
"year": 2018
|
|
96
97
|
},
|
|
97
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "e2fd601e49ff1b1aec129518e3947ed1ebf8d75e\n"
|
|
98
99
|
}
|