mirror of
https://github.com/scratchfoundation/scratch-blocks.git
synced 2025-08-28 22:10:31 -04:00
WIP horizontal block rendering
This commit is contained in:
Andrew Sliwinski
parent
461aac0a3d
commit
d4a364e2b5
8 changed files with 73 additions and 39 deletions
|
|
@ -45,9 +45,9 @@ Blockly.Blocks['control_repeat'] = {
|
|||
},
|
||||
{
|
||||
"type": "field_image",
|
||||
"src": "https://www.gstatic.com/codesite/ph/images/star_on.gif",
|
||||
"width": 15,
|
||||
"height": 15,
|
||||
"src": "../media/icons/control_forever.svg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"alt": "*"
|
||||
},
|
||||
{
|
||||
|
|
@ -59,7 +59,7 @@ Blockly.Blocks['control_repeat'] = {
|
|||
"inputsInline": true,
|
||||
"previousStatement": null,
|
||||
"nextStatement": null,
|
||||
"colour": 65,
|
||||
"colour": '#F2B827',
|
||||
"tooltip": "",
|
||||
"helpUrl": "http://www.example.com/"
|
||||
});
|
||||
|
|
@ -87,15 +87,15 @@ Blockly.Blocks['control_forever'] = {
|
|||
},
|
||||
{
|
||||
"type": "field_image",
|
||||
"src": "https://www.gstatic.com/codesite/ph/images/star_on.gif",
|
||||
"width": 15,
|
||||
"height": 15,
|
||||
"src": "../media/icons/control_forever.svg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"alt": "*"
|
||||
}
|
||||
],
|
||||
"inputsInline": true,
|
||||
"previousStatement": null,
|
||||
"colour": 65,
|
||||
"colour": '#F2B827',
|
||||
"tooltip": ""
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -40,15 +40,15 @@ Blockly.Blocks['event_whenflagclicked'] = {
|
|||
"args0": [
|
||||
{
|
||||
"type": "field_image",
|
||||
"src": "https://www.gstatic.com/codesite/ph/images/star_on.gif",
|
||||
"width": 15,
|
||||
"height": 15,
|
||||
"src": "../media/icons/event_whenflagclicked.svg",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"alt": "flag"
|
||||
}
|
||||
],
|
||||
"inputsInline": true,
|
||||
"nextStatement": null,
|
||||
"colour": 20,
|
||||
"colour": '#F2EC27',
|
||||
"tooltip": "Do stuff!"
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ goog.require('Blockly.Blocks');
|
|||
|
||||
Blockly.Blocks['motion_moveright'] = {
|
||||
/**
|
||||
* Block for repeat n times (external number).
|
||||
* Block for move right (external number)
|
||||
* https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#ed5ch5
|
||||
* @this Blockly.Block
|
||||
*/
|
||||
|
|
@ -42,14 +42,14 @@ Blockly.Blocks['motion_moveright'] = {
|
|||
{
|
||||
"type": "field_image",
|
||||
"src": "../media/icons/motion_moveright.svg",
|
||||
"width": 140,
|
||||
"height": 140,
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"alt": "*"
|
||||
}
|
||||
],
|
||||
"previousStatement": null,
|
||||
"nextStatement": null,
|
||||
"colour": 65,
|
||||
"colour": '#25AFF4',
|
||||
"tooltip": ""
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -967,7 +967,7 @@ Blockly.BlockSvg.prototype.connectionUiEffect = function() {
|
|||
|
||||
var ripple = Blockly.createSvgElement('circle',
|
||||
{'cx': xy.x, 'cy': xy.y, 'r': 0, 'fill': 'none',
|
||||
'stroke': '#888', 'stroke-width': 10},
|
||||
'stroke': '#EEE', 'stroke-width': 8},
|
||||
this.workspace.getParentSvg());
|
||||
|
||||
// Start the animation.
|
||||
|
|
@ -988,7 +988,7 @@ Blockly.BlockSvg.connectionUiStep_ = function(ripple, start, workspaceScale) {
|
|||
goog.dom.removeNode(ripple);
|
||||
} else {
|
||||
ripple.setAttribute('r', percent * 25 * workspaceScale);
|
||||
ripple.style.opacity = 1 - percent;
|
||||
ripple.style.opacity = 0.8 - percent;
|
||||
var closure = function() {
|
||||
Blockly.BlockSvg.connectionUiStep_(ripple, start, workspaceScale);
|
||||
};
|
||||
|
|
@ -1366,8 +1366,6 @@ Blockly.BlockSvg.prototype.renderCompute_ = function() {
|
|||
Blockly.BlockSvg.NOTCH_HEIGHT + 16 + Blockly.BlockSvg.CORNER_RADIUS * 2
|
||||
);
|
||||
|
||||
console.log(metrics.height);
|
||||
|
||||
return metrics;
|
||||
|
||||
// var inputList = this.inputList;
|
||||
|
|
@ -1542,7 +1540,7 @@ Blockly.BlockSvg.prototype.renderDraw_ = function(metrics) {
|
|||
if (metrics.icon) {
|
||||
var icon = metrics.icon.getSvgRoot();
|
||||
icon.setAttribute('transform',
|
||||
'translate(' + (metrics.width - metrics.icon.getSize().width - Blockly.BlockSvg.SEP_SPACE_X) + ',' + Blockly.BlockSvg.SEP_SPACE_Y + ')');
|
||||
'translate(' + (metrics.width - metrics.icon.getSize().width - Blockly.BlockSvg.SEP_SPACE_X / 2) + ',' + Blockly.BlockSvg.SEP_SPACE_Y + ')');
|
||||
// @todo RTL
|
||||
}
|
||||
};
|
||||
|
|
@ -1556,9 +1554,6 @@ Blockly.BlockSvg.prototype.renderDraw_ = function(metrics) {
|
|||
*/
|
||||
Blockly.BlockSvg.prototype.renderDrawLeft_ =
|
||||
function(steps, connectionsXY, metrics) {
|
||||
|
||||
console.dir(metrics);
|
||||
|
||||
// Position the cursor at the top-left starting point.
|
||||
steps.push(Blockly.BlockSvg.TOP_LEFT_CORNER_START);
|
||||
// Top-left rounded corner.
|
||||
|
|
|
|||
|
|
@ -180,12 +180,12 @@ Blockly.Css.CONTENT = [
|
|||
|
||||
'.blocklyPath {',
|
||||
// 'stroke: #f00;',
|
||||
'stroke-width: 1px;',
|
||||
'stroke-width: 1.5px;',
|
||||
'}',
|
||||
|
||||
'.blocklySelected>.blocklyPath {',
|
||||
'stroke: #fc3;',
|
||||
'stroke-width: 3px;',
|
||||
// 'stroke: #fc3;',
|
||||
// 'stroke-width: 3px;',
|
||||
'}',
|
||||
|
||||
'.blocklyDragging>.blocklyPath {',
|
||||
|
|
|
|||
17
media/icons/control_forever.svg
Normal file
17
media/icons/control_forever.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#CC9823;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M24,43.4H11.1c-1.8,0-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2H24c5.3,0,9.7-4.3,9.7-9.7c0-5.3-4.3-9.7-9.7-9.7h-9.7
|
||||
c-1.8,0-3.2-1.4-3.2-3.2s1.4-3.2,3.2-3.2H24c8.9,0,16.2,7.2,16.2,16.2C40.2,36.1,32.9,43.4,24,43.4z"/>
|
||||
<path class="st0" d="M17.5,24c-0.8,0-1.7-0.3-2.3-0.9l-6.5-6.5c-1.3-1.3-1.3-3.3,0-4.6l6.5-6.5c1.3-1.3,3.3-1.3,4.6,0
|
||||
c1.3,1.3,1.3,3.3,0,4.6l-4.2,4.2l4.2,4.2c1.3,1.3,1.3,3.3,0,4.6C19.2,23.7,18.4,24,17.5,24z"/>
|
||||
<path class="st1" d="M24,42.6H11.1c-1.3,0-2.4-1.1-2.4-2.4s1.1-2.4,2.4-2.4H24c5.8,0,10.5-4.7,10.5-10.5c0-5.8-4.7-10.5-10.5-10.5
|
||||
h-9.7c-1.3,0-2.4-1.1-2.4-2.4s1.1-2.4,2.4-2.4H24c8.5,0,15.3,6.9,15.3,15.3S32.5,42.6,24,42.6z"/>
|
||||
<path class="st1" d="M17.5,23.2c-0.6,0-1.2-0.2-1.7-0.7L9.4,16c-0.9-0.9-0.9-2.5,0-3.4l6.5-6.5c0.9-0.9,2.5-0.9,3.4,0
|
||||
c0.9,0.9,0.9,2.5,0,3.4l-4.7,4.7l4.7,4.7c0.9,0.9,0.9,2.5,0,3.4C18.8,23,18.2,23.2,17.5,23.2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
18
media/icons/event_whenflagclicked.svg
Normal file
18
media/icons/event_whenflagclicked.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#2BB673;stroke:#25995F;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
.st1{fill:#25995F;stroke:#25995F;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M39.8,11.1v17.5c0,0.3-0.1,0.7-0.4,0.9c-2.2,1.9-5,3-7.9,3c-2.9,0-5.7-1.1-7.9-3c-1.8-1.6-4.1-2.4-6.4-2.4
|
||||
c-2.1,0-4.2,0.7-5.9,2.1v11.6c0,0.7-0.5,1.2-1.2,1.2c-0.7,0-1.2-0.5-1.2-1.2V11.1c0-0.5,0.3-0.9,0.7-1.1c2.2-1.8,4.9-2.7,7.6-2.7
|
||||
c2.9,0,5.7,1,7.9,3c1.8,1.5,4.1,2.4,6.4,2.4s4.6-0.9,6.4-2.4c0.3-0.3,0.8-0.4,1.2-0.2C39.5,10.3,39.8,10.7,39.8,11.1z"/>
|
||||
</g>
|
||||
<path class="st1" d="M10,42L10,42c-0.6,0-1.1-0.5-1.1-1.1V7.5c0-0.6,0.5-1.1,1.1-1.1h0c0.6,0,1.1,0.5,1.1,1.1v33.4
|
||||
C11.1,41.5,10.6,42,10,42z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -7,26 +7,30 @@
|
|||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M22.6,34.4c0-2.2-1.8-4-4-4h-1c-2.2,0-4,1.8-4,4v8c0,2.2,1.8,4,4,4h1c2.2,0,4-1.8,4-4V34.4z"/>
|
||||
<path class="st1" d="M21.6,34.4c0-1.7-1.3-3-3-3h-1c-1.7,0-3,1.3-3,3v8c0,1.7,1.3,3,3,3h1c1.7,0,3-1.3,3-3V34.4z"/>
|
||||
<path class="st0" d="M17.2,33.1c0-3-2.4-5.4-5.4-5.4h-1.4c-3,0-5.4,2.4-5.4,5.4v10.8c0,3,2.4,5.4,5.4,5.4h1.4c3,0,5.4-2.4,5.4-5.4
|
||||
V33.1z"/>
|
||||
<path class="st1" d="M15.8,33.1c0-2.2-1.8-4.1-4.1-4.1h-1.4c-2.2,0-4.1,1.8-4.1,4.1v10.8c0,2.2,1.8,4.1,4.1,4.1h1.4
|
||||
c2.2,0,4.1-1.8,4.1-4.1V33.1z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st0" d="M32.6,34.4c0-2.2-1.8-4-4-4h-1c-2.2,0-4,1.8-4,4v8c0,2.2,1.8,4,4,4h1c2.2,0,4-1.8,4-4V34.4z"/>
|
||||
<path class="st1" d="M31.6,34.4c0-1.7-1.3-3-3-3h-1c-1.7,0-3,1.3-3,3v8c0,1.7,1.3,3,3,3h1c1.7,0,3-1.3,3-3V34.4z"/>
|
||||
<path class="st0" d="M30.7,33.1c0-3-2.4-5.4-5.4-5.4h-1.4c-3,0-5.4,2.4-5.4,5.4v10.8c0,3,2.4,5.4,5.4,5.4h1.4c3,0,5.4-2.4,5.4-5.4
|
||||
V33.1z"/>
|
||||
<path class="st1" d="M29.3,33.1c0-2.2-1.8-4.1-4.1-4.1h-1.4c-2.2,0-4.1,1.8-4.1,4.1v10.8c0,2.2,1.8,4.1,4.1,4.1h1.4
|
||||
c2.2,0,4.1-1.8,4.1-4.1V33.1z"/>
|
||||
</g>
|
||||
<g id="Layer_2">
|
||||
<g id="fd">
|
||||
<g>
|
||||
<path class="st0" d="M33.7,33.7c0-0.9,0.3-1.7,0.9-2.3c0.8-0.7,1.8-1,3-0.9l2.6,0.5c0.5,0.1,1-0.1,1.3-0.3
|
||||
c0.2-0.2,0.3-0.4,0.3-0.6c0,0-0.3-4.2-0.3-4.2c0-0.1,0-0.3,0-0.4c0-1.7,1.2-3.6,4.5-3.6c3.6,0,12.6,10.5,15.3,13.8
|
||||
c0.7,0.7,1.1,1.6,1.1,2.5c0,1-0.4,1.9-1.1,2.5C59.3,43,50,54.3,46,54.3c-1.4,0-2.6-0.3-3.3-1c-0.8-0.6-1.2-1.5-1.2-2.6l0,0
|
||||
c0-0.2,0-0.4,0-0.6l0.2-4c0-0.1,0-0.1,0-0.2c0-0.2-0.1-0.5-0.3-0.6c-0.3-0.3-0.8-0.4-1.3-0.3l-2.6,0.5c-1.2,0.1-2.2-0.2-2.9-0.9
|
||||
c-0.7-0.6-0.9-1.4-0.9-2.3L33.7,33.7L33.7,33.7z"/>
|
||||
<path class="st0" d="M32.2,32.2c0-1.2,0.4-2.3,1.2-3.1c1.1-0.9,2.5-1.4,4-1.2l3.5,0.6c0.7,0.1,1.4-0.1,1.7-0.4
|
||||
c0.2-0.2,0.4-0.5,0.4-0.8c0-0.1-0.4-5.7-0.4-5.7c0-0.1,0-0.4,0-0.6c0-2.3,1.6-4.9,6.1-4.9c4.8,0,17,14.1,20.7,18.6
|
||||
c1,0.9,1.5,2.1,1.5,3.4c0,1.3-0.5,2.5-1.5,3.4C66.8,44.7,54.2,60,48.8,60c-1.9,0-3.4-0.4-4.5-1.3c-1-0.8-1.6-2.1-1.6-3.5l0,0
|
||||
c0-0.2,0-0.5,0-0.8l0.3-5.4c0-0.1,0-0.2,0-0.3c0-0.3-0.1-0.6-0.4-0.8c-0.4-0.4-1-0.5-1.8-0.4l-3.5,0.6c-1.6,0.2-2.9-0.3-4-1.2
|
||||
c-0.9-0.8-1.3-1.9-1.3-3.1L32.2,32.2L32.2,32.2z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M60.6,39.8c1.1-1,1.1-2.7,0-3.7c0,0-11.2-13.5-14.6-13.5c-2.5,0-3.7,1.4-3.5,3l0.3,4c0.2,1.4-1,2.4-2.7,2.2
|
||||
l-2.6-0.5c-1.6-0.2-2.8,0.7-2.8,2v9c0,1.4,1.1,2.2,2.8,2l2.6-0.5c1.6-0.2,2.8,0.8,2.7,2.2l-0.3,4c-0.2,1.7,0.7,3,3.5,3
|
||||
C49.7,53.3,60.6,39.8,60.6,39.8z"/>
|
||||
<path class="st1" d="M68.5,40.5c1.5-1.4,1.5-3.6,0-5c0,0-15.2-18.2-19.8-18.2c-3.4,0-4.9,1.8-4.7,4.1l0.3,5.5
|
||||
c0.2,1.9-1.4,3.2-3.6,3l-3.5-0.6c-2.2-0.2-3.7,0.9-3.7,2.8v12.2c0,1.9,1.5,3,3.7,2.8l3.5-0.6c2.2-0.2,3.8,1.1,3.6,3l-0.3,5.5
|
||||
c-0.3,2.2,0.9,4.1,4.7,4.1C53.9,58.7,68.5,40.5,68.5,40.5z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.9 KiB |
Loading…
Add table
Add a link
Reference in a new issue