From da122e2a31dfb626e487bc3f6df5b49e7b0649e4 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Tue, 17 Mar 2015 15:37:33 -0700 Subject: [PATCH] Enable long-press context menus. --- blockly_compressed.js | 49 +++++++++++++++++++++-------------------- core/block_svg.js | 4 ++++ core/blockly.js | 51 +++++++++++++++++++++++++++++++++++++++++++ core/inject.js | 6 ++++- 4 files changed, 85 insertions(+), 25 deletions(-) diff --git a/blockly_compressed.js b/blockly_compressed.js index babc3efba..3f9a946e0 100644 --- a/blockly_compressed.js +++ b/blockly_compressed.js @@ -994,7 +994,7 @@ Blockly.Block.prototype.bumpNeighbours_=function(){if(this.workspace&&0==Blockly Blockly.Block.prototype.getSurroundParent=function(){for(var a=this;;){do{var b=a,a=a.getParent();if(!a)return null}while(a.getNextBlock()==b);return a}};Blockly.Block.prototype.getNextBlock=function(){return this.nextConnection&&this.nextConnection.targetBlock()};Blockly.Block.prototype.getRootBlock=function(){var a,b=this;do a=b,b=a.parentBlock_;while(b);return a};Blockly.Block.prototype.getChildren=function(){return this.childBlocks_}; Blockly.Block.prototype.setParent=function(a){if(this.parentBlock_){for(var b=this.parentBlock_.childBlocks_,c,d=0;c=b[d];d++)if(c==this){b.splice(d,1);break}this.parentBlock_=null;this.previousConnection&&this.previousConnection.targetConnection&&this.previousConnection.disconnect();this.outputConnection&&this.outputConnection.targetConnection&&this.outputConnection.disconnect()}else goog.array.contains(this.workspace.getTopBlocks(!1),this)&&this.workspace.removeTopBlock(this);(this.parentBlock_= a)?a.childBlocks_.push(this):this.workspace.addTopBlock(this)};Blockly.Block.prototype.getDescendants=function(){for(var a=[this],b,c=0;b=this.childBlocks_[c];c++)a.push.apply(a,b.getDescendants());return a};Blockly.Block.prototype.isDeletable=function(){return this.deletable_&&!Blockly.readOnly};Blockly.Block.prototype.setDeletable=function(a){this.deletable_=a;this.svg_&&this.svg_.updateMovable()};Blockly.Block.prototype.isMovable=function(){return this.movable_&&!Blockly.readOnly}; -Blockly.Block.prototype.setMovable=function(a){this.movable_=a};Blockly.Block.prototype.isEditable=function(){return this.editable_&&!Blockly.readOnly};Blockly.Block.prototype.setEditable=function(a){this.editable_=a;a=0;for(var b;b=this.inputList[a];a++)for(var c=0,d;d=b.fieldRow[c];c++)d.updateEditable();b=this.getIcons();for(a=0;a=a.clientX&&0==a.clientY&&0==a.button)){Blockly.removeAllRanges();var c=a.clientX-b.startDragMouseX,d=a.clientY-b.startDragMouseY;1==Blockly.dragMode_&&Math.sqrt(Math.pow(c,2)+Math.pow(d,2))>Blockly.DRAG_RADIUS&&(Blockly.dragMode_=2,b.setParent(null),b.setDragging_(!0),b.workspace.recordDeleteAreas());if(2==Blockly.dragMode_){var e=b.startDragX+c,f=b.startDragY+d;b.getSvgRoot().setAttribute("transform", -"translate("+e+", "+f+")");for(e=0;e=a.clientX&&0==a.clientY&&0==a.button)){Blockly.removeAllRanges();var c=a.clientX-b.startDragMouseX,d=a.clientY-b.startDragMouseY;1==Blockly.dragMode_&&Math.sqrt(Math.pow(c,2)+Math.pow(d,2))>Blockly.DRAG_RADIUS&&(Blockly.dragMode_=2,Blockly.longStop_(),b.setParent(null),b.setDragging_(!0),b.workspace.recordDeleteAreas());if(2==Blockly.dragMode_){var e=b.startDragX+c,f=b.startDragY+ +d;b.getSvgRoot().setAttribute("transform","translate("+e+", "+f+")");for(e=0;ea.viewHeight+c||a.contentLeft<(Blockly.RTL?a.viewLeft:b)||a.contentLeft+ a.contentWidth>(Blockly.RTL?a.viewWidth:a.viewWidth+b))for(var d=Blockly.mainWorkspace.getTopBlocks(!1),e=0,f;f=d[e];e++){var p=f.getRelativeToSurfaceXY(),n=f.getHeightWidth(),r=c+25-n.height-p.y;0r&&f.moveBy(0,r);r=25+b-p.x-(Blockly.RTL?0:n.width);0r&&f.moveBy(r,0)}}}));b.appendChild(Blockly.Tooltip.createDom());a.appendChild(b);Blockly.svg=b;Blockly.svgResize();Blockly.WidgetDiv.DIV=goog.dom.createDom("div", "blocklyWidgetDiv");Blockly.WidgetDiv.DIV.style.direction=Blockly.RTL?"rtl":"ltr";document.body.appendChild(Blockly.WidgetDiv.DIV)}; -Blockly.init_=function(){Blockly.bindEvent_(Blockly.svg,"mousedown",null,Blockly.onMouseDown_);Blockly.bindEvent_(Blockly.svg,"contextmenu",null,Blockly.onContextMenu_);Blockly.bindEvent_(Blockly.WidgetDiv.DIV,"contextmenu",null,Blockly.onContextMenu_);Blockly.documentEventsBound_||(Blockly.bindEvent_(window,"resize",document,Blockly.svgResize),Blockly.bindEvent_(document,"keydown",null,Blockly.onKeyDown_),document.addEventListener("mouseup",Blockly.onMouseUp_,!1),goog.userAgent.IPAD&&Blockly.bindEvent_(window, -"orientationchange",document,function(){Blockly.fireUiEvent(window,"resize")}),Blockly.documentEventsBound_=!0);if(Blockly.languageTree)if(Blockly.mainWorkspace.toolbox_)Blockly.mainWorkspace.toolbox_.init(Blockly.mainWorkspace);else if(Blockly.mainWorkspace.flyout_){Blockly.mainWorkspace.flyout_.init(Blockly.mainWorkspace);Blockly.mainWorkspace.flyout_.show(Blockly.languageTree.childNodes);Blockly.mainWorkspace.scrollX=Blockly.mainWorkspace.flyout_.width_;Blockly.RTL&&(Blockly.mainWorkspace.scrollX*= --1);var a="translate("+Blockly.mainWorkspace.scrollX+", 0)";Blockly.mainWorkspace.getCanvas().setAttribute("transform",a);Blockly.mainWorkspace.getBubbleCanvas().setAttribute("transform",a)}Blockly.hasScrollbars&&(Blockly.mainWorkspace.scrollbar=new Blockly.ScrollbarPair(Blockly.mainWorkspace),Blockly.mainWorkspace.scrollbar.resize());Blockly.mainWorkspace.addTrashcan();if(Blockly.hasSounds){Blockly.loadAudio_([Blockly.pathToMedia+"click.mp3",Blockly.pathToMedia+"click.wav",Blockly.pathToMedia+"click.ogg"], -"click");Blockly.loadAudio_([Blockly.pathToMedia+"delete.mp3",Blockly.pathToMedia+"delete.ogg",Blockly.pathToMedia+"delete.wav"],"delete");var b=[],a=function(){for(;b.length;)Blockly.unbindEvent_(b.pop());Blockly.preloadAudio_()};b.push(Blockly.bindEvent_(document,"mousemove",null,a));b.push(Blockly.bindEvent_(document,"touchstart",null,a))}}; -Blockly.updateToolbox=function(a){if(a=Blockly.parseToolboxTree_(a)){if(!Blockly.languageTree)throw"Existing toolbox is null. Can't create new toolbox.";if(a.getElementsByTagName("category").length){if(!Blockly.hasCategories)throw"Existing toolbox has no categories. Can't change mode.";Blockly.languageTree=a;Blockly.mainWorkspace.toolbox_.populate_()}else{if(Blockly.hasCategories)throw"Existing toolbox has categories. Can't change mode.";Blockly.languageTree=a;Blockly.mainWorkspace.flyout_.show(Blockly.languageTree.childNodes)}}else if(Blockly.languageTree)throw"Can't nullify an existing toolbox."; -}; +Blockly.init_=function(){Blockly.bindEvent_(Blockly.svg,"mousedown",null,Blockly.onMouseDown_);Blockly.bindEvent_(Blockly.svg,"contextmenu",null,Blockly.onContextMenu_);Blockly.bindEvent_(Blockly.WidgetDiv.DIV,"contextmenu",null,Blockly.onContextMenu_);Blockly.bindEvent_(Blockly.svg,"touchstart",null,function(a){Blockly.longStart_(a,null)});Blockly.documentEventsBound_||(Blockly.bindEvent_(window,"resize",document,Blockly.svgResize),Blockly.bindEvent_(document,"keydown",null,Blockly.onKeyDown_),Blockly.bindEvent_(document, +"touchend",null,Blockly.longStop_),Blockly.bindEvent_(document,"touchcancel",null,Blockly.longStop_),document.addEventListener("mouseup",Blockly.onMouseUp_,!1),goog.userAgent.IPAD&&Blockly.bindEvent_(window,"orientationchange",document,function(){Blockly.fireUiEvent(window,"resize")}),Blockly.documentEventsBound_=!0);if(Blockly.languageTree)if(Blockly.mainWorkspace.toolbox_)Blockly.mainWorkspace.toolbox_.init(Blockly.mainWorkspace);else if(Blockly.mainWorkspace.flyout_){Blockly.mainWorkspace.flyout_.init(Blockly.mainWorkspace); +Blockly.mainWorkspace.flyout_.show(Blockly.languageTree.childNodes);Blockly.mainWorkspace.scrollX=Blockly.mainWorkspace.flyout_.width_;Blockly.RTL&&(Blockly.mainWorkspace.scrollX*=-1);var a="translate("+Blockly.mainWorkspace.scrollX+", 0)";Blockly.mainWorkspace.getCanvas().setAttribute("transform",a);Blockly.mainWorkspace.getBubbleCanvas().setAttribute("transform",a)}Blockly.hasScrollbars&&(Blockly.mainWorkspace.scrollbar=new Blockly.ScrollbarPair(Blockly.mainWorkspace),Blockly.mainWorkspace.scrollbar.resize()); +Blockly.mainWorkspace.addTrashcan();if(Blockly.hasSounds){Blockly.loadAudio_([Blockly.pathToMedia+"click.mp3",Blockly.pathToMedia+"click.wav",Blockly.pathToMedia+"click.ogg"],"click");Blockly.loadAudio_([Blockly.pathToMedia+"delete.mp3",Blockly.pathToMedia+"delete.ogg",Blockly.pathToMedia+"delete.wav"],"delete");var b=[],a=function(){for(;b.length;)Blockly.unbindEvent_(b.pop());Blockly.preloadAudio_()};b.push(Blockly.bindEvent_(document,"mousemove",null,a));b.push(Blockly.bindEvent_(document,"touchstart", +null,a))}}; +Blockly.updateToolbox=function(a){if(a=Blockly.parseToolboxTree_(a)){if(!Blockly.languageTree)throw"Existing toolbox is null. Can't create new toolbox.";if(a.getElementsByTagName("category").length){if(!Blockly.hasCategories)throw"Existing toolbox has no categories. Can't change mode.";Blockly.languageTree=a;Blockly.mainWorkspace.toolbox_.populate_()}else{if(Blockly.hasCategories)throw"Existing toolbox has categories. Can't change mode.";Blockly.languageTree=a;Blockly.mainWorkspace.flyout_.show(Blockly.languageTree.childNodes)}}else if(Blockly.languageTree)throw"Can't nullify an existing toolbox.";}; // Copyright 2012 Google Inc. Apache License 2.0 Blockly.utils={};Blockly.addClass_=function(a,b){var c=a.getAttribute("class")||"";-1==(" "+c+" ").indexOf(" "+b+" ")&&(c&&(c+=" "),a.setAttribute("class",c+b))};Blockly.removeClass_=function(a,b){var c=a.getAttribute("class");if(-1!=(" "+c+" ").indexOf(" "+b+" ")){for(var c=c.split(/\s+/),d=0;dBlockly.DRAG_RADIUS&&Blockly.longStop_();a.stopPropagation()}}; Blockly.onKeyDown_=function(a){if(!Blockly.isTargetInput_(a))if(27==a.keyCode)Blockly.hideChaff();else if(8==a.keyCode||46==a.keyCode)try{Blockly.selected&&Blockly.selected.isDeletable()&&(Blockly.hideChaff(),Blockly.selected.dispose(!0,!0))}finally{a.preventDefault()}else if(a.altKey||a.ctrlKey||a.metaKey)Blockly.selected&&Blockly.selected.isDeletable()&&Blockly.selected.isMovable()&&Blockly.selected.workspace==Blockly.mainWorkspace&&(Blockly.hideChaff(),67==a.keyCode?Blockly.copy_(Blockly.selected): -88==a.keyCode&&(Blockly.copy_(Blockly.selected),Blockly.selected.dispose(!0,!0))),86==a.keyCode&&Blockly.clipboard_&&Blockly.mainWorkspace.paste(Blockly.clipboard_)};Blockly.terminateDrag_=function(){Blockly.BlockSvg.terminateDrag_();Blockly.Flyout.terminateDrag_()};Blockly.copy_=function(a){var b=Blockly.Xml.blockToDom_(a);Blockly.Xml.deleteNext(b);a=a.getRelativeToSurfaceXY();b.setAttribute("x",Blockly.RTL?-a.x:a.x);b.setAttribute("y",a.y);Blockly.clipboard_=b}; +88==a.keyCode&&(Blockly.copy_(Blockly.selected),Blockly.selected.dispose(!0,!0))),86==a.keyCode&&Blockly.clipboard_&&Blockly.mainWorkspace.paste(Blockly.clipboard_)};Blockly.terminateDrag_=function(){Blockly.BlockSvg.terminateDrag_();Blockly.Flyout.terminateDrag_()};Blockly.longPid_=0;Blockly.longStart_=function(a,b){Blockly.longStop_();Blockly.longPid_=setTimeout(function(){a.button=2;if(b)b.onMouseDown_(a);else Blockly.onMouseDown_(a)},Blockly.LONGPRESS)}; +Blockly.longStop_=function(){Blockly.longPid_&&(clearTimeout(Blockly.longPid_),Blockly.longPid_=0)};Blockly.copy_=function(a){var b=Blockly.Xml.blockToDom_(a);Blockly.Xml.deleteNext(b);a=a.getRelativeToSurfaceXY();b.setAttribute("x",Blockly.RTL?-a.x:a.x);b.setAttribute("y",a.y);Blockly.clipboard_=b}; Blockly.showContextMenu_=function(a){if(!Blockly.readOnly){var b=[];if(Blockly.collapse){for(var c=!1,d=!1,e=Blockly.mainWorkspace.getTopBlocks(!1),f=0;f Blockly.DRAG_RADIUS) { // Switch to unrestricted dragging. Blockly.dragMode_ = 2; + Blockly.longStop_(); // Push this block to the very top of the stack. this_.setParent(null); this_.setDragging_(true); diff --git a/core/blockly.js b/core/blockly.js index ee2a231f4..ee44c5d08 100644 --- a/core/blockly.js +++ b/core/blockly.js @@ -207,6 +207,11 @@ Blockly.BUMP_DELAY = 250; */ Blockly.COLLAPSE_CHARS = 30; +/** + * Length in ms for a touch to become a long press. + */ +Blockly.LONGPRESS = 750; + /** * The main workspace (defined by inject.js). * @type {Blockly.Workspace} @@ -359,6 +364,11 @@ Blockly.onMouseMove_ = function(e) { // Move the scrollbars and the page will scroll automatically. Blockly.mainWorkspace.scrollbar.set(-x - metrics.contentLeft, -y - metrics.contentTop); + // Cancel the long-press if the drag has moved too far. + var dr = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); + if (dr > Blockly.DRAG_RADIUS) { + Blockly.longStop_(); + } e.stopPropagation(); } }; @@ -422,6 +432,47 @@ Blockly.terminateDrag_ = function() { Blockly.Flyout.terminateDrag_(); }; +/** + * PID of queued long-press task. + * @private + */ +Blockly.longPid_ = 0; + +/** + * Context menus on touch devices are activated using a long-press. + * Unfortunately the contextmenu touch event is currently (2015) only suported + * by Chrome. This function is fired on any touchstart event, queues a task, + * which after about a second opens the context menu. The tasks is killed + * if the touch event terminates early. + * @param {!Event} e Touch start event. + * @param {Blockly.Block} block The block under the touchstart event, or null + * if the event was on the workspace. + * @private + */ +Blockly.longStart_ = function(e, block) { + Blockly.longStop_(); + Blockly.longPid_ = setTimeout(function() { + e.button = 2; // Simulate a right button click. + if (block) { + block.onMouseDown_(e); + } else { + Blockly.onMouseDown_(e); + } + }, Blockly.LONGPRESS); +}; + +/** + * Nope, that's not a long-press. Either touchend or touchcancel was fired, + * or a drag hath begun. Kill the queued long-press task. + * @private + */ +Blockly.longStop_ = function() { + if (Blockly.longPid_) { + clearTimeout(Blockly.longPid_); + Blockly.longPid_ = 0; + } +}; + /** * Copy a block onto the local clipboard. * @param {!Blockly.Block} block Block to be copied. diff --git a/core/inject.js b/core/inject.js index d9862be38..c201ad0d6 100644 --- a/core/inject.js +++ b/core/inject.js @@ -395,7 +395,6 @@ Blockly.createDom_ = function(container) { document.body.appendChild(Blockly.WidgetDiv.DIV); }; - /** * Initialize Blockly with various handlers. * @private @@ -412,11 +411,16 @@ Blockly.init_ = function() { Blockly.bindEvent_(Blockly.WidgetDiv.DIV, 'contextmenu', null, Blockly.onContextMenu_); + Blockly.bindEvent_(Blockly.svg, 'touchstart', null, + function(e) {Blockly.longStart_(e, null);}); + if (!Blockly.documentEventsBound_) { // Only bind the window/document events once. // Destroying and reinjecting Blockly should not bind again. Blockly.bindEvent_(window, 'resize', document, Blockly.svgResize); Blockly.bindEvent_(document, 'keydown', null, Blockly.onKeyDown_); + Blockly.bindEvent_(document, 'touchend', null, Blockly.longStop_); + Blockly.bindEvent_(document, 'touchcancel', null, Blockly.longStop_); // Don't use bindEvent_ for document's mouseup since that would create a // corresponding touch handler that would squeltch the ability to interact // with non-Blockly elements.