Spaces:
Running
Running
File size: 1,412 Bytes
6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 6ce4ca6 3cdf7b9 |
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 |
<script lang="ts">
import { T } from "@threlte/core";
import GPU from "./GPU.svelte";
import ComputeStatusBillboard from "./status/ComputeStatusBillboard.svelte";
import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
import { interactivity, type IntersectionEvent, useCursor } from "@threlte/extras";
interface Props {
compute: RemoteCompute;
onVideoInputBoxClick: (compute: RemoteCompute) => void;
onRobotInputBoxClick: (compute: RemoteCompute) => void;
onRobotOutputBoxClick: (compute: RemoteCompute) => void;
}
let { compute, onVideoInputBoxClick, onRobotInputBoxClick, onRobotOutputBoxClick }: Props =
$props();
const { onPointerEnter, onPointerLeave, hovering } = useCursor();
interactivity();
let isToggled = $state(false);
function handleClick(event: IntersectionEvent<MouseEvent>) {
event.stopPropagation();
isToggled = !isToggled;
}
</script>
<T.Group
position.x={compute.position.x}
position.y={compute.position.y}
position.z={compute.position.z}
scale={[1, 1, 1]}
>
<T.Group onpointerenter={onPointerEnter} onpointerleave={onPointerLeave} onclick={handleClick}>
<GPU rotating={$hovering} />
</T.Group>
<T.Group scale={[8, 8, 8]} rotation={[-Math.PI / 2, 0, 0]}>
<ComputeStatusBillboard
{compute}
{onVideoInputBoxClick}
{onRobotInputBoxClick}
{onRobotOutputBoxClick}
visible={isToggled}
/>
</T.Group>
</T.Group>
|