Fixed the server log scroll bar on server handler switching

This commit is contained in:
WolverinDEV 2020-09-26 22:57:53 +02:00
parent 6fc3ac4c14
commit cd392ec54f
3 changed files with 25 additions and 7 deletions

View file

@ -332,5 +332,6 @@ export interface ServerLogUIEvents {
}, },
"notify_log_add": { "notify_log_add": {
event: LogMessage event: LogMessage
} },
"notify_show": {}
} }

View file

@ -71,13 +71,19 @@ export const ServerLogRenderer = (props: { events: Registry<ServerLogUIEvents>,
setRevision(revision + 1); setRevision(revision + 1);
}); });
useEffect(() => { const fixScroll = () => {
const id = requestAnimationFrame(() => { if(!refContainer.current)
if(!refContainer.current) return;
return;
refContainer.current.scrollTop = scrollOffset.current === "bottom" ? refContainer.current.scrollHeight : scrollOffset.current; refContainer.current.scrollTop = scrollOffset.current === "bottom" ? refContainer.current.scrollHeight : scrollOffset.current;
}); };
props.events.reactUse("notify_show", () => {
requestAnimationFrame(fixScroll);
});
useEffect(() => {
const id = requestAnimationFrame(fixScroll);
return () => cancelAnimationFrame(id); return () => cancelAnimationFrame(id);
}); });

View file

@ -14,6 +14,8 @@ let uniqueLogEventId = 0;
export class ServerEventLog { export class ServerEventLog {
private readonly connection: ConnectionHandler; private readonly connection: ConnectionHandler;
private readonly uiEvents: Registry<ServerLogUIEvents>; private readonly uiEvents: Registry<ServerLogUIEvents>;
private readonly listenerHandlerVisibilityChanged;
private htmlTag: HTMLDivElement; private htmlTag: HTMLDivElement;
private maxHistoryLength: number = 100; private maxHistoryLength: number = 100;
@ -31,6 +33,12 @@ export class ServerEventLog {
}); });
ReactDOM.render(<ServerLogRenderer events={this.uiEvents} handlerId={this.connection.handlerId} />, this.htmlTag); ReactDOM.render(<ServerLogRenderer events={this.uiEvents} handlerId={this.connection.handlerId} />, this.htmlTag);
this.connection.events().on("notify_visibility_changed", this.listenerHandlerVisibilityChanged =event => {
if(event.visible) {
this.uiEvents.fire("notify_show");
}
});
} }
log<T extends keyof TypeInfo>(type: T, data: TypeInfo[T]) { log<T extends keyof TypeInfo>(type: T, data: TypeInfo[T]) {
@ -70,6 +78,9 @@ export class ServerEventLog {
this.htmlTag = undefined; this.htmlTag = undefined;
} }
this.connection.events().off(this.listenerHandlerVisibilityChanged);
this.eventLog = undefined; this.eventLog = undefined;
this.uiEvents.destroy();
} }
} }