From e2af14c32ffd058c4ff2fd841c292cdc7ae9081b Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Wed, 25 Mar 2015 23:58:58 -0700 Subject: [PATCH] Replace drawn icons with images (issue 45). --- blockly_compressed.js | 66 +++++++++++++++++++++---------------------- core/comment.js | 29 ++++--------------- core/css.js | 10 ++----- core/icon.js | 42 ++++++++++++++++++--------- core/mutator.js | 37 ++++++------------------ core/warning.js | 29 ++++--------------- media/icons.svg | 40 ++++++++++++++++++++++++++ 7 files changed, 124 insertions(+), 129 deletions(-) create mode 100644 media/icons.svg diff --git a/blockly_compressed.js b/blockly_compressed.js index 2b48444d..61bd9454 100644 --- a/blockly_compressed.js +++ b/blockly_compressed.js @@ -868,14 +868,15 @@ Blockly.Bubble.prototype.renderArrow_=function(){var a=[],b=this.width_/2,c=this q*e,q=b+h*l,m=c+h*k,b=b-h*l,c=c-h*k,k=g+this.arrow_radians_;k>2*Math.PI&&(k-=2*Math.PI);g=Math.sin(k)*f/Blockly.Bubble.ARROW_BEND;f=Math.cos(k)*f/Blockly.Bubble.ARROW_BEND;a.push("M"+q+","+m);a.push("C"+(q+f)+","+(m+g)+" "+d+","+e+" "+d+","+e);a.push("C"+d+","+e+" "+(b+f)+","+(c+g)+" "+b+","+c)}a.push("z");this.bubbleArrow_.setAttribute("d",a.join(" "))};Blockly.Bubble.prototype.setColour=function(a){this.bubbleBack_.setAttribute("fill",a);this.bubbleArrow_.setAttribute("fill",a)}; Blockly.Bubble.prototype.dispose=function(){Blockly.Bubble.unbindDragEvents_();goog.dom.removeNode(this.bubbleGroup_);this.shape_=this.content_=this.workspace_=this.bubbleGroup_=null}; // Copyright 2013 Google Inc. Apache License 2.0 -Blockly.Icon=function(a){this.block_=a};Blockly.Icon.RADIUS=8;Blockly.Icon.prototype.bubble_=null;Blockly.Icon.prototype.iconX_=0;Blockly.Icon.prototype.iconY_=0;Blockly.Icon.prototype.createIcon_=function(){this.iconGroup_||(this.iconGroup_=Blockly.createSvgElement("g",{},null),this.block_.getSvgRoot().appendChild(this.iconGroup_),Blockly.bindEvent_(this.iconGroup_,"mouseup",this,this.iconClick_),this.updateEditable())}; -Blockly.Icon.prototype.dispose=function(){goog.dom.removeNode(this.iconGroup_);this.iconGroup_=null;this.setVisible(!1);this.block_=null};Blockly.Icon.prototype.updateEditable=function(){this.block_.isInFlyout?Blockly.removeClass_(this.iconGroup_,"blocklyIconGroup"):Blockly.addClass_(this.iconGroup_,"blocklyIconGroup")};Blockly.Icon.prototype.isVisible=function(){return!!this.bubble_};Blockly.Icon.prototype.iconClick_=function(a){this.block_.isInFlyout||this.setVisible(!this.isVisible())}; -Blockly.Icon.prototype.updateColour=function(){if(this.isVisible()){var a=Blockly.makeColour(this.block_.getColour());this.bubble_.setColour(a)}}; -Blockly.Icon.prototype.renderIcon=function(a){if(this.block_.isCollapsed())return this.iconGroup_.setAttribute("display","none"),a;this.iconGroup_.setAttribute("display","block");var b=2*Blockly.Icon.RADIUS;Blockly.RTL&&(a-=b);this.iconGroup_.setAttribute("transform","translate("+a+", 5)");this.computeIconLocation();return a=Blockly.RTL?a-Blockly.BlockSvg.SEP_SPACE_X:a+(b+Blockly.BlockSvg.SEP_SPACE_X)}; -Blockly.Icon.prototype.setIconLocation=function(a,b){this.iconX_=a;this.iconY_=b;this.isVisible()&&this.bubble_.setAnchorLocation(a,b)};Blockly.Icon.prototype.computeIconLocation=function(){var a=this.block_.getRelativeToSurfaceXY(),b=Blockly.getRelativeXY_(this.iconGroup_),c=a.x+b.x+Blockly.Icon.RADIUS,a=a.y+b.y+Blockly.Icon.RADIUS;c===this.iconX_&&a===this.iconY_||this.setIconLocation(c,a)};Blockly.Icon.prototype.getIconLocation=function(){return{x:this.iconX_,y:this.iconY_}}; +Blockly.Icon=function(a){this.block_=a};Blockly.Icon.prototype.png_="";Blockly.Icon.prototype.SIZE=17;Blockly.Icon.prototype.bubble_=null;Blockly.Icon.prototype.iconX_=0;Blockly.Icon.prototype.iconY_=0; +Blockly.Icon.prototype.createIcon=function(){this.iconGroup_||(this.iconGroup_=Blockly.createSvgElement("g",{"class":"blocklyIconGroup"},null),Blockly.createSvgElement("image",{width:this.SIZE,height:this.SIZE},this.iconGroup_).setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",this.png_),this.block_.getSvgRoot().appendChild(this.iconGroup_),Blockly.bindEvent_(this.iconGroup_,"mouseup",this,this.iconClick_),this.updateEditable())}; +Blockly.Icon.prototype.dispose=function(){goog.dom.removeNode(this.iconGroup_);this.iconGroup_=null;this.setVisible(!1);this.block_=null};Blockly.Icon.prototype.updateEditable=function(){this.block_.isInFlyout||!this.block_.isEditable()?Blockly.addClass_(this.iconGroup_,"blocklyIconGroupReadonly"):Blockly.removeClass_(this.iconGroup_,"blocklyIconGroupReadonly")};Blockly.Icon.prototype.isVisible=function(){return!!this.bubble_}; +Blockly.Icon.prototype.iconClick_=function(a){this.block_.isInFlyout||this.setVisible(!this.isVisible())};Blockly.Icon.prototype.updateColour=function(){if(this.isVisible()){var a=Blockly.makeColour(this.block_.getColour());this.bubble_.setColour(a)}}; +Blockly.Icon.prototype.renderIcon=function(a){if(this.block_.isCollapsed())return this.iconGroup_.setAttribute("display","none"),a;this.iconGroup_.setAttribute("display","block");var b=this.SIZE;Blockly.RTL&&(a-=b);this.iconGroup_.setAttribute("transform","translate("+a+", 5)");this.computeIconLocation();return a=Blockly.RTL?a-Blockly.BlockSvg.SEP_SPACE_X:a+(b+Blockly.BlockSvg.SEP_SPACE_X)}; +Blockly.Icon.prototype.setIconLocation=function(a,b){this.iconX_=a;this.iconY_=b;this.isVisible()&&this.bubble_.setAnchorLocation(a,b)};Blockly.Icon.prototype.computeIconLocation=function(){var a=this.block_.getRelativeToSurfaceXY(),b=Blockly.getRelativeXY_(this.iconGroup_),c=a.x+b.x+this.SIZE/2,a=a.y+b.y+this.SIZE/2;c===this.iconX_&&a===this.iconY_||this.setIconLocation(c,a)};Blockly.Icon.prototype.getIconLocation=function(){return{x:this.iconX_,y:this.iconY_}}; // Copyright 2011 Google Inc. Apache License 2.0 -Blockly.Comment=function(a){Blockly.Comment.superClass_.constructor.call(this,a);this.createIcon_()};goog.inherits(Blockly.Comment,Blockly.Icon);Blockly.Comment.prototype.text_="";Blockly.Comment.prototype.width_=160;Blockly.Comment.prototype.height_=80; -Blockly.Comment.prototype.createIcon_=function(){Blockly.Icon.prototype.createIcon_.call(this);Blockly.createSvgElement("circle",{"class":"blocklyIconShield",r:Blockly.Icon.RADIUS,cx:Blockly.Icon.RADIUS,cy:Blockly.Icon.RADIUS},this.iconGroup_);this.iconMark_=Blockly.createSvgElement("text",{"class":"blocklyIconMark",x:Blockly.Icon.RADIUS,y:2*Blockly.Icon.RADIUS-3},this.iconGroup_);this.iconMark_.appendChild(document.createTextNode("?"))}; +Blockly.Comment=function(a){Blockly.Comment.superClass_.constructor.call(this,a);this.createIcon()};goog.inherits(Blockly.Comment,Blockly.Icon);Blockly.Comment.prototype.png_="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGgAnBf0Xj5sAAAIBSURBVDjLjZO9SxxRFMXPrFkWl2UFYSOIRtF210YtAiH/gGATRNZFgo19IBaB9Ipgk3SiEoKQgI19JIVgGaOIgpWJEAV1kZk3b1ad0V+KRYIzk5ALh1ecc88978tRSgHPg0Bjvq/BbFalMNR5oaBv+bzWHMfZjOudWPOg6+pDva6elRXlt7fVcnYmPX4sDQ3pdmpKQXu7frS16aXjON8T06OIMWOwtRp3jgNSEpkMTE5y5/v4UcSLePxnroutVNKb4xgYANfFAk/vDbLG8Gtk5P8M7jE6CsZwDDwSMLm5iYmLlpbg4ABOTmBjA4aHk0ZbWxigposLvlarScH5OSwvw9oaABwdJTW1GtTrfJHnUe/uTgqKxeZaKEAUgTEQP/CeHvA8LhRFhLlc+r6zWVhfbyaZn0/yuRxEEaGCAK9USjdZWGgarK5CS0uS7+gAa3EzjYaOy2WlludJi4vSzIx0e5vky2Xp6ko/M4WCPleruk4zsVa6vJSur9OHTEzoqljUJwEdQYDf25uMe3jY3E5fX5Lr7wdr8YGSJCkIeL23h9/a+lA4Pg7T039u6h75POzv4wcBrx5Ec11Wd3bwOzv//VK7umB3F991+Zj2/R1reWstdnaWm3L5YXOlAnNz3FiLbTR4Azj6WwFPjOG953EahoT1On4YEnoep8bwDuiO9/wG1sM4kG8A4fUAAAAASUVORK5CYII="; +Blockly.Comment.prototype.text_="";Blockly.Comment.prototype.width_=160;Blockly.Comment.prototype.height_=80; Blockly.Comment.prototype.createEditor_=function(){this.foreignObject_=Blockly.createSvgElement("foreignObject",{x:Blockly.Bubble.BORDER_WIDTH,y:Blockly.Bubble.BORDER_WIDTH},null);var a=document.createElementNS(Blockly.HTML_NS,"body");a.setAttribute("xmlns",Blockly.HTML_NS);a.className="blocklyMinimalBody";this.textarea_=document.createElementNS(Blockly.HTML_NS,"textarea");this.textarea_.className="blocklyCommentTextarea";this.textarea_.setAttribute("dir",Blockly.RTL?"RTL":"LTR");a.appendChild(this.textarea_); this.foreignObject_.appendChild(a);Blockly.bindEvent_(this.textarea_,"mouseup",this,this.textareaFocus_);return this.foreignObject_};Blockly.Comment.prototype.updateEditable=function(){this.isVisible()&&(this.setVisible(!1),this.setVisible(!0));Blockly.Icon.prototype.updateEditable.call(this)}; Blockly.Comment.prototype.resizeBubble_=function(){var a=this.bubble_.getBubbleSize(),b=2*Blockly.Bubble.BORDER_WIDTH;this.foreignObject_.setAttribute("width",a.width-b);this.foreignObject_.setAttribute("height",a.height-b);this.textarea_.style.width=a.width-b-4+"px";this.textarea_.style.height=a.height-b-4+"px"}; @@ -998,11 +999,10 @@ a)}b.select()}};Blockly.WorkspaceSvg.prototype.recordDeleteAreas=function(){this Blockly.WorkspaceSvg.prototype.isDeleteArea=function(a){a=Blockly.mouseToSvg(a);a=new goog.math.Coordinate(a.x,a.y);if(this.deleteAreaTrash_){if(this.deleteAreaTrash_.contains(a))return this.trashcan.setOpen_(!0),Blockly.Css.setCursor(Blockly.Css.Cursor.DELETE),!0;this.trashcan.setOpen_(!1)}if(this.deleteAreaToolbox_&&this.deleteAreaToolbox_.contains(a))return Blockly.Css.setCursor(Blockly.Css.Cursor.DELETE),!0;Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);return!1}; Blockly.WorkspaceSvg.prototype.clear=Blockly.WorkspaceSvg.prototype.clear; // Copyright 2012 Google Inc. Apache License 2.0 -Blockly.Mutator=function(a){Blockly.Mutator.superClass_.constructor.call(this,null);this.quarkNames_=a};goog.inherits(Blockly.Mutator,Blockly.Icon);Blockly.Mutator.prototype.workspaceWidth_=0;Blockly.Mutator.prototype.workspaceHeight_=0; -Blockly.Mutator.prototype.createIcon=function(){if(!this.iconMark_){Blockly.Icon.prototype.createIcon_.call(this);var a=Blockly.Icon.RADIUS/2;Blockly.createSvgElement("rect",{"class":"blocklyIconShield",width:4*a,height:4*a,rx:a,ry:a},this.iconGroup_);this.iconMark_=Blockly.createSvgElement("text",{"class":"blocklyIconMark",x:Blockly.Icon.RADIUS,y:2*Blockly.Icon.RADIUS-4},this.iconGroup_);this.iconMark_.appendChild(document.createTextNode("\u2605"))}}; -Blockly.Mutator.prototype.iconClick_=function(a){this.block_.isEditable()&&Blockly.Icon.prototype.iconClick_.call(this,a)}; +Blockly.Mutator=function(a){Blockly.Mutator.superClass_.constructor.call(this,null);this.quarkNames_=a};goog.inherits(Blockly.Mutator,Blockly.Icon);Blockly.Mutator.prototype.png_="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGgUkCK5AYg4AAAGlSURBVDjLnZS9SiRBFIVLunt+9gUU1EmFaSfQ0GCeRcTAwEDERHYTQUZ8l6F9Ad9gMzcVfwaxdzpxuHRVZNVncHfAnt5ply0oqjj33FP3FqfKGGMM8K0suRZhGgKehhECXoSpc1wBXTMXEOHXeIzr9yGKwJjlM4ogTSHLcCLcAV1TllyPx7imxGUzy3DWMjIiTPv9OiGOYXVV92tr0GrVOWkKIuQmBPxiC1EEz8/w8ADn53B/D6+vkCR1Xgh4A9XAygrs7IBfuF7vYW9PK/zMB6iIJIlW8P4O1sLZmSaenkJZqlCeQ7vdILKxAS8vGjg5qZ54fKz4ZAKbmw0ixsDFhQZ2d6v4YKD45eUX7ayvw+OjBo6OquTDQ8WfnrTipSLtNhQFhACzGRwcwNYW7O/D25viRQGdzhfttFowHGrCgt0ZDut+AfirT5JET5xMYDTStSjqPonjPz4RYZqmdTd2OtDr6b7Xq7bw+bJFyI1zXGXZ/72d21tKa/lugK4Idzc3uO3tf3vFg4EKzGb8BOL5d9C1lpEIv70nNP0n3hNEyK3lx1zgA46lEkSYoMBCAAAAAElFTkSuQmCC"; +Blockly.Mutator.prototype.workspaceWidth_=0;Blockly.Mutator.prototype.workspaceHeight_=0;Blockly.Mutator.prototype.iconClick_=function(a){this.block_.isEditable()&&Blockly.Icon.prototype.iconClick_.call(this,a)}; Blockly.Mutator.prototype.createEditor_=function(){this.svgDialog_=Blockly.createSvgElement("svg",{x:Blockly.Bubble.BORDER_WIDTH,y:Blockly.Bubble.BORDER_WIDTH},null);Blockly.createSvgElement("rect",{"class":"blocklyMutatorBackground",height:"100%",width:"100%"},this.svgDialog_);var a=this;this.workspace_=new Blockly.WorkspaceSvg(function(){return a.getFlyoutMetrics_()},null);this.svgDialog_.appendChild(this.workspace_.createDom("blocklyMutatorBackground"));this.workspace_.addFlyout();return this.svgDialog_}; -Blockly.Mutator.prototype.updateEditable=function(){this.block_.isEditable()?Blockly.Icon.prototype.updateEditable.call(this):(this.setVisible(!1),this.iconGroup_&&Blockly.removeClass_(this.iconGroup_,"blocklyIconGroup"))}; +Blockly.Mutator.prototype.updateEditable=function(){this.block_.isEditable()?Blockly.Icon.prototype.updateEditable.call(this):(this.setVisible(!1),this.iconGroup_&&Blockly.addClass_(this.iconGroup_,"blocklyIconGroupReadonly"))}; Blockly.Mutator.prototype.resizeBubble_=function(){var a=2*Blockly.Bubble.BORDER_WIDTH,b=this.workspace_.getCanvas().getBBox(),c=this.workspace_.flyout_.getMetrics_(),d;d=Blockly.RTL?-b.x:b.width+b.x;b=Math.max(b.height+3*a,c.contentHeight+20);d+=3*a;if(Math.abs(this.workspaceWidth_-d)>a||Math.abs(this.workspaceHeight_-b)>a)this.workspaceWidth_=d,this.workspaceHeight_=b,this.bubble_.setBubbleSize(d+a,b+a),this.svgDialog_.setAttribute("width",this.workspaceWidth_),this.svgDialog_.setAttribute("height", this.workspaceHeight_);Blockly.RTL&&(a="translate("+this.workspaceWidth_+",0)",this.workspace_.getCanvas().setAttribute("transform",a))}; Blockly.Mutator.prototype.setVisible=function(a){if(a!=this.isVisible())if(a){this.bubble_=new Blockly.Bubble(this.block_.workspace,this.createEditor_(),this.block_.svgPath_,this.iconX_,this.iconY_,null,null);var b=this;this.workspace_.flyout_.init(this.workspace_);var c=[];a=0;for(var d;d=this.quarkNames_[a];a++)c[a]=goog.dom.createDom("block",{type:d});this.workspace_.flyout_.show(c);this.rootBlock_=this.block_.decompose(this.workspace_);c=this.rootBlock_.getDescendants();for(a=0;d=c[a];a++)d.render(); @@ -1011,8 +1011,8 @@ this.block_,function(){b.workspaceChanged_()});this.updateColour()}else this.svg Blockly.Mutator.prototype.workspaceChanged_=function(){if(0==Blockly.dragMode_)for(var a=this.workspace_.getTopBlocks(!1),b=0,c;c=a[b];b++){var d=c.getRelativeToSurfaceXY(),e=c.getHeightWidth();20>d.y+e.height&&c.moveBy(0,20-e.height-d.y)}this.rootBlock_.workspace==this.workspace_&&(a=this.block_.rendered,this.block_.rendered=!1,this.block_.compose(this.rootBlock_),this.block_.rendered=a,this.block_.initSvg(),this.block_.rendered&&this.block_.render(),this.resizeBubble_(),this.block_.workspace.fireChangeEvent(), goog.Timer.callOnce(this.block_.bumpNeighbours_,Blockly.BUMP_DELAY,this.block_))};Blockly.Mutator.prototype.getFlyoutMetrics_=function(){var a=0;Blockly.RTL&&(a+=this.workspaceWidth_);return{viewHeight:this.workspaceHeight_,viewWidth:0,absoluteTop:0,absoluteLeft:a}};Blockly.Mutator.prototype.dispose=function(){this.block_.mutator=null;Blockly.Icon.prototype.dispose.call(this)}; // Copyright 2012 Google Inc. Apache License 2.0 -Blockly.Warning=function(a){Blockly.Warning.superClass_.constructor.call(this,a);this.createIcon_()};goog.inherits(Blockly.Warning,Blockly.Icon);Blockly.Warning.textToDom_=function(a){var b=Blockly.createSvgElement("text",{"class":"blocklyText blocklyBubbleText",y:Blockly.Bubble.BORDER_WIDTH},null);a=a.split("\n");for(var c=0;c.blocklyPath {"," stroke: #fc3;"," stroke-width: 3px;","}",".blocklySelected>.blocklyPathLight {"," display: none;","}",".blocklyDragging>.blocklyPath,",".blocklyDragging>.blocklyPathLight {"," fill-opacity: .8;"," stroke-opacity: .8;","}",".blocklyDragging>.blocklyPathDark {"," display: none;","}",".blocklyDisabled>.blocklyPath {"," fill-opacity: .5;"," stroke-opacity: .5;","}",".blocklyDisabled>.blocklyPathLight,", ".blocklyDisabled>.blocklyPathDark {"," display: none;","}",".blocklyText {"," cursor: default;"," fill: #fff;"," font-family: sans-serif;"," font-size: 11pt;","}",".blocklyNonEditableText>text {"," pointer-events: none;","}",".blocklyNonEditableText>rect,",".blocklyEditableText>rect {"," fill: #fff;"," fill-opacity: .6;","}",".blocklyNonEditableText>text,",".blocklyEditableText>text {"," fill: #000;","}",".blocklyEditableText:hover>rect {"," stroke: #fff;"," stroke-width: 2;","}",".blocklyBubbleText {", " fill: #000;","}",".blocklySvg text {"," user-select: none;"," -moz-user-select: none;"," -webkit-user-select: none;"," cursor: inherit;","}",".blocklyHidden {"," display: none;","}",".blocklyFieldDropdown:not(.blocklyHidden) {"," display: block;","}",".blocklyTooltipBackground {"," fill: #ffffc7;"," stroke: #d8d8d8;"," stroke-width: 1px;","}",".blocklyTooltipShadow,",".blocklyDropdownMenuShadow {"," fill: #bbb;"," filter: url(#blocklyShadowFilter);","}",".blocklyTooltipText {"," fill: #000;", -" font-family: sans-serif;"," font-size: 9pt;","}",".blocklyIconShield {"," cursor: default;"," fill: #00c;"," stroke: #ccc;"," stroke-width: 1px;","}",".blocklyIconGroup:hover>.blocklyIconShield {"," fill: #00f;"," stroke: #fff;","}",".blocklyIconGroup:hover>.blocklyIconMark {"," fill: #fff;","}",".blocklyIconMark {"," cursor: default !important;"," fill: #ccc;"," font-family: sans-serif;"," font-size: 9pt;"," font-weight: bold;"," text-anchor: middle;","}",".blocklyWarningBody {", -"}",".blocklyMinimalBody {"," margin: 0;"," padding: 0;","}",".blocklyCommentTextarea {"," background-color: #ffc;"," border: 0;"," margin: 0;"," padding: 2px;"," resize: none;","}",".blocklyHtmlInput {"," border: none;"," font-family: sans-serif;"," font-size: 11pt;"," outline: none;"," width: 100%","}",".blocklyMainBackground {"," fill: url(#blocklyGridPattern);","}",".blocklyMutatorBackground {"," fill: #fff;"," stroke: #ddd;"," stroke-width: 1;","}",".blocklyFlyoutBackground {", -" fill: #ddd;"," fill-opacity: .8;","}",".blocklyColourBackground {"," fill: #666;","}",".blocklyScrollbarBackground {"," fill: #fff;"," stroke: #e4e4e4;"," stroke-width: 1;","}",".blocklyScrollbarKnob {"," fill: #ccc;","}",".blocklyScrollbarBackground:hover+.blocklyScrollbarKnob,",".blocklyScrollbarKnob:hover {"," fill: #bbb;","}",".blocklyInvalidInput {"," background: #faa;","}",".blocklyAngleCircle {"," stroke: #444;"," stroke-width: 1;"," fill: #ddd;"," fill-opacity: .8;","}",".blocklyAngleMarks {", -" stroke: #444;"," stroke-width: 1;","}",".blocklyAngleGauge {"," fill: #f88;"," fill-opacity: .8; ","}",".blocklyAngleLine {"," stroke: #f00;"," stroke-width: 2;"," stroke-linecap: round;","}",".blocklyContextMenu {"," border-radius: 4px;","}",".blocklyDropdownMenu {"," padding: 0 !important;","}",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {"," background: url(<<>>/sprites.png) no-repeat -48px -16px !important;", -"}",".blocklyToolboxDiv {"," background-color: #ddd;"," display: none;"," overflow-x: visible;"," overflow-y: auto;"," position: absolute;","}",".blocklyTreeRoot {"," padding: 4px 0;","}",".blocklyTreeRoot:focus {"," outline: none;","}",".blocklyTreeRow {"," line-height: 22px;"," height: 22px;"," padding-right: 1em;"," white-space: nowrap;","}",'.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {'," padding-right: 0;"," padding-left: 1em !important;","}",".blocklyTreeRow:hover {"," background-color: #e4e4e4;", -"}",".blocklyTreeSeparator {"," border-bottom: solid #e5e5e5 1px;"," height: 0px;"," margin: 5px 0;","}",".blocklyTreeIcon {"," background-image: url(<<>>/sprites.png);"," height: 16px;"," vertical-align: middle;"," width: 16px;","}",".blocklyTreeIconClosedLtr {"," background-position: -32px -1px;","}",".blocklyTreeIconClosedRtl {"," background-position: 0px -1px;","}",".blocklyTreeIconOpen {"," background-position: -16px -1px;","}",".blocklyTreeSelected>.blocklyTreeIconClosedLtr {", -" background-position: -32px -17px;","}",".blocklyTreeSelected>.blocklyTreeIconClosedRtl {"," background-position: 0px -17px;","}",".blocklyTreeSelected>.blocklyTreeIconOpen {"," background-position: -16px -17px;","}",".blocklyTreeIconNone,",".blocklyTreeSelected>.blocklyTreeIconNone {"," background-position: -48px -1px;","}",".blocklyTreeLabel {"," cursor: default;"," font-family: sans-serif;"," font-size: 16px;"," padding: 0 3px;"," vertical-align: middle;","}",".blocklyTreeSelected {", -" background-color: #57e !important;","}",".blocklyTreeSelected .blocklyTreeLabel {"," color: #fff;","}",".blocklyWidgetDiv .goog-palette {"," outline: none;"," cursor: default;","}",".blocklyWidgetDiv .goog-palette-table {"," border: 1px solid #666;"," border-collapse: collapse;","}",".blocklyWidgetDiv .goog-palette-cell {"," height: 13px;"," width: 15px;"," margin: 0;"," border: 0;"," text-align: center;"," vertical-align: middle;"," border-right: 1px solid #666;"," font-size: 1px;", -"}",".blocklyWidgetDiv .goog-palette-colorswatch {"," position: relative;"," height: 13px;"," width: 15px;"," border: 1px solid #666;","}",".blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {"," border: 1px solid #FFF;","}",".blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {"," border: 1px solid #000;"," color: #fff;","}",".blocklyWidgetDiv .goog-date-picker,",".blocklyWidgetDiv .goog-date-picker th,",".blocklyWidgetDiv .goog-date-picker td {"," font: 13px Arial, sans-serif;", -"}",".blocklyWidgetDiv .goog-date-picker {"," -moz-user-focus: normal;"," -moz-user-select: none;"," position: relative;"," border: 1px solid #000;"," float: left;"," padding: 2px;"," color: #000;"," background: #c3d9ff;"," cursor: default;","}",".blocklyWidgetDiv .goog-date-picker th {"," text-align: center;","}",".blocklyWidgetDiv .goog-date-picker td {"," text-align: center;"," vertical-align: middle;"," padding: 1px 3px;","}",".blocklyWidgetDiv .goog-date-picker-menu {"," position: absolute;", -" background: threedface;"," border: 1px solid gray;"," -moz-user-focus: normal;"," z-index: 1;"," outline: none;","}",".blocklyWidgetDiv .goog-date-picker-menu ul {"," list-style: none;"," margin: 0px;"," padding: 0px;","}",".blocklyWidgetDiv .goog-date-picker-menu ul li {"," cursor: default;","}",".blocklyWidgetDiv .goog-date-picker-menu-selected {"," background: #ccf;","}",".blocklyWidgetDiv .goog-date-picker th {"," font-size: .9em;","}",".blocklyWidgetDiv .goog-date-picker td div {", -" float: left;","}",".blocklyWidgetDiv .goog-date-picker button {"," padding: 0px;"," margin: 1px 0;"," border: 0;"," color: #20c;"," font-weight: bold;"," background: transparent;","}",".blocklyWidgetDiv .goog-date-picker-date {"," background: #fff;","}",".blocklyWidgetDiv .goog-date-picker-week,",".blocklyWidgetDiv .goog-date-picker-wday {"," padding: 1px 3px;"," border: 0;"," border-color: #a2bbdd;"," border-style: solid;","}",".blocklyWidgetDiv .goog-date-picker-week {"," border-right-width: 1px;", -"}",".blocklyWidgetDiv .goog-date-picker-wday {"," border-bottom-width: 1px;","}",".blocklyWidgetDiv .goog-date-picker-head td {"," text-align: center;","}",".blocklyWidgetDiv td.goog-date-picker-today-cont {"," text-align: center;","}",".blocklyWidgetDiv td.goog-date-picker-none-cont {"," text-align: center;","}",".blocklyWidgetDiv .goog-date-picker-month {"," min-width: 11ex;"," white-space: nowrap;","}",".blocklyWidgetDiv .goog-date-picker-year {"," min-width: 6ex;"," white-space: nowrap;", -"}",".blocklyWidgetDiv .goog-date-picker-monthyear {"," white-space: nowrap;","}",".blocklyWidgetDiv .goog-date-picker table {"," border-collapse: collapse;","}",".blocklyWidgetDiv .goog-date-picker-other-month {"," color: #888;","}",".blocklyWidgetDiv .goog-date-picker-wkend-start,",".blocklyWidgetDiv .goog-date-picker-wkend-end {"," background: #eee;","}",".blocklyWidgetDiv td.goog-date-picker-selected {"," background: #c3d9ff;","}",".blocklyWidgetDiv .goog-date-picker-today {"," background: #9ab;", -" font-weight: bold !important;"," border-color: #246 #9bd #9bd #246;"," color: #fff;","}",".blocklyWidgetDiv .goog-menu {"," background: #fff;"," border-color: #ccc #666 #666 #ccc;"," border-style: solid;"," border-width: 1px;"," cursor: default;"," font: normal 13px Arial, sans-serif;"," margin: 0;"," outline: none;"," padding: 4px 0;"," position: absolute;"," z-index: 20000;","}",".blocklyWidgetDiv .goog-menuitem {"," color: #000;"," font: normal 13px Arial, sans-serif;"," list-style: none;", -" margin: 0;"," padding: 4px 7em 4px 28px;"," white-space: nowrap;","}",".blocklyWidgetDiv .goog-menuitem.goog-menuitem-rtl {"," padding-left: 7em;"," padding-right: 28px;","}",".blocklyWidgetDiv .goog-menu-nocheckbox .goog-menuitem,",".blocklyWidgetDiv .goog-menu-noicon .goog-menuitem {"," padding-left: 12px;","}",".blocklyWidgetDiv .goog-menu-noaccel .goog-menuitem {"," padding-right: 20px;","}",".blocklyWidgetDiv .goog-menuitem-content {"," color: #000;"," font: normal 13px Arial, sans-serif;", -"}",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-accel,",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content {"," color: #ccc !important;","}",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-icon {"," opacity: 0.3;"," -moz-opacity: 0.3;"," filter: alpha(opacity=30);","}",".blocklyWidgetDiv .goog-menuitem-highlight,",".blocklyWidgetDiv .goog-menuitem-hover {"," background-color: #d6e9f8;"," border-color: #d6e9f8;"," border-style: dotted;"," border-width: 1px 0;", -" padding-bottom: 3px;"," padding-top: 3px;","}",".blocklyWidgetDiv .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-menuitem-icon {"," background-repeat: no-repeat;"," height: 16px;"," left: 6px;"," position: absolute;"," right: auto;"," vertical-align: middle;"," width: 16px;","}",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-icon {"," left: auto;"," right: 6px;","}",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,", -".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {"," background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;","}",".blocklyWidgetDiv .goog-menuitem-accel {"," color: #999;"," direction: ltr;"," left: auto;"," padding: 0 6px;"," position: absolute;"," right: 0;"," text-align: right;","}",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-accel {"," left: 0;"," right: auto;"," text-align: left;","}",".blocklyWidgetDiv .goog-menuitem-mnemonic-hint {", -" text-decoration: underline;","}",".blocklyWidgetDiv .goog-menuitem-mnemonic-separator {"," color: #999;"," font-size: 12px;"," padding-left: 4px;","}",".blocklyWidgetDiv .goog-menuseparator {"," border-top: 1px solid #ccc;"," margin: 4px 0;"," padding: 0;","}",""]; +" font-family: sans-serif;"," font-size: 9pt;","}",".blocklyIconShield {"," cursor: default;"," fill: #00c;"," stroke: #ccc;"," stroke-width: 1px;","}",".blocklyIconGroup:not(:hover),",".blocklyIconGroupReadonly {"," opacity: .6;","}",".blocklyIconMark {"," cursor: default !important;"," fill: #ccc;"," font-family: sans-serif;"," font-size: 9pt;"," font-weight: bold;"," text-anchor: middle;","}",".blocklyWarningBody {","}",".blocklyMinimalBody {"," margin: 0;"," padding: 0;","}",".blocklyCommentTextarea {", +" background-color: #ffc;"," border: 0;"," margin: 0;"," padding: 2px;"," resize: none;","}",".blocklyHtmlInput {"," border: none;"," font-family: sans-serif;"," font-size: 11pt;"," outline: none;"," width: 100%","}",".blocklyMainBackground {"," fill: url(#blocklyGridPattern);","}",".blocklyMutatorBackground {"," fill: #fff;"," stroke: #ddd;"," stroke-width: 1;","}",".blocklyFlyoutBackground {"," fill: #ddd;"," fill-opacity: .8;","}",".blocklyColourBackground {"," fill: #666;","}", +".blocklyScrollbarBackground {"," fill: #fff;"," stroke: #e4e4e4;"," stroke-width: 1;","}",".blocklyScrollbarKnob {"," fill: #ccc;","}",".blocklyScrollbarBackground:hover+.blocklyScrollbarKnob,",".blocklyScrollbarKnob:hover {"," fill: #bbb;","}",".blocklyInvalidInput {"," background: #faa;","}",".blocklyAngleCircle {"," stroke: #444;"," stroke-width: 1;"," fill: #ddd;"," fill-opacity: .8;","}",".blocklyAngleMarks {"," stroke: #444;"," stroke-width: 1;","}",".blocklyAngleGauge {"," fill: #f88;", +" fill-opacity: .8; ","}",".blocklyAngleLine {"," stroke: #f00;"," stroke-width: 2;"," stroke-linecap: round;","}",".blocklyContextMenu {"," border-radius: 4px;","}",".blocklyDropdownMenu {"," padding: 0 !important;","}",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {"," background: url(<<>>/sprites.png) no-repeat -48px -16px !important;","}",".blocklyToolboxDiv {"," background-color: #ddd;"," display: none;", +" overflow-x: visible;"," overflow-y: auto;"," position: absolute;","}",".blocklyTreeRoot {"," padding: 4px 0;","}",".blocklyTreeRoot:focus {"," outline: none;","}",".blocklyTreeRow {"," line-height: 22px;"," height: 22px;"," padding-right: 1em;"," white-space: nowrap;","}",'.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {'," padding-right: 0;"," padding-left: 1em !important;","}",".blocklyTreeRow:hover {"," background-color: #e4e4e4;","}",".blocklyTreeSeparator {"," border-bottom: solid #e5e5e5 1px;", +" height: 0px;"," margin: 5px 0;","}",".blocklyTreeIcon {"," background-image: url(<<>>/sprites.png);"," height: 16px;"," vertical-align: middle;"," width: 16px;","}",".blocklyTreeIconClosedLtr {"," background-position: -32px -1px;","}",".blocklyTreeIconClosedRtl {"," background-position: 0px -1px;","}",".blocklyTreeIconOpen {"," background-position: -16px -1px;","}",".blocklyTreeSelected>.blocklyTreeIconClosedLtr {"," background-position: -32px -17px;","}",".blocklyTreeSelected>.blocklyTreeIconClosedRtl {", +" background-position: 0px -17px;","}",".blocklyTreeSelected>.blocklyTreeIconOpen {"," background-position: -16px -17px;","}",".blocklyTreeIconNone,",".blocklyTreeSelected>.blocklyTreeIconNone {"," background-position: -48px -1px;","}",".blocklyTreeLabel {"," cursor: default;"," font-family: sans-serif;"," font-size: 16px;"," padding: 0 3px;"," vertical-align: middle;","}",".blocklyTreeSelected {"," background-color: #57e !important;","}",".blocklyTreeSelected .blocklyTreeLabel {"," color: #fff;", +"}",".blocklyWidgetDiv .goog-palette {"," outline: none;"," cursor: default;","}",".blocklyWidgetDiv .goog-palette-table {"," border: 1px solid #666;"," border-collapse: collapse;","}",".blocklyWidgetDiv .goog-palette-cell {"," height: 13px;"," width: 15px;"," margin: 0;"," border: 0;"," text-align: center;"," vertical-align: middle;"," border-right: 1px solid #666;"," font-size: 1px;","}",".blocklyWidgetDiv .goog-palette-colorswatch {"," position: relative;"," height: 13px;"," width: 15px;", +" border: 1px solid #666;","}",".blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {"," border: 1px solid #FFF;","}",".blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {"," border: 1px solid #000;"," color: #fff;","}",".blocklyWidgetDiv .goog-date-picker,",".blocklyWidgetDiv .goog-date-picker th,",".blocklyWidgetDiv .goog-date-picker td {"," font: 13px Arial, sans-serif;","}",".blocklyWidgetDiv .goog-date-picker {"," -moz-user-focus: normal;"," -moz-user-select: none;", +" position: relative;"," border: 1px solid #000;"," float: left;"," padding: 2px;"," color: #000;"," background: #c3d9ff;"," cursor: default;","}",".blocklyWidgetDiv .goog-date-picker th {"," text-align: center;","}",".blocklyWidgetDiv .goog-date-picker td {"," text-align: center;"," vertical-align: middle;"," padding: 1px 3px;","}",".blocklyWidgetDiv .goog-date-picker-menu {"," position: absolute;"," background: threedface;"," border: 1px solid gray;"," -moz-user-focus: normal;"," z-index: 1;", +" outline: none;","}",".blocklyWidgetDiv .goog-date-picker-menu ul {"," list-style: none;"," margin: 0px;"," padding: 0px;","}",".blocklyWidgetDiv .goog-date-picker-menu ul li {"," cursor: default;","}",".blocklyWidgetDiv .goog-date-picker-menu-selected {"," background: #ccf;","}",".blocklyWidgetDiv .goog-date-picker th {"," font-size: .9em;","}",".blocklyWidgetDiv .goog-date-picker td div {"," float: left;","}",".blocklyWidgetDiv .goog-date-picker button {"," padding: 0px;"," margin: 1px 0;", +" border: 0;"," color: #20c;"," font-weight: bold;"," background: transparent;","}",".blocklyWidgetDiv .goog-date-picker-date {"," background: #fff;","}",".blocklyWidgetDiv .goog-date-picker-week,",".blocklyWidgetDiv .goog-date-picker-wday {"," padding: 1px 3px;"," border: 0;"," border-color: #a2bbdd;"," border-style: solid;","}",".blocklyWidgetDiv .goog-date-picker-week {"," border-right-width: 1px;","}",".blocklyWidgetDiv .goog-date-picker-wday {"," border-bottom-width: 1px;","}",".blocklyWidgetDiv .goog-date-picker-head td {", +" text-align: center;","}",".blocklyWidgetDiv td.goog-date-picker-today-cont {"," text-align: center;","}",".blocklyWidgetDiv td.goog-date-picker-none-cont {"," text-align: center;","}",".blocklyWidgetDiv .goog-date-picker-month {"," min-width: 11ex;"," white-space: nowrap;","}",".blocklyWidgetDiv .goog-date-picker-year {"," min-width: 6ex;"," white-space: nowrap;","}",".blocklyWidgetDiv .goog-date-picker-monthyear {"," white-space: nowrap;","}",".blocklyWidgetDiv .goog-date-picker table {", +" border-collapse: collapse;","}",".blocklyWidgetDiv .goog-date-picker-other-month {"," color: #888;","}",".blocklyWidgetDiv .goog-date-picker-wkend-start,",".blocklyWidgetDiv .goog-date-picker-wkend-end {"," background: #eee;","}",".blocklyWidgetDiv td.goog-date-picker-selected {"," background: #c3d9ff;","}",".blocklyWidgetDiv .goog-date-picker-today {"," background: #9ab;"," font-weight: bold !important;"," border-color: #246 #9bd #9bd #246;"," color: #fff;","}",".blocklyWidgetDiv .goog-menu {", +" background: #fff;"," border-color: #ccc #666 #666 #ccc;"," border-style: solid;"," border-width: 1px;"," cursor: default;"," font: normal 13px Arial, sans-serif;"," margin: 0;"," outline: none;"," padding: 4px 0;"," position: absolute;"," z-index: 20000;","}",".blocklyWidgetDiv .goog-menuitem {"," color: #000;"," font: normal 13px Arial, sans-serif;"," list-style: none;"," margin: 0;"," padding: 4px 7em 4px 28px;"," white-space: nowrap;","}",".blocklyWidgetDiv .goog-menuitem.goog-menuitem-rtl {", +" padding-left: 7em;"," padding-right: 28px;","}",".blocklyWidgetDiv .goog-menu-nocheckbox .goog-menuitem,",".blocklyWidgetDiv .goog-menu-noicon .goog-menuitem {"," padding-left: 12px;","}",".blocklyWidgetDiv .goog-menu-noaccel .goog-menuitem {"," padding-right: 20px;","}",".blocklyWidgetDiv .goog-menuitem-content {"," color: #000;"," font: normal 13px Arial, sans-serif;","}",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-accel,",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content {", +" color: #ccc !important;","}",".blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-icon {"," opacity: 0.3;"," -moz-opacity: 0.3;"," filter: alpha(opacity=30);","}",".blocklyWidgetDiv .goog-menuitem-highlight,",".blocklyWidgetDiv .goog-menuitem-hover {"," background-color: #d6e9f8;"," border-color: #d6e9f8;"," border-style: dotted;"," border-width: 1px 0;"," padding-bottom: 3px;"," padding-top: 3px;","}",".blocklyWidgetDiv .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-menuitem-icon {", +" background-repeat: no-repeat;"," height: 16px;"," left: 6px;"," position: absolute;"," right: auto;"," vertical-align: middle;"," width: 16px;","}",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-icon {"," left: auto;"," right: 6px;","}",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,",".blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {"," background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;", +"}",".blocklyWidgetDiv .goog-menuitem-accel {"," color: #999;"," direction: ltr;"," left: auto;"," padding: 0 6px;"," position: absolute;"," right: 0;"," text-align: right;","}",".blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-accel {"," left: 0;"," right: auto;"," text-align: left;","}",".blocklyWidgetDiv .goog-menuitem-mnemonic-hint {"," text-decoration: underline;","}",".blocklyWidgetDiv .goog-menuitem-mnemonic-separator {"," color: #999;"," font-size: 12px;"," padding-left: 4px;", +"}",".blocklyWidgetDiv .goog-menuseparator {"," border-top: 1px solid #ccc;"," margin: 4px 0;"," padding: 0;","}",""]; // Copyright 2013 Google Inc. Apache License 2.0 Blockly.WidgetDiv={};Blockly.WidgetDiv.DIV=null;Blockly.WidgetDiv.owner_=null;Blockly.WidgetDiv.dispose_=null;Blockly.WidgetDiv.show=function(a,b){Blockly.WidgetDiv.hide();Blockly.WidgetDiv.owner_=a;Blockly.WidgetDiv.dispose_=b;Blockly.WidgetDiv.DIV.style.display="block"};Blockly.WidgetDiv.hide=function(){Blockly.WidgetDiv.owner_&&(Blockly.WidgetDiv.DIV.style.display="none",Blockly.WidgetDiv.dispose_&&Blockly.WidgetDiv.dispose_(),Blockly.WidgetDiv.owner_=null,Blockly.WidgetDiv.dispose_=null,goog.dom.removeChildren(Blockly.WidgetDiv.DIV))}; Blockly.WidgetDiv.isVisible=function(){return!!Blockly.WidgetDiv.owner_};Blockly.WidgetDiv.hideIfOwner=function(a){Blockly.WidgetDiv.owner_==a&&Blockly.WidgetDiv.hide()};Blockly.WidgetDiv.position=function(a,b,c,d){bc.width+d.x&&(a=c.width+d.x):a - ? - */ - var iconShield = Blockly.createSvgElement('circle', - {'class': 'blocklyIconShield', - 'r': Blockly.Icon.RADIUS, - 'cx': Blockly.Icon.RADIUS, - 'cy': Blockly.Icon.RADIUS}, this.iconGroup_); - this.iconMark_ = Blockly.createSvgElement('text', - {'class': 'blocklyIconMark', - 'x': Blockly.Icon.RADIUS, - 'y': 2 * Blockly.Icon.RADIUS - 3}, this.iconGroup_); - this.iconMark_.appendChild(document.createTextNode('?')); -}; - /** * Create the editor for the comment's bubble. * @return {!Element} The top-level node of the editor. diff --git a/core/css.js b/core/css.js index c3321ff2..d8b8ebff 100644 --- a/core/css.js +++ b/core/css.js @@ -272,13 +272,9 @@ Blockly.Css.CONTENT = [ ' stroke-width: 1px;', '}', - '.blocklyIconGroup:hover>.blocklyIconShield {', - ' fill: #00f;', - ' stroke: #fff;', - '}', - - '.blocklyIconGroup:hover>.blocklyIconMark {', - ' fill: #fff;', + '.blocklyIconGroup:not(:hover),', + '.blocklyIconGroupReadonly {', + ' opacity: .6;', '}', '.blocklyIconMark {', diff --git a/core/icon.js b/core/icon.js index db51b559..7788e23d 100644 --- a/core/icon.js +++ b/core/icon.js @@ -39,9 +39,15 @@ Blockly.Icon = function(block) { }; /** - * Radius of icons. + * Icon in base64 format. + * @private */ -Blockly.Icon.RADIUS = 8; +Blockly.Icon.prototype.png_ = ''; + +/** + * Height and width of icons. + */ +Blockly.Icon.prototype.SIZE = 17; /** * Bubble UI (if visible). @@ -64,17 +70,25 @@ Blockly.Icon.prototype.iconY_ = 0; /** * Create the icon on the block. - * @private */ -Blockly.Icon.prototype.createIcon_ = function() { +Blockly.Icon.prototype.createIcon = function() { if (this.iconGroup_) { // Icon already exists. return; } /* Here's the markup that will be generated: - + + + */ - this.iconGroup_ = Blockly.createSvgElement('g', {}, null); + this.iconGroup_ = Blockly.createSvgElement('g', + {'class': 'blocklyIconGroup'}, null); + var img = Blockly.createSvgElement('image', + {'width': this.SIZE, 'height': this.SIZE}, + this.iconGroup_); + img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', this.png_); + this.block_.getSvgRoot().appendChild(this.iconGroup_); Blockly.bindEvent_(this.iconGroup_, 'mouseup', this, this.iconClick_); this.updateEditable(); @@ -96,12 +110,12 @@ Blockly.Icon.prototype.dispose = function() { * Add or remove the UI indicating if this icon may be clicked or not. */ Blockly.Icon.prototype.updateEditable = function() { - if (!this.block_.isInFlyout) { + if (this.block_.isInFlyout || !this.block_.isEditable()) { Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_), - 'blocklyIconGroup'); + 'blocklyIconGroupReadonly'); } else { Blockly.removeClass_(/** @type {!Element} */ (this.iconGroup_), - 'blocklyIconGroup'); + 'blocklyIconGroupReadonly'); } }; @@ -147,9 +161,9 @@ Blockly.Icon.prototype.renderIcon = function(cursorX) { this.iconGroup_.setAttribute('display', 'block'); var TOP_MARGIN = 5; - var diameter = 2 * Blockly.Icon.RADIUS; + var width = this.SIZE; if (Blockly.RTL) { - cursorX -= diameter; + cursorX -= width; } this.iconGroup_.setAttribute('transform', 'translate(' + cursorX + ', ' + TOP_MARGIN + ')'); @@ -157,7 +171,7 @@ Blockly.Icon.prototype.renderIcon = function(cursorX) { if (Blockly.RTL) { cursorX -= Blockly.BlockSvg.SEP_SPACE_X; } else { - cursorX += diameter + Blockly.BlockSvg.SEP_SPACE_X; + cursorX += width + Blockly.BlockSvg.SEP_SPACE_X; } return cursorX; }; @@ -183,8 +197,8 @@ Blockly.Icon.prototype.computeIconLocation = function() { // Find coordinates for the centre of the icon and update the arrow. var blockXY = this.block_.getRelativeToSurfaceXY(); var iconXY = Blockly.getRelativeXY_(this.iconGroup_); - var newX = blockXY.x + iconXY.x + Blockly.Icon.RADIUS; - var newY = blockXY.y + iconXY.y + Blockly.Icon.RADIUS; + var newX = blockXY.x + iconXY.x + this.SIZE / 2; + var newY = blockXY.y + iconXY.y + this.SIZE / 2; if (newX !== this.iconX_ || newY !== this.iconY_) { this.setIconLocation(newX, newY); } diff --git a/core/mutator.js b/core/mutator.js index 19b2f1d5..e17569d0 100644 --- a/core/mutator.js +++ b/core/mutator.js @@ -46,6 +46,12 @@ Blockly.Mutator = function(quarkNames) { }; goog.inherits(Blockly.Mutator, Blockly.Icon); +/** + * Icon in base64 format. + * @private + */ +Blockly.Mutator.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGgUkCK5AYg4AAAGlSURBVDjLnZS9SiRBFIVLunt+9gUU1EmFaSfQ0GCeRcTAwEDERHYTQUZ8l6F9Ad9gMzcVfwaxdzpxuHRVZNVncHfAnt5ply0oqjj33FP3FqfKGGMM8K0suRZhGgKehhECXoSpc1wBXTMXEOHXeIzr9yGKwJjlM4ogTSHLcCLcAV1TllyPx7imxGUzy3DWMjIiTPv9OiGOYXVV92tr0GrVOWkKIuQmBPxiC1EEz8/w8ADn53B/D6+vkCR1Xgh4A9XAygrs7IBfuF7vYW9PK/zMB6iIJIlW8P4O1sLZmSaenkJZqlCeQ7vdILKxAS8vGjg5qZ54fKz4ZAKbmw0ixsDFhQZ2d6v4YKD45eUX7ayvw+OjBo6OquTDQ8WfnrTipSLtNhQFhACzGRwcwNYW7O/D25viRQGdzhfttFowHGrCgt0ZDut+AfirT5JET5xMYDTStSjqPonjPz4RYZqmdTd2OtDr6b7Xq7bw+bJFyI1zXGXZ/72d21tKa/lugK4Idzc3uO3tf3vFg4EKzGb8BOL5d9C1lpEIv70nNP0n3hNEyK3lx1zgA46lEkSYoMBCAAAAAElFTkSuQmCC'; + /** * Width of workspace. * @private @@ -58,33 +64,6 @@ Blockly.Mutator.prototype.workspaceWidth_ = 0; */ Blockly.Mutator.prototype.workspaceHeight_ = 0; -/** - * Create the icon on the block. - */ -Blockly.Mutator.prototype.createIcon = function() { - if (this.iconMark_) { - // Icon already exists. - return; - } - Blockly.Icon.prototype.createIcon_.call(this); - /* Here's the markup that will be generated: - - ★ - */ - var quantum = Blockly.Icon.RADIUS / 2; - var iconShield = Blockly.createSvgElement('rect', - {'class': 'blocklyIconShield', - 'width': 4 * quantum, - 'height': 4 * quantum, - 'rx': quantum, - 'ry': quantum}, this.iconGroup_); - this.iconMark_ = Blockly.createSvgElement('text', - {'class': 'blocklyIconMark', - 'x': Blockly.Icon.RADIUS, - 'y': 2 * Blockly.Icon.RADIUS - 4}, this.iconGroup_); - this.iconMark_.appendChild(document.createTextNode('\u2605')); -}; - /** * Clicking on the icon toggles if the mutator bubble is visible. * Disable if block is uneditable. @@ -136,8 +115,8 @@ Blockly.Mutator.prototype.updateEditable = function() { // Close any mutator bubble. Icon is not clickable. this.setVisible(false); if (this.iconGroup_) { - Blockly.removeClass_(/** @type {!Element} */ (this.iconGroup_), - 'blocklyIconGroup'); + Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_), + 'blocklyIconGroupReadonly'); } } }; diff --git a/core/warning.js b/core/warning.js index 00f4a151..a10ff15e 100644 --- a/core/warning.js +++ b/core/warning.js @@ -38,10 +38,15 @@ goog.require('Blockly.Icon'); */ Blockly.Warning = function(block) { Blockly.Warning.superClass_.constructor.call(this, block); - this.createIcon_(); + this.createIcon(); }; goog.inherits(Blockly.Warning, Blockly.Icon); +/** + * Icon in base64 format. + * @private + */ +Blockly.Warning.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGgApDBpIGrEAAAGfSURBVDjLnZM9S2NREIbfc2P8AF27BXshpIzK5g9ssUj8C2tnYyUoiBGSyk4sbCLs1vkRgoW1jYWFICwsMV2Se3JPboLe+FhcNCZcjXFgOMzHeec9M2ekDwTIAEUgo68IsOQczdNTIudoAksTg/g+5+UyDxKUyzz4PueTsvhZr+NmZkCC6Wmo1QiAX58FmLKWf4VCDPCiGxtgLf+B9FiQXo+9y0ucBIUCnJ3B+noMdHGBC0P2xrH4HoYEmUx8qVQCgMPD2F5ehjDEjTbZe2s4p5NKRenb2+Qid3dSpaK0tTp+j8VKq0VncXHQh2IxZrK/P/AtLECjQQf4McQEMNbq786O5qwdANfr8Xl/P/AFgbS7qzlr9Qcwr4EoYvPmBud5wxPJ5+HqCtbWhv3GwPU1Lor4/fKMeedo5vPDiRKsrsLWFuRyybFOhxbwTd0upWqVcDQpaTqjWq0SdruU5PvUkiol/ZNRzeXA96mp3aaRzSYnjdNsFtptGiYI2PY8HaVSmu33xWf3K5WS6ffVe3rSgXnzT+YlpSfY00djjJOkZ/wpr41bQMIsAAAAAElFTkSuQmCC'; /** * Create the text for the warning's bubble. @@ -71,28 +76,6 @@ Blockly.Warning.textToDom_ = function(text) { */ Blockly.Warning.prototype.text_ = ''; -/** - * Create the icon on the block. - * @private - */ -Blockly.Warning.prototype.createIcon_ = function() { - Blockly.Icon.prototype.createIcon_.call(this); - /* Here's the markup that will be generated: - - ! - */ - var iconShield = Blockly.createSvgElement('path', - {'class': 'blocklyIconShield', - 'd': 'M 2,15 Q -1,15 0.5,12 L 6.5,1.7 Q 8,-1 9.5,1.7 L 15.5,12 ' + - 'Q 17,15 14,15 z'}, - this.iconGroup_); - this.iconMark_ = Blockly.createSvgElement('text', - {'class': 'blocklyIconMark', - 'x': Blockly.Icon.RADIUS, - 'y': 2 * Blockly.Icon.RADIUS - 3}, this.iconGroup_); - this.iconMark_.appendChild(document.createTextNode('!')); -}; - /** * Show or hide the warning bubble. * @param {boolean} visible True if the bubble should be visible. diff --git a/media/icons.svg b/media/icons.svg new file mode 100644 index 00000000..c066376b --- /dev/null +++ b/media/icons.svg @@ -0,0 +1,40 @@ + + + + + + + + + ? + + + + + + + + ! + + +