Path handles control

Cursor • Generative Art Codes • Paper.js
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paper.js</title>
<link rel="stylesheet" href="./../PaperJSEngine/style.css" />
<script type="text/javascript" src="./../PaperJSEngine/paper-full.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" resize>
</canvas>

<script type="text/javascript">


$(document).ready(function () {

    paper.setup($('#canvas').get(0))

    var path = new paper.Path()
    path.strokeColor = 'orange'
    path.strokeWidth = 5
    path.add(new paper.Point(20,190))
    path.add(new paper.Point(200,100))
    path.add(new paper.Point(400,150))
    path.smooth()
    path.fullySelected = true

    var tool = new paper.Tool()
    var handle, segment


    tool.onMouseDown = (event) => {
        handle = null;
        segment = null;

        var hitResult = path.hitTest(event.point, { handles: true, tolerance: 40 })
        console.log(hitResult)
        if (hitResult) {
            if (hitResult.type == 'handle-in') {
                handle = hitResult.segment.handleIn;
            } else if (hitResult.type == 'handle-out') {
                handle = hitResult.segment.handleOut;
            }
        }
        if (handle == null) {
            hitResult = path.hitTest(event.point, { segments: true, tolerance: 40 });
            if (hitResult) {
                segment = hitResult.segment;
            }
        }
    }

    tool.onMouseDrag = function(event) {
        
        if (handle) {
            handle.x += event.delta.x;
            handle.y += event.delta.y;
        }
        if (segment) {
            segment.point.x += event.delta.x;
            segment.point.y += event.delta.y;
        }
        

    };




})



</script>

</body>
</html>