feat(vectorizer): Headless ready and move into worker for demo purposes

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

packages/vectorizer/esbuild/config.mjs

@@ -14,17 +14,18 @@ console.log(
 
 const configs = [
   {
-    entryPoints: ['src/index.ts'],
+    entryPoints: ['src/index.ts', "src/worker.ts"],
     define: {
       PLUGIN_VERSION: `"${packageJson.version}"`
     },
     minify: true,
     bundle: true,
     sourcemap: true,
-    external: ['@cesdk/cesdk-js', 'lodash', "node:path", "fs", "url"],
-    platform: 'browser',
+    external: ['@cesdk/cesdk-js'],
+    platform: 'node',
     format: 'esm',
-    outfile: 'dist/index.mjs',
+    outdir: 'dist',
+    outExtension: { '.js': '.mjs' },
     plugins: [
       {
         name: 'reporter',

packages/vectorizer/package.json

@@ -64,7 +64,7 @@
     "@cesdk/cesdk-js": "~1.20.0"
   },
   "dependencies": {
-    "@imgly/vectorizer": "^0.1.0-rc4",
+    "@imgly/vectorizer": "../vectorizer/packages/js",
     "lodash": "^4.17.21"
   }
 }

packages/vectorizer/src/processVectorization.ts → packages/vectorizer/src/actions.ts

@@ -1,5 +1,4 @@
 import type CreativeEditorSDK from '@cesdk/cesdk-js';
-import { imageToSvg } from '@imgly/vectorizer';
 
 import {
   getPluginMetadata,
@@ -8,41 +7,30 @@ import {
   setPluginMetadata
 } from './utils';
 
-class Scheduler<T> {
-  #queue?: Promise<T> = undefined
-
-  async schedule(task: () => Promise<T>): Promise<T> {
-    if (this.#queue === undefined) {
-      this.#queue = task()
-    } else {
-      this.#queue = this.#queue.then(async () => {
-        return await task()
-      })
-    }
-    return this.#queue
-  }
-}
-
-let scheduler = new Scheduler<any>()
-
+import { PLUGIN_FEATURE_ID } from './constants';
 
+import { runInWorker } from './worker.shared';
 /**
  * Apply the vectorization process to the image.
  */
-async function vectorize(uri: string): Promise<Blob> {
-  const blob = await fetch(uri).then((res) => res.blob())
-  const outBlob = await scheduler.schedule(async () => await imageToSvg(blob));
-  return outBlob;
-}
 
 /**
  * Triggers the vectiorize process.
  */
-export async function processVectorization(
+export async function vectorizeAction(
   cesdk: CreativeEditorSDK,
-  blockId: number
+  params: { blockId: number }
 ) {
-  const blockApi = cesdk.engine.block;
+  const {blockId} = params;
+
+
+  const isFeatureEnabled = cesdk.feature.unstable_isEnabled(PLUGIN_FEATURE_ID, {
+    engine: cesdk.engine
+  })
+  if (!isFeatureEnabled) return;
+  const uploader = cesdk.unstable_upload.bind(cesdk)
+  const engine = cesdk.engine; // the only function that needs the ui is the upload function
+  const blockApi = engine.block;
   if (!blockApi.hasFill(blockId))
     throw new Error('Block has no fill to vectorize');
 
@@ -79,15 +67,14 @@ export async function processVectorization(
 
   try {
     // Clear values in the engine to trigger the loading spinner
-    +9
     blockApi.setString(fillId, 'fill/image/imageFileURI', '');
     blockApi.setSourceSet(fillId, 'fill/image/sourceSet', []);
     // ensure we show the last image while processsing. Some images don't have the preview set
     if (initialPreviewFileURI === undefined || initialPreviewFileURI === '') {
       blockApi.setString(fillId, 'fill/image/previewFileURI', uriToProcess);
     }
-    const metadata = getPluginMetadata(cesdk, blockId);
-    setPluginMetadata(cesdk, blockId, {
+    const metadata = getPluginMetadata(engine, blockId);
+    setPluginMetadata(engine, blockId, {
       ...metadata,
       version: PLUGIN_VERSION,
       initialSourceSet,
@@ -97,22 +84,19 @@ export async function processVectorization(
       status: 'PROCESSING'
     });
 
-    // Creating the mask from the highest resolution image
-    const vectorized = await vectorize(uriToProcess);
+    const vectorized: Blob = await runInWorker(uriToProcess)
 
-    // Check for externally changed state while we were uploading and
-    // do not proceed if the state was reset.
     if (
-      getPluginMetadata(cesdk, blockId).status !== 'PROCESSING' ||
-      !isMetadataConsistent(cesdk, blockId)
+      getPluginMetadata(engine, blockId).status !== 'PROCESSING' ||
+      !isMetadataConsistent(engine, blockId)
     )
       return;
 
     const pathname = new URL(uriToProcess).pathname;
     const parts = pathname.split('/');
     const filename = parts[parts.length - 1];
 
-    const uploadedAssets = await cesdk.unstable_upload(
+    const uploadedAssets = await uploader(
       new File([vectorized], filename, { type: vectorized.type }),
       () => {
         // TODO Delegate process to UI component
@@ -122,8 +106,8 @@ export async function processVectorization(
     // Check for externally changed state while we were uploading and
     // do not proceed if the state was reset.
     if (
-      getPluginMetadata(cesdk, blockId).status !== 'PROCESSING' ||
-      !isMetadataConsistent(cesdk, blockId)
+      getPluginMetadata(engine, blockId).status !== 'PROCESSING' ||
+      !isMetadataConsistent(engine, blockId)
     )
       return;
 
@@ -132,21 +116,21 @@ export async function processVectorization(
       throw new Error('Could not upload vectorized image');
     }
 
-    setPluginMetadata(cesdk, blockId, {
+    setPluginMetadata(engine, blockId, {
       version: PLUGIN_VERSION,
       initialSourceSet,
       initialImageFileURI,
       blockId,
       fillId,
-      status: 'PROCESSED_TOGGLE_ON',
+      status: 'PROCESSED',
       processedAsset: url
     });
     blockApi.setString(fillId, 'fill/image/imageFileURI', url);
     // Finally, create an undo step
-    cesdk.engine.editor.addUndoStep();
+    engine.editor.addUndoStep();
   } catch (error) {
-    if (cesdk.engine.block.isValid(blockId)) {
-      setPluginMetadata(cesdk, blockId, {
+    if (engine.block.isValid(blockId)) {
+      setPluginMetadata(engine, blockId, {
         version: PLUGIN_VERSION,
         initialSourceSet,
         initialImageFileURI,
@@ -155,7 +139,7 @@ export async function processVectorization(
         status: 'ERROR'
       });
 
-      recoverInitialImageData(cesdk, blockId);
+      recoverInitialImageData(engine, blockId);
     }
     // eslint-disable-next-line no-console
     console.error(error);

packages/vectorizer/src/constants.ts

@@ -1,10 +1,10 @@
 export const PLUGIN_ID = '@imgly/plugin-vectorizer-web';
-export const CANVAS_MENU_COMPONENT_ID = `${PLUGIN_ID}.canvasMenu`;
-export const CANVAS_MENU_COMPONENT_BUTTON_ID = `${CANVAS_MENU_COMPONENT_ID}.button`;
-export const FEATURE_ID = `${PLUGIN_ID}.feature`;
-export const I18N_ID = "plugin.vectorizer.vectorize"
-export const I18N_TRANSLATIONS = {
-    en: { [I18N_ID]: 'Vectorize' },
-    de: { [I18N_ID]: 'Vektorisieren' }
+export const PLUGIN_CANVAS_MENU_COMPONENT_ID = `${PLUGIN_ID}.canvasMenu`;
+export const PLUGIN_CANVAS_MENU_COMPONENT_BUTTON_ID = `${PLUGIN_CANVAS_MENU_COMPONENT_ID}.button`;
+export const PLUGIN_FEATURE_ID = `${PLUGIN_ID}`;
+export const PLUGIN_ACTION_VECTORIZE_LABEL = `plugin.${PLUGIN_ID}.vectorize`
+export const PLUGIN_I18N_TRANSLATIONS = {
+    en: { [PLUGIN_ACTION_VECTORIZE_LABEL]: 'Vectorize' },
+    de: { [PLUGIN_ACTION_VECTORIZE_LABEL]: 'Vektorisieren' }
 }
-export const ICON = '@imgly/icons/Vectorize'
+export const PLUGIN_ICON = '@imgly/icons/Vectorize'