chore: rewrote bottom panel logic
instead of replacing the tool it hides it instead fixes terminal being killed on tool switch
mellbacon committed
May 28, 2024 at 11:19 UTC
bb403b6ee3ef801c7a30fc98377ba87dedb8eab6
5 files changed
+61
-19
src/App.svelte
+1
-1
@@ -134,7 +134,7 @@
134
</Pane>
135
{#if $editortool}
136
<Pane bind:size={bottomPanelSize} maxSize={90} minSize={10} class="view-bottom-pane">
137
- <ToolView content={$editortool.content} name={$editortool.name} options={$editortool.options} buttons={$editortool.buttons}></ToolView>
137
+ <ToolView name={$editortool.name} options={$editortool.options} buttons={$editortool.buttons}></ToolView>
138
</Pane>
139
{/if}
140
</Splitpanes>
src/lib/Notifications/NotificationList.svelte
+6
-1
@@ -1,9 +1,11 @@
1
<script lang="ts">
2
import { notifications } from "./notifications";
3
import Notification from "./Notification.svelte";
4
+
5
+ export let hidden = false;
6
</script>
7
6
-<div id="notifications">
8
+<div id="notifications" class:hidden>
9
{#if $notifications.length == 0}
10
<span class="empty">You have no notifications</span>
11
{:else}
@@ -22,4 +24,7 @@
24
.empty {
25
color: #8c8c8c;
26
}
27
+.hidden {
28
+ display: none;
29
+}
30
</style>
\ No newline at end of file
src/lib/Statusbar.svelte
+47
-10
@@ -40,20 +40,53 @@
40
}
41
</script>
42
<script lang="ts" context="module">
43
- import { writable } from "svelte/store";
43
+ import { get, writable } from "svelte/store";
44
export let showBottomPanel = writable(false);
45
export let externalTerminal = writable(false);
46
- let currentTool = writable(null);
46
+ let lastTool = writable({tool: null, element: null});
47
+ let activeTools: {tool: any, element: any}[] = [];
48
let show = false;
49
49
- export let editortool = writable({name: "", content: null, options: [], buttons: []});
50
+ export let editortool = writable({name: "", options: [], buttons: []});
51
51
- export function toggleBottomPanel(x = null) {
52
- show = !show;
53
- showBottomPanel.set(show);
54
- if (x) {
55
- editortool.set({name: x.name, content: x.content, options: x.options, buttons: x.buttons});
56
- currentTool.set(x.content);
52
+ export function toggleBottomPanel(tool = null) {
53
+ let last = get(lastTool);
54
+ if (tool === last.tool) {
55
+ show = !show;
56
+ showBottomPanel.set(show);
57
+ return;
58
+ }
59
+ if (activeTools.length === 0) {
60
+ let element = new tool.content({target: document.getElementById("toolview-container")});
61
+ lastTool.set({tool: tool, element: element});
62
+ activeTools = [...activeTools, {tool: tool, element: element}];
63
+ show = true;
64
+ showBottomPanel.set(true);
65
+ }
66
+ else {
67
+ let mountedTool = activeTools.find(f => f.tool === tool);
68
+ if (!mountedTool) {
69
+ if (last.element) {
70
+ last.element.$set({hidden: true});
71
+ }
72
+ let element = new tool.content({target: document.getElementById("toolview-container")});
73
+ lastTool.set({tool: tool, element: element});
74
+ activeTools = [...activeTools, {tool: tool, element: element}];
75
+ show = true;
76
+ showBottomPanel.set(true);
77
+ }
78
+ else {
79
+ if (last.element) {
80
+ last.element.$set({hidden: true});
81
+ mountedTool.element.$set({hidden: false});
82
+ lastTool.set(mountedTool);
83
+ showBottomPanel.set(true);
84
+ }
85
+ }
86
+ }
87
+
88
+ if (tool) {
89
+ editortool.set({name: tool.name, options: tool.options, buttons: tool.buttons});
90
}
91
}
92
export function hideBottomPanel() {
@@ -63,7 +96,11 @@
96
export function closeBottomPanel() {
97
show = false;
98
showBottomPanel.set(false);
66
- editortool.set(null);
99
+ let current = activeTools.find(t => t.tool.name === get(editortool).name);
100
+ current.element.$destroy();
101
+ activeTools = activeTools.filter(t => t.tool.name !== get(editortool).name);
102
+ editortool.set({name: "", options: [], buttons: []});
103
+ lastTool.set({tool: null, element: null});
104
}
105
export function setTerminalState(value) {
106
let v = value === true ? true : false;
src/lib/Terminal.svelte
+5
-2
@@ -7,13 +7,13 @@
7
import { spawn, type IPty } from "tauri-pty";
8
9
let terminalElement: HTMLElement;
10
+ export let hidden = false;
11
12
function initializeXterm() {
13
initShell(terminalElement);
14
}
15
16
onMount(async () => {
16
- console.log("mount");
17
initializeXterm();
18
});
19
</script>
@@ -75,11 +75,14 @@ function initShell(terminalElement: HTMLElement) {
75
76
<svelte:window on:resize={fitTerminal}></svelte:window>
77
78
-<div id="terminal" bind:this={terminalElement} />
78
+<div id="terminal" bind:this={terminalElement} class:hidden />
79
80
<style>
81
#terminal {
82
height: 97.5%;
83
width: 100%;
84
}
85
+ .hidden {
86
+ display: none;
87
+ }
88
</style>
src/lib/ToolView.svelte
+2
-5
@@ -3,7 +3,6 @@
3
import Ellipsis from "carbon-icons-svelte/lib/OverflowMenuHorizontal.svelte";
4
import Menu from "./utility/Menu.svelte";
5
6
- export let content = null;
6
export let name = "Tool";
7
export let options = [];
8
export let buttons = [];
@@ -28,9 +27,7 @@
27
<span class="close" title="Hide Panel" on:click={hideBottomPanel}></span>
28
</div>
29
</div>
31
- <div class="toolview-container">
32
- <svelte:component this={content}></svelte:component>
33
- </div>
30
+ <div id="toolview-container"></div>
31
</div>
32
33
<style lang="scss">
@@ -38,7 +35,7 @@
35
height: calc(100% - 37px);
36
width: 100%;
37
}
41
-.toolview-container {
38
+#toolview-container {
39
padding: 8px;
40
height: 100%;
41
}