From b91471abdbf96a6f3b5cfc296d182f3ebd99dc43 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Fri, 27 Feb 2015 17:01:24 -0800 Subject: [PATCH] Scroll flyout to top when changing category. --- blockly_compressed.js | 6 +++--- core/flyout.js | 7 +++++++ core/toolbox.js | 17 +++++++++++++++-- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/blockly_compressed.js b/blockly_compressed.js index b78b5079f..95f2c5263 100644 --- a/blockly_compressed.js +++ b/blockly_compressed.js @@ -1212,7 +1212,7 @@ Blockly.Flyout.prototype.setMetrics_=function(a){var b=this.getMetrics_();b&&(go Blockly.Flyout.prototype.init=function(a){this.targetWorkspace_=a;this.workspace_.targetWorkspace=a;this.scrollbar_=new Blockly.Scrollbar(this.workspace_,!1,!1);this.hide();this.eventWrappers_.concat(Blockly.bindEvent_(window,goog.events.EventType.RESIZE,this,this.position_));this.position_();this.eventWrappers_.concat(Blockly.bindEvent_(this.svgGroup_,"wheel",this,this.wheel_));this.eventWrappers_.concat(Blockly.bindEvent_(this.svgGroup_,"mousewheel",this,this.wheel_));this.eventWrappers_.concat(Blockly.bindEvent_(this.targetWorkspace_.getCanvas(), "blocklyWorkspaceChange",this,this.filterForCapacity_));this.eventWrappers_.concat(Blockly.bindEvent_(this.svgGroup_,"mousedown",this,this.onMouseDown_))}; Blockly.Flyout.prototype.position_=function(){if(this.isVisible()){var a=this.targetWorkspace_.getMetrics();if(a){var b=this.width_-this.CORNER_RADIUS;Blockly.RTL&&(b*=-1);var c=["M "+(Blockly.RTL?this.width_:0)+",0"];c.push("h",b);c.push("a",this.CORNER_RADIUS,this.CORNER_RADIUS,0,0,Blockly.RTL?0:1,Blockly.RTL?-this.CORNER_RADIUS:this.CORNER_RADIUS,this.CORNER_RADIUS);c.push("v",Math.max(0,a.viewHeight-2*this.CORNER_RADIUS));c.push("a",this.CORNER_RADIUS,this.CORNER_RADIUS,0,0,Blockly.RTL?0:1,Blockly.RTL? -this.CORNER_RADIUS:-this.CORNER_RADIUS,this.CORNER_RADIUS);c.push("h",-b);c.push("z");this.svgBackground_.setAttribute("d",c.join(" "));b=a.absoluteLeft;Blockly.RTL&&(b+=a.viewWidth,b-=this.width_);this.svgGroup_.setAttribute("transform","translate("+b+","+a.absoluteTop+")");this.height_=a.viewHeight;this.scrollbar_&&this.scrollbar_.resize()}}}; +this.CORNER_RADIUS:-this.CORNER_RADIUS,this.CORNER_RADIUS);c.push("h",-b);c.push("z");this.svgBackground_.setAttribute("d",c.join(" "));b=a.absoluteLeft;Blockly.RTL&&(b+=a.viewWidth,b-=this.width_);this.svgGroup_.setAttribute("transform","translate("+b+","+a.absoluteTop+")");this.height_=a.viewHeight;this.scrollbar_&&this.scrollbar_.resize()}}};Blockly.Flyout.prototype.scrollToTop=function(){this.scrollbar_.set(0)}; Blockly.Flyout.prototype.wheel_=function(a){var b=a.deltaY||-a.wheelDeltaY;if(b){goog.userAgent.GECKO&&(b*=10);var c=this.getMetrics_(),b=c.viewTop+b,b=Math.min(b,c.contentHeight-c.viewHeight),b=Math.max(b,0);this.scrollbar_.set(b);a.preventDefault()}};Blockly.Flyout.prototype.isVisible=function(){return this.svgGroup_&&"block"==this.svgGroup_.style.display}; Blockly.Flyout.prototype.hide=function(){if(this.isVisible()){this.svgGroup_.style.display="none";for(var a=0,b;b=this.listeners_[a];a++)Blockly.unbindEvent_(b);this.listeners_.length=0;this.reflowWrapper_&&(Blockly.unbindEvent_(this.reflowWrapper_),this.reflowWrapper_=null)}}; Blockly.Flyout.prototype.show=function(a){this.hide();for(var b=this.workspace_.getTopBlocks(!1),c=0,d;d=b[c];c++)d.workspace==this.workspace_&&d.dispose(!1,!1);for(var c=0,e;e=this.buttons_[c];c++)goog.dom.removeNode(e);this.buttons_.length=0;var f=this.CORNER_RADIUS;this.svgGroup_.style.display="block";var b=[],g=[];if(a==Blockly.Variables.NAME_TYPE)Blockly.Variables.flyoutCategory(b,g,f,this.workspace_);else if(a==Blockly.Procedures.NAME_TYPE)Blockly.Procedures.flyoutCategory(b,g,f,this.workspace_); @@ -1231,14 +1231,14 @@ Blockly.Flyout.terminateDrag_=function(){Blockly.Flyout.onMouseUpWrapper_&&(Bloc Blockly.Flyout.onMouseUpWrapper_=null);Blockly.Flyout.startDownEvent_=null;Blockly.Flyout.startBlock_=null;Blockly.Flyout.startFlyout_=null};Blockly.Flyout.prototype.getRect=function(){var a=Blockly.getSvgXY_(this.svgGroup_).x;Blockly.RTL||(a-=1E7);return new goog.math.Rect(a,-1E7,1E7+this.width_,this.height_+2E7)}; // Copyright 2011 Google Inc. Apache License 2.0 Blockly.Toolbox=function(a,b){this.HtmlDiv=goog.dom.createDom("div","blocklyToolboxDiv");this.HtmlDiv.setAttribute("dir",Blockly.RTL?"RTL":"LTR");b.appendChild(this.HtmlDiv);this.flyout_=new Blockly.Flyout;a.appendChild(this.flyout_.createDom());Blockly.bindEvent_(this.HtmlDiv,"mousedown",this,function(a){Blockly.isRightButton(a)||a.target==this.HtmlDiv?Blockly.hideChaff(!1):Blockly.hideChaff(!0)})};Blockly.Toolbox.prototype.width=0;Blockly.Toolbox.prototype.selectedOption_=null; -Blockly.Toolbox.prototype.CONFIG_={indentWidth:19,cssRoot:"blocklyTreeRoot",cssHideRoot:"blocklyHidden",cssItem:"",cssTreeRow:"blocklyTreeRow",cssItemLabel:"blocklyTreeLabel",cssTreeIcon:"blocklyTreeIcon",cssExpandedFolderIcon:"blocklyTreeIconOpen",cssFileIcon:"blocklyTreeIconNone",cssSelectedRow:"blocklyTreeSelected"}; +Blockly.Toolbox.prototype.lastCategory_=null;Blockly.Toolbox.prototype.CONFIG_={indentWidth:19,cssRoot:"blocklyTreeRoot",cssHideRoot:"blocklyHidden",cssItem:"",cssTreeRow:"blocklyTreeRow",cssItemLabel:"blocklyTreeLabel",cssTreeIcon:"blocklyTreeIcon",cssExpandedFolderIcon:"blocklyTreeIconOpen",cssFileIcon:"blocklyTreeIconNone",cssSelectedRow:"blocklyTreeSelected"}; Blockly.Toolbox.prototype.init=function(a){this.CONFIG_.cleardotPath=Blockly.pathToMedia+"1x1.gif";this.CONFIG_.cssCollapsedFolderIcon="blocklyTreeIconClosed"+(Blockly.RTL?"Rtl":"Ltr");var b=new Blockly.Toolbox.TreeControl(this,this.CONFIG_);this.tree_=b;b.setShowRootNode(!1);b.setShowLines(!1);b.setShowExpandIcons(!1);b.setSelectedItem(null);this.HtmlDiv.style.display="block";this.flyout_.init(a);this.populate_();b.render(this.HtmlDiv);var c=this;goog.events.listen(window,goog.events.EventType.RESIZE, function(){c.position_()});this.position_()};Blockly.Toolbox.prototype.position_=function(){var a=this.HtmlDiv,b=goog.style.getBorderBox(Blockly.svg),c=Blockly.svgSize();Blockly.RTL?(b=Blockly.convertCoordinates(0,0,!1),a.style.left=b.x+c.width-a.offsetWidth+"px"):a.style.marginLeft=b.left;a.style.height=c.height+1+"px";this.width=a.offsetWidth;Blockly.RTL||--this.width}; Blockly.Toolbox.prototype.populate_=function(){function a(c,d){for(var e=0,f;f=c.childNodes[e];e++)if(f.tagName){var g=f.tagName.toUpperCase();if("CATEGORY"==g){g=b.createNode(f.getAttribute("name"));g.blocks=[];d.add(g);var h=f.getAttribute("custom");h?g.blocks=h:a(f,g)}else"HR"==g?console.warn("The
separator tag in the toolbox XML needs to be changed to (due to a bug in IE)."):"SEP"==g?d.add(new Blockly.Toolbox.TreeSeparator):"BLOCK"==g&&d.blocks.push(f)}}var b=this.tree_;b.removeChildren(); b.blocks=[];a(Blockly.languageTree,this.tree_);if(b.blocks.length)throw"Toolbox cannot have both blocks and categories in the root level.";Blockly.fireUiEvent(window,"resize")};Blockly.Toolbox.prototype.clearSelection=function(){this.tree_.setSelectedItem(null)};Blockly.Toolbox.prototype.getRect=function(){var a=Blockly.RTL?Blockly.svgSize().width-this.width:-1E7;return new goog.math.Rect(a,-1E7,1E7+this.width,2E7)}; Blockly.Toolbox.TreeControl=function(a,b){this.toolbox_=a;goog.ui.tree.TreeControl.call(this,goog.html.SafeHtml.EMPTY,b)};goog.inherits(Blockly.Toolbox.TreeControl,goog.ui.tree.TreeControl);Blockly.Toolbox.TreeControl.prototype.enterDocument=function(){Blockly.Toolbox.TreeControl.superClass_.enterDocument.call(this);if(goog.events.BrowserFeature.TOUCH_ENABLED){var a=this.getElement();Blockly.bindEvent_(a,goog.events.EventType.TOUCHSTART,this,this.handleTouchEvent_)}}; Blockly.Toolbox.TreeControl.prototype.handleTouchEvent_=function(a){a.preventDefault();var b=this.getNodeFromEvent_(a);b&&a.type===goog.events.EventType.TOUCHSTART&&setTimeout(function(){b.onMouseDown(a)},1)};Blockly.Toolbox.TreeControl.prototype.createNode=function(a){return new Blockly.Toolbox.TreeNode(this.toolbox_,a?goog.html.SafeHtml.htmlEscape(a):goog.html.SafeHtml.EMPTY,this.getConfig(),this.getDomHelper())}; -Blockly.Toolbox.TreeControl.prototype.setSelectedItem=function(a){this.selectedItem_!=a&&(goog.ui.tree.TreeControl.prototype.setSelectedItem.call(this,a),a&&a.blocks&&a.blocks.length?this.toolbox_.flyout_.show(a.blocks):this.toolbox_.flyout_.hide())}; +Blockly.Toolbox.TreeControl.prototype.setSelectedItem=function(a){if(this.selectedItem_!=a){goog.ui.tree.TreeControl.prototype.setSelectedItem.call(this,a);var b=this.toolbox_;a&&a.blocks&&a.blocks.length?(b.flyout_.show(a.blocks),b.lastCategory_!=a.blocks&&(b.flyout_.scrollToTop(),b.lastCategory_=a.blocks)):b.flyout_.hide()}}; Blockly.Toolbox.TreeNode=function(a,b,c,d){goog.ui.tree.TreeNode.call(this,b,c,d);a&&(b=function(){Blockly.fireUiEvent(window,"resize")},goog.events.listen(a.tree_,goog.ui.tree.BaseNode.EventType.EXPAND,b),goog.events.listen(a.tree_,goog.ui.tree.BaseNode.EventType.COLLAPSE,b))};goog.inherits(Blockly.Toolbox.TreeNode,goog.ui.tree.TreeNode);goog.ui.tree.BaseNode.prototype.getExpandIconSafeHtml=function(){return goog.html.SafeHtml.create("span")}; Blockly.Toolbox.TreeNode.prototype.onMouseDown=function(a){this.hasChildren()&&this.isUserCollapsible_?(this.toggle(),this.select()):this.isSelected()?this.getTree().setSelectedItem(null):this.select();this.updateRow()};Blockly.Toolbox.TreeNode.prototype.onDoubleClick_=function(a){};Blockly.Toolbox.TreeSeparator=function(){Blockly.Toolbox.TreeNode.call(this,null,"",Blockly.Toolbox.TreeSeparator.CONFIG_)};goog.inherits(Blockly.Toolbox.TreeSeparator,Blockly.Toolbox.TreeNode); Blockly.Toolbox.TreeSeparator.CONFIG_={cssTreeRow:"blocklyTreeSeparator"}; diff --git a/core/flyout.js b/core/flyout.js index fd2cde1b5..595ed7d17 100644 --- a/core/flyout.js +++ b/core/flyout.js @@ -275,6 +275,13 @@ Blockly.Flyout.prototype.position_ = function() { } }; +/** + * Scroll the flyout to the top. + */ +Blockly.Flyout.prototype.scrollToTop = function() { + this.scrollbar_.set(0); +}; + /** * Scroll the flyout up or down. * @param {!Event} e Mouse wheel scroll event. diff --git a/core/toolbox.js b/core/toolbox.js index 6926b30aa..794ccdde1 100644 --- a/core/toolbox.js +++ b/core/toolbox.js @@ -83,6 +83,13 @@ Blockly.Toolbox.prototype.width = 0; */ Blockly.Toolbox.prototype.selectedOption_ = null; +/** + * The SVG group currently selected. + * @type {*} + * @private + */ +Blockly.Toolbox.prototype.lastCategory_ = null; + /** * Configuration constants for Closure's tree UI. * @type {Object.} @@ -296,11 +303,17 @@ Blockly.Toolbox.TreeControl.prototype.setSelectedItem = function(node) { return; } goog.ui.tree.TreeControl.prototype.setSelectedItem.call(this, node); + var toolbox = this.toolbox_; if (node && node.blocks && node.blocks.length) { - this.toolbox_.flyout_.show(node.blocks); + toolbox.flyout_.show(node.blocks); + // Scroll the flyout to the top if the category has changed. + if (toolbox.lastCategory_ != node.blocks) { + toolbox.flyout_.scrollToTop(); + toolbox.lastCategory_ = node.blocks; + } } else { // Hide the flyout. - this.toolbox_.flyout_.hide(); + toolbox.flyout_.hide(); } };