Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 16:51:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

implement page controller

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-01 12:47:17 +05:30
parent 3a9a0dc811
commit ad9105f4a4
12 changed files with 208 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/App/App.js
View File

@ -1,5 +1,6 @@
import React, { useRef, useEffect, useContext, Suspense } from 'react';
import { useTranslation } from 'react-i18next';
import { PanZoom } from 'react-easy-panzoom';
import AppContext from '../../context/AppContext';
import PageContext from '../../context/PageContext';
@ -8,9 +9,11 @@ import LeftSidebar from '../LeftSidebar/LeftSidebar';
import RightSidebar from '../RightSidebar/RightSidebar';
import templates from '../../templates';
import PageController from '../../shared/PageController';
const App = () => {
const pageRef = useRef(null);
const panZoomRef = useRef(null);
const { i18n } = useTranslation();
const context = useContext(AppContext);
@ -18,24 +21,36 @@ const App = () => {
const { theme, settings } = state;
const pageContext = useContext(PageContext);
const { setPageElement } = pageContext;
const { setPageRef, setPanZoomRef } = pageContext;
useEffect(() => {
setPageElement(pageRef);
setPageRef(pageRef);
setPanZoomRef(panZoomRef);
i18n.changeLanguage(settings.language);
const storedState = JSON.parse(localStorage.getItem('state'));
dispatch({ type: 'import_data', payload: storedState });
}, [dispatch, setPageElement, i18n, settings.language]);
}, [dispatch, setPageRef, setPanZoomRef, i18n, settings.language]);
return (
<Suspense fallback="Loading...">
<div className="h-screen overflow-hidden grid grid-cols-5 items-center">
<div className="h-screen grid grid-cols-5 items-center">
<LeftSidebar />
<div className="z-0 h-screen col-span-3 flex overflow-scroll justify-center items-center">
<div id="page" ref={pageRef} className="shadow-2xl">
{templates.find(x => theme.layout.toLowerCase() === x.key).component()}
</div>
<div className="relative z-0 h-screen overflow-hidden col-span-3 flex justify-center items-center">
<PanZoom
ref={panZoomRef}
enableBoundingBox
minZoom="0.4"
style={{
outline: 'none',
}}
>
<div id="page" ref={pageRef} className="shadow-2xl">
{templates.find(x => theme.layout.toLowerCase() === x.key).component()}
</div>
</PanZoom>
<PageController />
</div>
<RightSidebar />

85
src/components/RightSidebar/tabs/Actions.js
View File

@ -7,55 +7,14 @@ import html2canvas from 'html2canvas';
import * as jsPDF from 'jspdf';
import PageContext from '../../../context/PageContext';
import { importJson } from '../../../utils';
const ActionsTab = ({ data, theme, dispatch }) => {
const pageContext = useContext(PageContext);
const { pageElement } = pageContext;
const { pageRef, panZoomRef } = pageContext;
const { t } = useTranslation('rightSidebar');
const fileInputRef = useRef(null);
const importJson = event => {
const fr = new FileReader();
fr.addEventListener('load', () => {
const importedObject = JSON.parse(fr.result);
dispatch({ type: 'import_data', payload: importedObject });
dispatch({ type: 'save_data' });
});
fr.readAsText(event.target.files[0]);
};
const printAsPdf = () => {
pageElement.current.style.display = 'table';
pageElement.current.style.overflow = 'visible';
html2canvas(pageElement.current, {
scale: 5,
useCORS: true,
allowTaint: true,
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'mm', 'a4');
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const widthRatio = pageWidth / canvas.width;
const heightRatio = pageHeight / canvas.height;
const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
const canvasWidth = canvas.width * ratio;
const canvasHeight = canvas.height * ratio;
const marginX = (pageWidth - canvasWidth) / 2;
const marginY = (pageHeight - canvasHeight) / 2;
pageElement.current.style.display = 'block';
pageElement.current.style.overflow = 'scroll';
doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
doc.save(`RxResume_${Date.now()}.pdf`);
});
};
const exportToJson = () => {
const backupObj = { data, theme };
const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(backupObj))}`;
@ -65,6 +24,39 @@ const ActionsTab = ({ data, theme, dispatch }) => {
dlAnchor.click();
};
const printAsPdf = () => {
panZoomRef.current.autoCenter(1);
panZoomRef.current.reset();
setTimeout(() => {
html2canvas(pageRef.current, {
scale: 5,
useCORS: true,
allowTaint: true,
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'mm', 'a4');
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const widthRatio = pageWidth / canvas.width;
const heightRatio = pageHeight / canvas.height;
const ratio = widthRatio > heightRatio ? heightRatio : widthRatio;
const canvasWidth = canvas.width * ratio;
const canvasHeight = canvas.height * ratio;
const marginX = (pageWidth - canvasWidth) / 2;
const marginY = (pageHeight - canvasHeight) / 2;
panZoomRef.current.autoCenter(0.7);
doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
doc.save(`RxResume_${Date.now()}.pdf`);
});
}, 250);
};
const loadDemoData = () => {
dispatch({ type: 'load_demo_data' });
dispatch({ type: 'save_data' });
@ -86,7 +78,12 @@ const ActionsTab = ({ data, theme, dispatch }) => {
<p className="text-sm">{t('actions.importExport.body')}</p>
<input ref={fileInputRef} type="file" className="hidden" onChange={importJson} />
<input
ref={fileInputRef}
type="file"
className="hidden"
onChange={e => importJson(e, dispatch)}
/>
<a id="downloadAnchor" className="hidden" />
<div className="mt-4 grid grid-cols-2 col-gap-6">