Free Transform Tool Utility

A set of functions to calculate boundries element resizing, translating, rotating and styles object extraction

Installation

npm install free-transform

Usage

Scale

scale types (Handles)

tl Top Left Handle

ml Middle Left Handle

tr Top Right Handle

tm Top Middle Handle

bl Bottom Left Handle

bm Bottom Middle Handle

br Bottom Right Handle

mr Middle Right Handle

import{scale}from'free-transform'letelement={x:0,y:0,scaleX:1,scaleY:1,width:100,height:100,angle:0,scaleLimit:0.1,}constonScaleHandleMouseDown=(event)=>{event.stopPropagation();event.preventDefault();constdrag=scale('tl',{startX: event.pageX,startY: event.pageY,scaleFromCenter: event.altKey,aspectRatio: event.shiftKey,
...element,},(payload)=>{// {x, y, scaleX, scaleY}// draggingelement={ ...element, ...payload}});constup=()=>{document.removeEventListener('mousemove',drag);document.removeEventListener('mouseup',up);};document.addEventListener("mousemove",drag)document.addEventListener("mouseup",up)}

Rotation

import{rotate}from'free-transform'letelement={x:0,y:0,scaleX:1,scaleY:1,width:100,height:100,angle:0,scaleLimit:0.1,}constonRotateHandleMouseDown=(event)=>{event.stopPropagation();event.preventDefault();constdrag=rotate({startX: event.pageX,startY: event.pageY,offsetX: 0,// the offset x of parent (parent.offsetLeft)offsetY: 0,// the offset y of parent (parent.offsetTop)
...element,},(payload)=>{// {angle}// draggingelement={ ...element, ...payload}});constup=()=>{document.removeEventListener('mousemove',drag);document.removeEventListener('mouseup',up);};document.addEventListener("mousemove",drag)document.addEventListener("mouseup",up)}

Translation (Dragging)

letelement={x:0,y:0,scaleX:1,scaleY:1,width:100,height:100,angle:0,scaleLimit:0.1,}constonElementMouseDown=(event)=>{event.stopPropagation();constdrag=translate({x: element.x,y: element.y,startX: event.pageX,startY: event.pageY},(payload)=>{// {x,y}// dragging element={ ...element, ...payload}});constup=()=>{document.removeEventListener('mousemove',drag);document.removeEventListener('mouseup',up);};document.addEventListener('mousemove',drag);document.addEventListener('mouseup',up);}