From 5a6c625b12c53765cba4c6a4a1db1f08062eda1c Mon Sep 17 00:00:00 2001 From: SharkPool <139097378+SharkPool-SP@users.noreply.github.com> Date: Fri, 1 Aug 2025 11:01:51 -0700 Subject: [PATCH 1/5] Update field_angle.js --- core/field_angle.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/core/field_angle.js b/core/field_angle.js index f178a2a748..98c5e5aa50 100644 --- a/core/field_angle.js +++ b/core/field_angle.js @@ -175,6 +175,7 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { Blockly.DropDownDiv.clearContent(); var div = Blockly.DropDownDiv.getContentDiv(); // Build the SVG DOM. + const srcBlock = this.sourceBlock_.parentBlock_; var svg = Blockly.utils.createSvgElement('svg', { 'xmlns': 'http://www.w3.org/2000/svg', 'xmlns:html': 'http://www.w3.org/1999/xhtml', @@ -186,6 +187,8 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { Blockly.utils.createSvgElement('circle', { 'cx': Blockly.FieldAngle.HALF, 'cy': Blockly.FieldAngle.HALF, 'r': Blockly.FieldAngle.RADIUS, + 'fill': srcBlock.getColourSecondary(), + 'stroke': srcBlock.getColourTertiary(), 'class': 'blocklyAngleCircle' }, svg); this.gauge_ = Blockly.utils.createSvgElement('path', @@ -245,10 +248,12 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { 'xlink:href', Blockly.mainWorkspace.options.pathToMedia + Blockly.FieldAngle.ARROW_SVG_PATH ); + const blockHSL = goog.color.hexToHsl(srcBlock.getColour()); + // -214.86 stems from the blue hue in 'Blockly.FieldAngle.ARROW_SVG_PATH' + this.arrowSvg_.setAttribute("filter", `hue-rotate(${-214.86 + blockHSL[0]}deg) saturate(${blockHSL[1]}) brightness(${blockHSL[2] * 1.8})`); - Blockly.DropDownDiv.setColour(this.sourceBlock_.parentBlock_.getColour(), - this.sourceBlock_.getColourTertiary()); - Blockly.DropDownDiv.setCategory(this.sourceBlock_.parentBlock_.getCategory()); + Blockly.DropDownDiv.setColour(srcBlock.getColour(), this.sourceBlock_.getColourTertiary()); + Blockly.DropDownDiv.setCategory(srcBlock.getCategory()); Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_); this.mouseDownWrapper_ = From 052ccb4d0f5f57e5347531c2afdd886d3f2dda78 Mon Sep 17 00:00:00 2001 From: SharkPool <139097378+SharkPool-SP@users.noreply.github.com> Date: Fri, 1 Aug 2025 11:06:01 -0700 Subject: [PATCH 2/5] Update css.js --- core/css.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/core/css.js b/core/css.js index db8d5c94b5..8d473c06d1 100644 --- a/core/css.js +++ b/core/css.js @@ -788,9 +788,7 @@ Blockly.Css.CONTENT = [ '}', '.blocklyAngleCircle {', - 'stroke: ' + Blockly.Colours.motion.tertiary + ';', 'stroke-width: 1;', - 'fill: ' + Blockly.Colours.motion.secondary + ';', '}', '.blocklyAngleCenterPoint {', From 8b65af21c8946d16b488dd10adb1c123401bd7a9 Mon Sep 17 00:00:00 2001 From: Thomas Weber Date: Sun, 3 Aug 2025 20:48:33 -0500 Subject: [PATCH 3/5] It's literally the parent block not the src block --- core/field_angle.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/core/field_angle.js b/core/field_angle.js index 98c5e5aa50..6b123df29c 100644 --- a/core/field_angle.js +++ b/core/field_angle.js @@ -175,7 +175,7 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { Blockly.DropDownDiv.clearContent(); var div = Blockly.DropDownDiv.getContentDiv(); // Build the SVG DOM. - const srcBlock = this.sourceBlock_.parentBlock_; + const parentBlock = this.sourceBlock_.parentBlock_; var svg = Blockly.utils.createSvgElement('svg', { 'xmlns': 'http://www.w3.org/2000/svg', 'xmlns:html': 'http://www.w3.org/1999/xhtml', @@ -187,8 +187,8 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { Blockly.utils.createSvgElement('circle', { 'cx': Blockly.FieldAngle.HALF, 'cy': Blockly.FieldAngle.HALF, 'r': Blockly.FieldAngle.RADIUS, - 'fill': srcBlock.getColourSecondary(), - 'stroke': srcBlock.getColourTertiary(), + 'fill': parentBlock.getColourSecondary(), + 'stroke': parentBlock.getColourTertiary(), 'class': 'blocklyAngleCircle' }, svg); this.gauge_ = Blockly.utils.createSvgElement('path', @@ -248,12 +248,12 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { 'xlink:href', Blockly.mainWorkspace.options.pathToMedia + Blockly.FieldAngle.ARROW_SVG_PATH ); - const blockHSL = goog.color.hexToHsl(srcBlock.getColour()); + const blockHSL = goog.color.hexToHsl(parentBlock.getColour()); // -214.86 stems from the blue hue in 'Blockly.FieldAngle.ARROW_SVG_PATH' this.arrowSvg_.setAttribute("filter", `hue-rotate(${-214.86 + blockHSL[0]}deg) saturate(${blockHSL[1]}) brightness(${blockHSL[2] * 1.8})`); - Blockly.DropDownDiv.setColour(srcBlock.getColour(), this.sourceBlock_.getColourTertiary()); - Blockly.DropDownDiv.setCategory(srcBlock.getCategory()); + Blockly.DropDownDiv.setColour(parentBlock.getColour(), this.sourceBlock_.getColourTertiary()); + Blockly.DropDownDiv.setCategory(parentBlock.getCategory()); Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_); this.mouseDownWrapper_ = From c490f08d2f37540539e236bac902791734285cbd Mon Sep 17 00:00:00 2001 From: Thomas Weber Date: Sun, 3 Aug 2025 20:48:47 -0500 Subject: [PATCH 4/5] Make the build workflow actually pass --- core/field_angle.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/core/field_angle.js b/core/field_angle.js index 6b123df29c..02d065c994 100644 --- a/core/field_angle.js +++ b/core/field_angle.js @@ -175,7 +175,7 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { Blockly.DropDownDiv.clearContent(); var div = Blockly.DropDownDiv.getContentDiv(); // Build the SVG DOM. - const parentBlock = this.sourceBlock_.parentBlock_; + var parentBlock = this.sourceBlock_.parentBlock_; var svg = Blockly.utils.createSvgElement('svg', { 'xmlns': 'http://www.w3.org/2000/svg', 'xmlns:html': 'http://www.w3.org/1999/xhtml', @@ -248,9 +248,13 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { 'xlink:href', Blockly.mainWorkspace.options.pathToMedia + Blockly.FieldAngle.ARROW_SVG_PATH ); - const blockHSL = goog.color.hexToHsl(parentBlock.getColour()); + var blockHSL = goog.color.hexToHsl(parentBlock.getColour()); // -214.86 stems from the blue hue in 'Blockly.FieldAngle.ARROW_SVG_PATH' - this.arrowSvg_.setAttribute("filter", `hue-rotate(${-214.86 + blockHSL[0]}deg) saturate(${blockHSL[1]}) brightness(${blockHSL[2] * 1.8})`); + this.arrowSvg_.setAttribute( + 'filter', + 'hue-rotate(' + (-214.86 + blockHSL[0]) + 'deg) saturate(' + + blockHSL[1] + ') brightness(' + (blockHSL[2] * 1.8) + ')' + ); Blockly.DropDownDiv.setColour(parentBlock.getColour(), this.sourceBlock_.getColourTertiary()); Blockly.DropDownDiv.setCategory(parentBlock.getCategory()); From 222021440e6e14308dfdfd54216322417f909753 Mon Sep 17 00:00:00 2001 From: Thomas Weber Date: Sun, 3 Aug 2025 21:19:47 -0500 Subject: [PATCH 5/5] Rewrite it to work in Safari and improve color accuracy --- core/field_angle.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/core/field_angle.js b/core/field_angle.js index 02d065c994..2e1133686d 100644 --- a/core/field_angle.js +++ b/core/field_angle.js @@ -137,9 +137,22 @@ Blockly.FieldAngle.RADIUS = Blockly.FieldAngle.HALF Blockly.FieldAngle.CENTER_RADIUS = 2; /** - * Path to the arrow svg icon. + * SVG path data for arrow icon. */ -Blockly.FieldAngle.ARROW_SVG_PATH = 'icons/arrow.svg'; +Blockly.FieldAngle.ARROW_SVG_PATH_DATA = + 'M 0.0189 -1.3178' + + ' L -4.4901 -0.5663' + + ' C -4.7532 -0.5224 -4.9811 -0.2606 -4.9811 0.0156' + + ' C -4.9811 0.2836 -4.7613 0.5522 -4.4901 0.5974' + + ' L 0.0189 1.3489' + + ' L 0.0189 3.0185' + + ' C 0.0189 3.5625 0.3833 3.752 0.8327 3.4269' + + ' L 4.641 0.6721' + + ' C 5.0982 0.3414 5.0957 -0.1853 4.6527 -0.5168' + + ' L 0.821 -3.3842' + + ' C 0.3756 -3.7175 0.0189 -3.5381 0.0189 -2.9874' + + ' L 0.0189 -1.3178' + + ' Z'; /** * Clean up this FieldAngle, as well as the inherited FieldTextInput. @@ -234,27 +247,17 @@ Blockly.FieldAngle.prototype.showEditor_ = function() { 'r': Blockly.FieldAngle.HANDLE_RADIUS, 'class': 'blocklyAngleDragHandle' }, this.handle_); - this.arrowSvg_ = Blockly.utils.createSvgElement('image', + this.arrowSvg_ = Blockly.utils.createSvgElement('path', { 'width': Blockly.FieldAngle.ARROW_WIDTH, 'height': Blockly.FieldAngle.ARROW_WIDTH, 'x': -Blockly.FieldAngle.ARROW_WIDTH / 2, 'y': -Blockly.FieldAngle.ARROW_WIDTH / 2, - 'class': 'blocklyAngleDragArrow' + 'class': 'blocklyAngleDragArrow', + 'fill': parentBlock.getColour(), + 'd': Blockly.FieldAngle.ARROW_SVG_PATH_DATA }, this.handle_); - this.arrowSvg_.setAttributeNS( - 'http://www.w3.org/1999/xlink', - 'xlink:href', - Blockly.mainWorkspace.options.pathToMedia + Blockly.FieldAngle.ARROW_SVG_PATH - ); - var blockHSL = goog.color.hexToHsl(parentBlock.getColour()); - // -214.86 stems from the blue hue in 'Blockly.FieldAngle.ARROW_SVG_PATH' - this.arrowSvg_.setAttribute( - 'filter', - 'hue-rotate(' + (-214.86 + blockHSL[0]) + 'deg) saturate(' + - blockHSL[1] + ') brightness(' + (blockHSL[2] * 1.8) + ')' - ); Blockly.DropDownDiv.setColour(parentBlock.getColour(), this.sourceBlock_.getColourTertiary()); Blockly.DropDownDiv.setCategory(parentBlock.getCategory());