Spaces:
Running
Running
File size: 2,935 Bytes
9b3539b af53b62 9b3539b 3010d5b af53b62 9b3539b 3010d5b 9b3539b 4767f72 3010d5b 4767f72 a06b506 9b3539b 3010d5b 4767f72 ca01fa3 9b3539b 4767f72 ca01fa3 c1a1d02 4767f72 a06b506 9b3539b ca01fa3 9b3539b fc7156e 3010d5b 9b3539b a18645a 9d53329 3010d5b 9b3539b 4767f72 9b3539b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<script lang="ts">
import { Handle, type NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps;
export let nodeStyle = '';
export let containerStyle = '';
export let id: $$Props['id']; id;
export let data: $$Props['data'];
export let dragHandle: $$Props['dragHandle'] = undefined; dragHandle;
export let type: $$Props['type'] = undefined; type;
export let selected: $$Props['selected'] = undefined; selected;
export let isConnectable: $$Props['isConnectable'] = undefined; isConnectable;
export let zIndex: $$Props['zIndex'] = undefined; zIndex;
export let width: $$Props['width'] = undefined; width;
export let height: $$Props['height'] = undefined; height;
export let dragging: $$Props['dragging']; dragging;
export let targetPosition: $$Props['targetPosition'] = undefined; targetPosition;
export let sourcePosition: $$Props['sourcePosition'] = undefined; sourcePosition;
export let positionAbsoluteX: $$Props['positionAbsoluteX'] = undefined; positionAbsoluteX;
export let positionAbsoluteY: $$Props['positionAbsoluteY'] = undefined; positionAbsoluteY;
export let onToggle = () => {};
let expanded = true;
function titleClicked() {
expanded = !expanded;
onToggle({ expanded });
}
function asPx(n: number) {
return n ? n + 'px' : undefined;
}
$: inputs = Object.entries(data.inputs || {});
$: outputs = Object.entries(data.outputs || {});
const handleOffsetDirection = { top: 'left', bottom: 'left', left: 'top', right: 'top' };
</script>
<div class="node-container" style:width={asPx(width)} style:height={asPx(height)} style={containerStyle}>
<div class="lynxkite-node" style={nodeStyle}>
<div class="title" on:click={titleClicked}>
{data.title}
{#if data.error}<span class="error-sign">⚠️</span>{/if}
</div>
{#if expanded}
{#if data.error}
<div class="error">{data.error}</div>
{/if}
<slot />
{/if}
{#each inputs as [name, input], i}
<Handle
id={name} type="target" position={targetPosition || 'left'}
style="{handleOffsetDirection[targetPosition || 'left']}: {100 * (i + 1) / (inputs.length + 1)}%" />
{/each}
{#each outputs as [name, output], i}
<Handle
id={name} type="source" position={sourcePosition || 'right'}
style="{handleOffsetDirection[sourcePosition || 'right']}: {100 * (i + 1) / (outputs.length + 1)}%" />
{/each}
</div>
</div>
<style>
.error {
background: #ffdddd;
padding: 8px;
font-size: 12px;
}
.error-sign {
float: right;
}
.node-container {
padding: 8px;
min-width: 200px;
max-width: 400px;
max-height: 400px;
}
.lynxkite-node {
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
background: white;
overflow-y: auto;
border-radius: 1px;
height: 100%;
}
.title {
background: #ff8800;
font-weight: bold;
padding: 8px;
}
</style>
|