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
{
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) { // scroll to the new node
var 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: $(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: 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", 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);
}
});
// manage boss info manually when a node or link is deleted from the diagram
myDiagram.addDiagramListener("SelectionDeleting", function (e) {
var part = e.subject.first(); // e.subject is the myDiagram.selection collection,
// so we'll get the first since we know we only have one selection
myDiagram.startTransaction("clear boss");
if (part instanceof go.Node) {
var it = part.findTreeChildrenNodes(); // find all child nodes
while (it.next()) { // now iterate through them and clear out the boss information
var child = it.value;
var bossText = child.findObject("boss"); // since the boss TextBlock is named, we can access it by name
if (bossText === null) return;
bossText.text = "";
}
} else if (part instanceof go.Link) {
var child = part.toNode;
var bossText = child.findObject("boss"); // since the boss TextBlock is named, we can access it by name
if (bossText === null) return;
bossText.text = "";
}
myDiagram.commitTransaction("clear boss");
});
var 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 () {
go.TreeLayout.prototype.commitNodes.call(myDiagram.layout); // 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(function (v) {
if (v.node) {
var level = v.level % (levelColors.length);
var color = levelColors[level];
var shape = v.node.findObject("SHAPE");
if (shape) shape.stroke = $(go.Brush, "Linear", {
0: color,
1: go.Brush.lightenBy(color, 0.05),
start: go.Spot.Left,
end: go.Spot.Right
});
}
});
};
// 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 newemp = {
name: "(new person)",
title: "",
comments: "",
parent: thisemp.key
};
myDiagram.model.addNodeData(newemp);
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 Segoe UI,sans-serif",
stroke: "white"
};
}
// This converter is used by the Picture.
function findHeadShot(key) {
if (key < 0 || key > 16) return "https://gojs.net.cn/images/samples/HSnopic.jpg"; // There are only 16 images on the server
return "https://gojs.net.cn/images/samples/hs" + key + ".jpg"
}
// 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._prevFill = shape.fill; // remember the original brush
shape.fill = "darkred";
}
},
mouseDragLeave: function (e, node, next) {
var shape = node.findObject("SHAPE");
if (shape && shape._prevFill) {
shape.fill = shape._prevFill; // restore the original brush
}
},
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);
}
}
}
},
// 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, "Rectangle", {
name: "SHAPE",
fill: "#333333",
stroke: 'white',
strokeWidth: 3.5,
// set the port properties:
portId: "",
fromLinkable: true,
toLinkable: true,
cursor: "pointer"
}),
$(go.Panel, "Horizontal",
$(go.Picture, {
name: "Picture",
desiredSize: new go.Size(70, 70),
margin: 1.5,
},
new go.Binding("source", "key", findHeadShot)),
// define the panel where the text will appear
$(go.Panel, "Table", {
minSize: new go.Size(130, NaN),
maxSize: new go.Size(150, NaN),
margin: new go.Margin(6, 10, 0, 6),
defaultAlignment: go.Spot.Left
},
$(go.RowColumnDefinition, {
column: 2,
width: 4
}),
$(go.TextBlock, textStyle(), // the name
{
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", function (v) {
return "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", function (v) {
return "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, "Vacate Position"), {
click: function (e, obj) {
var node = obj.part.adornedPart;
if (node !== null) {
var thisemp = node.data;
myDiagram.startTransaction("vacate");
// update the key, name, and comments
myDiagram.model.setDataProperty(thisemp, "name", "(Vacant)");
myDiagram.model.setDataProperty(thisemp, "comments", "");
myDiagram.commitTransaction("vacate");
}
}
}
),
$("ContextMenuButton",
$(go.TextBlock, "Remove Role"), {
click: function (e, obj) {
// reparent the subtree to this node's boss, then remove the node
var node = obj.part.adornedPart;
if (node !== null) {
myDiagram.startTransaction("reparent remove");
var chl = node.findTreeChildrenNodes();
// iterate through the children and set their parent key to our selected node's parent key
while (chl.next()) {
var 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: function (e, obj) {
// remove the whole subtree, including the node itself
var node = obj.part.adornedPart;
if (node !== null) {
myDiagram.startTransaction("remove dept");
myDiagram.removeParts(node.findTreeParts());
myDiagram.commitTransaction("remove dept");
}
}
}
)
);
// define the Link template
myDiagram.linkTemplate =
$(go.Link, go.Link.Orthogonal, {
corner: 5,
relinkableFrom: true,
relinkableTo: true
},
$(go.Shape, {
strokeWidth: 1.5,
stroke: "#F5F5F5"
})); // 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": {}
}
});
// Setup zoom to fit button
document.getElementById('zoomToFit').addEventListener('click', function () {
myDiagram.commandHandler.zoomToFit();
});
document.getElementById('centerRoot').addEventListener('click', function () {
myDiagram.scale = 1;
myDiagram.commandHandler.scrollToPart(myDiagram.findNodeForKey(1));
});
} // end init
// 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
var lastkey = 1;
myDiagram.model.makeUniqueKeyFunction = function (model, data) {
var k = data.key || lastkey;
while (model.findNodeDataForKey(k)) k++;
data.key = lastkey = k;
return k;
};
};
if (window.init) {
init();
}