can we add hexagon as shape for node in network

[rg2609]

I am using the Network layout and I wanted to show node in hexagon shape, how can I do this, can we use SVG script in vis js

[wimrijnders]

The right way to do this, would be to add the hexagon as a drawable shape to Network. This is not too hard, other shapes can be used as a template.

An alternative would be to draw the shape yourself in the afterDrawing event. This is essentially the same as previous comment, but the drawing code would be in user code and you don't get the benefit of internal functionality for resizing, labels etc.

SVG is supported, but drawing SVG's on a canvas element has severe limitations. See example HTML in Nodes.

[rg2609]

I have added following in code snippet in the lib/network/shapes.js

/**
   * Draw a Hexagon shape with 6 sides
   * @param {Number} x horizontal center
   * @param {Number} y vertical center
   * @param {Number} r   radius
   */
  CanvasRenderingContext2D.prototype.hexagon = function (x, y, r) {
    // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
    this.beginPath();
    var a = (Math.PI*2)/6;
    this.translate(x,y);
    this.moveTo(radius,0);
    for (var i = 1; i < sides; i++) {
      this.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
    }
      this.closePath();
  };

should I need to also update the vis.js file

[wimrijnders]

Hugely appreciated that you took it upon yourself to pick this up.

However, there's just a bit more work to do. The next step is to add a class in lib/network/module/components/nodes/shapes. You can use Square again as a template.

I'll get back to you on the first available opportunity.

[rg2609]

I added the class Hexagon in lib/network/module/components/nodes/shapes

[wimrijnders]

You are fast, my friend.

Two more steps to go with the source code, if you're up to it:

• lib/network/modules/components/Node.js: add the require and the initialization of the new shape. Again, scan for Square.
• lib/network/options.js - add 'hexagon' to the options - scan for 'square', two places.

After that, the code is done. To build:

• gulp lint - to scan for errors
• gulp - to build
• npm test - to run all unit tests

And now is a good moment to test if it still works and your new shape works:

• run a node example, e.g. examples/nodes/basicUsage.html
• change one of the node shapes to hexagon, e.g.:

    {id: 1, label: 'Node 1', shape:'hexagon'},

...and refresh.

If it all works, congrats, you are an open source developer!
.....well you're not done yet; you still have to submit a PR. If you haven't done that before, I'll guide you through it.

---

Edit: And also, the documentation will need updating. I know, a lot of work in total. And this is a simple change.

[rg2609]

I did all the changes, but it's not working still shows an ellipse shape

[wimrijnders]

OK, great that you went so far. I'll need a bit more than that to go on.

What errors are you getting?

Do you have the code changes available, so I can look into it? It would be ideal if you had a fork on github.

[rg2609]

Sorry for the delay, here is my code https://github.com/rg2609/vis

[wimrijnders]

OK. It looks like you made your changes in the master-branch. You need to make them in the develop-branch. You'll probably also need to do some preliminary installation. Check out the chapter Build in the README.md.

I sincerely hope you continue on this path!

[rg2609]

$ gulp lint
module.js:328
    throw err;
    ^

Error: Cannot find module 'gulp-concat'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/rgupta/github/vis/gulpfile.js:5:14)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)

gulp lint throws an error

[wimrijnders]

OK. Yes, that would be missing in the master-branch. Please move your code changes to the develop-branch. First thing you do there, is run npm install. After that, you can continue with the steps I mentioned above.

[rg2609]

I moved to the develop branch and also run npm install, but still, its giving an error

[wimrijnders]

OK, following you here. Did the following:

• got the develop branch
• > npm install
• > gulp lint

I see the following errors:

[08:12:14] Using gulpfile ~/projects/github/rg2609/vis/gulpfile.js
[08:12:14] Starting 'lint'...
[08:12:17] 
/home/wim/projects/github/rg2609/vis/lib/network/modules/components/nodes/shapes/Hexagon.js
   5:1   error  Missing JSDoc comment  require-jsdoc
   6:14  error  Missing JSDoc comment  require-jsdoc
  10:7   error  Missing JSDoc comment  require-jsdoc
  14:19  error  Missing JSDoc comment  require-jsdoc

✖ 4 problems (4 errors, 0 warnings)

[08:12:17] 'lint' errored after 3.38 s
[08:12:17] ESLintError in plugin 'gulp-eslint'
Message:
    Failed with 4 errors

Is this the same that you get?

This means that you'll need to add some commenting to your added classes and methods. It's not a code error. You can skip this for now.

Now, try compiling a vis.js with your additions:

> gulp

On my machine, it builds perfectly. If that's the same for you, try out the examples as I described above:

• run a node example, e.g. examples/nodes/basicUsage.html
• change one of the node shapes to hexagon, e.g.:

    {id: 1, label: 'Node 1', shape:'hexagon'},

...and refresh.

[wimrijnders]

This is turning out to be a development tutorial for vis.js, which is useful in its own right. I might just convert this to documentation.

[rg2609]

I have a problem in gulp, btw I found the errors and update Shape.js file can you pls do gulp for me

[wimrijnders]

I can only do gulp locally, is that what you mean?
You'll have to update the develop-branch on github for me to do that.

[rg2609]

can I create pull request to merge in your develop branch?

[wimrijnders]

Not necessary, I've cloned your repo. Just update there and tell me when you're done.

Edit: Maybe I misunderstood. If you're done, of course you can create a pull request on main repo.

[rg2609]

done with the logic of drawing hexagon, you can now do the gulp on develop branch

[wimrijnders]

OK. Gulp working. This is what happens when the hexagon is dragged:

[rg2609]

updated the code, take the latest one. I did the same changes in vis.js file and got this

I updated the logic of drawing the shape in Shape.js.

CanvasRenderingContext2D.prototype.hexagon = function (x, y, r) {
    this.beginPath();
    var sides = 6
    var a = (Math.PI*2)/sides;
    **this.moveTo(x+r,y);**
    for (var i = 1; i < sides; i++) {
      this.lineTo(r*Math.cos(a*i),r*Math.sin(a*i));
    }
      this.closePath();
  };

[wimrijnders]

Almost there!

...
     this.lineTo(x + r*Math.cos(a*i), y + r*Math.sin(a*i));  // note x,y
...

[rg2609]

oops sorry, thank you for your review, updated that one

[wimrijnders]

🎉 🎉 🎉 Working! 🎉 🎉 🎉

---

---

OK, now if you fix the linting errors, you can make the PR.

...I know it sounds strange to say about a person I've only met online for a day, but I'm bloody proud of you. You persevered and made it work.

I hereby endorse rg2609 as an open-source developer!

Eagerly awaiting PR.

[rg2609]

Thank you, will I create PR to marge in the develop branch or master branch of vis repo

[wimrijnders]

👍 Merge to develop, please!

[wimrijnders]

No, don't close it now. It will be closed when the PR is added to the Release build.

[rg2609]

👍 okay.....

[mbroad]

Fixed awaiting release of #3420