import { Sound } from './Sound' ; import { ActionClearZone } from './ActionClearZone' ; import { UserManager } from './UserManager' ; import { Drawing } from './Drawing' ; import { BoardManager } from './boardManager' ; import { getCanvas } from './main' ; import { MagnetManager } from './magnetManager' ; /**
 * This class represents a polyline drawn by a user
 */ export class Delineation { setPoints ( points ) { this . points = points ; } points : { x : number ; y : number ; } [ ] = [ ] ; lastpoints = [ ] ; drawing : boolean ; maybeJustAPoint = true ; reset ( ) { this . drawing = true ; this . lastpoints = this . points ; this . points = [ ] ; this . maybeJustAPoint = true ; } finish ( ) { this . drawing = false ; } returns isDrawing ( ) { return this . points . length > 0 ; } containsPolygonToMagnetize ( ) { return this . points . length > 0 ; } addPoint ( point ) { this . points . push ( point ) ; } returns isDot ( ) { if ( ! this . maybeJustAPoint ) return false ; if ( this . points . length == 0 ) return false ; for ( const point of this . points ) if ( Math . abs ( point . x - this . points [ 0 ] . x ) > 2 && Math . abs ( point . y - this . points [ 0 ] . y ) > 2 ) { this . maybeJustAPoint = false ; return false ; } return true ; } param { * } point param { * } polygon returns static inPolygon ( point , polygon ) { const x = point . x , y = point . y ; let inside = false ; for ( let i = 0 , j = polygon . length - 1 ; i < polygon . length ; j = i ++ ) { const xi = polygon [ i ] . x , yi = polygon [ i ] . y ; const xj = polygon [ j ] . x , yj = polygon [ j ] . y ; const intersect = ( ( yi > y ) != ( yj > y ) ) && ( x < ( xj - xi ) * ( y - yi ) / ( yj - yi ) + xi ) ; if ( intersect ) inside = ! inside ; } return inside ; } dotInPreviousPolygon ( ) { return Delineation . inPolygon ( this . points [ 0 ] , this . lastpoints ) ; } param cut description magnetize ( userid , cut , removeContour ) { if ( ! this . isSuitableForMagnetisation ( ) ) return ; if ( removeContour ) Drawing . removeContour ( this . points ) ; if ( userid == UserManager . me . userID ) this . _createMagnetFromImg ( ) ; Sound . play ( "magnetcreationfromboard" ) ; if ( cut && removeContour ) Drawing . removeContour ( this . points ) ; if ( cut ) Drawing . clearPolygon ( this . points ) ; const action = new ActionClearZone ( userid , this . points , cut , removeContour ) ; BoardManager . addAction ( action ) ; this . reset ( ) ; } returns isSuitableForMagnetisation ( ) { for ( const point of this . points ) { if ( Math . abs ( point . x - this . points [ 0 ] . x ) > 16 && Math . abs ( point . y - this . points [ 0 ] . y ) > 16 ) return true ; } return false ; } returns _getRectangle ( ) { const canvas = getCanvas ( ) ; const r = { x1 : canvas . width , y1 : canvas . height , x2 : 0 , y2 : 0 } ; const PAD = 2 ; for ( const point of this . points ) { r . x1 = Math . min ( r . x1 , point . x - PAD ) ; r . y1 = Math . min ( r . y1 , point . y - PAD ) ; r . x2 = Math . max ( r . x2 , point . x + PAD ) ; r . y2 = Math . max ( r . y2 , point . y + PAD ) ; } return r ; } /**
     * remark: only the current user will create the magnet (the other users will receive it)
     */ _createMagnetFromImg : ( ) => void = ( ) => { const img = new Image ( ) ; const rectangle = this . _getRectangle ( ) ; img . src = BoardManager . getDataURLOfRectangle ( rectangle ) ; img . style . clipPath = "polygon(" + this . points . map ( point => `${ point . x - rectangle . x1 }px ${ point . y - rectangle . y1 }px` ) . join ( ", " ) + ")" ; MagnetManager . addMagnet ( img ) ; img . style . left = rectangle . x1 + "px" ; img . style . top = rectangle . y1 + "px" ; } ; }