Merge branch 'develop'

docs/index.html

@@ -466,6 +466,24 @@ <h4>example</h4>
             <p>カラーコードは透明度も指定可能です</p>
           </div>
         </div>
+        <h3 id="c_fill">Fill</h3>
+        <div class="item">
+          <h4>format</h4>
+          <div class="item">
+            <pre><code>nico:fill:(color|color code)</code></pre>
+          </div>
+          <h4>example</h4>
+          <div class="item">
+            <pre><code>nico:fill:red
+nico:fill:#f0f
+nico:fill:#fff5</code></pre>
+          </div>
+          <div class="item" data-i18n="c_fill">
+            <p>コメント単位で背景色の表示を制御できます</p>
+            <p>色の指定は色コマンドまたはカラーコードで行ってください</p>
+            <p>カラーコードは透明度も指定可能です</p>
+          </div>
+        </div>
       </section>
     </main>
   </body>

docs/localize.js

@@ -287,6 +287,14 @@ const localize = {
 <p>Color code can also specify transparency</p>`,
     `<p>コメント単位で枠の表示を制御できます</p>
 <p>色の指定は色コマンドまたはカラーコードで行ってください</p>
+<p>カラーコードは透明度も指定可能です</p>`
+  ],
+  c_fill: [
+    `<p>You can control the background color per comment.</p>
+<p>Colors can be specified with the color command or color code</p>
+<p>Color code can also specify transparency</p>`,
+    `<p>コメント単位で背景色の表示を制御できます</p>
+<p>色の指定は色コマンドまたはカラーコードで行ってください</p>
 <p>カラーコードは透明度も指定可能です</p>`
   ]
 };

docs/sample/index.html

@@ -6,7 +6,7 @@
   <title></title>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/i18next.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/i18nextBrowserLanguageDetector.min.js"></script>
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>
+  <script type="text/javascript" src="../../dist/bundle.js"></script>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments-plugin-niwango@latest/dist/bundle.min.js"></script>
   <script
           type="text/javascript"

package.json

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

src/@types/types.d.ts

@@ -17,6 +17,7 @@ export type FormattedCommentWithFont = {
   color: string;
   strokeColor?: string;
   wakuColor?: string;
+  fillColor?: string;
   full: boolean;
   ender: boolean;
   _live: boolean;
@@ -51,6 +52,7 @@ export type ParseCommandAndNicoScriptResult = {
   color: string;
   strokeColor?: string;
   wakuColor?: string;
+  fillColor?: string;
   font: CommentFont;
   full: boolean;
   ender: boolean;
@@ -155,6 +157,7 @@ export type ParsedCommand = {
   color: string | undefined;
   strokeColor?: string;
   wakuColor?: string;
+  fillColor?: string;
   font: CommentFont | undefined;
   full: boolean;
   ender: boolean;

src/comments/BaseComment.ts

@@ -152,6 +152,7 @@ class BaseComment implements IComment {
       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);
@@ -198,6 +199,25 @@ class BaseComment implements IComment {
     }
   }
 
+  /**
+   * コメントの背景を描画する
+   * @param posX 描画位置
+   * @param posY 描画位置
+   */
+  protected _drawBackgroundColor(posX: number, posY: number) {
+    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();
+    }
+  }
+
   /**
    * コメントのメタデータを描画する
    * @param posX 描画位置

src/utils/comment.ts

@@ -140,6 +140,7 @@ const parseCommandAndNicoScript = (
     invisible: commands.invisible,
     strokeColor: commands.strokeColor,
     wakuColor: commands.wakuColor,
+    fillColor: commands.fillColor,
   };
 };
 
@@ -439,6 +440,11 @@ const parseCommand = (
     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;