load()}
onzoom={z => pz.zoomTo(z)}
onfit={fit}
/>
{#if showNotice}
The canvas is not optimized for mobile yet. It works best on a larger screen.
{/if}
{#each boxes as box (box.id ?? '__none')}
startZoneDrag(box, header, e)} />
{/each}
{#each frames as frame, i (i)}
{/each}
{#each shapes.filter(s => s.link.label) as shape (shape.link.id)}
{/each}
{#each graph?.nodes || [] as node (node.id)}
startCardDrag(node.id, card, e)}
onconnect={(e, port) => startConnect(node.id, port, e)}
onselect={() => select({ kind: 'node', id: node.id })}
onhover={on => hoverCard(node.id, on)}
/>
{/each}
{#each shapes as shape (shape.link.id)}
{#each [shape.from, shape.to] as at, i (i)}
{/each}
{/each}
{#if error || empty}
{#if error}
Could not load the canvas
{error}
{:else}
{connectView ? text.empty : ds.empty ? ds.empty : serverView ? 'No resources on this server yet' : 'No resources in this environment yet'}
{#if ds.new}
Add resource
{/if}
{/if}
{/if}
{#if graph && (panelNode || panelLink)}
{#key `${selected.kind}:${selected.id}`}
{/key}
{/if}
{#if toastMessage}
{toastMessage.text}
{/if}