Serialising fabricjs canvas with references to other objects - json

Question

Based on the explanation here
of how to use json with fabricjs I've written some code to serialise and deserialise my fabricjs canvas. But it doesn't work and I think the difficulty is that my lines have triangle properties. When deserialising a line, the relevant triangle may not yet exist, so I'm not surprised that they seem to be unrelated to the lines after this is done. How do I resolve this? Should I give each triangle a name so that I can find it after deserialisation and set it to be the appropriate triangle for the line? Or is subclassing the way forward? Thanks.
var line = new fabric.Line([0, 0, 0, 0], {
fill: '#444',
stroke: '#444',
strokeWidth: 2,
id: 'arrow',
name: 'arrow',
selectable: true, //if turn this off hovercursor doesn't work. So arrow is selectable. But setting hasBorders to false stops blue rectangle appearing around it so there's no problem.
lockMovementX: true,
lockMovementY: true,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
strokeDashArray:[10,5],
hasControls: true,
lockRotation: true,
hasBorders: false,
sourceObject: sourceObject,
targetObject: targetObject,
offset: offset,
cornerColor: 'rgba(255,0,0,1)',
stateProperties: ['triangle'],
});
/** [Create triangle attached to the end of the line */
line.triangle = new fabric.Triangle({
originX: 'left',
originY: 'top',
selectable: true,
hasBorders: true,
hasControls: true,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: false,
lockRotation: true,
pointType: 'arrow_start',
width: TRI_WIDTH,
height: TRI_HEIGHT,
fill: '#444',
selectable: false,
});
setxy(line, offset);
line.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
triangle: this.triangle
});
};
})(line.toObject);
canvas.add(line, line.triangle);