Hi, I am new to GOJS and Angular JS. I am trying to use records sample code and develop using angular. everything works except for the links doesnt appear to be correctly shown.
Any help and recommendation is appreciated.
Here is my JS file :
angular.module(‘minimal’, [])
.directive(‘goDiagram’, function() {
return {
restrict: ‘E’,
template: ‘
replace: true,
scope: { model: ‘=goModel’ },
link: function(scope, element, attrs) {
var = go.GraphObject.make; var fieldTemplate = (go.Panel, “TableRow”, // this Panel is a row in the containing Table
new go.Binding(“portId”, “name”), // this Panel is a “port”
{
background: “transparent”, // so this port’s background can be picked by the mouse
fromSpot: go.Spot.Right, // links only go from the right side to the left side
toSpot: go.Spot.Left,
// allow drawing links from or to this port:
fromLinkable: true, toLinkable: true
},
(go.Shape, { width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4, // but disallow drawing links from or to this shape: fromLinkable: false, toLinkable: false }, new go.Binding("figure", "figure"), new go.Binding("fill", "color")), (go.TextBlock,
{ margin: new go.Margin(0, 2), column: 1, font: “bold 13px sans-serif”,
// and disallow drawing links from or to this text:
fromLinkable: false, toLinkable: false },
new go.Binding(“text”, “name”)),
$(go.TextBlock,
{ margin: new go.Margin(0, 2), column: 2, font: “13px sans-serif” },
new go.Binding(“text”, “info”))
);
var diagram = // create a Diagram for the given HTML DIV element
$(go.Diagram, element[0],
{
nodeTemplate: $(go.Node, "Auto",
{ locationSpot: go.Spot.Center,
movable: false,
copyable: false,
deletable: false
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape,
{ fill: "#EEEEEE" }),
// the content consists of a header and a list of items
$(go.Panel, "Vertical",
// this is the header for the whole node
$(go.Panel, "Auto",
{ stretch: go.GraphObject.Horizontal }, // as wide as the whole node
$(go.Shape,
{ fill: "#1570A6", stroke: null }),
$(go.TextBlock,
{
alignment: go.Spot.Center,
margin: 3,
stroke: "white",
textAlign: "center",
font: "bold 12pt sans-serif"
},
new go.Binding("text", "key"))),
// this Panel holds a Panel for each item object in the itemArray;
// each item Panel is defined by the itemTemplate to be a TableRow in this Table
$(go.Panel, "Table",
{
padding: 2,
minSize: new go.Size(100, 10),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: fieldTemplate
},
new go.Binding("itemArray", "fields")
) // end Table Panel of items
) // end Vertical Panel
),
/*$(go.Shape, "RoundedRectangle", new go.Binding("fill", "color"),
{
portId: "", cursor: "pointer",
fromLinkable: true, toLinkable: true,
fromLinkableSelfNode: true, toLinkableSelfNode: true,
fromLinkableDuplicates: true, toLinkableDuplicates: true
}),*/
/* $(go.TextBlock, { margin: 3, editable: true },
new go.Binding("text", "name").makeTwoWay())
),*/
linkTemplate: $(go.Link,
{ relinkableFrom: true, relinkableTo: true,toShortLength: 4 },
$(go.Shape, { strokeWidth: 1.5 }),
$(go.Shape, { toArrow: "Standard", stroke: null })
),
initialContentAlignment: go.Spot.Center,
"ModelChanged": updateAngular,
"undoManager.isEnabled": true
});
// whenever a GoJS transaction has finished modifying the model, update all Angular bindings
function updateAngular(e) {
if (e.isTransactionFinished) scope.$apply();
}
// notice when the value of "model" changes: update the Diagram.model
scope.$watch("model", function(newmodel) {
var oldmodel = diagram.model;
if (oldmodel !== newmodel) {
diagram.removeDiagramListener("ChangedSelection", updateSelection);
diagram.model = newmodel;
diagram.addDiagramListener("ChangedSelection", updateSelection);
}
});
scope.$watch("model.selectedNodeData.name", function(newname) {
if (!diagram.model.selectedNodeData) return;
// disable recursive updates
diagram.removeModelChangedListener(updateAngular);
// change the name
diagram.startTransaction("change name");
// the data property has already been modified, so setDataProperty would have no effect
var node = diagram.findNodeForData(diagram.model.selectedNodeData);
if (node !== null) node.updateTargetBindings("name");
diagram.commitTransaction("change name");
// re-enable normal updates
diagram.addModelChangedListener(updateAngular);
});
// update the model when the selection changes
function updateSelection(e) {
var selnode = diagram.selection.first();
diagram.model.selectedNodeData = (selnode instanceof go.Node ? selnode.data : null);
scope.$apply();
}
diagram.addDiagramListener("ChangedSelection", updateSelection);
}
};
})
.controller('MinimalCtrl1', function($scope) {
$scope.model = new go.GraphLinksModel(
[
{ key: "Record1",
fields: [
{ name: "field1", info: "", color: "#F7B84B", figure: "Ellipse" },
{ name: "field2", info: "the second one", color: "#F25022", figure: "Ellipse" },
{ name: "fieldThree", info: "3rd", color: "#00BCF2" }
],
loc: "0 0" },
{ key: "Record2",
fields: [
{ name: "fieldA", info: "", color: "#FFB900", figure: "Diamond" },
{ name: "fieldB", info: "", color: "#F25022", figure: "Rectangle" },
{ name: "fieldC", info: "", color: "#7FBA00", figure: "Diamond" },
{ name: "fieldD", info: "fourth", color: "#00BCF2", figure: "Rectangle" }
],
loc: "250 0" }
],
[
{ from: "Record1", fromPort: "field1", to: "Record2", toPort: "fieldA" },
{ from: "Record1", fromPort: "field2", to: "Record2", toPort: "fieldD" },
{ from: "Record1", fromPort: "fieldThree", to: "Record2", toPort: "fieldB" }
]);
$scope.model.selectedNodeData = null;
/* $scope.replaceModel = function() {
$scope.model = new go.GraphLinksModel(
[
{ key: 11, name: "zeta", color: "red" },
{ key: 12, name: "eta", color: "green" }
],
[
{ from: 11, to: 12 }
]
);
}*/
});
Below is the snapshot of output how it looks
another concern is when ever i import this in my main project, the diagram doesnt appear unless i do inspect on the chrome