Custom drag and drop for group

GoJS
1

Hi,
I created a custom palette ,while dropping how can i find out that node is dropped inside the group or in canvas .

const drop = (event: React.DragEvent) => {

event.preventDefault();

let paletteValue = event.dataTransfer.getData('text');
/* 
  I called the some other function here.
  DROP IS WORKING FINE FOR CANVAS
   how can i find out that node is dropped inside the group or in canvas like event.aboveNode
*/

}

2

Maybe you want to provide Diagram.mouseDrop and Group.mouseDrop functions to perform at the time of drop. The Regrouping sample has examples of this.

3

ya , I did this

//Diagram.mouseDrop

      $(go.Diagram, "messageFlowDiv", {
       "animationManager.isEnabled": false,
       initialPosition: new go.Point(0, 0),
       mouseDrop: function (e) { finishDrop(e, null); },
      })


        // Group.mouseDrop

          diagram.groupTemplate = $(go.Group, "Auto",{
           mouseDrop: finishDrop,
           alignment: go.Spot.Top,
          }

and i consoled the function also

//function i consoled the value 



const finishDrop = (e, grp) => {
    console.log("finishDrop e", e)
    console.log("finishDrop grp", grp)
    console.log("grp", e.diagram.selection)
    console.log("boolean", e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true))
    var ok = (grp !== null
      ? grp.addMembers(grp.diagram.selection, true)
      : e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
    if (!ok) e.diagram.currentTool.doCancel();
  }

while dropping inside the group console.log didn’t shown any output.
after dropping inside the group ,then the node is moved out of the group it shows output like this

console.log("finishDrop e", e)
 finishDrop e, qe {B: Q, cv: I, nu: I, js: 0, fr: 0, …}
 console.log("finishDrop grp", grp)
finishDrop grp null
grp F {__gohashid: 690, s: true, Fb: {…}, Db: 1, Fa: mb, …}
console.log("grp", e.diagram.selection)
boolean true

while droping i need the group info like group.id ,there is any function like event.aboveNode

4

Are you using a GoJS Palette or some other form of palette? If it’s not a GoJS palette, maybe you’d be interested in the HTML Drag and Drop sample.

5

ya , i am not using GoJS palette , I referred HTML Drag and Drop sample and created custom palette.

From that custom palette drag and drop is working Fine ,while dropping the node in group i need some group info

6

You’ll need to add that to the “drop” handler. You can call myDiagram.findPartAt similar to the “dragover” handler and then determine if the part is a group.

I would suggest trying to use a GoJS Palette if you can as it should make your code much simpler.

7

after dropping the node i will call the api
so i just need that in drop handler like it is in group or in canvas

In Palette, i need to show only the name of the node,after dropping it show the node .

8

If you want your palette to just display some text, you could still use a GoJS palette and just use a different node template from the main diagram. This is covered in the intro page on Palettes.

9

okay, i will look in it.

there is any way to find the group info while dropping.
any example or any function

10

There are several ways, one is to use an “ExternalObjectsDropped” event listener

      myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
        {
          "undoManager.isEnabled": true,
          "ExternalObjectsDropped": function(e) {
            console.log(e.toString());
            console.log(e.subject.toString()); // this is the set of objects that have been dropped
            e.subject.each(function(obj) {
              console.log(obj.toString()); // each object
            })
          }
        });

Live example showing console output: https://codepen.io/simonsarris/pen/OJNZRNv?editors=1011

Another would be to use Group’s memberAdded and memberRemoved:

And possibly Diagram’s mouseDrop: Diagram | GoJS API

11

there is no output for the console while dropping for this code

“ExternalObjectsDropped”: function(e) {
console.log(e.toString());
console.log(e.subject.toString()); // this is the set of objects that have been dropped
e.subject.each(function(obj) {
console.log(obj.toString()); // each object
})
}\

Its not working for me

Diagram’s mouseDrop : Diagram | GoJS API

while dropping mouseDrop handler also not working ,i didn’t get a console value

while dragging only function is executed and i get the console value
myDiagram.mouseDrop = function(e) {
console.log(e)
}
console value = qe {B: Q, cv: I, nu: I, js: 0, fr: 0, …}

memberAdded : function(thisGroup: Group, newPart: Part): void | null
for thisGroup parameter i need a group info.

12

use e.toString() to see a better representation of GoJS objects.

This codepen shows a finishDrop that’s called on both the Diagram and Groups, and shows you what the group is and what Parts were dropped in the console: https://codepen.io/simonsarris/pen/OJNZRNv?editors=1011

Will that work as an example for what you’re trying to do?