diff --git a/README.md b/README.md index d7c83fa6..26655582 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ let defaults = { enabled: true // whether the command is selectable } */ - ], // function( ele ){ return [ /*...*/ ] }, // example function for commands + ], // function( ele ){ return [ /*...*/ ] }, // a function that returns commands or a promise of commands fillColor: 'rgba(0, 0, 0, 0.75)', // the background colour of the menu activeFillColor: 'rgba(1, 105, 217, 0.75)', // the colour used to indicate the selected command activePadding: 20, // additional size in pixels for the active command diff --git a/src/cxtmenu.js b/src/cxtmenu.js index 47f25308..15bacb67 100644 --- a/src/cxtmenu.js +++ b/src/cxtmenu.js @@ -372,61 +372,73 @@ let cxtmenu = function(params){ } if( typeof options.commands === 'function' ){ - commands = options.commands(target); + const res = options.commands(target); + if( res.then ){ + res.then(_commands => { + commands = _commands; + openMenu(); + }) + } else { + commands = res; + openMenu(); + } } else { commands = options.commands; + openMenu(); } - if( !commands || commands.length === 0 ){ return; } + function openMenu(){ + if( !commands || commands.length === 0 ){ return; } - zoomEnabled = cy.userZoomingEnabled(); - cy.userZoomingEnabled( false ); + zoomEnabled = cy.userZoomingEnabled(); + cy.userZoomingEnabled( false ); - panEnabled = cy.userPanningEnabled(); - cy.userPanningEnabled( false ); + panEnabled = cy.userPanningEnabled(); + cy.userPanningEnabled( false ); - boxEnabled = cy.boxSelectionEnabled(); - cy.boxSelectionEnabled( false ); + boxEnabled = cy.boxSelectionEnabled(); + cy.boxSelectionEnabled( false ); - grabbable = target.grabbable && target.grabbable(); - if( grabbable ){ - target.ungrabify(); - } + grabbable = target.grabbable && target.grabbable(); + if( grabbable ){ + target.ungrabify(); + } - let rp, rw, rh; - if( !isCy && ele.isNode() && !ele.isParent() && !options.atMouse ){ - rp = ele.renderedPosition(); - rw = ele.renderedWidth(); - rh = ele.renderedHeight(); - } else { - rp = e.renderedPosition || e.cyRenderedPosition; - rw = 1; - rh = 1; - } + let rp, rw, rh; + if( !isCy && ele.isNode() && !ele.isParent() && !options.atMouse ){ + rp = ele.renderedPosition(); + rw = ele.renderedWidth(); + rh = ele.renderedHeight(); + } else { + rp = e.renderedPosition || e.cyRenderedPosition; + rw = 1; + rh = 1; + } - offset = getOffset(container); + offset = getOffset(container); - ctrx = rp.x; - ctry = rp.y; + ctrx = rp.x; + ctry = rp.y; - createMenuItems(); + createMenuItems(); - setStyles(parent, { - display: 'block', - left: (rp.x - r) + 'px', - top: (rp.y - r) + 'px' - }); + setStyles(parent, { + display: 'block', + left: (rp.x - r) + 'px', + top: (rp.y - r) + 'px' + }); - rs = Math.max(rw, rh)/2; - rs = Math.max(rs, options.minSpotlightRadius); - rs = Math.min(rs, options.maxSpotlightRadius); + rs = Math.max(rw, rh)/2; + rs = Math.max(rs, options.minSpotlightRadius); + rs = Math.min(rs, options.maxSpotlightRadius); - queueDrawBg(); + queueDrawBg(); - activeCommandI = undefined; + activeCommandI = undefined; - inGesture = true; - gestureStartEvent = e; + inGesture = true; + gestureStartEvent = e; + } }) .on('cxtdrag tapdrag', options.selector, dragHandler = function(e){