Gojs between moving a node and creating a link

can we expand the drag drop area?

we can only move from the text field to the start node

I’m guessing that you have set or bound fromLinkable and/or toLinkable to true on the Shape. So a mouse-down anywhere within the shape will start the LinkingTool.

I suggest that you add a smaller transparent Shape in front of the main Shape. As long as fromLinkable is only on the bigger main Shape, a mouse-down or mouse-drag on the smaller transparent Shape will behave the same way that such an event does on the TextBlock.

If the cursor is set on the same object that is fromLinkable, then the user will get feedback when the mouse is over the area of the main Shape that would start drawing a new link, and not when over the smaller transparent Shape.

Do you have a sample code?
how to edit it?

        var eventNodeTemplate =
            GO(go.Node, "Vertical",
                    locationObjectName: "SHAPE",
                    locationSpot: go.Spot.Center,
                    toolTip: tooltiptemplate
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                // move a selected part into the Foreground layer, so it isn't obscured by any non-selected parts
                new go.Binding("layerName", "isSelected", function (s) { return s ? "Foreground" : ""; }).ofObject(),
                // can be resided according to the user's desires
                { resizable: false, resizeObjectName: "SHAPE" },
                GO(go.Panel, "Spot",
                    GO(go.Shape, "Circle",  // Outer circle
                            strokeWidth: 1,
                            name: "SHAPE",
                            desiredSize: new go.Size(EventNodeSize, EventNodeSize),
                            portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
                            fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide
                        // allows the color to be determined by the node data
                        new go.Binding("fill", "eventDimension", function (s) { return (s === 8) ? EventEndOuterFillColor : EventBackgroundColor; }),
                        new go.Binding("strokeWidth", "eventDimension", function (s) { return s === 8 ? EventNodeStrokeWidthIsEnd : 1; }),
                        new go.Binding("stroke", "eventDimension", nodeEventDimensionStrokeColorConverter),
                        new go.Binding("strokeDashArray", "eventDimension", function (s) { return (s === 3 || s === 6) ? [4, 2] : null; }),
                        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
                    ),  // end main shape
                    GO(go.Shape, "Circle",  // Inner circle
                        { alignment: go.Spot.Center, desiredSize: new go.Size(EventNodeInnerSize, EventNodeInnerSize), fill: null },
                        new go.Binding("stroke", "eventDimension", nodeEventDimensionStrokeColorConverter),
                        new go.Binding("strokeDashArray", "eventDimension", function (s) { return (s === 3 || s === 6) ? [4, 2] : null; }), // dashes for non-interrupting
                        new go.Binding("visible", "eventDimension", function (s) { return s > 3 && s <= 7; }) // inner  only visible for 4 thru 7
                    GO(go.Shape, "NotAllowed",
                        { alignment: go.Spot.Center, desiredSize: new go.Size(EventNodeSymbolSize, EventNodeSymbolSize), stroke: "black" },
                        new go.Binding("figure", "eventType", nodeEventTypeConverter),
                        new go.Binding("fill", "eventDimension", nodeEventDimensionSymbolFillConverter)
                ),  // end Auto Panel
                    { alignment: go.Spot.Center, textAlign: "center", margin: 5, editable: true },
                    new go.Binding("text").makeTwoWay()),
                    doubleClick: function (e, node) {
                        var part = node.part;
                            parameters: args.parameters,
                            processData: args.processData,
                            toolboxItems: args.toolboxItems,
                            readOnly: args.readOnly,
                            part: part,

Oh, you already have an inner circle Shape. But instead of changing its visible property via a Binding, just change its opacity to be either 1.0 or 0.0.

Making some object not visible is similar to removing it from the panel – as if it weren’t there at all. But you do want it to be there to intercept mouse events, even though it should be completely transparent. The latter you can get by setting or binding opacity to 0.0.