From 5c1d0db8eba385927adfeffa77375d07544d2c86 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Wed, 21 Jun 2023 14:07:03 -0600 Subject: [PATCH] chore: example with tooltip --- stories/Connections.stories.tsx | 2 +- stories/Tooltip.stories.tsx | 73 +++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 stories/Tooltip.stories.tsx diff --git a/stories/Connections.stories.tsx b/stories/Connections.stories.tsx index 0c39bd9..5d08a15 100644 --- a/stories/Connections.stories.tsx +++ b/stories/Connections.stories.tsx @@ -1,5 +1,5 @@ import React, { startTransition, useRef, useState } from 'react'; -import { Meta, Story } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { Axes, PointBaseProps, diff --git a/stories/Tooltip.stories.tsx b/stories/Tooltip.stories.tsx new file mode 100644 index 0000000..133a573 --- /dev/null +++ b/stories/Tooltip.stories.tsx @@ -0,0 +1,73 @@ +import { Meta, Story } from '@storybook/react'; +import { startTransition, useState } from 'react'; +import { Container, ToolName } from './components'; +import { + Axes, + PointBaseProps, + Points, + ThreeDimensionalBounds, + ThreeDimensionalCanvas, + ThreeDimensionalControls, + ThreeDimensionalPoint, + getThreeDimensionalBounds, +} from '../src'; +import React from 'react'; +import { Html } from '@react-three/drei'; +import _data from './data/point-cloud-3d.json'; +import { Vector3 } from 'three'; +const data = _data as unknown as Array; + +const meta: Meta = { + title: 'Tooltip', +}; + +export default meta; + +export function Default() { + const [tool, setTool] = useState('move'); + const bounds = React.useMemo(() => { + return getThreeDimensionalBounds([ + ...data.map((d) => d.position as ThreeDimensionalPoint), + ]); + }, []); + const [selectedPoint, setSelectedPoint] = + useState(null); + + return ( + + + + + + + + { + startTransition(() => { + setSelectedPoint(point); + }); + }} + onPointerLeave={() => { + startTransition(() => { + setSelectedPoint(null); + }); + }} + /> + + {selectedPoint ? ( + +
+
+ {selectedPoint.metaData.uuid} +
+
+ + ) : null} + + + ); +}