How to use Fabric.js to do Visio like drawings with connections?

Question

I've recently started to use Fabric.js for a project and it's great. It provides an abstraction layer for the canvas, and has an entire 'object manipulation layer/mask' that accompanies each object.

I'd like to take it a step further and leverage it to make actual diagrams, with connections between objects, as well as have more 'metadata' that accompanies each object. Has anyone already done this already? Is Fabric.js the right choice for this?

Any thoughts on how I would approach creating 'connector' objects between two objects that respond to events from the objects they're attached to?

Answer 1

It's possible in fabricjs - in fact I've made something similar, but much simpler.

In my project I needed to implement an editable line, but not a Fabric built-in line, which is editable by a bounding box, but the line that will allow you to drag one of its ends, like in every vector drawing application.

It seems to be impossible with just one object, so I ended up creating three objects - one line and two small circles at the ends. Then I set up the references from line to circles and from circles to line - this way I can find all objects attached to the object I'm currently moving.

Now, during every object move I check if the object have any references to attached line/circle and if it has - I need to run special line-moving code that will update all attached objects.

Demo:

You can find simple tech-demo here: www.drawee.kolenda.me/techdemo.

Just click "Line", drag your mouse in a frame, click "Edit" - and you can see line dragging at work. You can drag the line itself, or one of its ends.

-

In your specific situation you'll probably want to disable selection or dragging of your connections, you may also want to update connection shape, so it's some kind of a dynamic curve, instead of a straight line, but I think that the core functionality will be the same.

Metadata:

If you want to add some additional data it can't be simpler - every JS object is a dictionary, that stores key-value pairs, so you just need to add another key-value pair to the object. Just keep in mind that JS and Fabric uses some key names internally, so keep your key names different than what you already have. My custom key names in this demo were "line", "circle1" and "circle2" - you may find them in the source code.

Answer 2

Yes it is possible in fabric js. I just tried out a sample with boxes joined by connectors. please check it here. http://kpomservices.com/HTML5CanvasCampaign/visual.html

Simple demo to create shape with connectors. connectors can be easily created using the shape positions and when the shape is moved, in the event handler we need to update the position of the connectors also.

Complete demo is here. http://kpomservices.com/HTML5CanvasCampaign/campaign.html Here connectors also can be moved(drag / dropped) with other boxes.