beasteers/free-transform

Free Transform Tool Utility

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'

let element = {
  x:0,
  y:0,
  scaleX:1,
  scaleY:1,
  width:100,
  height:100,
  angle:0,
  scaleLimit:0.1, 
}

const onScaleHandleMouseDown = (event) => {
  
  event.stopPropagation();
  event.preventDefault();
  const drag = scale('tl', {
    startX: event.pageX,
    startY: event.pageY,
    scaleFromCenter: event.altKey,
    aspectRatio: event.shiftKey,
    ...element,   
  }, (payload) => { // {x, y, scaleX, scaleY}
    // dragging
    element = { ...element, ...payload }
  });
  
  const up = () => {
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', up);
  };

  document.addEventListener("mousemove", drag)
  document.addEventListener("mouseup", up)
  
}

Rotation

import {rotate} from 'free-transform'

let element = {
  x:0,
  y:0,
  scaleX:1,
  scaleY:1,
  width:100,
  height:100,
  angle:0,
  scaleLimit:0.1, 
}

const onRotateHandleMouseDown = (event) => {
  
  event.stopPropagation();
  event.preventDefault();
      
  const drag = 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}
    // dragging
    element = { ...element, ...payload }
  });
  
  const up = () => {
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', up);
  };

  document.addEventListener("mousemove", drag)
  document.addEventListener("mouseup", up)
}

Translation (Dragging)

let element = {
  x:0,
  y:0,
  scaleX:1,
  scaleY:1,
  width:100,
  height:100,
  angle:0,
  scaleLimit:0.1, 
}

const onElementMouseDown = (event) => {
    event.stopPropagation();
    
    const drag = translate({
      x: element.x,
      y: element.y,
      startX: event.pageX,
      startY: event.pageY
    }, (payload) => { // {x,y}
      // dragging     
      element = { ...element, ...payload }
    });
    
    const up = () => {
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', up);
    };
    
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', up);
}