@ng-web-apis/canvas
Version:
A library for declarative use of Canvas API with Angular
72 lines • 8.26 kB
JavaScript
import { Directive, ElementRef, inject, Input } from '@angular/core';
import { WaDrawService } from '../services/draw.service';
import { CANVAS_2D_CONTEXT } from '../tokens/canvas-2d-context';
import * as i0 from "@angular/core";
class WaCanvas2d {
context = inject(CANVAS_2D_CONTEXT);
method = inject(WaDrawService);
waOpaque = '';
waDesynchronized = '';
constructor() {
this.context.strokeStyle = 'transparent';
this.method.call = (context) => {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WaCanvas2d, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: WaCanvas2d, isStandalone: true, selector: "canvas[waCanvas2d]", inputs: { waOpaque: "waOpaque", waDesynchronized: "waDesynchronized" }, providers: [
{
provide: CANVAS_2D_CONTEXT,
useFactory: () => {
const { nativeElement } = inject(ElementRef);
const opaque = nativeElement.getAttribute('waOpaque');
const desynchronized = nativeElement.getAttribute('waDesynchronized');
const context = nativeElement.getContext('2d', {
alpha: opaque === null,
desynchronized: desynchronized !== null,
});
if (!context) {
throw new Error('Context of different type was already requested');
}
return context;
},
},
WaDrawService,
], ngImport: i0 });
}
export { WaCanvas2d };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WaCanvas2d, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'canvas[waCanvas2d]',
providers: [
{
provide: CANVAS_2D_CONTEXT,
useFactory: () => {
const { nativeElement } = inject(ElementRef);
const opaque = nativeElement.getAttribute('waOpaque');
const desynchronized = nativeElement.getAttribute('waDesynchronized');
const context = nativeElement.getContext('2d', {
alpha: opaque === null,
desynchronized: desynchronized !== null,
});
if (!context) {
throw new Error('Context of different type was already requested');
}
return context;
},
},
WaDrawService,
],
}]
}], ctorParameters: function () { return []; }, propDecorators: { waOpaque: [{
type: Input
}], waDesynchronized: [{
type: Input
}] } });
/**
* @deprecated: use {@link WaCanvas2d}
*/
export const Canvas2dDirective = WaCanvas2d;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FudmFzLTJkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy9jYW52YXMvc3JjL2NvbnRleHRzL2NhbnZhcy0yZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRW5FLE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQzs7QUFFOUQsTUF5QmEsVUFBVTtJQUNGLE9BQU8sR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztJQUNwQyxNQUFNLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBR3pDLFFBQVEsR0FBRyxFQUFXLENBQUM7SUFHdkIsZ0JBQWdCLEdBQUcsRUFBVyxDQUFDO0lBRXRDO1FBQ0ksSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDO1FBRXpDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxHQUFHLENBQUMsT0FBTyxFQUFFLEVBQUU7WUFDM0IsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDekUsQ0FBQyxDQUFDO0lBQ04sQ0FBQzt3R0FoQlEsVUFBVTs0RkFBVixVQUFVLHlJQXRCUjtZQUNQO2dCQUNJLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFVBQVUsRUFBRSxHQUE2QixFQUFFO29CQUN2QyxNQUFNLEVBQUMsYUFBYSxFQUFDLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO29CQUMzQyxNQUFNLE1BQU0sR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFDO29CQUN0RCxNQUFNLGNBQWMsR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLGtCQUFrQixDQUFDLENBQUM7b0JBQ3RFLE1BQU0sT0FBTyxHQUFHLGFBQWEsQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFO3dCQUMzQyxLQUFLLEVBQUUsTUFBTSxLQUFLLElBQUk7d0JBQ3RCLGNBQWMsRUFBRSxjQUFjLEtBQUssSUFBSTtxQkFDMUMsQ0FBQyxDQUFDO29CQUVILElBQUksQ0FBQyxPQUFPLEVBQUU7d0JBQ1YsTUFBTSxJQUFJLEtBQUssQ0FBQyxpREFBaUQsQ0FBQyxDQUFDO3FCQUN0RTtvQkFFRCxPQUFPLE9BQU8sQ0FBQztnQkFDbkIsQ0FBQzthQUNKO1lBQ0QsYUFBYTtTQUNoQjs7U0FFUSxVQUFVOzRGQUFWLFVBQVU7a0JBekJ0QixTQUFTO21CQUFDO29CQUNQLFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUUsb0JBQW9CO29CQUM5QixTQUFTLEVBQUU7d0JBQ1A7NEJBQ0ksT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsVUFBVSxFQUFFLEdBQTZCLEVBQUU7Z0NBQ3ZDLE1BQU0sRUFBQyxhQUFhLEVBQUMsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7Z0NBQzNDLE1BQU0sTUFBTSxHQUFHLGFBQWEsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDLENBQUM7Z0NBQ3RELE1BQU0sY0FBYyxHQUFHLGFBQWEsQ0FBQyxZQUFZLENBQUMsa0JBQWtCLENBQUMsQ0FBQztnQ0FDdEUsTUFBTSxPQUFPLEdBQUcsYUFBYSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUU7b0NBQzNDLEtBQUssRUFBRSxNQUFNLEtBQUssSUFBSTtvQ0FDdEIsY0FBYyxFQUFFLGNBQWMsS0FBSyxJQUFJO2lDQUMxQyxDQUFDLENBQUM7Z0NBRUgsSUFBSSxDQUFDLE9BQU8sRUFBRTtvQ0FDVixNQUFNLElBQUksS0FBSyxDQUFDLGlEQUFpRCxDQUFDLENBQUM7aUNBQ3RFO2dDQUVELE9BQU8sT0FBTyxDQUFDOzRCQUNuQixDQUFDO3lCQUNKO3dCQUNELGFBQWE7cUJBQ2hCO2lCQUNKOzBFQU1VLFFBQVE7c0JBRGQsS0FBSztnQkFJQyxnQkFBZ0I7c0JBRHRCLEtBQUs7O0FBWVY7O0dBRUc7QUFDSCxNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxVQUFVLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0RpcmVjdGl2ZSwgRWxlbWVudFJlZiwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7V2FEcmF3U2VydmljZX0gZnJvbSAnLi4vc2VydmljZXMvZHJhdy5zZXJ2aWNlJztcbmltcG9ydCB7Q0FOVkFTXzJEX0NPTlRFWFR9IGZyb20gJy4uL3Rva2Vucy9jYW52YXMtMmQtY29udGV4dCc7XG5cbkBEaXJlY3RpdmUoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdjYW52YXNbd2FDYW52YXMyZF0nLFxuICAgIHByb3ZpZGVyczogW1xuICAgICAgICB7XG4gICAgICAgICAgICBwcm92aWRlOiBDQU5WQVNfMkRfQ09OVEVYVCxcbiAgICAgICAgICAgIHVzZUZhY3Rvcnk6ICgpOiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQgPT4ge1xuICAgICAgICAgICAgICAgIGNvbnN0IHtuYXRpdmVFbGVtZW50fSA9IGluamVjdChFbGVtZW50UmVmKTtcbiAgICAgICAgICAgICAgICBjb25zdCBvcGFxdWUgPSBuYXRpdmVFbGVtZW50LmdldEF0dHJpYnV0ZSgnd2FPcGFxdWUnKTtcbiAgICAgICAgICAgICAgICBjb25zdCBkZXN5bmNocm9uaXplZCA9IG5hdGl2ZUVsZW1lbnQuZ2V0QXR0cmlidXRlKCd3YURlc3luY2hyb25pemVkJyk7XG4gICAgICAgICAgICAgICAgY29uc3QgY29udGV4dCA9IG5hdGl2ZUVsZW1lbnQuZ2V0Q29udGV4dCgnMmQnLCB7XG4gICAgICAgICAgICAgICAgICAgIGFscGhhOiBvcGFxdWUgPT09IG51bGwsXG4gICAgICAgICAgICAgICAgICAgIGRlc3luY2hyb25pemVkOiBkZXN5bmNocm9uaXplZCAhPT0gbnVsbCxcbiAgICAgICAgICAgICAgICB9KTtcblxuICAgICAgICAgICAgICAgIGlmICghY29udGV4dCkge1xuICAgICAgICAgICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ0NvbnRleHQgb2YgZGlmZmVyZW50IHR5cGUgd2FzIGFscmVhZHkgcmVxdWVzdGVkJyk7XG4gICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgcmV0dXJuIGNvbnRleHQ7XG4gICAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgICBXYURyYXdTZXJ2aWNlLFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIFdhQ2FudmFzMmQge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgY29udGV4dCA9IGluamVjdChDQU5WQVNfMkRfQ09OVEVYVCk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBtZXRob2QgPSBpbmplY3QoV2FEcmF3U2VydmljZSk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyB3YU9wYXF1ZSA9ICcnIGFzIGNvbnN0O1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgd2FEZXN5bmNocm9uaXplZCA9ICcnIGFzIGNvbnN0O1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgICAgIHRoaXMuY29udGV4dC5zdHJva2VTdHlsZSA9ICd0cmFuc3BhcmVudCc7XG5cbiAgICAgICAgdGhpcy5tZXRob2QuY2FsbCA9IChjb250ZXh0KSA9PiB7XG4gICAgICAgICAgICBjb250ZXh0LmNsZWFyUmVjdCgwLCAwLCBjb250ZXh0LmNhbnZhcy53aWR0aCwgY29udGV4dC5jYW52YXMuaGVpZ2h0KTtcbiAgICAgICAgfTtcbiAgICB9XG59XG5cbi8qKlxuICogQGRlcHJlY2F0ZWQ6IHVzZSB7QGxpbmsgV2FDYW52YXMyZH1cbiAqL1xuZXhwb3J0IGNvbnN0IENhbnZhczJkRGlyZWN0aXZlID0gV2FDYW52YXMyZDtcbiJdfQ==