Method drawNode

graph.js:188–280

( node, activeNode, activeCtrl )

    }

    drawNode( node, activeNode, activeCtrl ){
        const pt = this.convertPathToScreen( node.x, node.y );
        let ptA, ptB;
        let active = ( activeNode == node );
        switch( node.tool ){
            case 'moveTo':
                this.drawCircle( pt.x, pt.y, 8, "#88f", active );
                break;
            case 'lineTo':
                this.context.strokeStyle = (node == activeNode) ? "#000" : "#777";
                this.context.lineWidth = 1;
                this.context.beginPath();
                this.context.moveTo( this.prevPt.x, this.prevPt.y );
                this.context.lineTo( pt.x, pt.y );
                this.context.stroke();
                this.drawCircle( pt.x, pt.y, 8, "#88f", active );
                break;
            case 'quadraticCurveTo':
                try{
                    this.context.fillStyle = "#88f";
                    this.context.strokeStyle = (node == this.activeNode || node.options.ctrlA == this.activeCtrl ) ? "#000" : "#777";
                    this.context.lineWidth = 1;
                    ptA = this.convertPathToScreen( node.options.ctrlA.x, node.options.ctrlA.y );
                    this.context.beginPath();
                    this.context.moveTo( this.prevPt.x, this.prevPt.y );
                    this.context.quadraticCurveTo( ptA.x, ptA.y, pt.x, pt.y );
                    this.context.stroke();
                    this.context.setLineDash([5, 5]);
                    this.context.beginPath();
                    this.context.moveTo( this.prevPt.x, this.prevPt.y );
                    this.context.lineTo( ptA.x, ptA.y );
                    this.context.lineTo( pt.x, pt.y );
                    this.context.stroke();
                    this.context.setLineDash([]);
                    this.drawCircle( ptA.x, ptA.y, 8, "#8f8", activeCtrl == node.options.ctrlA );
                }catch( e ){

                }
                this.drawCircle( pt.x, pt.y, 8, "#88f", active );
                break;
            case 'bezierCurveTo':
                try{
                    this.context.fillStyle = "#88f";
                    this.context.strokeStyle = (node == activeNode || node.options.ctrlA == activeCtrl || node.options.ctrlB == activeCtrl ) ? "#000" : "#777";
                    this.context.lineWidth = 1;
                    ptA = this.convertPathToScreen( node.options.ctrlA.x, node.options.ctrlA.y );
                    ptB = this.convertPathToScreen( node.options.ctrlB.x, node.options.ctrlB.y );
                    this.context.beginPath();
                    this.context.moveTo( this.prevPt.x, this.prevPt.y );
                    this.context.bezierCurveTo( ptA.x, ptA.y, ptB.x, ptB.y, pt.x, pt.y );
                    this.context.stroke();
                    this.context.setLineDash([5, 5]);
                    this.context.beginPath();
                    this.context.moveTo( this.prevPt.x, this.prevPt.y );
                    this.context.lineTo( ptB.x, ptB.y );
                    this.context.lineTo( ptA.x, ptA.y );
                    this.context.lineTo( pt.x, pt.y );
                    this.context.stroke();