{"action":"created","issue":{"url":"https://api.github.com/repos/jacomyal/sigma.js/issues/684","labels_url":"https://api.github.com/repos/jacomyal/sigma.js/issues/684/labels{/name}","comments_url":"https://api.github.com/repos/jacomyal/sigma.js/issues/684/comments","events_url":"https://api.github.com/repos/jacomyal/sigma.js/issues/684/events","html_url":"https://github.com/jacomyal/sigma.js/issues/684","id":123115270,"number":684,"title":"Force Atlas Layout not working with Canvas rendering","user":{"login":"Jverma","id":5216140,"avatar_url":"https://avatars.githubusercontent.com/u/5216140?v=3","gravatar_id":"","url":"https://api.github.com/users/Jverma","html_url":"https://github.com/Jverma","followers_url":"https://api.github.com/users/Jverma/followers","following_url":"https://api.github.com/users/Jverma/following{/other_user}","gists_url":"https://api.github.com/users/Jverma/gists{/gist_id}","starred_url":"https://api.github.com/users/Jverma/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Jverma/subscriptions","organizations_url":"https://api.github.com/users/Jverma/orgs","repos_url":"https://api.github.com/users/Jverma/repos","events_url":"https://api.github.com/users/Jverma/events{/privacy}","received_events_url":"https://api.github.com/users/Jverma/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-12-19T22:55:05Z","updated_at":"2015-12-23T20:39:43Z","closed_at":null,"body":"s.startForceAtlas2() is not working for a graph with canvas rendering, but it does work for other case. \r\nI'm using the following codes -- \r\n```\r\n<!-- SIGMA IMPORTS -->\r\n<script src=\"../src/sigma.core.js\"></script>\r\n<script src=\"../src/conrad.js\"></script>\r\n<script src=\"../src/utils/sigma.utils.js\"></script>\r\n<script src=\"../src/utils/sigma.polyfills.js\"></script>\r\n<script src=\"../src/sigma.settings.js\"></script>\r\n<script src=\"../src/classes/sigma.classes.dispatcher.js\"></script>\r\n<script src=\"../src/classes/sigma.classes.configurable.js\"></script>\r\n<script src=\"../src/classes/sigma.classes.graph.js\"></script>\r\n<script src=\"../src/classes/sigma.classes.camera.js\"></script>\r\n<script src=\"../src/classes/sigma.classes.quad.js\"></script>\r\n<script src=\"../src/classes/sigma.classes.edgequad.js\"></script>\r\n<script src=\"../src/captors/sigma.captors.mouse.js\"></script>\r\n<script src=\"../src/captors/sigma.captors.touch.js\"></script>\r\n<script src=\"../src/renderers/sigma.renderers.canvas.js\"></script>\r\n<script src=\"../src/renderers/sigma.renderers.webgl.js\"></script>\r\n<script src=\"../src/renderers/sigma.renderers.svg.js\"></script>\r\n<script src=\"../src/renderers/sigma.renderers.def.js\"></script>\r\n<script src=\"../src/renderers/webgl/sigma.webgl.nodes.def.js\"></script>\r\n<script src=\"../src/renderers/webgl/sigma.webgl.nodes.fast.js\"></script>\r\n<script src=\"../src/renderers/webgl/sigma.webgl.edges.def.js\"></script>\r\n<script src=\"../src/renderers/webgl/sigma.webgl.edges.fast.js\"></script>\r\n<script src=\"../src/renderers/webgl/sigma.webgl.edges.arrow.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.labels.def.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.hovers.def.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.nodes.def.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.edges.def.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.edges.curve.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.edges.arrow.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.edgehovers.def.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.edgehovers.curve.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.edgehovers.arrow.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js\"></script>\r\n<script src=\"../src/renderers/canvas/sigma.canvas.extremities.def.js\"></script>\r\n<script src=\"../src/renderers/svg/sigma.svg.utils.js\"></script>\r\n<script src=\"../src/renderers/svg/sigma.svg.nodes.def.js\"></script>\r\n<script src=\"../src/renderers/svg/sigma.svg.edges.def.js\"></script>\r\n<script src=\"../src/renderers/svg/sigma.svg.edges.curve.js\"></script>\r\n<script src=\"../src/renderers/svg/sigma.svg.labels.def.js\"></script>\r\n<script src=\"../src/renderers/svg/sigma.svg.hovers.def.js\"></script>\r\n<script src=\"../src/middlewares/sigma.middlewares.rescale.js\"></script>\r\n<script src=\"../src/middlewares/sigma.middlewares.copy.js\"></script>\r\n<script src=\"../src/misc/sigma.misc.animation.js\"></script>\r\n<script src=\"../src/misc/sigma.misc.bindEvents.js\"></script>\r\n<script src=\"../src/misc/sigma.misc.bindDOMEvents.js\"></script>\r\n<script src=\"../src/misc/sigma.misc.drawHovers.js\"></script>\r\n\r\n\r\n<!-- CUSTOM EDGE AND CANVAS PLUGIN IMPORTS -->\r\n<script src=\"../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.dashed.js\"></script>\r\n<script src=\"../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.dotted.js\"></script>\r\n<script src=\"../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.parallel.js\"></script>\r\n<script src=\"../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.tapered.js\"></script>\r\n<script src=\"../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.dashed.js\"></script>\r\n<script src=\"../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.dotted.js\"></script>\r\n<script src=\"../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.parallel.js\"></script>\r\n<script src=\"../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.tapered.js\"></script>\r\n\r\n<!-- JSON PARSER PLUGIN IMPORT -->\r\n<script type=\"text/javascript\" src=\"../plugins/sigma.parsers.json/sigma.parsers.json.js\"></script>\r\n\r\n<!-- FORCE ATLAS IMPORT -->\r\n  <script src=\"../plugins/sigma.layout.forceAtlas2/worker.js\"></script>\r\n  <script src=\"../plugins/sigma.layout.forceAtlas2/supervisor.js\"></script>\r\n\r\n<div id=\"container\">\r\n  <style>\r\n    #graph-container {\r\n      top: 0;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      position: absolute;\r\n    }\r\n  </style>\r\n  <div id=\"graph-container\"></div>\r\n</div>\r\n\r\n<!-- MAIN SCRIPT -->\r\n<script>\r\nvar s = sigma.parsers.json('sigmaGraph.json', {\r\n  renderer: {\r\n    container: 'graph-container',\r\n    type: 'canvas'\r\n  },\r\n  settings: {\r\n    minNodeSize: 1,\r\n    maxNodeSize: 10,\r\n    minEdgeSize: 0.1,\r\n    maxEdgeSize: 2,\r\n    enableEdgeHovering: true,\r\n    edgeHoverSizeRatio: 2,\r\n    defaultNodeColor: 'steelblue',\r\n    edgeColor: 'default',\r\n    defaultEdgeColor: '#ec5148',\r\n    // defaultEdgeColor: '#ccc',\r\n    defaultEdgeArrow: 'source',\r\n  }\r\n});\r\n\r\n\r\n// Start ForceAtlas2 Algorithm\r\ns.startForceAtlas2({worker: true, barnesHutOptimize: false});\r\n\r\n\r\n</script>\r\n\r\n```\r\n\r\nIf I use instead --\r\n\r\n```\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Basic SigmaJS example</title>\r\n\t<style type=\"text/css\">\r\n    body {\r\n      margin: 0;\r\n    }\r\n    #network-graph {\r\n      position: absolute;\r\n      top: 0;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n  </style>\r\n</head>\r\n<body>\r\n\t<!-- define the graph container -->\r\n\t<div id=\"network-graph\"></div>\r\n\r\n\t<!-- Export sigma -->\r\n\t<script type=\"text/javascript\" src=\"sigma.min.js\"></script>\r\n\r\n\t<!-- Export graph topology plugins -->\r\n\t<script type=\"text/javascript\" src=\"sigma.layout.forceAtlas2.min.js\"></script>\r\n\r\n\t<!-- Export JSON Parser plugin -->\r\n\t<script type=\"text/javascript\" src=\"sigma.parsers.json.min.js\"></script>\r\n\r\n\r\n\t<!-- Main script -->\r\n\t<script>\r\n\tsigma.parsers.json(\"./sigmaGraph.json\",{container: 'network-graph'}, function(s){\r\n\t\ts.graph.nodes().forEach(function(node, i, a){\r\n\t\t\tnode.x = Math.cos(Math.PI * 2 * i / a.length);\r\n\t\t\tnode.y = Math.sin(Math.PI * 2 * i / a.length);\r\n\t\t});\r\n\t\ts.refresh();\r\n\t\ts.startForceAtlas2();\r\n\t\ts.settings({\r\n\t\t\tdefaultNodeColor: 'steelblue',\r\n\t\t\tedgeColor: 'default',\r\n\t\t\tdefaultEdgeColor: '#ec5148',\r\n\t\t\tdefaultEdgeArrow: 'source',\r\n\t\t\tenableEdgeHovering: true,\r\n\t\t\tedgeHoverSizeRatio: 5\r\n\t\t});\r\n\t\t// alert(s.isForceAtlas2Running());\r\n\t\t// s.stopForceAtlas2();\r\n\t});\r\n\t</script>\r\n\r\n\t\r\n\r\n\r\n</body>\r\n</html>\r\n```\r\nit works fine. But I want to use Canvas and to be to able to use different shapes for nodes and edges and drag nodes etc. all of which seem to require canvas rendering. \r\nAny help would be greatly appreciated. Thanks"},"comment":{"url":"https://api.github.com/repos/jacomyal/sigma.js/issues/comments/166986398","html_url":"https://github.com/jacomyal/sigma.js/issues/684#issuecomment-166986398","issue_url":"https://api.github.com/repos/jacomyal/sigma.js/issues/684","id":166986398,"user":{"login":"Yomguithereal","id":2571951,"avatar_url":"https://avatars.githubusercontent.com/u/2571951?v=3","gravatar_id":"","url":"https://api.github.com/users/Yomguithereal","html_url":"https://github.com/Yomguithereal","followers_url":"https://api.github.com/users/Yomguithereal/followers","following_url":"https://api.github.com/users/Yomguithereal/following{/other_user}","gists_url":"https://api.github.com/users/Yomguithereal/gists{/gist_id}","starred_url":"https://api.github.com/users/Yomguithereal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Yomguithereal/subscriptions","organizations_url":"https://api.github.com/users/Yomguithereal/orgs","repos_url":"https://api.github.com/users/Yomguithereal/repos","events_url":"https://api.github.com/users/Yomguithereal/events{/privacy}","received_events_url":"https://api.github.com/users/Yomguithereal/received_events","type":"User","site_admin":false},"created_at":"2015-12-23T20:39:43Z","updated_at":"2015-12-23T20:39:43Z","body":"Are you using the latest version of the library from this repository? It's not impossible that the latest bundled release does not include edge hovering."}}