Dear friends,
greetings! iam creating the chart as in the below pic:
i want to make this center circle to be fixed. Right and left side nodes/subnodes i want to move while scroll (only left and right set has to scroll center circle should be static). is it possible? pls tell me the ways to do that.
Thanks and Regards,
Syed Abdul Rahim
See for example GoJS Legends and Titles -- Northwoods Software.
Basically you will want to implement a “ViewportBoundsChanged” DiagramEvent listener that updates the location of that center circle Node.
Thanks Mr.Walter. i will try this…
in my drawing i made grid.visible=true… and drew this drawing it came as verticallly nice… if i make grid.visible = false… all the liks hangining and changing its position randomly… stays horizontally… pls clarify me…
I’m sorry, but I have no idea of what you are trying to describe. Please show small before and after screenshots, and show the code for what you did.
Changing the visibility of the Diagram.grid does not cause a layout to happen, so I do not understand how you got that behavior.
k. Thanks Mr.Walter. I will check again and getback to u. Thanks a lot for ur support.
Dear Mr.Walter,
Greetings! i want to create a chart like that and make the center circle to be fixed while scrolling. right and left side nodes should scroll vertically.
as you said, i have implemented “ViewportBoundsChanged” DiagramEvent listener, then links with arrows are hiding as below pic.
please help me to solve this… i used below code to create this…
function init() {
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
//make port
function makePort(name, spot, output, input) {
// the port is basically just a small circle that has a white stroke when it is made visible
return $(go.Shape, "Circle",
{
fill: null,
stroke: null, // this is changed to "white" in the showPorts function
desiredSize: new go.Size(8, 8),
alignment: spot, alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a "port"
//fromSpot: spot,
//toSpot: spot, // declare where links may connect at this port
fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here
cursor: "pointer" // show a different cursor to indicate potential link point
});
}
myDiagram.nodeTemplateMap.add("circlebox",
$(go.Part,
{layerName:"Grid",_viewPosition: new go.Point(400,250)},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape,"Circle"),
makePort("L", go.Spot.MiddleLeft, false, false),
makePort("R", go.Spot.MiddleRight, false, false)
))
myDiagram.addDiagramListener("ViewportBoundsChanged", function(e) {
e.diagram.commit(function(dia) {
// only iterates through simple Parts in the diagram, not Nodes or Links
dia.parts.each(function(part) {
// and only on those that have the "_viewPosition" property set to a Point
if (part._viewPosition) {
part.position = dia.transformViewToDoc(part._viewPosition);
part.scale = 1/dia.scale;
}
})
}, "fix Parts");
});
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ background: "#44CCFF" },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// $(go.Picture,
// { margin: 10, width: 50, height: 50, background: "red" },
// new go.Binding("source")),
$(go.TextBlock, "Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" },
new go.Binding("text", "name")),
makePort("L", go.Spot.Left, false, false)
//makePort("R", go.Spot.Right, false, false)
);
var model = $(go.TreeModel);
model.nodeDataArray =
[ // the "key" and "parent" property names are required,
// but you can add whatever data properties you need for your app
{ key: "1", category:"circlebox", name: "1Don Meow",loc: go.Point.stringify({ x: 400, y: 250 })},
{ key: "2", name: "2Demeter",loc: go.Point.stringify({ x: 200, y: 250 }), parent: "1"},
{ key: "3", name: "3Copricat",loc: go.Point.stringify({ x: 600, y: 250 }), parent: "1"},
{ key: "4", name: "4Don Meow",loc: go.Point.stringify({ x: 200, y: 450 }), parent: "1"},
{ key: "5", name: "5Copricat",loc: go.Point.stringify({ x: 600, y: 450 }), parent: "1"},
{ key: "6", name: "6Don Meow",loc: go.Point.stringify({ x: 200, y: 50 }), parent: "1"},
{ key: "7", name: "7Copricat",loc: go.Point.stringify({ x: 600, y: 50 }), parent: "1"},
{ key: "8", name: "8Don Meow",loc: go.Point.stringify({ x: 200, y: -150 }), parent: "1"},
{ key: "9", name: "9Copricat",loc: go.Point.stringify({ x: 600, y: -150 }), parent: "1"},
{ key: "10", name: "10Don Meow",loc: go.Point.stringify({ x: 200, y: 650 }), parent: "1"},
{ key: "11", name: "11Copricat",loc: go.Point.stringify({ x: 600, y: 650 }), parent: "1"},
//{ key: "4", parent: "3", name: "4Jellylorum" },
// { key: "5", parent: "3", name: "5Alonzo" },
// { key: "6", parent: "2", name: "6Munkustrap" }
];
myDiagram.model = model;
myDiagram.initialContentAlignment = go.Spot.Center;
}
pls help me to solve this…
thanks and Regards,
Syed Abdul Rahim
i need another help, here in this code all the arrows are connecting to allover the circle. i want to connect only on right and left side of the circle… for that i used makeport funciton… but not working…:)
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
allowHorizontalScroll: false,
initialContentAlignment: go.Spot.Center,
"ViewportBoundsChanged": recenterRoot
});
function recenterRoot(e) {
var root = e.diagram.findNodeForKey(-1);
if (root) {
e.diagram.commit(function(diag) {
root.location = diag.viewportBounds.center;
}, null); // don't record in UndoManager
}
}
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 150, locationSpot: go.Spot.Center },
new go.Binding("location", "location", go.Point.parse),
$(go.Shape,
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
);
myDiagram.nodeTemplateMap.add("Root",
$(go.Node,
{
locationSpot: go.Spot.Center,
fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides,
fromEndSegmentLength: 0, toEndSegmentLength: 0,
portSpreading: go.Node.SpreadingNone
},
new go.Binding("location", "location", go.Point.parse),
$(go.Shape, "Circle", { width: 120 })
));
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.Shape, { toArrow: "Standard" })
);
var nodes = [ { key: -1, category: "Root" } ];
var links = [];
for (var i = 0; i < 30; i++) {
// left side
var key = 2*i;
nodes.push({ key: key, text: "Node " + key, location: "0 " + (i*60).toString() });
links.push({ from: -1, to: key });
// right side
key = 2*i + 1;
nodes.push({ key: key, text: "Node " + key, location: "600 " + (i*60).toString() });
links.push({ from: -1, to: key });
}
myDiagram.model = new go.GraphLinksModel(nodes, links);
}
Dear Mr.Walter,
Greetings! Thanks a lot for your help. its nice. I want to make sub nodes also as in the pics:
so i removed allowHorizontalScroll: false and made it true. when i scrolled horizontally… it lines are going and linking to bottom center of the nodes. i want all the links should connnect only in the right center of the nodes. as maked (red) in below pics.
pls help me to find a solution…
thanks a lot,
Regards,
Syed Abdul Rahim
Dear Mr.Walter,
Actually in my chart, user will click and make the nodes and subnodes… as in this post:
user can create n number of nodes and subnodes in it. so in this situation i have give the user for horizontal scrolll…
Thanks and Regards,
Syed Abdul Rahim
Dear Mr.Walter,
Greetings! I want recenter the circle object only when user scroll vertically. If the user scroll horizontally, I have to allow him to scroll without implement the recenter that opject… I mean only I have to restrict when vertical scroll… if the user scrolls horizontally I have to allow them to move and scroll.
pls tell me how can I track user scrolling horizontally or vaertically. and how to find the viewportBounds horizontally or vertically (width or height changing)
Thanks and Regards,
Syed Abdul Rahim
In the “ViewportBoundsChanged” DiagramEvent listener, GoJS Events -- Northwoods Software, you can look at the e.subject.bounds to see what the old value of Diagram.viewportBounds was.
dear Mr.Walter,
in the below function
function recenterRoot(e) {
var root = e.diagram.findNodeForKey(-1);
if (root) {
e.diagram.commit(function(diag) {
root.location = diag.viewportBounds.center;
}, null); // don’t record in UndoManager
}
}
I want to change only “y” position while recentering… not the both x&y (center position). I tried like
root.location.x = 150;
its not accepting pls tell me the way to update only y position not x position.
Thanks and Regards,
Syed Abdul Rahim
If you run with go-debug.js instead of go.js, as we recommend when first developing with GoJS, you would find that you cannot modify the Point result of Part.location. It’s an immutable object.
Instead you need to create a new Point and assign that to Part.location, or to any other settable property of type Point.
Same is true for all properties of type Size, Rect, Margin, and Spot.
Dear Mr.Walter,
Greetings! thks for the reply. All are working fine now. but if I scroll horizontally inside diagram. its getting collide (overlapping) all. how can I avoide horizontal scrolling inside the diagram grid area… but user can scroll using scroll buttons given in right and bottom of the diagram.
Thanks and Regards,
Syed Abdul Rahim
What you are asking is ambiguous to me.
Did you see what I wrote in the code above, setting allowHorizontalScroll?
Dear Mr.walter,
Greetings! S, I understand, horizontal scroll false. but as per my chart requirement I have to allow horizontal scrolling. So I tried… I gave condition like when only vertical scroll done by user I just call recentering. its working fine.
if I keep my horizontal bar left or right and do vertical scrall its collapsing… if I keep my horizontal scroll bar in center, vertical scroll works fine. is there any way to force the user to keep horizontal scrollbar in center while user doing vertical scroll? I can track the vertical scroll…
Thanks and Regards,
Syed Abdul Rahim
It doesn’t make sense to me that you want to allow horizontal scrolling while wanting to keep the circular root node centered in the viewport – of course that would cause the root node to be moved to overlap the nodes in the branches.
Maybe you should keep the x value of the root node’s location unmodified while only modifying its y value. But you have to make sure it has the correct x value to begin with.
