pxt-core 7.4.20 → 7.4.24

package/built/cli.js

@@ -1757,11 +1757,17 @@ async function buildSemanticUIAsync(parsed) {
             "--include-path=" + lessIncludePaths
         ]
     });
+    let fontAwesomeSource = "node_modules/@fortawesome/fontawesome-free/webfonts/";
+    if (!fs.existsSync(fontAwesomeSource)) {
+        fontAwesomeSource = "node_modules/pxt-core/" + fontAwesomeSource;
+    }
     // Inline all of our icon fonts
     let semCss = await readFileAsync('built/web/semantic.css', "utf8");
     semCss = await linkFontAsync("icons", semCss);
     semCss = await linkFontAsync("outline-icons", semCss);
     semCss = await linkFontAsync("brand-icons", semCss);
+    semCss = await linkFontAsync("fa-solid-900", semCss, fontAwesomeSource, "\\.\\.\\/webfonts\\/");
+    semCss = await linkFontAsync("fa-regular-400", semCss, fontAwesomeSource, "\\.\\.\\/webfonts\\/");
     // Append icons.css to semantic.css (custom pxt icons)
     const iconsFile = isPxtCore ? 'built/web/icons.css' : 'node_modules/pxt-core/built/web/icons.css';
     const iconsCss = await readFileAsync(iconsFile, "utf8");
@@ -1791,10 +1797,6 @@ async function buildSemanticUIAsync(parsed) {
             "--include-path=" + lessIncludePaths
         ]
     });
-    let fontAwesomeSource = "node_modules/@fortawesome/fontawesome-free/webfonts/";
-    if (!fs.existsSync(fontAwesomeSource)) {
-        fontAwesomeSource = "node_modules/pxt-core/" + fontAwesomeSource;
-    }
     let skillmapCss = await readFileAsync(`built/web/react-common-skillmap.css`, "utf8");
     skillmapCss = await linkFontAsync("fa-solid-900", skillmapCss, fontAwesomeSource, "\\.\\.\\/webfonts\\/");
     skillmapCss = await linkFontAsync("fa-regular-400", skillmapCss, fontAwesomeSource, "\\.\\.\\/webfonts\\/");

package/built/pxt.js

@@ -157707,11 +157707,17 @@ async function buildSemanticUIAsync(parsed) {
             "--include-path=" + lessIncludePaths
         ]
     });
+    let fontAwesomeSource = "node_modules/@fortawesome/fontawesome-free/webfonts/";
+    if (!fs.existsSync(fontAwesomeSource)) {
+        fontAwesomeSource = "node_modules/pxt-core/" + fontAwesomeSource;
+    }
     // Inline all of our icon fonts
     let semCss = await readFileAsync('built/web/semantic.css', "utf8");
     semCss = await linkFontAsync("icons", semCss);
     semCss = await linkFontAsync("outline-icons", semCss);
     semCss = await linkFontAsync("brand-icons", semCss);
+    semCss = await linkFontAsync("fa-solid-900", semCss, fontAwesomeSource, "\\.\\.\\/webfonts\\/");
+    semCss = await linkFontAsync("fa-regular-400", semCss, fontAwesomeSource, "\\.\\.\\/webfonts\\/");
     // Append icons.css to semantic.css (custom pxt icons)
     const iconsFile = isPxtCore ? 'built/web/icons.css' : 'node_modules/pxt-core/built/web/icons.css';
     const iconsCss = await readFileAsync(iconsFile, "utf8");
@@ -157741,10 +157747,6 @@ async function buildSemanticUIAsync(parsed) {
             "--include-path=" + lessIncludePaths
         ]
     });
-    let fontAwesomeSource = "node_modules/@fortawesome/fontawesome-free/webfonts/";
-    if (!fs.existsSync(fontAwesomeSource)) {
-        fontAwesomeSource = "node_modules/pxt-core/" + fontAwesomeSource;
-    }
     let skillmapCss = await readFileAsync(`built/web/react-common-skillmap.css`, "utf8");
     skillmapCss = await linkFontAsync("fa-solid-900", skillmapCss, fontAwesomeSource, "\\.\\.\\/webfonts\\/");
     skillmapCss = await linkFontAsync("fa-regular-400", skillmapCss, fontAwesomeSource, "\\.\\.\\/webfonts\\/");

package/built/pxtblockly.js

