Group selection Resize and Rotate not working when canvas has perPixelTargetFind true

[mpecenin]

Version

4.2.0

• fails from 4.0.0
• works until 4.0.0-rc.1

Test Case

http://jsfiddle.net/s0tn3e15/

Information about environment

• Chrome Browser - Ubuntu Linux
• Firefox Browser - Ubuntu Linux

Steps to reproduce

• create a fabric.Canvas with perPixelTargetFind=true
• create and select multiple objects on the canvas
• try to resize or rotate the selection

Expected Behavior

• allow resize and rotate the group selection
  

Actual Behavior

• does not recognize mouse pointer at resize and rotation points of the group
• works only when in the upper left corner of the canvas
  

[asturur]

does it work with normal objects?

[mpecenin]

Yes, it works fine with a single object.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[phil-r]

That's still an issue, I don't think it should be closed

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mpecenin]

Unfortunately still a problem on linux environment.

[asturur]

I do not have any linux machine to test it out.
@phil-r does this happen on every OS?

[asturur]

No the problem is clearly on macOS too.

[phil-r]

Tested on windows - seems to be fine, but on Mac OS there is an issue.

[marshall76963]

I think I have seen similar behaviour on windows using 4.2 but with ActiveSelection.

The grab handles are only available where the selection intersects with an object within the group (hence why in the original example. top-left works).

After some experimentation, the issue is that ActiveSelection is transparent and, with per-pixel target set, this causes the area inside the selection (including the corners) to be ignored.

This check is performed in the _checkTarget(pointer, obj, globalPointer) function in fabric.Canvas

My workaround is to remove the per-pixel target find check by overriding the default implementation as follows:

fabric.Canvas.prototype._checkTarget = (function (_checkTarget) {
    return function (pointer, obj, _globalPointer) {
        return obj && obj.visible && obj.evented && (obj.containsPoint(pointer) || !!obj._findTargetCorner(pointer));
    };
})(fabric.Canvas.prototype._checkTarget);

This makes the entire area of an ActiveSelection selectable and all control points accessible.

Hope this helps someone!

[linrz]

I debug this problem for a long time, your patch helped me, thanks very much! @marshall76963

[marshall76963]

Glad it helped you @linrz

I just came up with an alternative solution that might be slightly better. The issue with overriding the _checkTarget(pointer, obj, globalPointer) function in fabric.Canvas is it changes the select behaviour of the whole object, not just the selection points.

If you just want to make the selection points available to ActiveSelections, then try this:

fabric.Canvas.prototype.findTarget = (function (findTarget) {
    return function (e, skipGroup) {
        var result = findTarget.apply(this, [e, skipGroup]);
        if (!(result && (skipGroup || this.skipTargetFind))) {
            var obj = this._activeObject;
            if (obj && obj.type === "activeSelection" && obj._findTargetCorner(this.getPointer(e, true), fabric.util.isTouchEvent(e))) {
                result = obj;
            }
        }
        return result
    };
})(fabric.Canvas.prototype.findTarget);

Cheers

[mpecenin]

It works again from Fabric-4.4.0 and up

[asturur]

i think this was fixed from this:
#6798
in version 4.3.1
Sorry i missed this there are so many open issues i can't discern easily which are help request and which are actual bugs

[mpecenin]

Ok thanks, but I checked it again, only from version 4.4.0 it works on my Linux. Version 4.3.1 (cdnjs.com) does not work on Linux, but it works normally on Windows.

[asturur]

not sure why the os should make a difference. The code change between 4.3.1 and 4.4.0 was effectively fixing a generic bug.

[mpecenin]

Yeah, i agree, it sounds weird, i haven't figured out why this only happens with Chrome on Linux.

But i checked that version 4.4.0 has this fix #6798, not 4.3.1, and looking the files changed, it has this commit 537eeb5 to canvas.class.js. Testing with the previous commit ee17127 i got the problem again.

So it looks fixed with #6798 as you mentioned earlier, but it looks like it was released with v4.4.0

[guidolx]

Hi,
This still seems not to be working in Fabric 5.2.4. I can't resize or rotate groups , no matter if the value of perPixelTargetFind is true or false. I am on a Mac and using Firefox, same results in Safari.

This is my code to create a fabric.Group

export class GraphNode extends fabric.Group{
node: Node;

constructor(left: number, top: number, node:Node){
    super([],{
        left:left,
        top:top,
        originX:'center',
        originY:'center',
        data:node
    });
    this.node = node;
    this.init();
    this._calcBounds(true);
}

}

I