fabricjs-selected-and-deselected-event-bugs

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
    <canvas
      id="c"
      style="border:1px solid #000000;"
      width="998px"
      height="753px"
    ></canvas>

JavaScript

const canvas = new fabric.Canvas('c');

fabric.Object.prototype.set({
  transparentCorners: false,
  cornerStrokeColor: '#ffffff',
  cornerColor: 'rgba(153,177,255,0.75)',
  cornerStyle: 'circle',
  cornerSize: 18,
  noScaleCache: false,
  lockSkewingX: true,
  lockSkewingY: true,
  originX: "center",
  originY: "center",
  perPixelTargetFind: false,
  strokeUniform: true,
  activeOn: 'up'
});

fabric.Canvas.prototype.set({
  preserveObjectStacking: true,
  backgroundColor: '#ffffff',
  //uniScaleTransform: false,//removed in 4.0
  uniformScaling: true,
  controlsAboveOverlay:true,
  stopContextMenu: false,
  fireRightClick: true,
  allowTouchScrolling: true,
  targetFindTolerance: 10
  //centeredKey: null
});

var object = new fabric.Rect({ fill: '#333333', width: 100, height: 100, top: 0, 
left: 0, 
noScaleCache: false,
strokeWidth: 0});

var gradient = new fabric.Gradient({
            coords: {
              x1: 0,
              y1: 0,
              x2: 1,
              y2: 0
            },
            gradientUnits: 'percentage',
            colorStops: [{
              offset: '0',
              color: 'red',
            }, {
              offset: '1',
              color: '#000'
            }]
          });
object.set('fill',gradient);

canvas.add(object);

object.on('deselected', function (event) {
	console.log('deselected', { event: event.target, eventJSON: JSON.parse(JSON.stringify(event)) });
});

object.on('selected', function (event) {
	console.log('selected', { event: event, eventJSON: JSON.parse(JSON.stringify(event)) });
});