import { LiteEvent } from "./events" ; import { IRect , Point } from "./point" ; export class Canvas { private _onClick : LiteEvent < Canvas , Point > = new LiteEvent < Canvas , Point > ( ) ; private _onMove : LiteEvent < Canvas , Point > = new LiteEvent < Canvas , Point > ( ) ; private ctx : CanvasRenderingContext2D ; private element : HTMLCanvasElement ; constructor ( containerID , size ) { const container = document . getElementById ( containerID ) ; if ( container . tagName === "canvas" ) { this . element = container as HTMLCanvasElement ; } else { this . element = document . createElement ( "canvas" ) ; container . appendChild ( this . element ) ; } this . element . width = size . X ; this . element . height = size . Y ; this . ctx = this . element . getContext ( "2d" ) ; if ( ! this . ctx ) { } this . element . addEventListener ( "click" , this . _click . bind ( this ) ) ; this . element . addEventListener ( "mousemove" , this . _move . bind ( this ) ) ; this . Clear ( ) ; } get Size ( ) : Point { return new Point ( this . element . width , this . element . height ) ; } set Size ( size ) { this . element . width = size . X ; this . element . height = size . Y ; } Clear ( ) { this . ctx . clearRect ( 0 , 0 , this . element . width , this . element . height ) ; } DrawBackgroundImage ( image ) { this . ctx . drawImage ( image , 0 , 0 , this . element . width , this . element . height ) ; } DrawImage ( image , position ) { this . ctx . drawImage ( image , position . X , position . Y , image . width , image . height ) ; } DrawImageTo ( image , source , destination ) { this . ctx . drawImage ( image , source . Position . X , source . Position . Y , source . Size . X , source . Size . Y , destination . Position . X , destination . Position . Y , destination . Size . X , destination . Size . Y ) ; } DrawRect ( position , size , color ) { this . ctx . fillStyle = color ; this . ctx . fillRect ( position . X , position . Y , size . X , size . Y ) ; } DrawRect0 ( size , color ) { this . DrawRect ( new Point ( ) , size , color ) ; } DrawText ( text , position , color , fontSize , maxWidth ? ) { this . ctx . fillStyle = color ; this . ctx . font = `${ fontSize }px sans-serif` ; this . ctx . textBaseline = "top" ; this . ctx . fillText ( text , position . X , position . Y , maxWidth ) ; } DrawText0 ( text , color , fontSize , maxWidth ? ) { this . DrawText ( text , new Point ( ) , color , fontSize , maxWidth ) ; } GetImageData ( ) { return this . ctx . getImageData ( 0 , 0 , this . Size . X , this . Size . Y ) ; } MeasureTextWidth ( text ) { return this . ctx . measureText ( text ) . width ; } Restore ( ) { this . ctx . restore ( ) ; } SetCursor ( cursor ) { this . element . style . cursor = cursor ; } Translate ( position ) { this . Restore ( ) ; this . ctx . save ( ) ; this . ctx . translate ( position . X , position . Y ) ; } get OnClick ( ) : LiteEvent < Canvas , Point > { return this . _onClick . Expose ( ) ; } get OnMove ( ) : LiteEvent < Canvas , Point > { return this . _onMove . Expose ( ) ; } private _click ( ev ) { ev . preventDefault ( ) ; this . _onClick . Trigger ( this , new Point ( ev . pageX - this . element . offsetLeft , ev . pageY - this . element . offsetTop ) ) ; } private _move ( ev ) { this . _onMove . Trigger ( this , new Point ( ev . pageX - this . element . offsetLeft , ev . pageY - this . element . offsetTop ) ) ; } } export class HiddenCanvas extends Canvas { private hiddenElement : HTMLElement ; constructor ( size ) { const id = `c_${ Math . random ( ) . toString ( ) . slice ( 2 , 7 ) }` ; const hiddenElement = document . createElement ( "div" ) ; hiddenElement . id = id ; document . body . appendChild ( hiddenElement ) ; super ( id , size ) ; this . hiddenElement = hiddenElement ; } Destroy ( ) { this . hiddenElement . remove ( ) ; } }