@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
47 lines • 7.67 kB
JavaScript
import { Component, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { CanvasWhiteboardShapeService } from '../_services/canvas-whiteboard-shape.service';
export class CanvasWhiteboardShapeSelectorComponent {
constructor(elementRef, canvasWhiteboardShapeService) {
this.elementRef = elementRef;
this.canvasWhiteboardShapeService = canvasWhiteboardShapeService;
this.showShapeSelector = false;
this.toggleShapeSelector = new EventEmitter();
this.shapeSelected = new EventEmitter();
this.registeredShapes$ = this.canvasWhiteboardShapeService.registeredShapes$;
}
closeOnExternalClick(event) {
if (!this.elementRef.nativeElement.contains(event.target) && this.showShapeSelector) {
this.toggleShapeSelector.emit(false);
}
}
selectShape(shape) {
this.shapeSelected.emit(shape);
this.doToggleShapeSelector(null);
}
doToggleShapeSelector(event) {
if (event) {
event.preventDefault();
}
this.toggleShapeSelector.emit(!this.showShapeSelector);
}
}
CanvasWhiteboardShapeSelectorComponent.decorators = [
{ type: Component, args: [{
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}"]
},] }
];
CanvasWhiteboardShapeSelectorComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: CanvasWhiteboardShapeService }
];
CanvasWhiteboardShapeSelectorComponent.propDecorators = {
showShapeSelector: [{ type: Input }],
selectedShapeConstructor: [{ type: Input }],
shapeOptions: [{ type: Input }],
toggleShapeSelector: [{ type: Output }],
shapeSelected: [{ type: Output }],
closeOnExternalClick: [{ type: HostListener, args: ['document:touchstart', ['$event'],] }, { type: HostListener, args: ['document:mousedown', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FudmFzLXdoaXRlYm9hcmQtc2hhcGUtc2VsZWN0b3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctd2hpdGVib2FyZC9zcmMvbGliL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlLXNlbGVjdG9yL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlLXNlbGVjdG9yLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQUUsWUFBWSxFQUMxQixLQUFLLEVBQ0wsTUFBTSxFQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyw0QkFBNEIsRUFBNEIsTUFBTSw4Q0FBOEMsQ0FBQztBQVdySCxNQUFNLE9BQU8sc0NBQXNDO0lBa0JqRCxZQUFvQixVQUFzQixFQUN0Qiw0QkFBMEQ7UUFEMUQsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixpQ0FBNEIsR0FBNUIsNEJBQTRCLENBQThCO1FBbEI1RCxzQkFBaUIsR0FBWSxLQUFLLENBQUM7UUFJM0Msd0JBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUNsRCxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFvRCxDQUFDO1FBYzdGLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsNEJBQTRCLENBQUMsaUJBQWlCLENBQUM7SUFDL0UsQ0FBQztJQVRELG9CQUFvQixDQUFDLEtBQVU7UUFDN0IsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLElBQUksSUFBSSxDQUFDLGlCQUFpQixFQUFFO1lBQ25GLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDdEM7SUFDSCxDQUFDO0lBT0QsV0FBVyxDQUFDLEtBQXVEO1FBQ2pFLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQy9CLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQscUJBQXFCLENBQUMsS0FBbUI7UUFDdkMsSUFBSSxLQUFLLEVBQUU7WUFDVCxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7U0FDeEI7UUFFRCxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLENBQUM7SUFDekQsQ0FBQzs7O1lBdkNGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsa0NBQWtDO2dCQUM1Qyx1c0JBQWdFOzthQUVqRTs7O1lBZkMsVUFBVTtZQUtKLDRCQUE0Qjs7O2dDQVlqQyxLQUFLO3VDQUNMLEtBQUs7MkJBQ0wsS0FBSztrQ0FFTCxNQUFNOzRCQUNOLE1BQU07bUNBSU4sWUFBWSxTQUFDLHFCQUFxQixFQUFFLENBQUMsUUFBUSxDQUFDLGNBQzlDLFlBQVksU0FBQyxvQkFBb0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsXHJcbiAgSW5wdXQsXHJcbiAgT3V0cHV0XHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7Q2FudmFzV2hpdGVib2FyZFNoYXBlU2VydmljZSwgSU5ld0NhbnZhc1doaXRlYm9hcmRTaGFwZX0gZnJvbSAnLi4vX3NlcnZpY2VzL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlLnNlcnZpY2UnO1xyXG5pbXBvcnQge0NhbnZhc1doaXRlYm9hcmRTaGFwZX0gZnJvbSAnLi4vX2NsYXNzZXMvc2hhcGUvY2FudmFzLXdoaXRlYm9hcmQtc2hhcGUnO1xyXG5pbXBvcnQge0NhbnZhc1doaXRlYm9hcmRTaGFwZU9wdGlvbnN9IGZyb20gJy4uL19jbGFzc2VzL3NoYXBlL2NhbnZhcy13aGl0ZWJvYXJkLXNoYXBlLW9wdGlvbnMnO1xyXG5pbXBvcnQge09ic2VydmFibGV9IGZyb20gJ3J4anMnO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnY2FudmFzLXdoaXRlYm9hcmQtc2hhcGUtc2VsZWN0b3InLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jYW52YXMtd2hpdGVib2FyZC1zaGFwZS1zZWxlY3Rvci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vY2FudmFzLXdoaXRlYm9hcmQtc2hhcGUtc2VsZWN0b3IuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2FudmFzV2hpdGVib2FyZFNoYXBlU2VsZWN0b3JDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIHJlYWRvbmx5IHNob3dTaGFwZVNlbGVjdG9yOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgcmVhZG9ubHkgc2VsZWN0ZWRTaGFwZUNvbnN0cnVjdG9yITogSU5ld0NhbnZhc1doaXRlYm9hcmRTaGFwZTxDYW52YXNXaGl0ZWJvYXJkU2hhcGU+O1xyXG4gIEBJbnB1dCgpIHJlYWRvbmx5IHNoYXBlT3B0aW9ucyE6IENhbnZhc1doaXRlYm9hcmRTaGFwZU9wdGlvbnM7XHJcblxyXG4gIEBPdXRwdXQoKSB0b2dnbGVTaGFwZVNlbGVjdG9yID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG4gIEBPdXRwdXQoKSBzaGFwZVNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxJTmV3Q2FudmFzV2hpdGVib2FyZFNoYXBlPENhbnZhc1doaXRlYm9hcmRTaGFwZT4+KCk7XHJcblxyXG4gIHJlZ2lzdGVyZWRTaGFwZXMkOiBPYnNlcnZhYmxlPElOZXdDYW52YXNXaGl0ZWJvYXJkU2hhcGU8Q2FudmFzV2hpdGVib2FyZFNoYXBlPltdPjtcclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6dG91Y2hzdGFydCcsIFsnJGV2ZW50J10pXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6bW91c2Vkb3duJywgWyckZXZlbnQnXSlcclxuICBjbG9zZU9uRXh0ZXJuYWxDbGljayhldmVudDogYW55KTogdm9pZCB7XHJcbiAgICBpZiAoIXRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCkgJiYgdGhpcy5zaG93U2hhcGVTZWxlY3Rvcikge1xyXG4gICAgICB0aGlzLnRvZ2dsZVNoYXBlU2VsZWN0b3IuZW1pdChmYWxzZSk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXHJcbiAgICAgICAgICAgICAgcHJpdmF0ZSBjYW52YXNXaGl0ZWJvYXJkU2hhcGVTZXJ2aWNlOiBDYW52YXNXaGl0ZWJvYXJkU2hhcGVTZXJ2aWNlKSB7XHJcbiAgICB0aGlzLnJlZ2lzdGVyZWRTaGFwZXMkID0gdGhpcy5jYW52YXNXaGl0ZWJvYXJkU2hhcGVTZXJ2aWNlLnJlZ2lzdGVyZWRTaGFwZXMkO1xyXG4gIH1cclxuXHJcbiAgc2VsZWN0U2hhcGUoc2hhcGU6IElOZXdDYW52YXNXaGl0ZWJvYXJkU2hhcGU8Q2FudmFzV2hpdGVib2FyZFNoYXBlPik6IHZvaWQge1xyXG4gICAgdGhpcy5zaGFwZVNlbGVjdGVkLmVtaXQoc2hhcGUpO1xyXG4gICAgdGhpcy5kb1RvZ2dsZVNoYXBlU2VsZWN0b3IobnVsbCk7XHJcbiAgfVxyXG5cclxuICBkb1RvZ2dsZVNoYXBlU2VsZWN0b3IoZXZlbnQ6IEV2ZW50IHwgbnVsbCk6IHZvaWQge1xyXG4gICAgaWYgKGV2ZW50KSB7XHJcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy50b2dnbGVTaGFwZVNlbGVjdG9yLmVtaXQoIXRoaXMuc2hvd1NoYXBlU2VsZWN0b3IpO1xyXG4gIH1cclxufVxyXG4iXX0=