Added saving and loading via URL
This commit is contained in:
parent
5ab8e1ca71
commit
d84efa3f32
1
TODO.md
1
TODO.md
|
|
@ -6,7 +6,6 @@ Should have
|
|||
- Material usage overview
|
||||
- Generate cutting list
|
||||
- Support for fractional inches (see, not all europeans look down on freedom units!)
|
||||
- Save/load via URL (MessagePack encoded Base64 in URL)
|
||||
|
||||
Nice to have
|
||||
----
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>CuttingBoard</title><link href="css/app.52a4a991.css" rel="preload" as="style"><link href="js/app.0b618788.js" rel="preload" as="script"><link href="js/chunk-vendors.2637e339.js" rel="preload" as="script"><link href="css/app.52a4a991.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but CuttingBoard doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.2637e339.js"></script><script src="js/app.0b618788.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>CuttingBoard</title><link href="css/app.52a4a991.css" rel="preload" as="style"><link href="js/app.112e05e3.js" rel="preload" as="script"><link href="js/chunk-vendors.135c102b.js" rel="preload" as="script"><link href="css/app.52a4a991.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but CuttingBoard doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.135c102b.js"></script><script src="js/app.112e05e3.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -2098,6 +2098,12 @@
|
|||
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@ygoe/msgpack": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@ygoe/msgpack/-/msgpack-1.0.2.tgz",
|
||||
"integrity": "sha512-GXnUKo8aFiTE1RmhzGXzXNXoN500Zxe0FH62thZi18xI82N+Gcdw9MWjhV0SdTEfjHFwZiw0+ZJSE8sD02pRsQ==",
|
||||
"dev": true
|
||||
},
|
||||
"accepts": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
|
||||
|
|
@ -2530,6 +2536,16 @@
|
|||
"integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
|
||||
"dev": true
|
||||
},
|
||||
"bindings": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
|
||||
"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"file-uri-to-path": "1.0.0"
|
||||
}
|
||||
},
|
||||
"bluebird": {
|
||||
"version": "3.7.2",
|
||||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
|
||||
|
|
@ -5001,6 +5017,13 @@
|
|||
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
|
||||
"dev": true
|
||||
},
|
||||
"file-uri-to-path": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
|
||||
"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"filesize": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
|
||||
|
|
@ -6934,6 +6957,13 @@
|
|||
"thenify-all": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"nan": {
|
||||
"version": "2.14.2",
|
||||
"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
|
||||
"integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"nanomatch": {
|
||||
"version": "1.2.13",
|
||||
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
|
||||
|
|
@ -10572,7 +10602,11 @@
|
|||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
|
||||
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"bindings": "^1.5.0",
|
||||
"nan": "^2.12.1"
|
||||
}
|
||||
},
|
||||
"glob-parent": {
|
||||
"version": "3.1.0",
|
||||
|
|
@ -10883,7 +10917,11 @@
|
|||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
|
||||
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"bindings": "^1.5.0",
|
||||
"nan": "^2.12.1"
|
||||
}
|
||||
},
|
||||
"glob-parent": {
|
||||
"version": "3.1.0",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@ygoe/msgpack": "^1.0.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2"
|
||||
|
|
|
|||
48
src/App.vue
48
src/App.vue
|
|
@ -11,6 +11,10 @@
|
|||
|
||||
<h1>Save / load</h1>
|
||||
<div class="loadSave block">
|
||||
<p>
|
||||
Below you can download the current settings or load them again from a file. You can also bookmark the current page or copy the URL from the address bar instead, as it is automatically updated whenever you change anything.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input type="text" v-model="saveFilename" />
|
||||
<button @click="save()">Save</button>
|
||||
|
|
@ -50,6 +54,7 @@ import EndGrainPreview from './components/EndGrainPreview.vue'
|
|||
import EdgeGrainPreview from './components/EdgeGrainPreview.vue'
|
||||
|
||||
import { saveAs } from 'file-saver';
|
||||
import { bytesToBase64, base64ToBytes } from './lib/base64';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
|
@ -68,6 +73,42 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
created()
|
||||
{
|
||||
const self = this;
|
||||
const checkHash = () =>
|
||||
{
|
||||
if (!location.hash)
|
||||
return;
|
||||
|
||||
const hash = location.hash.substring(1);
|
||||
try
|
||||
{
|
||||
const decoded = base64ToBytes(hash);
|
||||
if (decoded)
|
||||
self.$store.commit('loadMsgPack', decoded);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
checkHash();
|
||||
|
||||
window.addEventListener('hashchange', () =>
|
||||
{
|
||||
checkHash();
|
||||
});
|
||||
},
|
||||
|
||||
computed: {
|
||||
hash()
|
||||
{
|
||||
return bytesToBase64(this.$store.getters.saveMsgPack);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
save()
|
||||
{
|
||||
|
|
@ -95,6 +136,13 @@ export default {
|
|||
});
|
||||
reader.readAsBinaryString(loadFile);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
hash: (newValue) =>
|
||||
{
|
||||
history.replaceState({}, '', '#' + newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,9 @@ export default {
|
|||
|
||||
boardHeight()
|
||||
{
|
||||
if (this.layers.length == 0)
|
||||
return 0;
|
||||
|
||||
return this.layers
|
||||
.map(currentValue => currentValue.width)
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue);
|
||||
|
|
|
|||
|
|
@ -58,6 +58,9 @@ export default {
|
|||
|
||||
boardHeight()
|
||||
{
|
||||
if (this.layers.length == 0)
|
||||
return 0;
|
||||
|
||||
return this.layers
|
||||
.map(currentValue => currentValue.width)
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
/*
|
||||
MIT License
|
||||
Copyright (c) 2020 Egor Nepomnyaschih
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
|
||||
/*
|
||||
// This constant can also be computed with the following algorithm:
|
||||
const base64abc = [],
|
||||
A = "A".charCodeAt(0),
|
||||
a = "a".charCodeAt(0),
|
||||
n = "0".charCodeAt(0);
|
||||
for (let i = 0; i < 26; ++i) {
|
||||
base64abc.push(String.fromCharCode(A + i));
|
||||
}
|
||||
for (let i = 0; i < 26; ++i) {
|
||||
base64abc.push(String.fromCharCode(a + i));
|
||||
}
|
||||
for (let i = 0; i < 10; ++i) {
|
||||
base64abc.push(String.fromCharCode(n + i));
|
||||
}
|
||||
base64abc.push("+");
|
||||
base64abc.push("/");
|
||||
*/
|
||||
const base64abc = [
|
||||
"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
|
||||
"N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
|
||||
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
|
||||
"n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
|
||||
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "/"
|
||||
];
|
||||
|
||||
/*
|
||||
// This constant can also be computed with the following algorithm:
|
||||
const l = 256, base64codes = new Uint8Array(l);
|
||||
for (let i = 0; i < l; ++i) {
|
||||
base64codes[i] = 255; // invalid character
|
||||
}
|
||||
base64abc.forEach((char, index) => {
|
||||
base64codes[char.charCodeAt(0)] = index;
|
||||
});
|
||||
base64codes["=".charCodeAt(0)] = 0; // ignored anyway, so we just need to prevent an error
|
||||
*/
|
||||
const base64codes = [
|
||||
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
|
||||
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,
|
||||
255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 62, 255, 255, 255, 63,
|
||||
52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 255, 255, 255, 0, 255, 255,
|
||||
255, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
|
||||
15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 255, 255, 255, 255, 255,
|
||||
255, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
|
||||
41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
|
||||
];
|
||||
|
||||
function getBase64Code(charCode) {
|
||||
if (charCode >= base64codes.length) {
|
||||
throw new Error("Unable to parse base64 string.");
|
||||
}
|
||||
const code = base64codes[charCode];
|
||||
if (code === 255) {
|
||||
throw new Error("Unable to parse base64 string.");
|
||||
}
|
||||
return code;
|
||||
}
|
||||
|
||||
export function bytesToBase64(bytes) {
|
||||
let result = '', i, l = bytes.length;
|
||||
for (i = 2; i < l; i += 3) {
|
||||
result += base64abc[bytes[i - 2] >> 2];
|
||||
result += base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)];
|
||||
result += base64abc[((bytes[i - 1] & 0x0F) << 2) | (bytes[i] >> 6)];
|
||||
result += base64abc[bytes[i] & 0x3F];
|
||||
}
|
||||
if (i === l + 1) { // 1 octet yet to write
|
||||
result += base64abc[bytes[i - 2] >> 2];
|
||||
result += base64abc[(bytes[i - 2] & 0x03) << 4];
|
||||
result += "==";
|
||||
}
|
||||
if (i === l) { // 2 octets yet to write
|
||||
result += base64abc[bytes[i - 2] >> 2];
|
||||
result += base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)];
|
||||
result += base64abc[(bytes[i - 1] & 0x0F) << 2];
|
||||
result += "=";
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function base64ToBytes(str) {
|
||||
if (str.length % 4 !== 0) {
|
||||
throw new Error("Unable to parse base64 string.");
|
||||
}
|
||||
const index = str.indexOf("=");
|
||||
if (index !== -1 && index < str.length - 2) {
|
||||
throw new Error("Unable to parse base64 string.");
|
||||
}
|
||||
let missingOctets = str.endsWith("==") ? 2 : str.endsWith("=") ? 1 : 0,
|
||||
n = str.length,
|
||||
result = new Uint8Array(3 * (n / 4)),
|
||||
buffer;
|
||||
for (let i = 0, j = 0; i < n; i += 4, j += 3) {
|
||||
buffer =
|
||||
getBase64Code(str.charCodeAt(i)) << 18 |
|
||||
getBase64Code(str.charCodeAt(i + 1)) << 12 |
|
||||
getBase64Code(str.charCodeAt(i + 2)) << 6 |
|
||||
getBase64Code(str.charCodeAt(i + 3));
|
||||
result[j] = buffer >> 16;
|
||||
result[j + 1] = (buffer >> 8) & 0xFF;
|
||||
result[j + 2] = buffer & 0xFF;
|
||||
}
|
||||
return result.subarray(0, result.length - missingOctets);
|
||||
}
|
||||
|
||||
export function base64encode(str, encoder = new TextEncoder()) {
|
||||
return bytesToBase64(encoder.encode(str));
|
||||
}
|
||||
|
||||
export function base64decode(str, decoder = new TextDecoder()) {
|
||||
return decoder.decode(base64ToBytes(str));
|
||||
}
|
||||
108
src/store.js
108
src/store.js
|
|
@ -1,6 +1,8 @@
|
|||
import { createStore } from 'vuex';
|
||||
import { units } from './lib/units';
|
||||
|
||||
import { serialize, deserialize } from '@ygoe/msgpack';
|
||||
|
||||
|
||||
function mergeObject(source, target)
|
||||
{
|
||||
|
|
@ -22,6 +24,56 @@ function parseFloatDef(value)
|
|||
|
||||
|
||||
|
||||
function loadObject(state, parsedPayload)
|
||||
{
|
||||
if (parsedPayload.hasOwnProperty('settings'))
|
||||
mergeObject(parsedPayload.settings, state.settings);
|
||||
|
||||
if (parsedPayload.hasOwnProperty('boards'))
|
||||
{
|
||||
|
||||
const newBoards = parsedPayload.boards.map(board =>
|
||||
{
|
||||
if (!board.hasOwnProperty('layers'))
|
||||
{
|
||||
return {
|
||||
layers: []
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
layers: board.layers.map(layer =>
|
||||
{
|
||||
return {
|
||||
wood: parseFloatDef(layer.wood),
|
||||
width: parseFloatDef(layer.width)
|
||||
}
|
||||
})
|
||||
};
|
||||
})
|
||||
|
||||
if (newBoards.length === 0)
|
||||
newBoards.push({ layers: [] });
|
||||
|
||||
state.boards = newBoards;
|
||||
}
|
||||
|
||||
if (parsedPayload.hasOwnProperty('wood'))
|
||||
{
|
||||
const newWood = parsedPayload.wood.map(item =>
|
||||
{
|
||||
return {
|
||||
name: item.name,
|
||||
color: item.color
|
||||
};
|
||||
});
|
||||
|
||||
state.wood = newWood;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
settings: {
|
||||
|
|
@ -178,53 +230,20 @@ export default createStore({
|
|||
load(state, payload)
|
||||
{
|
||||
const parsedPayload = JSON.parse(payload);
|
||||
loadObject(state, parsedPayload);
|
||||
},
|
||||
|
||||
if (parsedPayload.hasOwnProperty('settings'))
|
||||
mergeObject(parsedPayload.settings, state.settings);
|
||||
|
||||
if (parsedPayload.hasOwnProperty('boards'))
|
||||
loadMsgPack(state, payload)
|
||||
{
|
||||
try
|
||||
{
|
||||
|
||||
const newBoards = parsedPayload.boards.map(board =>
|
||||
{
|
||||
if (!board.hasOwnProperty('layers'))
|
||||
{
|
||||
return {
|
||||
layers: []
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
layers: board.layers.map(layer =>
|
||||
{
|
||||
return {
|
||||
wood: parseFloatDef(layer.wood),
|
||||
width: parseFloatDef(layer.width)
|
||||
}
|
||||
})
|
||||
};
|
||||
})
|
||||
|
||||
if (newBoards.length === 0)
|
||||
newBoards.push({ layers: [] });
|
||||
|
||||
state.boards = newBoards;
|
||||
const parsedPayload = deserialize(payload);
|
||||
loadObject(state, parsedPayload);
|
||||
}
|
||||
|
||||
if (parsedPayload.hasOwnProperty('wood'))
|
||||
catch(e)
|
||||
{
|
||||
const newWood = parsedPayload.wood.map(item =>
|
||||
{
|
||||
return {
|
||||
name: item.name,
|
||||
color: item.color
|
||||
};
|
||||
});
|
||||
|
||||
state.wood = newWood;
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
// TODO validate layers and wood types and apply the new sets
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -232,6 +251,11 @@ export default createStore({
|
|||
save(state)
|
||||
{
|
||||
return JSON.stringify(state);
|
||||
},
|
||||
|
||||
saveMsgPack(state)
|
||||
{
|
||||
return serialize(state);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue