Skip to content

Commit 9604016

Browse files
JSJediJSJedi
authored
Merge pull request #7 from JSJedi/window-resize
Window resize
2 parents 3cf580d + 2eb896d commit 9604016

File tree

4 files changed

+200
-37
lines changed

4 files changed

+200
-37
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@
7272
"node-abi": "^3.8.0",
7373
"node-pty": "^0.10.1",
7474
"npm-check-updates": "^12.2.1",
75-
"svelte-watch-resize": "^1.0.3",
7675
"vscode-json-languageservice": "^4.2.0",
7776
"xterm": "^4.18.0",
7877
"xterm-addon-fit": "^0.5.0"

‎public/index.html

+19-16
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset='utf-8'>
5-
<meta name='viewport' content='width=device-width'>
6-
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"/>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<meta
7+
http-equiv="Content-Security-Policy"
8+
content="script-src 'self' 'unsafe-inline'"
9+
/>
710

8-
<title>SvelteStorm</title>
11+
<title>SvelteStorm</title>
912

10-
<link rel='icon' type='image/png' href='./favicon.png'>
11-
<link rel='stylesheet' href='./global.css'>
12-
<link rel='stylesheet' href='./svelte.css'>
13+
<link rel="icon" type="image/png" href="./favicon.png" />
14+
<link rel="stylesheet" href="./global.css" />
15+
<link rel="stylesheet" href="./svelte.css" />
1316

14-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
15-
rel="stylesheet">
17+
<link
18+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
19+
rel="stylesheet"
20+
/>
21+
<script type="module" src="./svelte.js"></script>
22+
</head>
1623

17-
<script type="module" src='./svelte.js'></script>
18-
</head>
19-
20-
<body>
21-
</body>
24+
<body></body>
2225
</html>

‎public/svelte.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.svelte

