Расстояние между паралельными прямыми (для ресайза)

by Maksim Kachurin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="wrap">
    <div class="log">0</div>
    <div class="angle"></div>
    <div class="point from"></div>
    <div class="point to"></div>
    <div class="point target"></div>
</div>

CSS

.point {
  margin: -2px;
  width: 4px;
  height: 4px;
  position: fixed;
}

.point.from {
  background: red;
}


.point.to {
  background: blue;
}

.point.target {
  background: green;
}

.angle {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 100px;
  height: 100px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+QXJvdzEtNTA8L3RpdGxlPjxwb2x5Z29uIHBvaW50cz0iNDIuNCAxOS4yNiA3My4xNSA1MCA0Mi40IDgwLjc0IDU0LjU4IDkyLjkyIDk3LjUgNTAgNTQuNTggNy4wOCA0Mi40IDE5LjI2Ij48L3BvbHlnb24+PHBvbHlnb24gcG9pbnRzPSIxNC42OCA5Mi45MiA1Ny42IDUwIDE0LjY4IDcuMDggMi41IDE5LjI2IDMzLjI0IDUwIDIuNSA4MC43NCAxNC42OCA5Mi45MiI+PC9wb2x5Z29uPjwvc3ZnPg==");
  background-size: 25px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid green;
  opacity: .25;
}

JavaScript

let startX = 0;
let startY = 0;
let moveX;
let moveY;

// Напраавление ресайза
const direction = 'right';
const angle = 30;

const $wrap = $('.wrap');
const $log = $('.log');
const $angle = $('.angle');

const $start = $('.from');
const $end = $('.to');
const $target = $('.target');

$angle.css('transform', `rotate(${ angle }deg)`);

document.onpointerdown = (e) => {
  startX = Math.round(e.clientX);
  startY = Math.round(e.clientY);

  $start.css({
    top: startY + 'px',
    left: startX + 'px'
  });
};

document.onpointermove = (e) => {
  moveX = Math.round(e.clientX);
  moveY = Math.round(e.clientY);

  const distX = moveX - startX;
  const distY = moveY - startY;

  const directions = {
    left: /left/.test(direction),
    right: /right/.test(direction),
    top: /top/.test(direction),
    bottom: /bottom/.test(direction)
  };

  const isWidth = directions.left || directions.right;
  const isHeight = directions.top || directions.bottom;

  let distance;
  let primaryDirection = isWidth ? 'width' : 'height';

  // Ресайз в обе стороны
/*   if (isWidth && isHeight) {
    const distanceX = getDistance(distX, distY, directions.left ? 'left' : 'right', angle);
    const distanceY = getDistance(distX, distY, directions.top ? 'top' : 'bottom', angle);
  
    if (Math.abs(distanceX) >= Math.abs(distanceY)) {
      primaryDirection = 'width';
      distance = distanceX;
    } else {
      primaryDirection = 'height';
      distance = distanceY;
    }
  
    console.log({
      primaryDirection,
      distance,
      distanceX,
      distanceY
    });
  } else { */
    // Расстояние между прямыми
    distance = getDistance(distX, distY, direction, angle);

    console.log({
      primaryDirection,
      distance
    });
  /* } */


  $target.css({
    left: (startX + distance[0]) + 'px',
    top: (startY + distance[1]) + 'px'
  });
  
  $end.css({
    left: moveX + 'px',
    top: moveY + 'px',
  });
};


function rad2deg(rad) {
  return rad * (180 /...