@drizm/ng-whiteboard
Version:
A Canvas component for Angular which supports free drawing.
36 lines • 5.52 kB
JavaScript
import { CanvasWhiteboardShape } from './canvas-whiteboard-shape';
import { CanvasWhiteboardPoint } from '../canvas-whiteboard-point.model';
export class RectangleShape extends CanvasWhiteboardShape {
constructor(positionPoint, options, width, height) {
super(positionPoint, options);
this.width = width || 0;
this.height = height || 0;
}
getShapeName() {
return 'RectangleShape';
}
draw(context) {
if (!this.width || !this.height) {
return;
}
context.beginPath();
Object.assign(context, this.options);
context.rect(this.positionPoint.x, this.positionPoint.y, this.width, this.height);
context.stroke();
if (this.options.shouldFillShape) {
context.fill();
}
context.closePath();
}
drawPreview(context) {
this.positionPoint = new CanvasWhiteboardPoint(2, 2);
this.width = context.canvas.width - 4;
this.height = context.canvas.height - 4;
this.draw(context);
}
onUpdateReceived(update) {
this.width = update.x - this.positionPoint.x;
this.height = update.y - this.positionPoint.y;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVjdGFuZ2xlLXNoYXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctd2hpdGVib2FyZC9zcmMvbGliL19jbGFzc2VzL3NoYXBlL3JlY3RhbmdsZS1zaGFwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUVoRSxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUd2RSxNQUFNLE9BQU8sY0FBZSxTQUFRLHFCQUFxQjtJQUl2RCxZQUFZLGFBQXFDLEVBQ3JDLE9BQXNDLEVBQ3RDLEtBQWMsRUFDZCxNQUFlO1FBQ3pCLEtBQUssQ0FBQyxhQUFhLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDOUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLElBQUksQ0FBQyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBRUQsWUFBWTtRQUNWLE9BQU8sZ0JBQWdCLENBQUM7SUFDMUIsQ0FBQztJQUVELElBQUksQ0FBQyxPQUFpQztRQUNwQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDL0IsT0FBTztTQUNSO1FBQ0QsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBRXBCLE1BQU0sQ0FBQyxNQUFNLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUVyQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBRWxGLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUNqQixJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsZUFBZSxFQUFFO1lBQ2hDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNoQjtRQUVELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQWlDO1FBQzNDLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxxQkFBcUIsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDckQsSUFBSSxDQUFDLEtBQUssR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7UUFDdEMsSUFBSSxDQUFDLE1BQU0sR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7UUFDeEMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNyQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsTUFBOEI7UUFDN0MsSUFBSSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsQ0FBVyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDO1FBQ3ZELElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLENBQVcsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztJQUMxRCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NhbnZhc1doaXRlYm9hcmRTaGFwZX0gZnJvbSAnLi9jYW52YXMtd2hpdGVib2FyZC1zaGFwZSc7XHJcbmltcG9ydCB7Q2FudmFzV2hpdGVib2FyZFNoYXBlT3B0aW9uc30gZnJvbSAnLi9jYW52YXMtd2hpdGVib2FyZC1zaGFwZS1vcHRpb25zJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkUG9pbnR9IGZyb20gJy4uL2NhbnZhcy13aGl0ZWJvYXJkLXBvaW50Lm1vZGVsJztcclxuaW1wb3J0IHtDYW52YXNXaGl0ZWJvYXJkVXBkYXRlfSBmcm9tICcuLi9jYW52YXMtd2hpdGVib2FyZC11cGRhdGUubW9kZWwnO1xyXG5cclxuZXhwb3J0IGNsYXNzIFJlY3RhbmdsZVNoYXBlIGV4dGVuZHMgQ2FudmFzV2hpdGVib2FyZFNoYXBlIHtcclxuICB3aWR0aDogbnVtYmVyO1xyXG4gIGhlaWdodDogbnVtYmVyO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwb3NpdGlvblBvaW50PzogQ2FudmFzV2hpdGVib2FyZFBvaW50LFxyXG4gICAgICAgICAgICAgIG9wdGlvbnM/OiBDYW52YXNXaGl0ZWJvYXJkU2hhcGVPcHRpb25zLFxyXG4gICAgICAgICAgICAgIHdpZHRoPzogbnVtYmVyLFxyXG4gICAgICAgICAgICAgIGhlaWdodD86IG51bWJlcikge1xyXG4gICAgc3VwZXIocG9zaXRpb25Qb2ludCwgb3B0aW9ucyk7XHJcbiAgICB0aGlzLndpZHRoID0gd2lkdGggfHwgMDtcclxuICAgIHRoaXMuaGVpZ2h0ID0gaGVpZ2h0IHx8IDA7XHJcbiAgfVxyXG5cclxuICBnZXRTaGFwZU5hbWUoKTogc3RyaW5nIHtcclxuICAgIHJldHVybiAnUmVjdGFuZ2xlU2hhcGUnO1xyXG4gIH1cclxuXHJcbiAgZHJhdyhjb250ZXh0OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQpOiB2b2lkIHtcclxuICAgIGlmICghdGhpcy53aWR0aCB8fCAhdGhpcy5oZWlnaHQpIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgY29udGV4dC5iZWdpblBhdGgoKTtcclxuXHJcbiAgICBPYmplY3QuYXNzaWduKGNvbnRleHQsIHRoaXMub3B0aW9ucyk7XHJcblxyXG4gICAgY29udGV4dC5yZWN0KHRoaXMucG9zaXRpb25Qb2ludC54LCB0aGlzLnBvc2l0aW9uUG9pbnQueSwgdGhpcy53aWR0aCwgdGhpcy5oZWlnaHQpO1xyXG5cclxuICAgIGNvbnRleHQuc3Ryb2tlKCk7XHJcbiAgICBpZiAodGhpcy5vcHRpb25zLnNob3VsZEZpbGxTaGFwZSkge1xyXG4gICAgICBjb250ZXh0LmZpbGwoKTtcclxuICAgIH1cclxuXHJcbiAgICBjb250ZXh0LmNsb3NlUGF0aCgpO1xyXG4gIH1cclxuXHJcbiAgZHJhd1ByZXZpZXcoY29udGV4dDogQ2FudmFzUmVuZGVyaW5nQ29udGV4dDJEKTogdm9pZCB7XHJcbiAgICB0aGlzLnBvc2l0aW9uUG9pbnQgPSBuZXcgQ2FudmFzV2hpdGVib2FyZFBvaW50KDIsIDIpO1xyXG4gICAgdGhpcy53aWR0aCA9IGNvbnRleHQuY2FudmFzLndpZHRoIC0gNDtcclxuICAgIHRoaXMuaGVpZ2h0ID0gY29udGV4dC5jYW52YXMuaGVpZ2h0IC0gNDtcclxuICAgIHRoaXMuZHJhdyhjb250ZXh0KTtcclxuICB9XHJcblxyXG4gIG9uVXBkYXRlUmVjZWl2ZWQodXBkYXRlOiBDYW52YXNXaGl0ZWJvYXJkVXBkYXRlKTogdm9pZCB7XHJcbiAgICB0aGlzLndpZHRoID0gdXBkYXRlLnggYXMgbnVtYmVyIC0gdGhpcy5wb3NpdGlvblBvaW50Lng7XHJcbiAgICB0aGlzLmhlaWdodCA9IHVwZGF0ZS55IGFzIG51bWJlciAtIHRoaXMucG9zaXRpb25Qb2ludC55O1xyXG4gIH1cclxufVxyXG4iXX0=