From 3d6eb489370839bbfaddeb8e73d75b3051d4fb4b Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <sam.elhusseini@gmail.com>
Date: Wed, 23 Oct 2019 21:58:18 -0400
Subject: [PATCH] Render a notch after a statement input in zelos (#3326)

---
 core/renderers/common/constants.js |  3 +++
 core/renderers/common/info.js      |  3 ++-
 core/renderers/zelos/constants.js  |  9 +++++++++
 core/renderers/zelos/drawer.js     | 32 ++++++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index b300d7de1..9817ef531 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -74,6 +74,9 @@ Blockly.blockRendering.ConstantProvider = function() {
   this.STATEMENT_INPUT_PADDING_LEFT = 20;
   this.BETWEEN_STATEMENT_PADDING_Y = 4;
 
+  // The minimum height of the bottom row following a statement input.
+  this.AFTER_STATEMENT_BOTTOM_ROW_MIN_HEIGHT = this.LARGE_PADDING;
+
   // This is the max width of a bottom row that follows a statement input and
   // has inputs inline.
   this.MAX_BOTTOM_WIDTH = 66.5;
diff --git a/core/renderers/common/info.js b/core/renderers/common/info.js
index 3e1bb7074..4ca93c78e 100644
--- a/core/renderers/common/info.js
+++ b/core/renderers/common/info.js
@@ -307,7 +307,8 @@ Blockly.blockRendering.RenderInfo.prototype.populateBottomRow_ = function() {
   // This is the minimum height for the row. If one of its elements has a
   // greater height it will be overwritten in the compute pass.
   if (followsStatement) {
-    this.bottomRow.minHeight = this.constants_.LARGE_PADDING;
+    this.bottomRow.minHeight =
+      this.constants_.AFTER_STATEMENT_BOTTOM_ROW_MIN_HEIGHT;
   } else {
     this.bottomRow.minHeight = this.constants_.MEDIUM_PADDING;
   }
diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js
index 9a7e5f415..4ac5429c2 100644
--- a/core/renderers/zelos/constants.js
+++ b/core/renderers/zelos/constants.js
@@ -70,6 +70,15 @@ Blockly.zelos.ConstantProvider = function() {
    */
   this.TAB_OFFSET_FROM_TOP = 0;
 
+  /**
+   * @override
+   */
+  this.STATEMENT_BOTTOM_SPACER = -this.NOTCH_HEIGHT;
+
+  /**
+   * @override
+   */
+  this.AFTER_STATEMENT_BOTTOM_ROW_MIN_HEIGHT = this.LARGE_PADDING * 2;
 };
 Blockly.utils.object.inherits(Blockly.zelos.ConstantProvider,
     Blockly.blockRendering.ConstantProvider);
diff --git a/core/renderers/zelos/drawer.js b/core/renderers/zelos/drawer.js
index 584c3d286..58d190463 100644
--- a/core/renderers/zelos/drawer.js
+++ b/core/renderers/zelos/drawer.js
@@ -211,3 +211,35 @@ Blockly.zelos.Drawer.prototype.drawInlineInput_ = function(input) {
   // Don't draw an inline input.
   this.positionInlineInputConnection_(input);
 };
+
+/**
+ * @override
+ */
+Blockly.zelos.Drawer.prototype.drawStatementInput_ = function(row) {
+  var input = row.getLastInput();
+  // Where to start drawing the notch, which is on the right side in LTR.
+  var x = input.xPos + input.notchOffset + input.shape.width;
+
+  var innerTopLeftCorner =
+      input.shape.pathRight +
+      Blockly.utils.svgPaths.lineOnAxis('h',
+          -(input.notchOffset - this.constants_.INSIDE_CORNERS.width)) +
+      this.constants_.INSIDE_CORNERS.pathTop;
+
+  var innerHeight =
+      row.height - (2 * this.constants_.INSIDE_CORNERS.height);
+
+  var innerBottomLeftCorner =
+    this.constants_.INSIDE_CORNERS.pathBottom +
+    Blockly.utils.svgPaths.lineOnAxis('h',
+        (input.notchOffset - this.constants_.INSIDE_CORNERS.width)) +
+    input.shape.pathLeft;
+
+  this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('H', x) +
+      innerTopLeftCorner +
+      Blockly.utils.svgPaths.lineOnAxis('v', innerHeight) +
+      innerBottomLeftCorner +
+      Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width);
+
+  this.positionStatementInputConnection_(row);
+};