From 58148eb1c3fa8fb8e170131f23990442d67d0454 Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <16690124+samelhusseini@users.noreply.github.com>
Date: Tue, 2 Jan 2018 13:32:07 -0800
Subject: [PATCH] Square shaped corners for Blockly blocks and dropdowns.
 (#158)

---
 editor/extension.ts | 90 +++++++++++++++++++++++++++++++++++++++++++++
 theme/blockly.less  |  6 +++
 2 files changed, 96 insertions(+)

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.editor.ExtensionResult> {
         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 {