diff --git a/README.md b/README.md index 85d4ded8..0592452a 100644 --- a/README.md +++ b/README.md @@ -370,6 +370,8 @@ export class AppComponent { } } ``` +### Requesting the full update history so far +Can be called via the method `getDrawingHistory(): CanvasWhiteboardUpdate[]`. The items will be deep cloned for consistency using lodash. ## Saving drawn canvas as an image In order to save drawn images you can either click the Save button in the canvas, diff --git a/dist/README.md b/dist/README.md index 85d4ded8..0592452a 100644 --- a/dist/README.md +++ b/dist/README.md @@ -370,6 +370,8 @@ export class AppComponent { } } ``` +### Requesting the full update history so far +Can be called via the method `getDrawingHistory(): CanvasWhiteboardUpdate[]`. The items will be deep cloned for consistency using lodash. ## Saving drawn canvas as an image In order to save drawn images you can either click the Save button in the canvas, diff --git a/dist/bundles/ng2-canvas-whiteboard.umd.js b/dist/bundles/ng2-canvas-whiteboard.umd.js index 1d970f87..fff98a1d 100644 --- a/dist/bundles/ng2-canvas-whiteboard.umd.js +++ b/dist/bundles/ng2-canvas-whiteboard.umd.js @@ -1,8 +1,8 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/index'), require('rxjs/operators'), require('@angular/common')) : - typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/index', 'rxjs/operators', '@angular/common'], factory) : - (factory((global.ng = global.ng || {}, global.ng.ng2CanvasWhiteboard = global.ng.ng2CanvasWhiteboard || {}),global.ng.core,global.rxjs_index,global.rxjs_operators,global.ng.common)); -}(this, (function (exports,_angular_core,rxjs_index,rxjs_operators,_angular_common) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/index'), require('rxjs/operators'), require('lodash'), require('@angular/common')) : + typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/index', 'rxjs/operators', 'lodash', '@angular/common'], factory) : + (factory((global.ng = global.ng || {}, global.ng.ng2CanvasWhiteboard = global.ng.ng2CanvasWhiteboard || {}),global.ng.core,global.rxjs_index,global.rxjs_operators,global.lodash,global.ng.common)); +}(this, (function (exports,_angular_core,rxjs_index,rxjs_operators,lodash,_angular_common) { 'use strict'; var __extends = (undefined && undefined.__extends) || (function () { var extendStatics = Object.setPrototypeOf || @@ -1426,7 +1426,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () { */ CanvasWhiteboardComponent.prototype._prepareUpdateForBatchDispatch = function (update) { var _this = this; - this._batchUpdates.push(update); + this._batchUpdates.push(lodash.cloneDeep(update)); if (!this._updateTimeout) { this._updateTimeout = setTimeout(function () { _this.onBatchUpdate.emit(_this._batchUpdates); @@ -1714,6 +1714,14 @@ var CanvasWhiteboardComponent = /** @class */ (function () { CanvasWhiteboardComponent.prototype.selectShape = function (newShapeBlueprint) { this.selectedShapeConstructor = newShapeBlueprint; }; + /** + * Returns a deep copy of the current drawing history for the canvas. + * The deep copy is returned because we don't want anyone to mutate the current history + * @return {?} + */ + CanvasWhiteboardComponent.prototype.getDrawingHistory = function () { + return lodash.cloneDeep(this._updateHistory); + }; /** * Unsubscribe from a given subscription if it is active * @param {?} subscription diff --git a/dist/bundles/ng2-canvas-whiteboard.umd.min.js b/dist/bundles/ng2-canvas-whiteboard.umd.min.js index 6a2b02d3..c294ca94 100644 --- a/dist/bundles/ng2-canvas-whiteboard.umd.min.js +++ b/dist/bundles/ng2-canvas-whiteboard.umd.min.js @@ -1,3 +1,3 @@ -!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("rxjs/index"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs/index","rxjs/operators","@angular/common"],factory):factory((global.ng=global.ng||{},global.ng.ng2CanvasWhiteboard=global.ng.ng2CanvasWhiteboard||{}),global.ng.core,global.rxjs_index,global.rxjs_operators,global.ng.common)}(this,function(exports,_angular_core,rxjs_index,rxjs_operators,_angular_common){"use strict";var __extends=function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}(),CanvasWhiteboardUpdateType={START:0,DRAG:1,STOP:2};CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.START]="START",CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.DRAG]="DRAG",CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.STOP]="STOP";var CanvasWhiteboardUpdate=function(){function CanvasWhiteboardUpdate(x,y,type,UUID,selectedShape,selectedShapeOptions){this.x=x,this.y=y,this.type=type,this.UUID=UUID,this.selectedShape=selectedShape,this.selectedShapeOptions=selectedShapeOptions}return CanvasWhiteboardUpdate.deserializeJson=function(json){var parsedJson;try{return parsedJson=JSON.parse(json),new CanvasWhiteboardUpdate(parsedJson.x,parsedJson.y,parsedJson.type,parsedJson.uuid,parsedJson.selectedShape,parsedJson.selectedShapeOptions)}catch(e){return console.error("The canvas whiteboard update is not p1arseable"),null}},CanvasWhiteboardUpdate.prototype.stringify=function(){var objectToSerialize={x:this.x.toFixed(3),y:this.y.toFixed(3),type:this.type,uuid:this.UUID,selectedShape:this.selectedShape};return this.selectedShapeOptions&&(objectToSerialize.selectedShapeOptions=this.selectedShapeOptions),JSON.stringify(objectToSerialize)},CanvasWhiteboardUpdate}(),DEFAULT_STYLES="\n.canvas_whiteboard_button {\n display: inline-block;\n outline: 0px;\n padding-top: 7px;\n margin-bottom: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.42857143;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-image: none;\n border: 1px solid transparent;\n border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n z-index: 3;\n}\n\n@media (max-width: 400px) {\n .canvas_whiteboard_buttons {\n position: absolute;\n z-inde\n top: 0;\n width: 100%;\n text-align: center;\n }\n}\n \n@media (min-width: 401px) { \n .canvas_whiteboard_buttons {\n position: absolute;\n right: 0%;\n color: #fff;\n }\n}\n\n.canvas_whiteboard_buttons {\n padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n -webkit-animation: pulsate 1s ease-out;\n -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n 0% {\n -webkit-transform: scale(0.1, 0.1);\n opacity: 0.0;\n }\n 50% {\n opacity: 1.0;\n }\n 100% {\n -webkit-transform: scale(1.2, 1.2);\n opacity: 0.0;\n }\n}\n.canvas_wrapper_div {\n width: 100%;\n height: 100%;\n border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n padding-top: 5px;\n}\n\n.canvas_whiteboard {\n position: absolute;\n z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n position: absolute;\n z-index: 2;\n}\n\n",CanvasWhiteboardService=function(){function CanvasWhiteboardService(){this._canvasDrawSubject=new rxjs_index.Subject,this.canvasDrawSubject$=this._canvasDrawSubject.asObservable(),this._canvasClearSubject=new rxjs_index.Subject,this.canvasClearSubject$=this._canvasClearSubject.asObservable(),this._canvasUndoSubject=new rxjs_index.Subject,this.canvasUndoSubject$=this._canvasUndoSubject.asObservable(),this._canvasRedoSubject=new rxjs_index.Subject,this.canvasRedoSubject$=this._canvasRedoSubject.asObservable()}return CanvasWhiteboardService.prototype.drawCanvas=function(updates){this._canvasDrawSubject.next(updates)},CanvasWhiteboardService.prototype.clearCanvas=function(){this._canvasClearSubject.next()},CanvasWhiteboardService.prototype.undoCanvas=function(updateUUD){this._canvasUndoSubject.next(updateUUD)},CanvasWhiteboardService.prototype.redoCanvas=function(updateUUD){this._canvasRedoSubject.next(updateUUD)},CanvasWhiteboardService}(),CanvasWhiteboardPoint=function(){function CanvasWhiteboardPoint(x,y){this.x=x,this.y=y}return CanvasWhiteboardPoint}(),CanvasWhiteboardShapeOptions=function(){function CanvasWhiteboardShapeOptions(){this.shouldFillShape=!1,this.fillStyle=null,this.strokeStyle="rgba(0,0,0,1)",this.lineWidth=2,this.lineJoin="round",this.lineCap="round"}return CanvasWhiteboardShapeOptions}(),CanvasWhiteboardShape=function(){function CanvasWhiteboardShape(positionPoint,options){this.positionPoint=positionPoint||new CanvasWhiteboardPoint(0,0),this.options=options||new CanvasWhiteboardShapeOptions,this.isVisible=!0}return CanvasWhiteboardShape.prototype.onStopReceived=function(update){},CanvasWhiteboardShape}(),CircleShape=function(_super){function CircleShape(positionPoint,options,radius){var _this=_super.call(this,positionPoint,options)||this;return _this.radius=radius||0,_this}return __extends(CircleShape,_super),CircleShape.prototype.draw=function(context){context.beginPath(),context.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),Object.assign(context,this.options),context.stroke(),this.options.shouldFillShape&&context.fill(),context.closePath()},CircleShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},CircleShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},CircleShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},CircleShape}(CanvasWhiteboardShape),RectangleShape=function(_super){function RectangleShape(positionPoint,options,width,height){var _this=_super.call(this,positionPoint,options)||this;return _this.width=width||0,_this.height=height||0,_this}return __extends(RectangleShape,_super),RectangleShape.prototype.draw=function(context){this.width&&this.height&&(context.beginPath(),Object.assign(context,this.options),context.rect(this.positionPoint.x,this.positionPoint.y,this.width,this.height),context.stroke(),this.options.shouldFillShape&&context.fill(),context.closePath())},RectangleShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(2,2),this.width=context.canvas.width-4,this.height=context.canvas.height-4,this.draw(context)},RectangleShape.prototype.onUpdateReceived=function(update){this.width=update.x-this.positionPoint.x,this.height=update.y-this.positionPoint.y},RectangleShape}(CanvasWhiteboardShape),FreeHandShape=function(_super){function FreeHandShape(positionPoint,options){var _this=_super.call(this,positionPoint,options)||this;return _this.linePositions=[],_this}return __extends(FreeHandShape,_super),FreeHandShape.prototype.draw=function(context){Object.assign(context,this.options),context.beginPath(),context.moveTo(this.positionPoint.x,this.positionPoint.y),context.lineTo(this.positionPoint.x+1,this.positionPoint.y+1);for(var i=0;i2){var controlPoint1=this.linePositions[i],controlPoint2=this.linePositions[i+1],endPoint=this.linePositions[i+2];context.bezierCurveTo(controlPoint1.x,controlPoint1.y,controlPoint2.x,controlPoint2.y,endPoint.x,endPoint.y),i+=2}else{var linePosition=this.linePositions[i];context.lineTo(linePosition.x,linePosition.y),i+=1}context.stroke()},FreeHandShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(2,2),this.linePositions=[new CanvasWhiteboardPoint(context.canvas.width-5,.3*context.canvas.height),new CanvasWhiteboardPoint(.2*context.canvas.width,.4*context.canvas.height),new CanvasWhiteboardPoint(.6*context.canvas.width,.8*context.canvas.height),new CanvasWhiteboardPoint(context.canvas.width,context.canvas.height)],this.draw(context)},FreeHandShape.prototype.onUpdateReceived=function(update){this.linePositions.push(new CanvasWhiteboardPoint(update.x,update.y))},FreeHandShape}(CanvasWhiteboardShape),SmileyShape=function(_super){function SmileyShape(positionPoint,options,radius){var _this=_super.call(this,positionPoint,options)||this;return options.shouldFillShape=!0,options.fillStyle=options.fillStyle||"yellow",_this.radius=radius||0,_this}return __extends(SmileyShape,_super),SmileyShape.prototype.draw=function(context){context.beginPath(),Object.assign(context,this.options),context.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),context.fill(),context.stroke(),context.beginPath();var leftEyeX=this.positionPoint.x-.3*this.radius,rightEyeX=this.positionPoint.x+.3*this.radius,eyesY=this.positionPoint.y-.2*this.radius,eyeSize=.1*this.radius;context.arc(leftEyeX,eyesY,eyeSize,0,2*Math.PI,!1),context.arc(rightEyeX,eyesY,eyeSize,0,2*Math.PI,!1),context.fillStyle=this.options.strokeStyle,context.fill(),context.beginPath(),context.arc(this.positionPoint.x,this.positionPoint.y,.7*this.radius,0,Math.PI,!1),context.stroke(),context.closePath()},SmileyShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},SmileyShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},SmileyShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},SmileyShape}(CanvasWhiteboardShape),StarShape=function(_super){function StarShape(positionPoint,options,radius,spikes){var _this=_super.call(this,positionPoint,options)||this;return _this.radius=radius||0,_this.spikes=_this.spikes||5,_this}return __extends(StarShape,_super),StarShape.prototype.draw=function(context){Object.assign(context,this.options);var rotation=Math.PI/2*3,spikeX=this.positionPoint.x,spikeY=this.positionPoint.y,step=Math.PI/this.spikes;context.beginPath(),context.moveTo(this.positionPoint.x,this.positionPoint.y-this.radius);for(var i=0;i0){var updatesToDraw=this._updatesNotDrawn;this._updatesNotDrawn=[],updatesToDraw.forEach(function(update){_this._draw(update)})}},CanvasWhiteboardComponent.prototype._drawImage=function(context,image,x,y,width,height,offsetX,offsetY){2===arguments.length&&(x=y=0,width=context.canvas.width,height=context.canvas.height),offsetX="number"==typeof offsetX?offsetX:.5,offsetY="number"==typeof offsetY?offsetY:.5,offsetX<0&&(offsetX=0),offsetY<0&&(offsetY=0),offsetX>1&&(offsetX=1),offsetY>1&&(offsetY=1);var finalDrawX,finalDrawY,finalDrawWidth,finalDrawHeight,imageWidth=image.width,imageHeight=image.height,radius=Math.min(width/imageWidth,height/imageHeight),newWidth=imageWidth*radius,newHeight=imageHeight*radius,aspectRatio=1;newWidthimageWidth&&(finalDrawWidth=imageWidth),finalDrawHeight>imageHeight&&(finalDrawHeight=imageHeight),context.drawImage(image,finalDrawX,finalDrawY,finalDrawWidth,finalDrawHeight,x,y,width,height)},CanvasWhiteboardComponent.prototype.generateCanvasDataUrl=function(returnedDataType,returnedDataQuality){return void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1),this.context.canvas.toDataURL(returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.generateCanvasBlob=function(callbackFn,returnedDataType,returnedDataQuality){var _this=this;void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1);var toBlobMethod;void 0!==this.context.canvas.toBlob?toBlobMethod=this.context.canvas.toBlob.bind(this.context.canvas):void 0!==this.context.canvas.msToBlob&&(toBlobMethod=function(callback){callback&&callback(_this.context.canvas.msToBlob())}),toBlobMethod&&toBlobMethod(function(blob){callbackFn&&callbackFn(blob,returnedDataType)},returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.downloadCanvasImage=function(returnedDataType,downloadData,customFileName){if(void 0===returnedDataType&&(returnedDataType="image/png"),void 0===window.navigator.msSaveOrOpenBlob){var downloadLink=document.createElement("a");downloadLink.setAttribute("href",downloadData||this.generateCanvasDataUrl(returnedDataType));var fileName=customFileName||(this.downloadedFileName?this.downloadedFileName:"canvas_drawing_"+(new Date).valueOf());downloadLink.setAttribute("download",fileName+this._generateDataTypeString(returnedDataType)),document.body.appendChild(downloadLink),downloadLink.click(),document.body.removeChild(downloadLink)}else downloadData?this._saveCanvasBlob(downloadData,returnedDataType):this.generateCanvasBlob(this._saveCanvasBlob.bind(this),returnedDataType)},CanvasWhiteboardComponent.prototype._saveCanvasBlob=function(blob,returnedDataType){void 0===returnedDataType&&(returnedDataType="image/png"),window.navigator.msSaveOrOpenBlob(blob,"canvas_drawing_"+(new Date).valueOf()+this._generateDataTypeString(returnedDataType))},CanvasWhiteboardComponent.prototype.generateCanvasData=function(callback,returnedDataType,returnedDataQuality){void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1),void 0===window.navigator.msSaveOrOpenBlob?callback&&callback(this.generateCanvasDataUrl(returnedDataType,returnedDataQuality)):this.generateCanvasBlob(callback,returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.saveLocal=function(returnedDataType){var _this=this;void 0===returnedDataType&&(returnedDataType="image/png"),this.generateCanvasData(function(generatedData){_this.onSave.emit(generatedData),_this.shouldDownloadDrawing&&_this.downloadCanvasImage(returnedDataType,generatedData)})},CanvasWhiteboardComponent.prototype._generateDataTypeString=function(returnedDataType){return returnedDataType?"."+returnedDataType.split("/")[1]:""},CanvasWhiteboardComponent.prototype.toggleStrokeColorPicker=function(value){this.showStrokeColorPicker=this._isNullOrUndefined(value)?!this.showStrokeColorPicker:value},CanvasWhiteboardComponent.prototype.toggleFillColorPicker=function(value){this.showFillColorPicker=this._isNullOrUndefined(value)?!this.showFillColorPicker:value},CanvasWhiteboardComponent.prototype.toggleShapeSelector=function(value){this.showShapeSelector=this._isNullOrUndefined(value)?!this.showShapeSelector:value},CanvasWhiteboardComponent.prototype.selectShape=function(newShapeBlueprint){this.selectedShapeConstructor=newShapeBlueprint},CanvasWhiteboardComponent.prototype._unsubscribe=function(subscription){subscription&&subscription.unsubscribe()},CanvasWhiteboardComponent.prototype._generateUUID=function(){return this._random4()+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+this._random4()+this._random4()},CanvasWhiteboardComponent.prototype._random4=function(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)},CanvasWhiteboardComponent.prototype.ngOnDestroy=function(){var _this=this;this._unsubscribe(this._resizeSubscription),this._unsubscribe(this._registeredShapesSubscription),this._canvasWhiteboardServiceSubscriptions.forEach(function(subscription){return _this._unsubscribe(subscription)})},CanvasWhiteboardComponent}();CanvasWhiteboardComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard",template:'\n
\n
\n \n\n \n \n\n \n \n\n\n \n\n \n\n \n\n \n \n
\n \n \n
\n ',styles:[DEFAULT_STYLES]}]}],CanvasWhiteboardComponent.ctorParameters=function(){return[{type:_angular_core.NgZone},{type:_angular_core.ChangeDetectorRef},{type:CanvasWhiteboardService},{type:CanvasWhiteboardShapeService}]},CanvasWhiteboardComponent.propDecorators={options:[{type:_angular_core.Input}],batchUpdateTimeoutDuration:[{type:_angular_core.Input}],imageUrl:[{type:_angular_core.Input}],aspectRatio:[{type:_angular_core.Input}],drawButtonClass:[{type:_angular_core.Input}],clearButtonClass:[{type:_angular_core.Input}],undoButtonClass:[{type:_angular_core.Input}],redoButtonClass:[{type:_angular_core.Input}],saveDataButtonClass:[{type:_angular_core.Input}],drawButtonText:[{type:_angular_core.Input}],clearButtonText:[{type:_angular_core.Input}],undoButtonText:[{type:_angular_core.Input}],redoButtonText:[{type:_angular_core.Input}],saveDataButtonText:[{type:_angular_core.Input}],drawButtonEnabled:[{type:_angular_core.Input}],clearButtonEnabled:[{type:_angular_core.Input}],undoButtonEnabled:[{type:_angular_core.Input}],redoButtonEnabled:[{type:_angular_core.Input}],saveDataButtonEnabled:[{type:_angular_core.Input}],shouldDownloadDrawing:[{type:_angular_core.Input}],colorPickerEnabled:[{type:_angular_core.Input}],lineWidth:[{type:_angular_core.Input}],strokeColor:[{type:_angular_core.Input}],startingColor:[{type:_angular_core.Input}],scaleFactor:[{type:_angular_core.Input}],drawingEnabled:[{type:_angular_core.Input}],showStrokeColorPicker:[{type:_angular_core.Input}],showFillColorPicker:[{type:_angular_core.Input}],downloadedFileName:[{type:_angular_core.Input}],lineJoin:[{type:_angular_core.Input}],lineCap:[{type:_angular_core.Input}],shapeSelectorEnabled:[{type:_angular_core.Input}],showShapeSelector:[{type:_angular_core.Input}],fillColor:[{type:_angular_core.Input}],onClear:[{type:_angular_core.Output}],onUndo:[{type:_angular_core.Output}],onRedo:[{type:_angular_core.Output}],onBatchUpdate:[{type:_angular_core.Output}],onImageLoaded:[{type:_angular_core.Output}],onSave:[{type:_angular_core.Output}],canvas:[{type:_angular_core.ViewChild,args:["canvas"]}],_incompleteShapesCanvas:[{type:_angular_core.ViewChild,args:["incompleteShapesCanvas"]}]};var CanvasWhiteboardShapeSelectorComponent=function(){function CanvasWhiteboardShapeSelectorComponent(_elementRef,_canvasWhiteboardShapeService){this._elementRef=_elementRef,this._canvasWhiteboardShapeService=_canvasWhiteboardShapeService,this.showShapeSelector=!1,this.onToggleShapeSelector=new _angular_core.EventEmitter,this.onShapeSelected=new _angular_core.EventEmitter,this.registeredShapes$=this._canvasWhiteboardShapeService.registeredShapes$}return CanvasWhiteboardShapeSelectorComponent.prototype.selectShape=function(shape){this.onShapeSelected.emit(shape),this.toggleShapeSelector(null)},CanvasWhiteboardShapeSelectorComponent.prototype.closeOnExternalClick=function(event){!this._elementRef.nativeElement.contains(event.target)&&this.showShapeSelector&&this.onToggleShapeSelector.emit(!1)},CanvasWhiteboardShapeSelectorComponent.prototype.toggleShapeSelector=function(event){event&&event.preventDefault(),this.onToggleShapeSelector.emit(!this.showShapeSelector)},CanvasWhiteboardShapeSelectorComponent}();CanvasWhiteboardShapeSelectorComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-shape-selector",host:{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)"},template:'\n
\n \n
\n
\n \n
\n ',styles:["\n .canvas-whiteboard-shape-selector-selected-preview {\n vertical-align: bottom;\n display: inline-block;\n }\n\n .canvas-whiteboard-shape-selector-wrapper {\n display: block;\n padding: 4px;\n border: 1px solid #afafaf;\n }\n\n @media (min-width: 401px) {\n .canvas-whiteboard-shape-selector-wrapper {\n }\n }\n "]}]}],CanvasWhiteboardShapeSelectorComponent.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:CanvasWhiteboardShapeService}]},CanvasWhiteboardShapeSelectorComponent.propDecorators={showShapeSelector:[{type:_angular_core.Input}],selectedShapeConstructor:[{type:_angular_core.Input}],shapeOptions:[{type:_angular_core.Input}],onToggleShapeSelector:[{type:_angular_core.Output}],onShapeSelected:[{type:_angular_core.Output}]};var CanvasWhiteboardColorPickerComponent=function(){function CanvasWhiteboardColorPickerComponent(_elementRef){this._elementRef=_elementRef,this.selectedColor="rgba(0,0,0,1)",this.showColorPicker=!1,this.onToggleColorPicker=new _angular_core.EventEmitter,this.onColorSelected=new _angular_core.EventEmitter,this.onSecondaryColorSelected=new _angular_core.EventEmitter}return CanvasWhiteboardColorPickerComponent.prototype.ngOnInit=function(){this._context=this.canvas.nativeElement.getContext("2d"),this.createColorPalette()},CanvasWhiteboardColorPickerComponent.prototype.createColorPalette=function(){var gradient=this._context.createLinearGradient(0,0,this._context.canvas.width,0);gradient.addColorStop(0,"rgb(255, 0, 0)"),gradient.addColorStop(.15,"rgb(255, 0, 255)"),gradient.addColorStop(.33,"rgb(0, 0, 255)"),gradient.addColorStop(.49,"rgb(0, 255, 255)"),gradient.addColorStop(.67,"rgb(0, 255, 0)"),gradient.addColorStop(.84,"rgb(255, 255, 0)"),gradient.addColorStop(1,"rgb(255, 0, 0)"),this._context.fillStyle=gradient,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height),gradient=this._context.createLinearGradient(0,0,0,this._context.canvas.height),gradient.addColorStop(0,"rgba(255, 255, 255, 1)"),gradient.addColorStop(.5,"rgba(255, 255, 255, 0)"),gradient.addColorStop(.5,"rgba(0, 0, 0, 0)"),gradient.addColorStop(1,"rgba(0, 0, 0, 1)"),this._context.fillStyle=gradient,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height)},CanvasWhiteboardColorPickerComponent.prototype.closeOnExternalClick=function(event){!this._elementRef.nativeElement.contains(event.target)&&this.showColorPicker&&this.onToggleColorPicker.emit(!1)},CanvasWhiteboardColorPickerComponent.prototype.toggleColorPicker=function(event){event&&event.preventDefault(),this.onToggleColorPicker.emit(!this.showColorPicker)},CanvasWhiteboardColorPickerComponent.prototype.determineColorFromCanvas=function(event){var canvasRect=this._context.canvas.getBoundingClientRect(),imageData=this._context.getImageData(event.clientX-canvasRect.left,event.clientY-canvasRect.top,1,1);return"rgba("+imageData.data[0]+", "+imageData.data[1]+", "+imageData.data[2]+", "+imageData.data[3]+")"},CanvasWhiteboardColorPickerComponent.prototype.selectColor=function(color){this.onColorSelected.emit(color),this.toggleColorPicker(null)},CanvasWhiteboardColorPickerComponent}();CanvasWhiteboardColorPickerComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-colorpicker",host:{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)"},template:'\n
\n
{{previewText}}
\n
\n
\n
\n
Transparent
\n \n
\n ',styles:["\n .selected-color-preview {\n width: 100%;\n height: 20%;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n \n .selected-color-type-wrapper {\n display: inline-block;\n height: 100%;\n width: 100%;\n text-align: center;\n font-size: 14px;\n color: #000;\n }\n \n .transparent-color {\n font-size: 14px;\n }\n \n .canvas-whiteboard-colorpicker-wrapper {\n border: 1px solid #afafaf;\n color: #000;\n }\n\n @media (min-width: 401px) {\n .canvas-whiteboard-colorpicker-wrapper {\n position: absolute;\n }\n }\n\n .canvas-whiteboard-colorpicker-input {\n display: inline-block;\n position:relative;\n width: 44px;\n height: 44px;\n margin: 5px;\n cursor: pointer;\n color: #000;\n }\n "]}]}],CanvasWhiteboardColorPickerComponent.ctorParameters=function(){return[{type:_angular_core.ElementRef}]},CanvasWhiteboardColorPickerComponent.propDecorators={previewText:[{type:_angular_core.Input}],selectedColor:[{type:_angular_core.Input}],canvas:[{type:_angular_core.ViewChild,args:["canvaswhiteboardcolorpicker"]}],showColorPicker:[{type:_angular_core.Input}],onToggleColorPicker:[{type:_angular_core.Output}],onColorSelected:[{type:_angular_core.Output}],onSecondaryColorSelected:[{type:_angular_core.Output}]};var CanvasWhiteboardShapePreviewComponent=function(){function CanvasWhiteboardShapePreviewComponent(){}return CanvasWhiteboardShapePreviewComponent.prototype.ngAfterViewInit=function(){this.drawShapePreview()},CanvasWhiteboardShapePreviewComponent.prototype.ngOnChanges=function(changes){(changes.shapeConstructor||changes.shapeOptions)&&this.drawShapePreview()},CanvasWhiteboardShapePreviewComponent.prototype.drawShapePreview=function(){if(this.canvas){var context=this.canvas.nativeElement.getContext("2d");context.clearRect(0,0,context.canvas.width,context.canvas.height);new this.shapeConstructor(new CanvasWhiteboardPoint(0,0),Object.assign(new CanvasWhiteboardShapeOptions,this.shapeOptions)).drawPreview(context)}},CanvasWhiteboardShapePreviewComponent}();CanvasWhiteboardShapePreviewComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-shape-preview",template:'\n \n ',styles:["\n .canvas-whiteboard-shape-preview-canvas {\n cursor: pointer;\n }\n "]}]}],CanvasWhiteboardShapePreviewComponent.propDecorators={shapeConstructor:[{type:_angular_core.Input}],shapeOptions:[{type:_angular_core.Input}],canvas:[{type:_angular_core.ViewChild,args:["canvasWhiteboardShapePreview"]}]};var CanvasWhiteboardModule=function(){function CanvasWhiteboardModule(){}return CanvasWhiteboardModule}();CanvasWhiteboardModule.decorators=[{type:_angular_core.NgModule,args:[{imports:[_angular_common.CommonModule],declarations:[CanvasWhiteboardComponent,CanvasWhiteboardColorPickerComponent,CanvasWhiteboardShapeSelectorComponent,CanvasWhiteboardShapePreviewComponent],providers:[CanvasWhiteboardService,CanvasWhiteboardShapeService],exports:[CanvasWhiteboardComponent]}]}],exports.CanvasWhiteboardComponent=CanvasWhiteboardComponent,exports.CanvasWhiteboardUpdate=CanvasWhiteboardUpdate,exports.CanvasWhiteboardService=CanvasWhiteboardService,exports.CanvasWhiteboardPoint=CanvasWhiteboardPoint,exports.CanvasWhiteboardShape=CanvasWhiteboardShape,exports.CanvasWhiteboardShapeOptions=CanvasWhiteboardShapeOptions,exports.CanvasWhiteboardShapeService=CanvasWhiteboardShapeService,exports.RectangleShape=RectangleShape,exports.CircleShape=CircleShape,exports.CanvasWhiteboardShapeSelectorComponent=CanvasWhiteboardShapeSelectorComponent,exports.CanvasWhiteboardColorPickerComponent=CanvasWhiteboardColorPickerComponent,exports.CanvasWhiteboardShapePreviewComponent=CanvasWhiteboardShapePreviewComponent,exports.CanvasWhiteboardModule=CanvasWhiteboardModule,exports.DEFAULT_STYLES=DEFAULT_STYLES,Object.defineProperty(exports,"__esModule",{value:!0})}); +!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("rxjs/index"),require("rxjs/operators"),require("lodash"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs/index","rxjs/operators","lodash","@angular/common"],factory):factory((global.ng=global.ng||{},global.ng.ng2CanvasWhiteboard=global.ng.ng2CanvasWhiteboard||{}),global.ng.core,global.rxjs_index,global.rxjs_operators,global.lodash,global.ng.common)}(this,function(exports,_angular_core,rxjs_index,rxjs_operators,lodash,_angular_common){"use strict";var __extends=function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}(),CanvasWhiteboardUpdateType={START:0,DRAG:1,STOP:2};CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.START]="START",CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.DRAG]="DRAG",CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.STOP]="STOP";var CanvasWhiteboardUpdate=function(){function CanvasWhiteboardUpdate(x,y,type,UUID,selectedShape,selectedShapeOptions){this.x=x,this.y=y,this.type=type,this.UUID=UUID,this.selectedShape=selectedShape,this.selectedShapeOptions=selectedShapeOptions}return CanvasWhiteboardUpdate.deserializeJson=function(json){var parsedJson;try{return parsedJson=JSON.parse(json),new CanvasWhiteboardUpdate(parsedJson.x,parsedJson.y,parsedJson.type,parsedJson.uuid,parsedJson.selectedShape,parsedJson.selectedShapeOptions)}catch(e){return console.error("The canvas whiteboard update is not p1arseable"),null}},CanvasWhiteboardUpdate.prototype.stringify=function(){var objectToSerialize={x:this.x.toFixed(3),y:this.y.toFixed(3),type:this.type,uuid:this.UUID,selectedShape:this.selectedShape};return this.selectedShapeOptions&&(objectToSerialize.selectedShapeOptions=this.selectedShapeOptions),JSON.stringify(objectToSerialize)},CanvasWhiteboardUpdate}(),DEFAULT_STYLES="\n.canvas_whiteboard_button {\n display: inline-block;\n outline: 0px;\n padding-top: 7px;\n margin-bottom: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.42857143;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-image: none;\n border: 1px solid transparent;\n border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n z-index: 3;\n}\n\n@media (max-width: 400px) {\n .canvas_whiteboard_buttons {\n position: absolute;\n z-inde\n top: 0;\n width: 100%;\n text-align: center;\n }\n}\n \n@media (min-width: 401px) { \n .canvas_whiteboard_buttons {\n position: absolute;\n right: 0%;\n color: #fff;\n }\n}\n\n.canvas_whiteboard_buttons {\n padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n -webkit-animation: pulsate 1s ease-out;\n -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n 0% {\n -webkit-transform: scale(0.1, 0.1);\n opacity: 0.0;\n }\n 50% {\n opacity: 1.0;\n }\n 100% {\n -webkit-transform: scale(1.2, 1.2);\n opacity: 0.0;\n }\n}\n.canvas_wrapper_div {\n width: 100%;\n height: 100%;\n border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n padding-top: 5px;\n}\n\n.canvas_whiteboard {\n position: absolute;\n z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n position: absolute;\n z-index: 2;\n}\n\n",CanvasWhiteboardService=function(){function CanvasWhiteboardService(){this._canvasDrawSubject=new rxjs_index.Subject,this.canvasDrawSubject$=this._canvasDrawSubject.asObservable(),this._canvasClearSubject=new rxjs_index.Subject,this.canvasClearSubject$=this._canvasClearSubject.asObservable(),this._canvasUndoSubject=new rxjs_index.Subject,this.canvasUndoSubject$=this._canvasUndoSubject.asObservable(),this._canvasRedoSubject=new rxjs_index.Subject,this.canvasRedoSubject$=this._canvasRedoSubject.asObservable()}return CanvasWhiteboardService.prototype.drawCanvas=function(updates){this._canvasDrawSubject.next(updates)},CanvasWhiteboardService.prototype.clearCanvas=function(){this._canvasClearSubject.next()},CanvasWhiteboardService.prototype.undoCanvas=function(updateUUD){this._canvasUndoSubject.next(updateUUD)},CanvasWhiteboardService.prototype.redoCanvas=function(updateUUD){this._canvasRedoSubject.next(updateUUD)},CanvasWhiteboardService}(),CanvasWhiteboardPoint=function(){function CanvasWhiteboardPoint(x,y){this.x=x,this.y=y}return CanvasWhiteboardPoint}(),CanvasWhiteboardShapeOptions=function(){function CanvasWhiteboardShapeOptions(){this.shouldFillShape=!1,this.fillStyle=null,this.strokeStyle="rgba(0,0,0,1)",this.lineWidth=2,this.lineJoin="round",this.lineCap="round"}return CanvasWhiteboardShapeOptions}(),CanvasWhiteboardShape=function(){function CanvasWhiteboardShape(positionPoint,options){this.positionPoint=positionPoint||new CanvasWhiteboardPoint(0,0),this.options=options||new CanvasWhiteboardShapeOptions,this.isVisible=!0}return CanvasWhiteboardShape.prototype.onStopReceived=function(update){},CanvasWhiteboardShape}(),CircleShape=function(_super){function CircleShape(positionPoint,options,radius){var _this=_super.call(this,positionPoint,options)||this;return _this.radius=radius||0,_this}return __extends(CircleShape,_super),CircleShape.prototype.draw=function(context){context.beginPath(),context.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),Object.assign(context,this.options),context.stroke(),this.options.shouldFillShape&&context.fill(),context.closePath()},CircleShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},CircleShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},CircleShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},CircleShape}(CanvasWhiteboardShape),RectangleShape=function(_super){function RectangleShape(positionPoint,options,width,height){var _this=_super.call(this,positionPoint,options)||this;return _this.width=width||0,_this.height=height||0,_this}return __extends(RectangleShape,_super),RectangleShape.prototype.draw=function(context){this.width&&this.height&&(context.beginPath(),Object.assign(context,this.options),context.rect(this.positionPoint.x,this.positionPoint.y,this.width,this.height),context.stroke(),this.options.shouldFillShape&&context.fill(),context.closePath())},RectangleShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(2,2),this.width=context.canvas.width-4,this.height=context.canvas.height-4,this.draw(context)},RectangleShape.prototype.onUpdateReceived=function(update){this.width=update.x-this.positionPoint.x,this.height=update.y-this.positionPoint.y},RectangleShape}(CanvasWhiteboardShape),FreeHandShape=function(_super){function FreeHandShape(positionPoint,options){var _this=_super.call(this,positionPoint,options)||this;return _this.linePositions=[],_this}return __extends(FreeHandShape,_super),FreeHandShape.prototype.draw=function(context){Object.assign(context,this.options),context.beginPath(),context.moveTo(this.positionPoint.x,this.positionPoint.y),context.lineTo(this.positionPoint.x+1,this.positionPoint.y+1);for(var i=0;i2){var controlPoint1=this.linePositions[i],controlPoint2=this.linePositions[i+1],endPoint=this.linePositions[i+2];context.bezierCurveTo(controlPoint1.x,controlPoint1.y,controlPoint2.x,controlPoint2.y,endPoint.x,endPoint.y),i+=2}else{var linePosition=this.linePositions[i];context.lineTo(linePosition.x,linePosition.y),i+=1}context.stroke()},FreeHandShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(2,2),this.linePositions=[new CanvasWhiteboardPoint(context.canvas.width-5,.3*context.canvas.height),new CanvasWhiteboardPoint(.2*context.canvas.width,.4*context.canvas.height),new CanvasWhiteboardPoint(.6*context.canvas.width,.8*context.canvas.height),new CanvasWhiteboardPoint(context.canvas.width,context.canvas.height)],this.draw(context)},FreeHandShape.prototype.onUpdateReceived=function(update){this.linePositions.push(new CanvasWhiteboardPoint(update.x,update.y))},FreeHandShape}(CanvasWhiteboardShape),SmileyShape=function(_super){function SmileyShape(positionPoint,options,radius){var _this=_super.call(this,positionPoint,options)||this;return options.shouldFillShape=!0,options.fillStyle=options.fillStyle||"yellow",_this.radius=radius||0,_this}return __extends(SmileyShape,_super),SmileyShape.prototype.draw=function(context){context.beginPath(),Object.assign(context,this.options),context.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),context.fill(),context.stroke(),context.beginPath();var leftEyeX=this.positionPoint.x-.3*this.radius,rightEyeX=this.positionPoint.x+.3*this.radius,eyesY=this.positionPoint.y-.2*this.radius,eyeSize=.1*this.radius;context.arc(leftEyeX,eyesY,eyeSize,0,2*Math.PI,!1),context.arc(rightEyeX,eyesY,eyeSize,0,2*Math.PI,!1),context.fillStyle=this.options.strokeStyle,context.fill(),context.beginPath(),context.arc(this.positionPoint.x,this.positionPoint.y,.7*this.radius,0,Math.PI,!1),context.stroke(),context.closePath()},SmileyShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},SmileyShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},SmileyShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},SmileyShape}(CanvasWhiteboardShape),StarShape=function(_super){function StarShape(positionPoint,options,radius,spikes){var _this=_super.call(this,positionPoint,options)||this;return _this.radius=radius||0,_this.spikes=_this.spikes||5,_this}return __extends(StarShape,_super),StarShape.prototype.draw=function(context){Object.assign(context,this.options);var rotation=Math.PI/2*3,spikeX=this.positionPoint.x,spikeY=this.positionPoint.y,step=Math.PI/this.spikes;context.beginPath(),context.moveTo(this.positionPoint.x,this.positionPoint.y-this.radius);for(var i=0;i0){var updatesToDraw=this._updatesNotDrawn;this._updatesNotDrawn=[],updatesToDraw.forEach(function(update){_this._draw(update)})}},CanvasWhiteboardComponent.prototype._drawImage=function(context,image,x,y,width,height,offsetX,offsetY){2===arguments.length&&(x=y=0,width=context.canvas.width,height=context.canvas.height),offsetX="number"==typeof offsetX?offsetX:.5,offsetY="number"==typeof offsetY?offsetY:.5,offsetX<0&&(offsetX=0),offsetY<0&&(offsetY=0),offsetX>1&&(offsetX=1),offsetY>1&&(offsetY=1);var finalDrawX,finalDrawY,finalDrawWidth,finalDrawHeight,imageWidth=image.width,imageHeight=image.height,radius=Math.min(width/imageWidth,height/imageHeight),newWidth=imageWidth*radius,newHeight=imageHeight*radius,aspectRatio=1;newWidthimageWidth&&(finalDrawWidth=imageWidth),finalDrawHeight>imageHeight&&(finalDrawHeight=imageHeight),context.drawImage(image,finalDrawX,finalDrawY,finalDrawWidth,finalDrawHeight,x,y,width,height)},CanvasWhiteboardComponent.prototype.generateCanvasDataUrl=function(returnedDataType,returnedDataQuality){return void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1),this.context.canvas.toDataURL(returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.generateCanvasBlob=function(callbackFn,returnedDataType,returnedDataQuality){var _this=this;void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1);var toBlobMethod;void 0!==this.context.canvas.toBlob?toBlobMethod=this.context.canvas.toBlob.bind(this.context.canvas):void 0!==this.context.canvas.msToBlob&&(toBlobMethod=function(callback){callback&&callback(_this.context.canvas.msToBlob())}),toBlobMethod&&toBlobMethod(function(blob){callbackFn&&callbackFn(blob,returnedDataType)},returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.downloadCanvasImage=function(returnedDataType,downloadData,customFileName){if(void 0===returnedDataType&&(returnedDataType="image/png"),void 0===window.navigator.msSaveOrOpenBlob){var downloadLink=document.createElement("a");downloadLink.setAttribute("href",downloadData||this.generateCanvasDataUrl(returnedDataType));var fileName=customFileName||(this.downloadedFileName?this.downloadedFileName:"canvas_drawing_"+(new Date).valueOf());downloadLink.setAttribute("download",fileName+this._generateDataTypeString(returnedDataType)),document.body.appendChild(downloadLink),downloadLink.click(),document.body.removeChild(downloadLink)}else downloadData?this._saveCanvasBlob(downloadData,returnedDataType):this.generateCanvasBlob(this._saveCanvasBlob.bind(this),returnedDataType)},CanvasWhiteboardComponent.prototype._saveCanvasBlob=function(blob,returnedDataType){void 0===returnedDataType&&(returnedDataType="image/png"),window.navigator.msSaveOrOpenBlob(blob,"canvas_drawing_"+(new Date).valueOf()+this._generateDataTypeString(returnedDataType))},CanvasWhiteboardComponent.prototype.generateCanvasData=function(callback,returnedDataType,returnedDataQuality){void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1),void 0===window.navigator.msSaveOrOpenBlob?callback&&callback(this.generateCanvasDataUrl(returnedDataType,returnedDataQuality)):this.generateCanvasBlob(callback,returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.saveLocal=function(returnedDataType){var _this=this;void 0===returnedDataType&&(returnedDataType="image/png"),this.generateCanvasData(function(generatedData){_this.onSave.emit(generatedData),_this.shouldDownloadDrawing&&_this.downloadCanvasImage(returnedDataType,generatedData)})},CanvasWhiteboardComponent.prototype._generateDataTypeString=function(returnedDataType){return returnedDataType?"."+returnedDataType.split("/")[1]:""},CanvasWhiteboardComponent.prototype.toggleStrokeColorPicker=function(value){this.showStrokeColorPicker=this._isNullOrUndefined(value)?!this.showStrokeColorPicker:value},CanvasWhiteboardComponent.prototype.toggleFillColorPicker=function(value){this.showFillColorPicker=this._isNullOrUndefined(value)?!this.showFillColorPicker:value},CanvasWhiteboardComponent.prototype.toggleShapeSelector=function(value){this.showShapeSelector=this._isNullOrUndefined(value)?!this.showShapeSelector:value},CanvasWhiteboardComponent.prototype.selectShape=function(newShapeBlueprint){this.selectedShapeConstructor=newShapeBlueprint},CanvasWhiteboardComponent.prototype.getDrawingHistory=function(){return lodash.cloneDeep(this._updateHistory)},CanvasWhiteboardComponent.prototype._unsubscribe=function(subscription){subscription&&subscription.unsubscribe()},CanvasWhiteboardComponent.prototype._generateUUID=function(){return this._random4()+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+this._random4()+this._random4()},CanvasWhiteboardComponent.prototype._random4=function(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)},CanvasWhiteboardComponent.prototype.ngOnDestroy=function(){var _this=this;this._unsubscribe(this._resizeSubscription),this._unsubscribe(this._registeredShapesSubscription),this._canvasWhiteboardServiceSubscriptions.forEach(function(subscription){return _this._unsubscribe(subscription)})},CanvasWhiteboardComponent}();CanvasWhiteboardComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard",template:'\n
\n
\n \n\n \n \n\n \n \n\n\n \n\n \n\n \n\n \n \n
\n \n \n
\n ',styles:[DEFAULT_STYLES]}]}],CanvasWhiteboardComponent.ctorParameters=function(){return[{type:_angular_core.NgZone},{type:_angular_core.ChangeDetectorRef},{type:CanvasWhiteboardService},{type:CanvasWhiteboardShapeService}]},CanvasWhiteboardComponent.propDecorators={options:[{type:_angular_core.Input}],batchUpdateTimeoutDuration:[{type:_angular_core.Input}],imageUrl:[{type:_angular_core.Input}],aspectRatio:[{type:_angular_core.Input}],drawButtonClass:[{type:_angular_core.Input}],clearButtonClass:[{type:_angular_core.Input}],undoButtonClass:[{type:_angular_core.Input}],redoButtonClass:[{type:_angular_core.Input}],saveDataButtonClass:[{type:_angular_core.Input}],drawButtonText:[{type:_angular_core.Input}],clearButtonText:[{type:_angular_core.Input}],undoButtonText:[{type:_angular_core.Input}],redoButtonText:[{type:_angular_core.Input}],saveDataButtonText:[{type:_angular_core.Input}],drawButtonEnabled:[{type:_angular_core.Input}],clearButtonEnabled:[{type:_angular_core.Input}],undoButtonEnabled:[{type:_angular_core.Input}],redoButtonEnabled:[{type:_angular_core.Input}],saveDataButtonEnabled:[{type:_angular_core.Input}],shouldDownloadDrawing:[{type:_angular_core.Input}],colorPickerEnabled:[{type:_angular_core.Input}],lineWidth:[{type:_angular_core.Input}],strokeColor:[{type:_angular_core.Input}],startingColor:[{type:_angular_core.Input}],scaleFactor:[{type:_angular_core.Input}],drawingEnabled:[{type:_angular_core.Input}],showStrokeColorPicker:[{type:_angular_core.Input}],showFillColorPicker:[{type:_angular_core.Input}],downloadedFileName:[{type:_angular_core.Input}],lineJoin:[{type:_angular_core.Input}],lineCap:[{type:_angular_core.Input}],shapeSelectorEnabled:[{type:_angular_core.Input}],showShapeSelector:[{type:_angular_core.Input}],fillColor:[{type:_angular_core.Input}],onClear:[{type:_angular_core.Output}],onUndo:[{type:_angular_core.Output}],onRedo:[{type:_angular_core.Output}],onBatchUpdate:[{type:_angular_core.Output}],onImageLoaded:[{type:_angular_core.Output}],onSave:[{type:_angular_core.Output}],canvas:[{type:_angular_core.ViewChild,args:["canvas"]}],_incompleteShapesCanvas:[{type:_angular_core.ViewChild,args:["incompleteShapesCanvas"]}]};var CanvasWhiteboardShapeSelectorComponent=function(){function CanvasWhiteboardShapeSelectorComponent(_elementRef,_canvasWhiteboardShapeService){this._elementRef=_elementRef,this._canvasWhiteboardShapeService=_canvasWhiteboardShapeService,this.showShapeSelector=!1,this.onToggleShapeSelector=new _angular_core.EventEmitter,this.onShapeSelected=new _angular_core.EventEmitter,this.registeredShapes$=this._canvasWhiteboardShapeService.registeredShapes$}return CanvasWhiteboardShapeSelectorComponent.prototype.selectShape=function(shape){this.onShapeSelected.emit(shape),this.toggleShapeSelector(null)},CanvasWhiteboardShapeSelectorComponent.prototype.closeOnExternalClick=function(event){!this._elementRef.nativeElement.contains(event.target)&&this.showShapeSelector&&this.onToggleShapeSelector.emit(!1)},CanvasWhiteboardShapeSelectorComponent.prototype.toggleShapeSelector=function(event){event&&event.preventDefault(),this.onToggleShapeSelector.emit(!this.showShapeSelector)},CanvasWhiteboardShapeSelectorComponent}();CanvasWhiteboardShapeSelectorComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-shape-selector",host:{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)"},template:'\n
\n \n
\n
\n \n
\n ',styles:["\n .canvas-whiteboard-shape-selector-selected-preview {\n vertical-align: bottom;\n display: inline-block;\n }\n\n .canvas-whiteboard-shape-selector-wrapper {\n display: block;\n padding: 4px;\n border: 1px solid #afafaf;\n }\n\n @media (min-width: 401px) {\n .canvas-whiteboard-shape-selector-wrapper {\n }\n }\n "]}]}],CanvasWhiteboardShapeSelectorComponent.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:CanvasWhiteboardShapeService}]},CanvasWhiteboardShapeSelectorComponent.propDecorators={showShapeSelector:[{type:_angular_core.Input}],selectedShapeConstructor:[{type:_angular_core.Input}],shapeOptions:[{type:_angular_core.Input}],onToggleShapeSelector:[{type:_angular_core.Output}],onShapeSelected:[{type:_angular_core.Output}]};var CanvasWhiteboardColorPickerComponent=function(){function CanvasWhiteboardColorPickerComponent(_elementRef){this._elementRef=_elementRef,this.selectedColor="rgba(0,0,0,1)",this.showColorPicker=!1,this.onToggleColorPicker=new _angular_core.EventEmitter,this.onColorSelected=new _angular_core.EventEmitter,this.onSecondaryColorSelected=new _angular_core.EventEmitter}return CanvasWhiteboardColorPickerComponent.prototype.ngOnInit=function(){this._context=this.canvas.nativeElement.getContext("2d"),this.createColorPalette()},CanvasWhiteboardColorPickerComponent.prototype.createColorPalette=function(){var gradient=this._context.createLinearGradient(0,0,this._context.canvas.width,0);gradient.addColorStop(0,"rgb(255, 0, 0)"),gradient.addColorStop(.15,"rgb(255, 0, 255)"),gradient.addColorStop(.33,"rgb(0, 0, 255)"),gradient.addColorStop(.49,"rgb(0, 255, 255)"),gradient.addColorStop(.67,"rgb(0, 255, 0)"),gradient.addColorStop(.84,"rgb(255, 255, 0)"),gradient.addColorStop(1,"rgb(255, 0, 0)"),this._context.fillStyle=gradient,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height),gradient=this._context.createLinearGradient(0,0,0,this._context.canvas.height),gradient.addColorStop(0,"rgba(255, 255, 255, 1)"),gradient.addColorStop(.5,"rgba(255, 255, 255, 0)"),gradient.addColorStop(.5,"rgba(0, 0, 0, 0)"),gradient.addColorStop(1,"rgba(0, 0, 0, 1)"),this._context.fillStyle=gradient,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height)},CanvasWhiteboardColorPickerComponent.prototype.closeOnExternalClick=function(event){!this._elementRef.nativeElement.contains(event.target)&&this.showColorPicker&&this.onToggleColorPicker.emit(!1)},CanvasWhiteboardColorPickerComponent.prototype.toggleColorPicker=function(event){event&&event.preventDefault(),this.onToggleColorPicker.emit(!this.showColorPicker)},CanvasWhiteboardColorPickerComponent.prototype.determineColorFromCanvas=function(event){var canvasRect=this._context.canvas.getBoundingClientRect(),imageData=this._context.getImageData(event.clientX-canvasRect.left,event.clientY-canvasRect.top,1,1);return"rgba("+imageData.data[0]+", "+imageData.data[1]+", "+imageData.data[2]+", "+imageData.data[3]+")"},CanvasWhiteboardColorPickerComponent.prototype.selectColor=function(color){this.onColorSelected.emit(color),this.toggleColorPicker(null)},CanvasWhiteboardColorPickerComponent}();CanvasWhiteboardColorPickerComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-colorpicker",host:{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)"},template:'\n
\n
{{previewText}}
\n
\n
\n
\n
Transparent
\n \n
\n ',styles:["\n .selected-color-preview {\n width: 100%;\n height: 20%;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n \n .selected-color-type-wrapper {\n display: inline-block;\n height: 100%;\n width: 100%;\n text-align: center;\n font-size: 14px;\n color: #000;\n }\n \n .transparent-color {\n font-size: 14px;\n }\n \n .canvas-whiteboard-colorpicker-wrapper {\n border: 1px solid #afafaf;\n color: #000;\n }\n\n @media (min-width: 401px) {\n .canvas-whiteboard-colorpicker-wrapper {\n position: absolute;\n }\n }\n\n .canvas-whiteboard-colorpicker-input {\n display: inline-block;\n position:relative;\n width: 44px;\n height: 44px;\n margin: 5px;\n cursor: pointer;\n color: #000;\n }\n "]}]}],CanvasWhiteboardColorPickerComponent.ctorParameters=function(){return[{type:_angular_core.ElementRef}]},CanvasWhiteboardColorPickerComponent.propDecorators={previewText:[{type:_angular_core.Input}],selectedColor:[{type:_angular_core.Input}],canvas:[{type:_angular_core.ViewChild,args:["canvaswhiteboardcolorpicker"]}],showColorPicker:[{type:_angular_core.Input}],onToggleColorPicker:[{type:_angular_core.Output}],onColorSelected:[{type:_angular_core.Output}],onSecondaryColorSelected:[{type:_angular_core.Output}]};var CanvasWhiteboardShapePreviewComponent=function(){function CanvasWhiteboardShapePreviewComponent(){}return CanvasWhiteboardShapePreviewComponent.prototype.ngAfterViewInit=function(){this.drawShapePreview()},CanvasWhiteboardShapePreviewComponent.prototype.ngOnChanges=function(changes){(changes.shapeConstructor||changes.shapeOptions)&&this.drawShapePreview()},CanvasWhiteboardShapePreviewComponent.prototype.drawShapePreview=function(){if(this.canvas){var context=this.canvas.nativeElement.getContext("2d");context.clearRect(0,0,context.canvas.width,context.canvas.height);new this.shapeConstructor(new CanvasWhiteboardPoint(0,0),Object.assign(new CanvasWhiteboardShapeOptions,this.shapeOptions)).drawPreview(context)}},CanvasWhiteboardShapePreviewComponent}();CanvasWhiteboardShapePreviewComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-shape-preview",template:'\n \n ',styles:["\n .canvas-whiteboard-shape-preview-canvas {\n cursor: pointer;\n }\n "]}]}],CanvasWhiteboardShapePreviewComponent.propDecorators={shapeConstructor:[{type:_angular_core.Input}],shapeOptions:[{type:_angular_core.Input}],canvas:[{type:_angular_core.ViewChild,args:["canvasWhiteboardShapePreview"]}]};var CanvasWhiteboardModule=function(){function CanvasWhiteboardModule(){}return CanvasWhiteboardModule}();CanvasWhiteboardModule.decorators=[{type:_angular_core.NgModule,args:[{imports:[_angular_common.CommonModule],declarations:[CanvasWhiteboardComponent,CanvasWhiteboardColorPickerComponent,CanvasWhiteboardShapeSelectorComponent,CanvasWhiteboardShapePreviewComponent],providers:[CanvasWhiteboardService,CanvasWhiteboardShapeService],exports:[CanvasWhiteboardComponent]}]}],exports.CanvasWhiteboardComponent=CanvasWhiteboardComponent,exports.CanvasWhiteboardUpdate=CanvasWhiteboardUpdate,exports.CanvasWhiteboardService=CanvasWhiteboardService,exports.CanvasWhiteboardPoint=CanvasWhiteboardPoint,exports.CanvasWhiteboardShape=CanvasWhiteboardShape,exports.CanvasWhiteboardShapeOptions=CanvasWhiteboardShapeOptions,exports.CanvasWhiteboardShapeService=CanvasWhiteboardShapeService,exports.RectangleShape=RectangleShape,exports.CircleShape=CircleShape,exports.CanvasWhiteboardShapeSelectorComponent=CanvasWhiteboardShapeSelectorComponent,exports.CanvasWhiteboardColorPickerComponent=CanvasWhiteboardColorPickerComponent,exports.CanvasWhiteboardShapePreviewComponent=CanvasWhiteboardShapePreviewComponent,exports.CanvasWhiteboardModule=CanvasWhiteboardModule,exports.DEFAULT_STYLES=DEFAULT_STYLES,Object.defineProperty(exports,"__esModule",{value:!0})}); //# sourceMappingURL=ng2-canvas-whiteboard.umd.min.js.map diff --git a/dist/modules/ng2-canvas-whiteboard.es5.js b/dist/modules/ng2-canvas-whiteboard.es5.js index 81da46c2..6d519012 100644 --- a/dist/modules/ng2-canvas-whiteboard.es5.js +++ b/dist/modules/ng2-canvas-whiteboard.es5.js @@ -11,6 +11,7 @@ var __extends = (this && this.__extends) || (function () { import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Input, NgModule, NgZone, Output, ViewChild } from '@angular/core'; import { BehaviorSubject, Subject, fromEvent } from 'rxjs/index'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { cloneDeep } from 'lodash'; import { CommonModule } from '@angular/common'; /** * @fileoverview added by tsickle @@ -1424,7 +1425,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () { */ CanvasWhiteboardComponent.prototype._prepareUpdateForBatchDispatch = function (update) { var _this = this; - this._batchUpdates.push(update); + this._batchUpdates.push(cloneDeep(update)); if (!this._updateTimeout) { this._updateTimeout = setTimeout(function () { _this.onBatchUpdate.emit(_this._batchUpdates); @@ -1712,6 +1713,14 @@ var CanvasWhiteboardComponent = /** @class */ (function () { CanvasWhiteboardComponent.prototype.selectShape = function (newShapeBlueprint) { this.selectedShapeConstructor = newShapeBlueprint; }; + /** + * Returns a deep copy of the current drawing history for the canvas. + * The deep copy is returned because we don't want anyone to mutate the current history + * @return {?} + */ + CanvasWhiteboardComponent.prototype.getDrawingHistory = function () { + return cloneDeep(this._updateHistory); + }; /** * Unsubscribe from a given subscription if it is active * @param {?} subscription diff --git a/dist/modules/ng2-canvas-whiteboard.js b/dist/modules/ng2-canvas-whiteboard.js index 1d17e1fc..68c8aef5 100644 --- a/dist/modules/ng2-canvas-whiteboard.js +++ b/dist/modules/ng2-canvas-whiteboard.js @@ -1,6 +1,7 @@ import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Input, NgModule, NgZone, Output, ViewChild } from '@angular/core'; import { BehaviorSubject, Subject, fromEvent } from 'rxjs/index'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { cloneDeep } from 'lodash'; import { CommonModule } from '@angular/common'; /** @@ -1482,7 +1483,7 @@ class CanvasWhiteboardComponent { * @return {?} Emits an Array of Updates when the batch. */ _prepareUpdateForBatchDispatch(update) { - this._batchUpdates.push(update); + this._batchUpdates.push(cloneDeep(update)); if (!this._updateTimeout) { this._updateTimeout = setTimeout(() => { this.onBatchUpdate.emit(this._batchUpdates); @@ -1757,6 +1758,14 @@ class CanvasWhiteboardComponent { selectShape(newShapeBlueprint) { this.selectedShapeConstructor = newShapeBlueprint; } + /** + * Returns a deep copy of the current drawing history for the canvas. + * The deep copy is returned because we don't want anyone to mutate the current history + * @return {?} + */ + getDrawingHistory() { + return cloneDeep(this._updateHistory); + } /** * Unsubscribe from a given subscription if it is active * @param {?} subscription diff --git a/dist/ng2-canvas-whiteboard.metadata.json b/dist/ng2-canvas-whiteboard.metadata.json index 5c8069cb..fa0970b5 100644 --- a/dist/ng2-canvas-whiteboard.metadata.json +++ b/dist/ng2-canvas-whiteboard.metadata.json @@ -1 +1 @@ -{"__symbolic":"module","version":4,"metadata":{"CanvasWhiteboardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"canvas-whiteboard","template":"\n
\n
\n \n\n \n \n\n \n \n\n\n \n\n \n\n \n\n \n \n
\n \n \n
\n ","styles":[{"__symbolic":"reference","name":"DEFAULT_STYLES"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"batchUpdateTimeoutDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"drawButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"clearButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"undoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"redoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"saveDataButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"drawButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"clearButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"undoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"redoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"saveDataButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"drawButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"clearButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"undoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"redoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"saveDataButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"shouldDownloadDrawing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"colorPickerEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"lineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"strokeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"startingColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"scaleFactor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"drawingEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"showStrokeColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"showFillColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"downloadedFileName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"lineJoin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"lineCap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"shapeSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"fillColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":136,"character":5}}]}],"onUndo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":5}}]}],"onRedo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":5}}]}],"onBatchUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":139,"character":5}}]}],"onImageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":140,"character":5}}]}],"onSave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":143,"character":5},"arguments":["canvas"]}]}],"_incompleteShapesCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":146,"character":5},"arguments":["incompleteShapesCanvas"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":174,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":175,"character":41},{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"_initInputsFromOptions":[{"__symbolic":"method"}],"_isNullOrUndefined":[{"__symbolic":"method"}],"_initCanvasEventListeners":[{"__symbolic":"method"}],"_initCanvasServiceObservables":[{"__symbolic":"method"}],"_calculateCanvasWidthAndHeight":[{"__symbolic":"method"}],"_loadImage":[{"__symbolic":"method"}],"clearCanvasLocal":[{"__symbolic":"method"}],"clearCanvas":[{"__symbolic":"method"}],"_removeCanvasData":[{"__symbolic":"method"}],"_redrawBackground":[{"__symbolic":"method"}],"_drawStartingColor":[{"__symbolic":"method"}],"getShouldDraw":[{"__symbolic":"method"}],"getDrawingEnabled":[{"__symbolic":"method"}],"toggleDrawingEnabled":[{"__symbolic":"method"}],"setDrawingEnabled":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"changeFillColor":[{"__symbolic":"method"}],"undoLocal":[{"__symbolic":"method"}],"undo":[{"__symbolic":"method"}],"_undoCanvas":[{"__symbolic":"method"}],"redoLocal":[{"__symbolic":"method"}],"redo":[{"__symbolic":"method"}],"_redoCanvas":[{"__symbolic":"method"}],"canvasUserEvents":[{"__symbolic":"method"}],"_getCanvasEventPosition":[{"__symbolic":"method"}],"_prepareToSendUpdate":[{"__symbolic":"method"}],"_canvasKeyDown":[{"__symbolic":"method"}],"_redrawCanvasOnResize":[{"__symbolic":"method"}],"_redrawHistory":[{"__symbolic":"method"}],"_draw":[{"__symbolic":"method"}],"_drawIncompleteShapes":[{"__symbolic":"method"}],"_swapCompletedShapeToActualCanvas":[{"__symbolic":"method"}],"_resetIncompleteShapeCanvas":[{"__symbolic":"method"}],"drawAllShapes":[{"__symbolic":"method"}],"_addCurrentShapeDataToAnUpdate":[{"__symbolic":"method"}],"generateShapePreviewOptions":[{"__symbolic":"method"}],"_prepareUpdateForBatchDispatch":[{"__symbolic":"method"}],"drawUpdates":[{"__symbolic":"method"}],"_drawMissingUpdates":[{"__symbolic":"method"}],"_drawImage":[{"__symbolic":"method"}],"generateCanvasDataUrl":[{"__symbolic":"method"}],"generateCanvasBlob":[{"__symbolic":"method"}],"downloadCanvasImage":[{"__symbolic":"method"}],"_saveCanvasBlob":[{"__symbolic":"method"}],"generateCanvasData":[{"__symbolic":"method"}],"saveLocal":[{"__symbolic":"method"}],"_generateDataTypeString":[{"__symbolic":"method"}],"toggleStrokeColorPicker":[{"__symbolic":"method"}],"toggleFillColorPicker":[{"__symbolic":"method"}],"toggleShapeSelector":[{"__symbolic":"method"}],"selectShape":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_generateUUID":[{"__symbolic":"method"}],"_random4":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"CanvasWhiteboardUpdate":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"error","message":"Could not resolve type","line":37,"character":23,"context":{"typeName":"CanvasWhiteboardUpdateType"},"module":"./src/canvas-whiteboard-update.model"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"stringify":[{"__symbolic":"method"}]}},"CanvasWhiteboardService":{"__symbolic":"class","members":{"drawCanvas":[{"__symbolic":"method"}],"clearCanvas":[{"__symbolic":"method"}],"undoCanvas":[{"__symbolic":"method"}],"redoCanvas":[{"__symbolic":"method"}]}},"CanvasWhiteboardOptions":{"__symbolic":"interface"},"CanvasWhiteboardPoint":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}]}},"CanvasWhiteboardShape":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"onUpdateReceived":[{"__symbolic":"method"}],"onStopReceived":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapeOptions":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"CanvasWhiteboardShapeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getShapeConstructorFromShapeName":[{"__symbolic":"method"}],"getCurrentRegisteredShapes":[{"__symbolic":"method"}],"isRegisteredShape":[{"__symbolic":"method"}],"registerShape":[{"__symbolic":"method"}],"registerShapes":[{"__symbolic":"method"}],"unregisterShape":[{"__symbolic":"method"}],"unregisterShapes":[{"__symbolic":"method"}]}},"RectangleShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}]}},"CircleShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"}]}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}],"calculateRadius":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapeSelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-selector","host":{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)","$quoted$":["(document:mousedown)","(document:touchstart)"]},"template":"\n
\n \n
\n
\n \n
\n ","styles":["\n .canvas-whiteboard-shape-selector-selected-preview {\n vertical-align: bottom;\n display: inline-block;\n }\n\n .canvas-whiteboard-shape-selector-wrapper {\n display: block;\n padding: 4px;\n border: 1px solid #afafaf;\n }\n\n @media (min-width: 401px) {\n .canvas-whiteboard-shape-selector-wrapper {\n }\n }\n "]}]}],"members":{"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"selectedShapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"onToggleShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"onShapeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":59,"character":37},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"selectShape":[{"__symbolic":"method"}],"closeOnExternalClick":[{"__symbolic":"method"}],"toggleShapeSelector":[{"__symbolic":"method"}]}},"CanvasWhiteboardColorPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"canvas-whiteboard-colorpicker","host":{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)","$quoted$":["(document:mousedown)","(document:touchstart)"]},"template":"\n
\n
{{previewText}}
\n
\n
\n
\n
Transparent
\n \n
\n ","styles":["\n .selected-color-preview {\n width: 100%;\n height: 20%;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n \n .selected-color-type-wrapper {\n display: inline-block;\n height: 100%;\n width: 100%;\n text-align: center;\n font-size: 14px;\n color: #000;\n }\n \n .transparent-color {\n font-size: 14px;\n }\n \n .canvas-whiteboard-colorpicker-wrapper {\n border: 1px solid #afafaf;\n color: #000;\n }\n\n @media (min-width: 401px) {\n .canvas-whiteboard-colorpicker-wrapper {\n position: absolute;\n }\n }\n\n .canvas-whiteboard-colorpicker-input {\n display: inline-block;\n position:relative;\n width: 44px;\n height: 44px;\n margin: 5px;\n cursor: pointer;\n color: #000;\n }\n "]}]}],"members":{"previewText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"selectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":72,"character":5},"arguments":["canvaswhiteboardcolorpicker"]}]}],"showColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"onToggleColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":5}}]}],"onColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":5}}]}],"onSecondaryColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":81,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"createColorPalette":[{"__symbolic":"method"}],"closeOnExternalClick":[{"__symbolic":"method"}],"toggleColorPicker":[{"__symbolic":"method"}],"determineColorFromCanvas":[{"__symbolic":"method"}],"selectColor":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapePreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-preview","template":"\n \n ","styles":["\n .canvas-whiteboard-shape-preview-canvas {\n cursor: pointer;\n }\n "]}]}],"members":{"shapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":5},"arguments":["canvasWhiteboardShapePreview"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"drawShapePreview":[{"__symbolic":"method"}]}},"CanvasWhiteboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":8}],"declarations":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardColorPickerComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeSelectorComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapePreviewComponent"}],"providers":[{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}],"exports":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"}]}]}],"members":{}},"DEFAULT_STYLES":"\n.canvas_whiteboard_button {\n display: inline-block;\n outline: 0px;\n padding-top: 7px;\n margin-bottom: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.42857143;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-image: none;\n border: 1px solid transparent;\n border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n z-index: 3;\n}\n\n@media (max-width: 400px) {\n .canvas_whiteboard_buttons {\n position: absolute;\n z-inde\n top: 0;\n width: 100%;\n text-align: center;\n }\n}\n \n@media (min-width: 401px) { \n .canvas_whiteboard_buttons {\n position: absolute;\n right: 0%;\n color: #fff;\n }\n}\n\n.canvas_whiteboard_buttons {\n padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n -webkit-animation: pulsate 1s ease-out;\n -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n 0% {\n -webkit-transform: scale(0.1, 0.1);\n opacity: 0.0;\n }\n 50% {\n opacity: 1.0;\n }\n 100% {\n -webkit-transform: scale(1.2, 1.2);\n opacity: 0.0;\n }\n}\n.canvas_wrapper_div {\n width: 100%;\n height: 100%;\n border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n padding-top: 5px;\n}\n\n.canvas_whiteboard {\n position: absolute;\n z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n position: absolute;\n z-index: 2;\n}\n\n"},"origins":{"CanvasWhiteboardComponent":"./src/canvas-whiteboard.component","CanvasWhiteboardUpdate":"./src/canvas-whiteboard-update.model","CanvasWhiteboardService":"./src/canvas-whiteboard.service","CanvasWhiteboardOptions":"./src/canvas-whiteboard-options","CanvasWhiteboardPoint":"./src/canvas-whiteboard-point","CanvasWhiteboardShape":"./src/shapes/canvas-whiteboard-shape","CanvasWhiteboardShapeOptions":"./src/shapes/canvas-whiteboard-shape-options","CanvasWhiteboardShapeService":"./src/shapes/canvas-whiteboard-shape.service","RectangleShape":"./src/shapes/rectangle-shape","CircleShape":"./src/shapes/circle-shape","CanvasWhiteboardShapeSelectorComponent":"./src/shapes/canvas-whiteboard-shape-selector.component","CanvasWhiteboardColorPickerComponent":"./src/canvas-whiteboard-colorpicker.component","CanvasWhiteboardShapePreviewComponent":"./src/shapes/canvas-whiteboard-shape-preview.component","CanvasWhiteboardModule":"./src/ng2-canvas-whiteboard.module","DEFAULT_STYLES":"./src/template"},"importAs":"ng2-canvas-whiteboard"} \ No newline at end of file +{"__symbolic":"module","version":4,"metadata":{"CanvasWhiteboardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"canvas-whiteboard","template":"\n
\n
\n \n\n \n \n\n \n \n\n\n \n\n \n\n \n\n \n \n
\n \n \n
\n ","styles":[{"__symbolic":"reference","name":"DEFAULT_STYLES"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"batchUpdateTimeoutDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"drawButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"clearButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"undoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"redoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"saveDataButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"drawButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"clearButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"undoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"redoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"saveDataButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"drawButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"clearButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"undoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"redoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"saveDataButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"shouldDownloadDrawing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"colorPickerEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"lineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"strokeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"startingColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"scaleFactor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"drawingEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"showStrokeColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"showFillColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"downloadedFileName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"lineJoin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"lineCap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"shapeSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"fillColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":5}}]}],"onUndo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":5}}]}],"onRedo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":139,"character":5}}]}],"onBatchUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":140,"character":5}}]}],"onImageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":5}}]}],"onSave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":142,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":144,"character":5},"arguments":["canvas"]}]}],"_incompleteShapesCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":147,"character":5},"arguments":["incompleteShapesCanvas"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":175,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":176,"character":41},{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"_initInputsFromOptions":[{"__symbolic":"method"}],"_isNullOrUndefined":[{"__symbolic":"method"}],"_initCanvasEventListeners":[{"__symbolic":"method"}],"_initCanvasServiceObservables":[{"__symbolic":"method"}],"_calculateCanvasWidthAndHeight":[{"__symbolic":"method"}],"_loadImage":[{"__symbolic":"method"}],"clearCanvasLocal":[{"__symbolic":"method"}],"clearCanvas":[{"__symbolic":"method"}],"_removeCanvasData":[{"__symbolic":"method"}],"_redrawBackground":[{"__symbolic":"method"}],"_drawStartingColor":[{"__symbolic":"method"}],"getShouldDraw":[{"__symbolic":"method"}],"getDrawingEnabled":[{"__symbolic":"method"}],"toggleDrawingEnabled":[{"__symbolic":"method"}],"setDrawingEnabled":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"changeFillColor":[{"__symbolic":"method"}],"undoLocal":[{"__symbolic":"method"}],"undo":[{"__symbolic":"method"}],"_undoCanvas":[{"__symbolic":"method"}],"redoLocal":[{"__symbolic":"method"}],"redo":[{"__symbolic":"method"}],"_redoCanvas":[{"__symbolic":"method"}],"canvasUserEvents":[{"__symbolic":"method"}],"_getCanvasEventPosition":[{"__symbolic":"method"}],"_prepareToSendUpdate":[{"__symbolic":"method"}],"_canvasKeyDown":[{"__symbolic":"method"}],"_redrawCanvasOnResize":[{"__symbolic":"method"}],"_redrawHistory":[{"__symbolic":"method"}],"_draw":[{"__symbolic":"method"}],"_drawIncompleteShapes":[{"__symbolic":"method"}],"_swapCompletedShapeToActualCanvas":[{"__symbolic":"method"}],"_resetIncompleteShapeCanvas":[{"__symbolic":"method"}],"drawAllShapes":[{"__symbolic":"method"}],"_addCurrentShapeDataToAnUpdate":[{"__symbolic":"method"}],"generateShapePreviewOptions":[{"__symbolic":"method"}],"_prepareUpdateForBatchDispatch":[{"__symbolic":"method"}],"drawUpdates":[{"__symbolic":"method"}],"_drawMissingUpdates":[{"__symbolic":"method"}],"_drawImage":[{"__symbolic":"method"}],"generateCanvasDataUrl":[{"__symbolic":"method"}],"generateCanvasBlob":[{"__symbolic":"method"}],"downloadCanvasImage":[{"__symbolic":"method"}],"_saveCanvasBlob":[{"__symbolic":"method"}],"generateCanvasData":[{"__symbolic":"method"}],"saveLocal":[{"__symbolic":"method"}],"_generateDataTypeString":[{"__symbolic":"method"}],"toggleStrokeColorPicker":[{"__symbolic":"method"}],"toggleFillColorPicker":[{"__symbolic":"method"}],"toggleShapeSelector":[{"__symbolic":"method"}],"selectShape":[{"__symbolic":"method"}],"getDrawingHistory":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_generateUUID":[{"__symbolic":"method"}],"_random4":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"CanvasWhiteboardUpdate":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"error","message":"Could not resolve type","line":37,"character":23,"context":{"typeName":"CanvasWhiteboardUpdateType"},"module":"./src/canvas-whiteboard-update.model"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"stringify":[{"__symbolic":"method"}]}},"CanvasWhiteboardService":{"__symbolic":"class","members":{"drawCanvas":[{"__symbolic":"method"}],"clearCanvas":[{"__symbolic":"method"}],"undoCanvas":[{"__symbolic":"method"}],"redoCanvas":[{"__symbolic":"method"}]}},"CanvasWhiteboardOptions":{"__symbolic":"interface"},"CanvasWhiteboardPoint":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}]}},"CanvasWhiteboardShape":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"onUpdateReceived":[{"__symbolic":"method"}],"onStopReceived":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapeOptions":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"CanvasWhiteboardShapeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getShapeConstructorFromShapeName":[{"__symbolic":"method"}],"getCurrentRegisteredShapes":[{"__symbolic":"method"}],"isRegisteredShape":[{"__symbolic":"method"}],"registerShape":[{"__symbolic":"method"}],"registerShapes":[{"__symbolic":"method"}],"unregisterShape":[{"__symbolic":"method"}],"unregisterShapes":[{"__symbolic":"method"}]}},"RectangleShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}]}},"CircleShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"}]}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}],"calculateRadius":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapeSelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-selector","host":{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)","$quoted$":["(document:mousedown)","(document:touchstart)"]},"template":"\n
\n \n
\n
\n \n
\n ","styles":["\n .canvas-whiteboard-shape-selector-selected-preview {\n vertical-align: bottom;\n display: inline-block;\n }\n\n .canvas-whiteboard-shape-selector-wrapper {\n display: block;\n padding: 4px;\n border: 1px solid #afafaf;\n }\n\n @media (min-width: 401px) {\n .canvas-whiteboard-shape-selector-wrapper {\n }\n }\n "]}]}],"members":{"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"selectedShapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"onToggleShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"onShapeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":59,"character":37},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"selectShape":[{"__symbolic":"method"}],"closeOnExternalClick":[{"__symbolic":"method"}],"toggleShapeSelector":[{"__symbolic":"method"}]}},"CanvasWhiteboardColorPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"canvas-whiteboard-colorpicker","host":{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)","$quoted$":["(document:mousedown)","(document:touchstart)"]},"template":"\n
\n
{{previewText}}
\n
\n
\n
\n
Transparent
\n \n
\n ","styles":["\n .selected-color-preview {\n width: 100%;\n height: 20%;\n position: absolute;\n bottom: 0;\n left: 0;\n }\n \n .selected-color-type-wrapper {\n display: inline-block;\n height: 100%;\n width: 100%;\n text-align: center;\n font-size: 14px;\n color: #000;\n }\n \n .transparent-color {\n font-size: 14px;\n }\n \n .canvas-whiteboard-colorpicker-wrapper {\n border: 1px solid #afafaf;\n color: #000;\n }\n\n @media (min-width: 401px) {\n .canvas-whiteboard-colorpicker-wrapper {\n position: absolute;\n }\n }\n\n .canvas-whiteboard-colorpicker-input {\n display: inline-block;\n position:relative;\n width: 44px;\n height: 44px;\n margin: 5px;\n cursor: pointer;\n color: #000;\n }\n "]}]}],"members":{"previewText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"selectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":72,"character":5},"arguments":["canvaswhiteboardcolorpicker"]}]}],"showColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"onToggleColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":5}}]}],"onColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":5}}]}],"onSecondaryColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":81,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"createColorPalette":[{"__symbolic":"method"}],"closeOnExternalClick":[{"__symbolic":"method"}],"toggleColorPicker":[{"__symbolic":"method"}],"determineColorFromCanvas":[{"__symbolic":"method"}],"selectColor":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapePreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-preview","template":"\n \n ","styles":["\n .canvas-whiteboard-shape-preview-canvas {\n cursor: pointer;\n }\n "]}]}],"members":{"shapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":5},"arguments":["canvasWhiteboardShapePreview"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"drawShapePreview":[{"__symbolic":"method"}]}},"CanvasWhiteboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":8}],"declarations":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardColorPickerComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeSelectorComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapePreviewComponent"}],"providers":[{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}],"exports":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"}]}]}],"members":{}},"DEFAULT_STYLES":"\n.canvas_whiteboard_button {\n display: inline-block;\n outline: 0px;\n padding-top: 7px;\n margin-bottom: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.42857143;\n text-align: center;\n white-space: nowrap;\n vertical-align: middle;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background-image: none;\n border: 1px solid transparent;\n border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n z-index: 3;\n}\n\n@media (max-width: 400px) {\n .canvas_whiteboard_buttons {\n position: absolute;\n z-inde\n top: 0;\n width: 100%;\n text-align: center;\n }\n}\n \n@media (min-width: 401px) { \n .canvas_whiteboard_buttons {\n position: absolute;\n right: 0%;\n color: #fff;\n }\n}\n\n.canvas_whiteboard_buttons {\n padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n -webkit-animation: pulsate 1s ease-out;\n -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n 0% {\n -webkit-transform: scale(0.1, 0.1);\n opacity: 0.0;\n }\n 50% {\n opacity: 1.0;\n }\n 100% {\n -webkit-transform: scale(1.2, 1.2);\n opacity: 0.0;\n }\n}\n.canvas_wrapper_div {\n width: 100%;\n height: 100%;\n border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n padding-top: 5px;\n}\n\n.canvas_whiteboard {\n position: absolute;\n z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n position: absolute;\n z-index: 2;\n}\n\n"},"origins":{"CanvasWhiteboardComponent":"./src/canvas-whiteboard.component","CanvasWhiteboardUpdate":"./src/canvas-whiteboard-update.model","CanvasWhiteboardService":"./src/canvas-whiteboard.service","CanvasWhiteboardOptions":"./src/canvas-whiteboard-options","CanvasWhiteboardPoint":"./src/canvas-whiteboard-point","CanvasWhiteboardShape":"./src/shapes/canvas-whiteboard-shape","CanvasWhiteboardShapeOptions":"./src/shapes/canvas-whiteboard-shape-options","CanvasWhiteboardShapeService":"./src/shapes/canvas-whiteboard-shape.service","RectangleShape":"./src/shapes/rectangle-shape","CircleShape":"./src/shapes/circle-shape","CanvasWhiteboardShapeSelectorComponent":"./src/shapes/canvas-whiteboard-shape-selector.component","CanvasWhiteboardColorPickerComponent":"./src/canvas-whiteboard-colorpicker.component","CanvasWhiteboardShapePreviewComponent":"./src/shapes/canvas-whiteboard-shape-preview.component","CanvasWhiteboardModule":"./src/ng2-canvas-whiteboard.module","DEFAULT_STYLES":"./src/template"},"importAs":"ng2-canvas-whiteboard"} \ No newline at end of file diff --git a/dist/package.json b/dist/package.json index 0a480f43..f87282d5 100644 --- a/dist/package.json +++ b/dist/package.json @@ -1,6 +1,6 @@ { "name": "ng2-canvas-whiteboard", - "version": "3.0.2", + "version": "3.0.3", "description": "A Canvas component for Angular which supports free drawing.", "main": "./bundles/ng2-canvas-whiteboard.umd.js", "module": "./modules/ng2-canvas-whiteboard.es5.js", @@ -40,7 +40,9 @@ "peerDependencies": { "rxjs": "^6.0.0" }, - "dependencies": {}, + "dependencies": { + "lodash": "4.17.11" + }, "devDependencies": { "@angular/animations": "^6.0.0", "@angular/common": "^6.0.0", @@ -50,6 +52,7 @@ "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/platform-server": "^6.0.0", + "@types/lodash": "4.14.116", "@types/node": "7.0.10", "chalk": "1.1.3", "core-js": "2.4.1", diff --git a/dist/src/canvas-whiteboard.component.d.ts b/dist/src/canvas-whiteboard.component.d.ts index a4f50487..0481b839 100644 --- a/dist/src/canvas-whiteboard.component.d.ts +++ b/dist/src/canvas-whiteboard.component.d.ts @@ -391,6 +391,11 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit, */ toggleShapeSelector(value: boolean): void; selectShape(newShapeBlueprint: INewCanvasWhiteboardShape): void; + /** + * Returns a deep copy of the current drawing history for the canvas. + * The deep copy is returned because we don't want anyone to mutate the current history + */ + getDrawingHistory(): CanvasWhiteboardUpdate[]; /** * Unsubscribe from a given subscription if it is active * @param subscription diff --git a/package-lock.json b/package-lock.json index c92d6cdc..5dfee65b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ng2-canvas-whiteboard", - "version": "3.0.1", + "version": "3.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -81,6 +81,12 @@ "xhr2": "0.1.4" } }, + "@types/lodash": { + "version": "4.14.116", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.116.tgz", + "integrity": "sha512-lRnAtKnxMXcYYXqOiotTmJd74uawNWuPnsnPrrO7HiFuE3npE2iQhfABatbYDyxTNqZNuXzcKGhw37R7RjBFLg==", + "dev": true + }, "@types/node": { "version": "7.0.10", "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.10.tgz", @@ -2053,8 +2059,7 @@ "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", - "dev": true + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" }, "lodash.debounce": { "version": "4.0.8", diff --git a/package.json b/package.json index 0a480f43..f87282d5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-canvas-whiteboard", - "version": "3.0.2", + "version": "3.0.3", "description": "A Canvas component for Angular which supports free drawing.", "main": "./bundles/ng2-canvas-whiteboard.umd.js", "module": "./modules/ng2-canvas-whiteboard.es5.js", @@ -40,7 +40,9 @@ "peerDependencies": { "rxjs": "^6.0.0" }, - "dependencies": {}, + "dependencies": { + "lodash": "4.17.11" + }, "devDependencies": { "@angular/animations": "^6.0.0", "@angular/common": "^6.0.0", @@ -50,6 +52,7 @@ "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/platform-server": "^6.0.0", + "@types/lodash": "4.14.116", "@types/node": "7.0.10", "chalk": "1.1.3", "core-js": "2.4.1", diff --git a/public_api.js b/public_api.js index 34317e5c..24c17b5e 100644 --- a/public_api.js +++ b/public_api.js @@ -3,5 +3,5 @@ function __export(m) { for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; } Object.defineProperty(exports, "__esModule", { value: true }); -__export(require("./modules/ng2-canvas-whiteboard")); +__export(require("./src/ng2-canvas-whiteboard")); //# sourceMappingURL=public_api.js.map \ No newline at end of file diff --git a/src/canvas-whiteboard.component.js b/src/canvas-whiteboard.component.js index 2943bf85..53fea3b4 100644 --- a/src/canvas-whiteboard.component.js +++ b/src/canvas-whiteboard.component.js @@ -18,6 +18,7 @@ var canvas_whiteboard_shape_service_1 = require("./shapes/canvas-whiteboard-shap var canvas_whiteboard_shape_options_1 = require("./shapes/canvas-whiteboard-shape-options"); var index_1 = require("rxjs/index"); var operators_1 = require("rxjs/operators"); +var _ = require("lodash"); var CanvasWhiteboardComponent = /** @class */ (function () { function CanvasWhiteboardComponent(ngZone, _changeDetector, _canvasWhiteboardService, _canvasWhiteboardShapeService) { this.ngZone = ngZone; @@ -689,7 +690,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () { */ CanvasWhiteboardComponent.prototype._prepareUpdateForBatchDispatch = function (update) { var _this = this; - this._batchUpdates.push(update); + this._batchUpdates.push(_.cloneDeep(update)); if (!this._updateTimeout) { this._updateTimeout = setTimeout(function () { _this.onBatchUpdate.emit(_this._batchUpdates); @@ -943,6 +944,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () { CanvasWhiteboardComponent.prototype.selectShape = function (newShapeBlueprint) { this.selectedShapeConstructor = newShapeBlueprint; }; + /** + * Returns a deep copy of the current drawing history for the canvas. + * The deep copy is returned because we don't want anyone to mutate the current history + */ + CanvasWhiteboardComponent.prototype.getDrawingHistory = function () { + return _.cloneDeep(this._updateHistory); + }; /** * Unsubscribe from a given subscription if it is active * @param subscription diff --git a/src/canvas-whiteboard.component.ts b/src/canvas-whiteboard.component.ts index b04776a2..984940c1 100644 --- a/src/canvas-whiteboard.component.ts +++ b/src/canvas-whiteboard.component.ts @@ -18,6 +18,7 @@ import {CanvasWhiteboardShapeService, INewCanvasWhiteboardShape} from "./shapes/ import {CanvasWhiteboardShapeOptions} from "./shapes/canvas-whiteboard-shape-options"; import {fromEvent, Subscription} from "rxjs/index"; import {debounceTime, distinctUntilChanged} from "rxjs/operators"; +import {cloneDeep} from "lodash"; @Component({ selector: 'canvas-whiteboard', @@ -820,7 +821,7 @@ export class CanvasWhiteboardComponent implements OnInit, AfterViewInit, OnChang * @return Emits an Array of Updates when the batch. */ private _prepareUpdateForBatchDispatch(update: CanvasWhiteboardUpdate): void { - this._batchUpdates.push(update); + this._batchUpdates.push(cloneDeep(update)); if (!this._updateTimeout) { this._updateTimeout = setTimeout(() => { this.onBatchUpdate.emit(this._batchUpdates); @@ -1074,6 +1075,14 @@ export class CanvasWhiteboardComponent implements OnInit, AfterViewInit, OnChang this.selectedShapeConstructor = newShapeBlueprint; } + /** + * Returns a deep copy of the current drawing history for the canvas. + * The deep copy is returned because we don't want anyone to mutate the current history + */ + getDrawingHistory(): CanvasWhiteboardUpdate[] { + return cloneDeep(this._updateHistory); + } + /** * Unsubscribe from a given subscription if it is active * @param subscription diff --git a/src/ng2-canvas-whiteboard.js b/src/ng2-canvas-whiteboard.js index 8156ae3d..a3b86f09 100644 --- a/src/ng2-canvas-whiteboard.js +++ b/src/ng2-canvas-whiteboard.js @@ -20,6 +20,12 @@ var circle_shape_1 = require("./shapes/circle-shape"); exports.CircleShape = circle_shape_1.CircleShape; var canvas_whiteboard_shape_selector_component_1 = require("./shapes/canvas-whiteboard-shape-selector.component"); exports.CanvasWhiteboardShapeSelectorComponent = canvas_whiteboard_shape_selector_component_1.CanvasWhiteboardShapeSelectorComponent; +var canvas_whiteboard_colorpicker_component_1 = require("./canvas-whiteboard-colorpicker.component"); +exports.CanvasWhiteboardColorPickerComponent = canvas_whiteboard_colorpicker_component_1.CanvasWhiteboardColorPickerComponent; +var canvas_whiteboard_shape_preview_component_1 = require("./shapes/canvas-whiteboard-shape-preview.component"); +exports.CanvasWhiteboardShapePreviewComponent = canvas_whiteboard_shape_preview_component_1.CanvasWhiteboardShapePreviewComponent; var ng2_canvas_whiteboard_module_1 = require("./ng2-canvas-whiteboard.module"); exports.CanvasWhiteboardModule = ng2_canvas_whiteboard_module_1.CanvasWhiteboardModule; +var template_1 = require("./template"); +exports.DEFAULT_STYLES = template_1.DEFAULT_STYLES; //# sourceMappingURL=ng2-canvas-whiteboard.js.map \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 1e8617ce..61ab6936 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,8 @@ "target": "es5", "skipLibCheck": true, "types": [ - "node" + "node", + "lodash" ] }, "exclude": [