frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add 'add' option to touch radialMenu for quick-add dialog

Browse Source
This commit is contained in:
Nick O'Leary 2020-06-05 15:48:02 +01:00
parent cb218a57f1
commit 091a462a42
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 48 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js vendored
View File

@ -241,10 +241,13 @@ RED.typeSearch = (function() {
$(document).off('mousedown.red-ui-type-search'); $(document).off('mousedown.red-ui-type-search');
$(document).off('mouseup.red-ui-type-search'); $(document).off('mouseup.red-ui-type-search');
$(document).off('click.red-ui-type-search'); $(document).off('click.red-ui-type-search');
$(document).off('touchstart.red-ui-type-search');
$(document).off('mousedown.red-ui-type-search');
setTimeout(function() { setTimeout(function() {
$(document).on('mousedown.red-ui-type-search',handleMouseActivity); $(document).on('mousedown.red-ui-type-search',handleMouseActivity);
$(document).on('mouseup.red-ui-type-search',handleMouseActivity); $(document).on('mouseup.red-ui-type-search',handleMouseActivity);
$(document).on('click.red-ui-type-search',handleMouseActivity); $(document).on('click.red-ui-type-search',handleMouseActivity);
$(document).on('touchstart.red-ui-type-search',handleMouseActivity);
},200); },200);
refreshTypeList(opts); refreshTypeList(opts);
@ -260,7 +263,9 @@ RED.typeSearch = (function() {
searchResultsDiv.slideDown(300); searchResultsDiv.slideDown(300);
setTimeout(function() { setTimeout(function() {
searchResultsDiv.find(".red-ui-editableList-container").scrollTop(0); searchResultsDiv.find(".red-ui-editableList-container").scrollTop(0);
searchInput.trigger("focus"); if (!opts.disableFocus) {
searchInput.trigger("focus");
}
},100); },100);
} }
function hide(fast) { function hide(fast) {
@ -279,6 +284,7 @@ RED.typeSearch = (function() {
$(document).off('mousedown.red-ui-type-search'); $(document).off('mousedown.red-ui-type-search');
$(document).off('mouseup.red-ui-type-search'); $(document).off('mouseup.red-ui-type-search');
$(document).off('click.red-ui-type-search'); $(document).off('click.red-ui-type-search');
$(document).off('touchstart.red-ui-type-search');
} }
} }
function getTypeLabel(type, def) { function getTypeLabel(type, def) {

62
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -29,7 +29,6 @@
*/ */
RED.view = (function() { RED.view = (function() {
var DEBUG_EVENTS = false;
var space_width = 5000, var space_width = 5000,
space_height = 5000, space_height = 5000,
lineCurveScale = 0.75, lineCurveScale = 0.75,
@ -152,6 +151,7 @@ RED.view = (function() {
} }
}) })
.on("touchend", function() { .on("touchend", function() {
d3.event.preventDefault();
clearTimeout(touchStartTime); clearTimeout(touchStartTime);
touchStartTime = null; touchStartTime = null;
if (RED.touch.radialMenu.active()) { if (RED.touch.radialMenu.active()) {
@ -159,7 +159,7 @@ RED.view = (function() {
} }
canvasMouseUp.call(this); canvasMouseUp.call(this);
}) })
.on("touchcancel", canvasMouseUp) .on("touchcancel", function() { d3.event.preventDefault(); canvasMouseUp.call(this); })
.on("touchstart", function() { .on("touchstart", function() {
var touch0; var touch0;
if (d3.event.touches.length>1) { if (d3.event.touches.length>1) {
@ -204,6 +204,7 @@ RED.view = (function() {
// .attr("class","nr-ui-view-lasso"); // .attr("class","nr-ui-view-lasso");
},touchLongPressTimeout); },touchLongPressTimeout);
} }
d3.event.preventDefault();
}) })
.on("touchmove", function(){ .on("touchmove", function(){
if (RED.touch.radialMenu.active()) { if (RED.touch.radialMenu.active()) {
@ -255,6 +256,7 @@ RED.view = (function() {
redraw(); redraw();
} }
} }
d3.event.preventDefault();
}); });
// Workspace Background // Workspace Background
@ -756,7 +758,7 @@ RED.view = (function() {
} }
function canvasMouseDown() { function canvasMouseDown() {
if (DEBUG_EVENTS) { console.warn("canvasMouseDown", mouse_mode); } if (RED.view.DEBUG) { console.warn("canvasMouseDown", mouse_mode); }
var point; var point;
if (mouse_mode === RED.state.SELECTING_NODE) { if (mouse_mode === RED.state.SELECTING_NODE) {
d3.event.stopPropagation(); d3.event.stopPropagation();
@ -810,7 +812,7 @@ if (DEBUG_EVENTS) { console.warn("canvasMouseDown", mouse_mode); }
} }
} }
function showQuickAddDialog(point, spliceLink, targetGroup) { function showQuickAddDialog(point, spliceLink, targetGroup, touchTrigger) {
if (targetGroup && !targetGroup.active) { if (targetGroup && !targetGroup.active) {
selectGroup(targetGroup,false); selectGroup(targetGroup,false);
enterActiveGroup(targetGroup); enterActiveGroup(targetGroup);
@ -899,6 +901,7 @@ if (DEBUG_EVENTS) { console.warn("canvasMouseDown", mouse_mode); }
RED.typeSearch.show({ RED.typeSearch.show({
x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]), x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]),
y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]), y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
disableFocus: touchTrigger,
filter: filter, filter: filter,
move: function(dx,dy) { move: function(dx,dy) {
if (ghostNode) { if (ghostNode) {
@ -926,6 +929,10 @@ if (DEBUG_EVENTS) { console.warn("canvasMouseDown", mouse_mode); }
redraw(); redraw();
}, },
add: function(type,keepAdding) { add: function(type,keepAdding) {
if (touchTrigger) {
keepAdding = false;
resetMouseVars();
}
var result = addNode(type); var result = addNode(type);
if (!result) { if (!result) {
return; return;
@ -1450,7 +1457,7 @@ if (DEBUG_EVENTS) { console.warn("canvasMouseDown", mouse_mode); }
} }
function canvasMouseUp() { function canvasMouseUp() {
if (DEBUG_EVENTS) { console.warn("canvasMouseUp", mouse_mode); } if (RED.view.DEBUG) { console.warn("canvasMouseUp", mouse_mode); }
var i; var i;
var historyEvent; var historyEvent;
if (mouse_mode === RED.state.PANNING) { if (mouse_mode === RED.state.PANNING) {
@ -1744,7 +1751,7 @@ if (DEBUG_EVENTS) { console.warn("canvasMouseUp", mouse_mode); }
} }
function clearSelection() { function clearSelection() {
if (DEBUG_EVENTS) { console.warn("clearSelection", mouse_mode); } if (RED.view.DEBUG) { console.warn("clearSelection", mouse_mode); }
for (var i=0;i<moving_set.length;i++) { for (var i=0;i<moving_set.length;i++) {
var n = moving_set[i]; var n = moving_set[i];
n.n.dirty = true; n.n.dirty = true;
@ -2252,7 +2259,7 @@ if (DEBUG_EVENTS) { console.warn("clearSelection", mouse_mode); }
} }
function portMouseDown(d,portType,portIndex) { function portMouseDown(d,portType,portIndex) {
if (DEBUG_EVENTS) { console.warn("portMouseDown", mouse_mode,d); } if (RED.view.DEBUG) { console.warn("portMouseDown", mouse_mode,d); }
//console.log(d,portType,portIndex); //console.log(d,portType,portIndex);
// disable zoom // disable zoom
//eventLayer.call(d3.behavior.zoom().on("zoom"), null); //eventLayer.call(d3.behavior.zoom().on("zoom"), null);
@ -2280,7 +2287,7 @@ if (DEBUG_EVENTS) { console.warn("portMouseDown", mouse_mode,d); }
} }
function portMouseUp(d,portType,portIndex) { function portMouseUp(d,portType,portIndex) {
if (DEBUG_EVENTS) { console.warn("portMouseUp", mouse_mode,d); } if (RED.view.DEBUG) { console.warn("portMouseUp", mouse_mode,d); }
if (mouse_mode === RED.state.SELECTING_NODE) { if (mouse_mode === RED.state.SELECTING_NODE) {
d3.event.stopPropagation(); d3.event.stopPropagation();
return; return;
@ -2621,7 +2628,7 @@ if (DEBUG_EVENTS) { console.warn("portMouseUp", mouse_mode,d); }
} }
function nodeMouseUp(d) { function nodeMouseUp(d) {
if (DEBUG_EVENTS) { console.warn("nodeMouseUp", mouse_mode,d); } if (RED.view.DEBUG) { console.warn("nodeMouseUp", mouse_mode,d); }
if (mouse_mode === RED.state.SELECTING_NODE) { if (mouse_mode === RED.state.SELECTING_NODE) {
d3.event.stopPropagation(); d3.event.stopPropagation();
return; return;
@ -2696,7 +2703,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseUp", mouse_mode,d); }
} }
function nodeMouseDown(d) { function nodeMouseDown(d) {
if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); } if (RED.view.DEBUG) { console.warn("nodeMouseDown", mouse_mode,d); }
focusView(); focusView();
if (d3.event.button === 1) { if (d3.event.button === 1) {
return; return;
@ -3123,6 +3130,10 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
options.push({name:"edit",disabled:(moving_set.length != 1),onselect:function() { RED.editor.edit(mdn);}}); options.push({name:"edit",disabled:(moving_set.length != 1),onselect:function() { RED.editor.edit(mdn);}});
options.push({name:"select",onselect:function() {selectAll();}}); options.push({name:"select",onselect:function() {selectAll();}});
options.push({name:"undo",disabled:(RED.history.depth() === 0),onselect:function() {RED.history.pop();}}); options.push({name:"undo",disabled:(RED.history.depth() === 0),onselect:function() {RED.history.pop();}});
options.push({name:"add",onselect:function() {
chartPos = chart.offset();
showQuickAddDialog([pos[0]-chartPos.left+chart.scrollLeft(),pos[1]-chartPos.top+chart.scrollTop()],undefined,undefined,true)
}});
RED.touch.radialMenu.show(obj,pos,options); RED.touch.radialMenu.show(obj,pos,options);
resetMouseVars(); resetMouseVars();
@ -3216,6 +3227,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
showTouchMenu(obj,pos); showTouchMenu(obj,pos);
},touchLongPressTimeout); },touchLongPressTimeout);
nodeMouseDown.call(this,d) nodeMouseDown.call(this,d)
d3.event.preventDefault();
}) })
.on("touchend", function(d) { .on("touchend", function(d) {
clearTimeout(touchStartTime); clearTimeout(touchStartTime);
@ -3225,13 +3237,14 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
return; return;
} }
nodeMouseUp.call(this,d); nodeMouseUp.call(this,d);
d3.event.preventDefault();
}); });
outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);}) .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
.on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);} ) .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);}) .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);}); .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
@ -3259,6 +3272,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
showTouchMenu(obj,pos); showTouchMenu(obj,pos);
},touchLongPressTimeout); },touchLongPressTimeout);
nodeMouseDown.call(this,d) nodeMouseDown.call(this,d)
d3.event.preventDefault();
}) })
.on("touchend", function(d) { .on("touchend", function(d) {
clearTimeout(touchStartTime); clearTimeout(touchStartTime);
@ -3268,13 +3282,14 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
return; return;
} }
nodeMouseUp.call(this,d); nodeMouseUp.call(this,d);
d3.event.preventDefault();
}); });
inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} ) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} ) .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);}) .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
.on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);} ) .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);}) .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);})
.on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);}); .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);});
@ -3302,8 +3317,10 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
showTouchMenu(obj,pos); showTouchMenu(obj,pos);
},touchLongPressTimeout); },touchLongPressTimeout);
nodeMouseDown.call(this,d) nodeMouseDown.call(this,d)
d3.event.preventDefault();
}) })
.on("touchend", function(d) { .on("touchend", function(d) {
d3.event.preventDefault();
clearTimeout(touchStartTime); clearTimeout(touchStartTime);
touchStartTime = null; touchStartTime = null;
if (RED.touch.radialMenu.active()) { if (RED.touch.radialMenu.active()) {
@ -3315,9 +3332,9 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);}) .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
.on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);} ) .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);}) .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);}); .on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
@ -3426,7 +3443,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
d3.select(this).attr("fill-opacity",op); d3.select(this).attr("fill-opacity",op);
}}) }})
.on("click",nodeButtonClicked) .on("click",nodeButtonClicked)
.on("touchstart",nodeButtonClicked) .on("touchstart",function(d) { nodeButtonClicked.call(this,d); d3.event.preventDefault();})
} }
var mainRect = node.append("rect") var mainRect = node.append("rect")
@ -3447,8 +3464,10 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
showTouchMenu(obj,pos); showTouchMenu(obj,pos);
},touchLongPressTimeout); },touchLongPressTimeout);
nodeMouseDown.call(this,d) nodeMouseDown.call(this,d)
d3.event.preventDefault();
}) })
.on("touchend", function(d) { .on("touchend", function(d) {
d3.event.preventDefault();
clearTimeout(touchStartTime); clearTimeout(touchStartTime);
touchStartTime = null; touchStartTime = null;
if (RED.touch.radialMenu.active()) { if (RED.touch.radialMenu.active()) {
@ -3750,9 +3769,9 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
} }
inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
.on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();})
.on("mouseup",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} ) .on("mouseup",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} )
.on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} ) .on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);}) .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);}); .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
} }
@ -3787,9 +3806,9 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
} }
output_group_ports.on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() ) output_group_ports.on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
.on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() ) .on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();}})() )
.on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() ) .on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
.on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() ) .on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();}})() )
.on("mouseover",(function(){var node = d; return function(d,i){portMouseOver(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})()) .on("mouseover",(function(){var node = d; return function(d,i){portMouseOver(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})())
.on("mouseout",(function(){var node = d; return function(d,i) {portMouseOut(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})()); .on("mouseout",(function(){var node = d; return function(d,i) {portMouseOut(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})());
@ -3975,6 +3994,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
touchStartTime = null; touchStartTime = null;
showTouchMenu(obj,pos); showTouchMenu(obj,pos);
},touchLongPressTimeout); },touchLongPressTimeout);
d3.event.preventDefault();
}) })
l.append("svg:path").attr("class","red-ui-flow-link-outline red-ui-flow-link-path"); l.append("svg:path").attr("class","red-ui-flow-link-outline red-ui-flow-link-path");
l.append("svg:path").attr("class","red-ui-flow-link-line red-ui-flow-link-path") l.append("svg:path").attr("class","red-ui-flow-link-line red-ui-flow-link-path")