360 lines
14 KiB
HTML
360 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Org Chart Extras</title>
|
|
<meta name="description" content="An org chart that also shows non-tree-structure relationships." />
|
|
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
|
|
<meta charset="UTF-8">
|
|
<script src="../release/go.js"></script>
|
|
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
|
|
<script id="code">
|
|
function init() {
|
|
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
|
|
var $ = go.GraphObject.make; // for conciseness in defining templates
|
|
|
|
myDiagram =
|
|
$(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
|
|
{
|
|
initialContentAlignment: go.Spot.Center,
|
|
// 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,
|
|
// enable undo & redo
|
|
"undoManager.isEnabled": true
|
|
});
|
|
|
|
// when the document is modified, add a "*" to the title and enable the "Save" button
|
|
myDiagram.addDiagramListener("Modified", function(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.substr(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: function (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: function (e, node, next) {
|
|
var shape = node.findObject("SHAPE");
|
|
if (shape) shape.fill = graygrad;
|
|
},
|
|
mouseDrop: function (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);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{ // this tooltip Adornment is shared by all nodes
|
|
toolTip: //??
|
|
$(go.Adornment, "Auto",
|
|
$(go.Shape, { fill: "#FFFFCC" }),
|
|
$(go.TextBlock, { margin: 4 }, // the tooltip shows the result of calling nodeInfo(data)
|
|
new go.Binding("text", "", function(a) {
|
|
return a.adornedPart._treeParentNode + "\n" + a.adornedPart.findTreeParentNode();
|
|
}).ofObject()))
|
|
},
|
|
// 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", function(sel) { return 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)
|
|
},
|
|
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, "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)
|
|
},
|
|
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, relinkableFrom: true, relinkableTo: true },
|
|
$(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", "text"),
|
|
{ stroke: "green", background: "rgba(255,255,255,0.75)",
|
|
maxSize: new go.Size(80, NaN)
|
|
})));
|
|
|
|
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", "text"),
|
|
{ stroke: "orange", background: "rgba(255,255,255,0.75)",
|
|
maxSize: new go.Size(80, NaN)
|
|
})));
|
|
|
|
// 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);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<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.
|
|
You can also draw a link from a node's background to other nodes that have no "boss".
|
|
</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>
|
|
</body>
|
|
</html>
|