From 21f5ed23884f068ed4f141b5d37840e6db145c34 Mon Sep 17 00:00:00 2001 From: WF | Stefan Peshikj Date: Wed, 9 Sep 2020 11:29:43 +0200 Subject: [PATCH] #66 Add inputs for separate color picker disabling, export all Shapes --- README.md | 52 ++++- dist/README.md | 59 ++++- dist/bundles/ng2-canvas-whiteboard.umd.js | 21 +- dist/bundles/ng2-canvas-whiteboard.umd.min.js | 4 +- dist/modules/ng2-canvas-whiteboard.es5.js | 19 +- dist/modules/ng2-canvas-whiteboard.js | 21 +- dist/ng2-canvas-whiteboard.metadata.json | 2 +- dist/package.json | 2 +- dist/src/canvas-whiteboard-options.d.ts | 3 + dist/src/canvas-whiteboard.component.d.ts | 3 + dist/src/ng2-canvas-whiteboard.d.ts | 6 +- package-lock.json | 221 ++++++++++++------ package.json | 2 +- src/canvas-whiteboard-options.ts | 5 +- src/canvas-whiteboard.component.ts | 14 +- src/ng2-canvas-whiteboard.ts | 8 +- 16 files changed, 333 insertions(+), 109 deletions(-) diff --git a/README.md b/README.md index 854c246b..1800e292 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,13 @@ ## Canvas version changes +#### v3.1.2, v4.0.1 +Exports all existing canvas shapes, so that they can be easily unregistered from the canvas. (see README for unregistering the shapes). + +Also, this version introduces two new Inputs, `strokeColorPickerEnabled: boolean` and `fillColorPickerEnabled: boolean`, also deprecates the `colorPickerEnabled` Input. + +For the sake of reverse-compat, the `colorPickerEnabled` input is still there and it will be used in combination with the two new variables. (ex: `colorPickerEnabled || fillColorPickerEnabled`). + #### v3.1.1 Audits the npm packages and upgrades the lodash version from 4.17.11 to 4.17.13 #### v3.1.0 Merges the pull request from https://github.com/webfactorymk/ng2-canvas-whiteboard/pull/55 to allow the component to be used in Angular 8 and 9 applications. Also fixes the imports for rxjs items from 'rxjs/index' to 'rxjs' @@ -191,9 +198,21 @@ Changes to this object will be detected by the canvas in the OnChange listener a ``` +NOTE: In order for the changeDetection to pick up the options changes, you must change the options reference whenever you want to change a value. +Example: +```typescript + public changeOptions(): void { + this.canvasOptions = { + ...this.canvasOptions, + fillColorPickerEnabled: true, + colorPickerEnabled: false + }; + } +``` + ### To add text to the buttons via css Each button has its on class (example: Draw button -> .canvas_whiteboard_button-draw)
-This button can be customized by overriding it's css +This button can be customized by overriding its css ```css .canvas_whiteboard_button-draw:before { content: "Draw"; @@ -211,9 +230,17 @@ If using component-only styles, for this to work the viewEncapsulation must be s }) ``` -##### `colorPickerEnabled: boolean` (default: false) +You can also use the `::ng-deep` selector if you do not want to change the ViewEncapsulation property on the component. + +##### Deprecated: `colorPickerEnabled: boolean` (default: false) This allows the adding of a colorPickers that the user can choose to draw with (stroke and fill color), -and the original colors are kept when redrawing +and the original colors will be used when redrawing + +##### `fillColorPickerEnabled: boolean` (default: false) +This shows/hides the fill color picker. Note: if this field has been to `false`, but the `colorPickerEnabled` field has been to `true`, the color picker will be shown, as per reverse-compat needs. + +##### `strokeColorPickerEnabled: boolean` (default: false) +This shows/hides the stroke color picker. Note: if this field has been to `false`, but the `colorPickerEnabled` field has been set to `true`, the color picker will be shown, as per reverse-compat needs. ##### `lineWidth: number` (default: 2) This input controls the drawing pencil size @@ -355,6 +382,25 @@ export class RandomShape extends CanvasWhiteboardShape { } } ``` + +## Unregistering Shapes + +The default shapes can also be unregistered. Example: +```typescript +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + constructor(private canvasWhiteboardShapeService: CanvasWhiteboardShapeService) { + this.canvasWhiteboardShapeService.unregisterShapes([CircleShape, SmileyShape, StarShape]); + } +} +``` + +NOTE: There must be at least one shape registered for the canvas to work, but for the sake of convenience, all of the default shapes have been exported (maybe someone would want to unregister all of them and register his own shapes), but it is recommended not to unregister the FreeHandShape. + # Canvas Whiteboard Shape Selector The `CanvasWhiteboardComponent` is now equipped with a shape selector (since the free hand drawing is now a shape because of consistency), The shape selector can be managed or hidden with inputs, and it basically calls the `CanvasWhiteboardShapeService` and draws all the diff --git a/dist/README.md b/dist/README.md index e9662fef..1800e292 100644 --- a/dist/README.md +++ b/dist/README.md @@ -2,8 +2,18 @@ ## Canvas version changes -#### v3.0.4 Fixes a bug with production build and recognition of shape names by adding an abstract method in the base Shape class. +#### v3.1.2, v4.0.1 +Exports all existing canvas shapes, so that they can be easily unregistered from the canvas. (see README for unregistering the shapes). + +Also, this version introduces two new Inputs, `strokeColorPickerEnabled: boolean` and `fillColorPickerEnabled: boolean`, also deprecates the `colorPickerEnabled` Input. + +For the sake of reverse-compat, the `colorPickerEnabled` input is still there and it will be used in combination with the two new variables. (ex: `colorPickerEnabled || fillColorPickerEnabled`). + +#### v3.1.1 Audits the npm packages and upgrades the lodash version from 4.17.11 to 4.17.13 +#### v3.1.0 Merges the pull request from https://github.com/webfactorymk/ng2-canvas-whiteboard/pull/55 to allow the component to be used in Angular 8 and 9 applications. Also fixes the imports for rxjs items from 'rxjs/index' to 'rxjs' + +#### v3.0.4 Fixes a bug with production build and recognition of shape names by adding an abstract method in the base Shape class. #### v3.0.0 Removes the `rxjs-compat` library and adds `rxjs^6`. This means that older versions will not be supported if they upgrade to `ng2-canvas-whiteboard^3.0.0`. #### *This version also changes the way of how this library is built and made ready for publish.* @@ -188,9 +198,21 @@ Changes to this object will be detected by the canvas in the OnChange listener a ``` +NOTE: In order for the changeDetection to pick up the options changes, you must change the options reference whenever you want to change a value. +Example: +```typescript + public changeOptions(): void { + this.canvasOptions = { + ...this.canvasOptions, + fillColorPickerEnabled: true, + colorPickerEnabled: false + }; + } +``` + ### To add text to the buttons via css Each button has its on class (example: Draw button -> .canvas_whiteboard_button-draw)
-This button can be customized by overriding it's css +This button can be customized by overriding its css ```css .canvas_whiteboard_button-draw:before { content: "Draw"; @@ -208,9 +230,17 @@ If using component-only styles, for this to work the viewEncapsulation must be s }) ``` -##### `colorPickerEnabled: boolean` (default: false) +You can also use the `::ng-deep` selector if you do not want to change the ViewEncapsulation property on the component. + +##### Deprecated: `colorPickerEnabled: boolean` (default: false) This allows the adding of a colorPickers that the user can choose to draw with (stroke and fill color), -and the original colors are kept when redrawing +and the original colors will be used when redrawing + +##### `fillColorPickerEnabled: boolean` (default: false) +This shows/hides the fill color picker. Note: if this field has been to `false`, but the `colorPickerEnabled` field has been to `true`, the color picker will be shown, as per reverse-compat needs. + +##### `strokeColorPickerEnabled: boolean` (default: false) +This shows/hides the stroke color picker. Note: if this field has been to `false`, but the `colorPickerEnabled` field has been set to `true`, the color picker will be shown, as per reverse-compat needs. ##### `lineWidth: number` (default: 2) This input controls the drawing pencil size @@ -352,6 +382,25 @@ export class RandomShape extends CanvasWhiteboardShape { } } ``` + +## Unregistering Shapes + +The default shapes can also be unregistered. Example: +```typescript +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + constructor(private canvasWhiteboardShapeService: CanvasWhiteboardShapeService) { + this.canvasWhiteboardShapeService.unregisterShapes([CircleShape, SmileyShape, StarShape]); + } +} +``` + +NOTE: There must be at least one shape registered for the canvas to work, but for the sake of convenience, all of the default shapes have been exported (maybe someone would want to unregister all of them and register his own shapes), but it is recommended not to unregister the FreeHandShape. + # Canvas Whiteboard Shape Selector The `CanvasWhiteboardComponent` is now equipped with a shape selector (since the free hand drawing is now a shape because of consistency), The shape selector can be managed or hidden with inputs, and it basically calls the `CanvasWhiteboardShapeService` and draws all the @@ -470,4 +519,4 @@ If this is the case you may want to call a resize event for the window for the s window.dispatchEvent(new Event('resize')); }, 1); } -``` \ No newline at end of file +``` diff --git a/dist/bundles/ng2-canvas-whiteboard.umd.js b/dist/bundles/ng2-canvas-whiteboard.umd.js index cc10358b..f622f045 100644 --- a/dist/bundles/ng2-canvas-whiteboard.umd.js +++ b/dist/bundles/ng2-canvas-whiteboard.umd.js @@ -757,7 +757,12 @@ var CanvasWhiteboardComponent = /** @class */ (function () { this.redoButtonEnabled = false; this.saveDataButtonEnabled = false; this.shouldDownloadDrawing = true; + /** + * \@deprecated. Replaced with strokeColorPickerEnabled and fillColorPickerEnabled inputs + */ this.colorPickerEnabled = false; + this.strokeColorPickerEnabled = false; + this.fillColorPickerEnabled = false; this.lineWidth = 2; this.strokeColor = "rgba(0, 0, 0, 1)"; this.startingColor = "#fff"; @@ -826,7 +831,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () { * @return {?} */ CanvasWhiteboardComponent.prototype.ngOnChanges = function (changes) { - if (changes.options && changes.options.currentValue != changes.options.previousValue) { + if (changes.options && lodash.isEqual(changes.options.currentValue, changes.options.previousValue)) { this._initInputsFromOptions(changes.options.currentValue); } }; @@ -888,6 +893,10 @@ var CanvasWhiteboardComponent = /** @class */ (function () { this.saveDataButtonEnabled = options.saveDataButtonEnabled; if (!this._isNullOrUndefined(options.colorPickerEnabled)) this.colorPickerEnabled = options.colorPickerEnabled; + if (!this._isNullOrUndefined(options.strokeColorPickerEnabled)) + this.strokeColorPickerEnabled = options.strokeColorPickerEnabled; + if (!this._isNullOrUndefined(options.fillColorPickerEnabled)) + this.fillColorPickerEnabled = options.fillColorPickerEnabled; if (!this._isNullOrUndefined(options.lineWidth)) this.lineWidth = options.lineWidth; if (!this._isNullOrUndefined(options.strokeColor)) @@ -1931,7 +1940,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () { 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 ", + 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] },] }, ]; @@ -1964,6 +1973,8 @@ CanvasWhiteboardComponent.propDecorators = { saveDataButtonEnabled: [{ type: _angular_core.Input }], shouldDownloadDrawing: [{ type: _angular_core.Input }], colorPickerEnabled: [{ type: _angular_core.Input }], + strokeColorPickerEnabled: [{ type: _angular_core.Input }], + fillColorPickerEnabled: [{ type: _angular_core.Input }], lineWidth: [{ type: _angular_core.Input }], strokeColor: [{ type: _angular_core.Input }], startingColor: [{ type: _angular_core.Input }], @@ -2256,8 +2267,12 @@ exports.CanvasWhiteboardPoint = CanvasWhiteboardPoint; exports.CanvasWhiteboardShape = CanvasWhiteboardShape; exports.CanvasWhiteboardShapeOptions = CanvasWhiteboardShapeOptions; exports.CanvasWhiteboardShapeService = CanvasWhiteboardShapeService; -exports.RectangleShape = RectangleShape; +exports.FreeHandShape = FreeHandShape; exports.CircleShape = CircleShape; +exports.LineShape = LineShape; +exports.RectangleShape = RectangleShape; +exports.SmileyShape = SmileyShape; +exports.StarShape = StarShape; exports.CanvasWhiteboardShapeSelectorComponent = CanvasWhiteboardShapeSelectorComponent; exports.CanvasWhiteboardColorPickerComponent = CanvasWhiteboardColorPickerComponent; exports.CanvasWhiteboardShapePreviewComponent = CanvasWhiteboardShapePreviewComponent; diff --git a/dist/bundles/ng2-canvas-whiteboard.umd.min.js b/dist/bundles/ng2-canvas-whiteboard.umd.min.js index 8aa515eb..5a3c4d45 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"),require("rxjs/operators"),require("lodash"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs","rxjs/operators","lodash","@angular/common"],factory):factory((global.ng=global.ng||{},global.ng.ng2CanvasWhiteboard=global.ng.ng2CanvasWhiteboard||{}),global.ng.core,global.rxjs,global.rxjs_operators,global.lodash,global.ng.common)}(this,function(exports,_angular_core,rxjs,rxjs_operators,lodash,_angular_common){"use strict";var __extends=function(){var extendStatics=function(d,b){return(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])})(d,b)};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.Subject,this.canvasDrawSubject$=this._canvasDrawSubject.asObservable(),this._canvasClearSubject=new rxjs.Subject,this.canvasClearSubject$=this._canvasClearSubject.asObservable(),this._canvasUndoSubject=new rxjs.Subject,this.canvasUndoSubject$=this._canvasUndoSubject.asObservable(),this._canvasRedoSubject=new rxjs.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.getShapeName=function(){return"CircleShape"},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.getShapeName=function(){return"RectangleShape"},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.getShapeName=function(){return"FreeHandShape"},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 _this.options.shouldFillShape=!0,_this.options.fillStyle=_this.options.fillStyle||"yellow",_this.radius=radius||0,_this}return __extends(SmileyShape,_super),SmileyShape.prototype.getShapeName=function(){return"SmileyShape"},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=spikes||5,_this}return __extends(StarShape,_super),StarShape.prototype.getShapeName=function(){return"StarShape"},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",{static:!0}]}],_incompleteShapesCanvas:[{type:_angular_core.ViewChild,args:["incompleteShapesCanvas",{static:!0}]}]};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",{static:!0}]}],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"),require("rxjs/operators"),require("lodash"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs","rxjs/operators","lodash","@angular/common"],factory):factory((global.ng=global.ng||{},global.ng.ng2CanvasWhiteboard=global.ng.ng2CanvasWhiteboard||{}),global.ng.core,global.rxjs,global.rxjs_operators,global.lodash,global.ng.common)}(this,function(exports,_angular_core,rxjs,rxjs_operators,lodash,_angular_common){"use strict";var __extends=function(){var extendStatics=function(d,b){return(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])})(d,b)};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.Subject,this.canvasDrawSubject$=this._canvasDrawSubject.asObservable(),this._canvasClearSubject=new rxjs.Subject,this.canvasClearSubject$=this._canvasClearSubject.asObservable(),this._canvasUndoSubject=new rxjs.Subject,this.canvasUndoSubject$=this._canvasUndoSubject.asObservable(),this._canvasRedoSubject=new rxjs.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.getShapeName=function(){return"CircleShape"},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.getShapeName=function(){return"RectangleShape"},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.getShapeName=function(){return"FreeHandShape"},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 _this.options.shouldFillShape=!0,_this.options.fillStyle=_this.options.fillStyle||"yellow",_this.radius=radius||0,_this}return __extends(SmileyShape,_super),SmileyShape.prototype.getShapeName=function(){return"SmileyShape"},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=spikes||5,_this}return __extends(StarShape,_super),StarShape.prototype.getShapeName=function(){return"StarShape"},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}],strokeColorPickerEnabled:[{type:_angular_core.Input}],fillColorPickerEnabled:[{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",{static:!0}]}],_incompleteShapesCanvas:[{type:_angular_core.ViewChild,args:["incompleteShapesCanvas",{static:!0}]}]};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",{static:!0}]}],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.FreeHandShape=FreeHandShape,exports.CircleShape=CircleShape,exports.LineShape=LineShape,exports.RectangleShape=RectangleShape,exports.SmileyShape=SmileyShape,exports.StarShape=StarShape,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 a9fd2df5..4b985b95 100644 --- a/dist/modules/ng2-canvas-whiteboard.es5.js +++ b/dist/modules/ng2-canvas-whiteboard.es5.js @@ -14,7 +14,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'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; -import { cloneDeep } from 'lodash'; +import { cloneDeep, isEqual } from 'lodash'; import { CommonModule } from '@angular/common'; /** * @fileoverview added by tsickle @@ -756,7 +756,12 @@ var CanvasWhiteboardComponent = /** @class */ (function () { this.redoButtonEnabled = false; this.saveDataButtonEnabled = false; this.shouldDownloadDrawing = true; + /** + * \@deprecated. Replaced with strokeColorPickerEnabled and fillColorPickerEnabled inputs + */ this.colorPickerEnabled = false; + this.strokeColorPickerEnabled = false; + this.fillColorPickerEnabled = false; this.lineWidth = 2; this.strokeColor = "rgba(0, 0, 0, 1)"; this.startingColor = "#fff"; @@ -825,7 +830,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () { * @return {?} */ CanvasWhiteboardComponent.prototype.ngOnChanges = function (changes) { - if (changes.options && changes.options.currentValue != changes.options.previousValue) { + if (changes.options && isEqual(changes.options.currentValue, changes.options.previousValue)) { this._initInputsFromOptions(changes.options.currentValue); } }; @@ -887,6 +892,10 @@ var CanvasWhiteboardComponent = /** @class */ (function () { this.saveDataButtonEnabled = options.saveDataButtonEnabled; if (!this._isNullOrUndefined(options.colorPickerEnabled)) this.colorPickerEnabled = options.colorPickerEnabled; + if (!this._isNullOrUndefined(options.strokeColorPickerEnabled)) + this.strokeColorPickerEnabled = options.strokeColorPickerEnabled; + if (!this._isNullOrUndefined(options.fillColorPickerEnabled)) + this.fillColorPickerEnabled = options.fillColorPickerEnabled; if (!this._isNullOrUndefined(options.lineWidth)) this.lineWidth = options.lineWidth; if (!this._isNullOrUndefined(options.strokeColor)) @@ -1930,7 +1939,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () { CanvasWhiteboardComponent.decorators = [ { type: 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 ", + 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] },] }, ]; @@ -1963,6 +1972,8 @@ CanvasWhiteboardComponent.propDecorators = { saveDataButtonEnabled: [{ type: Input }], shouldDownloadDrawing: [{ type: Input }], colorPickerEnabled: [{ type: Input }], + strokeColorPickerEnabled: [{ type: Input }], + fillColorPickerEnabled: [{ type: Input }], lineWidth: [{ type: Input }], strokeColor: [{ type: Input }], startingColor: [{ type: Input }], @@ -2265,5 +2276,5 @@ CanvasWhiteboardModule.decorators = [ /** * Generated bundle index. Do not edit. */ -export { CanvasWhiteboardComponent, CanvasWhiteboardUpdate, CanvasWhiteboardService, CanvasWhiteboardPoint, CanvasWhiteboardShape, CanvasWhiteboardShapeOptions, CanvasWhiteboardShapeService, RectangleShape, CircleShape, CanvasWhiteboardShapeSelectorComponent, CanvasWhiteboardColorPickerComponent, CanvasWhiteboardShapePreviewComponent, CanvasWhiteboardModule, DEFAULT_STYLES }; +export { CanvasWhiteboardComponent, CanvasWhiteboardUpdate, CanvasWhiteboardService, CanvasWhiteboardPoint, CanvasWhiteboardShape, CanvasWhiteboardShapeOptions, CanvasWhiteboardShapeService, FreeHandShape, CircleShape, LineShape, RectangleShape, SmileyShape, StarShape, CanvasWhiteboardShapeSelectorComponent, CanvasWhiteboardColorPickerComponent, CanvasWhiteboardShapePreviewComponent, CanvasWhiteboardModule, DEFAULT_STYLES }; //# sourceMappingURL=ng2-canvas-whiteboard.es5.js.map diff --git a/dist/modules/ng2-canvas-whiteboard.js b/dist/modules/ng2-canvas-whiteboard.js index cf5ce3e3..0186cab6 100644 --- a/dist/modules/ng2-canvas-whiteboard.js +++ b/dist/modules/ng2-canvas-whiteboard.js @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Input, NgModule, NgZone, Output, ViewChild } from '@angular/core'; import { BehaviorSubject, Subject, fromEvent } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; -import { cloneDeep } from 'lodash'; +import { cloneDeep, isEqual } from 'lodash'; import { CommonModule } from '@angular/common'; /** @@ -829,7 +829,12 @@ class CanvasWhiteboardComponent { this.redoButtonEnabled = false; this.saveDataButtonEnabled = false; this.shouldDownloadDrawing = true; + /** + * \@deprecated. Replaced with strokeColorPickerEnabled and fillColorPickerEnabled inputs + */ this.colorPickerEnabled = false; + this.strokeColorPickerEnabled = false; + this.fillColorPickerEnabled = false; this.lineWidth = 2; this.strokeColor = "rgba(0, 0, 0, 1)"; this.startingColor = "#fff"; @@ -894,7 +899,7 @@ class CanvasWhiteboardComponent { * @return {?} */ ngOnChanges(changes) { - if (changes.options && changes.options.currentValue != changes.options.previousValue) { + if (changes.options && isEqual(changes.options.currentValue, changes.options.previousValue)) { this._initInputsFromOptions(changes.options.currentValue); } } @@ -956,6 +961,10 @@ class CanvasWhiteboardComponent { this.saveDataButtonEnabled = options.saveDataButtonEnabled; if (!this._isNullOrUndefined(options.colorPickerEnabled)) this.colorPickerEnabled = options.colorPickerEnabled; + if (!this._isNullOrUndefined(options.strokeColorPickerEnabled)) + this.strokeColorPickerEnabled = options.strokeColorPickerEnabled; + if (!this._isNullOrUndefined(options.fillColorPickerEnabled)) + this.fillColorPickerEnabled = options.fillColorPickerEnabled; if (!this._isNullOrUndefined(options.lineWidth)) this.lineWidth = options.lineWidth; if (!this._isNullOrUndefined(options.strokeColor)) @@ -2002,7 +2011,7 @@ CanvasWhiteboardComponent.decorators = [ (onToggleShapeSelector)="toggleShapeSelector($event)" (onShapeSelected)="selectShape($event)"> - - \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",{"static":true}]}]}],"_incompleteShapesCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":147,"character":5},"arguments":["incompleteShapesCanvas",{"static":true}]}]}],"__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"}]}],"getShapeName":[{"__symbolic":"method"}],"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"}]}],"getShapeName":[{"__symbolic":"method"}],"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"}]}],"getShapeName":[{"__symbolic":"method"}],"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",{"static":true}]}]}],"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":122,"character":5}}]}],"strokeColorPickerEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"fillColorPickerEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"lineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"strokeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"startingColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"scaleFactor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"drawingEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"showStrokeColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"showFillColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"downloadedFileName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"lineJoin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"lineCap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"shapeSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"fillColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":5}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":5}}]}],"onUndo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":142,"character":5}}]}],"onRedo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":143,"character":5}}]}],"onBatchUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":144,"character":5}}]}],"onImageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":145,"character":5}}]}],"onSave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":146,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":148,"character":5},"arguments":["canvas",{"static":true}]}]}],"_incompleteShapesCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":151,"character":5},"arguments":["incompleteShapesCanvas",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":179,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":180,"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"}]}],"getShapeName":[{"__symbolic":"method"}],"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"}]}},"FreeHandShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"getShapeName":[{"__symbolic":"method"}],"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"}]}],"getShapeName":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}],"calculateRadius":[{"__symbolic":"method"}]}},"LineShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"CanvasWhiteboardPoint"}]}],"getShapeName":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__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"}]}],"getShapeName":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}]}},"SmileyShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"}]}],"getShapeName":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}],"calculateRadius":[{"__symbolic":"method"}]}},"StarShape":{"__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"}]}],"getShapeName":[{"__symbolic":"method"}],"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",{"static":true}]}]}],"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","FreeHandShape":"./src/shapes/free-hand-shape","CircleShape":"./src/shapes/circle-shape","LineShape":"./src/shapes/line-shape","RectangleShape":"./src/shapes/rectangle-shape","SmileyShape":"./src/shapes/smiley-shape","StarShape":"./src/shapes/star-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 4cd5e07e..d3b6cfa8 100644 --- a/dist/package.json +++ b/dist/package.json @@ -1,6 +1,6 @@ { "name": "ng2-canvas-whiteboard", - "version": "3.1.1", + "version": "3.1.2", "description": "A Canvas component for Angular which supports free drawing.", "main": "./bundles/ng2-canvas-whiteboard.umd.js", "module": "./modules/ng2-canvas-whiteboard.es5.js", diff --git a/dist/src/canvas-whiteboard-options.d.ts b/dist/src/canvas-whiteboard-options.d.ts index c084aebf..d523d92f 100644 --- a/dist/src/canvas-whiteboard-options.d.ts +++ b/dist/src/canvas-whiteboard-options.d.ts @@ -19,7 +19,10 @@ export interface CanvasWhiteboardOptions { saveDataButtonEnabled?: boolean; saveDataButtonClass?: string; saveDataButtonText?: string; + /** @deprecated. Replaced with strokeColorPickerEnabled and fillColorPickerEnabled inputs */ colorPickerEnabled?: boolean; + strokeColorPickerEnabled?: boolean; + fillColorPickerEnabled?: boolean; shouldDownloadDrawing?: boolean; startingColor?: string; scaleFactor?: number; diff --git a/dist/src/canvas-whiteboard.component.d.ts b/dist/src/canvas-whiteboard.component.d.ts index 6672722a..44be1c24 100644 --- a/dist/src/canvas-whiteboard.component.d.ts +++ b/dist/src/canvas-whiteboard.component.d.ts @@ -32,7 +32,10 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit, redoButtonEnabled: boolean; saveDataButtonEnabled: boolean; shouldDownloadDrawing: boolean; + /** @deprecated. Replaced with strokeColorPickerEnabled and fillColorPickerEnabled inputs */ colorPickerEnabled: boolean; + strokeColorPickerEnabled: boolean; + fillColorPickerEnabled: boolean; lineWidth: number; strokeColor: string; startingColor: string; diff --git a/dist/src/ng2-canvas-whiteboard.d.ts b/dist/src/ng2-canvas-whiteboard.d.ts index 95578a52..db282241 100644 --- a/dist/src/ng2-canvas-whiteboard.d.ts +++ b/dist/src/ng2-canvas-whiteboard.d.ts @@ -6,8 +6,12 @@ export { CanvasWhiteboardPoint } from "./canvas-whiteboard-point"; export { CanvasWhiteboardShape } from "./shapes/canvas-whiteboard-shape"; export { CanvasWhiteboardShapeOptions } from "./shapes/canvas-whiteboard-shape-options"; export { CanvasWhiteboardShapeService } from "./shapes/canvas-whiteboard-shape.service"; -export { RectangleShape } from "./shapes/rectangle-shape"; +export { FreeHandShape } from "./shapes/free-hand-shape"; export { CircleShape } from "./shapes/circle-shape"; +export { LineShape } from './shapes/line-shape'; +export { RectangleShape } from "./shapes/rectangle-shape"; +export { SmileyShape } from './shapes/smiley-shape'; +export { StarShape } from './shapes/star-shape'; export { CanvasWhiteboardShapeSelectorComponent } from "./shapes/canvas-whiteboard-shape-selector.component"; export { CanvasWhiteboardColorPickerComponent } from './canvas-whiteboard-colorpicker.component'; export { CanvasWhiteboardShapePreviewComponent } from './shapes/canvas-whiteboard-shape-preview.component'; diff --git a/package-lock.json b/package-lock.json index 62c0b7c6..19409507 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ng2-canvas-whiteboard", - "version": "3.1.1", + "version": "3.1.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -433,7 +433,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true } } @@ -499,7 +500,7 @@ }, "browserify-aes": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "dev": true, "requires": { @@ -536,7 +537,7 @@ }, "browserify-rsa": { "version": "4.0.1", - "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", + "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "dev": true, "requires": { @@ -884,7 +885,7 @@ }, "create-hash": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "dev": true, "requires": { @@ -897,7 +898,7 @@ }, "create-hmac": { "version": "1.1.7", - "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", + "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "dev": true, "requires": { @@ -1039,7 +1040,7 @@ }, "diffie-hellman": { "version": "5.0.3", - "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", + "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "dev": true, "requires": { @@ -3075,7 +3076,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "dev": true, "requires": { @@ -3208,7 +3209,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", "dev": true } } @@ -3802,25 +3804,29 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, "requires": { @@ -3830,13 +3836,15 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "bundled": true, + "resolved": false, + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, "requires": { @@ -3846,37 +3854,43 @@ }, "chownr": { "version": "1.1.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true }, "debug": { "version": "3.2.6", - "bundled": true, + "resolved": false, + "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "dev": true, "optional": true, "requires": { @@ -3885,25 +3899,29 @@ }, "deep-extend": { "version": "0.6.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "bundled": true, + "resolved": false, + "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.7", - "bundled": true, + "resolved": false, + "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==", "dev": true, "optional": true, "requires": { @@ -3912,13 +3930,15 @@ }, "fs.realpath": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "bundled": true, + "resolved": false, + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, "requires": { @@ -3934,7 +3954,8 @@ }, "glob": { "version": "7.1.6", - "bundled": true, + "resolved": false, + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "dev": true, "optional": true, "requires": { @@ -3948,13 +3969,15 @@ }, "has-unicode": { "version": "2.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "bundled": true, + "resolved": false, + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, "requires": { @@ -3963,7 +3986,8 @@ }, "ignore-walk": { "version": "3.0.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==", "dev": true, "optional": true, "requires": { @@ -3972,7 +3996,8 @@ }, "inflight": { "version": "1.0.6", - "bundled": true, + "resolved": false, + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, "requires": { @@ -3982,19 +4007,22 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, "requires": { @@ -4003,13 +4031,15 @@ }, "isarray": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, "requires": { @@ -4018,13 +4048,15 @@ }, "minimist": { "version": "0.0.8", - "bundled": true, + "resolved": false, + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true, "optional": true }, "minipass": { "version": "2.9.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", "dev": true, "optional": true, "requires": { @@ -4034,7 +4066,8 @@ }, "minizlib": { "version": "1.3.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==", "dev": true, "optional": true, "requires": { @@ -4043,7 +4076,8 @@ }, "mkdirp": { "version": "0.5.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "optional": true, "requires": { @@ -4052,13 +4086,15 @@ }, "ms": { "version": "2.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true, "optional": true }, "needle": { "version": "2.4.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==", "dev": true, "optional": true, "requires": { @@ -4069,7 +4105,8 @@ }, "node-pre-gyp": { "version": "0.14.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==", "dev": true, "optional": true, "requires": { @@ -4087,7 +4124,8 @@ }, "nopt": { "version": "4.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, "requires": { @@ -4097,7 +4135,8 @@ }, "npm-bundled": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==", "dev": true, "optional": true, "requires": { @@ -4106,13 +4145,15 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.4.7", - "bundled": true, + "resolved": false, + "integrity": "sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==", "dev": true, "optional": true, "requires": { @@ -4122,7 +4163,8 @@ }, "npmlog": { "version": "4.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, "requires": { @@ -4134,19 +4176,22 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, "requires": { @@ -4155,19 +4200,22 @@ }, "os-homedir": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, "requires": { @@ -4177,19 +4225,22 @@ }, "path-is-absolute": { "version": "1.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true }, "process-nextick-args": { "version": "2.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "dev": true, "optional": true }, "rc": { "version": "1.2.8", - "bundled": true, + "resolved": false, + "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, "requires": { @@ -4201,7 +4252,8 @@ "dependencies": { "minimist": { "version": "1.2.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true } @@ -4209,7 +4261,8 @@ }, "readable-stream": { "version": "2.3.6", - "bundled": true, + "resolved": false, + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, "requires": { @@ -4224,7 +4277,8 @@ }, "rimraf": { "version": "2.7.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "dev": true, "optional": true, "requires": { @@ -4233,43 +4287,50 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.7.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, "requires": { @@ -4280,7 +4341,8 @@ }, "string_decoder": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, "requires": { @@ -4289,7 +4351,8 @@ }, "strip-ansi": { "version": "3.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, "requires": { @@ -4298,13 +4361,15 @@ }, "strip-json-comments": { "version": "2.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "tar": { "version": "4.4.13", - "bundled": true, + "resolved": false, + "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==", "dev": true, "optional": true, "requires": { @@ -4319,13 +4384,15 @@ }, "util-deprecate": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, "requires": { @@ -4334,13 +4401,15 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true, "optional": true } diff --git a/package.json b/package.json index 4cd5e07e..d3b6cfa8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-canvas-whiteboard", - "version": "3.1.1", + "version": "3.1.2", "description": "A Canvas component for Angular which supports free drawing.", "main": "./bundles/ng2-canvas-whiteboard.umd.js", "module": "./modules/ng2-canvas-whiteboard.es5.js", diff --git a/src/canvas-whiteboard-options.ts b/src/canvas-whiteboard-options.ts index 3c242762..d523d92f 100644 --- a/src/canvas-whiteboard-options.ts +++ b/src/canvas-whiteboard-options.ts @@ -19,7 +19,10 @@ export interface CanvasWhiteboardOptions { saveDataButtonEnabled?: boolean; saveDataButtonClass?: string; saveDataButtonText?: string; + /** @deprecated. Replaced with strokeColorPickerEnabled and fillColorPickerEnabled inputs */ colorPickerEnabled?: boolean; + strokeColorPickerEnabled?: boolean; + fillColorPickerEnabled?: boolean; shouldDownloadDrawing?: boolean; startingColor?: string; scaleFactor?: number; @@ -32,4 +35,4 @@ export interface CanvasWhiteboardOptions { shapeSelectorEnabled?: boolean; showShapeSelector?: boolean; fillColor?: string; -} \ No newline at end of file +} diff --git a/src/canvas-whiteboard.component.ts b/src/canvas-whiteboard.component.ts index f820a9d3..dd482492 100644 --- a/src/canvas-whiteboard.component.ts +++ b/src/canvas-whiteboard.component.ts @@ -18,7 +18,7 @@ import {CanvasWhiteboardShapeService, INewCanvasWhiteboardShape} from "./shapes/ import {CanvasWhiteboardShapeOptions} from "./shapes/canvas-whiteboard-shape-options"; import {fromEvent, Subscription} from "rxjs"; import {debounceTime, distinctUntilChanged} from "rxjs/operators"; -import {cloneDeep} from "lodash"; +import {cloneDeep, isEqual} from "lodash"; @Component({ selector: 'canvas-whiteboard', @@ -33,7 +33,7 @@ import {cloneDeep} from "lodash"; (onToggleShapeSelector)="toggleShapeSelector($event)" (onShapeSelected)="selectShape($event)"> - -