dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Nano zoom fix #11

Browse Source
This commit is contained in:
LukeGus
2024-12-05 19:34:17 -06:00
parent 848b388734
commit 7b545367dc
6 changed files with 214 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

137
.idea/workspace.xml generated Normal file
View File

@@ -0,0 +1,137 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="8497df64-d86b-4c98-ac58-c157d9d3fb1e" name="Changes" comment="Nano zoom fix #12">
<change beforePath="$PROJECT_DIR$/frontend/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/App.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/App.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="Git.Settings">
<option name="RECENT_BRANCH_BY_REPOSITORY">
<map>
<entry key="$PROJECT_DIR$" value="alpha-1.0" />
</map>
</option>
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="GitHubPullRequestSearchHistory">{
&quot;lastFilter&quot;: {}
}</component>
<component name="GithubPullRequestsUISettings">{
&quot;selectedUrlAndAccountId&quot;: {
&quot;url&quot;: &quot;https://github.com/LukeGus/ssh-project.git&quot;,
&quot;accountId&quot;: &quot;f04977d4-c3b2-400a-9c9b-d5b445f8a970&quot;
}
}</component>
<component name="ProjectColorInfo">{
&quot;associatedIndex&quot;: 8
}</component>
<component name="ProjectId" id="2pojjnjB8kTL4lo1P2No1yvZp4c" />
<component name="ProjectLevelVcsManager" settingsEditedManually="true">
<ConfirmationsSetting value="1" id="Add" />
</component>
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
&quot;Shell Script.Node Server.js Start.executor&quot;: &quot;Run&quot;,
&quot;Shell Script.Run backend and frontend.executor&quot;: &quot;Run&quot;,
&quot;Shell Script.run_backend_frontend.executor&quot;: &quot;Run&quot;,
&quot;git-widget-placeholder&quot;: &quot;alpha-1.0&quot;,
&quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
&quot;last_opened_file_path&quot;: &quot;D:/Programming Projects/SSH-Project-JB&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;npm.run_start.executor&quot;: &quot;Run&quot;,
&quot;npm.run_start_frontend.executor&quot;: &quot;Run&quot;,
&quot;npm.run_start_node_backend.executor&quot;: &quot;Run&quot;,
&quot;npm.run_start_vite.executor&quot;: &quot;Run&quot;,
&quot;npm.start.executor&quot;: &quot;Run&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}</component>
<component name="RunManager" selected="Shell Script.run_backend_frontend">
<configuration name="run_backend_frontend" type="ShConfigurationType">
<option name="SCRIPT_TEXT" value="Start-Process &quot;powershell&quot; -ArgumentList &quot;-NoProfile&quot;, &quot;-Command npm run start-vite&quot;; Start-Process &quot;powershell&quot; -ArgumentList &quot;-NoProfile&quot;, &quot;-Command npm run start-server&quot; " />
<option name="INDEPENDENT_SCRIPT_PATH" value="false" />
<option name="SCRIPT_PATH" value="C:/Windows/System32/WindowsPowerShell/v1.0/powershell.exe" />
<option name="SCRIPT_OPTIONS" value="" />
<option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="false" />
<option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$/frontend" />
<option name="INDEPENDENT_INTERPRETER_PATH" value="false" />
<option name="INTERPRETER_PATH" value="C:/Windows/System32/WindowsPowerShell/v1.0/powershell.exe" />
<option name="INTERPRETER_OPTIONS" value="" />
<option name="EXECUTE_IN_TERMINAL" value="false" />
<option name="EXECUTE_SCRIPT_FILE" value="false" />
<envs />
<method v="2" />
</configuration>
<configuration name="run_start_frontend" type="js.build_tools.npm">
<package-json value="$PROJECT_DIR$/frontend/package.json" />
<command value="start" />
<node-interpreter value="project" />
<envs />
<EXTENSION ID="com.intellij.lang.javascript.buildTools.npm.rc.StartBrowserRunConfigurationExtension">
<browser name="a7bb68e0-33c0-4d6f-a81a-aac1fdb870c8" start="true" url="http://localhost:8080" />
</EXTENSION>
<method v="2" />
</configuration>
<list>
<item itemvalue="npm.run_start_frontend" />
<item itemvalue="Shell Script.run_backend_frontend" />
</list>
</component>
<component name="SharedIndexes">
<attachedChunks>
<set>
<option value="bundled-js-predefined-d6986cc7102b-deb605915726-JavaScript-WS-243.22562.112" />
</set>
</attachedChunks>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="8497df64-d86b-4c98-ac58-c157d9d3fb1e" name="Changes" comment="" />
<created>1733439468142</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1733439468142</updated>
<workItem from="1733439479708" duration="5489000" />
<workItem from="1733448523969" duration="279000" />
</task>
<task id="LOCAL-00001" summary="Nano zoom fix #11">
<option name="closed" value="true" />
<created>1733447944692</created>
<option name="number" value="00001" />
<option name="presentableId" value="LOCAL-00001" />
<option name="project" value="LOCAL" />
<updated>1733447944692</updated>
</task>
<option name="localTasksCounter" value="2" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
<component name="VcsManagerConfiguration">
<MESSAGE value="Nano zoom fix #11" />
<MESSAGE value="Nano zoom fix #12" />
<option name="LAST_COMMIT_MESSAGE" value="Nano zoom fix #12" />
</component>
</project>

