diff --git a/editor/extension.ts b/editor/extension.ts index 163516b5..4aa5761a 100644 --- a/editor/extension.ts +++ b/editor/extension.ts @@ -139,8 +139,98 @@ namespace pxt.editor { }) } + /** + * Update the shape of Blockly blocks with square corners + */ + function updateBlocklyShape() { + + /** + * Rounded corner radius. + * @const + */ + (Blockly.BlockSvg as any).CORNER_RADIUS = 0 * (Blockly.BlockSvg as any).GRID_UNIT; + + /** + * Inner space between edge of statement input and notch. + * @const + */ + (Blockly.BlockSvg as any).STATEMENT_INPUT_INNER_SPACE = 3 * (Blockly.BlockSvg as any).GRID_UNIT; + /** + * SVG path for drawing next/previous notch from left to right. + * @const + */ + (Blockly.BlockSvg as any).NOTCH_PATH_LEFT = ( + 'l 8,8 ' + + 'h 16 ' + + 'l 8,-8 ' + ); + + /** + * SVG path for drawing next/previous notch from right to left. + * @const + */ + (Blockly.BlockSvg as any).NOTCH_PATH_RIGHT = ( + 'l -8,8 ' + + 'h -16 ' + + 'l -8,-8 ' + ); + + /** + * SVG start point for drawing the top-left corner. + * @const + */ + (Blockly.BlockSvg as any).TOP_LEFT_CORNER_START = + 'm 0,' + 0; + + /** + * SVG path for drawing the rounded top-left corner. + * @const + */ + (Blockly.BlockSvg as any).TOP_LEFT_CORNER = + 'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',0 '; + + /** + * SVG path for drawing the rounded top-right corner. + * @const + */ + (Blockly.BlockSvg as any).TOP_RIGHT_CORNER = + 'l ' + 0 + ',' + (Blockly.BlockSvg as any).CORNER_RADIUS; + + /** + * SVG path for drawing the rounded bottom-right corner. + * @const + */ + (Blockly.BlockSvg as any).BOTTOM_RIGHT_CORNER = + 'l 0,' + (Blockly.BlockSvg as any).CORNER_RADIUS; + + /** + * SVG path for drawing the rounded bottom-left corner. + * @const + */ + (Blockly.BlockSvg as any).BOTTOM_LEFT_CORNER = + 'l -' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',0'; + + /** + * SVG path for drawing the top-left corner of a statement input. + * @const + */ + (Blockly.BlockSvg as any).INNER_TOP_LEFT_CORNER = + 'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',-' + 0; + + /** + * SVG path for drawing the bottom-left corner of a statement input. + * Includes the rounded inside corner. + * @const + */ + (Blockly.BlockSvg as any).INNER_BOTTOM_LEFT_CORNER = + 'l ' + 0 + ',' + (Blockly.BlockSvg as any).CORNER_RADIUS * 2 + + 'l ' + (Blockly.BlockSvg as any).CORNER_RADIUS + ',' + 0; + + } + initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): Promise { pxt.debug('loading pxt-ev3 target extensions...') + updateBlocklyShape(); const res: pxt.editor.ExtensionResult = { deployCoreAsync, }; diff --git a/theme/blockly.less b/theme/blockly.less index 4d980269..25b30a31 100644 --- a/theme/blockly.less +++ b/theme/blockly.less @@ -62,6 +62,12 @@ span.blocklyTreeLabel { border-radius: 1rem !important; } + +/* Square shaped corners */ +.blocklyDropDownDiv { + border-radius: 0px !important; +} + /* Mobile */ @media only screen and (max-width: @largestMobileScreen) { #blocklyTrashIcon {