@thi.ng/hiccup-canvas 2.3.26 → 2.4.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-10-12T11:53:09Z
+- **Last updated**: 2023-10-23T07:37:37Z
 - **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.4.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-canvas@2.4.0) (2023-10-23)
+
+#### 🚀 Features
+
+- add/update packed shape support ([14ce2f8](https://github.com/thi-ng/umbrella/commit/14ce2f8))
+  - add packedPolyline() / packedPolygon() fns
+  - update draw() to add support for new shape types
+
 ### [2.3.24](https://github.com/thi-ng/umbrella/tree/@thi.ng/hiccup-canvas@2.3.24) (2023-10-11)
 
 #### 🩹 Bug fixes

package/README.md

@@ -32,10 +32,10 @@ This project is part of the
   - [Path](#path)
     - [SVG paths with arc segments](#svg-paths-with-arc-segments)
   - [Points](#points)
-  - [Packed points](#packed-points)
   - [Text](#text)
   - [Image](#image)
   - [Gradients](#gradients)
+  - [Using flat, packed vertex buffers](#using-flat-packed-vertex-buffers)
 - [Attributes](#attributes)
   - [Color attributes](#color-attributes)
     - [String](#string)
@@ -96,7 +96,7 @@ For Node.js REPL:
 const hiccupCanvas = await import("@thi.ng/hiccup-canvas");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 2.43 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 2.52 KB
 
 ## Dependencies
 
@@ -314,34 +314,6 @@ The following shape specific attributes are used:
 - `shape`: `circle` or `rect` (default)
 - `size`: point size (radius for circles, width for rects) - default: 1
 
-### Packed points
-
-Similar to `points`, but uses a single packed buffer for all point
-coordinates.
-
-```ts
-["packedPoints", attribs, [x1,y1, x2,y2,...]]
-```
-
-Optional start index, number of points, component & point stride lengths
-(number of indices between each vector component and each point
-respectively) can be given as attributes.
-
-Defaults:
-
-- start index: 0
-- number of points: (array_length - start) / estride
-- component stride: 1
-- element stride: 2
-
-```ts
-["packedPoints", { cstride: 1, estride: 4 },
-    [x1, y1, 0, 0, x2, y2, 0, 0, ...]]
-
-["packedPoints", { offset: 8, num: 3, cstride: 4, estride: 1 },
-    [0, 0, 0, 0, 0, 0, 0, 0, x1, x2, x3, 0, y1, y2, y3, 0...]]
-```
-
 ### Text
 
 ```ts
@@ -387,6 +359,42 @@ a gradient in a `fill` or `stroke` attribute, e.g. `{stroke: "$foo" }`
 ]
 ```
 
+### Using flat, packed vertex buffers
+
+The `points`, `polyline` and `polygon` shape types also provide alternative
+versions, each allowing the use of a single packed buffer (e.g. typed array) for
+all point coordinates instead of individual arrays/views per vertex. This much
+simplifies & speeds up WASM interop usecases, which can now skip creating vector
+views of a vertexbuffer memory region.
+
+```ts
+["packedPoints", attribs, [x1,y1, x2,y2,...]]
+
+["packedPolyline", attribs, [x1,y1, x2,y2,...]]
+
+["packedPolygon", attribs, [x1,y1, x2,y2,...]]
+```
+
+Optional start index, number of points, component & element stride lengths (i.e.
+the number of indices between each vector x/y component and/or each point
+respectively) can be given as attributes and thus these packaged shapes support
+both AOS and SOA memory layouts/arrangements.
+
+Defaults:
+
+- start index: 0
+- number of vertices: (array_length - start) / estride
+- component stride: 1
+- element stride: 2
+
+```ts
+["packedPoints", { cstride: 1, estride: 4 },
+    [x1, y1, 0, 0, x2, y2, 0, 0, ...]]
+
+["packedPoints", { offset: 8, num: 3, cstride: 4, estride: 1 },
+    [0, 0, 0, 0, 0, 0, 0, 0, x1, x2, x3, 0, y1, y2, y3, 0...]]
+```
+
 ## Attributes
 
 Some attributes use different names than their actual names in the

package/draw.js

@@ -8,8 +8,8 @@ import { line, lines } from "./line.js";
 import { packedPoints } from "./packed-points.js";
 import { path } from "./path.js";
 import { points } from "./points.js";
-import { polygon } from "./polygon.js";
-import { polyline } from "./polyline.js";
+import { packedPolygon, polygon } from "./polygon.js";
+import { packedPolyline, polyline } from "./polyline.js";
 import { rect } from "./rect.js";
 import { text } from "./text.js";
 export const draw = (ctx, shape, pstate = { attribs: {}, edits: [] }) => {
@@ -62,9 +62,15 @@ export const draw = (ctx, shape, pstate = { attribs: {}, edits: [] }) => {
         case "polyline":
             polyline(ctx, attribs, shape[2]);
             break;
+        case "packedPolyline":
+            packedPolyline(ctx, attribs, shape[2]);
+            break;
         case "polygon":
             polygon(ctx, attribs, shape[2]);
             break;
+        case "packedPolygon":
+            packedPolygon(ctx, attribs, shape[2]);
+            break;
         case "path":
             path(ctx, attribs, shape[2]);
             break;

package/internal/end-shape.d.ts

@@ -1,4 +1,4 @@
 import type { IObjectOf } from "@thi.ng/api";
 /** @internal */
-export declare const __endShape: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>) => void;
+export declare const __endShape: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>, doFill?: boolean) => void;
 //# sourceMappingURL=end-shape.d.ts.map

package/internal/end-shape.js

@@ -1,7 +1,7 @@
 /** @internal */
-export const __endShape = (ctx, attribs) => {
+export const __endShape = (ctx, attribs, doFill = true) => {
     let v;
-    if ((v = attribs.fill) && v !== "none") {
+    if (doFill && (v = attribs.fill) && v !== "none") {
         ctx.fill();
     }
     if ((v = attribs.stroke) && v !== "none") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hiccup-canvas",
-  "version": "2.3.26",
+  "version": "2.4.1",
   "description": "Hiccup shape tree renderer for vanilla Canvas 2D contexts",
   "type": "module",
   "module": "./index.js",
@@ -34,19 +34,19 @@
     "test": "testament test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.5",
-    "@thi.ng/checks": "^3.4.5",
-    "@thi.ng/color": "^5.5.23",
-    "@thi.ng/math": "^5.6.2",
-    "@thi.ng/pixel": "^4.2.26",
-    "@thi.ng/vectors": "^7.7.19"
+    "@thi.ng/api": "^8.9.6",
+    "@thi.ng/checks": "^3.4.6",
+    "@thi.ng/color": "^5.5.25",
+    "@thi.ng/math": "^5.6.3",
+    "@thi.ng/pixel": "^4.2.28",
+    "@thi.ng/vectors": "^7.7.21"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.36.4",
-    "@thi.ng/testament": "^0.3.23",
-    "rimraf": "^5.0.1",
+    "@microsoft/api-extractor": "^7.38.0",
+    "@thi.ng/testament": "^0.3.24",
+    "rimraf": "^5.0.5",
     "tools": "^0.0.1",
-    "typedoc": "^0.25.0",
+    "typedoc": "^0.25.2",
     "typescript": "^5.2.2"
   },
   "keywords": [
@@ -130,5 +130,5 @@
     ],
     "year": 2018
   },
-  "gitHead": "46e445c09f2909d1aeaa9fdc8d8b3aa61c114db2\n"
+  "gitHead": "dc7eeaba72f3c3977f2d6cc201e595ed6d68e2ad\n"
 }

package/polygon.d.ts

@@ -1,6 +1,7 @@
 import type { IObjectOf } from "@thi.ng/api";
 import type { ReadonlyVec } from "@thi.ng/vectors";
 export declare const polygon: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>, pts: ReadonlyVec[]) => void;
+export declare const packedPolygon: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>, pts: ArrayLike<number>) => void;
 /**
  * Shared internal helper for polygon & polyline fns.
  *
@@ -10,4 +11,14 @@ export declare const polygon: (ctx: CanvasRenderingContext2D, attribs: IObjectOf
  * @internal
  */
 export declare const __drawPoly: (ctx: CanvasRenderingContext2D, pts: ReadonlyVec[]) => void;
+/**
+ * Shared internal helper for packed polygon & polyline fns.
+ *
+ * @param ctx - canvas context
+ * @param ctx - shape attribs (incl. packing config)
+ * @param pts - flat vertex buffer
+ *
+ * @internal
+ */
+export declare const __drawPackedPoly: (ctx: CanvasRenderingContext2D, opts: IObjectOf<any>, pts: ArrayLike<number>) => void;
 //# sourceMappingURL=polygon.d.ts.map

package/polygon.js

@@ -6,6 +6,13 @@ export const polygon = (ctx, attribs, pts) => {
     ctx.closePath();
     __endShape(ctx, attribs);
 };
+export const packedPolygon = (ctx, attribs, pts) => {
+    if (pts.length < 2)
+        return;
+    __drawPackedPoly(ctx, attribs, pts);
+    ctx.closePath();
+    __endShape(ctx, attribs);
+};
 /**
  * Shared internal helper for polygon & polyline fns.
  *
@@ -23,3 +30,28 @@ export const __drawPoly = (ctx, pts) => {
         ctx.lineTo(p[0], p[1]);
     }
 };
+/**
+ * Shared internal helper for packed polygon & polyline fns.
+ *
+ * @param ctx - canvas context
+ * @param ctx - shape attribs (incl. packing config)
+ * @param pts - flat vertex buffer
+ *
+ * @internal
+ */
+export const __drawPackedPoly = (ctx, opts, pts) => {
+    const { start, cstride, estride } = {
+        start: 0,
+        cstride: 1,
+        estride: 2,
+        ...opts,
+    };
+    let num = opts && opts.num != null
+        ? opts.num
+        : ((pts.length - start) / estride) | 0;
+    ctx.beginPath();
+    ctx.moveTo(pts[start], pts[start + cstride]);
+    for (let i = start + estride; num-- > 1; i += estride) {
+        ctx.lineTo(pts[i], pts[i + cstride]);
+    }
+};

package/polyline.d.ts

@@ -1,4 +1,5 @@
 import type { IObjectOf } from "@thi.ng/api";
 import type { ReadonlyVec } from "@thi.ng/vectors";
 export declare const polyline: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>, pts: ReadonlyVec[]) => void;
+export declare const packedPolyline: (ctx: CanvasRenderingContext2D, attribs: IObjectOf<any>, pts: ArrayLike<number>) => void;
 //# sourceMappingURL=polyline.d.ts.map

package/polyline.js

@@ -1,7 +1,14 @@
-import { __drawPoly } from "./polygon.js";
+import { __endShape } from "./internal/end-shape.js";
+import { __drawPackedPoly, __drawPoly } from "./polygon.js";
 export const polyline = (ctx, attribs, pts) => {
     if (pts.length < 2 || attribs.stroke == "none")
         return;
     __drawPoly(ctx, pts);
-    ctx.stroke();
+    __endShape(ctx, attribs, false);
+};
+export const packedPolyline = (ctx, attribs, pts) => {
+    if (pts.length < 2)
+        return;
+    __drawPackedPoly(ctx, attribs, pts);
+    __endShape(ctx, attribs, false);
 };