@daeinc/draw - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/index.d.ts

@@ -1,45 +0,57 @@
-import type { Pt, Pts } from "@daeinc/geom";
+import { Pt, Pts } from '@daeinc/geom';
+
 /**
- * draw a circle with diameter
- * @param ctx
- * @param pt [x, y]
- * @param diam diameter
+ * Draw a circle with diameter
+ * @param ctx -
+ * @param pt - `[x, y]`
+ * @param diam - diameter
  */
-export declare const drawCircle: (ctx: CanvasRenderingContext2D, pt: Pt, diam: number) => void;
+declare const drawCircle: (ctx: CanvasRenderingContext2D, pt: Pt, diam: number) => void;
 /**
- *
- * @param ctx
- * @param msg
- * @param x
- * @param y
+ * Draw fill text. Make sure to set [`context.font`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font)
+ * @param ctx -
+ * @param msg - If number, use `toString()`
+ * @param pt - `[x, y]`
  */
-export declare const drawFillText: (ctx: CanvasRenderingContext2D, msg: string, pt: Pt) => void;
+declare const drawFillText: (ctx: CanvasRenderingContext2D, msg: string, pt: Pt) => void;
 /**
- * draw a line
- * @param ctx
- * @param pt1 [x, y]
- * @param pt2 [x, y]
+ * Draw a line
+ * @param ctx -
+ * @param pt1 - `[x, y]`
+ * @param pt2 - `[x, y]`
  */
-export declare const drawLine: (ctx: CanvasRenderingContext2D, pt1: Pt, pt2: Pt) => void;
+declare const drawLine: (ctx: CanvasRenderingContext2D, pt1: Pt, pt2: Pt) => void;
 /**
- * draw a 2d path. need to manually stroke/fill afterwards.
- * @param ctx canvas context 2d
- * @param path array of [ x, y ] point pairs
- * @param close close path or not. default is false
+ * Draw a 2d path. need to manually stroke/fill afterwards.
+ * @param ctx -
+ * @param path - array of `[x, y]` points
+ * @param close - close path or not. default is `false`
  */
-export declare const drawPath: (ctx: CanvasRenderingContext2D, path: Pts, close?: boolean) => void;
+declare const drawPath: (ctx: CanvasRenderingContext2D, path: Pts, close?: boolean) => void;
 /**
- * draw a rectangle
- * @param pt [ x, y ]
- * @param size [ width, height ]
- * @param mode "corner" or "center"
+ * Draw a rectangle
+ * @param pt - `[x, y]`
+ * @param size - `[width, height]`
+ * @param mode - Draw from top-left `corner` or `center`. Default is `corner`
  */
-export declare const drawRect: (ctx: CanvasRenderingContext2D, pt: Pt, size: Pt, mode?: "corner" | "center") => void;
+declare const drawRect: (ctx: CanvasRenderingContext2D, pt: Pt, size: Pt, mode?: "corner" | "center") => void;
 /**
- * use quadratic curve to smoothen hard edges of path. use with geom.generateSmoothPath()
- * @param ctx
- * @param path array of [ x, y ]
- * @param close close path. default=false
+ * Draw a rectangle with rounded corner(s).
+ *
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect)
+ *
+ * @param pt - `[x, y]`
+ * @param size - `[width, height]`
+ * @param radii - Corner radius/radii. Can be a single value or multiple values.
+ * @param mode - Draw from top-left `corner` or `center`. Default is `corner`
  */
-export declare const drawSmoothPath: (ctx: CanvasRenderingContext2D, path: Pts, close?: boolean) => void;
-//# sourceMappingURL=index.d.ts.map
+declare const drawRoundRect: (ctx: CanvasRenderingContext2D, pt: Pt, size: Pt, radii?: number | DOMPointInit | Iterable<number | DOMPointInit> | null, mode?: "corner" | "center") => void;
+/**
+ * Use quadratic curve to smoothen hard edges of path. use with `geom.generateSmoothPath()`
+ * @param ctx -
+ * @param path - Array of `[x, y]` points
+ * @param close - close path. default is `false`
+ */
+declare const drawSmoothPath: (ctx: CanvasRenderingContext2D, path: Pts, close?: boolean) => void;
+
+export { drawCircle, drawFillText, drawLine, drawPath, drawRect, drawRoundRect, drawSmoothPath };

dist/index.js

@@ -1,84 +0,64 @@
-/**
- * draw a circle with diameter
- * @param ctx
- * @param pt [x, y]
- * @param diam diameter
- */
-export const drawCircle = (ctx, pt, diam) => {
-    ctx.beginPath();
-    ctx.arc(pt[0], pt[1], diam * 0.5, 0, Math.PI * 2);
+// index.ts
+var drawCircle = (ctx, pt, diam) => {
+  ctx.beginPath();
+  ctx.arc(pt[0], pt[1], diam * 0.5, 0, Math.PI * 2);
 };
-/**
- *
- * @param ctx
- * @param msg
- * @param x
- * @param y
- */
-export const drawFillText = (ctx, msg, pt
-// options?: { font: string }
-) => {
-    // ctx.font = options?.font ? (ctx.font = options.font) : "8px Helvetica";
-    ctx.fillText(msg, pt[0], pt[1]);
+var drawFillText = (ctx, msg, pt) => {
+  ctx.fillText(msg, pt[0], pt[1]);
 };
-/**
- * draw a line
- * @param ctx
- * @param pt1 [x, y]
- * @param pt2 [x, y]
- */
-export const drawLine = (ctx, pt1, pt2) => {
-    ctx.beginPath();
-    ctx.moveTo(pt1[0], pt1[1]);
-    ctx.lineTo(pt2[0], pt2[1]);
+var drawLine = (ctx, pt1, pt2) => {
+  ctx.beginPath();
+  ctx.moveTo(pt1[0], pt1[1]);
+  ctx.lineTo(pt2[0], pt2[1]);
 };
-/**
- * draw a 2d path. need to manually stroke/fill afterwards.
- * @param ctx canvas context 2d
- * @param path array of [ x, y ] point pairs
- * @param close close path or not. default is false
- */
-export const drawPath = (ctx, path, close = false) => {
-    ctx.beginPath();
-    ctx.moveTo(path[0][0], path[0][1]);
-    for (let i = 1; i < path.length; i++)
-        ctx.lineTo(path[i][0], path[i][1]);
-    if (close)
-        ctx.closePath();
+var drawPath = (ctx, path, close = false) => {
+  ctx.beginPath();
+  ctx.moveTo(path[0][0], path[0][1]);
+  for (let i = 1; i < path.length; i++)
+    ctx.lineTo(path[i][0], path[i][1]);
+  if (close)
+    ctx.closePath();
 };
-/**
- * draw a rectangle
- * @param pt [ x, y ]
- * @param size [ width, height ]
- * @param mode "corner" or "center"
- */
-export const drawRect = (ctx, pt, size, mode = "corner") => {
-    ctx.beginPath();
-    if (mode === "corner")
-        ctx.rect(pt[0], pt[1], size[0], size[1]);
-    else if (mode === "center")
-        ctx.rect(pt[0] - size[0] / 2, pt[1] - size[1] / 2, size[0], size[1]);
-    else
-        throw new Error(`drawRect() does not support mode: ${mode}`);
+var drawRect = (ctx, pt, size, mode = "corner") => {
+  ctx.beginPath();
+  if (mode === "corner")
+    ctx.rect(pt[0], pt[1], size[0], size[1]);
+  else if (mode === "center")
+    ctx.rect(pt[0] - size[0] / 2, pt[1] - size[1] / 2, size[0], size[1]);
+  else
+    throw new Error(`drawRect() does not support mode: ${mode}`);
 };
-/**
- * use quadratic curve to smoothen hard edges of path. use with geom.generateSmoothPath()
- * @param ctx
- * @param path array of [ x, y ]
- * @param close close path. default=false
- */
-export const drawSmoothPath = (ctx, path, close = false) => {
-    ctx.beginPath();
-    ctx.moveTo(path[0][0], path[0][1]);
-    ctx.lineTo(path[1][0], path[1][1]);
-    ctx.lineTo(path[2][0], path[2][1]);
-    for (let i = 3; i < path.length - 3; i += 3) {
-        ctx.quadraticCurveTo(path[i][0], path[i][1], path[i + 1][0], path[i + 1][1]);
-        ctx.lineTo(path[i + 2][0], path[i + 2][1]);
-    }
-    const lastPt = path[path.length - 1];
-    ctx.lineTo(lastPt[0], lastPt[1]);
-    if (close)
-        ctx.closePath();
+var drawRoundRect = (ctx, pt, size, radii, mode = "corner") => {
+  ctx.beginPath();
+  if (mode === "corner")
+    ctx.roundRect(pt[0], pt[1], size[0], size[1], radii || 0);
+  else if (mode === "center")
+    ctx.roundRect(
+      pt[0] - size[0] / 2,
+      pt[1] - size[1] / 2,
+      size[0],
+      size[1],
+      radii || 0
+    );
 };
-//# sourceMappingURL=index.js.map
+var drawSmoothPath = (ctx, path, close = false) => {
+  ctx.beginPath();
+  ctx.moveTo(path[0][0], path[0][1]);
+  ctx.lineTo(path[1][0], path[1][1]);
+  ctx.lineTo(path[2][0], path[2][1]);
+  for (let i = 3; i < path.length - 3; i += 3) {
+    ctx.quadraticCurveTo(
+      path[i][0],
+      path[i][1],
+      path[i + 1][0],
+      path[i + 1][1]
+    );
+    ctx.lineTo(path[i + 2][0], path[i + 2][1]);
+  }
+  const lastPt = path[path.length - 1];
+  ctx.lineTo(lastPt[0], lastPt[1]);
+  if (close)
+    ctx.closePath();
+};
+
+export { drawCircle, drawFillText, drawLine, drawPath, drawRect, drawRoundRect, drawSmoothPath };

package.json

 {
   "name": "@daeinc/draw",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "drawing utilities for HTML5 Canvas",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
+  "type": "module",
   "files": [
@@ -11,6 +12,8 @@ "/dist"
   "scripts": {
-    "watch": "npx tsc --watch",
-    "test": "jest --watch",
-    "demo": "parcel ./demo/demo.html --no-cache --dist-dir ./demo/build/",
-    "build": "npx tsc --build --clean && npx tsc --build"
+    "watch": "tsup --watch",
+    "test": "vitest --watch",
+    "demo": "vite ./demo --config vite.demo.config.ts",
+    "preview": "vite preview",
+    "build": "tsc --noemit && tsup",
+    "build-vite": "tsc --noemit && vite build --config vite.build.config.ts"
   },
@@ -20,12 +23,15 @@ "author": "Daeinc",
   "devDependencies": {
-    "@daeinc/canvas": "^0.12.1",
-    "jest": "^29.3.1",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-image-snapshot": "^6.1.0",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4.9.4"
+    "@daeinc/canvas": "^0.14.5",
+    "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-image-snapshot": "^6.4.0",
+    "ts-jest": "^29.1.2",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.3",
+    "vitest": "^1.3.0"
   },
   "dependencies": {
-    "@daeinc/geom": "^0.9.0"
+    "@daeinc/geom": "^0.11.0"
   },
@@ -32,0 +38,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Is type module

Yes

Worsened metrics

Total package byte prevSize

7387

decreased by-30.27%

Dev dependency count

10

increased by42.86%

Number of package files

5

decreased by-28.57%

Lines of code

118

decreased by-7.09%

Dependency changes

• + Added@daeinc/array@0.6.1(transitive)

• + Added@daeinc/geom@0.11.0(transitive)

• + Added@daeinc/math@0.6.1(transitive)

• - Removed@daeinc/array@0.5.1(transitive)

• - Removed@daeinc/geom@0.9.0(transitive)

• - Removed@daeinc/math@0.5.0(transitive)

• Updated@daeinc/geom@^0.11.0