Merge branch 'develop'

xpadev-net · Sep 20, 2022 · 6064f6a · 6064f6a
2 parents 1ebada9 + 21be7d2
commit 6064f6a
Show file tree

Hide file tree

Showing 12 changed files with 626 additions and 344 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -34,12 +34,15 @@ <h1>Index</h1>
                                     <li>
                                         <a href="#p_options">options</a>
                                         <ul>
+                                            <li><a href="#p_config">config</a></li>
                                             <li><a href="#p_debug">debug</a></li>
                                             <li><a href="#p_drawAllImageOnLoad">drawAllImageOnLoad</a></li>
                                             <li><a href="#p_enableLegacyPiP">enableLegacyPiP</a></li>
                                             <li><a href="#p_format">format</a></li>
                                             <li><a href="#p_formatted">formatted</a></li>
                                             <li><a href="#p_keepCA">keepCA</a></li>
+                                            <li><a href="#p_mode">mode</a></li>
+                                            <li><a href="#p_scale">scale</a></li>
                                             <li><a href="#p_showCollision">showCollision</a></li>
                                             <li><a href="#p_showCommentCount">showCommentCount</a></li>
                                             <li><a href="#p_showFPS">showFPS</a></li>
@@ -125,8 +128,14 @@ <h4 id="p_data">data<span class="type">:[]</span></h4>
                     <p>コメントデータを渡してください</p>
                     <p>対応フォーマットは<a href="#p_format">format</a>を確認してください</p>
                 </div>
-                <h4 id="p_options">options<span class="type">:<a href="./type/modules/_types_types.html#Options">InitOptions</a></span></h4>
+                <h4 id="p_options">options<span class="type">:<a href="./type/modules/_types_types.InitOptions.html">InitOptions</a></span></h4>
                 <div class="item">
+                    <h4 id="p_config">config<span class="type"><a href="./type/modules/_types_types.ConfigNullable.html">:ConfigNullable</a></span> = {}</h4>
+                    <div class="item">
+                        <p><span class="warn">このオプションは非推奨です。適当に変更を行うと描画が崩れる場合があります</span></p>
+                        <p>内部処理用のマジックナンバーを上書きすることができます</p>
+                        <p>各変数の詳細は<a href="https://github.com/xpadev-net/niconicomments/blob/develop/src/definition/config.ts">src/definition/config.ts</a>内のdefaultConfigのコメントを参照してください</p>
+                    </div>
                     <h4 id="p_debug">debug<span class="type">:boolean</span> = <span class="yellow">false</span></h4>
                     <div class="item">
                         <p>処理の所要時間をブラウザコンソールに出力します</p>
@@ -165,18 +174,18 @@ <h4 id="p_format">format<span class="type">:<a href="./type/modules/_types_types
                             </tr>
                             <tr>
                                 <td>formatted</td>
-                                <td class="type"><a href="./type/modules/_types_types.html#formattedComment">formattedComment</a>[] |
-                                    <a href="./type/modules/_types_types.html#formattedLegacyComment">formattedLegacyComment</a>[]</td>
+                                <td class="type"><a href="./type/modules/_types_types.formattedComment.html">formattedComment</a>[] |
+                                    <a href="./type/modules/_types_types.formattedLegacyComment.html">formattedLegacyComment</a>[]</td>
                                 <td>user_idとlayerが含まれない場合はformattedLegacyCommentになります</td>
                             </tr>
                             <tr>
                                 <td>legacy</td>
-                                <td class="type"><a href="./type/modules/_types_types.html#rawApiResponse">rawApiResponse</a>[]</td>
-                                <td>legacy apiのレスポンスをそのまま渡してください</td>
+                                <td class="type"><a href="./type/modules/_types_types.rawApiResponse.html">rawApiResponse</a>[]</td>
+                                <td>legacy apiのレスポンスをJSON.parseしたものを渡してください</td>
                             </tr>
                             <tr>
                                 <td>owner</td>
-                                <td class="type"><a href="./type/modules/_types_types.html#ownerComment">ownerComment</a>[]</td>
+                                <td class="type"><a href="./type/modules/_types_types.ownerComment.html">ownerComment</a>[]</td>
                                 <td>投稿者コメント編集画面のエディータのjsonをそのまま渡してください</td>
                             </tr>
                             <tr>
@@ -186,7 +195,7 @@ <h4 id="p_format">format<span class="type">:<a href="./type/modules/_types_types
                             </tr>
                             <tr>
                                 <td>v1</td>
