okay thx.
now i move the group with:
group.move(new go.Point(300-((group.actualBounds.width/2)-(group.data.width/2)),500-((group.actualBounds.height/2)-(group.data.height/2))));
but:
The half width and height of the group is not the top left corner of the central circle, when a textbox exist. Have you an idea how i “move” it correct?
Is “Device 5” outside and above the Placeholder? I guess you should just use half the width and height of the Group.placeholder.
MyDiagram.diagram.groupTemplate = $(go.Group, "Spot", { layout: $(go.CircularLayout, { spacing: NaN, radius: 150, sorting: go.CircularLayout.Ascending, startAngle: 180, sweepAngle: 360 } ), selectionObjectName: "device", //locationObjectName: "device", //isLayoutPositioned: this.modeConfiguration }, $(go.Placeholder), $(go.TextBlock, { margin: 2, font: "bold 11pt Tahoma" }, new go.Binding("text", "name").makeTwoWay(), ), $(go.Panel, go.Panel.Viewbox, { name: "device", portId: "" }, new go.Binding("width", "width").makeTwoWay(), new go.Binding("height", "height").makeTwoWay(), $(go.Panel, 'Auto', {}, $(go.Shape, "Circle", { fill: 'white', strokeWidth: 10, stroke: 'lightgrey' }), $(go.Picture, new go.Binding('source', 'type', MyDiagram.getImageByType)) ) ) ) );
How can i get the placeholder? Is this the locationObject of the group?
The placeholder has the green background:
So you see that the placeholder includes the description “Device 4”. So i can not calculate with the half of the placeholder. It is possible to ignore the textbox when you calculate the bounds of the placeholder?
You can change the Group template to be whatever you want.
Actually, in seeing your screenshot, it still isn’t clear to me what you are trying to accomplish.
I want that the central circle has the correct position:
The is the group template without textbox. But i want that the cricle has the same position with textbox.
Did you want the centers of the Circle Shapes to have the same Y value in document coordinates?
Have you made sure that the Group.placeholder is not affected by the position or size of the group’s Circle Shape and TextBlock and whatever else you want to be shown for the Group?
And you have specfiied the Group.locationSpot to be go.Spot.Center and Group.locationObjectName to be the name of that Circle Shape?
Something like:
myDiagram.groupTemplate =
$(go.Group, "Spot",
{
locationSpot: go.Spot.Center, locationObjectName: "CIRCLE",
layout: $(go.CircularLayout, { . . . })
},
$(go.Placeholder),
$(go.Panel, "Vertical",
$(go.Shape, "Circle",
{ name: "CIRCLE", portId: "", width: 40, height: 40, fill: "lightblue" },
new go.Binding("fill", "color")),
$(go.TextBlock,
new go.Binding("text"))
)
);
If that’s the case then it ought to be the case that the TextBlock, or even Circle Shape, can stick out beyond the top or beyond the bottom of the Placeholder.
myDiagram.nodeTemplate =
$(go.Node, {background: 'green' },
$(go.Shape, 'Circle', { width: 40, height: 40, fill: 'red' })
);
myDiagram.groupTemplate =
$(go.Group, 'Spot',
{
background: 'rgba(0,255,0,.3)',
layout: $(go.CircularLayout,{
spacing: NaN,
radius: 150
}),
locationSpot: go.Spot.Center,
locationObjectName: 'center'
},
$(go.Placeholder),
$(go.Panel, "Vertical",
$(go.TextBlock,
new go.Binding("text", "key")
),
$(go.Shape, "Circle",
{ name: 'center', portId: "", width: 40, height: 40, fill: "lightblue" },
),
)
);
var myModel = $(go.GraphLinksModel);
myModel.nodeDataArray = [
{ key: "Alpha", isGroup: true },
{ key: "Beta", group: "Alpha" },
{ key: "Gamma", group: "Alpha" },
{ key: "Delta", group: "Alpha" },
{ key: "Epsilon", group: "Alpha" }
];
myModel.linkDataArray = [
{ from: "Alpha", to: "Beta"},
{ from: "Alpha", to: "Gamma"},
{ from: "Alpha", to: "Delta"},
{ from: "Alpha", to: "Epsilon"}
];
The properties Group.locationSpot and Group.locationObjectName have no effect. Please try my sample.
I see. You need to set the Panel | GoJS API to “center” on the Panel.
Fine!!!
myDiagram.groupTemplate =
$(go.Group, 'Spot',
{
background: 'rgba(0,255,0,.3)',
layout: $(go.CircularLayout,{
spacing: NaN,
radius: 100
}),
},
$(go.Placeholder),
$(go.Panel, "Vertical", { alignmentFocusName: 'CENTER' },
$(go.TextBlock,
new go.Binding("text", "key")
),
$(go.Shape, "Circle",
{ name: 'CENTER', portId: "", width: 80, height: 80, fill: "lightblue" },
)
)
);
var myModel = $(go.GraphLinksModel);
myModel.nodeDataArray = [
{ key: "Alpha", isGroup: true },
{ key: "Beta", group: "Alpha" },
{ key: "Gamma", group: "Alpha" },
// { key: "Delta", group: "Alpha" },
// { key: "Epsilon", group: "Alpha" },
];
myModel.linkDataArray = [
{ from: "Alpha", to: "Beta"},
{ from: "Alpha", to: "Gamma"},
// { from: "Alpha", to: "Delta"},
// { from: "Alpha", to: "Epsilon"}
];
And now i want that the topLeft corner of the circle “center” is on position p.e. 200,200
For convenience, set Group.locationObjectName to “CENTER”. Now the Group.location will be the top-left corner of the circle.
Call Node.move (or Node.moveTo). Since move takes a position, not a location, you have to calculate the point as (200 + group.location.x - group.actualBounds.x, 200 + group.location.y - group.actualBounds.y).
Sorry, what is my problem?
myDiagram.nodeTemplate =
$(go.Node, {background: 'green' },
$(go.Shape, 'Circle', { width: 40, height: 40, fill: 'red' })
);
myDiagram.groupTemplate =
$(go.Group, 'Spot',
{
background: 'rgba(0,255,0,.3)',
layout: $(go.CircularLayout,{
spacing: NaN,
radius: 100
}),
locationSpot: go.Spot.Center,
locationObjectName: 'CENTER'
},
$(go.Placeholder),
$(go.Panel, "Vertical", { alignmentFocusName: 'CENTER' },
$(go.TextBlock,
new go.Binding("text", "key")
),
$(go.Shape, "Circle",
{ name: 'CENTER', portId: "", width: 80, height: 80, fill: "lightblue" },
)
)
);
var myModel = $(go.GraphLinksModel);
myModel.nodeDataArray = [
{ key: "Alpha", isGroup: true },
{ key: "Beta", group: "Alpha" },
{ key: "Gamma", group: "Alpha" },
// { key: "Delta", group: "Alpha" },
// { key: "Epsilon", group: "Alpha" },
];
myModel.linkDataArray = [
{ from: "Alpha", to: "Beta"},
{ from: "Alpha", to: "Gamma"},
// { from: "Alpha", to: "Delta"},
// { from: "Alpha", to: "Epsilon"}
];
myDiagram.model = myModel;
myDiagram.startTransaction('test2');
group = myDiagram.findNodeForKey("Alpha");
group.move(new go.Point(200 + group.location.x - group.actualBounds.x, 200 + group.location.y - group.actualBounds.y));
myDiagram.commitTransaction('test2');For one, you are now specifying the locationSpot to be Center when you earlier asked about the top-left spot.
In this example the properties locationSpot and locationObjectName have no effect. Try it please
When debug i get this values, before i move the group;
group.location.x = 0
group.actualBounds.x = 0
group.location.y = 34.xxxx
group.actualBounds.y = -7.xxx
Try removing the locationObjectName, since the locationObject will always be the Placeholder. Then, make sure you are making your move call after the nodes have been postioned by the CircularLayout. Perhaps use an “InitialLayoutCompleted” event listener. The conditions under which you move the group will depend on your app, but you want to make sure the member nodes have been positioned by the layout.
myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
myDiagram.startTransaction('test2');
var group = myDiagram.findNodeForKey("Alpha");
group.move(new go.Point(200 + group.location.x - group.actualBounds.x, 200 + group.location.y - group.actualBounds.y));
myDiagram.commitTransaction('test2');
});
I move the group per button click.
function move() {
myDiagram.startTransaction('test2');
group = myDiagram.findNodeForKey("Alpha");
group.move(new go.Point(200 + group.location.x - group.actualBounds.x, 0 + group.location.y - group.actualBounds.y));
myDiagram.commitTransaction('test2');
}
function info() {
group = myDiagram.findNodeForKey("Alpha");
alert("Location (x,y) = ("+group.location.x+", "+group.location.y+")");
}
The location of the group is here, before move:
Sorry, but that’s not what I’m seeing. When I click the Info button before moving the group, the location is the middle of the light blue circle.
Could you please try to reproduce the problem with codepen, provide the steps to reproduce it, and explain how you’d like it to work?
Fine it work’s. Thank you!!!
So i move the topLeft-Corner of the ‘center’ circle to my position (here 200,200 - 50 is half of the circle)
group.move(new go.Point(200 - (group.location.x - group.actualBounds.x) + 50, 200 - (group.location.y - group.actualBounds.y) + 50));Okay i hope this is the last question:
When i have one member, then the group circle and member circle have the same position:
but i want this:
