Drop onto link

[fw.matt]

Hi @walter I’ve been trying to implement this with Gojs, but need to ask for a few pointers I’m afraid.

Here is my setup:

When I add the second transparent Shape to my link I get the following:

My code is as follows:-

  myDiagram.linkTemplate = $(go.Link,
      {
        routing: go.Link.AvoidsNodes,
        curve: go.Link.JumpOver,
        corner: 5,
        toShortLength: 4,
        selectable: false,
        layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved,
        mouseDragEnter: function(e, link) { link.isHighlighted = true; },
        mouseDragLeave: function(e, link) { link.isHighlighted = false; },
        mouseDrop: this.dropOntoLink.bind(this)
      },
      $(go.Shape,
        { stroke: "rgba(63,63,63,0.0)", strokeWidth: 10 }),
      $(go.Shape, [
        { stroke: "rgb(63,63,63)", strokeWidth: 2 },
        new go.Binding("stroke", "isHighlighted", function(h) { return h ? "chartreuse" : "rgb(63,63,63)"; }).ofObject(),
        new go.Binding("strokeWidth", "isHighlighted", function(h) { return h ? 4 : 2; }).ofObject()
      ]),
      $(go.Shape,
        { toArrow: "standard", stroke: null, fill: "black" }),
  );

Thanks for any help you can give.
Matt

[walter]

The second Shape is your label, yes?

If you do not specify a geometry or figure, the shape defaults to a Rectangle.

If you do not specify or constrain the size, it takes the size 100x100, just to make it obvious.

[fw.matt]

Hi, thanks for the reply. I’ve enclosed a full listing for my link template.

I added the first “Rectangle” after reading your previous comment, setting the fill to null. However, this seems to cause the second Shape to default to 100x100 size. The behaviour seems a bit strange to me as without the first Rectangle, the second rectangle fits perfectly to the link arrow.

Matt

[walter]

Unless you set GraphObject.isPanelMain to true on another Shape, the Link will take the first Shape element as the Shape to use for the Link.path. So the order does matter (unless you set isPanelMain).