Group addMembers not working

GoJS
1

I’m trying drop my node from my palette to my diagram into a group and it isn’t being added. It’s being deleted right when I let go since my selectionDeleting event is being called.

The code

    private createDiagramTemplates() {
    //Node Templates
    //Question
    this.componentMap[CategoryType.Question] = QuestionComponent;
    this.diagramNodeTemplateMap.add(CategoryType.Question.toString(),
        this.$(go.Node, "Auto", {
                //contextClick: (e,obj)=>this.openModal(e,obj)
                contextMenu: this.contextMenuTemplate
            },
            this.$(go.Shape, "Rectangle", {
                fill: "white",
                stroke: "#5cc8c9"
            }),
            this.$(go.Panel, "Table", {
                    padding: new go.Margin(0, 7, 0, 7)
                },
                this.$(go.Panel, "Horizontal", {
                        row: 2,
                        column: 0
                    },
                    new go.Binding("itemArray", "detail", function(d) {
                        return d.udsQuestTreeItem;
                    }), {
                        itemTemplate: this.$(go.Panel, "Spot", {
                                _side: "right",
                                fromSpot: go.Spot.Bottom,
                                fromMaxLinks: 1,
                                fromLinkable: true,
                                cursor: "pointer",
                                background: "#5cc8c9",
                                margin: new go.Margin(0, 3),
                                padding: new go.Margin(3),
                                alignment: go.Spot.Bottom
                            },
                            new go.Binding("portId", "itemId", function(id) {
                                return String(id);
                            }),
                            this.$(go.TextBlock, {
                                    textAlign: "center",
                                    stroke: "white",
                                    angle: 90
                                },
                                new go.Binding("text", "itemId")
                            )
                        )
                    }
                ),
                this.$(go.Shape, {
                    width: 50,
                    height: 10,
                    portId: "In",
                    toSpot: go.Spot.Top,
                    toLinkable: true,
                    stroke: "#5cc8c9",
                    fill: "#5cc8c9",
                    row: 0,
                    column: 0,
                }),
                this.$(go.TextBlock, new go.Binding("text", "detail", function(d) {
                    return d.detailId;
                }), {
                    row: 1,
                    column: 0,
                    margin: new go.Margin(3, 0, 3, 0),
                    stroke: "black",
                    font: "bold 14pt serif"
                })
            )
        )
     ) //End Question Template

    //Page template
    this.componentMap[CategoryType.Page] = PageComponent;
    this.diagramGroupTemplateMap.add(CategoryType.Page.toString(),
        this.$(go.Group, "Auto", {
                background: "white",
                //mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
                //mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
                computesBoundsAfterDrag: true,
                handlesDragDropForMembers: true,
                mouseDrop: (e, grp) => {
                    this.bll.pageHandleDrop(e, grp)
                },
                contextMenu: this.contextMenuTemplate,
                layout: this.$(go.LayeredDigraphLayout, {
                    angle: 90
                })
            },
            new go.Binding("background", "isHighlighted", function(h) {
                return h ? "rgba(255,0,0,0.2)" : "white";
            }).ofObject(),
            this.$(go.Shape, "Rectangle", {
                fill: null,
                stroke: "#5cc8c9",
                strokeWidth: 2
            }),
            this.$(go.Panel, "Vertical",
                this.$(go.Panel, "Table", {
                        background: "#5cc8c9",
                        stretch: go.GraphObject.Fill,
                        minSize: new go.Size(100, NaN)
                    },
                    this.$(go.TextBlock, {
                            stroke: "black",
                            column: 0,
                            row: 0
                        },
                        new go.Binding("text", "detail", function(d: Page) {
                            return "Page ID: " + d.pageId
                        })
                    )
                ),
                this.$(go.Placeholder, {
                    padding: 15,
                    alignment: go.Spot.Center,
                    column: 0,
                    row: 1,
                })
            )
        )
    )
    //End Page Template
}
private createPaletteTemplates(){
    //Node Templates

    //Question 
    this.paletteNodeTemplateMap.add(CategoryType.Question.toString(),
        this.$(go.Node, "Auto", { movable: false },
            this.$(go.Shape, "Rectangle", {
            fill: "rgb(255,255,255)",
            stroke: "black"
            }),
            this.$(go.Panel, "Table", {
            padding: new go.Margin(7)
            },
            this.$(go.TextBlock, "Question", {
                row: 0,
                column: 0,
                stroke: "black",
                font: "bold 14pt serif"
            })
            )
        )
    )
    //End Question
    //End Node Templates

    //Group Templates
    //Page Template
    this.paletteGroupTemplateMap.add(CategoryType.Page.toString(),
      this.$(go.Group,"Auto", { 
        movable: false 
      },
        this.$(go.Shape,"Rectangle", {
            fill:"rgb(255,255,255)",
            stroke: "black"
        }),
        this.$(go.Panel,"Table",{
          padding: new go.Margin(7)
        },
          this.$(go.TextBlock, "Page",{
            row: 0,
            column: 0,
            stroke: "black",
            font: "bold 14pt serif"
          })
        )
      )
    )
    //End Page Template
    //End Group Templates
}
 pageHandleDrop(e,grp){
        var node = e.diagram.selection.first();
        //Just moving item arround
        if(node.data.group === grp.data.key){
               return; 
        }
 var ok = grp.addMembers(grp.diagram.selection, true); // <----this isn't working
}

