import { Canvas } from '@components/canvas/Canvas' ; import { Arc } from '@components/canvas/shapes/Arc' ; import { Tools } from '@components/canvas/Tools' ; import laser from '@images/laser.png' ; import eraser from '@images/eraser.png' ; export interface MiCursorConfig { container : string | HTMLDivElement ; radius ? : number ; type ? : string ; color ? : string ; line ? : number ; stroke ? : string ; } export class Cursor { container : HTMLDivElement ; type = 'default' ; radius : number ; line ? : number = 1 ; color ? : string ; stroke ? : string ; param config constructor ( config ) { this . container = ( ( config . container instanceof HTMLDivElement ? config . container : document . getElementById ( config . container ) ) as HTMLDivElement ) ; this . color = config . color ; this . radius = config . radius || 0 ; this . stroke = config . stroke ; this . line = config . line ; } return protected create ( ) { let cursor ; switch ( this . type ) { case 'move' : cursor = `move` ; break ; case 'resize' : cursor = 'se-resize' ; break ; case 'w-resize' : cursor = 'w-resize' ; break ; case 'n-resize' : cursor = 'n-resize' ; break ; case 'sw-resize' : cursor = 'sw-resize' ; break ; case 'nw-resize' : cursor = 'nw-resize' ; break ; case 'ne-resize' : cursor = 'ne-resize' ; break ; case 'se-resize' : cursor = 'se-resize' ; break ; case 'copy' : cursor = 'copy' ; break ; case 'crop' : cursor = 'crosshair' ; break ; case 'rotate' : cursor = 'crosshair' ; break ; case 'text' : cursor = 'text' ; break ; case 'laser' : cursor = `url("${ laser }") 16 16, auto` ; break ; case 'eraser' : cursor = `url("${ eraser }") 16 16, auto` ; break ; case 'circle' : const width = ( this . radius as number ) * 2 , height = ( this . radius as number ) * 2 , canvas = new Canvas ( { width , height } ) , ctx = canvas . getContext ( ) ; canvas . clear ( ) ; const arc = new Arc ( { x : this . radius , y : this . radius , radius : this . radius , strokeWidth : this . line || 1 , strokeStyle : this . stroke ?? 'rgba(0, 0, 0, .5)' , fillStyle : this . color ?? 'rgb(0, 0, 0)' } ) ; arc . draw ( ctx ) ; const url = canvas . toDataURL ( ) , size = Math . floor ( canvas . width / 2 ) ; cursor = `url(${ url }) ${ size } ${ size }, auto` ; break ; default : cursor = 'default' ; break ; } if ( this . container && cursor ) this . container . style . cursor = cursor ; } param tool param config param type update ( tool , config ? , type ? ) { if ( type ) this . type = type ; else { const brush = Tools . getStage ( ) . getActiveTool ( ) ; tool = tool === 'brush' ? brush : tool ; switch ( tool ) { case 'drag' : this . type = 'move' ; break ; case 'selection' : this . type = 'default' ; break ; case 'text' : this . type = 'text' ; break ; case 'eraser' : this . type = 'eraser' ; break ; case 'screenshot' : this . type = 'crop' ; break ; case 'laser' : this . type = `laser` ; break ; default : this . type = 'circle' ; let radius = Math . ceil ( ( config ?. thickness ?? Tools . thickness ) / ( config ?. divisor ?? 8 ) ) ; switch ( tool ) { case 'line' : radius = Math . ceil ( ( config ?. thickness ?? Tools . thickness ) / ( config ?. divisor ?? 20 ) ) ; break ; case 'circle' : case 'rect' : if ( config ?. solid ) radius = 5 ; else radius = Math . ceil ( ( config ?. thickness ?? Tools . thickness ) / ( config ?. divisor ?? 10 ) ) ; break ; case 'arrow' : radius = 5 ; break ; } this . radius = radius ; break ; } } if ( config ?. color ) this . color = config . color ; if ( config ?. stroke ) this . stroke = config . stroke ; if ( config ?. line ) this . line = config . line ; this . create ( ) ; } }