Skip to content

Round notch corners #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rschamp merged 4 commits into from
Feb 10, 2016
Merged

Round notch corners #48

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e2c8d61
Round notch corners
Feb 9, 2016
07f6df1
Document NOTCH_BASE_HEIGHT vs NOTCH_HEIGHT
Feb 10, 2016
b41ac82
Simplify rounded corners, make them circular
Feb 10, 2016
f5e129b
Fix radius value
Feb 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 42 additions & 13 deletions core/block_horizontal_scratch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -789,11 +789,6 @@ Blockly.BlockSvg.MIN_BLOCK_Y = 25;
* @const
*/
Blockly.BlockSvg.TAB_WIDTH = 8;
/**
* Width of vertical tab (inc left margin).
* @const
*/
Blockly.BlockSvg.NOTCH_HEIGHT = 32;
/**
* Rounded corner radius.
* @const
Expand All @@ -805,22 +800,56 @@ Blockly.BlockSvg.CORNER_RADIUS = 4;
*/
Blockly.BlockSvg.HAT_CORNER_RADIUS = 16;
/**
* SVG path for drawing next/previous notch from left to right.
* Rounded notch radius.
* @const
*/
Blockly.BlockSvg.NOTCH_RADIUS = 2.5;
/**
* Height of connector notch, not including rounded corner at top and bottom.
* @const
*/
Blockly.BlockSvg.NOTCH_PATH_DOWN = 'l 8,8 0,16 -8,8';
Blockly.BlockSvg.NOTCH_BASE_HEIGHT = 32;
/**
* SVG path for drawing next/previous notch from right to left.
* Full height of connector notch including rounded corner.
* @const
*/
Blockly.BlockSvg.NOTCH_PATH_UP = 'l 8,-8 0,-16 -8,-8';
Blockly.BlockSvg.NOTCH_HEIGHT = Blockly.BlockSvg.NOTCH_BASE_HEIGHT + Blockly.BlockSvg.NOTCH_RADIUS;

This comment was marked as abuse.

Sign in to view

This comment was marked as abuse.

Sign in to view

/**
* SVG path for drawing a horizontal puzzle tab from top to bottom.
* SVG path for drawing next/previous notch from top to bottom.
* @const
*/
Blockly.BlockSvg.NOTCH_PATH_DOWN =
'a ' + -Blockly.BlockSvg.NOTCH_RADIUS + ',' + Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'0 0 0 ' + Blockly.BlockSvg.NOTCH_RADIUS/2 + ',' + Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'l ' + (Blockly.BlockSvg.NOTCH_BASE_HEIGHT/4 - Blockly.BlockSvg.NOTCH_RADIUS) + ',' +
(Blockly.BlockSvg.NOTCH_BASE_HEIGHT/4 - Blockly.BlockSvg.NOTCH_RADIUS) + ' ' +
'a ' + -Blockly.BlockSvg.NOTCH_RADIUS + ',' + Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'0 0 1 ' + Blockly.BlockSvg.NOTCH_RADIUS/2 + ',' + Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'v ' + (Blockly.BlockSvg.NOTCH_BASE_HEIGHT/2 - Blockly.BlockSvg.NOTCH_RADIUS) + ' ' +
'a ' + -Blockly.BlockSvg.NOTCH_RADIUS + ',' + Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'0 0 1 ' + -Blockly.BlockSvg.NOTCH_RADIUS/2 + ',' + Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'l ' + (-Blockly.BlockSvg.NOTCH_BASE_HEIGHT/4 + Blockly.BlockSvg.NOTCH_RADIUS) + ',' +
(Blockly.BlockSvg.NOTCH_BASE_HEIGHT/4 - Blockly.BlockSvg.NOTCH_RADIUS) + ' ' +
'a ' + -Blockly.BlockSvg.NOTCH_RADIUS + ',' + Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'0 0 0 ' + -Blockly.BlockSvg.NOTCH_RADIUS/2 + ',' + Blockly.BlockSvg.NOTCH_RADIUS;
/**
* SVG path for drawing next/previous notch from bottom to top.
* @const
*/
Blockly.BlockSvg.TAB_PATH_DOWN = 'v 5 c 0,10 -' + Blockly.BlockSvg.TAB_WIDTH +
',-8 -' + Blockly.BlockSvg.TAB_WIDTH + ',7.5 s ' +
Blockly.BlockSvg.TAB_WIDTH + ',-2.5 ' + Blockly.BlockSvg.TAB_WIDTH + ',7.5';
Blockly.BlockSvg.NOTCH_PATH_UP =
'a ' + Blockly.BlockSvg.NOTCH_RADIUS + ',' + -Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'0 0 1 ' + Blockly.BlockSvg.NOTCH_RADIUS/2 + ',' + -Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'l ' + (Blockly.BlockSvg.NOTCH_BASE_HEIGHT/4 - Blockly.BlockSvg.NOTCH_RADIUS) + ',' +
-1*(Blockly.BlockSvg.NOTCH_BASE_HEIGHT/4 - Blockly.BlockSvg.NOTCH_RADIUS) + ' ' +
'a ' + Blockly.BlockSvg.NOTCH_RADIUS + ',' + -Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'0 0 0 ' + Blockly.BlockSvg.NOTCH_RADIUS/2 + ',' + -Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'v ' + -1*(Blockly.BlockSvg.NOTCH_BASE_HEIGHT/2 - Blockly.BlockSvg.NOTCH_RADIUS) + ' ' +
'a ' + Blockly.BlockSvg.NOTCH_RADIUS + ',' + -Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'0 0 0 ' + -Blockly.BlockSvg.NOTCH_RADIUS/2 + ',' + -Blockly.BlockSvg.NOTCH_RADIUS +
'l ' + (-Blockly.BlockSvg.NOTCH_BASE_HEIGHT/4 + Blockly.BlockSvg.NOTCH_RADIUS) + ',' +
(-Blockly.BlockSvg.NOTCH_BASE_HEIGHT/4 + Blockly.BlockSvg.NOTCH_RADIUS) + ' ' +
'a ' + Blockly.BlockSvg.NOTCH_RADIUS + ',' + -Blockly.BlockSvg.NOTCH_RADIUS + ' ' +
'0 0 1 ' + -Blockly.BlockSvg.NOTCH_RADIUS/2 + ',' + -Blockly.BlockSvg.NOTCH_RADIUS;
/**
* SVG start point for drawing the top-left corner.
* @const
Expand Down