@drizm/ng-whiteboard/bundles/drizm-ng-whiteboard.umd.min.js

A Canvas component for Angular which supports free drawing.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("lodash-es"),require("@angular/common")):"function"==typeof define&&define.amd?define("@drizm/ng-whiteboard",["exports","@angular/core","rxjs","rxjs/operators","lodash-es","@angular/common"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).drizm=t.drizm||{},t.drizm["ng-whiteboard"]={}),t.ng.core,t.rxjs,t.rxjs.operators,t.lodashEs,t.ng.common)}(this,(function(t,e,n,i,o,a){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */var s=function(t,e){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function r(t,e){function n(){this.constructor=t}s(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}Object.create;function h(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var i,o,a=n.call(t),s=[];try{for(;(void 0===e||e-- >0)&&!(i=a.next()).done;)s.push(i.value)}catch(t){o={error:t}}finally{try{i&&!i.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return s}var c;Object.create;!function(t){t[t.START=0]="START",t[t.DRAG=1]="DRAG",t[t.STOP=2]="STOP"}(c||(c={}));var l=function(){function t(t,e,n,i,o,a){this.x=t,this.y=e,this.type=n,this.UUID=i,this.selectedShape=o,this.selectedShapeOptions=a}return t.deserializeJson=function(e){var n;try{return new t((n=JSON.parse(e)).x,n.y,n.type,n.uuid,n.selectedShape,n.selectedShapeOptions)}catch(t){return console.error("The canvas whiteboard update is not parseable"),null}},t.prototype.stringify=function(){var t,e,n={x:null===(t=this.x)||void 0===t?void 0:t.toFixed(3),y:null===(e=this.y)||void 0===e?void 0:e.toFixed(3),type:this.type,uuid:this.UUID,selectedShape:this.selectedShape,selectedShapeOptions:this.selectedShapeOptions||void 0};return JSON.stringify(n)},t}(),p=function(){function t(){this._canvasDrawSubject=new n.Subject,this.canvasDrawSubject$=this._canvasDrawSubject.asObservable(),this._canvasClearSubject=new n.Subject,this.canvasClearSubject$=this._canvasClearSubject.asObservable(),this._canvasUndoSubject=new n.Subject,this.canvasUndoSubject$=this._canvasUndoSubject.asObservable(),this._canvasRedoSubject=new n.Subject,this.canvasRedoSubject$=this._canvasRedoSubject.asObservable()}return t.prototype.drawCanvas=function(t){this._canvasDrawSubject.next(t)},t.prototype.clearCanvas=function(){this._canvasClearSubject.next()},t.prototype.undoCanvas=function(t){this._canvasUndoSubject.next(t)},t.prototype.redoCanvas=function(t){this._canvasRedoSubject.next(t)},t}();p.decorators=[{type:e.Injectable}];var d=function(t,e){this.x=t,this.y=e},u=function(){this.shouldFillShape=!1,this.fillStyle=void 0,this.strokeStyle="rgba(0, 0, 0, 1)",this.lineWidth=2,this.lineJoin="round",this.lineCap="round"},v=function(){function t(t,e){this.positionPoint=t||new d(0,0),this.options=e||new u,this.isVisible=!0}return t.prototype.onStopReceived=function(t){},t}(),g=function(t){function e(e,n,i){var o=t.call(this,e,n)||this;return o.radius=i||0,o}return r(e,t),e.prototype.getShapeName=function(){return"CircleShape"},e.prototype.draw=function(t){t.beginPath(),t.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),Object.assign(t,this.options),t.stroke(),this.options.shouldFillShape&&t.fill(),t.closePath()},e.prototype.drawPreview=function(t){this.positionPoint=new d(t.canvas.width/2,t.canvas.height/2),this.radius=this.calculateRadius(t.canvas.width-2,t.canvas.height/2),this.draw(t)},e.prototype.onUpdateReceived=function(t){this.radius=this.calculateRadius(t.x,t.y)},e.prototype.calculateRadius=function(t,e){return Math.sqrt(Math.pow(t-this.positionPoint.x,2)+Math.pow(e-this.positionPoint.y,2))},e}(v),b=function(t){function e(e,n,i,o){var a=t.call(this,e,n)||this;return a.width=i||0,a.height=o||0,a}return r(e,t),e.prototype.getShapeName=function(){return"RectangleShape"},e.prototype.draw=function(t){this.width&&this.height&&(t.beginPath(),Object.assign(t,this.options),t.rect(this.positionPoint.x,this.positionPoint.y,this.width,this.height),t.stroke(),this.options.shouldFillShape&&t.fill(),t.closePath())},e.prototype.drawPreview=function(t){this.positionPoint=new d(2,2),this.width=t.canvas.width-4,this.height=t.canvas.height-4,this.draw(t)},e.prototype.onUpdateReceived=function(t){this.width=t.x-this.positionPoint.x,this.height=t.y-this.positionPoint.y},e}(v),w=function(t){function e(e,n){var i=t.call(this,e,n)||this;return i.linePositions=[],i}return r(e,t),e.prototype.getShapeName=function(){return"FreeHandShape"},e.prototype.draw=function(t){Object.assign(t,this.options),t.beginPath(),t.moveTo(this.positionPoint.x,this.positionPoint.y),t.lineTo(this.positionPoint.x+1,this.positionPoint.y+1);for(var e=0;e<this.linePositions.length;)if(this.linePositions.length-e>2){var n=this.linePositions[e],i=this.linePositions[e+1],o=this.linePositions[e+2];t.bezierCurveTo(n.x,n.y,i.x,i.y,o.x,o.y),e+=2}else{var a=this.linePositions[e];t.lineTo(a.x,a.y),e+=1}t.stroke()},e.prototype.drawPreview=function(t){this.positionPoint=new d(2,2),this.linePositions=[new d(t.canvas.width-5,.3*t.canvas.height),new d(.2*t.canvas.width,.4*t.canvas.height),new d(.6*t.canvas.width,.8*t.canvas.height),new d(t.canvas.width,t.canvas.height)],this.draw(t)},e.prototype.onUpdateReceived=function(t){this.linePositions.push(new d(t.x,t.y))},e}(v),f=function(t){function e(e,n,i){var o=t.call(this,e,n)||this;return o.options.shouldFillShape=!0,o.options.fillStyle=o.options.fillStyle||"yellow",o.radius=i||0,o}return r(e,t),e.prototype.getShapeName=function(){return"SmileyShape"},e.prototype.draw=function(t){t.beginPath(),Object.assign(t,this.options),t.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),t.fill(),t.stroke(),t.beginPath();var e=this.positionPoint.x-.3*this.radius,n=this.positionPoint.x+.3*this.radius,i=this.positionPoint.y-.2*this.radius,o=.1*this.radius;t.arc(e,i,o,0,2*Math.PI,!1),t.arc(n,i,o,0,2*Math.PI,!1),t.fillStyle=this.options.strokeStyle,t.fill(),t.beginPath(),t.arc(this.positionPoint.x,this.positionPoint.y,.7*this.radius,0,Math.PI,!1),t.stroke(),t.closePath()},e.prototype.drawPreview=function(t){this.positionPoint=new d(t.canvas.width/2,t.canvas.height/2),this.radius=this.calculateRadius(t.canvas.width-2,t.canvas.height/2),this.draw(t)},e.prototype.onUpdateReceived=function(t){this.radius=this.calculateRadius(t.x,t.y)},e.prototype.calculateRadius=function(t,e){return Math.sqrt(Math.pow(t-this.positionPoint.x,2)+Math.pow(e-this.positionPoint.y,2))},e}(v),S=function(t){function e(e,n,i,o){var a=t.call(this,e,n)||this;return a.radius=i||0,a.spikes=o||5,a}return r(e,t),e.prototype.getShapeName=function(){return"StarShape"},e.prototype.draw=function(t){Object.assign(t,this.options);var e=Math.PI/2*3,n=this.positionPoint.x,i=this.positionPoint.y,o=Math.PI/this.spikes;t.beginPath(),t.moveTo(this.positionPoint.x,this.positionPoint.y-this.radius);for(var a=0;a<this.spikes;a++)n=this.positionPoint.x+Math.cos(e)*this.radius,i=this.positionPoint.y+Math.sin(e)*this.radius,t.lineTo(n,i),e+=o,n=this.positionPoint.x+Math.cos(e)*(.4*this.radius),i=this.positionPoint.y+Math.sin(e)*(.4*this.radius),t.lineTo(n,i),e+=o,t.stroke();t.lineTo(this.positionPoint.x,this.positionPoint.y-this.radius),t.closePath(),t.stroke(),this.options.shouldFillShape&&t.fill()},e.prototype.drawPreview=function(t){this.positionPoint=new d(t.canvas.width/2,t.canvas.height/2),this.radius=this.calculateRadius(t.canvas.width-2,t.canvas.height/2),this.draw(t)},e.prototype.onUpdateReceived=function(t){this.radius=this.calculateRadius(t.x,t.y)},e.prototype.calculateRadius=function(t,e){return Math.sqrt(Math.pow(t-this.positionPoint.x,2)+Math.pow(e-this.positionPoint.y,2))},e}(v),y=function(t){function e(e,n,i){var o=t.call(this,e,n)||this;return o.endPosition=i||new d(o.positionPoint.x,o.positionPoint.y),o}return r(e,t),e.prototype.getShapeName=function(){return"LineShape"},e.prototype.draw=function(t){this.endPosition&&(t.beginPath(),Object.assign(t,this.options),t.moveTo(this.positionPoint.x,this.positionPoint.y),t.lineTo(this.endPosition.x,this.endPosition.y),t.closePath(),t.stroke())},e.prototype.drawPreview=function(t){this.positionPoint=new d(0,0),this.endPosition=new d(t.canvas.width,t.canvas.height),this.draw(t)},e.prototype.onUpdateReceived=function(t){this.endPosition=new d(t.x,t.y)},e}(v),C=function(){function t(){this.registeredShapesSubject=new n.BehaviorSubject([w,y,b,g,S,f]),this.registeredShapes$=this.registeredShapesSubject.asObservable()}return t.prototype.getShapeConstructorFromShapeName=function(t){return this.getCurrentRegisteredShapes().find((function(e){return(new e).getShapeName()===t}))},t.prototype.getCurrentRegisteredShapes=function(){return this.registeredShapesSubject.getValue()},t.prototype.isRegisteredShape=function(t){return-1!==this.getCurrentRegisteredShapes().indexOf(t)},t.prototype.registerShape=function(t){if(this.isRegisteredShape(t))console.warn("You tried to register a shape:"+t+", but is has already been registered.");else{var e=this.getCurrentRegisteredShapes();e.push(t),this.registeredShapesSubject.next(e)}},t.prototype.registerShapes=function(t){var e=this;this.registeredShapesSubject.next(this.getCurrentRegisteredShapes().concat(t.filter((function(t){return!e.isRegisteredShape(t)||(console.warn("You tried to register a shape:"+t+", but is has already been registered."),!1)}))))},t.prototype.unregisterShape=function(t){this.registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter((function(e){return e!==t})))},t.prototype.unregisterShapes=function(t){this.registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter((function(e){return-1===t.indexOf(e)})))},t}();C.decorators=[{type:e.Injectable}],C.ctorParameters=function(){return[]};var _=function(){function t(t,n,i,o){this.ngZone=t,this.changeDetectorRef=n,this.canvasWhiteboardService=i,this.canvasWhiteboardShapeService=o,this.batchUpdateTimeoutDuration=100,this.drawButtonText="",this.clearButtonText="",this.eraseButtonText="",this.undoButtonText="",this.redoButtonText="",this.saveDataButtonText="",this.strokeColorPickerText="Stroke",this.fillColorPickerText="Fill",this.drawButtonEnabled=!0,this.clearButtonEnabled=!0,this.eraseButtonEnabled=!0,this.undoButtonEnabled=!1,this.redoButtonEnabled=!1,this.saveDataButtonEnabled=!1,this.shouldDownloadDrawing=!0,this.strokeColorPickerEnabled=!1,this.fillColorPickerEnabled=!1,this.lineWidth=2,this.eraserLineWidth=10,this.strokeColor="rgba(0, 0, 0, 1)",this.startingColor="#fff",this.scaleFactor=0,this.drawingEnabled=!1,this.showStrokeColorPicker=!1,this.showFillColorPicker=!1,this.lineJoin="round",this.lineCap="round",this.shapeSelectorEnabled=!0,this.showShapeSelector=!1,this.fillColor="rgba(0,0,0,0)",this.clear=new e.EventEmitter,this.undo=new e.EventEmitter,this.redo=new e.EventEmitter,this.batchUpdate=new e.EventEmitter,this.imageLoaded=new e.EventEmitter,this.save=new e.EventEmitter,this.cachedStrokeColor="",this._canDraw=!0,this._erasingEnabled=!1,this._clientDragging=!1,this._updateHistory=[],this._undoStack=[],this._redoStack=[],this._batchUpdates=[],this._updatesNotDrawn=[],this._canvasWhiteboardServiceSubscriptions=[],this._shapesMap=new Map,this._incompleteShapesMap=new Map,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions()}return Object.defineProperty(t.prototype,"imageUrl",{get:function(){return this._imageUrl},set:function(t){this._imageUrl=t,this._imageElement=null,this._redrawHistory()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"erasingEnabled",{get:function(){return this._erasingEnabled},set:function(t){this._erasingEnabled=t,this._setErasing(t)},enumerable:!1,configurable:!0}),t.prototype.ngOnInit=function(){this._initInputsFromOptions(this.options),this._initCanvasEventListeners(),this._initCanvasServiceObservables(),this.context=this.canvas.nativeElement.getContext("2d"),this._incompleteShapesCanvasContext=this._incompleteShapesCanvas.nativeElement.getContext("2d")},t.prototype.ngOnChanges=function(t){t.options&&!o.isEqual(t.options.currentValue,t.options.previousValue)&&this._initInputsFromOptions(t.options.currentValue)},t.prototype.ngAfterViewInit=function(){this._calculateCanvasWidthAndHeight(),this._redrawHistory()},t.prototype.ngOnDestroy=function(){var t=this;this._unsubscribe(this._resizeSubscription),this._unsubscribe(this._registeredShapesSubscription),this._canvasWhiteboardServiceSubscriptions.forEach((function(e){return t._unsubscribe(e)}))},t.prototype._initInputsFromOptions=function(t){t&&(this._isNullOrUndefined(t.eraserLineWidth)||(this.eraserLineWidth=t.eraserLineWidth),this._isNullOrUndefined(t.eraseButtonClass)||(this.eraseButtonClass=t.eraseButtonClass),this._isNullOrUndefined(t.eraseButtonText)||(this.eraseButtonText=t.eraseButtonText),this._isNullOrUndefined(t.erasingEnabled)||(this.erasingEnabled=t.erasingEnabled),this._isNullOrUndefined(t.customWhiteboardUi)||(this.customWhiteboardUi=t.customWhiteboardUi),this._isNullOrUndefined(t.batchUpdateTimeoutDuration)||(this.batchUpdateTimeoutDuration=t.batchUpdateTimeoutDuration),this._isNullOrUndefined(t.imageUrl)||(this.imageUrl=t.imageUrl),this._isNullOrUndefined(t.aspectRatio)||(this.aspectRatio=t.aspectRatio),this._isNullOrUndefined(t.drawButtonClass)||(this.drawButtonClass=t.drawButtonClass),this._isNullOrUndefined(t.clearButtonClass)||(this.clearButtonClass=t.clearButtonClass),this._isNullOrUndefined(t.undoButtonClass)||(this.undoButtonClass=t.undoButtonClass),this._isNullOrUndefined(t.redoButtonClass)||(this.redoButtonClass=t.redoButtonClass),this._isNullOrUndefined(t.saveDataButtonClass)||(this.saveDataButtonClass=t.saveDataButtonClass),this._isNullOrUndefined(t.drawButtonText)||(this.drawButtonText=t.drawButtonText),this._isNullOrUndefined(t.clearButtonText)||(this.clearButtonText=t.clearButtonText),this._isNullOrUndefined(t.undoButtonText)||(this.undoButtonText=t.undoButtonText),this._isNullOrUndefined(t.redoButtonText)||(this.redoButtonText=t.redoButtonText),this._isNullOrUndefined(t.saveDataButtonText)||(this.saveDataButtonText=t.saveDataButtonText),this._isNullOrUndefined(t.strokeColorPickerText)||(this.strokeColorPickerText=t.strokeColorPickerText),this._isNullOrUndefined(t.fillColorPickerText)||(this.fillColorPickerText=t.fillColorPickerText),this._isNullOrUndefined(t.drawButtonEnabled)||(this.drawButtonEnabled=t.drawButtonEnabled),this._isNullOrUndefined(t.clearButtonEnabled)||(this.clearButtonEnabled=t.clearButtonEnabled),this._isNullOrUndefined(t.undoButtonEnabled)||(this.undoButtonEnabled=t.undoButtonEnabled),this._isNullOrUndefined(t.redoButtonEnabled)||(this.redoButtonEnabled=t.redoButtonEnabled),this._isNullOrUndefined(t.saveDataButtonEnabled)||(this.saveDataButtonEnabled=t.saveDataButtonEnabled),this._isNullOrUndefined(t.strokeColorPickerEnabled)||(this.strokeColorPickerEnabled=t.strokeColorPickerEnabled),this._isNullOrUndefined(t.fillColorPickerEnabled)||(this.fillColorPickerEnabled=t.fillColorPickerEnabled),this._isNullOrUndefined(t.lineWidth)||(this.lineWidth=t.lineWidth),this._isNullOrUndefined(t.strokeColor)||(this.strokeColor=t.strokeColor),this._isNullOrUndefined(t.shouldDownloadDrawing)||(this.shouldDownloadDrawing=t.shouldDownloadDrawing),this._isNullOrUndefined(t.startingColor)||(this.startingColor=t.startingColor),this._isNullOrUndefined(t.scaleFactor)||(this.scaleFactor=t.scaleFactor),this._isNullOrUndefined(t.drawingEnabled)||(this.drawingEnabled=t.drawingEnabled),this._isNullOrUndefined(t.downloadedFileName)||(this.downloadedFileName=t.downloadedFileName),this._isNullOrUndefined(t.lineJoin)||(this.lineJoin=t.lineJoin),this._isNullOrUndefined(t.lineCap)||(this.lineCap=t.lineCap),this._isNullOrUndefined(t.shapeSelectorEnabled)||(this.shapeSelectorEnabled=t.shapeSelectorEnabled),this._isNullOrUndefined(t.showShapeSelector)||(this.showShapeSelector=t.showShapeSelector),this._isNullOrUndefined(t.fillColor)||(this.fillColor=t.fillColor),this._isNullOrUndefined(t.showStrokeColorPicker)||(this.showStrokeColorPicker=t.showStrokeColorPicker),this._isNullOrUndefined(t.showFillColorPicker)||(this.showFillColorPicker=t.showFillColorPicker))},t.prototype._isNullOrUndefined=function(t){return null==t},t.prototype._initCanvasEventListeners=function(){var t=this;this.ngZone.runOutsideAngular((function(){t._resizeSubscription=n.fromEvent(window,"resize").pipe(i.debounceTime(200),i.distinctUntilChanged()).subscribe((function(){t.ngZone.run((function(){t._redrawCanvasOnResize()}))}))})),window.addEventListener("keydown",this._canvasKeyDown.bind(this),!1)},t.prototype._initCanvasServiceObservables=function(){var t=this;this._canvasWhiteboardServiceSubscriptions.push(this.canvasWhiteboardService.canvasDrawSubject$.subscribe((function(e){return t.drawUpdates(e)}))),this._canvasWhiteboardServiceSubscriptions.push(this.canvasWhiteboardService.canvasClearSubject$.subscribe((function(){return t.clearCanvas()}))),this._canvasWhiteboardServiceSubscriptions.push(this.canvasWhiteboardService.canvasUndoSubject$.subscribe((function(e){return t._undoCanvas(e)}))),this._canvasWhiteboardServiceSubscriptions.push(this.canvasWhiteboardService.canvasRedoSubject$.subscribe((function(e){return t._redoCanvas(e)}))),this._registeredShapesSubscription=this.canvasWhiteboardShapeService.registeredShapes$.subscribe((function(e){t.selectedShapeConstructor&&t.canvasWhiteboardShapeService.isRegisteredShape(t.selectedShapeConstructor)||(t.selectedShapeConstructor=e[0])}))},t.prototype._calculateCanvasWidthAndHeight=function(){this.context.canvas.width=this.canvas.nativeElement.parentNode.clientWidth,this.aspectRatio?this.context.canvas.height=this.canvas.nativeElement.parentNode.clientWidth*this.aspectRatio:this.context.canvas.height=this.canvas.nativeElement.parentNode.clientHeight,this._incompleteShapesCanvasContext.canvas.width=this.context.canvas.width,this._incompleteShapesCanvasContext.canvas.height=this.context.canvas.height},t.prototype._loadImage=function(t){var e=this;if(this._canDraw=!1,this._imageElement)return this._canDraw=!0,void(t&&t());this._imageElement=new Image,this._imageElement.addEventListener("load",(function(){e._canDraw=!0,t&&t(),e.imageLoaded.emit(!0)})),this._imageElement.src=this.imageUrl},t.prototype.clearCanvasLocal=function(){this.clearCanvas(),this.clear.emit(!0)},t.prototype.clearCanvas=function(){this._removeCanvasData(),this._redoStack=[]},t.prototype._removeCanvasData=function(t){this._shapesMap=new Map,this._clientDragging=!1,this._updateHistory=[],this._undoStack=[],this._redrawBackground(t)},t.prototype._redrawBackground=function(t){var e=this;this.context&&(this.imageUrl?this._loadImage((function(){e.context.save(),e._drawImage(e.context,e._imageElement,0,0,e.context.canvas.width,e.context.canvas.height,.5,.5),e.context.restore(),e._drawMissingUpdates(),t&&t()})):(this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height),this._drawStartingColor(),t&&t()))},t.prototype._drawStartingColor=function(){var t=this.context.fillStyle;this.context.save(),this.context.fillStyle=this.startingColor,this.context.fillRect(0,0,this.context.canvas.width,this.context.canvas.height),this.context.fillStyle=t,this.context.restore()},t.prototype.getDrawingEnabled=function(){return this.drawingEnabled},t.prototype.toggleDrawingEnabled=function(){this.drawingEnabled=!this.drawingEnabled,this.drawingEnabled&&this.erasingEnabled&&(this.erasingEnabled=!1)},t.prototype.setDrawingEnabled=function(t){this.drawingEnabled=t,this.drawingEnabled&&this.erasingEnabled&&(this.erasingEnabled=!1)},t.prototype.toggleErasingEnabled=function(){this.erasingEnabled=!this._erasingEnabled,this.drawingEnabled&&this.erasingEnabled&&this.setDrawingEnabled(!1)},t.prototype.changeStrokeColor=function(t){this.strokeColor=t,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions(),this.changeDetectorRef.detectChanges()},t.prototype.changeFillColor=function(t){this.fillColor=t,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions(),this.changeDetectorRef.detectChanges()},t.prototype.undoLocal=function(){var t=this;this.doUndo((function(e){t._redoStack.push(e),t.undo.emit(e)}))},t.prototype.doUndo=function(t){if(this._undoStack.length){var e=this._undoStack.pop();this._undoCanvas(e),t&&t(e)}},t.prototype._undoCanvas=function(t){if(this._shapesMap.has(t)){var e=this._shapesMap.get(t);e&&(e.isVisible=!1),this.drawAllShapes()}},t.prototype.redoLocal=function(){var t=this;this.doRedo((function(e){t._undoStack.push(e),t.redo.emit(e)}))},t.prototype.doRedo=function(t){if(this._redoStack.length){var e=this._redoStack.pop();this._redoCanvas(e),t&&t(e)}},t.prototype._redoCanvas=function(t){if(this._shapesMap.has(t)){var e=this._shapesMap.get(t);e&&(e.isVisible=!0),this.drawAllShapes()}},t.prototype.canvasUserEvents=function(t){if((this.drawingEnabled||this._erasingEnabled)&&this._canDraw&&(this._clientDragging||"mousemove"!==t.type&&"touchmove"!==t.type&&"mouseout"!==t.type&&"touchcancel"!==t.type&&"mouseup"!==t.type&&"touchend"!==t.type&&"mouseout"!==t.type)&&1!==t.button){var e,n;t.target!==this._incompleteShapesCanvas.nativeElement&&t.target!==this.canvas.nativeElement||t.preventDefault();var i=this._getCanvasEventPosition(t);switch(e=new l(i.x,i.y),t.type){case"mousedown":case"touchstart":this._clientDragging=!0,this._lastUUID=this._generateUUID(),n=c.START,this._redoStack=[],this._addCurrentShapeDataToAnUpdate(e);break;case"mousemove":case"touchmove":if(!this._clientDragging)return;n=c.DRAG;break;case"touchcancel":case"mouseup":case"touchend":case"mouseout":this._clientDragging=!1,n=c.STOP,this._undoStack.push(this._lastUUID)}e.UUID=this._lastUUID,e.type=n,this._draw(e),this._prepareToSendUpdate(e)}},t.prototype._getCanvasEventPosition=function(t){var e=this.context.canvas.getBoundingClientRect(),n=t.touches&&t.touches.length?t.touches[0]:null;n||(n=t.changedTouches&&t.changedTouches.length?t.changedTouches[0]:null);var i=n||t,o=e.width/this.context.canvas.width,a=e.height/this.context.canvas.height,s=i.clientX-e.left,r=i.clientY-e.top;return s/=this.scaleFactor||o,r/=this.scaleFactor||a,new d(s/this.context.canvas.width,r/this.context.canvas.height)},t.prototype._prepareToSendUpdate=function(t){this._prepareUpdateForBatchDispatch(t)},t.prototype._canvasKeyDown=function(t){(t.ctrlKey||t.metaKey)&&(90===t.keyCode&&this.undoButtonEnabled&&(t.preventDefault(),this.doUndo()),89===t.keyCode&&this.redoButtonEnabled&&(t.preventDefault(),this.doRedo()),83!==t.keyCode&&115!==t.keyCode||(t.preventDefault(),this.saveLocal()))},t.prototype._redrawCanvasOnResize=function(){this._calculateCanvasWidthAndHeight(),this._redrawHistory()},t.prototype._redrawHistory=function(){var t=this,e=function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(h(arguments[e]));return t}(this._updateHistory);this._removeCanvasData((function(){e.forEach((function(e){t._draw(e)}))}))},t.prototype._draw=function(t){var e;switch(this._updateHistory.push(t),(t=Object.assign(new l,t,{x:t.x*this.context.canvas.width,y:t.y*this.context.canvas.height})).type){case c.START:var n=this.canvasWhiteboardShapeService.getShapeConstructorFromShapeName(t.selectedShape);n&&(e=new n(new d(t.x,t.y),Object.assign(new u,t.selectedShapeOptions))),this._incompleteShapesMap.set(t.UUID,e),this._drawIncompleteShapes();break;case c.DRAG:(e=this._incompleteShapesMap.get(t.UUID))&&e.onUpdateReceived(t),this._drawIncompleteShapes();break;case c.STOP:(e=this._incompleteShapesMap.get(t.UUID)).onStopReceived(t),this._shapesMap.set(t.UUID,e),this._incompleteShapesMap.delete(t.UUID),this._swapCompletedShapeToActualCanvas(e)}},t.prototype._drawIncompleteShapes=function(){var t=this;this._resetIncompleteShapeCanvas(),this._incompleteShapesMap.forEach((function(e){e.isVisible&&e.draw(t._incompleteShapesCanvasContext)}))},t.prototype._swapCompletedShapeToActualCanvas=function(t){this._drawIncompleteShapes(),t.isVisible&&t.draw(this.context)},t.prototype._resetIncompleteShapeCanvas=function(){this._incompleteShapesCanvasContext.clearRect(0,0,this._incompleteShapesCanvasContext.canvas.width,this._incompleteShapesCanvasContext.canvas.height),this._incompleteShapesCanvasContext.fillStyle="transparent",this._incompleteShapesCanvasContext.fillRect(0,0,this._incompleteShapesCanvasContext.canvas.width,this._incompleteShapesCanvasContext.canvas.height)},t.prototype.drawAllShapes=function(){var t=this;this._redrawBackground((function(){t._shapesMap.forEach((function(e){e.isVisible&&e.draw(t.context)}))}))},t.prototype._addCurrentShapeDataToAnUpdate=function(t){!t.selectedShape&&this.selectedShapeConstructor&&(t.selectedShape=(new this.selectedShapeConstructor).getShapeName()),t.selectedShapeOptions||(t.selectedShapeOptions=Object.assign(new u,this.generateShapePreviewOptions(),{lineWidth:this.erasingEnabled?this.eraserLineWidth:this.lineWidth}))},t.prototype.generateShapePreviewOptions=function(){return Object.assign(new u,{shouldFillShape:!!this.fillColor,fillStyle:this.fillColor,strokeStyle:this.strokeColor,lineWidth:this.lineWidth,lineJoin:this.lineJoin,lineCap:this.lineCap})},t.prototype._prepareUpdateForBatchDispatch=function(t){var e=this;this._batchUpdates.push(o.cloneDeep(t)),this._updateTimeout||(this._updateTimeout=setTimeout((function(){e.batchUpdate.emit(e._batchUpdates),e._batchUpdates=[],e._updateTimeout=null}),this.batchUpdateTimeoutDuration))},t.prototype.drawUpdates=function(t){var e=this;this._canDraw?(this._drawMissingUpdates(),t.forEach((function(t){e._draw(t)}))):this._updatesNotDrawn=this._updatesNotDrawn.concat(t)},t.prototype._drawMissingUpdates=function(){var t=this;if(this._updatesNotDrawn.length>0){var e=this._updatesNotDrawn;this._updatesNotDrawn=[],e.forEach((function(e){t._draw(e)}))}},t.prototype._drawImage=function(t,e,n,i,o,a,s,r){2===arguments.length&&(n=i=0,o=t.canvas.width,a=t.canvas.height),s<0?s=0:s>1&&(s=1),r<0?r=0:r>1&&(r=1);var h,c,l,p,d=e.width,u=e.height,v=Math.min(o/d,a/u),g=d*v,b=u*v,w=1;g<o&&(w=o/g),Math.abs(w-1)<1e-14&&b<a&&(w=a/b),(h=(d-(l=d/((g*=w)/o)))*s)<0&&(h=0),(c=(u-(p=u/((b*=w)/a)))*r)<0&&(c=0),l>d&&(l=d),p>u&&(p=u),t.drawImage(e,h,c,l,p,n,i,o,a)},t.prototype.generateCanvasDataUrl=function(t,e){return void 0===t&&(t="image/png"),void 0===e&&(e=1),this.context.canvas.toDataURL(t,e)},t.prototype.generateCanvasBlob=function(t,e,n){var i,o=this;void 0===e&&(e="image/png"),void 0===n&&(n=1),void 0!==this.context.canvas.toBlob?i=this.context.canvas.toBlob.bind(this.context.canvas):void 0!==this.context.canvas.msToBlob&&(i=function(t){t&&t(o.context.canvas.msToBlob())}),i&&i((function(n){t&&n&&t(n,e)}),e,n)},t.prototype.downloadCanvasImage=function(t,e,n){if(void 0===t&&(t="image/png"),void 0===window.navigator.msSaveOrOpenBlob){var i=document.createElement("a");i.setAttribute("href",e||this.generateCanvasDataUrl(t));var o=n||(this.downloadedFileName?this.downloadedFileName:"canvas_drawing_"+(new Date).valueOf());i.setAttribute("download",o+this._generateDataTypeString(t)),document.body.appendChild(i),i.click(),document.body.removeChild(i)}else e?this._saveCanvasBlob(e,t):this.generateCanvasBlob(this._saveCanvasBlob.bind(this),t)},t.prototype._saveCanvasBlob=function(t,e){void 0===e&&(e="image/png"),window.navigator.msSaveOrOpenBlob(t,"canvas_drawing_"+(new Date).valueOf()+this._generateDataTypeString(e))},t.prototype.generateCanvasData=function(t,e,n){void 0===e&&(e="image/png"),void 0===n&&(n=1),void 0===window.navigator.msSaveOrOpenBlob?t&&t(this.generateCanvasDataUrl(e,n)):this.generateCanvasBlob(t,e,n)},t.prototype.saveLocal=function(t){var e=this;void 0===t&&(t="image/png"),this.generateCanvasData((function(n){e.save.emit(n),e.shouldDownloadDrawing&&e.downloadCanvasImage(t,n)}))},t.prototype._generateDataTypeString=function(t){return t?"."+t.split("/")[1]:""},t.prototype.toggleStrokeColorPicker=function(t){this.showStrokeColorPicker=this._isNullOrUndefined(t)?!this.showStrokeColorPicker:t},t.prototype.toggleFillColorPicker=function(t){this.showFillColorPicker=this._isNullOrUndefined(t)?!this.showFillColorPicker:t},t.prototype.toggleShapeSelector=function(t){this.showShapeSelector=this._isNullOrUndefined(t)?!this.showShapeSelector:t},t.prototype.selectShape=function(t){this.selectedShapeConstructor=t},t.prototype.getDrawingHistory=function(){return o.cloneDeep(this._updateHistory)},t.prototype._setErasing=function(t){t?(this.context.globalCompositeOperation="destination-out",this.cachedStrokeColor=(" "+this.strokeColor).slice(1),this.changeStrokeColor("rgba(255,255,255,1)"),this.changeDetectorRef.detectChanges()):(this.context.globalCompositeOperation="source-over",this.changeStrokeColor((" "+this.cachedStrokeColor).slice(1)),this.cachedStrokeColor="",this.changeDetectorRef.detectChanges())},t.prototype._unsubscribe=function(t){t&&t.unsubscribe()},t.prototype._generateUUID=function(){return this._random4()+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+this._random4()+this._random4()},t.prototype._random4=function(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)},t}();_.decorators=[{type:e.Component,args:[{selector:"drizm-whiteboard",template:'<div class="canvas_wrapper_div">\r\n  <div class="canvas_whiteboard_buttons" *ngIf="!customWhiteboardUi; else customWhiteboardUi">\r\n    <canvas-whiteboard-shape-selector\r\n      *ngIf="shapeSelectorEnabled"\r\n      [showShapeSelector]="showShapeSelector"\r\n      [selectedShapeConstructor]="selectedShapeConstructor"\r\n      [shapeOptions]="generateShapePreviewOptions()"\r\n      (toggleShapeSelector)="toggleShapeSelector($event)"\r\n      (shapeSelected)="selectShape($event)"></canvas-whiteboard-shape-selector>\r\n\r\n    <canvas-whiteboard-colorpicker\r\n      *ngIf="fillColorPickerEnabled"\r\n      [previewText]="fillColorPickerText"\r\n      [showColorPicker]="showFillColorPicker"\r\n      [selectedColor]="fillColor"\r\n      (toggleColorPicker)="toggleFillColorPicker($event)"\r\n      (colorSelected)="changeFillColor($event)">\r\n    </canvas-whiteboard-colorpicker>\r\n\r\n    <canvas-whiteboard-colorpicker\r\n      *ngIf="strokeColorPickerEnabled"\r\n      [previewText]="strokeColorPickerText"\r\n      [showColorPicker]="showStrokeColorPicker"\r\n      [selectedColor]="cachedStrokeColor || strokeColor"\r\n      (toggleColorPicker)="toggleStrokeColorPicker($event)"\r\n      (colorSelected)="changeStrokeColor($event)">\r\n    </canvas-whiteboard-colorpicker>\r\n\r\n\r\n    <button *ngIf="drawButtonEnabled" (click)="toggleDrawingEnabled()"\r\n            [class.canvas_whiteboard_button-draw_animated]="getDrawingEnabled()"\r\n            class="canvas_whiteboard_button canvas_whiteboard_button-draw" type="button">\r\n      <i [class]="drawButtonClass" aria-hidden="true"></i> {{drawButtonText}}\r\n    </button>\r\n\r\n    <button *ngIf="clearButtonEnabled" (click)="clearCanvasLocal()" type="button"\r\n            class="canvas_whiteboard_button canvas_whiteboard_button-clear">\r\n      <i [class]="clearButtonClass" aria-hidden="true"></i> {{clearButtonText}}\r\n    </button>\r\n\r\n    <button *ngIf="undoButtonEnabled" (click)="undoLocal()" type="button"\r\n            class="canvas_whiteboard_button canvas_whiteboard_button-undo">\r\n      <i [class]="undoButtonClass" aria-hidden="true"></i> {{undoButtonText}}\r\n    </button>\r\n\r\n    <button *ngIf="redoButtonEnabled" (click)="redoLocal()" type="button"\r\n            class="canvas_whiteboard_button canvas_whiteboard_button-redo">\r\n      <i [class]="redoButtonClass" aria-hidden="true"></i> {{redoButtonText}}\r\n    </button>\r\n    <button *ngIf="saveDataButtonEnabled" (click)="saveLocal()" type="button"\r\n            class="canvas_whiteboard_button canvas_whiteboard_button-save">\r\n      <i [class]="saveDataButtonClass" aria-hidden="true"></i> {{saveDataButtonText}}\r\n    </button>\r\n\r\n    <button *ngIf="eraseButtonEnabled" (click)="toggleErasingEnabled()" type="button"\r\n            class="canvas_whiteboard_button canvas_whiteboard_button-clear"\r\n            [class.canvas_whiteboard_button-draw_animated]="erasingEnabled">\r\n      <i [class]="eraseButtonClass" aria-hidden="true"></i> {{eraseButtonText}}\r\n    </button>\r\n  </div>\r\n\r\n  <canvas #canvas class="canvas_whiteboard"></canvas>\r\n  <canvas\r\n    #incompleteShapesCanvas class="incomplete_shapes_canvas_whiteboard"\r\n    (mousedown)="canvasUserEvents($event)" (mouseup)="canvasUserEvents($event)"\r\n    (mousemove)="canvasUserEvents($event)" (mouseout)="canvasUserEvents($event)"\r\n    (touchstart)="canvasUserEvents($event)" (touchmove)="canvasUserEvents($event)"\r\n    (touchend)="canvasUserEvents($event)" (touchcancel)="canvasUserEvents($event)">\r\n  </canvas>\r\n</div>\r\n',viewProviders:[_],styles:[".canvas_whiteboard_button{display:inline-block;outline:0;padding-top:7px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.canvas_whiteboard_buttons{z-index:3}@media (max-width:400px){.canvas_whiteboard_buttons{position:absolute;z-index:3;top:0;width:100%;text-align:center}}@media (min-width:401px){.canvas_whiteboard_buttons{position:absolute;right:0;color:#fff}}.canvas_whiteboard_buttons{padding:5px}.canvas_whiteboard_buttons>button{margin:5px}.canvas_whiteboard_button-draw_animated{-webkit-animation:pulsate 1s ease-out;-webkit-animation-iteration-count:infinite}@-webkit-keyframes pulsate{0%{-webkit-transform:scale(.1);opacity:0}50%{opacity:1}to{-webkit-transform:scale(1.2);opacity:0}}.canvas_wrapper_div{width:100%;height:100%}.canvas_whiteboard_button-clear{padding-top:5px}.canvas_whiteboard{position:absolute;z-index:1}.incomplete_shapes_canvas_whiteboard{position:absolute;z-index:2}"]}]}],_.ctorParameters=function(){return[{type:e.NgZone},{type:e.ChangeDetectorRef},{type:p},{type:C}]},_.propDecorators={options:[{type:e.Input}],batchUpdateTimeoutDuration:[{type:e.Input}],imageUrl:[{type:e.Input}],customWhiteboardUi:[{type:e.Input}],aspectRatio:[{type:e.Input}],drawButtonClass:[{type:e.Input}],clearButtonClass:[{type:e.Input}],eraseButtonClass:[{type:e.Input}],undoButtonClass:[{type:e.Input}],redoButtonClass:[{type:e.Input}],saveDataButtonClass:[{type:e.Input}],drawButtonText:[{type:e.Input}],clearButtonText:[{type:e.Input}],eraseButtonText:[{type:e.Input}],undoButtonText:[{type:e.Input}],redoButtonText:[{type:e.Input}],saveDataButtonText:[{type:e.Input}],strokeColorPickerText:[{type:e.Input}],fillColorPickerText:[{type:e.Input}],drawButtonEnabled:[{type:e.Input}],clearButtonEnabled:[{type:e.Input}],eraseButtonEnabled:[{type:e.Input}],undoButtonEnabled:[{type:e.Input}],redoButtonEnabled:[{type:e.Input}],saveDataButtonEnabled:[{type:e.Input}],shouldDownloadDrawing:[{type:e.Input}],strokeColorPickerEnabled:[{type:e.Input}],fillColorPickerEnabled:[{type:e.Input}],lineWidth:[{type:e.Input}],eraserLineWidth:[{type:e.Input}],strokeColor:[{type:e.Input}],startingColor:[{type:e.Input}],scaleFactor:[{type:e.Input}],drawingEnabled:[{type:e.Input}],erasingEnabled:[{type:e.Input}],showStrokeColorPicker:[{type:e.Input}],showFillColorPicker:[{type:e.Input}],downloadedFileName:[{type:e.Input}],lineJoin:[{type:e.Input}],lineCap:[{type:e.Input}],shapeSelectorEnabled:[{type:e.Input}],showShapeSelector:[{type:e.Input}],fillColor:[{type:e.Input}],clear:[{type:e.Output}],undo:[{type:e.Output}],redo:[{type:e.Output}],batchUpdate:[{type:e.Output}],imageLoaded:[{type:e.Output}],save:[{type:e.Output}],canvas:[{type:e.ViewChild,args:["canvas",{static:!0}]}],_incompleteShapesCanvas:[{type:e.ViewChild,args:["incompleteShapesCanvas",{static:!0}]}]};var m=function(){function t(t,n){this.elementRef=t,this.canvasWhiteboardShapeService=n,this.showShapeSelector=!1,this.toggleShapeSelector=new e.EventEmitter,this.shapeSelected=new e.EventEmitter,this.registeredShapes$=this.canvasWhiteboardShapeService.registeredShapes$}return t.prototype.closeOnExternalClick=function(t){!this.elementRef.nativeElement.contains(t.target)&&this.showShapeSelector&&this.toggleShapeSelector.emit(!1)},t.prototype.selectShape=function(t){this.shapeSelected.emit(t),this.doToggleShapeSelector(null)},t.prototype.doToggleShapeSelector=function(t){t&&t.preventDefault(),this.toggleShapeSelector.emit(!this.showShapeSelector)},t}();m.decorators=[{type:e.Component,args:[{selector:"canvas-whiteboard-shape-selector",template:'<div *ngIf="!showShapeSelector" (click)="doToggleShapeSelector($event)"\r\n     class="canvas-whiteboard-shape-selector-selected-preview">\r\n  <canvas-whiteboard-shape-preview\r\n    [shapeConstructor]="selectedShapeConstructor"\r\n    [shapeOptions]="shapeOptions"></canvas-whiteboard-shape-preview>\r\n</div>\r\n<div class="canvas-whiteboard-shape-selector-wrapper" *ngIf="showShapeSelector">\r\n  <canvas-whiteboard-shape-preview\r\n    *ngFor="let shapeConstructor of registeredShapes$ | async"\r\n    [shapeConstructor]="shapeConstructor"\r\n    [shapeOptions]="shapeOptions"\r\n    (click)="selectShape(shapeConstructor)"></canvas-whiteboard-shape-preview>\r\n</div>\r\n',styles:[".canvas-whiteboard-shape-selector-selected-preview{vertical-align:bottom;display:inline-block}.canvas-whiteboard-shape-selector-wrapper{display:block;padding:4px;border:1px solid #afafaf}"]}]}],m.ctorParameters=function(){return[{type:e.ElementRef},{type:C}]},m.propDecorators={showShapeSelector:[{type:e.Input}],selectedShapeConstructor:[{type:e.Input}],shapeOptions:[{type:e.Input}],toggleShapeSelector:[{type:e.Output}],shapeSelected:[{type:e.Output}],closeOnExternalClick:[{type:e.HostListener,args:["document:touchstart",["$event"]]},{type:e.HostListener,args:["document:mousedown",["$event"]]}]};var x=function(){function t(t){this.elementRef=t,this.selectedColor="rgba(0,0,0,1)",this.showColorPicker=!1,this.toggleColorPicker=new e.EventEmitter,this.colorSelected=new e.EventEmitter,this.secondaryColorSelected=new e.EventEmitter}return t.prototype.closeOnExternalClick=function(t){!this.elementRef.nativeElement.contains(t.target)&&this.showColorPicker&&this.toggleColorPicker.emit(!1)},t.prototype.ngOnInit=function(){this._context=this.canvas.nativeElement.getContext("2d"),this.createColorPalette()},t.prototype.createColorPalette=function(){var t=this._context.createLinearGradient(0,0,this._context.canvas.width,0);t.addColorStop(0,"rgb(255, 0, 0)"),t.addColorStop(.15,"rgb(255, 0, 255)"),t.addColorStop(.33,"rgb(0, 0, 255)"),t.addColorStop(.49,"rgb(0, 255, 255)"),t.addColorStop(.67,"rgb(0, 255, 0)"),t.addColorStop(.84,"rgb(255, 255, 0)"),t.addColorStop(1,"rgb(255, 0, 0)"),this._context.fillStyle=t,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height),(t=this._context.createLinearGradient(0,0,0,this._context.canvas.height)).addColorStop(0,"rgba(255, 255, 255, 1)"),t.addColorStop(.5,"rgba(255, 255, 255, 0)"),t.addColorStop(.5,"rgba(0, 0, 0, 0)"),t.addColorStop(1,"rgba(0, 0, 0, 1)"),this._context.fillStyle=t,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height)},t.prototype.doToggleColorPicker=function(t){t&&t.preventDefault(),this.toggleColorPicker.emit(!this.showColorPicker)},t.prototype.determineColorFromCanvas=function(t){var e=this._context.canvas.getBoundingClientRect(),n=this._context.getImageData(t.clientX-e.left,t.clientY-e.top,1,1);return"rgba("+n.data[0]+", "+n.data[1]+", "+n.data[2]+", "+n.data[3]+")"},t.prototype.selectColor=function(t){this.colorSelected.emit(t),this.doToggleColorPicker(null)},t}();x.decorators=[{type:e.Component,args:[{selector:"canvas-whiteboard-colorpicker",template:'<div [hidden]="showColorPicker" class="canvas-whiteboard-colorpicker-input"\r\n     (click)="doToggleColorPicker($event)">\r\n  <div class="selected-color-type-wrapper">{{previewText}}</div>\r\n  <div class="selected-color-preview" [style.background]="selectedColor"></div>\r\n</div>\r\n<div [hidden]="!showColorPicker" class="canvas-whiteboard-colorpicker-wrapper">\r\n  <div (click)="selectColor(\'transparent\')" class="transparent-color">Transparent</div>\r\n  <canvas #canvaswhiteboardcolorpicker class="canvas-whiteboard-colorpicker" width="284" height="155"\r\n          (click)="selectColor(determineColorFromCanvas($event))"></canvas>\r\n</div>\r\n',styles:[".selected-color-preview{width:100%;height:20%;position:absolute;bottom:0;left:0}.selected-color-type-wrapper{display:inline-block;height:100%;width:100%;text-align:center;font-size:14px;color:#000}.transparent-color{font-size:14px}.canvas-whiteboard-colorpicker-wrapper{border:1px solid #afafaf;color:#000}@media (min-width:401px){.canvas-whiteboard-colorpicker-wrapper{position:absolute}}.canvas-whiteboard-colorpicker-input{display:inline-block;position:relative;width:44px;height:44px;margin:5px;cursor:pointer;color:#000}"]}]}],x.ctorParameters=function(){return[{type:e.ElementRef}]},x.propDecorators={previewText:[{type:e.Input}],selectedColor:[{type:e.Input}],canvas:[{type:e.ViewChild,args:["canvaswhiteboardcolorpicker",{static:!0}]}],showColorPicker:[{type:e.Input}],toggleColorPicker:[{type:e.Output}],colorSelected:[{type:e.Output}],secondaryColorSelected:[{type:e.Output}],closeOnExternalClick:[{type:e.HostListener,args:["document:touchstart",["$event"]]},{type:e.HostListener,args:["document:mousedown",["$event"]]}]};var k=function(){function t(){}return t.prototype.ngAfterViewInit=function(){this.drawShapePreview()},t.prototype.ngOnChanges=function(t){(t.shapeConstructor||t.shapeOptions)&&this.drawShapePreview()},t.prototype.drawShapePreview=function(){if(this.canvas){var t=this.canvas.nativeElement.getContext("2d");t.clearRect(0,0,t.canvas.width,t.canvas.height),new this.shapeConstructor(new d(0,0),Object.assign(new u,this.shapeOptions)).drawPreview(t)}},t}();k.decorators=[{type:e.Component,args:[{selector:"canvas-whiteboard-shape-preview",template:'<canvas #canvasWhiteboardShapePreview width="50px" height="50px"\r\n        class="canvas-whiteboard-shape-preview-canvas"></canvas>\r\n',styles:[".canvas-whiteboard-shape-preview-canvas{cursor:pointer}"]}]}],k.propDecorators={shapeConstructor:[{type:e.Input}],shapeOptions:[{type:e.Input}],canvas:[{type:e.ViewChild,args:["canvasWhiteboardShapePreview"]}]};var P=function(){};P.decorators=[{type:e.NgModule,args:[{declarations:[_,x,m,k],imports:[a.CommonModule],providers:[p,C],exports:[_]}]}],t.CanvasWhiteboardColorPickerComponent=x,t.CanvasWhiteboardComponent=_,t.CanvasWhiteboardModule=P,t.CanvasWhiteboardPoint=d,t.CanvasWhiteboardService=p,t.CanvasWhiteboardShape=v,t.CanvasWhiteboardShapeOptions=u,t.CanvasWhiteboardShapePreviewComponent=k,t.CanvasWhiteboardShapeSelectorComponent=m,t.CanvasWhiteboardShapeService=C,t.CanvasWhiteboardUpdate=l,t.CircleShape=g,t.FreeHandShape=w,t.LineShape=y,t.RectangleShape=b,t.SmileyShape=f,t.StarShape=S,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=drizm-ng-whiteboard.umd.min.js.map