37 lines
1.3 KiB
Svelte
37 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import RenderedPageView from "./RenderedPageView.svelte";
|
|
import {Pane, Splitpanes} from "svelte-splitpanes";
|
|
import {PageViewState} from "../models/PageViewState.svelte";
|
|
import type FileViewState from "../models/FileViewState.svelte";
|
|
import StreamEditor from "./StreamEditor.svelte";
|
|
import ContentModel from "../models/ContentModel.svelte";
|
|
|
|
let {fState, height}: {fState: FileViewState, height: number} = $props();
|
|
let state: PageViewState = new PageViewState(fState, render);
|
|
let contents: ContentModel | undefined = $derived(state?.contents)
|
|
let display: HTMLCanvasElement;
|
|
fState.pageViewState = state;
|
|
|
|
function render() {
|
|
console.log("render", display)
|
|
state.loadImage(display);
|
|
}
|
|
|
|
</script>
|
|
{#if state}
|
|
<Splitpanes theme="forge-movable">
|
|
<Pane minSize={1}>
|
|
<div class="overflow-hidden">
|
|
<StreamEditor save={(newData) => state.handleSave(newData)} stream_data={contents ? contents.toDisplay() : ""} height={height - 1}></StreamEditor>
|
|
</div>
|
|
</Pane>
|
|
<Pane minSize={1}>
|
|
<RenderedPageView bind:img={display} {height}></RenderedPageView>
|
|
</Pane>
|
|
</Splitpanes>
|
|
{:else }
|
|
<h1>Please select a Page!</h1>
|
|
{/if}
|
|
<style lang="postcss">
|
|
|
|
</style> |