@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
79 lines • 13.7 kB
JavaScript
import { Component, Output, EventEmitter, ViewChild, ElementRef, Input, HostListener } from '@angular/core';
export class CanvasWhiteboardColorPickerComponent {
constructor(elementRef) {
this.elementRef = elementRef;
this.selectedColor = 'rgba(0,0,0,1)';
this.showColorPicker = false;
this.toggleColorPicker = new EventEmitter();
this.colorSelected = new EventEmitter();
this.secondaryColorSelected = new EventEmitter();
}
closeOnExternalClick(event) {
if (!this.elementRef.nativeElement.contains(event.target) && this.showColorPicker) {
this.toggleColorPicker.emit(false);
}
}
/**
* Initialize the canvas drawing context. If we have an aspect ratio set up, the canvas will resize
* according to the aspect ratio.
*/
ngOnInit() {
this._context = this.canvas.nativeElement.getContext('2d');
this.createColorPalette();
}
createColorPalette() {
let gradient = this._context.createLinearGradient(0, 0, this._context.canvas.width, 0);
gradient.addColorStop(0, 'rgb(255, 0, 0)');
gradient.addColorStop(0.15, 'rgb(255, 0, 255)');
gradient.addColorStop(0.33, 'rgb(0, 0, 255)');
gradient.addColorStop(0.49, 'rgb(0, 255, 255)');
gradient.addColorStop(0.67, 'rgb(0, 255, 0)');
gradient.addColorStop(0.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(0.5, 'rgba(255, 255, 255, 0)');
gradient.addColorStop(0.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);
}
doToggleColorPicker(event) {
if (event) {
event.preventDefault();
}
this.toggleColorPicker.emit(!this.showColorPicker);
}
determineColorFromCanvas(event) {
const canvasRect = this._context.canvas.getBoundingClientRect();
const 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]})`;
}
selectColor(color) {
this.colorSelected.emit(color);
this.doToggleColorPicker(null);
}
}
CanvasWhiteboardColorPickerComponent.decorators = [
{ type: Component, args: [{
selector: 'canvas-whiteboard-colorpicker',
template: "<div [hidden]=\"showColorPicker\" class=\"canvas-whiteboard-colorpicker-input\"\r\n (click)=\"doToggleColorPicker($event)\">\r\n <div class=\"selected-color-type-wrapper\">{{previewText}}</div>\r\n <div class=\"selected-color-preview\" [style.background]=\"selectedColor\"></div>\r\n</div>\r\n<div [hidden]=\"!showColorPicker\" class=\"canvas-whiteboard-colorpicker-wrapper\">\r\n <div (click)=\"selectColor('transparent')\" class=\"transparent-color\">Transparent</div>\r\n <canvas #canvaswhiteboardcolorpicker class=\"canvas-whiteboard-colorpicker\" width=\"284\" height=\"155\"\r\n (click)=\"selectColor(determineColorFromCanvas($event))\"></canvas>\r\n</div>\r\n",
styles: [".selected-color-preview{width:100%;height:20%;position:absolute;bottom:0;left:0}.selected-color-type-wrapper{display:inline-block;height:100%;width:100%;text-align:center;font-size:14px;color:#000}.transparent-color{font-size:14px}.canvas-whiteboard-colorpicker-wrapper{border:1px solid #afafaf;color:#000}@media (min-width:401px){.canvas-whiteboard-colorpicker-wrapper{position:absolute}}.canvas-whiteboard-colorpicker-input{display:inline-block;position:relative;width:44px;height:44px;margin:5px;cursor:pointer;color:#000}"]
},] }
];
CanvasWhiteboardColorPickerComponent.ctorParameters = () => [
{ type: ElementRef }
];
CanvasWhiteboardColorPickerComponent.propDecorators = {
previewText: [{ type: Input }],
selectedColor: [{ type: Input }],
canvas: [{ type: ViewChild, args: ['canvaswhiteboardcolorpicker', { static: true },] }],
showColorPicker: [{ type: Input }],
toggleColorPicker: [{ type: Output }],
colorSelected: [{ type: Output }],
secondaryColorSelected: [{ type: Output }],
closeOnExternalClick: [{ type: HostListener, args: ['document:touchstart', ['$event'],] }, { type: HostListener, args: ['document:mousedown', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FudmFzLXdoaXRlYm9hcmQtY29sb3JwaWNrZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctd2hpdGVib2FyZC9zcmMvbGliL2NhbnZhcy13aGl0ZWJvYXJkLWNvbG9ycGlja2VyL2NhbnZhcy13aGl0ZWJvYXJkLWNvbG9ycGlja2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULE1BQU0sRUFDTixZQUFZLEVBQVUsU0FBUyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUNqRSxNQUFNLGVBQWUsQ0FBQztBQU92QixNQUFNLE9BQU8sb0NBQW9DO0lBb0IvQyxZQUFvQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBbEJ4QixrQkFBYSxHQUFXLGVBQWUsQ0FBQztRQUd4QyxvQkFBZSxHQUFZLEtBQUssQ0FBQztRQUd6QyxzQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQ2hELGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUMzQywyQkFBc0IsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBVzlELENBQUM7SUFQRCxvQkFBb0IsQ0FBQyxLQUFVO1FBQzdCLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUU7WUFDakYsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNwQztJQUNILENBQUM7SUFLRDs7O09BR0c7SUFDSCxRQUFRO1FBQ04sSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDM0QsSUFBSSxDQUFDLGtCQUFr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Q0FBQyxDQUFDLEdBQUcsQ0FBQztJQUN4RyxDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQWE7UUFDdkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDL0IsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2pDLENBQUM7OztZQTdFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLCtCQUErQjtnQkFDekMsdXJCQUE2RDs7YUFFOUQ7OztZQVBrQyxVQUFVOzs7MEJBUzFDLEtBQUs7NEJBQ0wsS0FBSztxQkFDTCxTQUFTLFNBQUMsNkJBQTZCLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDOzhCQUV2RCxLQUFLO2dDQUdMLE1BQU07NEJBQ04sTUFBTTtxQ0FDTixNQUFNO21DQUVOLFlBQVksU0FBQyxxQkFBcUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyxjQUM5QyxZQUFZLFNBQUMsb0JBQW9CLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENvbXBvbmVudCxcclxuICBPdXRwdXQsXHJcbiAgRXZlbnRFbWl0dGVyLCBPbkluaXQsIFZpZXdDaGlsZCwgRWxlbWVudFJlZiwgSW5wdXQsIEhvc3RMaXN0ZW5lclxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdjYW52YXMtd2hpdGVib2FyZC1jb2xvcnBpY2tlcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2NhbnZhcy13aGl0ZWJvYXJkLWNvbG9ycGlja2VyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9jYW52YXMtd2hpdGVib2FyZC1jb2xvcnBpY2tlci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDYW52YXNXaGl0ZWJvYXJkQ29sb3JQaWNrZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpIHByZXZpZXdUZXh0ITogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHJlYWRvbmx5IHNlbGVjdGVkQ29sb3I6IHN0cmluZyA9ICdyZ2JhKDAsMCwwLDEpJztcclxuICBAVmlld0NoaWxkKCdjYW52YXN3aGl0ZWJvYXJkY29sb3JwaWNrZXInLCB7c3RhdGljOiB0cnVlfSkgY2FudmFzITogRWxlbWVudFJlZjtcclxuXHJcbiAgQElucHV0KCkgcmVhZG9ubHkgc2hvd0NvbG9yUGlja2VyOiBib29sZWFuID0gZmFsc2U7XHJcbiAgcHJpdmF0ZSBfY29udGV4dCE6IENhbnZhc1JlbmRlcmluZ0NvbnRleHQyRDtcclxuXHJcbiAgQE91dHB1dCgpIHRvZ2dsZUNvbG9yUGlja2VyID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG4gIEBPdXRwdXQoKSBjb2xvclNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcbiAgQE91dHB1dCgpIHNlY29uZGFyeUNvbG9yU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6dG91Y2hzdGFydCcsIFsnJGV2ZW50J10pXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6bW91c2Vkb3duJywgWyckZXZlbnQnXSlcclxuICBjbG9zZU9uRXh0ZXJuYWxDbGljayhldmVudDogYW55KTogdm9pZCB7XHJcbiAgICBpZiAoIXRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCkgJiYgdGhpcy5zaG93Q29sb3JQaWNrZXIpIHtcclxuICAgICAgdGhpcy50b2dnbGVDb2xvclBpY2tlci5lbWl0KGZhbHNlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikge1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogSW5pdGlhbGl6ZSB0aGUgY2FudmFzIGRyYXdpbmcgY29udGV4dC4gSWYgd2UgaGF2ZSBhbiBhc3BlY3QgcmF0aW8gc2V0IHVwLCB0aGUgY2FudmFzIHdpbGwgcmVzaXplXHJcbiAgICogYWNjb3JkaW5nIHRvIHRoZSBhc3BlY3QgcmF0aW8uXHJcbiAgICovXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLl9jb250ZXh0ID0gdGhpcy5jYW52YXMubmF0aXZlRWxlbWVudC5nZXRDb250ZXh0KCcyZCcpO1xyXG4gICAgdGhpcy5jcmVhdGVDb2xvclBhbGV0dGUoKTtcclxuICB9XHJcblxyXG4gIGNyZWF0ZUNvbG9yUGFsZXR0ZSgpOiB2b2lkIHtcclxuICAgIGxldCBncmFkaWVudCA9IHRoaXMuX2NvbnRleHQuY3JlYXRlTGluZWFyR3JhZGllbnQoMCwgMCwgdGhpcy5fY29udGV4dC5jYW52YXMud2lkdGgsIDApO1xyXG4gICAgZ3JhZGllbnQuYWRkQ29sb3JTdG9wKDAsICdyZ2IoMjU1LCAwLCAwKScpO1xyXG4gICAgZ3JhZGllbnQuYWRkQ29sb3JTdG9wKDAuMTUsICdyZ2IoMjU1LCAwLCAyNTUpJyk7XHJcbiAgICBncmFkaWVudC5hZGRDb2xvclN0b3AoMC4zMywgJ3JnYigwLCAwLCAyNTUpJyk7XHJcbiAgICBncmFkaWVudC5hZGRDb2xvclN0b3AoMC40OSwgJ3JnYigwLCAyNTUsIDI1NSknKTtcclxuICAgIGdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjY3LCAncmdiKDAsIDI1NSwgMCknKTtcclxuICAgIGdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjg0LCAncmdiKDI1NSwgMjU1LCAwKScpO1xyXG4gICAgZ3JhZGllbnQuYWRkQ29sb3JTdG9wKDEsICdyZ2IoMjU1LCAwLCAwKScpO1xyXG4gICAgdGhpcy5fY29udGV4dC5maWxsU3R5bGUgPSBncmFkaWVudDtcclxuICAgIHRoaXMuX2NvbnRleHQuZmlsbFJlY3QoMCwgMCwgdGhpcy5fY29udGV4dC5jYW52YXMud2lkdGgsIHRoaXMuX2NvbnRleHQuY2FudmFzLmhlaWdodCk7XHJcblxyXG4gICAgZ3JhZGllbnQgPSB0aGlzLl9jb250ZXh0LmNyZWF0ZUxpbmVhckdyYWRpZW50KDAsIDAsIDAsIHRoaXMuX2NvbnRleHQuY2FudmFzLmhlaWdodCk7XHJcbiAgICBncmFkaWVudC5hZGRDb2xvclN0b3AoMCwgJ3JnYmEoMjU1LCAyNTUsIDI1NSwgMSknKTtcclxuICAgIGdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjUsICdyZ2JhKDI1NSwgMjU1LCAyNTUsIDApJyk7XHJcbiAgICBncmFkaWVudC5hZGRDb2xvclN0b3AoMC41LCAncmdiYSgwLCAwLCAwLCAwKScpO1xyXG4gICAgZ3JhZGllbnQuYWRkQ29sb3JTdG9wKDEsICdyZ2JhKDAsIDAsIDAsIDEpJyk7XHJcbiAgICB0aGlzLl9jb250ZXh0LmZpbGxTdHlsZSA9IGdyYWRpZW50O1xyXG4gICAgdGhpcy5fY29udGV4dC5maWxsUmVjdCgwLCAwLCB0aGlzLl9jb250ZXh0LmNhbnZhcy53aWR0aCwgdGhpcy5fY29udGV4dC5jYW52YXMuaGVpZ2h0KTtcclxuICB9XHJcblxyXG4gIGRvVG9nZ2xlQ29sb3JQaWNrZXIoZXZlbnQ6IEV2ZW50IHwgbnVsbCk6IHZvaWQge1xyXG4gICAgaWYgKGV2ZW50KSB7XHJcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy50b2dnbGVDb2xvclBpY2tlci5lbWl0KCF0aGlzLnNob3dDb2xvclBpY2tlcik7XHJcbiAgfVxyXG5cclxuICBkZXRlcm1pbmVDb2xvckZyb21DYW52YXMoZXZlbnQ6IGFueSk6IHN0cmluZyB7XHJcbiAgICBjb25zdCBjYW52YXNSZWN0ID0gdGhpcy5fY29udGV4dC5jYW52YXMuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcbiAgICBjb25zdCBpbWFnZURhdGEgPSB0aGlzLl9jb250ZXh0LmdldEltYWdlRGF0YShldmVudC5jbGllbnRYIC0gY2FudmFzUmVjdC5sZWZ0LFxyXG4gICAgICBldmVudC5jbGllbnRZIC0gY2FudmFzUmVjdC50b3AsIDEsIDEpO1xyXG5cclxuICAgIHJldHVybiBgcmdiYSgke2ltYWdlRGF0YS5kYXRhWzBdfSwgJHtpbWFnZURhdGEuZGF0YVsxXX0sICR7aW1hZ2VEYXRhLmRhdGFbMl19LCAke2ltYWdlRGF0YS5kYXRhWzNdfSlgO1xyXG4gIH1cclxuXHJcbiAgc2VsZWN0Q29sb3IoY29sb3I6IHN0cmluZyk6IHZvaWQge1xyXG4gICAgdGhpcy5jb2xvclNlbGVjdGVkLmVtaXQoY29sb3IpO1xyXG4gICAgdGhpcy5kb1RvZ2dsZUNvbG9yUGlja2VyKG51bGwpO1xyXG4gIH1cclxufVxyXG4iXX0=