How to add custom Shape in Vis.Js ?

[ntsarv]

Please make sure to read the following list before creating a new issue:

I have follow all these step of below issue but there are nothing effective : https://github.com/almende/vis/issues/3418

Please find attachment and help us

vis.tar.gz

[wimrijnders]

The steps in #3418 have been proven and confirmed to work. What issues are you running into? I'll need more info to be able to give a relevant answer.

[ntsarv]

We have follow all below steps

Step 1: First i Have added code in below file there added "mydesign" custom code

vis/lib/network/shapes.js

  /**
   * Draw a mydesign shape
   * @param {Number} x horizontal center
   * @param {Number} y vertical center
   * @param {Number} r   size, width and height of the mydesign
   */
  CanvasRenderingContext2D.prototype.mydesign = function (x, y, r) {
    this.beginPath();
    this.rect(x - r, y - r, r * 2, r * 2);
    this.closePath();
  };

Step 2: We have created anthore file in below folder path:

File name : Mydesign.js

vis/lib/network/modules/components/nodes/shapes/Mydesign.js

Step 3: I have added file path variable and case condition in below file:

var Mydesign = require('./nodes/shapes/Mydesign').default;

And

case 'mydesign':
this.shape = new Mydesign(this.options, this.body, this.labelModule);
break;

File Path : vis/lib/network/modules/components/Node.js

Step 4:

We have added shape twice time in below path file :

/vis/lib/network/options.js

Step 5: Then, We have added Shape in below file path :

// create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1', shape:'mydesign'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

File Path : vis/examples/network/basicUsage.html

Please check and help us

[wimrijnders]

Urgh. That vis.tar.gz link you supplied, it's a 4MB download and my browser can't deal with it. Second attempt with wget is also hanging. What's in there that warrants such a download size?

Please think up an alternative method of showing the files. E.g. the separate files you changed would be helpful. Or a clone on github of the vis.js repo with your changes added is acceptable. But this is not.

[ntsarv]

I have made clone at github https://github.com/narendrasarv/vis_js

[wimrijnders]

Tested it, works perfectly fine. What's the problem?

Personal note: shape mydesign is a direct copy of square

[ntsarv]

Yes, it's working.....i was forget to do "gulp" so it was not worked.

Now it's working fine thank you so much :)

i need one more help that can we add anchor links and HTML tag with class or id in NODE because we want create a IVR flow from vis.js.....is it possible or not ?

[wimrijnders]

Just say to yourself 'TIL'.

No, links don't work in the node labels and HTML tag support is very limited. For an alternative which enables full HTML but is 'cheating', examine div overlays for nodes. See for example #3339, here's a demo.