create-weave-backend-app 2.6.0 → 2.7.0

package/template/+express+azure-web-pubsub/src/api/v1/controllers/workers/exportToImage.ts

@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+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+azure-web-pubsub/src/api/v1/controllers/workers/types.ts

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export type ExportToImageWorkerResult = Buffer

package/template/+express+azure-web-pubsub/src/api/v1/router.ts

@@ -1,6 +1,5 @@
 import { Express, Router } from 'express'
 import multer from 'multer'
-import { getAzureWebPubsubServer } from '@/store'
 import { getHealthController } from './controllers/getHealth.js'
 import { getRoomConnectController } from './controllers/getRoomConnect.js'
 import { getImageController } from './controllers/getImage.js'
@@ -8,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()
 
@@ -25,7 +26,7 @@ export function setupApiV1Router(app: Express) {
   router.get(`/health`, getHealthController())
 
   // Room handling API
-  router.use(getAzureWebPubsubServer().getMiddleware())
+  router.get(`/rooms/:roomId`, getRoomController())
   router.get(`/rooms/:roomId/connect`, getRoomConnectController())
 
   // Images handling API
@@ -42,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+azure-web-pubsub/src/canvas/fonts.ts

@@ -0,0 +1,167 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+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+azure-web-pubsub/src/canvas/nodes/color-token/color-token.ts

@@ -0,0 +1,155 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+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+azure-web-pubsub/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
+  }
+}

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

@@ -0,0 +1,207 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { WeaveStoreStandalone } from '@inditextech/weave-store-standalone/server'
+import {
+  Weave,
+  WeaveStageNode,
+  WeaveLayerNode,
+  WeaveGroupNode,
+  WeaveRectangleNode,
+  WeaveEllipseNode,
+  WeaveLineNode,
+  WeaveTextNode,
+  WeaveImageNode,
+  WeaveVideoNode,
+  WeaveStarNode,
+  WeaveArrowNode,
+  WeaveRegularPolygonNode,
+  WeaveFrameNode,
+  WeaveStrokeNode,
+  // setupSkiaBackend,
+  setupCanvasBackend
+} from '@inditextech/weave-sdk/server'
+import { ColorTokenNode } from './nodes/color-token/color-token.js'
+import { isAbsoluteUrl, stripOrigin } from '../utils.js'
+import { ServiceConfig } from '../types.js'
+import {
+  // registerSkiaFonts,
+  registerCanvasFonts
+} from './fonts.js'
+
+export type RenderWeaveRoom = {
+  instance: Weave
+  destroy: () => void
+}
+
+export const renderWeaveRoom = (
+  config: ServiceConfig,
+  roomData: string
+): Promise<RenderWeaveRoom> => {
+  let weave: Weave | undefined = undefined
+
+  // eslint-disable-next-line no-async-promise-executor
+  return new Promise(async (resolve) => {
+    const destroyWeaveRoom = () => {
+      if (weave) {
+        weave.destroy()
+      }
+    }
+
+    // Setup Skia backend
+    // registerSkiaFonts();
+    // await setupSkiaBackend();
+
+    // Setup Canvas backend
+    registerCanvasFonts()
+    await setupCanvasBackend()
+
+    const store = new WeaveStoreStandalone(
+      {
+        roomData
+      },
+      {
+        getUser: () => {
+          return {
+            id: 'user-dummy',
+            name: 'User Dummy',
+            email: 'user@mail.com'
+          }
+        }
+      }
+    )
+
+    weave = new Weave(
+      {
+        store,
+        nodes: getNodes(config),
+        actions: [],
+        plugins: [],
+        fonts: [],
+        logger: {
+          level: 'info'
+        }
+      },
+      {
+        container: undefined,
+        width: 800,
+        height: 600
+      }
+    )
+
+    let roomLoaded = false
+
+    const checkIfRoomLoaded = () => {
+      if (!weave) {
+        return false
+      }
+
+      if (!weave.getStage()) {
+        return false
+      }
+
+      if (roomLoaded && weave.asyncElementsLoaded()) {
+        return true
+      }
+
+      return false
+    }
+
+    weave.addEventListener('onRoomLoaded', async (status: boolean) => {
+      if (!weave) {
+        return
+      }
+
+      if (!weave.getStage()) {
+        return false
+      }
+
+      if (status) {
+        roomLoaded = true
+      }
+
+      if (checkIfRoomLoaded()) {
+        resolve({ instance: weave, destroy: destroyWeaveRoom })
+      }
+    })
+
+    weave.addEventListener('onAsyncElementChange', () => {
+      if (!weave) {
+        return
+      }
+
+      if (!weave.getStage()) {
+        return false
+      }
+
+      if (checkIfRoomLoaded()) {
+        resolve({ instance: weave, destroy: destroyWeaveRoom })
+      }
+    })
+
+    weave.start()
+  })
+}
+
+const getNodes = (config: ServiceConfig) => {
+  return [
+    new WeaveStageNode(),
+    new WeaveLayerNode(),
+    new WeaveGroupNode(),
+    new WeaveRectangleNode(),
+    new WeaveEllipseNode(),
+    new WeaveLineNode(),
+    new WeaveStrokeNode(),
+    new WeaveTextNode(),
+    new WeaveImageNode({
+      config: {
+        urlTransformer: (url: string) => {
+          const isAbsolute = isAbsoluteUrl(url)
+
+          let relativeUrl = url
+          if (isAbsolute) {
+            relativeUrl = stripOrigin(url)
+          }
+
+          const transformedUrl = relativeUrl.replace('/weavebff', '')
+          return `http://localhost:${config.service.port}${transformedUrl}`
+        }
+      }
+    }),
+    new WeaveVideoNode({
+      config: {
+        urlTransformer: (url: string) => {
+          const isAbsolute = isAbsoluteUrl(url)
+
+          let relativeUrl = url
+          if (isAbsolute) {
+            relativeUrl = stripOrigin(url)
+          }
+
+          const transformedUrl = relativeUrl.replace('/weavebff', '')
+          return `http://localhost:${config.service.port}${transformedUrl}`
+        }
+      }
+    }),
+    new WeaveStarNode(),
+    new WeaveArrowNode(),
+    new WeaveRegularPolygonNode(),
+    new WeaveFrameNode({
+      config: {
+        fontFamily: "'Inter', sans-serif",
+        fontStyle: 'normal',
+        fontSize: 14,
+        borderColor: '#9E9994',
+        fontColor: '#757575',
+        titleMargin: 5,
+        transform: {
+          rotateEnabled: false,
+          resizeEnabled: false,
+          enabledAnchors: [] as string[]
+        }
+      }
+    }),
+    new ColorTokenNode()
+  ]
+}

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

