From 85ee4b117aea03feb18c1870119d1bf33cb54096 Mon Sep 17 00:00:00 2001 From: KingOfDog Date: Mon, 4 Mar 2019 19:17:27 +0100 Subject: [PATCH] Reorganizing exports and implement image export --- js/export.js | 65 ---------------- js/export/export-image.js | 24 ++++++ js/export/export.js | 153 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 177 insertions(+), 65 deletions(-) delete mode 100644 js/export.js create mode 100644 js/export/export-image.js create mode 100644 js/export/export.js diff --git a/js/export.js b/js/export.js deleted file mode 100644 index f7e7e31..0000000 --- a/js/export.js +++ /dev/null @@ -1,65 +0,0 @@ -function exportToJson() { - const _states = JSON.parse(JSON.stringify(states)); - const _connections = JSON.parse(JSON.stringify(connections)).map((conn, index) => { - conn.type = connections[index].constructor.name; - return conn; - }); - const data = { - states: _states, - connections: _connections.filter(conn => conn.type === 'Connection').map(conn => { - conn.stateA = conn.stateA.id; - conn.stateB = conn.stateB.id; - return conn; - }), - startConnections: _connections.filter(conn => conn.type === 'StartConnection').map(conn => { - conn.state = conn.state.id; - return conn; - }), - selfConnections: _connections.filter(conn => conn.type === 'SelfConnection').map(conn => { - conn.state = conn.state.id; - return conn; - }), - settings, - }; - return JSON.stringify(data); -} - -function importFromJson(json) { - const data = JSON.parse(json); - - states.push(...data.states.map(state => Object.setPrototypeOf(state, State.prototype))); - connections.push(...data.connections.map(conn => Object.setPrototypeOf(conn, Connection.prototype)).map(conn => { - conn.stateA = states.find(state => state.id === conn.stateA); - conn.stateB = states.find(state => state.id === conn.stateB); - return conn; - })); - connections.push(...data.startConnections.map(conn => Object.setPrototypeOf(conn, StartConnection.prototype)).map(conn => { - conn.state = states.find(state => state.id === conn.state); - return conn; - })); - connections.push(...data.selfConnections.map(conn => Object.setPrototypeOf(conn, SelfConnection.prototype)).map(conn => { - conn.state = states.find(state => state.id === conn.state); - return conn; - })); -} - -function exportToFile() { - const name = 'placeholder.fsm'; - const json = exportToJson(); - console.log(json); - downloadFile(name, json, 'application/json'); -} - -function downloadFile(name, content, type) { - const element = document.createElement('a'); - - element.setAttribute('href', `data:${type},charset=utf-8,${content}`); - element.setAttribute('download', name); - - element.style.display = 'none'; - document.body.appendChild(element); - - element.click(); - document.body.removeChild(element); -} - diff --git a/js/export/export-image.js b/js/export/export-image.js new file mode 100644 index 0000000..0db2bd0 --- /dev/null +++ b/js/export/export-image.js @@ -0,0 +1,24 @@ +function exportToImage() { + if(activeDocument === null) { + return null; + } + + return canvas.toDataURL('image/png'); +} + +function downloadImage(name, dataUrl) { + const element = document.createElement('a'); + + element.setAttribute('href', dataUrl); + element.setAttribute('download', name); + + element.style.display = 'none'; + document.body.appendChild(element); + + element.click(); + document.body.removeChild(element); +} + +function exportToImageFile() { + downloadImage('test.png', exportToImage()); +} \ No newline at end of file diff --git a/js/export/export.js b/js/export/export.js new file mode 100644 index 0000000..b1c82e6 --- /dev/null +++ b/js/export/export.js @@ -0,0 +1,153 @@ +function prepareForExport(doc, _settings = settings) { + let states = JSON.parse(JSON.stringify(doc.states)); + + states.forEach(state => { + delete state.mouseOffsetX; + delete state.mouseOffsetY; + delete state.activeTime; + delete state.isActive; + }); + + let _connections = JSON.parse(JSON.stringify(doc.connections)).map((conn, index) => { + conn.type = doc.connections[index].constructor.name; + return conn; + }); + + _connections = _connections.map(conn => { + switch(conn.type) { + case 'Connection': + conn.stateA = conn.stateA.id; + conn.stateB = conn.stateB.id; + break; + case 'StartConnection': + conn.state = conn.state.id; + break; + case 'SelfConnection': + conn.state = conn.state.id; + break; + } + return conn; + }); + + const _doc = JSON.parse(JSON.stringify(doc)); + _doc.states = states; + _doc.connections = _connections; + + delete _doc.unsaved; + delete _doc.lastSavedHash; + delete _doc.element; + + return { + document: _doc, + _settings, + }; +} + +function exportToJson(doc, _settings = settings) { + return JSON.stringify(prepareForExport(doc, _settings)); +} + +function parseFromJson(json) { + const data = JSON.parse(json); + + const doc = Object.assign(new FSMDocument(''), data.document); + + doc.states = doc.states.map(state => Object.assign(new State(0, 0), state)); + doc.connections = doc.connections.map(connection => { + switch(connection.type) { + case 'Connection': + connection = Object.assign(new Connection(null, null), connection); + + connection.stateA = doc.states.find(state => state.id === connection.stateA); + connection.stateB = doc.states.find(state => state.id === connection.stateB); + + break; + case 'SelfConnection': + connection = Object.assign(new SelfConnection(null, {x: 0, y: 0}), connection); + + connection.state = doc.states.find(state => state.id === connection.state); + + break; + case 'StartConnection': + connection = Object.assign(new StartConnection(null, {x: 0, y: 0}), connection); + + connection.state = doc.states.find(state => state.id === connection.state); + + break; + } + + delete connection.type; + return connection; + }); + + doc.lastSavedHash = doc.hashCode(); + + return { + document: doc, + settings, + }; +} + +function importFromJson(json) { + const doc = parseFromJson(json); + + addDocument(doc); + switchDocument(doc); +} + +function exportToFile() { + const name = 'placeholder.fsm'; + const json = exportToJson(); + downloadFile(name, json, 'application/json'); +} + +function downloadFile(name, content, type) { + const element = document.createElement('a'); + + element.setAttribute('href', `data:${type},charset=utf-8,${content}`); + element.setAttribute('download', name); + + element.style.display = 'none'; + document.body.appendChild(element); + + element.click(); + document.body.removeChild(element); +} + +function saveToLocalStorage() { + if(activeDocument === null) { + return; + } + + const newDoc = documents[activeDocument]; + const data = getLocalStorageEntries(); + + const index = data.findIndex(entry => entry.document.id === newDoc.id); + + if(index !== -1) { + data[index] = { + document: newDoc, + settings, + }; + } else { + data.push({ + document: newDoc, + settings, + }); + } + + const newData = data.map(entry => prepareForExport(entry.document, entry.settings)); + + localStorage.setItem('documents', JSON.stringify(newData)); +} + +function getLocalStorageEntries() { + const entries = JSON.parse(localStorage.getItem('documents')); + return !!entries ? entries.map(entry => parseFromJson(JSON.stringify(entry))) : []; +} + +function openFromLocalStorage(id) { + const entry = getLocalStorageEntries().find(entry => entry.document.id === id); + addDocument(entry.document); + switchDocument(entry.document); +} \ No newline at end of file