Javascipt Canvas with mouse.MD

Javascipt Canvas with mouse.

• Author Thitipong Samranvanich
• since 2560
• mouse move with hilight box
• still no drag function

canvas1.js

//===================================
// Author: Thitipong Samranvanich 
// Copyright 2017
//  2017-04-20
//======================================
// output as javascript file  
var cv1;
var ctx;
var boxsize;
var bordercolor = "red";
var WiHi = (function () {
    function WiHi() {
    }
    return WiHi;
}());
var Point = (function () {
    function Point() {
    }
    return Point;
}());
var RectBox = (function () {
    function RectBox(pos, text) {
        console.log("try init , pos = " + pos.x + "," + pos.y);
        this.boxpos = pos;
        this.text = text;
        this.is_hili = false;
    }
    RectBox.prototype.check_hili = function (xy) {
        //var xnear = (Math.abs(this.boxpos.x - ) < 10 )
        //var ynear = (Math.abs(this.boxpos.y - xy.y) < 10 )
        var xnear = (xy.x > this.boxpos.x && xy.x < this.boxpos.x + 100);
        var ynear = (xy.y > this.boxpos.y && xy.y < this.boxpos.y + 20);
        if (xnear && ynear) {
            this.is_hili = true;
        }
        else {
            this.is_hili = false;
        }
    };
    RectBox.prototype.draw = function () {
        var bp = this.boxpos;
        console.log("wihi = " + boxsize.wi + "," + boxsize.hi);
        ctx.beginPath();
        // calculate 
        var fontsize = 20;
        ctx.font = fontsize + "px Georgia";
        var textwi = ctx.measureText(this.text).width;
        // background 
        if (!this.is_hili) {
            ctx.fillStyle = "#FFFF00";
        }
        else {
            ctx.fillStyle = "#AAAA00";
        }
        ctx.fillRect(bp.x, bp.y, textwi, boxsize.hi);
        // text 
        ctx.fillStyle = "#000000";
        ctx.fillText(this.text, bp.x, bp.y + (fontsize));
        // box2 
        ctx.lineWidth = "1";
        ctx.strokeStyle = bordercolor;
        ctx.rect(bp.x, bp.y, textwi, boxsize.hi);
        ctx.stroke();
    };
    return RectBox;
}());
var rect1;
var a_rect = [];
function onload_init() {
    boxsize = { wi: 100, hi: 30 };
    var each_hi = boxsize.hi + 2;
    for (var i = 0; i < 10; i++) {
        var rb = new RectBox({ x: 10 + i * 2, y: 20 + i * each_hi }, "Test_" + i);
        a_rect.push(rb);
    }
    console.log(" set boxsize = " + boxsize.wi + ", " + boxsize.hi);
    cv1 = document.getElementById("cv1");
    console.log("cv1  = " + cv1);
    ctx = cv1.getContext("2d");
    console.log(" ctx  " + ctx);
    paint({ x: 0, y: 0 });
    console.log(" start init mousemove callback ");
    cv1.addEventListener('mousemove', function (evt) {
        var mousePos = getMousePos(cv1, evt); // Point DataType
        console.log("  mousemove: " + mousePos.x + ',' + mousePos.y);
        for (var i = 0; i < a_rect.length; i++) {
            a_rect[i].check_hili(mousePos);
        }
        paint(mousePos);
    }, false);
    console.log(" init callback mousemove ");
    alert("onload finished");
}
function getMousePos(canvas1, evt) {
    var rect1 = canvas1.getBoundingClientRect();
    return {
        x: evt.clientX - rect1.left,
        y: evt.clientY - rect1.top
    };
}
function paint(mousePos) {
    console.log(" start paint ");
    ctx.clearRect(0, 0, cv1.width, cv1.height);
    console.log(" before draw  ");
    for (var i = 0; i < a_rect.length; i++) {
        console.log(" paint index " + i);
        a_rect[i].draw();
    }
    console.log(" end paint ");
    // cursor 
    ctx.strokeStyle = "red";
    ctx.moveTo(0, 0);
    ctx.lineTo(mousePos.x, mousePos.y);
    ctx.stroke();
}

canvas1.ts

//===================================
// Author: Thitipong Samranvanich 
// Copyright 2017
//  2017-04-20
//======================================

