Create a Renderer base class and extend it for each type of renderer

2026-01-07 17:10:11 +01:00 · 2019-09-04 17:16:08 -07:00
parent 4e5f03e7c2
commit 581705cc7b
7 changed files with 247 additions and 45 deletions
--- a/blockly_uncompressed.js
+++ b/blockly_uncompressed.js
@@ -92,15 +92,17 @@ goog.addDependency("../../../" + dir + "/core/names.js", ['Blockly.Names'], []);
 goog.addDependency("../../../" + dir + "/core/options.js", ['Blockly.Options'], ['Blockly.Themes.Classic', 'Blockly.utils.userAgent', 'Blockly.Xml']);
 goog.addDependency("../../../" + dir + "/core/procedures.js", ['Blockly.Procedures'], ['Blockly.Blocks', 'Blockly.constants', 'Blockly.Events', 'Blockly.Events.BlockChange', 'Blockly.Field', 'Blockly.Msg', 'Blockly.Names', 'Blockly.utils.xml', 'Blockly.Workspace', 'Blockly.Xml']);
 goog.addDependency("../../../" + dir + "/core/rendered_connection.js", ['Blockly.RenderedConnection'], ['Blockly.Connection', 'Blockly.Events', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.dom']);
-goog.addDependency("../../../" + dir + "/core/renderers/common/block_rendering.js", ['Blockly.blockRendering'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.ConstantProvider', 'Blockly.geras.HighlightConstantProvider', 'Blockly.geras.Drawer', 'Blockly.geras.RenderInfo', 'Blockly.thrasos.RenderInfo', 'Blockly.zelos.Drawer', 'Blockly.zelos.RenderInfo', 'Blockly.zelos.ConstantProvider']);
+goog.addDependency("../../../" + dir + "/core/renderers/common/block_rendering.js", ['Blockly.blockRendering'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.ConstantProvider', 'Blockly.geras.HighlightConstantProvider', 'Blockly.geras.Renderer', 'Blockly.geras.RenderInfo', 'Blockly.thrasos.Renderer', 'Blockly.zelos.Renderer', 'Blockly.zelos.RenderInfo', 'Blockly.zelos.ConstantProvider']);
 goog.addDependency("../../../" + dir + "/core/renderers/common/constants.js", ['Blockly.blockRendering.ConstantProvider'], ['Blockly.utils.svgPaths']);
 goog.addDependency("../../../" + dir + "/core/renderers/common/debugger.js", ['Blockly.blockRendering.Debug'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
 goog.addDependency("../../../" + dir + "/core/renderers/common/drawer.js", ['Blockly.blockRendering.Drawer'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
 goog.addDependency("../../../" + dir + "/core/renderers/common/info.js", ['Blockly.blockRendering.RenderInfo'], ['Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.RenderedConnection']);
+goog.addDependency("../../../" + dir + "/core/renderers/common/renderer.js", ['Blockly.blockRendering.Renderer'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.RenderInfo']);
 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.Types', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
 goog.addDependency("../../../" + dir + "/core/renderers/geras/info.js", ['Blockly.geras', 'Blockly.geras.RenderInfo'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.RenderedConnection']);
+goog.addDependency("../../../" + dir + "/core/renderers/geras/renderer.js", ['Blockly.geras.Renderer'], ['Blockly.blockRendering.Renderer', 'Blockly.blockRendering.ConstantProvider', 'Blockly.blockRendering.Debug', 'Blockly.geras.Drawer', 'Blockly.geras.RenderInfo']);
 goog.addDependency("../../../" + dir + "/core/renderers/measurables/base.js", ['Blockly.blockRendering.Measurable'], ['Blockly.blockRendering.Types']);
 goog.addDependency("../../../" + dir + "/core/renderers/measurables/connections.js", ['Blockly.blockRendering.Connection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.blockRendering.PreviousConnection'], ['Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types', 'Blockly.RenderedConnection']);
 goog.addDependency("../../../" + dir + "/core/renderers/measurables/inputs.js", ['Blockly.blockRendering.InputConnection', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.ExternalValueInput'], ['Blockly.blockRendering.Connection', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types']);
@@ -108,10 +110,12 @@ goog.addDependency("../../../" + dir + "/core/renderers/measurables/row_elements
 goog.addDependency("../../../" + dir + "/core/renderers/measurables/rows.js", ['Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow'], ['Blockly.blockRendering.InputConnection', 'Blockly.blockRendering.InRowSpacer', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.Types', 'Blockly.RenderedConnection']);
 goog.addDependency("../../../" + dir + "/core/renderers/measurables/types.js", ['Blockly.blockRendering.Types'], []);
 goog.addDependency("../../../" + dir + "/core/renderers/thrasos/info.js", ['Blockly.thrasos', 'Blockly.thrasos.RenderInfo'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.RenderedConnection']);
+goog.addDependency("../../../" + dir + "/core/renderers/thrasos/renderer.js", ['Blockly.thrasos.Renderer'], ['Blockly.blockRendering.Renderer', 'Blockly.blockRendering.ConstantProvider', 'Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.thrasos.RenderInfo']);
 goog.addDependency("../../../" + dir + "/core/renderers/zelos/constants.js", ['Blockly.zelos.ConstantProvider'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.utils.svgPaths']);
 goog.addDependency("../../../" + dir + "/core/renderers/zelos/drawer.js", ['Blockly.zelos.Drawer'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.Types', 'Blockly.zelos.RenderInfo']);
-goog.addDependency("../../../" + dir + "/core/renderers/zelos/info.js", ['Blockly.zelos', 'Blockly.zelos.RenderInfo'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.RenderedConnection', 'Blockly.zelos.BottomRow', 'Blockly.zelos.TopRow']);
-goog.addDependency("../../../" + dir + "/core/renderers/zelos/measurables/rows.js", ['Blockly.zelos.BottomRow', 'Blockly.zelos.TopRow'], ['Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.TopRow']);
+goog.addDependency("../../../" + dir + "/core/renderers/zelos/info.js", ['Blockly.zelos', 'Blockly.zelos.RenderInfo'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.RenderedConnection', 'Blockly.zelos.AfterStatementSpacerRow', 'Blockly.zelos.BeforeStatementSpacerRow', 'Blockly.zelos.BottomRow', 'Blockly.zelos.TopRow']);
+goog.addDependency("../../../" + dir + "/core/renderers/zelos/measurables/rows.js", ['Blockly.zelos.BottomRow', 'Blockly.zelos.TopRow', 'Blockly.zelos.AfterStatementSpacerRow', 'Blockly.zelos.BeforeStatementSpacerRow'], ['Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.SpacerRow']);
+goog.addDependency("../../../" + dir + "/core/renderers/zelos/renderer.js", ['Blockly.zelos.Renderer'], ['Blockly.blockRendering.Renderer', 'Blockly.zelos.ConstantProvider', 'Blockly.blockRendering.Debug', 'Blockly.zelos.Drawer', 'Blockly.zelos.RenderInfo']);
 goog.addDependency("../../../" + dir + "/core/scrollbar.js", ['Blockly.Scrollbar', 'Blockly.ScrollbarPair'], ['Blockly.Touch', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.dom']);
 goog.addDependency("../../../" + dir + "/core/theme.js", ['Blockly.Theme'], []);
 goog.addDependency("../../../" + dir + "/core/theme/classic.js", ['Blockly.Themes.Classic'], ['Blockly.Theme']);
@@ -285,6 +289,7 @@ goog.require('Blockly.blockRendering.NextConnection');
 goog.require('Blockly.blockRendering.OutputConnection');
 goog.require('Blockly.blockRendering.PreviousConnection');
 goog.require('Blockly.blockRendering.RenderInfo');
+goog.require('Blockly.blockRendering.Renderer');
 goog.require('Blockly.blockRendering.RoundCorner');
 goog.require('Blockly.blockRendering.Row');
 goog.require('Blockly.blockRendering.SpacerRow');
@@ -299,10 +304,12 @@ goog.require('Blockly.geras.Drawer');
 goog.require('Blockly.geras.HighlightConstantProvider');
 goog.require('Blockly.geras.Highlighter');
 goog.require('Blockly.geras.RenderInfo');
+goog.require('Blockly.geras.Renderer');
 goog.require('Blockly.inject');
 goog.require('Blockly.navigation');
 goog.require('Blockly.thrasos');
 goog.require('Blockly.thrasos.RenderInfo');
+goog.require('Blockly.thrasos.Renderer');
 goog.require('Blockly.tree.BaseNode');
 goog.require('Blockly.tree.TreeControl');
 goog.require('Blockly.tree.TreeNode');
@@ -325,10 +332,13 @@ goog.require('Blockly.utils.uiMenu');
 goog.require('Blockly.utils.userAgent');
 goog.require('Blockly.utils.xml');
 goog.require('Blockly.zelos');
+goog.require('Blockly.zelos.AfterStatementSpacerRow');
+goog.require('Blockly.zelos.BeforeStatementSpacerRow');
 goog.require('Blockly.zelos.BottomRow');
 goog.require('Blockly.zelos.ConstantProvider');
 goog.require('Blockly.zelos.Drawer');
 goog.require('Blockly.zelos.RenderInfo');
+goog.require('Blockly.zelos.Renderer');
 goog.require('Blockly.zelos.TopRow');

 delete root.BLOCKLY_DIR;
--- a/core/renderers/common/block_rendering.js
+++ b/core/renderers/common/block_rendering.js
@@ -36,15 +36,15 @@ goog.require('Blockly.blockRendering.RenderInfo');
 goog.require('Blockly.blockRendering.ConstantProvider');
 goog.require('Blockly.geras.HighlightConstantProvider');

-goog.require('Blockly.geras.Drawer');
+goog.require('Blockly.geras.Renderer');
 goog.require('Blockly.geras.RenderInfo');
-goog.require('Blockly.thrasos.RenderInfo');
-goog.require('Blockly.zelos.Drawer');
+goog.require('Blockly.thrasos.Renderer');
+goog.require('Blockly.zelos.Renderer');
 goog.require('Blockly.zelos.RenderInfo');
 goog.require('Blockly.zelos.ConstantProvider');

 // TODO (#2702): Pick an API for choosing a renderer.
-Blockly.blockRendering.rendererName = 'geras';
+Blockly.blockRendering.rendererName = Blockly.thrasos;

 Blockly.blockRendering.useDebugger = false;

@@ -53,22 +53,9 @@ Blockly.blockRendering.useDebugger = false;
 * @package
 */
 Blockly.blockRendering.init = function() {
-  if (Blockly.blockRendering.rendererName == 'geras') {
-    Blockly.blockRendering.constants =
-      new Blockly.blockRendering.ConstantProvider();
-    Blockly.blockRendering.constants.init();
-    // No one else has a highlight provider.
-    Blockly.blockRendering.highlightConstants =
-        new Blockly.geras.HighlightConstantProvider();
-  } else if (Blockly.blockRendering.rendererName == 'thrasos') {
-    Blockly.blockRendering.constants =
-      new Blockly.blockRendering.ConstantProvider();
-    Blockly.blockRendering.constants.init();
-  } else if (Blockly.blockRendering.rendererName == 'zelos') {
-    Blockly.blockRendering.constants =
-      new Blockly.zelos.ConstantProvider();
-    Blockly.blockRendering.constants.init();
-  }
+  Blockly.blockRendering.renderer =
+      new Blockly.blockRendering.rendererName.Renderer();
+  Blockly.blockRendering.renderer.init();
 };

 /**
@@ -78,28 +65,13 @@ Blockly.blockRendering.init = function() {
 * @public
 */
 Blockly.blockRendering.render = function(block) {
-  if (!block.renderingDebugger) {
-    block.renderingDebugger = new Blockly.blockRendering.Debug();
-  }
-  if (Blockly.blockRendering.rendererName == 'geras') {
-    var info = new Blockly.geras.RenderInfo(block);
-    info.measure();
-    new Blockly.geras.Drawer(block, info).draw();
-  } else if (Blockly.blockRendering.rendererName == 'thrasos') {
-    var info = new Blockly.thrasos.RenderInfo(block);
-    info.measure();
-    new Blockly.blockRendering.Drawer(block, info).draw();
-  } else if (Blockly.blockRendering.rendererName == 'zelos') {
-    var info = new Blockly.zelos.RenderInfo(block);
-    info.measure();
-    new Blockly.zelos.Drawer(block, info).draw();
-  }
+  Blockly.blockRendering.renderer.render(block);
 };

 Blockly.blockRendering.getConstants = function() {
-  return Blockly.blockRendering.constants;
+  return Blockly.blockRendering.renderer.constants;
 };

 Blockly.blockRendering.getHighlightConstants = function() {
-  return Blockly.blockRendering.highlightConstants;
+  return Blockly.blockRendering.renderer.highlightConstants;
 };
--- a/core/renderers/common/renderer.js
+++ b/core/renderers/common/renderer.js
@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2019 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Base renderer.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.blockRendering.Renderer');
+
+goog.require('Blockly.blockRendering.ConstantProvider');
+goog.require('Blockly.blockRendering.Debug');
+goog.require('Blockly.blockRendering.Drawer');
+goog.require('Blockly.blockRendering.RenderInfo');
+
+/**
+ * The base class for a block renderer.
+ * @package
+ * @constructor
+ */
+Blockly.blockRendering.Renderer = function() {
+  this.constantProvider = Blockly.blockRendering.ConstantProvider;
+  this.renderInfo = Blockly.blockRendering.RenderInfo;
+  this.drawer = Blockly.blockRendering.Drawer;
+  this.debugger = Blockly.blockRendering.Debugger;
+};
+
+/**
+ * Initialize the renderer
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.init = function() {
+  this.constants = new this.constantProvider();
+  this.constants.init();
+};
+
+/**
+ * Render the block.
+ * @param {!Blockly.BlockSvg} block The block to render.
+ * @package
+ */
+Blockly.blockRendering.Renderer.prototype.render = function(block) {
+  if (!block.renderingDebugger) {
+    block.renderingDebugger = new this.debugger();
+  }
+  var info = new this.renderInfo(block);
+  info.measure();
+  new this.drawer(block, info).draw();
+};
--- a/core/renderers/geras/renderer.js
+++ b/core/renderers/geras/renderer.js
@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2019 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Geras renderer.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.geras.Renderer');
+
+goog.require('Blockly.blockRendering.Renderer');
+goog.require('Blockly.blockRendering.ConstantProvider');
+goog.require('Blockly.blockRendering.Debug');
+goog.require('Blockly.geras.Drawer');
+goog.require('Blockly.geras.RenderInfo');
+
+/**
+ * The geras renderer.
+ * @package
+ * @constructor
+ * @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;
+};
+goog.inherits(Blockly.geras.Renderer, Blockly.blockRendering.Renderer);
+
+/**
+ * Initialize the renderer.  Geras has a highlight provider in addition to
+ * the normal constant provider.
+ * @package
+ */
+Blockly.geras.Renderer.prototype.init = function() {
+  Blockly.geras.Renderer.superClass_.init.call(this);
+  this.highlightConstants =
+      new Blockly.geras.HighlightConstantProvider(this.constants);
+};
--- a/core/renderers/thrasos/renderer.js
+++ b/core/renderers/thrasos/renderer.js
@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2019 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Thrasos renderer.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.thrasos.Renderer');
+
+goog.require('Blockly.blockRendering.Renderer');
+goog.require('Blockly.blockRendering.ConstantProvider');
+goog.require('Blockly.blockRendering.Debug');
+goog.require('Blockly.blockRendering.Drawer');
+goog.require('Blockly.thrasos.RenderInfo');
+
+/**
+ * The thrasos renderer.
+ * @package
+ * @constructor
+ * @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;
+};
+goog.inherits(Blockly.thrasos.Renderer, Blockly.blockRendering.Renderer);
--- a/core/renderers/zelos/constants.js
+++ b/core/renderers/zelos/constants.js
@@ -38,7 +38,7 @@ goog.require('Blockly.utils.svgPaths');
 */
 Blockly.zelos.ConstantProvider = function() {
  Blockly.zelos.ConstantProvider.superClass_.constructor.call(this);
-  
+
  var GRID_UNIT = 4;

  this.CORNER_RADIUS = 1 * GRID_UNIT;
@@ -104,9 +104,9 @@ Blockly.zelos.ConstantProvider.prototype.shapeFor = function(
    case Blockly.OUTPUT_VALUE:
      // Includes doesn't work in IE.
      if (checks && checks.indexOf('Boolean') != -1) {
-        return Blockly.blockRendering.constants.TRIANGLE;
+        return this.TRIANGLE;
      }
-      return Blockly.blockRendering.constants.PUZZLE_TAB;
+      return this.PUZZLE_TAB;
    case Blockly.PREVIOUS_STATEMENT:
    case Blockly.NEXT_STATEMENT:
      return this.NOTCH;
@@ -209,7 +209,7 @@ Blockly.zelos.ConstantProvider.prototype.makeOutsideCorners = function() {
  var topRight =
      Blockly.utils.svgPaths.arc('a', '0 0,1', radius,
          Blockly.utils.svgPaths.point(radius, radius));
-    
+
  /**
   * SVG path for drawing the rounded bottom-left corner.
   * @const
--- a/core/renderers/zelos/renderer.js
+++ b/core/renderers/zelos/renderer.js
@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2019 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Zelos renderer.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.zelos.Renderer');
+
+goog.require('Blockly.blockRendering.Renderer');
+goog.require('Blockly.zelos.ConstantProvider');
+goog.require('Blockly.blockRendering.Debug');
+goog.require('Blockly.zelos.Drawer');
+goog.require('Blockly.zelos.RenderInfo');
+
+/**
+ * The zelos renderer.
+ * @package
+ * @constructor
+ * @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;
+};
+goog.inherits(Blockly.zelos.Renderer, Blockly.blockRendering.Renderer);
+