-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(EnvironmentModel): Adding support for environment overlay (#262)
Add the EnvironmentModelComponent to adi in possible updates for loading of model later as well as offload responsibility from ModelRefComponent Adds a menu item to the add object menu to add at most 1 environment model Removes Sub model Tree from Environment models Add more restrictions to the Environment nodes. - Environment Nodes cannot have children - Environment Nodes have no Transform Editor - Environment Nodes cannot have Transform controls - Environment Nodes cannot have a model shader - Environment controls cannot have children Add tests
- Loading branch information
1 parent
be5b588
commit eb91179
Showing
24 changed files
with
1,335 additions
and
4,354 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
...scene-composer/src/components/three-fiber/ModelRefComponent/EnvironmentModelComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { IModelRefComponentInternal, ISceneNodeInternal, useEditorState } from '../../../store'; | ||
| import { useSceneComposerId } from '../../../common/sceneComposerIdContext'; | ||
|
|
||
| import { GLTFModelComponent } from './GLTFModelComponent'; | ||
|
|
||
| interface EnvironmentModelComponentProps { | ||
| component: IModelRefComponentInternal; | ||
| node: ISceneNodeInternal; | ||
| } | ||
|
|
||
| export const EnvironmentModelComponent: React.FC<EnvironmentModelComponentProps> = ({ node, component }) => { | ||
| const sceneComposerId = useSceneComposerId(); | ||
| const { isEditing, cameraControlsType } = useEditorState(sceneComposerId); | ||
|
|
||
| if (isEditing()) { | ||
| return ( | ||
| <GLTFModelComponent | ||
| key={component.ref} | ||
| node={node} | ||
| component={component} | ||
| hiddenWhileImmersive={cameraControlsType === 'immersive'} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return <></>; | ||
| }; |
57 changes: 57 additions & 0 deletions
57
...src/components/three-fiber/ModelRefComponent/__tests__/EnvironmentModelComponent.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| import { EnvironmentModelComponent } from '../EnvironmentModelComponent'; | ||
| import { IModelRefComponentInternal, ISceneNodeInternal, useStore } from '../../../../store'; | ||
| import { ModelType } from '../../../../models/SceneModels'; | ||
| import { KnownComponentType } from '../../../../interfaces'; | ||
|
|
||
| // @ts-ignore | ||
| jest.mock('scheduler', () => require('scheduler/unstable_mock')); | ||
|
|
||
| jest.mock('../GLTFModelComponent', () => ({ | ||
| GLTFModelComponent: (props) => <div id={'GLTFModelComponent'} {...props} />, | ||
| })); | ||
|
|
||
| /* eslint-enable */ | ||
|
|
||
| describe('EnvironmentModelComponent', () => { | ||
| const component: IModelRefComponentInternal = { | ||
| uri: 'uri', | ||
| modelType: ModelType.GLB, | ||
| ref: 'test-ref', | ||
| type: KnownComponentType.ModelRef, | ||
| }; | ||
|
|
||
| const node: ISceneNodeInternal = { | ||
| ref: 'test-ref', | ||
| name: 'test-name', | ||
| transform: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [0, 0, 0] }, | ||
| transformConstraint: {}, | ||
| components: [component], | ||
| childRefs: [], | ||
| properties: {}, | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it('should render as expected when editing', () => { | ||
| useStore('default').setState({ | ||
| isEditing: jest.fn().mockReturnValue(true), | ||
| }); | ||
| const { container } = render(<EnvironmentModelComponent component={component} node={node} />); | ||
|
|
||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should render as empty when viewing', () => { | ||
| useStore('default').setState({ | ||
| isEditing: jest.fn().mockReturnValue(false), | ||
| }); | ||
| const { container } = render(<EnvironmentModelComponent component={component} node={node} />); | ||
|
|
||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
| }); |
13 changes: 13 additions & 0 deletions
13
...e-fiber/ModelRefComponent/__tests__/__snapshots__/EnvironmentModelComponent.spec.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`EnvironmentModelComponent should render as empty when viewing 1`] = `<div />`; | ||
|
|
||
| exports[`EnvironmentModelComponent should render as expected when editing 1`] = ` | ||
| <div> | ||
| <div | ||
| component="[object Object]" | ||
| id="GLTFModelComponent" | ||
| node="[object Object]" | ||
| /> | ||
| </div> | ||
| `; |
30 changes: 29 additions & 1 deletion
30
.../src/components/three-fiber/ModelRefComponent/__tests__/__snapshots__/index.spec.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,31 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`ModelRefComponent should render correctly 1`] = `null`; | ||
| exports[`ModelRefComponent should render correctly 1`] = ` | ||
| <div> | ||
| <div | ||
| component="[object Object]" | ||
| id="GLTFModelComponent" | ||
| node="[object Object]" | ||
| /> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`ModelRefComponent should render correctly with Environment Model Type 1`] = ` | ||
| <div> | ||
| <div | ||
| component="[object Object]" | ||
| id="EnvironmentModelComponent" | ||
| node="[object Object]" | ||
| /> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`ModelRefComponent should render correctly with Tiles Model Type 1`] = ` | ||
| <div> | ||
| <div | ||
| component="[object Object]" | ||
| id="TilesModelComponent" | ||
| node="[object Object]" | ||
| /> | ||
| </div> | ||
| `; |
Oops, something went wrong.