Capture
Capture.PNG483×511 12.8 KB

What am I doing wrong?

2

I just tried your Group template and encountered no problems when dragging from a Palette into an instance of that Group.

Are you using go-debug.js and checking the console window for warnings or error messages?

3

I’m using go-debug but nothing is coming up in the console.

I find it strange that you don’t get the same issue that I’m having. I’ll post my diagram code here you might be able to have some insight.

this.diagram = diagramHelper.diagram;
this.diagram.nodeTemplateMap = templateHelper.diagramNodeTemplateMap;
this.diagram.groupTemplateMap = templateHelper.diagramGroupTemplateMap;
this.diagram.allowDrop = true;
this.diagram.layout = this.$(go.TreeLayout, { angle: 90 });
this.diagram.addDiagramListener("ExternalObjectsDropped",e => this.diagramDropped(e))
this.diagram.addDiagramListener("LinkDrawn",e => this.linkDrawn(e))
this.diagram.addDiagramListener("LinkRelinked",e => this.linkRelinked(e))
this.diagram.addDiagramListener("SelectionDeleting",e => this.selectionDeleting(e))


this.palette.model.nodeDataArray = [
  { category: CategoryType.Page.toString(),detail:{pageId:""},isGroup:true },
  { category: CategoryType.Question.toString() ,detail:{udsQuestTreeItem:null, detailId:null} }
 ]
4

What does this function do?

5

Hey Walter,

I found the issue thank you. I overlooked the fact that the externalobjectsdropped gets called and I had this code running. I had to comment out a section that was causing the issue.

How can I adjust it so only group nodes are allowed directly on the diagram and not nodes. I wan’t nodes to only be allowed to be dropped into groups and not directly into the diagram.

Thanks so much for your help!

diagramDropped(e){
var item = e.subject.first();
if(this.treeSelected == null)
{
  e.diagram.commandHandler.deleteSelection();
  return;
}
if(item.data.category === CategoryType.Page.toString()){
  var page = new Page();
  page.treeID = this.treeSelected.treeId;
  page.id = "2";

  this.pageService.create(page).subscribe(
    data=>{
      this.diagramHelper.updateModel(item.data,"detail",data);
    },
    error=>{
      e.diagram.commandHandler.deleteSelection();
    }
  );
}else{
 // e.diagram.commandHandler.deleteSelection(); <-- THIS WAS CAUSING THE ISSUE!
}
}
6

Well, you want to provide behavior for Diagram.mouseDrop. Perhaps something like:

$(go.Diagram, . . .,
  { . . .,
    mouseDragOver: function(e) {
        myDiagram.currentCursor = "not-allowed";
    },
    mouseDrop: function(e) {
        e.diagram.currentTool.doCancel();
    }
  })

Note that I also added a Diagram.mouseDragOver event handler so that there is some feedback to the user that a drop in the background of the diagram (not over any part) will fail.

1 Like