66 lines
1.6 KiB
Svelte
66 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { Pane, Splitpanes } from 'svelte-splitpanes';
|
|
import type FileViewState from '../models/FileViewState.svelte';
|
|
import ContentModel from '../models/ContentModel.svelte';
|
|
import type DocumentWorker from '../models/Document.svelte';
|
|
import ContentEditor from './ContentEditor.svelte';
|
|
import ZoomableContainer from './ZoomableContainer.svelte';
|
|
|
|
let display: HTMLCanvasElement;
|
|
|
|
let { fState, height }: { fState: FileViewState, height: number } = $props();
|
|
let renderer: DocumentWorker = $derived(fState.document);
|
|
let pageNum = $derived(fState.currentPageNumber);
|
|
let contents: ContentModel | undefined = $state(undefined);
|
|
|
|
$effect(() => {
|
|
refresh();
|
|
});
|
|
|
|
function refresh() {
|
|
if (pageNum) {
|
|
renderer.getContents(pageNum).then(parts => {
|
|
contents = parts;
|
|
renderer.renderPage(pageNum, display);
|
|
}
|
|
);
|
|
} else {
|
|
contents = undefined;
|
|
}
|
|
}
|
|
|
|
async function update(newData: string) {
|
|
if (pageNum) {
|
|
await fState.document.updateContents(pageNum, newData);
|
|
refresh();
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
{#if pageNum}
|
|
<Splitpanes theme="forge-movable">
|
|
<Pane minSize={1}>
|
|
<div class="overflow-hidden">
|
|
{#if contents}
|
|
<ContentEditor save={(newData) => update(newData)} contents={contents} height={height - 1}></ContentEditor>
|
|
{/if}
|
|
</div>
|
|
</Pane>
|
|
<Pane minSize={1}>
|
|
<ZoomableContainer bind:canvas={display} {height}></ZoomableContainer>
|
|
</Pane>
|
|
</Splitpanes>
|
|
{:else }
|
|
<h1>Please select a Page!</h1>
|
|
{/if}
|
|
<style lang="postcss">
|
|
.scroller {
|
|
@apply w-full h-full bg-forge-dark;
|
|
overflow: auto;
|
|
display: flex;
|
|
}
|
|
.container {
|
|
display: contents;
|
|
}
|
|
</style> |