create-weave-backend-app 2.5.0 → 2.7.0

package/template/+express+azure-web-pubsub/src/workers/workers.ts

@@ -0,0 +1,40 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { cpus } from 'os'
+import { Worker } from 'worker_threads'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let queue: any = null
+
+export const setupWorkers = async () => {
+  const PQueue = await import('p-queue')
+  queue = new PQueue.default({ concurrency: cpus().length })
+}
+
+export function runWorker<T>(
+  workerPath: string,
+  workerData?: unknown
+): Promise<void | T> {
+  if (!queue) {
+    throw new Error('Workers not initialized. Call setupWorkers() first.')
+  }
+
+  return queue.add(async () => {
+    const worker = new Worker(workerPath)
+
+    const result = await new Promise<T>((resolve, reject) => {
+      worker.on('message', resolve)
+      worker.on('error', reject)
+      worker.on('exit', (code) => {
+        if (code !== 0) {
+          reject(new Error(`Worker stopped with exit code ${code}`))
+        }
+      })
+      worker.postMessage(workerData)
+    })
+
+    return result
+  })
+}

package/template/+express+azure-web-pubsub/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "es2020",
     "module": "NodeNext",
     "rootDir": "./src",
-    "moduleResolution": "nodenext",
+    "moduleResolution": "NodeNext",
     "outDir": "./dist",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,

package/template/+express+websockets/example.gitignore

@@ -30,8 +30,8 @@ vite.config.ts*
 .env*
 .npmrc
 
-images
-images-mimetype
-rooms
-temp
-public
+/images/
+/images-mimetype/
+/rooms
+/temp
+/public

package/template/+express+websockets/nodemon.json

@@ -0,0 +1,6 @@
+{
+  "watch": ["src"],
+  "ext": "ts,js,json",
+  "ignore": ["dist"],
+  "exec": "npm run build && npm run copy:assets && npm run copy:fonts && npm run start:dev"
+}

package/template/+express+websockets/src/api/v1/controllers/getImage.ts

