{"action":"created","issue":{"url":"https://api.github.com/repos/almende/vis/issues/2291","repository_url":"https://api.github.com/repos/almende/vis","labels_url":"https://api.github.com/repos/almende/vis/issues/2291/labels{/name}","comments_url":"https://api.github.com/repos/almende/vis/issues/2291/comments","events_url":"https://api.github.com/repos/almende/vis/issues/2291/events","html_url":"https://github.com/almende/vis/issues/2291","id":188313075,"number":2291,"title":"Icon in Shape","user":{"login":"pdugas","id":710928,"avatar_url":"https://avatars.githubusercontent.com/u/710928?v=3","gravatar_id":"","url":"https://api.github.com/users/pdugas","html_url":"https://github.com/pdugas","followers_url":"https://api.github.com/users/pdugas/followers","following_url":"https://api.github.com/users/pdugas/following{/other_user}","gists_url":"https://api.github.com/users/pdugas/gists{/gist_id}","starred_url":"https://api.github.com/users/pdugas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pdugas/subscriptions","organizations_url":"https://api.github.com/users/pdugas/orgs","repos_url":"https://api.github.com/users/pdugas/repos","events_url":"https://api.github.com/users/pdugas/events{/privacy}","received_events_url":"https://api.github.com/users/pdugas/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-11-09T18:04:06Z","updated_at":"2016-11-09T21:23:25Z","closed_at":null,"body":"I would like to be able to use a glyph icon (i.e. FontAwesome, Ion, etc.) overlaid on a standard shape node like dot or diamond.  The idea is to be able to color the underlying shape to represent the state of the object the node represents while using the glyph to represent the object type.  \r\n\r\nI modified the _drawShape() method on the ShapeNode class to add the guts of the _icon() method from the Icon class.  Code below is working for me.  Setting icon.code on a node with shape set to dot, diamond, square, etc. gets the glyph inserted in the center using the border color for the glyph.\r\n\r\n    _drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover) {\r\n      this._resizeShape();\r\n \r\n      this.left = x - this.width / 2;\r\n      this.top = y - this.height / 2;\r\n \r\n      var neutralborderWidth = this.options.borderWidth;\r\n      var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;\r\n      var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale;\r\n      ctx.lineWidth = Math.min(this.width, borderWidth);\r\n \r\n      ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;\r\n      ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;\r\n      ctx[shape](x, y, this.options.size);\r\n \r\n      // draw shadow if enabled\r\n      this.enableShadow(ctx);\r\n      // draw the background\r\n      ctx.fill();\r\n      // disable shadows for other elements.\r\n      this.disableShadow(ctx);\r\n \r\n      //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.\r\n      ctx.save();\r\n      // if borders are zero width, they will be drawn with width 1 by default. This prevents that\r\n      if (borderWidth > 0) {\r\n        this.enableBorderDashes(ctx);\r\n        //draw the border\r\n        ctx.stroke();\r\n        //disable dashed border for other elements\r\n        this.disableBorderDashes(ctx);\r\n      }\r\n      ctx.restore();\r\n\r\n      // XXX  Added this block\r\n      if (this.options.icon.code !== undefined) {\r\n        var iconSize = Number(this.height) * 0.6;\r\n        ctx.font = (selected ? \"bold \" : \"\") + iconSize + \"px \" + (this.options.icon.face || 'FontAwesome');\r\n        ctx.fillStyle = ctx.strokeStyle;\r\n        ctx.textAlign = \"center\";\r\n        ctx.textBaseline = \"middle\";\r\n        this.enableShadow(ctx);\r\n        ctx.fillText(this.options.icon.code, x, y);\r\n        this.disableShadow(ctx);\r\n      }\r\n \r\n      if (this.options.label !== undefined) {\r\n        let yLabel = y + 0.5 * this.height + 3; // the + 3 is to offset it a bit below the node.\r\n        this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');\r\n      }\r\n \r\n      this.updateBoundingBox(x,y);\r\n    }\r\n"},"comment":{"url":"https://api.github.com/repos/almende/vis/issues/comments/259530549","html_url":"https://github.com/almende/vis/issues/2291#issuecomment-259530549","issue_url":"https://api.github.com/repos/almende/vis/issues/2291","id":259530549,"user":{"login":"pdugas","id":710928,"avatar_url":"https://avatars.githubusercontent.com/u/710928?v=3","gravatar_id":"","url":"https://api.github.com/users/pdugas","html_url":"https://github.com/pdugas","followers_url":"https://api.github.com/users/pdugas/followers","following_url":"https://api.github.com/users/pdugas/following{/other_user}","gists_url":"https://api.github.com/users/pdugas/gists{/gist_id}","starred_url":"https://api.github.com/users/pdugas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pdugas/subscriptions","organizations_url":"https://api.github.com/users/pdugas/orgs","repos_url":"https://api.github.com/users/pdugas/repos","events_url":"https://api.github.com/users/pdugas/events{/privacy}","received_events_url":"https://api.github.com/users/pdugas/received_events","type":"User","site_admin":false},"created_at":"2016-11-09T21:23:25Z","updated_at":"2016-11-09T21:23:25Z","body":"Hmm...  The colors aren't correct when set to something other than the defaults.  Looking for the fix."}}
{"actor":{"display_login":"pdugas"}}