Move the rendering object to live on the workspace_svg (#3016)

* Move the rendering object onto the workspace allowing the various workspaces to have different renderers.
2026-01-07 00:50:27 +01:00 · 2019-09-13 14:20:34 -07:00
parent fc420b7037
commit e339ae26bc
24 changed files with 446 additions and 169 deletions
--- a/core/block_svg.js
+++ b/core/block_svg.js
@@ -47,7 +47,7 @@ goog.require('Blockly.utils.Rect');
 /**
 * Class for a block's SVG representation.
 * Not normally called directly, workspace.newBlock() is preferred.
- * @param {!Blockly.Workspace} workspace The block's workspace.
+ * @param {!Blockly.WorkspaceSvg} workspace The block's workspace.
 * @param {?string} prototypeName Name of the language object containing
 *     type-specific functions for this block.
 * @param {string=} opt_id Optional ID.  Use this ID if provided, otherwise
@@ -1546,8 +1546,7 @@ Blockly.BlockSvg.prototype.positionNearConnection = function(sourceConnection,
 Blockly.BlockSvg.prototype.render = function(opt_bubble) {
  Blockly.utils.dom.startTextWidthCache();
  this.rendered = true;
-  // TODO (#2702): Choose an API for picking the renderer.
-  Blockly.blockRendering.render(this);
+  (/** @type {!Blockly.WorkspaceSvg} */ (this.workspace)).getRenderer().render(this);
  // No matter how we rendered, connection locations should now be correct.
  this.updateConnectionLocations_();
  if (opt_bubble !== false) {
--- a/core/flyout_base.js
+++ b/core/flyout_base.js
@@ -55,7 +55,7 @@ Blockly.Flyout = function(workspaceOptions) {
  workspaceOptions.setMetrics = this.setMetrics_.bind(this);

  /**
-   * @type {!Blockly.Workspace}
+   * @type {!Blockly.WorkspaceSvg}
   * @protected
   */
  this.workspace_ = new Blockly.WorkspaceSvg(workspaceOptions);
@@ -117,7 +117,7 @@ Blockly.Flyout = function(workspaceOptions) {
   * @type {number}
   * @const
   */
-  this.tabWidth_ = Blockly.blockRendering.getConstants().TAB_WIDTH;
+  this.tabWidth_ = this.workspace_.getRenderer().getConstants().TAB_WIDTH;
 };

 /**
--- a/core/rendered_connection.js
+++ b/core/rendered_connection.js
@@ -36,7 +36,7 @@ goog.require('Blockly.utils.object');

 /**
 * Class for a connection between blocks that may be rendered on screen.
- * @param {!Blockly.Block} source The block establishing this connection.
+ * @param {!Blockly.BlockSvg} source The block establishing this connection.
 * @param {number} type The type of the connection.
 * @extends {Blockly.Connection}
 * @constructor
@@ -212,19 +212,22 @@ Blockly.RenderedConnection.prototype.closest = function(maxLimit, dxy) {
 */
 Blockly.RenderedConnection.prototype.highlight = function() {
  var steps;
+  var sourceBlockSvg = /** @type {!Blockly.BlockSvg} */ (this.sourceBlock_);
+  var renderingConstants =
+    sourceBlockSvg.workspace.getRenderer().getConstants();
  if (this.type == Blockly.INPUT_VALUE || this.type == Blockly.OUTPUT_VALUE) {
    // Vertical line, puzzle tab, vertical line.
    var yLen = 5;
    steps = Blockly.utils.svgPaths.moveBy(0, -yLen) +
        Blockly.utils.svgPaths.lineOnAxis('v', yLen) +
-        Blockly.blockRendering.getConstants().PUZZLE_TAB.pathDown +
+        renderingConstants.PUZZLE_TAB.pathDown +
        Blockly.utils.svgPaths.lineOnAxis('v', yLen);
  } else {
    var xLen = 5;
    // Horizontal line, notch, horizontal line.
    steps = Blockly.utils.svgPaths.moveBy(-xLen, 0) +
        Blockly.utils.svgPaths.lineOnAxis('h', xLen) +
-        Blockly.blockRendering.getConstants().NOTCH.pathLeft +
+        renderingConstants.NOTCH.pathLeft +
        Blockly.utils.svgPaths.lineOnAxis('h', xLen);
  }
  var xy = this.sourceBlock_.getRelativeToSurfaceXY();
--- a/core/renderers/common/block_rendering.js
+++ b/core/renderers/common/block_rendering.js
@@ -33,13 +33,6 @@ goog.provide('Blockly.blockRendering');
 goog.require('Blockly.utils.object');


-/**
- * The current renderer.
- * @type {Blockly.blockRendering.Renderer}
- * @private
- */
-Blockly.blockRendering.renderer_ = null;
-
 /**
 * The set of all registered renderers, keyed by their name.
 * @type {!Object<string, !Function>}
@@ -73,7 +66,7 @@ Blockly.blockRendering.register = function(name, rendererClass) {
 * @package
 */
 Blockly.blockRendering.startDebugger = function() {
-  Blockly.blockRendering.useDebugger_ = true;
+  Blockly.blockRendering.useDebugger = true;
 };

 /**
@@ -81,12 +74,14 @@ Blockly.blockRendering.startDebugger = function() {
 * @package
 */
 Blockly.blockRendering.stopDebugger = function() {
-  Blockly.blockRendering.useDebugger_ = false;
+  Blockly.blockRendering.useDebugger = false;
 };

 /**
 * Initialize anything needed for rendering (constants, etc).
 * @param {!string} name Name of the renderer to initialize.
+ * @return {!Blockly.blockRendering.Renderer} The new instance of a renderer.
+ *     Already initialized.
 * @package
 */
 Blockly.blockRendering.init = function(name) {
@@ -104,32 +99,7 @@ Blockly.blockRendering.init = function(name) {
  };
  Blockly.utils.object.inherits(rendererCtor,
      Blockly.blockRendering.rendererMap_[name]);
-  Blockly.blockRendering.renderer_ = new rendererCtor();
-  Blockly.blockRendering.renderer_.init();
-};
-
-/**
- * Render the given block, using the new rendering.
- * Developers should not call this directly.  Instead, call block.render().
- * @param {!Blockly.BlockSvg} block The block to render
- * @public
- */
-Blockly.blockRendering.render = function(block) {
-  Blockly.blockRendering.renderer_.render(block);
-};
-
-/**
- * Get the current renderer.
- * @return {Blockly.blockRendering.Renderer} The current renderer.
- */
-Blockly.blockRendering.getRenderer = function() {
-  return Blockly.blockRendering.renderer_;
-};
-
-/**
- * Get the current renderer's constant provider.
- * @return {Blockly.blockRendering.ConstantProvider} The constant provider.
- */
-Blockly.blockRendering.getConstants = function() {
-  return Blockly.blockRendering.renderer_.constants;
+  var renderer = new rendererCtor();
+  renderer.init();
+  return renderer;
 };
--- a/core/renderers/common/drawer.js
+++ b/core/renderers/common/drawer.js
@@ -52,7 +52,13 @@ Blockly.blockRendering.Drawer = function(block, info) {
  this.topLeft_ = block.getRelativeToSurfaceXY();
  this.outlinePath_ = '';
  this.inlinePath_ = '';
-  this.constants_ = Blockly.blockRendering.getConstants();
+
+  /**
+   * The renderer's constant provider.
+   * @type {!Blockly.blockRendering.ConstantProvider}
+   * @protected
+   */
+  this.constants_ = info.getRenderer().getConstants();
 };

 /**
--- a/core/renderers/common/info.js
+++ b/core/renderers/common/info.js
@@ -49,13 +49,28 @@ goog.require('Blockly.RenderedConnection');
 * may choose to rerender when getSize() is called).  However, calling it
 * repeatedly may be expensive.
 *
+ * @param {!Blockly.blockRendering.Renderer} renderer The renderer in use.
 * @param {!Blockly.BlockSvg} block The block to measure.
 * @constructor
 * @package
 */
-Blockly.blockRendering.RenderInfo = function(block) {
+Blockly.blockRendering.RenderInfo = function(renderer, block) {
  this.block_ = block;

+  /**
+   * The block renderer in use.
+   * @type {!Blockly.blockRendering.Renderer}
+   * @protected
+   */
+  this.renderer_ = renderer;
+
+  /**
+   * The renderer's constant provider.
+   * @type {!Blockly.blockRendering.ConstantProvider}
+   * @protected
+   */
+  this.constants_ = this.renderer_.getConstants();
+
  /**
   * A measurable representing the output connection if the block has one.
   * Otherwise null.
@@ -63,6 +78,7 @@ Blockly.blockRendering.RenderInfo = function(block) {
   */
  this.outputConnection = !block.outputConnection ? null :
      new Blockly.blockRendering.OutputConnection(
+          this.constants_,
          /** @type {Blockly.RenderedConnection} */(block.outputConnection));

  /**
@@ -132,20 +148,27 @@ Blockly.blockRendering.RenderInfo = function(block) {
   * An object with rendering information about the top row of the block.
   * @type {!Blockly.blockRendering.TopRow}
   */
-  this.topRow = new Blockly.blockRendering.TopRow();
+  this.topRow = new Blockly.blockRendering.TopRow(this.constants_);

  /**
   * An object with rendering information about the bottom row of the block.
   * @type {!Blockly.blockRendering.BottomRow}
   */
-  this.bottomRow = new Blockly.blockRendering.BottomRow();
+  this.bottomRow = new Blockly.blockRendering.BottomRow(this.constants_);

  // The position of the start point for drawing, relative to the block's
  // location.
  this.startX = 0;
  this.startY = 0;
+};

-  this.constants_ = Blockly.blockRendering.getConstants();
+/**
+ * Get the block renderer in use.
+ * @return {!Blockly.blockRendering.Renderer} The block renderer in use.
+ * @package
+ */
+Blockly.blockRendering.RenderInfo.prototype.getRenderer = function() {
+  return this.renderer_;
 };

 /**
@@ -175,13 +198,13 @@ Blockly.blockRendering.RenderInfo.prototype.measure = function() {
 Blockly.blockRendering.RenderInfo.prototype.createRows_ = function() {
  this.topRow.populate(this.block_);
  this.rows.push(this.topRow);
-  var activeRow = new Blockly.blockRendering.InputRow();
+  var activeRow = new Blockly.blockRendering.InputRow(this.constants_);

  // Icons always go on the first row, before anything else.
  var icons = this.block_.getIcons();
  if (icons.length) {
    for (var i = 0, icon; (icon = icons[i]); i++) {
-      var iconInfo = new Blockly.blockRendering.Icon(icon);
+      var iconInfo = new Blockly.blockRendering.Icon(this.constants_, icon);
      if (this.isCollapsed && icon.collapseHidden) {
        this.hiddenIcons.push(iconInfo);
      } else {
@@ -200,12 +223,13 @@ Blockly.blockRendering.RenderInfo.prototype.createRows_ = function() {
    if (this.shouldStartNewRow_(input, lastInput)) {
      // Finish this row and create a new one.
      this.rows.push(activeRow);
-      activeRow = new Blockly.blockRendering.InputRow();
+      activeRow = new Blockly.blockRendering.InputRow(this.constants_);
    }

    // All of the fields in an input go on the same row.
    for (var j = 0, field; (field = input.fieldRow[j]); j++) {
-      activeRow.elements.push(new Blockly.blockRendering.Field(field, input));
+      activeRow.elements.push(
+          new Blockly.blockRendering.Field(this.constants_, field, input));
    }
    this.addInput_(input, activeRow);
    lastInput = input;
@@ -213,7 +237,8 @@ Blockly.blockRendering.RenderInfo.prototype.createRows_ = function() {

  if (this.isCollapsed) {
    activeRow.hasJaggedEdge = true;
-    activeRow.elements.push(new Blockly.blockRendering.JaggedEdge());
+    activeRow.elements.push(
+        new Blockly.blockRendering.JaggedEdge(this.constants_));
  }

  if (activeRow.elements.length) {
@@ -234,13 +259,16 @@ Blockly.blockRendering.RenderInfo.prototype.createRows_ = function() {
 Blockly.blockRendering.RenderInfo.prototype.addInput_ = function(input, activeRow) {
  // Non-dummy inputs have visual representations onscreen.
  if (this.isInline && input.type == Blockly.INPUT_VALUE) {
-    activeRow.elements.push(new Blockly.blockRendering.InlineInput(input));
+    activeRow.elements.push(
+        new Blockly.blockRendering.InlineInput(this.constants_, input));
    activeRow.hasInlineInput = true;
  } else if (input.type == Blockly.NEXT_STATEMENT) {
-    activeRow.elements.push(new Blockly.blockRendering.StatementInput(input));
+    activeRow.elements.push(
+        new Blockly.blockRendering.StatementInput(this.constants_, input));
    activeRow.hasStatement = true;
  } else if (input.type == Blockly.INPUT_VALUE) {
-    activeRow.elements.push(new Blockly.blockRendering.ExternalValueInput(input));
+    activeRow.elements.push(
+        new Blockly.blockRendering.ExternalValueInput(this.constants_, input));
    activeRow.hasExternalInput = true;
  } else if (input.type == Blockly.DUMMY_INPUT) {
    // Dummy inputs have no visual representation, but the information is still
@@ -287,12 +315,13 @@ Blockly.blockRendering.RenderInfo.prototype.addElemSpacing_ = function() {
        !Blockly.blockRendering.Types.isBottomRow(row)) {
      // There's a spacer before the first element in the row.
      row.elements.push(new Blockly.blockRendering.InRowSpacer(
-          this.getInRowSpacing_(null, oldElems[0])));
+          this.constants_, this.getInRowSpacing_(null, oldElems[0])));
    }
    for (var e = 0; e < oldElems.length; e++) {
      row.elements.push(oldElems[e]);
      var spacing = this.getInRowSpacing_(oldElems[e], oldElems[e + 1]);
-      row.elements.push(new Blockly.blockRendering.InRowSpacer(spacing));
+      row.elements.push(
+          new Blockly.blockRendering.InRowSpacer(this.constants_, spacing));
    }
  }
 };
@@ -455,7 +484,8 @@ Blockly.blockRendering.RenderInfo.prototype.addRowSpacing_ = function() {
 Blockly.blockRendering.RenderInfo.prototype.makeSpacerRow_ = function(prev, next) {
  var height = this.getSpacerRowHeight_(prev, next);
  var width = this.getSpacerRowWidth_(prev, next);
-  var spacer = new Blockly.blockRendering.SpacerRow(height, width);
+  var spacer = new Blockly.blockRendering.SpacerRow(
+      this.constants_, height, width);
  if (prev.hasStatement) {
    spacer.followsStatement = true;
  }
--- a/core/renderers/common/renderer.js
+++ b/core/renderers/common/renderer.js
@@ -38,10 +38,13 @@ goog.require('Blockly.blockRendering.RenderInfo');
 * @constructor
 */
 Blockly.blockRendering.Renderer = function() {
-  this.constantProvider = Blockly.blockRendering.ConstantProvider;
-  this.renderInfo = Blockly.blockRendering.RenderInfo;
-  this.drawer = Blockly.blockRendering.Drawer;
-  this.debugger = Blockly.blockRendering.Debug;
+  
+  /**
+   * The renderer's constant provider.
+   * @type {Blockly.blockRendering.ConstantProvider}
+   * @private
+   */
+  this.constants_ = null;
 };

 /**
@@ -49,8 +52,60 @@ Blockly.blockRendering.Renderer = function() {
 * @package
 */
 Blockly.blockRendering.Renderer.prototype.init = function() {
-  this.constants = new this.constantProvider();
-  this.constants.init();
+  this.constants_ = this.makeConstants_();
+  this.constants_.init();
+};
+
+/**
+ * Create a new instance of the renderer's constant provider.
+ * @return {!Blockly.blockRendering.ConstantProvider} The constant provider.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeConstants_ = function() {
+  return new Blockly.blockRendering.ConstantProvider();
+};
+
+/**
+ * Create a new instance of the renderer's render info object.
+ * @param {!Blockly.BlockSvg} block The block to measure.
+ * @return {!Blockly.blockRendering.RenderInfo} The render info object.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeRenderInfo_ = function(block) {
+  return new Blockly.blockRendering.RenderInfo(this, block);
+};
+
+/**
+ * Create a new instance of the renderer's drawer.
+ * @param {!Blockly.BlockSvg} block The block to render.
+ * @param {!Blockly.blockRendering.RenderInfo} info An object containing all
+ *   information needed to render this block.
+ * @return {!Blockly.blockRendering.Drawer} The drawer.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeDrawer_ = function(block, info) {
+  return new Blockly.blockRendering.Drawer(block, info);
+};
+
+/**
+ * Create a new instance of the renderer's debugger.
+ * @return {!Blockly.blockRendering.Debug} The renderer debugger.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeDebugger_ = function() {
+  return new Blockly.blockRendering.Debug();
+};
+
+/**
+ * Get the current renderer's constant provider.  We assume that when this is
+ * called, the renderer has already been initialized.
+ * @return {!Blockly.blockRendering.ConstantProvider} The constant provider.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.getConstants = function() {
+  return (
+    /** @type {!Blockly.blockRendering.ConstantProvider} */
+    (this.constants_));
 };

 /**
@@ -60,9 +115,9 @@ Blockly.blockRendering.Renderer.prototype.init = function() {
 */
 Blockly.blockRendering.Renderer.prototype.render = function(block) {
  if (!block.renderingDebugger) {
-    block.renderingDebugger = new this.debugger();
+    block.renderingDebugger = this.makeDebugger_();
  }
-  var info = new this.renderInfo(block);
+  var info = this.makeRenderInfo_(block);
  info.measure();
-  new this.drawer(block, info).draw();
+  this.makeDrawer_(block, info).draw();
 };
--- a/core/renderers/geras/highlight_constants.js
+++ b/core/renderers/geras/highlight_constants.js
@@ -35,15 +35,17 @@ goog.require('Blockly.utils.svgPaths');
 * Some highlights are simple offsets of the parent paths and can be generated
 * programmatically.  Others, especially on curves, are just made out of piles
 * of constants and are hard to tweak.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @constructor
 * @package
 */
-Blockly.geras.HighlightConstantProvider = function() {
+Blockly.geras.HighlightConstantProvider = function(constants) {
  /**
-   * An object that provides the constants used for base block rendering.
+   * The renderer's constant provider.
   * @type {!Blockly.blockRendering.ConstantProvider}
   */
-  this.constantProvider = Blockly.blockRendering.getConstants();
+  this.constantProvider = constants;

  /**
   * The offset between the block's main path and highlight path.
--- a/core/renderers/geras/highlighter.js
+++ b/core/renderers/geras/highlighter.js
@@ -61,8 +61,18 @@ Blockly.geras.Highlighter = function(info) {

  this.RTL_ = this.info_.RTL;

-  this.constants_ = Blockly.blockRendering.getConstants();
-  this.highlightConstants_ = Blockly.blockRendering.getRenderer().getHighlightConstants();
+  var renderer = /** @type {!Blockly.geras.Renderer} */ (info.getRenderer());
+
+  /**
+   * The renderer's constant provider.
+   * @type {!Blockly.blockRendering.ConstantProvider}
+   */
+  this.constants_ = renderer.getConstants();
+
+  /**
+   * @type {!Blockly.geras.HighlightConstantProvider}
+   */
+  this.highlightConstants_ = renderer.getHighlightConstants();
  /**
   * The offset between the block's main path and highlight path.
   * @type {number}
--- a/core/renderers/geras/info.js
+++ b/core/renderers/geras/info.js
@@ -53,17 +53,27 @@ goog.require('Blockly.utils.object');
 * may choose to rerender when getSize() is called).  However, calling it
 * repeatedly may be expensive.
 *
+ * @param {!Blockly.geras.Renderer} renderer The renderer in use.
 * @param {!Blockly.BlockSvg} block The block to measure.
 * @constructor
 * @package
 * @extends {Blockly.blockRendering.RenderInfo}
 */
-Blockly.geras.RenderInfo = function(block) {
-  Blockly.geras.RenderInfo.superClass_.constructor.call(this, block);
+Blockly.geras.RenderInfo = function(renderer, block) {
+  Blockly.geras.RenderInfo.superClass_.constructor.call(this, renderer, block);
 };
 Blockly.utils.object.inherits(Blockly.geras.RenderInfo,
    Blockly.blockRendering.RenderInfo);

+/**
+ * Get the block renderer in use.
+ * @return {!Blockly.geras.Renderer} The block renderer in use.
+ * @package
+ */
+Blockly.geras.RenderInfo.prototype.getRenderer = function() {
+  return /** @type {!Blockly.geras.Renderer} */ (this.renderer_);
+};
+
 /**
 * @override
 */
--- a/core/renderers/geras/renderer.js
+++ b/core/renderers/geras/renderer.js
@@ -27,8 +27,6 @@
 goog.provide('Blockly.geras.Renderer');

 goog.require('Blockly.blockRendering');
-goog.require('Blockly.blockRendering.ConstantProvider');
-goog.require('Blockly.blockRendering.Debug');
 goog.require('Blockly.blockRendering.Renderer');
 goog.require('Blockly.geras.Drawer');
 goog.require('Blockly.geras.HighlightConstantProvider');
@@ -43,10 +41,7 @@ goog.require('Blockly.utils.object');
 * @extends {Blockly.blockRendering.Renderer}
 */
 Blockly.geras.Renderer = function() {
-  this.constantProvider = Blockly.blockRendering.ConstantProvider;
-  this.renderInfo = Blockly.geras.RenderInfo;
-  this.drawer = Blockly.geras.Drawer;
-  this.debugger = Blockly.blockRendering.Debug;
+  Blockly.geras.Renderer.superClass_.constructor.call(this);

  /**
   * The renderer's highlight constant provider.
@@ -62,20 +57,62 @@ Blockly.utils.object.inherits(Blockly.geras.Renderer,
 * Initialize the renderer.  Geras has a highlight provider in addition to
 * the normal constant provider.
 * @package
+ * @override
 */
 Blockly.geras.Renderer.prototype.init = function() {
  Blockly.geras.Renderer.superClass_.init.call(this);
-  this.highlightConstants_ = new Blockly.geras.HighlightConstantProvider();
+  this.highlightConstants_ = this.makeHighlightConstants_();
 };

 /**
- * Get the renderer's highlight constant provider.
- * @return {Blockly.geras.HighlightConstantProvider} The highlight constant
+ * Create a new instance of the renderer's render info object.
+ * @param {!Blockly.BlockSvg} block The block to measure.
+ * @return {!Blockly.geras.RenderInfo} The render info object.
+ * @protected
+ * @override
+ */
+Blockly.geras.Renderer.prototype.makeRenderInfo_ = function(block) {
+  return new Blockly.geras.RenderInfo(this, block);
+};
+
+/**
+ * Create a new instance of the renderer's drawer.
+ * @param {!Blockly.BlockSvg} block The block to render.
+ * @param {!Blockly.blockRendering.RenderInfo} info An object containing all
+ *   information needed to render this block.
+ * @return {!Blockly.geras.Drawer} The drawer.
+ * @protected
+ * @override
+ */
+Blockly.geras.Renderer.prototype.makeDrawer_ = function(block, info) {
+  return new Blockly.geras.Drawer(block,
+      /** @type {!Blockly.geras.RenderInfo} */ (info));
+};
+
+
+/**
+ * Create a new instance of the renderer's highlight constant provider.
+ * @return {!Blockly.geras.HighlightConstantProvider} The highlight constant
+ *     provider.
+ * @protected
+ */
+Blockly.blockRendering.Renderer.prototype.makeHighlightConstants_ = function() {
+  return new Blockly.geras.HighlightConstantProvider(
+      /** @type {!Blockly.blockRendering.ConstantProvider} */
+      (this.getConstants()));
+};
+
+/**
+ * Get the renderer's highlight constant provider.  We assume that when this is
+ * called, the renderer has already been initialized.
+ * @return {!Blockly.geras.HighlightConstantProvider} The highlight constant
 *     provider.
 * @package
 */
 Blockly.geras.Renderer.prototype.getHighlightConstants = function() {
-  return this.highlightConstants_;
+  return (
+    /** @type {!Blockly.geras.HighlightConstantProvider} */
+    (this.highlightConstants_));
 };

 Blockly.blockRendering.register('geras', Blockly.geras.Renderer);
--- a/core/renderers/measurables/base.js
+++ b/core/renderers/measurables/base.js
@@ -34,10 +34,12 @@ goog.require('Blockly.blockRendering.Types');
 * The base class to represent a part of a block that takes up space during
 * rendering.  The constructor for each non-spacer Measurable records the size
 * of the block element (e.g. field, statement input).
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 */
-Blockly.blockRendering.Measurable = function() {
+Blockly.blockRendering.Measurable = function(constants) {
  this.width = 0;
  this.height = 0;
  this.type = Blockly.blockRendering.Types.NONE;
@@ -45,6 +47,12 @@ Blockly.blockRendering.Measurable = function() {
  this.xPos = 0;
  this.centerline = 0;

-  this.constants_ = Blockly.blockRendering.getConstants();
+  /**
+   * The renderer's constant provider.
+   * @type {!Blockly.blockRendering.ConstantProvider}
+   * @protected
+   */
+  this.constants_ = constants;
+
  this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
 };
--- a/core/renderers/measurables/connections.js
+++ b/core/renderers/measurables/connections.js
@@ -38,14 +38,17 @@ goog.require('Blockly.utils.object');
 /**
 * The base class to represent a connection and the space that it takes up on
 * the block.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {Blockly.RenderedConnection} connectionModel The connection object on
 *     the block that this represents.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Measurable}
 */
-Blockly.blockRendering.Connection = function(connectionModel) {
-  Blockly.blockRendering.Connection.superClass_.constructor.call(this);
+Blockly.blockRendering.Connection = function(constants, connectionModel) {
+  Blockly.blockRendering.Connection.superClass_.constructor.call(this,
+      constants);
  this.connectionModel = connectionModel;
  this.shape = this.constants_.shapeFor(connectionModel);
  this.type |= Blockly.blockRendering.Types.CONNECTION;
@@ -56,15 +59,17 @@ Blockly.utils.object.inherits(Blockly.blockRendering.Connection,
 /**
 * An object containing information about the space an output connection takes
 * up during rendering.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {Blockly.RenderedConnection} connectionModel The connection object on
 *     the block that this represents.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Connection}
 */
-Blockly.blockRendering.OutputConnection = function(connectionModel) {
+Blockly.blockRendering.OutputConnection = function(constants, connectionModel) {
  Blockly.blockRendering.OutputConnection.superClass_.constructor.call(this,
-      connectionModel);
+      constants, connectionModel);
  this.type |= Blockly.blockRendering.Types.OUTPUT_CONNECTION;
  this.height = this.shape.height;
  this.width = this.shape.width;
@@ -86,15 +91,18 @@ Blockly.blockRendering.OutputConnection.prototype.isDynamic = function() {
 /**
 * An object containing information about the space a previous connection takes
 * up during rendering.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {Blockly.RenderedConnection} connectionModel The connection object on
 *     the block that this represents.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Connection}
 */
-Blockly.blockRendering.PreviousConnection = function(connectionModel) {
+Blockly.blockRendering.PreviousConnection = function(
+    constants, connectionModel) {
  Blockly.blockRendering.PreviousConnection.superClass_.constructor.call(this,
-      connectionModel);
+      constants, connectionModel);
  this.type |= Blockly.blockRendering.Types.PREVIOUS_CONNECTION;
  this.height = this.shape.height;
  this.width = this.shape.width;
@@ -106,15 +114,17 @@ Blockly.utils.object.inherits(Blockly.blockRendering.PreviousConnection,
 /**
 * An object containing information about the space a next connection takes
 * up during rendering.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {Blockly.RenderedConnection} connectionModel The connection object on
 *     the block that this represents.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Connection}
 */
-Blockly.blockRendering.NextConnection = function(connectionModel) {
+Blockly.blockRendering.NextConnection = function(constants, connectionModel) {
  Blockly.blockRendering.NextConnection.superClass_.constructor.call(this,
-      connectionModel);
+      constants, connectionModel);
  this.type |= Blockly.blockRendering.Types.NEXT_CONNECTION;
  this.height = this.shape.height;
  this.width = this.shape.width;
--- a/core/renderers/measurables/inputs.js
+++ b/core/renderers/measurables/inputs.js
@@ -38,14 +38,16 @@ goog.require('Blockly.utils.object');
 /**
 * The base class to represent an input that takes up space on a block
 * during rendering
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {!Blockly.Input} input The input to measure and store information for.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Connection}
 */
-Blockly.blockRendering.InputConnection = function(input) {
+Blockly.blockRendering.InputConnection = function(constants, input) {
  Blockly.blockRendering.InputConnection.superClass_.constructor.call(this,
-      input.connection);
+      constants, input.connection);

  this.type |= Blockly.blockRendering.Types.INPUT;
  this.input = input;
@@ -73,15 +75,17 @@ Blockly.utils.object.inherits(Blockly.blockRendering.InputConnection,
 /**
 * An object containing information about the space an inline input takes up
 * during rendering
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {!Blockly.Input} input The inline input to measure and store
 *     information for.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.InputConnection}
 */
-Blockly.blockRendering.InlineInput = function(input) {
+Blockly.blockRendering.InlineInput = function(constants, input) {
  Blockly.blockRendering.InlineInput.superClass_.constructor.call(this,
-      input);
+      constants, input);
  this.type |= Blockly.blockRendering.Types.INLINE_INPUT;

  if (!this.connectedBlock) {
@@ -106,15 +110,17 @@ Blockly.utils.object.inherits(Blockly.blockRendering.InlineInput,
 /**
 * An object containing information about the space a statement input takes up
 * during rendering
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {!Blockly.Input} input The statement input to measure and store
 *     information for.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.InputConnection}
 */
-Blockly.blockRendering.StatementInput = function(input) {
+Blockly.blockRendering.StatementInput = function(constants, input) {
  Blockly.blockRendering.StatementInput.superClass_.constructor.call(this,
-      input);
+      constants, input);
  this.type |= Blockly.blockRendering.Types.STATEMENT_INPUT;

  if (!this.connectedBlock) {
@@ -135,15 +141,17 @@ Blockly.utils.object.inherits(Blockly.blockRendering.StatementInput,
 /**
 * An object containing information about the space an external value input
 * takes up during rendering
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {!Blockly.Input} input The external value input to measure and store
 *     information for.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.InputConnection}
 */
-Blockly.blockRendering.ExternalValueInput = function(input) {
+Blockly.blockRendering.ExternalValueInput = function(constants, input) {
  Blockly.blockRendering.ExternalValueInput.superClass_.constructor.call(this,
-      input);
+      constants, input);
  this.type |= Blockly.blockRendering.Types.EXTERNAL_VALUE_INPUT;

  if (!this.connectedBlock) {
--- a/core/renderers/measurables/row_elements.js
+++ b/core/renderers/measurables/row_elements.js
@@ -40,13 +40,15 @@ goog.require('Blockly.utils.object');
 /**
 * An object containing information about the space an icon takes up during
 * rendering
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {!Blockly.Icon} icon The icon to measure and store information for.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Measurable}
 */
-Blockly.blockRendering.Icon = function(icon) {
-  Blockly.blockRendering.Icon.superClass_.constructor.call(this);
+Blockly.blockRendering.Icon = function(constants, icon) {
+  Blockly.blockRendering.Icon.superClass_.constructor.call(this, constants);
  this.icon = icon;
  this.isVisible = icon.isVisible();
  this.type |= Blockly.blockRendering.Types.ICON;
@@ -61,12 +63,15 @@ Blockly.utils.object.inherits(Blockly.blockRendering.Icon,
 /**
 * An object containing information about the jagged edge of a collapsed block
 * takes up during rendering
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Measurable}
 */
-Blockly.blockRendering.JaggedEdge = function() {
-  Blockly.blockRendering.JaggedEdge.superClass_.constructor.call(this);
+Blockly.blockRendering.JaggedEdge = function(constants) {
+  Blockly.blockRendering.JaggedEdge.superClass_.constructor.call(
+      this, constants);
  this.type |= Blockly.blockRendering.Types.JAGGED_EDGE;
  this.height = this.constants_.JAGGED_TEETH.height;
  this.width = this.constants_.JAGGED_TEETH.width;
@@ -78,14 +83,16 @@ Blockly.utils.object.inherits(Blockly.blockRendering.JaggedEdge,
 /**
 * An object containing information about the space a field takes up during
 * rendering
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {!Blockly.Field} field The field to measure and store information for.
 * @param {!Blockly.Input} parentInput The parent input for the field.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Measurable}
 */
-Blockly.blockRendering.Field = function(field, parentInput) {
-  Blockly.blockRendering.Field.superClass_.constructor.call(this);
+Blockly.blockRendering.Field = function(constants, field, parentInput) {
+  Blockly.blockRendering.Field.superClass_.constructor.call(this, constants);
  this.field = field;
  this.isEditable = field.isCurrentlyEditable();
  this.flipRtl = field instanceof Blockly.FieldImage && field.getFlipRtl();
@@ -102,12 +109,14 @@ Blockly.utils.object.inherits(Blockly.blockRendering.Field,
 /**
 * An object containing information about the space a hat takes up during
 * rendering.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Measurable}
 */
-Blockly.blockRendering.Hat = function() {
-  Blockly.blockRendering.Hat.superClass_.constructor.call(this);
+Blockly.blockRendering.Hat = function(constants) {
+  Blockly.blockRendering.Hat.superClass_.constructor.call(this, constants);
  this.type |= Blockly.blockRendering.Types.HAT;
  this.height = this.constants_.START_HAT.height;
  this.width = this.constants_.START_HAT.width;
@@ -120,13 +129,16 @@ Blockly.utils.object.inherits(Blockly.blockRendering.Hat,
 /**
 * An object containing information about the space a square corner takes up
 * during rendering.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {string=} opt_position The position of this corner.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Measurable}
 */
-Blockly.blockRendering.SquareCorner = function(opt_position) {
-  Blockly.blockRendering.SquareCorner.superClass_.constructor.call(this);
+Blockly.blockRendering.SquareCorner = function(constants, opt_position) {
+  Blockly.blockRendering.SquareCorner.superClass_.constructor.call(this,
+      constants);
  this.type = ((!opt_position || opt_position == 'left') ?
      Blockly.blockRendering.Types.LEFT_SQUARE_CORNER :
      Blockly.blockRendering.Types.RIGHT_SQUARE_CORNER) |
@@ -141,13 +153,16 @@ Blockly.utils.object.inherits(Blockly.blockRendering.SquareCorner,
 /**
 * An object containing information about the space a rounded corner takes up
 * during rendering.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {string=} opt_position The position of this corner.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Measurable}
 */
-Blockly.blockRendering.RoundCorner = function(opt_position) {
-  Blockly.blockRendering.RoundCorner.superClass_.constructor.call(this);
+Blockly.blockRendering.RoundCorner = function(constants, opt_position) {
+  Blockly.blockRendering.RoundCorner.superClass_.constructor.call(this,
+      constants);
  this.type = ((!opt_position || opt_position == 'left') ?
      Blockly.blockRendering.Types.LEFT_ROUND_CORNER :
      Blockly.blockRendering.Types.RIGHT_ROUND_CORNER) |
@@ -164,13 +179,16 @@ Blockly.utils.object.inherits(Blockly.blockRendering.RoundCorner,
 /**
 * An object containing information about a spacer between two elements on a
 * row.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {number} width The width of the spacer.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Measurable}
 */
-Blockly.blockRendering.InRowSpacer = function(width) {
-  Blockly.blockRendering.InRowSpacer.superClass_.constructor.call(this);
+Blockly.blockRendering.InRowSpacer = function(constants, width) {
+  Blockly.blockRendering.InRowSpacer.superClass_.constructor.call(this,
+      constants);
  this.type |= Blockly.blockRendering.Types.SPACER |
      Blockly.blockRendering.Types.IN_ROW_SPACER;
  this.width = width;
--- a/core/renderers/measurables/rows.js
+++ b/core/renderers/measurables/rows.js
@@ -43,10 +43,12 @@ goog.require('Blockly.utils.object');
 /**
 * An object representing a single row on a rendered block and all of its
 * subcomponents.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 */
-Blockly.blockRendering.Row = function() {
+Blockly.blockRendering.Row = function(constants) {
  /**
   * The type of this rendering object.
   * @package
@@ -148,7 +150,13 @@ Blockly.blockRendering.Row = function() {
   */
  this.hasJaggedEdge = false;

-  this.constants_ = Blockly.blockRendering.getConstants();
+  /**
+   * The renderer's constant provider.
+   * @type {!Blockly.blockRendering.ConstantProvider}
+   * @protected
+   */
+  this.constants_ = constants;
+
  this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
 };

@@ -213,12 +221,14 @@ Blockly.blockRendering.Row.prototype.getLastSpacer = function() {
 * connections.
 * After this constructor is called, the row will contain all non-spacer
 * elements it needs.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Row}
 */
-Blockly.blockRendering.TopRow = function() {
-  Blockly.blockRendering.TopRow.superClass_.constructor.call(this);
+Blockly.blockRendering.TopRow = function(constants) {
+  Blockly.blockRendering.TopRow.superClass_.constructor.call(this, constants);

  this.type |= Blockly.blockRendering.Types.TOP_ROW;

@@ -264,18 +274,21 @@ Blockly.blockRendering.TopRow.prototype.populate = function(block) {
  var leftSquareCorner = this.hasLeftSquareCorner(block);

  if (leftSquareCorner) {
-    this.elements.push(new Blockly.blockRendering.SquareCorner());
+    this.elements.push(
+        new Blockly.blockRendering.SquareCorner(this.constants_));
  } else {
-    this.elements.push(new Blockly.blockRendering.RoundCorner());
+    this.elements.push(
+        new Blockly.blockRendering.RoundCorner(this.constants_));
  }

  if (hasHat) {
-    var hat = new Blockly.blockRendering.Hat();
+    var hat = new Blockly.blockRendering.Hat(this.constants_);
    this.elements.push(hat);
    this.capline = hat.ascenderHeight;
  } else if (hasPrevious) {
    this.hasPreviousConnection = true;
    this.connection = new Blockly.blockRendering.PreviousConnection(
+        this.constants_,
        /** @type {Blockly.RenderedConnection} */ (block.previousConnection));
    this.elements.push(this.connection);
  }
@@ -332,13 +345,17 @@ Blockly.blockRendering.TopRow.prototype.measure = function() {
 /**
 * An object containing information about what elements are in the bottom row of
 * a block as well as spacing information for the top row.
- * Elements in a bottom row can consist of corners, spacers and next connections.
+ * Elements in a bottom row can consist of corners, spacers and next
+ * connections.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Row}
 */
-Blockly.blockRendering.BottomRow = function() {
-  Blockly.blockRendering.BottomRow.superClass_.constructor.call(this);
+Blockly.blockRendering.BottomRow = function(constants) {
+  Blockly.blockRendering.BottomRow.superClass_.constructor.call(this,
+      constants);
  this.type |= Blockly.blockRendering.Types.BOTTOM_ROW;

  /**
@@ -396,13 +413,16 @@ Blockly.blockRendering.BottomRow.prototype.populate = function(block) {
  var leftSquareCorner = this.hasLeftSquareCorner(block);

  if (leftSquareCorner) {
-    this.elements.push(new Blockly.blockRendering.SquareCorner());
+    this.elements.push(
+        new Blockly.blockRendering.SquareCorner(this.constants_));
  } else {
-    this.elements.push(new Blockly.blockRendering.RoundCorner());
+    this.elements.push(
+        new Blockly.blockRendering.RoundCorner(this.constants_));
  }

  if (this.hasNextConnection) {
    this.connection = new Blockly.blockRendering.NextConnection(
+        this.constants_,
        /** @type {Blockly.RenderedConnection} */ (block.nextConnection));
    this.elements.push(this.connection);
  }
@@ -444,20 +464,25 @@ Blockly.blockRendering.BottomRow.prototype.measure = function() {
 };
 /**
 * An object containing information about a spacer between two rows.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {number} height The height of the spacer.
 * @param {number} width The width of the spacer.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Row}
 */
-Blockly.blockRendering.SpacerRow = function(height, width) {
+Blockly.blockRendering.SpacerRow = function(constants, height, width) {
+  Blockly.blockRendering.SpacerRow.superClass_.constructor.call(this,
+      constants);
  this.type |= Blockly.blockRendering.Types.SPACER |
      Blockly.blockRendering.Types.BETWEEN_ROW_SPACER;
  this.width = width;
  this.height = height;
  this.followsStatement = false;
  this.widthWithConnectedBlocks = 0;
-  this.elements = [new Blockly.blockRendering.InRowSpacer(width)];
+  this.elements = [
+    new Blockly.blockRendering.InRowSpacer(this.constants_, width)];
 };
 Blockly.utils.object.inherits(Blockly.blockRendering.SpacerRow,
    Blockly.blockRendering.Row);
@@ -471,12 +496,14 @@ Blockly.blockRendering.SpacerRow.prototype.measure = function() {

 /**
 * An object containing information about a row that holds one or more inputs.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.Row}
 */
-Blockly.blockRendering.InputRow = function() {
-  Blockly.blockRendering.InputRow.superClass_.constructor.call(this);
+Blockly.blockRendering.InputRow = function(constants) {
+  Blockly.blockRendering.InputRow.superClass_.constructor.call(this, constants);
  this.type |= Blockly.blockRendering.Types.INPUT_ROW;

  /**
--- a/core/renderers/thrasos/info.js
+++ b/core/renderers/thrasos/info.js
@@ -53,17 +53,27 @@ goog.require('Blockly.utils.object');
 * may choose to rerender when getSize() is called).  However, calling it
 * repeatedly may be expensive.
 *
+ * @param {!Blockly.thrasos.Renderer} renderer The renderer in use.
 * @param {!Blockly.BlockSvg} block The block to measure.
 * @constructor
 * @package
 * @extends {Blockly.blockRendering.RenderInfo}
 */
-Blockly.thrasos.RenderInfo = function(block) {
-  Blockly.thrasos.RenderInfo.superClass_.constructor.call(this, block);
+Blockly.thrasos.RenderInfo = function(renderer, block) {
+  Blockly.thrasos.RenderInfo.superClass_.constructor.call(this, renderer, block);
 };
 Blockly.utils.object.inherits(Blockly.thrasos.RenderInfo,
    Blockly.blockRendering.RenderInfo);

+/**
+ * Get the block renderer in use.
+ * @return {!Blockly.thrasos.Renderer} The block renderer in use.
+ * @package
+ */
+Blockly.thrasos.RenderInfo.prototype.getRenderer = function() {
+  return /** @type {!Blockly.thrasos.Renderer} */ (this.renderer_);
+};
+
 /**
 * @override
 */
--- a/core/renderers/thrasos/renderer.js
+++ b/core/renderers/thrasos/renderer.js
@@ -27,9 +27,6 @@
 goog.provide('Blockly.thrasos.Renderer');

 goog.require('Blockly.blockRendering');
-goog.require('Blockly.blockRendering.ConstantProvider');
-goog.require('Blockly.blockRendering.Debug');
-goog.require('Blockly.blockRendering.Drawer');
 goog.require('Blockly.blockRendering.Renderer');
 goog.require('Blockly.thrasos.RenderInfo');
 goog.require('Blockly.utils.object');
@@ -41,12 +38,21 @@ goog.require('Blockly.utils.object');
 * @extends {Blockly.blockRendering.Renderer}
 */
 Blockly.thrasos.Renderer = function() {
-  this.constantProvider = Blockly.blockRendering.ConstantProvider;
-  this.renderInfo = Blockly.thrasos.RenderInfo;
-  this.drawer = Blockly.blockRendering.Drawer;
-  this.debugger = Blockly.blockRendering.Debug;
+  Blockly.thrasos.Renderer.superClass_.constructor.call(this);
 };
 Blockly.utils.object.inherits(Blockly.thrasos.Renderer,
    Blockly.blockRendering.Renderer);

+/**
+ * Create a new instance of the renderer's render info object.
+ * @param {!Blockly.BlockSvg} block The block to measure.
+ * @return {!Blockly.thrasos.RenderInfo} The render info object.
+ * @protected
+ * @override
+ */
+Blockly.thrasos.Renderer.prototype.makeRenderInfo_ = function(block) {
+  return new Blockly.thrasos.RenderInfo(this, block);
+};
+
+
 Blockly.blockRendering.register('thrasos', Blockly.thrasos.Renderer);
--- a/core/renderers/zelos/info.js
+++ b/core/renderers/zelos/info.js
@@ -57,31 +57,40 @@ goog.require('Blockly.zelos.TopRow');
 * may choose to rerender when getSize() is called).  However, calling it
 * repeatedly may be expensive.
 *
+ * @param {!Blockly.zelos.Renderer} renderer The renderer in use.
 * @param {!Blockly.BlockSvg} block The block to measure.
 * @constructor
 * @package
 * @extends {Blockly.blockRendering.RenderInfo}
 */
-Blockly.zelos.RenderInfo = function(block) {
-  Blockly.zelos.RenderInfo.superClass_.constructor.call(this, block);
+Blockly.zelos.RenderInfo = function(renderer, block) {
+  Blockly.zelos.RenderInfo.superClass_.constructor.call(this, renderer, block);

  /**
   * An object with rendering information about the top row of the block.
   * @type {!Blockly.zelos.TopRow}
   * @override
   */
-  this.topRow = new Blockly.zelos.TopRow();
+  this.topRow = new Blockly.zelos.TopRow(this.constants_);

  /**
   * An object with rendering information about the bottom row of the block.
   * @type {!Blockly.zelos.BottomRow}
   * @override
   */
-  this.bottomRow = new Blockly.zelos.BottomRow();
+  this.bottomRow = new Blockly.zelos.BottomRow(this.constants_);
 };
 Blockly.utils.object.inherits(Blockly.zelos.RenderInfo,
    Blockly.blockRendering.RenderInfo);

+/**
+ * Get the block renderer in use.
+ * @return {!Blockly.zelos.Renderer} The block renderer in use.
+ * @package
+ */
+Blockly.zelos.RenderInfo.prototype.getRenderer = function() {
+  return /** @type {!Blockly.zelos.Renderer} */ (this.renderer_);
+};

 /**
 * @override
@@ -242,15 +251,18 @@ Blockly.zelos.RenderInfo.prototype.makeSpacerRow_ = function(prev, next) {
  if (Blockly.blockRendering.Types.isInputRow(next) && next.hasStatement) {
    var spacer =
        new Blockly.zelos.BeforeStatementSpacerRow(
+            this.constants_,
            Math.max(height, this.constants_.INSIDE_CORNERS.rightHeight || 0),
            width);
  } else if (Blockly.blockRendering.Types.isInputRow(prev) && prev.hasStatement) {
    var spacer =
        new Blockly.zelos.AfterStatementSpacerRow(
+            this.constants_,
            Math.max(height, this.constants_.INSIDE_CORNERS.rightHeight || 0),
            width);
  } else {
-    var spacer = new Blockly.blockRendering.SpacerRow(height, width);
+    var spacer = new Blockly.blockRendering.SpacerRow(
+        this.constants_, height, width);
  }
  if (prev.hasStatement) {
    spacer.followsStatement = true;
--- a/core/renderers/zelos/measurables/rows.js
+++ b/core/renderers/zelos/measurables/rows.js
@@ -43,12 +43,14 @@ goog.require('Blockly.utils.object');
 * connections.
 * After this constructor is called, the row will contain all non-spacer
 * elements it needs.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.TopRow}
 */
-Blockly.zelos.TopRow = function() {
-  Blockly.zelos.TopRow.superClass_.constructor.call(this);
+Blockly.zelos.TopRow = function(constants) {
+  Blockly.zelos.TopRow.superClass_.constructor.call(this, constants);
 };
 Blockly.utils.object.inherits(Blockly.zelos.TopRow,
    Blockly.blockRendering.TopRow);
@@ -65,9 +67,9 @@ Blockly.zelos.TopRow.prototype.populate = function(block) {
  var rightSquareCorner = this.hasRightSquareCorner(block);

  if (rightSquareCorner) {
-    this.elements.push(new Blockly.blockRendering.SquareCorner('right'));
+    this.elements.push(new Blockly.blockRendering.SquareCorner(this.constants_, 'right'));
  } else {
-    this.elements.push(new Blockly.blockRendering.RoundCorner('right'));
+    this.elements.push(new Blockly.blockRendering.RoundCorner(this.constants_, 'right'));
  }
 };

@@ -94,12 +96,14 @@ Blockly.zelos.TopRow.prototype.hasRightSquareCorner = function(block) {
 * a block as well as spacing information for the top row.
 * Elements in a bottom row can consist of corners, spacers and next
 * connections.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.BottomRow}
 */
-Blockly.zelos.BottomRow = function() {
-  Blockly.zelos.BottomRow.superClass_.constructor.call(this);
+Blockly.zelos.BottomRow = function(constants) {
+  Blockly.zelos.BottomRow.superClass_.constructor.call(this, constants);
 };
 Blockly.utils.object.inherits(Blockly.zelos.BottomRow,
    Blockly.blockRendering.BottomRow);
@@ -116,9 +120,9 @@ Blockly.zelos.BottomRow.prototype.populate = function(block) {
  var rightSquareCorner = this.hasRightSquareCorner(block);

  if (rightSquareCorner) {
-    this.elements.push(new Blockly.blockRendering.SquareCorner('right'));
+    this.elements.push(new Blockly.blockRendering.SquareCorner(this.constants_, 'right'));
  } else {
-    this.elements.push(new Blockly.blockRendering.RoundCorner('right'));
+    this.elements.push(new Blockly.blockRendering.RoundCorner(this.constants_, 'right'));
  }
 };

@@ -143,15 +147,17 @@ Blockly.zelos.BottomRow.prototype.hasRightSquareCorner = function(block) {
 /**
 * An object containing information about a row spacer that comes right
 *   before a statement input.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {number} height The height of the spacer.
 * @param {number} width The width of the spacer.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.SpacerRow}
 */
-Blockly.zelos.BeforeStatementSpacerRow = function(height, width) {
+Blockly.zelos.BeforeStatementSpacerRow = function(constants, height, width) {
  Blockly.zelos.BeforeStatementSpacerRow.superClass_.constructor.call(
-      this, height, width);
+      this, constants, height, width);
  this.type |=
      Blockly.blockRendering.Types.getType('BEFORE_STATEMENT_SPACER_ROW');
 };
@@ -161,15 +167,17 @@ Blockly.utils.object.inherits(Blockly.zelos.BeforeStatementSpacerRow,
 /**
 * An object containing information about a row spacer that comes right
 *   after a statement input.
+ * @param {!Blockly.blockRendering.ConstantProvider} constants The rendering
+ *   constants provider.
 * @param {number} height The height of the spacer.
 * @param {number} width The width of the spacer.
 * @package
 * @constructor
 * @extends {Blockly.blockRendering.SpacerRow}
 */
-Blockly.zelos.AfterStatementSpacerRow = function(height, width) {
+Blockly.zelos.AfterStatementSpacerRow = function(constants, height, width) {
  Blockly.zelos.AfterStatementSpacerRow.superClass_.constructor.call(
-      this, height, width);
+      this, constants, height, width);
  this.type |=
      Blockly.blockRendering.Types.getType('AFTER_STATEMENT_SPACER_ROW');
 };
--- a/core/renderers/zelos/renderer.js
+++ b/core/renderers/zelos/renderer.js
@@ -27,7 +27,6 @@
 goog.provide('Blockly.zelos.Renderer');

 goog.require('Blockly.blockRendering');
-goog.require('Blockly.blockRendering.Debug');
 goog.require('Blockly.blockRendering.Renderer');
 goog.require('Blockly.utils.object');
 goog.require('Blockly.zelos.ConstantProvider');
@@ -42,12 +41,44 @@ goog.require('Blockly.zelos.RenderInfo');
 * @extends {Blockly.blockRendering.Renderer}
 */
 Blockly.zelos.Renderer = function() {
-  this.constantProvider = Blockly.zelos.ConstantProvider;
-  this.renderInfo = Blockly.zelos.RenderInfo;
-  this.drawer = Blockly.zelos.Drawer;
-  this.debugger = Blockly.blockRendering.Debug;
+  Blockly.zelos.Renderer.superClass_.constructor.call(this);
 };
 Blockly.utils.object.inherits(Blockly.zelos.Renderer,
    Blockly.blockRendering.Renderer);

+/**
+ * Create a new instance of the renderer's constant provider.
+ * @return {!Blockly.zelos.ConstantProvider} The constant provider.
+ * @protected
+ * @override
+ */
+Blockly.zelos.Renderer.prototype.makeConstants_ = function() {
+  return new Blockly.zelos.ConstantProvider();
+};
+
+/**
+ * Create a new instance of the renderer's render info object.
+ * @param {!Blockly.BlockSvg} block The block to measure.
+ * @return {!Blockly.zelos.RenderInfo} The render info object.
+ * @protected
+ * @override
+ */
+Blockly.zelos.Renderer.prototype.makeRenderInfo_ = function(block) {
+  return new Blockly.zelos.RenderInfo(this, block);
+};
+
+/**
+ * Create a new instance of the renderer's drawer.
+ * @param {!Blockly.BlockSvg} block The block to render.
+ * @param {!Blockly.blockRendering.RenderInfo} info An object containing all
+ *   information needed to render this block.
+ * @return {!Blockly.zelos.Drawer} The drawer.
+ * @protected
+ * @override
+ */
+Blockly.zelos.Renderer.prototype.makeDrawer_ = function(block, info) {
+  return new Blockly.zelos.Drawer(block,
+      /** @type {!Blockly.zelos.RenderInfo} */ (info));
+};
+
 Blockly.blockRendering.register('zelos', Blockly.zelos.Renderer);
--- a/core/toolbox.js
+++ b/core/toolbox.js
@@ -45,13 +45,13 @@ goog.require('Blockly.VerticalFlyout');
 /**
 * Class for a Toolbox.
 * Creates the toolbox's DOM.
- * @param {!Blockly.Workspace} workspace The workspace in which to create new
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace in which to create new
 *     blocks.
 * @constructor
 */
 Blockly.Toolbox = function(workspace) {
  /**
-   * @type {!Blockly.Workspace}
+   * @type {!Blockly.WorkspaceSvg}
   * @private
   */
  this.workspace_ = workspace;
--- a/core/workspace_svg.js
+++ b/core/workspace_svg.js
@@ -126,7 +126,12 @@ Blockly.WorkspaceSvg = function(options,
        Blockly.Procedures.flyoutCategory);
  }

-  Blockly.blockRendering.init(this.options.renderer || 'geras');
+  /**
+   * The block renderer used for rendering blocks on this workspace.
+   * @type {!Blockly.blockRendering.Renderer}
+   * @private
+   */
+  this.renderer_ = Blockly.blockRendering.init(this.options.renderer || 'geras');
 };
 Blockly.utils.object.inherits(Blockly.WorkspaceSvg, Blockly.Workspace);

@@ -395,6 +400,14 @@ Blockly.WorkspaceSvg.prototype.inverseScreenCTM_ = null;
 */
 Blockly.WorkspaceSvg.prototype.inverseScreenCTMDirty_ = true;

+/**
+ * Get the block renderer attached to this workspace.
+ * @return {!Blockly.blockRendering.Renderer} The renderer attached to this workspace.
+ */
+Blockly.WorkspaceSvg.prototype.getRenderer = function() {
+  return this.renderer_;
+};
+
 /**
 * Sets the cursor for use with keyboard navigation.
 * @param {!Blockly.Cursor} cursor The cursor used to move around this workspace.
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -411,6 +411,8 @@ gulp.task('typings', function (cb) {
    "core/components/tree",
    "core/components/menu",
    "core/keyboard_nav",
+    "core/renderers/common",
+    "core/renderers/measurables",
    "core/theme",
    "core/utils",
    "msg/"
@@ -449,6 +451,8 @@ gulp.task('typings', function (cb) {
    `${tmpDir}/core/components/tree/**`,
    `${tmpDir}/core/components/menu/**`,
    `${tmpDir}/core/keyboard_nav/**`,
+    `${tmpDir}/core/renderers/common/**`,
+    `${tmpDir}/core/renderers/measurables/**`,
    `${tmpDir}/core/utils/**`,
    `${tmpDir}/core/theme/**`,
    `${tmpDir}/msg/**`