Skip to main content
PESDK/Web/Customization

ToolControlBar Customization

The PE.SDK for Web allows you to easily customize the controls for each tool.

Change the order in the ToolControlBar#

The configuration makes it pretty easy to reorder the existing items to fit your workflow. Simply change the item position in the advancedUIToolControlBarOrder or basicUIToolControlBarTabsOrder array, and the UI will reflect the new order.

Examples#

Reorder the ToolControlBar in the Text tool#

The following examples will move the text and text background color selection before the other text controls.

AdvancedUI 

text: {
  advancedUIToolControlBarOrder: [
    AdvancedTextControlBarItem.NewTextButton,
    AdvancedTextControlBarItem.FontFamilyDropdown,
+   AdvancedTextControlBarItem.Separator,
+   AdvancedTextControlBarItem.TextColorList,
+   AdvancedTextControlBarItem.BackgroundColorList,
    {
      type: AdvancedTextControlBarItem.Inline,
      children: [
        AdvancedTextControlBarItem.FontSizeInput,
        AdvancedTextControlBarItem.TextAligmentList,
      ],
    },
-   AdvancedTextControlBarItem.Separator,
-   AdvancedTextControlBarItem.TextColorList,
-   AdvancedTextControlBarItem.BackgroundColorList,
    AdvancedTextControlBarItem.Separator,
    AdvancedTextControlBarItem.LineSpacingSlider,
  ]
}

BasicUI 

text: {
  basicUIToolControlBarTabsOrder: [
+   BasicTextControlBarTabs.TextColor,
+   BasicTextControlBarTabs.BackgroundColor,
    BasicTextControlBarTabs.FontSize,
    BasicTextControlBarTabs.TextAligment,
-   BasicTextControlBarTabs.TextColor,
-   BasicTextControlBarTabs.BackgroundColor,
    BasicTextControlBarTabs.LineSpacing,
  ]
}

Move Items to the top#

This example will move the Items of the Sticker tool to the top of the ToolControlBar.

sticker: {
  advancedUIToolControlBarOrder: [
+   AdvancedStickerControlBarItem.Items,
+   AdvancedStickerControlBarItem.Separator,
    AdvancedStickerControlBarItem.UploadStickerButton,
    AdvancedStickerControlBarItem.StickerOpacitySlider,
    AdvancedStickerControlBarItem.StickerColorList,
-   AdvancedStickerControlBarItem.Separator,
-   AdvancedStickerControlBarItem.Items,
  ],
},

Remove a ToolControlBarItem#

It is also possible to remove an item from the ToolControlBar like the Keep Resolution checkbox from the Transform tool in this example.

AdvancedUI 

transform: {
  advancedUIToolControlBarOrder: [
    AdvancedTransformControlBarItem.ResetTransformButton,
-   AdvancedTransformControlBarItem.KeepResolutionCheckbox,
    AdvancedTransformControlBarItem.CropSizeInput,
    AdvancedTransformControlBarItem.Separator,
    AdvancedTransformControlBarItem.Items,
  ]
}

BasicUI 

transform: {
  basicUIToolControlBarTabsOrder: [
    BasicTransformControlBarTabs.CropSize,
    BasicTransformControlBarTabs.FlipRotate,
-   BasicTransformControlBarTabs.Resolution,
  ]
}

Display all controls#

Some tools use expandable components to hide some controls until the user added an effect or element to the canvas. If you prefer to have all controls visible at all time you can do that by removing the exapandable from the configuration and adding the children to the advancedUIToolControlBarOrder.

default Focus configuration 

focus: {
  advancedUIToolControlBarOrder: [
    {
      type: AdvancedFocusControlBarItem.Expandable,
      children: [
        AdvancedFocusControlBarItem.RemoveFocusButton,
        AdvancedFocusControlBarItem.FocusIntensitySlider,
        AdvancedFocusControlBarItem.Separator,
      ],
    },
    AdvancedFocusControlBarItem.Items,
  ];
}

Focus without expandable category 

focus: {
  advancedUIToolControlBarOrder: [
    AdvancedFocusControlBarItem.RemoveFocusButton,
    AdvancedFocusControlBarItem.FocusIntensitySlider,
    AdvancedFocusControlBarItem.Separator,
    AdvancedFocusControlBarItem.Items,
  ];
}