refactor xd: create common and artboard filtering

Author: alexspevak

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

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

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

@@ -12,18 +12,22 @@ import type { SourceImage } from '../../entities/source/source-design.js'
 import type { Renderer } from '@opendesign/image-icc-profile-converter'
 import type { NodeChild, Layer, Group } from '@webtoon/psd-ts'
 
-type NamedArtboard = {
-  id: number
+type NamedPagedId = {
+  id: string
   name: string
 }
 
-type FileMeta = {
+export type DesignMeta = {
   designName: string
   content: {
-    topLevelArtboards: NamedArtboard[]
+    topLevelArtboards: NamedPagedId[]
+    localComponents: NamedPagedId[]
+    remoteComponents: {
+      name: string
+      id: string
+    }[]
   }
 }
-
 export type ConvertImageOptions = {
   buff: Uint8ClampedArray | Uint8Array
   width: number
@@ -296,9 +300,9 @@ export abstract class PSDFileReaderCommon {
   }
 
   /**
-   * Returns `FileMeta` with list of Artboards and designName
+   * Returns `DesignMeta` with list of Artboards and designName
    */
-  async readFileMeta(): Promise<FileMeta | null> {
+  async getDesignMeta(): Promise<DesignMeta | null> {
     const psd = await this._getPsd()
     if (!psd) {
       return null
@@ -307,14 +311,16 @@ export abstract class PSDFileReaderCommon {
     return {
       designName: psd.name,
       content: {
-        topLevelArtboards: psd.children.reduce<NamedArtboard[]>((namedArtboards, child) => {
+        topLevelArtboards: psd.children.reduce<NamedPagedId[]>((namedArtboards, child) => {
           if (isArtboard(child)) {
-            const namedArtboard = { name: child.name, id: child.additionalProperties?.lyid?.value as number }
+            const namedArtboard = { name: child.name, id: String(child.additionalProperties?.lyid?.value) }
             namedArtboards.push(namedArtboard)
           }
 
           return namedArtboards
         }, []),
+        localComponents: [],
+        remoteComponents: [],
       },
     }
   }

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

@@ -1,4 +1,3 @@
-import fs from 'fs/promises'
 import path from 'path'
 
 import { displayPerf } from '@opendesign/octopus-common/dist/utils/console.js'
@@ -74,9 +73,10 @@ ${images.map((image) => `    file://${image}`).join('\n')}`)
     file://${manifest}`)
   })
 
-  const file = await fs.readFile(options.filename)
-  const reader = new XDFileReader({ file, storeAssetsOnFs: true })
-  const sourceDesign = await reader.sourceDesign
+  const reader = new XDFileReader({ path: options.filename, storeAssetsOnFs: true })
+  const sourceDesign = await reader.getSourceDesign({
+    ids: ['43f6318e-2c94-4764-8849-f59b8e6b77a4', 'd7aff3d8-8d6d-462a-92dc-73edc53cbf20'],
+  })
   const converter = createConverter({ sourceDesign })
   converter.convertDesign({ exporter })
   await exporter.completed()

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

@@ -1,4 +1,3 @@
-import fs from 'fs/promises'
 import os from 'os'
 import path from 'path'
 
@@ -9,9 +8,8 @@ import { createConverter, LocalExporter, XDFileReader } from '../../src/index-no
 async function convert() {
   const [filename] = process.argv.slice(2)
   const testDir = path.join(os.tmpdir(), uuidv4())
-  const file = await fs.readFile(filename)
-  const reader = new XDFileReader({ file, storeAssetsOnFs: true })
-  const sourceDesign = await reader.sourceDesign
+  const reader = new XDFileReader({ path: filename, storeAssetsOnFs: true })
+  const sourceDesign = await reader.getSourceDesign()
   const converter = createConverter({ sourceDesign })
   const exporter = new LocalExporter({ path: testDir })
   await converter.convertDesign({ exporter })

packages/octopus-xd/src/entities/source/source-design.ts

@@ -7,35 +7,8 @@ import { SourceResources } from './source-resources.js'
 import { Expander } from '../../services/conversion/expander/index.js'
 import { PasteboardNormalizer } from '../../services/conversion/pasteboard-normalizer/index.js'
 
-import type { RawSourceInteractions } from './source-interactions.js'
-import type { RawSourceManifest } from './source-manifest.js'
-import type { RawArtboard, RawArtboardLike, RawPasteboard } from '../../typings/source/index.js'
-import type { RawResources } from '../../typings/source/resources.js'
-
-type SourceDesignOptions = {
-  manifest: {
-    path: string
-    rawValue: RawSourceManifest
-  }
-  resources: {
-    path: string
-    rawValue: RawResources
-  }
-  interactions: {
-    path: string
-    rawValue: RawSourceInteractions
-  }
-  images: {
-    path: string
-    getImageData: GetImageData
-  }[]
-  artboards: {
-    path: string
-    rawValue: RawArtboardLike
-  }[]
-}
-
-export type GetImageData = () => Promise<Uint8Array>
+import type { SourceEntry, GetImageData } from './source-entry.js'
+import type { RawArtboard, RawPasteboard } from '../../typings/source/index.js'
 
 export class SourceDesign {
   private _manifest: SourceManifest
@@ -44,11 +17,9 @@ export class SourceDesign {
   private _artboards: SourceArtboard[]
   private _images: { path: string; getImageData: GetImageData }[]
 
-  constructor(options: SourceDesignOptions) {
+  constructor(options: SourceEntry) {
     this._manifest = new SourceManifest({
-      path: options.manifest.path,
       rawValue: options.manifest.rawValue,
-      design: this,
     })
     this._resources = new SourceResources({
       path: options.resources.path,

packages/octopus-xd/src/entities/source/source-entry.ts

@@ -0,0 +1,29 @@
+import type { RawSourceInteractions } from './source-interactions.js'
+import type { RawSourceManifest } from './source-manifest.js'
+import type { RawArtboardLike } from '../../typings/source/artboard.js'
+import type { RawResources } from '../../typings/source/resources.js'
+
+export type SourceEntry = {
+  manifest: {
+    path: string
+    rawValue: RawSourceManifest
+  }
+  resources: {
+    path: string
+    rawValue: RawResources
+  }
+  interactions: {
+    path: string
+    rawValue: RawSourceInteractions
+  }
+  images: {
+    path: string
+    getImageData: GetImageData
+  }[]
+  artboards: {
+    path: string
+    rawValue: RawArtboardLike
+  }[]
+}
+
+export type GetImageData = () => Promise<Uint8Array>

packages/octopus-xd/src/entities/source/source-manifest.ts

@@ -1,5 +1,3 @@
-import type { SourceDesign } from './source-design.js'
-
 export type RawGeneralEntry = {
   id: string
   name: string
@@ -23,19 +21,13 @@ export type RawSourceManifest = {
 
 type SourceManifestOptions = {
   rawValue: RawSourceManifest
-  path: string
-  design: SourceDesign
 }
 
 export class SourceManifest {
   protected _rawValue: RawSourceManifest
-  private _path: string
-  private _design: SourceDesign
 
   constructor(options: SourceManifestOptions) {
-    this._design = options.design
     this._rawValue = options.rawValue
-    this._path = options.path
   }
 
   get raw(): RawSourceManifest {

packages/octopus-xd/src/octopus-xd-converter.ts

@@ -10,7 +10,8 @@ import { pathBasename } from './utils/fs-path.js'
 import { readPackageMeta } from './utils/read-pkg-meta.js'
 
 import type { SourceArtboard } from './entities/source/source-artboard.js'
-import type { GetImageData, SourceDesign } from './entities/source/source-design.js'
+import type { SourceDesign } from './entities/source/source-design.js'
+import type { GetImageData } from './entities/source/source-entry.js'
 import type { Exporter } from './services/conversion/exporter/index.js'
 import type { NodeFactories, WebFactories } from './services/general/platforms/index.js'
 import type { Logger } from './typings/index.js'