Adding internal terminal soon
mellbacon committed
Jan 20, 2023 at 13:29 UTC
b888487589e599efce296923b3c324469abe9fec
3 files changed
+197
package.json
+1
@@ -17,6 +17,7 @@
17
"codemirror": "^6.0.1",
18
"sass": "^1.56.1",
19
"sortablejs": "^1.15.0",
20
+ "svelte-resize-observer": "^2.0.0",
21
"svelte-splitpanes": "^0.7.3",
22
"xterm": "^5.0.0",
23
"xterm-addon-fit": "^0.6.0"
src/components/Terminal/InternalTerminal.svelte
new
+184
@@ -0,0 +1,184 @@
1
+<script>
2
+ import { onMount } from "svelte";
3
+ import {Terminal} from "xterm";
4
+ import {FitAddon} from "xterm-addon-fit";
5
+ import ResizeObserver from "svelte-resize-observer";
6
+ let terminalElement;
7
+ let termFit;
8
+ let terminalController;
9
+ function initializeXterm() {
10
+ terminalController = new Terminal({
11
+ fontSize: 12,
12
+ fontFamily: "Cascadia Mono",
13
+ theme: {
14
+ background: "#161616"
15
+ }
16
+ });
17
+ termFit = new FitAddon();
18
+ terminalController.loadAddon(termFit);
19
+ terminalController.open(terminalElement);
20
+ termFit.fit();
21
+ terminalController.write("C:\\Users\\mello> ");
22
+ }
23
+ onMount(async () => {
24
+ initializeXterm();
25
+ });
26
+ function handleResize() {
27
+ if (termFit) {
28
+ termFit.fit();
29
+ }
30
+ }
31
+</script>
32
+
33
+<div id="terminal" bind:this={terminalElement} />
34
+
35
+<div class="observer">
36
+ <ResizeObserver on:resize={handleResize} />
37
+</div>
38
+
39
+<style>
40
+ #terminal {
41
+ height: 100%;
42
+ }
43
+ .observer {
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ right: 0;
48
+ bottom: 0;
49
+ }
50
+ /* Xterm.css */
51
+ :global(.xterm) {
52
+ cursor: text;
53
+ position: relative;
54
+ user-select: none;
55
+ -ms-user-select: none;
56
+ -webkit-user-select: none;
57
+ height: 100%;
58
+ }
59
+ :global(.xterm.focus),
60
+ :global(.xterm:focus) {
61
+ outline: none;
62
+ }
63
+ :global(.xterm .xterm-helpers) {
64
+ position: absolute;
65
+ top: 0;
66
+ /**
67
+ * The z-index of the helpers must be higher than the canvases in order for
68
+ * IMEs to appear on top.
69
+ */
70
+ z-index: 5;
71
+ }
72
+ :global(.xterm .xterm-helper-textarea) {
73
+ padding: 0;
74
+ border: 0;
75
+ margin: 0;
76
+ /* Move textarea out of the screen to the far left, so that the cursor is not visible */
77
+ position: absolute;
78
+ opacity: 0;
79
+ left: -9999em;
80
+ top: 0;
81
+ width: 0;
82
+ height: 0;
83
+ z-index: -5;
84
+ /** Prevent wrapping so the IME appears against the textarea at the correct position */
85
+ white-space: nowrap;
86
+ overflow: hidden;
87
+ resize: none;
88
+ }
89
+ :global(.xterm .composition-view) {
90
+ /* TODO: Composition position got messed up somewhere */
91
+ background: #000;
92
+ color: #fff;
93
+ display: none;
94
+ position: absolute;
95
+ white-space: nowrap;
96
+ z-index: 1;
97
+ }
98
+ :global(.xterm .composition-view.active) {
99
+ display: block;
100
+ }
101
+ :global(.xterm .xterm-viewport) {
102
+ /* On OS X this is required in order for the scroll bar to appear fully opaque */
103
+ background-color: #000;
104
+ overflow-y: scroll;
105
+ cursor: default;
106
+ position: absolute;
107
+ right: 0;
108
+ left: 0;
109
+ top: 0;
110
+ bottom: 0;
111
+ }
112
+ :global(.xterm .xterm-screen) {
113
+ position: relative;
114
+ }
115
+ :global(.xterm .xterm-screen canvas) {
116
+ position: absolute;
117
+ left: 0;
118
+ top: 0;
119
+ }
120
+ :global(.xterm .xterm-scroll-area) {
121
+ visibility: hidden;
122
+ }
123
+ :global(.xterm-char-measure-element) {
124
+ display: inline-block;
125
+ visibility: hidden;
126
+ position: absolute;
127
+ top: 0;
128
+ left: -9999em;
129
+ line-height: normal;
130
+ }
131
+ :global(.xterm.enable-mouse-events) {
132
+ /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
133
+ cursor: default;
134
+ }
135
+ :global(.xterm.xterm-cursor-pointer),
136
+ :global(.xterm .xterm-cursor-pointer) {
137
+ cursor: pointer;
138
+ }
139
+ :global(.xterm.column-select.focus) {
140
+ /* Column selection mode */
141
+ cursor: crosshair;
142
+ }
143
+ :global(.xterm .xterm-accessibility),
144
+ :global(.xterm .xterm-message) {
145
+ position: absolute;
146
+ left: 0;
147
+ top: 0;
148
+ bottom: 0;
149
+ right: 0;
150
+ z-index: 10;
151
+ color: transparent;
152
+ }
153
+ :global(.xterm .live-region) {
154
+ position: absolute;
155
+ left: -9999px;
156
+ width: 1px;
157
+ height: 1px;
158
+ overflow: hidden;
159
+ }
160
+ :global(.xterm-dim) {
161
+ opacity: 0.5;
162
+ }
163
+ :global(.xterm-underline) {
164
+ text-decoration: underline;
165
+ }
166
+ :global(.xterm-strikethrough) {
167
+ text-decoration: line-through;
168
+ }
169
+ :global(.xterm-screen .xterm-decoration-container .xterm-decoration) {
170
+ z-index: 6;
171
+ position: absolute;
172
+ }
173
+ :global(.xterm-decoration-overview-ruler) {
174
+ z-index: 7;
175
+ position: absolute;
176
+ top: 0;
177
+ right: 0;
178
+ pointer-events: none;
179
+ }
180
+ :global(.xterm-decoration-top) {
181
+ z-index: 2;
182
+ position: relative;
183
+ }
184
+</style>
\ No newline at end of file
yarn.lock
+12
@@ -1419,6 +1419,11 @@ require-from-string@^2.0.2:
1419
resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
1420
integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
1421
1422
+resize-observer-polyfill@^1.5.1:
1423
+ version "1.5.1"
1424
+ resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
1425
+ integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
1426
+
1427
resolve-from@^4.0.0:
1428
version "4.0.0"
1429
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -1665,6 +1670,13 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.7:
1670
sorcery "^0.10.0"
1671
strip-indent "^3.0.0"
1672
1673
+svelte-resize-observer@^2.0.0:
1674
+ version "2.0.0"
1675
+ resolved "https://registry.yarnpkg.com/svelte-resize-observer/-/svelte-resize-observer-2.0.0.tgz#8b48364509e0c0f96d15b0c4a9a33a4ad1b3a0cc"
1676
+ integrity sha512-hMG30MeUFiVhAeAGWoasBGNAFWa/K8mAIvbpjdaYRqNcU5nkxvjZYhzOhQ8rYbHSd2Hflk2s21yFR7CNKEHZpw==
1677
+ dependencies:
1678
+ resize-observer-polyfill "^1.5.1"
1679
+
1680
svelte-splitpanes@^0.7.3:
1681
version "0.7.3"
1682
resolved "https://registry.yarnpkg.com/svelte-splitpanes/-/svelte-splitpanes-0.7.3.tgz#72e6e8f35f472d4a5172865dbee87b5406f32b9b"