console.clear();

gsap.registerPlugin(Draggable, DrawSVGPlugin);

let pencilPoint = document.querySelector("#pencil-point");
let pencilPath  = document.querySelector("#pencil-path");
let smoothPath  = document.querySelector("#smooth-path");

let points  = [];
let strokes = [];
let prev    = null;
let start   = 0;

let tl = gsap.timeline();

let pencil = new Draggable(pencilPoint, {
  bounds: "#svg-drawing",
  trigger: "#svg-drawing",
  cursor: "crosshair",
  onDrag,
  onDragEnd,
  onPress
});

function onPress() {
  
  tl.clear();  
  start = Date.now();
  
  pencilPath.setAttribute("points", "");
  smoothPath.setAttribute("d", "");
  
  let x = this.pointerX;
  let y = this.pointerY;
    
  let stroke = {
    elapsed: 0,
    time: start, 
    dist: 0,
    x: x, 
    y: y
  };
    
  points  = [x, y];
  strokes = [stroke];
  prev    = stroke;
  
  gsap.set(pencilPoint, { x, y });
  this.update();
}

function onDrag() {
  
  let time = Date.now();
  let elapsed = time - prev.time;  
  
  let dist = getDistance(prev, this);
    
  let x = this.endX;
  let y = this.endY;
  
  let stroke = {
    elapsed: elapsed,
    time: time,
    dist: prev.dist + dist,
    x: x,
    y: y
  }; 
  
  prev = stroke;
  strokes.push(stroke);  
  points.push(x, y);
  pencilPath.setAttribute("points", points);
}

function onDragEnd() {
      
  let totalTime = (Date.now() - start) / 1000;  
  let totalDist = strokes[strokes.length - 1].dist;
    
  smoothPath.setAttribute("d", solve(points));
  pencilPath.setAttribute("points", "");
    
  strokes.forEach(stroke => {
    let time = stroke.elapsed / 1000;
    let draw = (stroke.dist / totalDist * 100) + "%";
    
    tl.to(smoothPath, { 
      duration: time,
      ease: "none",
      drawSVG: draw 
    }); 
  })
}

function getDistance(p1, p2) {
  let dx = p2.x - p1.x;
  let dy = p2.y - p1.y;
  return Math.sqrt(dx * dx + dy * dy);
}

function solve(data, k) {

  if (k == null) k = 1;
  
  let size = data.length;
  let last = size - 4;    

  let path = `M${data[0]},${data[1]}`;

  for (let i = 0; i < size - 2; i +=2) {

    let x0 = i ? data[i - 2] : data[0];
    let y0 = i ? data[i - 1] : data[1];

    let x1 = data[i + 0];
    let y1 = data[i + 1];

    let x2 = data[i + 2];
    let y2 = data[i + 3];

    let x3 = i !== last ? data[i + 4] : x2;
    let y3 = i !== last ? data[i + 5] : y2;
    
    let cp1x = x1 + (x2 - x0) / 6 * k;
    let cp1y = y1 + (y2 - y0) / 6 * k;

    let cp2x = x2 - (x3 - x1) / 6 * k;
    let cp2y = y2 - (y3 - y1) / 6 * k;
   
    path += ` C${cp1x},${cp1y},${cp2x},${cp2y},${x2},${y2}`;
  } 

  return path;
}

// Control points for initial 'CodePen' doodle
let controls = [
  200, 50,
  125, 75,
  125, 190,
  200, 200,
  225, 150,
  255, 150,
  225, 150,
  220, 200,
  255, 200,
  255, 150,
  230, 150,
  260, 155,
  300, 150,
  270, 150,
  270, 200,
  300, 200,
  300, 190,
  310, 50,
  300, 75,
  305, 200,
  305, 190,
  335, 170,
  355, 150,
  330, 150,
  320, 190,
  350, 200,
  370, 180,
  367, 150,
  370, 230,
  367, 200,
  375, 150,
  405, 150,
  400, 180,
  375, 170,
  400, 180,
  445, 150,
  420, 150,
  415, 190,
  440, 200,
  460, 170,
  460, 150,
  460, 200,
  460, 155,
  490, 155,
  490, 200,
];

// 1.5 tension to make it more round
smoothPath.setAttribute("d", solve(controls, 1.5));