diff --git a/package-lock.json b/package-lock.json
index ade733b..ce2aa6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,13 +13,12 @@
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"antd": "^4.16.13",
- "bootstrap": "^4.6.0",
+ "dom-to-image": "^2.6.0",
"mobx": "^6.3.3",
"mobx-react-lite": "^3.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
- "reactstrap": "^8.10.0",
"web-vitals": "^1.1.2"
}
},
@@ -1930,19 +1929,6 @@
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz",
"integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w=="
},
- "node_modules/@hypnosphi/create-react-context": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
- "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
- "dependencies": {
- "gud": "^1.0.0",
- "warning": "^4.0.3"
- },
- "peerDependencies": {
- "prop-types": "^15.0.0",
- "react": ">=0.14.0"
- }
- },
"node_modules/@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -5543,19 +5529,6 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
- "node_modules/bootstrap": {
- "version": "4.6.0",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
- "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/bootstrap"
- },
- "peerDependencies": {
- "jquery": "1.9.1 - 3",
- "popper.js": "^1.16.1"
- }
- },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7464,14 +7437,6 @@
"utila": "~0.4"
}
},
- "node_modules/dom-helpers": {
- "version": "3.4.0",
- "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
- "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
- "dependencies": {
- "@babel/runtime": "^7.1.2"
- }
- },
"node_modules/dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -7485,6 +7450,11 @@
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
+ "node_modules/dom-to-image": {
+ "version": "2.6.0",
+ "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
+ "integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
+ },
"node_modules/domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -9846,11 +9816,6 @@
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
"optional": true
},
- "node_modules/gud": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
- "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
- },
"node_modules/gzip-size": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -13131,12 +13096,6 @@
"node": ">=8"
}
},
- "node_modules/jquery": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
- "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
- "peer": true
- },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -15050,16 +15009,6 @@
"node": ">=6"
}
},
- "node_modules/popper.js": {
- "version": "1.16.1",
- "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
- "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
- "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/popperjs"
- }
- },
"node_modules/portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -17411,28 +17360,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
- "node_modules/react-lifecycles-compat": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
- "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
- },
- "node_modules/react-popper": {
- "version": "1.3.11",
- "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
- "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
- "dependencies": {
- "@babel/runtime": "^7.1.2",
- "@hypnosphi/create-react-context": "^0.3.1",
- "deep-equal": "^1.1.1",
- "popper.js": "^1.14.4",
- "prop-types": "^15.6.1",
- "typed-styles": "^0.0.7",
- "warning": "^4.0.2"
- },
- "peerDependencies": {
- "react": "0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0"
- }
- },
"node_modules/react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -17562,48 +17489,6 @@
"semver": "bin/semver"
}
},
- "node_modules/react-transition-group": {
- "version": "2.9.0",
- "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
- "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
- "dependencies": {
- "dom-helpers": "^3.4.0",
- "loose-envify": "^1.4.0",
- "prop-types": "^15.6.2",
- "react-lifecycles-compat": "^3.0.4"
- },
- "peerDependencies": {
- "react": ">=15.0.0",
- "react-dom": ">=15.0.0"
- }
- },
- "node_modules/reactstrap": {
- "version": "8.10.0",
- "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.10.0.tgz",
- "integrity": "sha512-MsFUB/fRZj6Orf8Mxc93iYuAs+9ngnFmy2cfYlzkmc4vi5oM4u6ziY/DsO71lDG3cotxHRyS3Flr51cuYv+IEQ==",
- "dependencies": {
- "@babel/runtime": "^7.12.5",
- "classnames": "^2.2.3",
- "prop-types": "^15.5.8",
- "react-popper": "^1.3.6",
- "react-transition-group": "^2.3.1"
- },
- "peerDependencies": {
- "react": ">=16.3.0",
- "react-dom": ">=16.3.0"
- }
- },
- "node_modules/reactstrap/node_modules/@babel/runtime": {
- "version": "7.15.4",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
- "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
- "dependencies": {
- "regenerator-runtime": "^0.13.4"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
"node_modules/read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -20495,11 +20380,6 @@
"node": ">= 0.6"
}
},
- "node_modules/typed-styles": {
- "version": "0.0.7",
- "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
- "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
- },
"node_modules/typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -24085,15 +23965,6 @@
"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz",
"integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w=="
},
- "@hypnosphi/create-react-context": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz",
- "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==",
- "requires": {
- "gud": "^1.0.0",
- "warning": "^4.0.3"
- }
- },
"@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -26850,12 +26721,6 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
- "bootstrap": {
- "version": "4.6.0",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
- "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
- "requires": {}
- },
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -28380,14 +28245,6 @@
"utila": "~0.4"
}
},
- "dom-helpers": {
- "version": "3.4.0",
- "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
- "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
- "requires": {
- "@babel/runtime": "^7.1.2"
- }
- },
"dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -28398,6 +28255,11 @@
"entities": "^2.0.0"
}
},
+ "dom-to-image": {
+ "version": "2.6.0",
+ "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
+ "integrity": "sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc="
+ },
"domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -30172,11 +30034,6 @@
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
"optional": true
},
- "gud": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
- "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
- },
"gzip-size": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -32587,12 +32444,6 @@
}
}
},
- "jquery": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
- "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
- "peer": true
- },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -34063,11 +33914,6 @@
"ts-pnp": "^1.1.6"
}
},
- "popper.js": {
- "version": "1.16.1",
- "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
- "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
- },
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -35914,25 +35760,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
- "react-lifecycles-compat": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
- "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
- },
- "react-popper": {
- "version": "1.3.11",
- "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
- "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==",
- "requires": {
- "@babel/runtime": "^7.1.2",
- "@hypnosphi/create-react-context": "^0.3.1",
- "deep-equal": "^1.1.1",
- "popper.js": "^1.14.4",
- "prop-types": "^15.6.1",
- "typed-styles": "^0.0.7",
- "warning": "^4.0.2"
- }
- },
"react-refresh": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -36036,39 +35863,6 @@
}
}
},
- "react-transition-group": {
- "version": "2.9.0",
- "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
- "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
- "requires": {
- "dom-helpers": "^3.4.0",
- "loose-envify": "^1.4.0",
- "prop-types": "^15.6.2",
- "react-lifecycles-compat": "^3.0.4"
- }
- },
- "reactstrap": {
- "version": "8.10.0",
- "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.10.0.tgz",
- "integrity": "sha512-MsFUB/fRZj6Orf8Mxc93iYuAs+9ngnFmy2cfYlzkmc4vi5oM4u6ziY/DsO71lDG3cotxHRyS3Flr51cuYv+IEQ==",
- "requires": {
- "@babel/runtime": "^7.12.5",
- "classnames": "^2.2.3",
- "prop-types": "^15.5.8",
- "react-popper": "^1.3.6",
- "react-transition-group": "^2.3.1"
- },
- "dependencies": {
- "@babel/runtime": {
- "version": "7.15.4",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
- "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
- "requires": {
- "regenerator-runtime": "^0.13.4"
- }
- }
- }
- },
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -38362,11 +38156,6 @@
"mime-types": "~2.1.24"
}
},
- "typed-styles": {
- "version": "0.0.7",
- "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
- "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
- },
"typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
diff --git a/src/menu/editor.js b/src/menu/editor.js
index ad69eaf..5f935fd 100644
--- a/src/menu/editor.js
+++ b/src/menu/editor.js
@@ -1,3 +1,4 @@
+import { Button, Menu, Upload } from "antd";
import {
FolderOpenOutlined,
HighlightOutlined,
@@ -7,16 +8,32 @@ import {
SaveOutlined,
UndoOutlined,
} from "@ant-design/icons";
-import { Menu } from "antd";
import state from "../store/state";
import store from "../store/global";
import { createNotation, isNote, notations as N } from "../util/notation";
import { createParagraph } from "../util/paragraph";
+import { exportFile, loadFile, saveFile } from "../util/file";
import { findParagraphAndNotation } from "../util/editor";
-import { go, runInWrappedAction, wrappedAction } from "../store/history";
+import {
+ go,
+ runInWrappedAction,
+ unwrappedAction,
+ wrappedAction,
+} from "../store/history";
const { SubMenu } = Menu;
+const handleOpenFile = unwrappedAction((ev) => {
+ // TODO: working
+ const file = ev.target.files[0];
+ loadFile(file);
+});
+const handleSaveFile = unwrappedAction(() => {
+ saveFile();
+});
+const handleExportFile = () => {
+ exportFile();
+};
const handleEditMenu = wrappedAction(({ key }) => {
switch (key) {
case "undo":
@@ -221,6 +238,20 @@ const handleKeyPress = wrappedAction((ev) => {
case inputKey === "z" && ctrl && shift:
go(1);
break;
+ case inputKey === "s" && ctrl && !shift: {
+ ev.preventDefault();
+ saveFile();
+ break;
+ }
+ case inputKey === "o" && ctrl && !shift: {
+ ev.preventDefault();
+ const input = document.createElement("input");
+ input.type = "file";
+ input.accept = ".json";
+ input.onchange = handleOpenFile;
+ input.click();
+ break;
+ }
case inputKey === "?" && !ctrl: {
if (state.helpDialogVisible) {
state.helpDialogVisible = false;
@@ -240,10 +271,28 @@ const fileMenu = (
}>
打开
+
- }>
+ } onClick={handleSaveFile}>
保存
+ } onClick={handleExportFile}>
+ 导出为图片
+
);
const editMenu = (
diff --git a/src/store/history.js b/src/store/history.js
index 7b02445..419a4ec 100644
--- a/src/store/history.js
+++ b/src/store/history.js
@@ -52,6 +52,11 @@ function go(span) {
Object.assign(globalStore, storeHistory[newCursor]);
}
+function clearHistory() {
+ storeHistory.length = 0;
+ cursor = -1;
+}
+
// 包装mobx的action以实现历史记录
function executeAction(actionFunc, ...args) {
actionFunc.apply(this, args);
@@ -88,12 +93,14 @@ function runInWrappedAction(func) {
executeAction.call(this, func);
});
}
+
// 不需要记录历史记录的时候直接使用原action
const unwrappedAction = action;
const runInUnwrappedAction = runInAction;
export {
go,
+ clearHistory,
wrappedAction,
runInWrappedAction,
unwrappedAction,
diff --git a/src/store/state.js b/src/store/state.js
index b766c19..003e039 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -14,6 +14,12 @@ let globalState = observable({
helpDialogVisible: false,
// 配置项弹窗是否可见
configDialogVisible: false,
+ // 持久化的文件
+ file: null,
+ // ref
+ refs: {
+ svg: null,
+ },
});
export default globalState;
diff --git a/src/util/dom-to-image.js b/src/util/dom-to-image.js
new file mode 100644
index 0000000..ddf2d44
--- /dev/null
+++ b/src/util/dom-to-image.js
@@ -0,0 +1,799 @@
+// COPIED FROM: https://github.com/tsayen/dom-to-image
+// 由于原仓库不支持高dpi改良了一下。上游合并和可引入库依赖
+
+var util = newUtil();
+var inliner = newInliner();
+var fontFaces = newFontFaces();
+var images = newImages();
+var dpi = window.devicePixelRatio || 1;
+
+// Default impl options
+var defaultOptions = {
+ // Default is to fail on error, no placeholder
+ imagePlaceholder: undefined,
+ // Default cache bust is false, it will use the cache
+ cacheBust: false,
+};
+
+var domtoimage = {
+ toSvg: toSvg,
+ toPng: toPng,
+ toJpeg: toJpeg,
+ toBlob: toBlob,
+ toPixelData: toPixelData,
+ impl: {
+ fontFaces: fontFaces,
+ images: images,
+ util: util,
+ inliner: inliner,
+ options: {},
+ },
+};
+
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options
+ * @param {Function} options.filter - Should return true if passed node should be included in the output
+ * (excluding node means excluding it's children as well). Not called on the root node.
+ * @param {String} options.bgcolor - color for the background, any valid CSS color value.
+ * @param {Number} options.width - width to be applied to node before rendering.
+ * @param {Number} options.height - height to be applied to node before rendering.
+ * @param {Object} options.style - an object whose properties to be copied to node's style before rendering.
+ * @param {Number} options.quality - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
+ defaults to 1.0.
+ * @param {String} options.imagePlaceholder - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
+ * @param {Boolean} options.cacheBust - set to true to cache bust by appending the time to the request url
+ * @return {Promise} - A promise that is fulfilled with a SVG image data URL
+ * */
+function toSvg(node, options) {
+ options = options || {};
+ copyOptions(options);
+ return Promise.resolve(node)
+ .then(function (node) {
+ return cloneNode(node, options.filter, true);
+ })
+ .then(embedFonts)
+ .then(inlineImages)
+ .then(applyOptions)
+ .then(function (clone) {
+ return makeSvgDataUri(
+ clone,
+ (options.width || util.width(node)) * dpi,
+ options.height || util.height(node) * dpi
+ );
+ });
+
+ function applyOptions(clone) {
+ if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
+
+ if (options.width) clone.style.width = options.width + "px";
+ if (options.height) clone.style.height = options.height + "px";
+
+ if (options.style)
+ Object.keys(options.style).forEach(function (property) {
+ clone.style[property] = options.style[property];
+ });
+
+ return clone;
+ }
+}
+
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
+ * */
+function toPixelData(node, options) {
+ return draw(node, options || {}).then(function (canvas) {
+ return canvas
+ .getContext("2d")
+ .getImageData(0, 0, util.width(node) * dpi, util.height(node) * dpi).data;
+ });
+}
+
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @return {Promise} - A promise that is fulfilled with a PNG image data URL
+ * */
+function toPng(node, options) {
+ return draw(node, options || {}).then(function (canvas) {
+ return canvas.toDataURL();
+ });
+}
+
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
+ * */
+function toJpeg(node, options) {
+ options = options || {};
+ return draw(node, options).then(function (canvas) {
+ return canvas.toDataURL("image/jpeg", options.quality || 1.0);
+ });
+}
+
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @return {Promise} - A promise that is fulfilled with a PNG image blob
+ * */
+function toBlob(node, options) {
+ return draw(node, options || {}).then(util.canvasToBlob);
+}
+
+function copyOptions(options) {
+ // Copy options to impl options for use in impl
+ if (typeof options.imagePlaceholder === "undefined") {
+ domtoimage.impl.options.imagePlaceholder = defaultOptions.imagePlaceholder;
+ } else {
+ domtoimage.impl.options.imagePlaceholder = options.imagePlaceholder;
+ }
+
+ if (typeof options.cacheBust === "undefined") {
+ domtoimage.impl.options.cacheBust = defaultOptions.cacheBust;
+ } else {
+ domtoimage.impl.options.cacheBust = options.cacheBust;
+ }
+}
+
+function draw(domNode, options) {
+ return toSvg(domNode, options)
+ .then(util.makeImage)
+ .then(util.delay(100))
+ .then(function (image) {
+ var canvas = newCanvas(domNode);
+ canvas.getContext("2d").drawImage(image, 0, 0);
+ return canvas;
+ });
+
+ function newCanvas(domNode) {
+ var canvas = document.createElement("canvas");
+ var width = options.width || util.width(domNode);
+ var height = options.height || util.height(domNode);
+ canvas.width = width * dpi;
+ canvas.height = height * dpi;
+ canvas.style.width = width + "px";
+ canvas.style.height = height + "px";
+
+ canvas.getContext("2d").scale(dpi, dpi);
+ if (options.bgcolor) {
+ var ctx = canvas.getContext("2d");
+ ctx.fillStyle = options.bgcolor;
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ }
+
+ return canvas;
+ }
+}
+
+function cloneNode(node, filter, root) {
+ if (!root && filter && !filter(node)) return Promise.resolve();
+
+ return Promise.resolve(node)
+ .then(makeNodeCopy)
+ .then(function (clone) {
+ return cloneChildren(node, clone, filter);
+ })
+ .then(function (clone) {
+ return processClone(node, clone);
+ });
+
+ function makeNodeCopy(node) {
+ if (node instanceof HTMLCanvasElement)
+ return util.makeImage(node.toDataURL());
+ return node.cloneNode(false);
+ }
+
+ function cloneChildren(original, clone, filter) {
+ var children = original.childNodes;
+ if (children.length === 0) return Promise.resolve(clone);
+
+ return cloneChildrenInOrder(clone, util.asArray(children), filter).then(
+ function () {
+ return clone;
+ }
+ );
+
+ function cloneChildrenInOrder(parent, children, filter) {
+ var done = Promise.resolve();
+ children.forEach(function (child) {
+ done = done
+ .then(function () {
+ return cloneNode(child, filter);
+ })
+ .then(function (childClone) {
+ if (childClone) parent.appendChild(childClone);
+ });
+ });
+ return done;
+ }
+ }
+
+ function processClone(original, clone) {
+ if (!(clone instanceof Element)) return clone;
+
+ return Promise.resolve()
+ .then(cloneStyle)
+ .then(clonePseudoElements)
+ .then(copyUserInput)
+ .then(fixSvg)
+ .then(function () {
+ return clone;
+ });
+
+ function cloneStyle() {
+ copyStyle(window.getComputedStyle(original), clone.style);
+
+ function copyStyle(source, target) {
+ if (source.cssText) target.cssText = source.cssText;
+ else copyProperties(source, target);
+
+ function copyProperties(source, target) {
+ util.asArray(source).forEach(function (name) {
+ target.setProperty(
+ name,
+ source.getPropertyValue(name),
+ source.getPropertyPriority(name)
+ );
+ });
+ }
+ }
+ }
+
+ function clonePseudoElements() {
+ [":before", ":after"].forEach(function (element) {
+ clonePseudoElement(element);
+ });
+
+ function clonePseudoElement(element) {
+ var style = window.getComputedStyle(original, element);
+ var content = style.getPropertyValue("content");
+
+ if (content === "" || content === "none") return;
+
+ var className = util.uid();
+ clone.className = clone.className + " " + className;
+ var styleElement = document.createElement("style");
+ styleElement.appendChild(
+ formatPseudoElementStyle(className, element, style)
+ );
+ clone.appendChild(styleElement);
+
+ function formatPseudoElementStyle(className, element, style) {
+ var selector = "." + className + ":" + element;
+ var cssText = style.cssText
+ ? formatCssText(style)
+ : formatCssProperties(style);
+ return document.createTextNode(selector + "{" + cssText + "}");
+
+ function formatCssText(style) {
+ var content = style.getPropertyValue("content");
+ return style.cssText + " content: " + content + ";";
+ }
+
+ function formatCssProperties(style) {
+ return util.asArray(style).map(formatProperty).join("; ") + ";";
+
+ function formatProperty(name) {
+ return (
+ name +
+ ": " +
+ style.getPropertyValue(name) +
+ (style.getPropertyPriority(name) ? " !important" : "")
+ );
+ }
+ }
+ }
+ }
+ }
+
+ function copyUserInput() {
+ if (original instanceof HTMLTextAreaElement)
+ clone.innerHTML = original.value;
+ if (original instanceof HTMLInputElement)
+ clone.setAttribute("value", original.value);
+ }
+
+ function fixSvg() {
+ if (!(clone instanceof SVGElement)) return;
+ clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+ if (!(clone instanceof SVGRectElement)) return;
+ ["width", "height"].forEach(function (attribute) {
+ var value = clone.getAttribute(attribute);
+ if (!value) return;
+
+ clone.style.setProperty(attribute, value);
+ });
+ }
+ }
+}
+
+function embedFonts(node) {
+ return fontFaces.resolveAll().then(function (cssText) {
+ var styleNode = document.createElement("style");
+ node.appendChild(styleNode);
+ styleNode.appendChild(document.createTextNode(cssText));
+ return node;
+ });
+}
+
+function inlineImages(node) {
+ return images.inlineAll(node).then(function () {
+ return node;
+ });
+}
+
+function makeSvgDataUri(node, width, height) {
+ return Promise.resolve(node)
+ .then(function (node) {
+ node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+ return new XMLSerializer().serializeToString(node);
+ })
+ .then(util.escapeXhtml)
+ .then(function (xhtml) {
+ return (
+ '' +
+ xhtml +
+ ""
+ );
+ })
+ .then(function (foreignObject) {
+ return (
+ '"
+ );
+ })
+ .then(function (svg) {
+ return "data:image/svg+xml;charset=utf-8," + svg;
+ });
+}
+
+function newUtil() {
+ return {
+ escape: escape,
+ parseExtension: parseExtension,
+ mimeType: mimeType,
+ dataAsUrl: dataAsUrl,
+ isDataUrl: isDataUrl,
+ canvasToBlob: canvasToBlob,
+ resolveUrl: resolveUrl,
+ getAndEncode: getAndEncode,
+ uid: uid(),
+ delay: delay,
+ asArray: asArray,
+ escapeXhtml: escapeXhtml,
+ makeImage: makeImage,
+ width: width,
+ height: height,
+ };
+
+ function mimes() {
+ /*
+ * Only WOFF and EOT mime types for fonts are 'real'
+ * see http://www.iana.org/assignments/media-types/media-types.xhtml
+ */
+ var WOFF = "application/font-woff";
+ var JPEG = "image/jpeg";
+
+ return {
+ woff: WOFF,
+ woff2: WOFF,
+ ttf: "application/font-truetype",
+ eot: "application/vnd.ms-fontobject",
+ png: "image/png",
+ jpg: JPEG,
+ jpeg: JPEG,
+ gif: "image/gif",
+ tiff: "image/tiff",
+ svg: "image/svg+xml",
+ };
+ }
+
+ function parseExtension(url) {
+ var match = /\.([^\.\/]*?)$/g.exec(url);
+ if (match) return match[1];
+ else return "";
+ }
+
+ function mimeType(url) {
+ var extension = parseExtension(url).toLowerCase();
+ return mimes()[extension] || "";
+ }
+
+ function isDataUrl(url) {
+ return url.search(/^(data:)/) !== -1;
+ }
+
+ function toBlob(canvas) {
+ return new Promise(function (resolve) {
+ var binaryString = window.atob(canvas.toDataURL().split(",")[1]);
+ var length = binaryString.length;
+ var binaryArray = new Uint8Array(length);
+
+ for (var i = 0; i < length; i++)
+ binaryArray[i] = binaryString.charCodeAt(i);
+
+ resolve(
+ new Blob([binaryArray], {
+ type: "image/png",
+ })
+ );
+ });
+ }
+
+ function canvasToBlob(canvas) {
+ if (canvas.toBlob)
+ return new Promise(function (resolve) {
+ canvas.toBlob(resolve);
+ });
+
+ return toBlob(canvas);
+ }
+
+ function resolveUrl(url, baseUrl) {
+ var doc = document.implementation.createHTMLDocument();
+ var base = doc.createElement("base");
+ doc.head.appendChild(base);
+ var a = doc.createElement("a");
+ doc.body.appendChild(a);
+ base.href = baseUrl;
+ a.href = url;
+ return a.href;
+ }
+
+ function uid() {
+ var index = 0;
+
+ return function () {
+ return "u" + fourRandomChars() + index++;
+
+ function fourRandomChars() {
+ /* see http://stackoverflow.com/a/6248722/2519373 */
+ return (
+ "0000" + ((Math.random() * Math.pow(36, 4)) << 0).toString(36)
+ ).slice(-4);
+ }
+ };
+ }
+
+ function makeImage(uri) {
+ return new Promise(function (resolve, reject) {
+ var image = new Image();
+ image.onload = function () {
+ resolve(image);
+ };
+ image.onerror = reject;
+ image.src = uri;
+ });
+ }
+
+ function getAndEncode(url) {
+ var TIMEOUT = 30000;
+ if (domtoimage.impl.options.cacheBust) {
+ // Cache bypass so we dont have CORS issues with cached images
+ // Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
+ url += (/\?/.test(url) ? "&" : "?") + new Date().getTime();
+ }
+
+ return new Promise(function (resolve) {
+ var request = new XMLHttpRequest();
+
+ request.onreadystatechange = done;
+ request.ontimeout = timeout;
+ request.responseType = "blob";
+ request.timeout = TIMEOUT;
+ request.open("GET", url, true);
+ request.send();
+
+ var placeholder;
+ if (domtoimage.impl.options.imagePlaceholder) {
+ var split = domtoimage.impl.options.imagePlaceholder.split(/,/);
+ if (split && split[1]) {
+ placeholder = split[1];
+ }
+ }
+
+ function done() {
+ if (request.readyState !== 4) return;
+
+ if (request.status !== 200) {
+ if (placeholder) {
+ resolve(placeholder);
+ } else {
+ fail(
+ "cannot fetch resource: " + url + ", status: " + request.status
+ );
+ }
+
+ return;
+ }
+
+ var encoder = new FileReader();
+ encoder.onloadend = function () {
+ var content = encoder.result.split(/,/)[1];
+ resolve(content);
+ };
+ encoder.readAsDataURL(request.response);
+ }
+
+ function timeout() {
+ if (placeholder) {
+ resolve(placeholder);
+ } else {
+ fail(
+ "timeout of " +
+ TIMEOUT +
+ "ms occured while fetching resource: " +
+ url
+ );
+ }
+ }
+
+ function fail(message) {
+ console.error(message);
+ resolve("");
+ }
+ });
+ }
+
+ function dataAsUrl(content, type) {
+ return "data:" + type + ";base64," + content;
+ }
+
+ function escape(string) {
+ return string.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
+ }
+
+ function delay(ms) {
+ return function (arg) {
+ return new Promise(function (resolve) {
+ setTimeout(function () {
+ resolve(arg);
+ }, ms);
+ });
+ };
+ }
+
+ function asArray(arrayLike) {
+ var array = [];
+ var length = arrayLike.length;
+ for (var i = 0; i < length; i++) array.push(arrayLike[i]);
+ return array;
+ }
+
+ function escapeXhtml(string) {
+ return string.replace(/#/g, "%23").replace(/\n/g, "%0A");
+ }
+
+ function width(node) {
+ var leftBorder = px(node, "border-left-width");
+ var rightBorder = px(node, "border-right-width");
+ return node.scrollWidth + leftBorder + rightBorder;
+ }
+
+ function height(node) {
+ var topBorder = px(node, "border-top-width");
+ var bottomBorder = px(node, "border-bottom-width");
+ return node.scrollHeight + topBorder + bottomBorder;
+ }
+
+ function px(node, styleProperty) {
+ var value = window.getComputedStyle(node).getPropertyValue(styleProperty);
+ return parseFloat(value.replace("px", ""));
+ }
+}
+
+function newInliner() {
+ var URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
+
+ return {
+ inlineAll: inlineAll,
+ shouldProcess: shouldProcess,
+ impl: {
+ readUrls: readUrls,
+ inline: inline,
+ },
+ };
+
+ function shouldProcess(string) {
+ return string.search(URL_REGEX) !== -1;
+ }
+
+ function readUrls(string) {
+ var result = [];
+ var match;
+ while ((match = URL_REGEX.exec(string)) !== null) {
+ result.push(match[1]);
+ }
+ return result.filter(function (url) {
+ return !util.isDataUrl(url);
+ });
+ }
+
+ function inline(string, url, baseUrl, get) {
+ return Promise.resolve(url)
+ .then(function (url) {
+ return baseUrl ? util.resolveUrl(url, baseUrl) : url;
+ })
+ .then(get || util.getAndEncode)
+ .then(function (data) {
+ return util.dataAsUrl(data, util.mimeType(url));
+ })
+ .then(function (dataUrl) {
+ return string.replace(urlAsRegex(url), "$1" + dataUrl + "$3");
+ });
+
+ function urlAsRegex(url) {
+ return new RegExp(
+ "(url\\(['\"]?)(" + util.escape(url) + ")(['\"]?\\))",
+ "g"
+ );
+ }
+ }
+
+ function inlineAll(string, baseUrl, get) {
+ if (nothingToInline()) return Promise.resolve(string);
+
+ return Promise.resolve(string)
+ .then(readUrls)
+ .then(function (urls) {
+ var done = Promise.resolve(string);
+ urls.forEach(function (url) {
+ done = done.then(function (string) {
+ return inline(string, url, baseUrl, get);
+ });
+ });
+ return done;
+ });
+
+ function nothingToInline() {
+ return !shouldProcess(string);
+ }
+ }
+}
+
+function newFontFaces() {
+ return {
+ resolveAll: resolveAll,
+ impl: {
+ readAll: readAll,
+ },
+ };
+
+ function resolveAll() {
+ return readAll(document)
+ .then(function (webFonts) {
+ return Promise.all(
+ webFonts.map(function (webFont) {
+ return webFont.resolve();
+ })
+ );
+ })
+ .then(function (cssStrings) {
+ return cssStrings.join("\n");
+ });
+ }
+
+ function readAll() {
+ return Promise.resolve(util.asArray(document.styleSheets))
+ .then(getCssRules)
+ .then(selectWebFontRules)
+ .then(function (rules) {
+ return rules.map(newWebFont);
+ });
+
+ function selectWebFontRules(cssRules) {
+ return cssRules
+ .filter(function (rule) {
+ return rule.type === CSSRule.FONT_FACE_RULE;
+ })
+ .filter(function (rule) {
+ return inliner.shouldProcess(rule.style.getPropertyValue("src"));
+ });
+ }
+
+ function getCssRules(styleSheets) {
+ var cssRules = [];
+ styleSheets.forEach(function (sheet) {
+ try {
+ util
+ .asArray(sheet.cssRules || [])
+ .forEach(cssRules.push.bind(cssRules));
+ } catch (e) {
+ console.log(
+ "Error while reading CSS rules from " + sheet.href,
+ e.toString()
+ );
+ }
+ });
+ return cssRules;
+ }
+
+ function newWebFont(webFontRule) {
+ return {
+ resolve: function resolve() {
+ var baseUrl = (webFontRule.parentStyleSheet || {}).href;
+ return inliner.inlineAll(webFontRule.cssText, baseUrl);
+ },
+ src: function () {
+ return webFontRule.style.getPropertyValue("src");
+ },
+ };
+ }
+ }
+}
+
+function newImages() {
+ return {
+ inlineAll: inlineAll,
+ impl: {
+ newImage: newImage,
+ },
+ };
+
+ function newImage(element) {
+ return {
+ inline: inline,
+ };
+
+ function inline(get) {
+ if (util.isDataUrl(element.src)) return Promise.resolve();
+
+ return Promise.resolve(element.src)
+ .then(get || util.getAndEncode)
+ .then(function (data) {
+ return util.dataAsUrl(data, util.mimeType(element.src));
+ })
+ .then(function (dataUrl) {
+ return new Promise(function (resolve, reject) {
+ element.onload = resolve;
+ element.onerror = reject;
+ element.src = dataUrl;
+ });
+ });
+ }
+ }
+
+ function inlineAll(node) {
+ if (!(node instanceof Element)) return Promise.resolve(node);
+
+ return inlineBackground(node).then(function () {
+ if (node instanceof HTMLImageElement) return newImage(node).inline();
+ else
+ return Promise.all(
+ util.asArray(node.childNodes).map(function (child) {
+ return inlineAll(child);
+ })
+ );
+ });
+
+ function inlineBackground(node) {
+ var background = node.style.getPropertyValue("background");
+
+ if (!background) return Promise.resolve(node);
+
+ return inliner
+ .inlineAll(background)
+ .then(function (inlined) {
+ node.style.setProperty(
+ "background",
+ inlined,
+ node.style.getPropertyPriority("background")
+ );
+ })
+ .then(function () {
+ return node;
+ });
+ }
+ }
+}
+
+export default domtoimage;
diff --git a/src/util/file.js b/src/util/file.js
new file mode 100644
index 0000000..0ca1ce0
--- /dev/null
+++ b/src/util/file.js
@@ -0,0 +1,61 @@
+import { message } from "antd";
+import { remove, transaction } from "mobx";
+import { toJS } from "mobx";
+import store from "../store/global";
+import { clearHistory } from "../store/history";
+import domtoimage from "./dom-to-image";
+import { VERSION } from "./version";
+
+function read(file) {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsText(file, "utf8");
+ reader.onloadend = () => {
+ resolve(JSON.parse(reader.result));
+ };
+ });
+}
+
+async function loadFile(file) {
+ const data = await read(file);
+ if (!(data.version <= VERSION)) {
+ message.error("不支持的文件格式，请使用最新版本");
+ console.log(data);
+ return;
+ }
+ clearHistory();
+ transaction(() => {
+ for (const key of Object.keys(store)) {
+ remove(store, key);
+ }
+ Object.assign(store, data);
+ });
+}
+
+function saveFile() {
+ const data = new Blob([JSON.stringify(toJS(store))], {
+ type: "application/json",
+ });
+ const downloadLink = document.createElement("a");
+ downloadLink.download = (store.title || "未标题") + ".json";
+ downloadLink.href = URL.createObjectURL(data);
+ downloadLink.click();
+ URL.revokeObjectURL(downloadLink.href);
+}
+
+function exportFile() {
+ // const canvas = document.createElement("canvas");
+ // const ctx = canvas.getContext("2d");
+ // const dpi = window.devicePixelRatio || 1;
+ // canvas.style.width = store.canvasWidth;
+ // canvas.style.height = store.canvasHeight;
+ // ctx.scale(dpi, dpi);
+ domtoimage.toPng(document.querySelector("#temp_svg")).then((dataUrl) => {
+ const downloadLink = document.createElement("a");
+ downloadLink.download = (store.title || "未标题") + ".png";
+ downloadLink.href = dataUrl;
+ downloadLink.click();
+ });
+}
+
+export { saveFile, loadFile, exportFile };
diff --git a/src/view/Canvas/index.js b/src/view/Canvas/index.js
index b379d12..8740b78 100644
--- a/src/view/Canvas/index.js
+++ b/src/view/Canvas/index.js
@@ -1,14 +1,27 @@
import { observer } from "mobx-react-lite";
+import { useEffect, useRef } from "react";
+import state from "../../store/state";
import store from "../../store/global";
import Styles from "./index.module.css";
// ENHANCE: 增加整体缩放能力
function Canvas({ children, ...props }) {
+ const ref = useRef();
+ useEffect(() => {
+ state.refs.svg = ref;
+ return () => {
+ state.refs.svg = null;
+ };
+ }, []);
+
return (