fix issues with scrolling

This commit is contained in:
Amruth Pillai
2020-04-02 16:47:55 +05:30
parent 1ed03673da
commit 126a8ed305
4 changed files with 17 additions and 15 deletions

6
package-lock.json generated
View File

@ -16844,9 +16844,9 @@
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
},
"uuid": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
"integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw=="
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
},
"v8-compile-cache": {
"version": "2.1.0",

View File

@ -27,7 +27,7 @@
"react-scripts": "3.4.1",
"react-toastify": "^5.5.0",
"tailwindcss": "^1.2.0",
"uuid": "^7.0.2",
"uuid": "^7.0.3",
"vuepress": "^1.4.0"
},
"scripts": {

View File

@ -4,7 +4,7 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
const tabsRef = useRef(null);
const scrollBy = x => {
const index = tabs.find(tab => tab.key === currentTab);
const index = tabs.findIndex(tab => tab.key === currentTab);
tabsRef.current.scrollLeft += x;
if (x < 0 && index > 0) {
@ -16,8 +16,6 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
}
};
const wheelScrollBy = e => scrollBy(e.deltaY);
return (
<div className="mx-4 mb-6 flex items-center">
<div
@ -27,7 +25,7 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
<i className="material-icons">chevron_left</i>
</div>
<ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll" onWheel={wheelScrollBy}>
<ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
{tabs.map(tab =>
currentTab === tab.key ? (
<li key={tab.key} className="mx-1 list-none">

View File

@ -110,12 +110,17 @@ const saveAsPdf = (pageRef, panZoomRef) => {
setTimeout(() => {
html2canvas(pageRef.current, {
scale: 5,
scale: 6,
useCORS: true,
allowTaint: true,
}).then(canvas => {
const image = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'mm', 'a4');
const doc = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: [canvas.width, canvas.height],
});
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
@ -125,16 +130,15 @@ const saveAsPdf = (pageRef, panZoomRef) => {
const canvasWidth = canvas.width * ratio;
const canvasHeight = canvas.height * ratio;
const marginX = (pageWidth - canvasWidth) / 2;
const marginY = (pageHeight - canvasHeight) / 2;
// 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.addImage(image, 'JPEG', 0, 0, canvasWidth, canvasHeight, null, 'SLOW');
doc.save(`RxResume_${Date.now()}.pdf`);
});
}, 250);
}, 200);
};
export {