titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add exporting src and diagram as img

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:03 +03:00
parent 58656f5e66
commit 4cfc2edc81
3 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
package-lock.json generated
View File

@ -16,6 +16,8 @@
"@uiw/codemirror-themes": "^4.20.2",
"@uiw/react-codemirror": "^4.20.2",
"codemirror": "^5.65.13",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"jointjs": "^3.7.2",
"react": "^18.2.0",
"react-dnd": "^16.0.1",
@ -5517,6 +5519,14 @@
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
},
"node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/batch": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@ -6241,6 +6251,14 @@
"postcss": "^8.4"
}
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/css-loader": {
"version": "6.7.4",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.4.tgz",
@ -8152,6 +8170,11 @@
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"node_modules/filelist": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@ -9013,6 +9036,18 @@
"webpack": "^5.20.0"
}
},
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/htmlparser2": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@ -16217,6 +16252,14 @@
"node": ">=8"
}
},
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -16617,6 +16660,14 @@
"node": ">= 0.4.0"
}
},
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
},
"node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",

2
package.json
View File

@ -11,6 +11,8 @@
"@uiw/codemirror-themes": "^4.20.2",
"@uiw/react-codemirror": "^4.20.2",
"codemirror": "^5.65.13",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"jointjs": "^3.7.2",
"react": "^18.2.0",
"react-dnd": "^16.0.1",

26
src/components/editor_panel.jsx
View File

@ -6,6 +6,8 @@ import { sql } from "@codemirror/lang-sql";
import { tags as t } from "@lezer/highlight";
import { shapes } from "jointjs";
import Shape from "./shape";
import { saveAs } from "file-saver";
import html2canvas from "html2canvas";
import "react-resizable/css/styles.css";
const myTheme = createTheme({
@ -63,6 +65,30 @@ export default function EditorPanel(props) {
>
add
</button>
<br />
<button
onClick={() => {
const blob = new Blob([props.code], {
type: "text/plain;charset=utf-8",
});
saveAs(blob, "src.txt");
}}
>
export src
</button>
<br />
<button
onClick={() => {
html2canvas(document.getElementById("canvas")).then((canvas) => {
canvas.toBlob((blob) => {
saveAs(blob, "image.png");
});
});
}}
>
export img
</button>
{editor ? (
<CodeMirror
value={props.code}