2
frontend/package.json
View File

@@ -24,7 +24,7 @@
},
"scripts": {
"start-vite": "cross-env BROWSER=none WDS_SOCKET_PORT=0 vite --port 8080",
"start-server": "node 'D:/Programming Projects/SSH-Project/ssh-project/backend/server.js'",
"start-server": "node ./start.js",
"start": "npm run start-vite && npm run start-server",
"build": "vite build",
"preview": "vite preview",

122
frontend/src/App.jsx
View File

@@ -14,24 +14,26 @@ const App = () => {
const [password, setPassword] = useState('');
const [isConnected, setIsConnected] = useState(false);
const [isSideBarHidden, setIsSideBarHidden] = useState(false);
const [zoomFactor, setZoomFactor] = useState(1); // This will control zoom
useEffect(() => {
// Initialize the terminal and the fit addon
console.log('Initializing terminal...');
terminal.current = new Terminal({
cursorBlink: true,
theme: {
background: '#1e1e1e',
foreground: '#ffffff',
},
theme: { background: '#1e1e1e', foreground: '#ffffff' },
macOptionIsMeta: true,
allowProposedApi: true,
fontSize: 14, // Start with a default font size
fontSize: 14, // Set the default font size initially
});
fitAddon.current = new FitAddon();
terminal.current.loadAddon(fitAddon.current);
terminal.current.open(terminalRef.current);
if (terminalRef.current) {
terminal.current.open(terminalRef.current);
console.log('Terminal opened successfully.');
} else {
console.error('Terminal reference is not valid!');
}
terminal.current.onData((data) => {
if (socket.current && socket.current.readyState === WebSocket.OPEN) {
@@ -39,40 +41,24 @@ const App = () => {
}
});
// Resize terminal to fit the container initially
const resizeTerminal = () => {
if (terminalRef.current) {
fitAddon.current.fit();
adjustZoom(); // Adjust zoom whenever the terminal resizes
notifyServerOfResize();
}
};
// Adjust the zoom factor based on the terminal container size
const adjustZoom = () => {
const containerHeight = terminalRef.current.offsetHeight;
const containerWidth = terminalRef.current.offsetWidth;
// Adjust zoom based on container size
const newZoomFactor = Math.max(0.5, Math.min(2, containerHeight / 300)); // Adjust this logic as needed
if (zoomFactor !== newZoomFactor) {
setZoomFactor(newZoomFactor);
terminal.current.setOption('fontSize', 14 * newZoomFactor); // Use setOption instead of setFontSize
}
};
// Notify the server of terminal resize
const notifyServerOfResize = () => {
if (socket.current && socket.current.readyState === WebSocket.OPEN) {
const { rows, cols } = terminal.current;
socket.current.send(
JSON.stringify({
type: 'resize',
rows,
cols,
height: terminalRef.current.offsetHeight,
width: terminalRef.current.offsetWidth,
})
JSON.stringify({
type: 'resize',
rows,
cols,
height: terminalRef.current.offsetHeight,
width: terminalRef.current.offsetWidth,
})
);
}
};
@@ -87,29 +73,35 @@ const App = () => {
}
window.removeEventListener('resize', resizeTerminal);
};
}, [zoomFactor]); // Re-run when zoomFactor changes
}, []);
const handleConnect = () => {
console.log('Connecting...');
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}/ws/`;
console.log(`WebSocket URL: ${wsUrl}`);
socket.current = new WebSocket(wsUrl);
socket.current.onopen = () => {
console.log('WebSocket connection opened');
terminal.current.writeln(`Connected to WebSocket server at ${wsUrl}`);
socket.current.send(JSON.stringify({ host, username, password }));
setIsConnected(true);
};
socket.current.onmessage = (event) => {
console.log('Received message:', event.data);
terminal.current.write(event.data);
};
socket.current.onerror = (error) => {
console.error('WebSocket error:', error);
terminal.current.writeln(`WebSocket error: ${error.message}`);
};
socket.current.onclose = () => {
console.log('WebSocket connection closed');
terminal.current.writeln('Disconnected from WebSocket server.');
setIsConnected(false);
};
@@ -125,46 +117,46 @@ const App = () => {
setTimeout(() => {
fitAddon.current.fit();
notifyServerOfResize();
}, 100); // Delay to ensure layout updates before resize
}, 100);
}
};
return (
<div className="app-container">
<div className="main-content">
<div className={`sidebar ${isSideBarHidden ? 'hidden' : ''}`}>
<h2>Connection Details</h2>
<input
type="text"
placeholder="Host"
value={host}
onChange={(e) => handleInputChange(e, setHost)}
/>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => handleInputChange(e, setUsername)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => handleInputChange(e, setPassword)}
/>
<button onClick={handleConnect} disabled={isConnected}>
{isConnected ? 'Connected' : 'Start Session'}
</button>
<div className="app-container">
<div className="main-content">
<div className={`sidebar ${isSideBarHidden ? 'hidden' : ''}`}>
<h2>Connection Details</h2>
<input
type="text"
placeholder="Host"
value={host}
onChange={(e) => handleInputChange(e, setHost)}
/>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => handleInputChange(e, setUsername)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => handleInputChange(e, setPassword)}
/>
<button onClick={handleConnect} disabled={isConnected}>
{isConnected ? 'Connected' : 'Start Session'}
</button>
</div>
<div ref={terminalRef} className="terminal-container"></div>
</div>
<div ref={terminalRef} className="terminal-container"></div>
<button className="hide-sidebar-button" onClick={handleSideBarHiding}>
{isSideBarHidden ? '+' : '-'}
</button>
</div>
<button className="hide-sidebar-button" onClick={handleSideBarHiding}>
{isSideBarHidden ? '+' : '-'}
</button>
</div>
);
};
export default App;
export default App;

12
frontend/start.js Normal file
View File

@@ -0,0 +1,12 @@
// start.js
const { spawn } = require('child_process');
const child = spawn('node', ["\"D:/Programming Projects/SSH-Project-JB/backend/server.js\""], {
stdio: 'inherit', // this is key for interactivity
shell: true, // use system shell
});
child.on('exit', function (code, signal) {
console.log('child process exited with ' +
`code ${code} and signal ${signal}`);
});

2
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "ssh-project",
"name": "SSH-Project-JB",
"lockfileVersion": 2,
"requires": true,
"packages": {