@@ -18,8 +18,8 @@ export const getImageController = () => {
     const filePath = await persistenceHandler.getFilePath(fileName)
 
     if (filePath) {
-      const mimeType = await persistenceHandler.getMimeType(fileName)
-      res.setHeader('Content-Type', mimeType)
+      // const mimeType = await persistenceHandler.getMimeType(fileName)
+      // res.setHeader('Content-Type', mimeType)
       res.sendFile(filePath, (err) => {
         if (err) {
           console.error('File not found or error sending file:', err.message)

package/template/+express+websockets/src/api/v1/controllers/getRoom.ts

@@ -0,0 +1,33 @@
+import path from 'path'
+import { fileURLToPath } from 'node:url'
+import { Request, Response } from 'express'
+import { createFolder, existsFolder, existFile } from '@/utils.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export const getRoomController =
+  () =>
+  async (req: Request, res: Response): Promise<void> => {
+    const roomId = req.params.roomId
+
+    try {
+      const roomsFolder = path.join(__dirname, '..', '..', '..', 'rooms')
+
+      if (!(await existsFolder(roomsFolder))) {
+        await createFolder(roomsFolder)
+      }
+
+      const roomsFile = path.join(roomsFolder, roomId)
+
+      if (!(await existFile(roomsFile))) {
+        res.status(404).json({ status: 'KO', message: 'Room not found' })
+        return
+      }
+
+      res.download(roomsFile)
+    } catch (error) {
+      console.log(error)
+      res.status(500).json({ status: 'KO', message: 'Error fetching the room' })
+    }
+  }

package/template/+express+websockets/src/api/v1/controllers/postExportToImage.ts

@@ -0,0 +1,96 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { z } from 'zod'
+import { Request, Response } from 'express'
+import archiver from 'archiver'
+import { WeaveExportFormats } from '@inditextech/weave-types'
+import { getServiceConfig } from '../../../config/config.js'
+import { runWorker } from '../../../workers/workers.js'
+import { ExportToImageWorkerResult } from './workers/types.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const WeaveExportFormatsSchema: z.ZodType<WeaveExportFormats> = z.enum([
+  'image/png',
+  'image/jpeg'
+])
+
+const payloadSchema = z.object({
+  roomData: z.string().base64(),
+  nodes: z.array(z.string()).optional().default([]),
+  options: z.object({
+    format: WeaveExportFormatsSchema.optional().default('image/png'),
+    backgroundColor: z.string().optional().default('transparent'),
+    padding: z.number().min(0).optional().default(20),
+    pixelRatio: z.number().min(1).optional().default(1),
+    quality: z.number().min(0).max(1).optional().default(1)
+  }),
+  responseType: z.enum(['base64', 'blob', 'zip']).optional().default('blob')
+})
+
+export const postExportToImageController = () => {
+  const config = getServiceConfig()
+
+  return async (req: Request, res: Response): Promise<void> => {
+    const parsedBody = payloadSchema.safeParse(req.body)
+
+    if (!parsedBody.success) {
+      res.status(400).json({ errors: parsedBody.error.errors })
+      return
+    }
+
+    try {
+      console.log(__dirname)
+      const result = await runWorker<ExportToImageWorkerResult>(
+        path.join(__dirname, './workers/exportToImage.js'),
+        {
+          ...parsedBody.data,
+          config
+        }
+      )
+
+      const finalBuffer = result as Buffer
+
+      // success
+      const fileExtension =
+        parsedBody.data.options.format.split('/')[1] === 'png' ? '.png' : '.jpg'
+
+      if (parsedBody.data.responseType === 'zip') {
+        res.setHeader('Content-Type', 'application/zip')
+        res.setHeader('Content-Disposition', 'attachment; filename=export.zip')
+
+        const archive = archiver('zip', { zlib: { level: 9 } })
+        archive.pipe(res)
+
+        archive.append(Buffer.from(finalBuffer), {
+          name: `render${fileExtension}`
+        })
+
+        // Finalize ZIP
+        archive.finalize()
+        return
+      }
+
+      if (parsedBody.data.responseType === 'blob') {
+        res.setHeader('Content-Type', 'application/octet-stream')
+        res.setHeader(
+          'Content-Disposition',
+          `attachment; filename="render${fileExtension}"`
+        )
+
+        res.status(200).send(Buffer.from(finalBuffer))
+        return
+      }
+
+      res.status(200).json({
+        url: `data:${parsedBody.data.options.format};base64,${Buffer.from(
+          finalBuffer
+        ).toString('base64')}`
+      })
+    } catch (error) {
+      console.log(error)
+      res.status(500).json({ error: 'Error processing image' })
+    }
+  }
+}

package/template/+express+websockets/src/api/v1/controllers/postRemoveBackground.ts

@@ -1,4 +1,3 @@
-import fs from 'node:fs'
 import path from 'node:path'
 import { Request, Response } from 'express'
 import { removeBackground } from '@imgly/background-removal-node'
@@ -36,7 +35,7 @@ export const postRemoveBackgroundController = () => {
           const data = await myBlobToUIntDemo(blob)
           const fileNameRemoved = `${fileName}-removed`
           await persistenceHandler.persist(fileNameRemoved, 'image/png', data)
-          fs.rmSync(filePathDownload)
+          // fs.rmSync(filePathDownload)
 
           res.status(201).json({
             status: 'Image created OK',

package/template/+express+websockets/src/api/v1/controllers/workers/exportToImage.ts

@@ -0,0 +1,48 @@
+import { parentPort } from 'worker_threads'
+import sharp from 'sharp'
+import { WEAVE_EXPORT_FORMATS } from '@inditextech/weave-types'
+import { renderWeaveRoom } from '../../../../canvas/weave.js'
+
+parentPort?.on('message', async ({ config, roomData, nodes, options }) => {
+  const { instance, destroy } = await renderWeaveRoom(config, roomData)
+
+  const { composites, width, height } = await instance.exportNodesServerSide(
+    nodes,
+    (nodes) => nodes,
+    {
+      format: options.format,
+      padding: options.padding,
+      pixelRatio: options.pixelRatio,
+      backgroundColor: options.backgroundColor,
+      quality: options.quality
+    }
+  )
+
+  destroy()
+
+  try {
+    const composedImage = sharp({
+      create: {
+        width,
+        height,
+        channels: 4,
+        background: { r: 0, g: 0, b: 0, alpha: 0 }
+      }
+    }).composite(composites)
+
+    let imagePipeline = composedImage
+    if (options.format === WEAVE_EXPORT_FORMATS.JPEG) {
+      imagePipeline = composedImage.jpeg({
+        quality: (options.quality ?? 0.8) * 100
+      })
+    }
+    if (options.format === WEAVE_EXPORT_FORMATS.PNG) {
+      imagePipeline = composedImage.png()
+    }
+
+    const imageBuffer = await imagePipeline.toBuffer()
+    parentPort?.postMessage(imageBuffer, [imageBuffer.buffer as ArrayBuffer])
+  } catch (error) {
+    parentPort?.postMessage((error as Error).message)
+  }
+})

package/template/+express+websockets/src/api/v1/controllers/workers/types.ts

@@ -0,0 +1 @@
+export type ExportToImageWorkerResult = Buffer

package/template/+express+websockets/src/api/v1/router.ts

@@ -7,6 +7,8 @@ import { postUploadImageController } from './controllers/postUploadImage.js'
 import { delImageController } from './controllers/delImage.js'
 import { getImagesController } from './controllers/getImages.js'
 import { postRemoveBackgroundController } from './controllers/postRemoveBackground.js'
+import { postExportToImageController } from './controllers/postExportToImage.js'
+import { getRoomController } from './controllers/getRoom.js'
 
 const router: Router = Router()
 
@@ -24,7 +26,8 @@ export function setupApiV1Router(app: Express) {
   router.get(`/health`, getHealthController())
 
   // Room handling API
-  router.get(`/sync/rooms/:roomId`, getRoomConnectController())
+  router.get(`/rooms/:roomId`, getRoomController())
+  router.get(`/rooms/:roomId/connect`, getRoomConnectController())
 
   // Images handling API
   router.get(`/rooms/:roomId/images`, getImagesController())
@@ -40,5 +43,8 @@ export function setupApiV1Router(app: Express) {
   )
   router.delete(`/rooms/:roomId/images/:imageId`, delImageController())
 
+  // Render Canvas API
+  router.post(`/export`, postExportToImageController())
+
   app.use('/api/v1', router)
 }

package/template/+express+websockets/src/canvas/fonts.ts

@@ -0,0 +1,163 @@
+import path from 'node:path'
+import { registerFont } from 'canvas'
+import { FontLibrary } from 'skia-canvas'
+import { CanvasFont, SkiaFont } from './types.js'
+
+let registered = false
+
+export const registerSkiaFonts = () => {
+  if (registered) {
+    return
+  }
+
+  FontLibrary.reset()
+
+  const fonts: SkiaFont[] = [
+    // Arial font family
+    {
+      family: 'Arial',
+      paths: [
+        path.resolve(process.cwd(), 'fonts/ARIALI.ttf'),
+        path.resolve(process.cwd(), 'fonts/ARIAL.ttf')
+      ]
+    },
+    // NotoSansMono font family
+    {
+      family: 'NotoSansMono',
+      // paths: [path.resolve(process.cwd(), "fonts/NotoSansMono-Italic.ttf")],
+      paths: [path.resolve(process.cwd(), 'fonts/NotoSansMono-Regular.ttf')]
+    },
+    // Impact font family
+    {
+      family: 'Impact',
+      paths: [path.resolve(process.cwd(), 'fonts/Impact.ttf')]
+    },
+    // Verdana font family
+    {
+      family: 'Verdana',
+      paths: [
+        path.resolve(process.cwd(), 'fonts/Verdana-Italic.ttf'),
+        path.resolve(process.cwd(), 'fonts/Verdana-Bold.ttf'),
+        path.resolve(process.cwd(), 'fonts/Verdana-BoldItalic.ttf'),
+        path.resolve(process.cwd(), 'fonts/Verdana.ttf')
+      ]
+    },
+    // Inter font family
+    {
+      family: 'Inter',
+      paths: [
+        path.resolve(process.cwd(), 'fonts/inter-bold.ttf'),
+        path.resolve(process.cwd(), 'fonts/inter-italic.ttf'),
+        path.resolve(process.cwd(), 'fonts/inter-italic-bold.ttf'),
+        path.resolve(process.cwd(), 'fonts/inter-regular.ttf')
+      ]
+    },
+    // Sansita font family
+    {
+      family: 'Sansita',
+      paths: [
+        path.resolve(process.cwd(), 'fonts/sansita-bold.ttf'),
+        path.resolve(process.cwd(), 'fonts/sansita-regular.ttf')
+      ]
+    }
+  ]
+
+  for (const font of fonts) {
+    FontLibrary.use(font.family, font.paths)
+  }
+
+  registered = true
+}
+
+export const registerCanvasFonts = () => {
+  const fonts: CanvasFont[] = [
+    // Impact font family
+    {
+      path: path.resolve(process.cwd(), 'fonts/Impact.ttf'),
+      fontFace: {
+        family: 'Impact',
+        weight: '400',
+        style: 'normal'
+      }
+    },
+    // Verdana font family
+    {
+      path: path.resolve(process.cwd(), 'fonts/Verdana.ttf'),
+      fontFace: {
+        family: 'Verdana',
+        weight: '400',
+        style: 'normal'
+      }
+    },
+    {
+      path: path.resolve(process.cwd(), 'fonts/Verdana-Bold.ttf'),
+      fontFace: {
+        family: 'Verdana',
+        weight: '700',
+        style: 'normal'
+      }
+    },
+    {
+      path: path.resolve(process.cwd(), 'fonts/Verdana-Italic.ttf'),
+      fontFace: {
+        family: 'Verdana',
+        weight: '400',
+        style: 'italic'
+      }
+    },
+    {
+      path: path.resolve(process.cwd(), 'fonts/Verdana-BoldItalic.ttf'),
+      fontFace: {
+        family: 'Verdana',
+        weight: '700',
+        style: 'italic'
+      }
+    },
+    // Inter font family
+    {
+      path: path.resolve(process.cwd(), 'fonts/inter-regular.ttf'),
+      fontFace: {
+        family: 'Inter',
+        weight: '400',
+        style: 'normal'
+      }
+    },
+    {
+      path: path.resolve(process.cwd(), 'fonts/inter-bold.ttf'),
+      fontFace: {
+        family: 'Inter',
+        weight: '700',
+        style: 'normal'
+      }
+    },
+    {
+      path: path.resolve(process.cwd(), 'fonts/inter-italic.ttf'),
+      fontFace: {
+        family: 'Inter',
+        weight: '400',
+        style: 'italic'
+      }
+    },
+    {
+      path: path.resolve(process.cwd(), 'fonts/inter-italic-bold.ttf'),
+      fontFace: {
+        family: 'Inter',
+        weight: '700',
+        style: 'italic'
+      }
+    },
+    // Sansita font family
+    {
+      path: path.resolve(process.cwd(), 'fonts/sansita-regular.ttf'),
+      fontFace: {
+        family: 'Sansita',
+        weight: '400',
+        style: 'normal'
+      }
+    }
+  ]
+
+  for (const font of fonts) {
+    registerFont(font.path, font.fontFace)
+  }
+}

package/template/+express+websockets/src/canvas/nodes/color-token/color-token.ts

@@ -0,0 +1,151 @@
+import Konva from 'konva'
+import { WeaveNode } from '@inditextech/weave-sdk/server'
+import {
+  WeaveElementAttributes,
+  WeaveElementInstance
+} from '@inditextech/weave-types'
+
+export const COLOR_TOKEN_NODE_TYPE = 'color-token'
+
+export class ColorTokenNode extends WeaveNode {
+  protected nodeType = COLOR_TOKEN_NODE_TYPE
+
+  onRender(props: WeaveElementAttributes) {
+    const { id } = props
+
+    const colorTokenColor = props.colorToken ?? '#DEFFA0'
+
+    const colorTokenParams = {
+      ...props
+    }
+    delete colorTokenParams.zIndex
+
+    const colorTokenNode = new Konva.Group({
+      ...colorTokenParams,
+      width: colorTokenParams.width,
+      height: colorTokenParams.height,
+      name: 'node'
+    })
+
+    this.setupDefaultNodeAugmentation(colorTokenNode)
+
+    const internalRect = new Konva.Rect({
+      groupId: id,
+      nodeId: id,
+      id: `${id}-colorToken`,
+      x: 0,
+      y: 0,
+      fill: '#FFFFFFFF',
+      width: colorTokenParams.width,
+      height: colorTokenParams.height,
+      strokeEnabled: false
+    })
+
+    colorTokenNode.add(internalRect)
+
+    const internalRect2 = new Konva.Rect({
+      id: `${id}-colorToken-1`,
+      groupId: id,
+      nodeId: id,
+      x: 0,
+      y: 0,
+      fill: colorTokenColor,
+      strokeWidth: 0,
+      strokeEnabled: false,
+      width: colorTokenParams.width,
+      height: (colorTokenParams.height ?? 0) - 60,
+      listening: false,
+      draggable: false
+    })
+
+    colorTokenNode.add(internalRect2)
+
+    const internalText = new Konva.Text({
+      id: `${id}-colorToken-code`,
+      groupId: id,
+      nodeId: id,
+      x: 20,
+      y: 260,
+      fontSize: 20,
+      fontFamily: 'Inter, sans-serif',
+      fill: '#CCCCCCFF',
+      strokeEnabled: false,
+      stroke: '#000000FF',
+      strokeWidth: 1,
+      text: `${colorTokenColor}`,
+      width: (colorTokenParams.width ?? 0) - 40,
+      height: 20,
+      align: 'left',
+      listening: false,
+      draggable: false
+    })
+
+    colorTokenNode.add(internalText)
+
+    const border = new Konva.Rect({
+      groupId: id,
+      nodeId: id,
+      id: `${id}-colorToken-border`,
+      x: 0,
+      y: 0,
+      fill: 'transparent',
+      width: colorTokenParams.width,
+      height: colorTokenParams.height,
+      strokeScaleEnabled: true,
+      stroke: 'black',
+      strokeWidth: 1
+    })
+
+    colorTokenNode.add(border)
+    border.moveToTop()
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(colorTokenNode as any).getTransformerProperties = () => {
+      const baseConfig = this.defaultGetTransformerProperties({})
+      return {
+        ...baseConfig,
+        resizeEnabled: false,
+        enabledAnchors: [] as string[],
+        borderStrokeWidth: 2,
+        padding: 0
+      }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(colorTokenNode as any).allowedAnchors = () => {
+      return []
+    }
+
+    this.setupDefaultNodeEvents(colorTokenNode)
+
+    return colorTokenNode
+  }
+
+  onUpdate(
+    nodeInstance: WeaveElementInstance,
+    nextProps: WeaveElementAttributes
+  ) {
+    const { id, colorToken } = nextProps
+
+    const colorTokenNode = nodeInstance as Konva.Group
+
+    const nodeInstanceZIndex = nodeInstance.zIndex()
+    nodeInstance.setAttrs({
+      ...nextProps,
+      zIndex: nodeInstanceZIndex
+    })
+
+    const colorTokenColor = colorToken ?? '#DEFFA0'
+
+    const colorTokenNode1 = colorTokenNode.findOne(`#${id}-colorToken-1`)
+    if (colorTokenNode1) {
+      colorTokenNode1.setAttrs({
+        fill: colorTokenColor
+      })
+    }
+    const colorTokenCode = colorTokenNode.findOne(`#${id}-colorToken-code`)
+    if (colorTokenCode) {
+      colorTokenCode.setAttr('text', `${colorTokenColor}`)
+    }
+  }
+}

package/template/+express+websockets/src/canvas/types.ts

@@ -0,0 +1,13 @@
+export type SkiaFont = {
+  family: string
+  paths: string[]
+}
+
+export type CanvasFont = {
+  path: string
+  fontFace: {
+    family: string
+    weight?: string | undefined
+    style?: string | undefined
+  }
+}