diff options
Diffstat (limited to 'apps/web/src/services/renderer')
7 files changed, 54 insertions, 37 deletions
diff --git a/apps/web/src/services/renderer/canvas-utils.ts b/apps/web/src/services/renderer/canvas-utils.ts index ea04037b..093168e6 100644 --- a/apps/web/src/services/renderer/canvas-utils.ts +++ b/apps/web/src/services/renderer/canvas-utils.ts @@ -1,16 +1,16 @@ -export function createOffscreenCanvas({
- width,
- height,
-}: {
- width: number;
- height: number;
-}): OffscreenCanvas | HTMLCanvasElement {
- try {
- return new OffscreenCanvas(width, height);
- } catch {
- const canvas = document.createElement("canvas");
- canvas.width = width;
- canvas.height = height;
- return canvas;
- }
-}
+export function createOffscreenCanvas({ + width, + height, +}: { + width: number; + height: number; +}): OffscreenCanvas | HTMLCanvasElement { + try { + return new OffscreenCanvas(width, height); + } catch { + const canvas = document.createElement("canvas"); + canvas.width = width; + canvas.height = height; + return canvas; + } +} diff --git a/apps/web/src/services/renderer/compositor/frame-descriptor.ts b/apps/web/src/services/renderer/compositor/frame-descriptor.ts index bae9203f..666bea03 100644 --- a/apps/web/src/services/renderer/compositor/frame-descriptor.ts +++ b/apps/web/src/services/renderer/compositor/frame-descriptor.ts @@ -6,7 +6,10 @@ import { createOffscreenCanvas } from "../canvas-utils"; import { BlurBackgroundNode } from "../nodes/blur-background-node"; import { ColorNode } from "../nodes/color-node"; import { EffectLayerNode } from "../nodes/effect-layer-node"; -import { GraphicNode, type ResolvedGraphicNodeState } from "../nodes/graphic-node"; +import { + GraphicNode, + type ResolvedGraphicNodeState, +} from "../nodes/graphic-node"; import { ImageNode } from "../nodes/image-node"; import { RootNode } from "../nodes/root-node"; import { StickerNode } from "../nodes/sticker-node"; @@ -367,7 +370,9 @@ function computeVisualTransform({ }; } -function fullCanvasTransform(renderer: CanvasRenderer): QuadTransformDescriptor { +function fullCanvasTransform( + renderer: CanvasRenderer, +): QuadTransformDescriptor { return { centerX: renderer.width / 2, centerY: renderer.height / 2, @@ -425,7 +430,8 @@ function buildMaskArtifacts({ const shouldRenderMaskDirectly = canRenderMaskDirectly && (!definition.renderer.buildPath || - (mask.params.feather > 0 && definition.renderer.renderMaskHandlesFeather)); + (mask.params.feather > 0 && + definition.renderer.renderMaskHandlesFeather)); if (shouldRenderMaskDirectly && definition.renderer.renderMask) { definition.renderer.renderMask({ resolvedParams: mask.params, @@ -437,11 +443,12 @@ function buildMaskArtifacts({ if (definition.renderer.renderMaskHandlesFeather) { feather = 0; } - strokePath = definition.renderer.buildStrokePath?.({ - resolvedParams: mask.params, - width: transform.width, - height: transform.height, - }) ?? null; + strokePath = + definition.renderer.buildStrokePath?.({ + resolvedParams: mask.params, + width: transform.width, + height: transform.height, + }) ?? null; } else { if (!definition.renderer.buildPath) { return { mask: null, strokeLayer: null }; @@ -487,7 +494,10 @@ function buildMaskArtifacts({ }); let strokeLayer: FrameItemDescriptor | null = null; - if (mask.params.strokeWidth > 0 && (strokePath || definition.renderer.renderStroke)) { + if ( + mask.params.strokeWidth > 0 && + (strokePath || definition.renderer.renderStroke) + ) { const strokeCanvas = createOffscreenCanvas({ width: Math.round(transform.width), height: Math.round(transform.height), @@ -580,4 +590,3 @@ function drawTransformedCanvas({ ctx.drawImage(source, x, y, transform.width, transform.height); ctx.restore(); } - diff --git a/apps/web/src/services/renderer/nodes/sticker-node.ts b/apps/web/src/services/renderer/nodes/sticker-node.ts index 3d22799e..325b4469 100644 --- a/apps/web/src/services/renderer/nodes/sticker-node.ts +++ b/apps/web/src/services/renderer/nodes/sticker-node.ts @@ -42,7 +42,11 @@ export function loadStickerSource({ image.src = url; }); - return { source: image, width: image.naturalWidth, height: image.naturalHeight }; + return { + source: image, + width: image.naturalWidth, + height: image.naturalHeight, + }; })(); stickerSourceCache.set(stickerId, promise); diff --git a/apps/web/src/services/renderer/nodes/text-node.ts b/apps/web/src/services/renderer/nodes/text-node.ts index d5755315..7bdf135c 100644 --- a/apps/web/src/services/renderer/nodes/text-node.ts +++ b/apps/web/src/services/renderer/nodes/text-node.ts @@ -2,9 +2,7 @@ import { BaseNode } from "./base-node"; import type { TextElement } from "@/timeline"; import type { EffectPass } from "@/effects/types"; import type { Transform } from "@/rendering"; -import { - drawMeasuredTextLayout, -} from "@/text/primitives"; +import { drawMeasuredTextLayout } from "@/text/primitives"; import type { MeasuredTextElement } from "@/text/measure-element"; export type TextNodeParams = TextElement & { diff --git a/apps/web/src/services/renderer/nodes/visual-node.ts b/apps/web/src/services/renderer/nodes/visual-node.ts index 995e598d..b9bf1709 100644 --- a/apps/web/src/services/renderer/nodes/visual-node.ts +++ b/apps/web/src/services/renderer/nodes/visual-node.ts @@ -25,8 +25,7 @@ export interface ResolvedVisualNodeState { effectPasses: EffectPass[][]; } -export interface ResolvedVisualSourceNodeState - extends ResolvedVisualNodeState { +export interface ResolvedVisualSourceNodeState extends ResolvedVisualNodeState { source: CanvasImageSource; sourceWidth: number; sourceHeight: number; diff --git a/apps/web/src/services/renderer/resolve.ts b/apps/web/src/services/renderer/resolve.ts index 578c9603..5495ba3b 100644 --- a/apps/web/src/services/renderer/resolve.ts +++ b/apps/web/src/services/renderer/resolve.ts @@ -27,7 +27,10 @@ import { type BackdropSource, type ResolvedBlurBackgroundNodeState, } from "./nodes/blur-background-node"; -import { EffectLayerNode, type ResolvedEffectLayerNodeState } from "./nodes/effect-layer-node"; +import { + EffectLayerNode, + type ResolvedEffectLayerNodeState, +} from "./nodes/effect-layer-node"; import { GraphicNode, type ResolvedGraphicNodeState, @@ -232,7 +235,10 @@ async function resolveImageNode({ node: ImageNode; context: ResolveContext; }): Promise<ResolvedVisualSourceNodeState | null> { - const source = await loadImageSource(node.params.url, node.params.maxSourceSize); + const source = await loadImageSource( + node.params.url, + node.params.maxSourceSize, + ); const visualState = resolveVisualState({ params: node.params, context, diff --git a/apps/web/src/services/renderer/scene-exporter.ts b/apps/web/src/services/renderer/scene-exporter.ts index 1b3267a7..66df9485 100644 --- a/apps/web/src/services/renderer/scene-exporter.ts +++ b/apps/web/src/services/renderer/scene-exporter.ts @@ -86,7 +86,9 @@ export class SceneExporter extends EventEmitter<SceneExporterEvents> { }): Promise<ArrayBuffer | null> { const fps = this.renderer.fps; const fpsFloat = frameRateToFloat(fps); - const ticksPerFrame = Math.round(TICKS_PER_SECOND * fps.denominator / fps.numerator); + const ticksPerFrame = Math.round( + (TICKS_PER_SECOND * fps.denominator) / fps.numerator, + ); const frameCount = Math.floor(rootNode.duration / ticksPerFrame); const outputFormat = @@ -106,8 +108,7 @@ export class SceneExporter extends EventEmitter<SceneExporterEvents> { let audioSource: AudioBufferSource | null = null; if (this.shouldIncludeAudio && this.audioBuffer) { - let audioCodec: "aac" | "opus" = - this.format === "webm" ? "opus" : "aac"; + let audioCodec: "aac" | "opus" = this.format === "webm" ? "opus" : "aac"; if (audioCodec === "aac" && typeof AudioEncoder !== "undefined") { const { supported } = await AudioEncoder.isConfigSupported({ |