1ea544e765
All checks were successful
Deploy to GitHub Pages / build_site (push) Successful in 3m33s
105 lines
2.4 KiB
Svelte
105 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import type { NodeDefinition, NodeRegistry } from "@nodarium/types";
|
|
import { onMount } from "svelte";
|
|
|
|
let mx = $state(0);
|
|
let my = $state(0);
|
|
|
|
let node: NodeDefinition | undefined = $state(undefined);
|
|
let input: string | undefined = $state(undefined);
|
|
|
|
let wrapper: HTMLDivElement;
|
|
type Props = { registry: NodeRegistry };
|
|
const { registry }: Props = $props();
|
|
|
|
let width = $state(0);
|
|
|
|
function handleMouseOver(ev: MouseEvent) {
|
|
let target = ev.target as HTMLElement | null;
|
|
mx = ev.clientX;
|
|
my = ev.clientY;
|
|
if (!target) return;
|
|
|
|
const closest = target?.closest?.("[data-node-type]");
|
|
|
|
if (!closest) {
|
|
node = undefined;
|
|
return;
|
|
}
|
|
|
|
let nodeType = closest.getAttribute("data-node-type");
|
|
let nodeInput = closest.getAttribute("data-node-input");
|
|
|
|
if (!nodeType) {
|
|
node = undefined;
|
|
return;
|
|
}
|
|
node = registry.getNode(nodeType);
|
|
input = nodeInput || undefined;
|
|
}
|
|
|
|
onMount(() => {
|
|
const style = wrapper.parentElement?.style;
|
|
style?.setProperty("cursor", "help");
|
|
return () => {
|
|
style?.removeProperty("cursor");
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<svelte:window onmousemove={handleMouseOver} />
|
|
|
|
<div
|
|
class="help-wrapper p-4"
|
|
class:visible={node}
|
|
bind:clientWidth={width}
|
|
style="--my:{my}px; --mx:{Math.min(mx, window.innerWidth - width - 20)}px;"
|
|
bind:this={wrapper}
|
|
>
|
|
<p class="m-0 text-light opacity-40 flex items-center gap-3 mb-4">
|
|
<span class="i-tabler-help block w-4 h-4"></span>
|
|
{node?.id.split("/").at(-1) || "Help"}
|
|
{#if input}
|
|
<span>> {input}</span>
|
|
{/if}
|
|
</p>
|
|
{#if node}
|
|
<div class="mb-4">
|
|
{#if input}
|
|
{node?.inputs?.[input]?.description || input}
|
|
{:else if node?.meta?.description}
|
|
{node?.meta?.description}
|
|
{:else}
|
|
<div class="text-xs opacity-30 mb-4">{node.id}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if !input}
|
|
<div>
|
|
<span class="i-tabler-arrow-right opacity-30">-></span>
|
|
{node?.outputs?.map((o) => o).join(", ") ?? "nothing"}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.help-wrapper {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
transform: translate(var(--mx), var(--my));
|
|
background: var(--layer-1);
|
|
border-radius: 5px;
|
|
top: 10px;
|
|
left: 10px;
|
|
max-width: 250px;
|
|
border: 1px solid var(--outline);
|
|
z-index: 10000;
|
|
display: none;
|
|
}
|
|
|
|
.visible {
|
|
display: block;
|
|
}
|
|
</style>
|