Fabric.js: What happened to deactivateAll()?

Created on 17 Aug 2017  路  8Comments  路  Source: fabricjs/fabric.js


Regarding version 2.0.0b4

In fabric 1.x, there was a canvas.deactivateAll function, which I used to deselect an active selection. In fabric 2.x, this function no longer exists.
How do I now deselect the current selection?

Use case: I am drawing circles on a fabric-canvas. The last drawn circle has selection.
I have a "Save as PNG" button. When clicked, the canvas should be saved without handles around objects.

docs

Most helpful comment

Hello! The current docs for migration changes are not ready yet.
Please use latest beta or latest master ( beta 6 ).
Those are sort of personal notes more than documentation, they will become docs as soon as possible.

Changes in groups

Group was the second container for fabric, born for multi seleciton, transformed later to be a steady thing.
So Group had inside the code a lot of switches based on object.active and checking if the group was referenced as an activeGroup, to decide if it should render children's controls or not.

I decided to make the group a static container that make just the group, it does not render any controls for children, it does not need to modify controls of children. A simple container for objects.

Creation of ActiveSelection

I subclassed Group to create a group that behaves just as a multi selection, this uses the override ability of renderControls to render controls has it needs without need to change them directly on objects

There are 2 new official methods to switch from a group and activeSelection, a sort of built in group/ungroup that maybe we cannot use. But who knows.

The group auto discard itself when it gets deselected, or when you call .discardActiveObject

Changed way to handle selection

those methods are gone:

canvas.getActiveGroup();
canvas.deactivateAll();
canvas.deactivateWithDispatch();
canvas.discardActiveGroup();
canvas.setActiveGroup();

Now there is just:

canvas.getActiveObject();
canvas.setActiveObject();
canvas.discardActiveObject();
canvas.getActiveObjects(); // return an array of selected objects.

Canvas manages internally the multi selection state using either getActiveObjects or checking if the active object type is activeSelection

I made this to have a cleaner api, after years people are still confused by the fabric.Group and setActiveGroup. Having to check 2 things to know if there is an ongoing selection was bad.

object.active is gone

The more i checked the code and the more it looked to me that .active was a way to flag an object to know if they were in a kind of selection. There was nothing that was keeping active alive if not the action setActiveGroup and setActiveObject. Devs ( including me ) started to set .active as true to achieve some controls rendering that was not at all features and that was bound to change.

.active was of unclear purpose and was used in an hackish way to obtain many things.

If you need to render controls for an object you call object.renderControls.

All 8 comments

I think I found it: canvas.discardActiveObject()
Is this indeed what replaces canvas.deactivateAll?

Hello! The current docs for migration changes are not ready yet.
Please use latest beta or latest master ( beta 6 ).
Those are sort of personal notes more than documentation, they will become docs as soon as possible.

Changes in groups

Group was the second container for fabric, born for multi seleciton, transformed later to be a steady thing.
So Group had inside the code a lot of switches based on object.active and checking if the group was referenced as an activeGroup, to decide if it should render children's controls or not.

I decided to make the group a static container that make just the group, it does not render any controls for children, it does not need to modify controls of children. A simple container for objects.

Creation of ActiveSelection

I subclassed Group to create a group that behaves just as a multi selection, this uses the override ability of renderControls to render controls has it needs without need to change them directly on objects

There are 2 new official methods to switch from a group and activeSelection, a sort of built in group/ungroup that maybe we cannot use. But who knows.

The group auto discard itself when it gets deselected, or when you call .discardActiveObject

Changed way to handle selection

those methods are gone:

canvas.getActiveGroup();
canvas.deactivateAll();
canvas.deactivateWithDispatch();
canvas.discardActiveGroup();
canvas.setActiveGroup();

Now there is just:

canvas.getActiveObject();
canvas.setActiveObject();
canvas.discardActiveObject();
canvas.getActiveObjects(); // return an array of selected objects.

Canvas manages internally the multi selection state using either getActiveObjects or checking if the active object type is activeSelection

I made this to have a cleaner api, after years people are still confused by the fabric.Group and setActiveGroup. Having to check 2 things to know if there is an ongoing selection was bad.

object.active is gone

The more i checked the code and the more it looked to me that .active was a way to flag an object to know if they were in a kind of selection. There was nothing that was keeping active alive if not the action setActiveGroup and setActiveObject. Devs ( including me ) started to set .active as true to achieve some controls rendering that was not at all features and that was bound to change.

.active was of unclear purpose and was used in an hackish way to obtain many things.

If you need to render controls for an object you call object.renderControls.

There are more news regarding selections that will help having more interaction with the selection process. i ll try to be as clear as possible.

@asturur Obviously this is just my opinion, and I hope you don't read any negativity into it, but given how different the "beta" version is from the docs, and how it seems like the API isn't really stable yet, should this really be called a beta? Seems like you're more in the alpha mode.

The removal of all of the functions above, not to mention changes to other functions, has made it really difficult, as someone just starting to use this library, to implement features that seem pretty straight-forward in the demos or the various fiddles that one finds when searching for examples of features. If you have any kind of write-ups (notes, examples, etc.) available, even if they're incomplete, maybe you could push them to the wiki?

I've offered, on another issue, to work on building out the new fabricjs site - it seems like working out new examples for 2.x would be a useful part of that, since it might help drive what needs to be updated first.

Sure.
I do not read negativity at all.
I perfectly know that last 3 months have been hard for who approaches fabricjs first time.

The point is that 1.7.17 is fine, it works, it is documented enough around the internet.

2.0 adds much goodies, webgl, better text, and requestAnimation frame, and the occasion to make some order in the api that in my opinion, was not clear.

If i do not start to put it out in some way i will never find the time. Putting a changing version of fabricJS on the website accelerate the process by a notch.

The other point is that i m mainly alone. I have coworkers that helps me out finding unclear/unfriendly sides of fabricjs but at the end of the game i m alone writing, tests, code, docs, getting ideas to get it more performant.

Is hard.

Even reading all the issues, finding out what is a non sense help request, and answering to stack overflow takes time.
Is 7AM i already did 3 stack overflow questions, and last post here was from me at 11.30PM

If you want to write better examples on the website please do!

there is fabricjs.com repository to clone and start up with which i can help you with, then is about gh-pages but is very simple to master.

And we are lucky that last year i found a fabricjs related job, so i spend hours on it and i understand better problems and rough edges, otherwise the project would be stuck in 2015.

@av01d by the way, with or without the missing function, the dataurl functions should not produce controls over them.

Did you get controls over objects? that should not happen.

http://fabricjs.com/v2-breaking-changes-2

Started this, tomorrow i hope to add more example of what happen when you use more complicated selection scenarios. I also plan on finding out eventual wrong selection flows and make them less wrong.

@ncou
@blobinabottle
@miyasudokoro

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AbhijitParate picture AbhijitParate  路  3Comments

bhaskardas9475 picture bhaskardas9475  路  4Comments

semiadam picture semiadam  路  3Comments

eddieyangtx picture eddieyangtx  路  5Comments

eugene-g13 picture eugene-g13  路  3Comments