gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
207 lines (185 loc) • 9.65 kB
JavaScript
/*
* Called before init() in every goeditor app
* Initializes the diagram, GoCloudStorage, and the Inspector
* You may need to edit or override things in your own code
*/
function setupEditorApplication () {
// GoCloudStorage helpers
var isAutoSavingCheckbox = document.getElementById("isAutoSavingCheckbox");
var isAutoSavingP = document.getElementById("isAutoSavingP");
// choose new storage service; then, update the current storage span with the correct picture of the current storage service being used
updateCurrentStorageSpan = function () {
storageManager.selectStorageService().then(function(storage){
var span = document.getElementById("currentStorageSpan");
span.innerHTML = "";
var imageSrc = storageManager.getStorageIconPath(storage.className);
var img = document.createElement("img");
img.src = imageSrc;
img.style.width = "20px"; img.style.height = "20px"; img.style.float = "left";
span.appendChild(img);
storage.isAutoSaving = isAutoSavingCheckbox.checked;
updateAutoSaveVisibility();
});
}
isAutoSavingCheckbox.addEventListener("change", function() {
storageManager.storages.iterator.each(function (storage) {
storage.isAutoSaving = isAutoSavingCheckbox.checked;
});
// update the title to reflect the save
var currentFile = document.getElementById("ge-filename");
var currentFileTitle = currentFile.innerText;
if (currentFileTitle[currentFileTitle.length-1] == "*" && storageManager.currentStorage.currentDiagramFile.name != null ) {
currentFile.innerText = currentFileTitle.substr(0,currentFileTitle.length-1);
storageManager.currentStorage.save();
}
});
// update the title on page to reflect newly loaded diagram title
updateTitle = function() {
var currentFile = document.getElementById("ge-filename");
if (storageManager.currentStorage.currentDiagramFile.path !== null) {
var storage = storageManager.currentStorage;
if (storage.currentDiagramFile.path) currentFile.innerHTML = storage.currentDiagramFile.path;
else currentFile.innerHTML = storage.currentDiagramFile.name;
}
else {
currentFile.innerHTML = "Untitled";
storageTag.innerHTML = "Unsaved";
}
}
// can only use the auto save checkbox if the file is already saved to the current storage service
updateAutoSaveVisibility = function () {
var cdf = storageManager.currentStorage.currentDiagramFile;
isAutoSavingP.style.visibility = (cdf.name === null) ? "hidden" : "visible";
}
/*
* Promise handler for core functions
* @param {String} action Accepted values: Load, Delete, New, Save
*/
handlePromise = function (action) {
function handleFileData(action, fileData) {
var words = [];
switch (action) {
case 'Load': words = ['Loaded', 'from']; break;
case 'Delete': words = ['Deleted', 'from']; break;
case 'New': words = ['Created', 'at']; break;
case 'Save': words = ['Saved', 'to']; break;
case 'SaveAs': words = ['Saved', 'to']; break;
}
var storageServiceName = storageManager.currentStorage.serviceName;
if (fileData.id && fileData.name && fileData.path) storageManager.showMessage(words[0] + ' ' + fileData.name + ' (file ID ' + fileData.id + ') ' +
words[1] + ' path ' + fileData.path + " in " + storageServiceName, 1.5);
else console.log(fileData); // may have an explanation for why fileData isn't complete
updateTitle();
updateAutoSaveVisibility();
}
switch (action) {
case 'Load': storageManager.load().then(function (fileData) {
handleFileData(action, fileData);
}); break;
case 'Delete': storageManager.remove().then(function (fileData) {
handleFileData(action, fileData);
}); break;
case 'New':
var saveBefore = false;
var currentFile = document.getElementById("ge-filename");
// only prompt to save current changes iff there is some modified state
var currentFileTitle = currentFile.innerText;
if (currentFileTitle.substr(currentFileTitle.length-1,1) === "*") {
saveBefore = true;
}
storageManager.create(saveBefore).then(function (fileData) {
handleFileData(action, fileData);
});
break;
case 'SaveAs': storageManager.save().then(function (fileData){
handleFileData(action, fileData);
}); break;
case 'Save': storageManager.save(false).then(function (fileData) {
handleFileData(action, fileData);
}); break;
}
}
// Small, generic helper functions
refreshDraggableWindows = function () {
jQuery(".gt-menu").draggable({ handle: ".gt-handle", stack: ".gt-menu", containment: 'window', scroll: false });
}
makeDiagramImage = function () {
var imgdata = myDiagram.makeImageData({ maxSize: new go.Size(Infinity,Infinity), scale: 2, padding: 10, background: myDiagramDiv.style.background });
var a = document.createElement("a");
a.download = document.getElementById("ge-filename").innerText;
a.href = imgdata;
a.target = "_blank";
a.click();
}
$ = go.GraphObject.make; // for conciseness in defining templates
go.licenseKey = "2bfa45e7b66058c511895a25406c3bbe5aa07a37dc9418a55d5614f7be583c40209be87e58868e95dbac4efc1c28c0d9db907b399119553de76383dd11e084f0b3657ae1115a4ed9a151249699fc2da6fe7963e2c4e027a4da2adcf3f9b8c09d5ce1ecd357ce";
myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center, // center the content
"undoManager.isEnabled": true,
});
// Go Cloud Storage stuff
defaultModel = null; // change this if you want -- so GoCloudStorage documentation
var diagrams = [myDiagram]; var iconsDir = "./storage/";
gls = new gcs.GoLocalStorage(diagrams, defaultModel, iconsDir);
god = new gcs.GoOneDrive(diagrams, 'f9b171a6-a12e-48c1-b86c-814ed40fcdd1', defaultModel, iconsDir);
ggd = new gcs.GoGoogleDrive(diagrams, '16225373139-n24vtg7konuetna3ofbmfcaj2infhgmg.apps.googleusercontent.com', 'AIzaSyDBj43lBLpYMMVKw4aN_pvuRg7_XMVGf18', defaultModel, iconsDir);
gdb = new gcs.GoDropBox(diagrams, '3sm2ko6q7u1gbix', defaultModel, iconsDir);
storages = [gls, god, ggd, gdb];
storageManager = new gcs.GoCloudStorageManager(storages, iconsDir);
var span = document.getElementById("currentStorageSpan");
span.innerHTML = "";
var imageSrc = storageManager.getStorageIconPath(storageManager.currentStorage.className);
var img = document.createElement("img");
img.src = imageSrc;
img.style.width = "20px"; img.style.height = "20px"; img.style.float = "left";
span.appendChild(img);
// When diagram is modified, change title to include a *
myDiagram.addChangedListener(function (e) {
var currentFile = document.getElementById("ge-filename");
if (isAutoSavingCheckbox.checked && storageManager.currentStorage.currentDiagramFile.name != null) return;
if (currentFile) {
var idx = currentFile.textContent.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) currentFile.textContent = currentFile.textContent + "*";
}
else {
if (idx >= 0) currentFile.textContent = currentFile.textContent.substr(0, idx);
}
}
});
document.getElementById('file-input').accept = ".csv";
document.getElementById('file-input').addEventListener('change', readSingleFile, false);
storageManager.currentStorage.isAutoSaving = isAutoSavingCheckbox.checked;
// enable hotkeys
document.body.addEventListener("keydown", function (e) {
var keynum = e.which;
if (e.ctrlKey) {
e.preventDefault();
switch (keynum) {
case 83: handlePromise('Save'); break; // ctrl + s
case 79: handlePromise('Load'); break; // ctrl + o
case 68: handlePromise('New'); break; // ctrl + d
case 82: handlePromise('Delete'); break; // ctrl + r
}
}
});
updateAutoSaveVisibility();
// Show the primary selection's data, or blanks if no Part is selected:
// Format the inspector for your specific needs. You may need to edit the DataInspector class
inspector = new Inspector('myInspectorDiv', myDiagram,
{
// uncomment this line to only inspect the named properties below instead of all properties on each object:
// includesOwnProperties: false,
properties: {
"event": { show: Inspector.showIfPresent },
"start": { type: "date", show: Inspector.showIfPresent },
"end": { type: "date", show: Inspector.showIfPresent },
"date": { type: "date", show: Inspector.showIfPresent },
"description": { type: "textarea", show: Inspector.showIfPresent },
"color": { type: "color", show: Inspector.showIfPresent },
"isPositionedBelow": { type: "checkbox", show: Inspector.showIfPresent }
}
}
);
}