Merge refs/heads/master into savokr/fix-styling-hook

cognitedata · Aug 4, 2023 · 662f969 · 662f969
2 parents c2b0b2c + bfc25db
commit 662f969
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git 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';
@@ -22,20 +22,29 @@ export const ViewerAnchor = ({ position, children }: ViewerAnchorProps): ReactEl
   const [divTranslation, setDivTranslation] = useState(new Vector2());
   const [visible, setVisible] = useState(false);
 
-  const cameraChanged = (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);
-    }
-  };
+      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
+    );
+
     return () => {
       viewer.cameraManager.off('cameraChange', cameraChanged);
     };

diff --git 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<T extends JSX.IntrinsicAttributes>(
       }
 
       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);
       };

diff --git 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 (
       <RevealContainer
@@ -50,7 +52,7 @@ export const Main: Story = {
           fdmAssetMappingConfig={fdmAssetMappingConfig}
         />
         <ViewerAnchor position={position}>
-          <p
+          <div
             style={{
               backgroundColor: 'turquoise',
               padding: '10px',
@@ -59,8 +61,10 @@ export const Main: Story = {
               maxWidth: '300px',
               transform: 'translate(-50%, calc(-100% - 50px))'
             }}>
-            This label is stuck at position {position.toArray().join(',')}
-          </p>
+            <SuppressedDiv>
+              <p>This label is stuck at position {position.toArray().join(',')}</p>
+            </SuppressedDiv>
+          </div>
         </ViewerAnchor>
         <ViewerAnchor position={position2}>
           <p