@xpadev-net/niconicomments 0.2.34 → 0.2.36

package/dist/bundle.d.ts

@@ -397,187 +397,189 @@ interface IComment {
   draw: (vpos: number, showCollision: boolean, isDebug: boolean) => void;
 }
 
-type inputFormatType =
-  | "niconicome"
-  | "formatted"
-  | "legacy"
-  | "legacyOwner"
-  | "owner"
-  | "v1"
-  | "default";
-type inputFormat =
-  | XMLDocument
-  | formattedComment[]
-  | formattedLegacyComment[]
-  | rawApiResponse[]
-  | ownerComment[]
-  | v1Thread[]
-  | string;
-type modeType = "default" | "html5" | "flash";
-type Options = {
-  config: ConfigNullable;
-  debug: 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 InitOptions = Partial<Options>;
-
-type formattedCommentWithFont = {
-  id: number;
-  vpos: number;
-  date: number;
-  date_usec: number;
-  owner: boolean;
-  premium: boolean;
-  mail: string[];
-  user_id: number;
-  layer: number;
-  loc: commentLoc;
-  size: commentSize;
-  fontSize: number;
-  font: commentFont;
-  color: string;
-  full: boolean;
-  ender: boolean;
-  _live: boolean;
-  long: number;
-  invisible: boolean;
-  content: commentContentItem[];
-  flash: boolean;
-  lineCount: number;
-  lineOffset: number;
-};
-type formattedCommentWithSize = formattedCommentWithFont & {
-  height: number;
-  width: number;
-  lineHeight: number;
-  resized: boolean;
-  resizedX: boolean;
-  resizedY: boolean;
-  content: commentMeasuredContentItem[];
-  charSize: number;
-};
-type parsedComment = formattedCommentWithSize & {
-  posY: number;
-  image?: HTMLCanvasElement | boolean;
-};
-type commentContentItem = {
-  content: string;
-  font?: commentFlashFont;
-  width?: number[];
-};
-type commentMeasuredContentItem = commentContentItem & {
-  width: number[];
-};
-type commentContentIndex = {
-  index: number;
-  font: "gothic" | "gulim" | "simsunStrong" | "simsunWeak";
-};
-type commentFont = "defont" | "mincho" | "gothic" | "gulim" | "simsun";
-type commentFlashFont = "defont" | "gulim" | "simsun";
-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 nicoScript = {
-  reverse: nicoScriptReverse[];
-  ban: nicoScriptBan[];
-  default: nicoScriptDefault[];
-  replace: nicoScriptReplace[];
-};
-type nicoScriptReverse = {
-  target: nicoScriptReverseTarget;
-  start: number;
-  end: number;
-};
-type nicoScriptReverseTarget = "コメ" | "投コメ" | "全";
-type nicoScriptReplace = {
-  start: number;
-  long: number | undefined;
-  keyword: string;
-  replace: string;
-  range: nicoScriptReplaceRange;
-  target: nicoScriptReplaceTarget;
-  condition: nicoScriptReplaceCondition;
-  color: string | undefined;
-  size: commentSize | undefined;
-  font: commentFont | undefined;
-  loc: commentLoc | undefined;
-  no: number;
-};
-type nicoScriptReplaceRange = "単" | "全";
-type nicoScriptReplaceTarget = "コメ" | "投コメ" | "全" | "含まない" | "含む";
-type nicoScriptReplaceCondition = "完全一致" | "部分一致";
-type nicoScriptBan = {
-  start: number;
-  end: number;
-};
-type nicoScriptDefault = {
-  start: number;
-  long: number | undefined;
-  color: string | undefined;
-  size: commentSize | undefined;
-  font: commentFont | undefined;
-  loc: commentLoc | undefined;
-};
-type measureTextResult = {
-  width: number;
-  height: number;
-  resized: boolean;
-  resizedX: boolean;
-  resizedY: boolean;
-  fontSize: number;
-  lineHeight: number;
-  content: commentMeasuredContentItem[];
-  charSize: number;
-};
-type parsedCommand = {
-  loc: commentLoc | undefined;
-  size: commentSize | undefined;
-  fontSize: number | undefined;
-  color: string | undefined;
-  font: commentFont | undefined;
-  full: boolean;
-  ender: boolean;
-  _live: boolean;
-  invisible: boolean;
-  long: number | undefined;
-};
-
-type measureTextInput = {
-  content: commentContentItem[];
-  resized?: boolean;
-  ender: boolean;
-  size: commentSize;
-  fontSize: number;
-  resizedY?: boolean;
-  resizedX?: boolean;
-  font: commentFont;
-  loc: commentLoc;
-  full: boolean;
-  flash: boolean;
-  lineCount: number;
-  lineHeight?: number;
-  charSize?: number;
-};
+type inputFormatType =
+  | "niconicome"
+  | "formatted"
+  | "legacy"
+  | "legacyOwner"
+  | "owner"
+  | "v1"
+  | "empty"
+  | "default";
+type inputFormat =
+  | XMLDocument
+  | formattedComment[]
+  | formattedLegacyComment[]
+  | rawApiResponse[]
+  | ownerComment[]
+  | v1Thread[]
+  | string
+  | undefined;
+type modeType = "default" | "html5" | "flash";
+type Options = {
+  config: ConfigNullable;
+  debug: 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 InitOptions = Partial<Options>;
 
-type measureInput = {
-  font: commentFont;
-  content: commentContentItem[];
-  lineHeight: number;
-  charSize: number;
-  lineCount: number;
-};
+type formattedCommentWithFont = {
+  id: number;
+  vpos: number;
+  date: number;
+  date_usec: number;
+  owner: boolean;
+  premium: boolean;
+  mail: string[];
+  user_id: number;
+  layer: number;
+  loc: commentLoc;
+  size: commentSize;
+  fontSize: number;
+  font: commentFont;
+  color: string;
+  full: boolean;
+  ender: boolean;
+  _live: boolean;
+  long: number;
+  invisible: boolean;
+  content: commentContentItem[];
+  flash: boolean;
+  lineCount: number;
+  lineOffset: number;
+};
+type formattedCommentWithSize = formattedCommentWithFont & {
+  height: number;
+  width: number;
+  lineHeight: number;
+  resized: boolean;
+  resizedX: boolean;
+  resizedY: boolean;
+  content: commentMeasuredContentItem[];
+  charSize: number;
+};
+type parsedComment = formattedCommentWithSize & {
+  posY: number;
+  image?: HTMLCanvasElement | boolean;
+};
+type commentContentItem = {
+  content: string;
+  font?: commentFlashFont;
+  width?: number[];
+};
+type commentMeasuredContentItem = commentContentItem & {
+  width: number[];
+};
+type commentContentIndex = {
+  index: number;
+  font: "gothic" | "gulim" | "simsunStrong" | "simsunWeak";
+};
+type commentFont = "defont" | "mincho" | "gothic" | "gulim" | "simsun";
+type commentFlashFont = "defont" | "gulim" | "simsun";
+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]: IComment[] };
+type nicoScript = {
+  reverse: nicoScriptReverse[];
+  ban: nicoScriptBan[];
+  default: nicoScriptDefault[];
+  replace: nicoScriptReplace[];
+};
+type nicoScriptReverse = {
+  target: nicoScriptReverseTarget;
+  start: number;
+  end: number;
+};
+type nicoScriptReverseTarget = "コメ" | "投コメ" | "全";
+type nicoScriptReplace = {
+  start: number;
+  long: number | undefined;
+  keyword: string;
+  replace: string;
+  range: nicoScriptReplaceRange;
+  target: nicoScriptReplaceTarget;
+  condition: nicoScriptReplaceCondition;
+  color: string | undefined;
+  size: commentSize | undefined;
+  font: commentFont | undefined;
+  loc: commentLoc | undefined;
+  no: number;
+};
+type nicoScriptReplaceRange = "単" | "全";
+type nicoScriptReplaceTarget = "コメ" | "投コメ" | "全" | "含まない" | "含む";
+type nicoScriptReplaceCondition = "完全一致" | "部分一致";
+type nicoScriptBan = {
+  start: number;
+  end: number;
+};
+type nicoScriptDefault = {
+  start: number;
+  long: number | undefined;
+  color: string | undefined;
+  size: commentSize | undefined;
+  font: commentFont | undefined;
+  loc: commentLoc | undefined;
+};
+type measureTextResult = {
+  width: number;
+  height: number;
+  resized: boolean;
+  resizedX: boolean;
+  resizedY: boolean;
+  fontSize: number;
+  lineHeight: number;
+  content: commentMeasuredContentItem[];
+  charSize: number;
+};
+type parsedCommand = {
+  loc: commentLoc | undefined;
+  size: commentSize | undefined;
+  fontSize: number | undefined;
+  color: string | undefined;
+  font: commentFont | undefined;
+  full: boolean;
+  ender: boolean;
+  _live: boolean;
+  invisible: boolean;
+  long: number | undefined;
+};
+
+type measureTextInput = {
+  content: commentContentItem[];
+  resized?: boolean;
+  ender: boolean;
+  size: commentSize;
+  fontSize: number;
+  resizedY?: boolean;
+  resizedX?: boolean;
+  font: commentFont;
+  loc: commentLoc;
+  full: boolean;
+  flash: boolean;
+  lineCount: number;
+  lineHeight?: number;
+  charSize?: number;
+};
+
+type measureInput = {
+  font: commentFont;
+  content: commentContentItem[];
+  lineHeight: number;
+  charSize: number;
+  lineCount: number;
+};
 
 declare const convert2formattedComment: (data: unknown, type: inputFormatType) => formattedComment[];
 
@@ -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.34
+  niconicomments.js v0.2.36
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -132,7 +132,6 @@
                                 "date",
                                 "date_usec",
                                 "anonymity",
-                                "user_id",
                                 "mail",
                                 "leaf",
                                 "premium",
@@ -305,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)) {
@@ -945,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 &&
@@ -1047,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) {
@@ -2374,7 +2373,6 @@
                 pv[value] = [];
                 return pv;
             }, {});
-            this.data = [];
             this.lastVpos = -1;
             this.preRendering(parsedData);
             logger("constructor complete: ".concat(performance.now() - constructorStart, "ms"));
@@ -2385,7 +2383,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));
                 }
@@ -2394,13 +2392,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") {
@@ -2420,7 +2418,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;
@@ -2429,7 +2427,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;
@@ -2445,14 +2443,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;
@@ -2469,7 +2467,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)
@@ -2478,14 +2476,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;
@@ -2494,28 +2492,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; }
@@ -2542,28 +2653,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.34",
+  "version": "0.2.36",
   "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": {