58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
|
import clsx from 'clsx';
|
||
|
import get from 'lodash/get';
|
||
|
import isEmpty from 'lodash/isEmpty';
|
||
|
import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
|
||
|
|
||
|
import { useAppSelector } from '@/store/hooks';
|
||
|
|
||
|
import ArtboardController from './ArtboardController';
|
||
|
import styles from './Center.module.scss';
|
||
|
import Header from './Header';
|
||
|
import Page from './Page';
|
||
|
|
||
|
const Center = () => {
|
||
|
const orientation = useAppSelector((state) => state.build.page.orientation);
|
||
|
|
||
|
const resume = useAppSelector((state) => state.resume);
|
||
|
const layout: string[][][] = get(resume, 'metadata.layout');
|
||
|
|
||
|
if (isEmpty(resume)) return null;
|
||
|
|
||
|
return (
|
||
|
<div className={clsx(styles.center)}>
|
||
|
<Header />
|
||
|
|
||
|
<TransformWrapper
|
||
|
centerOnInit
|
||
|
minScale={0.25}
|
||
|
initialScale={0.95}
|
||
|
limitToBounds={false}
|
||
|
centerZoomedOut={false}
|
||
|
pinch={{ step: 1 }}
|
||
|
wheel={{ step: 0.1 }}
|
||
|
>
|
||
|
{(controllerProps) => (
|
||
|
<>
|
||
|
<TransformComponent wrapperClass={styles.wrapper}>
|
||
|
<div
|
||
|
className={clsx({
|
||
|
[styles.artboard]: true,
|
||
|
'flex-col': orientation === 'vertical',
|
||
|
})}
|
||
|
>
|
||
|
{layout.map((_, pageIndex) => (
|
||
|
<Page key={pageIndex} page={pageIndex} showPageNumbers />
|
||
|
))}
|
||
|
</div>
|
||
|
</TransformComponent>
|
||
|
|
||
|
<ArtboardController {...controllerProps} />
|
||
|
</>
|
||
|
)}
|
||
|
</TransformWrapper>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default Center;
|