Transhand is a React based 2d transformation tool. It's aiming to have all the features that you would expect from a transform handler in a modern graphic editor.

Demos

nested, custom, iframe(wip)

Developed as part of the Animachine project.

Install

npm install --save transhand

Current features

• translate, rotate, scale, move transform origin
• shift + guided scale/move/rotate
• alt + scale from the opposite side

Basic usage

import { Transhand } from 'transhand'

//the current transformation
var transform = {
  tx: 0, ty: 0,     //translate in px
  sx: 1, sy: 1,     //scale
  rz: 0,            //rotation in radian
  ox: 0.5, oy: 0.5, //transform origin
}
//the bounding box without transformations
var rect = {x: 10, y: 10, w: 100, h: 100}
var onChange = (change) => {
  //change object contains only the changed properties
  //ex. change = {tx: -12, sx: 1.12}
}

<Transhand
  transform = {transform}
  rect = {rect}
  onChange = {onChange}/>

Basic usage with CSS Transform

import { CSSTranshand } from 'transhand'

<CSSTranshand
  transform = {transform}
  deTarget = {transformedDOMElement}
  onChange = {onChange}/>

CSSTranshand is a wrapper for Transhand. It use the provided DOM Element to calculate the rect and handle if the parent elements are onalso transformed and when deTarget is inside an iframe.

API

Transhand

• transform: see above
• rect: see above
• stroke = {strokeWidth: '1', stroke: 'lime'}: A set of svg attributes to customize drawed svg.

events:

• onChange(change): see above
• onClick(mouseEvent): Called on the user just clicks on the handler and not changing it. Useful for selecting items behind the handler.
• onStartDrag: Called on the user grab the handler.
• onEndDrag: Called on the user release the handler.

advanced customization:

• rotateFingerDist = 16: The width of the rotate hit area.
• originRadius = 6: The radius of the transform origin hit area.
• coordinator = new DefaultCoordinator(): Use this to change the way as Transhand convert global coordinates into its local coordinate system (ex. mouse positions) and back (ex. render to screen). Coordinator is an object with two functions globalToLocal(point):point and localToGlobal(point):point. If you need more detail check out the source.
• grabEvent: If this parameter is presented Transhand will simulate the mouse down event with it. It's useful when you want to drag the target immediately after selecting it with mouse down. See it in use in the demo sources.
• hints = default: Map of tooltips for the different transformation types.
• cursors = new Cursors(): Map of cursors for the different transformation types.
• DesignComponent = TranshandDesign: You can replace the basic Component that Transhand renders to fully customize its appearance.
• CursorHintDesignComponent = CursorHintDesign: You can replace the basic Component that CursorHint renders to fully customize its appearance.
• transformTypes = ['translate', 'rotate', 'scale', 'origin']: List of the allowed transform functions.

CSSTranshand

Inherits all the properties of transhand but replaces coordinator and rect with an extra property called deTarget. see above

Although it's already usable, most of the features are still in progress. If you find something that is may not working as expected or you miss something do not hesitate to open an issue!