change options of octopus-psd reader constructor

Author: alexspevak

packages/octopus-psd/examples/node/convert-debug.ts

@@ -1,10 +1,8 @@
 import path from 'path'
 
 import { displayPerf } from '@opendesign/octopus-common/dist/utils/console.js'
-import { timestamp } from '@opendesign/octopus-common/dist/utils/timestamp.js'
 import chalk from 'chalk'
 import dotenv from 'dotenv'
-import kebabCase from 'lodash/kebabCase.js'
 
 import { renderOctopus } from './utils/render.js'
 import { createConverter, DebugExporter, PSDFileReader } from '../../src/index-node.js'
@@ -31,9 +29,8 @@ async function convertDesign({
   filePath,
   shouldRender = process.env.SHOULD_RENDER === 'true',
 }: ConvertAllOptions): Promise<void> {
-  const designId = `${timestamp()}-${kebabCase(path.basename(filePath, '.psd'))}`
   const tempDir = new URL('../../../workdir', import.meta.url).pathname
-  const exporter = new DebugExporter({ tempDir, id: designId })
+  const exporter = new DebugExporter({ tempDir })
 
   exporter.on('octopus:component', async (component: ConvertedComponent) => {
     const status = component.error ? '❌' : '✅'
@@ -59,7 +56,7 @@ async function convertDesign({
     console.log(`\n${chalk.yellow(`Statistics:`)} file://${statistics}\n\n`)
   })
 
-  const reader = await PSDFileReader.withRenderer({ path: filePath, designId })
+  const reader = await PSDFileReader.withRenderer({ path: filePath })
   const sourceDesign = await reader.getSourceDesign()
   if (sourceDesign === null) {
     console.error('Creating SourceDesign Failed')

packages/octopus-psd/examples/node/convert-local.ts

@@ -12,6 +12,7 @@ async function convert() {
   const reader = await PSDFileReader.withRenderer({ path: filePath })
 
   const sourceDesign = await reader.getSourceDesign()
+
   if (sourceDesign === null) {
     console.error('Creating SourceDesign Failed')
     return

packages/octopus-psd/examples/web/index-api.html

@@ -12,14 +12,12 @@
     <script>
       window.addEventListener('DOMContentLoaded', async () => {
         const { createConverter, PSDFileReader, WebExporter } = OctopusPSD
-        const readerOptions = {
-          path: './smiley.psd',
-        }
-
         try {
+          const response = await fetch('./smiley.psd')
+          const file =new Uint8Array(await response.arrayBuffer())
           const converter = createConverter()
 
-          const reader = await PSDFileReader.withRenderer(readerOptions)
+          const reader = await PSDFileReader.withRenderer({file})
           const sourceDesign = await reader.getSourceDesign()
 
           if (sourceDesign === null) {

packages/octopus-psd/src/services/readers/node/index.ts

@@ -16,15 +16,14 @@ export type PSDFileReaderOptions = WithRendererOptions & {
 export type WithRendererOptions = {
   /** Path to the .psd design file. */
   path: string
-
-  /** Unique ID. If not passed, will be generated by UUIDv4 */
-  designId?: string
 }
 
 /**
  * Reader that converts Adobe Photoshop .psd file into `SourceDesign` object.
  */
 export class PSDFileReader extends PSDFileReaderCommon {
+  private _path: string
+
   static async withRenderer(options: WithRendererOptions): Promise<PSDFileReader> {
     if (!PSDFileReaderCommon._renderer) {
       PSDFileReaderCommon._renderer = await getRenderer()
@@ -39,8 +38,13 @@ export class PSDFileReader extends PSDFileReaderCommon {
    * @param {PSDFileReaderOptions} options
    */
   constructor(options: PSDFileReaderOptions) {
-    const promisedData = readFile(options.path)
-    super({ ...options, promisedData })
+    super({ ...options })
+    this._path = options.path
+  }
+
+  protected async _getSourceData(): Promise<Uint8Array> {
+    const buffer = await readFile(this._path)
+    return new Uint8Array(buffer)
   }
 
   protected async _convertImage({ width, height, buff, name, iccProfile }: ConvertImageOptions): Promise<void> {

packages/octopus-psd/src/services/readers/psd-file-reader-common.ts

@@ -41,12 +41,8 @@ type ProcessedImage = {
 
 export type PSDFileReaderOptions = {
   /** Path to the .psd design file. */
-  path: string
+  path?: string
 
-  /**File read to buffer */
-  promisedData: Promise<Uint8Array>
-  /** Unique ID. If not passed, will be generated by UUIDv4 */
-  designId?: string
   /** wasm image processing tool */
   renderer?: Renderer
 }
@@ -55,13 +51,11 @@ export type PSDFileReaderOptions = {
  * Reader that converts Adobe Photoshop .psd file into `SourceDesign` object.
  */
 export abstract class PSDFileReaderCommon {
-  private _promisedData: Promise<Uint8Array>
-  protected _path: string
   private _designId: string
   protected _images: ProcessedImage[] = []
   protected _renderer?: Renderer
   private _uniqueId: () => string
-  private _promisePsd: Promise<Psd | null>
+  private _psd: Psd
 
   static _renderer: Renderer
   static SHAPE_LAYER_KEYS = [
@@ -101,12 +95,9 @@ export abstract class PSDFileReaderCommon {
    * @param {PSDFileReaderOptions} options
    */
   constructor(options: PSDFileReaderOptions) {
-    this._promisedData = options.promisedData
     this._uniqueId = uniqueIdFactory(1000000)
-    this._path = options.path
     this._renderer = options.renderer
-    this._designId = options.designId || uuidv4()
-    this._promisePsd = this._getPsd()
+    this._designId = uuidv4()
   }
 
   /**
@@ -241,8 +232,14 @@ export abstract class PSDFileReaderCommon {
     })
   }
 
+  protected abstract _getSourceData(): Promise<Uint8Array>
+
   private async _getPsd(): Promise<Psd> {
-    const data = await this._promisedData
+    if (this._psd) {
+      return this._psd
+    }
+
+    const data = await this._getSourceData()
 
     const psd = Psd.parse(data.buffer)
     this._assignMissingLayerIds(psd)
@@ -279,6 +276,8 @@ export abstract class PSDFileReaderCommon {
 
     psdCopy.children.push(child as unknown as Layer)
 
+    this._psd = psdCopy
+
     return psdCopy
   }
 
@@ -300,7 +299,7 @@ export abstract class PSDFileReaderCommon {
    * Returns `FileMeta` with list of Artboards and designName
    */
   async readFileMeta(): Promise<FileMeta | null> {
-    const psd = await this._promisePsd
+    const psd = await this._getPsd()
     if (!psd) {
       return null
     }
@@ -326,7 +325,7 @@ export abstract class PSDFileReaderCommon {
    */
   async getSourceDesign(componentIds?: number[]): Promise<SourceDesign | null> {
     const designId = this.designId
-    const psd = await this._promisePsd
+    const psd = await this._getPsd()
 
     if (!psd) return null
 

packages/octopus-psd/src/services/readers/web/index.ts

@@ -12,19 +12,15 @@ export type PSDFileReaderOptions = WithRendererOptions & {
 
 export type WithRendererOptions = {
   /** Path to the .psd design file. */
-  path: string
-
-  /** Unique ID. If not passed, will be generated by UUIDv4 */
-  designId?: string
+  file: Uint8Array
 }
 
 export class PSDFileReader extends PSDFileReaderCommon {
-  static async readFile(filePath: string): Promise<Uint8Array> {
-    const response = await fetch(filePath)
-    const buffer = await response.arrayBuffer()
+  private _file: Uint8Array
 
-    return new Uint8Array(buffer)
-  }
+  // static async readFile(filePath: string): Promise<Uint8Array> {
+
+  // }
 
   static async withRenderer(options: WithRendererOptions): Promise<PSDFileReaderCommon> {
     if (!PSDFileReaderCommon._renderer) {
@@ -40,9 +36,12 @@ export class PSDFileReader extends PSDFileReaderCommon {
    * @param {PSDFileReaderOptions} options
    */
   constructor(options: PSDFileReaderOptions) {
-    const promisedData = PSDFileReader.readFile(options.path)
+    super({ ...options })
+    this._file = options.file
+  }
 
-    super({ ...options, promisedData })
+  protected async _getSourceData(): Promise<Uint8Array> {
+    return Promise.resolve(this._file)
   }
 
   protected async _convertImage({ width, height, buff, name, iccProfile }: ConvertImageOptions): Promise<void> {