Better Console resizing

This commit is contained in:
NI
2020-07-26 20:53:05 +08:00
parent 16d142b54d
commit 8361593b4c
2 changed files with 50 additions and 38 deletions

View File

@@ -21,7 +21,7 @@
<div class="screen-console"> <div class="screen-console">
<div <div
class="console-console" class="console-console"
style="top: 0; right: 0; left: 0; bottom: 0; padding 0; margin: 0; z-index: 0; position: absolute; overflow: hidden" style="width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; padding: 0; margin: 0; z-index: 0; position: absolute; overflow: hidden"
:style="'font-family: ' + typeface + ', inherit'" :style="'font-family: ' + typeface + ', inherit'"
> >
<h2 style="display: none;">Console</h2> <h2 style="display: none;">Console</h2>
@@ -219,6 +219,8 @@ class Term {
} }
resizeDelay = setTimeout(() => { resizeDelay = setTimeout(() => {
resizeDelay = null;
if (!isNumber(dim.cols) || !isNumber(dim.rows)) { if (!isNumber(dim.cols) || !isNumber(dim.rows)) {
return; return;
} }
@@ -232,7 +234,6 @@ class Term {
cols: dim.cols, cols: dim.cols,
}); });
resizeDelay = null;
}, resizeDelayInterval); }, resizeDelayInterval);
}); });
} }
@@ -457,6 +458,11 @@ export default {
term: new Term(this.control), term: new Term(this.control),
typeface: termTypeFace, typeface: termTypeFace,
runner: null, runner: null,
eventHandlers: {
resize: null,
keydown: null,
keyup: null,
},
}; };
}, },
watch: { watch: {
@@ -552,16 +558,22 @@ export default {
async init() { async init() {
let self = this; let self = this;
await this.openTerm( self.eventHandlers = {
this.$el.getElementsByClassName("console-console")[0], resize: () => self.fit(),
keyup: e => self.localKeypress(e),
keydown: e => self.localKeypress(e),
};
await self.openTerm(
self.$el.getElementsByClassName("console-console")[0],
{ {
focus(e) { focus(e) {
document.addEventListener("keyup", self.localKeypress); document.addEventListener("keyup", self.eventHandlers.keyup);
document.addEventListener("keydown", self.localKeypress); document.addEventListener("keydown", self.eventHandlers.keydown);
}, },
blur(e) { blur(e) {
document.removeEventListener("keyup", self.localKeypress); document.removeEventListener("keyup", self.eventHandlers.keyup);
document.removeEventListener("keydown", self.localKeypress); document.removeEventListener("keydown", self.eventHandlers.keydown);
}, },
warn(msg, toDismiss) { warn(msg, toDismiss) {
self.$emit("warning", { self.$emit("warning", {
@@ -578,12 +590,14 @@ export default {
} }
); );
if (this.term.destroyed()) { if (self.term.destroyed()) {
return; return;
} }
this.triggerActive(); self.triggerActive();
this.runRunner(); self.runRunner();
self.$nextTick(() => self.eventHandlers.resize());
}, },
async deinit() { async deinit() {
await this.closeRunner(); await this.closeRunner();
@@ -601,14 +615,12 @@ export default {
e.preventDefault(); e.preventDefault();
}, },
activate() { activate() {
window.addEventListener("resize", this.fit); this.eventHandlers.resize();
this.fit();
this.term.focus(); this.term.focus();
window.addEventListener("resize", this.eventHandlers.resize);
}, },
async deactivate() { async deactivate() {
window.removeEventListener("resize", this.fit); window.removeEventListener("resize", this.eventHandlers.resize);
document.removeEventListener("keyup", this.localKeypress);
document.removeEventListener("keydown", this.localKeypress);
this.term.blur(); this.term.blur();
}, },
runRunner() { runRunner() {
@@ -621,11 +633,11 @@ export default {
this.runner = (async () => { this.runner = (async () => {
try { try {
for (;;) { for (;;) {
if (this.term.destroyed()) { if (self.term.destroyed()) {
break; break;
} }
this.term.write(await this.control.receive()); self.term.write(await this.control.receive());
self.$emit("updated"); self.$emit("updated");
} }

View File

@@ -26,7 +26,7 @@
:key="screenInfo.id" :key="screenInfo.id"
:style="'visibility: ' + (screen === idx ? 'visible' : 'hidden')" :style="'visibility: ' + (screen === idx ? 'visible' : 'hidden')"
class="screen" class="screen"
style="top: 0; right: 0; left: 0; bottom: 0; padding 0; margin: 0; overflow: auto; position: absolute;" style="width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; padding: 0; margin: 0; overflow: auto; position: absolute;"
> >
<h1 style="display:none;">Main Interface</h1> <h1 style="display:none;">Main Interface</h1>