Reorganizing exports and implement image export
This commit is contained in:
parent
9c5ead9ffa
commit
85ee4b117a
65
js/export.js
65
js/export.js
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
24
js/export/export-image.js
Normal file
24
js/export/export-image.js
Normal file
|
@ -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());
|
||||||
|
}
|
153
js/export/export.js
Normal file
153
js/export/export.js
Normal file
|
@ -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);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user