From 12b5eadd9889cdec79a20a26d1481ed914d24be9 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Tue, 1 Jun 2021 08:19:54 -0500 Subject: [PATCH] loading localstorage for faster preview --- src/css/app.css | 10 ++-------- src/css/loading.css | 46 +++++++++++++++++++++++++++++++++++++++++++++ src/index.html | 5 +++-- src/js/loading.js | 9 +++++++++ src/js/start.js | 3 ++- src/js/state.js | 4 ++-- 6 files changed, 64 insertions(+), 13 deletions(-) create mode 100644 src/css/loading.css create mode 100644 src/js/loading.js diff --git a/src/css/app.css b/src/css/app.css index 40b6839..82466c4 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -9,14 +9,8 @@ } #svgcanvas { - background-color: var(--z1); - width: 800px; - height: 600px; - display: flex; - align-items: center; - justify-content: center; - position: relative; - background: var(--z2); + background-color: var(--z2); + display: block; } #workarea { diff --git a/src/css/loading.css b/src/css/loading.css new file mode 100644 index 0000000..01de044 --- /dev/null +++ b/src/css/loading.css @@ -0,0 +1,46 @@ +#workarea > svg { + display: none; +} + +.loading #svgcanvas { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; +} + +#svgcanvas:after { + transition: opacity var(--transition-duration) 300ms; + opacity: 0; +} + +.loading #svgcanvas:after { + position: absolute; + content: 'Loading'; + font-size: 13px; + font-weight: 600; + line-height: var(--x6); + padding: 0 var(--x2); + background: var(--z2); + color: var(--z10); + z-index: 100; + opacity: 1; + border-radius: var(--x1); +} + +.loading #workarea > svg { + display: block; + position: absolute; + background: white; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + + + + diff --git a/src/index.html b/src/index.html index 37e643e..e751920 100644 --- a/src/index.html +++ b/src/index.html @@ -36,9 +36,10 @@ + - +
@@ -49,7 +50,6 @@
-
@@ -747,6 +747,7 @@
+ diff --git a/src/js/loading.js b/src/js/loading.js new file mode 100644 index 0000000..c7d5df5 --- /dev/null +++ b/src/js/loading.js @@ -0,0 +1,9 @@ +(function(){ + const canvasContent = localStorage.getItem("md-canvasContent"); + if (!canvasContent) return; + const parser = new DOMParser(); + const doc = parser.parseFromString(canvasContent, "image/svg+xml"); + const workarea = document.getElementById("workarea") + workarea.appendChild(doc.documentElement); + const svg = workarea.querySelector("svg"); +})(); \ No newline at end of file diff --git a/src/js/start.js b/src/js/start.js index 178bdaf..1c96eaa 100644 --- a/src/js/start.js +++ b/src/js/start.js @@ -119,4 +119,5 @@ state.set("canvasMode", state.get("canvasMode")); svgCanvas.setSvgString(state.get("canvasContent")); editor.paintBox.fill.setPaint(state.get("canvasFill")); editor.paintBox.stroke.setPaint(state.get("canvasStroke")); -editor.paintBox.canvas.setPaint(state.get("canvasBackground")); \ No newline at end of file +editor.paintBox.canvas.setPaint(state.get("canvasBackground")); +document.body.classList.remove("loading"); \ No newline at end of file diff --git a/src/js/state.js b/src/js/state.js index 8e62269..3828cfc 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -48,7 +48,7 @@ function State(){ // basic checks if (val === undefined || val === null) throw "wont save nuthin, " + key + " " + val; const isObject = dao.find(thing => thing.name === key).type === "object"; - localStorage.setItem("write" + "-" + key, isObject ? JSON.stringify(val) : val.toString()); + localStorage.setItem("md" + "-" + key, isObject ? JSON.stringify(val) : val.toString()); } function _getKey(name) { @@ -69,7 +69,7 @@ function State(){ }; function _getValue(key, def) { - const item = localStorage.getItem("write-" + key) || def; + const item = localStorage.getItem("md-" + key) || def; const archetype = dao.find(thing => thing.name === key.split("-")[0]); if (archetype) return archetype.clean(item); else throw "Unkown archetype";