@xpadev-net/niconicomments 0.2.75 → 0.2.76

package/dist/bundle.d.ts

@@ -2612,7 +2612,7 @@ interface IRenderer {
     stroke(): void;
     save(): void;
     restore(): void;
-    getCanvas(): IRenderer;
+    getCanvas(padding?: number): IRenderer;
     drawImage(image: IRenderer, x: number, y: number, width?: number, height?: number): void;
 }
 
@@ -3204,7 +3204,10 @@ declare class CanvasRenderer implements IRenderer {
     readonly canvas: HTMLCanvasElement;
     readonly video?: HTMLVideoElement;
     private readonly context;
-    constructor(canvas?: HTMLCanvasElement, video?: HTMLVideoElement);
+    private padding;
+    private width;
+    private height;
+    constructor(canvas?: HTMLCanvasElement, video?: HTMLVideoElement, padding?: number);
     drawVideo(enableLegacyPip: boolean): void;
     getFont(): string;
     getFillStyle(): string | CanvasGradient | CanvasPattern;
@@ -3234,7 +3237,7 @@ declare class CanvasRenderer implements IRenderer {
     stroke(): void;
     save(): void;
     restore(): void;
-    getCanvas(): IRenderer;
+    getCanvas(padding?: number): IRenderer;
     destroy(): void;
 }
 

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.75
+  niconicomments.js v0.2.76
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -3758,9 +3758,9 @@
             const drawScale = getConfig(config.commentScale, false) *
                 scale *
                 (this.comment.layer === -1 ? options.scale : 1);
-            const image = this.renderer.getCanvas();
-            image.setSize(this.comment.width + 2 * 2 * this.comment.charSize, this.comment.height +
-                (((paddingTop + 1) * this.comment.lineHeight) / scale) * drawScale);
+            const DEFAULT_COMMENT_PADDING = 4;
+            const image = this.renderer.getCanvas(DEFAULT_COMMENT_PADDING);
+            image.setSize(this.comment.width, this.comment.height);
             image.setStrokeStyle(getStrokeColor(this.comment));
             image.setFillStyle(this.comment.color);
             image.setLineWidth(getConfig(config.contextLineWidth, false));
@@ -4624,7 +4624,10 @@
         canvas;
         video;
         context;
-        constructor(canvas, video) {
+        padding = 0;
+        width = 0;
+        height = 0;
+        constructor(canvas, video, padding = 0) {
             this.canvas = canvas ?? document.createElement("canvas");
             const context = this.canvas.getContext("2d");
             if (!context)
@@ -4634,6 +4637,14 @@
             this.context.textBaseline = "alphabetic";
             this.context.lineJoin = "round";
             this.video = video;
+            this.padding = padding;
+            this.width = this.canvas.width;
+            this.height = this.canvas.height;
+            if (this.padding > 0) {
+                this.canvas.width += this.padding * 2;
+                this.canvas.height += this.padding * 2;
+                this.context.translate(this.padding, this.padding);
+            }
         }
         drawVideo(enableLegacyPip) {
             if (this.video) {
@@ -4703,11 +4714,16 @@
             this.context.globalAlpha = alpha;
         }
         setSize(width, height) {
-            this.canvas.width = width;
-            this.canvas.height = height;
+            this.width = width;
+            this.height = height;
+            this.canvas.width = width + this.padding * 2;
+            this.canvas.height = height + this.padding * 2;
         }
         getSize() {
-            return { width: this.canvas.width, height: this.canvas.height };
+            return {
+                width: this.width,
+                height: this.height,
+            };
         }
         measureText(text) {
             return this.context.measureText(text);
@@ -4733,8 +4749,8 @@
         restore() {
             this.context.restore();
         }
-        getCanvas() {
-            return new CanvasRenderer();
+        getCanvas(padding = 0) {
+            return new CanvasRenderer(undefined, undefined, padding);
         }
         destroy() {
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.75",
+  "version": "0.2.76",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "types": "dist/bundle.d.ts",
@@ -45,27 +45,30 @@
   "homepage": "https://xpadev-net.github.io/niconicomments/",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.27.1",
+    "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@biomejs/biome": "^1.9.4",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.53.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.15.32",
     "copyfiles": "^2.4.1",
     "http-server": "^14.1.1",
-    "lefthook": "^1.11.13",
+    "lefthook": "^1.11.14",
     "rimraf": "^6.0.1",
-    "rollup": "^4.41.0",
+    "rollup": "^4.44.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-typescript-paths": "^1.5.0",
     "tslib": "^2.8.1",
     "typedoc": "^0.26.11",
     "typedoc-plugin-missing-exports": "^3.1.0",
     "typescript": "^5.8.3",
-    "valibot": "^1"
+    "valibot": "^1.1.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
   }
 }