-                                <td class="type"><a href="./type/modules/_types_types.html#v1Thread">v1Thread</a>[]</td>
+                                <td class="type"><a href="./type/modules/_types_types.v1Thread.html">v1Thread</a>[]</td>
                                 <td>v1 apiのdata以下threadsの内容を渡してください</td>
                             </tr>
                             </tbody>
@@ -204,6 +213,19 @@ <h4 id="p_keepCA">keepCA<span class="type">:boolean</span> = <span class="yellow
                         <p>別のCAや関係ないコメントによってCA(主に積み絵)が崩壊するのを抑制します</p>
                         <p>デフォルト(<span class="yellow">false</span>)の場合は通常通り位置決定を行います</p>
                         <p><span class="yellow">true</span>の場合はCAを投稿していると推定されるユーザーのレイヤーを分けて位置決定をおこないます</p>
+                        <p>また、該当CAの拡大縮小を抑制する効果もあります</p>
+                    </div>
+                    <h4 id="p_mode">mode<span class="type"><a href="./type/modules/_types_types.mode.html">:modeType</a></span> = <span class="green">"default"</span></h4>
+                    <div class="item">
+                        <p>処理モードを指定します</p>
+                        <p>デフォルト(<span class="green">"default"</span>)の場合はなんとなくCAを再現します</p>
+                        <p><span class="green">"html5"</span>の場合は、現行のhtml5プレイヤーに近い動作をします</p>
+                        <p><span class="green">"flash"</span>の場合は、Saccubus/ZenzaWatchなどflash時代の互換プレイヤーに近い動作をします</p>
+                    </div>
+                    <h4 id="p_scale">scale<span class="type">:number</span> = <span class="yellow">1</span></h4>
+                    <div class="item">
+                        <p>表示コメントサイズを拡大縮小します</p>
+                        <p><a href="#p_keepCA">keepCA</a>を併用することを推奨します</p>
                     </div>
                     <h4 id="p_showCollision">showCollision<span class="type">:boolean</span> = <span class="yellow">false</span></h4>
                     <div class="item">
@@ -227,7 +249,8 @@ <h4 id="p_showFPS">showFPS<span class="type">:boolean</span> = <span class="yell
                         <p><span class="yellow">true</span>の場合は、過去0.5秒間のデータをもとにFPSを計算し、描画します</p>
                     </div>
                     <h4 id="p_useLegacy">useLegacy<span class="type">:boolean</span> = <span class="yellow">false</span></h4>
-                    <div class="item">
+                    <div class="item deprecated">
+                        <p><span class="warn">このオプションは非推奨です。<a href="#p_mode">mode</a>オプションを使用してください</span></p>
                         <p>公式プレイヤー互換モードを有効にするか指定します</p>
                         <p>デフォルト(<span class="yellow">false</span>)の場合はsans-serifを使用します</p>
                         <p>この場合、windows環境において、macOSに近い表示になります</p>

diff --git a/docs/sample/index.html b/docs/sample/index.html
@@ -399,24 +399,13 @@
         const canvas = document.getElementById("canvas");
         const req = await fetch(`./commentdata/${video}.json`);
         const res = await req.json();
