Group addMembers not working

@cr3zi wrote:

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.PNG483x511 12.8 KB

What am I doing wrong?

Posts: 2

Participants: 2

Read full topic