Skip to content

Commit 60bb628

Browse files
realandygithubrealandygithub
committed
after merge
2 parents beb14e0 + e86dc6b commit 60bb628

File tree

7 files changed

+1297
-92
lines changed

7 files changed

+1297
-92
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
"electron-rebuild": "^3.2.7",
6767
"electron-reload": "^1.5.0",
6868
"electron-squirrel-startup": "^1.0.0",
69+
"electron-tooltip": "^1.1.5",
6970
"estree-walker": "^3.0.1",
7071
"monaco-editor": "^0.32.1",
7172
"monaco-languageclient": "^0.13.0",

‎public/svelte.css

+1,169-1
Large diffs are not rendered by default.

‎src/App.svelte

+106-87
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,8 @@
1111
let value = "";
1212
let submit = false;
1313
14-
//Testing code for window resize
15-
1614
onMount(async () => {
17-
//==========BEGINNING - WORKING CODE FOR RESIZING DOM ELEMENTS USING DIVIDERS===========//
15+
//ST-2022-RJ==========BEGINNING - WORKING CODE FOR RESIZING DOM ELEMENTS USING DIVIDERS===========//
1816
let upperPanel = document.getElementById("wrapper-upper");
1917
let editorPanel = document.getElementById("editor-window");
2018
let filedirPanel = document.getElementById("file-dir");
@@ -44,83 +42,80 @@
4442
filedirPanel.style.width =
4543
parseInt(getComputedStyle(filedirPanel).width) - dx + "px"; //Resizing width of edit panel
4644
} else if (panel === "statemgr-divider") {
47-
// statemgrPanel.style.width = (parseInt(getComputedStyle(statemgrPanel).width) - dx) + "px"; //Resizing width of edit panel
45+
statemgrPanel.style.width =
46+
parseInt(getComputedStyle(statemgrPanel).width) - dx + "px"; //Resizing width of edit panel
4847
// statemgrPanel.style.width = 500 + "px"; //Direct resize works but not with dragging---think it may be related to xterm sizing...
49-
} else {
5048
}
51-
//Update mousedown coordinates for next resizing event (curor moves again while mouse is down)
52-
mdown_posx = e.x;
53-
mdown_posy = e.y;
54-
}
5549
56-
function chgCursor(e, panel) {
57-
if (panel === "horizontal-divider") {
58-
e.target.style.cursor = "row-resize";
59-
} else {
60-
e.target.style.cursor = "col-resize";
50+
function chgCursor(e, panel) {
51+
if (panel === "horizontal-divider") {
52+
e.target.style.cursor = "row-resize";
53+
} else {
54+
e.target.style.cursor = "col-resize";
55+
}
6156
}
62-
}
6357
64-
function dragStart(e, panel) {
65-
e.preventDefault(); //stop selection of text during mouse move / mouse down event
58+
function dragStart(e, panel) {
59+
e.preventDefault(); //stop selection of text during mouse move / mouse down event
6660
67-
//Need this so window events continue tracking on top of iframe
68-
let iframeList = document.getElementsByClassName("webpage");
69-
for (const item of iframeList) {
70-
item.setAttribute("style", "pointer-events: none");
71-
}
72-
//defining function here so can remove event listener (unable to remove it with parameters - here it'll have closure access to panel)
73-
const trackMouseMove = (e) => {
74-
// console.log(`ex: ${e.x}`)
75-
dragMovement(e, panel);
76-
};
77-
78-
const trackMouseUp = (e) => {
79-
// console.log('Mouse Up');
80-
dragEnd(e, panel);
81-
window.removeEventListener("mousemove", trackMouseMove, true);
82-
window.removeEventListener("mouseup", trackMouseUp, true);
83-
84-
//Removing no pointer events from iframes on mouse up
61+
//Need this so window events continue tracking on top of iframe
8562
let iframeList = document.getElementsByClassName("webpage");
8663
for (const item of iframeList) {
87-
item.setAttribute("style", "");
64+
item.setAttribute("style", "pointer-events: none");
65+
}
66+
//defining function here so can remove event listener (unable to remove it with parameters - here it'll have closure access to panel)
67+
const trackMouseMove = (e) => {
68+
// console.log(`ex: ${e.x}`)
69+
dragMovement(e, panel);
70+
};
71+
72+
const trackMouseUp = (e) => {
73+
// console.log('Mouse Up');
74+
dragEnd(e, panel);
75+
window.removeEventListener("mousemove", trackMouseMove, true);
76+
window.removeEventListener("mouseup", trackMouseUp, true);
77+
78+
//Removing no pointer events from iframes on mouse up
79+
let iframeList = document.getElementsByClassName("webpage");
80+
for (const item of iframeList) {
81+
item.setAttribute("style", "");
82+
}
83+
};
84+
window.addEventListener("mousemove", trackMouseMove, true);
85+
window.addEventListener("mouseup", trackMouseUp, true);
86+
87+
if (panel === "horizontal-divider") {
88+
mdown_posy = e.y;
89+
resizeObj[panel].isResizing = true;
90+
} else {
91+
mdown_posx = e.x;
92+
resizeObj[panel].isResizing = true;
8893
}
89-
};
90-
window.addEventListener("mousemove", trackMouseMove, true);
91-
window.addEventListener("mouseup", trackMouseUp, true);
92-
93-
if (panel === "horizontal-divider") {
94-
mdown_posy = e.y;
95-
resizeObj[panel].isResizing = true;
96-
} else {
97-
mdown_posx = e.x;
98-
resizeObj[panel].isResizing = true;
9994
}
100-
}
10195
102-
function dragMovement(e, panel) {
103-
e.preventDefault(); //stop selection of text during mouse move / mouse down event
104-
x_pos = e.x;
105-
y_pos = e.y;
106-
107-
if (panel === "horizontal-divider") {
108-
if (resizeObj[panel].isResizing === true) {
109-
resize(e, "horizontal-divider");
110-
}
111-
} else if (panel === "editor-divider") {
112-
if (resizeObj[panel].isResizing === true) {
113-
resize(e, "editor-divider");
96+
function dragMovement(e, panel) {
97+
e.preventDefault(); //stop selection of text during mouse move / mouse down event
98+
x_pos = e.x;
99+
y_pos = e.y;
100+
101+
if (panel === "horizontal-divider") {
102+
if (resizeObj[panel].isResizing === true) {
103+
resize(e, "horizontal-divider");
104+
}
105+
} else if (panel === "editor-divider") {
106+
if (resizeObj[panel].isResizing === true) {
107+
resize(e, "editor-divider");
108+
}
109+
} else if (panel === "filedir-divider") {
110+
if (resizeObj[panel].isResizing === true) {
111+
resize(e, "filedir-divider");
112+
}
113+
} else if (panel === "statemgr-divider") {
114+
if (resizeObj[panel].isResizing === true) {
115+
resize(e, "statemgr-divider");
116+
}
117+
} else {
114118
}
115-
} else if (panel === "filedir-divider") {
116-
if (resizeObj[panel].isResizing === true) {
117-
resize(e, "filedir-divider");
118-
}
119-
} else if (panel === "statemgr-divider") {
120-
if (resizeObj[panel].isResizing === true) {
121-
resize(e, "statemgr-divider");
122-
}
123-
} else {
124119
}
125120
}
126121
@@ -148,21 +143,38 @@
148143
dragStart(e, "editor-divider")
149144
);
150145
151-
filedirDivider.addEventListener("mouseover", (e) =>
152-
chgCursor(e, "filedir-divider")
153-
);
154-
filedirDivider.addEventListener("mousedown", (e) =>
155-
dragStart(e, "filedir-divider")
156-
);
157-
158-
statemgrDivider.addEventListener("mouseover", (e) =>
159-
chgCursor(e, "statemgr-divider")
160-
);
161-
statemgrDivider.addEventListener("mousedown", (e) =>
162-
dragStart(e, "statemgr-divider")
163-
);
146+
function dragEnd(e, panel) {
147+
e.preventDefault(); //stop selection of text during mouse move / mouse down event
148+
resizeObj[panel].isResizing = false;
149+
}
164150
165151
//==========END - WORKING CODE FOR RESIZING DOM ELEMENTS USING DIVIDERS===========//
152+
153+
//ST-2022-RJ Setting xterm layers to have 100% width so risizing able to be dynamic - overwriting default styles onMount and
154+
function xtermRestyle(className) {
155+
let domElement = document.getElementsByClassName(className);
156+
for (const item of domElement) {
157+
let currentStyle = item.getAttribute("style").split(";"); //Array of each style attribute string
158+
for (let i = 0; i < currentStyle.length; i++) {
159+
const style = currentStyle[i];
160+
console.log(style.indexOf("width"));
161+
if (style.indexOf("width") !== -1) currentStyle[i] = "width: 100%";
162+
}
163+
item.setAttribute("style", currentStyle.join(";"));
164+
}
165+
}
166+
167+
function xtermSetWidth() {
168+
xtermRestyle("xterm-screen");
169+
xtermRestyle("xterm-text-layer");
170+
xtermRestyle("xterm-selection-layer");
171+
xtermRestyle("xterm-link-layer");
172+
xtermRestyle("xterm-cursor-layer");
173+
}
174+
175+
xtermSetWidth();
176+
//Need to trigger this after resize so that it follows xterm's fittaddon resize
177+
window.addEventListener("resize", xtermSetWidth);
166178
}); //End of onMount
167179
168180
const handleSubmit = () => {
@@ -247,7 +259,7 @@
247259
}
248260
249261
.wrapper-upper {
250-
height: 65%;
262+
height: 80%;
251263
display: flex;
252264
flex-direction: row;
253265
width: 98%;
@@ -260,7 +272,7 @@
260272
}
261273
.wrapper-bottom {
262274
min-height: 1%;
263-
height: 35%;
275+
height: 20%;
264276
flex-grow: 1;
265277
display: flex;
266278
flex-direction: row;
@@ -308,8 +320,10 @@
308320
font-size: 10px;
309321
overflow: auto;
310322
/* resize: horizontal; */
323+
max-width: 30%;
311324
width: 12.5%;
312325
min-width: 12.5%;
326+
min-width: 1%;
313327
/* max-width: 30%; */
314328
background-color: #070a0f;
315329
border-right: 1px solid #3d3d3d;
@@ -329,8 +343,11 @@
329343
/* State Management Window - SvelteTeam */
330344
.c {
331345
overflow: auto;
332-
width: 14.8%;
333-
min-width: 10%;
346+
max-width: 30.4%;
347+
width: 12.8%;
348+
/* min-width: 12.8%; */
349+
min-width: 1%;
350+
/* background-color: rgba(28, 28, 36, 0.678); */
334351
background-color: #070a0f;
335352
border-right: 1px solid #3d3d3d;
336353
padding: 0;
@@ -358,8 +375,10 @@
358375
/* Terminal Window - SvelteTeam */
359376
.e {
360377
font: white;
361-
/* overflow: auto; */
362-
width: 100%;
378+
overflow: auto;
379+
/* width: 100%; */
380+
flex-grow: 1;
381+
/* background-color: rgba(35, 35, 65, 0.452); */
363382
background-color: #0d1117;
364383
}
365384

‎src/CodeEditor/Editor.svelte

+12-1
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,11 @@
162162
<span
163163
class="delete-button"
164164
value={tab.tabId}
165+
innerText="x"
165166
on:click={(value) => deleteTab(tab.tabId)}
166-
/>
167+
>
168+
X
169+
</span>
167170
</span>
168171
</li>
169172
{/each}
@@ -241,8 +244,16 @@
241244
/* margin-bottom: 0; */
242245
}
243246
.delete-button {
247+
height: 10px;
248+
width: 10px;
244249
margin-left: 5px;
250+
padding-bottom: 4px;
245251
border-right: black;
246252
border-left: black;
253+
color: rgb(90, 90, 90);
254+
}
255+
256+
.delete-button:hover {
257+
color: #f1f1f1;
247258
}
248259
</style>

‎src/XTerm.svelte

+2
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@
5151
ipcRenderer.on("terminal-incData", (event, data) => {
5252
term.write(data);
5353
});
54+
55+
5456
});
5557
5658
//2022-ST-AJ listens to resize event and invokes fitAddOn on the go. Otherwise terminal will not resize.

