@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
1 lines • 33.6 kB
JSON
{"__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":"drizm-whiteboard","viewProviders":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"}],"template":"<div class=\"canvas_wrapper_div\">\r\n <div class=\"canvas_whiteboard_buttons\" *ngIf=\"!customWhiteboardUi; else customWhiteboardUi\">\r\n <canvas-whiteboard-shape-selector\r\n *ngIf=\"shapeSelectorEnabled\"\r\n [showShapeSelector]=\"showShapeSelector\"\r\n [selectedShapeConstructor]=\"selectedShapeConstructor\"\r\n [shapeOptions]=\"generateShapePreviewOptions()\"\r\n (toggleShapeSelector)=\"toggleShapeSelector($event)\"\r\n (shapeSelected)=\"selectShape($event)\"></canvas-whiteboard-shape-selector>\r\n\r\n <canvas-whiteboard-colorpicker\r\n *ngIf=\"fillColorPickerEnabled\"\r\n [previewText]=\"fillColorPickerText\"\r\n [showColorPicker]=\"showFillColorPicker\"\r\n [selectedColor]=\"fillColor\"\r\n (toggleColorPicker)=\"toggleFillColorPicker($event)\"\r\n (colorSelected)=\"changeFillColor($event)\">\r\n </canvas-whiteboard-colorpicker>\r\n\r\n <canvas-whiteboard-colorpicker\r\n *ngIf=\"strokeColorPickerEnabled\"\r\n [previewText]=\"strokeColorPickerText\"\r\n [showColorPicker]=\"showStrokeColorPicker\"\r\n [selectedColor]=\"cachedStrokeColor || strokeColor\"\r\n (toggleColorPicker)=\"toggleStrokeColorPicker($event)\"\r\n (colorSelected)=\"changeStrokeColor($event)\">\r\n </canvas-whiteboard-colorpicker>\r\n\r\n\r\n <button *ngIf=\"drawButtonEnabled\" (click)=\"toggleDrawingEnabled()\"\r\n [class.canvas_whiteboard_button-draw_animated]=\"getDrawingEnabled()\"\r\n class=\"canvas_whiteboard_button canvas_whiteboard_button-draw\" type=\"button\">\r\n <i [class]=\"drawButtonClass\" aria-hidden=\"true\"></i> {{drawButtonText}}\r\n </button>\r\n\r\n <button *ngIf=\"clearButtonEnabled\" (click)=\"clearCanvasLocal()\" type=\"button\"\r\n class=\"canvas_whiteboard_button canvas_whiteboard_button-clear\">\r\n <i [class]=\"clearButtonClass\" aria-hidden=\"true\"></i> {{clearButtonText}}\r\n </button>\r\n\r\n <button *ngIf=\"undoButtonEnabled\" (click)=\"undoLocal()\" type=\"button\"\r\n class=\"canvas_whiteboard_button canvas_whiteboard_button-undo\">\r\n <i [class]=\"undoButtonClass\" aria-hidden=\"true\"></i> {{undoButtonText}}\r\n </button>\r\n\r\n <button *ngIf=\"redoButtonEnabled\" (click)=\"redoLocal()\" type=\"button\"\r\n class=\"canvas_whiteboard_button canvas_whiteboard_button-redo\">\r\n <i [class]=\"redoButtonClass\" aria-hidden=\"true\"></i> {{redoButtonText}}\r\n </button>\r\n <button *ngIf=\"saveDataButtonEnabled\" (click)=\"saveLocal()\" type=\"button\"\r\n class=\"canvas_whiteboard_button canvas_whiteboard_button-save\">\r\n <i [class]=\"saveDataButtonClass\" aria-hidden=\"true\"></i> {{saveDataButtonText}}\r\n </button>\r\n\r\n <button *ngIf=\"eraseButtonEnabled\" (click)=\"toggleErasingEnabled()\" type=\"button\"\r\n class=\"canvas_whiteboard_button canvas_whiteboard_button-clear\"\r\n [class.canvas_whiteboard_button-draw_animated]=\"erasingEnabled\">\r\n <i [class]=\"eraseButtonClass\" aria-hidden=\"true\"></i> {{eraseButtonText}}\r\n </button>\r\n </div>\r\n\r\n <canvas #canvas class=\"canvas_whiteboard\"></canvas>\r\n <canvas\r\n #incompleteShapesCanvas class=\"incomplete_shapes_canvas_whiteboard\"\r\n (mousedown)=\"canvasUserEvents($event)\" (mouseup)=\"canvasUserEvents($event)\"\r\n (mousemove)=\"canvasUserEvents($event)\" (mouseout)=\"canvasUserEvents($event)\"\r\n (touchstart)=\"canvasUserEvents($event)\" (touchmove)=\"canvasUserEvents($event)\"\r\n (touchend)=\"canvasUserEvents($event)\" (touchcancel)=\"canvasUserEvents($event)\">\r\n </canvas>\r\n</div>\r\n","styles":[".canvas_whiteboard_button{display:inline-block;outline:0;padding-top:7px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.canvas_whiteboard_buttons{z-index:3}@media (max-width:400px){.canvas_whiteboard_buttons{position:absolute;z-index:3;top:0;width:100%;text-align:center}}@media (min-width:401px){.canvas_whiteboard_buttons{position:absolute;right:0;color:#fff}}.canvas_whiteboard_buttons{padding:5px}.canvas_whiteboard_buttons>button{margin:5px}.canvas_whiteboard_button-draw_animated{-webkit-animation:pulsate 1s ease-out;-webkit-animation-iteration-count:infinite}@-webkit-keyframes pulsate{0%{-webkit-transform:scale(.1);opacity:0}50%{opacity:1}to{-webkit-transform:scale(1.2);opacity:0}}.canvas_wrapper_div{width:100%;height:100%}.canvas_whiteboard_button-clear{padding-top:5px}.canvas_whiteboard{position:absolute;z-index:1}.incomplete_shapes_canvas_whiteboard{position:absolute;z-index:2}"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"batchUpdateTimeoutDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"customWhiteboardUi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"drawButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"clearButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"eraseButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"undoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"redoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"saveDataButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"drawButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"clearButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"eraseButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"undoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"redoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3}}]}],"saveDataButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"strokeColorPickerText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"fillColorPickerText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}}]}],"drawButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"clearButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"eraseButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"undoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"redoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"saveDataButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"shouldDownloadDrawing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}}]}],"strokeColorPickerEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"fillColorPickerEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"lineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"eraserLineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"strokeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"startingColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"scaleFactor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"drawingEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"erasingEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"showStrokeColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"showFillColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":3}}]}],"downloadedFileName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"lineJoin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"lineCap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":3}}]}],"shapeSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"fillColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":92,"character":3}}]}],"undo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":3}}]}],"redo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":3}}]}],"batchUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":95,"character":3}}]}],"imageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":96,"character":3}}]}],"save":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":97,"character":3}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":99,"character":3},"arguments":["canvas",{"static":true}]}]}],"_incompleteShapesCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":102,"character":3},"arguments":["incompleteShapesCanvas",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":135,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":136,"character":41},{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__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"}],"getDrawingEnabled":[{"__symbolic":"method"}],"toggleDrawingEnabled":[{"__symbolic":"method"}],"setDrawingEnabled":[{"__symbolic":"method"}],"toggleErasingEnabled":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"changeFillColor":[{"__symbolic":"method"}],"undoLocal":[{"__symbolic":"method"}],"doUndo":[{"__symbolic":"method"}],"_undoCanvas":[{"__symbolic":"method"}],"redoLocal":[{"__symbolic":"method"}],"doRedo":[{"__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"}],"_setErasing":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_generateUUID":[{"__symbolic":"method"}],"_random4":[{"__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":35,"character":21,"context":{"typeName":"CanvasWhiteboardUpdateType"},"module":"./lib/_classes/canvas-whiteboard-update.model"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"stringify":[{"__symbolic":"method"}]}},"CanvasWhiteboardService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"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":15,"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":13,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-selector","template":"<div *ngIf=\"!showShapeSelector\" (click)=\"doToggleShapeSelector($event)\"\r\n class=\"canvas-whiteboard-shape-selector-selected-preview\">\r\n <canvas-whiteboard-shape-preview\r\n [shapeConstructor]=\"selectedShapeConstructor\"\r\n [shapeOptions]=\"shapeOptions\"></canvas-whiteboard-shape-preview>\r\n</div>\r\n<div class=\"canvas-whiteboard-shape-selector-wrapper\" *ngIf=\"showShapeSelector\">\r\n <canvas-whiteboard-shape-preview\r\n *ngFor=\"let shapeConstructor of registeredShapes$ | async\"\r\n [shapeConstructor]=\"shapeConstructor\"\r\n [shapeOptions]=\"shapeOptions\"\r\n (click)=\"selectShape(shapeConstructor)\"></canvas-whiteboard-shape-preview>\r\n</div>\r\n","styles":[".canvas-whiteboard-shape-selector-selected-preview{vertical-align:bottom;display:inline-block}.canvas-whiteboard-shape-selector-wrapper{display:block;padding:4px;border:1px solid #afafaf}"]}]}],"members":{"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"selectedShapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"toggleShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":3}}]}],"shapeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"closeOnExternalClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":28,"character":3},"arguments":["document:touchstart",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":29,"character":3},"arguments":["document:mousedown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":36,"character":34},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"selectShape":[{"__symbolic":"method"}],"doToggleShapeSelector":[{"__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","template":"<div [hidden]=\"showColorPicker\" class=\"canvas-whiteboard-colorpicker-input\"\r\n (click)=\"doToggleColorPicker($event)\">\r\n <div class=\"selected-color-type-wrapper\">{{previewText}}</div>\r\n <div class=\"selected-color-preview\" [style.background]=\"selectedColor\"></div>\r\n</div>\r\n<div [hidden]=\"!showColorPicker\" class=\"canvas-whiteboard-colorpicker-wrapper\">\r\n <div (click)=\"selectColor('transparent')\" class=\"transparent-color\">Transparent</div>\r\n <canvas #canvaswhiteboardcolorpicker class=\"canvas-whiteboard-colorpicker\" width=\"284\" height=\"155\"\r\n (click)=\"selectColor(determineColorFromCanvas($event))\"></canvas>\r\n</div>\r\n","styles":[".selected-color-preview{width:100%;height:20%;position:absolute;bottom:0;left:0}.selected-color-type-wrapper{display:inline-block;height:100%;width:100%;text-align:center;font-size:14px;color:#000}.transparent-color{font-size:14px}.canvas-whiteboard-colorpicker-wrapper{border:1px solid #afafaf;color:#000}@media (min-width:401px){.canvas-whiteboard-colorpicker-wrapper{position:absolute}}.canvas-whiteboard-colorpicker-input{display:inline-block;position:relative;width:44px;height:44px;margin:5px;cursor:pointer;color:#000}"]}]}],"members":{"previewText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"selectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":14,"character":3},"arguments":["canvaswhiteboardcolorpicker",{"static":true}]}]}],"showColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"toggleColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"colorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":20,"character":3}}]}],"secondaryColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"closeOnExternalClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":23,"character":3},"arguments":["document:touchstart",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":24,"character":3},"arguments":["document:mousedown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":31,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"createColorPalette":[{"__symbolic":"method"}],"doToggleColorPicker":[{"__symbolic":"method"}],"determineColorFromCanvas":[{"__symbolic":"method"}],"selectColor":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapePreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-preview","template":"<canvas #canvasWhiteboardShapePreview width=\"50px\" height=\"50px\"\r\n class=\"canvas-whiteboard-shape-preview-canvas\"></canvas>\r\n","styles":[".canvas-whiteboard-shape-preview-canvas{cursor:pointer}"]}]}],"members":{"shapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":24,"character":3},"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":[{"declarations":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardColorPickerComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeSelectorComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapePreviewComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4}],"providers":[{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}],"exports":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"}]}]}],"members":{}}},"origins":{"CanvasWhiteboardComponent":"./lib/canvas-whiteboard.component","CanvasWhiteboardUpdate":"./lib/_classes/canvas-whiteboard-update.model","CanvasWhiteboardService":"./lib/_services/canvas-whiteboard.service","CanvasWhiteboardOptions":"./lib/_types/canvas-whiteboard-options","CanvasWhiteboardPoint":"./lib/_classes/canvas-whiteboard-point.model","CanvasWhiteboardShape":"./lib/_classes/shape/canvas-whiteboard-shape","CanvasWhiteboardShapeOptions":"./lib/_classes/shape/canvas-whiteboard-shape-options","CanvasWhiteboardShapeService":"./lib/_services/canvas-whiteboard-shape.service","FreeHandShape":"./lib/_classes/shape/free-hand-shape","CircleShape":"./lib/_classes/shape/circle-shape","LineShape":"./lib/_classes/shape/line-shape","RectangleShape":"./lib/_classes/shape/rectangle-shape","SmileyShape":"./lib/_classes/shape/smiley-shape","StarShape":"./lib/_classes/shape/star-shape","CanvasWhiteboardShapeSelectorComponent":"./lib/canvas-whiteboard-shape-selector/canvas-whiteboard-shape-selector.component","CanvasWhiteboardColorPickerComponent":"./lib/canvas-whiteboard-colorpicker/canvas-whiteboard-colorpicker.component","CanvasWhiteboardShapePreviewComponent":"./lib/canvas-whiteboard-shape-preview/canvas-whiteboard-shape-preview.component","CanvasWhiteboardModule":"./lib/canvas-whiteboard.module"},"importAs":"@drizm/ng-whiteboard"}