isTargetTransparent fails on the control borders for objects

[jhundley9109]

See this fiddle I created here:

http://jsfiddle.net/jhundley9109/co6ncoyo/

You can see the green circle on the left has 12 pixels that fail the isTargetTransparent test. However, the yellow circle on the right has a 100% isTransparent pass rate on the right. This is due to the controls being on for the circle on the left. It looks like when fabric runs this test and draws the object in the contextCache it is not turning off the controls but it is turning off the borders and corners.

I simply fixed this by also turning off the controls too and the test passed (as I expected at least)

Here is my modified code:

isTargetTransparent: function (target, x, y) {
  var hasBorders = target.hasBorders,
      transparentCorners = target.transparentCorners,
      hasControls = target.hasControls;

  target.hasBorders = target.transparentCorners = target.hasControls = false;

  this._draw(this.contextCache, target);

  target.hasBorders = hasBorders;
  target.transparentCorners = transparentCorners;
  target.hasControls = hasControls;

  var isTransparent = fabric.util.isTransparent(
    this.contextCache, x, y, this.targetFindTolerance);

  this.clearContext(this.contextCache);

  return isTransparent;
},

Let me know what you think!

[asturur]

if you turn off controls, it will not be possible to select controls with the "perPixelFind" true.
Am i wrong?
Can you resize the object by corner if you do per pixelTargetFind?

[jhundley9109]

This modified code will only turn the corners off while testing the isTargetTransparent. I don't think this code will affect re-sizing the objects since it only turns it off on the object being drawn on to the contextCache. Did I misunderstand your question?

[asturur]

canvas.isTargetTransparent is a part of the perPixelTargetFind procedure.

If you check the code target.transparentCorners is set to false on porpouse.

Example:
First fabricjs check if target contains point. This contain point take in consideration bounding box and corners. Then if perPixelTargetFind is true, it validates with transparency.
If in that moment corners are transparent it cannot validate them and the target is false.

At least this is the idea i get from the code.

Other solution is that this.transparentCorners = false is wrong and must be changed with target.hasControls = false as you say.

[jhundley9109]

Ah I understand now. Just testing it with my fiddle provided, I added perPixelTargetFind: true to the green circle on the left. It appears just by that test the corner resize is still working as expected. However, I do not know if this could have negative implications in other uses. Logically it seems more correct to not check the corners of an object when testing if it is transparent. For me that is the desired behavior. Is this fabricjs desired behavior though?

I can do a work around where I put 'hasControls' as false on the object before I test it for transparency and then reset hasControls to true after running my test.

[asturur]

The problem is that actually the code is:

if (obj &&
obj.visible &&
obj.evented &&
this.containsPoint(e, obj)){
if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) {
var isTransparent = this.isTargetTransparent(obj, pointer.x, pointer.y);
if (!isTransparent) {
return true;
}
}
else {
return true;
}
}

so:
if we are in the bouding box or on a corner and we are checking for transparency, return true just if it is not transparent.

I would make a deep analysis before changing this behaviour.
Maybe this thing is corrected by other code somewhere else.

What mainly makes me doubt is that "this.transparentCorner = false" put there. It can't be a typo but it looks like intentional.

[jhundley9109]

You are much more qualified to solve this problem than I am!

Hopefully this will be updated in a not so distant future release.

Thanks for your help!

[asturur]

@kangax should remember

[asturur]

I finally understand this issue.
it happens just when hovering a non active object.
The mouse cursor changes on drag mode when hovering over the not visible control.
We should not make check the control during transparency check if the object is not active.