The link doesnt correctly show up when implementing records sample in angular

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: ‘

’, // just an empty DIV element
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

Did you want links to go to individual ports on each node, rather than to the node as a whole?

If so, read http://gojs.net/latest/intro/ports.html and look at the original sample more carefully. You need to set GraphLinksModel.linkFromPortIdProperty and GraphLinksModel.linkToPortIdProperty before assigning GraphLinksModel.linkDataArray.

Thanks, do you how the model scope should look like after change

$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” }
]);

I tried adding the two arguments and i get the below error,is there any other way to add these ?

GraphLinksModel constructor can only take two optional arguments, the Array of node data and the Array of link data.

$scope.model = new go.GraphLinksModel({linkFromPortIdProperty: “fromPort”,
linkToPortIdProperty: “toPort”},

    [
      { 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" }
    ]);

Do it the same way that other samples that use ports do it.

$scope.model = new go.GraphLinksModel({linkFromPortIdProperty: “fromPort”, linkToPortIdProperty: “toPort”},
[
{ 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” }
]);

Thats how i tried it and above doesnt seems to work and reports the error “GraphLinksModel constructor can only take two optional arguments, the Array of node data and the Array of link data.”

The error message is correct. Look at the documentation for the constructor: http://gojs.net/latest/api/symbols/GraphLinksModel.html#constructor

Thanks for the link. I did try to assign the model the same way as sample but i was getting error about $ undefined

.controller(‘MinimalCtrl1’, function($scope) {
$scope.model =$(go.GraphLinksModel,
{
linkFromPortIdProperty: “fromPort”,
linkToPortIdProperty: “toPort”,
nodeDataArray: [
{ 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” }
],
linkDataArray: [
{ from: “Record1”, fromPort: “field1”, to: “Record2”, toPort: “fieldA” },
{ from: “Record1”, fromPort: “field2”, to: “Record2”, toPort: “fieldD” },
{ from: “Record1”, fromPort: “fieldThree”, to: “Record2”, toPort: “fieldB” }
]
});

so i then have to explicitely use go.GraphObject.make in the place of make to have it work.

Now that this works, I am including this in an Yo man project setup with angular . I had to click on inspect for the diagram to be visble. do you know why ?

I do not know anything about “Yo man” projects.

Might the size of the DIV be changing? Perhaps it is initially zero-sized? If so, you need to call Diagram.requestUpdate() to tell the diagram that the DIV has changed size. Read more about this at http://gojs.net/latest/intro/resizing.html.

will try. But i dont think. This is anything to do with the div cos even the water mark doesnt appear unless you click inspect.

Any other recommendations ?

I have tried but still the same. This is for one of the project and we will buy full version ,if this implementation work.

As I mentioned. I am using it in angular as base and implementing it.

Your help is appreciated.

I don’t think we know enough about your environment to give you any advice.

There are no errors or warnings in the console? Is the Diagram’s div fully initialized (with a real width and height) before you create the Diagram itself?

I think. Its definitely a div problem. I tried expanding the div on button click and it shows up. Do you know how we avoid setting div to zero.

Do you know how can i change the div size onload ?

Below is the div size of the non working mapping

div size of working example after clicking on inspect on chrome

Looks like its setting the canvas width and height to 18px on load, Is there a way to change it ? please see the highlighted portion on the snapshot

Something on your page is causing the DIV to change size, but we do not know what that might be. After that event you should call Diagram.requestUpdate.

The issue was due to the tab after delaying the initialization of diagram and calling the requestUpdate fixed the problem.

Thanks everyone for help