Radial Line

radial-line.js

/*
{
  "id": "2i4osix9av",
  "label": "Radial Line",
  "icon": "✳"
}
*/

const BLACK = '#282a2e'
const GUIDE = '#3e999f'
const WHITE = '#f9faf9'

let center, centerGuide, dirGuide
let firstClick = false

let dir, mindist, maxdist
let line

function begin() {
  
  center = mouse
  
  centerGuide = new Circle(mouse, 5)
  centerGuide.fillColor = GUIDE
  
  dirGuide = new Line(mouse, mouse)
  dirGuide.strokeColor = GUIDE
  dirGuide.strokeWidth = 1
  
  firstClick = true

}

function press({altKey}) {
  
  if (firstClick) return
    
  line = new Line(mouse, mouse)
  line.strokeColor = BLACK
  line.strokeWidth = 2
  centerGuide.bringToFront()
  
  mindist = center.getDistance(mouse)
  maxdist = mindist
  
}

function release() {
  
  firstClick = false
}

function move({altKey}) {

  if (altKey) return
  
  dir = mouse.subtract(center).normalize()
  
  dirGuide.firstSegment.point = dir.multiply(-10000).add(center)
  dirGuide.lastSegment.point  = dir.multiply(10000).add(center)
}

function drag() {
  
  if (firstClick) return
  
  const dist = dir.dot(mouse.subtract(center))
  
  mindist = min(dist, mindist)
  maxdist = max(dist, maxdist)
  
  line.firstSegment.point = center.add(dir.multiply(mindist))
  line.lastSegment.point = center.add(dir.multiply(maxdist))
}

function end() {
  
  centerGuide.remove()
  dirGuide.remove()
  center = null
}