+180-19
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,140 @@
33
import XTerm from "./XTerm.svelte";
44
import Editor from "./CodeEditor/Editor.svelte";
55
import StateManager from "./StateManager/StateManager.svelte";
6+
import { onMount } from "svelte";
7+
68
export let orientation = "columns";
79
export let localhost;
8-
10+
911
let value = "";
1012
let submit = false;
1113
14+
//Testing code for window resize
15+
16+
17+
onMount(async () => {
18+
19+
//==========BEGINNING - WORKING CODE FOR RESIZING DOM ELEMENTS USING DIVIDERS===========//
20+
let upperPanel = document.getElementById('wrapper-upper');
21+
let editorPanel = document.getElementById('editor-window');
22+
let filedirPanel = document.getElementById('file-dir');
23+
let statemgrPanel = document.getElementById('state-mgr');
24+
let mdown_posx;
25+
let mdown_posy;
26+
let x_pos;
27+
let y_pos;
28+
let resizeObj = {'horizontal-divider': {isResizing: false},
29+
'editor-divider': {isResizing: false},
30+
'filedir-divider': {isResizing: false},
31+
'statemgr-divider': {isResizing: false}
32+
};
33+
34+
function resize(e, panel){
35+
const dx = mdown_posx - e.x; //difference in x coordinates (current mouse position versus where mousedown began)
36+
const dy = mdown_posy - e.y;
37+
38+
if (panel === 'horizontal-divider') {
39+
upperPanel.style.height = (parseInt(getComputedStyle(upperPanel).height) - dy) + "px";
40+
} else if (panel === 'editor-divider') {
41+
editorPanel.style.width = (parseInt(getComputedStyle(editorPanel).width) - dx) + "px"; //Resizing width of edit panel
42+
} else if (panel === 'filedir-divider') {
43+
filedirPanel.style.width = (parseInt(getComputedStyle(filedirPanel).width) - dx) + "px"; //Resizing width of edit panel
44+
} else if (panel === 'statemgr-divider') {
45+
// statemgrPanel.style.width = (parseInt(getComputedStyle(statemgrPanel).width) - dx) + "px"; //Resizing width of edit panel
46+
// statemgrPanel.style.width = 500 + "px"; //Direct resize works but not with dragging---think it may be related to xterm sizing...
47+
}
48+
else {
49+
}
50+
//Update mousedown coordinates for next resizing event (curor moves again while mouse is down)
51+
mdown_posx = e.x;
52+
mdown_posy = e.y;
53+
}
54+
55+
function chgCursor (e, panel) {
56+
if (panel === 'horizontal-divider') {
57+
e.target.style.cursor = 'row-resize';
58+
} else {
59+
e.target.style.cursor = 'col-resize';
60+
}
61+
}
62+
63+
function dragStart (e, panel) {
64+
e.preventDefault(); //stop selection of text during mouse move / mouse down event
65+
if (panel === 'horizontal-divider') {
66+
mdown_posy = e.y;
67+
resizeObj[panel].isResizing = true;
68+
} else {
69+
mdown_posx = e.x;
70+
resizeObj[panel].isResizing = true;
71+
}
72+
}
73+
74+
function dragMovement (e, panel) {
75+
e.preventDefault(); //stop selection of text during mouse move / mouse down event
76+
x_pos = e.x;
77+
y_pos = e.y;
78+
if (panel === 'horizontal-divider'){
79+
if (resizeObj[panel].isResizing === true) {
80+
resize(e, 'horizontal-divider');
81+
}
82+
}
83+
else if (panel === 'editor-divider'){
84+
if (resizeObj[panel].isResizing === true) {
85+
resize(e, 'editor-divider');
86+
}
87+
}
88+
else if (panel === 'filedir-divider'){
89+
if (resizeObj[panel].isResizing === true) {
90+
resize(e, 'filedir-divider');
91+
}
92+
}
93+
else if (panel === 'statemgr-divider'){
94+
if (resizeObj[panel].isResizing === true) {
95+
resize(e, 'statemgr-divider');
96+
}
97+
}
98+
else {
99+
}
100+
};
101+
102+
function dragEnd (e, panel) {
103+
e.preventDefault(); //stop selection of text during mouse move / mouse down event
104+
resizeObj[panel].isResizing = false;
105+
}
106+
107+
108+
let horizDivider = document.getElementById('horizontal-divider');
109+
let editorDivider = document.getElementById('editor-divider');
110+
let filedirDivider = document.getElementById('filedir-divider');
111+
let statemgrDivider = document.getElementById('statemgr-divider');
112+
113+
horizDivider.addEventListener('mouseover', (e) => chgCursor(e, 'horizontal-divider'));
114+
horizDivider.addEventListener('mousedown', (e) => dragStart(e, 'horizontal-divider'));
115+
horizDivider.addEventListener('mousemove', (e) => dragMovement(e, 'horizontal-divider'));
116+
horizDivider.addEventListener('mouseleave', (e) => dragEnd(e, 'horizontal-divider'));
117+
horizDivider.addEventListener('mouseup', (e) => dragEnd(e, 'horizontal-divider'));
118+
119+
editorDivider.addEventListener('mouseover', (e) => chgCursor(e, 'editor-divider'));
120+
editorDivider.addEventListener('mousedown', (e) => dragStart(e, 'editor-divider'));
121+
editorDivider.addEventListener('mousemove', (e) => dragMovement(e, 'editor-divider'));
122+
editorDivider.addEventListener('mouseleave', (e) => dragEnd(e, 'editor-divider'));
123+
editorDivider.addEventListener('mouseup', (e) => dragEnd(e, 'editor-divider'));
124+
125+
filedirDivider.addEventListener('mouseover', (e) => chgCursor(e, 'filedir-divider'));
126+
filedirDivider.addEventListener('mousedown', (e) => dragStart(e, 'filedir-divider'));
127+
filedirDivider.addEventListener('mousemove', (e) => dragMovement(e, 'filedir-divider'));
128+
filedirDivider.addEventListener('mouseleave', (e) => dragEnd(e, 'filedir-divider'));
129+
filedirDivider.addEventListener('mouseup', (e) => dragEnd(e, 'filedir-divider'));
130+
131+
statemgrDivider.addEventListener('mouseover', (e) => chgCursor(e, 'statemgr-divider'));
132+
statemgrDivider.addEventListener('mousedown', (e) => dragStart(e, 'statemgr-divider'));
133+
statemgrDivider.addEventListener('mousemove', (e) => dragMovement(e, 'statemgr-divider'));
134+
statemgrDivider.addEventListener('mouseleave', (e) => dragEnd(e, 'statemgr-divider'));
135+
statemgrDivider.addEventListener('mouseup', (e) => dragEnd(e, 'statemgr-divider'));
136+
//==========END - WORKING CODE FOR RESIZING DOM ELEMENTS USING DIVIDERS===========//
137+
}); //End of onMount
138+
139+
12140
const handleSubmit = () => {
13141
submit = false;
14142
return false;
@@ -29,14 +157,18 @@
29157

30158
<body class:orientation>
31159
<main class="wrapper">
32-
<div class="box wrapper-upper">
33-
<div class="box a target">
160+
<div class="box wrapper-upper" id="wrapper-upper">
161+
<div class="box a target" id="file-dir">
34162
<FileDir />
35163
</div>
36-
<div class="box b">
164+
<div id="filedir-divider" />
165+
<div class="box b" id="editor-window">
37166
<!-- svelte-ignore missing-declaration -->
38-
<Editor class="childClass" />
167+
<div class="editor-wrapper">
168+
<Editor class="childClass" />
169+
</div>
39170
</div>
171+
<div id="editor-divider" />
40172
<div class="box d root">
41173
<form class="render-wrapper" on:submit|preventDefault={handleSubmit}>
42174
<input
@@ -51,18 +183,18 @@
51183
</form>
52184
</div>
53185
</div>
54-
<div class="middle-separator" />
186+
<div id="horizontal-divider" />
55187
<div class="box wrapper-bottom">
56-
<div class="box c root">
188+
<div class="box c root" id="state-mgr">
57189
<StateManager />
58190
</div>
59-
<div class="box e">
191+
<div id="statemgr-divider" />
192+
<div class="box e" id="terminal-window">
60193
<XTerm />
61194
</div>
62195
</div>
63196
</main>
64197
</body>
65-
66198
<style>
67199
body {
68200
height: 100%;
@@ -79,18 +211,30 @@
79211
color: #444;
80212
}
81213
214+
.editor-wrapper {
215+
height: 100%;
216+
width: 100%;
217+
z-index: 1;
218+
/* display: flex;
219+
flex-direction: column;
220+
background-color: rgb(39, 38, 38);
221+
color: #444; */
222+
}
223+
82224
.wrapper-upper {
83225
height: 65%;
84226
display: flex;
85227
flex-direction: row;
86228
width: 98%;
87-
resize: vertical;
229+
/* resize: vertical; */
88230
overflow: auto;
89231
background-color: rgb(39, 38, 38);
90232
color: #444;
233+
padding: 5px;
234+
z-index:0;
91235
}
92236
.wrapper-bottom {
93-
min-height: 10%;
237+
min-height: 1%;
94238
height: 35%;
95239
flex-grow: 1;
96240
display: flex;
@@ -107,8 +251,25 @@
107251
height: 100%;
108252
}
109253
110-
.middle-separator {
111-
padding: 2px;
254+
/*Dividers used for resizing events*/
255+
#horizontal-divider {
256+
width:100%;
257+
height: 10px;
258+
}
259+
260+
#filedir-divider {
261+
height:100%;
262+
width: 10px;
263+
}
264+
265+
#editor-divider {
266+
height:100%;
267+
width: 10px;
268+
}
269+
270+
#statemgr-divider {
271+
height:100%;
272+
width: 10px;
112273
}
113274
114275
.box {
@@ -121,11 +282,10 @@
121282
.a {
122283
font-size: 10px;
123284
overflow: auto;
124-
resize: horizontal;
285+
/* resize: horizontal; */
125286
width: 10%;
126287
min-width: 10%;
127288
max-width: 30%;
128-
padding: 0;
129289
background-color: rgba(28, 28, 36, 0.678);
130290
border-right: 1px solid #3d3d3d;
131291
border-bottom: 1px solid #3d3d3d;
@@ -135,15 +295,16 @@
135295
.b {
136296
overflow: auto;
137297
width: 45%;
138-
resize: horizontal;
298+
/* resize: horizontal; */
139299
background-color: rgba(35, 35, 65, 0.452);
140300
border-bottom: 1px solid #3d3d3d;
141301
border-right: 1px solid #3d3d3d;
302+
padding-right: 5px;
142303
}
143304
/* State Management Window - SvelteTeam */
144305
.c {
145306
overflow: auto;
146-
width: 10%;
307+
width: 11.8%;
147308
min-width: 10%;
148309
background-color: rgba(28, 28, 36, 0.678);
149310
border-right: 1px solid #3d3d3d;
@@ -152,7 +313,7 @@
152313
153314
/* Browser Render Window - SvelteTeam */
154315
.d {
155-
min-width: 30%;
316+
min-width: 1%;
156317
flex-direction: column;
157318
flex-grow: 1; /*Let render window take up remaining space in the flexbox */
158319
padding: 0px;
@@ -181,7 +342,7 @@
181342
.webpage {
182343
overflow: auto;
183344
/* resize: vertical; */
184-
height: 100%;
345+
height: 98%;
185346
width: 98%;
186347
}
187348

0 commit comments

Comments
 (0)