From 848d3a35099ef008445acb8be254ccb20a6ee251 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Fri, 7 Jun 2019 00:52:40 -0700 Subject: [PATCH] Move setCssTransform & createSvgElement to dom. Also move SVG_NS and HTML_NS properties. --- core/block_animations.js | 3 +- core/block_drag_surface.js | 11 ++++--- core/block_svg.js | 8 ++--- core/bubble.js | 16 ++++----- core/comment.js | 16 ++++----- core/constants.js | 12 ------- core/field.js | 7 ++-- core/field_angle.js | 14 ++++---- core/field_dropdown.js | 4 +-- core/field_image.js | 2 +- core/flyout_base.js | 8 ++--- core/flyout_button.js | 8 ++--- core/grid.js | 10 +++--- core/icon.js | 2 +- core/inject.js | 22 ++++++------- core/mutator.js | 8 ++--- core/rendered_connection.js | 2 +- core/scrollbar.js | 12 +++---- core/trashcan.js | 15 ++++----- core/utils.js | 37 --------------------- core/utils/dom.js | 49 ++++++++++++++++++++++++++++ core/warning.js | 12 +++---- core/workspace_comment_render_svg.js | 28 ++++++++-------- core/workspace_comment_svg.js | 4 +-- core/workspace_drag_surface_svg.js | 10 +++--- core/workspace_svg.js | 8 ++--- core/zoom_controls.js | 27 ++++++++------- 27 files changed, 176 insertions(+), 179 deletions(-) diff --git a/core/block_animations.js b/core/block_animations.js index 885a61c48..6166ae8cd 100644 --- a/core/block_animations.js +++ b/core/block_animations.js @@ -26,7 +26,6 @@ goog.provide('Blockly.BlockAnimations'); -goog.require('Blockly.utils'); goog.require('Blockly.utils.dom'); @@ -117,7 +116,7 @@ Blockly.BlockAnimations.connectionUiEffect = function(block) { xy.x += (block.RTL ? -23 : 23) * scale; xy.y += 3 * scale; } - var ripple = Blockly.utils.createSvgElement('circle', + var ripple = Blockly.utils.dom.createSvgElement('circle', { 'cx': xy.x, 'cy': xy.y, diff --git a/core/block_drag_surface.js b/core/block_drag_surface.js index 18c7e70f2..a9c46c244 100644 --- a/core/block_drag_surface.js +++ b/core/block_drag_surface.js @@ -32,6 +32,7 @@ goog.provide('Blockly.BlockDragSurfaceSvg'); goog.require('Blockly.utils'); goog.require('Blockly.utils.Coordinate'); +goog.require('Blockly.utils.dom'); /** @@ -95,14 +96,14 @@ Blockly.BlockDragSurfaceSvg.prototype.createDom = function() { if (this.SVG_) { return; // Already created. } - this.SVG_ = Blockly.utils.createSvgElement('svg', { - 'xmlns': Blockly.SVG_NS, - 'xmlns:html': Blockly.HTML_NS, + this.SVG_ = Blockly.utils.dom.createSvgElement('svg', { + 'xmlns': Blockly.utils.dom.SVG_NS, + 'xmlns:html': Blockly.utils.dom.HTML_NS, 'xmlns:xlink': 'http://www.w3.org/1999/xlink', 'version': '1.1', 'class': 'blocklyBlockDragSurface' }, this.container_); - this.dragGroup_ = Blockly.utils.createSvgElement('g', {}, this.SVG_); + this.dragGroup_ = Blockly.utils.dom.createSvgElement('g', {}, this.SVG_); }; /** @@ -152,7 +153,7 @@ Blockly.BlockDragSurfaceSvg.prototype.translateSurfaceInternal_ = function() { y = y.toFixed(0); this.SVG_.style.display = 'block'; - Blockly.utils.setCssTransform(this.SVG_, + Blockly.utils.dom.setCssTransform(this.SVG_, 'translate3d(' + x + 'px, ' + y + 'px, 0px)'); }; diff --git a/core/block_svg.js b/core/block_svg.js index f67179913..347a56be7 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -59,14 +59,14 @@ Blockly.BlockSvg = function(workspace, prototypeName, opt_id) { * @type {SVGElement} * @private */ - this.svgGroup_ = Blockly.utils.createSvgElement('g', {}, null); + this.svgGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); this.svgGroup_.translate_ = ''; /** * @type {SVGElement} * @private */ - this.svgPathDark_ = Blockly.utils.createSvgElement('path', + this.svgPathDark_ = Blockly.utils.dom.createSvgElement('path', {'class': 'blocklyPathDark', 'transform': 'translate(1,1)'}, this.svgGroup_); @@ -74,14 +74,14 @@ Blockly.BlockSvg = function(workspace, prototypeName, opt_id) { * @type {SVGElement} * @private */ - this.svgPath_ = Blockly.utils.createSvgElement('path', + this.svgPath_ = Blockly.utils.dom.createSvgElement('path', {'class': 'blocklyPath'}, this.svgGroup_); /** * @type {SVGElement} * @private */ - this.svgPathLight_ = Blockly.utils.createSvgElement('path', + this.svgPathLight_ = Blockly.utils.dom.createSvgElement('path', {'class': 'blocklyPathLight'}, this.svgGroup_); this.svgPath_.tooltip = this; diff --git a/core/bubble.js b/core/bubble.js index 18f6b07a4..d5b9f31b1 100644 --- a/core/bubble.js +++ b/core/bubble.js @@ -224,7 +224,7 @@ Blockly.Bubble.prototype.createDom_ = function(content, hasResize) { [...content goes here...] */ - this.bubbleGroup_ = Blockly.utils.createSvgElement('g', {}, null); + this.bubbleGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); var filter = {'filter': 'url(#' + this.workspace_.options.embossFilterId + ')'}; if (Blockly.utils.userAgent.JAVA_FX) { @@ -232,10 +232,10 @@ Blockly.Bubble.prototype.createDom_ = function(content, hasResize) { // https://github.com/google/blockly/issues/99 filter = {}; } - var bubbleEmboss = Blockly.utils.createSvgElement('g', + var bubbleEmboss = Blockly.utils.dom.createSvgElement('g', filter, this.bubbleGroup_); - this.bubbleArrow_ = Blockly.utils.createSvgElement('path', {}, bubbleEmboss); - this.bubbleBack_ = Blockly.utils.createSvgElement('rect', + this.bubbleArrow_ = Blockly.utils.dom.createSvgElement('path', {}, bubbleEmboss); + this.bubbleBack_ = Blockly.utils.dom.createSvgElement('rect', { 'class': 'blocklyDraggable', 'x': 0, @@ -245,21 +245,21 @@ Blockly.Bubble.prototype.createDom_ = function(content, hasResize) { }, bubbleEmboss); if (hasResize) { - this.resizeGroup_ = Blockly.utils.createSvgElement('g', + this.resizeGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': this.workspace_.RTL ? 'blocklyResizeSW' : 'blocklyResizeSE'}, this.bubbleGroup_); var resizeSize = 2 * Blockly.Bubble.BORDER_WIDTH; - Blockly.utils.createSvgElement('polygon', + Blockly.utils.dom.createSvgElement('polygon', {'points': '0,x x,x x,0'.replace(/x/g, resizeSize.toString())}, this.resizeGroup_); - Blockly.utils.createSvgElement('line', + Blockly.utils.dom.createSvgElement('line', { 'class': 'blocklyResizeLine', 'x1': resizeSize / 3, 'y1': resizeSize - 1, 'x2': resizeSize - 1, 'y2': resizeSize / 3 }, this.resizeGroup_); - Blockly.utils.createSvgElement('line', + Blockly.utils.dom.createSvgElement('line', { 'class': 'blocklyResizeLine', 'x1': resizeSize * 2 / 3, diff --git a/core/comment.js b/core/comment.js index e60accff9..f587cc78d 100644 --- a/core/comment.js +++ b/core/comment.js @@ -31,7 +31,7 @@ goog.require('Blockly.Events'); goog.require('Blockly.Events.BlockChange'); goog.require('Blockly.Events.Ui'); goog.require('Blockly.Icon'); -goog.require('Blockly.utils'); +goog.provide('Blockly.utils.dom'); goog.require('Blockly.utils.userAgent'); @@ -72,13 +72,13 @@ Blockly.Comment.prototype.height_ = 80; */ Blockly.Comment.prototype.drawIcon_ = function(group) { // Circle. - Blockly.utils.createSvgElement('circle', + Blockly.utils.dom.createSvgElement('circle', {'class': 'blocklyIconShape', 'r': '8', 'cx': '8', 'cy': '8'}, group); // Can't use a real '?' text character since different browsers and operating // systems render it differently. // Body of question mark. - Blockly.utils.createSvgElement('path', + Blockly.utils.dom.createSvgElement('path', { 'class': 'blocklyIconSymbol', 'd': 'm6.8,10h2c0.003,-0.617 0.271,-0.962 0.633,-1.266 2.875,-2.405' + @@ -86,7 +86,7 @@ Blockly.Comment.prototype.drawIcon_ = function(group) { '-1.201,0.998 -1.201,1.528 -1.204,2.19z'}, group); // Dot of question mark. - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', { 'class': 'blocklyIconSymbol', 'x': '6.8', @@ -112,13 +112,13 @@ Blockly.Comment.prototype.createEditor_ = function() { */ - this.foreignObject_ = Blockly.utils.createSvgElement('foreignObject', + this.foreignObject_ = Blockly.utils.dom.createSvgElement('foreignObject', {'x': Blockly.Bubble.BORDER_WIDTH, 'y': Blockly.Bubble.BORDER_WIDTH}, null); - var body = document.createElementNS(Blockly.HTML_NS, 'body'); - body.setAttribute('xmlns', Blockly.HTML_NS); + var body = document.createElementNS(Blockly.utils.dom.HTML_NS, 'body'); + body.setAttribute('xmlns', Blockly.utils.dom.HTML_NS); body.className = 'blocklyMinimalBody'; - var textarea = document.createElementNS(Blockly.HTML_NS, 'textarea'); + var textarea = document.createElementNS(Blockly.utils.dom.HTML_NS, 'textarea'); textarea.className = 'blocklyCommentTextarea'; textarea.setAttribute('dir', this.block_.RTL ? 'RTL' : 'LTR'); body.appendChild(textarea); diff --git a/core/constants.js b/core/constants.js index f310f1385..7d2111e69 100644 --- a/core/constants.js +++ b/core/constants.js @@ -129,18 +129,6 @@ Blockly.SPRITE = { // Constants below this point are not intended to be changed. -/** - * Required name space for SVG elements. - * @const - */ -Blockly.SVG_NS = 'http://www.w3.org/2000/svg'; - -/** - * Required name space for HTML elements. - * @const - */ -Blockly.HTML_NS = 'http://www.w3.org/1999/xhtml'; - /** * ENUM for a right-facing value input. E.g. 'set item to' or 'return'. * @const diff --git a/core/field.js b/core/field.js index fd5cb26d3..72f9e3d13 100644 --- a/core/field.js +++ b/core/field.js @@ -31,7 +31,6 @@ goog.provide('Blockly.Field'); goog.require('Blockly.Events'); goog.require('Blockly.Events.BlockChange'); goog.require('Blockly.Gesture'); -goog.require('Blockly.utils'); goog.require('Blockly.utils.dom'); goog.require('Blockly.utils.userAgent'); @@ -230,7 +229,7 @@ Blockly.Field.prototype.init = function() { // Field has already been initialized once. return; } - this.fieldGroup_ = Blockly.utils.createSvgElement('g', {}, null); + this.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); if (!this.isVisible()) { this.fieldGroup_.style.display = 'none'; } @@ -258,7 +257,7 @@ Blockly.Field.prototype.initView = function() { * @protected */ Blockly.Field.prototype.createBorderRect_ = function() { - this.borderRect_ = Blockly.utils.createSvgElement('rect', + this.borderRect_ = Blockly.utils.dom.createSvgElement('rect', { 'rx': 4, 'ry': 4, @@ -276,7 +275,7 @@ Blockly.Field.prototype.createBorderRect_ = function() { * @protected */ Blockly.Field.prototype.createTextElement_ = function() { - this.textElement_ = Blockly.utils.createSvgElement('text', + this.textElement_ = Blockly.utils.dom.createSvgElement('text', { 'class': 'blocklyText', 'y': this.size_.height - 12.5 diff --git a/core/field_angle.js b/core/field_angle.js index da195df42..6c44deb8b 100644 --- a/core/field_angle.js +++ b/core/field_angle.js @@ -28,7 +28,7 @@ goog.provide('Blockly.FieldAngle'); goog.require('Blockly.DropDownDiv'); goog.require('Blockly.FieldTextInput'); -goog.require('Blockly.utils'); +goog.provide('Blockly.utils.dom'); goog.require('Blockly.utils.math'); goog.require('Blockly.utils.userAgent'); @@ -125,7 +125,7 @@ Blockly.FieldAngle.RADIUS = Blockly.FieldAngle.HALF - 1; Blockly.FieldAngle.prototype.initView = function() { Blockly.FieldAngle.superClass_.initView.call(this); // Add the degree symbol to the left of the number, even in RTL (issue #2380) - this.symbol_ = Blockly.utils.createSvgElement('tspan', {}, null); + this.symbol_ = Blockly.utils.dom.createSvgElement('tspan', {}, null); this.symbol_.appendChild(document.createTextNode('\u00B0')); this.textElement_.appendChild(this.symbol_); }; @@ -176,7 +176,7 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { var div = Blockly.DropDownDiv.getContentDiv(); // Build the SVG DOM. - var svg = Blockly.utils.createSvgElement('svg', { + var svg = Blockly.utils.dom.createSvgElement('svg', { 'xmlns': 'http://www.w3.org/2000/svg', 'xmlns:html': 'http://www.w3.org/1999/xhtml', 'xmlns:xlink': 'http://www.w3.org/1999/xlink', @@ -184,21 +184,21 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { 'height': (Blockly.FieldAngle.HALF * 2) + 'px', 'width': (Blockly.FieldAngle.HALF * 2) + 'px' }, div); - var circle = Blockly.utils.createSvgElement('circle', { + var circle = Blockly.utils.dom.createSvgElement('circle', { 'cx': Blockly.FieldAngle.HALF, 'cy': Blockly.FieldAngle.HALF, 'r': Blockly.FieldAngle.RADIUS, 'class': 'blocklyAngleCircle' }, svg); - this.gauge_ = Blockly.utils.createSvgElement('path', + this.gauge_ = Blockly.utils.dom.createSvgElement('path', {'class': 'blocklyAngleGauge'}, svg); - this.line_ = Blockly.utils.createSvgElement('line', { + this.line_ = Blockly.utils.dom.createSvgElement('line', { 'x1': Blockly.FieldAngle.HALF, 'y1': Blockly.FieldAngle.HALF, 'class': 'blocklyAngleLine' }, svg); // Draw markers around the edge. for (var angle = 0; angle < 360; angle += 15) { - Blockly.utils.createSvgElement('line', { + Blockly.utils.dom.createSvgElement('line', { 'x1': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS, 'y1': Blockly.FieldAngle.HALF, 'x2': Blockly.FieldAngle.HALF + Blockly.FieldAngle.RADIUS - diff --git a/core/field_dropdown.js b/core/field_dropdown.js index c9faa1dba..610fb3c8d 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -137,12 +137,12 @@ Blockly.FieldDropdown.prototype.imageJson_ = null; Blockly.FieldDropdown.prototype.initView = function() { Blockly.FieldDropdown.superClass_.initView.call(this); - this.imageElement_ = Blockly.utils.createSvgElement( 'image', + this.imageElement_ = Blockly.utils.dom.createSvgElement( 'image', { 'y': Blockly.FieldDropdown.IMAGE_Y_OFFSET }, this.fieldGroup_); - this.arrow_ = Blockly.utils.createSvgElement('tspan', {}, this.textElement_); + this.arrow_ = Blockly.utils.dom.createSvgElement('tspan', {}, this.textElement_); this.arrow_.appendChild(document.createTextNode( this.sourceBlock_.RTL ? Blockly.FieldDropdown.ARROW_CHAR + ' ' : diff --git a/core/field_image.js b/core/field_image.js index e7d8a96c3..098ff1d2a 100644 --- a/core/field_image.js +++ b/core/field_image.js @@ -117,7 +117,7 @@ Blockly.FieldImage.prototype.isDirty_ = false; * @package */ Blockly.FieldImage.prototype.initView = function() { - this.imageElement_ = Blockly.utils.createSvgElement( + this.imageElement_ = Blockly.utils.dom.createSvgElement( 'image', { 'height': this.height_ + 'px', diff --git a/core/flyout_base.js b/core/flyout_base.js index 2d37598f3..e42798284 100644 --- a/core/flyout_base.js +++ b/core/flyout_base.js @@ -213,9 +213,9 @@ Blockly.Flyout.prototype.createDom = function(tagName) { */ // Setting style to display:none to start. The toolbox and flyout // hide/show code will set up proper visibility and size later. - this.svgGroup_ = Blockly.utils.createSvgElement(tagName, + this.svgGroup_ = Blockly.utils.dom.createSvgElement(tagName, {'class': 'blocklyFlyout', 'style': 'display: none'}, null); - this.svgBackground_ = Blockly.utils.createSvgElement('path', + this.svgBackground_ = Blockly.utils.dom.createSvgElement('path', {'class': 'blocklyFlyoutBackground'}, this.svgGroup_); this.svgGroup_.appendChild(this.workspace_.createDom()); return this.svgGroup_; @@ -376,7 +376,7 @@ Blockly.Flyout.prototype.positionAt_ = function(width, height, x, y) { this.svgGroup_.setAttribute("height", height); if (this.svgGroup_.tagName == 'svg') { var transform = 'translate(' + x + 'px,' + y + 'px)'; - Blockly.utils.setCssTransform(this.svgGroup_, transform); + Blockly.utils.dom.setCssTransform(this.svgGroup_, transform); } else { // IE and Edge don't support CSS transforms on SVG elements so // it's important to set the transform on the SVG element itself @@ -693,7 +693,7 @@ Blockly.Flyout.prototype.initFlyoutButton_ = function(button, x, y) { Blockly.Flyout.prototype.createRect_ = function(block, x, y, blockHW, index) { // Create an invisible rectangle under the block to act as a button. Just // using the block as a button is poor, since blocks have holes in them. - var rect = Blockly.utils.createSvgElement('rect', + var rect = Blockly.utils.dom.createSvgElement('rect', { 'fill-opacity': 0, 'x': x, diff --git a/core/flyout_button.js b/core/flyout_button.js index 9a8a9776e..6f8985b31 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -123,12 +123,12 @@ Blockly.FlyoutButton.prototype.createDom = function() { cssClass += ' ' + this.cssClass_; } - this.svgGroup_ = Blockly.utils.createSvgElement('g', {'class': cssClass}, + this.svgGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': cssClass}, this.workspace_.getCanvas()); if (!this.isLabel_) { // Shadow rectangle (light source does not mirror in RTL). - var shadow = Blockly.utils.createSvgElement('rect', + var shadow = Blockly.utils.dom.createSvgElement('rect', { 'class': 'blocklyFlyoutButtonShadow', 'rx': 4, 'ry': 4, 'x': 1, 'y': 1 @@ -136,7 +136,7 @@ Blockly.FlyoutButton.prototype.createDom = function() { this.svgGroup_); } // Background rectangle. - var rect = Blockly.utils.createSvgElement('rect', + var rect = Blockly.utils.dom.createSvgElement('rect', { 'class': this.isLabel_ ? 'blocklyFlyoutLabelBackground' : 'blocklyFlyoutButtonBackground', @@ -144,7 +144,7 @@ Blockly.FlyoutButton.prototype.createDom = function() { }, this.svgGroup_); - var svgText = Blockly.utils.createSvgElement('text', + var svgText = Blockly.utils.dom.createSvgElement('text', { 'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText', 'x': 0, diff --git a/core/grid.js b/core/grid.js index 2f727751d..2e78cb819 100644 --- a/core/grid.js +++ b/core/grid.js @@ -27,7 +27,7 @@ goog.provide('Blockly.Grid'); -goog.require('Blockly.utils'); +goog.provide('Blockly.utils.dom'); goog.require('Blockly.utils.userAgent'); @@ -208,22 +208,22 @@ Blockly.Grid.createDom = function(rnd, gridOptions, defs) { */ - var gridPattern = Blockly.utils.createSvgElement('pattern', + var gridPattern = Blockly.utils.dom.createSvgElement('pattern', { 'id': 'blocklyGridPattern' + rnd, 'patternUnits': 'userSpaceOnUse' }, defs); if (gridOptions['length'] > 0 && gridOptions['spacing'] > 0) { - Blockly.utils.createSvgElement('line', + Blockly.utils.dom.createSvgElement('line', {'stroke': gridOptions['colour']}, gridPattern); if (gridOptions['length'] > 1) { - Blockly.utils.createSvgElement('line', + Blockly.utils.dom.createSvgElement('line', {'stroke': gridOptions['colour']}, gridPattern); } // x1, y1, x1, x2 properties will be set later in update. } else { // Edge 16 doesn't handle empty patterns - Blockly.utils.createSvgElement('line', {}, gridPattern); + Blockly.utils.dom.createSvgElement('line', {}, gridPattern); } return gridPattern; }; diff --git a/core/icon.js b/core/icon.js index 85d9dc445..73f3df609 100644 --- a/core/icon.js +++ b/core/icon.js @@ -77,7 +77,7 @@ Blockly.Icon.prototype.createIcon = function() { ... */ - this.iconGroup_ = Blockly.utils.createSvgElement('g', + this.iconGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': 'blocklyIconGroup'}, null); if (this.block_.isInFlyout) { Blockly.utils.dom.addClass( diff --git a/core/inject.js b/core/inject.js index e68ec6e7a..61df917db 100644 --- a/core/inject.js +++ b/core/inject.js @@ -112,7 +112,7 @@ Blockly.createDom_ = function(container, options) { ... */ - var svg = Blockly.utils.createSvgElement('svg', { + var svg = Blockly.utils.dom.createSvgElement('svg', { 'xmlns': 'http://www.w3.org/2000/svg', 'xmlns:html': 'http://www.w3.org/1999/xhtml', 'xmlns:xlink': 'http://www.w3.org/1999/xlink', @@ -124,7 +124,7 @@ Blockly.createDom_ = function(container, options) { ... filters go here ... */ - var defs = Blockly.utils.createSvgElement('defs', {}, svg); + var defs = Blockly.utils.dom.createSvgElement('defs', {}, svg); // Each filter/pattern needs a unique ID for the case of multiple Blockly // instances on a page. Browser behaviour becomes undefined otherwise. // https://neil.fraser.name/news/2015/11/01/ @@ -143,11 +143,11 @@ Blockly.createDom_ = function(container, options) { k1="0" k2="1" k3="1" k4="0" /> */ - var embossFilter = Blockly.utils.createSvgElement('filter', + var embossFilter = Blockly.utils.dom.createSvgElement('filter', {'id': 'blocklyEmbossFilter' + rnd}, defs); - Blockly.utils.createSvgElement('feGaussianBlur', + Blockly.utils.dom.createSvgElement('feGaussianBlur', {'in': 'SourceAlpha', 'stdDeviation': 1, 'result': 'blur'}, embossFilter); - var feSpecularLighting = Blockly.utils.createSvgElement('feSpecularLighting', + var feSpecularLighting = Blockly.utils.dom.createSvgElement('feSpecularLighting', { 'in': 'blur', 'surfaceScale': 1, @@ -157,16 +157,16 @@ Blockly.createDom_ = function(container, options) { 'result': 'specOut' }, embossFilter); - Blockly.utils.createSvgElement('fePointLight', + Blockly.utils.dom.createSvgElement('fePointLight', {'x': -5000, 'y': -10000, 'z': 20000}, feSpecularLighting); - Blockly.utils.createSvgElement('feComposite', + Blockly.utils.dom.createSvgElement('feComposite', { 'in': 'specOut', 'in2': 'SourceAlpha', 'operator': 'in', 'result': 'specOut' }, embossFilter); - Blockly.utils.createSvgElement('feComposite', + Blockly.utils.dom.createSvgElement('feComposite', { 'in': 'SourceGraphic', 'in2': 'specOut', @@ -184,16 +184,16 @@ Blockly.createDom_ = function(container, options) { */ - var disabledPattern = Blockly.utils.createSvgElement('pattern', + var disabledPattern = Blockly.utils.dom.createSvgElement('pattern', { 'id': 'blocklyDisabledPattern' + rnd, 'patternUnits': 'userSpaceOnUse', 'width': 10, 'height': 10 }, defs); - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', {'width': 10, 'height': 10, 'fill': '#aaa'}, disabledPattern); - Blockly.utils.createSvgElement('path', + Blockly.utils.dom.createSvgElement('path', {'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern); options.disabledPatternId = disabledPattern.id; diff --git a/core/mutator.js b/core/mutator.js index 5247706c0..186e9d276 100644 --- a/core/mutator.js +++ b/core/mutator.js @@ -70,7 +70,7 @@ Blockly.Mutator.prototype.workspaceHeight_ = 0; */ Blockly.Mutator.prototype.drawIcon_ = function(group) { // Square with rounded corners. - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', { 'class': 'blocklyIconShape', 'rx': '4', @@ -80,7 +80,7 @@ Blockly.Mutator.prototype.drawIcon_ = function(group) { }, group); // Gear teeth. - Blockly.utils.createSvgElement('path', + Blockly.utils.dom.createSvgElement('path', { 'class': 'blocklyIconSymbol', 'd': 'm4.203,7.296 0,1.368 -0.92,0.677 -0.11,0.41 0.9,1.559 0.41,' + @@ -93,7 +93,7 @@ Blockly.Mutator.prototype.drawIcon_ = function(group) { }, group); // Axle hole. - Blockly.utils.createSvgElement( + Blockly.utils.dom.createSvgElement( 'circle', { 'class': 'blocklyIconShape', @@ -128,7 +128,7 @@ Blockly.Mutator.prototype.createEditor_ = function() { [Workspace] */ - this.svgDialog_ = Blockly.utils.createSvgElement('svg', + this.svgDialog_ = Blockly.utils.dom.createSvgElement('svg', {'x': Blockly.Bubble.BORDER_WIDTH, 'y': Blockly.Bubble.BORDER_WIDTH}, null); // Convert the list of names into a list of XML objects for the flyout. diff --git a/core/rendered_connection.js b/core/rendered_connection.js index f180cfdea..6dba66123 100644 --- a/core/rendered_connection.js +++ b/core/rendered_connection.js @@ -210,7 +210,7 @@ Blockly.RenderedConnection.prototype.highlight = function() { var xy = this.sourceBlock_.getRelativeToSurfaceXY(); var x = this.x_ - xy.x; var y = this.y_ - xy.y; - Blockly.Connection.highlightedPath_ = Blockly.utils.createSvgElement( + Blockly.Connection.highlightedPath_ = Blockly.utils.dom.createSvgElement( 'path', { 'class': 'blocklyHighlightedConnectionPath', diff --git a/core/scrollbar.js b/core/scrollbar.js index 11e5ecf2d..7ea608a9b 100644 --- a/core/scrollbar.js +++ b/core/scrollbar.js @@ -49,7 +49,7 @@ Blockly.ScrollbarPair = function(workspace) { workspace, true, true, 'blocklyMainWorkspaceScrollbar'); this.vScroll = new Blockly.Scrollbar( workspace, false, true, 'blocklyMainWorkspaceScrollbar'); - this.corner_ = Blockly.utils.createSvgElement( + this.corner_ = Blockly.utils.dom.createSvgElement( 'rect', { 'height': Blockly.Scrollbar.scrollbarThickness, @@ -410,7 +410,7 @@ Blockly.Scrollbar.prototype.setPosition_ = function(x, y) { var tempX = this.position_.x + this.origin_.x; var tempY = this.position_.y + this.origin_.y; var transform = 'translate(' + tempX + 'px,' + tempY + 'px)'; - Blockly.utils.setCssTransform(this.outerSvg_, transform); + Blockly.utils.dom.setCssTransform(this.outerSvg_, transform); }; /** @@ -611,13 +611,13 @@ Blockly.Scrollbar.prototype.createDom_ = function(opt_class) { if (opt_class) { className += ' ' + opt_class; } - this.outerSvg_ = Blockly.utils.createSvgElement( + this.outerSvg_ = Blockly.utils.dom.createSvgElement( 'svg', {'class': className}, null); - this.svgGroup_ = Blockly.utils.createSvgElement('g', {}, this.outerSvg_); - this.svgBackground_ = Blockly.utils.createSvgElement( + this.svgGroup_ = Blockly.utils.dom.createSvgElement('g', {}, this.outerSvg_); + this.svgBackground_ = Blockly.utils.dom.createSvgElement( 'rect', {'class': 'blocklyScrollbarBackground'}, this.svgGroup_); var radius = Math.floor((Blockly.Scrollbar.scrollbarThickness - 5) / 2); - this.svgHandle_ = Blockly.utils.createSvgElement( + this.svgHandle_ = Blockly.utils.dom.createSvgElement( 'rect', { 'class': 'blocklyScrollbarHandle', diff --git a/core/trashcan.js b/core/trashcan.js index b5c13c0a1..035ff9e77 100644 --- a/core/trashcan.js +++ b/core/trashcan.js @@ -26,7 +26,6 @@ goog.provide('Blockly.Trashcan'); -goog.require('Blockly.utils'); goog.require('Blockly.utils.dom'); goog.require('Blockly.utils.Rect'); goog.require('Blockly.Xml'); @@ -225,21 +224,21 @@ Blockly.Trashcan.prototype.createDom = function() { clip-path="url(#blocklyTrashLidClipPath837493)"> */ - this.svgGroup_ = Blockly.utils.createSvgElement('g', + this.svgGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': 'blocklyTrash'}, null); var clip; var rnd = String(Math.random()).substring(2); - clip = Blockly.utils.createSvgElement('clipPath', + clip = Blockly.utils.dom.createSvgElement('clipPath', {'id': 'blocklyTrashBodyClipPath' + rnd}, this.svgGroup_); - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', { 'width': this.WIDTH_, 'height': this.BODY_HEIGHT_, 'y': this.LID_HEIGHT_ }, clip); - var body = Blockly.utils.createSvgElement('image', + var body = Blockly.utils.dom.createSvgElement('image', { 'width': Blockly.SPRITE.width, 'x': -this.SPRITE_LEFT_, @@ -251,12 +250,12 @@ Blockly.Trashcan.prototype.createDom = function() { body.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', this.workspace_.options.pathToMedia + Blockly.SPRITE.url); - clip = Blockly.utils.createSvgElement('clipPath', + clip = Blockly.utils.dom.createSvgElement('clipPath', {'id': 'blocklyTrashLidClipPath' + rnd}, this.svgGroup_); - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', {'width': this.WIDTH_, 'height': this.LID_HEIGHT_}, clip); - this.svgLid_ = Blockly.utils.createSvgElement('image', + this.svgLid_ = Blockly.utils.dom.createSvgElement('image', { 'width': Blockly.SPRITE.width, 'x': -this.SPRITE_LEFT_, diff --git a/core/utils.js b/core/utils.js index f2c3f18da..278121e20 100644 --- a/core/utils.js +++ b/core/utils.js @@ -151,31 +151,6 @@ Blockly.utils.getRelativeXY.XY_REGEX_ = Blockly.utils.getRelativeXY.XY_STYLE_REGEX_ = /transform:\s*translate(?:3d)?\(\s*([-+\d.e]+)\s*px([ ,]\s*([-+\d.e]+)\s*px)?/; -/** - * Helper method for creating SVG elements. - * @param {string} name Element's tag name. - * @param {!Object} attrs Dictionary of attribute names and values. - * @param {Element} parent Optional parent on which to append the element. - * @return {!SVGElement} Newly created SVG element. - */ -Blockly.utils.createSvgElement = function(name, attrs, parent) { - var e = /** @type {!SVGElement} */ - (document.createElementNS(Blockly.SVG_NS, name)); - for (var key in attrs) { - e.setAttribute(key, attrs[key]); - } - // IE defines a unique attribute "runtimeStyle", it is NOT applied to - // elements created with createElementNS. However, Closure checks for IE - // and assumes the presence of the attribute and crashes. - if (document.body.runtimeStyle) { // Indicates presence of IE-only attr. - e.runtimeStyle = e.currentStyle = e.style; - } - if (parent) { - parent.appendChild(e); - } - return e; -}; - /** * Is this event a right-click? * @param {!Event} e Mouse event. @@ -539,18 +514,6 @@ Blockly.utils.runAfterPageLoad = function(fn) { } }; -/** - * Sets the CSS transform property on an element. This function sets the - * non-vendor-prefixed and vendor-prefixed versions for backwards compatibility - * with older browsers. See https://caniuse.com/#feat=transforms2d - * @param {!Element} node The node which the CSS transform should be applied. - * @param {string} transform The value of the CSS `transform` property. - */ -Blockly.utils.setCssTransform = function(node, transform) { - node.style['transform'] = transform; - node.style['-webkit-transform'] = transform; -}; - /** * Get the position of the current viewport in window coordinates. This takes * scroll into account. diff --git a/core/utils/dom.js b/core/utils/dom.js index 9151d4499..eff026f0d 100644 --- a/core/utils/dom.js +++ b/core/utils/dom.js @@ -33,6 +33,43 @@ goog.provide('Blockly.utils.dom'); +/** + * Required name space for SVG elements. + * @const + */ +Blockly.utils.dom.SVG_NS = 'http://www.w3.org/2000/svg'; + +/** + * Required name space for HTML elements. + * @const + */ +Blockly.utils.dom.HTML_NS = 'http://www.w3.org/1999/xhtml'; + +/** + * Helper method for creating SVG elements. + * @param {string} name Element's tag name. + * @param {!Object} attrs Dictionary of attribute names and values. + * @param {Element} parent Optional parent on which to append the element. + * @return {!SVGElement} Newly created SVG element. + */ +Blockly.utils.dom.createSvgElement = function(name, attrs, parent) { + var e = /** @type {!SVGElement} */ + (document.createElementNS(Blockly.utils.dom.SVG_NS, name)); + for (var key in attrs) { + e.setAttribute(key, attrs[key]); + } + // IE defines a unique attribute "runtimeStyle", it is NOT applied to + // elements created with createElementNS. However, Closure checks for IE + // and assumes the presence of the attribute and crashes. + if (document.body.runtimeStyle) { // Indicates presence of IE-only attr. + e.runtimeStyle = e.currentStyle = e.style; + } + if (parent) { + parent.appendChild(e); + } + return e; +}; + /** * Add a CSS class to a element. * Similar to Closure's goog.dom.classes.add, except it handles SVG elements. @@ -130,3 +167,15 @@ Blockly.utils.dom.containsNode = function(parent, descendant) { return !!(parent.compareDocumentPosition(descendant) & Node.DOCUMENT_POSITION_CONTAINED_BY); }; + +/** + * Sets the CSS transform property on an element. This function sets the + * non-vendor-prefixed and vendor-prefixed versions for backwards compatibility + * with older browsers. See https://caniuse.com/#feat=transforms2d + * @param {!Element} element Element to which the CSS transform will be applied. + * @param {string} transform The value of the CSS `transform` property. + */ +Blockly.utils.dom.setCssTransform = function(element, transform) { + element.style['transform'] = transform; + element.style['-webkit-transform'] = transform; +}; diff --git a/core/warning.js b/core/warning.js index f1633c06e..551bda5df 100644 --- a/core/warning.js +++ b/core/warning.js @@ -30,7 +30,7 @@ goog.require('Blockly.Bubble'); goog.require('Blockly.Events'); goog.require('Blockly.Events.Ui'); goog.require('Blockly.Icon'); -goog.require('Blockly.utils'); +goog.provide('Blockly.utils.dom'); /** @@ -59,7 +59,7 @@ Blockly.Warning.prototype.collapseHidden = false; */ Blockly.Warning.prototype.drawIcon_ = function(group) { // Triangle with rounded corners. - Blockly.utils.createSvgElement('path', + Blockly.utils.dom.createSvgElement('path', { 'class': 'blocklyIconShape', 'd': 'M2,15Q-1,15 0.5,12L6.5,1.7Q8,-1 9.5,1.7L15.5,12Q17,15 14,15z' @@ -68,14 +68,14 @@ Blockly.Warning.prototype.drawIcon_ = function(group) { // Can't use a real '!' text character since different browsers and operating // systems render it differently. // Body of exclamation point. - Blockly.utils.createSvgElement('path', + Blockly.utils.dom.createSvgElement('path', { 'class': 'blocklyIconSymbol', 'd': 'm7,4.8v3.16l0.27,2.27h1.46l0.27,-2.27v-3.16z' }, group); // Dot of exclamation point. - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', { 'class': 'blocklyIconSymbol', 'x': '7', 'y': '11', 'height': '2', 'width': '2' @@ -91,7 +91,7 @@ Blockly.Warning.prototype.drawIcon_ = function(group) { */ Blockly.Warning.textToDom_ = function(text) { var paragraph = /** @type {!SVGTextElement} */ - (Blockly.utils.createSvgElement( + (Blockly.utils.dom.createSvgElement( 'text', { 'class': 'blocklyText blocklyBubbleText', @@ -101,7 +101,7 @@ Blockly.Warning.textToDom_ = function(text) { ); var lines = text.split('\n'); for (var i = 0; i < lines.length; i++) { - var tspanElement = Blockly.utils.createSvgElement('tspan', + var tspanElement = Blockly.utils.dom.createSvgElement('tspan', {'dy': '1em', 'x': Blockly.Bubble.BORDER_WIDTH}, paragraph); var textNode = document.createTextNode(lines[i]); tspanElement.appendChild(textNode); diff --git a/core/workspace_comment_render_svg.js b/core/workspace_comment_render_svg.js index 0742d8675..de5bdec3a 100644 --- a/core/workspace_comment_render_svg.js +++ b/core/workspace_comment_render_svg.js @@ -89,14 +89,14 @@ Blockly.WorkspaceCommentSvg.prototype.render = function() { this.createEditor_(); this.svgGroup_.appendChild(this.foreignObject_); - this.svgHandleTarget_ = Blockly.utils.createSvgElement('rect', + this.svgHandleTarget_ = Blockly.utils.dom.createSvgElement('rect', { 'class': 'blocklyCommentHandleTarget', 'x': 0, 'y': 0 }); this.svgGroup_.appendChild(this.svgHandleTarget_); - this.svgRectTarget_ = Blockly.utils.createSvgElement('rect', + this.svgRectTarget_ = Blockly.utils.dom.createSvgElement('rect', { 'class': 'blocklyCommentTarget', 'x': 0, @@ -150,7 +150,7 @@ Blockly.WorkspaceCommentSvg.prototype.createEditor_ = function() { */ - this.foreignObject_ = Blockly.utils.createSvgElement( + this.foreignObject_ = Blockly.utils.dom.createSvgElement( 'foreignObject', { 'x': 0, @@ -158,10 +158,10 @@ Blockly.WorkspaceCommentSvg.prototype.createEditor_ = function() { 'class': 'blocklyCommentForeignObject' }, null); - var body = document.createElementNS(Blockly.HTML_NS, 'body'); - body.setAttribute('xmlns', Blockly.HTML_NS); + var body = document.createElementNS(Blockly.utils.dom.HTML_NS, 'body'); + body.setAttribute('xmlns', Blockly.utils.dom.HTML_NS); body.className = 'blocklyMinimalBody'; - var textarea = document.createElementNS(Blockly.HTML_NS, 'textarea'); + var textarea = document.createElementNS(Blockly.utils.dom.HTML_NS, 'textarea'); textarea.className = 'blocklyCommentTextarea'; textarea.setAttribute('dir', this.RTL ? 'RTL' : 'LTR'); body.appendChild(textarea); @@ -184,25 +184,25 @@ Blockly.WorkspaceCommentSvg.prototype.createEditor_ = function() { * @private */ Blockly.WorkspaceCommentSvg.prototype.addResizeDom_ = function() { - this.resizeGroup_ = Blockly.utils.createSvgElement( + this.resizeGroup_ = Blockly.utils.dom.createSvgElement( 'g', { 'class': this.RTL ? 'blocklyResizeSW' : 'blocklyResizeSE' }, this.svgGroup_); var resizeSize = Blockly.WorkspaceCommentSvg.RESIZE_SIZE; - Blockly.utils.createSvgElement( + Blockly.utils.dom.createSvgElement( 'polygon', {'points': '0,x x,x x,0'.replace(/x/g, resizeSize.toString())}, this.resizeGroup_); - Blockly.utils.createSvgElement( + Blockly.utils.dom.createSvgElement( 'line', { 'class': 'blocklyResizeLine', 'x1': resizeSize / 3, 'y1': resizeSize - 1, 'x2': resizeSize - 1, 'y2': resizeSize / 3 }, this.resizeGroup_); - Blockly.utils.createSvgElement( + Blockly.utils.dom.createSvgElement( 'line', { 'class': 'blocklyResizeLine', @@ -216,13 +216,13 @@ Blockly.WorkspaceCommentSvg.prototype.addResizeDom_ = function() { * @private */ Blockly.WorkspaceCommentSvg.prototype.addDeleteDom_ = function() { - this.deleteGroup_ = Blockly.utils.createSvgElement( + this.deleteGroup_ = Blockly.utils.dom.createSvgElement( 'g', { 'class': 'blocklyCommentDeleteIcon' }, this.svgGroup_); - this.deleteIconBorder_ = Blockly.utils.createSvgElement('circle', + this.deleteIconBorder_ = Blockly.utils.dom.createSvgElement('circle', { 'class': 'blocklyDeleteIconShape', 'r': '7', @@ -231,7 +231,7 @@ Blockly.WorkspaceCommentSvg.prototype.addDeleteDom_ = function() { }, this.deleteGroup_); // x icon. - Blockly.utils.createSvgElement( + Blockly.utils.dom.createSvgElement( 'line', { 'x1': '5', 'y1': '10', @@ -240,7 +240,7 @@ Blockly.WorkspaceCommentSvg.prototype.addDeleteDom_ = function() { 'stroke-width': '2' }, this.deleteGroup_); - Blockly.utils.createSvgElement( + Blockly.utils.dom.createSvgElement( 'line', { 'x1': '5', 'y1': '5', diff --git a/core/workspace_comment_svg.js b/core/workspace_comment_svg.js index 59e28d8e7..3469c1deb 100644 --- a/core/workspace_comment_svg.js +++ b/core/workspace_comment_svg.js @@ -55,11 +55,11 @@ Blockly.WorkspaceCommentSvg = function(workspace, content, height, width, * @type {SVGElement} * @private */ - this.svgGroup_ = Blockly.utils.createSvgElement( + this.svgGroup_ = Blockly.utils.dom.createSvgElement( 'g', {'class': 'blocklyComment'}, null); this.svgGroup_.translate_ = ''; - this.svgRect_ = Blockly.utils.createSvgElement( + this.svgRect_ = Blockly.utils.dom.createSvgElement( 'rect', { 'class': 'blocklyCommentRect', diff --git a/core/workspace_drag_surface_svg.js b/core/workspace_drag_surface_svg.js index 4766a9dec..fbf7c3245 100644 --- a/core/workspace_drag_surface_svg.js +++ b/core/workspace_drag_surface_svg.js @@ -86,10 +86,10 @@ Blockly.WorkspaceDragSurfaceSvg.prototype.createDom = function() { * /g> * */ - this.SVG_ = Blockly.utils.createSvgElement('svg', + this.SVG_ = Blockly.utils.dom.createSvgElement('svg', { - 'xmlns': Blockly.SVG_NS, - 'xmlns:html': Blockly.HTML_NS, + 'xmlns': Blockly.utils.dom.SVG_NS, + 'xmlns:html': Blockly.utils.dom.HTML_NS, 'xmlns:xlink': 'http://www.w3.org/1999/xlink', 'version': '1.1', 'class': 'blocklyWsDragSurface blocklyOverflowVisible' @@ -113,7 +113,7 @@ Blockly.WorkspaceDragSurfaceSvg.prototype.translateSurface = function(x, y) { var fixedY = y.toFixed(0); this.SVG_.style.display = 'block'; - Blockly.utils.setCssTransform( + Blockly.utils.dom.setCssTransform( this.SVG_, 'translate3d(' + fixedX + 'px, ' + fixedY + 'px, 0px)'); }; @@ -163,7 +163,7 @@ Blockly.WorkspaceDragSurfaceSvg.prototype.clearAndHide = function(newSurface) { if (this.SVG_.childNodes.length) { throw Error('Drag surface was not cleared.'); } - Blockly.utils.setCssTransform(this.SVG_, ''); + Blockly.utils.dom.setCssTransform(this.SVG_, ''); this.previousSibling_ = null; }; diff --git a/core/workspace_svg.js b/core/workspace_svg.js index 9498a6f85..bcbe72918 100644 --- a/core/workspace_svg.js +++ b/core/workspace_svg.js @@ -515,7 +515,7 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) { * * @type {SVGElement} */ - this.svgGroup_ = Blockly.utils.createSvgElement('g', + this.svgGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': 'blocklyWorkspace'}, null); // Note that a alone does not receive mouse events--it must have a @@ -523,7 +523,7 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) { // flyout, the workspace will not receive mouse events. if (opt_backgroundClass) { /** @type {SVGElement} */ - this.svgBackground_ = Blockly.utils.createSvgElement('rect', + this.svgBackground_ = Blockly.utils.dom.createSvgElement('rect', {'height': '100%', 'width': '100%', 'class': opt_backgroundClass}, this.svgGroup_); @@ -533,10 +533,10 @@ Blockly.WorkspaceSvg.prototype.createDom = function(opt_backgroundClass) { } } /** @type {SVGElement} */ - this.svgBlockCanvas_ = Blockly.utils.createSvgElement('g', + this.svgBlockCanvas_ = Blockly.utils.dom.createSvgElement('g', {'class': 'blocklyBlockCanvas'}, this.svgGroup_); /** @type {SVGElement} */ - this.svgBubbleCanvas_ = Blockly.utils.createSvgElement('g', + this.svgBubbleCanvas_ = Blockly.utils.dom.createSvgElement('g', {'class': 'blocklyBubbleCanvas'}, this.svgGroup_); if (!this.isFlyout) { diff --git a/core/zoom_controls.js b/core/zoom_controls.js index c9a68e702..3c1e85e82 100644 --- a/core/zoom_controls.js +++ b/core/zoom_controls.js @@ -27,7 +27,6 @@ goog.provide('Blockly.ZoomControls'); goog.require('Blockly.Touch'); -goog.require('Blockly.utils'); goog.require('Blockly.utils.dom'); @@ -95,7 +94,7 @@ Blockly.ZoomControls.prototype.top_ = 0; */ Blockly.ZoomControls.prototype.createDom = function() { this.svgGroup_ = - Blockly.utils.createSvgElement('g', {}, null); + Blockly.utils.dom.createSvgElement('g', {}, null); // Each filter/pattern needs a unique ID for the case of multiple Blockly // instances on a page. Browser behaviour becomes undefined otherwise. @@ -195,20 +194,20 @@ Blockly.ZoomControls.prototype.createZoomOutSvg_ = function(rnd) { */ var ws = this.workspace_; - this.zoomOutGroup_ = Blockly.utils.createSvgElement('g', + this.zoomOutGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': 'blocklyZoom'}, this.svgGroup_); - var clip = Blockly.utils.createSvgElement('clipPath', + var clip = Blockly.utils.dom.createSvgElement('clipPath', { 'id': 'blocklyZoomoutClipPath' + rnd }, this.zoomOutGroup_); - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', { 'width': 32, 'height': 32, }, clip); - var zoomoutSvg = Blockly.utils.createSvgElement('image', + var zoomoutSvg = Blockly.utils.dom.createSvgElement('image', { 'width': Blockly.SPRITE.width, 'height': Blockly.SPRITE.height, @@ -248,20 +247,20 @@ Blockly.ZoomControls.prototype.createZoomInSvg_ = function(rnd) { */ var ws = this.workspace_; - this.zoomInGroup_ = Blockly.utils.createSvgElement('g', + this.zoomInGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': 'blocklyZoom'}, this.svgGroup_); - var clip = Blockly.utils.createSvgElement('clipPath', + var clip = Blockly.utils.dom.createSvgElement('clipPath', { 'id': 'blocklyZoominClipPath' + rnd }, this.zoomInGroup_); - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', { 'width': 32, 'height': 32, }, clip); - var zoominSvg = Blockly.utils.createSvgElement('image', + var zoominSvg = Blockly.utils.dom.createSvgElement('image', { 'width': Blockly.SPRITE.width, 'height': Blockly.SPRITE.height, @@ -301,20 +300,20 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) { */ var ws = this.workspace_; - this.zoomResetGroup_ = Blockly.utils.createSvgElement('g', + this.zoomResetGroup_ = Blockly.utils.dom.createSvgElement('g', {'class': 'blocklyZoom'}, this.svgGroup_); - var clip = Blockly.utils.createSvgElement('clipPath', + var clip = Blockly.utils.dom.createSvgElement('clipPath', { 'id': 'blocklyZoomresetClipPath' + rnd }, this.zoomResetGroup_); - Blockly.utils.createSvgElement('rect', + Blockly.utils.dom.createSvgElement('rect', { 'width': 32, 'height': 32 }, clip); - var zoomresetSvg = Blockly.utils.createSvgElement('image', + var zoomresetSvg = Blockly.utils.dom.createSvgElement('image', { 'width': Blockly.SPRITE.width, 'height': Blockly.SPRITE.height,