@@ -1,7 +1,11 @@
 import path from 'path'
 import fs from 'fs/promises'
+import { fileURLToPath } from 'node:url'
 import { WeaveAzureWebPubsubServer } from '@inditextech/weave-store-azure-web-pubsub/server'
-import { createFolder, existsFolder } from '@/utils'
+import { createFolder, existsFolder } from '@/utils.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 const endpoint = process.env.WEAVE_AZURE_WEB_PUBSUB_ENDPOINT
 const key = process.env.WEAVE_AZURE_WEB_PUBSUB_KEY
@@ -23,9 +27,8 @@ export const getAzureWebPubsubServer = () => {
 
 export const setupStore = () => {
   azureWebPubsubServer = new WeaveAzureWebPubsubServer({
-    pubsubConfig: {
+    pubSubConfig: {
       endpoint,
-      key,
       hubName
     },
     fetchRoom: async (docName: string) => {
@@ -48,6 +51,8 @@ export const setupStore = () => {
       actualState: Uint8Array<ArrayBufferLike>
     ) => {
       try {
+        console.log(`Persisting room ${docName}...`)
+
         const roomsFolder = path.join(__dirname, 'rooms')
 
         if (!(await existsFolder(roomsFolder))) {
@@ -68,6 +73,7 @@ export const setupStore = () => {
         }
 
         const roomsFile = path.join(roomsFolder, docName)
+        console.log(`Persisting room ${roomsFile}...`)
         await fs.writeFile(roomsFile, actualState)
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
       } catch (_) {

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

@@ -17,6 +17,20 @@ export const getFileContents = async (
   }
 }
 
+export const existFile = async (filePath: string) => {
+  try {
+    const stats = await fs.stat(filePath)
+    return stats.isFile()
+  } catch (err) {
+    console.error(
+      `Error reading file ${filePath}: ${
+        err instanceof Error ? err.message : err
+      }`
+    )
+    return false
+  }
+}
+
 export const existsFolder = async (folderPath: string) => {
   try {
     const stats = await fs.stat(folderPath)
@@ -30,3 +44,12 @@ export const existsFolder = async (folderPath: string) => {
 export const createFolder = async (folderPath: string): Promise<void> => {
   await fs.mkdir(folderPath, { recursive: true })
 }
+
+export function isAbsoluteUrl(url: string): boolean {
+  return /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(url)
+}
+
+export function stripOrigin(url: string): string {
+  const parsedUrl = new URL(url)
+  return parsedUrl.pathname + parsedUrl.search + parsedUrl.hash
+}