This commit is contained in:
1ilit 2023-09-19 15:48:24 +03:00
parent 76b9f7fc94
commit c83667be4e
4 changed files with 13 additions and 53 deletions

51
package-lock.json generated
View File

@ -19,7 +19,7 @@
"@uiw/react-codemirror": "^4.20.2",
"codemirror": "^5.65.13",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"html-to-image": "^1.11.11",
"node-sql-parser": "^4.7.0",
"react": "^18.2.0",
"react-dnd": "^16.0.1",
@ -5842,14 +5842,6 @@
"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",
@ -6709,14 +6701,6 @@
"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.8.1",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
@ -9413,6 +9397,11 @@
"node": ">=12"
}
},
"node_modules/html-to-image": {
"version": "1.11.11",
"resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
"integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
},
"node_modules/html-webpack-plugin": {
"version": "5.5.3",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.3.tgz",
@ -9435,18 +9424,6 @@
"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",
@ -16998,14 +16975,6 @@
"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",
@ -17450,14 +17419,6 @@
"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",

View File

@ -14,7 +14,7 @@
"@uiw/react-codemirror": "^4.20.2",
"codemirror": "^5.65.13",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"html-to-image": "^1.11.11",
"node-sql-parser": "^4.7.0",
"react": "^18.2.0",
"react-dnd": "^16.0.1",

View File

@ -241,7 +241,8 @@ export default function Canvas(props) {
onMouseMove={handleMouseMove}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
style={{ width: "100%", height: "100%", cursor: cursor }}
style={{ width: "100%", height: "100%", cursor: cursor, backgroundColor:"white" }}
>
<defs>
<pattern
@ -264,7 +265,7 @@ export default function Canvas(props) {
</defs>
<rect
x="0"
y="0"
y="0"
width="100%"
height="100%"
fill="url(#pattern-circles)"

View File

@ -6,7 +6,7 @@ import { sql } from "@codemirror/lang-sql";
import { tags as t } from "@lezer/highlight";
import Shape from "./shape";
import { saveAs } from "file-saver";
import html2canvas from "html2canvas";
import { toPng } from "html-to-image";
import { Parser } from "node-sql-parser";
import { Tabs } from "@douyinfe/semi-ui";
import "react-resizable/css/styles.css";
@ -165,10 +165,8 @@ const EditorPanel = (props) => {
<br />
<button
onClick={() => {
html2canvas(document.getElementById("canvas")).then((canvas) => {
canvas.toBlob((blob) => {
saveAs(blob, "image.png");
});
toPng(document.getElementById("canvas")).then(function (dataUrl) {
saveAs(dataUrl, "canvas.png");
});
}}
>