SVG D3 drag over path

Using D3 to drag SVG circle over SVG path. Added math.abs and comparison to last point to force forward movement

by softwareinnovator

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<svg id="fidelSVG" style="margin: auto; display:block; width:90%; height:90%;border-color:blue;" visibility="visible" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0"
viewBox="30 20 250 130">
  <g id="paths">

    <path id="letter1" d="M105 41c-9,0 -18,0 -28,0 -10,0 -18,2 -23,7 -5,4 -7,11 -7,19 0,3 0,6 1,10 0,4 1,8 3,13l0 1c2,6 4,12 7,19 2,4 2,6 8,7 12,3 24,3 35,-5 5,-4 8,-12 8,-22l-1 -12 -3 -37" stroke="blue" transform="rotate(0 0 0)" stroke-linecap="round" stroke-linejoin="round"
    stroke-width="20" fill="none" />
    <path id="letter2" d="M105 41c28,0 52,0 80,0" stroke="blue" transform="rotate(0 0 0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="20" fill="none" />
    <path id="letter3" d="M185 41l-3 32 0 10c0,9 2,15 7,19 9,7 19,6 30,4 4,0 4,-2 6,-5 3,-6 5,-11 6,-17l0 -1c2,-4 3,-8 3,-11 1,-4 1,-6 1,-8 0,-8 -2,-14 -6,-17 -5,-4 -11,-6 -20,-6 -8,0 -16,0 -24,0" stroke="blue" transform="rotate(0 0 0)" stroke-linecap="round"
    stroke-linejoin="round" stroke-width="20" fill="none" />
    <path id="letter4" d="M233 79c10,0 20,0 30,0" stroke="blue" transform="rotate(0 0 0)" stroke-linecap="round" stroke-linejoin="round" stroke-width="20" fill="none" />
  </g>
</svg>

CSS

circle {
  fill: yellow
}

JavaScript

var currentLength = 0;
var lastPoint = 0;
var currentPaths = [];
var currentPathIndex = 0;
var pointAtCurrentLength = document.getElementsByTagName("path")[0].getPointAtLength(currentLength);

var last_position = {};

function dragMove(d) {
  console.log("dragging a circle");
  var coord = [0,0];
  coord = d3.mouse(this);
  var x = coord[0];
  var y = coord[1];
  
  console.log("currentLength x = " + pointAtCurrentLength.x + " mousex = " + x);
  
  if(Math.abs(coord[0] - pointAtCurrentLength.x) > 30 || Math.abs(coord[1] - pointAtCurrentLength.y) > 30) return;
  
  var potentialLength = currentLength + Math.abs(d3.event.dx) + Math.abs(d3.event.dy);
 
    if (typeof (last_position.x) != 'undefined') {
        var deltaX = last_position.x - x,
            deltaY = last_position.y - y;
            
        var pointDeltaX = pttransformed.x - pttransformed2.x;
        var pointDeltaY = pttransformed.y - pttransformed2.y;
        var isLeft = false;
        var isRight = false;
        var isUp = false;
        var isMovingDown = false;

        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
            //left
            console.log('Left');
            isLeft = true;
        } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
            //right
            console.log('Right ');
            isRight = true;
        } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
            //up
            console.log('Up');
            isUp = true;
        } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
            //down
            console.log('Down');
            isMovingDown = true;
        }

        if (Math.abs(pointDeltaX) > Math.abs(pointDeltaY) && pointDeltaX > 0) {
            //left
            console.log('Point Left');
            if (isRight) badDirection = true;
        } else if (Math.abs(pointDeltaX) > Math.abs(pointDeltaY) && pointDeltaX < 0) {
            //right
            console.log('Point Right ');
     ...