Skip to content

Commit

Permalink
fix(Scene): animation components added at correct time behind flag
Browse files Browse the repository at this point in the history
  • Loading branch information
@haweston @mumanity
haweston authored and mumanity committed Oct 31, 2023
1 parent b4e4a22 commit da149cc
Show file tree
Hide file tree
Showing 13 changed files with 88 additions and 251 deletions.
0 ...cene-composer/public/AIMIMATED_MIXER.gltf → ...scene-composer/public/ANIMATED_MIXER.gltf
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions packages/scene-composer/public/animation-test-scene.scene.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"properties": {}
},
{
"name": "AIMIMATED_MIXER",
"name": "ANIMATED_MIXER",
"transform": {
"position": [
-0.2548017433916856,
Expand All @@ -63,12 +63,12 @@
"components": [
{
"type": "ModelRef",
"uri": "AIMIMATED_MIXER.gltf",
"uri": "ANIMATED_MIXER.gltf",
"modelType": "GLTF"
},
{
"currentAnimations": [],
"uri": "AIMIMATED_MIXER.gltf",
"uri": "ANIMATED_MIXER.gltf",
"type": "Animation"
}
],
Expand Down
44 changes: 27 additions & 17 deletions packages/scene-composer/src/components/panels/AddComponentMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ import { getGlobalSettings } from '../../common/GlobalSettings';
import { sceneComposerIdContext } from '../../common/sceneComposerIdContext';
import { COMPOSER_FEATURES, KnownComponentType } from '../../interfaces';
import { Component } from '../../models/SceneModels';
import { IDataOverlayComponentInternal, useStore } from '../../store';
import { IDataOverlayComponentInternal, IModelRefComponentInternal, useStore, useEditorState } from '../../store';
import { IEntityBindingComponentInternal, IAnimationComponentInternal } from '../../store/internalInterfaces';
import { findComponentByType } from '../../utils/nodeUtils';
import { ToolbarItem } from '../toolbars/common/ToolbarItem';
import { ToolbarItemOptionRaw, ToolbarItemOptions } from '../toolbars/common/types';
import { animationObjectKey } from '../three-fiber/AnimationComponent/AnimationComponent';

interface AddComponentMenuProps {
onSelect?: (selectedObject: ObjectTypes) => void;
Expand Down Expand Up @@ -50,10 +51,11 @@ export const AddComponentMenu: React.FC<AddComponentMenuProps> = ({ onSelect })
const { formatMessage } = useIntl();
const selectedSceneNode = getSceneNodeByRef(selectedSceneNodeRef);
const AnimationComponentEnabled = getGlobalSettings().featureConfig[COMPOSER_FEATURES.Animations];
const animationComponent = findComponentByType(
selectedSceneNode,
KnownComponentType.Animation,
) as IAnimationComponentInternal;
const { getObject3DBySceneNodeRef } = useEditorState(sceneComposerId);

const object3D = selectedSceneNode ? getObject3DBySceneNodeRef(selectedSceneNode.ref) : undefined;
const animationObject3D = object3D?.getObjectByName(animationObjectKey);
const canAnimate = animationObject3D ? animationObject3D?.animations.length > 0 : false;

const isTagComponent = !!findComponentByType(selectedSceneNode, KnownComponentType.Tag);
const isOverlayComponent = !!findComponentByType(selectedSceneNode, KnownComponentType.DataOverlay);
Expand Down Expand Up @@ -89,14 +91,15 @@ export const AddComponentMenu: React.FC<AddComponentMenuProps> = ({ onSelect })
isDisabled: isEntityBindingComponent,
},
];
const addAnimationItem = AnimationComponentEnabled
? [
{
uuid: ObjectTypes.Animations,
isDisabled: false,
},
]
: [];
const addAnimationItem =
AnimationComponentEnabled && canAnimate && !isAnimationComponent
? [
{
uuid: ObjectTypes.Animations,
isDisabled: false,
},
]
: [];
return [
{
icon: { name: 'add-plus' as IconProps.Name },
Expand All @@ -113,6 +116,7 @@ export const AddComponentMenu: React.FC<AddComponentMenuProps> = ({ onSelect })
isTagComponent,
isAnimationComponent,
AnimationComponentEnabled,
canAnimate,
]);

const handleAddOverlay = useCallback(() => {
Expand Down Expand Up @@ -156,10 +160,16 @@ export const AddComponentMenu: React.FC<AddComponentMenuProps> = ({ onSelect })
const handleAddAnimations = useCallback(() => {
if (!selectedSceneNodeRef) return;

let selector = animationComponent.selector || 0;
selector = selector + 1;
const updatedComponent = { ...animationComponent, selector };
updateComponentInternal(selectedSceneNodeRef, updatedComponent);
const modelRefComponent = findComponentByType(selectedSceneNode, KnownComponentType.ModelRef);
if (modelRefComponent) {
const animationComponent: IAnimationComponentInternal = {
ref: THREE.MathUtils.generateUUID(),
currentAnimations: [],
type: KnownComponentType.Animation,
uri: (modelRefComponent as IModelRefComponentInternal).uri,
};
addComponentInternal(selectedSceneNodeRef, animationComponent);
}
}, [selectedSceneNodeRef, selectedSceneNode]);

return addComponentMenuItems.length > 1 ? (
Expand Down
15 changes: 10 additions & 5 deletions packages/scene-composer/src/components/panels/SettingsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ valueDataBindingPr
const matterportEnabled = getGlobalSettings().featureConfig[COMPOSER_FEATURES.Matterport];
const overlayEnabled = getGlobalSettings().featureConfig[COMPOSER_FEATURES.Overlay];
const sceneAppearanceEnabled = getGlobalSettings().featureConfig[COMPOSER_FEATURES.SceneAppearance];
const animationComponentEnabled = getGlobalSettings().featureConfig[COMPOSER_FEATURES.Animations];
const dynamicSceneEnabled = useDynamicScene();

const selectedEnvPreset = useStore(sceneComposerId)((state) =>
Expand Down Expand Up @@ -117,11 +118,15 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ valueDataBindingPr
</Box>
}
>
<ComponentVisibilityToggle
componentType={KnownComponentType.Animation}
label={intl.formatMessage(visibilityToggleLabels[KnownComponentType.Animation])}
/>
<Divider />
{animationComponentEnabled && (
<>
<ComponentVisibilityToggle
componentType={KnownComponentType.Animation}
label={intl.formatMessage(visibilityToggleLabels[KnownComponentType.Animation])}
/>
<Divider />
</>
)}
<ComponentVisibilityToggle
componentType={KnownComponentType.MotionIndicator}
label={intl.formatMessage(visibilityToggleLabels[KnownComponentType.MotionIndicator])}
Expand Down
150 changes: 0 additions & 150 deletions packages/scene-composer/src/components/panels/__snapshots__/SettingsPanel.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,31 +23,6 @@ exports[`SettingsPanel contains expected elements. should contains default eleme
Toggle visibility
</div>
</div>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
>
<div
data-mocked="Box"
display="inline"
margin="{\\"bottom\\":\\"xxs\\"}"
variant="p"
>
Animation
</div>
<div
data-mocked="Box"
float="right"
>
<div
data-mocked="Toggle"
disabled=""
/>
</div>
</div>
<hr
class="c0"
/>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
Expand Down Expand Up @@ -152,31 +127,6 @@ exports[`SettingsPanel contains expected elements. should contains default eleme
Toggle visibility
</div>
</div>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
>
<div
data-mocked="Box"
display="inline"
margin="{\\"bottom\\":\\"xxs\\"}"
variant="p"
>
Animation
</div>
<div
data-mocked="Box"
float="right"
>
<div
data-mocked="Toggle"
disabled=""
/>
</div>
</div>
<hr
class="c0"
/>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
Expand Down Expand Up @@ -252,31 +202,6 @@ exports[`SettingsPanel contains expected elements. should contains settings elem
Toggle visibility
</div>
</div>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
>
<div
data-mocked="Box"
display="inline"
margin="{\\"bottom\\":\\"xxs\\"}"
variant="p"
>
Animation
</div>
<div
data-mocked="Box"
float="right"
>
<div
data-mocked="Toggle"
disabled=""
/>
</div>
</div>
<hr
class="c0"
/>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
Expand Down Expand Up @@ -381,31 +306,6 @@ exports[`SettingsPanel contains expected elements. should contains settings elem
Toggle visibility
</div>
</div>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
>
<div
data-mocked="Box"
display="inline"
margin="{\\"bottom\\":\\"xxs\\"}"
variant="p"
>
Animation
</div>
<div
data-mocked="Box"
float="right"
>
<div
data-mocked="Toggle"
disabled=""
/>
</div>
</div>
<hr
class="c0"
/>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
Expand Down Expand Up @@ -578,31 +478,6 @@ exports[`SettingsPanel contains expected elements. should contains settings elem
Toggle visibility
</div>
</div>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
>
<div
data-mocked="Box"
display="inline"
margin="{\\"bottom\\":\\"xxs\\"}"
variant="p"
>
Animation
</div>
<div
data-mocked="Box"
float="right"
>
<div
data-mocked="Toggle"
disabled=""
/>
</div>
</div>
<hr
class="c0"
/>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
Expand Down Expand Up @@ -732,31 +607,6 @@ exports[`SettingsPanel contains expected elements. should contains tag settings
Toggle visibility
</div>
</div>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
>
<div
data-mocked="Box"
display="inline"
margin="{\\"bottom\\":\\"xxs\\"}"
variant="p"
>
Animation
</div>
<div
data-mocked="Box"
float="right"
>
<div
data-mocked="Toggle"
disabled=""
/>
</div>
</div>
<hr
class="c0"
/>
<div
data-mocked="Box"
margin="{\\"vertical\\":\\"s\\"}"
Expand Down

0 comments on commit da149cc

Please sign in to comment.