@xpadev-net/niconicomments 0.2.35 → 0.2.37

package/dist/bundle.d.ts

@@ -404,6 +404,7 @@ type inputFormatType =
   | "legacyOwner"
   | "owner"
   | "v1"
+  | "empty"
   | "default";
 type inputFormat =
   | XMLDocument
@@ -412,7 +413,8 @@ type inputFormat =
   | rawApiResponse[]
   | ownerComment[]
   | v1Thread[]
-  | string;
+  | string
+  | undefined;
 type modeType = "default" | "html5" | "flash";
 type Options = {
   config: ConfigNullable;
@@ -488,7 +490,7 @@ type commentSize = "big" | "medium" | "small";
 type commentLoc = "ue" | "naka" | "shita";
 type collision = { [key in collisionPos]: collisionItem };
 type collisionPos = "ue" | "shita" | "right" | "left";
-type collisionItem = { [p: number]: number[] };
+type collisionItem = { [p: number]: IComment[] };
 type nicoScript = {
   reverse: nicoScriptReverse[];
   ban: nicoScriptBan[];
@@ -588,16 +590,16 @@ declare class NiconiComments {
     showFPS: boolean;
     showCommentCount: boolean;
     video: HTMLVideoElement | undefined;
-    private data;
     private lastVpos;
     private readonly canvas;
     private readonly collision;
     private readonly context;
     private readonly timeline;
     constructor(canvas: HTMLCanvasElement, data: inputFormat, initOptions?: InitOptions);
-    preRendering(rawData: formattedComment[]): void;
-    getCommentPos(data: IComment[]): IComment[];
-    sortComment(parsedData: IComment[]): IComment[];
+    private preRendering;
+    private getCommentPos;
+    private sortComment;
+    addComments(...rawComments: formattedComment[]): void;
     drawCanvas(vpos: number, forceRendering?: boolean): void;
     clear(): void;
 }
@@ -671,7 +673,7 @@ declare const typeGuard: {
 };
 
 
-declare const getPosY: (currentPos: number, targetComment: IComment, collision: number[] | undefined, data: IComment[]) => {
+declare const getPosY: (currentPos: number, targetComment: IComment, collision: IComment[] | undefined) => {
     currentPos: number;
     isChanged: boolean;
     isBreak: boolean;
@@ -679,8 +681,8 @@ declare const getPosY: (currentPos: number, targetComment: IComment, collision:
 declare const getPosX: (width: number, vpos: number, long: number) => number;
 declare const parseFont: (font: commentFont, size: string | number) => string;
 declare const arrayPush: (array: {
-    [key: number]: number[];
-}, key: string | number, push: number) => void;
+    [key: number]: IComment[];
+}, key: string | number, push: IComment) => void;
 declare const hex2rgb: (hex: string) => number[];
 declare const replaceAll: (string: string, target: string, replace: string) => string;
 declare const changeCALayer: (rawData: formattedComment[]) => formattedComment[];

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.35
+  niconicomments.js v0.2.37
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -304,7 +304,10 @@
 
     var convert2formattedComment = function (data, type) {
         var result = [];
-        if (type === "niconicome" && typeGuard.niconicome.xmlDocument(data)) {
+        if (type === "empty" && data === undefined) {
+            return [];
+        }
+        else if (type === "niconicome" && typeGuard.niconicome.xmlDocument(data)) {
             result = fromNiconicome(data);
         }
         else if (type === "formatted" && typeGuard.formatted.legacyComments(data)) {
@@ -944,15 +947,12 @@
         };
     };
 
-    var getPosY = function (currentPos, targetComment, collision, data) {
+    var getPosY = function (currentPos, targetComment, collision) {
         var isChanged = false, isBreak = false;
         if (!collision)
             return { currentPos: currentPos, isChanged: isChanged, isBreak: isBreak };
         for (var _i = 0, collision_1 = collision; _i < collision_1.length; _i++) {
-            var index = collision_1[_i];
-            var collisionItem = data[index];
-            if (!collisionItem)
-                continue;
+            var collisionItem = collision_1[_i];
             if (currentPos < collisionItem.posY + collisionItem.height &&
                 currentPos + targetComment.height > collisionItem.posY &&
                 collisionItem.owner === targetComment.owner &&
@@ -1046,7 +1046,7 @@
                 userList[value.user_id] +=
                     (value.content.match(/\r\n|\n|\r/g) || []).length / 2;
             }
-            var key = "".concat(value.content, "@@").concat(Array.from(new Set(__spreadArray([], value.mail, true).sort()))
+            var key = "".concat(value.content, "@@").concat(__spreadArray([], value.mail, true).sort()
                 .filter(function (e) { return !e.match(/@[\d.]+|184|device:.+|patissier|ca/); })
                 .join("")), lastComment = index[key];
             if (lastComment !== undefined) {
@@ -1577,6 +1577,9 @@
                 item.width = itemWidth[i];
             }
             comment.fontSize = (comment.charSize || 0) * 0.8;
+            var charScale = getFontSizeAndScale(comment.charSize || 0);
+            if (charScale.scale < 1)
+                height *= 1.01;
             return {
                 width: width * scale,
                 height: height * scale,
@@ -1674,6 +1677,7 @@
                 this.context.strokeRect(posX, posY, this.comment.width, this.comment.height);
                 for (var i = 0; i < this.comment.lineCount; i++) {
                     var linePosY = (this.comment.lineHeight * (i + 1) +
+                        (this.comment.charSize - this.comment.lineHeight) / 2 +
                         this.comment.lineHeight * -0.16 +
                         (((_a = config.fonts[this.comment.font]) === null || _a === void 0 ? void 0 : _a.offset) ||
                             0)) *
@@ -1747,6 +1751,7 @@
                     if (line === undefined)
                         continue;
                     var posY = (this.comment.lineHeight * (lineCount + 1 + paddingTop) +
+                        (this.comment.charSize - this.comment.lineHeight) / 2 +
                         this.comment.lineHeight * -0.16 +
                         (((_a = config.fonts[this.comment.font]) === null || _a === void 0 ? void 0 : _a.offset) ||
                             0)) /
@@ -2373,7 +2378,6 @@
                 pv[value] = [];
                 return pv;
             }, {});
-            this.data = [];
             this.lastVpos = -1;
             this.preRendering(parsedData);
             logger("constructor complete: ".concat(performance.now() - constructorStart, "ms"));
@@ -2384,7 +2388,7 @@
             if (options.keepCA) {
                 rawData = changeCALayer(rawData);
             }
-            var parsedData = this.getCommentPos(rawData.reduce(function (pv, val) {
+            this.getCommentPos(rawData.reduce(function (pv, val) {
                 if (isFlashComment(val)) {
                     pv.push(new FlashComment(val, _this.context));
                 }
@@ -2393,13 +2397,13 @@
                 }
                 return pv;
             }, []));
-            this.data = this.sortComment(parsedData);
+            this.sortComment();
             logger("preRendering complete: ".concat(performance.now() - preRenderingStart, "ms"));
         };
         NiconiComments.prototype.getCommentPos = function (data) {
             var _this = this;
             var getCommentPosStart = performance.now();
-            data.forEach(function (comment, index) {
+            data.forEach(function (comment) {
                 if (comment.invisible)
                     return;
                 if (comment.loc === "naka") {
@@ -2419,7 +2423,7 @@
                                 var left_pos = getPosX(comment.width, j, comment.long);
                                 if (left_pos + comment.width >= config.collisionRange.right &&
                                     left_pos <= config.collisionRange.right) {
-                                    var result = getPosY(posY, comment, _this.collision.right[vpos], data);
+                                    var result = getPosY(posY, comment, _this.collision.right[vpos]);
                                     posY = result.currentPos;
                                     isChanged = result.isChanged;
                                     isBreak = result.isBreak;
@@ -2428,7 +2432,7 @@
                                 }
                                 if (left_pos + comment.width >= config.collisionRange.left &&
                                     left_pos <= config.collisionRange.left) {
-                                    var result = getPosY(posY, comment, _this.collision.left[vpos], data);
+                                    var result = getPosY(posY, comment, _this.collision.left[vpos]);
                                     posY = result.currentPos;
                                     isChanged = result.isChanged;
                                     isBreak = result.isBreak;
@@ -2444,14 +2448,14 @@
                     for (var j = beforeVpos; j < comment.long + 125; j++) {
                         var vpos = comment.vpos + j;
                         var left_pos = getPosX(comment.width, j, comment.long);
-                        arrayPush(_this.timeline, vpos, index);
+                        arrayPush(_this.timeline, vpos, comment);
                         if (left_pos + comment.width >= config.collisionRange.right &&
                             left_pos <= config.collisionRange.right) {
-                            arrayPush(_this.collision.right, vpos, index);
+                            arrayPush(_this.collision.right, vpos, comment);
                         }
                         if (left_pos + comment.width >= config.collisionRange.left &&
                             left_pos <= config.collisionRange.left) {
-                            arrayPush(_this.collision.left, vpos, index);
+                            arrayPush(_this.collision.left, vpos, comment);
                         }
                     }
                     comment.posY = posY;
@@ -2468,7 +2472,7 @@
                         isChanged = false;
                         count++;
                         for (var j = 0; j < comment.long; j++) {
-                            var result = getPosY(posY, comment, collision[comment.vpos + j], data);
+                            var result = getPosY(posY, comment, collision[comment.vpos + j]);
                             posY = result.currentPos;
                             isChanged = result.isChanged;
                             if (result.isBreak)
@@ -2477,14 +2481,14 @@
                     }
                     for (var j = 0; j < comment.long; j++) {
                         var vpos = comment.vpos + j;
-                        arrayPush(_this.timeline, vpos, index);
+                        arrayPush(_this.timeline, vpos, comment);
                         if (j > comment.long - 20)
                             continue;
                         if (comment.loc === "ue") {
-                            arrayPush(_this.collision.ue, vpos, index);
+                            arrayPush(_this.collision.ue, vpos, comment);
                         }
                         else {
-                            arrayPush(_this.collision.shita, vpos, index);
+                            arrayPush(_this.collision.shita, vpos, comment);
                         }
                     }
                     comment.posY = posY;
@@ -2493,28 +2497,141 @@
             logger("getCommentPos complete: ".concat(performance.now() - getCommentPosStart, "ms"));
             return data;
         };
-        NiconiComments.prototype.sortComment = function (parsedData) {
-            var _a;
+        NiconiComments.prototype.sortComment = function () {
             var sortCommentStart = performance.now();
-            for (var _i = 0, _b = Object.keys(this.timeline); _i < _b.length; _i++) {
-                var vpos = _b[_i];
+            for (var _i = 0, _a = Object.keys(this.timeline); _i < _a.length; _i++) {
+                var vpos = _a[_i];
                 var item = this.timeline[Number(vpos)];
                 if (!item)
                     continue;
                 var owner = [], user = [];
-                for (var _c = 0, item_1 = item; _c < item_1.length; _c++) {
-                    var index = item_1[_c];
-                    if ((_a = parsedData[index]) === null || _a === void 0 ? void 0 : _a.owner) {
-                        owner.push(index);
+                for (var _b = 0, item_1 = item; _b < item_1.length; _b++) {
+                    var comment = item_1[_b];
+                    if (comment === null || comment === void 0 ? void 0 : comment.owner) {
+                        owner.push(comment);
                     }
                     else {
-                        user.push(index);
+                        user.push(comment);
                     }
                 }
                 this.timeline[Number(vpos)] = user.concat(owner);
             }
             logger("parseData complete: ".concat(performance.now() - sortCommentStart, "ms"));
-            return parsedData;
+        };
+        NiconiComments.prototype.addComments = function () {
+            var _this = this;
+            var _a, _b, _c;
+            var rawComments = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                rawComments[_i] = arguments[_i];
+            }
+            var comments = rawComments.reduce(function (pv, val) {
+                if (isFlashComment(val)) {
+                    pv.push(new FlashComment(val, _this.context));
+                }
+                else {
+                    pv.push(new HTML5Comment(val, _this.context));
+                }
+                return pv;
+            }, []);
+            var _loop_1 = function (comment) {
+                if (comment.invisible)
+                    return "continue";
+                if (comment.loc === "naka") {
+                    var posY = 0;
+                    var beforeVpos = Math.round(-288 / ((1632 + comment.width) / (comment.long + 125))) -
+                        100;
+                    if (config.canvasHeight < comment.height) {
+                        posY = (comment.height - config.canvasHeight) / -2;
+                    }
+                    else {
+                        var isBreak = false, isChanged = true, count = 0;
+                        while (isChanged && count < 10) {
+                            isChanged = false;
+                            count++;
+                            for (var j = beforeVpos; j < comment.long + 125; j++) {
+                                var vpos = comment.vpos + j;
+                                var left_pos = getPosX(comment.width, j, comment.long);
+                                if (left_pos + comment.width >= config.collisionRange.right &&
+                                    left_pos <= config.collisionRange.right) {
+                                    var collision = (_a = this_1.collision.right[vpos]) === null || _a === void 0 ? void 0 : _a.filter(function (val) { return val.vpos <= comment.vpos; });
+                                    var result = getPosY(posY, comment, collision);
+                                    posY = result.currentPos;
+                                    isChanged = result.isChanged;
+                                    isBreak = result.isBreak;
+                                    if (isBreak)
+                                        break;
+                                }
+                                if (left_pos + comment.width >= config.collisionRange.left &&
+                                    left_pos <= config.collisionRange.left) {
+                                    var collision = (_b = this_1.collision.left[vpos]) === null || _b === void 0 ? void 0 : _b.filter(function (val) { return val.vpos <= comment.vpos; });
+                                    var result = getPosY(posY, comment, collision);
+                                    posY = result.currentPos;
+                                    isChanged = result.isChanged;
+                                    isBreak = result.isBreak;
+                                    if (isBreak)
+                                        break;
+                                }
+                            }
+                            if (isBreak) {
+                                break;
+                            }
+                        }
+                    }
+                    for (var j = beforeVpos; j < comment.long + 125; j++) {
+                        var vpos = comment.vpos + j;
+                        var left_pos = getPosX(comment.width, j, comment.long);
+                        arrayPush(this_1.timeline, vpos, comment);
+                        if (left_pos + comment.width >= config.collisionRange.right &&
+                            left_pos <= config.collisionRange.right) {
+                            arrayPush(this_1.collision.right, vpos, comment);
+                        }
+                        if (left_pos + comment.width >= config.collisionRange.left &&
+                            left_pos <= config.collisionRange.left) {
+                            arrayPush(this_1.collision.left, vpos, comment);
+                        }
+                    }
+                    comment.posY = posY;
+                }
+                else {
+                    var posY = 0, isChanged = true, count = 0, collision = void 0;
+                    if (comment.loc === "ue") {
+                        collision = this_1.collision.ue;
+                    }
+                    else {
+                        collision = this_1.collision.shita;
+                    }
+                    while (isChanged && count < 10) {
+                        isChanged = false;
+                        count++;
+                        for (var j = 0; j < comment.long; j++) {
+                            var result = getPosY(posY, comment, (_c = collision[comment.vpos + j]) === null || _c === void 0 ? void 0 : _c.filter(function (val) { return val.vpos <= comment.vpos; }));
+                            posY = result.currentPos;
+                            isChanged = result.isChanged;
+                            if (result.isBreak)
+                                break;
+                        }
+                    }
+                    for (var j = 0; j < comment.long; j++) {
+                        var vpos = comment.vpos + j;
+                        arrayPush(this_1.timeline, vpos, comment);
+                        if (j > comment.long - 20)
+                            continue;
+                        if (comment.loc === "ue") {
+                            arrayPush(this_1.collision.ue, vpos, comment);
+                        }
+                        else {
+                            arrayPush(this_1.collision.shita, vpos, comment);
+                        }
+                    }
+                    comment.posY = posY;
+                }
+            };
+            var this_1 = this;
+            for (var _d = 0, comments_1 = comments; _d < comments_1.length; _d++) {
+                var comment = comments_1[_d];
+                _loop_1(comment);
+            }
         };
         NiconiComments.prototype.drawCanvas = function (vpos, forceRendering) {
             if (forceRendering === void 0) { forceRendering = false; }
@@ -2541,28 +2658,21 @@
                 this.context.fillStyle = "red";
                 if (leftCollision) {
                     for (var _i = 0, leftCollision_1 = leftCollision; _i < leftCollision_1.length; _i++) {
-                        var index = leftCollision_1[_i];
-                        var value = this.data[index];
-                        if (!value)
-                            continue;
-                        this.context.fillRect(config.collisionRange.left, value.posY, config.contextLineWidth, value.height);
+                        var comment = leftCollision_1[_i];
+                        this.context.fillRect(config.collisionRange.left, comment.posY, config.contextLineWidth, comment.height);
                     }
                 }
                 if (rightCollision) {
                     for (var _a = 0, rightCollision_1 = rightCollision; _a < rightCollision_1.length; _a++) {
-                        var index = rightCollision_1[_a];
-                        var value = this.data[index];
-                        if (!value)
-                            continue;
-                        this.context.fillRect(config.collisionRange.right, value.posY, config.contextLineWidth * -1, value.height);
+                        var comment = rightCollision_1[_a];
+                        this.context.fillRect(config.collisionRange.right, comment.posY, config.contextLineWidth * -1, comment.height);
                     }
                 }
             }
             if (timelineRange) {
                 for (var _b = 0, timelineRange_1 = timelineRange; _b < timelineRange_1.length; _b++) {
-                    var index = timelineRange_1[_b];
-                    var comment = this.data[index];
-                    if (!comment || comment.invisible) {
+                    var comment = timelineRange_1[_b];
+                    if (comment.invisible) {
                         continue;
                     }
                     comment.draw(vpos, this.showCollision, isDebug);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "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",
@@ -24,7 +24,12 @@
     "url": "git+https://github.com/xpadev-net/niconicomments.git"
   },
   "keywords": [
-    "niconico"
+    "canvas",
+    "comment",
+    "danmaku",
+    "html5",
+    "niconico",
+    "nicovide"
   ],
   "author": "xpadev(xpadev.net)",
   "bugs": {