Reorganizing exports and implement image export
This commit is contained in:
KingOfDog
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