Linking Groups without Ports

Hi All,

I have a group called Task that can store nodes. I would like to be able to link Tasks without using ports. Before I got the grouping part of Tasks working the linking functionality worked.

I’m guessing the linking still works, the issue is there is no point in the diagram element ‘Task’ to indicate (with the ‘glove cursor/pointer’?) to say that a user wants to start a link from the element or end a link on the element. The entire Task group graphical parts have been assigned to moving the group around the diagram or used for grouping node. I’m guessing the best solution is to use the textblock area in the element as the only place to allow movement of the element and the rest of the element for the link in/out. Or vice versa.

Had hoped there might be moveObjectName or linkObjectName.


Also tried adding fromLinkable: <span =“s1” style=“line-height: 1.4;”>true, toLinkable: <span =“s1” style=“line-height: 1.4;”>true to the Shape/TextBlock/Placeholder but no luck.
<span =“s1” style=“line-height: 1.4;”>

<span =“s1” style=“line-height: 1.4;”>Any advice appreciated,
<span =“s1” style=“line-height: 1.4;”>

Z

myDiagram.groupTemplateMap.add("Task",

$(go.Group, go.Panel.Auto,

{

movable: true, copyable: false, deletable: true, // can move, can be deleted, avoidable???

avoidable: false, //fromLinkable: true, toLinkable: true,

selectionObjectName: "SHAPE", // selecting a lane causes the body of the lane to be highlit, not the label

//moveObjectName: "TEXT",

//linkObjectName: "TEXT",

//resizable: true, resizeObjectName: "SHAPE", // the custom resizeAdornmentTemplate only permits two kinds of resizing

layout: $(go.LayeredDigraphLayout, // automatically lay out the lane's subgraph

{ direction: HORIZONTAL ? 50 : 50, columnSpacing: 1, layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource }),

computesBoundsAfterDrag: true, // needed to prevent recomputing Group.placeholder bounds too soon

computesBoundsIncludingLinks: false,

computesBoundsIncludingLocation: true,

mouseDrop: function (e, grp) { // dropping a copy of some Nodes and Links onto this Group adds them to this Group

if (!e.shift && !e.control) return; // cannot change groups with an unmodified drag-and-drop

var ok = grp.addMembers(grp.diagram.selection, true);

if (!ok) grp.diagram.currentTool.doCancel();

},

computesBoundsAfterDrag: true

},

$(go.Panel, "Auto", // the lane consisting of a background Shape and a Placeholder representing the subgraph

$(go.Shape, "RoundedRectangle",

{minSize: new go.Size(100, 100), name: "SHAPE", fill: "white", maxSize: new go.Size(100, 200), fromLinkable: true, toLinkable: true},

new go.Binding("fill", "color")),

$(go.TextBlock, { name: "TEXT", margin: 1, alignment: go.Spot.Top, fromLinkable: true, toLinkable: true }, //margin - how far from the top

new go.Binding("text", "key")),

$(go.Placeholder,

{ padding: 15, alignment: go.Spot.TopLeft, fromLinkable: true, toLinkable: true })

) // end Auto Panel

// limit dragging of Nodes to stay within the containing Group, defined above - redo with out error

));

All Links necessarily connect with Nodes at “port” elements.
Ports are declared when you set or bind GraphObject.portId to a non-null value.
However, the whole Node or Group can act as the default port element, if you don’t declare particular GraphObject elements as the port(s).
You need to set GraphObject.from… and GraphObject.to… properties on those port element(s) in order to control the appearance and behavior of links and linking.

So, yes you need to decide which objects the user can mouse-down-and-drag in order to start drawing a new link or start dragging the node or whatever.

If you want to treat the whole Group as the port element, then set fromLinkable and toLinkable to true on the Group, and set those to false on those elements within the Group panel that you want to allow the user to grab for selecting and dragging.

Brilliant, thanks. Easiest solution was to set the entire element to allow linking and set the TextBlock as the point to allow it be moved:

<p =“p1”>$(go.TextBlock, { name: <span =“s1”>“TEXT”, margin: <span =“s2”>1, alignment: go.Spot.Top, fromLinkable: <span =“s2”>false, toLinkable:<span =“s2”>false }, <p =“p1”><span =“s4”> <span =“Apple-tab-span”><span =“Apple-tab-span”><span =“s5”>new go.Binding(<span =“s1”>“text”, <span =“s1”>“key”)),<p =“p1”>Z