gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
195 lines (159 loc) • 8.17 kB
HTML
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-1506307-6');
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>testEditor</title>
<meta name="description" content="" />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<!-- Local JS -->
<script src="./go.js"></script>
<script src="./goeditor-setup.js"></script>
<script src="./DataInspector.js"></script>
<!-- Go Cloud Storage Classes -->
<script src="../storage/lib/gcs.js"></script>
<!-- CDN's for GoCloud Storage subclasses -->
<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>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="3sm2ko6q7u1gbix"></script>
<!-- jQuery / UI JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<!-- Data Inspector -->
<!--
<script src="./DataInspector.js"></script>
<link rel="stylesheet" type="text/css" href="./DataInspector.css" />
-->
<!-- CSS for GoCloudStorage/Manager -->
<link rel="stylesheet" type="text/css" href="../storage/samples/GoCloudStorageUI.css" />
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<!-- CSS for this app -->
<link rel="stylesheet" type="text/css" href="./goeditor.css" />
<script src="../../samples/assets/require.js"></script>
<script>
JQUERY = $;
function init() {
require(["./TestClass.js"], function(tc) {
console.log(tc);
});
// Do not remove this function call! This sets up your editor
setupEditorApplication(2, 2);
diagrams[0].nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock,
new go.Binding("text", "key")
)
);
diagrams[0].model = new go.GraphLinksModel(
[
{ key: "Alpha" },
{ key: "Beta" }
]
);
palettes[0].nodeTemplate = diagrams[0].nodeTemplate;
palettes[0].model.nodeDataArray = [
{ key: "Alpha" }
];
}
JQUERY(function () {
JQUERY("#ge-palettes-container").accordion({
activate: function (event, ui) {
for (var i = 0; i < palettes.length; i++) {
var palette = palettes[i];
palette.requestUpdate();
}
}
});
JQUERY("#ge-overviews-container").accordion();
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 });
}
});
</script>
</head>
<body onload="init();">
<div>
<nav>
<span id="currentStorageSpan"></span>
<ul id="ge-filemenus">
<li>
<a href="#">File</a>
<ul>
<li><a href="#" onclick="handlePromise('New')">New <p class="ge-shortcut">(Ctrl + D)</p></a></li>
<li><a href="#" onclick="handlePromise('Load')">Open... <p class="ge-shortcut">(Ctrl + O)</p></a></li>
<li><a href="#" onclick="handlePromise('Save')">Save <p class="ge-shortcut">(Ctrl + S)</p></a></li>
<li><a href="#" onclick="handlePromise('SaveAs')">Save As...</a></li>
<li><a href="#" onclick="handlePromise('Delete')">Remove... <p class="ge-shortcut">(Ctrl + R)</p></a></li>
<!--
<li><a href="#">Import Data From >>></a>
<ul>
<li><a href="#" onclick="authorizeGoogleUserForDataImport()">Google Sheet</a></li>
<li><a href="#" onclick="document.getElementById('file-input').click()">Local CSV File</a>
</ul>
</li>-->
<li><a href="#" onclick="makeDiagramImage()">Export PNG</a></li>
<li><a href="#" onclick="updateCurrentStorageSpan()">Change Storage Service</a></li>
</ul>
</li>
<li>
<a href="#">View</a>
<ul>
<!-- TODO inspector here -->
<!--<li><a href="#" onclick="geHideShow('selectionInfoWindow')" id="selectionInfoWindowButton">Show Selection Help <p class="shortcut"> (Ctrl + I)</p></a></li>-->
<li id="ge-viewoption-palettes"><a href="#" onclick="geHideShowWindow('ge-palettes-window', true)" id="ge-palettes-windows-button">Palettes <p class="ge-shortcut"> (Ctrl + P)</p></a></li>
<li id="ge-viewoption-overviews"><a href="#" onclick="geHideShowWindow('ge-overviews-window', true)" id="ge-overview-windows-button">Overviews <p class="ge-shortcut"> (Ctrl + E)</p></a></li>
<li id="ge-viewoption-overviews"><a href="#" onclick="geHideShowWindow('ge-inspector-window', true)" id="ge-inspector-windows-button">Inspector <p class="ge-shortcut"> (Ctrl + I)</p></a></li>
</ul>
</li>
</ul>
<p id="isAutoSavingP"><input type="checkbox" id="isAutoSavingCheckbox" unchecked /> <label for="isAutoSavingCheckbox">Autosave Enabled</label></p>
<p id="ge-header">testEditor ###version###</p>
<div id="ge-filename">(Unsaved file)</div>
</nav>
<input type="file" id="file-input" style="display: none;" />
<div id="ge-diagrams-container" style="display: flex;">
<div id="ge-diagram-0" style="height: 800px; width: 50%; background: white; border: 1px solid black; "></div>
<div id="ge-diagram-1" style="height: 800px; width: 50%; background: white; border: 1px solid black; "></div>
</div>
<div id="ge-palettes-window" style="visibility: visible" class="ge-draggable ui-draggable">
<div id="ge-palettes-window-handle" class="ge-handle ui-draggable-handle">Palettes<button id="ge-palettes-window-close" class="ge-window-button ge-clickable" onclick="geHideShowWindow('ge-palettes-window')">X</button></div>
<div id="ge-palettes-container">
<h3> Palette 0</h3><div><div id="ge-palette-0" style="height: 500px; background: white; border: 1px solid black; "></div></div>
<h3> Palette 1</h3><div><div id="ge-palette-1" style="height: 500px; background: white; border: 1px solid black; "></div></div>
</div>
</div>
<div id="ge-overviews-window" style="visibility: visible" class="ge-draggable ui-draggable">
<div id="ge-overviews-window-handle" class="ge-handle ui-draggable-handle">Overviews<button id="ge-overviews-window-close" class="ge-window-button ge-clickable" onclick="geHideShowWindow('ge-overviews-window')">X</button></div>
<div id="ge-overviews-container">
<h3> Overview 0</h3><div><div id="ge-overview-0" style="height: 200px; background: white; border: 1px solid black; "></div></div>
<h3> Overview 1</h3><div><div id="ge-overview-1" style="height: 200px; background: white; border: 1px solid black; "></div></div>
</div>
</div>
<div id="ge-inspector-window" style="visibility: visible" class="ge-draggable ui-draggable">
<div id="ge-inspector-window-handle" class="ge-handle ui-draggable-handle">Inspector<button id="ge-inspector-window-close" class="ge-window-button ge-clickable" onclick="geHideShowWindow('ge-inspector-window')">X</button></div>
<div id="ge-inspector" class="inspector"></div>
</div>
</div>
<div id="ge-footer">
<span>Built with the <a href="https://gojs.net">GoJS Diagramming Library</a>, by <a href="https://nwoods.com"> Northwoods Software</a>.</span>
</div>
<p>
Insert description here.
</p>
</div>
</body>
</html>