filter selection upon multiple selection in canvas with fabric js

Question

I am working on a project that has a table and chairs. I want the tables filtered out of the selection whenever I select multiple objects on the canvas

what I did was on select:created I filtered the selection and remove the event listener I tried adding it again. but it just went on an endless loop

also for some weird reason, it doesn't rotate when I try to rotate the selection

I also included a button for selecting all objects inside the canvas

Thanks in advance!

this are the event listiners

canvas.on({
        "selection:created": e => { createSelection(e) },
        "selection:cleared": e => { canvas.getObjects().filter(o=>{if(o.type=="table") o.selectable = true }) },
        "selection:updated": e => { updateSelection(e) }
    });

this are the function

function removeTableFromSelection(selection){
  let chairs = selection.getObjects().filter(function(o) {
    if (o.type != 'table' && o.type != 'line') {
      return true
    }
    o.selectable = false;
    maintainCenter(o)
    return false
  });
  return chairs
}
function createSelection(e){
    canvas.off("selection:created")
    console.trace('1')
    let selection = e.target;
    if (typeof selection.type !== 'undefined') {
        if( selection.type != "table")
        {
            if(selection.type == "chair"){
                if (typeof selection.extraProperty !== 'undefined') {
                    console.trace(selection.extraProperty);
                }
            }else{
                canvas.discardActiveObject()
                canvas.getObjects().filter(o => {
                    if (o.type == 'activeSelection' || o.type == 'ac') { canvas.remove(o);}
                    if (o.type == 'table') { o.selectable =false;}
                });
                var sel = new fabric.ActiveSelection(removeTableFromSelection(selection), {type:'ac'})
                    sel.setControlsVisibility({
                        tl: false,
                        mr: false,
                        ml: false,
                        mt: false,
                        mb: false,
                        bl: false,
                        br: false
                    })
                    canvas.remove(sel);
                canvas.setActiveObject(sel);
                canvas.renderAll();
            }
        }else{
            maintainCenter(e)
        }
    }
}
function updateSelection(e){
    console.trace('2')
    let selection = e.target;
    if (typeof selection.type !== 'undefined') {
        if( selection.type != "table")
        {
            if(selection.type == "chair"){
                if (typeof selection.extraProperty !== 'undefined') {
                    console.trace(selection.extraProperty);
                }
            }else{
                canvas.discardActiveObject();
                var sel = new fabric.ActiveSelection(removeTableFromSelection(selection), {type:'ac',centeredRotation: true})
                    sel.setControlsVisibility({
                        tl: false,
                        mr: false,
                        ml: false,
                        mt: false,
                        mb: false,
                        bl: false,
                        br: false
                    })
                    canvas.remove(sel);
                canvas.setActiveObject(sel);
                canvas.renderAll();
            }
        }else{
            maintainCenter(e)
        }
    }

}

Heres the fiddle

Answer 1

Fixed it Changed the function event binding from selection:created to mouse:up and it worked like expected

here is the updated fiddle

canvas.on({
        "selection:created": e => { createSelection(e) },
        "selection:cleared": e => { canvas.getObjects().filter(o=>{if(o.type=="table") o.selectable = true }) },
        "selection:updated": e => { updateSelection(e) }
    });

to

  canvas.on({
        "mouse:up": e => { createSelection(e) },
        "selection:cleared": e => { canvas.getObjects().filter(o=>{if(o.type=="table") o.selectable = true }) },
        "selection:updated": e => { updateSelection(e) }
    });