Drag links from jquery palette to gojs diagram

GoJS
1

Hi there, i’m trying to drag different type of links from a jquery palette onto gojs diagram, much like this example: HTML Drag and Drop, but i need different type of links

my attempt was to add data to the jquery object, like so

$(".palette-links").draggable().data("type", "link");

then, following the example, instead where

var model = myDiagram.model;
    model.startTransaction("drop");
    model.addNodeData({
      text: text,
      loc: go.Point.stringify(q)
    });
    model.commitTransaction("drop");

i’ll do something like

var model = myDiagram.model;
    model.startTransaction("drop");
if ((ui.draggable).data("type") === 'link') {
    model.addLinkData();
} else {
    model.addNodeData({
    text: text,
    loc: go.Point.stringify(q)
    });
};
model.commitTransaction("drop");

i feel this approach is rather simple, and i am struggling to show the link on to the canvas, although i did add a basic linkTemplate to myDiagram.

2

Are you trying to add disconnected links to your diagram? Without any points, there won’t be any “link” to show, if its disconnected at both ends. So you need some data in model.addLinkData();

The link should have some points in order to be visible. Like:

myDiagram.model.addLinkData({ points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) });

This also assumes there’s a binding in the link template on points:

myDiagram.linkTemplate =
  $(go.Link,
    { relinkableFrom: true, relinkableTo: true, reshapable: true },
    new go.Binding("points").makeTwoWay(),
    ...
3

you’re awesome @simon, sorry for not making my question clear.

I also tried to drop the links to the mouse position by following the example , first,

this.myDiagram.linkTemplate = 
g(go.link,
    new go.Binding("location", "loc", go.Point.parse),
    ....);

then,

model.addLinkData(
    {
        ...
        loc: go.Point.stringify(q)
    });

But, dropped links still appear at the top left of the canvas why? more of the code here: gist:103af19ac293510e28cf · GitHub

4

That’s because link points are in document coordinates, not relative coordinates. The link’s points set the link’s location, you can’t set the location yourself.

So if you have a link going from (50,50) to (100,100), its location is going to be (about) (50,50).