gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
580 lines (551 loc) • 25.4 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 organization chart editor with assistants shown on the side -- edit details and change relationships."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Org Chart Editor with Assistants</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">
<link rel="stylesheet" href="../extensions/DataInspector.css" />
<script src="../extensions/DataInspector.js"></script>
<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
{
allowCopy: false,
allowDelete: false,
initialAutoScale: go.Diagram.Uniform,
maxSelectionCount: 1, // users can select only one part at a time
validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees
"clickCreatingTool.archetypeNodeData": { // allow double-click in background to create a new node
name: "(new person)",
title: "",
comments: ""
},
"clickCreatingTool.insertPart": function(loc) { // method override must be function, not =>
const node = go.ClickCreatingTool.prototype.insertPart.call(this, loc);
if (node !== null) {
this.diagram.select(node);
this.diagram.commandHandler.scrollToPart(node);
this.diagram.commandHandler.editTextBlock(node.findObject("NAMETB"));
}
return node;
},
layout:
$(SideTreeLayout,
{
treeStyle: go.TreeLayout.StyleLastParents,
arrangement: go.TreeLayout.ArrangementHorizontal,
// properties for most of the tree:
angle: 90,
layerSpacing: 35,
// properties for the "last parents":
alternateAngle: 90,
alternateLayerSpacing: 35,
alternateAlignment: go.TreeLayout.AlignmentBus,
alternateNodeSpacing: 20
}),
"undoManager.isEnabled": true // enable undo & redo
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", e => {
const button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
const idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
const levelColors = ["#AC193D", "#2672EC", "#8C0095", "#5133AB",
"#008299", "#D24726", "#008A00", "#094AB2"];
// override TreeLayout.commitNodes to also modify the background brush based on the tree depth level
myDiagram.layout.commitNodes = function() { // method override must be function, not =>
go.TreeLayout.prototype.commitNodes.call(this); // do the standard behavior
// then go through all of the vertexes and set their corresponding node's Shape.fill
// to a brush dependent on the TreeVertex.level value
myDiagram.layout.network.vertexes.each(v => {
if (v.node) {
const level = v.level % (levelColors.length);
const color = levelColors[level];
const shape = v.node.findObject("SHAPE");
if (shape) shape.fill = $(go.Brush, "Linear", { 0: color, 1: go.Brush.lightenBy(color, 0.05), start: go.Spot.Left, end: go.Spot.Right });
}
});
};
// 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 Segoe UI,sans-serif", stroke: "white" };
}
// This converter is used by the Picture.
function findHeadShot(pic) {
if (!pic) return "images/HSnopic.png"; // There are only 16 images on the server
return "images/HS" + pic;
}
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ // handle dragging a Node onto a Node to (maybe) change the reporting relationship
mouseDragEnter: (e, node, prev) => {
const diagram = node.diagram;
const selnode = diagram.selection.first();
if (!mayWorkFor(selnode, node)) return;
const shape = node.findObject("SHAPE");
if (shape) {
shape._prevFill = shape.fill; // remember the original brush
shape.fill = "darkred";
}
},
mouseDragLeave: (e, node, next) => {
const shape = node.findObject("SHAPE");
if (shape && shape._prevFill) {
shape.fill = shape._prevFill; // restore the original brush
}
},
mouseDrop: (e, node) => {
const diagram = node.diagram;
const selnode = diagram.selection.first(); // assume just one Node in selection
if (mayWorkFor(selnode, node)) {
// find any existing link into the selected node
const 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, "Rectangle",
{
name: "SHAPE", fill: "white", stroke: null
}),
$(go.Panel, "Horizontal",
$(go.Picture,
{
name: "Picture",
desiredSize: new go.Size(39, 50),
margin: new go.Margin(6, 8, 6, 10),
source: "images/HSnopic.png" // the default image
},
new go.Binding("source", "pic", findHeadShot)),
// define the panel where the text will appear
$(go.Panel, "Table",
{
maxSize: new go.Size(150, 999),
margin: new go.Margin(6, 10, 0, 3),
defaultAlignment: go.Spot.Left
},
$(go.RowColumnDefinition, { column: 2, width: 4 }),
$(go.TextBlock, textStyle(), // the name
{
name: "NAMETB",
row: 0, column: 0, columnSpan: 5,
font: "12pt Segoe UI,sans-serif",
editable: true, isMultiline: false,
minSize: new go.Size(10, 16)
},
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)
},
new go.Binding("text", "title").makeTwoWay()),
$(go.TextBlock, textStyle(),
{ row: 2, column: 0 },
new go.Binding("text", "key", v => "ID: " + v)),
$(go.TextBlock, textStyle(),
{ name: "boss", row: 2, column: 3, }, // we include a name so we can access this TextBlock when deleting Nodes/Links
new go.Binding("text", "parent", v => "Boss: " + v)),
$(go.TextBlock, textStyle(), // the comments
{
row: 3, column: 0, columnSpan: 5,
font: "italic 9pt sans-serif",
wrap: go.TextBlock.WrapFit,
editable: true, // by default newlines are allowed
minSize: new go.Size(10, 14)
},
new go.Binding("text", "comments").makeTwoWay())
) // end Table Panel
) // end Horizontal Panel
); // end Node
// the context menu allows users to make a position vacant,
// remove a role and reassign the subtree, or remove a department
myDiagram.nodeTemplate.contextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Add Employee"),
{
click: (e, button) => {
const node = button.part.adornedPart;
if (node !== null) {
const thisemp = node.data;
myDiagram.startTransaction("add employee");
const newemp = { name: "(new person)", title: "", comments: "", parent: thisemp.key };
myDiagram.model.addNodeData(newemp);
const newnode = myDiagram.findNodeForData(newemp);
if (newnode) newnode.location = node.location;
myDiagram.commitTransaction("add employee");
}
}
}
),
$("ContextMenuButton",
$(go.TextBlock, "Vacate Position"),
{
click: (e, button) => {
const node = button.part.adornedPart;
if (node !== null) {
const thisemp = node.data;
myDiagram.startTransaction("vacate");
// update the key, name, picture, and comments, but leave the title
myDiagram.model.setDataProperty(thisemp, "name", "(Vacant)");
myDiagram.model.setDataProperty(thisemp, "pic", "");
myDiagram.model.setDataProperty(thisemp, "comments", "");
myDiagram.commitTransaction("vacate");
}
}
}
),
$("ContextMenuButton",
$(go.TextBlock, "Remove Role"),
{
click: (e, button) => {
// reparent the subtree to this node's boss, then remove the node
const node = button.part.adornedPart;
if (node !== null) {
myDiagram.startTransaction("reparent remove");
const chl = node.findTreeChildrenNodes();
// iterate through the children and set their parent key to our selected node's parent key
while (chl.next()) {
const emp = chl.value;
myDiagram.model.setParentKeyForNodeData(emp.data, node.findTreeParentNode().data.key);
}
// and now remove the selected node itself
myDiagram.model.removeNodeData(node.data);
myDiagram.commitTransaction("reparent remove");
}
}
}
),
$("ContextMenuButton",
$(go.TextBlock, "Remove Department"),
{
click: (e, button) => {
// remove the whole subtree, including the node itself
const node = button.part.adornedPart;
if (node !== null) {
myDiagram.startTransaction("remove dept");
myDiagram.removeParts(node.findTreeParts());
myDiagram.commitTransaction("remove dept");
}
}
}
),
$("ContextMenuButton",
$(go.TextBlock, "Toggle Assistant"),
{
click: (e, button) => {
// remove the whole subtree, including the node itself
const node = button.part.adornedPart;
if (node !== null) {
myDiagram.startTransaction("toggle assistant");
myDiagram.model.setDataProperty(node.data, "isAssistant", !node.data.isAssistant);
myDiagram.layout.invalidateLayout();
myDiagram.commitTransaction("toggle assistant");
}
}
}
)
);
// define the Link template
myDiagram.linkTemplate =
$(go.Link, go.Link.Orthogonal,
{ corner: 5 },
$(go.Shape, { strokeWidth: 4, stroke: "#00a4a4" })); // the link shape
// read in the JSON-format data from the "mySavedModel" element
load();
// support editing the properties of the selected person in HTML
if (window.Inspector) myInspector = new Inspector("myInspector", myDiagram,
{
properties: {
"key": { readOnly: true },
"comments": {},
"isAssistant": { type: "boolean", defaultValue: false }
},
propertyModified: (name, val) => {
if (name === "isAssistant") myDiagram.layout.invalidateLayout();
}
});
} // end init
// Assume that the SideTreeLayout determines whether a node is an "assistant" if a particular data property is true.
// You can adapt this code to decide according to your app's needs.
function isAssistant(n) {
if (n === null) return false;
return n.data.isAssistant;
}
// This is a custom TreeLayout that knows about "assistants".
// A Node for which isAssistant(n) is true will be placed at the side below the parent node
// but above all of the other child nodes.
// An assistant node may be the root of its own subtree.
// An assistant node may have its own assistant nodes.
class SideTreeLayout extends go.TreeLayout {
makeNetwork(coll) {
const net = super.makeNetwork(coll);
// copy the collection of TreeVertexes, because we will modify the network
const vertexcoll = new go.Set(/*go.TreeVertex*/);
vertexcoll.addAll(net.vertexes);
for (const it = vertexcoll.iterator; it.next();) {
const parent = it.value;
// count the number of assistants
let acount = 0;
const ait = parent.destinationVertexes;
while (ait.next()) {
if (isAssistant(ait.value.node)) acount++;
}
// if a vertex has some number of children that should be assistants
if (acount > 0) {
// remember the assistant edges and the regular child edges
const asstedges = new go.Set(/*go.TreeEdge*/);
const childedges = new go.Set(/*go.TreeEdge*/);
let eit = parent.destinationEdges;
while (eit.next()) {
const e = eit.value;
if (isAssistant(e.toVertex.node)) {
asstedges.add(e);
} else {
childedges.add(e);
}
}
// first remove all edges from PARENT
eit = asstedges.iterator;
while (eit.next()) { parent.deleteDestinationEdge(eit.value); }
eit = childedges.iterator;
while (eit.next()) { parent.deleteDestinationEdge(eit.value); }
// if the number of assistants is odd, add a dummy assistant, to make the count even
if (acount % 2 == 1) {
const dummy = net.createVertex();
net.addVertex(dummy);
net.linkVertexes(parent, dummy, asstedges.first().link);
}
// now PARENT should get all of the assistant children
eit = asstedges.iterator;
while (eit.next()) {
parent.addDestinationEdge(eit.value);
}
// create substitute vertex to be new parent of all regular children
const subst = net.createVertex();
net.addVertex(subst);
// reparent regular children to the new substitute vertex
eit = childedges.iterator;
while (eit.next()) {
const ce = eit.value;
ce.fromVertex = subst;
subst.addDestinationEdge(ce);
}
// finally can add substitute vertex as the final odd child,
// to be positioned at the end of the PARENT's immediate subtree.
const newedge = net.linkVertexes(parent, subst, null);
}
}
return net;
};
assignTreeVertexValues(v) {
// if a vertex has any assistants, use Bus alignment
let any = false;
const children = v.children;
for (let i = 0; i < children.length; i++) {
const c = children[i];
if (isAssistant(c.node)) {
any = true;
break;
}
}
if (any) {
// this is the parent for the assistant(s)
v.alignment = go.TreeLayout.AlignmentBus; // this is required
v.nodeSpacing = 50; // control the distance of the assistants from the parent's main links
} else if (v.node == null && v.childrenCount > 0) {
// found the substitute parent for non-assistant children
//v.alignment = go.TreeLayout.AlignmentCenterChildren;
//v.breadthLimit = 3000;
v.layerSpacing = 0;
}
};
commitLinks() {
super.commitLinks();
// make sure the middle segment of an orthogonal link does not cross over the assistant subtree
const eit = this.network.edges.iterator;
while (eit.next()) {
const e = eit.value;
if (e.link == null) continue;
const r = e.link;
// does this edge come from a substitute parent vertex?
const subst = e.fromVertex;
if (subst.node == null && r.routing == go.Link.Orthogonal) {
r.updateRoute();
r.startRoute();
// middle segment goes from point 2 to point 3
const p1 = subst.center; // assume artificial vertex has zero size
const p2 = r.getPoint(2).copy();
const p3 = r.getPoint(3).copy();
const p5 = r.getPoint(r.pointsCount - 1);
let dist = 10;
if (subst.angle == 270 || subst.angle == 180) dist = -20;
if (subst.angle == 90 || subst.angle == 270) {
p2.y = p5.y - dist; // (p1.y+p5.y)/2;
p3.y = p5.y - dist; // (p1.y+p5.y)/2;
} else {
p2.x = p5.x - dist; // (p1.x+p5.x)/2;
p3.x = p5.x - dist; // (p1.x+p5.x)/2;
}
r.setPoint(2, p2);
r.setPoint(3, p3);
r.commitRoute();
}
}
}
}
// end of SideTreeLayout
// 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);
// make sure new data keys are unique positive integers
let lastkey = 1;
myDiagram.model.makeUniqueKeyFunction = (model, data) => {
let k = data.key || lastkey;
while (model.findNodeDataForKey(k)) k++;
data.key = lastkey = k;
return k;
};
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="background-color: #696969; border: solid 1px black; height: 500px"></div>
<div>
Edit details:<br>
<div id="myInspector"></div>
</div>
<p>
This editable organizational chart sample was derived from <a href="orgChartEditor">Org Chart Editor</a>
and adds support for "assistant" nodes that are laid out by a custom <a>TreeLayout</a> below the side
of the parent node and above the regular child nodes.
</p>
<p>
Whether or not a node is considered to be an "assistant" node is determined by the <code>isAssistant</code> property of the node data.
The user can modify this data property via an additional context menu command.
</p>
<p>
Assistant employees may themselves be bosses of their own employees.
All of a boss's reports may be assistants.
</p>
<div>
<div>
<button id="SaveButton" onclick="save()">Save</button>
<button onclick="load()">Load</button>
Diagram Model saved in JSON format:
</div>
<textarea id="mySavedModel" style="width:100%; height:270px;">
{ "class": "go.TreeModel",
"nodeDataArray": [
{"key":1, "name":"Stella Payne Diaz", "title":"CEO", "pic":"1.jpg"},
{"key":2, "name":"Luke Warm", "title":"VP Marketing/Sales", "pic":"2.jpg", "parent":1},
{"key":3, "name":"Meg Meehan Hoffa", "title":"Sales", "pic":"3.jpg", "parent":2},
{"key":4, "name":"Peggy Flaming", "title":"VP Engineering", "pic":"4.jpg", "parent":1},
{"key":5, "name":"Saul Wellingood", "title":"Manufacturing", "pic":"5.jpg", "parent":4},
{"key":6, "name":"Al Ligori", "title":"Marketing", "pic":"6.jpg", "parent":2},
{"key":7, "name":"Dot Stubadd", "title":"Sales Rep", "pic":"7.jpg", "parent":3},
{"key":8, "name":"Les Ismore", "title":"Project Mgr", "pic":"8.jpg", "parent":5},
{"key":9, "name":"April Lynn Parris", "title":"Events Mgr", "pic":"9.jpg", "parent":6},
{"key":10, "name":"Xavier Breath", "title":"Engineering", "pic":"10.jpg", "parent":4},
{"key":11, "name":"Anita Hammer", "title":"Process", "pic":"11.jpg", "parent":5},
{"key":12, "name":"Billy Aiken", "title":"Software", "pic":"12.jpg", "parent":10},
{"key":13, "name":"Stan Wellback", "title":"Testing", "pic":"13.jpg", "parent":10},
{"key":14, "name":"Marge Innovera", "title":"Hardware", "pic":"14.jpg", "parent":10},
{"key":15, "name":"Evan Elpus", "title":"Quality", "pic":"15.jpg", "parent":5},
{"key":16, "name":"Lotta B. Essen", "title":"Sales Rep", "pic":"16.jpg", "parent":3},
{"key":17, "name":"Joaquin Closet", "title":"Wardrobe Assistant", "isAssistant":true, "parent":1},
{"key":18, "name":"Hannah Twomey", "title":"Engineering Assistant", "parent":10, "isAssistant":true}
]
}
</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>