ghost blocks

core/block.js

@@ -102,6 +102,11 @@ Blockly.Block = function(workspace, prototypeName, opt_id) {
   /** @type {boolean} */
   this.RTL = workspace.RTL;
 
+  /** @type {Blockly.Block} */
+  this.ghostBlock_ = null;
+  /** @type {boolean} */
+  this.isGhost_ = false;
+
   // Copy the type-specific functions and data from the prototype.
   if (prototypeName) {
     /** @type {string} */
@@ -191,6 +196,10 @@ Blockly.Block.prototype.dispose = function(healStack) {
     Blockly.selected = null;
   }
 
+  if (this.ghostBlock_) {
+    this.ghostBlock_.dispose();
+  }
+
   // First, dispose of all my children.
   for (var i = this.childBlocks_.length - 1; i >= 0; i--) {
     this.childBlocks_[i].dispose(false);
@@ -524,6 +533,29 @@ Blockly.Block.prototype.setShadow = function(shadow) {
   }
 };
 
+/**
+ * Get whether this block is a ghost block or not.
+ * @return {boolean} True if a ghost.
+ */
+Blockly.Block.prototype.isGhost = function() {
+  return this.isGhost_;
+};
+
+/**
+ * Set whether this block is a ghost block or not.
+ * @param {boolean} ghost True if a ghost.
+ */
+Blockly.Block.prototype.setGhost = function(ghost) {
+  if (this.isGhost_ == ghost) {
+    return;  // No change.
+  }
+  this.isGhost_ = ghost;
+  if (this.isGhost_) {
+    //this.setConnectionsHidden(true);
+    this.setColour("#949494");
+  }
+};
+
 /**
  * Get whether this block is editable or not.
  * @return {boolean} True if editable.

core/block_svg.js

@@ -202,6 +202,11 @@ Blockly.BlockSvg.terminateDrag_ = function() {
   if (Blockly.dragMode_ == 2) {
     // Terminate a drag operation.
     if (selected) {
+      if (selected.ghostBlock_) {
+        selected.ghostBlock_.unplug(true /* healStack */);
+        selected.ghostBlock_.dispose();
+        selected.ghostBlock_ = null;
+      }
       // Update the connection locations.
       var xy = selected.getRelativeToSurfaceXY();
       var dxy = goog.math.Coordinate.difference(xy, selected.dragStartXY_);
@@ -677,6 +682,7 @@ Blockly.BlockSvg.prototype.onMouseMove_ = function(e) {
     var closestConnection = null;
     var localConnection = null;
     var radiusConnection = Blockly.SNAP_RADIUS;
+    var connectionIndex = -1;
     for (var i = 0; i < myConnections.length; i++) {
       var myConnection = myConnections[i];
       var neighbour = myConnection.closest(radiusConnection, dx, dy);
@@ -684,12 +690,18 @@ Blockly.BlockSvg.prototype.onMouseMove_ = function(e) {
         closestConnection = neighbour.connection;
         localConnection = myConnection;
         radiusConnection = neighbour.radius;
+        connectionIndex = i;
       }
     }
 
     // Remove connection highlighting if needed.
     if (Blockly.highlightedConnection_ &&
         Blockly.highlightedConnection_ != closestConnection) {
+      if (this.ghostBlock_) {
+        this.ghostBlock_.unplug(true /* healStack */);
+        this.ghostBlock_.dispose();
+        this.ghostBlock_ = null;
+      }
       Blockly.highlightedConnection_.unhighlight();
       Blockly.highlightedConnection_ = null;
       Blockly.localConnection_ = null;
@@ -700,6 +712,24 @@ Blockly.BlockSvg.prototype.onMouseMove_ = function(e) {
       closestConnection.highlight();
       Blockly.highlightedConnection_ = closestConnection;
       Blockly.localConnection_ = localConnection;
+      if (!this.ghostBlock_){
+        this.ghostBlock_ = workspace.newBlock(this.type);
+        this.ghostBlock_.setGhost(true);
+        this.ghostBlock_.moveConnections_(radiusConnection);
+      }
+      // if (connectionIndex != -1) {
+      //   console.log(connectionIndex);
+      //   this.ghostBlock_.getConnections_(false)[connectionIndex].connect(closestConnection);
+      // }
+      if (Blockly.localConnection_ == this.previousConnection) {
+        var spliceConnection = closestConnection.targetConnection;
+        this.ghostBlock_.previousConnection.connect(closestConnection);
+        this.ghostBlock_.nextConnection.connect(spliceConnection);
+      }
+      //else if (Blockly.localConnection_ == this.nextConnection) {
+      //   this.ghostBlock_.nextConnection.connect(closestConnection);
+      // } else if (Blockly.localConnection_. == this.)
+      this.ghostBlock_.render(true);
     }
     // Provide visual indication of whether the block will be deleted if
     // dropped here.
@@ -755,6 +785,15 @@ Blockly.BlockSvg.prototype.setShadow = function(shadow) {
   this.updateColour();
 };
 
+/**
+ * Set whether this block is a ghost block or not.
+ * @param {boolean} ghost True if a ghost.
+ */
+Blockly.BlockSvg.prototype.setGhost = function(ghost) {
+  Blockly.BlockSvg.superClass_.setGhost.call(this, ghost);
+  this.updateColour();
+};
+
 /**
  * Return the root node of the SVG or null if none exists.
  * @return {Element} The root SVG node (probably a group).
@@ -1425,7 +1464,7 @@ Blockly.BlockSvg.prototype.renderDraw_ = function(metrics) {
   }
 
   // Position icon
-  if (metrics.icon) {
+  if (!this.isGhost_ && metrics.icon && metrics.icon.getSvgRoot()) {
     var icon = metrics.icon.getSvgRoot();
     var iconSize = metrics.icon.getSize();
     icon.setAttribute('transform',