mirror of
https://github.com/scratchfoundation/scratch-blocks.git
synced 2025-08-28 22:10:31 -04:00
Scroll flyout to top when changing category.
This commit is contained in:
parent
adf738069c
commit
b91471abdb
3 changed files with 25 additions and 5 deletions
|
@ -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 <hr> separator tag in the toolbox XML needs to be changed to <sep></sep> (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"};
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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.<string,*>}
|
||||
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue