Skip to content

Commit

Permalink
fix(scene composer): modifying auto collapse to only apply to viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@mumanity @mukeshsahay
mumanity authored and mukeshsahay committed May 18, 2023
1 parent 2bf7b13 commit aaf6338
Show file tree
Hide file tree
Showing 7 changed files with 237 additions and 21 deletions.
11 changes: 7 additions & 4 deletions ...e-composer/src/augmentations/components/three-fiber/common/SvgIconToWidgetSprite.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,14 @@ describe('svgIconToWidgetSprite', () => {
['Error', { key: DefaultAnchorStatus.Error, icon: ErrorIconSvgString }],
['Video', { key: DefaultAnchorStatus.Video, icon: VideoIconSvgString }],
];

interface Icons {
key: string;
icon: string;
}
icons.forEach((value) => {
it(`it should render the ${value[0]} correctly`, () => {
jest.spyOn(window.Math, 'random').mockReturnValue(0.1);
const { key, icon } = value[1] as any;
const { key, icon } = value[1] as Icons;
const container = renderer.create(svgIconToWidgetSprite(icon, key, false, true));

expect(container).toMatchSnapshot();
Expand All @@ -34,7 +37,7 @@ describe('svgIconToWidgetSprite', () => {
icons.forEach((value) => {
it(`it should render the always visible ${value[0]} correctly`, () => {
jest.spyOn(window.Math, 'random').mockReturnValue(0.1);
const { key, icon } = value[1] as any;
const { key, icon } = value[1] as Icons;
const container = renderer.create(svgIconToWidgetSprite(icon, key, true, true));

expect(container).toMatchSnapshot();
Expand All @@ -44,7 +47,7 @@ describe('svgIconToWidgetSprite', () => {
icons.forEach((value) => {
it(`it should render the constant sized ${value[0]} correctly`, () => {
jest.spyOn(window.Math, 'random').mockReturnValue(0.1);
const { key, icon } = value[1] as any;
const { key, icon } = value[1] as Icons;
const container = renderer.create(svgIconToWidgetSprite(icon, key, false, false));

expect(container).toMatchSnapshot();
Expand Down
1 change: 1 addition & 0 deletions packages/scene-composer/src/components/__snapshots__/SceneComposerInternal.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ exports[`SceneComposerInternal should render correctly with an empty scene in vi
header={false}
leftPanel={
<ScenePanel
collapse={true}
direction="Left"
panels={
Object {
Expand Down
1 change: 1 addition & 0 deletions packages/scene-composer/src/layouts/SceneLayout/SceneLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ const SceneLayout: FC<SceneLayoutProps> = ({
};
const leftPanelViewModeProps = {
direction: Direction.Left,
collapse: isViewing,
panels: {
[intl.formatMessage({ defaultMessage: 'Hierarchy', description: 'Panel Tab title' })]: <SceneHierarchyPanel />,
[intl.formatMessage({ defaultMessage: 'Settings', description: 'Panel Tab title' })]: (
Expand Down
224 changes: 216 additions & 8 deletions packages/scene-composer/src/layouts/SceneLayout/__snapshots__/SceneLayout.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,14 +139,45 @@ exports[`SceneLayout should not render camera preview if editing and non-camera
<div
className="tm-wrapper-left"
>
<div
className="tm-content"
>
<div
className="tm-collapse-panel open"
>
<div
className="tm-sidePanelTabs"
data-mocked="Tabs"
tabs={
Array [
Object {
"content": <SceneHierarchyPanel />,
"id": "Hierarchy",
"label": "Hierarchy",
},
Object {
"content": <SceneRulesPanel />,
"id": "Rules",
"label": "Rules",
},
Object {
"content": <SettingsPanel />,
"id": "Settings",
"label": "Settings",
},
]
}
/>
</div>
</div>
<div
className="tm-handle"
data-testid="handle"
onClick={[Function]}
>
<div
data-mocked="Icon"
name="angle-right"
name="angle-left"
size="small"
variant="normal"
/>
Expand Down Expand Up @@ -220,14 +251,35 @@ exports[`SceneLayout should not render camera preview if editing and non-camera
<div
className="tm-wrapper-right"
>
<div
className="tm-content"
>
<div
className="tm-collapse-panel open"
>
<div
className="tm-sidePanelTabs"
data-mocked="Tabs"
tabs={
Array [
Object {
"content": <SceneNodeInspectorPanel />,
"id": "Inspector",
"label": "Inspector",
},
]
}
/>
</div>
</div>
<div
className="tm-handle"
data-testid="handle"
onClick={[Function]}
>
<div
data-mocked="Icon"
name="angle-left"
name="angle-right"
size="small"
variant="normal"
/>
Expand Down Expand Up @@ -377,14 +429,45 @@ exports[`SceneLayout should render camera preview if editing and camera componen
<div
className="tm-wrapper-left"
>
<div
className="tm-content"
>
<div
className="tm-collapse-panel open"
>
<div
className="tm-sidePanelTabs"
data-mocked="Tabs"
tabs={
Array [
Object {
"content": <SceneHierarchyPanel />,
"id": "Hierarchy",
"label": "Hierarchy",
},
Object {
"content": <SceneRulesPanel />,
"id": "Rules",
"label": "Rules",
},
Object {
"content": <SettingsPanel />,
"id": "Settings",
"label": "Settings",
},
]
}
/>
</div>
</div>
<div
className="tm-handle"
data-testid="handle"
onClick={[Function]}
>
<div
data-mocked="Icon"
name="angle-right"
name="angle-left"
size="small"
variant="normal"
/>
Expand Down Expand Up @@ -458,14 +541,35 @@ exports[`SceneLayout should render camera preview if editing and camera componen
<div
className="tm-wrapper-right"
>
<div
className="tm-content"
>
<div
className="tm-collapse-panel open"
>
<div
className="tm-sidePanelTabs"
data-mocked="Tabs"
tabs={
Array [
Object {
"content": <SceneNodeInspectorPanel />,
"id": "Inspector",
"label": "Inspector",
},
]
}
/>
</div>
</div>
<div
className="tm-handle"
data-testid="handle"
onClick={[Function]}
>
<div
data-mocked="Icon"
name="angle-left"
name="angle-right"
size="small"
variant="normal"
/>
Expand Down Expand Up @@ -615,14 +719,45 @@ exports[`SceneLayout should render correctly in Edit mode 1`] = `
<div
className="tm-wrapper-left"
>
<div
className="tm-content"
>
<div
className="tm-collapse-panel open"
>
<div
className="tm-sidePanelTabs"
data-mocked="Tabs"
tabs={
Array [
Object {
"content": <SceneHierarchyPanel />,
"id": "Hierarchy",
"label": "Hierarchy",
},
Object {
"content": <SceneRulesPanel />,
"id": "Rules",
"label": "Rules",
},
Object {
"content": <SettingsPanel />,
"id": "Settings",
"label": "Settings",
},
]
}
/>
</div>
</div>
<div
className="tm-handle"
data-testid="handle"
onClick={[Function]}
>
<div
data-mocked="Icon"
name="angle-right"
name="angle-left"
size="small"
variant="normal"
/>
Expand Down Expand Up @@ -696,14 +831,35 @@ exports[`SceneLayout should render correctly in Edit mode 1`] = `
<div
className="tm-wrapper-right"
>
<div
className="tm-content"
>
<div
className="tm-collapse-panel open"
>
<div
className="tm-sidePanelTabs"
data-mocked="Tabs"
tabs={
Array [
Object {
"content": <SceneNodeInspectorPanel />,
"id": "Inspector",
"label": "Inspector",
},
]
}
/>
</div>
</div>
<div
className="tm-handle"
data-testid="handle"
onClick={[Function]}
>
<div
data-mocked="Icon"
name="angle-left"
name="angle-right"
size="small"
variant="normal"
/>
Expand Down Expand Up @@ -893,14 +1049,45 @@ exports[`SceneLayout should render correctly in Edit mode with Modal 1`] = `
<div
className="tm-wrapper-left"
>
<div
className="tm-content"
>
<div
className="tm-collapse-panel open"
>
<div
className="tm-sidePanelTabs"
data-mocked="Tabs"
tabs={
Array [
Object {
"content": <SceneHierarchyPanel />,
"id": "Hierarchy",
"label": "Hierarchy",
},
Object {
"content": <SceneRulesPanel />,
"id": "Rules",
"label": "Rules",
},
Object {
"content": <SettingsPanel />,
"id": "Settings",
"label": "Settings",
},
]
}
/>
</div>
</div>
<div
className="tm-handle"
data-testid="handle"
onClick={[Function]}
>
<div
data-mocked="Icon"
name="angle-right"
name="angle-left"
size="small"
variant="normal"
/>
Expand Down Expand Up @@ -974,14 +1161,35 @@ exports[`SceneLayout should render correctly in Edit mode with Modal 1`] = `
<div
className="tm-wrapper-right"
>
<div
className="tm-content"
>
<div
className="tm-collapse-panel open"
>
<div
className="tm-sidePanelTabs"
data-mocked="Tabs"
tabs={
Array [
Object {
"content": <SceneNodeInspectorPanel />,
"id": "Inspector",
"label": "Inspector",
},
]
}
/>
</div>
</div>
<div
className="tm-handle"
data-testid="handle"
onClick={[Function]}
>
<div
data-mocked="Icon"
name="angle-left"
name="angle-right"
size="small"
variant="normal"
/>
Expand Down
1 change: 0 additions & 1 deletion packages/scene-composer/src/layouts/SceneLayout/components/FoldableContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ type FoldableContainerProps = React.PropsWithChildren<{
direction: Direction;
open: boolean;
setIsOpen: (boolean) => void;
ref: unknown;
}>;

const FoldableContainer: React.FC<FoldableContainerProps> = ({
Expand Down

0 comments on commit aaf6338

Please sign in to comment.