How to make ports appear outside the selected node?

GoJS
1

See this example.

It has a makePort() method that is used to add connection ports to the top, bottom, right, and left of a Node.

It also has a nodeStyle() method that sets up various style attributes of each Node. Within nodeStyle() I have added “resizable: true” in order to make each Node resizable.

Problem 1:
The problem is that the resizable border interferes with the connection ports. Is there any way to hide the resize anchors so only the corner resizers are visible?

Problem 2:
I want to move the connection ports to be located a few pixels outside of the resizable border. I have tried to modify makePort() by adding a new go.Spot() and setting the offset. This moves the port away from the graphic in the middle, but the resizable border just gets bigger and still wraps itself around the ports.

Advice? Thanks.

2

You can do either or both of the solutions that you suggest.

For a custom resize Adornment, you can specify three properties on Part: Part.resizable, Part.resizeObjectName, and Part.resizeAdornmentTemplate:

    function nodeStyle() {
      return [
        // The Node.location comes from the "loc" property of the node data,
        // converted by the Point.parse static method.
        // If the Node.location is changed, it updates the "loc" property of the node data,
        // converting back using the Point.stringify static method.
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        {
          // the Node.location is at the center of each node
          locationSpot: go.Spot.Center,
          //isShadowed: true,
          //shadowColor: "#888",
          // handle mouse enter/leave events to show/hide the ports
          mouseEnter: function (e, obj) { showPorts(obj.part, true); },
          mouseLeave: function (e, obj) { showPorts(obj.part, false); },
          resizable: true,
          resizeObjectName: "BOX",
          resizeAdornmentTemplate:
            $(go.Adornment, "Spot",
              $(go.Placeholder),
              $(go.Shape, { alignment: go.Spot.TopLeft, desiredSize: new go.Size(8, 8), fill: "lightblue", stroke: "dodgerblue", cursor: "nw-resize" }),
              $(go.Shape, { alignment: go.Spot.TopRight, desiredSize: new go.Size(8, 8), fill: "lightblue", stroke: "dodgerblue", cursor: "ne-resize" }),
              $(go.Shape, { alignment: go.Spot.BottomRight, desiredSize: new go.Size(8, 8), fill: "lightblue", stroke: "dodgerblue", cursor: "se-resize" }),
              $(go.Shape, { alignment: go.Spot.BottomLeft, desiredSize: new go.Size(8, 8), fill: "lightblue", stroke: "dodgerblue", cursor: "sw-resize" })
            )
        }
      ];
    }

Note how Part.resizeObjectName needs to refer to the GraphObject that you want the user to resize, so in this case you need to give “BOX” as the name of the “Auto” Panel in each template. For example:

    myDiagram.nodeTemplateMap.add("",  // the default category
      $(go.Node, "Spot", nodeStyle(),
        // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
        $(go.Panel, "Auto",
          { name: "BOX" },
          $(go.Shape, "Rectangle",
            { fill: "#00A9C9", stroke: null },
            new go.Binding("figure", "figure")),
          $(go.TextBlock,
            . . .

To move the ports to be on the outside of the box, just change the makePort function to use the opposite Spot for the alignmentFocus:

                  alignment: spot, alignmentFocus: spot.opposite(),  // align the port on the main Shape

Because the nodes are then bigger, you’ll want to move them apart a bit. Also, you’ll want to change the showPorts function to use “gray” instead of “white” so that the ports can be seen against the white background.

3

Thank you for your reply :smile:

That seems to be working. Just need to play around with some of the spacing a bit.

Will write back if I have any difficulties.

4

Having difficulties to get the border to line up with the resize anchors. Might actually be better if I can figure out how to change the borders from gray to blue when selected instead of having the current blue box that shows up by default.

Also, how do I move the connection ports farther away from the node?

See this fiddle.

http://jsfiddle.net/pqqex7da/41/

Thanks

5

What border? Are you asking about the selection Adornment? If so, set Node.selectionObjectName to the same name as resizeObjectName. Read GoJS Selection -- Northwoods Software for more information.

Also, regarding resizing, GoJS Tools -- Northwoods Software has a section about resizing.

If you want to move the ports farther away from the box with the text, use slightly offset alignment Spots. Read GoJS Panels -- Northwoods Software, the section about the “Spot” Panel, for more explanation and examples.

6

See this fiddle:

I got the highlighting how I wanted it. Just trying to figure out how to get the ports moved farther away from the node.

Will look into GoJS Panels -- Northwoods Software as you recommended.

7

A post was split to a new topic: Node template port positioning