From f7cbd969f93ae021ebfa6853bd478b43e890c738 Mon Sep 17 00:00:00 2001 From: Xinyi Xu Date: Fri, 14 Oct 2022 09:18:40 -0700 Subject: [PATCH] fix(composer): use arrow data as texture to avoid public path issue (#276) --- examples/react-app/README.md | 2 -- examples/react-app/config-overrides.js | 19 --------------- packages/scene-composer/src/assets/index.ts | 1 - .../icons/ViewCursorIcon.tsx} | 17 -------------- .../scene-composer/src/assets/svgs/index.ts | 1 + .../src/assets/viewpoints/Icons.ts | 23 ------------------- .../src/assets/viewpoints/index.ts | 2 -- .../viewpoint/ViewCursorWidget.tsx | 8 +++---- .../MotionIndicatorComponent/helpers.ts | 10 +++++++- .../scene-composer/src/utils/svgUtils.spec.ts | 15 ++++++++---- packages/scene-composer/src/utils/svgUtils.ts | 6 +++-- 11 files changed, 29 insertions(+), 75 deletions(-) rename packages/scene-composer/src/assets/{viewpoints/IconSvgs.tsx => svgs/icons/ViewCursorIcon.tsx} (50%) delete mode 100644 packages/scene-composer/src/assets/viewpoints/Icons.ts delete mode 100644 packages/scene-composer/src/assets/viewpoints/index.ts diff --git a/examples/react-app/README.md b/examples/react-app/README.md index 649ab164d..76c31a01e 100644 --- a/examples/react-app/README.md +++ b/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: diff --git a/examples/react-app/config-overrides.js b/examples/react-app/config-overrides.js index b5a3f3bb9..2afcebdf4 100644 --- a/examples/react-app/config-overrides.js +++ b/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; } diff --git a/packages/scene-composer/src/assets/index.ts b/packages/scene-composer/src/assets/index.ts index 82beda023..fa73c3cc3 100644 --- a/packages/scene-composer/src/assets/index.ts +++ b/packages/scene-composer/src/assets/index.ts @@ -1,2 +1 @@ export * from './anchors'; -export * from './viewpoints'; diff --git a/packages/scene-composer/src/assets/viewpoints/IconSvgs.tsx b/packages/scene-composer/src/assets/svgs/icons/ViewCursorIcon.tsx similarity index 50% rename from packages/scene-composer/src/assets/viewpoints/IconSvgs.tsx rename to packages/scene-composer/src/assets/svgs/icons/ViewCursorIcon.tsx index 4bc04a7b9..85e9a5c6b 100644 --- a/packages/scene-composer/src/assets/viewpoints/IconSvgs.tsx +++ b/packages/scene-composer/src/assets/svgs/icons/ViewCursorIcon.tsx @@ -1,20 +1,3 @@ -/*eslint-disable*/ -export const ViewpointSvgString = ` - - - - - - -`; - -export const SelectedViewpointSvgString = ` - - - - -`; - export const ViewCursorMoveSvgString = ` diff --git a/packages/scene-composer/src/assets/svgs/index.ts b/packages/scene-composer/src/assets/svgs/index.ts index 0daaa2c38..33d8fd445 100644 --- a/packages/scene-composer/src/assets/svgs/index.ts +++ b/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'; diff --git a/packages/scene-composer/src/assets/viewpoints/Icons.ts b/packages/scene-composer/src/assets/viewpoints/Icons.ts deleted file mode 100644 index 1d7bd85ce..000000000 --- a/packages/scene-composer/src/assets/viewpoints/Icons.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { - SelectedViewpointSvgString, - ViewCursorEditSvgString, - ViewCursorMoveSvgString, - ViewpointSvgString, -} from './IconSvgs'; - -export class Svg { - protected defaultSvg: string; - - constructor(defaultSvg: string) { - this.defaultSvg = defaultSvg; - } - - get dataUri(): string { - return `data:image/svg+xml, ${encodeURI(this.defaultSvg)}`; - } -} - -export const ViewpointIcon = new Svg(ViewpointSvgString); -export const SelectedViewpointIcon = new Svg(SelectedViewpointSvgString); -export const ViewCursorMoveIcon = new Svg(ViewCursorMoveSvgString); -export const ViewCursorEditIcon = new Svg(ViewCursorEditSvgString); diff --git a/packages/scene-composer/src/assets/viewpoints/index.ts b/packages/scene-composer/src/assets/viewpoints/index.ts deleted file mode 100644 index 91e8d85fb..000000000 --- a/packages/scene-composer/src/assets/viewpoints/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Icons'; -export * from './IconSvgs'; diff --git a/packages/scene-composer/src/augmentations/components/three-fiber/viewpoint/ViewCursorWidget.tsx b/packages/scene-composer/src/augmentations/components/three-fiber/viewpoint/ViewCursorWidget.tsx index 6c64d5355..4976d113a 100644 --- a/packages/scene-composer/src/augmentations/components/three-fiber/viewpoint/ViewCursorWidget.tsx +++ b/packages/scene-composer/src/augmentations/components/three-fiber/viewpoint/ViewCursorWidget.tsx @@ -3,11 +3,11 @@ 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(null); @@ -15,8 +15,8 @@ export const ViewCursorWidget = () => { 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) => { diff --git a/packages/scene-composer/src/components/three-fiber/MotionIndicatorComponent/helpers.ts b/packages/scene-composer/src/components/three-fiber/MotionIndicatorComponent/helpers.ts index c7a2507f6..32fc73141 100644 --- a/packages/scene-composer/src/components/three-fiber/MotionIndicatorComponent/helpers.ts +++ b/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 = ` + + + + +`; +const arrow = getDataUri(arrowSvg); /** * Calculate the number of repeated arrows in x direction based on number of repeat in y, so that the diff --git a/packages/scene-composer/src/utils/svgUtils.spec.ts b/packages/scene-composer/src/utils/svgUtils.spec.ts index 27a5d4017..c86dfe4b8 100644 --- a/packages/scene-composer/src/utils/svgUtils.spec.ts +++ b/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); + }); }); diff --git a/packages/scene-composer/src/utils/svgUtils.ts b/packages/scene-composer/src/utils/svgUtils.ts index f8792b6ac..c906cd9b8 100644 --- a/packages/scene-composer/src/utils/svgUtils.ts +++ b/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)}`; +}