@thi.ng/hiccup-canvas 2.1.40 → 2.2.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2022-12-22T21:47:07Z
+- **Last updated**: 2023-01-10T15:20:19Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,14 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+## [2.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-canvas@2.2.0) (2023-01-10)
+
+#### 🚀 Features
+
+- add __background attrib support ([a33a58d](https://github.com/thi-ng/umbrella/commit/a33a58d))
+  - update __mergeState() to fill bg if attrib given
+  - refactor attrib handling in main draw() fn
+
 ### [2.1.9](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-canvas@2.1.9) (2022-04-07)
 
 #### ♻️ Refactoring

package/README.md

@@ -47,6 +47,8 @@ This project is part of the
     - [Translation](#translation)
     - [Scaling](#scaling)
     - [Rotation](#rotation)
+  - [Special attributes](#special-attributes)
+    - [Background fill](#background-fill)
 - [Authors](#authors)
 - [License](#license)
 
@@ -92,7 +94,7 @@ For Node.js REPL:
 const hiccupCanvas = await import("@thi.ng/hiccup-canvas");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 2.36 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 2.40 KB
 
 ## Dependencies
 
@@ -493,6 +495,15 @@ package for creating different kinds of transformation matrices, e.g.
 { rotate: theta } // in radians
 ```
 
+### Special attributes
+
+#### Background fill
+
+The special `__background` attribute can be used to fill the entire canvas with
+a given background color. The attribute only makes sense if attached to the root
+group/shape and can take the same values as any other [color
+attribs](#color-attributes).
+
 ## Authors
 
 - [Karsten Schmidt](https://thi.ng)
@@ -510,4 +521,4 @@ If this project contributes to an academic publication, please cite it as:
 
 ## License
 
-© 2018 - 2022 Karsten Schmidt // Apache License 2.0
+© 2018 - 2023 Karsten Schmidt // Apache License 2.0

package/draw.js

@@ -25,26 +25,27 @@ export const draw = (ctx, shape, pstate = { attribs: {}, edits: [] }) => {
         }
         return;
     }
-    const state = __mergeState(ctx, pstate, shape[1]);
-    const attribs = state ? state.attribs : pstate.attribs;
-    if (attribs.__skip)
+    const origAttribs = shape[1];
+    if (origAttribs.__skip)
         return;
+    const state = __mergeState(ctx, pstate, origAttribs);
+    const attribs = state ? state.attribs : pstate.attribs;
     switch (shape[0]) {
         case "g":
         case "defs":
             defs(ctx, state, pstate, shape);
             break;
         case "linearGradient":
-            __registerGradient(pstate, shape[1].id, defLinearGradient(ctx, shape[1], shape[2]));
+            __registerGradient(pstate, origAttribs.id, defLinearGradient(ctx, origAttribs, shape[2]));
             break;
         case "radialGradient":
-            __registerGradient(pstate, shape[1].id, defRadialGradient(ctx, shape[1], shape[2]));
+            __registerGradient(pstate, origAttribs.id, defRadialGradient(ctx, origAttribs, shape[2]));
             break;
         case "points":
-            points(ctx, attribs, shape[1], shape[2]);
+            points(ctx, attribs, origAttribs, shape[2]);
             break;
         case "packedPoints":
-            packedPoints(ctx, attribs, shape[1], shape[2]);
+            packedPoints(ctx, attribs, origAttribs, shape[2]);
             break;
         case "line":
             line(ctx, attribs, shape[2], shape[3]);
@@ -83,7 +84,7 @@ export const draw = (ctx, shape, pstate = { attribs: {}, edits: [] }) => {
             text(ctx, attribs, shape[2], shape[3], shape[4]);
             break;
         case "img":
-            image(ctx, attribs, shape[1], shape[2], shape[3], shape[4], shape[5]);
+            image(ctx, attribs, origAttribs, shape[2], shape[3], shape[4], shape[5]);
         default:
     }
     state && __restoreState(ctx, pstate, state);

package/internal/state.js

@@ -71,6 +71,13 @@ export const __mergeState = (ctx, state, attribs) => {
                 setAttrib(ctx, state, id, k, v);
             }
         }
+        else if (id === "__background") {
+            ctx.save();
+            ctx.resetTransform();
+            ctx.fillStyle = resolveGradientOrColor(state, attribs[id]);
+            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            ctx.restore();
+        }
     }
     return res;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hiccup-canvas",
-  "version": "2.1.40",
+  "version": "2.2.0",
   "description": "Hiccup shape tree renderer for vanilla Canvas 2D contexts",
   "type": "module",
   "module": "./index.js",
@@ -34,16 +34,16 @@
     "test": "testament test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.6.2",
-    "@thi.ng/checks": "^3.3.6",
-    "@thi.ng/color": "^5.2.15",
-    "@thi.ng/math": "^5.3.18",
-    "@thi.ng/pixel": "^4.0.13",
-    "@thi.ng/vectors": "^7.5.29"
+    "@thi.ng/api": "^8.6.3",
+    "@thi.ng/checks": "^3.3.7",
+    "@thi.ng/color": "^5.2.17",
+    "@thi.ng/math": "^5.4.0",
+    "@thi.ng/pixel": "^4.1.0",
+    "@thi.ng/vectors": "^7.5.31"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.33.7",
-    "@thi.ng/testament": "^0.3.8",
+    "@thi.ng/testament": "^0.3.9",
     "rimraf": "^3.0.2",
     "tools": "^0.0.1",
     "typedoc": "^0.23.22",
@@ -130,5 +130,5 @@
     ],
     "year": 2018
   },
-  "gitHead": "bc6f7f5e2765bb96fe64db804eaf4b2443b47fc6\n"
+  "gitHead": "3f0b3e2a7c82aefc7e46fb4338369836b5e1b8cf\n"
 }