Spaces:
Running
Running
File size: 3,632 Bytes
9b3539b af53b62 9b3539b 3010d5b af53b62 9b3539b 3010d5b 9b3539b 4767f72 3010d5b b7a4f8b 3010d5b 4767f72 a06b506 9b3539b 3010d5b 4767f72 52ec402 9b3539b 4767f72 ca01fa3 c1a1d02 4767f72 a06b506 52ec402 a06b506 52ec402 a06b506 9b3539b ca01fa3 52ec402 ca01fa3 9b3539b fc7156e 3010d5b 9b3539b a18645a 111a829 3010d5b 9b3539b 4767f72 9b3539b 52ec402 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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
<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 | undefined) {
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="title-icon">⚠️</span>{/if}
{#if !expanded}<span class="title-icon">⋯</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)}%">
{#if inputs.length>1}<span class="handle-name">{name.replace("_", " ")}</span>{/if}
</Handle>
{/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)}%">
{#if outputs.length>1}<span class="handle-name">{name.replace("_", " ")}</span>{/if}
</Handle>
{/each}
</div>
</div>
<style>
.error {
background: #ffdddd;
padding: 8px;
font-size: 12px;
}
.title-icon {
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: 4px;
height: 100%;
}
.title {
background: #ff8800;
font-weight: bold;
padding: 8px;
}
.handle-name {
font-size: 12px;
color: #840;
text-align: right;
white-space: nowrap;
position: absolute;
top: -5px;
-webkit-text-stroke: 5px white;
paint-order: stroke fill;
visibility: hidden;
}
:global(.left) .handle-name {
right: 15px;
}
:global(.right) .handle-name {
left: 15px;
}
.node-container:hover .handle-name {
visibility: visible;
}
</style>
|