diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js index 9ed7f823c..177167c33 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js @@ -27,26 +27,24 @@ RED.touch.radialMenu = (function() { function createRadial(obj,pos,options) { isActive = true; try { - touchMenu = d3.select("body").append("div").classed("red-ui-editor-radial-menu",true) - .on('touchstart',function() { + touchMenu = $('
', {class: 'red-ui-editor-radial-menu'}).appendTo('body') + .on('touchstart',function(evt) { hide(); - d3.event.preventDefault(); + evt.preventDefault(); }); - var menu = touchMenu.append("div") - .style({ + var menu = $('
').appendTo(touchMenu).css({ top: (pos[1]-80)+"px", left:(pos[0]-80)+"px", }); - var menuOpts = []; var createMenuOpt = function(x,y,opt) { - opt.el = menu.append("div").classed("red-ui-editor-radial-menu-opt",true) - .style({ + opt.el = $('
', {class: 'red-ui-editor-radial-menu-opt'}).appendTo(menu) + .css({ top: (y+80-25)+"px", left:(x+80-25)+"px" }) - .classed("red-ui-editor-radial-menu-opt-disabled",!!opt.disabled) + .toggleClass("red-ui-editor-radial-menu-opt-disabled",!!opt.disabled) opt.el.html(opt.name); @@ -54,16 +52,16 @@ RED.touch.radialMenu = (function() { opt.y = y; menuOpts.push(opt); - opt.el.on('touchstart',function() { - opt.el.classed("red-ui-editor-radial-menu-opt-active",true) - d3.event.preventDefault(); - d3.event.stopPropagation(); + opt.el.on('touchstart',function(evt) { + opt.el.toggleClass("red-ui-editor-radial-menu-opt-active",true) + evt.preventDefault(); + evt.stopPropagation(); }); - opt.el.on('touchend',function() { + opt.el.on('touchend',function(evt) { hide(); opt.onselect(); - d3.event.preventDefault(); - d3.event.stopPropagation(); + evt.preventDefault(); + evt.stopPropagation(); }); } @@ -88,8 +86,8 @@ RED.touch.radialMenu = (function() { } obj.on('touchend.radial',function() { - obj.on('touchend.radial',null); - obj.on('touchmenu.radial',null); + obj.off('touchend.radial'); + obj.off('touchmenu.radial'); if (activeOption) { try { @@ -103,9 +101,9 @@ RED.touch.radialMenu = (function() { } }); - obj.on('touchmove.radial',function() { + obj.on('touchmove.radial',function(evt) { try { - var touch0 = d3.event.touches.item(0); + var touch0 = evt.touches.item(0); var p = [touch0.pageX - pos[0],touch0.pageY-pos[1]]; for (var i=0;i