From 24ff5262d90cd59abd4c5d07d924c5d71135668f Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 5 Aug 2022 23:07:39 +0100
Subject: [PATCH] Remove d3 from radialMenu

---
 .../src/js/ui/touch/radialMenu.js             | 40 +++++++++----------
 .../@node-red/editor-client/src/js/ui/view.js | 20 ++--------
 2 files changed, 22 insertions(+), 38 deletions(-)

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 = $('<div>', {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 = $('<div>').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 = $('<div>', {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<menuOpts.length;i++) {
                     var opt = menuOpts[i];
@@ -119,7 +117,7 @@ RED.touch.radialMenu = (function() {
                             if (opt === activeOption) {
                                 activeOption = null;
                             }
-                            opt.el.classed("selected",false);
+                            opt.el.toggleClass("selected",false);
                         }
                     }
                 }
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index 8c7ea22a3..6de33872e 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -294,25 +294,13 @@ RED.view = (function() {
                     ]
                     startTouchDistance = Math.sqrt((a*a)+(b*b));
                 } else {
-                    var obj = d3.select(document.body);
                     touch0 = d3.event.touches.item(0);
                     var pos = [touch0.pageX,touch0.pageY];
                     startTouchCenter = [touch0.pageX,touch0.pageY];
                     startTouchDistance = 0;
-                    var point = d3.touches(this)[0];
                     touchStartTime = setTimeout(function() {
                         touchStartTime = null;
-                        showTouchMenu(obj,pos);
-                        //lasso = eventLayer.append("rect")
-                        //    .attr("ox",point[0])
-                        //    .attr("oy",point[1])
-                        //    .attr("rx",2)
-                        //    .attr("ry",2)
-                        //    .attr("x",point[0])
-                        //    .attr("y",point[1])
-                        //    .attr("width",0)
-                        //    .attr("height",0)
-                        //    .attr("class","nr-ui-view-lasso");
+                        showTouchMenu(document.body,pos);
                     },touchLongPressTimeout);
                 }
                 d3.event.preventDefault();
@@ -3703,13 +3691,12 @@ RED.view = (function() {
     }
     function nodeTouchStart(d) {
         if (RED.view.DEBUG) { console.warn("nodeTouchStart", mouse_mode,d); }
-        var obj = d3.select(this);
         var touch0 = d3.event.touches.item(0);
         var pos = [touch0.pageX,touch0.pageY];
         startTouchCenter = [touch0.pageX,touch0.pageY];
         startTouchDistance = 0;
         touchStartTime = setTimeout(function() {
-            showTouchMenu(obj,pos);
+            showTouchMenu(this,pos);
         },touchLongPressTimeout);
         nodeMouseDown.call(this,d)
         d3.event.preventDefault();
@@ -3868,12 +3855,11 @@ RED.view = (function() {
         focusView();
         d3.event.stopPropagation();
 
-        var obj = d3.select(document.body);
         var touch0 = d3.event.touches.item(0);
         var pos = [touch0.pageX,touch0.pageY];
         touchStartTime = setTimeout(function() {
             touchStartTime = null;
-            showTouchMenu(obj,pos);
+            showTouchMenu(document.body,pos);
         },touchLongPressTimeout);
         d3.event.preventDefault();
     }