Plugin Release for CE.SDK 1.32 (#25)

* Bump version to rc.1 of the cesdk 1.32 release * Use 1.32.0-rc.1 and use stabilze APIs * Bump background removal and vectorizer to 1.0.0 * Add progress to button * Handle buffer input from an archive * Prettify * Bump minor versions of remote asset and cutout plugin * Update @imgly/plugin-vectorizer-web to 1.0.0-rc.1 * Reduce THRESHOLD to 5 only allow the simplest vectors to be groups * Update rc.2 * Bump to "^1.32.0" * Update to "@imgly/vectorizer": "1.0.0" * Fix Cutout Readme Quickstart * Add cutout dock entry to example app * Bump cutout library version --------- Co-authored-by: Mirko Budszuhn <[email protected]>
imgly · Aug 12, 2024 · f2a2d01 · f2a2d01
1 parent 5021cc7
commit f2a2d01
Show file tree

Hide file tree

Showing 28 changed files with 224 additions and 203 deletions.
diff --git a/examples/web/package.json b/examples/web/package.json
@@ -7,13 +7,14 @@
     "build": "tsc && vite build --force",
     "clean": "npx rimraf dist",
     "purge": "npx rimraf node_modules",
-    "dev": "vite --clearScreen=false --force"
+    "dev": "vite --clearScreen=false --force",
+    "check:types": "tsc --noEmit"
   },
   "dependencies": {
     "@imgly/plugin-background-removal-web": "*",
     "@imgly/plugin-cutout-library-web": "*",
     "@imgly/plugin-remote-asset-source-web": "*",
-    "@cesdk/cesdk-js": "^1.26.0",
+    "@cesdk/cesdk-js": "^1.32.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/web/src/App.tsx b/examples/web/src/App.tsx
@@ -1,7 +1,6 @@
 import CreativeEditorSDK from '@cesdk/cesdk-js';
-import { getCutoutLibraryInsertEntry } from '@imgly/plugin-cutout-library-web';
 import { useRef } from 'react';
-import addPlugins, { prepareAssetEntries } from './addPlugins';
+import addPlugins from './addPlugins';
 
 function App() {
   const cesdk = useRef<CreativeEditorSDK>();
@@ -13,31 +12,7 @@ function App() {
           CreativeEditorSDK.create(domElement, {
             license: import.meta.env.VITE_CESDK_LICENSE_KEY,
             userId: 'plugins-vercel',
-            callbacks: { onUpload: 'local' },
-            ui: {
-              elements: {
-                libraries: {
-                  insert: {
-                    entries: (defaultEntries) => {
-                      if (!cesdk.current?.engine.asset) return [];
-
-                      prepareAssetEntries(
-                        defaultEntries,
-                        cesdk.current!.engine
-                      );
-                      return [...defaultEntries, getCutoutLibraryInsertEntry()];
-                    }
-                  },
-                  replace: {
-                    entries: (d) => {
-                      if (!cesdk.current) return [];
-                      return prepareAssetEntries(d, cesdk.current!.engine);
-                    }
-                  }
-                },
-                panels: { settings: true }
-              }
-            }
+            callbacks: { onUpload: 'local' }
           }).then(async (instance) => {
             // @ts-ignore
             window.cesdk = instance;
@@ -50,6 +25,20 @@ function App() {
               instance.addDemoAssetSources({ sceneMode: 'Design' })
             ]);
             await addPlugins(instance);
+            const cutoutAssetEntry = instance.ui.getAssetLibraryEntry(
+              'ly.img.cutout.entry'
+            );
+            instance.ui.setDockOrder([
+              ...instance.ui.getDockOrder(),
+              {
+                id: 'ly.img.assetLibrary.dock',
+                label: 'Cutout',
+                key: 'ly.img.assetLibrary.dock',
+                icon: cutoutAssetEntry?.icon,
+                entries: ['ly.img.cutout.entry']
+              }
+            ]);
+
             await instance.createDesignScene();
           });
         } else if (cesdk.current != null) {

diff --git a/examples/web/src/addPlugins.ts b/examples/web/src/addPlugins.ts
@@ -11,17 +11,15 @@ async function addPlugins(cesdk: CreativeEditorSDK): Promise<void> {
   console.log('Adding plugins...');
   try {
     await Promise.all([
-      cesdk.unstable_addPlugin(
+      cesdk.addPlugin(
         CutoutLibraryPlugin({
           ui: { locations: ['canvasMenu'] }
         })
       ),
-      cesdk.unstable_addPlugin(
+      cesdk.addPlugin(
         BackgroundRemovalPlugin({ ui: { locations: 'canvasMenu' } })
       ),
-      cesdk.unstable_addPlugin(
-        VectorizerPlugin({ ui: { locations: 'canvasMenu' } })
-      ),
+      cesdk.addPlugin(VectorizerPlugin({ ui: { locations: 'canvasMenu' } })),
       ...addDemoRemoteAssetSourcesPlugins(cesdk)
     ]);
   } catch (error) {
@@ -43,7 +41,7 @@ function addDemoRemoteAssetSourcesPlugins(
     '/api/assets/v1/video-pexels',
     '/api/assets/v1/video-giphy'
   ].map(async (baseUrl) => {
-    await cesdk.unstable_addPlugin(
+    cesdk.addPlugin(
       RemoteAssetSourcePlugin({
         baseUrl: ASSET_SOURCE_HOST + baseUrl
       })

diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "clean": "turbo run clean",
     "purge": "npx rimraf node_modules && turbo run purge",
     "dev": "turbo run dev",
-    "check:all": "turbo run check:all"
+    "check:all": "turbo run check:all",
+    "check:types": "turbo run check:types"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.8.0",

diff --git a/packages/plugin-background-removal-web/README.md b/packages/plugin-background-removal-web/README.md
@@ -36,7 +36,7 @@ const config = {
 const cesdk = await CreativeEditorSDK.create(container, config);
 await cesdk.addDefaultAssetSources(),
     await cesdk.addDemoAssetSources({ sceneMode: 'Design' }),
-    await cesdk.unstable_addPlugin(BackgroundRemovalPlugin());
+    await cesdk.addPlugin(BackgroundRemovalPlugin());
 
 await cesdk.createDesignScene();
 ```
@@ -68,7 +68,7 @@ import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
 
 [...]
 
-await cesdk.unstable_addPlugin(BackgroundRemovalPlugin({
+await cesdk.addPlugin(BackgroundRemovalPlugin({
   provider: {
     type: '@imgly/background-removal',
     configuration: {

diff --git a/packages/plugin-background-removal-web/package.json b/packages/plugin-background-removal-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imgly/plugin-background-removal-web",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Background Removal plugin for the CE.SDK editor",
   "keywords": [
     "CE.SDK",
@@ -46,10 +46,10 @@
     "dev:types": "tsc --emitDeclarationOnly --watch --preserveWatchOutput",
     "publish:latest": "npm run build && npm publish --tag latest --access public",
     "publish:next": "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:all": "concurrently -n lint,type,pretty \"yarn check:lint\" \"yarn check:types\" \"yarn check:pretty\"",
     "check:lint": "eslint --max-warnings 0 './src/**/*.{ts,tsx}'",
     "check:pretty": "prettier --list-different './src/**/*.{ts,tsx}'",
-    "check:type": "tsc --noEmit",
+    "check:types": "tsc --noEmit",
     "types:create": "tsc --emitDeclarationOnly"
   },
   "devDependencies": {
@@ -63,7 +63,7 @@
     "@imgly/plugin-utils": "*"
   },
   "peerDependencies": {
-    "@cesdk/cesdk-js": "^1.26.0"
+    "@cesdk/cesdk-js": "^1.32.0"
   },
   "dependencies": {
     "@imgly/background-removal": "^1.5.3"

diff --git a/packages/plugin-background-removal-web/src/fillProcessingBackgroundRemoval.ts b/packages/plugin-background-removal-web/src/fillProcessingBackgroundRemoval.ts
@@ -33,15 +33,14 @@ export async function fillProcessingFromSourceSet(
 
         if (inputSource == null) throw new Error('No source found');
 
-        const mask = await segmentForeground(
-          inputSource.uri,
-          bgRemovalConfiguration
-        );
+        const input = await convertBufferURI(inputSource.uri, cesdk);
+        const mask = await segmentForeground(input, bgRemovalConfiguration);
+
         const result = await Promise.all(
           sourceSet.map(async (source): Promise<Source> => {
             // Applying the mask to the original image
             const blob = await applySegmentationMask(
-              source.uri,
+              await convertBufferURI(source.uri, cesdk),
               mask,
               bgRemovalConfiguration
             );
@@ -94,10 +93,12 @@ export async function fillProcessingFromImageFileURI(
       // Default implementation from IMG.LY background removal library
       (async (metadataState) => {
         const imageFileURI = metadataState.initialImageFileURI;
-        const blob = await removeBackground(
-          imageFileURI,
+
+        const blob: Blob = await removeBackground(
+          await convertBufferURI(imageFileURI, cesdk),
           bgRemovalConfiguration
         );
+
         const uploaded = await uploadBlob(blob, imageFileURI, cesdk);
         return uploaded;
       }),
@@ -117,3 +118,17 @@ export async function fillProcessingFromImageFileURI(
     }
   });
 }
+
+async function convertBufferURI(
+  uri: string,
+  cesdk: CreativeEditorSDK
+): Promise<Blob | string> {
+  if (uri.startsWith('buffer:')) {
+    const mimeType = await cesdk.engine.editor.getMimeType(uri);
+    const length = cesdk.engine.editor.getBufferLength(uri);
+    const data = cesdk.engine.editor.getBufferData(uri, 0, length);
+    return new Blob([data], { type: mimeType });
+  } else {
+    return uri;
+  }
+}
diff --git a/packages/plugin-background-removal-web/src/plugin.ts b/packages/plugin-background-removal-web/src/plugin.ts
@@ -1,10 +1,9 @@
-import type CreativeEditorSDK from '@cesdk/cesdk-js';
-
 import {
   initializeFillProcessing,
   registerFillProcessingComponents
 } from '@imgly/plugin-utils';
 
+import { EditorPlugin } from '@cesdk/cesdk-js';
 import {
   processBackgroundRemoval,
   type BackgroundRemovalProvider
@@ -18,13 +17,13 @@ export interface PluginConfiguration {
   provider?: BackgroundRemovalProvider;
 }
 
-export default (pluginConfiguration: PluginConfiguration = {}) => {
+export default (
+  pluginConfiguration: PluginConfiguration = {}
+): Omit<EditorPlugin, 'name' | 'version'> => {
   return {
-    initialize() {},
-
-    update() {},
+    initialize({ cesdk }) {
+      if (cesdk == null) return;
 
-    initializeUserInterface({ cesdk }: { cesdk: CreativeEditorSDK }) {
       initializeFillProcessing(cesdk, {
         pluginId: PLUGIN_ID,
         process: (blockId, metadata) => {

diff --git a/packages/plugin-cutout-library-web/README.md b/packages/plugin-cutout-library-web/README.md
@@ -20,37 +20,27 @@ When adding the plugin to the CE.SDK, you can also add an action button to the c
 
 ```typescript
 import CreativeEditorSDK from '@cesdk/cesdk-js';
-import CutoutLibraryPlugin, {
-  getCutoutLibraryInsertEntry
-} from '@imgly/plugin-cutout-library-web';
-
-const config = {
-  license: '<your-license-here>',
-  ui: {
-    elements: {
-      libraries: {
-        insert: {
-          entries: (defaultEntries) => {
-            return [
-              ...defaultEntries,
-              // Add the cutout library insert entry
-              getCutoutLibraryInsertEntry()
-            ];
-          }
-        }
-      }
-    }
-  },
-};
+import CutoutLibraryPlugin from '@imgly/plugin-cutout-library-web';
 
 const cesdk = await CreativeEditorSDK.create(container, config);
 await cesdk.addDefaultAssetSources();
 await cesdk.addDemoAssetSources({ sceneMode: 'Design' });
-await cesdk.unstable_addPlugin(
+await cesdk.addPlugin(
   CutoutLibraryPlugin({
     ui: { locations: ['canvasMenu'] }
   })
 );
+const cutoutAssetEntry = cesdk.ui.getAssetLibraryEntry('ly.img.cutout.entry');
+cesdk.ui.setDockOrder([
+  ...cesdk.ui.getDockOrder(),
+  {
+    id: 'ly.img.assetLibrary.dock',
+    label: 'Cutout',
+    key: 'ly.img.assetLibrary.dock',
+    icon: cutoutAssetEntry?.icon,
+    entries: ['ly.img.cutout.entry']
+  }
+]);
 
 await cesdk.createDesignScene();
 ```
diff --git a/packages/plugin-cutout-library-web/package.json b/packages/plugin-cutout-library-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@imgly/plugin-cutout-library-web",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "Cutout Library plugin for the CE.SDK editor",
   "keywords": [
     "CE.SDK",
@@ -47,10 +47,10 @@
     "dev:types": "tsc --emitDeclarationOnly --watch --preserveWatchOutput",
     "publish:latest": "npm run build && npm publish --tag latest --access public",
     "publish:next": "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:all": "concurrently -n lint,type,pretty \"yarn check:lint\" \"yarn check:types\" \"yarn check:pretty\"",
     "check:lint": "eslint --max-warnings 0 './src/**/*.{ts,tsx}'",
     "check:pretty": "prettier --list-different './src/**/*.{ts,tsx}'",
-    "check:type": "tsc --noEmit",
+    "check:types": "tsc --noEmit",
     "types:create": "tsc --emitDeclarationOnly"
   },
   "devDependencies": {
@@ -62,7 +62,7 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@cesdk/cesdk-js": "^1.21.0"
+    "@cesdk/cesdk-js": "^1.32.0"
   },
   "dependencies": {
     "lodash": "^4.17.21"

diff --git a/packages/plugin-cutout-library-web/src/components.ts b/packages/plugin-cutout-library-web/src/components.ts
@@ -8,7 +8,7 @@ import {
 import { generateCutoutFromSelection } from './plugin';
 
 export function registerComponents(cesdk: CreativeEditorSDK) {
-  cesdk.ui.unstable_registerComponent(
+  cesdk.ui.registerComponent(
     CANVAS_MENU_COMPONENT_ID,
     ({ builder: { Button }, engine }) => {
       // only show canvas menu button for type=graphic, type=text, type=group

diff --git a/packages/plugin-cutout-library-web/src/index.ts b/packages/plugin-cutout-library-web/src/index.ts
@@ -1,8 +1,4 @@
-import plugin, {
-  UILocations,
-  generateCutoutFromSelection,
-  getCutoutLibraryInsertEntry
-} from './plugin';
+import plugin, { UILocations, generateCutoutFromSelection } from './plugin';
 
 export const DEFAULT_ASSET_BASE_URI = `https://staticimgly.com/${PLUGIN_NAME.replace(
   '@',
@@ -36,4 +32,4 @@ const Plugin = (
 
 export default Plugin;
 
-export { generateCutoutFromSelection, getCutoutLibraryInsertEntry };
+export { generateCutoutFromSelection };