honeybadger7846 / free-transform Goto Github PK

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

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

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