@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
35 lines • 5.66 kB
JavaScript
import { Component, Input, ViewChild } from '@angular/core';
import { CanvasWhiteboardPoint } from '../_classes/canvas-whiteboard-point.model';
import { CanvasWhiteboardShapeOptions } from '../_classes/shape/canvas-whiteboard-shape-options';
export class CanvasWhiteboardShapePreviewComponent {
ngAfterViewInit() {
this.drawShapePreview();
}
ngOnChanges(changes) {
if (changes.shapeConstructor || changes.shapeOptions) {
this.drawShapePreview();
}
}
drawShapePreview() {
if (!this.canvas) {
return;
}
const context = this.canvas.nativeElement.getContext('2d');
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
const concreteShape = new this.shapeConstructor(new CanvasWhiteboardPoint(0, 0), Object.assign(new CanvasWhiteboardShapeOptions(), this.shapeOptions));
concreteShape.drawPreview(context);
}
}
CanvasWhiteboardShapePreviewComponent.decorators = [
{ type: Component, args: [{
selector: 'canvas-whiteboard-shape-preview',
template: "<canvas #canvasWhiteboardShapePreview width=\"50px\" height=\"50px\"\r\n class=\"canvas-whiteboard-shape-preview-canvas\"></canvas>\r\n",
styles: [".canvas-whiteboard-shape-preview-canvas{cursor:pointer}"]
},] }
];
CanvasWhiteboardShapePreviewComponent.propDecorators = {
shapeConstructor: [{ type: Input }],
shapeOptions: [{ type: Input }],
canvas: [{ type: ViewChild, args: ['canvasWhiteboardShapePreview',] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FudmFzLXdoaXRlYm9hcmQtc2hhcGUtcHJldmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy13aGl0ZWJvYXJkL3NyYy9saWIvY2FudmFzLXdoaXRlYm9hcmQtc2hhcGUtcHJldmlldy9jYW52YXMtd2hpdGVib2FyZC1zaGFwZS1wcmV2aWV3LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULEtBQUssRUFDTCxTQUFTLEVBSVYsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFDLHFCQUFxQixFQUFDLE1BQU0sMkNBQTJDLENBQUM7QUFDaEYsT0FBTyxFQUFDLDRCQUE0QixFQUFDLE1BQU0sbURBQW1ELENBQUM7QUFRL0YsTUFBTSxPQUFPLHFDQUFxQztJQU1oRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxnQkFBZ0IsSUFBSSxPQUFPLENBQUMsWUFBWSxFQUFFO1lBQ3BELElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1NBQ3pCO0lBQ0gsQ0FBQztJQUVELGdCQUFnQjtRQUNkLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2hCLE9BQU87U0FDUjtRQUVELE1BQU0sT0FBTyxHQUE2QixJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDckYsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFckUsTUFBTSxhQUFhLEdBQUcsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQzdDLElBQUkscUJBQXFCLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUMvQixNQUFNLENBQUMsTUFBTSxDQUFDLElBQUksNEJBQTRCLEVBQUUsRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQ3JFLENBQUM7UUFFRixhQUFhLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ3JDLENBQUM7OztZQW5DRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlDQUFpQztnQkFDM0MsMEpBQStEOzthQUVoRTs7OytCQUVFLEtBQUs7MkJBQ0wsS0FBSztxQkFFTCxTQUFTLFNBQUMsOEJBQThCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgRWxlbWVudFJlZixcclxuICBJbnB1dCxcclxuICBWaWV3Q2hpbGQsXHJcbiAgQWZ0ZXJWaWV3SW5pdCxcclxuICBPbkNoYW5nZXMsXHJcbiAgU2ltcGxlQ2hhbmdlc1xyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0lOZXdDYW52YXNXaGl0ZWJvYXJkU2hhcGV9IGZyb20gJy4uL19zZXJ2aWNlcy9jYW52YXMtd2hpdGVib2FyZC1zaGFwZS5zZXJ2aWNlJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkU2hhcGV9IGZyb20gJy4uL19jbGFzc2VzL3NoYXBlL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkUG9pbnR9IGZyb20gJy4uL19jbGFzc2VzL2NhbnZhcy13aGl0ZWJvYXJkLXBvaW50Lm1vZGVsJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkU2hhcGVPcHRpb25zfSBmcm9tICcuLi9fY2xhc3Nlcy9zaGFwZS9jYW52YXMtd2hpdGVib2FyZC1zaGFwZS1vcHRpb25zJztcclxuXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlLXByZXZpZXcnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jYW52YXMtd2hpdGVib2FyZC1zaGFwZS1wcmV2aWV3LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9jYW52YXMtd2hpdGVib2FyZC1zaGFwZS1wcmV2aWV3LmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIENhbnZhc1doaXRlYm9hcmRTaGFwZVByZXZpZXdDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xyXG4gIEBJbnB1dCgpIHJlYWRvbmx5IHNoYXBlQ29uc3RydWN0b3IhOiBJTmV3Q2FudmFzV2hpdGVib2FyZFNoYXBlPENhbnZhc1doaXRlYm9hcmRTaGFwZT47XHJcbiAgQElucHV0KCkgcmVhZG9ubHkgc2hhcGVPcHRpb25zITogQ2FudmFzV2hpdGVib2FyZFNoYXBlT3B0aW9ucztcclxuXHJcbiAgQFZpZXdDaGlsZCgnY2FudmFzV2hpdGVib2FyZFNoYXBlUHJldmlldycpIGNhbnZhcyE6IEVsZW1lbnRSZWY7XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMuZHJhd1NoYXBlUHJldmlldygpO1xyXG4gIH1cclxuXHJcbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xyXG4gICAgaWYgKGNoYW5nZXMuc2hhcGVDb25zdHJ1Y3RvciB8fCBjaGFuZ2VzLnNoYXBlT3B0aW9ucykge1xyXG4gICAgICB0aGlzLmRyYXdTaGFwZVByZXZpZXcoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGRyYXdTaGFwZVByZXZpZXcoKTogdm9pZCB7XHJcbiAgICBpZiAoIXRoaXMuY2FudmFzKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuXHJcbiAgICBjb25zdCBjb250ZXh0OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQgPSB0aGlzLmNhbnZhcy5uYXRpdmVFbGVtZW50LmdldENvbnRleHQoJzJkJyk7XHJcbiAgICBjb250ZXh0LmNsZWFyUmVjdCgwLCAwLCBjb250ZXh0LmNhbnZhcy53aWR0aCwgY29udGV4dC5jYW52YXMuaGVpZ2h0KTtcclxuXHJcbiAgICBjb25zdCBjb25jcmV0ZVNoYXBlID0gbmV3IHRoaXMuc2hhcGVDb25zdHJ1Y3RvcihcclxuICAgICAgbmV3IENhbnZhc1doaXRlYm9hcmRQb2ludCgwLCAwKSxcclxuICAgICAgT2JqZWN0LmFzc2lnbihuZXcgQ2FudmFzV2hpdGVib2FyZFNoYXBlT3B0aW9ucygpLCB0aGlzLnNoYXBlT3B0aW9ucylcclxuICAgICk7XHJcblxyXG4gICAgY29uY3JldGVTaGFwZS5kcmF3UHJldmlldyhjb250ZXh0KTtcclxuICB9XHJcbn1cclxuIl19