-        if (nico instanceof NiconiComments) {
-            nico.useLegacy = useLegacy;
-            nico.keepCA = keepCA;
-            nico.timeline = {};
-            nico.nicoScripts = { reverse: [], default: [], replace: [], ban: [] };
-            nico.collision.right = {};
-            nico.collision.left = {};
-            nico.collision.ue = {};
-            nico.collision.shita = {};
-            nico.preRendering(res, drawAllImageOnLoad);
-        } else {
-            nico = new NiconiComments(canvas, res, {
-                useLegacy: useLegacy,
-                keepCA: keepCA,
-                format:"formatted",
-                drawAllImageOnLoad: drawAllImageOnLoad,
-            });
-        }
+
+        nico = new NiconiComments(canvas, res, {
+            useLegacy: useLegacy,
+            keepCA: keepCA,
+            format:"formatted",
+            drawAllImageOnLoad: drawAllImageOnLoad
+        });
         const background = getById(videos, video).bg;
         if (background) {
             document.getElementById("background").style.background = background;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "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",

diff --git a/src/@types/types.d.ts b/src/@types/types.d.ts
@@ -6,31 +6,38 @@ type inputFormatType =
   | "owner"
   | "v1"
   | "default";
+type modeType = "default" | "html5" | "flash";
 type InitOptions = {
-  useLegacy?: boolean;
-  formatted?: boolean;
-  format?: inputFormatType;
-  video?: HTMLVideoElement | undefined;
-  showCollision?: boolean;
-  showFPS?: boolean;
-  showCommentCount?: boolean;
-  drawAllImageOnLoad?: boolean;
+  config?: ConfigNullable;
   debug?: boolean;
+  drawAllImageOnLoad?: boolean;
   enableLegacyPiP?: boolean;
+  format?: inputFormatType;
+  formatted?: boolean;
   keepCA?: boolean;
+  mode?: modeType;
+  scale?: number;
+  showCollision?: boolean;
+  showCommentCount?: boolean;
+  showFPS?: boolean;
+  useLegacy?: boolean;
+  video?: HTMLVideoElement | undefined;
 };
 type Options = {
-  useLegacy: boolean;
-  formatted: boolean;
-  format: inputFormatType;
-  video: HTMLVideoElement | undefined;
-  showCollision: boolean;
-  showFPS: boolean;
-  showCommentCount: boolean;
-  drawAllImageOnLoad: boolean;
+  config: ConfigNullable;
   debug: boolean;
+  drawAllImageOnLoad: boolean;
   enableLegacyPiP: boolean;
+  format: inputFormatType;
+  formatted: boolean;
   keepCA: boolean;
+  mode: modeType;
+  scale: number;
+  showCollision: boolean;
+  showCommentCount: boolean;
+  showFPS: boolean;
+  useLegacy: boolean;
+  video: HTMLVideoElement | undefined;
 };
 type rawApiResponse = {
   [key: string]: apiPing | apiThread | apiLeaf | apiGlobalNumRes | apiChat;
@@ -194,8 +201,9 @@ type typeFontSize = {
 };
 type typeDoubleResizeMaxWidth = {
   [key in "full" | "normal"]: {
-    legacy: number;
+    html5: number;
     default: number;
+    flash: number;
   };
 };
 type v1Thread = {
@@ -224,3 +232,76 @@ type ownerComment = {
   command: string;
   comment: string;
 };
+type Config = {
+  colors: { [key: string]: string };
+  commentYPaddingTop: number;
+  commentYMarginBottom: number;
+  fontSize: typeFontSize;
+  lineHeight: typeFontSize;
+  doubleResizeMaxWidth: typeDoubleResizeMaxWidth;
+  contextStrokeColor: string;
+  contextStrokeInversionColor: string;
+  contextStrokeOpacity: number;
+  contextFillLiveOpacity: number;
+  contextLineWidth: number;
+  fpsInterval: number;
+  cacheAge: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  commentDrawRange: number;
+  commentDrawPadding: number;
+  collisionWidth: number;
+  collisionRange: { [key in "left" | "right"]: number };
+  sameCARange: number;
+  sameCAGap: number;
+  sameCAMinScore: number;
+};
+
+type ConfigNullable = {
+  colors?: { [key: string]: string };
+  commentYPaddingTop?: number;
+  commentYMarginBottom?: number;
+  fontSize?: typeFontSize;
+  lineHeight?: typeFontSize;
+  doubleResizeMaxWidth?: typeDoubleResizeMaxWidth;
+  fpsInterval?: number;
+  cacheAge?: number;
+  canvasWidth?: number;
+  canvasHeight?: number;
+  commentDrawRange?: number;
+  commentDrawPadding?: number;
+  collisionWidth?: number;
+  collisionRange?: { [key in "left" | "right"]: number };
+  sameCARange?: number;
+  sameCAGap?: number;
+  sameCAMinScore?: number;
+};
+
+type ConfigKeys =
+  | "colors"
+  | "commentYPaddingTop"
+  | "commentYMarginBottom"
+  | "fontSize"
+  | "lineHeight"
+  | "doubleResizeMaxWidth"
+  | "fpsInterval"
+  | "cacheAge"
+  | "canvasWidth"
+  | "canvasHeight"
+  | "commentDrawRange"
+  | "commentDrawPadding"
+  | "collisionWidth"
+  | "collisionRange"
+  | "sameCARange"
+  | "sameCAGap"
+  | "sameCAMinScore";
+
+type T_Type =
+  | "string"
+  | "number"
+  | "bigint"
+  | "boolean"
+  | "symbol"
+  | "undefined"
+  | "object"
+  | "function";