import { Handle , IHandle } from "./handle" ; import { CropperSettings } from "../cropperSettings" ; export interface ICornerMarker extends IHandle { horizontalNeighbour : CornerMarker ; verticalNeighbour : CornerMarker ; } export class CornerMarker extends Handle implements ICornerMarker { public horizontalNeighbour : CornerMarker ; public verticalNeighbour : CornerMarker ; constructor ( x , y , radius , cropperSettings ) { super ( x , y , radius , cropperSettings ) ; } public drawCornerBorder ( ctx ) { let sideLength = 10 ; if ( this . over || this . drag ) { sideLength = 12 ; } let hDirection = this . cropperSettings . markerSizeMultiplier ; let vDirection = this . cropperSettings . markerSizeMultiplier ; if ( this . horizontalNeighbour . position . x < this . position . x ) { hDirection = - this . cropperSettings . markerSizeMultiplier ; } if ( this . verticalNeighbour . position . y < this . position . y ) { vDirection = - this . cropperSettings . markerSizeMultiplier ; } if ( this . cropperSettings . rounded ) { let width = this . position . x - this . horizontalNeighbour . position . x ; let height = this . position . y - this . verticalNeighbour . position . y ; let offX = Math . round ( Math . sin ( Math . PI / 2 ) * Math . abs ( width / 2 ) ) / 4 ; let offY = Math . round ( Math . sin ( Math . PI / 2 ) * Math . abs ( height / 2 ) ) / 4 ; this . offset . x = hDirection > 0 ? offX : - offX ; this . offset . y = vDirection > 0 ? offY : - offY ; } else { this . offset . x = 0 ; this . offset . y = 0 ; } ctx . beginPath ( ) ; if ( this . cropperSettings . cropperDrawSettings . lineDash ) { ctx . setLineDash ( [ 1 , 3 ] ) ; } ctx . lineJoin = "miter" ; ctx . moveTo ( this . position . x + this . offset . x , this . position . y + this . offset . y ) ; ctx . lineTo ( this . position . x + this . offset . x + sideLength * hDirection , this . position . y + this . offset . y ) ; ctx . lineTo ( this . position . x + this . offset . x + sideLength * hDirection , this . position . y + this . offset . y + sideLength * vDirection ) ; ctx . lineTo ( this . position . x + this . offset . x , this . position . y + this . offset . y + sideLength * vDirection ) ; ctx . lineTo ( this . position . x + this . offset . x , this . position . y + this . offset . y ) ; ctx . closePath ( ) ; ctx . lineWidth = this . cropperSettings . cropperDrawSettings . strokeWidth ; ctx . strokeStyle = this . cropperSettings . cropperDrawSettings . strokeColor || "rgba(255,255,255,.7)" ; ctx . stroke ( ) ; } public drawCornerFill ( ctx ) { let sideLength = 10 ; if ( this . over || this . drag ) { sideLength = 12 ; } let hDirection = this . cropperSettings . markerSizeMultiplier ; let vDirection = this . cropperSettings . markerSizeMultiplier ; if ( this . horizontalNeighbour . position . x < this . position . x ) { hDirection = - this . cropperSettings . markerSizeMultiplier ; } if ( this . verticalNeighbour . position . y < this . position . y ) { vDirection = - this . cropperSettings . markerSizeMultiplier ; } ctx . beginPath ( ) ; if ( this . cropperSettings . cropperDrawSettings . lineDash ) { ctx . setLineDash ( [ 1 , 3 ] ) ; } ctx . moveTo ( this . position . x + this . offset . x , this . position . y + this . offset . y ) ; ctx . lineTo ( this . position . x + this . offset . x + sideLength * hDirection , this . position . y + this . offset . y ) ; ctx . lineTo ( this . position . x + this . offset . x + sideLength * hDirection , this . position . y + this . offset . y + sideLength * vDirection ) ; ctx . lineTo ( this . position . x + this . offset . x , this . position . y + this . offset . y + sideLength * vDirection ) ; ctx . lineTo ( this . position . x + this . offset . x , this . position . y + this . offset . y ) ; ctx . closePath ( ) ; ctx . fillStyle = this . cropperSettings . cropperDrawSettings . strokeColor || "rgba(255,255,255,.7)" ; ctx . fill ( ) ; } public moveX ( x ) { this . setPosition ( x , this . position . y ) ; } public moveY ( y ) { this . setPosition ( this . position . x , y ) ; } public move ( x , y ) { this . setPosition ( x , y ) ; this . verticalNeighbour . moveX ( x ) ; this . horizontalNeighbour . moveY ( y ) ; } public addHorizontalNeighbour ( neighbour ) { this . horizontalNeighbour = neighbour ; } public addVerticalNeighbour ( neighbour ) { this . verticalNeighbour = neighbour ; } public getHorizontalNeighbour ( ) { return this . horizontalNeighbour ; } public getVerticalNeighbour ( ) { return this . verticalNeighbour ; } public draw ( ctx ) { this . drawCornerFill ( ctx ) ; this . drawCornerBorder ( ctx ) ; } }