Panel

Panels are a basic concept of our UI, e.g. extensively used for asset libraries and inspectors.

Show or Hide Panels

• inspector.position: string is used to set the location of the inspector to either left or right.
• inspector.show: boolean shows or hides the inspector.
• inspector.floating: boolean configures if the inspector panel is floating over the canvas or set aside of it.
• assetLibrary.position: string is used to set the location of the asset library to either left or right.
• assetLibrary.show: boolean shows or hides the asset library.
• settings: boolean shows or hides the settings panel.

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default',
      /* ... */
      navigation: {
        /* ... */
      },
      panels: {
        inspector: {
          show: true, // true or false
          position: 'left', // 'left' or 'right'
          floating: false, // true or false
        },
        assetLibrary: {
          show: true, // true or false
          position: 'left', // 'left' or 'right'
        },
        settings: {
          show: true, // true or false
        },
      },
      dock: {
        /* ... */
      },
      libraries: {
        /* ... */
      },
      blocks: {
        /* ... */
      },
    },
  },
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
};

CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});

Configure Libraries

• insert.floating: boolean configures if the asset library panel is floating over the canvas or set aside of it.
• insert.autoClose: boolean | () => boolean configures if the asset library panel is closed after an asset was inserted (default is false).
• replace.floating: boolean configures if the image replacement library panel is floating over the canvas or set aside of it.
• replace.autoClose: boolean | () => boolean configures if the asset library panel is closed after an asset was replaced (default is true).

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    elements: {
      view: 'default',
      /* ... */
      navigation: {
        /* ... */
      },
      panels: {
        /* ... */
      },
      dock: {
        /* ... */
      },
      libraries: {
        insert: {
          floating: true, // true or false
          autoClose: false, // true or false
        },
        replace: {
          floating: true, // true or false
          autoClose: false, // true or false
        },
      },
      blocks: {
        /* ... */
      },
    },
  },
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
};

CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});

API

Given a CreativeEditorSDK instance, we can query if a given panel is open as well as access methods to open/close them.

• cesdk.ui.isPanelOpen(panelId: string, options?: { position?: PanelPosition, floating?: boolean }): boolean returns true if a panel with the given panel id is open. If options are provided they will be matched against the panel’s options. E.g. isPanelOpen('//ly.img.panel/assetLibrary', { floating: false }) will only return true if the asset library is open as a floating panel.

• cesdk.ui.openPanel(panelId: string, options?: { position?: PanelPosition, floating?: boolean, closableByUser?: boolean, payload?: PanelPayload }) opens a panel with the given id if and only if it exists, is not open and is currently registered (known to the UI). Otherwise the method does nothing and is a noop.

  Options can be provided additionally that will override the default position and floating of the given panel. (Please note, that the default position and floating behavior are not changed for this panel.) In addition, the closableByUser option can control if the panel can be closed by the user. Finally, the payload option is passed to the opened registered panel, where it can be accessed. For example, when the panel //ly.img.panel/assetLibrary is opened, it expects a payload of type {title?: string | string[], entries?: string[]}. This payload determines the panel’s title and content, such as the asset library entries displayed in the panel.

• cesdk.ui.closePanel(panelId: string) closes a panel with the given id if and only if it exists and is open. Otherwise the method does nothing and is a noop.

Panel Position

Every panel in the UI is typically displayed either on the left or right side of the canvas. An exception exists for rendering in smaller viewports, where all panels are situated at the bottom.

The setPanelPosition API is used to determine a panel’s default placement.

• cesdk.ui.setPanelPosition(panelId: string, panelPosition: PanelPosition) assigns a specific position to a panel identified by panelId. This function will also alter the panel’s position while it is open, provided the panel wasn’t initially opened with a pre-defined position option (see above).

Floating Panel

Panels can either float over the canvas, potentially obscuring content, or be positioned adjacent to the canvas. The setPanelFloating API allows you to modify this behavior to suit different use cases.

• cesdk.ui.setPanelFloating(panelId: string, floating: boolean) when set to true, the specified panel will float above the canvas. Conversely, setting it to false places the panel beside the canvas.

Available Panels

By default, CE.SDK provides several different panels for user interaction. Additional panels can be added by the user or through plugins. The findAllPanels function helps retrieve the current panels and filter them based on their state.

• cesdk.ui.findAllPanels(options?: { open?: boolean, position?: PanelPosition, floating?: boolean }): string[] returns all panel ids. If options are provided they will be matched against the panel’s options. E.g. findAllPanels({ open: true }) will only return panel ids of currently open panels.

Some important panels that are registered by default are:

Full Code

Here is the full code:

CreativeEditorSDK.create('#cesdk', config).then(async cesdk => {
  await cesdk.addDefaultAssetSources();
  await cesdk.addDemoAssetSources();

  // The inspector should be rendered on the left as a non-floating panel
  cesdk.ui.setPanelPosition('//ly.img.panel/inspector', 'left');
  cesdk.ui.setPanelFloating('//ly.img.panel/inspector', false);

  await cesdk.createDesignScene();

  // Adding some image after creating the scene
  const image = await cesdk.engine.asset.defaultApplyAsset({
    id: 'ly.img.cesdk.images.samples/sample.1',
    meta: {
      uri: 'https://cdn.img.ly/assets/demo/v1/ly.img.image/images/sample_1.jpg',
      width: 2500,
      height: 1667,
    },
  });

  if (image == null) return;

  // Select the first image after loading the scene ...
  cesdk.engine.block.setSelected(image, true);

  // ... and opening the replace asset library for the user to choose a differnt image
  if (!cesdk.ui.isPanelOpen('//ly.img.panel/assetLibrary.replace')) {
    cesdk.ui.openPanel('//ly.img.panel/assetLibrary.replace');
  }

  // Open the inspector panel, but override the default position and floating we set above.
  cesdk.ui.openPanel('//ly.img.panel/inspector', {
    position: 'right',
    floating: true,
  });

  // Return all currently open panel ids
  const openPanels = cesdk.ui.findAllPanels({ open: true });
});