Dragging node directly to flowchart node

GoJS
1

I have two question to ask

  1. When ever i drag and drop any node in canvas , node automatically goes down to some position (See below image).
    It should drop on my mouse cursor position on release.

b.gif1600×900 1.3 MB

  1. Is it possible that node get auto linked on doping that node directly on any link

a.gif1600×900 1.26 MB

2

  1. It’s the Diagram.layout that is automatically arranging all of the nodes whenever you add or remove a node or a link. GoJS Layouts -- Northwoods Software

  2. Flowgrammer or Org Chart Editor. Basically, implement GraphObject.mouseDrop

3
  1. I tried setting Layout.isInitial and Layout.isOngoing to false but still dropped nodes are auto arranging.
4

Layout.isOngoing is what you want to set to false.

I just tried it, by making a copy of the Flowgrammer sample, setting isOngoing: false on the LayeredDigraphLayout that the Diagram uses, and commenting out the “ExternalObjectsDropped” DiagramEvent listener that deletes nodes dropped in the background of the diagram. It worked just as I believe you would expect.

5

Hi Walter,

As you can see in second video we are dropping the node from jstree.Hence mouseDrop is not get fired instead dnd_move.vakata jstree event fired.

Issue:As a result dragged node is not get attached on desired link.Actually mouseDrop event is only firing only when i dropping any node from canvas to link.

6

Sorry, but I could not tell that you were dragging from a jsTree rather than from a GoJS Diagram. So you are correct – there are no built-in events in the GoJS API for jQuery drag-and-drop events. You will need to implement that functionality yourself. See for example HTML Drag and Drop

7

Hi Walter,
As you can see we have achieved that thing.I used mouseEnter event in which i hold the link information into local variable and empty that variable on mouseLeave.
Hence after adding that node on canvas i explicitly called mousedrop event by passing local variable information.

Now i want is there any way to highlight the link until any node is drag over it.

Thanks

8

In your over event you’ll need to call Diagram.findPartAt after converting the mouse point to document coordinates. If you find a Node or a Link, you might want to highlight it: GoJS Highlighting -- Northwoods Software

9

If you mean this

mouseOver: function (e, link) {
var point = go.Point.parse(e.event.x + " " + e.event.y);
console.log("part find " + $scope.myDiagram.findPartAt(point, true));
}

Issue:$scope.myDiagram.findPartAt(point, true) every time it returns null.

10

You need to convert the point into document coordinates, just as the jQueryDragDrop sample does.
Convert the point into the HTMLDivElement’s local coordinate system (i.e. in the viewport) and then call Diagram | GoJS API.

11

Hi walter,

So the problem is ,To fire mouse enter event on any link, i have to drop my mouse cursor on that link. Now what i want my mouse enter event get fire even if i take my mouse cursor outer html ie. rectangular box (node) you can see in above image over the link.

12

I don’t understand what the problem is. If you can get the mouse point in the diagram’s DIV cooordinates, you can convert it into document coordinates by calling transformViewToDoc and then call Diagram.findPartAt. If you find a Link (or a Node?) you can do whatever you want.

13

4bcil-bvme0.gif1174×670 1.92 MB

Please see the video i am sharing in which node is auto linked when mouse pointer is exactly on the link.

But second time when i dragged the node when mouse pointer was not on the link it could not able to link.

so is there any way to link the node automatically whenever there any part present on Link.

14

You can call Diagram.findObjectsIn to find all objects within a rectangular area in document coordinates.