import { fabric } from 'fabric' ; import * as uuid from 'uuid' ; export const drawingStyles = { draw : { color : 'rgb(0, 0, 0)' , } , erase : { color : 'rgb(255, 255, 255)' , } , } ; export interface DrawData { type : 'draw' | 'erase' ; } export class Drawing extends fabric . Image { id : string ; tid : string ; author : string ; created : number ; constructor ( objObjects , element = new Image ( ) ) { super ( element , objObjects ) ; this . backgroundColor = 'rgba(255, 255, 255, 0)' ; this . evented = false ; this . hasBorders = false ; this . hasControls = false ; this . hasRotatingPoint = false ; this . hoverCursor = 'default' ; this . lockMovementX = true ; this . lockMovementY = true ; this . lockRotation = true ; this . lockScalingX = true ; this . lockScalingY = true ; this . opacity = 1 ; this . perPixelTargetFind = true ; this . selectable = false ; this . stroke = 'rgba(255, 255, 255, 0)' ; this . strokeWidth = 1 ; this . author = '' ; this . created = new Date ( ) . getTime ( ) ; this . id = uuid ( ) ; this . tid = 'drawing' ; } getCompositeImageData ( imageData , opt ? ) { const drawingEl = this . getElement ( ) ; const drawingCanvas = document . createElement ( 'canvas' ) ; const drawingCtx = drawingCanvas . getContext ( '2d' ) ; drawingCtx . imageSmoothingEnabled = false ; drawingCanvas . width = drawingEl . width ; drawingCanvas . height = drawingEl . height ; drawingCtx . drawImage ( drawingEl , 0 , 0 ) ; const outputCanvas = document . createElement ( 'canvas' ) ; const outputCtx = outputCanvas . getContext ( '2d' ) ; outputCtx . imageSmoothingEnabled = false ; outputCanvas . width = imageData . width ; outputCanvas . height = imageData . height ; outputCtx . putImageData ( imageData , 0 , 0 ) ; outputCtx . drawImage ( drawingCanvas , this . left , this . top ) ; imageData = outputCtx . getImageData ( 0 , 0 , imageData . width , imageData . height ) ; return imageData ; } } export class DrawingBuilder { private canvas : fabric . Canvas ; private author : Drawing [ 'author' ] ; private drawing : Drawing ; constructor ( canvas , author , drawData ) { this . canvas = canvas ; this . author = author ; ( < any > this . canvas ) . freeDrawingBrush . color = drawingStyles [ drawData . type ] . color ; } onMouseDown ( opt ) { return null ; } onMouseMove ( opt ) { } generate ( opt ) { return null ; } build ( path ) { return new Promise ( resolve => { const img = new Image ( ) ; img . onload = ( ) => { this . drawing = new Drawing ( { } , img ) ; this . drawing . set ( { author : this . author , top : Math . round ( path . top ) , left : Math . round ( path . left ) , width : img . width , height : img . height , } ) ; this . canvas . add ( this . drawing ) ; this . drawing . bringToFront ( ) ; this . drawing . setCoords ( ) ; resolve ( this . drawing ) ; } ; img . src = path . toDataURL ( { } ) ; } ) ; } clear ( ) { } }