gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
406 lines (385 loc) • 18.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="An org chart that also shows non-tree-structure relationships."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Org Chart Extras</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
<h1 class="my-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
new go.Diagram("myDiagramDiv", // must be the ID or reference to div
{
// make sure users can only create trees
validCycle: go.Diagram.CycleDestinationTree,
// users can select only one part at a time
maxSelectionCount: 1,
layout:
$(go.TreeLayout,
{
treeStyle: go.TreeLayout.StyleLastParents,
arrangement: go.TreeLayout.ArrangementHorizontal,
// properties for most of the tree:
angle: 90,
layerSpacing: 35,
// properties for the "last parents":
alternateAngle: 0,
alternateLayerSpacing: 35,
alternateAlignment: go.TreeLayout.AlignmentStart,
alternateNodeIndent: 10,
alternateNodeIndentPastParent: 1.0,
alternateNodeSpacing: 10,
alternateLayerSpacing: 30,
alternateLayerSpacingParentOverlap: 1.0,
alternatePortSpot: new go.Spot(0.01, 1, 10, 0),
alternateChildPortSpot: go.Spot.Left
}),
// support editing the properties of the selected person in HTML
"ChangedSelection": onSelectionChanged,
"TextEdited": onTextEdited,
// newly drawn links are of type "Support" -- not a regular boss-employee relationship
"linkingTool.archetypeLinkData": { category: "Support", text: "100%" },
// enable undo & redo
"undoManager.isEnabled": true
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", e => {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
var graygrad = $(go.Brush, "Linear",
{ 0: "rgb(125, 125, 125)", 0.5: "rgb(86, 86, 86)", 1: "rgb(86, 86, 86)" });
// when a node is double-clicked, add a child to it
function nodeDoubleClick(e, obj) {
var clicked = obj.part;
if (clicked !== null) {
var thisemp = clicked.data;
myDiagram.startTransaction("add employee");
var nextkey = (myDiagram.model.nodeDataArray.length + 1).toString();
var newemp = { key: nextkey, name: "(new person)", title: "" };
myDiagram.model.addNodeData(newemp);
myDiagram.model.addLinkData({ from: thisemp.key, to: nextkey });
myDiagram.commitTransaction("add employee");
}
}
// this is used to determine feedback during drags
function mayWorkFor(node1, node2) {
if (!(node1 instanceof go.Node)) return false; // must be a Node
if (node1 === node2) return false; // cannot work for yourself
if (node2.isInTreeOf(node1)) return false; // cannot work for someone who works for you
return true;
}
// This function provides a common style for most of the TextBlocks.
// Some of these values may be overridden in a particular TextBlock.
function textStyle() {
return { font: "9pt sans-serif", stroke: "white" };
}
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ doubleClick: nodeDoubleClick },
{ // handle dragging a Node onto a Node to (maybe) change the reporting relationship
mouseDragEnter: (e, node, prev) => {
var diagram = node.diagram;
var selnode = diagram.selection.first();
if (!mayWorkFor(selnode, node)) return;
var shape = node.findObject("SHAPE");
if (shape) shape.fill = "darkred";
},
mouseDragLeave: (e, node, next) => {
var shape = node.findObject("SHAPE");
if (shape) shape.fill = graygrad;
},
mouseDrop: (e, node) => {
var diagram = node.diagram;
var selnode = diagram.selection.first(); // assume just one Node in selection
if (mayWorkFor(selnode, node)) {
// find any existing link into the selected node
var link = selnode.findTreeParentLink();
if (link !== null) { // reconnect any existing link
link.fromNode = node;
} else { // else create a new link
diagram.toolManager.linkingTool.insertLink(node, node.port, selnode, selnode.port);
}
}
}
},
// for sorting, have the Node.text be the data.name
new go.Binding("text", "name"),
// bind the Part.layerName to control the Node's layer depending on whether it isSelected
new go.Binding("layerName", "isSelected", sel => sel ? "Foreground" : "").ofObject(),
// define the node's outer shape
$(go.Shape, "RoundedRectangle",
{
name: "SHAPE",
fill: graygrad, stroke: "black",
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
}),
// define the panel where the text will appear
$(go.Panel, "Table",
{
maxSize: new go.Size(150, 999),
margin: new go.Margin(3, 3, 0, 3),
defaultAlignment: go.Spot.Left
},
$(go.RowColumnDefinition, { column: 2, width: 4 }),
$(go.TextBlock, // the name
{
row: 0, column: 0, columnSpan: 5,
font: "bold 9pt sans-serif",
editable: true, isMultiline: false,
stroke: "white", minSize: new go.Size(10, 14),
name: "name"
},
new go.Binding("text", "name").makeTwoWay()),
$(go.TextBlock, "Title: ", textStyle(),
{ row: 1, column: 0 }),
$(go.TextBlock, textStyle(),
{
row: 1, column: 1, columnSpan: 4,
editable: true, isMultiline: false,
minSize: new go.Size(10, 14),
margin: new go.Margin(0, 0, 0, 3),
name: "title"
},
new go.Binding("text", "title").makeTwoWay()),
$(go.TextBlock, "ID: ", textStyle(), // the ID and the boss
{ row: 2, column: 0 }),
$(go.TextBlock, textStyle(),
{ row: 2, column: 1 },
new go.Binding("text", "key")),
$(go.TextBlock, "Boss: ", textStyle(),
{ row: 2, column: 3 }),
$(go.TextBlock, textStyle(),
{ row: 2, column: 4 },
new go.Binding("text", "parent")),
$(go.TextBlock, // the comments
{
row: 3, column: 0, columnSpan: 5,
font: "italic 9pt sans-serif",
wrap: go.TextBlock.WrapFit,
editable: true, // by default newlines are allowed
stroke: "white",
minSize: new go.Size(10, 14),
name: "comments"
},
new go.Binding("text", "comments").makeTwoWay()),
$("TreeExpanderButton",
{ row: 4, columnSpan: 99, alignment: go.Spot.Center })
) // end Table Panel
); // end Node
// define the Link template
myDiagram.linkTemplate =
$(go.Link, go.Link.Orthogonal,
{ corner: 5 },
$(go.Shape, { strokeWidth: 2 })); // the link shape
myDiagram.linkTemplateMap.add("Support",
$(go.Link, go.Link.Bezier,
{ isLayoutPositioned: false, isTreeLink: false, curviness: -50 },
{ relinkableFrom: true, relinkableTo: true },
$(go.Shape,
{ stroke: "green", strokeWidth: 2 }),
$(go.Shape,
{ toArrow: "OpenTriangle", stroke: "green", strokeWidth: 2 }),
$(go.TextBlock,
new go.Binding("text").makeTwoWay(),
{
stroke: "green", background: "rgba(255,255,255,0.75)",
maxSize: new go.Size(80, NaN), editable: true
})));
myDiagram.linkTemplateMap.add("Motion",
$(go.Link, go.Link.Bezier,
{ isLayoutPositioned: false, isTreeLink: false, curviness: -50 },
{ relinkableFrom: true, relinkableTo: true },
$(go.Shape,
{ stroke: "orange", strokeWidth: 2 }),
$(go.Shape,
{ toArrow: "OpenTriangle", stroke: "orange", strokeWidth: 2 }),
$(go.TextBlock,
new go.Binding("text").makeTwoWay(),
{
stroke: "orange", background: "rgba(255,255,255,0.75)",
maxSize: new go.Size(80, NaN), editable: true
})));
// read in the JSON-format data from the "mySavedModel" element
load();
}
// Allow the user to edit text when a single node is selected
function onSelectionChanged(e) {
var node = e.diagram.selection.first();
if (node instanceof go.Node) {
updateProperties(node.data);
} else {
updateProperties(null);
}
}
// Update the HTML elements for editing the properties of the currently selected node, if any
function updateProperties(data) {
if (data === null) {
document.getElementById("propertiesPanel").style.display = "none";
document.getElementById("name").value = "";
document.getElementById("title").value = "";
document.getElementById("comments").value = "";
} else {
document.getElementById("propertiesPanel").style.display = "block";
document.getElementById("name").value = data.name || "";
document.getElementById("title").value = data.title || "";
document.getElementById("comments").value = data.comments || "";
}
}
// This is called when the user has finished inline text-editing
function onTextEdited(e) {
var tb = e.subject;
if (tb === null || !tb.name) return;
var node = tb.part;
if (node instanceof go.Node) {
updateData(tb.text, tb.name);
updateProperties(node.data);
}
}
// Update the data fields when the text is changed
function updateData(text, field) {
var node = myDiagram.selection.first();
// maxSelectionCount = 1, so there can only be one Part in this collection
var data = node.data;
if (node instanceof go.Node && data !== null) {
var model = myDiagram.model;
model.startTransaction("modified " + field);
if (field === "name") {
model.setDataProperty(data, "name", text);
} else if (field === "title") {
model.setDataProperty(data, "title", text);
} else if (field === "comments") {
model.setDataProperty(data, "comments", text);
}
model.commitTransaction("modified " + field);
}
}
// Show the diagram's model in JSON format
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; height: 550px"></div>
<div>
<div id="propertiesPanel" style="display: none; background-color: aliceblue; border: solid 1px black">
<b>Properties</b><br />
Name: <input type="text" id="name" value="" onchange="updateData(this.value, 'name')" /><br />
Title: <input type="text" id="title" value="" onchange="updateData(this.value, 'title')" /><br />
Comments: <input type="text" id="comments" value="" onchange="updateData(this.value, 'comments')" /><br />
</div>
</div>
<p>
Double click on a node in order to add a person.
Drag a node onto another in order to change relationships.
</p>
<p>
This is the <a href="orgChartEditor.html">Org Chart Editor</a> sample,
but each node includes a TreeExpanderButton,
and there are additional non-tree links connecting some of the nodes.
</p>
<div>
<div>
<button id="SaveButton" onclick="save()">Write</button>
<button onclick="load()">Read</button>
Diagram Model saved in JSON format:
</div>
<textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{"key":"1", "name":"Corrado 'Junior' Soprano", "title":"The Boss"},
{"key":"2", "name":"Tony Soprano", "title":"Underboss"},
{"key":"3", "name":"Herman 'Hesh' Rabkin", "title":"Advisor"},
{"key":"4", "name":"Paulie Walnuts", "title":"Capo"},
{"key":"5", "name":"Ralph Cifaretto", "title":"Capo MIA"},
{"key":"6", "name":"Silvio Dante", "title":"Consigliere"},
{"key":"7", "name":"Bobby Baccilien", "title":"Capo"},
{"key":"8", "name":"Sal Bonpensiero", "title":"MIA"},
{"key":"9", "name":"Christopher Moltisanti", "title":"Made Man"},
{"key":"10", "name":"Furio Giunta", "title":"Muscle"},
{"key":"11", "name":"Patsy Parisi", "title":"Accountant"}
],
"linkDataArray": [
{"from":"1", "to":"2"},
{"from":"1", "to":"3"},
{"from":"2", "to":"4"},
{"from":"2", "to":"5"},
{"from":"2", "to":"6"},
{"from":"2", "to":"7"},
{"from":"4", "to":"8"},
{"from":"4", "to":"9"},
{"from":"4", "to":"10"},
{"from":"4", "to":"11"},
{"from":"11", "to":"6", "category":"Support", "text":"50% support"},
{"from":"9", "to":"7", "category":"Motion", "text":"will change here in 2 months"}
]
}
</textarea>
</div>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>