Search code examples
jquery-uijquery-pluginsdraw2d-js

I can't close jQuery-ContextMenu using Draw2D touch


I'm using the JS GraphLib Draw2D and on onContextMenu event I append the jQuery-Menu and it appears but doesn't close!

When I set autoHide or events I get the Uncaught RangeError: Maximum call stack size exceeded.

Code:

var LabelRectangle = draw2d.shape.basic.Rectangle.extend({

init: function () {
    this._super(200, 30);

    // Create any Draw2D figure as decoration for the connection
    //
    this.label = new draw2d.shape.basic.Label("A new Label");
    this.label.setColor("#EEC422");
    this.label.setFontColor("#0d0d0d");
    this.label.setBold = true;
    this.label.setFontFamily("Arial");
    this.label.setFontSize(14);
    this.label.setBackgroundColor("#EEC422");
    this.setBackgroundColor("#EEC422");
    this.createPort("output");


    // add the new decoration to the connection with a position locator.
    //
    this.addFigure(this.label, new draw2d.layout.locator.CenterLocator(this));

    this.label.installEditor(new draw2d.ui.LabelInplaceEditor());
},
onContextMenu: function (x, y) {
            var shape = this.shape[0];
            $(shape).attr('id', this.getId());
            var id = "#" + $(shape).attr('id');
            $.contextMenu({
                selector: id,
                autoHide: true,
                events:
                                    {
                                        hide: function () {
                                            $.contextMenu('destroy');
                                        }
                                    },
                callback: $.proxy(function (key, options) {
                    switch (key) {
                        case "red":
                            this.setColor("ff0000");
                            break;
                        case "green":
                            this.setColor("00ff00");
                            break;
                        case "blue":
                            this.setColor("0000ff");
                            break;
                        case "delete":
                           //  without undo/redo support
                           //  this.getCanvas().removeFigure(this);

                           //  with undo/redo support
                            var cmd = new draw2d.command.CommandDelete(this);
                            this.getCanvas().getCommandStack().execute(cmd);

                        default:
                            break;
                    }

                }, this),
                x: x,
                y: y,
                items:
                        {
                            "red": { name: "Red" }, // callback: function () { return true; } },
                            "green": { name: "Green" },
                            "blue": { name: "Blue" },
                            "delete": { name: "Delete" }
                        }
            });
}

});


Solution

  • I removed a reference to bootstrap library and works well now.