refactor: consolidate canvas handling by removing deprecated files and updating type references

Author: tomast1337

shared/features/thumbnail/canvasBun.ts

@@ -1,133 +1,135 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+import type Path from 'path';
+
+import type NapiRs from '@napi-rs/canvas';
+
+/*
+import type {
+  Canvas as NapiCanvas,
+  Image as NapiImage,
+  GlobalFonts as NapiGlobalFonts,
+} from '@napi-rs/canvas';
+*/
+
+export interface CanvasUtils {
+  createCanvas(width: number, height: number): any;
+  loadImage(src: string): Promise<any>;
+  getPath(filename: string): string | URL;
+  useFont(): void;
+  saveToImage(canvas: HTMLCanvasElement | NapiRs.Canvas): Promise<Uint8Array>;
+  noteBlockImage: Promise<any> | any;
+  DrawingCanvas: any;
+  RenderedImage: any;
+}
 
-let content = {} as any;
+let canvasUtils: CanvasUtils;
 
 if (typeof document === 'undefined') {
-  // Assume Node.js environment
-  const canvasModule = require('@napi-rs/canvas');
-  const { createCanvas, loadImage, registerFont, GlobalFonts } = canvasModule;
-
-  const path = require('path');
+  // Node.js/Bun environment
+  const canvasModule = require('@napi-rs/canvas') as typeof NapiRs;
+  const path = require('path') as typeof Path;
 
-  const Canvas = canvasModule.Canvas;
-  const Image = canvasModule.Image;
+  const {
+    createCanvas: nodeCreateCanvas,
+    loadImage: nodeLoadImage,
+    GlobalFonts,
+  } = canvasModule;
 
   const getPath = (filename: string) => {
-    const dir = path.join(
-      __dirname,
-      '..',
-      '..',
-      '..',
-      'assets',
-      filename.split('/').join(path.sep),
+    return (
+      'file://' +
+      path.join(
+        __dirname,
+        '..',
+        '..',
+        '..',
+        'web',
+        filename.split('/').join(path.sep),
+      )
     );
-
-    console.log('dir', dir);
-    return dir;
   };
 
-  const saveToImage = (canvas: typeof Canvas) => {
-    return canvas.encode('png');
+  const saveToImage = (canvas: NapiRs.Canvas) => canvas.encode('png');
+
+  const useFont = () => {
+    GlobalFonts.registerFromPath(
+      'file:' + getPath('/fonts/Lato-Regular.ttf').toString(),
+      'Lato',
+    );
   };
 
-  // Load note block image
-  let noteBlockImage;
+  let noteBlockImage: Promise<any>;
 
   try {
-    noteBlockImage = loadImage(getPath('/img/note-block-grayscale.png'));
+    noteBlockImage = nodeLoadImage(
+      new URL(getPath('public/img/note-block-grayscale.png')),
+    );
   } catch (error) {
-    console.log('Error loading image: ', error);
+    console.error('Error loading image: ', error);
+    noteBlockImage = Promise.reject(error);
   }
 
-  const useFont = () => {
-    GlobalFonts.registerFromPath(getPath('/fonts/Lato-Regular.ttf'), 'Lato');
-  };
-
-  useFont();
-
-  content = {
-    createCanvas,
-    loadImage,
-    registerFont,
+  canvasUtils = {
+    createCanvas: nodeCreateCanvas,
+    loadImage: nodeLoadImage,
     getPath,
     useFont,
     saveToImage,
     noteBlockImage,
-    Canvas,
-    Image,
+    DrawingCanvas: canvasModule.Canvas,
+    RenderedImage: canvasModule.Image,
   };
 } else {
-  // Assume browser environment
+  // Browser environment
   const createCanvas = (width: number, height: number) => {
-    const canvas = new OffscreenCanvas(width, height);
-    return canvas;
+    return new OffscreenCanvas(width, height);
   };
 
-  const loadImage = function (src: string): Promise<HTMLImageElement> {
+  const loadImage = (src: string): Promise<HTMLImageElement> => {
     return new Promise((resolve, reject) => {
-      const img = document.createElement('img');
+      const img = new Image();
       img.onload = () => resolve(img);
       img.onerror = reject;
       img.src = src;
     });
   };
 
-  const getPath = (filename: string) => {
-    return filename;
-  };
+  const getPath = (filename: string) => filename;
 
-  const saveToImage = (canvas: HTMLCanvasElement) => {
-    console.log('Not implemented');
+  const saveToImage = (_canvas: any) => {
+    console.warn('saveToImage not implemented in browser');
+    throw new Error('saveToImage not implemented in browser');
   };
 
-  // TODO: refactor into resources attribute of some sort
-
-  // Load note block image
-  const noteBlockImage = loadImage(getPath('/img/note-block-grayscale.png'));
-
-  // Register font
   const useFont = () => {
-    const f = new FontFace('Lato', 'url(/fonts/Lato-Regular.ttf)');
+    const font = new FontFace('Lato', 'url(/fonts/Lato-Regular.ttf)');
 
-    f.load().then((font) => {
-      document.fonts.add(font);
+    font.load().then((loadedFont) => {
+      document.fonts.add(loadedFont);
     });
   };
 
-  useFont();
-
-  const Canvas = HTMLCanvasElement;
-  const Image = HTMLImageElement;
+  const noteBlockImage = loadImage(getPath('/img/note-block-grayscale.png'));
 
-  content = {
+  canvasUtils = {
     createCanvas,
     loadImage,
     getPath,
+    useFont,
     saveToImage,
     noteBlockImage,
-    Canvas,
-    Image,
+    DrawingCanvas: HTMLCanvasElement,
+    RenderedImage: HTMLImageElement,
   };
 }
 
-const {
-  createCanvas,
-  loadImage,
-  getPath,
-  useFont,
-  saveToImage,
-  noteBlockImage,
-  Canvas,
-  Image,
-} = content;
-
-export {
+export const {
   createCanvas,
   loadImage,
   getPath,
   useFont,
   saveToImage,
   noteBlockImage,
-  Canvas,
-  Image,
-};
+  DrawingCanvas,
+  RenderedImage,
+} = canvasUtils;

shared/features/thumbnail/canvasFactory.ts

@@ -1,6 +1,6 @@
 import {
-  Canvas,
-  Image,
+  DrawingCanvas,
+  RenderedImage,
   createCanvas,
   noteBlockImage,
   saveToImage,
@@ -21,8 +21,8 @@ interface DrawParams {
   imgHeight: number;
 }
 
-type Canvas = typeof Canvas;
-type Image = typeof Image;
+type Canvas = typeof DrawingCanvas;
+type Image = typeof RenderedImage;
 
 const instrumentColors = [
   '#1964ac',
@@ -146,7 +146,7 @@ export async function drawNotesOffscreen({
   zoomLevel,
   backgroundColor,
   canvasWidth,
-  canvasHeight,
+  //canvasHeight,
   imgWidth = 1280,
   imgHeight = 768,
 }: DrawParams) {
@@ -246,7 +246,9 @@ export async function drawToImage(params: DrawParams): Promise<Buffer> {
   }
 
   const output = await drawNotesOffscreen(params);
-  const buffer = saveToImage(output);
+  const byteArray = await saveToImage(output);
 
+  // Convert to Buffer
+  const buffer = Buffer.from(byteArray);
   return buffer;
 }