From 19263bdd5bb6a420b9081ead376d9349cd02070e Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Sun, 13 Dec 2015 11:06:15 +0100 Subject: [PATCH] Vectorize icons. --- core/comment.js | 30 ++++++++++++++++++++++++------ core/css.js | 10 ++++++++++ core/icon.js | 14 ++------------ core/mutator.js | 29 +++++++++++++++++++++++------ core/warning.js | 23 +++++++++++++++++++++-- media/icons.svg | 45 --------------------------------------------- 6 files changed, 80 insertions(+), 71 deletions(-) delete mode 100644 media/icons.svg diff --git a/core/comment.js b/core/comment.js index 3f2c1f7d..e308994b 100644 --- a/core/comment.js +++ b/core/comment.js @@ -43,12 +43,6 @@ Blockly.Comment = function(block) { }; goog.inherits(Blockly.Comment, Blockly.Icon); -/** - * Icon in base64 format. - * @private - */ -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='; - /** * Comment text (if bubble is not visible). * @private @@ -67,6 +61,30 @@ Blockly.Comment.prototype.width_ = 160; */ Blockly.Comment.prototype.height_ = 80; +/** + * Draw the comment icon. + * @param {!Element} group The icon group. + * @private + */ +Blockly.Comment.prototype.drawIcon_ = function(group) { + // Circle. + Blockly.createSvgElement('circle', + {'class': 'blocklyIconShape', 'r': '8', 'cx': '8', 'cy': '8'}, + group); + // Can't use a real '?' text character since different browsers and operating + // systems render it differently. + // Body of question mark. + Blockly.createSvgElement('path', + {'class': 'blocklyIconSymbol', + 'd': 'm6.8,10h2c0.003,-0.617 0.271,-0.962 0.633,-1.266 2.875,-2.405 0.607,-5.534 -3.765,-3.874v1.7c3.12,-1.657 3.698,0.118 2.336,1.25 -1.201,0.998 -1.201,1.528 -1.204,2.19z'}, + group); + // Dot of question point. + Blockly.createSvgElement('rect', + {'class': 'blocklyIconSymbol', + 'x': '6.8', 'y': '10.78', 'height': '2', 'width': '2'}, + group); +}; + /** * 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 b91d5b27..f1cafb0a 100644 --- a/core/css.js +++ b/core/css.js @@ -272,6 +272,16 @@ Blockly.Css.CONTENT = [ 'opacity: .6;', '}', + '.blocklyIconShape {', + 'fill: #00f;', + 'stroke: #fff;', + 'stroke-width: 1px;', + '}', + + '.blocklyIconSymbol {', + 'fill: #fff;', + '}', + '.blocklyMinimalBody {', 'margin: 0;', 'padding: 0;', diff --git a/core/icon.js b/core/icon.js index 6b3042d6..f64502b4 100644 --- a/core/icon.js +++ b/core/icon.js @@ -48,12 +48,6 @@ Blockly.Icon.prototype.collapseHidden = true; */ Blockly.Icon.prototype.SIZE = 17; -/** - * Icon in base64 format. - * @private - */ -Blockly.Icon.prototype.png_ = ''; - /** * Bubble UI (if visible). * @type {Blockly.Bubble} @@ -83,16 +77,12 @@ Blockly.Icon.prototype.createIcon = function() { } /* Here's the markup that will be generated: - + ... */ 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.drawIcon_(this.iconGroup_); this.block_.getSvgRoot().appendChild(this.iconGroup_); Blockly.bindEvent_(this.iconGroup_, 'mouseup', this, this.iconClick_); diff --git a/core/mutator.js b/core/mutator.js index 600f8d68..b77b0122 100644 --- a/core/mutator.js +++ b/core/mutator.js @@ -46,12 +46,6 @@ Blockly.Mutator = function(quarkNames) { }; goog.inherits(Blockly.Mutator, Blockly.Icon); -/** - * Icon in base64 format. - * @private - */ -Blockly.Mutator.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGhULOIajyb8AAAHMSURBVDjLnZS9SiRBFIXP/CQ9iIHgPoGBTo8vIAaivoKaKJr6DLuxYqKYKIqRgSCMrblmIxqsICgOmAriziIiRXWjYPdnUDvT2+PMsOyBoop7qk71vedWS5KAkrWsGUMjSYjpgSQhNoZGFLEKeGoKGMNttUpULkOhAFL3USiA70MQEBnDDeDJWtaqVaJeB7uNICAKQ1ZkDI1yufOm+XnY2YHl5c6874MxPClJiDulkMvBxYWrw/095POdU0sS4hxALqcWtreloSGpVJLGxtL49bX0+Ci9vUkzM2kcXGFbypUKxHHLBXZ3YW4ONjfh4yN1aGIiPQOQEenrg6MjR+zvZz99Y8PFT09hYCArktdfsFY6PHTr83NlUKu5+eREennJchmR/n5pYcGtJyezG6em3Dw7Kw0OZrlMOr6f1gTg4ACWlmBvz9WoifHxbDpf3Flfd+54njQ9ncYvL6WHB+n9XVpcbHOnW59IUKu5m+p11zftfLHo+qRorZ6Hh/Xt7k5fsLUl1evS1dWfG9swMiJZq9+KIlaD4P/eztkZNgz5LsAzhpvjY6JK5d9e8eioE3h95SdQbDrkhSErxvArjkl6/U/imMQYnsKQH02BT7vbZZfVOiWhAAAAAElFTkSuQmCC'; - /** * Width of workspace. * @private @@ -64,6 +58,29 @@ Blockly.Mutator.prototype.workspaceWidth_ = 0; */ Blockly.Mutator.prototype.workspaceHeight_ = 0; +/** + * Draw the mutator icon. + * @param {!Element} group The icon group. + * @private + */ +Blockly.Mutator.prototype.drawIcon_ = function(group) { + // Square with rounded corners. + Blockly.createSvgElement('rect', + {'class': 'blocklyIconShape', + 'rx': '4', 'ry': '4', + 'height': '16', 'width': '16'}, + group); + // Gear. + Blockly.createSvgElement('path', + {'class': 'blocklyIconSymbol', + 'd': 'm4.203,7.296c-0.039,0.2226 -0.063,0.45 -0.063,0.684 0,0.234 0.024,0.462 0.063,0.684l-0.9204,0.6774 -0.1098,0.4098 0.9,1.5588 0.4104,0.1104 1.0428,-0.4572c0.3486,0.294 0.75,0.525 1.1874,0.6828l0.1266,1.134 0.3,0.3h1.8l0.3,-0.2994 0.1266,-1.1376c0.4362,-0.1584 0.8364,-0.3888 1.185,-0.6822l1.0464,0.4584 0.4092,-0.1104 0.9,-1.5588 -0.1104,-0.4104 -0.9204,-0.6774c0.0396,-0.2208 0.0636,-0.4488 0.0636,-0.6822 0,-0.2334 -0.024,-0.4614 -0.0636,-0.6834l0.9204,-0.6774 0.1104,-0.4104 -0.9,-1.5588 -0.4092,-0.1092 -1.0464,0.4584c-0.348,-0.2928 -0.7488,-0.5238 -1.185,-0.6822l-0.1266,-1.1376 -0.3,-0.2994h-1.8l-0.3,0.3 -0.126,1.1352c-0.4374,0.1572 -0.8388,0.3888 -1.1874,0.6822l-1.0434,-0.4566 -0.4098,0.1098 -0.8994,1.5588 0.108,0.4092z'}, + group); + // Axel hole. + Blockly.createSvgElement('circle', + {'class': 'blocklyIconShape', 'r': '2.7', 'cx': '8', 'cy': '8'}, + group); +}; + /** * Clicking on the icon toggles if the mutator bubble is visible. * Disable if block is uneditable. diff --git a/core/warning.js b/core/warning.js index 19bad666..8d990b1d 100644 --- a/core/warning.js +++ b/core/warning.js @@ -50,10 +50,29 @@ goog.inherits(Blockly.Warning, Blockly.Icon); Blockly.Warning.prototype.collapseHidden = false; /** - * Icon in base64 format. + * Draw the warning icon. + * @param {!Element} group The icon group. * @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'; +Blockly.Warning.prototype.drawIcon_ = function(group) { + // Triangle with rounded corners. + Blockly.createSvgElement('path', + {'class': 'blocklyIconShape', + 'd': 'M2,15Q-1,15 0.5,12L6.5,1.7Q8,-1 9.5,1.7L15.5,12Q17,15 14,15z'}, + group); + // Can't use a real '!' text character since different browsers and operating + // systems render it differently. + // Body of exclamation point. + Blockly.createSvgElement('path', + {'class': 'blocklyIconSymbol', + 'd': 'm7,4.8v3.16l0.27,2.27h1.46l0.27,-2.27v-3.16z'}, + group); + // Dot of exclamation point. + Blockly.createSvgElement('rect', + {'class': 'blocklyIconSymbol', + 'x': '7', 'y': '11', 'height': '2', 'width': '2'}, + group); +}; /** * Create the text for the warning's bubble. diff --git a/media/icons.svg b/media/icons.svg deleted file mode 100644 index ba4e269a..00000000 --- a/media/icons.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - ? - - - - - - - - ! - - -