From 36b4b184921c7628aa3df9009f8e3f9587b87e7a Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 26 Jul 2019 17:33:10 -0700 Subject: [PATCH] Quarantine highlights. --- blockly_compressed.js | 146 ++++++------ blockly_uncompressed.js | 8 +- .../block_render_draw_highlight.js | 32 +-- .../block_rendering_constants.js | 177 +------------- .../highlight_constants.js | 224 ++++++++++++++++++ 5 files changed, 318 insertions(+), 269 deletions(-) create mode 100644 core/renderers/block_rendering_rewrite/highlight_constants.js diff --git a/blockly_compressed.js b/blockly_compressed.js index 6512de9e6..b7721c6f6 100644 --- a/blockly_compressed.js +++ b/blockly_compressed.js @@ -913,7 +913,9 @@ Blockly.Touch.isMouseOrTouchEvent=function(a){return Blockly.utils.string.starts Blockly.Touch.splitEventByTouches=function(a){var b=[];if(a.changedTouches)for(var c=0;cc)){var d=b.getSvgXY(a.getSvgRoot());a.outputConnection?(d.x+=(a.RTL?3:-3)*c,d.y+=13*c):a.previousConnection&&(d.x+=(a.RTL?-23:23)*c,d.y+=3*c);a=Blockly.utils.dom.createSvgElement("circle",{cx:d.x,cy:d.y,r:0,fill:"none",stroke:"#888","stroke-width":10},b.getParentSvg());Blockly.blockAnimations.connectionUiStep_(a,new Date,c)}}; Blockly.blockAnimations.connectionUiStep_=function(a,b,c){var d=(new Date-b)/150;1=this.height_||0>=this.width_)throw Error("Height and width values of an image field must be greater than 0.");this.size_=new goog.math.Size(this.width_,this.height_+2*Blockly.BlockSvg.INLINE_PADDING_Y);this.flipRtl_=f;this.text_=d||"";this.setValue(a||"");"function"==typeof e&&(this.clickHandler_= -e)};goog.inherits(Blockly.FieldImage,Blockly.Field);Blockly.FieldImage.fromJson=function(a){var b=Blockly.utils.replaceMessageReferences(a.src),c=Number(Blockly.utils.replaceMessageReferences(a.width)),d=Number(Blockly.utils.replaceMessageReferences(a.height)),e=Blockly.utils.replaceMessageReferences(a.alt);return new Blockly.FieldImage(b,c,d,e,null,!!a.flipRtl)};Blockly.FieldImage.prototype.EDITABLE=!1;Blockly.FieldImage.prototype.isDirty_=!1; -Blockly.FieldImage.prototype.initView=function(){this.imageElement_=Blockly.utils.dom.createSvgElement("image",{height:this.height_+"px",width:this.width_+"px",alt:this.text_},this.fieldGroup_);this.imageElement_.setAttributeNS(Blockly.utils.dom.XLINK_NS,"xlink:href",this.value_)};Blockly.FieldImage.prototype.doClassValidation_=function(a){return"string"!=typeof a?null:a}; +Blockly.Field.register("field_label_serializable",Blockly.FieldLabelSerializable);Blockly.FieldImage=function(a,b,c,d,e,f){this.sourceBlock_=null;if(!a)throw Error("Src value of an image field is required");if(isNaN(c)||isNaN(b))throw Error("Height and width values of an image field must cast to numbers.");this.height_=Number(c);this.width_=Number(b);if(0>=this.height_||0>=this.width_)throw Error("Height and width values of an image field must be greater than 0.");this.size_=new goog.math.Size(this.width_,this.height_+2*Blockly.BlockSvg.INLINE_PADDING_Y);this.flipRtl_=f;this.text_= +d||"";this.setValue(a||"");"function"==typeof e&&(this.clickHandler_=e)};goog.inherits(Blockly.FieldImage,Blockly.Field);Blockly.FieldImage.fromJson=function(a){var b=Blockly.utils.replaceMessageReferences(a.src),c=Number(Blockly.utils.replaceMessageReferences(a.width)),d=Number(Blockly.utils.replaceMessageReferences(a.height)),e=Blockly.utils.replaceMessageReferences(a.alt);return new Blockly.FieldImage(b,c,d,e,null,!!a.flipRtl)};Blockly.FieldImage.prototype.EDITABLE=!1; +Blockly.FieldImage.prototype.isDirty_=!1;Blockly.FieldImage.prototype.initView=function(){this.imageElement_=Blockly.utils.dom.createSvgElement("image",{height:this.height_+"px",width:this.width_+"px",alt:this.text_},this.fieldGroup_);this.imageElement_.setAttributeNS(Blockly.utils.dom.XLINK_NS,"xlink:href",this.value_)};Blockly.FieldImage.prototype.doClassValidation_=function(a){return"string"!=typeof a?null:a}; Blockly.FieldImage.prototype.doValueUpdate_=function(a){this.value_=a;this.imageElement_&&this.imageElement_.setAttributeNS(Blockly.utils.dom.XLINK_NS,"xlink:href",this.value_||"")};Blockly.FieldImage.prototype.getFlipRtl=function(){return this.flipRtl_};Blockly.FieldImage.prototype.setText=function(a){null!==a&&(this.text_=a,this.imageElement_&&this.imageElement_.setAttribute("alt",a||""))};Blockly.FieldImage.prototype.showEditor_=function(){this.clickHandler_&&this.clickHandler_(this)}; Blockly.FieldImage.prototype.setOnClickHandler=function(a){this.clickHandler_=a};Blockly.FieldImage.prototype.getCorrectedSize=function(){this.getSize();return new goog.math.Size(this.size_.width,this.height_+1)};Blockly.Field.register("field_image",Blockly.FieldImage);Blockly.FieldNumber=function(a,b,c,d,e){this.setConstraints(b,c,d);a=this.doClassValidation_(a);null===a&&(a=0);Blockly.FieldNumber.superClass_.constructor.call(this,a,e)};goog.inherits(Blockly.FieldNumber,Blockly.FieldTextInput);Blockly.FieldNumber.fromJson=function(a){return new Blockly.FieldNumber(a.value,a.min,a.max,a.precision)};Blockly.FieldNumber.prototype.SERIALIZABLE=!0; Blockly.FieldNumber.prototype.setConstraints=function(a,b,c){c=parseFloat(c);this.precision_=isNaN(c)?0:c;c=this.precision_.toString();var d=c.indexOf(".");this.fractionalDigits_=-1==d?-1:c.length-(d+1);a=parseFloat(a);this.min_=isNaN(a)?-Infinity:a;b=parseFloat(b);this.max_=isNaN(b)?Infinity:b;this.setValue(this.getValue())}; diff --git a/blockly_uncompressed.js b/blockly_uncompressed.js index 465385681..dc627c3a3 100644 --- a/blockly_uncompressed.js +++ b/blockly_uncompressed.js @@ -92,10 +92,11 @@ goog.addDependency("../../../" + dir + "/core/procedures.js", ['Blockly.Procedur 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/block_rendering_rewrite/block_render_draw.js", ['Blockly.blockRendering.Drawer'], ['Blockly.blockRendering.constants', 'Blockly.blockRendering.Debug', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Highlighter', 'Blockly.blockRendering.Measurable']); goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_draw_debug.js", ['Blockly.blockRendering.Debug'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Highlighter', 'Blockly.blockRendering.constants', 'Blockly.blockRendering.Measurable']); -goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js", ['Blockly.blockRendering.Highlighter'], ['Blockly.blockRendering.constants', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable']); +goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js", ['Blockly.blockRendering.Highlighter'], ['Blockly.blockRendering.highlightConstants', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable']); goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_info.js", ['Blockly.blockRendering.RenderInfo'], ['Blockly.blockRendering.constants', 'Blockly.blockRendering.Measurable']); goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_rendering.js", ['Blockly.blockRendering'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.RenderInfo']); goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_rendering_constants.js", ['Blockly.blockRendering.constants'], ['Blockly.utils.svgPaths']); +goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/highlight_constants.js", ['Blockly.blockRendering.highlightConstants'], ['Blockly.blockRendering.constants', 'Blockly.utils.svgPaths']); goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/measurables.js", ['Blockly.blockRendering.Measurable'], ['Blockly.blockRendering.constants']); 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'], []); @@ -126,7 +127,7 @@ goog.addDependency("../../../" + dir + "/core/variables.js", ['Blockly.Variables goog.addDependency("../../../" + dir + "/core/variables_dynamic.js", ['Blockly.VariablesDynamic'], ['Blockly.Variables', 'Blockly.Blocks', 'Blockly.Msg', 'Blockly.utils.xml', 'Blockly.VariableModel', 'Blockly.Xml']); goog.addDependency("../../../" + dir + "/core/warning.js", ['Blockly.Warning'], ['Blockly.Bubble', 'Blockly.Events', 'Blockly.Events.Ui', 'Blockly.Icon', 'Blockly.utils.dom']); goog.addDependency("../../../" + dir + "/core/widgetdiv.js", ['Blockly.WidgetDiv'], ['Blockly.Css', 'goog.style']); -goog.addDependency("../../../" + dir + "/core/workspace.js", ['Blockly.Workspace'], ['Blockly.Events', 'Blockly.utils', 'Blockly.utils.math', 'Blockly.VariableMap', 'Blockly.WorkspaceComment', 'Blockly.Cursor', 'Blockly.Themes.Classic']); +goog.addDependency("../../../" + dir + "/core/workspace.js", ['Blockly.Workspace'], ['Blockly.Cursor', 'Blockly.Events', 'Blockly.Themes.Classic', 'Blockly.utils', 'Blockly.utils.math', 'Blockly.VariableMap', 'Blockly.WorkspaceComment']); goog.addDependency("../../../" + dir + "/core/workspace_audio.js", ['Blockly.WorkspaceAudio'], ['Blockly.utils', 'Blockly.utils.userAgent']); goog.addDependency("../../../" + dir + "/core/workspace_comment.js", ['Blockly.WorkspaceComment'], ['Blockly.Events', 'Blockly.Events.CommentChange', 'Blockly.Events.CommentCreate', 'Blockly.Events.CommentDelete', 'Blockly.Events.CommentMove', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.xml']); goog.addDependency("../../../" + dir + "/core/workspace_comment_render_svg.js", ['Blockly.WorkspaceCommentSvg.render'], ['Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.dom', 'Blockly.WorkspaceCommentSvg']); @@ -701,10 +702,8 @@ goog.addDependency("html/sanitizer/csssanitizer.js", ['goog.html.sanitizer.CssSa goog.addDependency("html/sanitizer/csssanitizer_test.js", [], []); goog.addDependency("html/sanitizer/elementweakmap.js", [], []); goog.addDependency("html/sanitizer/elementweakmap_test.js", [], []); -goog.addDependency("html/sanitizer/html_test_vectors.js", ['goog.html.htmlTestVectors'], []); goog.addDependency("html/sanitizer/htmlsanitizer.js", ['goog.html.sanitizer.HtmlSanitizer', 'goog.html.sanitizer.HtmlSanitizer.Builder', 'goog.html.sanitizer.HtmlSanitizerAttributePolicy', 'goog.html.sanitizer.HtmlSanitizerPolicy', 'goog.html.sanitizer.HtmlSanitizerPolicyContext', 'goog.html.sanitizer.HtmlSanitizerPolicyHints', 'goog.html.sanitizer.HtmlSanitizerUrlPolicy'], ['goog.array', 'goog.asserts', 'goog.dom', 'goog.dom.TagName', 'goog.functions', 'goog.html.SafeHtml', 'goog.html.SafeStyle', 'goog.html.SafeStyleSheet', 'goog.html.SafeUrl', 'goog.html.sanitizer.AttributeSanitizedWhitelist', 'goog.html.sanitizer.AttributeWhitelist', 'goog.html.sanitizer.CssSanitizer', 'goog.html.sanitizer.SafeDomTreeProcessor', 'goog.html.sanitizer.TagBlacklist', 'goog.html.sanitizer.TagWhitelist', 'goog.html.sanitizer.noclobber', 'goog.html.uncheckedconversions', 'goog.object', 'goog.string', 'goog.string.Const']); goog.addDependency("html/sanitizer/htmlsanitizer_test.js", [], []); -goog.addDependency("html/sanitizer/htmlsanitizer_unified_test.js", [], []); goog.addDependency("html/sanitizer/noclobber.js", [], []); goog.addDependency("html/sanitizer/noclobber_test.js", [], []); goog.addDependency("html/sanitizer/safedomtreeprocessor.js", [], []); @@ -1885,6 +1884,7 @@ goog.require('Blockly.blockRendering.Highlighter'); goog.require('Blockly.blockRendering.Measurable'); goog.require('Blockly.blockRendering.RenderInfo'); goog.require('Blockly.blockRendering.constants'); +goog.require('Blockly.blockRendering.highlightConstants'); goog.require('Blockly.constants'); goog.require('Blockly.inject'); goog.require('Blockly.utils'); diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js index a3cc2457f..b863c865c 100644 --- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js +++ b/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js @@ -26,7 +26,7 @@ 'use strict'; goog.provide('Blockly.blockRendering.Highlighter'); -goog.require('Blockly.blockRendering.constants'); +goog.require('Blockly.blockRendering.highlightConstants'); goog.require('Blockly.blockRendering.RenderInfo'); goog.require('Blockly.blockRendering.Measurable'); @@ -53,27 +53,30 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) { this.highlightSteps_ = this.pathObject_.highlightSteps; this.highlightInlineSteps_ = this.pathObject_.highlightInlineSteps; - this.highlightOffset_ = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; + this.highlightOffset_ = Blockly.blockRendering.highlightConstants.OFFSET; - this.outsideCornerPaths_ = Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS; - this.insideCornerPaths_ = Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS; - this.puzzleTabPaths_ = Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT; + this.outsideCornerPaths_ = Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER; + this.insideCornerPaths_ = Blockly.blockRendering.highlightConstants.INSIDE_CORNER; + this.puzzleTabPaths_ = Blockly.blockRendering.highlightConstants.PUZZLE_TAB; + this.notchPaths_ = Blockly.blockRendering.highlightConstants.NOTCH; + this.startPaths_ = Blockly.blockRendering.highlightConstants.START_HAT; }; Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) { for (var i = 0, elem; elem = row.elements[i]; i++) { if (elem.type === 'square corner') { - this.highlightSteps_.push(Blockly.blockRendering.constants.START_POINT_HIGHLIGHT); + this.highlightSteps_.push(Blockly.blockRendering.highlightConstants.START_POINT); } else if (elem.type === 'round corner') { this.highlightSteps_.push( this.outsideCornerPaths_.topLeft(this.info_.RTL)); } else if (elem.type === 'previous connection') { + // TODO: move the offsets into the definition of the notch highlight, maybe. this.highlightSteps_.push('h', (this.RTL ? 0.5 : - 0.5)); - this.highlightSteps_.push(Blockly.blockRendering.constants.NOTCH.pathLeftHighlight); + this.highlightSteps_.push(this.notchPaths_.pathLeft); this.highlightSteps_.push('h', (this.RTL ? -0.5 : 0.5)); } else if (elem.type === 'hat') { this.highlightSteps_.push( - Blockly.blockRendering.constants.START_HAT.highlight(this.info_.RTL)); + this.startPaths_.path(this.info_.RTL)); } else if (elem.isSpacer()) { this.highlightSteps_.push('h', elem.width - this.highlightOffset_); } @@ -104,18 +107,19 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) { Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) { var x = row.statementEdge; + var distance45outside = Blockly.blockRendering.highlightConstants.DISTANCE_45_OUTSIDE; if (this.info_.RTL) { this.highlightSteps_.push('M', - (x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) + - ',' + (row.yPos + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE)); + (x + distance45outside) + + ',' + (row.yPos + distance45outside)); this.highlightSteps_.push(this.insideCornerPaths_.pathTop(this.info_.RTL)); this.highlightSteps_.push('v', - row.height - 2 * Blockly.blockRendering.constants.CORNER_RADIUS); + row.height - 2 * this.insideCornerPaths_.height); this.highlightSteps_.push(this.insideCornerPaths_.pathBottom(this.info_.RTL)); } else { this.highlightSteps_.push('M', - (x + Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE) + ',' + - (row.yPos + row.height - Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE)); + (x + distance45outside) + ',' + + (row.yPos + row.height - distance45outside)); this.highlightSteps_.push(this.insideCornerPaths_.pathBottom(this.info_.RTL)); } }; @@ -164,7 +168,7 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() { if (this.info_.topRow.elements[0].isSquareCorner()) { this.highlightSteps_.push('V', this.highlightOffset_); } else { - this.highlightSteps_.push('V', Blockly.blockRendering.constants.CORNER_RADIUS); + this.highlightSteps_.push('V', this.outsideCornerPaths_.height); } } }; diff --git a/core/renderers/block_rendering_rewrite/block_rendering_constants.js b/core/renderers/block_rendering_rewrite/block_rendering_constants.js index 74dedc92e..ac921db75 100644 --- a/core/renderers/block_rendering_rewrite/block_rendering_constants.js +++ b/core/renderers/block_rendering_rewrite/block_rendering_constants.js @@ -41,7 +41,6 @@ Blockly.blockRendering.constants.LARGE_PADDING = 10; Blockly.blockRendering.constants.TALL_INPUT_FIELD_OFFSET_Y = Blockly.blockRendering.constants.MEDIUM_PADDING; -Blockly.blockRendering.constants.HIGHLIGHT_OFFSET = 0.5; // The dark/shadow path in classic rendering is the same as the normal block // path, but translated down one and right one. @@ -132,21 +131,6 @@ Blockly.blockRendering.constants.POPULATED_STATEMENT_INPUT_WIDTH = 25; Blockly.blockRendering.constants.START_POINT = Blockly.utils.svgPaths.moveBy(0, 0); -Blockly.blockRendering.constants.START_POINT_HIGHLIGHT = - Blockly.utils.svgPaths.moveBy( - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET, - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET); - -/** - * Distance from shape edge to intersect with a curved corner at 45 degrees. - * Applies to highlighting on around the outside of a curve. - * @const - */ -Blockly.blockRendering.constants.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) * - (Blockly.blockRendering.constants.CORNER_RADIUS + - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) - - Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; - /** * SVG start point for drawing the top-left corner. * @const @@ -161,23 +145,6 @@ Blockly.blockRendering.constants.START_HAT = (function() { // It's really minus 15, which is super unfortunate. var height = Blockly.blockRendering.constants.START_HAT_HEIGHT; var width = Blockly.blockRendering.constants.START_HAT_WIDTH; - var highlightRtlPath = - Blockly.utils.svgPaths.moveBy(25, -8.7) + - Blockly.utils.svgPaths.curve('c', - [ - Blockly.utils.svgPaths.point(29.7, -6.2), - Blockly.utils.svgPaths.point(57.2, -0.5), - Blockly.utils.svgPaths.point(75, 8.7) - ]); - - var highlightLtrPath = - Blockly.utils.svgPaths.curve('c', - [ - Blockly.utils.svgPaths.point(17.8, -9.2), - Blockly.utils.svgPaths.point(45.3, -14.9), - Blockly.utils.svgPaths.point(75, -8.7) - ]) + - Blockly.utils.svgPaths.moveTo(100.5, 0.5); var mainPath = Blockly.utils.svgPaths.curve('c', @@ -189,10 +156,7 @@ Blockly.blockRendering.constants.START_HAT = (function() { return { height: height, width: width, - path: mainPath, - highlight: function(rtl) { - return rtl ? highlightRtlPath : highlightLtrPath; - } + path: mainPath }; })(); @@ -244,60 +208,6 @@ Blockly.blockRendering.constants.PUZZLE_TAB = (function() { }; })(); -Blockly.blockRendering.constants.PUZZLE_TAB_HIGHLIGHT = (function() { - var width = Blockly.blockRendering.constants.TAB_WIDTH; - var height = Blockly.blockRendering.constants.TAB_HEIGHT; - - // This is how much of the vertical block edge is actually drawn by the puzzle - // tab. - var verticalOverlap = 2.5; - - // The highlight paths are not simple offsets of the main paths. Changing - // them is fiddly work. - var highlightRtlUp = - Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) + - Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1); - - var highlightRtlDown = - Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap) + - Blockly.utils.svgPaths.moveBy(-width * 0.97, 2.5) + - Blockly.utils.svgPaths.curve('q', - [ - Blockly.utils.svgPaths.point(-width * 0.05, 10), - Blockly.utils.svgPaths.point(width * 0.3, 9.5) - ]) + - Blockly.utils.svgPaths.moveBy(width * 0.67, -1.9) + - Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap); - - var highlightLtrUp = - // TODO: Move this 'V' out. - Blockly.utils.svgPaths.lineOnAxis('V', - height + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) + - Blockly.utils.svgPaths.moveBy(width * -0.92, -0.5) + - Blockly.utils.svgPaths.curve('q', - [ - Blockly.utils.svgPaths.point(width * -0.19, -5.5), - Blockly.utils.svgPaths.point(0,-11) - ]) + - Blockly.utils.svgPaths.moveBy(width * 0.92, 1) + - Blockly.utils.svgPaths.lineOnAxis('V', 0.5) + - Blockly.utils.svgPaths.lineOnAxis('H', 1); - - var highlightLtrDown = - Blockly.utils.svgPaths.moveBy(-5, height - 0.7) + - Blockly.utils.svgPaths.lineTo(width * 0.46, -2.1); - - return { - width: width, - height: height, - pathUp: function(rtl) { - return rtl ? highlightRtlUp : highlightLtrUp; - }, - pathDown: function(rtl) { - return rtl ? highlightRtlDown : highlightLtrDown; - } - }; -})(); Blockly.blockRendering.constants.NOTCH = (function() { var width = Blockly.blockRendering.constants.NOTCH_WIDTH; @@ -316,12 +226,10 @@ Blockly.blockRendering.constants.NOTCH = (function() { var pathLeft = makeMainPath(1); var pathRight = makeMainPath(-1); - var pathLeftHighlight = Blockly.utils.svgPaths.lineOnAxis('h', Blockly.blockRendering.constants.HIGHLIGHT_OFFSET) + pathLeft; return { width: width, height: height, pathLeft: pathLeft, - pathLeftHighlight: pathLeftHighlight, pathRight: pathRight }; })(); @@ -344,44 +252,7 @@ Blockly.blockRendering.constants.INSIDE_CORNERS = (function() { }; })(); -/** - * Highlight paths for drawing the inside corners of a statement input. - */ -Blockly.blockRendering.constants.INSIDE_CORNER_HIGHLIGHTS = (function() { - var radius = Blockly.blockRendering.constants.CORNER_RADIUS; - var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; - /** - * Distance from shape edge to intersect with a curved corner at 45 degrees. - * Applies to highlighting on around the outside of a curve. - * @const - */ - var distance45outside = (1 - Math.SQRT1_2) * (radius + offset) - offset; - - var pathTopRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius, - Blockly.utils.svgPaths.point( - -distance45outside - offset, - radius - distance45outside)); - - var pathBottomRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset, - Blockly.utils.svgPaths.point(radius + offset, radius + offset)); - - var pathBottomLtr = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset, - Blockly.utils.svgPaths.point( - radius - distance45outside, - distance45outside + offset)); - - return { - // width: width, - // height: height, - pathTop: function(rtl) { - return rtl ? pathTopRtl : ''; - }, - pathBottom: function(rtl) { - return rtl ? pathBottomRtl : pathBottomLtr; - }, - }; -})(); Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() { var radius = Blockly.blockRendering.constants.CORNER_RADIUS; @@ -403,49 +274,3 @@ Blockly.blockRendering.constants.OUTSIDE_CORNERS = (function() { }; })(); -Blockly.blockRendering.constants.OUTSIDE_CORNER_HIGHLIGHTS = (function() { - var radius = Blockly.blockRendering.constants.CORNER_RADIUS; - var offset = Blockly.blockRendering.constants.HIGHLIGHT_OFFSET; - - /** - * Distance from shape edge to intersect with a curved corner at 45 degrees. - * Applies to highlighting on around the inside of a curve. - * @const - */ - var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset; - - /** - * SVG start point for drawing the top-left corner's highlight in RTL. - * @const - */ - var topLeftCornerStartRtl = - Blockly.utils.svgPaths.moveBy(distance45inside, distance45inside); - - /** - * SVG start point for drawing the top-left corner's highlight in LTR. - * @const - */ - var topLeftCornerStartLtr = - Blockly.utils.svgPaths.moveBy(offset, radius - offset); - - /** - * SVG path for drawing the highlight on the rounded top-left corner. - * @const - */ - var topLeftCornerHighlight = - Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset, - Blockly.utils.svgPaths.point(radius, offset)); - - return { - topLeft: function(rtl) { - var start = rtl ? topLeftCornerStartRtl : topLeftCornerStartLtr; - return start + topLeftCornerHighlight; - }, - bottomLeft: function(yPos) { - return Blockly.utils.svgPaths.moveTo( - distance45inside,yPos - distance45inside) + - Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset, - Blockly.utils.svgPaths.point(offset, yPos - radius)); - } - }; -})(); diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/block_rendering_rewrite/highlight_constants.js new file mode 100644 index 000000000..aed02338f --- /dev/null +++ b/core/renderers/block_rendering_rewrite/highlight_constants.js @@ -0,0 +1,224 @@ +/** + * @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 Methods for graphically rendering a block as SVG. + * @author fenichel@google.com (Rachel Fenichel) + */ + +'use strict'; +goog.provide('Blockly.blockRendering.highlightConstants'); + +goog.require('Blockly.blockRendering.constants'); +goog.require('Blockly.utils.svgPaths'); + + +Blockly.blockRendering.highlightConstants.OFFSET = 0.5; + +Blockly.blockRendering.highlightConstants.START_POINT = + Blockly.utils.svgPaths.moveBy( + Blockly.blockRendering.highlightConstants.OFFSET, + Blockly.blockRendering.highlightConstants.OFFSET); + +/** + * Distance from shape edge to intersect with a curved corner at 45 degrees. + * Applies to highlighting on around the outside of a curve. + * @const + */ +Blockly.blockRendering.highlightConstants.DISTANCE_45_OUTSIDE = (1 - Math.SQRT1_2) * + (Blockly.blockRendering.constants.CORNER_RADIUS + + Blockly.blockRendering.highlightConstants.OFFSET) - + Blockly.blockRendering.highlightConstants.OFFSET; + +/** + * Highlight paths for drawing the inside corners of a statement input. + */ +Blockly.blockRendering.highlightConstants.INSIDE_CORNER = (function() { + var radius = Blockly.blockRendering.constants.CORNER_RADIUS; + var offset = Blockly.blockRendering.highlightConstants.OFFSET; + + /** + * Distance from shape edge to intersect with a curved corner at 45 degrees. + * Applies to highlighting on around the outside of a curve. + * @const + */ + var distance45outside = (1 - Math.SQRT1_2) * (radius + offset) - offset; + + var pathTopRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius, + Blockly.utils.svgPaths.point( + -distance45outside - offset, + radius - distance45outside)); + + var pathBottomRtl = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset, + Blockly.utils.svgPaths.point(radius + offset, radius + offset)); + + var pathBottomLtr = Blockly.utils.svgPaths.arc('a', '0 0,0', radius + offset, + Blockly.utils.svgPaths.point( + radius - distance45outside, + distance45outside + offset)); + + return { + // width: width, + height: radius, + pathTop: function(rtl) { + return rtl ? pathTopRtl : ''; + }, + pathBottom: function(rtl) { + return rtl ? pathBottomRtl : pathBottomLtr; + }, + }; +})(); + +Blockly.blockRendering.highlightConstants.OUTSIDE_CORNER = (function() { + var radius = Blockly.blockRendering.constants.CORNER_RADIUS; + var offset = Blockly.blockRendering.highlightConstants.OFFSET; + + /** + * Distance from shape edge to intersect with a curved corner at 45 degrees. + * Applies to highlighting on around the inside of a curve. + * @const + */ + var distance45inside = (1 - Math.SQRT1_2) * (radius - offset) + offset; + + /** + * SVG start point for drawing the top-left corner's highlight in RTL. + * @const + */ + var topLeftCornerStartRtl = + Blockly.utils.svgPaths.moveBy(distance45inside, distance45inside); + + /** + * SVG start point for drawing the top-left corner's highlight in LTR. + * @const + */ + var topLeftCornerStartLtr = + Blockly.utils.svgPaths.moveBy(offset, radius - offset); + + /** + * SVG path for drawing the highlight on the rounded top-left corner. + * @const + */ + var topLeftCornerHighlight = + Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset, + Blockly.utils.svgPaths.point(radius, offset)); + + return { + height: radius, + topLeft: function(rtl) { + var start = rtl ? topLeftCornerStartRtl : topLeftCornerStartLtr; + return start + topLeftCornerHighlight; + }, + bottomLeft: function(yPos) { + return Blockly.utils.svgPaths.moveTo( + distance45inside,yPos - distance45inside) + + Blockly.utils.svgPaths.arc('A', '0 0,1', radius - offset, + Blockly.utils.svgPaths.point(offset, yPos - radius)); + } + }; +})(); + + +Blockly.blockRendering.highlightConstants.PUZZLE_TAB = (function() { + var width = Blockly.blockRendering.constants.TAB_WIDTH; + var height = Blockly.blockRendering.constants.TAB_HEIGHT; + + // This is how much of the vertical block edge is actually drawn by the puzzle + // tab. + var verticalOverlap = 2.5; + + var highlightRtlUp = + Blockly.utils.svgPaths.moveTo(width * -0.25, 8.4) + + Blockly.utils.svgPaths.lineTo(width * -0.45, -2.1); + + var highlightRtlDown = + Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap) + + Blockly.utils.svgPaths.moveBy(-width * 0.97, 2.5) + + Blockly.utils.svgPaths.curve('q', + [ + Blockly.utils.svgPaths.point(-width * 0.05, 10), + Blockly.utils.svgPaths.point(width * 0.3, 9.5) + ]) + + Blockly.utils.svgPaths.moveBy(width * 0.67, -1.9) + + Blockly.utils.svgPaths.lineOnAxis('v', verticalOverlap); + + var highlightLtrUp = + // TODO: Move this 'V' out. + Blockly.utils.svgPaths.lineOnAxis('V', + height + Blockly.blockRendering.constants.TAB_OFFSET_FROM_TOP - 1.5) + + Blockly.utils.svgPaths.moveBy(width * -0.92, -0.5) + + Blockly.utils.svgPaths.curve('q', + [ + Blockly.utils.svgPaths.point(width * -0.19, -5.5), + Blockly.utils.svgPaths.point(0,-11) + ]) + + Blockly.utils.svgPaths.moveBy(width * 0.92, 1) + + Blockly.utils.svgPaths.lineOnAxis('V', 0.5) + + Blockly.utils.svgPaths.lineOnAxis('H', 1); + + var highlightLtrDown = + Blockly.utils.svgPaths.moveBy(-5, height - 0.7) + + Blockly.utils.svgPaths.lineTo(width * 0.46, -2.1); + + return { + width: width, + height: height, + pathUp: function(rtl) { + return rtl ? highlightRtlUp : highlightLtrUp; + }, + pathDown: function(rtl) { + return rtl ? highlightRtlDown : highlightLtrDown; + } + }; +})(); + +Blockly.blockRendering.highlightConstants.NOTCH = (function() { + var pathLeft = + Blockly.utils.svgPaths.lineOnAxis( + 'h', Blockly.blockRendering.highlightConstants.OFFSET) + + Blockly.blockRendering.constants.NOTCH.pathLeft; + return { + pathLeft: pathLeft + }; +})(); + +Blockly.blockRendering.highlightConstants.START_HAT = (function() { + var pathRtl = + Blockly.utils.svgPaths.moveBy(25, -8.7) + + Blockly.utils.svgPaths.curve('c', + [ + Blockly.utils.svgPaths.point(29.7, -6.2), + Blockly.utils.svgPaths.point(57.2, -0.5), + Blockly.utils.svgPaths.point(75, 8.7) + ]); + + var pathLtr = + Blockly.utils.svgPaths.curve('c', + [ + Blockly.utils.svgPaths.point(17.8, -9.2), + Blockly.utils.svgPaths.point(45.3, -14.9), + Blockly.utils.svgPaths.point(75, -8.7) + ]) + + Blockly.utils.svgPaths.moveTo(100.5, 0.5); + return { + path: function(rtl) { + return rtl ? pathRtl : pathLtr; + } + }; +})();