fix(composer): use arrow data as texture to avoid public path issue (#…

…276)

examples/react-app/README.md

@@ -20,8 +20,6 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 1. The `react-app/src/config.ts` file contains placeholder & example ids that will be used to load data when the app is running. Make sure to update them to real values.
 
-2. If your local server is not started on `http://localhost:3000`, then update the `publicPath` values in `config-overrides.js` file to match yours.
-
 ## Available Scripts
 
 In the project directory, you can run:

examples/react-app/config-overrides.js

@@ -5,25 +5,6 @@ module.exports = function override(config) {
     new NodePolyfillPlugin({excludeAliases: ['console']})
    ]);
 
-   // Override the default svg rules from create-react-app to set absolute path as localhost
-   config.module.rules.find((rule => !!rule.oneOf))?.['oneOf'].forEach(rule => {
-      let isSvg = false;
-      if (!Array.isArray(rule.test) && rule.test) {
-         isSvg = rule.test.test('.svg');
-      }
-      if (isSvg) {
-         rule.use = [
-            {
-               loader: require.resolve('file-loader'),
-               options: {
-               publicPath: 'http://localhost:3000/',
-               name: 'static/media/[name].[hash].[ext]',
-               },
-            },
-         ]
-      }
-   });
-
    return config; 
 }
 

packages/scene-composer/src/assets/index.ts

@@ -1,2 +1 @@
 export * from './anchors';
-export * from './viewpoints';

packages/scene-composer/src/assets/viewpoints/IconSvgs.tsx → packages/scene-composer/src/assets/svgs/icons/ViewCursorIcon.tsx

