import { DrawingData , WebSocketWhiteboardClient } from "./WebSocketWhiteboardClient" ; const THROTTLE_MSEC = 20 ; export class DrawingHelper { private inDrawing = false ; private previousPosition = [ 0 , 0 ] ; private lastSendingTime = 0 ; private canvasId ; private client ; constructor ( canvasId , client ) { this . canvasId = canvasId ; this . client = client ; } drawingStart = ( e ) => { this . inDrawing = true ; this . previousPosition = [ e . offsetX , e . offsetY ] ; } ; drawingEnd = ( e ) => { this . inDrawing = false ; } ; drawing = ( e ) => { if ( Date . now ( ) - this . lastSendingTime < THROTTLE_MSEC ) { return ; } if ( this . inDrawing ) { const startX = this . previousPosition [ 0 ] ; const startY = this . previousPosition [ 1 ] ; const endX = e . offsetX ; const endY = e . offsetY ; const drawingData = this . generateDrawingData ( e , startX , startY , endX , endY ) ; this . lastSendingTime = Date . now ( ) ; this . previousPosition = [ e . offsetX , e . offsetY ] ; this . client . addDrawingData ! ( drawingData ) ; } } ; private generateDrawingData = ( e , startX , startY , endX , endY ) => { const source = e . target as HTMLCanvasElement ; const cs = getComputedStyle ( source ) ; const width = parseInt ( cs . getPropertyValue ( "width" ) ) ; const height = parseInt ( cs . getPropertyValue ( "height" ) ) ; const rateX = width / source . width ; const rateY = height / source . height ; let drawingData ; if ( rateX > rateY ) { const trueWidth = source . width * rateY ; const trueHeight = source . height * rateY ; const restW = ( width - trueWidth ) / 2 ; const startXR = ( startX - restW ) / trueWidth ; const startYR = startY / trueHeight ; const endXR = ( endX - restW ) / trueWidth ; const endYR = endY / trueHeight ; console . log ( "drawingMode!!!" , this . client . drawingMode , this . client . drawingMode === "DRAW" ? "DRAW" : "ERASE" ) ; drawingData = { drawingCmd : this . client . drawingMode === "DRAW" ? "DRAW" : "ERASE" , startXR : startXR , startYR : startYR , endXR : endXR , endYR : endYR , stroke : this . client . drawingStroke , lineWidth : this . client . lineWidth , canvasId : this . canvasId , } ; } else { const trueWidth = source . width * rateX ; const trueHeight = source . height * rateX ; const restH = ( height - trueHeight ) / 2 ; const startXR = startX / trueWidth ; const startYR = ( startY - restH ) / trueHeight ; const endXR = endX / trueWidth ; const endYR = ( endY - restH ) / trueHeight ; console . log ( "drawingMode!!!" , this . client . drawingMode , this . client . drawingMode === "DRAW" ? "DRAW" : "ERASE" ) ; drawingData = { drawingCmd : this . client . drawingMode === "DRAW" ? "DRAW" : "ERASE" , startXR : startXR , startYR : startYR , endXR : endXR , endYR : endYR , stroke : this . client . drawingStroke , lineWidth : this . client . lineWidth , canvasId : this . canvasId , } ; } return drawingData ; } ; touchStart = ( e ) => { this . inDrawing = true ; const source = e . target as HTMLCanvasElement ; const x = e . changedTouches [ 0 ] . clientX - source . getBoundingClientRect ( ) . left ; const y = e . changedTouches [ 0 ] . clientY - source . getBoundingClientRect ( ) . top ; this . previousPosition = [ x , y ] ; } ; touchEnd = ( e ) => { this . inDrawing = false ; } ; touchMove = ( e ) => { e . preventDefault ( ) ; const source = e . target as HTMLCanvasElement ; if ( Date . now ( ) - this . lastSendingTime < THROTTLE_MSEC ) { return ; } if ( this . inDrawing ) { const startX = this . previousPosition [ 0 ] ; const startY = this . previousPosition [ 1 ] ; const endX = e . changedTouches [ 0 ] . clientX - source . getBoundingClientRect ( ) . left ; const endY = e . changedTouches [ 0 ] . clientY - source . getBoundingClientRect ( ) . top ; const drawingData = this . generateDrawingData ( e , startX , startY , endX , endY ) ; this . lastSendingTime = Date . now ( ) ; this . previousPosition = [ endX , endY ] ; this . client . addDrawingData ! ( drawingData ) ; } } ; }