Iotroci 8819

packages/scene-composer/jest.config.ts

@@ -14,10 +14,12 @@ export default merge.recursive(tsPreset, awsuiPreset, {
     '!src/**/index.ts',
     '!src/**/*.d.ts',
     '!src/**/__snapshots__/*',
+    '!src/assets/**/*',
     '!src/three/GLTFLoader.js',
     '!src/three/tiles3d/TilesRenderer.js',
     '!src/three/tiles3d/TilesRendererBase.js',
     '!src/utils/sceneDocumentSnapshotCreator.ts',
+    '!src/augmentations/components/three-fiber/viewpoint/ViewCursorWidget.tsx', // Skipping as this is around mouse movement & is interaction based. Should be covered in end-to-end test or manual testing.
   ],
   coverageReporters: [
     'json',

packages/scene-composer/src/assets/viewpoints/IconSvgs.tsx

@@ -16,7 +16,7 @@ export const SelectedViewpointSvgString = `
 `;
 
 export const ViewCursorMoveSvgString = `
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'>
+  <svg width='10' height='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'>
     <g fill='none'>
       <circle cx='5' cy='5' r='5' fill='white' />
     </g>

packages/scene-composer/src/augmentations/UpdateJsxIntrinsicElements.ts

@@ -1,6 +1,6 @@
 import { Node, Object3DNode } from '@react-three/fiber';
 
-import { Anchor, ViewCursor, Viewpoint } from './three';
+import { Anchor } from './three';
 import { WidgetSprite, WidgetVisual } from './three/visuals';
 
 export type AnchorProps = Object3DNode<Anchor, typeof Anchor>;
@@ -9,10 +9,6 @@ export type WidgetVisualProps = Node<WidgetVisual, typeof WidgetVisual>;
 
 export type WidgetSpriteProps = Node<WidgetSprite, typeof WidgetSprite>;
 
-export type ViewpointProps = Object3DNode<Viewpoint, typeof Viewpoint>;
-
-export type ViewCursorProps = Object3DNode<ViewCursor, typeof ViewCursor>;
-
 /**
  * Adds the Anchor type and props to the JSX.IntrinsicElements namespace
  */
@@ -23,8 +19,6 @@ declare global {
       anchor: AnchorProps;
       widgetVisual: WidgetVisualProps;
       widgetSprite: WidgetSpriteProps;
-      viewpoint: ViewpointProps;
-      viewCursor: ViewCursorProps;
     }
   }
 }

packages/scene-composer/src/augmentations/components/three-fiber/anchor/AnchorWidget.tsx

@@ -200,11 +200,13 @@ export function AsyncLoadedAnchorWidget({
   }, [linesRef.current]);
 
   const parentScale = new THREE.Vector3(1, 1, 1);
+  let targetParent;
   if (parent) {
-    parent.getWorldScale(parentScale);
+    targetParent = getObject3DFromSceneNodeRef(parent.userData.targetRef);
+    targetParent ? targetParent.getWorldScale(parentScale) : parent.getWorldScale(parentScale);
   }
 
-  const finalScale = parent ? new THREE.Vector3(1, 1, 1).divide(parentScale) : new THREE.Vector3(1, 1, 1);
+  const finalScale = targetParent ? new THREE.Vector3(1, 1, 1).divide(parentScale) : new THREE.Vector3(1, 1, 1);
 
   return (
     <group scale={finalScale}>

packages/scene-composer/src/augmentations/components/three-fiber/viewpoint/ViewCursorWidget.tsx

@@ -1,76 +1,62 @@
-import * as THREE from 'three';
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
-import { extend, useLoader, useThree } from '@react-three/fiber';
-import { SVGLoader, SVGResult } from 'three-stdlib';
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { useFrame, useLoader, useThree } from '@react-three/fiber';
+import { Mesh as THREEMesh, Object3D as THREEObject3D, Vector3 as THREEVector3 } from 'three';
+import { SVGLoader } from 'three-stdlib';
 
-import { ViewCursorMoveIcon, ViewCursorEditIcon } from '../../../../assets';
-import svgIconToWidgetVisual from '../common/SvgIconToWidgetVisual';
-import { WidgetVisual } from '../../../three/visuals';
-import { ViewCursor, Viewpoint, ViewpointState } from '../../../three';
+import { convertSvgToMesh } from '../../../../utils/svgUtils';
+import { getIntersectionTransform } from '../../../../utils/raycastUtils';
 import { sceneComposerIdContext } from '../../../../common/sceneComposerIdContext';
 import { useEditorState } from '../../../../store';
+import { ViewCursorEditIcon, ViewCursorMoveIcon } from '../../../../assets';
 
-// Adds the custom objects to React Three Fiber
-extend({ ViewCursor, Viewpoint, WidgetVisual });
-
-const AsyncLoadViewCursorWidget: React.FC = () => {
+export const ViewCursorWidget = () => {
+  const ref = useRef<THREEObject3D>(null);
+  const { gl } = useThree();
   const sceneComposerId = useContext(sceneComposerIdContext);
-  const { cursorPosition, cursorLookAt, cursorVisible, cursorStyle } = useEditorState(sceneComposerId);
-  const viewCursorRef = useRef<Viewpoint>(null);
-  const { camera } = useThree();
-
-  const moveVisual = useMemo(() => {
-    const svgData: SVGResult = useLoader(SVGLoader, ViewCursorMoveIcon.dataUri);
-    return svgIconToWidgetVisual(svgData, ViewpointState.Deselected, false, { userData: { isCursor: true } });
-  }, []);
-
-  const editVisual = useMemo(() => {
-    const svgData: SVGResult = useLoader(SVGLoader, ViewCursorEditIcon.dataUri);
-    return svgIconToWidgetVisual(svgData, ViewpointState.Selected, false, { userData: { isCursor: true } });
-  }, []);
-
-  useEffect(() => {
-    if (viewCursorRef.current) {
-      viewCursorRef.current.lookAt(cursorLookAt);
-      viewCursorRef.current.rotation.z = camera.rotation.z; // Prevent spinning and always be straight up and down
+  const { addingWidget, cursorVisible, cursorStyle, setAddingWidget, setCursorVisible, setCursorStyle } =
+    useEditorState(sceneComposerId);
+  const svg = cursorStyle === 'edit' ? ViewCursorEditIcon : ViewCursorMoveIcon;
+  const data = useLoader(SVGLoader, svg.dataUri);
+
+  const esc = useCallback(() => {
+    gl.domElement.addEventListener('keyup', (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !!addingWidget) {
+        setAddingWidget(undefined);
+      }
+    });
+    return gl.domElement?.removeEventListener('keyup', setAddingWidget as any);
+  }, [addingWidget]);
+
+  const shape = useMemo(() => {
+    return convertSvgToMesh(data);
+  }, [data]);
+
+  /* istanbul ignore next */
+  useFrame(({ raycaster, scene }) => {
+    const sceneMeshes: THREEObject3D[] = [];
+    scene.traverse((child) => {
+      return shape.id !== child.id && (child as THREEMesh).isMesh && child.type !== 'TransformControlsPlane'
+        ? sceneMeshes.push(child as THREEMesh)
+        : null;
+    });
+    const intersects = raycaster.intersectObjects(sceneMeshes, false);
+    if (intersects.length) {
+      const n = getIntersectionTransform(intersects[0]);
+      shape.lookAt(n.normal as THREEVector3);
+      shape.position.copy(n.position);
     }
-  }, [cursorLookAt]);
+  });
 
   useEffect(() => {
-    if (viewCursorRef.current) {
-      viewCursorRef.current.traverse((child) => {
-        const mesh = child as THREE.Mesh;
-
-        if (mesh.material) {
-          if (Array.isArray(mesh.material)) {
-            mesh.material.forEach((material) => {
-              material.depthFunc = THREE.AlwaysDepth;
-            });
-          } else {
-            (mesh.material as THREE.Material).depthFunc = THREE.AlwaysDepth;
-          }
-        }
-      });
-    }
-  }, [viewCursorRef]);
-
-  return (
-    <viewCursor
-      ref={viewCursorRef}
-      isSelected={cursorStyle === 'edit'}
-      position={cursorPosition}
-      visible={cursorVisible}
-    >
-      {moveVisual}
-      {editVisual}
-    </viewCursor>
-  );
-};
+    setCursorVisible(!!addingWidget);
+    setCursorStyle(addingWidget ? 'edit' : 'move');
+    esc();
+    gl.domElement.style.cursor = addingWidget ? 'none' : 'auto';
+  }, [addingWidget]);
 
-export const ViewCursorWidget: React.FC = () => {
   return (
     <React.Suspense fallback={null}>
-      <AsyncLoadViewCursorWidget />
+      {cursorVisible && <primitive ref={ref} object={shape} name='ViewCursorWidget' />}
     </React.Suspense>
   );
 };

packages/scene-composer/src/augmentations/three/index.ts

@@ -1,2 +1 @@
 export * from './Anchor';
-export * from './Viewpoint';