From 8f675fd82eec857816a3afba5bdbf188d51dd5a7 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Fri, 24 Aug 2018 11:55:55 -0700
Subject: [PATCH 1/2] Add support for transitioning the workspace block and
 bubble canvases on scrollCenter

---
 core/css.js           |  5 +++++
 core/workspace_svg.js | 26 ++++++++++++++++++++++++++
 core/zoom_controls.js |  4 ++++
 3 files changed, 35 insertions(+)

diff --git a/core/css.js b/core/css.js
index 4a2eca012..b799ff687 100644
--- a/core/css.js
+++ b/core/css.js
@@ -164,6 +164,11 @@ Blockly.Css.CONTENT = [
     'z-index: 50;', /* Display below toolbox, but above everything else. */
   '}',
 
+  '.blocklyBlockCanvas.blocklyCanvasTransitioning,',
+  '.blocklyBubbleCanvas.blocklyCanvasTransitioning {',
+    'transition: transform 0.5s;',
+  '}',
+
   '.blocklyTooltipDiv {',
     'background-color: #ffffc7;',
     'border: 1px solid #ddc;',
diff --git a/core/workspace_svg.js b/core/workspace_svg.js
index ce6e91174..6daf03c51 100644
--- a/core/workspace_svg.js
+++ b/core/workspace_svg.js
@@ -1595,6 +1595,32 @@ Blockly.WorkspaceSvg.prototype.zoomToFit = function() {
   this.scrollCenter();
 };
 
+/**
+ * Add a transition class to the block and bubble canvas, to animate any
+ * transform changes.
+ * @package
+ */
+Blockly.WorkspaceSvg.prototype.beginCanvasTransition = function() {
+  Blockly.utils.addClass(
+      /** @type {!SVGElement} */ this.svgBlockCanvas_,
+      'blocklyCanvasTransitioning');
+  Blockly.utils.addClass(
+      /** @type {!SVGElement} */ this.svgBubbleCanvas_,
+      'blocklyCanvasTransitioning');
+};
+
+/**
+ * Remove transition class from the block and bubble canvas.
+ * @package
+ */
+Blockly.WorkspaceSvg.prototype.endCanvasTransition = function() {
+  Blockly.utils.removeClass(
+      /** @type {!SVGElement} */ this.svgBlockCanvas_,
+      'blocklyCanvasTransitioning');
+  Blockly.utils.removeClass(
+      /** @type {!SVGElement} */ this.svgBubbleCanvas_,
+      'blocklyCanvasTransitioning');
+};
 /**
  * Center the workspace.
  */
diff --git a/core/zoom_controls.js b/core/zoom_controls.js
index 40908a99b..ad09fbf04 100644
--- a/core/zoom_controls.js
+++ b/core/zoom_controls.js
@@ -302,7 +302,11 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
   Blockly.bindEventWithChecks_(zoomresetSvg, 'mousedown', null, function(e) {
     ws.markFocused();
     ws.setScale(ws.options.zoomOptions.startScale);
+    ws.beginCanvasTransition();
     ws.scrollCenter();
+    setTimeout(function() {
+      ws.endCanvasTransition();
+    }, 500);
     Blockly.Touch.clearTouchIdentifier();  // Don't block future drags.
     e.stopPropagation();  // Don't start a workspace scroll.
     e.preventDefault();  // Stop double-clicking from selecting text.

From 48dac195f7395231d2ee28f4b9630138e34475f9 Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Mon, 27 Aug 2018 11:23:24 -0700
Subject: [PATCH 2/2] CSS style

---
 core/css.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/css.js b/core/css.js
index b799ff687..871042784 100644
--- a/core/css.js
+++ b/core/css.js
@@ -166,7 +166,7 @@ Blockly.Css.CONTENT = [
 
   '.blocklyBlockCanvas.blocklyCanvasTransitioning,',
   '.blocklyBubbleCanvas.blocklyCanvasTransitioning {',
-    'transition: transform 0.5s;',
+    'transition: transform .5s;',
   '}',
 
   '.blocklyTooltipDiv {',