gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
358 lines (310 loc) • 14.1 kB
JavaScript
/*
* goeditor-setup.js
* Called before init() events in every goeditor app
* Initializes the diagrams, palettes, GoCloudStorage, and the Inspector
* You may need to edit or override things in your own code
* DO NOT edit this file -- make app-specific overrides or custom changes in your own code
* DO NOT delete or rename this file
*/
function setupEditorApplication(diagramsCount, palettesCount, pathToStorage, diagramsType) {
if (diagramsType === null || !diagramsType) {
diagramsType = go.Diagram;
}
// 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 });
}
// makes images of each diagram
makeDiagramImage = function () {
for (var i = 0; i < diagrams.length; i++) {
var diagram = diagrams[i];
var imgdata = diagram.makeImageData({ maxSize: new go.Size(Infinity, Infinity), scale: 2, padding: 10, background: diagram.div.style.background });
var a = document.createElement("a");
var filename = document.getElementById("ge-filename").innerText;
filename.split('.');
filename = filename[0];
a.download = filename;
a.href = imgdata;
a.target = "_blank";
a.click();
}
}
// make SVG files of each diagram
makeDiagramSvg = function () {
for (var i = 0; i < diagrams.length; i++) {
var diagram = diagrams[i];
var svgDataEl = diagram.makeSVG();
var s = new XMLSerializer();
var svgData = s.serializeToString(svgDataEl);
var svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
var svgUrl = URL.createObjectURL(svgBlob);
var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
var filename = document.getElementById("ge-filename").innerText;
filename = filename.split('.');
filename = filename[0];
downloadLink.download = filename + ".svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
}
$ = go.GraphObject.make; // for conciseness in defining templates
// build diagrams
diagrams = [];
overviews = [];
for (var i = 0; i < diagramsCount; i++) {
var diagram = new diagramsType("ge-diagram-" + i); // create a Diagram for the DIV HTML element
diagram.undoManager.isEnabled = true;
// When diagram is modified, change title to include a *
diagram.addChangedListener(function (e) {
// maybe update the file header
var currentFile = document.getElementById("ge-filename");
if (isAutoSavingCheckbox.checked && storageManager.currentStorage.currentDiagramFile.name != null) return;
if (currentFile) {
var idx = currentFile.textContent.indexOf("*");
if (e.diagram.isModified) {
if (idx < 0) currentFile.textContent = currentFile.textContent + "*";
}
else {
if (idx >= 0) currentFile.textContent = currentFile.textContent.substr(0, idx);
}
}
});
diagrams[i] = diagram;
// make an overview for each diagram
var overview = $(go.Overview, "ge-overview-" + i, { observed: diagram });
overviews[i] = overview;
}
// if there are no diagrams, there will be no overviews, so do not list that option in View menu
if (diagramsCount < 1) {
var viewOverviewsOption = document.getElementById("ge-viewoption-overviews");
viewOverviewsOption.parentNode.removeChild(viewOverviewsOption);
}
// build palette(s)
palettes = [];
for (var i = 0; i < palettesCount; i++) {
var palette = $(go.Palette, "ge-palette-" + i);
palettes[i] = palette;
}
// Go Cloud Storage stuff
defaultModel = null; // change this if you want -- so GoCloudStorage documentation
var iconsDir = pathToStorage + "/goCloudStorageIcons/";
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);
document.getElementById('file-input').accept = ".csv";
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
case 80: geHideShowWindow('ge-palettes-window'); break;
case 69: geHideShowWindow('ge-overviews-window'); break; // ctrl + e
case 73: geHideShowWindow('ge-inspector-window'); break; // ctrl + i
}
}
});
updateAutoSaveVisibility();
// Format the inspector for your specific needs. You may need to edit the DataInspector class
inspector = new Inspector('ge-inspector', diagrams[0],
{
includesOwnProperties: true,
}
);
geHideShowWindow = function (id, doShow) {
var geWindow = document.getElementById(id);
var vis = null;
if (doShow === undefined) vis = geWindow.style.visibility === "visible" ? "hidden" : "visible";
else if (doShow) vis = "visible";
else vis = "hidden";
var pn = null;
if (geWindow.parentNode.classList.contains("ge-menu")) {
pn = geWindow.parentNode;
}
if (pn) {
pn.style.visibility = vis;
}
geWindow.style.visibility = vis;
}
function makeGCSWindowsDraggable() {
// special -- make sure all gcs windows are draggable via jQuery UI classes
// do so by wrapping the filepicker divs in a draggable ge-window div -- with a handle
var gcsWindows = document.getElementsByClassName("goCustomFilepicker");
gcsWindows = [].slice.call(gcsWindows);
var gcsManagerMenu = document.getElementById("goCloudStorageManagerMenu");
gcsWindows.push(gcsManagerMenu);
for (var i = 0; i < gcsWindows.length; i++) {
var gcsWindow = gcsWindows[i];
// possibly delete pre-existing window
var id = "ge-" + gcsWindow.id + "-window";
var windowParent = document.getElementById(id);
if (windowParent !== null && windowParent !== undefined) {
windowParent.parentNode.removeChild(windowParent);
}
// construct window wrapper for gcs menu
windowParent = document.createElement("div");
windowParent.id = id;
windowParent.classList.add("ge-draggable");
windowParent.classList.add("ui-draggable");
windowParent.classList.add("ge-menu");
windowParent.style.visibility = "hidden";
var handle = document.createElement("div");
handle.id = id + "-handle";
handle.classList.add("ge-handle");
handle.classList.add("ui-draggable-handle");
handle.innerText = "Storage";
var button = document.createElement("button");
button.id = id + "-close";
button.innerText = "X";
button.classList.add("ge-clickable");
button.classList.add("ge-window-button");
button.onclick = function () {
var ci = this.id.indexOf("-close");
var wpid = this.id.substring(0, ci);
var windowParent = document.getElementById(wpid);
geHideShowWindow(windowParent.id);
for (var i = 0; i < windowParent.children.length; i++) {
var child = windowParent.children[i];
if (!child.classList.contains("ge-handle")) {
child.style.visibility = windowParent.style.visibility;
}
}
}
handle.appendChild(button);
windowParent.appendChild(handle);
windowParent.appendChild(gcsWindow);
document.body.appendChild(windowParent);
var observer = new MutationObserver(styleChangedCallback);
observer.observe(gcsWindow, {
attributes: true,
attributeFilter: ['style'],
});
function styleChangedCallback(mutations) {
var newVis = mutations[0].target.style.visibility;
var pn = mutations[0].target.parentNode;
pn.style.visibility = newVis;
}
}
JQUERY(function () {
var draggables = document.getElementsByClassName("ge-draggable");
for (var i = 0; i < draggables.length; i++) {
var draggable = draggables[i];
var id = "#" + draggable.id; var hid = id + "-handle";
JQUERY(id).draggable({ handle: hid, stack: ".ge-draggable", containment: "window", scroll: false });
}
});
}
makeGCSWindowsDraggable();
}