chore: Build working

examples/web/package.json

@@ -5,10 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite --clearScreen=false",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@cesdk/cesdk-js": "^1.20.0",
+    "@imgly/plugin-background-removal-web": "*",
+    "@imgly/plugin-vectorizer-web": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -22,6 +25,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.1.1"
   }
 }

examples/web/src/App.tsx

@@ -1,32 +1,44 @@
 import { useRef } from "react";
-import CreativeEditorSDK from "@cesdk/cesdk-js";
+import CreativeEditorSDK, { Configuration } from "@cesdk/cesdk-js";
 
 import addPlugins from "./addPlugins";
 
 function App() {
   const cesdk = useRef<CreativeEditorSDK>();
+  const config: Configuration = {
+    license: import.meta.env.VITE_CESDK_LICENSE_KEY,
+    callbacks: { onUpload: "local" },
+    // devMode: true,
+    theme: "dark",
+    role: 'Creator',
+    ui:{ 
+      elements: {
+        view: "default"
+      }
+    }
+  }
+
   return (
     <div
       style={{ width: "100vw", height: "100vh" }}
       ref={(domElement) => {
         if (domElement != null) {
-          CreativeEditorSDK.create(domElement, {
-            license: import.meta.env.VITE_CESDK_LICENSE_KEY,
-            callbacks: { onUpload: "local" },
-          }).then(async (instance) => {
-            // @ts-ignore
-            window.cesdk = instance;
-            cesdk.current = instance;
+          CreativeEditorSDK
+            .create(domElement, config)
+            .then(async (instance) => {
+              // @ts-ignore
+              window.cesdk = instance;
+              cesdk.current = instance;
 
-            // Do something with the instance of CreativeEditor SDK, for example:
-            // Populate the asset library with default / demo asset sources.
-            await Promise.all([
-              instance.addDefaultAssetSources(),
-              instance.addDemoAssetSources({ sceneMode: "Design" }),
-              addPlugins(instance),
-            ]);
-            await instance.createDesignScene();
-          });
+              // Do something with the instance of CreativeEditor SDK, for example:
+              // Populate the asset library with default / demo asset sources.
+              await Promise.all([
+                instance.addDefaultAssetSources(),
+                instance.addDemoAssetSources({ sceneMode: "Design" }),
+                addPlugins(instance),
+              ]);
+              await instance.createDesignScene();
+            });
         } else if (cesdk.current != null) {
           cesdk.current.dispose();
         }

examples/web/vite.config.ts

@@ -1,13 +1,24 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
+import { createLogger } from "./vite/logger";
+
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  build: {
+    chunkSizeWarningLimit: 4096
+  },
+  worker: {
+    format: "es" // Default was "iife" but then import.meta.url for importing worker does not worker
+  },
   server: {
     headers: {
       "Cross-Origin-Opener-Policy": "same-origin",
       "Cross-Origin-Embedder-Policy": "require-corp",
     },
   },
+  customLogger: createLogger()
 });
+

examples/web/vite/logger.js

@@ -0,0 +1,14 @@
+import { createLogger as createViteLogger } from "vite";
+
+
+export const createLogger = () => {
+    // We create a custom logger in order to filter messages that are persistent 
+    const logger = createViteLogger();
+    const originalWarning = logger.warn;
+
+    logger.warn = (msg, options) => {
+        if (msg.includes('[plugin:vite:resolve]')) return;
+        originalWarning(msg, options);
+    };
+    return logger;
+}

package.json

@@ -3,8 +3,8 @@
   "name": "imgly-plugins",
   "version": "0.0.0",
   "workspaces": [
-    "packages/*",
-    "examples/*"
+    "examples/*",
+    "packages/*"
   ],
   "scripts": {
     "build": "turbo run build --force",

packages/background-removal/esbuild/config.mjs

@@ -7,6 +7,12 @@ const packageJson = JSON.parse(
   await readFile(new URL('../package.json', import.meta.url))
 );
 
+const dependencies = Object.keys(packageJson.dependencies)
+const peerDependencies = Object.keys(packageJson.peerDependencies)
+
+const externals = [...dependencies, ...peerDependencies]
+
+
 console.log(
   chalk.yellow('Building version: '),
   chalk.green(packageJson.version)
@@ -21,8 +27,8 @@ const configs = [
     minify: true,
     bundle: true,
     sourcemap: true,
-    external: ['@imgly/background-removal', '@cesdk/cesdk-js', 'lodash'],
-    platform: 'browser',
+    external: externals,
+    platform: 'node',
     format: 'esm',
     outfile: 'dist/index.mjs',
     plugins: [

packages/vectorizer/esbuild/config.mjs

@@ -7,6 +7,11 @@ const packageJson = JSON.parse(
   await readFile(new URL('../package.json', import.meta.url))
 );
 
+
+const dependencies = Object.keys(packageJson.dependencies)
+const peerDependencies = Object.keys(packageJson.peerDependencies)
+const externals = [...dependencies, ...peerDependencies]
+
 console.log(
   chalk.yellow('Building version: '),
   chalk.green(packageJson.version)
@@ -21,7 +26,7 @@ const configs = [
     minify: true,
     bundle: true,
     sourcemap: true,
-    external: ['@cesdk/cesdk-js'],
+    external: externals,
     platform: 'node',
     format: 'esm',
     outdir: 'dist',

packages/vectorizer/package.json

@@ -23,11 +23,11 @@
   },
   "source": "./src/index.ts",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "types": "./types/index.d.ts"
     }
   },
   "homepage": "https://img.ly/products/creative-sdk",
@@ -36,15 +36,16 @@
     "README.md",
     "CHANGELOG.md",
     "dist/",
+    "types/",
     "bin/"
   ],
   "scripts": {
     "start": "npm run watch",
-    "clean": "npx rimraf dist",
-    "build": "npm run clean && node scripts/build.mjs && yarn run types:create",
-    "dev": "npm run clean && node scripts/watch.mjs",
-    "publish:latest": "npm run build && npm publish --tag latest --access public",
-    "publish:next": "npm run build && npm publish --tag next --access public",
+    "clean": "npx rimraf dist && npx rimraf types",
+    "build": "node scripts/build.mjs && yarn run types:create",
+    "dev": "node scripts/watch.mjs",
+    "publish:latest": "npm run clean && npm run build && npm publish --tag latest --access public",
+    "publish:next": "npm run clean && npm run build && npm publish --tag next --access public",
     "check:all": "concurrently -n lint,type,pretty \"yarn check:lint\" \"yarn check:type\" \"yarn check:pretty\"",
     "check:lint": "eslint --max-warnings 0 './src/**/*.{ts,tsx}'",
     "check:pretty": "prettier --list-different './src/**/*.{ts,tsx}'",

packages/vectorizer/src/actions.ts

@@ -9,6 +9,7 @@ import {
 } from './utils';
 
 import { runInWorker } from './worker.shared';
+import { createVectorPathBlocks } from './cesdk+utils';
 /**
  * Apply the vectorization process to the image.
  */
@@ -18,13 +19,13 @@ import { runInWorker } from './worker.shared';
  */
 export async function vectorizeAction(
   cesdk: CreativeEditorSDK,
-  params: { blockId: number } 
+  params: { blockId: number }
 ) {
   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;
 
-  let { blockId } = params?? {};
+  let { blockId } = params ?? {};
   if (blockId === undefined) {
     const selected = engine.block.findAllSelected()
     if (selected.length !== 1) {
@@ -99,41 +100,79 @@ export async function vectorizeAction(
     )
       return;
 
-    const pathname = new URL(uriToProcess).pathname;
-    const parts = pathname.split('/');
-    const filename = parts[parts.length - 1];
 
-    const uploadedAssets = await uploader(
-      new File([vectorized], filename, { type: vectorized.type }),
-      () => {
-        // TODO Delegate process to UI component
+    if (vectorized.type.length === 0 || vectorized.type === 'image/svg+xml') {
+      const pathname = new URL(uriToProcess).pathname;
+      const parts = pathname.split('/');
+      const filename = parts[parts.length - 1];
+
+      const uploadedAssets = await uploader(
+        new File([vectorized], filename, { type: vectorized.type }),
+        () => {
+          // TODO Delegate process to UI component
+        }
+      );
+
+      // Check for externally changed state while we were uploading and
+      // do not proceed if the state was reset.
+      if (
+        getPluginMetadata(engine, blockId).status !== 'PROCESSING' ||
+        !isMetadataConsistent(engine, blockId)
+      )
+        return;
+
+      const url = uploadedAssets.meta?.uri;;
+      if (url == null) {
+        throw new Error('Could not upload vectorized image');
       }
-    );
 
-    // Check for externally changed state while we were uploading and
-    // do not proceed if the state was reset.
-    if (
-      getPluginMetadata(engine, blockId).status !== 'PROCESSING' ||
-      !isMetadataConsistent(engine, blockId)
-    )
-      return;
+      setPluginMetadata(engine, blockId, {
+        version: PLUGIN_VERSION,
+        initialSourceSet,
+        initialImageFileURI,
+        blockId,
+        fillId,
+        status: 'PROCESSED',
+        // processedAsset: url
+      });
 
-    const url = uploadedAssets.meta?.uri;;
-    if (url == null) {
-      throw new Error('Could not upload vectorized image');
-    }
+      blockApi.setString(fillId, 'fill/image/imageFileURI', url);
+    } else if (vectorized.type === 'application/json') {
+      const json = await vectorized.text()
+      const blocks = JSON.parse(json)
+      const groupId = createVectorPathBlocks(engine, blocks)
+      const parentId = engine.block.getParent(blockId)!
+      engine.block.appendChild(parentId, groupId);
+
+
+      const origWidth = engine.block.getFrameWidth(blockId)
+      const origHeight = engine.block.getFrameHeight(blockId)
+      const origRotation = engine.block.getRotation(blockId)
+      const origX = engine.block.getPositionX(blockId)
+      const origY = engine.block.getPositionY(blockId)
+      const groupWidth = engine.block.getFrameWidth(groupId)
+      const groupHeight = engine.block.getFrameHeight(groupId)
+      engine.block.setPositionX(groupId, origX)
+      engine.block.setPositionY(groupId, origY)
+      engine.block.setRotation(groupId, origRotation)
+      engine.block.scale(groupId, origWidth / groupWidth)
+      //remove original block
+      engine.block.destroy(blockId)
+
+      // must be assigned to a scene to work... why?
+
+
+      blockApi.setString(fillId, 'fill/image/imageFileURI', initialImageFileURI);
 
-    setPluginMetadata(engine, blockId, {
-      version: PLUGIN_VERSION,
-      initialSourceSet,
-      initialImageFileURI,
-      blockId,
-      fillId,
-      status: 'PROCESSED',
-      processedAsset: url
-    });
-
-    blockApi.setString(fillId, 'fill/image/imageFileURI', url);
+      setPluginMetadata(engine, blockId, {
+        version: PLUGIN_VERSION,
+        initialSourceSet,
+        initialImageFileURI,
+        blockId,
+        fillId,
+        status: 'PROCESSED',
+      });
+    }
     // Finally, create an undo step
     engine.editor.addUndoStep();
 

packages/vectorizer/src/cesdk+utils.ts

@@ -0,0 +1,37 @@
+import { CreativeEngine } from "@cesdk/cesdk-js";
+
+export const createVectorPathBlocks = (engine: CreativeEngine, blocks: any[]) => {
+    const blockIds = blocks.map((block: any) => {
+        const id = createVectorPathBlock(
+            engine, block
+        )
+
+        return id
+    })
+
+    return engine.block.group(blockIds);
+}
+
+
+export const createVectorPathBlock = (engine: CreativeEngine, block: any) => {
+
+    const path = block.shape.path
+    const color = block.fill.color
+    const blockId = engine.block.create("//ly.img.ubq/graphic");
+    engine.block.setKind(blockId, "shape");
+    const shape = engine.block.createShape("//ly.img.ubq/shape/vector_path");
+    engine.block.setShape(blockId, shape);
+
+    engine.block.setString(shape, "vector_path/path", path);
+    engine.block.setFloat(shape, "vector_path/width", block.transform.width);
+    engine.block.setFloat(shape, "vector_path/height", block.transform.height);
+
+    const fill = engine.block.createFill("color");
+    engine.block.setColor(fill, "fill/color/value", { r: color[0], g: color[1], b: color[2], a: color[3] });
+    engine.block.setFill(blockId, fill);
+    engine.block.setFloat(blockId, "width", block.transform.width);
+    engine.block.setFloat(blockId, "height", block.transform.height);
+    engine.block.setPositionX(blockId, block.transform.x)
+    engine.block.setPositionY(blockId, block.transform.y)
+    return blockId;
+}

packages/vectorizer/src/manifest.ts

@@ -4,7 +4,6 @@ export const PLUGIN_CANVAS_MENU_COMPONENT_BUTTON_ID = `${PLUGIN_CANVAS_MENU_COMP
 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' }
+    en: { [PLUGIN_ACTION_VECTORIZE_LABEL]: 'Turn into Vector' }
 }
 export const PLUGIN_ICON = '@imgly/icons/Vectorize'