@xpadev-net/niconicomments 0.2.25 → 0.2.27

package/dist/bundle.d.ts

@@ -1,27 +1,11 @@
-declare const colors: {
-    [key: string]: string;
-};
-declare const commentYPaddingTop = 0.08;
-declare const commentYMarginBottom = 0.24;
-declare const fontSize: typeFontSize;
-declare const lineHeight: typeFontSize;
-declare const doubleResizeMaxWidth: typeDoubleResizeMaxWidth;
+declare const defaultConfig: Config;
 declare const defaultOptions: Options;
-declare const fpsInterval = 500;
-declare const cacheAge = 2000;
-declare const canvasWidth = 1920;
-declare const canvasHeight = 1080;
-declare const commentDrawRange = 1450;
-declare const commentDrawPadding: number;
-declare const collisionRange: {
-    left: number;
-    right: number;
-};
-declare const sameCARange = 3600;
-declare const sameCAGap = 100;
-declare const sameCAMinScore = 10;
+declare let config: Config;
+declare let options: Options;
+declare const setConfig: (value: Config) => Config;
+declare const setOptions: (value: Options) => Options;
 
-//# sourceMappingURL=definition.d.ts.map
+
 type inputFormatType =
   | "niconicome"
   | "formatted"
@@ -30,31 +14,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;
@@ -218,8 +209,9 @@ type typeFontSize = {
 };
 type typeDoubleResizeMaxWidth = {
   [key in "full" | "normal"]: {
-    legacy: number;
+    html5: number;
     default: number;
+    flash: number;
   };
 };
 type v1Thread = {
@@ -248,10 +240,83 @@ 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";
 
 declare const convert2formattedComment: (data: unknown, type: inputFormatType) => formattedComment[];
 
-//# sourceMappingURL=inputParser.d.ts.map
+
 declare class NiconiComments {
     enableLegacyPiP: boolean;
     showCollision: boolean;
@@ -266,10 +331,9 @@ declare class NiconiComments {
     private readonly canvas;
     private readonly collision;
     private readonly context;
-    private readonly keepCA;
     private readonly nicoScripts;
     private readonly timeline;
-    private readonly useLegacy;
+    private readonly mode;
     constructor(canvas: HTMLCanvasElement, data: (rawApiResponse | formattedComment)[], initOptions?: InitOptions);
     preRendering(rawData: formattedComment[], drawAll: boolean): void;
     getFont(parsedData: formattedComment[]): formattedCommentWithFont[];
@@ -297,7 +361,7 @@ declare class NiconiComments {
     clear(): void;
 }
 
-//# sourceMappingURL=main.d.ts.map
+
 declare const typeGuard: {
     formatted: {
         comment: (i: unknown) => i is formattedComment;
@@ -346,9 +410,14 @@ declare const typeGuard: {
             key: (i: unknown) => i is "full" | "ender" | "_live" | "invisible";
         };
     };
+    config: {
+        initOptions: (item: unknown) => item is InitOptions;
+        config: (item: unknown) => item is ConfigNullable;
+        configKey: (item: unknown) => item is ConfigKeys;
+    };
 };
 
-//# sourceMappingURL=typeGuard.d.ts.map
+
 declare const groupBy: (array: formattedCommentWithFont[]) => groupedComments;
 declare const getPosY: (currentPos: number, targetComment: parsedComment, collision: number[] | undefined, data: parsedComment[]) => {
     currentPos: number;
@@ -356,7 +425,7 @@ declare const getPosY: (currentPos: number, targetComment: parsedComment, collis
     isBreak: boolean;
 };
 declare const getPosX: (width: number, vpos: number, long: number) => number;
-declare const parseFont: (font: commentFont, size: string | number, useLegacy: boolean) => string;
+declare const parseFont: (font: commentFont, size: string | number, mode?: modeType) => string;
 declare const arrayPush: (array: {
     [key: number]: number[];
 }, key: string | number, push: number) => void;
@@ -364,5 +433,5 @@ declare const hex2rgb: (hex: string) => number[];
 declare const replaceAll: (string: string, target: string, replace: string) => string;
 declare const changeCALayer: (rawData: formattedComment[]) => formattedComment[];
 
-//# sourceMappingURL=util.d.ts.map
+
 export default NiconiComments;

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.25
+  niconicomments.js v0.2.27
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -37,7 +37,7 @@
     var typeGuard = {
         formatted: {
             comment: function (i) {
-                return typeVerify(i, [
+                return objectVerify(i, [
                     "id",
                     "vpos",
                     "content",
@@ -61,7 +61,7 @@
                 return true;
             },
             legacyComment: function (i) {
-                return typeVerify(i, [
+                return objectVerify(i, [
                     "id",
                     "vpos",
                     "content",
@@ -106,15 +106,15 @@
             },
             apiChat: function (i) {
                 return typeof i === "object" &&
-                    typeVerify(i, ["content", "date", "no", "thread", "vpos"]);
+                    objectVerify(i, ["content", "date", "no", "thread", "vpos"]);
             },
             apiGlobalNumRes: function (i) {
-                return typeVerify(i, ["num_res", "thread"]);
+                return objectVerify(i, ["num_res", "thread"]);
             },
-            apiLeaf: function (i) { return typeVerify(i, ["count", "thread"]); },
-            apiPing: function (i) { return typeVerify(i, ["content"]); },
+            apiLeaf: function (i) { return objectVerify(i, ["count", "thread"]); },
+            apiPing: function (i) { return objectVerify(i, ["content"]); },
             apiThread: function (i) {
-                return typeVerify(i, [
+                return objectVerify(i, [
                     "resultcode",
                     "revision",
                     "server_time",
@@ -182,7 +182,7 @@
         },
         owner: {
             comment: function (i) {
-                return typeVerify(i, ["time", "command", "comment"]);
+                return objectVerify(i, ["time", "command", "comment"]);
             },
             comments: function (i) {
                 if (typeof i !== "object")
@@ -197,7 +197,7 @@
         },
         v1: {
             comment: function (i) {
-                return typeVerify(i, [
+                return objectVerify(i, [
                     "id",
                     "no",
                     "vposMs",
@@ -214,7 +214,7 @@
                 ]);
             },
             thread: function (i) {
-                if (!typeVerify(i, ["id", "fork", "commentCount", "comments"]))
+                if (!objectVerify(i, ["id", "fork", "commentCount", "comments"]))
                     return false;
                 for (var _i = 0, _a = Object.keys(i.comments); _i < _a.length; _i++) {
                     var item = _a[_i];
@@ -269,8 +269,127 @@
                 },
             },
         },
+        config: {
+            initOptions: function (item) {
+                if (typeof item !== "object" || !item)
+                    return false;
+                var keys = {
+                    useLegacy: isBoolean,
+                    formatted: isBoolean,
+                    showCollision: isBoolean,
+                    showFPS: isBoolean,
+                    showCommentCount: isBoolean,
+                    drawAllImageOnLoad: isBoolean,
+                    debug: isBoolean,
+                    enableLegacyPiP: isBoolean,
+                    keepCA: isBoolean,
+                    scale: isNumber,
+                    config: typeGuard.config.config,
+                    format: function (i) {
+                        return typeof i === "string" &&
+                            !!i.match(/^(niconicome|formatted|legacy|legacyOwner|owner|v1|default)$/);
+                    },
+                    video: function (i) {
+                        return typeof i === "object" && i.nodeName === "VIDEO";
+                    },
+                };
+                for (var key in keys) {
+                    if (item[key] !== undefined &&
+                        !keys[key](item[key])) {
+                        console.warn("[Incorrect input] var: initOptions, key: ".concat(key, ", value: ").concat(item[key]));
+                        return false;
+                    }
+                }
+                return true;
+            },
+            config: function (item) {
+                if (!isStringKeyObject(item))
+                    return false;
+                var isFontSize = function (i) {
+                    if (!isStringKeyObject(i))
+                        return false;
+                    return (Object.keys(i).reduce(function (pv, cv) {
+                        var _a, _b;
+                        return pv +
+                            Number(!cv.match(/^(ue|shita|naka)$/) ||
+                                typeof i[cv] !== "object" ||
+                                !((_a = i[cv]) === null || _a === void 0 ? void 0 : _a.default) ||
+                                !((_b = i[cv]) === null || _b === void 0 ? void 0 : _b.resized));
+                    }, 0) === 0);
+                };
+                var isDoubleResizeMaxWidth = function (i) {
+                    if (!isStringKeyObject(i))
+                        return false;
+                    return (typeof i === "object" &&
+                        Object.keys(i).reduce(function (pv, cv) {
+                            var _a, _b, _c;
+                            return pv +
+                                Number(!cv.match(/^(full|normal)$/) ||
+                                    typeof i[cv] !== "object" ||
+                                    !((_a = i[cv]) === null || _a === void 0 ? void 0 : _a.default) ||
+                                    !((_b = i[cv]) === null || _b === void 0 ? void 0 : _b.html5) ||
+                                    !((_c = i[cv]) === null || _c === void 0 ? void 0 : _c.flash));
+                        }, 0) === 0);
+                };
+                var keys = {
+                    commentYPaddingTop: isNumber,
+                    commentYMarginBottom: isNumber,
+                    fpsInterval: isNumber,
+                    cacheAge: isNumber,
+                    canvasWidth: isNumber,
+                    canvasHeight: isNumber,
+                    commentDrawRange: isNumber,
+                    commentDrawPadding: isNumber,
+                    collisionWidth: isNumber,
+                    sameCARange: isNumber,
+                    sameCAGap: isNumber,
+                    sameCAMinScore: isNumber,
+                    contextStrokeOpacity: isNumber,
+                    contextFillLiveOpacity: isNumber,
+                    contextLineWidth: isNumber,
+                    contextStrokeColor: isString,
+                    contextStrokeInversionColor: isString,
+                    colors: function (i) {
+                        return typeof i === "object" &&
+                            Object.keys(i).reduce(function (pv, cv) {
+                                return pv +
+                                    Number(typeof i[cv] !== "string");
+                            }, 0) === 0;
+                    },
+                    fontSize: isFontSize,
+                    lineHeight: isFontSize,
+                    doubleResizeMaxWidth: isDoubleResizeMaxWidth,
+                    collisionRange: function (i) {
+                        return typeof i === "object" &&
+                            Object.keys(i).reduce(function (pv, cv) {
+                                return pv +
+                                    Number(!cv.match(/^(left|right)$/) ||
+                                        typeof i[cv] !== "number");
+                            }, 0) === 0;
+                    },
+                };
+                for (var key in item) {
+                    if (item[key] !== undefined &&
+                        !keys[key](item[key])) {
+                        console.warn("[Incorrect input] var: initOptions, key: ".concat(key, ", value: ").concat(item[key]));
+                        return false;
+                    }
+                }
+                return true;
+            },
+            configKey: function (item) {
+                return typeof item === "string" &&
+                    !!item.match(/^(colors|commentYPaddingTop|commentYMarginBottom|fontSize|lineHeight|doubleResizeMaxWidth|fpsInterval|cacheAge|canvasWidth|canvasHeight|commentDrawRange|commentDrawPadding|collisionWidth|collisionRange|sameCARange|sameCAGap|sameCAMinScore)$/);
+            },
+        },
+    };
+    var isBoolean = function (i) { return typeof i === "boolean"; };
+    var isNumber = function (i) { return typeof i === "number"; };
+    var isString = function (i) { return typeof i === "string"; };
+    var isStringKeyObject = function (i) {
+        return typeof i === "object";
     };
-    var typeVerify = function (item, keys) {
+    var objectVerify = function (item, keys) {
         if (typeof item !== "object" || !item)
             return false;
         for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
@@ -409,13 +528,16 @@
     var fromLegacyOwner = function (data) {
         var data_ = [], comments = data.split("\n");
         for (var i = 0; i < comments.length; i++) {
-            var commentData = comments[i].split(":");
+            var value = comments[i];
+            if (!value)
+                continue;
+            var commentData = value.split(":");
             if (commentData.length < 3) {
                 continue;
             }
             else if (commentData.length > 3) {
                 for (var j = 3; j < commentData.length; j++) {
-                    commentData[2] += ":" + commentData[j];
+                    commentData[2] += ":".concat(commentData[j]);
                 }
             }
             var tmpParam = {
@@ -547,102 +669,118 @@
         return Math.floor(new Date(date).getTime() / 1000);
     };
 
-    var colors = {
-        white: "#FFFFFF",
-        red: "#FF0000",
-        pink: "#FF8080",
-        orange: "#FFC000",
-        yellow: "#FFFF00",
-        green: "#00FF00",
-        cyan: "#00FFFF",
-        blue: "#0000FF",
-        purple: "#C000FF",
-        black: "#000000",
-        white2: "#CCCC99",
-        niconicowhite: "#CCCC99",
-        red2: "#CC0033",
-        truered: "#CC0033",
-        pink2: "#FF33CC",
-        orange2: "#FF6600",
-        passionorange: "#FF6600",
-        yellow2: "#999900",
-        madyellow: "#999900",
-        green2: "#00CC66",
-        elementalgreen: "#00CC66",
-        cyan2: "#00CCCC",
-        blue2: "#3399FF",
-        marinblue: "#3399FF",
-        purple2: "#6633CC",
-        nobleviolet: "#6633CC",
-        black2: "#666666",
-    };
-    var commentYPaddingTop = 0.08;
-    var commentYMarginBottom = 0.24;
-    var fontSize = {
-        small: {
-            default: 47,
-            resized: 26.1,
-        },
-        medium: {
-            default: 74,
-            resized: 38.7,
+    var defaultConfig = {
+        colors: {
+            white: "#FFFFFF",
+            red: "#FF0000",
+            pink: "#FF8080",
+            orange: "#FFC000",
+            yellow: "#FFFF00",
+            green: "#00FF00",
+            cyan: "#00FFFF",
+            blue: "#0000FF",
+            purple: "#C000FF",
+            black: "#000000",
+            white2: "#CCCC99",
+            niconicowhite: "#CCCC99",
+            red2: "#CC0033",
+            truered: "#CC0033",
+            pink2: "#FF33CC",
+            orange2: "#FF6600",
+            passionorange: "#FF6600",
+            yellow2: "#999900",
+            madyellow: "#999900",
+            green2: "#00CC66",
+            elementalgreen: "#00CC66",
+            cyan2: "#00CCCC",
+            blue2: "#3399FF",
+            marinblue: "#3399FF",
+            purple2: "#6633CC",
+            nobleviolet: "#6633CC",
+            black2: "#666666",
         },
-        big: {
-            default: 110,
-            resized: 61,
-        },
-    };
-    var lineHeight = {
-        small: {
-            default: 1,
-            resized: 1,
-        },
-        medium: {
-            default: 1,
-            resized: 1,
+        commentYPaddingTop: 0.08,
+        commentYMarginBottom: 0.24,
+        fontSize: {
+            small: {
+                default: 47,
+                resized: 26.1,
+            },
+            medium: {
+                default: 74,
+                resized: 38.7,
+            },
+            big: {
+                default: 110,
+                resized: 61,
+            },
         },
-        big: {
-            default: 1.03,
-            resized: 1.01,
+        lineHeight: {
+            small: {
+                default: 1,
+                resized: 1,
+            },
+            medium: {
+                default: 1,
+                resized: 1,
+            },
+            big: {
+                default: 1.03,
+                resized: 1.01,
+            },
         },
-    };
-    var doubleResizeMaxWidth = {
-        full: {
-            legacy: 3020,
-            default: 3550,
+        doubleResizeMaxWidth: {
+            full: {
+                html5: 3020,
+                default: 3550,
+                flash: 3550,
+            },
+            normal: {
+                html5: 2540,
+                default: 2650,
+                flash: 2650,
+            },
         },
-        normal: {
-            legacy: 2540,
-            default: 2650,
+        contextStrokeColor: "#000000",
+        contextStrokeInversionColor: "#FFFFFF",
+        contextStrokeOpacity: 0.7,
+        contextFillLiveOpacity: 0.5,
+        contextLineWidth: 4,
+        fpsInterval: 500,
+        cacheAge: 2000,
+        canvasWidth: 1920,
+        canvasHeight: 1080,
+        commentDrawRange: 1450,
+        commentDrawPadding: 235,
+        collisionWidth: 40,
+        collisionRange: {
+            left: 40,
+            right: 1880,
         },
+        sameCARange: 3600,
+        sameCAGap: 100,
+        sameCAMinScore: 10,
     };
     var defaultOptions = {
+        config: {},
+        debug: false,
         drawAllImageOnLoad: false,
+        enableLegacyPiP: false,
         format: "default",
         formatted: false,
-        debug: false,
-        enableLegacyPiP: false,
         keepCA: false,
+        mode: "default",
+        scale: 1,
         showCollision: false,
         showCommentCount: false,
         showFPS: false,
         useLegacy: false,
         video: undefined,
     };
-    var fpsInterval = 500;
-    var cacheAge = 2000;
-    var canvasWidth = 1920;
-    var canvasHeight = 1080;
-    var commentDrawRange = 1450;
-    var commentDrawPadding = (canvasWidth - commentDrawRange) / 2;
-    var collisionWidth = 40;
-    var collisionRange = {
-        left: collisionWidth,
-        right: canvasWidth - collisionWidth,
-    };
-    var sameCARange = 3600;
-    var sameCAGap = 100;
-    var sameCAMinScore = 10;
+    var config;
+    var options;
+    var setConfig = function (value) { return (config = value); };
+    var setOptions = function (value) { return (options = value); };
 
     var groupBy = function (array) {
         var data = ["defont", "gothic", "mincho"].reduce(function (pv, font) {
@@ -675,17 +813,17 @@
                     currentPos = collisionItem.posY + collisionItem.height;
                     isChanged = true;
                 }
-                if (currentPos + targetComment.height > canvasHeight) {
-                    if (canvasHeight < targetComment.height) {
+                if (currentPos + targetComment.height > config.canvasHeight) {
+                    if (config.canvasHeight < targetComment.height) {
                         if (targetComment.mail.includes("naka")) {
-                            currentPos = (targetComment.height - canvasHeight) / -2;
+                            currentPos = (targetComment.height - config.canvasHeight) / -2;
                         }
                         else {
                             currentPos = 0;
                         }
                     }
                     else {
-                        currentPos = Math.floor(Math.random() * (canvasHeight - targetComment.height));
+                        currentPos = Math.floor(Math.random() * (config.canvasHeight - targetComment.height));
                     }
                     isBreak = true;
                     break;
@@ -695,18 +833,20 @@
         return { currentPos: currentPos, isChanged: isChanged, isBreak: isBreak };
     };
     var getPosX = function (width, vpos, long) {
-        return (commentDrawRange -
-            ((((width + commentDrawRange) * ((vpos + 100) / 100)) / 4) * 300) / long +
-            commentDrawPadding);
+        return (config.commentDrawRange -
+            ((((width + config.commentDrawRange) * ((vpos + 100) / 100)) / 4) * 300) /
+                long +
+            config.commentDrawPadding);
     };
-    var parseFont = function (font, size, useLegacy) {
+    var parseFont = function (font, size, mode) {
+        if (mode === void 0) { mode = "default"; }
         switch (font) {
             case "gothic":
                 return "normal 400 ".concat(size, "px \"\u6E38\u30B4\u30B7\u30C3\u30AF\u4F53\", \"\u6E38\u30B4\u30B7\u30C3\u30AF\", \"Yu Gothic\", YuGothic, yugothic, YuGo-Medium");
             case "mincho":
                 return "normal 400 ".concat(size, "px \"\u6E38\u660E\u671D\u4F53\", \"\u6E38\u660E\u671D\", \"Yu Mincho\", YuMincho, yumincho, YuMin-Medium");
             default:
-                if (useLegacy) {
+                if (mode === "html5") {
                     return "normal 600 ".concat(size, "px Arial, \"\uFF2D\uFF33 \uFF30\u30B4\u30B7\u30C3\u30AF\", \"MS PGothic\", MSPGothic, MS-PGothic");
                 }
                 else {
@@ -768,8 +908,8 @@
                 .filter(function (e) { return !e.match(/@[\d.]+|184|device:.+|patissier|ca/); })
                 .join("")), lastComment = index[key];
             if (lastComment !== undefined) {
-                if (value.vpos - lastComment.vpos > sameCAGap ||
-                    Math.abs(value.date - lastComment.date) < sameCARange) {
+                if (value.vpos - lastComment.vpos > config.sameCAGap ||
+                    Math.abs(value.date - lastComment.date) < config.sameCARange) {
                     data.push(value);
                     index[key] = value;
                 }
@@ -781,7 +921,7 @@
         }
         for (var _a = 0, data_1 = data; _a < data_1.length; _a++) {
             var value = data_1[_a];
-            if (userList[value.user_id] || 0 >= sameCAMinScore)
+            if (userList[value.user_id] || 0 >= config.sameCAMinScore)
                 value.layer = value.user_id;
         }
         return data;
@@ -792,32 +932,44 @@
         function NiconiComments(canvas, data, initOptions) {
             if (initOptions === void 0) { initOptions = {}; }
             var _this = this;
-            var options = Object.assign(defaultOptions, initOptions);
-            isDebug = options.debug;
             var constructorStart = performance.now();
+            if (!typeGuard.config.initOptions(initOptions))
+                throw new Error("Please see document: https://xpadev-net.github.io/niconicomments/#p_options");
+            setOptions(Object.assign(defaultOptions, initOptions));
+            if (!typeGuard.config.config(options.config)) {
+                console.warn(options.config);
+                throw new Error("Please see document: https://xpadev-net.github.io/niconicomments/#p_config");
+            }
+            setConfig(Object.assign(defaultConfig, options.config));
+            isDebug = options.debug;
             this.canvas = canvas;
             var context = canvas.getContext("2d");
             if (!context)
                 throw new Error("Fail to get CanvasRenderingContext2D");
             this.context = context;
-            this.context.strokeStyle = "rgba(0,0,0,0.7)";
+            this.context.strokeStyle = "rgba(".concat(hex2rgb(config.contextStrokeColor).join(","), ",").concat(config.contextStrokeOpacity, ")");
             this.context.textAlign = "start";
             this.context.textBaseline = "alphabetic";
-            this.context.lineWidth = 4;
-            var formatType = options.format;
+            this.context.lineWidth = config.contextLineWidth;
+            var formatType = options.format, mode = options.mode;
             if (options.formatted) {
-                console.warn("Deprecated: options.formatted is no longer recommended. Please use options.format");
+                console.warn("Deprecated: options.formatted is no longer recommended. Please use options.format. https://xpadev-net.github.io/niconicomments/#p_format");
             }
             if (formatType === "default") {
                 formatType = options.formatted ? "formatted" : "legacy";
             }
+            if (options.useLegacy) {
+                console.warn("Deprecated: options.useLegacy is no longer recommended. Please use options.mode. https://xpadev-net.github.io/niconicomments/#p_mode");
+            }
+            if (mode === "default" && options.useLegacy) {
+                mode = "html5";
+            }
             var parsedData = convert2formattedComment(data, formatType);
             this.video = options.video || undefined;
             this.showCollision = options.showCollision;
             this.showFPS = options.showFPS;
             this.showCommentCount = options.showCommentCount;
             this.enableLegacyPiP = options.enableLegacyPiP;
-            this.keepCA = options.keepCA;
             this.cacheIndex = {};
             this.timeline = {};
             this.nicoScripts = { reverse: [], default: [], replace: [], ban: [] };
@@ -827,20 +979,20 @@
             }, {});
             this.data = [];
             this.lastVpos = -1;
-            this.useLegacy = options.useLegacy;
+            this.mode = mode;
             this.preRendering(parsedData, options.drawAllImageOnLoad);
             this.fpsCount = 0;
             this.fps = 0;
             window.setInterval(function () {
-                _this.fps = _this.fpsCount * (1000 / fpsInterval);
+                _this.fps = _this.fpsCount * (1000 / config.fpsInterval);
                 _this.fpsCount = 0;
-            }, fpsInterval);
+            }, config.fpsInterval);
             logger("constructor complete: ".concat(performance.now() - constructorStart, "ms"));
         }
         NiconiComments.prototype.preRendering = function (rawData, drawAll) {
             var _this = this;
             var preRenderingStart = performance.now();
-            if (this.keepCA) {
+            if (options.keepCA) {
                 rawData = changeCALayer(rawData);
             }
             var parsedData = this.getCommentPos(this.getCommentSize(this.getFont(rawData)));
@@ -868,11 +1020,11 @@
             for (var _i = 0, _a = Object.keys(groupedData); _i < _a.length; _i++) {
                 var font = _a[_i];
                 for (var _b = 0, _c = Object.keys(groupedData[font]); _b < _c.length; _b++) {
-                    var fontSize_1 = _c[_b];
-                    var value = groupedData[font][fontSize_1];
+                    var fontSize = _c[_b];
+                    var value = groupedData[font][fontSize];
                     if (!value)
                         continue;
-                    this.context.font = parseFont(font, fontSize_1, this.useLegacy);
+                    this.context.font = parseFont(font, fontSize, this.mode);
                     for (var _d = 0, value_1 = value; _d < value_1.length; _d++) {
                         var comment = value_1[_d];
                         if (comment.invisible) {
@@ -880,14 +1032,21 @@
                         }
                         var measure = this.measureText(comment);
                         var size = parsedData[comment.index];
+                        if (options.scale !== 1 && size.layer === -1) {
+                            measure.height *= options.scale;
+                            measure.width *= options.scale;
+                            measure.width_max *= options.scale;
+                            measure.width_min *= options.scale;
+                            measure.fontSize *= options.scale;
+                        }
                         size.height = measure.height;
                         size.width = measure.width;
                         size.width_max = measure.width_max;
                         size.width_min = measure.width_min;
                         size.lineHeight = measure.lineHeight;
+                        size.fontSize = measure.fontSize;
                         if (measure.resized) {
-                            size.fontSize = measure.fontSize;
-                            this.context.font = parseFont(font, fontSize_1, this.useLegacy);
+                            this.context.font = parseFont(font, fontSize, this.mode);
                         }
                         result[comment.index] = size;
                     }
@@ -905,8 +1064,8 @@
                 if (comment.loc === "naka") {
                     var posY = 0;
                     var beforeVpos = Math.round(-288 / ((1632 + comment.width_max) / (comment.long + 125))) - 100;
-                    if (canvasHeight < comment.height) {
-                        posY = (comment.height - canvasHeight) / -2;
+                    if (config.canvasHeight < comment.height) {
+                        posY = (comment.height - config.canvasHeight) / -2;
                     }
                     else {
                         var isBreak = false, isChanged = true, count = 0;
@@ -916,8 +1075,8 @@
                             for (var j = beforeVpos; j < comment.long + 125; j++) {
                                 var vpos = comment.vpos + j;
                                 var left_pos = getPosX(comment.width_max, j, comment.long);
-                                if (left_pos + comment.width_max >= collisionRange.right &&
-                                    left_pos <= collisionRange.right) {
+                                if (left_pos + comment.width_max >= config.collisionRange.right &&
+                                    left_pos <= config.collisionRange.right) {
                                     var result = getPosY(posY, comment, _this.collision.right[vpos], data);
                                     posY = result.currentPos;
                                     isChanged = result.isChanged;
@@ -925,8 +1084,8 @@
                                     if (isBreak)
                                         break;
                                 }
-                                if (left_pos + comment.width_max >= collisionRange.left &&
-                                    left_pos <= collisionRange.left) {
+                                if (left_pos + comment.width_max >= config.collisionRange.left &&
+                                    left_pos <= config.collisionRange.left) {
                                     var result = getPosY(posY, comment, _this.collision.left[vpos], data);
                                     posY = result.currentPos;
                                     isChanged = result.isChanged;
@@ -944,10 +1103,10 @@
                         var vpos = comment.vpos + j;
                         var left_pos = getPosX(comment.width_max, j, comment.long);
                         arrayPush(_this.timeline, vpos, index);
-                        if (left_pos + comment.width_max >= collisionRange.right) {
+                        if (left_pos + comment.width_max >= config.collisionRange.right) {
                             arrayPush(_this.collision.right, vpos, index);
                         }
-                        if (left_pos <= collisionRange.left) {
+                        if (left_pos <= config.collisionRange.left) {
                             arrayPush(_this.collision.left, vpos, index);
                         }
                     }
@@ -1016,28 +1175,28 @@
         NiconiComments.prototype.measureText = function (comment) {
             var width_arr = [], lines = comment.content.split("\n");
             if (!comment.lineHeight)
-                comment.lineHeight = lineHeight[comment.size].default;
+                comment.lineHeight = config.lineHeight[comment.size].default;
             if (!comment.resized && !comment.ender) {
                 if (comment.size === "big" && lines.length > 2) {
-                    comment.fontSize = fontSize.big.resized;
-                    comment.lineHeight = lineHeight.big.resized;
+                    comment.fontSize = config.fontSize.big.resized;
+                    comment.lineHeight = config.lineHeight.big.resized;
                     comment.resized = true;
                     comment.resizedY = true;
-                    this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+                    this.context.font = parseFont(comment.font, comment.fontSize, this.mode);
                 }
                 else if (comment.size === "medium" && lines.length > 4) {
-                    comment.fontSize = fontSize.medium.resized;
-                    comment.lineHeight = lineHeight.medium.resized;
+                    comment.fontSize = config.fontSize.medium.resized;
+                    comment.lineHeight = config.lineHeight.medium.resized;
                     comment.resized = true;
                     comment.resizedY = true;
-                    this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+                    this.context.font = parseFont(comment.font, comment.fontSize, this.mode);
                 }
                 else if (comment.size === "small" && lines.length > 6) {
-                    comment.fontSize = fontSize.small.resized;
-                    comment.lineHeight = lineHeight.small.resized;
+                    comment.fontSize = config.fontSize.small.resized;
+                    comment.lineHeight = config.lineHeight.small.resized;
                     comment.resized = true;
                     comment.resizedY = true;
-                    this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+                    this.context.font = parseFont(comment.font, comment.fontSize, this.mode);
                 }
             }
             for (var i = 0; i < lines.length; i++) {
@@ -1045,11 +1204,12 @@
                 width_arr.push(measure.width);
             }
             var width = width_arr.reduce(function (p, c) { return p + c; }, 0) / width_arr.length;
-            var width_max = Math.max.apply(Math, width_arr), width_min = Math.min.apply(Math, width_arr), height = comment.fontSize *
+            var width_max = Math.max.apply(Math, width_arr);
+            var width_min = Math.min.apply(Math, width_arr), height = comment.fontSize *
                 comment.lineHeight *
-                (1 + commentYPaddingTop) *
+                (1 + config.commentYPaddingTop) *
                 lines.length +
-                commentYMarginBottom * comment.fontSize;
+                config.commentYMarginBottom * comment.fontSize;
             if (comment.loc !== "naka" && !comment.resizedY) {
                 if ((comment.full && width_max > 1930) ||
                     (!comment.full && width_max > 1440)) {
@@ -1060,7 +1220,7 @@
                     }
                     comment.resized = true;
                     comment.resizedX = true;
-                    this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+                    this.context.font = parseFont(comment.font, comment.fontSize, this.mode);
                     return this.measureText(comment);
                 }
             }
@@ -1069,34 +1229,30 @@
                 ((comment.full && width_max > 2120) ||
                     (!comment.full && width_max > 1440)) &&
                 !comment.resizedX) {
-                comment.fontSize = fontSize[comment.size].default;
-                comment.lineHeight = lineHeight[comment.size].default * 1.05;
+                comment.fontSize = config.fontSize[comment.size].default;
+                comment.lineHeight = config.lineHeight[comment.size].default * 1.05;
                 comment.resized = true;
                 comment.resizedX = true;
-                this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+                this.context.font = parseFont(comment.font, comment.fontSize, this.mode);
                 return this.measureText(comment);
             }
             else if (comment.loc !== "naka" && comment.resizedY && comment.resizedX) {
                 if (comment.full &&
-                    width_max >
-                        doubleResizeMaxWidth.full[this.useLegacy ? "legacy" : "default"]) {
-                    while (width_max >
-                        doubleResizeMaxWidth.full[this.useLegacy ? "legacy" : "default"]) {
+                    width_max > config.doubleResizeMaxWidth.full[this.mode]) {
+                    while (width_max > config.doubleResizeMaxWidth.full[this.mode]) {
                         width_max /= 1.1;
                         comment.fontSize -= 1;
                     }
-                    this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+                    this.context.font = parseFont(comment.font, comment.fontSize, this.mode);
                     return this.measureText(comment);
                 }
                 else if (!comment.full &&
-                    width_max >
-                        doubleResizeMaxWidth.normal[this.useLegacy ? "legacy" : "default"]) {
-                    while (width_max >
-                        doubleResizeMaxWidth.normal[this.useLegacy ? "legacy" : "default"]) {
+                    width_max > config.doubleResizeMaxWidth.normal[this.mode]) {
+                    while (width_max > config.doubleResizeMaxWidth.normal[this.mode]) {
                         width_max /= 1.1;
                         comment.fontSize -= 1;
                     }
-                    this.context.font = parseFont(comment.font, comment.fontSize, this.useLegacy);
+                    this.context.font = parseFont(comment.font, comment.fontSize, this.mode);
                     return this.measureText(comment);
                 }
             }
@@ -1127,23 +1283,23 @@
                 if (range.start < vpos && vpos < range.end)
                     return;
             }
-            var posX = (canvasWidth - comment.width_max) / 2, posY = comment.posY;
+            var posX = (config.canvasWidth - comment.width_max) / 2, posY = comment.posY;
             if (comment.loc === "naka") {
                 if (reverse) {
                     posX =
-                        canvasWidth +
+                        config.canvasWidth +
                             comment.width_max -
                             getPosX(comment.width_max, vpos - comment.vpos, comment.long);
                 }
                 else {
                     posX = getPosX(comment.width_max, vpos - comment.vpos, comment.long);
                 }
-                if (posX > canvasWidth || posX + comment.width_max < 0) {
+                if (posX > config.canvasWidth || posX + comment.width_max < 0) {
                     return;
                 }
             }
             else if (comment.loc === "shita") {
-                posY = canvasHeight - comment.posY - comment.height;
+                posY = config.canvasHeight - comment.posY - comment.height;
             }
             if (comment.image && comment.image !== true) {
                 this.context.drawImage(comment.image, posX, posY);
@@ -1155,7 +1311,7 @@
                 lines.forEach(function (_, index) {
                     var linePosY = (Number(index) + 1) *
                         (comment.fontSize * comment.lineHeight) *
-                        (1 + commentYPaddingTop);
+                        (1 + config.commentYPaddingTop);
                     _this.context.strokeStyle = "rgba(255,255,0,0.5)";
                     _this.context.strokeRect(posX, posY + linePosY, comment.width_max, comment.fontSize * comment.lineHeight * -1);
                 });
@@ -1163,7 +1319,7 @@
             if (isDebug) {
                 var font = this.context.font;
                 var fillStyle = this.context.fillStyle;
-                this.context.font = parseFont("defont", 30, false);
+                this.context.font = parseFont("defont", 30);
                 this.context.fillStyle = "#ff00ff";
                 this.context.fillText(comment.mail.join(","), posX, posY + 30);
                 this.context.font = font;
@@ -1190,7 +1346,7 @@
                         if (_this.cacheIndex[cacheKey] === i) {
                             delete _this.cacheIndex[cacheKey];
                         }
-                    }, value.long * 10 + cacheAge);
+                    }, value.long * 10 + config.cacheAge);
                     return;
                 }
             }
@@ -1200,26 +1356,24 @@
             var context = image.getContext("2d");
             if (!context)
                 throw new Error("Fail to get CanvasRenderingContext2D");
-            context.strokeStyle = "rgba(0,0,0,0.7)";
+            context.strokeStyle = "rgba(".concat(hex2rgb(value.color === "#000000"
+                ? config.contextStrokeInversionColor
+                : config.contextStrokeColor).join(","), ",").concat(config.contextStrokeOpacity, ")");
             context.textAlign = "start";
             context.textBaseline = "alphabetic";
             context.lineWidth = 4;
-            context.font = parseFont(value.font, value.fontSize, this.useLegacy);
+            context.font = parseFont(value.font, value.fontSize, this.mode);
             if (value._live) {
-                var rgb = hex2rgb(value.color);
-                context.fillStyle = "rgba(".concat(rgb[0], ",").concat(rgb[1], ",").concat(rgb[2], ",0.5)");
+                context.fillStyle = "rgba(".concat(hex2rgb(value.color).join(","), ",").concat(config.contextFillLiveOpacity, ")");
             }
             else {
                 context.fillStyle = value.color;
             }
-            if (value.color === "#000000") {
-                context.strokeStyle = "rgba(255,255,255,0.7)";
-            }
             var lines = value.content.split("\n");
             lines.forEach(function (line, index) {
                 var posY = (index + 1) *
                     (value.fontSize * value.lineHeight) *
-                    (1 + commentYPaddingTop);
+                    (1 + config.commentYPaddingTop);
                 context.strokeText(line, 0, posY);
                 context.fillText(line, 0, posY);
             });
@@ -1234,7 +1388,7 @@
                 if (_this.cacheIndex[cacheKey] === i) {
                     delete _this.cacheIndex[cacheKey];
                 }
-            }, value.long * 10 + cacheAge);
+            }, value.long * 10 + config.cacheAge);
         };
         NiconiComments.prototype.parseCommand = function (comment) {
             var metadata = comment.mail;
@@ -1262,11 +1416,11 @@
                 }
                 else if (result.size === undefined && typeGuard.comment.size(command)) {
                     result.size = command;
-                    result.fontSize = fontSize[command].default;
+                    result.fontSize = config.fontSize[command].default;
                 }
                 else {
                     if (result.color === undefined) {
-                        var color = colors[command];
+                        var color = config.colors[command];
                         if (color) {
                             result.color = color;
                             continue;
@@ -1462,7 +1616,7 @@
             }
             if (!data.size) {
                 data.size = size || "medium";
-                data.fontSize = fontSize[data.size].default;
+                data.fontSize = config.fontSize[data.size].default;
             }
             if (!data.font) {
                 data.font = font || "defont";
@@ -1515,16 +1669,16 @@
                 }
             }
             if (this.showFPS) {
-                this.context.font = parseFont("defont", 60, this.useLegacy);
+                this.context.font = parseFont("defont", 60);
                 this.context.fillStyle = "#00FF00";
-                this.context.strokeStyle = "rgba(0,0,0,0.7)";
+                this.context.strokeStyle = "rgba(".concat(hex2rgb(config.contextStrokeColor).join(","), ",").concat(config.contextStrokeOpacity, ")");
                 this.context.strokeText("FPS:".concat(this.fps), 100, 100);
                 this.context.fillText("FPS:".concat(this.fps), 100, 100);
             }
             if (this.showCommentCount) {
-                this.context.font = parseFont("defont", 60, this.useLegacy);
+                this.context.font = parseFont("defont", 60);
                 this.context.fillStyle = "#00FF00";
-                this.context.strokeStyle = "rgba(0,0,0,0.7)";
+                this.context.strokeStyle = "rgba(".concat(hex2rgb(config.contextStrokeColor).join(","), ",").concat(config.contextStrokeOpacity, ")");
                 if (timelineRange) {
                     this.context.strokeText("Count:".concat(timelineRange.length), 100, 200);
                     this.context.fillText("Count:".concat(timelineRange.length), 100, 200);
@@ -1537,7 +1691,7 @@
             logger("drawCanvas complete: ".concat(performance.now() - drawCanvasStart, "ms"));
         };
         NiconiComments.prototype.clear = function () {
-            this.context.clearRect(0, 0, canvasWidth, canvasHeight);
+            this.context.clearRect(0, 0, config.canvasWidth, config.canvasHeight);
         };
         return NiconiComments;
     }());

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.25",
+  "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/dts/types.d.ts",
+  "types": "dist/bundle.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c rollup.config.js",