From 206c97c5b577dc6f0f2fadba6e7acc99c3f05c55 Mon Sep 17 00:00:00 2001 From: Lukas Zenick Date: Sat, 17 Feb 2024 17:23:04 -0600 Subject: [PATCH 1/4] fixed README --- README.md | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 7cdc365c..e9884354 100644 --- a/README.md +++ b/README.md @@ -2,17 +2,27 @@ ## Built Using -- React 18 -- TypeScript -- Vite 5 -- ESLint -- Prettier -- Semantic-Release -- Custom Messaging & Storage Wrappers +- React 18 +- TypeScript +- Vite 5 +- ESLint +- Prettier +- Semantic-Release +- Custom Messaging & Storage Wrappers ## Getting Started 1. Clone this repo 2. Run `pnpm install` to install and patch all the required dependencies -3. Run `pnpm run dev` to start the development server -4. Run `pnpm build` to build the extension for production + +If you want to run the development build: +Run `pnpm run dev` + +If you want to build the extension for production: +Run `pnpm build` + +You may have to rename the `__uno.css.js` to `uno.css.js` in dist + +Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked' + +Navigate to the 'dist' folder and click 'select' to import the extension From e44b0c0e45d14c93094d124d8868e2c021719ce4 Mon Sep 17 00:00:00 2001 From: Lukas Zenick Date: Sat, 17 Feb 2024 17:24:27 -0600 Subject: [PATCH 2/4] FIX README --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e9884354..f62db169 100644 --- a/README.md +++ b/README.md @@ -15,11 +15,13 @@ 1. Clone this repo 2. Run `pnpm install` to install and patch all the required dependencies -If you want to run the development build: -Run `pnpm run dev` +- If you want to run the development build: -If you want to build the extension for production: -Run `pnpm build` + - Run `pnpm run dev` + +- If you want to build the extension for production: + + - Run `pnpm build` You may have to rename the `__uno.css.js` to `uno.css.js` in dist From ae32d0b645cbdb034baebca218b5b5ebb68d8752 Mon Sep 17 00:00:00 2001 From: Derek Chen Date: Sat, 17 Feb 2024 19:09:41 -0600 Subject: [PATCH 3/4] feat: Derek/export png (#95) * Attempting to use more lightweight version * Did not work. * This is not what I wanted * The image saves correctly. Needs padding * Padding !! * Removed downloadjs * Padding more --- package.json | 1 + pnpm-lock.yaml | 7 +++ .../common/CalendarGrid/CalendarGrid.tsx | 49 +++++++++++++++---- 3 files changed, 47 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 3a3cd1b5..c0ea5789 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "clsx": "^2.1.0", "highcharts": "^11.3.0", "highcharts-react-official": "^3.2.1", + "html-to-image": "^1.11.11", "html2canvas": "^1.4.1", "react": "^18.2.0", "react-devtools-core": "^5.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 452e870f..8aca9fe7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -34,6 +34,9 @@ dependencies: highcharts-react-official: specifier: ^3.2.1 version: 3.2.1(highcharts@11.3.0)(react@18.2.0) + html-to-image: + specifier: ^1.11.11 + version: 1.11.11 html2canvas: specifier: ^1.4.1 version: 1.4.1 @@ -8663,6 +8666,10 @@ packages: engines: {node: '>=8'} dev: true + /html-to-image@1.11.11: + resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==} + dev: false + /html2canvas@1.4.1: resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==} engines: {node: '>=8.0.0'} diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 5d9742f6..73848a3c 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -1,5 +1,7 @@ import React, { useRef } from 'react'; -import html2canvas from 'html2canvas'; +// import html2canvas from 'html2canvas'; +import * as htmlToImage from 'html-to-image'; +import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image'; import { DAY_MAP } from 'src/shared/types/CourseMeeting'; import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule'; import calIcon from 'src/assets/icons/cal.svg'; @@ -38,15 +40,42 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren { - if (calendarRef.current) { - html2canvas(calendarRef.current).then(canvas => { - // Create an a element to trigger download - const a = document.createElement('a'); - a.href = canvas.toDataURL('image/png'); - a.download = 'calendar.png'; - a.click(); - }); - } + // if (calendarRef.current) { + // html2canvas(calendarRef.current).then(canvas => { + // // Create an a element to trigger download + // const a = document.createElement('a'); + // a.href = canvas.toDataURL('image/png'); + // a.download = 'calendar.png'; + // a.click(); + // }); + // } + htmlToImage.toPng(calendarRef.current, { + backgroundColor: "white", + style: { + background: "white", + marginTop: "20px", + marginBottom: "20px", + marginRight: "20px", + marginLeft: "20px",}}) + .then(function (dataUrl) { + var img = new Image(); + img.src = dataUrl; + fetch(dataUrl) + .then(response => response.blob()) + .then(blob => { + const href = window.URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = href; + link.download = 'my-schedule.png'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }) + .catch(error => console.error('Error downloading file:', error)); + }) + .catch(function (error) { + console.error('oops, something went wrong!', error); + }); }; return ( From 0acd0b722ce9d8b6ef690295a713998071c6f745 Mon Sep 17 00:00:00 2001 From: Lukas Zenick Date: Sun, 18 Feb 2024 12:46:35 -0600 Subject: [PATCH 4/4] html2canvas -> htmlToImage also fixed derick's bugs --- package.json | 1 - pnpm-lock.yaml | 34 ---------- .../common/CalendarGrid/CalendarGrid.tsx | 66 ++++++++----------- 3 files changed, 29 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index c0ea5789..e70a900c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "highcharts": "^11.3.0", "highcharts-react-official": "^3.2.1", "html-to-image": "^1.11.11", - "html2canvas": "^1.4.1", "react": "^18.2.0", "react-devtools-core": "^5.0.0", "react-dom": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8aca9fe7..fd49e39e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,9 +37,6 @@ dependencies: html-to-image: specifier: ^1.11.11 version: 1.11.11 - html2canvas: - specifier: ^1.4.1 - version: 1.4.1 react: specifier: ^18.2.0 version: 18.2.0 @@ -5859,11 +5856,6 @@ packages: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} dev: true - /base64-arraybuffer@1.0.2: - resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==} - engines: {node: '>= 0.6.0'} - dev: false - /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} dev: true @@ -6556,12 +6548,6 @@ packages: postcss: 8.4.35 dev: true - /css-line-break@2.1.0: - resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==} - dependencies: - utrie: 1.0.2 - dev: false - /css-select@5.1.0: resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} dependencies: @@ -8670,14 +8656,6 @@ packages: resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==} dev: false - /html2canvas@1.4.1: - resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==} - engines: {node: '>=8.0.0'} - dependencies: - css-line-break: 2.1.0 - text-segmentation: 1.0.3 - dev: false - /htmlparser2@8.0.2: resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==} dependencies: @@ -12437,12 +12415,6 @@ packages: minimatch: 3.1.2 dev: true - /text-segmentation@1.0.3: - resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==} - dependencies: - utrie: 1.0.2 - dev: false - /text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true @@ -12985,12 +12957,6 @@ packages: engines: {node: '>= 0.4.0'} dev: true - /utrie@1.0.2: - resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==} - dependencies: - base64-arraybuffer: 1.0.2 - dev: false - /uuid@9.0.1: resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==} hasBin: true diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx index 73848a3c..9afa2465 100644 --- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx +++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx @@ -1,7 +1,5 @@ import React, { useRef } from 'react'; -// import html2canvas from 'html2canvas'; import * as htmlToImage from 'html-to-image'; -import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image'; import { DAY_MAP } from 'src/shared/types/CourseMeeting'; import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule'; import calIcon from 'src/assets/icons/cal.svg'; @@ -40,42 +38,36 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren { - // if (calendarRef.current) { - // html2canvas(calendarRef.current).then(canvas => { - // // Create an a element to trigger download - // const a = document.createElement('a'); - // a.href = canvas.toDataURL('image/png'); - // a.download = 'calendar.png'; - // a.click(); - // }); - // } - htmlToImage.toPng(calendarRef.current, { - backgroundColor: "white", - style: { - background: "white", - marginTop: "20px", - marginBottom: "20px", - marginRight: "20px", - marginLeft: "20px",}}) - .then(function (dataUrl) { - var img = new Image(); - img.src = dataUrl; - fetch(dataUrl) - .then(response => response.blob()) - .then(blob => { - const href = window.URL.createObjectURL(blob); - const link = document.createElement('a'); - link.href = href; - link.download = 'my-schedule.png'; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); + htmlToImage + .toPng(calendarRef.current, { + backgroundColor: 'white', + style: { + background: 'white', + marginTop: '20px', + marginBottom: '20px', + marginRight: '20px', + marginLeft: '20px', + }, }) - .catch(error => console.error('Error downloading file:', error)); - }) - .catch(function (error) { - console.error('oops, something went wrong!', error); - }); + .then(dataUrl => { + let img = new Image(); + img.src = dataUrl; + fetch(dataUrl) + .then(response => response.blob()) + .then(blob => { + const href = window.URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = href; + link.download = 'my-schedule.png'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }) + .catch(error => console.error('Error downloading file:', error)); + }) + .catch(error => { + console.error('oops, something went wrong!', error); + }); }; return (