I can't figure out the bug I have in my code. So this fabric is drawing a line. Then when I double click the line, I want control red "control points" to appear on each end of the line so I can then click and resize the line if I want (that code is not included yet).

Here is the code.

I'm getting this error. It takes place on line 101 in the function updateNewLineCoordinates where it says: if(obj.id==='added-line') {

Uncaught TypeError: Cannot read properties of undefined (reading 'id') at i.updateNewLineCoordinates

    let canvas = new fabric.Canvas("canvas", {
    width: window.innerWidth, 
    height: window.innerHeight
});
    
let addingLineBtn = document.getElementById('adding-line-btn'); 
let addingLineBtnClicked = false;

addingLineBtn.addEventListener('click', activateAddingLine); 

function activateAddingLine() {
    if(addingLineBtnClicked===false) { 
        addingLineBtnClicked = true;
        canvas.on('mouse:down', startAddingLine); 
        canvas.on('mouse:move', startDrawingLine);
        canvas.on('mouse:up', stopDrawingLine);

        canvas.selection = false;  
        canvas.hoverCursor = 'auto';  
    
        objectSelectability('added-line', false);
    }    
}

let line; 
let mouseDown = false; 

function startAddingLine(o) {
    mouseDown = true;
    let pointer = canvas.getPointer(o.e);
    
    line = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
            id: 'added-line',
            stroke: 'black',
            strokeWidth: 3,
            selectable: false   
        });  
        
        canvas.add(line); 
        canvas.requestRenderAll(); 
}

function startDrawingLine(o) {
    if(mouseDown===true) {
        let pointer = canvas.getPointer(o.e); 

        line.set({
            x2: pointer.x,
            y2: pointer.y
        });

        canvas.requestRenderAll(); 
    }
}

function stopDrawingLine() {
    line.setCoords();  
    mouseDown = false; 
}

let deactivateAddingShapeBtn = document.getElementById('deactivate-adding-shape-btn');

deactivateAddingShapeBtn.addEventListener('click', deactivateAddingShape)

function deactivateAddingShape(){
    canvas.off('mouse:down', startAddingLine); 
    canvas.off('mouse:move', startDrawingLine);
    canvas.off('mouse:up', stopDrawingLine);

    objectSelectability('added-line', true);

    canvas.hoverCursor = 'all-scroll';  
    addingLineBtnClicked = false;  
}

function objectSelectability(id,value) {
    canvas.getObjects().forEach(o => {  
        if(o.id===id) {                 
            o.set({                     
            })
        }
    });
}

canvas.on({  // this is so that when you move the line, the dblclick circles on the ends move with it.
    'object:moved': updateNewLineCoordinates,
    'selection:created': updateNewLineCoordinates,
    'selection:updated': updateNewLineCoordinates,
    'mouse:dblclick': addingControlPoints
});

let newLineCoords = {};

function updateNewLineCoordinates(o) {  
    newLineCoords = {};
    
    let obj = o.target;

    if(obj.id==='added-line') {
        let centerX = obj.getCenterPoint().x; 
        let centerY = obj.getCenterPoint().y; 

        let x1offset = obj.calcLinePoints().x1;  
        let y1offset = obj.calcLinePoints().y1;
        let x2offset = obj.calcLinePoints().x2;
        let y2offset = obj.calcLinePoints().y2;

        newLineCoords = {  
            x1: centerX+x1offset,
            y1: centerY+y1offset,
            x2: centerX+x2offset,
            y2: centerY+y2offset
        }
    }
}

function addingControlPoints(o) {
    let obj = o.target;

    if(!obj) {  
        return;
    }
    else {
        if(obj.id==='added-line') {  
            let pointer1 = new fabric.Circle({  
                radius: obj.strokeWidth*3,
                fill: 'red', 
                opacity: 0.5,
                top: newLineCoords.y1,
                left: newLineCoords.x1,
                originX: 'center',  
                originY: 'center'
            });
        
            let pointer2 = new fabric.Circle({  
                radius: obj.strokeWidth*3,
                fill: 'red', 
                opacity: 0.5,
                top: obj.y2,
                left: obj.x2,
                originX: 'center',  
                originY: 'center'
            });
        
            canvas.add(pointer1,pointer2);
            canvas.requestRenderAll();
        }
    }
}