I am trying to incorporate the GOJS Diagram as part of modal popup which has a UIB TABSET which has 4 tabs and this diagram is part of an HTML included on 3rd TAB. The issue that we have here is for some reason the diagram initializes to zero size since it’s not on the first one.
The same diagram works perfectly alright when I call that html as part of the first tab. Things to be noted here is each tab includes a html file which has its own controller.
I went through one of the forum which recommends calling the below function
myDiagram.requestUpdate() // here myDiagram has my diagram description
(function() {
'use strict';
angular
.module('irisUi')
.directive('goDiagram', function() {
return {
restrict: 'E',
template: '<div></div>', // 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
),
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('MappingController', MappingController);
function MappingController($log, $scope, $http) {
var vm = this;
vm.hideMe = true;
/* vm.mapClick = function() {
alert("Map!");
}*/
$scope.model =go.GraphObject.make(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" }
]
});
$scope.model.selectedNodeData = null;
}
})();
Below is how the html for the above controller is included on the tabset
uib-tab heading="Mapping" class="navhead" id="tab3"
uib-tab-heading> Step 3 : Mapping
uib-tab-heading>
div ng-include="'app/config_gen/templates/mapping.html'"></div>
uib-tab>
// note i have to remove start tag for the code to appear