Hi,
I am looking to represent a tree structure of data on the fields of records. are there any options available for the same ?
for example i would like to represent the below as part of record1
list user {
leaf name {
type string;
}
}
You could implement your own indentation just by changing the margin on individual items.
Alternatively you might want to do something like GoJS Tree Mapper.
Thanks Walter. Is it possible to load the tree data from json for the second tree mapper example ?
instead of showing item0 and so on ?
where do i specify the margin here ? will it go as part of node template or field template ?
/* (function() {
‘use strict’;
angular
.module('irisUi')
.controller('MappingController', MappingController);
function MappingController($log, $scope, $http) {
var vm = this;
vm.hideMe = true;
vm.mapClick = function() {
alert("Map!");
}
}
})();*/
(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 firstTime = true;
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"))
);
scope.$on('eventX', function(ev, args){
//var firstTime = true;
//log('Controller1 source: ' + args.source);
//$log.info("Inside watch function of Directive:::");
if (firstTime) {
diagram.delayInitialization( function() { diagram.requestUpdate(); } );
firstTime = false;
}
diagram.requestUpdate();
});
var diagram = // create a Diagram for the given HTML DIV element
$(go.Diagram, element[0],
{
nodeTemplate: $(go.Node, "Auto",
{ locationSpot: go.Spot.Center,
movable: true,
copyable: true,
deletable: true
},
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('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: "Service_Parameters",
fields: [
{ name: "list user", info: "", color: "", figure: "PlusLine" },
{ name: "key name", info: "the second one", color: "#F7B84B", figure: "LineH" },
{ name: "leaf name", info: "3rd",figure: "PlusLine", color: "#F7B84B" },
{ name: "type String", info: "four", figure: "Ellipse", color: "#00BCF2" }
],
loc: "0 50" },
{ 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 100" },
{ key: "Record3",
fields: [
{ name: "field1", info: "", color: "#F7B84B", figure: "Ellipse" },
{ name: "field2", info: "the second one", color: "#F25022", figure: "Ellipse" },
{ name: "fieldThree", info: "3rd",figure: "Diamond", color: "#00BCF2" },
{ name: "field4", info: "four", color: "#00BCF2" }
],
loc: "500 150" }
],
linkDataArray: [
{ from: "Service_Parameters", fromPort: "field1", to: "Record2", toPort: "fieldA" },
{ from: "Service_Parameters", fromPort: "field2", to: "Record2", toPort: "fieldD" },
{ from: "Service_Parameters", fromPort: "fieldThree", to: "Record2", toPort: "fieldB" },
{ from: "Service_Parameters", fromPort: "field4", to: "Record2", toPort: "fieldC" }
]
});
$scope.model.selectedNodeData = null;
/*$scope.$on('eventX', function(ev, args){
//log('Controller1 source: ' + args.source);
$log.info("Inside watch function of Mapping controller:::");
});*/
}
})();Loading JSON data from some source is unrelated to the operation of any GoJS diagram. However, many of the samples that have a “Load” button do get a JSON-formatted string that is parsed to create JavaScript objects to build a new Model, by calling Model.fromJson. That static function does require that the JSON-text was generated by Model.toJson, though.
You’re asking two completely different questions here. It’s best to ask them in different topics.
Regarding margins, where did you want the margin to be? That will tell you on which GraphObject the margin should be set.
Ok. All I want to do is instead of item 0 to 15 on the tree. I want to display a tree structure with fields name either manual or through JSON…
is it possible
i want something like this
- list user
- key name
- leaf name
- type string
- leaf uid
- type int
?
- type int
Yes, programmatically you can construct the model in any manner that you wish. GoJS should not care about how the model is constructed.
(It does care about how you modify it afterwards, since GoJS does need to be notified about the modifications so that it can update the diagram to reflect the changes in the model.)
Thanks. I am all set now.