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.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
