Spaces:
Running
Running
File size: 3,833 Bytes
9b3539b af53b62 9b3539b 3010d5b af53b62 9b3539b 3010d5b 9b3539b 4767f72 3010d5b 801415b 3010d5b 4767f72 05b0e84 9b3539b 3010d5b 4767f72 3833905 9b3539b 4767f72 ca01fa3 c1a1d02 4767f72 05b0e84 3833905 69ec235 3833905 05b0e84 3833905 69ec235 3833905 05b0e84 9b3539b ca01fa3 3833905 69ec235 ca01fa3 9b3539b fc7156e 3010d5b 9b3539b a18645a 13958a3 3010d5b 9b3539b 32d552c 9b3539b 3833905 767e953 3833905 767e953 3833905 767e953 3833905 767e953 3833905 4133481 3833905 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 116 117 118 119 120 121 122 123 124 |
<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(/_/g, " ")}</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(/_/g, " ")}</span>{/if}
</Handle>
{/each}
</div>
</div>
<style>
.error {
background: #ffdddd;
padding: 8px;
font-size: 12px;
}
.title-icon {
margin-left: 5px;
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: oklch(75% 0.2 55);
font-weight: bold;
padding: 8px;
}
.handle-name {
font-size: 10px;
color: black;
letter-spacing: 0.05em;
text-align: right;
white-space: nowrap;
position: absolute;
top: -5px;
backdrop-filter: blur(10px);
padding: 2px 8px;
border-radius: 4px;
visibility: hidden;
}
:global(.left) .handle-name {
right: 20px;
}
:global(.right) .handle-name {
left: 20px;
}
:global(.top) .handle-name,
:global(.bottom) .handle-name {
top: -5px;
left: 5px;
backdrop-filter: none;
}
.node-container:hover .handle-name {
visibility: visible;
}
</style>
|