Merge branch 'develop'

docs/index.html

@@ -79,6 +79,7 @@ <h1>Index</h1>
             <ul>
               <li><a href="#c_flash">Flash</a></li>
               <li><a href="#c_stroke">Stroke Color</a></li>
+              <li><a href="#c_waku">Waku</a></li>
             </ul>
           </li>
         </ul>
@@ -400,7 +401,22 @@ <h4>example</h4>
 nico:stroke:#f0f
 nico:stroke:#fff5</code></pre></div>
           <div class="item" data-i18n="c_stroke">
-            <p>コメントの縁取りの色を変更することができます</p>
+            <p>コメントの縁取りの色を変更するできます</p>
+            <p>色の指定は色コマンドまたはカラーコードで行ってください</p>
+            <p>カラーコードは透明度も指定可能です</p>
+          </div>
+        </div>
+        <h3 id="c_waku">Waku</h3>
+        <div class="item">
+          <h4>format</h4>
+          <div class="item"><pre><code>nico:waku:(color|color code)</code></pre></div>
+          <h4>example</h4>
+          <div class="item">
+          <pre><code>nico:waku:red
+nico:waku:#f0f
+nico:waku:#fff5</code></pre></div>
+          <div class="item" data-i18n="c_stroke">
+            <p>コメント単位で枠を表示するできます</p>
             <p>色の指定は色コマンドまたはカラーコードで行ってください</p>
             <p>カラーコードは透明度も指定可能です</p>
           </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.45",
+  "version": "0.2.46",
   "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/format.v1.d.ts