@@ -1656,7 +1656,7 @@ return Blockly.Functions.namesInUse(b,null,a)[c]?(Blockly.alert(Blockly.Msg.VARI
 Blockly.Functions.mutateCallersAndDefinition=function(a,b,c){var d=Blockly.Functions.getDefinition(a,b);d?(a=Blockly.Functions.getCallers(a,d.workspace),a.push(d),Blockly.Events.setGroup(!0),a.forEach(function(a){var b=a.mutationToDom(),e=b&&Blockly.Xml.domToText(b);a.domToMutation(c);var h=a.mutationToDom(),k=h&&Blockly.Xml.domToText(h);if(e!=k)if(Blockly.Events.fire(new Blockly.Events.BlockChange(a,"mutation",null,e,k)),a.id==d.id){var l=Blockly.Functions.getArgMap(b),m=Blockly.Functions.getArgMap(h,
 !0);d.getDescendants().forEach(function(a){if(Blockly.pxtBlocklyUtils.isFunctionArgumentReporter(a)){var b=a.getFieldValue("VALUE"),c=l[b];m[c]?m[c]!==b&&a.setFieldValue(m[c],"VALUE"):a.dispose()}})}else setTimeout(function(){a.bumpNeighbours()},Blockly.BUMP_DELAY)}),Blockly.Events.setGroup(!1)):console.warn("Attempted to change function "+a+", but no definition block was found on the workspace")};
 Blockly.Functions.createFlyout=function(a,b){var c=new Blockly.Options({scrollbars:!0,disabledPatternId:a.options.disabledPatternId,parentWorkspace:a,rtl:a.RTL,oneBasedIndex:a.options.oneBasedIndex,horizontalLayout:a.horizontalLayout,toolboxPosition:a.options.toolboxPosition,zoomOptions:a.options.zoomOptions,renderer:a.options.renderer,rendererOverrides:a.options.rendererOverrides,newFunctions:a.options.newFunctions,move:{scrollbars:!0}});c=c.horizontalLayout?new Blockly.HorizontalFlyout(c):new Blockly.VerticalFlyout(c);
-var d=c.createDom("svg");goog.dom.insertSiblingAfter(d,b);c.init(a);return c};Blockly.VERSION="4.0.7";Blockly.mainWorkspace=null;Blockly.selected=null;Blockly.draggingConnections=[];Blockly.clipboardXml_=null;Blockly.clipboardSource_=null;Blockly.clipboardTypeCounts_=null;Blockly.cache3dSupported_=null;Blockly.parentContainer=null;Blockly.svgSize=function(a){Blockly.utils.deprecation.warn("Blockly.svgSize","March 2021","March 2022","workspace.getCachedParentSvgSize");return new Blockly.utils.Size(a.cachedWidth_,a.cachedHeight_)};Blockly.resizeSvgContents=function(a){a.resizeContents()};
+var d=c.createDom("svg");goog.dom.insertSiblingAfter(d,b);c.init(a);return c};Blockly.VERSION="4.0.8";Blockly.mainWorkspace=null;Blockly.selected=null;Blockly.draggingConnections=[];Blockly.clipboardXml_=null;Blockly.clipboardSource_=null;Blockly.clipboardTypeCounts_=null;Blockly.cache3dSupported_=null;Blockly.parentContainer=null;Blockly.svgSize=function(a){Blockly.utils.deprecation.warn("Blockly.svgSize","March 2021","March 2022","workspace.getCachedParentSvgSize");return new Blockly.utils.Size(a.cachedWidth_,a.cachedHeight_)};Blockly.resizeSvgContents=function(a){a.resizeContents()};
 Blockly.svgResize=function(a){for(;a.options.parentWorkspace;)a=a.options.parentWorkspace;var b=a.getParentSvg(),c=a.getCachedParentSvgSize(),d=b.parentNode;if(d){var e=d.offsetWidth;d=d.offsetHeight;c.width!=e&&(b.setAttribute("width",e+"px"),a.setCachedParentSvgSize(e,null));c.height!=d&&(b.setAttribute("height",d+"px"),a.setCachedParentSvgSize(null,d));a.resize()}};
 Blockly.onKeyDown=function(a){var b=Blockly.mainWorkspace;if(b&&!(Blockly.utils.isTargetInput(a)||b.rendered&&!b.isVisible()))Blockly.ShortcutRegistry.registry.onKeyDown(b,a)};Blockly.deleteBlock=function(a){a.workspace.isFlyout||(Blockly.Events.setGroup(!0),Blockly.hideChaff(),a.outputConnection?a.dispose(!1,!0):a.dispose(!0,!0),Blockly.Events.setGroup(!1))};Blockly.copy=function(a){if(a=a.toCopyData())Blockly.clipboardXml_=a.xml,Blockly.clipboardSource_=a.source,Blockly.clipboardTypeCounts_=a.typeCounts};
 Blockly.paste=function(){if(!Blockly.clipboardXml_)return!1;var a=Blockly.clipboardSource_;a.isFlyout&&(a=a.targetWorkspace);return Blockly.clipboardTypeCounts_&&a.isCapacityAvailable(Blockly.clipboardTypeCounts_)?(Blockly.Events.setGroup(!0),a.paste(Blockly.clipboardXml_),Blockly.Events.setGroup(!1),!0):!1};
@@ -1986,8 +1986,7 @@ Blockly.ContextMenuItems.registerDisable=function(){Blockly.ContextMenuRegistry.
 scopeType:Blockly.ContextMenuRegistry.ScopeType.BLOCK,id:"blockDisable",weight:5})};
 Blockly.ContextMenuItems.registerDelete=function(){Blockly.ContextMenuRegistry.registry.register({displayText:function(a){var b=a.block;a=b.getDescendants(!1).length;(b=b.getNextBlock())&&(a-=b.getDescendants(!1).length);return 1==a?Blockly.Msg.DELETE_BLOCK:Blockly.Msg.DELETE_X_BLOCKS.replace("%1",String(a))},preconditionFn:function(a){return!a.block.isInFlyout&&a.block.isDeletable()?"enabled":"hidden"},callback:function(a){Blockly.Events.setGroup(!0);a.block&&Blockly.deleteBlock(a.block);Blockly.Events.setGroup(!1)},
 scopeType:Blockly.ContextMenuRegistry.ScopeType.BLOCK,id:"blockDelete",weight:6})};Blockly.ContextMenuItems.registerHelp=function(){Blockly.ContextMenuRegistry.registry.register({displayText:function(){return Blockly.Msg.HELP},preconditionFn:function(a){a=a.block;return("function"==typeof a.helpUrl?a.helpUrl():a.helpUrl)?"enabled":"hidden"},callback:function(a){a.block.showHelp()},scopeType:Blockly.ContextMenuRegistry.ScopeType.BLOCK,id:"blockHelp",weight:7})};
