-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: initial info card overlay * feat: Support multiple ViewerAnchors --------- Co-authored-by: Christopher J. Tannum <[email protected]>
- Loading branch information
1 parent
4f0feca
commit 1ceeb6b
Showing
6 changed files
with
292 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
react-components/src/components/ViewerAnchor/AuxillaryDivProvider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /*! | ||
| * Copyright 2023 Cognite AS | ||
| */ | ||
|
|
||
| import { createContext, useContext, useState, useCallback, type ReactElement } from 'react'; | ||
|
|
||
| export const AuxillaryDivProvider = ({ children }: { children: ReactElement }): ReactElement => { | ||
| const [elements, setElements] = useState<ReactElement[]>([]); | ||
|
|
||
| // Maintain a local copy of the elements, needed for properly supporting multiple | ||
| // `addElement` calls between rerenders | ||
| let cachedElements = elements; | ||
|
|
||
| const addElement = useCallback( | ||
| (element: ReactElement) => { | ||
| const newElementList = [...cachedElements, element]; | ||
|
|
||
| setElements(newElementList); | ||
| cachedElements = newElementList; | ||
| }, | ||
| [elements, setElements] | ||
| ); | ||
|
|
||
| const removeElement = useCallback( | ||
| (element: ReactElement) => { | ||
| const newElementList = cachedElements.filter((e) => e !== element); | ||
|
|
||
| setElements(newElementList); | ||
| cachedElements = newElementList; | ||
| }, | ||
| [elements, setElements] | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <AuxillaryDivContext.Provider value={{ addElement, removeElement }}> | ||
| <div>{elements}</div> | ||
| {children} | ||
| </AuxillaryDivContext.Provider> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| type AuxillaryContextData = { | ||
| addElement: (element: ReactElement) => void; | ||
| removeElement: (element: ReactElement) => void; | ||
| }; | ||
|
|
||
| const AuxillaryDivContext = createContext<AuxillaryContextData | null>(null); | ||
|
|
||
| export const useAuxillaryDivContext = (): AuxillaryContextData => { | ||
| const auxContext = useContext(AuxillaryDivContext); | ||
| if (auxContext === null) { | ||
| throw new Error('useAuxillaryDivContext must be used inside AuxillaryDivContext'); | ||
| } | ||
|
|
||
| return auxContext; | ||
| }; |
64 changes: 64 additions & 0 deletions
64
react-components/src/components/ViewerAnchor/ViewerAnchor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /*! | ||
| * Copyright 2023 Cognite AS | ||
| */ | ||
|
|
||
| import { useEffect, useRef, type ReactElement, type RefObject } from 'react'; | ||
| import { type Vector3 } from 'three'; | ||
|
|
||
| import { useReveal } from '../RevealContainer/RevealContext'; | ||
|
|
||
| import { HtmlOverlayTool } from '@cognite/reveal/tools'; | ||
| import { useAuxillaryDivContext } from './AuxillaryDivProvider'; | ||
|
|
||
| export type ViewerAnchorElementMapping = { | ||
| ref: RefObject<HTMLElement>; | ||
| position: Vector3; | ||
| }; | ||
|
|
||
| export type ViewerAnchorProps = { | ||
| position: Vector3; | ||
| children: ReactElement; | ||
| uniqueKey: string; | ||
| }; | ||
|
|
||
| export const ViewerAnchor = ({ | ||
| position, | ||
| children, | ||
| uniqueKey | ||
| }: ViewerAnchorProps): ReactElement => { | ||
| const viewer = useReveal(); | ||
|
|
||
| const htmlTool = useRef<HtmlOverlayTool>(new HtmlOverlayTool(viewer)); | ||
|
|
||
| const auxContext = useAuxillaryDivContext(); | ||
|
|
||
| const htmlRef = useRef<HTMLDivElement>(null); | ||
| const element = ( | ||
| <div key={uniqueKey} ref={htmlRef} style={{ position: 'absolute' }}> | ||
| {children} | ||
| </div> | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| auxContext.addElement(element); | ||
| return () => { | ||
| auxContext.removeElement(element); | ||
| }; | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (htmlRef.current === null) { | ||
| return; | ||
| } | ||
|
|
||
| const elementRef = htmlRef.current; | ||
|
|
||
| htmlTool.current.add(elementRef, position); | ||
|
|
||
| return () => { | ||
| htmlTool.current.remove(elementRef); | ||
| }; | ||
| }, [auxContext, children, htmlRef.current]); | ||
|
|
||
| return <></>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| /*! | ||
| * Copyright 2023 Cognite AS | ||
| */ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { Reveal3DResources, RevealContainer } from '../src'; | ||
| import { Color, Matrix4, Vector3 } from 'three'; | ||
| import { CameraController, ViewerAnchor } from '../src/'; | ||
| import { createSdkByUrlToken } from './utilities/createSdkByUrlToken'; | ||
| import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; | ||
|
|
||
| const meta = { | ||
| title: 'Example/ViewerAnchor', | ||
| component: Reveal3DResources, | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| styling: {} | ||
| } | ||
| } satisfies Meta<typeof Reveal3DResources>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| const sdk = createSdkByUrlToken(); | ||
|
|
||
| export const Main: Story = { | ||
| args: { | ||
| resources: [ | ||
| { | ||
| modelId: 2551525377383868, | ||
| revisionId: 2143672450453400, | ||
| transform: new Matrix4().makeTranslation(-340, -480, 80) | ||
| } | ||
| ], | ||
| styling: {}, | ||
| fdmAssetMappingConfig: { | ||
| source: { | ||
| space: 'hf_3d_schema', | ||
| version: '1', | ||
| type: 'view', | ||
| externalId: 'cdf_3d_connection_data' | ||
| }, | ||
| assetFdmSpace: 'hf_customer_a' | ||
| } | ||
| }, | ||
| render: ({ resources, styling, fdmAssetMappingConfig }) => { | ||
| const position = new Vector3(50, 30, 50); | ||
| const position2 = new Vector3(0, 0, 0); | ||
|
|
||
| return ( | ||
| <RevealContainer | ||
| sdk={sdk} | ||
| color={new Color(0x4a4a4a)} | ||
| uiElements={<ReactQueryDevtools initialIsOpen={false} />} | ||
| viewerOptions={{ | ||
| loadingIndicatorStyle: { | ||
| opacity: 1, | ||
| placement: 'topRight' | ||
| } | ||
| }}> | ||
| <Reveal3DResources | ||
| resources={resources} | ||
| styling={styling} | ||
| fdmAssetMappingConfig={fdmAssetMappingConfig} | ||
| /> | ||
| <ViewerAnchor position={position} uniqueKey="key2"> | ||
| <p | ||
| style={{ | ||
| backgroundColor: 'turquoise', | ||
| padding: '10px', | ||
| borderRadius: '10px', | ||
| borderStyle: 'solid', | ||
| maxWidth: '300px', | ||
| transform: 'translate(-50%, calc(-100% - 50px))' | ||
| }}> | ||
| This label is stuck at position {position.toArray().join(',')} | ||
| </p> | ||
| </ViewerAnchor> | ||
| <ViewerAnchor position={position2} uniqueKey="key1"> | ||
| <p | ||
| style={{ | ||
| backgroundColor: 'red', | ||
| padding: '10px', | ||
| borderRadius: '10px', | ||
| borderStyle: 'solid', | ||
| maxWidth: '300px', | ||
| transform: 'translate(0px, 0px)' | ||
| }}> | ||
| This label is stuck at position {position2.toArray().join(',')} | ||
| </p> | ||
| </ViewerAnchor> | ||
| <CameraController | ||
| initialFitCamera={{ | ||
| to: 'allModels' | ||
| }} | ||
| cameraControlsOptions={{ | ||
| changeCameraTargetOnClick: true, | ||
| mouseWheelAction: 'zoomToCursor' | ||
| }} | ||
| /> | ||
| </RevealContainer> | ||
| ); | ||
| } | ||
| }; |