const listener = (event) => {
  /*
    event.target: HTMLElement: Interactable object
    event.currentTarget: HTMLElement: : Interactable object
    event.interaction: String: Current action: ['move', 'resize', 'rotate', null]
    event.edges: Object: Edges being moved on resize: {
      top: Boolean
      left: Boolean
      right: Boolean
      bottom: Boolean
    }
    event.rect: Object: Selection position on move: {
      top: Number
      left: Number
    }, Selection box on resize: {
      top: Number
      left: Number
      width: Number
      height: Number
    }
    event.rotate: Number: Rotation degree on rotate
    event.rotated: Boolean
  */
};

// interactable can be eaither a selector or a HTMLElement
Interaction.create(interactable, {
  // Enable resizing for the interactable. Default: false
  isResizable: true,
  // Enable dragging for the interactable. Default: false
  isDraggable: true,
  // Enable rotation for the interactable. Default: false
  isRotatable: true,
  // The rotation pivot. Default: [0, 0] (top, left)
  pivot: [0.5, 0.5],
  // The angle of rotation. Default: 5 (in degrees)
  rotationAngle: 15
})
// Event fired when the selection zone appears
.on('select', listener)
// Event fired when the selection zone dissapears
.on('unselect', listener)
// Event fired when a pointing device button is pressed on the interactable
.on('down', listener)
// Event fired when a pointing device button is released over the interactable
.on('up', listener)
// Event fired when the interactable is being moved
.on('move', listener)
// Event fired when the interactable is being resized
.on('resize', listener)
// Event fired when the interactable is being rotated
.on('rotate', listener);