gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
220 lines (194 loc) • 10.8 kB
HTML
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="A class for saving / loading GoJS diagram model data to / from popular storage services" />
<title>GoCloudStorageManager test</title>
<!-- GoJS -->
<script src="../../../release/go.js"></script>
<!-- Go Cloud Storage Classes -->
<script src="../lib/gcs.js"></script>
<!-- CDN's -->
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://js.live.net/v7.2/OneDrive.js"></script>
<!-- both these are necesary for GoDropBox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/2.5.7/Dropbox-sdk.min.js"></script>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="3sm2ko6q7u1gbix"></script>
<!-- CSS for GoCloudStorage/Manager -->
<link rel="stylesheet" type="text/css" href="GoCloudStorageUI.css" />
</head>
<body onload="init()">
<button onclick="handlePromise('New')">New</button>
<button id="openButton" onclick="handlePromise('Load')">Load </button>
<button id="removeButton" onclick="handlePromise('Delete')">Remove</button>
<button id="saveButton" onclick="handlePromise('SaveAs')">Save As</button>
<button id="saveButton" onclick="handlePromise('Save')">Save</button>
<input type="checkbox" id="isAutoSavingCheckbox" checked /> <label for="isAutoSavingCheckbox">Autosave Enabled</label>
<p>Current storage service: <span id="currentStorageSpan"></span> <button onclick="updateCurrentStorageSpan()">Change</button></p>
<h3 id="currentFile">Untitled </h3>
<div class="diagramBox">
<h4>Diagram 1</h4>
<div id="myDiagramDiv" style="height: 300px; width: 300px; background-color: lightgray;"></div>
</div>
<div class="diagramBox">
<h4>Diagram 2</h4>
<div id="myDiagramDiv2" style="height: 300px; width: 300px; background-color: lightgray;"></div>
</div>
<div id="text">
<p>
This sample showcases the <a href="../../../api/symbols/GoCloudStorageManager.html">GoCloudStorageManager</a>
class,
which bundles a user-defined set of <a href="../../../api/symbols/GoCloudStorage.html">GoCloudStorage</a>
subclasses and allows for easy, graphical saving and loading of GoJS <a href="../../../../api/symbols/Diagram.html">Diagram</a>
<a href="../../../../api/symbols/Model.html">Model</a> data to and from various cloud storage services.
As of now, the supported services are:
<ul>
<li>Google Drive, managed with <a href="../../../api/symbols/GoGoogleDrive.html">GoGoogleDrive</a></li>
<li>Microsoft OneDrive, managed with <a href="../../../api/symbols/GoOneDrive.html">GoOneDrive</a></li>
<li>Dropbox, managed with <a href="../../../api/symbols/GoDropBox.html">GoDropBox</a></li>
<li>Local Storage, managed with <a href="../../../api/symbols/GoLocalStorage.html">GoLocalStorage</a></li>
</ul>
</p>
<p>
GoCloudStorage subclasses are <a href="../../../intro/storage.html#GoCloudStorageSubclassConstruction">easy
to construct</a>
and can manage model data for any set of Diagrams on a page. All the GoCloudStorage subclasses
<a href="../../../intro/storage.html#GoCloudStorageManager">managed by</a> the instance of
GoCloudStorageManager displayed here handle file <a href="../../../intro/storage.html#SavingLoadingData">saving
/ loading</a>
and file <a href="../../../intro/storage.html#CreatingRemovingData">creation / removal</a> for both Diagram
1 and Diagram 2.
</p>
<p>
<strong>Note</strong>: Any page that uses GoCloudStorage subclasses (other than GoLocalStorage) must be
served from a web server to work.
</p>
</div>
<script>
var updateCurrentStorageSpan = function () {
storageManager.selectStorageService().then(function (storage) {
document.getElementById("currentStorageSpan").innerHTML = storage.serviceName;
});
}
var isAutoSavingCheckbox = document.getElementById("isAutoSavingCheckbox");
isAutoSavingCheckbox.addEventListener("change", function () {
storageManager.storages.iterator.each(function (storage) {
storage.isAutoSaving = isAutoSavingCheckbox.checked;
});
});
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv", {
initialContentAlignment: go.Spot.Center, // center the content
"undoManager.isEnabled": true // enable undo & redo
});
myDiagram.nodeTemplate =
$(go.Node, "Auto", // the Shape will go around the TextBlock
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8 }, // some room around the text
new go.Binding("text", "key"))
);
// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
myDiagram2 = $(go.Diagram, "myDiagramDiv2", {
initialContentAlignment: go.Spot.Center, // center the content
"undoManager.isEnabled": true // enable undo & redo
});
myDiagram2.nodeTemplate = myDiagram.nodeTemplate.copy();
// create the model data that will be represented by Nodes and Links
myDiagram2.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
defaultModel = myDiagram.model.toJson();
// update the title on page to reflect newly loaded diagram title TODO
var updateTitle = function () {
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";
}
}
/*
* Promise handler for core functions
* @param {String} action Accepted values: Load, Delete, New, Save
*/
var 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();
}
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': storageManager.create(true).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;
}
}
function init() {
var diagrams = [myDiagram, myDiagram2];
gls = new gcs.GoLocalStorage(diagrams, defaultModel, "../goCloudStorageIcons");
god = new gcs.GoOneDrive(diagrams, 'f9b171a6-a12e-48c1-b86c-814ed40fcdd1', defaultModel);
ggd = new gcs.GoGoogleDrive(diagrams, '16225373139-n24vtg7konuetna3ofbmfcaj2infhgmg.apps.googleusercontent.com', 'AIzaSyDBj43lBLpYMMVKw4aN_pvuRg7_XMVGf18', defaultModel);
gdb = new gcs.GoDropBox(diagrams, '3sm2ko6q7u1gbix', defaultModel);
storages = [gls, god, ggd, gdb];
storageManager = new gcs.GoCloudStorageManager(storages);
document.getElementById("currentStorageSpan").innerHTML = storageManager.currentStorage.serviceName;
}
</script>
</body>
</html>