Add a function to get the shape object of a connection, and use it

blockly_uncompressed.js

@@ -98,6 +98,7 @@ goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/
 goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_rendering.js", ['Blockly.blockRendering'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.ConstantProvider', 'Blockly.geras.HighlightConstantProvider', 'Blockly.geras.RenderInfo', 'Blockly.geras.Drawer', 'Blockly.thrasos.RenderInfo', 'Blockly.zelos.RenderInfo', 'Blockly.zelos.ConstantProvider']);
 goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/constants.js", ['Blockly.blockRendering.ConstantProvider'], ['Blockly.utils.svgPaths']);
 goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/measurables.js", ['Blockly.blockRendering.InRowSpacer'], ['Blockly.blockRendering.Measurable']);
+goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/shape_map.js", [], []);
 goog.addDependency("../../../" + dir + "/core/renderers/geras/drawer.js", ['Blockly.geras.Drawer'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.blockRendering.Drawer', 'Blockly.geras.Highlighter', 'Blockly.geras.RenderInfo']);
 goog.addDependency("../../../" + dir + "/core/renderers/geras/highlight_constants.js", ['Blockly.geras.HighlightConstantProvider'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.utils.svgPaths']);
 goog.addDependency("../../../" + dir + "/core/renderers/geras/highlighter.js", ['Blockly.geras.Highlighter'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);

core/renderers/block_rendering_rewrite/block_render_draw.js

@@ -143,7 +143,7 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
       this.outlinePath_ +=
           this.constants_.OUTSIDE_CORNERS.topLeft;
     } else if (elem.type == 'previous connection') {
-      this.outlinePath_ += topRow.notchShape.pathLeft;
+      this.outlinePath_ += elem.shape.pathLeft;
     } else if (elem.type == 'hat') {
       this.outlinePath_ += this.constants_.START_HAT.path;
     } else if (elem.isSpacer()) {
@@ -179,7 +179,7 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
 
   this.outlinePath_ +=
       Blockly.utils.svgPaths.lineOnAxis('H', input.xPos + input.width) +
-      input.connectionShape.pathDown +
+      input.shape.pathDown +
       Blockly.utils.svgPaths.lineOnAxis('v', row.height - input.connectionHeight);
 };
 
@@ -196,7 +196,7 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
   var x = input.xPos + input.width;
 
   var innerTopLeftCorner =
-      input.notchShape.pathRight +
+      input.shape.pathRight +
       Blockly.utils.svgPaths.lineOnAxis('h',
           -(input.notchOffset - this.constants_.INSIDE_CORNERS.width)) +
       this.constants_.INSIDE_CORNERS.pathTop;
@@ -241,7 +241,7 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
 
   for (var i = elems.length - 1, elem; (elem = elems[i]); i--) {
     if (elem.isNextConnection()) {
-      this.outlinePath_ += bottomRow.notchShape.pathRight;
+      this.outlinePath_ += elem.shape.pathRight;
     } else if (elem.isSquareCorner()) {
       this.outlinePath_ += Blockly.utils.svgPaths.lineOnAxis('H', bottomRow.xPos);
     } else if (elem.isRoundedCorner()) {
@@ -267,7 +267,7 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
     // Draw a line up to the bottom of the tab.
     this.outlinePath_ +=
         Blockly.utils.svgPaths.lineOnAxis('V', tabBottom) +
-        outputConnection.connectionShape.pathUp;
+        outputConnection.shape.pathUp;
   }
   // Close off the path.  This draws a vertical line up to the start of the
   // block's path, which may be either a rounded or a sharp corner.
@@ -347,7 +347,7 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {
 
   this.inlinePath_ += Blockly.utils.svgPaths.moveTo(connectionRight, yPos) +
       Blockly.utils.svgPaths.lineOnAxis('v', connectionTop) +
-      input.connectionShape.pathDown +
+      input.shape.pathDown +
       Blockly.utils.svgPaths.lineOnAxis('v', height - connectionBottom) +
       Blockly.utils.svgPaths.lineOnAxis('h', width - input.connectionWidth) +
       Blockly.utils.svgPaths.lineOnAxis('v', -height) +

core/renderers/block_rendering_rewrite/constants.js

@@ -354,4 +354,24 @@ Blockly.blockRendering.ConstantProvider.prototype.makeOutsideCorners = function(
   };
 };
 
-
+/**
+ * Get an object with connection shape and sizing information based on the type
+ * of the connection.
+ * @param {!Blockly.RenderedConnection} connection The connection to find a
+ *     shape object for
+ * @return {!Object} The shape object for the connection.
+ * @package
+ */
+Blockly.blockRendering.ConstantProvider.prototype.shapeFor = function(
+    connection) {
+  switch (connection.type) {
+    case Blockly.INPUT_VALUE:
+    case Blockly.OUTPUT_VALUE:
+      return this.PUZZLE_TAB;
+    case Blockly.PREVIOUS_STATEMENT:
+    case Blockly.NEXT_STATEMENT:
+      return this.NOTCH;
+    default:
+      throw new Error('Unknown type');
+  }
+};

core/renderers/block_rendering_rewrite/measurables.js

@@ -89,7 +89,7 @@ goog.inherits(Blockly.blockRendering.Hat, Blockly.blockRendering.Measurable);
 Blockly.blockRendering.SquareCorner = function() {
   Blockly.blockRendering.SquareCorner.superClass_.constructor.call(this);
   this.type = 'square corner';
-  this.height = this.notchShape.height;
+  this.height = this.constants_.NOTCH.height;
   this.width = this.constants_.NO_PADDING;
 
 };
@@ -108,7 +108,7 @@ Blockly.blockRendering.RoundCorner = function() {
   this.width = this.constants_.CORNER_RADIUS;
   // The rounded corner extends into the next row by 4 so we only take the
   // height that is aligned with this row.
-  this.height = this.notchShape.height;
+  this.height = this.constants_.NOTCH.height;
 
 };
 goog.inherits(Blockly.blockRendering.RoundCorner, Blockly.blockRendering.Measurable);

core/renderers/measurables/base.js

@@ -45,8 +45,6 @@ Blockly.blockRendering.Measurable = function() {
   this.centerline = 0;
 
   this.constants_ = Blockly.blockRendering.getConstants();
-  this.connectionShape = this.constants_.PUZZLE_TAB;
-  this.notchShape = this.constants_.NOTCH;
   this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
 };
 

core/renderers/measurables/connections.js

@@ -43,6 +43,7 @@ goog.require('Blockly.RenderedConnection');
 Blockly.blockRendering.Connection = function(connectionModel) {
   Blockly.blockRendering.Connection.superClass_.constructor.call(this);
   this.connectionModel = connectionModel;
+  this.shape = this.constants_.shapeFor(connectionModel);
 };
 goog.inherits(Blockly.blockRendering.Connection,
     Blockly.blockRendering.Measurable);
@@ -60,8 +61,8 @@ Blockly.blockRendering.OutputConnection = function(connectionModel) {
   Blockly.blockRendering.OutputConnection.superClass_.constructor.call(this,
       connectionModel);
   this.type = 'output connection';
-  this.height = this.connectionShape.height;
-  this.width = this.connectionShape.width;
+  this.height = this.shape.height;
+  this.width = this.shape.width;
   this.connectionOffsetY = this.constants_.TAB_OFFSET_FROM_TOP;
   this.startX = this.width;
 };
@@ -81,8 +82,8 @@ Blockly.blockRendering.PreviousConnection = function(connectionModel) {
   Blockly.blockRendering.PreviousConnection.superClass_.constructor.call(this,
       connectionModel);
   this.type = 'previous connection';
-  this.height = this.notchShape.height;
-  this.width = this.notchShape.width;
+  this.height = this.shape.height;
+  this.width = this.shape.width;
 
 };
 goog.inherits(Blockly.blockRendering.PreviousConnection,
@@ -101,8 +102,8 @@ Blockly.blockRendering.NextConnection = function(connectionModel) {
   Blockly.blockRendering.NextConnection.superClass_.constructor.call(this,
       connectionModel);
   this.type = 'next connection';
-  this.height = this.notchShape.height;
-  this.width = this.notchShape.width;
+  this.height = this.shape.height;
+  this.width = this.shape.width;
 };
 goog.inherits(Blockly.blockRendering.NextConnection,
     Blockly.blockRendering.Connection);

core/renderers/measurables/inputs.js

@@ -84,7 +84,7 @@ Blockly.blockRendering.InlineInput = function(input) {
 
   if (!this.connectedBlock) {
     this.height = this.constants_.EMPTY_INLINE_INPUT_HEIGHT;
-    this.width = this.connectionShape.width +
+    this.width = this.shape.width +
         this.constants_.EMPTY_INLINE_INPUT_PADDING;
   } else {
     // We allow the dark path to show on the parent block so that the child
@@ -95,8 +95,8 @@ Blockly.blockRendering.InlineInput = function(input) {
   }
 
   this.connectionOffsetY = this.constants_.TAB_OFFSET_FROM_TOP;
-  this.connectionHeight = this.connectionShape.height;
-  this.connectionWidth = this.connectionShape.width;
+  this.connectionHeight = this.shape.height;
+  this.connectionWidth = this.shape.width;
 };
 goog.inherits(Blockly.blockRendering.InlineInput,
     Blockly.blockRendering.InputConnection);
@@ -121,11 +121,11 @@ Blockly.blockRendering.StatementInput = function(input) {
     this.height =
         this.connectedBlockHeight + this.constants_.STATEMENT_BOTTOM_SPACER;
     if (this.connectedBlock.nextConnection) {
-      this.height -= this.notchShape.height;
+      this.height -= this.shape.height;
     }
   }
   this.width = this.constants_.NOTCH_OFFSET_LEFT +
-      this.notchShape.width;
+      this.shape.width;
 };
 goog.inherits(Blockly.blockRendering.StatementInput,
     Blockly.blockRendering.InputConnection);
@@ -145,17 +145,17 @@ Blockly.blockRendering.ExternalValueInput = function(input) {
   this.type = 'external value input';
 
   if (!this.connectedBlock) {
-    this.height = this.connectionShape.height;
+    this.height = this.shape.height;
   } else {
     this.height =
         this.connectedBlockHeight - 2 * this.constants_.TAB_OFFSET_FROM_TOP;
   }
-  this.width = this.connectionShape.width +
+  this.width = this.shape.width +
       this.constants_.EXTERNAL_VALUE_INPUT_PADDING;
 
   this.connectionOffsetY = this.constants_.TAB_OFFSET_FROM_TOP;
-  this.connectionHeight = this.connectionShape.height;
-  this.connectionWidth = this.connectionShape.width;
+  this.connectionHeight = this.shape.height;
+  this.connectionWidth = this.shape.width;
 };
 goog.inherits(Blockly.blockRendering.ExternalValueInput,
     Blockly.blockRendering.InputConnection);

core/renderers/measurables/rows.js

@@ -146,8 +146,6 @@ Blockly.blockRendering.Row = function() {
   this.hasJaggedEdge = false;
 
   this.constants_ = Blockly.blockRendering.getConstants();
-  this.connectionShape = this.constants_.PUZZLE_TAB;
-  this.notchShape = this.constants_.NOTCH;
   this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
 };
 
@@ -370,7 +368,7 @@ Blockly.blockRendering.BottomRow.prototype.populate = function(block) {
   if (followsStatement) {
     this.minHeight = this.constants_.LARGE_PADDING;
   } else {
-    this.minHeight = this.notchShape.height;
+    this.minHeight = this.constants_.NOTCH.height;
   }
 
   var squareCorner = !!block.outputConnection || !!block.getNextBlock();

core/renderers/zelos/constants.js

@@ -45,11 +45,9 @@ goog.inherits(Blockly.zelos.ConstantProvider,
 /**
  * @override
  */
-Blockly.zelos.ConstantProvider.prototype.makePuzzleTab = function() {
-  // Example replacement of one connection shape with another.
-  // Eventually this will be replaced by a lookup based on connection type.
-  // For now this just makes Zelos visibly different from Thrasos.
-  return this.makeTriangle();
+Blockly.zelos.ConstantProvider.prototype.init = function() {
+  Blockly.zelos.ConstantProvider.superClass_.init.call(this);
+  this.TRIANGLE = this.makeTriangle();
 };
 
 /**
@@ -80,3 +78,25 @@ Blockly.zelos.ConstantProvider.prototype.makeTriangle = function() {
     pathUp: pathUp
   };
 };
+
+/**
+ * @override
+ */
+Blockly.zelos.ConstantProvider.prototype.shapeFor = function(
+    connection) {
+  var checks = connection.getCheck();
+  switch (connection.type) {
+    case Blockly.INPUT_VALUE:
+    case Blockly.OUTPUT_VALUE:
+      // Includes doesn't work in IE.
+      if (checks && checks.indexOf('Boolean') != -1) {
+        return Blockly.blockRendering.constants.TRIANGLE;
+      }
+      return Blockly.blockRendering.constants.PUZZLE_TAB;
+    case Blockly.PREVIOUS_STATEMENT:
+    case Blockly.NEXT_STATEMENT:
+      return this.NOTCH;
+    default:
+      throw new Error('Unknown type');
+  }
+};