Position the selected shape as aligned horizontally correctly

GoJS
1

The below image is horizontally aligned, but as per UI point of view, the dotted line on both side of block_Valve image in the below diagram is not aligned properly. The selected block is considering both image and label as a whole.

image
image696×171 21.3 KB

This is the case of Horizontal Align without Label, as per UI point of View it’s perfectly alligned

image

My expectation is that, I want perfectly horizontal aligned diagram with label.

Code Template

const template02 =
$(go.Node, ‘Auto’,
“Spot”,
{ locationSpot: go.Spot.Center },
new go.Binding(“location”, “Location”, go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding(“visible”, “visible”),
$(go.Panel, “Vertical”,
$(go.Panel, “Spot”,
new go.Binding(“angle”, “Orientation”),
$(go.Picture,
{
alignment: go.Spot.Center,
width: 55,
height: 55,
cursor: ‘pointer’,
},
new go.Binding(“flip”),
new go.Binding(“source”)),
// Ports
this.makePort($, ‘l’, go.Spot.Left, false, true, ‘Square’, ‘black’, Medium.Fluid, new go.Size(10, 10)),
this.makePort($, ‘r’, go.Spot.Right, true, false, ‘Square’, ‘black’, Medium.Fluid, new go.Size(10, 10)),
),
$(go.TextBlock,
{
alignment: go.Spot.BottomCenter,
alignmentFocus: go.Spot.Top,
editable: false,
wrap: go.TextBlock.WrapFit,
textAlign: “center”,
width: 100,

                        },
                        new go.Binding("text", "Text"),
                        new go.Binding("visible", "IsLabelVisible")),
                ),
        );
2

Automatic positioning is performed by a Layout. What is your Diagram.layout?

Try setting the name of the Picture and then set the Node.locationObjectName to that name.

3

we are using this type of diagram setup, and for the image rendering, we are Using SVG icons, can you please let me know where i can set the picture name and the Node.locationObjectName as per the format used?

Capture1
Capture11670×850 204 KB

4

Ah, there is no automatic layout, because nodes are positioned manually. OK, so set name: "ICON" on the Picture and set locationObjectName: "ICON" on the Node template.

5

Output as per the changes (the linked line shifted in upward direction from the Block Valve image to the source and sink, it’s still not aligned horizontal properly)

image
image687×551 28.9 KB

image

6

Were all three nodes moved manually, so as to get the effect of grid snapping? DraggingTool.isGridSnapEnabled

Or if you are loading from a model without having manually moved the nodes, do all three nodes have the same Y value for their data locations?

7

It’s without moving manually, and all the three equipment have their same value of Y-Axis.

Y-Axis value for the Sink

image
image1078×101 6.39 KB

Y-Axis value for the Block_Valve

image
image1106×97 6.86 KB

Y-Axis Value for the Source

image
image1078×86 6.35 KB

8

First, you might want to correct your Node template by correcting what type of Panel it is. Is it supposed to be an “Auto” Panel or a “Spot” Panel?

I think you are correctly setting Node.locationObjectName and that name on the Picture, so I cannot explain how you could get that behavior. Could you please show the whole node template in text rather than a screenshot? Maybe there’s something else going on in your template.

9

I am sharing the node template code for the Block_Valve in text.

const template02 =
                $(go.Node, 'Auto',
                    "Spot",
                    { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
                    new go.Binding("location", "Location", go.Point.parse).makeTwoWay(go.Point.stringify),
                    new go.Binding("visible", "visible"),
                    $(go.Panel, "Vertical",
                        $(go.Panel, "Spot",
                            new go.Binding("angle", "Orientation"),
                            $(go.Picture,
                                {
                                    alignment: go.Spot.Center,
                                    width: 55,
                                    height: 55,
                                    cursor: 'pointer',
                                    name: "ICON"
                                },
                                new go.Binding("flip"),
                                new go.Binding("source")),
                            // Ports
                            this.makePort($, 'l', go.Spot.Left, false, true, 'Square', 'black', Medium.Fluid, new go.Size(10, 10)),
                            this.makePort($, 'r', go.Spot.Right, true, false, 'Square', 'black', Medium.Fluid, new go.Size(10, 10)),
                        ),
                        
                        $(go.TextBlock,
                            {
                                alignment: go.Spot.BottomCenter,
                                alignmentFocus: go.Spot.Top,
                                editable: false,
                                wrap: go.TextBlock.WrapFit,
                                textAlign: "center",
                                width: 100,
                                
                                
                            
                            },
                            new go.Binding("text", "Text"),
                            new go.Binding("visible", "IsLabelVisible")),
                    ),
            );
10

I have edited your post so that the code is formatted.

You still haven’t fixed whether the Node is an “Auto” Panel or a “Spot” Panel. It cannot be both.

Are all three of those Nodes are using the same node template?
They all need to have Node.locationSpot set to go.Spot.Center and Node.locationObjectName set to the name of the Picture or whatever you use as the icon.

11

After setting Node.locationObjectName and name:“ICON” for each of three equipment templates it’s working as expected.

image

Thanks for your support.