Spaces:
Running
Running
File size: 1,641 Bytes
18b0fa5 |
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 |
<script lang="ts">
import { T } from "@threlte/core";
import { TransformControls, interactivity } from "@threlte/extras";
import type { Snippet } from "svelte";
import { Spring } from "svelte/motion";
import { useCursor } from "@threlte/extras";
interface Props {
content: Snippet<[{ isHovered: boolean; isSelected: boolean }]>; // renderable
onClick?: () => void;
}
let { content, onClick }: Props = $props();
interactivity();
const scale = new Spring(1);
// Hover state
let isHovered = $state(false);
let isSelected = $state(false);
let isHighlighted = $derived(isHovered || isSelected);
$effect(() => {
// If isHighlighted is true, set the color to hoverColor and opacity to hoverOpacity
if (isHighlighted) {
scale.target = 1.05;
} else {
scale.target = 1;
}
});
// Handle keyboard events for deselection
$effect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape" && isSelected) {
isSelected = false;
}
};
if (isSelected) {
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}
});
const { onPointerEnter, onPointerLeave } = useCursor();
</script>
<T.Group
onclick={() => {
isSelected = true;
if (onClick) {
onClick();
}
}}
onpointerenter={() => {
onPointerEnter();
isHovered = true;
}}
onpointerleave={() => {
onPointerLeave();
isHovered = false;
}}
scale={scale.current}
>
{#snippet children({ ref })}
{@render content({ isHovered, isSelected })}
{/snippet}
</T.Group>
<!-- From https://github.com/brean/urdf-viewer -->
|