Measurements

To integrate the PhotoEditor SDK UI seamlessly into your application we provide the option to change the height and width of the different components

Following are the available customizations:

The values will accept the pixel amount as a number

• advancedUIToolbar: Customizations for Advanced UI toolbar.
  • width: Changes the width of Advanced UI toolbar.
• basicUIToolbar: Customizations for Basic UI toolbar.
  • openHeight: Changes the height of Basic UI toolbar, in when a tool is selected.
  • closeHeight: Changes the height of Basic UI toolbar, in when no tool is selected.
• mainCanvasActionBar: Customizations for Main canvas action bar in both UIs.
  • height: Changes the height of main canvas action bar.
• canvas: Customization for the Canvas
  • marginTop: This value can be used in combination with an opaque mainCanvasActionBar.background color to prevent canvas elements to be hidden behind the Main canvas action bar
• colorItem: Customization for the ColorItem
  • size: Changes the height and width of the ColorItem
• fontSystem: Customization for the Font System of the UI
  • headline1: ToolControlBar title
    • size: Font size in pixel
    • letterSpacing: Letter spacing in pixel
    • case: Text transform property
  • headline2: Modal title, ToolControlBar subtitles
  • body: Overlay type carousel, input field text, dropdown text, modal body
  • label: Card labels, input labels, tooltip
  • basicUICardLabel: Basic ui card label
  • button1: Contained Buttons and Button base class
  • button2: Text button, dropdown items, canvas action buttons
  • basicUITabLabel: Tab text

Use an opaque color for the main canvas action bar

const editor = await PhotoEditorSDKUI.init({
  custom: {
    themes: {
      dark: {
        mainCanvasActionBar: {
          background: "#365afc",
        },
      },
    },
    measurements: {
      mainCanvasActionBar: {
        height: 48,
      },
      canvas: {
        marginTop: 48,
      },
    },
  },
});

Remove the uppercase text transform from the titles

const editor = await PhotoEditorSDKUI.init({
  custom: {
    measurements: {
      fontSystem: {
        headline1: { size: 16, letterSpacing: 1.5, case: "capitalize" },
        headline2: { size: 14, letterSpacing: 0.8, case: "capitalize" },
      },
    },
  },
});