From 8719f655ec128a924c9c2d3576393666239c93a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 3 Aug 2023 13:02:38 +0200 Subject: [PATCH 1/7] fix: suppress events targeting ViewerAnchor --- .../src/components/ViewerAnchor/ViewerAnchor.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx index d9f10f3167c..abdf6b33e07 100644 --- a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx +++ b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx @@ -6,6 +6,7 @@ import { useEffect, useRef, type ReactElement, type RefObject, useState } from ' import { Vector2, type Vector3 } from 'three'; import { useReveal } from '../RevealContainer/RevealContext'; +import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents'; export type ViewerAnchorElementMapping = { ref: RefObject; @@ -13,11 +14,12 @@ export type ViewerAnchorElementMapping = { }; export type ViewerAnchorProps = { + key?: string; position: Vector3; children: ReactElement; }; -export const ViewerAnchor = ({ position, children }: ViewerAnchorProps): ReactElement => { +const ViewerAnchorContainer = ({ key, position, children, cssTranslation }: ViewerAnchorProps): ReactElement => { const viewer = useReveal(); const [divTranslation, setDivTranslation] = useState(new Vector2()); const [visible, setVisible] = useState(false); @@ -45,6 +47,7 @@ export const ViewerAnchor = ({ position, children }: ViewerAnchorProps): ReactEl return visible ? (
); }; + +export const ViewerAnchor = withSuppressRevealEvents(ViewerAnchorContainer); From d3fb285c88353475d9ea6b07e8438fe918081c7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 3 Aug 2023 13:03:49 +0200 Subject: [PATCH 2/7] fix: make sure ViewerAnchor appears when first mounted --- .../src/components/ViewerAnchor/ViewerAnchor.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx index abdf6b33e07..1cba6083cbd 100644 --- a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx +++ b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx @@ -2,7 +2,7 @@ * Copyright 2023 Cognite AS */ -import { useEffect, useRef, type ReactElement, type RefObject, useState } from 'react'; +import { useEffect, useRef, type ReactElement, type RefObject, useState, useCallback } from 'react'; import { Vector2, type Vector3 } from 'three'; import { useReveal } from '../RevealContainer/RevealContext'; @@ -24,7 +24,7 @@ const ViewerAnchorContainer = ({ key, position, children, cssTranslation }: View const [divTranslation, setDivTranslation] = useState(new Vector2()); const [visible, setVisible] = useState(false); - const cameraChanged = (cameraPosition: Vector3, cameraTarget: Vector3): void => { + const cameraChanged = useCallback((cameraPosition: Vector3, cameraTarget: Vector3): void => { const cameraDirection = cameraTarget.clone().sub(cameraPosition).normalize(); const elementDirection = position.clone().sub(cameraPosition).normalize(); @@ -34,10 +34,14 @@ const ViewerAnchorContainer = ({ key, position, children, cssTranslation }: View if (screenSpacePosition !== null) { setDivTranslation(screenSpacePosition); } - }; + }, [viewer, position]); useEffect(() => { viewer.cameraManager.on('cameraChange', cameraChanged); + + cameraChanged(viewer.cameraManager.getCameraState().position, + viewer.cameraManager.getCameraState().target); + return () => { viewer.cameraManager.off('cameraChange', cameraChanged); }; From 73ff2d09a0ca738c23c15cf8e7b9a546100d939b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 3 Aug 2023 14:31:29 +0200 Subject: [PATCH 3/7] chore: revert to exporting vanilla ViewerAnchor --- react-components/src/components/ViewerAnchor/ViewerAnchor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx index 1cba6083cbd..babceb0ff54 100644 --- a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx +++ b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx @@ -19,7 +19,7 @@ export type ViewerAnchorProps = { children: ReactElement; }; -const ViewerAnchorContainer = ({ key, position, children, cssTranslation }: ViewerAnchorProps): ReactElement => { +const ViewerAnchorContainer = ({ key, position, children }: ViewerAnchorProps): ReactElement => { const viewer = useReveal(); const [divTranslation, setDivTranslation] = useState(new Vector2()); const [visible, setVisible] = useState(false); From 1594c060c87f138b75f409fcd5913fc187c20a5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 3 Aug 2023 15:17:25 +0200 Subject: [PATCH 4/7] fix: don't suppress, lint fix --- .../components/ViewerAnchor/ViewerAnchor.tsx | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx index babceb0ff54..3ea4c479ae9 100644 --- a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx +++ b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx @@ -19,28 +19,33 @@ export type ViewerAnchorProps = { children: ReactElement; }; -const ViewerAnchorContainer = ({ key, position, children }: ViewerAnchorProps): ReactElement => { +export const ViewerAnchor = ({ key, position, children }: ViewerAnchorProps): ReactElement => { const viewer = useReveal(); const [divTranslation, setDivTranslation] = useState(new Vector2()); const [visible, setVisible] = useState(false); - const cameraChanged = useCallback((cameraPosition: Vector3, cameraTarget: Vector3): void => { - const cameraDirection = cameraTarget.clone().sub(cameraPosition).normalize(); - const elementDirection = position.clone().sub(cameraPosition).normalize(); + const cameraChanged = useCallback( + (cameraPosition: Vector3, cameraTarget: Vector3): void => { + const cameraDirection = cameraTarget.clone().sub(cameraPosition).normalize(); + const elementDirection = position.clone().sub(cameraPosition).normalize(); - setVisible(elementDirection.dot(cameraDirection) > 0); + setVisible(elementDirection.dot(cameraDirection) > 0); - const screenSpacePosition = viewer.worldToScreen(position.clone()); - if (screenSpacePosition !== null) { - setDivTranslation(screenSpacePosition); - } - }, [viewer, position]); + const screenSpacePosition = viewer.worldToScreen(position.clone()); + if (screenSpacePosition !== null) { + setDivTranslation(screenSpacePosition); + } + }, + [viewer, position] + ); useEffect(() => { viewer.cameraManager.on('cameraChange', cameraChanged); - cameraChanged(viewer.cameraManager.getCameraState().position, - viewer.cameraManager.getCameraState().target); + cameraChanged( + viewer.cameraManager.getCameraState().position, + viewer.cameraManager.getCameraState().target + ); return () => { viewer.cameraManager.off('cameraChange', cameraChanged); @@ -51,7 +56,7 @@ const ViewerAnchorContainer = ({ key, position, children }: ViewerAnchorProps): return visible ? (
); }; - -export const ViewerAnchor = withSuppressRevealEvents(ViewerAnchorContainer); From 5f9fdfb9aa79b261d3587535908da5ef55702e80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Thu, 3 Aug 2023 15:23:10 +0200 Subject: [PATCH 5/7] fix: show working example with translation and no suppress-error --- .../src/components/ViewerAnchor/ViewerAnchor.tsx | 1 - react-components/stories/ViewerAnchor.stories.tsx | 14 +++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx index 3ea4c479ae9..dc75cec6baf 100644 --- a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx +++ b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx @@ -6,7 +6,6 @@ import { useEffect, useRef, type ReactElement, type RefObject, useState, useCall import { Vector2, type Vector3 } from 'three'; import { useReveal } from '../RevealContainer/RevealContext'; -import { withSuppressRevealEvents } from '../../higher-order-components/withSuppressRevealEvents'; export type ViewerAnchorElementMapping = { ref: RefObject; diff --git a/react-components/stories/ViewerAnchor.stories.tsx b/react-components/stories/ViewerAnchor.stories.tsx index aff81002cb2..1f94e52549a 100644 --- a/react-components/stories/ViewerAnchor.stories.tsx +++ b/react-components/stories/ViewerAnchor.stories.tsx @@ -2,10 +2,11 @@ * Copyright 2023 Cognite AS */ import type { Meta, StoryObj } from '@storybook/react'; -import { Reveal3DResources, RevealContainer } from '../src'; +import { Reveal3DResources, RevealContainer, withSuppressRevealEvents } from '../src'; import { Color, Vector3 } from 'three'; import { CameraController, ViewerAnchor } from '../src/'; import { createSdkByUrlToken } from './utilities/createSdkByUrlToken'; +import styled from 'styled-components'; const meta = { title: 'Example/ViewerAnchor', @@ -31,8 +32,9 @@ export const Main: Story = { ] }, render: ({ resources, styling, fdmAssetMappingConfig }) => { - const position = new Vector3(50, 30, 50); + const position = new Vector3(25, 0, -25); const position2 = new Vector3(); + const SuppressedDiv = withSuppressRevealEvents(styled.div``); return ( -

- This label is stuck at position {position.toArray().join(',')} -

+ +

This label is stuck at position {position.toArray().join(',')}

+ +

Date: Thu, 3 Aug 2023 15:25:04 +0200 Subject: [PATCH 6/7] fix: remove unnecessary prop --- react-components/src/components/ViewerAnchor/ViewerAnchor.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx index dc75cec6baf..f254a681c9a 100644 --- a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx +++ b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx @@ -13,12 +13,11 @@ export type ViewerAnchorElementMapping = { }; export type ViewerAnchorProps = { - key?: string; position: Vector3; children: ReactElement; }; -export const ViewerAnchor = ({ key, position, children }: ViewerAnchorProps): ReactElement => { +export const ViewerAnchor = ({ position, children }: ViewerAnchorProps): ReactElement => { const viewer = useReveal(); const [divTranslation, setDivTranslation] = useState(new Vector2()); const [visible, setVisible] = useState(false); @@ -55,7 +54,6 @@ export const ViewerAnchor = ({ key, position, children }: ViewerAnchorProps): Re return visible ? (

Date: Fri, 4 Aug 2023 10:37:58 +0200 Subject: [PATCH 7/7] fix: don't stop up-pointer events Avoids some messing-up when pointer is pressed on canvas and released on a suppressing overlay --- .../src/higher-order-components/withSuppressRevealEvents.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/react-components/src/higher-order-components/withSuppressRevealEvents.tsx b/react-components/src/higher-order-components/withSuppressRevealEvents.tsx index 48f44dfde6c..0e3d943b06b 100644 --- a/react-components/src/higher-order-components/withSuppressRevealEvents.tsx +++ b/react-components/src/higher-order-components/withSuppressRevealEvents.tsx @@ -22,13 +22,11 @@ export function withSuppressRevealEvents( } div.addEventListener('pointerdown', stopPropagation); - div.addEventListener('pointerup', stopPropagation); div.addEventListener('pointermove', stopPropagation); div.addEventListener('wheel', stopPropagation); return () => { div.removeEventListener('pointerdown', stopPropagation); - div.removeEventListener('pointerup', stopPropagation); div.removeEventListener('pointermove', stopPropagation); div.removeEventListener('wheel', stopPropagation); };