Enable vertical scrolling of flyouts by dragging workspace.

git-svn-id: http://blockly.googlecode.com/svn/trunk@1763 c400ca83-b69d-9dd7-9705-49c6b8615e23

core/blockly.js

@@ -301,6 +301,8 @@ Blockly.onMouseDown_ = function(e) {
       Blockly.onTouchUpWrapper_ =
           Blockly.bindEvent_(document, 'mouseup', null, Blockly.onMouseUp_);
     }
+    Blockly.onMouseMoveWrapper_ =
+        Blockly.bindEvent_(document, 'mousemove', null, Blockly.onMouseMove_);
   }
 };
 
@@ -318,6 +320,10 @@ Blockly.onMouseUp_ = function(e) {
     Blockly.unbindEvent_(Blockly.onTouchUpWrapper_);
     Blockly.onTouchUpWrapper_ = null;
   }
+  if (Blockly.onMouseMoveWrapper_) {
+    Blockly.unbindEvent_(Blockly.onMouseMoveWrapper_);
+    Blockly.onMouseMoveWrapper_ = null;
+  }
 };
 
 /**

core/flyout.js

@@ -216,6 +216,9 @@ Blockly.Flyout.prototype.init = function(workspace) {
   this.eventWrappers_.concat(
       Blockly.bindEvent_(this.targetWorkspace_.getCanvas(),
       'blocklyWorkspaceChange', this, this.filterForCapacity_));
+  // Dragging the flyout up and down.
+  this.eventWrappers_.concat(Blockly.bindEvent_(this.svgGroup_,
+      'mousedown', this, this.onMouseDown_));
 };
 
 /**
@@ -282,8 +285,8 @@ Blockly.Flyout.prototype.wheel_ = function(e) {
     }
     var metrics = this.getMetrics_();
     var y = metrics.viewTop + delta;
-    y = Math.max(y, 0);
     y = Math.min(y, metrics.contentHeight - metrics.viewHeight);
+    y = Math.max(y, 0);
     this.scrollbar_.set(y);
     // Don't scroll the page.
     e.preventDefault();
@@ -511,14 +514,50 @@ Blockly.Flyout.prototype.blockMouseDown_ = function(block) {
       Blockly.Flyout.startFlyout_ = flyout;
       Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document,
           'mouseup', this, Blockly.terminateDrag_);
-      Blockly.Flyout.onMouseMoveWrapper_ = Blockly.bindEvent_(document,
-          'mousemove', this, flyout.onMouseMove_);
+      Blockly.Flyout.onMouseMoveBlockWrapper_ = Blockly.bindEvent_(document,
+          'mousemove', this, flyout.onMouseMoveBlock_);
     }
     // This event has been handled.  No need to bubble up to the document.
     e.stopPropagation();
   };
 };
 
+/**
+ * Mouse down on the flyout background.  Start a vertical scroll drag.
+ * @param {!Event} e Mouse down event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseDown_ = function(e) {
+  if (Blockly.isRightButton(e)) {
+    return;
+  }
+  Blockly.hideChaff(true);
+  Blockly.Flyout.terminateDrag_();
+  this.startDragMouseY_ = e.clientY;
+  Blockly.Flyout.onMouseMoveWrapper_ = Blockly.bindEvent_(document, 'mousemove',
+      this, this.onMouseMove_);
+  Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document, 'mouseup',
+      this, Blockly.Flyout.terminateDrag_);
+  // This event has been handled.  No need to bubble up to the document.
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+/**
+ * Handle a mouse-move to vertically drag the flyout.
+ * @param {!Event} e Mouse move event.
+ * @private
+ */
+Blockly.Flyout.prototype.onMouseMove_ = function(e) {
+  var dy = e.clientY - this.startDragMouseY_;
+  this.startDragMouseY_ = e.clientY;
+  var metrics = this.getMetrics_();
+  var y = metrics.viewTop - dy;
+  y = Math.min(y, metrics.contentHeight - metrics.viewHeight);
+  y = Math.max(y, 0);
+  this.scrollbar_.set(y);
+};
+
 /**
  * Mouse button is down on a block in a non-closing flyout.  Create the block
  * if the mouse moves beyond a small radius.  This allows one to play with
@@ -526,7 +565,7 @@ Blockly.Flyout.prototype.blockMouseDown_ = function(block) {
  * @param {!Event} e Mouse move event.
  * @private
  */
-Blockly.Flyout.prototype.onMouseMove_ = function(e) {
+Blockly.Flyout.prototype.onMouseMoveBlock_ = function(e) {
   if (e.type == 'mousemove' && e.clientX <= 1 && e.clientY == 0 &&
       e.button == 0) {
     /* HACK:
@@ -615,10 +654,18 @@ Blockly.Flyout.terminateDrag_ = function() {
     Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_);
     Blockly.Flyout.onMouseUpWrapper_ = null;
   }
+  if (Blockly.Flyout.onMouseMoveBlockWrapper_) {
+    Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveBlockWrapper_);
+    Blockly.Flyout.onMouseMoveBlockWrapper_ = null;
+  }
   if (Blockly.Flyout.onMouseMoveWrapper_) {
     Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveWrapper_);
     Blockly.Flyout.onMouseMoveWrapper_ = null;
   }
+  if (Blockly.Flyout.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_);
+    Blockly.Flyout.onMouseUpWrapper_ = null;
+  }
   Blockly.Flyout.startDownEvent_ = null;
   Blockly.Flyout.startBlock_ = null;
   Blockly.Flyout.startFlyout_ = null;

core/inject.js

@@ -274,7 +274,6 @@ Blockly.createDom_ = function(container) {
       Blockly.mainWorkspace.flyout_ = new Blockly.Flyout();
       var flyout = Blockly.mainWorkspace.flyout_;
       var flyoutSvg = flyout.createDom();
-      flyout.init(Blockly.mainWorkspace);
       flyout.autoClose = false;
       // Insert the flyout behind the workspace so that blocks appear on top.
       goog.dom.insertSiblingBefore(flyoutSvg, Blockly.mainWorkspace.svgGroup_);
@@ -371,7 +370,6 @@ Blockly.init_ = function() {
   // Also, 'keydown' has to be on the whole document since the browser doesn't
   // understand a concept of focus on the SVG image.
   Blockly.bindEvent_(Blockly.svg, 'mousedown', null, Blockly.onMouseDown_);
-  Blockly.bindEvent_(Blockly.svg, 'mousemove', null, Blockly.onMouseMove_);
   Blockly.bindEvent_(Blockly.svg, 'contextmenu', null, Blockly.onContextMenu_);
   Blockly.bindEvent_(Blockly.WidgetDiv.DIV, 'contextmenu', null,
                      Blockly.onContextMenu_);