@xpadev-net/niconicomments 0.2.69 → 0.2.70

package/dist/bundle.d.ts

@@ -973,7 +973,8 @@ declare class BaseComment implements IComment {
 	readonly pluginName: string;
 	image?: IRenderer | null;
 	buttonImage?: IRenderer | null;
-	constructor(comment: FormattedComment, renderer: IRenderer);
+	index: number;
+	constructor(comment: FormattedComment, renderer: IRenderer, index: number);
 	get invisible(): boolean;
 	get loc(): "ue" | "naka" | "shita";
 	get long(): number;
@@ -1008,7 +1009,7 @@ declare class FlashComment extends BaseComment {
 	private _globalScale;
 	readonly pluginName: string;
 	buttonImage: IRenderer;
-	constructor(comment: FormattedComment, renderer: IRenderer);
+	constructor(comment: FormattedComment, renderer: IRenderer, index: number);
 	get content(): string;
 	set content(input: string);
 	convertComment(comment: FormattedComment): FormattedCommentWithSize;
@@ -1046,7 +1047,7 @@ declare class FlashComment extends BaseComment {
 }
 declare class HTML5Comment extends BaseComment {
 	readonly pluginName: string;
-	constructor(comment: FormattedComment, context: IRenderer);
+	constructor(comment: FormattedComment, context: IRenderer, index: number);
 	get content(): string;
 	set content(input: string);
 	convertComment(comment: FormattedComment): FormattedCommentWithSize;
@@ -1722,6 +1723,7 @@ export type Xml2jsPacket = Output<typeof ZXml2jsPacket>;
 export interface IComment {
 	comment: FormattedCommentWithSize;
 	invisible: boolean;
+	index: number;
 	loc: CommentLoc;
 	width: number;
 	long: number;
@@ -1772,6 +1774,7 @@ export type BaseOptions = {
 	showFPS: boolean;
 	useLegacy: boolean;
 	video: HTMLVideoElement | undefined;
+	lazy: boolean;
 };
 export type Options = Partial<BaseOptions>;
 export type inputFormatType = InputFormatType;
@@ -2961,8 +2964,10 @@ declare const parseCommandAndNicoScript: (comment: FormattedComment) => ParseCom
 declare const isFlashComment: (comment: FormattedComment) => boolean;
 declare const isReverseActive: (vpos: number, isOwner: boolean) => boolean;
 declare const isBanActive: (vpos: number) => boolean;
-declare const processFixedComment: (comment: IComment, collision: CollisionItem, timeline: Timeline) => void;
-declare const processMovableComment: (comment: IComment, collision: Collision, timeline: Timeline) => void;
+declare const processFixedComment: (comment: IComment, collision: CollisionItem, timeline: Timeline, lazy?: boolean) => void;
+declare const processMovableComment: (comment: IComment, collision: Collision, timeline: Timeline, lazy?: boolean) => void;
+declare const getFixedPosY: (comment: IComment, collision: CollisionItem) => number;
+declare const getMovablePosY: (comment: IComment, collision: Collision, beforeVpos: number) => number;
 declare const getPosY: (currentPos: number, targetComment: IComment, collision: IComment[] | undefined, isChanged?: boolean) => {
 	currentPos: number;
 	isChanged: boolean;
@@ -3014,10 +3019,12 @@ declare const index_d_getButtonParts: typeof getButtonParts;
 declare const index_d_getCharSize: typeof getCharSize;
 declare const index_d_getConfig: typeof getConfig;
 declare const index_d_getDefaultCommand: typeof getDefaultCommand;
+declare const index_d_getFixedPosY: typeof getFixedPosY;
 declare const index_d_getFlashFontIndex: typeof getFlashFontIndex;
 declare const index_d_getFlashFontName: typeof getFlashFontName;
 declare const index_d_getFontSizeAndScale: typeof getFontSizeAndScale;
 declare const index_d_getLineHeight: typeof getLineHeight;
+declare const index_d_getMovablePosY: typeof getMovablePosY;
 declare const index_d_getPosX: typeof getPosX;
 declare const index_d_getPosY: typeof getPosY;
 declare const index_d_getStrokeColor: typeof getStrokeColor;
@@ -3035,7 +3042,7 @@ declare const index_d_parseFont: typeof parseFont;
 declare const index_d_processFixedComment: typeof processFixedComment;
 declare const index_d_processMovableComment: typeof processMovableComment;
 declare namespace index_d {
-	export { index_d_addHTML5PartToResult as index_d_addHTML5PartToResult, index_d_arrayEqual as index_d_arrayEqual, index_d_arrayPush as index_d_arrayPush, index_d_buildAtButtonComment as index_d_buildAtButtonComment, index_d_changeCALayer as index_d_changeCALayer, index_d_getButtonParts as index_d_getButtonParts, index_d_getCharSize as index_d_getCharSize, index_d_getConfig as index_d_getConfig, index_d_getDefaultCommand as index_d_getDefaultCommand, index_d_getFlashFontIndex as index_d_getFlashFontIndex, index_d_getFlashFontName as index_d_getFlashFontName, index_d_getFontSizeAndScale as index_d_getFontSizeAndScale, index_d_getLineHeight as index_d_getLineHeight, index_d_getPosX as index_d_getPosX, index_d_getPosY as index_d_getPosY, index_d_getStrokeColor as index_d_getStrokeColor, index_d_hex2rgb as index_d_hex2rgb, index_d_hex2rgba as index_d_hex2rgba, index_d_isBanActive as index_d_isBanActive, index_d_isFlashComment as index_d_isFlashComment, index_d_isLineBreakResize as index_d_isLineBreakResize, index_d_isReverseActive as index_d_isReverseActive, index_d_measure as index_d_measure, index_d_nativeSort as index_d_nativeSort, index_d_parseCommandAndNicoScript as index_d_parseCommandAndNicoScript, index_d_parseContent as index_d_parseContent, index_d_parseFont as index_d_parseFont, index_d_processFixedComment as index_d_processFixedComment, index_d_processMovableComment as index_d_processMovableComment };
+	export { index_d_addHTML5PartToResult as index_d_addHTML5PartToResult, index_d_arrayEqual as index_d_arrayEqual, index_d_arrayPush as index_d_arrayPush, index_d_buildAtButtonComment as index_d_buildAtButtonComment, index_d_changeCALayer as index_d_changeCALayer, index_d_getButtonParts as index_d_getButtonParts, index_d_getCharSize as index_d_getCharSize, index_d_getConfig as index_d_getConfig, index_d_getDefaultCommand as index_d_getDefaultCommand, index_d_getFixedPosY as index_d_getFixedPosY, index_d_getFlashFontIndex as index_d_getFlashFontIndex, index_d_getFlashFontName as index_d_getFlashFontName, index_d_getFontSizeAndScale as index_d_getFontSizeAndScale, index_d_getLineHeight as index_d_getLineHeight, index_d_getMovablePosY as index_d_getMovablePosY, index_d_getPosX as index_d_getPosX, index_d_getPosY as index_d_getPosY, index_d_getStrokeColor as index_d_getStrokeColor, index_d_hex2rgb as index_d_hex2rgb, index_d_hex2rgba as index_d_hex2rgba, index_d_isBanActive as index_d_isBanActive, index_d_isFlashComment as index_d_isFlashComment, index_d_isLineBreakResize as index_d_isLineBreakResize, index_d_isReverseActive as index_d_isReverseActive, index_d_measure as index_d_measure, index_d_nativeSort as index_d_nativeSort, index_d_parseCommandAndNicoScript as index_d_parseCommandAndNicoScript, index_d_parseContent as index_d_parseContent, index_d_parseFont as index_d_parseFont, index_d_processFixedComment as index_d_processFixedComment, index_d_processMovableComment as index_d_processMovableComment };
 }
 declare const definition: {
 	colors: typeof colors$1;
@@ -3053,6 +3060,8 @@ declare class NiconiComments {
 	showFPS: boolean;
 	showCommentCount: boolean;
 	private lastVpos;
+	private processedCommentIndex;
+	private comments;
 	private readonly renderer;
 	private readonly collision;
 	private readonly timeline;
@@ -3411,7 +3420,7 @@ declare class NiconiComments {
 	constructor(renderer: IRenderer | HTMLCanvasElement, data: InputFormat, initOptions?: Options);
 	private preRendering;
 	private getCommentPos;
-	private sortComment;
+	private sortTimelineComment;
 	addComments(...rawComments: FormattedComment[]): void;
 	drawCanvas(vpos: number, forceRendering?: boolean, cursor?: Position): boolean;
 	private _drawVideo;

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.69
+  niconicomments.js v0.2.70
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -71,6 +71,7 @@
         showFPS: false,
         useLegacy: false,
         video: undefined,
+        lazy: false,
     };
     let config;
     let options;
@@ -2182,19 +2183,8 @@
         }
         return false;
     };
-    const processFixedComment = (comment, collision, timeline) => {
-        let posY = 0, isChanged = true, count = 0;
-        while (isChanged && count < 10) {
-            isChanged = false;
-            count++;
-            for (let j = 0; j < comment.long; j++) {
-                const result = getPosY(posY, comment, collision[comment.vpos + j]);
-                posY = result.currentPos;
-                isChanged = result.isChanged;
-                if (result.isBreak)
-                    break;
-            }
-        }
+    const processFixedComment = (comment, collision, timeline, lazy = false) => {
+        const posY = lazy ? -1 : getFixedPosY(comment, collision);
         for (let j = 0; j < comment.long; j++) {
             const vpos = comment.vpos + j;
             arrayPush(timeline, vpos, comment);
@@ -2204,43 +2194,14 @@
         }
         comment.posY = posY;
     };
-    const processMovableComment = (comment, collision, timeline) => {
+    const processMovableComment = (comment, collision, timeline, lazy = false) => {
         const beforeVpos = Math.round(-288 / ((1632 + comment.width) / (comment.long + 125))) - 100;
-        const posY = (() => {
-            if (config.canvasHeight < comment.height) {
-                return (comment.height - config.canvasHeight) / -2;
-            }
-            let posY = 0;
-            let isChanged = true;
-            while (isChanged) {
-                isChanged = false;
-                for (let j = beforeVpos, n = comment.long + 125; j < n; j++) {
-                    const vpos = comment.vpos + j;
-                    const leftPos = getPosX(comment.comment, vpos);
-                    let isBreak = false;
-                    if (leftPos + comment.width >= config.collisionRange.right &&
-                        leftPos <= config.collisionRange.right) {
-                        const result = getPosY(posY, comment, collision.right[vpos]);
-                        posY = result.currentPos;
-                        isChanged ||= result.isChanged;
-                        isBreak = result.isBreak;
-                    }
-                    if (leftPos + comment.width >= config.collisionRange.left &&
-                        leftPos <= config.collisionRange.left) {
-                        const result = getPosY(posY, comment, collision.left[vpos]);
-                        posY = result.currentPos;
-                        isChanged ||= result.isChanged;
-                        isBreak = result.isBreak;
-                    }
-                    if (isBreak)
-                        return posY;
-                }
-            }
-            return posY;
-        })();
+        const posY = lazy ? -1 : getMovablePosY(comment, collision, beforeVpos);
         for (let j = beforeVpos, n = comment.long + 125; j < n; j++) {
             const vpos = comment.vpos + j;
             const leftPos = getPosX(comment.comment, vpos);
+            if (timeline[vpos]?.includes(comment))
+                break;
             arrayPush(timeline, vpos, comment);
             if (leftPos + comment.width + config.collisionPadding >=
                 config.collisionRange.right &&
@@ -2255,15 +2216,72 @@
         }
         comment.posY = posY;
     };
+    const getFixedPosY = (comment, collision) => {
+        let posY = 0, isChanged = true, count = 0;
+        while (isChanged && count < 10) {
+            isChanged = false;
+            count++;
+            for (let j = 0; j < comment.long; j++) {
+                const result = getPosY(posY, comment, collision[comment.vpos + j]);
+                posY = result.currentPos;
+                isChanged = result.isChanged;
+                if (result.isBreak)
+                    break;
+            }
+        }
+        return posY;
+    };
+    const getMovablePosY = (comment, collision, beforeVpos) => {
+        if (config.canvasHeight < comment.height) {
+            return (comment.height - config.canvasHeight) / -2;
+        }
+        let posY = 0;
+        let isChanged = true;
+        let lastUpdatedIndex = undefined;
+        while (isChanged) {
+            isChanged = false;
+            for (let j = beforeVpos, n = comment.long + 125; j < n; j += 5) {
+                const vpos = comment.vpos + j;
+                const leftPos = getPosX(comment.comment, vpos);
+                let isBreak = false;
+                if (lastUpdatedIndex !== undefined && lastUpdatedIndex === vpos) {
+                    return posY;
+                }
+                if (leftPos + comment.width >= config.collisionRange.right &&
+                    leftPos <= config.collisionRange.right) {
+                    const result = getPosY(posY, comment, collision.right[vpos]);
+                    posY = result.currentPos;
+                    isChanged ||= result.isChanged;
+                    if (result.isChanged)
+                        lastUpdatedIndex = vpos;
+                    isBreak = result.isBreak;
+                }
+                if (leftPos + comment.width >= config.collisionRange.left &&
+                    leftPos <= config.collisionRange.left) {
+                    const result = getPosY(posY, comment, collision.left[vpos]);
+                    posY = result.currentPos;
+                    isChanged ||= result.isChanged;
+                    if (result.isChanged)
+                        lastUpdatedIndex = vpos;
+                    isBreak = result.isBreak;
+                }
+                if (isBreak)
+                    return posY;
+            }
+        }
+        return posY;
+    };
     const getPosY = (currentPos, targetComment, collision, isChanged = false) => {
         let isBreak = false;
         if (!collision)
             return { currentPos, isChanged, isBreak };
         for (const collisionItem of collision) {
-            if (currentPos < collisionItem.posY + collisionItem.height &&
-                currentPos + targetComment.height > collisionItem.posY &&
-                collisionItem.owner === targetComment.owner &&
-                collisionItem.layer === targetComment.layer) {
+            if (collisionItem.index === targetComment.index || collisionItem.posY < 0)
+                continue;
+            if (collisionItem.owner === targetComment.owner &&
+                collisionItem.layer === targetComment.layer &&
+                currentPos < collisionItem.posY + collisionItem.height &&
+                currentPos + targetComment.height > collisionItem.posY) {
                 if (collisionItem.posY + collisionItem.height > currentPos) {
                     currentPos = collisionItem.posY + collisionItem.height;
                     isChanged = true;
@@ -2811,10 +2829,12 @@
         getCharSize: getCharSize,
         getConfig: getConfig,
         getDefaultCommand: getDefaultCommand,
+        getFixedPosY: getFixedPosY,
         getFlashFontIndex: getFlashFontIndex,
         getFlashFontName: getFlashFontName,
         getFontSizeAndScale: getFontSizeAndScale,
         getLineHeight: getLineHeight,
+        getMovablePosY: getMovablePosY,
         getPosX: getPosX,
         getPosY: getPosY,
         getStrokeColor: getStrokeColor,
@@ -2842,13 +2862,15 @@
         pluginName = "BaseComment";
         image;
         buttonImage;
-        constructor(comment, renderer) {
+        index;
+        constructor(comment, renderer, index) {
             this.renderer = renderer;
-            this.posY = 0;
+            this.posY = -1;
             this.pos = { x: 0, y: 0 };
             comment.content = comment.content.replace(/\t/g, "\u2003\u2003");
             this.comment = this.convertComment(comment);
             this.cacheKey = this.getCacheKey();
+            this.index = index;
         }
         get invisible() {
             return this.comment.invisible;
@@ -3066,8 +3088,8 @@
         _globalScale;
         pluginName = "FlashComment";
         buttonImage;
-        constructor(comment, renderer) {
-            super(comment, renderer);
+        constructor(comment, renderer, index) {
+            super(comment, renderer, index);
             this._globalScale ??= getConfig(config.commentScale, true);
             this.buttonImage = renderer.getCanvas();
         }
@@ -3451,9 +3473,9 @@
 
     class HTML5Comment extends BaseComment {
         pluginName = "HTML5Comment";
-        constructor(comment, context) {
-            super(comment, context);
-            this.posY = 0;
+        constructor(comment, context, index) {
+            super(comment, context, index);
+            this.posY = -1;
         }
         get content() {
             return this.comment.rawContent;
@@ -4632,13 +4654,13 @@
         CanvasRenderer: CanvasRenderer
     });
 
-    const createCommentInstance = (comment, context) => {
+    const createCommentInstance = (comment, context, index) => {
         for (const plugin of config.commentPlugins) {
             if (plugin.condition(comment)) {
-                return new plugin.class(comment, context);
+                return new plugin.class(comment, context, index);
             }
         }
-        return new HTML5Comment(comment, context);
+        return new HTML5Comment(comment, context, index);
     };
 
     const definition = {
@@ -4667,6 +4689,8 @@
         showFPS;
         showCommentCount;
         lastVpos;
+        processedCommentIndex;
+        comments;
         renderer;
         collision;
         timeline;
@@ -4723,7 +4747,8 @@
                 right: [],
             };
             this.lastVpos = -1;
-            this.preRendering(parsedData);
+            this.processedCommentIndex = 0;
+            this.comments = this.preRendering(parsedData);
             logger(`constructor complete: ${performance.now() - constructorStart}ms`);
         }
         preRendering(rawData) {
@@ -4731,12 +4756,12 @@
             if (options.keepCA) {
                 rawData = changeCALayer(rawData);
             }
-            let instances = rawData.reduce((pv, val) => {
-                pv.push(createCommentInstance(val, this.renderer));
+            let instances = rawData.reduce((pv, val, index) => {
+                pv.push(createCommentInstance(val, this.renderer, index));
                 return pv;
             }, []);
-            this.getCommentPos(instances);
-            this.sortComment();
+            this.getCommentPos(instances, instances.length, options.lazy);
+            this.sortTimelineComment();
             const plugins = [];
             for (const plugin of config.plugins) {
                 try {
@@ -4756,22 +4781,29 @@
             }
             setPlugins(plugins);
             logger(`preRendering complete: ${performance.now() - preRenderingStart}ms`);
+            return instances;
         }
-        getCommentPos(data) {
+        getCommentPos(data, end, lazy = false) {
             const getCommentPosStart = performance.now();
-            for (const comment of data) {
-                if (comment.invisible)
+            if (this.processedCommentIndex + 1 >= end)
+                return;
+            for (const comment of data.slice(this.processedCommentIndex, end)) {
+                if (comment.invisible || (comment.posY > -1 && !lazy))
                     continue;
                 if (comment.loc === "naka") {
-                    processMovableComment(comment, this.collision, this.timeline);
+                    processMovableComment(comment, this.collision, this.timeline, lazy);
                 }
                 else {
-                    processFixedComment(comment, this.collision[comment.loc], this.timeline);
+                    processFixedComment(comment, this.collision[comment.loc], this.timeline, lazy);
                 }
+                this.processedCommentIndex = comment.index;
+            }
+            if (lazy) {
+                this.processedCommentIndex = 0;
             }
             logger(`getCommentPos complete: ${performance.now() - getCommentPosStart}ms`);
         }
-        sortComment() {
+        sortTimelineComment() {
             const sortCommentStart = performance.now();
             for (const vpos of Object.keys(this.timeline)) {
                 const item = this.timeline[Number(vpos)];
@@ -4791,8 +4823,8 @@
             logger(`parseData complete: ${performance.now() - sortCommentStart}ms`);
         }
         addComments(...rawComments) {
-            const comments = rawComments.reduce((pv, val) => {
-                pv.push(createCommentInstance(val, this.renderer));
+            const comments = rawComments.reduce((pv, val, index) => {
+                pv.push(createCommentInstance(val, this.renderer, this.comments.length + index));
                 return pv;
             }, []);
             for (const plugin of plugins) {
@@ -4867,6 +4899,7 @@
                     if (comment.invisible) {
                         continue;
                     }
+                    this.getCommentPos(this.comments, comment.index + 1);
                     comment.draw(vpos, this.showCollision, cursor);
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.69",
+  "version": "0.2.70",
   "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",