@lightningjs/renderer
Version:
Lightning 3 Renderer
250 lines • 9.37 kB
JavaScript
/*
* If not stated otherwise in this file or this component's LICENSE file the
* following copyright and licenses apply:
*
* Copyright 2023 Comcast Cable Communications Management, LLC.
*
* Licensed under the Apache License, Version 2.0 (the License);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { getRgbaComponents } from '../../lib/utils.js';
import { SubTexture } from '../../textures/SubTexture.js';
import { TextureType } from '../../textures/Texture.js';
import { CoreRenderer, } from '../CoreRenderer.js';
import { CanvasCoreTexture } from './CanvasCoreTexture.js';
import { getBorder, getRadius, roundRect, strokeLine, } from './internal/C2DShaderUtils.js';
import { formatRgba, parseColorRgba, parseColor, } from './internal/ColorUtils.js';
import { UnsupportedShader } from './shaders/UnsupportedShader.js';
import { assertTruthy } from '../../../utils.js';
export class CanvasCoreRenderer extends CoreRenderer {
context;
canvas;
pixelRatio;
clearColor;
renderToTextureActive = false;
activeRttNode = null;
defShaderCtr;
constructor(options) {
super(options);
this.mode = 'canvas';
this.shManager.renderer = this;
const { canvas, pixelRatio, clearColor } = options;
this.canvas = canvas;
this.context = canvas.getContext('2d');
this.pixelRatio = pixelRatio;
this.clearColor = clearColor ? getRgbaComponents(clearColor) : undefined;
// Stub for default shader controller since the canvas renderer does not
// (really) support the concept of a shader (yet)
this.defShaderCtr = {
type: 'DefaultShader',
props: {},
shader: new UnsupportedShader('DefaultShader'),
getResolvedProps: () => () => {
return {};
},
};
}
reset() {
this.canvas.width = this.canvas.width; // quick reset canvas
const ctx = this.context;
if (this.clearColor) {
const [r, g, b, a] = this.clearColor;
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
}
ctx.scale(this.pixelRatio, this.pixelRatio);
}
render() {
// noop
}
addQuad(quad) {
const ctx = this.context;
const { tx, ty, width, height, alpha, colorTl, colorTr, colorBr, ta, tb, tc, td, clippingRect, } = quad;
let texture = quad.texture;
let ctxTexture = undefined;
let frame;
const textureType = texture?.type;
assertTruthy(textureType, 'Texture type is not defined');
// The Canvas2D renderer only supports image and color textures and subTexture images
if (textureType !== TextureType.image &&
textureType !== TextureType.color &&
textureType !== TextureType.subTexture &&
textureType !== TextureType.noise) {
return;
}
if (texture) {
if (texture instanceof SubTexture) {
frame = texture.props;
texture = texture.parentTexture;
}
ctxTexture = texture.ctxTexture;
if (texture.state === 'freed') {
return;
}
if (texture.state !== 'loaded') {
return;
}
}
const color = parseColor(colorTl);
const hasTransform = ta !== 1;
const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
const hasQuadShader = Boolean(quad.shader);
const radius = hasQuadShader ? getRadius(quad) : 0;
const border = hasQuadShader ? getBorder(quad) : undefined;
if (hasTransform || hasClipping || radius) {
ctx.save();
}
if (hasClipping) {
const path = new Path2D();
const { x, y, width, height } = clippingRect;
path.rect(x, y, width, height);
ctx.clip(path);
}
if (hasTransform) {
// Quad transform:
// | ta tb tx |
// | tc td ty |
// | 0 0 1 |
// C2D transform:
// | a c e |
// | b d f |
// | 0 0 1 |
const scale = this.pixelRatio;
ctx.setTransform(ta, tc, tb, td, tx * scale, ty * scale);
ctx.scale(scale, scale);
ctx.translate(-tx, -ty);
}
if (radius) {
const path = new Path2D();
roundRect.call(path, tx, ty, width, height, radius);
ctx.clip(path);
}
if ((textureType === TextureType.image ||
textureType === TextureType.subTexture ||
textureType === TextureType.noise) &&
ctxTexture) {
const image = ctxTexture.getImage(color);
ctx.globalAlpha = color.a ?? alpha;
if (frame) {
ctx.drawImage(image, frame.x, frame.y, frame.width, frame.height, tx, ty, width, height);
}
else {
try {
ctx.drawImage(image, tx, ty, width, height);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
}
catch (error) {
// noop
}
}
ctx.globalAlpha = 1;
}
else if (textureType === TextureType.color && hasGradient) {
let endX = tx;
let endY = ty;
let endColor;
if (colorTl === colorTr) {
// vertical
endX = tx;
endY = ty + height;
endColor = parseColor(colorBr);
}
else {
// horizontal
endX = tx + width;
endY = ty;
endColor = parseColor(colorTr);
}
const gradient = ctx.createLinearGradient(tx, ty, endX, endY);
gradient.addColorStop(0, formatRgba(color));
gradient.addColorStop(1, formatRgba(endColor));
ctx.fillStyle = gradient;
ctx.fillRect(tx, ty, width, height);
}
else if (textureType === TextureType.color) {
ctx.fillStyle = formatRgba(color);
ctx.fillRect(tx, ty, width, height);
}
if (border && border.width) {
const borderWidth = border.width;
const borderInnerWidth = border.width / 2;
const borderColor = formatRgba(parseColorRgba(border.color ?? 0));
ctx.beginPath();
ctx.lineWidth = borderWidth;
ctx.strokeStyle = borderColor;
ctx.globalAlpha = alpha;
if (radius) {
roundRect.call(ctx, tx + borderInnerWidth, ty + borderInnerWidth, width - borderWidth, height - borderWidth, radius);
ctx.stroke();
}
else {
ctx.strokeRect(tx + borderInnerWidth, ty + borderInnerWidth, width - borderWidth, height - borderWidth);
}
ctx.globalAlpha = 1;
}
else if (hasQuadShader) {
const borderTop = getBorder(quad, 'Top');
const borderRight = getBorder(quad, 'Right');
const borderBottom = getBorder(quad, 'Bottom');
const borderLeft = getBorder(quad, 'Left');
if (borderTop) {
strokeLine(ctx, tx, ty, width, height, borderTop.width, borderTop.color, 'Top');
}
if (borderRight) {
strokeLine(ctx, tx, ty, width, height, borderRight.width, borderRight.color, 'Right');
}
if (borderBottom) {
strokeLine(ctx, tx, ty, width, height, borderBottom.width, borderBottom.color, 'Bottom');
}
if (borderLeft) {
strokeLine(ctx, tx, ty, width, height, borderLeft.width, borderLeft.color, 'Left');
}
}
if (hasTransform || hasClipping || radius) {
ctx.restore();
}
}
createCtxTexture(textureSource) {
return new CanvasCoreTexture(this.txMemManager, textureSource);
}
getShaderManager() {
return this.shManager;
}
getDefShaderCtr() {
return this.defShaderCtr;
}
renderRTTNodes() {
// noop
}
removeRTTNode(node) {
// noop
}
renderToTexture(node) {
// noop
}
getBufferInfo() {
return null;
}
getQuadCount() {
return null;
}
/**
* Updates the clear color of the canvas renderer.
*
* @param color - The color to set as the clear color.
*/
updateClearColor(color) {
this.clearColor = color ? getRgbaComponents(color) : undefined;
}
}
//# sourceMappingURL=CanvasCoreRenderer.js.map