gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
163 lines (134 loc) • 7.42 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>GoEditor</title>
<meta name="description" content="" />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="./go.js"></script>
<script src="./goeditor-data-interaction.js"></script>
<script src="./goeditor-setup.js"></script>
<!-- Go Cloud Storage Classes -->
<script src="./storage/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 -->
<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/GoCloudStorageUI.css" />
<!-- CSS for this app -->
<link rel="stylesheet" type="text/css" href="./goeditor.css" />
<script>
function init() {
// defined in goeditor-setup.js. Builds Diagram, GoCloudStorage, and Inspector. You may need to edit these based on your app requirements.
// reference to Diagram is "myDiagram". Reference to Inspector is "inspector".
setupEditorApplication();
/*
* Format the structures according to your app requirements. These structures must be attached to the window (i.e. do not use "var")
* The main structure is "nodeGenerationMap". This map holds data for how Nodes of each category are generated.
* This generation can be one at a time or en masse via file import.
* Map key/value pairs are <string><JavaScript object>. The string key corresponds with the category of the Node whose generation rules you are defining.
* The object value must hold four properties.
* 1) dataProps: an Array of JavaScript objects denoting the data properties a Node may have.
* Each object must have a "name" property and a "type" property. "name" value may be any string.
* "type" values may be "string" | "boolean" | "date" | "color" | "number"
* You may optionally define a default value for this data property by specifying the "value" property.
Ex: Defining 4 data properties for some Node type
dataProps = [
{ name: "text", type: "string" },
{ name: "date", type: "date" },
{ name: "color", type: "color" },
{ name: "isSelectionAdorned", type: "boolean", value: true }
];
* 2) predicates: Optional. An array of functions that must return true or false. These functions may take the nodeData of a newly generated Node
* and, based on that data, decide whether or not that Node should actually be created. If the function returns false, the Node is trashed
* and not added to the Diagram
Ex: defining a predicates Array with a single element -- a function that returns "false" if a Node.data's "text" property is "Alpha"
This means any Node whose data.text property is "Alpha" will not be allowed in the Diagram
predicates = [
function(nodeData) {
return nodeData.text !== "Alpha";
}
];
* 3) postCreateFunction: Optional. Some function that is done after a Node is generated. If you must do some checks or clean up after a Node of a specific category
is generated, do those steps here.
* 4) defaultNodeData: Optional. A JavaScript object holding the default data for a Node of this type.
*/
// Node Generation Map -- holds data for how Nodes of each category must be generated (either one at a time or en masse via file import)
// For each node category, this map holds what data properties are supported, default node data,
// what predicates must be passed for a Node of this type to be created, and a post create function, if one should exist
nodeGenerationMap = new go.Map();
//nodeGenerationMap.add("", { dataProps: dataProps, predicates: predicates, postCreateFunction: null, defaultNodeData: { } });
/*
* The "categories" structure is a requisite property attached to the window. It stores categories of Nodes the user may import data for. Edit this as required.
*/
categories = [""];
// This is the insertion point for application code
/*12DY@9dkd)dk*/
} // end init
</script>
</head>
<body onload="init();">
<div>
<nav>
<span id="currentStorageSpan"></span>
<ul id="fileMenus">
<li>
<a href="#">File</a>
<ul>
<li><a href="#" onclick="handlePromise('New')">New <p class="shortcut">(Ctrl + D)</p></a></li>
<li><a href="#" onclick="handlePromise('Load')">Open... <p class="shortcut">(Ctrl + O)</p></a></li>
<li><a href="#" onclick="handlePromise('Save')">Save <p class="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="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>
</ul>
<p id="isAutoSavingP"><input type="checkbox" id="isAutoSavingCheckbox" unchecked /> <label for="isAutoSavingCheckbox">Autosave Enabled</label></p>
<p id="ge-header">GoEditor ###version###</p>
<div id="ge-filename">(Unsaved file)</div>
</nav>
<input type="file" id="file-input" style="display: none;" />
<div id="container" style="display: flex;">
<div id="myDiagramDiv" style="background: #252526; width: 100%; height:800px; float: left;"></div>
<div id="ge-inspector-div" style="background: #212121; flex-grow: 1; height: 800px; float: right;">
<div id="myInspectorDiv" 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>
<script>
/* Post-Init files go here ijiwd8up@90n */
</script>
</div>
</body>
</html>