198 lines
9.5 KiB
HTML
198 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Copyright 1998-2017 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://cdnjs.cloudflare.com/ajax/libs/dropbox.js/2.5.7/Dropbox-sdk.min.js"></script>
|
|
<script src="https://js.live.net/v7.2/OneDrive.js"></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(
|
|
myDiagram.model.nodeDataArray, myDiagram.model.linkDataArray
|
|
);
|
|
|
|
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;
|
|
}
|
|
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().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);
|
|
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> |