GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

add export as image support

Browse Source
This commit is contained in:
AykutSarac 2022-05-04 21:22:16 +03:00
parent be1a2972ad
commit 49d14e79a2
3 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -23,6 +23,7 @@
"react-icons": "^4.3.1",
"react-zoom-pan-pinch": "^2.1.3",
"reaflow": "^5.0.4",
"save-html-as-image": "^1.7.1",
"styled-components": "^5.3.5"
},
"devDependencies": {

16
src/containers/Editor/Tools.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import toast from "react-hot-toast";
import { saveAsPng } from "save-html-as-image";
import {
AiOutlineFullscreen,
AiOutlineMinus,
@ -53,6 +53,13 @@ export const Tools: React.FC = () => {
const toggleTheme = () => dispatch({ type: ConfigActionType.TOGGLE_THEME });
const exportAsImage = () => {
saveAsPng(document.querySelector("svg[id*='ref']"), {
filename: "jsonvisio.com",
printDate: true,
});
};
return (
<StyledTools>
<StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
@ -62,12 +69,7 @@ export const Tools: React.FC = () => {
{settings.lightmode ? <HiOutlineMoon /> : <HiOutlineSun />}
</StyledToolElement>
<Input />
<StyledToolElement
aria-label="save"
onClick={() => {
// export as png
}}
>
<StyledToolElement aria-label="save" onClick={exportAsImage}>
<FiDownload />
</StyledToolElement>
<StyledToolElement aria-label="center canvas" onClick={centerView}>

24
yarn.lock
View File

@ -3298,6 +3298,11 @@ file-entry-cache@^6.0.1:
dependencies:
flat-cache "^3.0.4"
file-saver@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
filelist@^1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.3.tgz#448607750376484932f67ef1b9ff07386b036c83"
@ -3664,6 +3669,11 @@ html-escaper@^2.0.0:
resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
html-to-image@^1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/html-to-image/-/html-to-image-1.9.0.tgz#cb49bf9f4b37376771c85cfdd65863ae9420b268"
integrity sha512-9gaDCIYg62Ek07F2pBk76AHgYZ2gxq2YALU7rK3gNCqXuhu6cWzsOQqM7qGbjZiOzxGzrU1deDqZpAod2NEwbA==
htmlparser2@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@ -5606,6 +5616,20 @@ safe-buffer@~5.1.1:
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
save-html-as-image@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/save-html-as-image/-/save-html-as-image-1.7.1.tgz#6fa291e45a0308f1837ea90fd0b46c0ff5758501"
integrity sha512-9pM9ljvEppzrnGmiB+BmbzV4uncI84rfG+NEDK6CLyTvMAt6ANBIzEkwJsbKbsV09hB2Qpn6Lp4bvTrFYFWadg==
dependencies:
file-saver "^2.0.5"
html-to-image "^1.9.0"
save-svg-as-png "^1.4.17"
save-svg-as-png@^1.4.17:
version "1.4.17"
resolved "https://registry.yarnpkg.com/save-svg-as-png/-/save-svg-as-png-1.4.17.tgz#294442002772a24f1db1bf8a2aaf7df4ab0cdc55"
integrity sha512-7QDaqJsVhdFPwviCxkgHiGm9omeaMBe1VKbHySWU6oFB2LtnGCcYS13eVoslUgq6VZC6Tjq/HddBd1K6p2PGpA==
saxes@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"