Skip to content

Commit

Permalink
[Feature] Hide animation panel for print intent (#129)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexandraFlavia9 authored Feb 8, 2024
1 parent 3eabdba commit bed63b0
Show file tree
Hide file tree
Showing 7 changed files with 215 additions and 75 deletions.
1 change: 1 addition & 0 deletions __mocks__/styles.mock.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = {};
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"validate-versions": "node validate_versions.cjs"
},
"dependencies": {
"@chili-publish/studio-sdk": "1.5.0",
"@chili-publish/studio-sdk": "1.5.14",
"@chili-publish/grafx-shared-components": "^0.52.1",
"axios": "^1.6.0",
"react": "^18.2.0",
Expand Down
24 changes: 17 additions & 7 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import StudioSDK, {
DocumentType,
ConnectorType,
ConnectorInstance,
LayoutIntent,
} from '@chili-publish/studio-sdk';
import { Colors, useDebounce, useMobileSize } from '@chili-publish/grafx-shared-components';
import packageInfo from '../package.json';
Expand Down Expand Up @@ -40,6 +41,7 @@ function App({ projectConfig }: { projectConfig: ProjectConfig }) {
const [isDocumentLoaded, setIsDocumentLoaded] = useState(false);
const [mediaConnectors, setMediaConnectors] = useState<ConnectorInstance[]>([]);
const [fontsConnectors, setFontsConnectors] = useState<ConnectorInstance[]>([]);
const [layoutIntent, setLayoutIntent] = useState<LayoutIntent | null>(null);

const enableAutoSaveRef = useRef(false);
const isMobileSize = useMobileSize();
Expand Down Expand Up @@ -92,8 +94,8 @@ function App({ projectConfig }: { projectConfig: ProjectConfig }) {
pageId: null,
left: 0,
top: 0,
width: Math.floor(document.getElementsByTagName('iframe')[0].getBoundingClientRect().width),
height: Math.floor(document.getElementsByTagName('iframe')[0].getBoundingClientRect().height),
width: Math.floor(document.getElementsByTagName('iframe')?.[0]?.getBoundingClientRect().width),
height: Math.floor(document.getElementsByTagName('iframe')?.[0]?.getBoundingClientRect().height),
};

await window.SDK.canvas.zoomToPage(
Expand Down Expand Up @@ -122,6 +124,7 @@ function App({ projectConfig }: { projectConfig: ProjectConfig }) {
onSelectedLayoutPropertiesChanged: (layoutProperties) => {
if (layoutProperties) {
setAnimationLength(layoutProperties.timelineLengthMs.value);
setLayoutIntent((layoutProperties?.intent as Record<string, unknown>)?.value as LayoutIntent);
}
},
onSelectedLayoutIdChanged() {
Expand Down Expand Up @@ -203,6 +206,7 @@ function App({ projectConfig }: { projectConfig: ProjectConfig }) {
}

if (!fetchedDocument) return;

await window.SDK.document.load(fetchedDocument).then((res) => {
setIsDocumentLoaded(res.success);
});
Expand All @@ -217,6 +221,10 @@ function App({ projectConfig }: { projectConfig: ProjectConfig }) {
setFontsConnectors(res.parsedData);
}
});

const layoutIntentData = (await window.SDK.layout.getSelected()).parsedData?.intent.value || null;
setLayoutIntent(layoutIntentData);

setHandTool();
zoomToPage();
};
Expand Down Expand Up @@ -254,11 +262,13 @@ function App({ projectConfig }: { projectConfig: ProjectConfig }) {
>
<div className="chili-editor" id="chili-editor" />
</div>
<AnimationTimeline
scrubberTimeMs={scrubberTimeMs}
animationLength={animationLength}
isAnimationPlaying={animationStatus}
/>
{layoutIntent === LayoutIntent.digitalAnimated ? (
<AnimationTimeline
scrubberTimeMs={scrubberTimeMs}
animationLength={animationLength}
isAnimationPlaying={animationStatus}
/>
) : null}
</CanvasContainer>
</MainContentContainer>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/animationTimeline/AnimationTimeline.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Timeline } from '@chili-publish/grafx-shared-components';
import { AnimationTimelineWrapper } from './AnimationTimeline.styles';
import { getDataTestIdForSUI } from '../../utils/dataIds';

interface IAnimationTimeline {
scrubberTimeMs: number;
Expand All @@ -22,7 +23,7 @@ function AnimationTimeline(props: IAnimationTimeline) {
};

return (
<AnimationTimelineWrapper>
<AnimationTimelineWrapper data-testid={getDataTestIdForSUI('timeline-wrapper')}>
{animationLength > 0 && (
<Timeline
animationLength={animationLength}
Expand Down
62 changes: 62 additions & 0 deletions src/tests/AppDigitalIntent.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { LayoutIntent } from '@chili-publish/studio-sdk';
import { render, screen, waitFor } from '@testing-library/react';
import App from '../App';
import { getDataTestIdForSUI } from '../utils/dataIds';
import { ProjectConfig } from '../types/types';

const projectConfig = {
projectId: 'projectId',
projectName: 'projectName',
onProjectInfoRequested: () => Promise.resolve(''),
onProjectDocumentRequested: () => Promise.resolve({ deocId: '1' }),
onProjectLoaded: () => null,
onProjectSave: () => null,
onAuthenticationRequested: () => 'authToken',
onAuthenticationExpired: () => null,
onUserInterfaceBack: () => null,
onLogInfoRequested: () => null,
onProjectGetDownloadLink: () => null,
outputSettings: {},
uiOptions: {},
};
jest.mock('@chili-publish/studio-sdk', () => {
const originalModule = jest.requireActual('@chili-publish/studio-sdk');

return {
__esModule: true,
...originalModule,
/* eslint-disable */
default: function () {
/* eslint-enable */
return {
loadEditor: () => '',
configuration: { setValue: jest.fn() },
connector: {
getAllByType: jest
.fn()
.mockImplementation(() => Promise.resolve({ success: true, parsedData: [] })),
},
layout: {
getSelected: jest
.fn()
.mockImplementation(() =>
Promise.resolve({ parsedData: { intent: { value: LayoutIntent.digitalAnimated } } }),
),
},
document: { load: jest.fn().mockImplementation(() => Promise.resolve({ sucess: true })) },
tool: { setHand: jest.fn() },
canvas: { zoomToPage: jest.fn() },
};
},
};
});

describe('AppDigitalIntent', () => {
it('Timeline should not be shown if layout intent is not Digital animated', async () => {
render(<App projectConfig={projectConfig as unknown as ProjectConfig} />);

await waitFor(() => {
expect(screen.getByTestId(getDataTestIdForSUI('timeline-wrapper'))).toBeInTheDocument();
});
});
});
62 changes: 62 additions & 0 deletions src/tests/AppPrintIntent.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { render, screen, waitFor } from '@testing-library/react';
import { LayoutIntent } from '@chili-publish/studio-sdk';
import App from '../App';
import { getDataTestIdForSUI } from '../utils/dataIds';
import { ProjectConfig } from '../types/types';

const projectConfig = {
projectId: 'projectId',
projectName: 'projectName',
onProjectInfoRequested: () => Promise.resolve(''),
onProjectDocumentRequested: () => Promise.resolve({ deocId: '1' }),
onProjectLoaded: () => null,
onProjectSave: () => null,
onAuthenticationRequested: () => 'authToken',
onAuthenticationExpired: () => null,
onUserInterfaceBack: () => null,
onLogInfoRequested: () => null,
onProjectGetDownloadLink: () => null,
outputSettings: {},
uiOptions: {},
};
jest.mock('@chili-publish/studio-sdk', () => {
const originalModule = jest.requireActual('@chili-publish/studio-sdk');

return {
__esModule: true,
...originalModule,
/* eslint-disable */
default: function () {
/* eslint-enable */
return {
loadEditor: () => '',
configuration: { setValue: jest.fn() },
connector: {
getAllByType: jest
.fn()
.mockImplementation(() => Promise.resolve({ success: true, parsedData: [] })),
},
layout: {
getSelected: jest
.fn()
.mockImplementation(() =>
Promise.resolve({ success: true, intent: { value: LayoutIntent.print } }),
),
},
document: { load: jest.fn().mockImplementation(() => Promise.resolve({ sucess: true })) },
tool: { setHand: jest.fn() },
canvas: { zoomToPage: jest.fn() },
};
},
};
});

describe('AppPrintIntent', () => {
it('Timeline should not be shown if layout intent is not Digital animated', async () => {
render(<App projectConfig={projectConfig as unknown as ProjectConfig} />);

await waitFor(() => {
expect(screen.queryByTestId(getDataTestIdForSUI('timeline-wrapper'))).not.toBeInTheDocument();
});
});
});
Loading

0 comments on commit bed63b0

Please sign in to comment.