CODEWITHSUNDEEP
javascriptfabricjs
Timo Kähkönen
Timo Kähkönen

Reputation: 12210

Disable group selection in Fabric.js

How to disable group selection in Fabric.js and leave single objects selectable one at a time? With group selection I mean selecting multiple objects using eg. SHIFT+Click.

Upvotes: 24

Views: 17749

Answers (3)

londonfed
londonfed

Reputation: 1230

@CQ Smooth's answer was close to my requirements, thanks. But I needed the event to be fired when you select one object first, then add another via shift+click:

  canvas.on({
      'selection:updated': e => {
        const activeSelection = e.target
        if (activeSelection) {
           canvas.discardActiveObject();
        }
      }
  })

You can see the solution working at: https://app.collagemaker.uk/create

Upvotes: 1

CQ Smooth
CQ Smooth

Reputation: 266

Disable group selection via selection listener canvas method (in my opinion the best way)

canvas.on('selection:created', (e) => {
  if(e.target.type === 'activeSelection') {
    canvas.discardActiveObject();
  } else {
    //do nothing
  }
})

Upvotes: 9

Dakshika
Dakshika

Reputation: 1734

you can easily achieve this with

  canvas.selection = false; // disable group selection

if you want it on individual object 

  rect.set('selectable', false); // make object unselectable

Upvotes: 46

Related Questions