test-es6.html

<canvas />
<script type="module">
    import { de } from './pathfinding.js'; console.log ( de );


    //an array of point coordinates:
    //the first point's x coordinate is at index [0] and its y coordinate at index [1],
    //followed by the coordinates of the remaining points.
    const nodeData = [82.00,298.00,132.00,446.00,184.00,179.00,228.00,326.00,306.00,478.00,391.00,373.00,406.00,240.00,414.00,111.00,500.00,447.00,537.00,245.00,597.00,376.00,618.00,186.00];
    
    //an array of arc indices:
    //the source node is at index [0], target node at index[1], followed by all remaining arcs.
    const arcData = [9,10,10,11,11,9,7,9,11,7,6,5,5,9,9,6,3,5,6,3,2,0,0,3,3,2,0,1,1,3,1,4,4,3,5,8,8,9,4,5,2,6,6,7,7,2,8,10,4,8];


    const astar = new de.polygonal.ai.pathfinding.AStar ();
    const graph = new de.polygonal.ds.Graph ();

    const nodes = {};
    for ( let i = 0; i < nodeData.length; i += 2 ) {
        const wp = new de.polygonal.ai.pathfinding.AStarWaypoint ();
        wp.x = nodeData[ i ];
        wp.y = nodeData[ i + 1 ];
        wp.node = graph.addNode ( graph.createNode ( wp ) );
        nodes[ i / 2 ] = wp;
    }


    const canvas = document.querySelector ( 'canvas' );
    canvas.width = 640; canvas.height = 480;

    const context = canvas.getContext ( '2d' );
    context.strokeStyle = 'orange'; context.beginPath ();

    for ( let i = 0; i < arcData.length; i += 2 ) {
        const j = arcData[ i ], k = arcData[ i + 1 ];
        context.moveTo ( nodeData[ j * 2 ], nodeData[ j * 2 + 1 ] );
        context.lineTo ( nodeData[ k * 2 ], nodeData[ k * 2 + 1 ] );

        graph.addMutualArc ( nodes[ j ].node, nodes[ k ].node );
    }

    context.stroke ();


    var path = [];
    if ( astar.find( graph, nodes[ 0 ], nodes[ nodeData.length / 2 - 1 ], path ) ) {
        context.strokeStyle = 'tomato'; context.lineWidth = 3; context.beginPath ();

        context.moveTo ( path[ 0 ].x, path[ 0 ].y );
        for ( let i = 1; i < path.length; i++ ) {
            context.lineTo ( path[ i ].x, path[ i ].y );
        }

        context.stroke ();
    }

</script>