react-canvaskit
Version:
A React implementation of the Skia-CanvasKit drawing library.
61 lines • 9.52 kB
JavaScript
import { isCkCanvas } from './CkCanvas';
import { toSkPaint } from './SkiaElementMapping';
export class CkSurface {
constructor(canvasKit, props) {
this.skObjectType = 'SkSurface';
this.type = 'ck-surface';
this.children = [];
this.deleted = false;
this.canvasKit = canvasKit;
this.props = props;
this.defaultPaint = new this.canvasKit.Paint();
}
render(parent) {
var _a;
if (this.deleted) {
throw new Error('BUG. surface element deleted.');
}
if (parent.skObject && isCkCanvas(parent)) {
if (this.skObject === undefined) {
const { width, height } = this.props;
this.skObject = (_a = this.canvasKit.MakeSurface(width, height)) !== null && _a !== void 0 ? _a : undefined;
if (this.skObject === undefined) {
throw new Error('Failed to create a cpu backed skia surface.');
}
}
}
else {
throw new Error('Expected an initialized ck-canvas as parent of ck-surface');
}
this.children.forEach((child) => child.render(this));
this.drawSelf(parent.skObject, this.skObject);
}
drawSelf(parent, skSurface) {
var _a, _b;
const skImage = skSurface.makeImageSnapshot();
const { dx, dy, paint } = this.props;
// TODO we can be smart and only recreate the paint object if the paint props have changed.
(_a = this.renderPaint) === null || _a === void 0 ? void 0 : _a.delete();
this.renderPaint = toSkPaint(this.canvasKit, paint);
parent.drawImage(skImage, dx !== null && dx !== void 0 ? dx : 0, dy !== null && dy !== void 0 ? dy : 0, (_b = this.renderPaint) !== null && _b !== void 0 ? _b : this.defaultPaint);
}
delete() {
var _a, _b;
if (this.deleted) {
return;
}
this.deleted = true;
this.defaultPaint.delete();
(_a = this.renderPaint) === null || _a === void 0 ? void 0 : _a.delete();
this.renderPaint = undefined;
(_b = this.skObject) === null || _b === void 0 ? void 0 : _b.delete();
this.skObject = undefined;
}
}
export const createCkSurface = (type, props, canvasKit) => {
return new CkSurface(canvasKit, props);
};
export function isCkSurface(ckElement) {
return ckElement.type === 'ck-surface';
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2tTdXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL0NrU3VyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3ZDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQW9CaEQsTUFBTSxPQUFPLFNBQVM7SUFZcEIsWUFBWSxTQUFvQixFQUFFLEtBQTRDO1FBUnJFLGlCQUFZLEdBQXlDLFdBQVcsQ0FBQTtRQUNoRSxTQUFJLEdBQWlCLFlBQVksQ0FBQTtRQUMxQyxhQUFRLEdBQXNDLEVBQUUsQ0FBQTtRQUloRCxZQUFPLEdBQUcsS0FBSyxDQUFBO1FBR2IsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUE7UUFDMUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7UUFDbEIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUE7SUFDaEQsQ0FBQztJQUVELE1BQU0sQ0FBQyxNQUErQjs7UUFDcEMsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO1lBQ2hCLE1BQU0sSUFBSSxLQUFLLENBQUMsK0JBQStCLENBQUMsQ0FBQTtTQUNqRDtRQUVELElBQUksTUFBTSxDQUFDLFFBQVEsSUFBSSxVQUFVLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDekMsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLFNBQVMsRUFBRTtnQkFDL0IsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFBO2dCQUNwQyxJQUFJLENBQUMsUUFBUSxHQUFHLE1BQUEsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxtQ0FBSSxTQUFTLENBQUE7Z0JBQ3RFLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxTQUFTLEVBQUU7b0JBQy9CLE1BQU0sSUFBSSxLQUFLLENBQUMsNkNBQTZDLENBQUMsQ0FBQTtpQkFDL0Q7YUFDRjtTQUNGO2FBQU07WUFDTCxNQUFNLElBQUksS0FBSyxDQUFDLDJEQUEyRCxDQUFDLENBQUE7U0FDN0U7UUFFRCxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFBO1FBQ3BELElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUE7SUFDL0MsQ0FBQztJQUVPLFFBQVEsQ0FBQyxNQUFnQixFQUFFLFNBQW9COztRQUNyRCxNQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsaUJBQWlCLEVBQUUsQ0FBQTtRQUM3QyxNQUFNLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFBO1FBQ3BDLDJGQUEyRjtRQUMzRixNQUFBLElBQUksQ0FBQyxXQUFXLDBDQUFFLE1BQU0sRUFBRSxDQUFBO1FBQzFCLElBQUksQ0FBQyxXQUFXLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsS0FBSyxDQUFDLENBQUE7UUFDbkQsTUFBTSxDQUFDLFNBQVMsQ0FBQyxPQUFPLEVBQUUsRUFBRSxhQUFGLEVBQUUsY0FBRixFQUFFLEdBQUksQ0FBQyxFQUFFLEVBQUUsYUFBRixFQUFFLGNBQUYsRUFBRSxHQUFJLENBQUMsRUFBRSxNQUFBLElBQUksQ0FBQyxXQUFXLG1DQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQTtJQUNwRixDQUFDO0lBRUQsTUFBTTs7UUFDSixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDaEIsT0FBTTtTQUNQO1FBQ0QsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUE7UUFDbkIsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsQ0FBQTtRQUMxQixNQUFBLElBQUksQ0FBQyxXQUFXLDBDQUFFLE1BQU0sRUFBRSxDQUFBO1FBQzFCLElBQUksQ0FBQyxXQUFXLEdBQUcsU0FBUyxDQUFBO1FBQzVCLE1BQUEsSUFBSSxDQUFDLFFBQVEsMENBQUUsTUFBTSxFQUFFLENBQUE7UUFDdkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxTQUFTLENBQUE7SUFDM0IsQ0FBQztDQUNGO0FBRUQsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFtQyxDQUM3RCxJQUFJLEVBQ0osS0FBSyxFQUNMLFNBQVMsRUFDeUIsRUFBRTtJQUNwQyxPQUFPLElBQUksU0FBUyxDQUFDLFNBQVMsRUFBRSxLQUFLLENBQUMsQ0FBQTtBQUN4QyxDQUFDLENBQUE7QUFFRCxNQUFNLFVBQVUsV0FBVyxDQUFDLFNBQXlCO0lBQ25ELE9BQU8sU0FBUyxDQUFDLElBQUksS0FBSyxZQUFZLENBQUE7QUFDeEMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ2FudmFzIGFzIFNrQ2FudmFzLCBDYW52YXNLaXQsIFBhaW50IGFzIFNrUGFpbnQsIFN1cmZhY2UgYXMgU2tTdXJmYWNlIH0gZnJvbSAnY2FudmFza2l0LXdhc20nXG5pbXBvcnQgdHlwZSB7IFJlYWN0RWxlbWVudCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHR5cGUgeyBDa0NhbnZhc1Byb3BzIH0gZnJvbSAnLi9Da0NhbnZhcydcbmltcG9ydCB7IGlzQ2tDYW52YXMgfSBmcm9tICcuL0NrQ2FudmFzJ1xuaW1wb3J0IHsgdG9Ta1BhaW50IH0gZnJvbSAnLi9Ta2lhRWxlbWVudE1hcHBpbmcnXG5pbXBvcnQge1xuICBDa0VsZW1lbnQsXG4gIENrRWxlbWVudENvbnRhaW5lcixcbiAgQ2tFbGVtZW50Q3JlYXRvcixcbiAgQ2tFbGVtZW50UHJvcHMsXG4gIENrT2JqZWN0VHlwaW5nLFxuICBQYWludCxcbn0gZnJvbSAnLi9Ta2lhRWxlbWVudFR5cGVzJ1xuXG5leHBvcnQgaW50ZXJmYWNlIENrU3VyZmFjZVByb3BzIGV4dGVuZHMgQ2tFbGVtZW50UHJvcHM8U2tTdXJmYWNlPiB7XG4gIHdpZHRoOiBudW1iZXJcbiAgaGVpZ2h0OiBudW1iZXJcbiAgZHg/OiBudW1iZXJcbiAgZHk/OiBudW1iZXJcbiAgcGFpbnQ/OiBQYWludFxuXG4gIGNoaWxkcmVuPzogUmVhY3RFbGVtZW50PENrQ2FudmFzUHJvcHM+IHwgUmVhY3RFbGVtZW50PENrQ2FudmFzUHJvcHM+W11cbn1cblxuZXhwb3J0IGNsYXNzIENrU3VyZmFjZSBpbXBsZW1lbnRzIENrRWxlbWVudENvbnRhaW5lcjwnY2stc3VyZmFjZSc+IHtcbiAgcmVhZG9ubHkgY2FudmFzS2l0OiBDYW52YXNLaXRcbiAgcmVhZG9ubHkgcHJvcHM6IENrT2JqZWN0VHlwaW5nWydjay1zdXJmYWNlJ11bJ3Byb3BzJ11cbiAgc2tPYmplY3Q/OiBDa09iamVjdFR5cGluZ1snY2stc3VyZmFjZSddWyd0eXBlJ11cbiAgcmVhZG9ubHkgc2tPYmplY3RUeXBlOiBDa09iamVjdFR5cGluZ1snY2stc3VyZmFjZSddWyduYW1lJ10gPSAnU2tTdXJmYWNlJ1xuICByZWFkb25seSB0eXBlOiAnY2stc3VyZmFjZScgPSAnY2stc3VyZmFjZSdcbiAgY2hpbGRyZW46IENrRWxlbWVudENvbnRhaW5lcjwnY2stY2FudmFzJz5bXSA9IFtdXG5cbiAgcmVhZG9ubHkgZGVmYXVsdFBhaW50OiBTa1BhaW50XG4gIHByaXZhdGUgcmVuZGVyUGFpbnQ/OiBTa1BhaW50XG4gIGRlbGV0ZWQgPSBmYWxzZVxuXG4gIGNvbnN0cnVjdG9yKGNhbnZhc0tpdDogQ2FudmFzS2l0LCBwcm9wczogQ2tPYmplY3RUeXBpbmdbJ2NrLXN1cmZhY2UnXVsncHJvcHMnXSkge1xuICAgIHRoaXMuY2FudmFzS2l0ID0gY2FudmFzS2l0XG4gICAgdGhpcy5wcm9wcyA9IHByb3BzXG4gICAgdGhpcy5kZWZhdWx0UGFpbnQgPSBuZXcgdGhpcy5jYW52YXNLaXQuUGFpbnQoKVxuICB9XG5cbiAgcmVuZGVyKHBhcmVudDogQ2tFbGVtZW50Q29udGFpbmVyPGFueT4pIHtcbiAgICBpZiAodGhpcy5kZWxldGVkKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoJ0JVRy4gc3VyZmFjZSBlbGVtZW50IGRlbGV0ZWQuJylcbiAgICB9XG5cbiAgICBpZiAocGFyZW50LnNrT2JqZWN0ICYmIGlzQ2tDYW52YXMocGFyZW50KSkge1xuICAgICAgaWYgKHRoaXMuc2tPYmplY3QgPT09IHVuZGVmaW5lZCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBoZWlnaHQgfSA9IHRoaXMucHJvcHNcbiAgICAgICAgdGhpcy5za09iamVjdCA9IHRoaXMuY2FudmFzS2l0Lk1ha2VTdXJmYWNlKHdpZHRoLCBoZWlnaHQpID8/IHVuZGVmaW5lZFxuICAgICAgICBpZiAodGhpcy5za09iamVjdCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICAgICAgdGhyb3cgbmV3IEVycm9yKCdGYWlsZWQgdG8gY3JlYXRlIGEgY3B1IGJhY2tlZCBza2lhIHN1cmZhY2UuJylcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoJ0V4cGVjdGVkIGFuIGluaXRpYWxpemVkIGNrLWNhbnZhcyBhcyBwYXJlbnQgb2YgY2stc3VyZmFjZScpXG4gICAgfVxuXG4gICAgdGhpcy5jaGlsZHJlbi5mb3JFYWNoKChjaGlsZCkgPT4gY2hpbGQucmVuZGVyKHRoaXMpKVxuICAgIHRoaXMuZHJhd1NlbGYocGFyZW50LnNrT2JqZWN0LCB0aGlzLnNrT2JqZWN0KVxuICB9XG5cbiAgcHJpdmF0ZSBkcmF3U2VsZihwYXJlbnQ6IFNrQ2FudmFzLCBza1N1cmZhY2U6IFNrU3VyZmFjZSkge1xuICAgIGNvbnN0IHNrSW1hZ2UgPSBza1N1cmZhY2UubWFrZUltYWdlU25hcHNob3QoKVxuICAgIGNvbnN0IHsgZHgsIGR5LCBwYWludCB9ID0gdGhpcy5wcm9wc1xuICAgIC8vIFRPRE8gd2UgY2FuIGJlIHNtYXJ0IGFuZCBvbmx5IHJlY3JlYXRlIHRoZSBwYWludCBvYmplY3QgaWYgdGhlIHBhaW50IHByb3BzIGhhdmUgY2hhbmdlZC5cbiAgICB0aGlzLnJlbmRlclBhaW50Py5kZWxldGUoKVxuICAgIHRoaXMucmVuZGVyUGFpbnQgPSB0b1NrUGFpbnQodGhpcy5jYW52YXNLaXQsIHBhaW50KVxuICAgIHBhcmVudC5kcmF3SW1hZ2Uoc2tJbWFnZSwgZHggPz8gMCwgZHkgPz8gMCwgdGhpcy5yZW5kZXJQYWludCA/PyB0aGlzLmRlZmF1bHRQYWludClcbiAgfVxuXG4gIGRlbGV0ZSgpIHtcbiAgICBpZiAodGhpcy5kZWxldGVkKSB7XG4gICAgICByZXR1cm5cbiAgICB9XG4gICAgdGhpcy5kZWxldGVkID0gdHJ1ZVxuICAgIHRoaXMuZGVmYXVsdFBhaW50LmRlbGV0ZSgpXG4gICAgdGhpcy5yZW5kZXJQYWludD8uZGVsZXRlKClcbiAgICB0aGlzLnJlbmRlclBhaW50ID0gdW5kZWZpbmVkXG4gICAgdGhpcy5za09iamVjdD8uZGVsZXRlKClcbiAgICB0aGlzLnNrT2JqZWN0ID0gdW5kZWZpbmVkXG4gIH1cbn1cblxuZXhwb3J0IGNvbnN0IGNyZWF0ZUNrU3VyZmFjZTogQ2tFbGVtZW50Q3JlYXRvcjwnY2stc3VyZmFjZSc+ID0gKFxuICB0eXBlLFxuICBwcm9wcyxcbiAgY2FudmFzS2l0LFxuKTogQ2tFbGVtZW50Q29udGFpbmVyPCdjay1zdXJmYWNlJz4gPT4ge1xuICByZXR1cm4gbmV3IENrU3VyZmFjZShjYW52YXNLaXQsIHByb3BzKVxufVxuXG5leHBvcnQgZnVuY3Rpb24gaXNDa1N1cmZhY2UoY2tFbGVtZW50OiBDa0VsZW1lbnQ8YW55Pik6IGNrRWxlbWVudCBpcyBDa1N1cmZhY2Uge1xuICByZXR1cm4gY2tFbGVtZW50LnR5cGUgPT09ICdjay1zdXJmYWNlJ1xufVxuIl19