@photobox/interact

Interact

Add interactions to elements: drag, resize, rotate.

Build status

Demo

To run the demo, just do yarn build and open /demo/dist/demo.html in your browser.

How to use

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);

Test

Just run yarn test.

You may want to use the demo app just to be sure everything's still OK :)

Publish

Use yarn version:[patch|minor|major] to update version. A commit is created with version bump in package.json. A tag is created too. If pushed to git, circleci will deploy a new version on npm.js from that tag.

❯ yarn version:patch
yarn run v1.7.0
$ yarn version --patch
info Current version: 0.0.24
info New version: 0.0.25
✨  Done in 3.79s.

❯ git push origin v0.0.25