feat: some moving around

2024-04-15 22:13:43 +02:00
parent 0254bc1ae5
commit dec205b234
86 changed files with 505 additions and 409 deletions
--- a/app/src/lib/graph-interface/graph/GraphView.svelte
+++ b/app/src/lib/graph-interface/graph/GraphView.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Edge as EdgeType, Node as NodeType } from '@nodes/types';
+	import { HTML } from '@threlte/extras';
+	import Edge from '../edges/Edge.svelte';
+	import Node from '../node/Node.svelte';
+	import { getContext, onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import { activeSocket } from './stores.js';
+
+	export let nodes: Writable<Map<number, NodeType>>;
+	export let edges: Writable<EdgeType[]>;
+
+	export let cameraPosition = [0, 0, 4];
+
+	const isNodeInView = getContext<(n: NodeType) => boolean>('isNodeInView');
+
+	const getSocketPosition =
+		getContext<(node: NodeType, index: string | number) => [number, number]>('getSocketPosition');
+
+	function getEdgePosition(edge: EdgeType) {
+		const pos1 = getSocketPosition(edge[0], edge[1]);
+		const pos2 = getSocketPosition(edge[2], edge[3]);
+
+		return [pos1[0], pos1[1], pos2[0], pos2[1]];
+	}
+
+	onMount(() => {
+		for (const node of $nodes.values()) {
+			if (node?.tmp?.ref) {
+				node.tmp.ref.style.setProperty('--nx', `${node.position[0] * 10}px`);
+				node.tmp.ref.style.setProperty('--ny', `${node.position[1] * 10}px`);
+			}
+		}
+	});
+</script>
+
+{#each $edges as edge (`${edge[0].id}-${edge[1]}-${edge[2].id}-${edge[3]}`)}
+	{@const pos = getEdgePosition(edge)}
+	{@const [x1, y1, x2, y2] = pos}
+	<Edge
+		from={{
+			x: x1,
+			y: y1
+		}}
+		to={{
+			x: x2,
+			y: y2
+		}}
+	/>
+{/each}
+
+<HTML transform={false}>
+	<div
+		role="tree"
+		id="graph"
+		tabindex="0"
+		class="wrapper"
+		class:zoom-small={cameraPosition[2] < 2}
+		class:hovering-sockets={activeSocket}
+		style={`--cz: ${cameraPosition[2]}; --node-display: ${cameraPosition[2] < 2 ? 'none' : 'block'};`}
+	>
+		{#each $nodes.values() as node (node.id)}
+			<Node {node} inView={cameraPosition && isNodeInView(node)} z={cameraPosition[2]} />
+		{/each}
+	</div>
+</HTML>
+
+<style>
+	.wrapper {
+		position: absolute;
+		z-index: 100;
+		width: 0px;
+		height: 0px;
+		transform: scale(calc(var(--cz) * 0.1));
+		display: var(--node-display, block);
+		opacity: calc((var(--cz) - 2.5) / 3.5);
+	}
+</style>