Dragging links from node

GoJS
1

Following is my node template -

gojsDiagram.nodeTemplate =
            $$(go.Node, "Vertical",
                { opacity : 0.5 /*, background:"#c9c9c9"*/ },
                { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornment }, // Node is selectable but the rectanglar shape is not visible
                { contextMenu: myContextMenu }, // to make node start and accept link drag drop
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),// stores the location of node, and renders at the same postion if the model is loaded
               
                $$(go.Panel, "Auto",
                    { background: "white" },
                    { portId: "" },  // this whole panel acts as the only port for the node
                
                    $$(go.Shape,  // the border
                        { fill: "transparent", stroke: "transparent"/*, strokeWidth:0.3*/ }),
                 
                    $$(go.Panel, "Vertical",
                        $$(go.Picture,
                        {
                            source: "icons/table.png",
                            width: 40,
                            height: 40,
                            margin: 2,
                            background: "transparent",
                            cursor: "pointer",
                            alignment: go.Spot.Center,
                            imageStretch: go.GraphObject.UniformToFill
                        },
                        new go.Binding("source", "imgPath"))
                    ),// end Vertical Panel
                
                    // to display predicate badge
                    $$(go.Shape, "circle",
                        {
                            alignment: go.Spot.TopRight,
                            strokeWidth : 0.3,
                            fill: "yellow",
                            width: 14,
                            height: 14,
                            visible: true,
                            toolTip:
                                $$(go.Adornment, "Auto",
                                   $$(go.Shape, { fill: "transparent", strokeWidth : 0 },
                                      new go.Binding("visible", "predicate", function(i) { return !!i })),
                                   $$(go.TextBlock, { margin: 4 },
                                      new go.Binding("text", "predicate"))
                                )
                        },
                        new go.Binding("visible", "predicate", function(i) { return !!i }))
                ),  // end Auto Panel
               
                // node name
                $$(go.TextBlock, { margin: 4 },
                new go.Binding("text", "id"))
            );

Now I am trying to use fromLinkable: true, toLinkable: true property so that I can add links between nodes, but when I use this property in my Auto panel, I loose the node draggable feature ( I mean I cannot move the node ).

What am I missing ? Can you please point me in a direction ?

2

That “Auto” Panel is only the first element of the “Vertical” Panel, isn’t it? If so, the user should be able to drag the node by dragging the other objects of the node. To be more precise, not those objects for which you set fromLinkable or toLinkable to true or (if the object is a Panel) for elements within those.

If you want some objects within a linkable port to be draggable, set fromLinkable and toLinkable to false on them, to stop “inheriting” the “…Linkable” property from the containing Panel.

3

Thanks Walter, it worked like a charm. Silly me for not trying this basic case.
A small change in cursor value of node greatly helped me to identify the panel and the image panel.

Is there some other way to make it more clear that from here one can drag the node and from here one can I add a link ?

4

Traditionally, setting the GraphObject.cursor achieves that, although it doesn’t help for touch devices. I don’t know what else you would want. I would think you would not want a large sign saying “DRAG ME” or “DRAW NEW LINK FROM ME” :-).

When a node is selected, some apps like to show buttons that make explicitly visible the user’s ability to do various commands or actions. See for example:

Some apps like to show such buttons all the time, so they add them to the node template. But when there are too many, I think that clutters up the diagram unnecessarily. Still, some examples:

5

Thanks Walter for your quick reply.

For now I will go with the cursor approach, and later if such requirement arises will follow your prompt helpful link.

Thanks again.