117 lines
3.6 KiB
Svelte
117 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import {Pane, Splitpanes} from "svelte-splitpanes";
|
|
import XRefTable from "./XRefTable.svelte";
|
|
import PrimitiveView from "./PrimitiveView.svelte";
|
|
import TreeView from "./TreeView.svelte";
|
|
import type FileViewState from "../models/FileViewState.svelte";
|
|
import PageView from "./PageView.svelte";
|
|
import type {PathSelectedEvent} from "../events/PathSelectedEvent";
|
|
import {onMount} from "svelte";
|
|
import NotificationModal from "./NotificationModal.svelte";
|
|
|
|
let {
|
|
fState,
|
|
height,
|
|
}: {
|
|
fState: FileViewState;
|
|
height: number;
|
|
} = $props();
|
|
|
|
let width: number = $state(0);
|
|
let modalWidth = $derived(fState.xRefShowing || fState.notificationsShowing ? 281 : 0);
|
|
let splitPanesWidth: number = $derived(width - modalWidth);
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
// Check for "Alt + Left Arrow"
|
|
if (event.altKey && event.key === "ArrowLeft") {
|
|
fState.popPath();
|
|
}
|
|
}
|
|
|
|
function handleMouseButton(event: MouseEvent) {
|
|
// Check for mouse back button (button 4)
|
|
if (event.button === 3) {
|
|
fState.popPath();
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
window.addEventListener("keydown", handleKeydown);
|
|
window.addEventListener("mousedown", handleMouseButton);
|
|
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeydown);
|
|
window.removeEventListener("mousedown", handleMouseButton);
|
|
};
|
|
});
|
|
|
|
function pathSelectedHandler(event: PathSelectedEvent) {
|
|
fState.selectPathHandler(event);
|
|
}
|
|
</script>
|
|
|
|
<div bind:clientWidth={width} class="file-view-container">
|
|
<div
|
|
class="flex flex-row"
|
|
style="width: {splitPanesWidth}px; height: {height}px"
|
|
>
|
|
<Splitpanes theme="forge-movable" pushOtherPanes={false}>
|
|
<Pane
|
|
size={fState.pageMode || fState.treeMode ? 15 : 0}
|
|
minSize={fState.pageMode || fState.treeMode ? 2 : 0}
|
|
maxSize={fState.pageMode || fState.treeMode ? 100 : 0}
|
|
>
|
|
<TreeView {fState} {height}></TreeView>
|
|
</Pane>
|
|
|
|
<Pane minSize={1}>
|
|
<div class="bg-forge-dark w-full" style="height: {height}px">
|
|
{#if fState.treeMode}
|
|
<PrimitiveView {fState} {height}></PrimitiveView>
|
|
{/if}
|
|
{#if fState.pageMode}
|
|
<PageView {fState} {height}></PageView>
|
|
{/if}
|
|
</div>
|
|
</Pane>
|
|
</Splitpanes>
|
|
</div>
|
|
{#if fState.xRefShowing}
|
|
<div class="xref-modal" class:visible={fState.xRefShowing}>
|
|
<XRefTable {fState} {height}></XRefTable>
|
|
</div>
|
|
{/if}
|
|
{#if fState.notificationsShowing}
|
|
<div class="xref-modal" class:visible={fState.notificationsShowing}>
|
|
<NotificationModal {fState}></NotificationModal>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.file-view-container {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.xref-modal {
|
|
position: absolute;
|
|
border-left: 1px solid var(--border-color);
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 280px;
|
|
background: var(--background-color);
|
|
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
overflow-y: auto;
|
|
transform: translateX(100%);
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.xref-modal.visible {
|
|
transform: translateX(0);
|
|
}
|
|
</style>
|