@@ -1,20 +1,3 @@
-/*eslint-disable*/
-export const ViewpointSvgString = `
-  <svg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'>
-    <g opacity='0.3'>
-      <circle cx='26' cy='26' r='26' stroke='white' stroke-width='6' />
-      <circle cx='26' cy='26' r='15' fill='white' />
-    </g>
-  </svg>
-`;
-
-export const SelectedViewpointSvgString = `
-  <svg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'>
-    <circle cx='26' cy='26' r='23' stroke='white' stroke-width='12' />
-    <circle cx='26' cy='26' r='15' fill='white' />
-  </svg>
-`;
-
 export const ViewCursorMoveSvgString = `
   <svg width='10' height='10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'>
     <g fill='none'>

packages/scene-composer/src/assets/svgs/index.ts

@@ -5,3 +5,4 @@ export * from './icons/RotateIcon';
 export * from './icons/ScaleIcon';
 export * from './icons/TranslateIcon';
 export * from './icons/TrashIcon';
+export * from './icons/ViewCursorIcon';

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

@@ -3,20 +3,20 @@ 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 { convertSvgToMesh } from '../../../../utils/svgUtils';
+import { convertSvgToMesh, getDataUri } from '../../../../utils/svgUtils';
 import { getIntersectionTransform } from '../../../../utils/raycastUtils';
 import { sceneComposerIdContext } from '../../../../common/sceneComposerIdContext';
 import { useEditorState } from '../../../../store';
-import { ViewCursorEditIcon, ViewCursorMoveIcon } from '../../../../assets';
+import { ViewCursorEditSvgString, ViewCursorMoveSvgString } from '../../../../assets/svgs';
 
 export const ViewCursorWidget = () => {
   const ref = useRef<THREEObject3D>(null);
   const { gl } = useThree();
   const sceneComposerId = useContext(sceneComposerIdContext);
   const { addingWidget, cursorVisible, cursorStyle, setAddingWidget, setCursorVisible, setCursorStyle } =
     useEditorState(sceneComposerId);
-  const svg = cursorStyle === 'edit' ? ViewCursorEditIcon : ViewCursorMoveIcon;
-  const data = useLoader(SVGLoader, svg.dataUri);
+  const svg = cursorStyle === 'edit' ? ViewCursorEditSvgString : ViewCursorMoveSvgString;
+  const data = useLoader(SVGLoader, getDataUri(svg));
 
   const esc = useCallback(() => {
     window.addEventListener('keyup', (e: KeyboardEvent) => {

packages/scene-composer/src/components/three-fiber/MotionIndicatorComponent/helpers.ts

@@ -3,7 +3,15 @@ import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 import { Component, Vector3 } from '../../../models/SceneModels';
-import arrow from '../../../assets/icons/arrow.svg';
+import { getDataUri } from '../../../utils/svgUtils';
+
+const arrowSvg = `
+<svg width="150" height="150" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.96824 20.5L32.0635 20.5" stroke="white" stroke-width="4" stroke-linejoin="round"/>
+  <path d="M23.6984 29L32.0635 20.5L23.6984 12" stroke="white" stroke-width="4" stroke-linejoin="round"/>
+</svg>
+`;
+const arrow = getDataUri(arrowSvg);
 
 /**
  * Calculate the number of repeated arrows in x direction based on number of repeat in y, so that the

packages/scene-composer/src/utils/svgUtils.spec.ts

@@ -1,11 +1,10 @@
 import { useLoader } from '@react-three/fiber';
 import { SVGLoader } from 'three-stdlib';
 import { Group as THREEGroup, MeshBasicMaterial as THREEMeshBasicMaterial } from 'three';
-import React from 'react';
 
-import { ViewCursorEditIcon } from '../assets';
+import { ViewCursorEditSvgString } from '../assets/svgs';
 
-import { convertSvgToMesh, createMesh } from './svgUtils';
+import { convertSvgToMesh, createMesh, getDataUri } from './svgUtils';
 
 jest.mock('@react-three/fiber', () => {
   const originalModule = jest.requireActual('three-stdlib');
@@ -19,7 +18,7 @@ jest.mock('@react-three/fiber', () => {
 describe('svgUtils', () => {
   describe('createSvg', () => {
     it('creates a mesh to be a type of THREEGroup', () => {
-      const data = useLoader(SVGLoader, ViewCursorEditIcon.dataUri);
+      const data = useLoader(SVGLoader, getDataUri(ViewCursorEditSvgString));
       const svgMesh = convertSvgToMesh(data);
       expect(svgMesh).toBeInstanceOf(THREEGroup);
     });
@@ -40,4 +39,12 @@ describe('svgUtils', () => {
       expect(mesh.opacity).toBe(1);
     });
   });
+
+  it('should return correct data uri for svg', () => {
+    const expected =
+      "data:image/svg+xml, %0A%20%20%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'%3E%0A%20%20%20%20%3Cg%20fill='none'%3E%0A%20%20%20%20%20%20%3Ccircle%20cx='7.99938'%20cy='8.00036'%20r='5.81579'%20stroke='white'%20/%3E%0A%20%20%20%20%20%20%3Cline%20x1='8.07812'%20y1='2.18557e-08'%20x2='8.07812'%20y2='16'%20stroke='white'%20/%3E%0A%20%20%20%20%20%20%3Cline%20x1='16'%20y1='8.0791'%20y2='8.0791'%20stroke='white'%20/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/svg%3E%0A";
+    const result = getDataUri(ViewCursorEditSvgString);
+
+    expect(result).toEqual(expected);
+  });
 });

packages/scene-composer/src/utils/svgUtils.ts

@@ -1,12 +1,10 @@
 import {
   AlwaysDepth as THREEAlwaysDepth,
-  Box3 as THREEBox3,
   Color as THREEColor,
   DoubleSide as THREEDoubleSide,
   Group as THREEGroup,
   Mesh as THREEMesh,
   MeshBasicMaterial as THREEMeshBasicMaterial,
-  Object3D as THREEObject3D,
   ShapeGeometry as THREEShapeGeometry,
 } from 'three';
 import { SVGLoader } from 'three-stdlib';
@@ -56,3 +54,7 @@ export const convertSvgToMesh = (data) => {
   svgGroup.scale.multiplyScalar(0.005);
   return svgGroup;
 };
+
+export function getDataUri(svg: string): string {
+  return `data:image/svg+xml, ${encodeURI(svg)}`;
+}