Feature: Layer List Plugin

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 packages/*/dist
 examples/*/dist
+examples/*/public/assets
 .env.local
 .nvmrc
 

examples/web/package.json

@@ -4,14 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "tsc && vite build --force",
+    "build": "tsc && vite build ",
     "clean": "npx rimraf dist",
     "dev": "vite --clearScreen=false --force"
   },
   "dependencies": {
     "@imgly/plugin-background-removal-web": "*",
     "@imgly/plugin-remote-asset-source-web": "*",
-    "@cesdk/cesdk-js": "^1.21.0",
+    "@cesdk/cesdk-js": "^1.22.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/web/src/App.tsx

@@ -1,7 +1,7 @@
-import CreativeEditorSDK from '@cesdk/cesdk-js';
+import CreativeEditorSDK, { AssetResult } from '@cesdk/cesdk-js';
 import { useRef } from 'react';
 
-import addPlugins, { prepareAssetEntries } from './addPlugins';
+import addPlugins, { Apps, prepareAssetEntries } from './addPlugins';
 
 function App() {
   const cesdk = useRef<CreativeEditorSDK>();
@@ -12,24 +12,67 @@ function App() {
         if (domElement != null) {
           CreativeEditorSDK.create(domElement, {
             license: import.meta.env.VITE_CESDK_LICENSE_KEY,
-            callbacks: { onUpload: 'local' },
+            callbacks: { onUpload: 'local', onLoad: 'upload' },
+            // We need to load assets from the same domain to enable custom dom panels (like e.g created in the layer list panel).
+            // Otherwise, the panel only shows an error message.
+            baseURL: '/assets',
             ui: {
               elements: {
+                navigation: {
+                  action: {
+                    load: true
+                  }
+                },
                 libraries: {
                   insert: {
                     entries: (d) => {
-                      if (!cesdk.current) return;
-                      return prepareAssetEntries(d, cesdk.current!.engine);
+                      if (!cesdk.current) return [];
+
+                      return [
+                        ...prepareAssetEntries(d, cesdk.current!.engine),
+                        {
+                          id: 'ly.img.apps',
+                          sourceIds: ['ly.img.apps'],
+                          cardLabel: (assetResult: AssetResult) =>
+                            assetResult.label,
+                          cardLabelPosition: () => 'bottom',
+                          gridItemHeight: 'square',
+                          icon: ({ theme }: { theme: 'light' | 'dark' }) =>
+                            `https://staticimgly.com/imgly/cesdk-icons/0.0.1/output/apps-${theme}.svg`
+                        }
+                      ];
                     }
                   },
                   replace: {
                     entries: (d) => {
-                      if (!cesdk.current) return;
+                      if (!cesdk.current) return [];
+
                       return prepareAssetEntries(d, cesdk.current!.engine);
                     }
                   }
                 },
-                panels: { settings: true }
+                panels: { settings: true },
+                dock: {
+                  groups: [
+                    {
+                      id: 'ly.img.apps',
+                      entryIds: ['ly.img.apps']
+                    },
+                    {
+                      id: 'ly.img.template',
+                      entryIds: ['ly.img.template']
+                    },
+                    {
+                      id: 'ly.img.defaultGroup',
+                      showOverview: true
+                    }
+                  ]
+                }
+              }
+            },
+            i18n: {
+              en: {
+                'libraries.ly.img.apps.label': 'Apps'
               }
             }
           }).then(async (instance) => {
@@ -43,7 +86,25 @@ function App() {
               instance.addDefaultAssetSources(),
               instance.addDemoAssetSources({ sceneMode: 'Design' })
             ]);
+            const engine = instance.engine;
+            engine.asset.addLocalSource(
+              'ly.img.apps',
+              undefined,
+              async (asset: AssetResult) => {
+                const appHandler = Apps.find(
+                  (app) => app.asset.id === asset.id
+                );
+                if (!appHandler) {
+                  console.error('No app handler found for asset:', asset.id);
+                  return;
+                }
+                appHandler.handler(instance as any);
+                return undefined;
+              }
+            );
+
             await addPlugins(instance);
+
             await instance.createDesignScene();
           });
         } else if (cesdk.current != null) {

examples/web/src/addPlugins.ts

@@ -1,19 +1,38 @@
-import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import CreativeEditorSDK from '@cesdk/cesdk-js';
 
 import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
+import LayerListPlugin, {
+  Apps as LayerListApps
+} from '@imgly/plugin-layer-list-web';
 import RemoteAssetSourcePlugin from '@imgly/plugin-remote-asset-source-web';
 
+// Add more apps when available
+export const Apps = LayerListApps;
+
 const ENABLE_DEMO_ASSET_SOURCES = false;
 
 async function addPlugins(cesdk: CreativeEditorSDK): Promise<void> {
-  console.log('Adding plugins', RemoteAssetSourcePlugin);
+  console.log('Adding plugins');
   try {
     await Promise.all([
       cesdk.unstable_addPlugin(
+        // @ts-ignore
         BackgroundRemovalPlugin({ ui: { locations: 'canvasMenu' } })
       ),
-      ...addDemoRemoteAssetSourcesPlugins(cesdk)
+      ...addDemoRemoteAssetSourcesPlugins(cesdk),
+      // @ts-ignore
+      cesdk.unstable_addPlugin(LayerListPlugin())
     ]);
+    // Add all exported apps to the 'ly.img.apps' asset source
+    const engine = cesdk.engine;
+    if (
+      engine.asset.findAllSources().includes('ly.img.apps')
+    ) {
+      const appAssets = Apps.map((a) => a.asset);
+      appAssets.forEach((appAsset) => {
+        engine.asset.addAssetToSource('ly.img.apps', appAsset);
+      });
+    }
   } catch (error) {
     console.error('Could not add all plugins: ', error);
   }