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
GO(go.TextBlock,
{ alignment: go.Spot.Center, textAlign: "center", margin: 5, editable: true },
new go.Binding("text").makeTwoWay()),
{
doubleClick: function (e, node) {
var part = node.part;
internalHelper._openProcessStepModel({
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.