<script src="https://gojs.net/release/go-debug.js"></script>
<body>
<div id="myDiagram" style="border: solid 3px red; width:800px; height:300px"></div>
<button id="cs">Add node and link</button>
</body>var myDiagram;
function renderChart() {
var $ = go.GraphObject.make,
diagram = $(go.Diagram, 'myDiagram', {'relinkingTool.fromHandleArchetype': getLinkingToolHandleArchetype($, 0),
'relinkingTool.toHandleArchetype': getLinkingToolHandleArchetype($, -1)}),
spot = new go.Spot(0.95, 0.1, 0, 0);
for (var i = 0; i < model.nodeDataArray.length; i += 1) {
model.nodeDataArray[i].isGroup = true;
}
var nodes = model.nodeDataArray;
var links = model.linkDataArray;
diagram.groupTemplate = getGroupTemplate($);
diagram.linkTemplate = getLinkTemplate($);
diagram.model = new go.GraphLinksModel(nodes, links);
diagram.model.linkFromPortIdProperty = 'from_port';
diagram.model.linkToPortIdProperty = 'to_port';
diagram.addDiagramListener('selectionMoved', function() {
//myDiagram.selection.first().linksConnected.each(function(link) { console.log(link.data.points) } )
})
myDiagram = diagram;
};
function getGroupTemplate($) {
return $(go.Group, 'Table',
{
locationObjectName: 'BODY',
selectionObjectName: 'BODY',
contextMenu: $(go.Adornment),
resizeObjectName: 'BODY',
layerName: '',
},
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('cursor'),
new go.Binding('groupable', 'group', function(v) { return !v; }),
//The body
$(go.Panel, 'Table',
{
row: 1,
column: 1,
name: 'BODY',
stretch: go.GraphObject.Fill,
minSize: new go.Size(10,10),
width: 206,
},
new go.Binding('desiredSize', 'size', function(v) { if (v && v !== '0 0') { return go.Size.parse(v); } }).makeTwoWay(go.Size.stringify),
new go.Binding('background', 'color'),
// The body's main panel, contains a shape and a textblock
$(go.Panel, 'Auto',
{
row: 1,
column: 1,
stretch: go.GraphObject.Fill,
},
$(go.TextBlock,
{
margin: 10,
wrap: go.TextBlock.WrapFit,
// textAlign: 'center'
},
new go.Binding('text', 'object_title'),
new go.Binding('stroke', 'font'))
), //end of the main panel
// Right panel containing the image
$(go.Panel, 'Vertical',
{ row: 1, column: 2, stretch: go.GraphObject.Fill, width: 18, margin: 2 },
$(go.Picture, new go.Binding('source', 'source'), { desiredSize: new go.Size(18, 18) })
) // end of right panel
), //end of body, consists of a main panel containing a shape and a textblock and a small panel located right for the image
getPortTemplate($, 'top'),
getPortTemplate($, 'bottom'),
getPortTemplate($, 'left'),
getPortTemplate($, 'right')
);
}
function getLinkTemplate($) {
var fromPoints = function(points) {
var alternatingPoints = [];
points.each(function(point) {
alternatingPoints.push(point.x);
alternatingPoints.push(point.y);
});
return alternatingPoints;
}
var toPoints = function(points) {
var newPoints = new go.List(go.Point);
for (var i = 0; i < points.length; i += 2) {
newPoints.add(new go.Point(points[i], points[i + 1]))
}
return newPoints;
}
var options = {
//curve: go.Link.JumpOver,
adjusting: go.Link.Stretch,
corner: 6,
routing: go.Link.Orthogonal,
resegmentable: true,
reshapable: true,
visible: true,
relinkableFrom: true,
relinkableTo: true
}
return $(go.Link, options, new go.Binding('points', 'points', toPoints).makeTwoWay(fromPoints), $(go.Shape));
}
function getLinkingToolHandleArchetype($, segmentIndex) {
return $(go.Panel, 'Table', { segmentIndex: segmentIndex, isPanelMain: true, cursor: 'pointer'},
$(go.Panel, 'Table', { row: 0, column: 0,}, $(go.Shape, 'Diamond', { width: 10, height: 10, fill: '#ADD8E6', stroke: '#66B4F3' })),
$(go.Panel, 'Table', { row: 0, column: 0,}, $(go.Shape, 'Circle', { width: 30, height: 30, fill: 'transparent', stroke: 'transparent' }))
);
}
function getPortTemplate($, side) {
var row = 1,
col = 1,
portSize = 10,
spot, desiredSize, orientation, panelOptions, shapeOptions, margin;
if (side === 'top' || side === 'bottom') {
margin = new go.Margin(0, portSize * 0.2, 0, portSize * 0.2);
row = side === 'top' ? 0 : 2;
spot = side === 'top' ? go.Spot.Top : go.Spot.Bottom;
desiredSize = new go.Size(portSize, 0);
orientation = 'Horizontal';
} else if (side === 'left' || side === 'right') {
margin = new go.Margin(portSize * 0.2, 0, portSize * 0.2, 0);
col = side === 'left' ? 0 : 2;
spot = side === 'left' ? go.Spot.Left : go.Spot.Right;
desiredSize = new go.Size(0, portSize);
orientation = 'Vertical';
}
panelOptions = { desiredSize: desiredSize, toLinkableSelfNode: true, fromLinkableSelfNode: true, fromLinkable: true, toLinkable: true, _side: side, fromSpot: spot, toSpot: spot };
shapeOptions = { stroke: null, strokeWidth: 0, opacity: 0.3, margin: margin };
return createPort($, panelOptions, shapeOptions, side, orientation, row, col);
}
function createPort($, panelOptions, shapeOptions, side, orientation, row, column) {
return $(go.Panel, orientation, {
row: row,
column: column,
itemTemplate: $(go.Panel,
new go.Binding('portId', 'port_id'),
panelOptions,
$(go.Shape, 'Rectangle', shapeOptions, new go.Binding('fill'))
)
},
new go.Binding('itemArray', side + '_ports')
);
}
var model = { "class": "go.GraphLinksModel",
"nodeDataArray": [{"key":"549151fdd4e5740b1c6dc8cf","object_title":"ADT_DIAM_T","object_type":{"template_id":"532fff7eb41281c17ce263b6","name":"ApplicatieInterface","name_internal":"application_interface","category":"Applicatielaag","category_internal":"application_layer"},"loc":"-620 -340","size":"460 144","color":"#009edf","category":"composition_group","hide_links_from":false,"hide_links_to":false,"isGroup":true,"group":"","text":"","type":null,"shape":"","picture":"applicationinterface-transparent","font":"white","left_ports":[{"port_id":"left_1","visible":false},{"port_id":"left_18","visible":false},{"port_id":"left_19","visible":false},{"port_id":"left_20","visible":false},{"port_id":"left_21","visible":false},{"port_id":"left_22","visible":false},{"port_id":"left_23","visible":false},{"port_id":"left_24","visible":false},{"port_id":"left_25","visible":false},{"port_id":"left_26","visible":false},{"port_id":"left_10","visible":false},{"port_id":"left_11","visible":false},{"port_id":"left_12","visible":false},{"port_id":"left_13","visible":false}],"top_ports":[{"port_id":"top_0","visible":false},{"port_id":"top_1","visible":false},{"port_id":"top_2","visible":false},{"port_id":"top_3","visible":false},{"port_id":"top_4","visible":false},{"port_id":"top_5","visible":false},{"port_id":"top_6","visible":false},{"port_id":"top_7","visible":false},{"port_id":"top_8","visible":false},{"port_id":"top_9","visible":false},{"port_id":"top_10","visible":false},{"port_id":"top_11","visible":false},{"port_id":"top_12","visible":false},{"port_id":"top_13","visible":false},{"port_id":"top_14","visible":false},{"port_id":"top_15","visible":false},{"port_id":"top_16","visible":false},{"port_id":"top_17","visible":false},{"port_id":"top_18","visible":false},{"port_id":"top_19","visible":false},{"port_id":"top_20","visible":false},{"port_id":"top_21","visible":false},{"port_id":"top_22","visible":false},{"port_id":"top_23","visible":false},{"port_id":"top_24","visible":false},{"port_id":"top_25","visible":false},{"port_id":"top_26","visible":false},{"port_id":"top_27","visible":false},{"port_id":"top_28","visible":false},{"port_id":"top_29","visible":false},{"port_id":"top_30","visible":false},{"port_id":"top_31","visible":false},{"port_id":"top_32","visible":false},{"port_id":"top_33","visible":false},{"port_id":"top_34","visible":false},{"port_id":"top_35","visible":false},{"port_id":"top_36","visible":false},{"port_id":"top_37","visible":false},{"port_id":"top_38","visible":false},{"port_id":"top_39","visible":false},{"port_id":"top_40","visible":false},{"port_id":"top_41","visible":false},{"port_id":"top_42","visible":false},{"port_id":"top_43","visible":false},{"port_id":"top_44","visible":false},{"port_id":"top_45","visible":false}],"right_ports":[{"port_id":"right_1","visible":false},{"port_id":"right_18","visible":false},{"port_id":"right_19","visible":false},{"port_id":"right_20","visible":false},{"port_id":"right_21","visible":false},{"port_id":"right_22","visible":false},{"port_id":"right_23","visible":false},{"port_id":"right_24","visible":false},{"port_id":"right_25","visible":false},{"port_id":"right_26","visible":false},{"port_id":"right_10","visible":false},{"port_id":"right_11","visible":false},{"port_id":"right_12","visible":false},{"port_id":"right_13","visible":false}],"bottom_ports":[{"port_id":"bottom_0","visible":false},{"port_id":"bottom_1","visible":false},{"port_id":"bottom_2","visible":false},{"port_id":"bottom_3","visible":false},{"port_id":"bottom_4","visible":false},{"port_id":"bottom_5","visible":false},{"port_id":"bottom_6","visible":false},{"port_id":"bottom_7","visible":false},{"port_id":"bottom_8","visible":false},{"port_id":"bottom_9","visible":false},{"port_id":"bottom_10","visible":false},{"port_id":"bottom_11","visible":false},{"port_id":"bottom_12","visible":false},{"port_id":"bottom_13","visible":false},{"port_id":"bottom_14","visible":false},{"port_id":"bottom_15","visible":false},{"port_id":"bottom_16","visible":false},{"port_id":"bottom_17","visible":false},{"port_id":"bottom_18","visible":false},{"port_id":"bottom_19","visible":false},{"port_id":"bottom_20","visible":false},{"port_id":"bottom_21","visible":false},{"port_id":"bottom_22","visible":false},{"port_id":"bottom_23","visible":false},{"port_id":"bottom_24","visible":false},{"port_id":"bottom_25","visible":false},{"port_id":"bottom_26","visible":false},{"port_id":"bottom_27","visible":false},{"port_id":"bottom_28","visible":false},{"port_id":"bottom_29","visible":false},{"port_id":"bottom_30","visible":false},{"port_id":"bottom_31","visible":false},{"port_id":"bottom_32","visible":false},{"port_id":"bottom_33","visible":false},{"port_id":"bottom_34","visible":false},{"port_id":"bottom_35","visible":false},{"port_id":"bottom_36","visible":false},{"port_id":"bottom_37","visible":false},{"port_id":"bottom_38","visible":false},{"port_id":"bottom_39","visible":false},{"port_id":"bottom_40","visible":false},{"port_id":"bottom_41","visible":false},{"port_id":"bottom_42","visible":false},{"port_id":"bottom_43","visible":false},{"port_id":"bottom_44","visible":false},{"port_id":"bottom_45","visible":false}],"status":0},{"key":"54916127c2a25c0518d14c11","object_title":"ADT_ASCOM2_P","object_type":{"template_id":"532fff7eb41281c17ce263b6","name":"ApplicatieInterface","name_internal":"application_interface","category":"Applicatielaag","category_internal":"application_layer"},"loc":"-610 -295","size":"440 45","color":"#ccecf9","category":"composition_group","hide_links_from":false,"hide_links_to":false,"isGroup":true,"group":"549151fdd4e5740b1c6dc8cf","text":"","type":null,"shape":"","picture":"applicationinterface-transparent","font":"#009edf","left_ports":[{"port_id":"left_0","visible":false},{"port_id":"left_1","visible":false},{"port_id":"left_2","visible":false},{"port_id":"left_3","visible":false}],"top_ports":[{"port_id":"top_0","visible":false},{"port_id":"top_1","visible":false},{"port_id":"top_2","visible":false},{"port_id":"top_3","visible":false},{"port_id":"top_4","visible":false},{"port_id":"top_5","visible":false},{"port_id":"top_6","visible":false},{"port_id":"top_7","visible":false},{"port_id":"top_8","visible":false},{"port_id":"top_9","visible":false},{"port_id":"top_10","visible":false},{"port_id":"top_11","visible":false},{"port_id":"top_12","visible":false},{"port_id":"top_13","visible":false},{"port_id":"top_14","visible":false},{"port_id":"top_15","visible":false},{"port_id":"top_16","visible":false},{"port_id":"top_17","visible":false},{"port_id":"top_18","visible":false},{"port_id":"top_19","visible":false},{"port_id":"top_20","visible":false},{"port_id":"top_21","visible":false},{"port_id":"top_22","visible":false},{"port_id":"top_23","visible":false},{"port_id":"top_24","visible":false},{"port_id":"top_25","visible":false},{"port_id":"top_26","visible":false},{"port_id":"top_27","visible":false},{"port_id":"top_28","visible":false},{"port_id":"top_29","visible":false},{"port_id":"top_30","visible":false},{"port_id":"top_31","visible":false},{"port_id":"top_32","visible":false},{"port_id":"top_33","visible":false},{"port_id":"top_34","visible":false},{"port_id":"top_35","visible":false},{"port_id":"top_36","visible":false},{"port_id":"top_37","visible":false},{"port_id":"top_38","visible":false},{"port_id":"top_39","visible":false},{"port_id":"top_40","visible":false},{"port_id":"top_41","visible":false},{"port_id":"top_42","visible":false},{"port_id":"top_43","visible":false}],"right_ports":[{"port_id":"right_0","visible":false},{"port_id":"right_1","visible":false},{"port_id":"right_2","visible":false},{"port_id":"right_3","visible":false}],"bottom_ports":[{"port_id":"bottom_0","visible":false},{"port_id":"bottom_1","visible":false},{"port_id":"bottom_2","visible":false},{"port_id":"bottom_3","visible":false},{"port_id":"bottom_4","visible":false},{"port_id":"bottom_5","visible":false},{"port_id":"bottom_6","visible":false},{"port_id":"bottom_7","visible":false},{"port_id":"bottom_8","visible":false},{"port_id":"bottom_9","visible":false},{"port_id":"bottom_10","visible":false},{"port_id":"bottom_11","visible":false},{"port_id":"bottom_12","visible":false},{"port_id":"bottom_13","visible":false},{"port_id":"bottom_14","visible":false},{"port_id":"bottom_15","visible":false},{"port_id":"bottom_16","visible":false},{"port_id":"bottom_17","visible":false},{"port_id":"bottom_18","visible":false},{"port_id":"bottom_19","visible":false},{"port_id":"bottom_20","visible":false},{"port_id":"bottom_21","visible":false},{"port_id":"bottom_22","visible":false},{"port_id":"bottom_23","visible":false},{"port_id":"bottom_24","visible":false},{"port_id":"bottom_25","visible":false},{"port_id":"bottom_26","visible":false},{"port_id":"bottom_27","visible":false},{"port_id":"bottom_28","visible":false},{"port_id":"bottom_29","visible":false},{"port_id":"bottom_30","visible":false},{"port_id":"bottom_31","visible":false},{"port_id":"bottom_32","visible":false},{"port_id":"bottom_33","visible":false},{"port_id":"bottom_34","visible":false},{"port_id":"bottom_35","visible":false},{"port_id":"bottom_36","visible":false},{"port_id":"bottom_37","visible":false},{"port_id":"bottom_38","visible":false},{"port_id":"bottom_39","visible":false},{"port_id":"bottom_40","visible":false},{"port_id":"bottom_41","visible":false},{"port_id":"bottom_42","visible":false},{"port_id":"bottom_43","visible":false}],"status":0},{"key":"549150b4c2a25c0518d14ab5","object_title":"ADT","object_type":{"template_id":"532fff94b41281c17ce263b7","name":"Applicatiefunctie","name_internal":"application_function","category":"Applicatielaag","category_internal":"application_layer"},"loc":"-610 -240","size":"440 34","color":"#ccecf9","category":"composition_group","hide_links_from":false,"hide_links_to":false,"isGroup":true,"group":"549151fdd4e5740b1c6dc8cf","text":"","type":null,"shape":"","picture":"businessfunction-transparent","font":"#009edf","left_ports":[{"port_id":"left_0","visible":false},{"port_id":"left_1","visible":false},{"port_id":"left_2","visible":false}],"top_ports":[{"port_id":"top_0","visible":false},{"port_id":"top_1","visible":false},{"port_id":"top_2","visible":false},{"port_id":"top_3","visible":false},{"port_id":"top_4","visible":false},{"port_id":"top_5","visible":false},{"port_id":"top_6","visible":false},{"port_id":"top_7","visible":false},{"port_id":"top_8","visible":false},{"port_id":"top_9","visible":false},{"port_id":"top_10","visible":false},{"port_id":"top_11","visible":false},{"port_id":"top_12","visible":false},{"port_id":"top_13","visible":false},{"port_id":"top_14","visible":false},{"port_id":"top_15","visible":false},{"port_id":"top_16","visible":false},{"port_id":"top_17","visible":false},{"port_id":"top_18","visible":false},{"port_id":"top_19","visible":false},{"port_id":"top_20","visible":false},{"port_id":"top_21","visible":false},{"port_id":"top_22","visible":false},{"port_id":"top_23","visible":false},{"port_id":"top_24","visible":false},{"port_id":"top_25","visible":false},{"port_id":"top_26","visible":false},{"port_id":"top_27","visible":false},{"port_id":"top_28","visible":false},{"port_id":"top_29","visible":false},{"port_id":"top_30","visible":false},{"port_id":"top_31","visible":false},{"port_id":"top_32","visible":false},{"port_id":"top_33","visible":false},{"port_id":"top_34","visible":false},{"port_id":"top_35","visible":false},{"port_id":"top_36","visible":false},{"port_id":"top_37","visible":false},{"port_id":"top_38","visible":false},{"port_id":"top_39","visible":false},{"port_id":"top_40","visible":false},{"port_id":"top_41","visible":false},{"port_id":"top_42","visible":false},{"port_id":"top_43","visible":false}],"right_ports":[{"port_id":"right_0","visible":false},{"port_id":"right_1","visible":false},{"port_id":"right_2","visible":false}],"bottom_ports":[{"port_id":"bottom_0","visible":false},{"port_id":"bottom_1","visible":false},{"port_id":"bottom_2","visible":false},{"port_id":"bottom_3","visible":false},{"port_id":"bottom_4","visible":false},{"port_id":"bottom_5","visible":false},{"port_id":"bottom_6","visible":false},{"port_id":"bottom_7","visible":false},{"port_id":"bottom_8","visible":false},{"port_id":"bottom_9","visible":false},{"port_id":"bottom_10","visible":false},{"port_id":"bottom_11","visible":false},{"port_id":"bottom_12","visible":false},{"port_id":"bottom_13","visible":false},{"port_id":"bottom_14","visible":false},{"port_id":"bottom_15","visible":false},{"port_id":"bottom_16","visible":false},{"port_id":"bottom_17","visible":false},{"port_id":"bottom_18","visible":false},{"port_id":"bottom_19","visible":false},{"port_id":"bottom_20","visible":false},{"port_id":"bottom_21","visible":false},{"port_id":"bottom_22","visible":false},{"port_id":"bottom_23","visible":false},{"port_id":"bottom_24","visible":false},{"port_id":"bottom_25","visible":false},{"port_id":"bottom_26","visible":false},{"port_id":"bottom_27","visible":false},{"port_id":"bottom_28","visible":false},{"port_id":"bottom_29","visible":false},{"port_id":"bottom_30","visible":false},{"port_id":"bottom_31","visible":false},{"port_id":"bottom_32","visible":false},{"port_id":"bottom_33","visible":false},{"port_id":"bottom_34","visible":false},{"port_id":"bottom_35","visible":false},{"port_id":"bottom_36","visible":false},{"port_id":"bottom_37","visible":false},{"port_id":"bottom_38","visible":false},{"port_id":"bottom_39","visible":false},{"port_id":"bottom_40","visible":false},{"port_id":"bottom_41","visible":false},{"port_id":"bottom_42","visible":false},{"port_id":"bottom_43","visible":false}],"status":0}],
"linkDataArray": [{"id":"55e97ba1c9942a0a287cebf5","from":"54916127c2a25c0518d14c11","to":"54916127c2a25c0518d14c11","category":"composition","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e86c8ccee096c838fe91","from_port":"right_1","to_port":"bottom_9","status":0},{"id":"5624bd2ec9942a0b6c4d3a5c","from":"54916127c2a25c0518d14c11","to":"54916127c2a25c0518d14c11","category":"flow","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e8938ccee096c838fe92","from_port":"right_2","to_port":"bottom_9","status":0},{"id":"56310b9bc9942a01d8bfdfbe","from":"549151fdd4e5740b1c6dc8cf","to":"54916127c2a25c0518d14c11","category":"composition","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e86c8ccee096c838fe91","from_port":"right_1","to_port":"left_2","status":0},{"id":"5630f8d5c9942a01d8bfc80d","from":"547dd42ac2a25c0518d0a3ed","to":"547dd42ac2a25c0518d0a3ed","category":"composition","text":null,"points":[],"visible":true,"is_relation_direction_alternative":true,"template_id":"5333e86c8ccee096c838fe91","from_port":"right_1","to_port":"bottom_9","status":0},{"id":"561cb49ec9942a0b6c4be08a","from":"547dd42ac2a25c0518d0a3ed","to":"547dd42ac2a25c0518d0a3ed","category":"flow","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e8938ccee096c838fe92","from_port":"right_2","to_port":"bottom_9","status":0},{"id":"54a11567a623990994a77773","from":"54916127c2a25c0518d14c11","to":"549150b4c2a25c0518d14ab5","category":"association","text":null,"points":[],"visible":true,"is_relation_direction_alternative":true,"template_id":"5333e8348ccee096c838fe90","from_port":"left_2","to_port":"right_1","status":0},{"id":"5628a143c9942a0b6c4fcba5","from":"549150b4c2a25c0518d14ab5","to":"54916127c2a25c0518d14c11","category":"association","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e8348ccee096c838fe90","from_port":"right_1","to_port":"left_2","status":0},{"id":"549165e022972f071caa019a","from":"549151fdd4e5740b1c6dc8cf","to":"549150b4c2a25c0518d14ab5","category":"association","text":"","points":[],"visible":true,"is_relation_direction_alternative":true,"template_id":"5333e8348ccee096c838fe90","from_port":"left_22","to_port":"right_1","status":0}]};
renderChart();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.