‎src/application-menu.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ const createApplicationMenu = () => {
190190
{
191191
label: 'Visit the SvelteStorm Website',
192192
click(focusedWindow) {
193-
if(focusedWindow) require('electron').shell.openExternal('http://www.svelte-storm.com')
193+
if(focusedWindow) require('electron').shell.openExternal('https://svelte-storm.com/')
194194
}
195195
},
196196
{

‎src/xterm.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
/* height: 1000px; */
1313
}
1414

15+
#xterm {
16+
flex-grow: 1;
17+
}
18+
1519
.terminal {
1620
width: 100%;
1721
}
@@ -65,6 +69,7 @@
6569
display: block;
6670
}
6771

72+
/* RJ separating xterm-viewport out */
6873
.xterm .xterm-viewport {
6974
/* On OS X this is required in order for the scroll bar to appear fully opaque */
7075
background-color: rgba(35, 35, 65, 0.452);
@@ -88,7 +93,6 @@
8893

8994
.xterm .xterm-screen canvas {
9095
width: 100%;
91-
/*RJ Testing 100% instead of 200% */
9296
z-index: 1;
9397
background-color: rgba(20, 20, 51, 0.452);
9498
opacity: 0.5;
@@ -154,4 +158,4 @@
154158

155159
.xterm-underline {
156160
text-decoration: underline;
157-
}
161+
}

0 commit comments

Comments
 (0)