Hello
Since I am hitting a wall in this matter, I need your help for solving the following problem:
I got a node which contains a panel which contains an Image. The goal is to create a spinanimation on the image without changing the size of the panel. Refer to the image for better understanding:
The Object in the middle has the following structure:
var pumpTemplate =
$(go.Node, "Table",
{
locationObjectName: "BODY",
locationSpot: go.Spot.TopLeft,
layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
selectionObjectName: "BODY",
contextMenu: nodeMenuPorts,
resizable: true,
selectable: _.editMode,
resizeObjectName: "image",
},
$(go.Panel, "Auto",
{
row: 1, column: 1, name: "BODY",
},
$(go.Picture, {
source: "off.svg",
name: "image",
width: 100,
height: 100,
},
new go.Binding("angle", "", (data) => {
return data.controlSettings.rotation;
}),
new go.Binding("desiredSize", "size").makeTwoWay())
),
//Stuff below are the ports
$(go.Panel, "Vertical",
new go.Binding("itemArray", "leftArray"),
{
row: 1, column: 0,
itemTemplate:
$(go.Panel,
{
_side: "left", // internal property to make it easier to tell which side it's on
fromSpot: go.Spot.Left, toSpot: go.Spot.Left,
fromLinkable: true, toLinkable: true, cursor: "pointer",
contextMenu: portMenu
},
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(1, 0)
},
new go.Binding("desiredSize", "", (data) => {
return _.portsVisible ? portSize : new go.Size(0, 0);
}),
new go.Binding("fill", "", (data) => { return _.portsVisible ? data.portColor : "transparent"; }))
) // end itemTemplate
}
),
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "topArray"),
{
row: 0, column: 1,
itemTemplate:
$(go.Panel,
{
_side: "top",
fromSpot: go.Spot.Top, toSpot: go.Spot.Top,
fromLinkable: true, toLinkable: true, cursor: "pointer",
contextMenu: portMenu
},
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(0, 1)
},
new go.Binding("desiredSize", "", (data) => {
return _.portsVisible ? portSize : new go.Size(0, 0);
}),
new go.Binding("fill", "", (data) => { return _.portsVisible ? data.portColor : "transparent"; }))
)
}
),
$(go.Panel, "Vertical",
new go.Binding("itemArray", "rightArray"),
{
row: 1, column: 2,
itemTemplate:
$(go.Panel,
{
_side: "right",
fromSpot: go.Spot.Right, toSpot: go.Spot.Right,
fromLinkable: true, toLinkable: true, cursor: "pointer",
contextMenu: portMenu
},
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(1, 0)
},
new go.Binding("desiredSize", "", (data) => {
return _.portsVisible ? portSize : new go.Size(0, 0);
}),
new go.Binding("fill", "", (data) => { return _.portsVisible ? data.portColor : "transparent"; }))
)
}
),
$(go.Panel, "Horizontal",
new go.Binding("itemArray", "bottomArray"),
{
row: 2, column: 1,
itemTemplate:
$(go.Panel,
{
_side: "bottom",
fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom,
fromLinkable: true, toLinkable: true, cursor: "pointer",
contextMenu: portMenu
},
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(0, 1)
},
new go.Binding("desiredSize", "", (data) => {
return _.portsVisible ? portSize : new go.Size(0, 0);
}),
new go.Binding("fill", "", (data) => { return _.portsVisible ? data.portColor : "transparent"; }))
)
}
)
);
As you can see the structure has a table, containing multiple ports(red dots in top and bottom) and an auto panel(marked with number 5) in the middle. This auto panel then contains an image(marked with number 3) which has to rotate. Even though the image is round, it actually is a square (number 4) obviously.
My question now is: how can i configure the autopanel so that it does not change its size (the extra width and height indicated by 1 and 2) when its content is rotating? It is also important that the ports do not change position when rotating the image.
In case you need more information(video of the actual rotation) feel free to ask!
Edit: The location.spot.TopLeft is important for snapping to grid