let cv1 ;
let ctx ; 
let boxsize: WiHi  ;
let bordercolor : string  = "red"

class WiHi {
    wi: number; 
    hi: number ;
}
class Point{
    x: number ;
    y: number;
}

class RectBox{
    boxpos: Point ;
    text: string;
    is_hili : boolean ;
    constructor ( pos: Point, text: string){
        
        console.log("try init , pos = " + pos.x + "," + pos.y);

        this.boxpos = pos ; 
        this.text   = text ; 
        this.is_hili = false ;
    }
    check_hili(xy: Point): void {
        //var xnear = (Math.abs(this.boxpos.x - ) < 10 )
        //var ynear = (Math.abs(this.boxpos.y - xy.y) < 10 )
        var xnear = (xy.x > this.boxpos.x   && xy.x < this.boxpos.x+ 100  );
        var ynear = (xy.y > this.boxpos.y   && xy.y < this.boxpos.y+ 20  );
        if( xnear && ynear){
            this.is_hili = true 
        }else{
            this.is_hili = false 
        }
    }
    draw(){
        var bp = this.boxpos ; 
        console.log ("wihi = " + boxsize.wi + ","+  boxsize.hi)
        ctx.beginPath();
 
        // calculate 
        var fontsize=20; 
        ctx.font= fontsize + "px Georgia";
        var textwi = ctx.measureText(this.text ).width   

        // background 
        if( ! this.is_hili ){
            ctx.fillStyle="#FFFF00";
        }else{
            ctx.fillStyle="#AAAA00";
        }
        ctx.fillRect(bp.x,bp.y,textwi ,boxsize.hi);  

        // text 
         ctx.fillStyle="#000000";
        ctx.fillText(this.text,bp.x ,bp.y+(fontsize));

        // box2 
        
        
        ctx.lineWidth="1";
        ctx.strokeStyle= bordercolor;
 
        ctx.rect(bp.x,bp.y,textwi ,boxsize.hi);  

        ctx.stroke();
    }
}


let rect1  ; 
let a_rect = [] ;

function onload_init(){

    boxsize = <WiHi>{wi: 100 , hi: 30};
    var each_hi = boxsize.hi + 2 ; 
    for(var i = 0 ; i <10 ; i ++ ){
       var rb  = new RectBox(<Point>{x:10+ i*2 ,y:20+i*each_hi },"Test_" + i );
       a_rect.push(rb)
    } 

    console.log (" set boxsize = " + boxsize.wi + ", " + boxsize.hi)
    cv1 = document.getElementById("cv1");
    console.log ( "cv1  = " + cv1);
    ctx=cv1.getContext("2d");
    console.log ( " ctx  "  + ctx );
    paint(<Point>{x:0,y:0});


    console.log(" start init mousemove callback ")

    cv1.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(cv1, evt); // Point DataType
        console.log("  mousemove: " +  mousePos.x + ',' + mousePos.y );
        for(var i = 0 ; i < a_rect.length ; i++){
            (<RectBox>a_rect[i]).check_hili(mousePos);
        }
        paint(mousePos);

      }, false);
    
    console.log(" init callback mousemove ");
    alert ( "onload finished");
}

function getMousePos(canvas1, evt) : Point {
    var rect1 = canvas1.getBoundingClientRect();
    return <Point>{
        x: evt.clientX - rect1.left,
        y: evt.clientY - rect1.top
    };
}
function paint(mousePos: Point ){
    console.log ( " start paint "  );
    ctx.clearRect(0, 0, cv1.width, cv1.height );

    console.log ( " before draw  "  );
    for(var i = 0 ; i < a_rect.length ; i ++ ){
        console.log ( " paint index " + i  );
        (<RectBox>a_rect[i]).draw()
    }
    console.log ( " end paint " );
    
    // cursor 
    ctx.strokeStyle=  "red";
    ctx.moveTo(0,0);
    ctx.lineTo(mousePos.x,mousePos.y);
    ctx.stroke()

}

 

index.html

<html>
    <head>
        <script src="canvas1.js"></script>
    </head>
    <style>
        #cv1 {border:1px solid silver;
                background-color: lightyellow;
                }
    </style>
    
    <body onload="onload_init();"  >
        canvas :
        <canvas id="cv1" width="600" height="400" > </canvas>
        </body>
</html>