Improve performance of block dragging. This is a backport of the blo… (#732)

Improve performance of block dragging.  This is a backport of the block drag surface from scratch-blocks.  At the beginning of a block drag, blocks get moved to a drag surface which then translates using translate3d to avoid repainting the entire svg on every mouse move.  At the end of the drag, the blocks are dropped back in the svg in their new position.

core/utils.js

@@ -239,6 +239,15 @@ Blockly.isTargetInput_ = function(e) {
          e.target.isContentEditable;
 };
 
+/**
+ * Static regex to pull the x,y,z values out of a translate3d() style property.
+ * Accounts for same exceptions as XY_REGEXP_.
+ * @type {!RegExp}
+ * @private
+ */
+Blockly.XY_3D_REGEXP_ =
+  /transform:\s*translate3d\(\s*([-+\d.e]+)px([ ,]\s*([-+\d.e]+)\s*)px([ ,]\s*([-+\d.e]+)\s*)px\)?/;
+
 /**
  * Return the coordinates of the top-left corner of this element relative to
  * its parent.  Only for SVG elements and children (e.g. rect, g, path).
@@ -266,6 +275,18 @@ Blockly.getRelativeXY_ = function(element) {
       xy.y += parseFloat(r[3]);
     }
   }
+
+  // Third, check for style="transform: translate3d(...)".
+  var style = element.getAttribute('style');
+  if (style && style.indexOf('translate3d') > -1) {
+    var styleComponents = style.match(Blockly.XY_3D_REGEXP_);
+    if (styleComponents) {
+      xy.x += parseFloat(styleComponents[1]);
+      if (styleComponents[3]) {
+        xy.y += parseFloat(styleComponents[3]);
+      }
+    }
+  }
   return xy;
 };
 
@@ -719,3 +740,43 @@ Blockly.utils.wrapToText_ = function(words, wordBreaks) {
   }
   return text.join('');
 };
+
+/**
+ * Check if 3D transforms are supported by adding an element
+ * and attempting to set the property.
+ * @return {boolean} true if 3D transforms are supported
+ */
+Blockly.is3dSupported = function() {
+  if (Blockly.cache3dSupported_ !== null) {
+    return Blockly.cache3dSupported_;
+  }
+  // CC-BY-SA Lorenzo Polidori
+  // https://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
+  if (!goog.global.getComputedStyle) {
+    return false;
+  }
+
+  var el = document.createElement('p'),
+    has3d,
+    transforms = {
+      'webkitTransform': '-webkit-transform',
+      'OTransform': '-o-transform',
+      'msTransform': '-ms-transform',
+      'MozTransform': '-moz-transform',
+      'transform': 'transform'
+    };
+
+  // Add it to the body to get the computed style.
+  document.body.insertBefore(el, null);
+
+  for (var t in transforms) {
+    if (el.style[t] !== undefined) {
+      el.style[t] = 'translate3d(1px,1px,1px)';
+      has3d = goog.global.getComputedStyle(el).getPropertyValue(transforms[t]);
+    }
+  }
+
+  document.body.removeChild(el);
+  Blockly.cache3dSupported_ = !!(has3d && has3d !== 'none');
+  return Blockly.cache3dSupported_;
+};