Fixed the server log scroll bar on server handler switching
This commit is contained in:
parent
6fc3ac4c14
commit
cd392ec54f
3 changed files with 25 additions and 7 deletions
|
@ -332,5 +332,6 @@ export interface ServerLogUIEvents {
|
||||||
},
|
},
|
||||||
"notify_log_add": {
|
"notify_log_add": {
|
||||||
event: LogMessage
|
event: LogMessage
|
||||||
}
|
},
|
||||||
|
"notify_show": {}
|
||||||
}
|
}
|
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Add table
Reference in a new issue