import { ActionSerialized } from './ActionSerialized' ; import { getCanvas } from "./main" ; import { Action } from "./Action" ; export class ActionPrintMagnet extends Action { get xMax ( ) : number { return this . x + this . magnet . clientWidth ; } private canvasImg : HTMLCanvasElement = undefined ; serializeData ( ) { return { type : "printmagnet" , pause : this . pause , userid : this . userid , magnet : this . magnet . outerHTML , x : this . x , y : this . y } ; } private magnet : HTMLElement ; constructor ( userid , magnet , private x , private y ) { super ( userid ) ; this . magnet = < HTMLElement > magnet . cloneNode ( true ) ; } createOverviewImage ( ) { return "url(img/icons/stamp.svg)" ; } redo ( ) { return new Promise ( ( resolve ) => { const context = getCanvas ( ) . getContext ( "2d" ) ; if ( this . magnet instanceof HTMLImageElement ) { const img = < HTMLImageElement > this . magnet ; const f = ( ) => { const clipPath = img . style . clipPath ; context . globalCompositeOperation = "source-over" ; context . globalAlpha = 0.9 ; if ( clipPath != "" ) { const strPointsInClipPath = img . style . clipPath . substr ( "polygon(" . length , clipPath . length - "polygon(" . length - ")" . length ) ; context . save ( ) ; context . beginPath ( ) ; let begin = true ; for ( const pointStr of strPointsInClipPath . split ( "," ) ) { const point = pointStr . trim ( ) . split ( " " ) ; if ( begin ) context . moveTo ( this . x + parseInt ( point [ 0 ] ) , this . y + parseInt ( point [ 1 ] ) ) ; else context . lineTo ( this . x + parseInt ( point [ 0 ] ) , this . y + parseInt ( point [ 1 ] ) ) ; begin = false ; } context . closePath ( ) ; context . clip ( ) ; } if ( img . style . width ) { const w = parseInt ( img . style . width ) ; const h = img . height * w / img . width ; console . log ( w ) ; console . log ( h ) ; context . drawImage ( img , this . x , this . y , w , h ) ; } else context . drawImage ( img , this . x , this . y ) ; if ( clipPath != "" ) context . restore ( ) ; resolve ( ) ; } ; if ( img . complete ) f ( ) ; img . onload = f ; } } ) ; } } function contextSetFontSize ( context , fontSize ) { const fontArgs = context . font . split ( ' ' ) ; context . font = fontSize + "px" + ' ' + fontArgs [ fontArgs . length - 1 ] ; }