mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Save to local storage
This commit is contained in:
Paulo Menezes
parent
3b919f3235
commit
110b8b15ce
3 changed files with 92 additions and 48 deletions
113
src/index.tsx
113
src/index.tsx
|
|
@ -13,6 +13,8 @@ type ExcaliburTextElement = ExcaliburElement & {
|
|||
actualBoundingBoxAscent: number;
|
||||
};
|
||||
|
||||
const LOCAL_STORAGE_KEY = "excalibur";
|
||||
|
||||
var elements = Array.of<ExcaliburElement>();
|
||||
|
||||
// https://stackoverflow.com/a/6853926/232122
|
||||
|
|
@ -348,6 +350,31 @@ function deleteSelectedElements() {
|
|||
}
|
||||
}
|
||||
|
||||
function save() {
|
||||
if (elements && elements.length > 0) {
|
||||
const items = [...elements];
|
||||
for (const item of items) {
|
||||
item.isSelected = false;
|
||||
}
|
||||
|
||||
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(items));
|
||||
}
|
||||
}
|
||||
|
||||
function restore() {
|
||||
const el = localStorage.getItem(LOCAL_STORAGE_KEY);
|
||||
|
||||
if (el) {
|
||||
const items = JSON.parse(el);
|
||||
for (let item of items) {
|
||||
item = generateDraw(item);
|
||||
}
|
||||
elements = [...items];
|
||||
|
||||
drawScene();
|
||||
}
|
||||
}
|
||||
|
||||
type AppState = {
|
||||
draggingElement: ExcaliburElement | null;
|
||||
elementType: string;
|
||||
|
|
@ -436,50 +463,62 @@ class App extends React.Component<{}, AppState> {
|
|||
}
|
||||
|
||||
public render() {
|
||||
const hasSavedItems = !!localStorage.getItem(LOCAL_STORAGE_KEY);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="exportWrapper">
|
||||
<button
|
||||
onClick={() => {
|
||||
exportAsPNG({
|
||||
exportBackground: this.state.exportBackground,
|
||||
exportVisibleOnly: this.state.exportVisibleOnly,
|
||||
exportPadding: this.state.exportPadding
|
||||
});
|
||||
}}
|
||||
>
|
||||
Export to png
|
||||
</button>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.exportBackground}
|
||||
onChange={e => {
|
||||
this.setState({ exportBackground: e.target.checked });
|
||||
<div className="wrappers">
|
||||
<div className="saveWrapper">
|
||||
<button disabled={elements.length === 0} onClick={save}>
|
||||
Save
|
||||
</button>
|
||||
<button disabled={!hasSavedItems} onClick={restore}>
|
||||
Restore
|
||||
</button>
|
||||
</div>
|
||||
<div className="exportWrapper">
|
||||
<button
|
||||
onClick={() => {
|
||||
exportAsPNG({
|
||||
exportBackground: this.state.exportBackground,
|
||||
exportVisibleOnly: this.state.exportVisibleOnly,
|
||||
exportPadding: this.state.exportPadding
|
||||
});
|
||||
}}
|
||||
/>{" "}
|
||||
background
|
||||
</label>
|
||||
<label>
|
||||
>
|
||||
Export to png
|
||||
</button>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.exportBackground}
|
||||
onChange={e => {
|
||||
this.setState({ exportBackground: e.target.checked });
|
||||
}}
|
||||
/>{" "}
|
||||
background
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.exportVisibleOnly}
|
||||
onChange={e => {
|
||||
this.setState({ exportVisibleOnly: e.target.checked });
|
||||
}}
|
||||
/>
|
||||
visible area only
|
||||
</label>
|
||||
(padding:
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.exportVisibleOnly}
|
||||
type="number"
|
||||
value={this.state.exportPadding}
|
||||
onChange={e => {
|
||||
this.setState({ exportVisibleOnly: e.target.checked });
|
||||
this.setState({ exportPadding: Number(e.target.value) });
|
||||
}}
|
||||
disabled={!this.state.exportVisibleOnly}
|
||||
/>
|
||||
visible area only
|
||||
</label>
|
||||
(padding:
|
||||
<input
|
||||
type="number"
|
||||
value={this.state.exportPadding}
|
||||
onChange={e => {
|
||||
this.setState({ exportPadding: Number(e.target.value) });
|
||||
}}
|
||||
disabled={!this.state.exportVisibleOnly}
|
||||
/>
|
||||
px)
|
||||
px)
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onCut={e => {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,13 @@
|
|||
src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
|
||||
}
|
||||
|
||||
.exportWrapper {
|
||||
.wrappers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.exportWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
20
yarn.lock
20
yarn.lock
|
|
@ -1402,16 +1402,16 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
|
||||
integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
|
||||
|
||||
"@types/react-dom@^16.9.4":
|
||||
"@types/react-dom@16.9.4":
|
||||
version "16.9.4"
|
||||
resolved "http://storage.mds.yandex.net/get-npm/1893413/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
|
||||
integrity sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@^16.9.17":
|
||||
"@types/react@*", "@types/react@16.9.17":
|
||||
version "16.9.17"
|
||||
resolved "http://storage.mds.yandex.net/get-npm/1891400/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
|
||||
integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
|
|
@ -5011,9 +5011,9 @@ https-browserify@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
|
||||
integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
|
||||
|
||||
husky@^3.1.0:
|
||||
husky@3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "http://storage.mds.yandex.net/get-npm/1893478/husky-3.1.0.tgz#5faad520ab860582ed94f0c1a77f0f04c90b57c0"
|
||||
resolved "https://registry.yarnpkg.com/husky/-/husky-3.1.0.tgz#5faad520ab860582ed94f0c1a77f0f04c90b57c0"
|
||||
integrity sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==
|
||||
dependencies:
|
||||
chalk "^2.4.2"
|
||||
|
|
@ -6274,9 +6274,9 @@ lines-and-columns@^1.1.6:
|
|||
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
|
||||
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
|
||||
|
||||
lint-staged@^9.5.0:
|
||||
lint-staged@9.5.0:
|
||||
version "9.5.0"
|
||||
resolved "http://storage.mds.yandex.net/get-npm/1893478/lint-staged-9.5.0.tgz#290ec605252af646d9b74d73a0fa118362b05a33"
|
||||
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-9.5.0.tgz#290ec605252af646d9b74d73a0fa118362b05a33"
|
||||
integrity sha512-nawMob9cb/G1J98nb8v3VC/E8rcX1rryUYXVZ69aT9kde6YWX+uvNOEHY5yf2gcWcTJGiD0kqXmCnS3oD75GIA==
|
||||
dependencies:
|
||||
chalk "^2.4.2"
|
||||
|
|
@ -8308,9 +8308,9 @@ prepend-http@^1.0.0:
|
|||
resolved "http://storage.mds.yandex.net/get-npm/35308/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
|
||||
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
|
||||
|
||||
prettier@^1.19.1:
|
||||
prettier@1.19.1:
|
||||
version "1.19.1"
|
||||
resolved "http://storage.mds.yandex.net/get-npm/1893478/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
|
||||
integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
|
||||
|
||||
pretty-bytes@^5.1.0:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue