var nodeDataArray = [];
// build up the tree
traverseDom(document.activeElement, null);
// create the model for the DOM tree
myDiagram.model =
$(go.TreeModel, {
isReadOnly: true, // don't allow the user to delete or copy nodes
nodeDataArray: nodeDataArray
});
// Walk the DOM, starting at document, and return an Array of node data objects representing the DOM tree
// Typical usage: traverseDom(document.activeElement)
// The second and third arguments are internal, used when recursing through the DOM
function traverseDom(node, parentName, dataArray) {
if (parentName === undefined) parentName = null;
if (dataArray === undefined) dataArray = [];
// skip everything but HTML Elements
if (!(node instanceof Element)) return;
// Ignore the menu on the left of the page
if (node.id === "menu") return;
// add this node to the nodeDataArray
var name = getName(node);
var data = { key: name, name: name };
dataArray.push(data);
// add a link to its parent
if (parentName !== null) {
data.parent = parentName;
}
// find all children
var l = node.childNodes.length;
for (var i = 0; i < l; i++) {
traverseDom(node.childNodes[i], name, dataArray);
}
return dataArray;
}
Here’s how you can use it:
// create the model for the DOM tree
myDiagram.model =
$(go.TreeModel, {
isReadOnly: true, // don't allow the user to delete or copy nodes
// build up the tree in an Array of node data
nodeDataArray: traverseDom(document.activeElement)
});
I did not recognize that $ is assigned $ = go.GraphObject.make; so this assignemend was not visible in this scope. I thought that console.log($ === jQuery); // "true"