idan/sshwifty-udp-telnet-http
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Further resolve the Window resizing problem. Should work better now

Browse Source
This commit is contained in:
NI
2020-07-28 22:26:06 +08:00
parent 89aebf9181
commit 9e1e592bf3
6 changed files with 171 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
ui/app.js
View File

@@ -50,6 +50,7 @@ const mainTemplate = `
:commands="commands"
:preset-data="presetData.presets"
:restricted-to-presets="presetData.restricted"
:view-port="viewPort"
@navigate-to="changeURLHash"
@tab-opened="tabOpened"
@tab-closed="tabClosed"
@@ -76,7 +77,7 @@ function startApp(rootEl) {
components: {
loading: Loading,
auth: Auth,
home: Home
home: Home,
},
data() {
return {
@@ -94,17 +95,32 @@ function startApp(rootEl) {
key: "",
presetData: {
presets: new Presets([]),
restricted: false
restricted: false,
},
authErr: "",
loadErr: "",
socket: null,
controls: new Controls([
new telnetctl.Telnet(uiControlColor),
new sshctl.SSH(uiControlColor)
new sshctl.SSH(uiControlColor),
]),
commands: new Commands([new telnet.Command(), new ssh.Command()]),
tabUpdateIndicator: null
tabUpdateIndicator: null,
viewPort: {
dim: {
width: 0,
height: 0,
renew(width, height) {
this.width = width;
this.height = height;
},
},
},
viewPortUpdaters: {
width: 0,
height: 0,
dimResizer: null,
},
};
},
watch: {
@@ -117,10 +133,29 @@ function startApp(rootEl) {
this.isErrored()
? document.body.classList.add("app-error")
: document.body.classList.remove("app-error");
}
},
},
mounted() {
this.tryInitialAuth();
const self = this;
self.tryInitialAuth();
self.viewPortUpdaters.dimResizer = () => {
self.viewPortUpdaters.height = window.innerHeight;
self.viewPortUpdaters.width = window.innerWidth;
self.$nextTick(() => {
self.viewPort.dim.renew(
self.viewPortUpdaters.width,
self.viewPortUpdaters.height
);
});
};
window.addEventListener("resize", self.viewPortUpdaters.dimResizer);
},
beforeDestroy() {
window.removeEventListener("resize", self.viewPortUpdaters.dimResizer);
},
methods: {
changeTitleInfo(newTitleInfo) {
@@ -169,7 +204,7 @@ function startApp(rootEl) {
executeHomeApp(authResult, key) {
this.presetData = {
presets: new Presets(JSON.parse(authResult.data)),
restricted: authResult.onlyAllowPresetRemotes
restricted: authResult.onlyAllowPresetRemotes,
};
this.socket = this.buildSocket(
key,
@@ -225,7 +260,7 @@ function startApp(rootEl) {
}
return result.key;
}
},
});
break;
@@ -262,7 +297,9 @@ function startApp(rootEl) {
: await this.getSocketAuthKey(privateKey, this.key);
let h = await xhr.get(socksVerificationInterface, {
"X-Key": authKey ? btoa(String.fromCharCode.apply(null, authKey)) : ""
"X-Key": authKey
? btoa(String.fromCharCode.apply(null, authKey))
: "",
});
let serverDate = h.getResponseHeader("Date");
@@ -275,7 +312,7 @@ function startApp(rootEl) {
date: serverDate ? new Date(serverDate) : null,
data: h.responseText,
onlyAllowPresetRemotes:
h.getResponseHeader("X-OnlyAllowPresetRemotes") === "yes"
h.getResponseHeader("X-OnlyAllowPresetRemotes") === "yes",
};
},
async submitAuth(passphrase) {
@@ -290,7 +327,7 @@ function startApp(rootEl) {
data: passphrase,
fetch() {
return this.data;
}
},
});
break;
@@ -344,8 +381,8 @@ function startApp(rootEl) {
this.tabUpdateIndicator = null;
this.updateTabTitleInfo(tabs, false);
}, updateIndicatorMaxDisplayTime);
}
}
},
},
});
}
@@ -360,11 +397,11 @@ function initializeClient() {
console.log("Currently in Development environment");
}
window.addEventListener("unhandledrejection", function(e) {
window.addEventListener("unhandledrejection", function (e) {
console.error("Error:", e);
});
window.addEventListener("error", function(e) {
window.addEventListener("error", function (e) {
console.error("Error:", e);
});

77
ui/home.vue
View File

@@ -39,7 +39,7 @@
href="javascript:;"
:class="{
working: connector.inputting,
intensify: connector.inputting && !windows.connect
intensify: connector.inputting && !windows.connect,
}"
@click="showConnectWindow"
></a>
@@ -61,6 +61,7 @@
id="home-content"
:screen="tab.current"
:screens="tab.tabs"
:view-port="viewPort"
@stopped="tabStopped"
@warning="tabWarning"
@info="tabInfo"
@@ -176,47 +177,41 @@ export default {
connector: Connector,
tabs: Tabs,
"tab-window": TabWindow,
screens: Screens
screens: Screens,
},
props: {
hostPath: {
type: String,
default: ""
default: "",
},
query: {
type: String,
default: ""
default: "",
},
connection: {
type: Object,
default: () => {
return null;
}
default: () => null,
},
controls: {
type: Object,
default: () => {
return null;
}
default: () => null,
},
commands: {
type: Object,
default: () => {
return null;
}
default: () => null,
},
presetData: {
type: Object,
default: () => {
return new presets.Presets([]);
}
default: () => new presets.Presets([]),
},
restrictedToPresets: {
type: Boolean,
default: () => {
return false;
}
}
default: () => false,
},
viewPort: {
type: Object,
default: () => null,
},
},
data() {
let history = home_history.build(this);
@@ -226,7 +221,7 @@ export default {
windows: {
delay: false,
connect: false,
tabs: false
tabs: false,
},
socket: home_socket.build(this),
connector: {
@@ -236,14 +231,14 @@ export default {
inputting: false,
acquired: false,
busy: false,
knowns: history.all()
knowns: history.all(),
},
presets: this.commands.mergePresets(this.presetData),
tab: {
current: -1,
lastID: 0,
tabs: []
}
tabs: [],
},
};
},
mounted() {
@@ -252,7 +247,7 @@ export default {
}, 1000);
if (this.query.length > 1 && this.query.indexOf("+") === 0) {
this.connectLaunch(this.query.slice(1, this.query.length), success => {
this.connectLaunch(this.query.slice(1, this.query.length), (success) => {
if (!success) {
return;
}
@@ -324,7 +319,7 @@ export default {
this.connector.busy = true;
this.getStreamThenRun(
stream => {
(stream) => {
this.connector.busy = false;
callback(stream);
@@ -338,7 +333,7 @@ export default {
connectNew(connector) {
const self = this;
self.runConnect(stream => {
self.runConnect((stream) => {
self.connector.connector = {
id: connector.id(),
name: connector.name(),
@@ -350,7 +345,7 @@ export default {
presets.emptyPreset(),
null,
() => {}
)
),
};
self.connector.inputting = true;
@@ -359,7 +354,7 @@ export default {
connectPreset(preset) {
const self = this;
self.runConnect(stream => {
self.runConnect((stream) => {
self.connector.connector = {
id: preset.command.id(),
name: preset.command.name(),
@@ -371,7 +366,7 @@ export default {
preset.preset,
null,
() => {}
)
),
};
self.connector.inputting = true;
@@ -393,7 +388,7 @@ export default {
connectKnown(known) {
const self = this;
self.runConnect(stream => {
self.runConnect((stream) => {
let connector = self.getConnectorByType(known.type);
if (!connector) {
@@ -417,7 +412,7 @@ export default {
() => {
self.connector.knowns = self.connector.historyRec.all();
}
)
),
};
self.connector.inputting = true;
@@ -433,13 +428,13 @@ export default {
return {
type: ll.slice(0, llSeparatorIdx),
query: ll.slice(llSeparatorIdx + 1, ll.length)
query: ll.slice(llSeparatorIdx + 1, ll.length),
};
},
connectLaunch(launcher, done) {
this.showConnectWindow();
this.runConnect(stream => {
this.runConnect((stream) => {
let ll = this.parseConnectLauncher(launcher),
connector = this.getConnectorByType(ll.type);
@@ -462,12 +457,12 @@ export default {
this.controls,
this.connector.historyRec,
ll.query,
n => {
(n) => {
self.connector.knowns = self.connector.historyRec.all();
done(n.data().success);
}
)
),
};
this.connector.inputting = true;
@@ -525,11 +520,11 @@ export default {
indicator: {
level: "",
message: "",
updated: false
updated: false,
},
status: {
closing: false
}
closing: false,
},
}) - 1
);
},
@@ -612,7 +607,7 @@ export default {
this.$emit("tab-updated", this.tab.tabs);
this.tab.tabs[index].indicator.updated = index !== this.tab.current;
}
}
},
},
};
</script>

12
ui/widgets/screen_console.css
View File

@@ -37,6 +37,7 @@
#home-content > .screen > .screen-screen > .screen-console {
position: relative;
min-height: 1px;
}
#home-content > .screen > .screen-screen > .screen-console > .console-toolbar {
@@ -50,6 +51,7 @@
background: #222;
color: #fff;
box-shadow: 0 0 5px #0006;
z-index: 1;
}
#home-content
@@ -190,11 +192,13 @@
}
#home-content > .screen > .screen-screen > .screen-console > .console-console {
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
color: #fff;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
z-index: 0;
}
#home-content

37
ui/widgets/screen_console.vue
View File

@@ -21,7 +21,6 @@
<div class="screen-console">
<div
class="console-console"
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'"
>
<h2 style="display: none;">Console</h2>
@@ -233,7 +232,6 @@ class Term {
rows: dim.rows,
cols: dim.cols,
});
}, resizeDelayInterval);
});
}
@@ -280,16 +278,6 @@ class Term {
}
});
this.term.element.addEventListener("click", () => {
if (this.closed) {
return;
}
this.term.textarea.blur();
this.term.textarea.click();
this.term.textarea.focus();
});
this.refit();
}
@@ -451,6 +439,10 @@ export default {
type: Boolean,
default: false,
},
viewPort: {
type: Object,
default: () => null,
},
},
data() {
return {
@@ -459,7 +451,6 @@ export default {
typeface: termTypeFace,
runner: null,
eventHandlers: {
resize: null,
keydown: null,
keyup: null,
},
@@ -479,6 +470,16 @@ export default {
},
deep: true,
},
viewPort: {
handler() {
if (!this.active) {
return;
}
this.fit();
},
deep: true,
},
},
async mounted() {
await this.init();
@@ -559,9 +560,8 @@ export default {
let self = this;
self.eventHandlers = {
resize: () => self.fit(),
keyup: e => self.localKeypress(e),
keydown: e => self.localKeypress(e),
keyup: (e) => self.localKeypress(e),
keydown: (e) => self.localKeypress(e),
};
await self.openTerm(
@@ -596,8 +596,6 @@ export default {
self.triggerActive();
self.runRunner();
self.$nextTick(() => self.eventHandlers.resize());
},
async deinit() {
await this.closeRunner();
@@ -615,12 +613,9 @@ export default {
e.preventDefault();
},
activate() {
this.eventHandlers.resize();
this.term.focus();
window.addEventListener("resize", this.eventHandlers.resize);
},
async deactivate() {
window.removeEventListener("resize", this.eventHandlers.resize);
this.term.blur();
},
runRunner() {

21
ui/widgets/screens.css
View File

@@ -19,11 +19,17 @@
@charset "utf-8";
#home-content.active {
min-height: 0;
}
#home-content > .screen {
display: flex;
justify-content: top;
justify-content: start;
flex-direction: column;
font-size: 1em;
overflow: hidden;
flex: auto;
}
#home-content > .screen > .screen-error {
@@ -49,4 +55,17 @@
#home-content > .screen > .screen-screen {
flex: auto;
padding: 0;
margin: 0;
position: relative;
min-height: 0;
}
#home-content > .screen > .screen-screen > .screen-content {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
}

26
ui/widgets/screens.vue
View File

@@ -18,7 +18,7 @@
-->
<template>
<main style="position: relative">
<main :class="{ active: screens.length > 0 }">
<slot v-if="screens.length <= 0"></slot>
<div
@@ -26,9 +26,8 @@
:key="screenInfo.id"
:style="'visibility: ' + (screen === idx ? 'visible' : 'hidden')"
class="screen"
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>
<div
v-if="screenInfo.indicator.message.length > 0"
@@ -38,15 +37,16 @@
{{ screenInfo.indicator.message }}
</div>
<div class="screen-screen" style="position: relative">
<div class="screen-screen">
<component
:is="getComponent(screenInfo.ui)"
:active="screen === idx"
:control="screenInfo.control"
:change="screenInfo.indicator"
:toolbar="screenInfo.toolbar"
:view-port="viewPort"
:style="'background-color: ' + screenInfo.control.activeColor()"
style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; position: absolute; overflow: hidden"
class="screen-content"
@stopped="stopped(idx, $event)"
@warning="warning(idx, $event)"
@info="info(idx, $event)"
@@ -64,17 +64,21 @@ import "./screens.css";
export default {
components: {
ConsoleScreen
ConsoleScreen,
},
props: {
screen: {
type: Number,
default: 0
default: 0,
},
screens: {
type: Array,
default: () => []
}
default: () => [],
},
viewPort: {
type: Object,
default: () => [],
},
},
methods: {
getComponent(ui) {
@@ -97,7 +101,7 @@ export default {
},
updated(index) {
this.$emit("updated", index);
}
}
},
},
};
</script>