-Blockly.ContextMenuItems.registerBlockOptions_=function(){Blockly.ContextMenuItems.registerDuplicate();Blockly.ContextMenuItems.registerComment();Blockly.ContextMenuItems.registerInline();Blockly.ContextMenuItems.registerCollapseExpandBlock();Blockly.ContextMenuItems.registerDisable();Blockly.ContextMenuItems.registerDelete();Blockly.ContextMenuItems.registerHelp()};Blockly.ContextMenuItems.registerDefaultOptions=function(){Blockly.ContextMenuItems.registerWorkspaceOptions_();Blockly.ContextMenuItems.registerBlockOptions_()};
-Blockly.ContextMenuItems.registerDefaultOptions();Blockly.Mutator=function(a){Blockly.Mutator.superClass_.constructor.call(this,null);this.quarkNames_=a};Blockly.utils.object.inherits(Blockly.Mutator,Blockly.Icon);Blockly.Mutator.prototype.workspace_=null;Blockly.Mutator.prototype.workspaceWidth_=0;Blockly.Mutator.prototype.workspaceHeight_=0;Blockly.Mutator.prototype.setBlock=function(a){this.block_=a};Blockly.Mutator.prototype.getWorkspace=function(){return this.workspace_};
+Blockly.ContextMenuItems.registerBlockOptions_=function(){Blockly.ContextMenuItems.registerDuplicate();Blockly.ContextMenuItems.registerComment();Blockly.ContextMenuItems.registerCollapseExpandBlock();Blockly.ContextMenuItems.registerDisable();Blockly.ContextMenuItems.registerDelete();Blockly.ContextMenuItems.registerHelp()};Blockly.ContextMenuItems.registerDefaultOptions=function(){Blockly.ContextMenuItems.registerWorkspaceOptions_();Blockly.ContextMenuItems.registerBlockOptions_()};Blockly.ContextMenuItems.registerDefaultOptions();Blockly.Mutator=function(a){Blockly.Mutator.superClass_.constructor.call(this,null);this.quarkNames_=a};Blockly.utils.object.inherits(Blockly.Mutator,Blockly.Icon);Blockly.Mutator.prototype.workspace_=null;Blockly.Mutator.prototype.workspaceWidth_=0;Blockly.Mutator.prototype.workspaceHeight_=0;Blockly.Mutator.prototype.setBlock=function(a){this.block_=a};Blockly.Mutator.prototype.getWorkspace=function(){return this.workspace_};
 Blockly.Mutator.prototype.drawIcon_=function(a){Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.RECT,{"class":"blocklyIconShape",rx:"10",ry:"10",height:"16",width:"16"},a);Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.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,0.11 1.043,-0.457 1.187,0.683 0.127,1.134 0.3,0.3 1.8,0 0.3,-0.299 0.127,-1.138 1.185,-0.682 1.046,0.458 0.409,-0.11 0.9,-1.559 -0.11,-0.41 -0.92,-0.677 0,-1.366 0.92,-0.677 0.11,-0.41 -0.9,-1.559 -0.409,-0.109 -1.046,0.458 -1.185,-0.682 -0.127,-1.138 -0.3,-0.299 -1.8,0 -0.3,0.3 -0.126,1.135 -1.187,0.682 -1.043,-0.457 -0.41,0.11 -0.899,1.559 0.108,0.409z"},
 a);Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.CIRCLE,{"class":"blocklyIconShape",r:"2.7",cx:"8",cy:"8"},a)};Blockly.Mutator.prototype.iconClick_=function(a){this.block_.isEditable()&&Blockly.Icon.prototype.iconClick_.call(this,a)};
 Blockly.Mutator.prototype.createEditor_=function(){this.svgDialog_=Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.SVG,{x:Blockly.Bubble.BORDER_WIDTH,y:Blockly.Bubble.BORDER_WIDTH},null);if(this.quarkNames_.length)for(var a=Blockly.utils.xml.createElement("xml"),b=0,c;c=this.quarkNames_[b];b++){var d=Blockly.utils.xml.createElement("block");d.setAttribute("type",c);a.appendChild(d)}else a=null;b=new Blockly.Options({disable:!1,parentWorkspace:this.block_.workspace,media:this.block_.workspace.options.pathToMedia,
@@ -9931,7 +9930,7 @@ var pxt;
             createDom_() {
                 super.createDom_();
                 this.addEvent_(this.workspace_.getInjectionDiv(), "click", this, (e) => {
-                    if (!this.htmlDiv_.contains(e.target)) {
+                    if (this.htmlDiv_.style.display == "flex" && !this.htmlDiv_.contains(e.target)) {
                         this.close();
                     }
                 });
@@ -9948,8 +9947,71 @@ var pxt;
                     Blockly.utils.dom.removeClass(blockPath, 'blockly-ws-search-highlight-pxt');
                 });
             }
+            /**
+             * https://github.com/google/blockly-samples/blob/master/plugins/workspace-search/src/WorkspaceSearch.js#L633
+             *
+             * Modified to center offscreen blocks.
+             */
+            scrollToVisible_(block) {
+                if (!this.workspace_.isMovable()) {
+                    // Cannot scroll to block in a non-movable workspace.
+                    return;
+                }
+                // XY is in workspace coordinates.
+                const xy = block.getRelativeToSurfaceXY();
+                const scale = this.workspace_.scale;
+                // Block bounds in pixels relative to the workspace origin (0,0 is centre).
+                const width = block.width * scale;
+                const height = block.height * scale;
+                const top = xy.y * scale;
+                const bottom = (xy.y + block.height) * scale;
+                // In RTL the block's position is the top right of the block, not top left.
+                const left = this.workspace_.RTL ? xy.x * scale - width : xy.x * scale;
+                const right = this.workspace_.RTL ? xy.x * scale : xy.x * scale + width;
+                const metrics = this.workspace_.getMetrics();
+                let targetLeft = metrics.viewLeft;
+                const overflowLeft = left < metrics.viewLeft;
+                const overflowRight = right > metrics.viewLeft + metrics.viewWidth;
+                const wideBlock = width > metrics.viewWidth;
+                if ((!wideBlock && overflowLeft) || (wideBlock && !this.workspace_.RTL)) {
+                    // Scroll to show left side of block
+                    targetLeft = left;
+                }
+                else if ((!wideBlock && overflowRight) ||
+                    (wideBlock && this.workspace_.RTL)) {
+                    // Scroll to show right side of block
+                    targetLeft = right - metrics.viewWidth;
+                }
+                let targetTop = metrics.viewTop;
+                const overflowTop = top < metrics.viewTop;
+                const overflowBottom = bottom > metrics.viewTop + metrics.viewHeight;
+                const tallBlock = height > metrics.viewHeight;
+                if (overflowTop || (tallBlock && overflowBottom)) {
+                    // Scroll to show top of block
+                    targetTop = top;
+                }
+                else if (overflowBottom) {
+                    // Scroll to show bottom of block
+                    targetTop = bottom - metrics.viewHeight;
+                }
+                if (targetLeft !== metrics.viewLeft || targetTop !== metrics.viewTop) {
+                    const activeEl = document.activeElement;
+                    if (wideBlock || tallBlock) {
+                        this.workspace_.scroll(-targetLeft, -targetTop);
+                    }
+                    else {
+                        this.workspace_.centerOnBlock(block.id);
+                    }
+                    if (activeEl) {
+                        // Blockly.WidgetDiv.hide called in scroll is taking away focus.
+                        // TODO: Review setFocused call in Blockly.WidgetDiv.hide.
+                        activeEl.focus();
+                    }
+                }
+            }
             open() {
                 super.open();
+                this.inputElement_.select();
                 Blockly.utils.dom.addClass(this.workspace_.getInjectionDiv(), 'blockly-ws-searching');
             }
             close() {
@@ -15752,15 +15814,20 @@ var pxtblockly;
                 let leftPadding = 0, rightPadding = 0;
                 switch (outputShape) {
                     case Blockly.OUTPUT_SHAPE_HEXAGONAL:
-                        width = innerWidth;
+                        width = size.width / 2;
                         halfWidth = width / 2;
-                        let quarterWidth = halfWidth / 2;
-                        // TODO: the left padding calculation is a hack, we should calculate left padding based on width (generic case)
-                        leftPadding = -halfWidth + quarterWidth;
-                        rightPadding = -quarterWidth;
-                        const topLeftPoint = -quarterWidth;
-                        const bottomRightPoint = halfWidth;
-                        this.toggleThumb_.setAttribute('points', `${topLeftPoint},-14 ${topLeftPoint - 14},0 ${topLeftPoint},14 ${bottomRightPoint},14 ${bottomRightPoint + 14},0 ${bottomRightPoint},-14`);
+                        leftPadding = -halfWidth; // total translation when toggle is left-aligned = 0
+                        rightPadding = halfWidth - innerWidth; // total translation when right-aligned = width
+                        /**
+                         *  Toggle defined clockwise from bottom left:
+                         *
+                         *        0,  14 ----------- width, 14
+                         *       /                           \
+                         *  -14, 0                            width + 14, 0
+                         *       \                           /
+                         *        0, -14 ----------- width, -14
+                         */
+                        this.toggleThumb_.setAttribute('points', `${0},-14 -14,0 ${0},14 ${width},14 ${width + 14},0 ${width},-14`);
                         break;
                     case Blockly.OUTPUT_SHAPE_ROUND:
                     case Blockly.OUTPUT_SHAPE_SQUARE:

package/built/pxtblocks.d.ts

@@ -264,6 +264,12 @@ declare namespace pxt.blocks {
         protected createDom_(): void;
         protected highlightSearchGroup_(blocks: Blockly.BlockSvg[]): void;
         protected unhighlightSearchGroup_(blocks: Blockly.BlockSvg[]): void;
+        /**
+         * https://github.com/google/blockly-samples/blob/master/plugins/workspace-search/src/WorkspaceSearch.js#L633
+         *
+         * Modified to center offscreen blocks.
+         */
+        protected scrollToVisible_(block: Blockly.BlockSvg): void;
         open(): void;
         close(): void;
     }

package/built/pxtblocks.js

@@ -6307,7 +6307,7 @@ var pxt;
             createDom_() {
                 super.createDom_();
                 this.addEvent_(this.workspace_.getInjectionDiv(), "click", this, (e) => {
-                    if (!this.htmlDiv_.contains(e.target)) {
+                    if (this.htmlDiv_.style.display == "flex" && !this.htmlDiv_.contains(e.target)) {
                         this.close();
                     }
                 });
@@ -6324,8 +6324,71 @@ var pxt;
                     Blockly.utils.dom.removeClass(blockPath, 'blockly-ws-search-highlight-pxt');
                 });
             }
+            /**
+             * https://github.com/google/blockly-samples/blob/master/plugins/workspace-search/src/WorkspaceSearch.js#L633
+             *
+             * Modified to center offscreen blocks.
+             */
+            scrollToVisible_(block) {
+                if (!this.workspace_.isMovable()) {
+                    // Cannot scroll to block in a non-movable workspace.
+                    return;
+                }
+                // XY is in workspace coordinates.
+                const xy = block.getRelativeToSurfaceXY();
+                const scale = this.workspace_.scale;
+                // Block bounds in pixels relative to the workspace origin (0,0 is centre).
+                const width = block.width * scale;
+                const height = block.height * scale;
+                const top = xy.y * scale;
+                const bottom = (xy.y + block.height) * scale;
+                // In RTL the block's position is the top right of the block, not top left.
+                const left = this.workspace_.RTL ? xy.x * scale - width : xy.x * scale;
+                const right = this.workspace_.RTL ? xy.x * scale : xy.x * scale + width;
+                const metrics = this.workspace_.getMetrics();
+                let targetLeft = metrics.viewLeft;
+                const overflowLeft = left < metrics.viewLeft;
+                const overflowRight = right > metrics.viewLeft + metrics.viewWidth;
+                const wideBlock = width > metrics.viewWidth;
+                if ((!wideBlock && overflowLeft) || (wideBlock && !this.workspace_.RTL)) {
+                    // Scroll to show left side of block
+                    targetLeft = left;
+                }
+                else if ((!wideBlock && overflowRight) ||
+                    (wideBlock && this.workspace_.RTL)) {
+                    // Scroll to show right side of block
+                    targetLeft = right - metrics.viewWidth;
+                }
+                let targetTop = metrics.viewTop;
+                const overflowTop = top < metrics.viewTop;
+                const overflowBottom = bottom > metrics.viewTop + metrics.viewHeight;
+                const tallBlock = height > metrics.viewHeight;
+                if (overflowTop || (tallBlock && overflowBottom)) {
+                    // Scroll to show top of block
+                    targetTop = top;
+                }
+                else if (overflowBottom) {
+                    // Scroll to show bottom of block
+                    targetTop = bottom - metrics.viewHeight;
+                }
+                if (targetLeft !== metrics.viewLeft || targetTop !== metrics.viewTop) {
+                    const activeEl = document.activeElement;
+                    if (wideBlock || tallBlock) {
+                        this.workspace_.scroll(-targetLeft, -targetTop);
+                    }
+                    else {
+                        this.workspace_.centerOnBlock(block.id);
+                    }
+                    if (activeEl) {
+                        // Blockly.WidgetDiv.hide called in scroll is taking away focus.
+                        // TODO: Review setFocused call in Blockly.WidgetDiv.hide.
+                        activeEl.focus();
+                    }
+                }
+            }
             open() {
                 super.open();
+                this.inputElement_.select();
                 Blockly.utils.dom.addClass(this.workspace_.getInjectionDiv(), 'blockly-ws-searching');
             }
             close() {
@@ -12128,15 +12191,20 @@ var pxtblockly;
                 let leftPadding = 0, rightPadding = 0;
                 switch (outputShape) {
                     case Blockly.OUTPUT_SHAPE_HEXAGONAL:
-                        width = innerWidth;
+                        width = size.width / 2;
                         halfWidth = width / 2;
-                        let quarterWidth = halfWidth / 2;
-                        // TODO: the left padding calculation is a hack, we should calculate left padding based on width (generic case)
-                        leftPadding = -halfWidth + quarterWidth;
-                        rightPadding = -quarterWidth;
-                        const topLeftPoint = -quarterWidth;
-                        const bottomRightPoint = halfWidth;
-                        this.toggleThumb_.setAttribute('points', `${topLeftPoint},-14 ${topLeftPoint - 14},0 ${topLeftPoint},14 ${bottomRightPoint},14 ${bottomRightPoint + 14},0 ${bottomRightPoint},-14`);
+                        leftPadding = -halfWidth; // total translation when toggle is left-aligned = 0
+                        rightPadding = halfWidth - innerWidth; // total translation when right-aligned = width
+                        /**
+                         *  Toggle defined clockwise from bottom left:
+                         *
+                         *        0,  14 ----------- width, 14
+                         *       /                           \
+                         *  -14, 0                            width + 14, 0
+                         *       \                           /
+                         *        0, -14 ----------- width, -14
+                         */
+                        this.toggleThumb_.setAttribute('points', `${0},-14 -14,0 ${0},14 ${width},14 ${width + 14},0 ${width},-14`);
                         break;
                     case Blockly.OUTPUT_SHAPE_ROUND:
                     case Blockly.OUTPUT_SHAPE_SQUARE: