How to get ports close to the body?

@3q wrote:

image.png707x398 1.36 KB

Q1：The length of text causes these ports to leave the body.I want these ports close to the body.
My codes:

        var portSizeV = new go.Size(11, 4);
        var portSizeH = new go.Size(4, 11);

        var gnTemplate =
        g_(go.Node, "Table",
            { 
                locationObjectName: "BODY",
                locationSpot: go.Spot.Center,
                selectionObjectName: "BODY",
                rotatable: true, 
                contextMenu: nodeMenu
            },
            allBing()[0].idBing,
            allBing()[0].graphidBing,
            allBing()[0].isincBing,
            allBing()[0].angleBing,
            allBing()[0].zorderBing,
            allBing()[0].locBing,

            // the body Panel-----Shape+TextBlock
            g_(go.Panel, "Auto",
                { 
                    row: 1, 
                    column: 1, 
                    name: "BODY",
                    stretch: go.GraphObject.Fill 
                },
                g_(go.Shape, "Rectangle",
                    { 
                        fill: "transparent", 
                        stroke: "rgba(255,0,0,1)",
                        strokeWidth: 4,
                        minSize: new go.Size(88, 88) 
                    },
                    new go.Binding("background","isHighlighted",function(h) {
                        return h ? "rgba(255,0,0,0.1)" : "transparent";
                    }).ofObject(),
                    allBing()[0].colorBing,
                    allBing()[0].thicknessBing
                ),
                g_(go.TextBlock,
                    { 
                        margin: 10, 
                        textAlign: "center",
                        font: "bold 10pt  Segoe UI,sans-serif",
                        stroke: "black", 
                        editable: true 
                    },
                    allBing()[0].textColorBing,
                    allBing()[0].fontBing,
                    allBing()[0].textBing
                )
            ),  // end Auto Panel body

            // the left Panel
            g_(go.Panel, "Position",
                allBing()[0].leftArrayBing,
                { 
                    row: 1, 
                    column: 0,
                    itemTemplate:
                    g_(go.Panel,"Position",
                        allBing()[0].portLocBing,
                        g_(go.TextBlock, 
                            {
                                editable: true,
                                angle:0,
                                font: "bold 3pt serif"
                            },
                            allBing()[0].portNameBing
                        ),
                        g_(go.TextBlock,
                            {
                                editable: false,
                                stroke:"transparent",
                                font: "bold 0pt serif"
                            },
                            allBing()[0].portNodeidBing
                        ),
                        g_(go.Shape, "Rectangle",
                            {   
                                isGeometryPositioned:true,
                                position:new go.Point(50,0),
                                contextMenu: portMenu,
                                stroke: null, 
                                strokeWidth: 0,
                                desiredSize: portSizeV,     
                                _side: "left",  // 内部属性可以更容易地分辨出它在哪一边
                                // fromLinkableSelfNode:true,
                                // toLinkableSelfNode:true,
                                portId:"",
                                fromSpot: go.Spot.Left, 
                                toSpot: go.Spot.Left,
                                fromLinkable: true, 
                                toLinkable: true, 
                                cursor: "pointer" 
                            },
                            allBing()[0].portIdBing,
                            allBing()[0].portFillBing
                        )
                    ) // end itemTemplate
                }
            ), // end Vertical(垂直) Panel left

            // the top Panel
            g_(go.Panel, "Position",
                allBing()[0].topArrayBing,
                { 
                    row: 0, 
                    column: 1,
                    itemTemplate:
                    g_(go.Panel,"Position",
                        allBing()[0].portLocBing,
                        g_(go.TextBlock, 
                            {
                                editable: true,
                                angle:-90,
                                font: "bold 3pt serif"
                            },
                            allBing()[0].portNameBing
                        ),
                        g_(go.TextBlock,
                            {
                                editable: false,
                                stroke:"transparent",
                                font: "bold 0pt serif"
                            },
                            allBing()[0].portNodeidBing
                        ),
                        g_(go.Shape, "Rectangle",
                            {   
                                isGeometryPositioned:true,
                                position:new go.Point(0,50),
                                contextMenu: portMenu,
                                stroke: null, 
                                strokeWidth: 0,
                                desiredSize: portSizeH,
                                _side: "top",
                                //alignmentFocus: go.Spot.TopLeft,
                                // fromLinkableSelfNode:true,
                                // toLinkableSelfNode:true,
                                portId:"",
                                fromSpot: go.Spot.Top, 
                                toSpot: go.Spot.Top,
                                fromLinkable: true, 
                                toLinkable: true, 
                                cursor: "pointer" 
                            },
                            allBing()[0].portIdBing,
                            allBing()[0].portFillBing
                        )
                    )  // end itemTemplate
                }
            ),  // end Horizontal(水平) Panel top

            // the right Panel
            g_(go.Panel, "Position",
                allBing()[0].rightArrayBing,
                { 
                    row: 1, 
                    column: 2,
                    itemTemplate:
                    g_(go.Panel,"Position",
                        allBing()[0].portLocBing,
                        g_(go.TextBlock, 
                            {
                                editable: true,
                                text:"333",
                                angle:0,
                                font: "bold 3pt serif"
                            },
                            allBing()[0].portNameBing
                        ),
                        g_(go.TextBlock,
                            {
                                editable: false,
                                stroke:"transparent",
                                font: "bold 0pt serif"
                            },
                            allBing()[0].portNodeidBing
                        ),
                        g_(go.Shape, "Rectangle",
                            { 
                                isGeometryPositioned:true,
                                position:new go.Point(-50,0),
                                contextMenu: portMenu,
                                stroke: null, 
                                strokeWidth: 0,
                                desiredSize: portSizeV,
                                _side: "right",
                                // fromLinkableSelfNode:true,
                                // toLinkableSelfNode:true,
                                portId:"",
                                fromSpot: go.Spot.Right, 
                                toSpot: go.Spot.Right,
                                fromLinkable: true, 
                                toLinkable: true, 
                                cursor: "pointer" 
                            },
                            allBing()[0].portIdBing,
                            allBing()[0].portFillBing
                        )
                    )  // end itemTemplate
                }
            ),  // end Vertical Panel right

            // the bottom Panel
            g_(go.Panel, "Position",
                allBing()[0].bottomArrayBing,
                { 
                    row: 2, 
                    column: 1,// 第2行，第1列，
                    itemTemplate:
                    g_(go.Panel,"Position",
                        allBing()[0].portLocBing,
                        g_(go.TextBlock,
                            {
                                editable: true,
                                angle:90,
                                font: "bold 3pt serif"
                            },
                            allBing()[0].portNameBing
                        ),
                        g_(go.TextBlock,
                            {
                                editable: false,
                                stroke:"transparent",
                                font: "bold 0pt serif"
                            },
                            allBing()[0].portNodeidBing
                        ),
                        g_(go.Shape, "Rectangle",
                            { 
                                isGeometryPositioned:true,
                                position:new go.Point(0,-50),
                                contextMenu: portMenu,
                                stroke: null, 
                                strokeWidth: 0,
                                desiredSize: portSizeH,
                                _side: "bottom",
                                // fromLinkableSelfNode:true,
                                // toLinkableSelfNode:true,
                                portId:"",
                                fromSpot: go.Spot.Bottom, 
                                toSpot: go.Spot.Bottom,
                                fromLinkable: true, 
                                toLinkable: true, 
                                cursor: "pointer"
                            },
                            allBing()[0].portIdBing,
                            allBing()[0].portFillBing
                        )
                    )  // end itemTemplate
                }
            )  // end Horizontal Panel bottom
        
        );  // end Node

Posts: 1

Participants: 1

Read full topic