Better Console resizing
This commit is contained in:
@@ -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");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user