@xpadev-net/niconicomments 0.2.68 → 0.2.70

package/dist/bundle.d.ts

@@ -961,41 +961,6 @@ export type DefaultCommand = {
 	font?: CommentFont;
 	loc?: CommentLoc;
 };
-export interface IRenderer {
-	readonly canvas: HTMLCanvasElement;
-	readonly video?: HTMLVideoElement;
-	destroy(): void;
-	drawVideo(enableLegacyPip: boolean): void;
-	getFont(): string;
-	getFillStyle(): string | CanvasGradient | CanvasPattern;
-	setScale(scale: number, arg1?: number): void;
-	fillRect(x: number, y: number, width: number, height: number): void;
-	strokeRect(x: number, y: number, width: number, height: number): void;
-	fillText(text: string, x: number, y: number): void;
-	strokeText(text: string, x: number, y: number): void;
-	quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
-	clearRect(x: number, y: number, width: number, height: number): void;
-	setFont(font: string): void;
-	setFillStyle(color: string): void;
-	setStrokeStyle(color: string): void;
-	setLineWidth(width: number): void;
-	setGlobalAlpha(alpha: number): void;
-	setSize(width: number, height: number): void;
-	getSize(): {
-		width: number;
-		height: number;
-	};
-	measureText(text: string): TextMetrics;
-	beginPath(): void;
-	closePath(): void;
-	moveTo(x: number, y: number): void;
-	lineTo(x: number, y: number): void;
-	stroke(): void;
-	save(): void;
-	restore(): void;
-	getCanvas(): IRenderer;
-	drawImage(image: IRenderer, x: number, y: number, width?: number, height?: number): void;
-}
 declare class BaseComment implements IComment {
 	protected readonly renderer: IRenderer;
 	protected cacheKey: string;
@@ -1008,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;
@@ -1043,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;
@@ -1081,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;
@@ -1575,42 +1541,105 @@ export declare const ZV1Thread: ObjectSchema<{
 }>;
 export type V1Thread = Output<typeof ZV1Thread>;
 export type v1Thread = V1Thread;
-export interface IComment {
-	comment: FormattedCommentWithSize;
-	invisible: boolean;
-	loc: CommentLoc;
-	width: number;
-	long: number;
-	height: number;
-	vpos: number;
-	flash: boolean;
-	posY: number;
-	owner: boolean;
-	layer: number;
-	mail: string[];
-	content: string;
-	image?: IRenderer | null;
-	draw: (vpos: number, showCollision: boolean, cursor?: Position) => void;
-	isHovered: (cursor?: Position, posX?: number, posY?: number) => boolean;
-}
-export interface InputParser {
-	key: string[];
-	parse: (input: unknown) => FormattedComment[];
-}
-export interface IPluginConstructor {
-	id: string;
-	new (Canvas: IRenderer, comments: IComment[]): IPlugin;
-}
-export interface IPlugin {
-	draw?: (vpos: number) => void;
-	addComments?: (comments: IComment[]) => void;
-	transformComments?: (comments: IComment[]) => IComment[];
-}
-export type IPluginList = {
-	instance: IPlugin;
-	canvas: IRenderer;
-}[];
-declare const ZXml2jsPacket: ObjectSchema<{
+export declare const ZXml2jsChatItem: ObjectSchema<{
+	_: StringSchema<string>;
+	$: ObjectSchema<{
+		no: OptionalSchema<StringSchema<string>, undefined, string | undefined>;
+		vpos: StringSchema<string>;
+		date: OptionalSchema<StringSchema<string>, "0", string>;
+		date_usec: OptionalSchema<StringSchema<string>, "0", string>;
+		user_id: OptionalSchema<StringSchema<string>, undefined, string | undefined>;
+		owner: OptionalSchema<StringSchema<string>, "", string>;
+		premium: OptionalSchema<StringSchema<string>, "", string>;
+		mail: OptionalSchema<StringSchema<string>, "", string>;
+	}, undefined, {
+		owner: string;
+		vpos: string;
+		date: string;
+		date_usec: string;
+		premium: string;
+		mail: string;
+		user_id?: string | undefined;
+		no?: string | undefined;
+	}>;
+}, undefined, {
+	_: string;
+	$: {
+		owner: string;
+		vpos: string;
+		date: string;
+		date_usec: string;
+		premium: string;
+		mail: string;
+		user_id?: string | undefined;
+		no?: string | undefined;
+	};
+}>;
+export type Xml2jsChatItem = Output<typeof ZXml2jsChatItem>;
+export declare const ZXml2jsChat: ObjectSchema<{
+	chat: ArraySchema<ObjectSchema<{
+		_: StringSchema<string>;
+		$: ObjectSchema<{
+			no: OptionalSchema<StringSchema<string>, undefined, string | undefined>;
+			vpos: StringSchema<string>;
+			date: OptionalSchema<StringSchema<string>, "0", string>;
+			date_usec: OptionalSchema<StringSchema<string>, "0", string>;
+			user_id: OptionalSchema<StringSchema<string>, undefined, string | undefined>;
+			owner: OptionalSchema<StringSchema<string>, "", string>;
+			premium: OptionalSchema<StringSchema<string>, "", string>;
+			mail: OptionalSchema<StringSchema<string>, "", string>;
+		}, undefined, {
+			owner: string;
+			vpos: string;
+			date: string;
+			date_usec: string;
+			premium: string;
+			mail: string;
+			user_id?: string | undefined;
+			no?: string | undefined;
+		}>;
+	}, undefined, {
+		_: string;
+		$: {
+			owner: string;
+			vpos: string;
+			date: string;
+			date_usec: string;
+			premium: string;
+			mail: string;
+			user_id?: string | undefined;
+			no?: string | undefined;
+		};
+	}>, {
+		_: string;
+		$: {
+			owner: string;
+			vpos: string;
+			date: string;
+			date_usec: string;
+			premium: string;
+			mail: string;
+			user_id?: string | undefined;
+			no?: string | undefined;
+		};
+	}[]>;
+}, undefined, {
+	chat: {
+		_: string;
+		$: {
+			owner: string;
+			vpos: string;
+			date: string;
+			date_usec: string;
+			premium: string;
+			mail: string;
+			user_id?: string | undefined;
+			no?: string | undefined;
+		};
+	}[];
+}>;
+export type Xml2jsChat = Output<typeof ZXml2jsChat>;
+export declare const ZXml2jsPacket: ObjectSchema<{
 	packet: ObjectSchema<{
 		chat: ArraySchema<ObjectSchema<{
 			_: StringSchema<string>;
@@ -1691,6 +1720,42 @@ declare const ZXml2jsPacket: ObjectSchema<{
 	};
 }>;
 export type Xml2jsPacket = Output<typeof ZXml2jsPacket>;
+export interface IComment {
+	comment: FormattedCommentWithSize;
+	invisible: boolean;
+	index: number;
+	loc: CommentLoc;
+	width: number;
+	long: number;
+	height: number;
+	vpos: number;
+	flash: boolean;
+	posY: number;
+	owner: boolean;
+	layer: number;
+	mail: string[];
+	content: string;
+	image?: IRenderer | null;
+	draw: (vpos: number, showCollision: boolean, cursor?: Position) => void;
+	isHovered: (cursor?: Position, posX?: number, posY?: number) => boolean;
+}
+export interface InputParser {
+	key: string[];
+	parse: (input: unknown) => FormattedComment[];
+}
+export interface IPluginConstructor {
+	id: string;
+	new (Canvas: IRenderer, comments: IComment[]): IPlugin;
+}
+export interface IPlugin {
+	draw?: (vpos: number) => void;
+	addComments?: (comments: IComment[]) => void;
+	transformComments?: (comments: IComment[]) => IComment[];
+}
+export type IPluginList = {
+	instance: IPlugin;
+	canvas: IRenderer;
+}[];
 export declare const ZInputFormatType: UnionSchema<(LiteralSchema<"XMLDocument", "XMLDocument"> | LiteralSchema<"niconicome", "niconicome"> | LiteralSchema<"xml2js", "xml2js"> | LiteralSchema<"formatted", "formatted"> | LiteralSchema<"legacy", "legacy"> | LiteralSchema<"legacyOwner", "legacyOwner"> | LiteralSchema<"owner", "owner"> | LiteralSchema<"v1", "v1"> | LiteralSchema<"empty", "empty"> | LiteralSchema<"default", "default">)[], "default" | "XMLDocument" | "niconicome" | "xml2js" | "formatted" | "legacy" | "legacyOwner" | "owner" | "v1" | "empty">;
 export type InputFormatType = Output<typeof ZInputFormatType>;
 export type InputFormat = XMLDocument | Xml2jsPacket | FormattedComment[] | FormattedLegacyComment[] | RawApiResponse[] | OwnerComment[] | V1Thread[] | string | undefined;
@@ -1709,10 +1774,46 @@ export type BaseOptions = {
 	showFPS: boolean;
 	useLegacy: boolean;
 	video: HTMLVideoElement | undefined;
+	lazy: boolean;
 };
 export type Options = Partial<BaseOptions>;
 export type inputFormatType = InputFormatType;
 export type inputFormat = InputFormat;
+export interface IRenderer {
+	readonly canvas: HTMLCanvasElement;
+	readonly video?: HTMLVideoElement;
+	destroy(): void;
+	drawVideo(enableLegacyPip: boolean): void;
+	getFont(): string;
+	getFillStyle(): string | CanvasGradient | CanvasPattern;
+	setScale(scale: number, arg1?: number): void;
+	fillRect(x: number, y: number, width: number, height: number): void;
+	strokeRect(x: number, y: number, width: number, height: number): void;
+	fillText(text: string, x: number, y: number): void;
+	strokeText(text: string, x: number, y: number): void;
+	quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+	clearRect(x: number, y: number, width: number, height: number): void;
+	setFont(font: string): void;
+	setFillStyle(color: string): void;
+	setStrokeStyle(color: string): void;
+	setLineWidth(width: number): void;
+	setGlobalAlpha(alpha: number): void;
+	setSize(width: number, height: number): void;
+	getSize(): {
+		width: number;
+		height: number;
+	};
+	measureText(text: string): TextMetrics;
+	beginPath(): void;
+	closePath(): void;
+	moveTo(x: number, y: number): void;
+	lineTo(x: number, y: number): void;
+	stroke(): void;
+	save(): void;
+	restore(): void;
+	getCanvas(): IRenderer;
+	drawImage(image: IRenderer, x: number, y: number, width?: number, height?: number): void;
+}
 export type FormattedCommentWithFont = {
 	id: number;
 	vpos: number;
@@ -2615,6 +2716,53 @@ declare const typeGuard: {
 		};
 	};
 	xmlDocument: (i: unknown) => i is XMLDocument;
+	xml2js: {
+		packet: (i: unknown) => i is {
+			packet: {
+				chat: {
+					_: string;
+					$: {
+						owner: string;
+						vpos: string;
+						date: string;
+						date_usec: string;
+						premium: string;
+						mail: string;
+						user_id?: string | undefined;
+						no?: string | undefined;
+					};
+				}[];
+			};
+		};
+		chat: (i: unknown) => i is {
+			chat: {
+				_: string;
+				$: {
+					owner: string;
+					vpos: string;
+					date: string;
+					date_usec: string;
+					premium: string;
+					mail: string;
+					user_id?: string | undefined;
+					no?: string | undefined;
+				};
+			}[];
+		};
+		chatItem: (i: unknown) => i is {
+			_: string;
+			$: {
+				owner: string;
+				vpos: string;
+				date: string;
+				date_usec: string;
+				premium: string;
+				mail: string;
+				user_id?: string | undefined;
+				no?: string | undefined;
+			};
+		};
+	};
 	legacyOwner: {
 		comments: (i: unknown) => i is string;
 	};
@@ -2816,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;
@@ -2869,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;
@@ -2890,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;
@@ -2908,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;
@@ -3013,6 +3167,53 @@ declare class NiconiComments {
 			};
 		};
 		xmlDocument: (i: unknown) => i is XMLDocument;
+		xml2js: {
+			packet: (i: unknown) => i is {
+				packet: {
+					chat: {
+						_: string;
+						$: {
+							owner: string;
+							vpos: string;
+							date: string;
+							date_usec: string;
+							premium: string;
+							mail: string;
+							user_id?: string | undefined;
+							no?: string | undefined;
+						};
+					}[];
+				};
+			};
+			chat: (i: unknown) => i is {
+				chat: {
+					_: string;
+					$: {
+						owner: string;
+						vpos: string;
+						date: string;
+						date_usec: string;
+						premium: string;
+						mail: string;
+						user_id?: string | undefined;
+						no?: string | undefined;
+					};
+				}[];
+			};
+			chatItem: (i: unknown) => i is {
+				_: string;
+				$: {
+					owner: string;
+					vpos: string;
+					date: string;
+					date_usec: string;
+					premium: string;
+					mail: string;
+					user_id?: string | undefined;
+					no?: string | undefined;
+				};
+			};
+		};
 		legacyOwner: {
 			comments: (i: unknown) => i is string;
 		};
@@ -3219,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.68
+  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;
@@ -1509,6 +1510,26 @@
         comments: array(ZV1Comment),
     });
 
+    const ZXml2jsChatItem = object({
+        _: string(),
+        $: object({
+            no: optional(string()),
+            vpos: string(),
+            date: optional(string(), "0"),
+            date_usec: optional(string(), "0"),
+            user_id: optional(string()),
+            owner: optional(string(), ""),
+            premium: optional(string(), ""),
+            mail: optional(string(), ""),
+        }),
+    });
+    const ZXml2jsChat = object({
+        chat: array(ZXml2jsChatItem),
+    });
+    const ZXml2jsPacket = object({
+        packet: ZXml2jsChat,
+    });
+
     const ZInputFormatType = union([
         literal("XMLDocument"),
         literal("niconicome"),
@@ -1674,6 +1695,11 @@
             }
             return true;
         },
+        xml2js: {
+            packet: (i) => is(ZXml2jsPacket, i),
+            chat: (i) => is(ZXml2jsChat, i),
+            chatItem: (i) => is(ZXml2jsChatItem, i),
+        },
         legacyOwner: {
             comments: (i) => is(string([
                 custom((i) => {
@@ -2157,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);
@@ -2179,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 &&
@@ -2230,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;
@@ -2786,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,
@@ -2817,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;
@@ -3041,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();
         }
@@ -3426,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;
@@ -4360,26 +4407,6 @@
     };
     const date2time = (date) => Math.floor(Date.parse(date) / 1000);
 
-    const ZXml2jsChatItem = object({
-        _: string(),
-        $: object({
-            no: optional(string()),
-            vpos: string(),
-            date: optional(string(), "0"),
-            date_usec: optional(string(), "0"),
-            user_id: optional(string()),
-            owner: optional(string(), ""),
-            premium: optional(string(), ""),
-            mail: optional(string(), ""),
-        }),
-    });
-    const ZXml2jsChat = object({
-        chat: array(ZXml2jsChatItem),
-    });
-    const ZXml2jsPacket = object({
-        packet: ZXml2jsChat,
-    });
-
     const Xml2jsParser = {
         key: ["xml2js"],
         parse: (input) => {
@@ -4627,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 = {
@@ -4662,6 +4689,8 @@
         showFPS;
         showCommentCount;
         lastVpos;
+        processedCommentIndex;
+        comments;
         renderer;
         collision;
         timeline;
@@ -4718,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) {
@@ -4726,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 {
@@ -4751,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)];
@@ -4786,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) {
@@ -4862,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.68",
+  "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",