@@ -2,7 +2,7 @@ export type v1Thread = {
   id: string;
   fork: string;
   commentCount: number;
-  comments: { [key: string]: v1Comment };
+  comments: v1Comment[];
 };
 type v1Comment = {
   id: string;

src/@types/types.d.ts

@@ -16,6 +16,7 @@ type formattedCommentWithFont = {
   font: commentFont;
   color: string;
   strokeColor?: string;
+  wakuColor?: string;
   full: boolean;
   ender: boolean;
   _live: boolean;
@@ -117,6 +118,7 @@ type parsedCommand = {
   fontSize: number | undefined;
   color: string | undefined;
   strokeColor?: string;
+  wakuColor?: string;
   font: commentFont | undefined;
   full: boolean;
   ender: boolean;

src/comments/FlashComment.ts

@@ -1,25 +1,24 @@
 import {
   getConfig,
+  getFlashFontIndex,
+  getFlashFontName,
   getPosX,
   getStrokeColor,
+  nativeSort,
   parseCommandAndNicoScript,
   parseFont,
 } from "@/util";
-import typeGuard from "@/typeGuard";
 import { config, options } from "@/definition/config";
 import { nicoScripts } from "@/contexts/nicoscript";
 import { imageCache } from "@/contexts/cache";
 import type { IComment } from "@/@types/IComment";
 import type {
-  commentContentIndex,
   commentContentItem,
-  commentFlashFont,
   commentMeasuredContentItem,
   formattedCommentWithFont,
   formattedCommentWithSize,
   measureTextInput,
   measureTextResult,
-  parsedCommand,
 } from "@/@types/types";
 import type { formattedComment } from "@/@types/format.formatted";
 
@@ -75,59 +74,6 @@ class FlashComment implements IComment {
     return this.comment.lineCount;
   }
 
-  /**
-   * コメントに含まれるコマンドを解釈する
-   * @param comment- 独自フォーマットのコメントデータ
-   * @returns {{loc: string|undefined, size: string|undefined, color: string|undefined, fontSize: number|undefined, ender: boolean, font: string|undefined, full: boolean, _live: boolean, invisible: boolean, long:number|undefined}}
-   */
-  parseCommand(comment: formattedComment): parsedCommand {
-    const metadata = comment.mail;
-    const result: parsedCommand = {
-      loc: undefined,
-      size: undefined,
-      fontSize: undefined,
-      color: undefined,
-      font: undefined,
-      full: false,
-      ender: false,
-      _live: false,
-      invisible: false,
-      long: undefined,
-    };
-    for (let command of metadata) {
-      command = command.toLowerCase();
-      const match = command.match(/^@([0-9.]+)/);
-      if (match && match[1]) {
-        result.long = Number(match[1]);
-      } else if (result.loc === undefined && typeGuard.comment.loc(command)) {
-        result.loc = command;
-      } else if (result.size === undefined && typeGuard.comment.size(command)) {
-        result.size = command;
-        result.fontSize = getConfig(config.fontSize, true)[command].default;
-      } else {
-        if (result.color === undefined) {
-          const color = config.colors[command];
-          if (color) {
-            result.color = color;
-            continue;
-          } else {
-            const match = command.match(/#[0-9a-z]{3,6}/);
-            if (match && match[0] && comment.premium) {
-              result.color = match[0].toUpperCase();
-              continue;
-            }
-          }
-        }
-        if (result.font === undefined && typeGuard.comment.font(command)) {
-          result.font = command;
-        } else if (typeGuard.comment.command.key(command)) {
-          result[command] = true;
-        }
-      }
-    }
-    return result;
-  }
-
   /**
    * コメントに含まれるニコスクリプトを処理する
    * @param comment
@@ -140,53 +86,23 @@ class FlashComment implements IComment {
     const parts = (comment.content.match(/\n|[^\n]+/g) || []).map((val) =>
       Array.from(val.match(/[ -~｡-ﾟ]+|[^ -~｡-ﾟ]+/g) || [])
     );
-    const regex = {
-      simsunStrong: new RegExp(config.flashChar.simsunStrong),
-      simsunWeak: new RegExp(config.flashChar.simsunWeak),
-      gulim: new RegExp(config.flashChar.gulim),
-      gothic: new RegExp(config.flashChar.gothic),
-    };
-    const getFontName = (font: string) =>
-      font.match("^simsun.+")
-        ? "simsun"
-        : font === "gothic"
-        ? "defont"
-        : (font as commentFlashFont);
     for (const line of parts) {
       const lineContent: commentContentItem[] = [];
       for (const part of line) {
         if (part.match(/[ -~｡-ﾟ]+/g) !== null) {
           lineContent.push({ content: part });
           continue;
         }
-        const index: commentContentIndex[] = [];
-        let match;
-        if ((match = regex.simsunStrong.exec(part)) !== null) {
-          index.push({ font: "simsunStrong", index: match.index });
-        }
-        if ((match = regex.simsunWeak.exec(part)) !== null) {
-          index.push({ font: "simsunWeak", index: match.index });
-        }
-        if ((match = regex.gulim.exec(part)) !== null) {
-          index.push({ font: "gulim", index: match.index });
-        }
-        if ((match = regex.gothic.exec(part)) !== null) {
-          index.push({ font: "gothic", index: match.index });
-        }
+        const index = getFlashFontIndex(part);
         if (index.length === 0) {
           lineContent.push({ content: part });
         } else if (index.length === 1 && index[0]) {
-          lineContent.push({ content: part, font: getFontName(index[0].font) });
-        } else {
-          index.sort((a, b) => {
-            if (a.index > b.index) {
-              return 1;
-            } else if (a.index < b.index) {
-              return -1;
-            } else {
-              return 0;
-            }
+          lineContent.push({
+            content: part,
+            font: getFlashFontName(index[0].font),
           });
+        } else {
+          index.sort(nativeSort((val) => val.index));
           if (config.flashMode === "xp") {
             let offset = 0;
             for (let i = 1; i < index.length; i++) {
@@ -195,15 +111,15 @@ class FlashComment implements IComment {
               if (currentVal === undefined || lastVal === undefined) continue;
               lineContent.push({
                 content: part.slice(offset, currentVal.index),
-                font: getFontName(lastVal.font),
+                font: getFlashFontName(lastVal.font),
               });
               offset = currentVal.index;
             }
             const val = index[index.length - 1];
             if (val)
               lineContent.push({
                 content: part.slice(offset),
-                font: getFontName(val.font),
+                font: getFlashFontName(val.font),
               });
           } else {
             const firstVal = index[0],
@@ -215,16 +131,16 @@ class FlashComment implements IComment {
             if (firstVal.font !== "gothic") {
               lineContent.push({
                 content: part,
-                font: getFontName(firstVal.font),
+                font: getFlashFontName(firstVal.font),
               });
             } else {
               lineContent.push({
                 content: part.slice(0, secondVal.index),
-                font: getFontName(firstVal.font),
+                font: getFlashFontName(firstVal.font),
               });
               lineContent.push({
                 content: part.slice(secondVal.index),
-                font: getFontName(secondVal.font),
+                font: getFlashFontName(secondVal.font),
               });
             }
           }
@@ -296,9 +212,7 @@ class FlashComment implements IComment {
       spacedWidth_arr = [];
     let currentWidth = 0,
       spacedWidth = 0;
-    for (let i = 0; i < comment.content.length; i++) {
-      const item = comment.content[i];
-      if (item === undefined) continue;
+    for (const item of comment.content) {
       const lines = item.content.split("\n");
       const widths = [];
 
@@ -458,6 +372,15 @@ class FlashComment implements IComment {
       }
       this.context.drawImage(this.image, posX, posY);
     }
+    if (this.comment.wakuColor) {
+      this.context.strokeStyle = this.comment.wakuColor;
+      this.context.strokeRect(
+        posX,
+        posY,
+        this.comment.width,
+        this.comment.height
+      );
+    }
     if (showCollision) {
       this.context.strokeStyle = "rgba(255,0,255,1)";
       this.context.strokeRect(
@@ -549,9 +472,7 @@ class FlashComment implements IComment {
     let lastFont = this.comment.font,
       leftOffset = 0,
       lineCount = 0;
-    for (let i = 0; i < this.comment.content.length; i++) {
-      const item = this.comment.content[i];
-      if (!item) continue;
+    for (const item of this.comment.content) {
       if (lastFont !== (item.font || this.comment.font)) {
         lastFont = item.font || this.comment.font;
         context.font = parseFont(lastFont, this.comment.fontSize);

src/comments/HTML5Comment.ts

@@ -290,6 +290,15 @@ class HTML5Comment implements IComment {
       }
       this.context.drawImage(this.image, posX, posY);
     }
+    if (this.comment.wakuColor) {
+      this.context.strokeStyle = this.comment.wakuColor;
+      this.context.strokeRect(
+        posX,
+        posY,
+        this.comment.width,
+        this.comment.height
+      );
+    }
     if (showCollision) {
       const scale = getConfig(config.commentScale, false);
       this.context.strokeStyle = "rgba(0,255,255,1)";
@@ -378,9 +387,7 @@ class HTML5Comment implements IComment {
     const paddingTop =
       (10 - scale * 10) *
       (this.comment.lineCount / config.hiResCommentCorrection);
-    for (let i = 0; i < this.comment.content.length; i++) {
-      const item = this.comment.content[i];
-      if (!item) continue;
+    for (const item of this.comment.content) {
       const lines = item.content.split("\n");
       for (let j = 0; j < lines.length; j++) {
         const line = lines[j];

src/inputParser.ts

@@ -112,9 +112,8 @@ const fromFormatted = (
 const fromLegacy = (data: rawApiResponse[]): formattedComment[] => {
   const data_: formattedComment[] = [],
     userList: string[] = [];
-  for (let i = 0; i < data.length; i++) {
-    const val = data[i];
-    if (!val || !typeGuard.legacy.apiChat(val?.chat)) continue;
+  for (const val of data) {
+    if (!typeGuard.legacy.apiChat(val.chat)) continue;
     const value = val.chat;
     if (value.deleted !== 1) {
       const tmpParam: formattedComment = {
@@ -233,9 +232,7 @@ const fromV1 = (data: v1Thread[]): formattedComment[] => {
   for (const item of data) {
     const val = item.comments,
       forkName = item.fork;
-    for (const key of Object.keys(val)) {
-      const value = val[key];
-      if (!value) continue;
+    for (const value of val) {
       const tmpParam: formattedComment = {
         id: value.no,
         vpos: Math.floor(value.vposMs / 10),

src/nico.ts

@@ -50,9 +50,7 @@ const measureWidth = (
     itemWidth = [];
   context.font = parseFont(comment.font, fontSize);
   let currentWidth = 0;
-  for (let i = 0; i < comment.content.length; i++) {
-    const item = comment.content[i];
-    if (item === undefined) continue;
+  for (const item of comment.content) {
     const lines = item.content.split("\n");
     context.font = parseFont(item.font || comment.font, fontSize);
     const width = [];

src/typeGuard.ts

@@ -114,14 +114,11 @@ const typeGuard = {
     )
       return false;
     if (!(i as XMLDocument).documentElement.children) return false;
-    for (
-      let index = 0;
-      index < (i as XMLDocument).documentElement.children.length;
-      index++
-    ) {
-      const value = (i as XMLDocument).documentElement.children[index];
-      if (!value || value.nodeName !== "chat") continue;
-      if (!typeAttributeVerify(value, ["vpos", "date"])) return false;
+    for (const element of Array.from(
+      (i as XMLDocument).documentElement.children
+    )) {
+      if (!element || element.nodeName !== "chat") continue;
+      if (!typeAttributeVerify(element, ["vpos", "date"])) return false;
     }
     return true;
   },
@@ -168,8 +165,8 @@ const typeGuard = {
     thread: (i: unknown): i is v1Thread => {
       if (!objectVerify(i, ["id", "fork", "commentCount", "comments"]))
         return false;
-      for (const item of Object.keys((i as v1Thread).comments)) {
-        if (!typeGuard.v1.comment((i as v1Thread).comments[item])) return false;
+      for (const value of (i as v1Thread).comments) {
+        if (!typeGuard.v1.comment(value)) return false;
       }
       return true;
     },