@xpadev-net/niconicomments 0.2.53 → 0.2.55

package/dist/bundle.d.ts

@@ -30,6 +30,7 @@ declare class BaseComment implements IComment {
     draw(vpos: number, showCollision: boolean, debug: boolean): void;
     protected _draw(posX: number, posY: number): void;
     protected _drawRectColor(posX: number, posY: number): void;
+    protected _drawBackgroundColor(posX: number, posY: number): void;
     protected _drawDebugInfo(posX: number, posY: number, debug: boolean): void;
     protected _drawCollision(posX: number, posY: number, showCollision: boolean): void;
     protected getTextImage(): Canvas | null;
@@ -440,194 +441,197 @@ type inputFormatType = InputFormatType;
  */
 type inputFormat = InputFormat;
 
-type FormattedCommentWithFont = {
-  id: number;
-  vpos: number;
-  date: number;
-  date_usec: number;
-  owner: boolean;
-  premium: boolean;
-  mail: string[];
-  user_id: number;
-  layer: number;
-  loc: CommentLoc;
-  size: CommentSize;
-  fontSize: number;
-  font: CommentFont;
-  color: string;
-  strokeColor?: string;
-  wakuColor?: string;
-  full: boolean;
-  ender: boolean;
-  _live: boolean;
-  long: number;
-  invisible: boolean;
-  content: CommentContentItem[];
-  rawContent: string;
-  flash: boolean;
-  lineCount: number;
-  lineOffset: number;
-};
-type FormattedCommentWithSize = FormattedCommentWithFont & {
-  height: number;
-  width: number;
-  lineHeight: number;
-  resized: boolean;
-  resizedX: boolean;
-  resizedY: boolean;
-  content: CommentMeasuredContentItem[];
-  charSize: number;
-};
-type ParseContentResult = {
-  content: CommentContentItem[];
-  lineCount: number;
-  lineOffset: number;
-};
-type ParseCommandAndNicoScriptResult = {
-  flash: boolean;
-  loc: CommentLoc;
-  size: CommentSize;
-  fontSize: number;
-  color: string;
-  strokeColor?: string;
-  wakuColor?: string;
-  font: CommentFont;
-  full: boolean;
-  ender: boolean;
-  _live: boolean;
-  invisible: boolean;
-  long: number;
-};
-type CommentContentItem = {
-  content: string;
-  slicedContent: string[];
-  font?: CommentFlashFont;
-  width?: number[];
-};
-type CommentMeasuredContentItem = CommentContentItem & {
-  width: number[];
-};
-type CommentContentIndex = {
-  index: number;
-  font: "gothic" | "gulim" | "simsunStrong" | "simsunWeak";
-};
-type CommentFont = "defont" | "mincho" | "gothic" | "gulim" | "simsun";
-type CommentFlashFont = "defont" | "gulim" | "simsun";
-type CommentSize = "big" | "medium" | "small";
-type CommentLoc = "ue" | "naka" | "shita";
-type Collision = { [key in CollisionPos]: CollisionItem };
-type Timeline = { [key: number]: IComment[] };
-type CollisionPos = "ue" | "shita" | "right" | "left";
-type CollisionItem = { [p: number]: IComment[] };
-type NicoScript = {
-  reverse: NicoScriptReverse[];
-  ban: NicoScriptBan[];
-  default: NicoScriptDefault[];
-  replace: NicoScriptReplace[];
-  seekDisable: NicoScriptSeekDisable[];
-  jump: NicoScriptJump[];
-};
-type NicoScriptSeekDisable = {
-  start: number;
-  end: number;
-};
-type NicoScriptJump = {
-  start: number;
-  end?: number;
-  to: string;
-  message?: string;
-};
-type NicoScriptReverse = {
-  target: NicoScriptReverseTarget;
-  start: number;
-  end: number;
-};
-type NicoScriptReverseTarget = "コメ" | "投コメ" | "全";
-type NicoScriptReplace = {
-  start: number;
-  long: number | undefined;
-  keyword: string;
-  replace: string;
-  range: NicoScriptReplaceRange;
-  target: NicoScriptReplaceTarget;
-  condition: NicoScriptReplaceCondition;
-  color: string | undefined;
-  size: CommentSize | undefined;
-  font: CommentFont | undefined;
-  loc: CommentLoc | undefined;
-  no: number;
-};
-type NicoScriptReplaceRange = "単" | "全";
-type NicoScriptReplaceTarget =
-  | "コメ"
-  | "投コメ"
-  | "全"
-  | "含まない"
-  | "含む";
-type NicoScriptReplaceCondition = "完全一致" | "部分一致";
-type NicoScriptBan = {
-  start: number;
-  end: number;
-};
-type NicoScriptDefault = {
-  start: number;
-  long: number | undefined;
-  color: string | undefined;
-  size: CommentSize | undefined;
-  font: CommentFont | undefined;
-  loc: CommentLoc | undefined;
-};
-type MeasureTextResult = {
-  width: number;
-  height: number;
-  resized: boolean;
-  resizedX: boolean;
-  resizedY: boolean;
-  fontSize: number;
-  lineHeight: number;
-  content: CommentMeasuredContentItem[];
-  charSize: number;
-};
-type ParsedCommand = {
-  loc: CommentLoc | undefined;
-  size: CommentSize | undefined;
-  fontSize: number | undefined;
-  color: string | undefined;
-  strokeColor?: string;
-  wakuColor?: string;
-  font: CommentFont | undefined;
-  full: boolean;
-  ender: boolean;
-  _live: boolean;
-  invisible: boolean;
-  long: number | undefined;
-};
-
-type MeasureTextInput = {
-  content: CommentContentItem[];
-  resized?: boolean;
-  ender: boolean;
-  size: CommentSize;
-  fontSize: number;
-  resizedY?: boolean;
-  resizedX?: boolean;
-  font: CommentFont;
-  loc: CommentLoc;
-  full: boolean;
-  flash: boolean;
-  lineCount: number;
-  lineHeight?: number;
-  charSize?: number;
-};
-
-type MeasureInput = {
-  font: CommentFont;
-  content: CommentContentItem[];
-  lineHeight: number;
-  charSize: number;
-  lineCount: number;
-};
-
+type FormattedCommentWithFont = {
+  id: number;
+  vpos: number;
+  date: number;
+  date_usec: number;
+  owner: boolean;
+  premium: boolean;
+  mail: string[];
+  user_id: number;
+  layer: number;
+  loc: CommentLoc;
+  size: CommentSize;
+  fontSize: number;
+  font: CommentFont;
+  color: string;
+  strokeColor?: string;
+  wakuColor?: string;
+  fillColor?: string;
+  full: boolean;
+  ender: boolean;
+  _live: boolean;
+  long: number;
+  invisible: boolean;
+  content: CommentContentItem[];
+  rawContent: string;
+  flash: boolean;
+  lineCount: number;
+  lineOffset: number;
+};
+type FormattedCommentWithSize = FormattedCommentWithFont & {
+  height: number;
+  width: number;
+  lineHeight: number;
+  resized: boolean;
+  resizedX: boolean;
+  resizedY: boolean;
+  content: CommentMeasuredContentItem[];
+  charSize: number;
+};
+type ParseContentResult = {
+  content: CommentContentItem[];
+  lineCount: number;
+  lineOffset: number;
+};
+type ParseCommandAndNicoScriptResult = {
+  flash: boolean;
+  loc: CommentLoc;
+  size: CommentSize;
+  fontSize: number;
+  color: string;
+  strokeColor?: string;
+  wakuColor?: string;
+  fillColor?: string;
+  font: CommentFont;
+  full: boolean;
+  ender: boolean;
+  _live: boolean;
+  invisible: boolean;
+  long: number;
+};
+type CommentContentItem = {
+  content: string;
+  slicedContent: string[];
+  font?: CommentFlashFont;
+  width?: number[];
+};
+type CommentMeasuredContentItem = CommentContentItem & {
+  width: number[];
+};
+type CommentContentIndex = {
+  index: number;
+  font: "gothic" | "gulim" | "simsunStrong" | "simsunWeak";
+};
+type CommentFont = "defont" | "mincho" | "gothic" | "gulim" | "simsun";
+type CommentFlashFont = "defont" | "gulim" | "simsun";
+type CommentSize = "big" | "medium" | "small";
+type CommentLoc = "ue" | "naka" | "shita";
+type Collision = { [key in CollisionPos]: CollisionItem };
+type Timeline = { [key: number]: IComment[] };
+type CollisionPos = "ue" | "shita" | "right" | "left";
+type CollisionItem = { [p: number]: IComment[] };
+type NicoScript = {
+  reverse: NicoScriptReverse[];
+  ban: NicoScriptBan[];
+  default: NicoScriptDefault[];
+  replace: NicoScriptReplace[];
+  seekDisable: NicoScriptSeekDisable[];
+  jump: NicoScriptJump[];
+};
+type NicoScriptSeekDisable = {
+  start: number;
+  end: number;
+};
+type NicoScriptJump = {
+  start: number;
+  end?: number;
+  to: string;
+  message?: string;
+};
+type NicoScriptReverse = {
+  target: NicoScriptReverseTarget;
+  start: number;
+  end: number;
+};
+type NicoScriptReverseTarget = "コメ" | "投コメ" | "全";
+type NicoScriptReplace = {
+  start: number;
+  long: number | undefined;
+  keyword: string;
+  replace: string;
+  range: NicoScriptReplaceRange;
+  target: NicoScriptReplaceTarget;
+  condition: NicoScriptReplaceCondition;
+  color: string | undefined;
+  size: CommentSize | undefined;
+  font: CommentFont | undefined;
+  loc: CommentLoc | undefined;
+  no: number;
+};
+type NicoScriptReplaceRange = "単" | "全";
+type NicoScriptReplaceTarget =
+  | "コメ"
+  | "投コメ"
+  | "全"
+  | "含まない"
+  | "含む";
+type NicoScriptReplaceCondition = "完全一致" | "部分一致";
+type NicoScriptBan = {
+  start: number;
+  end: number;
+};
+type NicoScriptDefault = {
+  start: number;
+  long: number | undefined;
+  color: string | undefined;
+  size: CommentSize | undefined;
+  font: CommentFont | undefined;
+  loc: CommentLoc | undefined;
+};
+type MeasureTextResult = {
+  width: number;
+  height: number;
+  resized: boolean;
+  resizedX: boolean;
+  resizedY: boolean;
+  fontSize: number;
+  lineHeight: number;
+  content: CommentMeasuredContentItem[];
+  charSize: number;
+};
+type ParsedCommand = {
+  loc: CommentLoc | undefined;
+  size: CommentSize | undefined;
+  fontSize: number | undefined;
+  color: string | undefined;
+  strokeColor?: string;
+  wakuColor?: string;
+  fillColor?: string;
+  font: CommentFont | undefined;
+  full: boolean;
+  ender: boolean;
+  _live: boolean;
+  invisible: boolean;
+  long: number | undefined;
+};
+
+type MeasureTextInput = {
+  content: CommentContentItem[];
+  resized?: boolean;
+  ender: boolean;
+  size: CommentSize;
+  fontSize: number;
+  resizedY?: boolean;
+  resizedX?: boolean;
+  font: CommentFont;
+  loc: CommentLoc;
+  full: boolean;
+  flash: boolean;
+  lineCount: number;
+  lineHeight?: number;
+  charSize?: number;
+};
+
+type MeasureInput = {
+  font: CommentFont;
+  content: CommentContentItem[];
+  lineHeight: number;
+  charSize: number;
+  lineCount: number;
+};
+
 type ValueOf<T> = T[keyof T];
 
 declare let imageCache: {

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.53
+  niconicomments.js v0.2.55
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -187,12 +187,13 @@
     };
     const getStrokeColor = (comment) => {
         if (comment.strokeColor) {
-            const length = comment.strokeColor.length;
+            const color = comment.strokeColor.slice(1);
+            const length = color.length;
             if (length === 3 || length === 6) {
-                return `rgba(${hex2rgb(comment.strokeColor).join(",")},${config.contextStrokeOpacity})`;
+                return `rgba(${hex2rgb(color).join(",")},${config.contextStrokeOpacity})`;
             }
             else if (length === 4 || length === 8) {
-                return `rgba(${hex2rgba(comment.strokeColor).join(",")})`;
+                return `rgba(${hex2rgba(color).join(",")})`;
             }
         }
         return `rgba(${hex2rgb(comment.color === "#000000"
@@ -549,6 +550,7 @@
             invisible: commands.invisible,
             strokeColor: commands.strokeColor,
             wakuColor: commands.wakuColor,
+            fillColor: commands.fillColor,
         };
     };
     const parseBrackets = (input) => {
@@ -743,6 +745,11 @@
             result.wakuColor ??= rectColor;
             return;
         }
+        const fillColor = getColor(command.match(/^nico:fill:(.+)$/));
+        if (fillColor) {
+            result.fillColor ??= fillColor;
+            return;
+        }
         if (typeGuard.comment.loc(command)) {
             result.loc ??= command;
             return;
@@ -777,7 +784,7 @@
             return colors[value];
         }
         else if (typeGuard.comment.colorCodeAllowAlpha(value)) {
-            return value.slice(1);
+            return value;
         }
         return;
     };
@@ -1381,6 +1388,7 @@
             const posY = this.comment.loc === "shita"
                 ? config.canvasHeight - this.posY - this.comment.height
                 : this.posY;
+            this._drawBackgroundColor(posX, posY);
             this._draw(posX, posY);
             this._drawRectColor(posX, posY);
             this._drawCollision(posX, posY, showCollision);
@@ -1410,6 +1418,14 @@
                 this.context.restore();
             }
         }
+        _drawBackgroundColor(posX, posY) {
+            if (this.comment.fillColor) {
+                this.context.save();
+                this.context.fillStyle = this.comment.fillColor;
+                this.context.fillRect(posX, posY, this.comment.width, this.comment.height);
+                this.context.restore();
+            }
+        }
         _drawDebugInfo(posX, posY, debug) {
             if (debug) {
                 this.context.save();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.53",
+  "version": "0.2.55",
   "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",