102 lines
2.3 KiB
Svelte
102 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import type ComfyApp from "./ComfyApp";
|
|
import DropZone from "./DropZone.svelte";
|
|
import interfaceState from "$lib/stores/interfaceState";
|
|
import workflowState from "$lib/stores/workflowState";
|
|
import uiState from '$lib/stores/uiState';
|
|
import ComfyGraphErrorList from "$lib/components/ComfyGraphErrorList.svelte"
|
|
|
|
export let app: ComfyApp;
|
|
|
|
let canvas: HTMLCanvasElement;
|
|
|
|
onMount(async () => {
|
|
if (app?.lCanvas) {
|
|
canvas = app.lCanvas.canvas;
|
|
app.lCanvas?.setCanvas(canvas)
|
|
}
|
|
})
|
|
|
|
function doRecenter(): void {
|
|
app?.lCanvas?.recenter();
|
|
}
|
|
|
|
function clearErrors(): void {
|
|
$uiState.activeError = null;
|
|
}
|
|
</script>
|
|
|
|
<div class="wrapper litegraph">
|
|
<div class="canvas-wrapper pane-wrapper">
|
|
<canvas bind:this={canvas} id="graph-canvas" />
|
|
<DropZone {app} />
|
|
</div>
|
|
<div class="bar">
|
|
<span class="left">
|
|
<button disabled={$interfaceState.graphTransitioning} on:click={doRecenter}>Recenter</button>
|
|
{#if $uiState.activeError != null}
|
|
<button disabled={$interfaceState.graphTransitioning} on:click={clearErrors}>Clear Errors</button>
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
{#if $uiState.activeError && app?.lCanvas?.activeErrors != null}
|
|
<ComfyGraphErrorList {app} errors={app.lCanvas.activeErrors} />
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
$bar-height: 3em;
|
|
|
|
.wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.canvas-wrapper {
|
|
width: 100%;
|
|
height: calc(100% - $bar-height);
|
|
background-color: #333;
|
|
}
|
|
|
|
.bar {
|
|
padding: 0.2em 0.5em;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: $bar-height;
|
|
background-color: #3A3A3A;
|
|
border: 2px solid #2A2A2A;
|
|
gap: var(--layout-gap);
|
|
margin-top: auto;
|
|
overflow-x: auto;
|
|
|
|
> .left {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
> .right {
|
|
margin-left: auto
|
|
}
|
|
|
|
button {
|
|
color: #EEE;
|
|
border: 1px solid #888;
|
|
padding: 2px 5px;
|
|
background-color: #666;
|
|
|
|
&:hover {
|
|
background-color: #999;
|
|
border-color: #AAA;
|
|
}
|
|
&:active {
|
|
background-color: #555;
|
|
border-color: #777;
|
|
}
|
|
&:disabled {
|
|
opacity: 50%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|