Set OriginX and OriginY makes object Unselectable

[samael205]

Version

2.0

Test Case

https://jsfiddle.net/samael205/j6w7jkgz/

Steps to reproduce

Clic on the square of checkboxes to change the rotation Origin

Expected Behavior

The rotation Origin changes, and we can manipulate he object correctly

Actual Behavior

The object cant be manipulated when we change the rotation Origin

[samael205]

I am a bit Confused about this
I had a functionality in which I changed the "rotation point" to the scaling handles

[jilster]

Changing the origin of an object impacts it's position. Because of that it seems like the object is unselectable, but in reality it is selectable, but you got to click on another position then expected. To fix this, you can:

• Get the original position of the object
• Change the origin
• Fix the position

Also, i saw that you misspelled 'right' and 'bottom' in a few places, that's breaking as well

Example:

$("#checkboxOneInput").on('change', function(){
  if(canvas.getActiveObject()){
    var obj = canvas.getActiveObject();
    var point = obj.getPointByOrigin(obj.originX, objoriginY);
    obj.set('originX', 'left');
    obj.set('originY', 'top');
    obj.setPositionByOrigin(point, obj.originX, obj.originY);
    obj.setCoords();
    canvas.renderAll();
  }
});

[samael205]

I reopen the issue, At Andrea's request

[asturur]

so the rotation could change, if centeredRotation would be set to false.
But the unselectability, after a setCoord, is a bug.

[jilster]

My changes made it work though, so does this mean it's only a bug if the position isn't changed before setCoords() ?

[asturur]

Well you change position top and left, and call setCoords.
The bug is that without changing top and left, calling setCoords should fix selectability.
The problem probably comes from my calcTransformMatrix memoization, that does not take in account originX and originY

[asturur]

transformMatrixKey: function(skipGroup) {
      var sep = '_', prefix = '';
      if (!skipGroup && this.group) {
        prefix = this.group.transformMatrixKey(skipGroup) + sep;
      };
      return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY +
        sep + this.skewX + sep + this.skewY + sep + this.angle +
        sep + this.width + sep + this.height + sep + this.strokeWidth + this.flipX + this.flipY;
    },

in this key i use for caching, originX and originY are missing.

[samael205]

Thanks @asturur, your fix works fine!