zcy
/
websch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loading localstorage for faster preview

master
Mark MacKay 2021-06-01 08:19:54 -05:00
parent 5152637d8f
commit 12b5eadd98
6 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/css/app.css
View File

@ -9,14 +9,8 @@
} }
#svgcanvas { #svgcanvas {
background-color: var(--z1); background-color: var(--z2);
width: 800px; display: block;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: var(--z2);
} }
#workarea { #workarea {

46
src/css/loading.css Normal file
View File

@ -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%);
}

5
src/index.html
View File

@ -36,9 +36,10 @@
<link rel="stylesheet" href="css/align_buttons.css" type="text/css"/> <link rel="stylesheet" href="css/align_buttons.css" type="text/css"/>
<link rel="stylesheet" href="css/text.css" type="text/css"/> <link rel="stylesheet" href="css/text.css" type="text/css"/>
<link rel="stylesheet" href="css/sponsors.css" type="text/css"/> <link rel="stylesheet" href="css/sponsors.css" type="text/css"/>
<link rel="stylesheet" href="css/loading.css" type="text/css"/>
<!-- endbuild --> <!-- endbuild -->
</head> </head>
<body> <body class="loading">
<div id="method-draw" class="app"> <div id="method-draw" class="app">
<div id="rulers"> <div id="rulers">
@ -49,7 +50,6 @@
<div id="workarea"> <div id="workarea">
<div id="svgcanvas"> <div id="svgcanvas">
</div> </div>
</div> </div>
@ -747,6 +747,7 @@
<div id="shape_buttons"></div> <div id="shape_buttons"></div>
</div> </div>
<script type="text/javascript" src="js/loading.js"></script>
<!-- build:js all.js --> <!-- build:js all.js -->
<script type="text/javascript" src="js/lib/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="js/lib/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/lib/pathseg.js"></script> <script type="text/javascript" src="js/lib/pathseg.js"></script>

9
src/js/loading.js Normal file
View File

@ -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");
})();

3
src/js/start.js
View File

@ -119,4 +119,5 @@ state.set("canvasMode", state.get("canvasMode"));
svgCanvas.setSvgString(state.get("canvasContent")); svgCanvas.setSvgString(state.get("canvasContent"));
editor.paintBox.fill.setPaint(state.get("canvasFill")); editor.paintBox.fill.setPaint(state.get("canvasFill"));
editor.paintBox.stroke.setPaint(state.get("canvasStroke")); editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
editor.paintBox.canvas.setPaint(state.get("canvasBackground")); editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
document.body.classList.remove("loading");

4
src/js/state.js
View File

@ -48,7 +48,7 @@ function State(){
// basic checks // basic checks
if (val === undefined || val === null) throw "wont save nuthin, " + key + " " + val; if (val === undefined || val === null) throw "wont save nuthin, " + key + " " + val;
const isObject = dao.find(thing => thing.name === key).type === "object"; 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) { function _getKey(name) {
@ -69,7 +69,7 @@ function State(){
}; };
function _getValue(key, def) { 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]); const archetype = dao.find(thing => thing.name === key.split("-")[0]);
if (archetype) return archetype.clean(item); if (archetype) return archetype.clean(item);
else throw "Unkown archetype"; else throw "Unkown archetype";