Rickey Rickey - 4 months ago 28
HTML Question

kineticjs contextmenu for a rectangle



var stage = new Kinetic.Stage({
container: 'container',
x: 10,
y: 10,
width: 800,
height: 200,
});

var layer = new Kinetic.Layer();


var Igpk = new Kinetic.Rect({
id:'igpk',
x: 148,
y: 32,
width: 62,
height: 118,
fill: 'gold',
stroke: 'black',
strokeWidth: 2,
opacity: 1,
draggable: false
});

var Igpktext = new Kinetic.Text({
x: 148 + 1,
y: 32,
text: 'iGPK',
fontSize: 15,
fontFamily: 'Calibri',
fill: 'black',

});

var IgpkGroup = new Kinetic.Group({});

IgpkGroup.add(Igpk);
IgpkGroup.add(Igpktext);

var Requestone = new Kinetic.Rect({
id: 'myRect',
x: 219,
y: 28,
width: 116,
height: 118,
fill: '#87cefa',
stroke: 'black',
strokeWidth: 2,
opacity: 1,
draggable: false
});


var Requestonetext = new Kinetic.Text({
x: 219 + 1,
y: 28,
text: 'Request One',
fontSize: 15,
fontFamily: 'Calibri',
fill: 'black',

});

var RequestoneGroup = new Kinetic.Group({});

RequestoneGroup.add(Requestone);
RequestoneGroup.add(Requestonetext);

RequestoneGroup.on('click', function() {

$.contextMenu({
selector: '#container',
items: $.contextMenu.fromMenu($('#html5menu1'))

});

});

IgpkGroup.on('click', function() {

$.contextMenu({
selector: '#container',
items: $.contextMenu.fromMenu($('#html5'))

});

});


layer.add(IgpkGroup);
layer.add(RequestoneGroup);
stage.add(layer);

css

.ui-menu {
width: 300px;
height: 500px;
}

<link href="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.css" rel="stylesheet"/>

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.ui.position.js"></script>
<script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.js"></script>

<div id="container"></div>

<menu id="html5menu1" type="context" class="showcase">
<menuitem label="ajay" onclick="window.open('http://google.com','_newtab');"></menuitem>
<menuitem label="vijay"></menuitem>
</menu>

<menu id="html5" type="context" class="show">
<menuitem label="ajay 56" onclick="window.open('http://google.com','_newtab');"></menuitem>
<menuitem label="vijay 1234"></menuitem>
</menu>





Here is the code that shows context menu for rectangle when you right click. But the problem here is every time when I click the rectangle that context menu get activated.
I have different context menu for different rectangle but I am facing a problem here. Kindly run the code and see the output.
the context menu work for different rectangle only when I refresh the page and then click. But again that particular context menu would be displayed.

Answer

Because we are dealing with showing multiple context menus on the same element (the #container) we need to destroy the context menu before we create another.

$.contextMenu('destroy', '#container');    

This doesn't fix everything. As you will see, the nature of the context menu does not allow it to change without first left-clicking to close it, then right clicking again on the other rectangle. I think it is because the context menu's event handling that prevents the event from propagating to the stage where KineticJS will catch it.

You can make it so clicking on the white stage destroys the menu, so you don't see the specific menu when right clicking on the stage. It all depends on what behavior you want, but the main point is, you need to destroy the menu :)

var stage = new Konva.Stage({
    container: 'container',
    x: 10,
    y: 10,
    width: 800,
    height: 200,
});

var layer = new Konva.Layer();


var Igpk = new Konva.Rect({
    id:'igpk',
    x: 148,
    y: 32,
    width: 62,
    height: 118,
    fill: 'gold',
    stroke: 'black',
    strokeWidth: 2,
    opacity: 1,
    draggable: false
});

var Igpktext = new Konva.Text({
    x: 148 + 1,
    y: 32,
    text: 'iGPK',
    fontSize: 15,
    fontFamily: 'Calibri',
    fill: 'black',
    
});

var IgpkGroup = new Konva.Group({});

IgpkGroup.add(Igpk);
IgpkGroup.add(Igpktext);

var Requestone = new Konva.Rect({
    id: 'myRect',
    x: 219,
    y: 28,
    width: 116,
    height: 118,
    fill: '#87cefa',
    stroke: 'black',
    strokeWidth: 2,
    opacity: 1,
    draggable: false
});


var Requestonetext = new Konva.Text({
    x: 219 + 1,
    y: 28,
    text: 'Request One',
    fontSize: 15,
    fontFamily: 'Calibri',
    fill: 'black',
    
});

var RequestoneGroup = new Konva.Group({});

RequestoneGroup.add(Requestone);
RequestoneGroup.add(Requestonetext); 

RequestoneGroup.on('click', function() {
    console.log("request");
    $.contextMenu('destroy', '#container');
    $.contextMenu({
        selector: '#container',
        items: {
            "RequestoneGroup": {
                name: "RequestoneGroup",
                icon: "edit"
            }
        }
    });
});

IgpkGroup.on('click', function() {
    console.log("IgpkGroup");
    $.contextMenu('destroy', '#container');
    $.contextMenu({
        selector: '#container',
        items: {
            "IgpkGroup": {
                name: "IgpkGroup",
                icon: "edit"
            }
        }
    });
});

layer.add(IgpkGroup);
layer.add(RequestoneGroup);
stage.add(layer);
css

.ui-menu {
            width: 300px;
            height: 500px;
         }
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.ui.position.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.3/jquery.contextMenu.min.js"></script>

<div id="container" class="tester"></div>

 <menu id="html5menu1" type="context" class="showcase">
    <menuitem label="ajay" onclick="window.open('http://google.com','_newtab');"></menuitem>
    <menuitem label="vijay"></menuitem>
    </menu>

 <menu id="html5" type="context" class="show">
    <menuitem label="ajay 56" onclick="window.open('http://google.com','_newtab');"></menuitem>
    <menuitem label="vijay 1234"></menuitem>
    </menu>

Comments