@aurigma/design-editor-iframe
Version:
Using this module you can embed Design Editor (a part of Customer's Canvas) to your page through the IFrame API.
376 lines (375 loc) • 14.2 kB
TypeScript
import { PsdActionMode, SvgActionMode, BarcodeType, PdfActionMode, FinishButtonMode } from "../ConfigurationTypes";
import { IFitTextRectangleSettings, IShowInputSettings } from "../WidgetConfigurationInterfaces";
export { IFitTextRectangleSettings, IShowInputSettings };
import { IGalleryDefaultConfig } from "../DefaultConfigurationInterfaces";
import { IObjectInspectorConfigParsed } from "./IObjectInspectorConfigParsed";
import { IToolboxConfigParsed } from "./IToolboxConfigParsed";
import { ITopToolbarConfigParsed } from "./ITopToolbarConfigParsed";
import { FitMode } from "@aurigma/design-atoms-model/Product/Items/TextEnums";
/** @internal */
export interface IWidgetsConfig {
/** Common settings of widgets. */
common: ICommonConfigParsed;
/** Settings of the Finish design button. */
FinishButton: IFinishButtonConfigParsed;
/** Settings of the Bottom toolbar. */
BottomToolbar: IBottomToolbarConfigParsed;
/** Settings of the Toolbox. */
Toolbox: IToolboxConfigParsed;
/** Settings of the Object inspector. */
ObjectInspector: IObjectInspectorConfigParsed;
/** Settings of the Item menu. */
ItemMenu: IItemMenuConfigParsed;
/** Settings of the Top toolbar. */
TopToolbar: ITopToolbarConfigParsed;
/** Settings of the Qr code dialog. */
QrCodeDialog: IBarcodeDialogConfigParsed;
/** Settings of the Linear barcode dialog. */
LinearBarcodeDialog: IBarcodeDialogConfigParsed;
/** Settings of the Rich text dialog. */
RichTextDialog: IRichTextDialogConfigParsed;
/** Settings of the Color picker. */
ColorPicker: IColorPickerConfigParsed;
/** Settings of the Image editor dialog. */
ImageEditorDialog: IImageEditorDialogConfigParsed;
/** Settings of the Image manager dialog. */
AssetManager: IAssetManagerConfig;
}
/** @internal */
export interface IFinishButtonConfigParsed {
mode: FinishButtonMode.FinishButtonModeType;
}
/** @internal */
export interface IBottomToolbarConfigParsed {
fullWindowButtonEnabled: boolean;
fullScreenButtonEnabled: boolean;
zoomValueEnabled: boolean;
zoomButtonsEnabled: boolean;
rotateButtonEnabled: boolean;
safetyLinesCheckboxEnabled: boolean | ICheckboxConfig;
gridCheckboxEnabled: boolean | ICheckboxConfig;
snapLinesPrintAreaCheckboxEnabled: boolean | ICheckboxConfig;
snapLinesSafetyLinesCheckboxEnabled: boolean | ICheckboxConfig;
snapLinesItemsCheckboxEnabled: boolean | ICheckboxConfig;
snapLinesInteractiveZonesCheckboxEnabled: boolean | ICheckboxConfig;
previewModeCheckboxEnabled: boolean | ICheckboxConfig;
flatMarkingMenuEnabled: boolean;
surfaceSwitch: ISurfaceSwitchConfigParsed;
}
/**
* A structure containing the configuration of checkboxes in the Bottom toolbar.
* @example
* This is how you can disable the Safety Line checkbox and display safety lines on the canvas.
* ``` js
* const configuration = {
* widgets: {
* BottomToolbar: {
* safetyLinesCheckboxEnabled: {
* enabled: false, defaultValue: true
* }
* }
* }
* };
* ```
* @public
*/
export interface ICheckboxConfig {
/**
* Specifies if the checkbox should be displayed.
*/
enabled: boolean;
/**
* Specifies default value for the displayed checkbox.
*/
defaultValue?: boolean;
}
/** @internal */
export interface ISurfaceSwitchConfigParsed {
enabled?: boolean;
showThumbnails?: boolean;
showSurfaceNames?: boolean;
scrollPageButtonsEnabled?: boolean;
toggleSurfaceButtonsEnabled?: boolean;
firstAndLastButtonsEnabled?: boolean;
specificForSurfaceCount?: {
[]: ISurfaceSwitchConfigParsed;
};
}
/** @internal */
export interface ICommonConfigParsed {
fontSize: IRangeParamsParsed;
tracking: IRangeParamsParsed;
leading: IRangeParamsParsed;
gallery: IGalleryDefaultConfig;
textFormattingEnabled: boolean;
}
/** @internal */
export interface IItemMenuConfigParsed {
objectManipulationEnabled: boolean;
verticalAlignmentEnabled: boolean;
horizontalAlignmentEnabled: boolean;
changeZOrderEnabled: boolean;
renameEnabled: boolean;
groupItemsEnabled?: boolean;
cloneItemsEnabled?: boolean;
}
/** @internal */
export interface IRangeParamsParsed {
min: number;
max: number;
step: number;
}
/** @internal */
export interface IBarcodeDialogConfigParsed {
defaultType: BarcodeType;
tabs: BarcodeType[];
autoChecksum: boolean;
}
/** @internal */
export interface ITextOutlineParsed {
enabled: boolean;
hueThreshold: number;
brightnessThreshold: number;
color: string;
}
/** @internal */
export interface IShowHintSettingsParsed {
font: boolean;
style: boolean;
size: boolean;
tracking: boolean;
leading: boolean;
firstLineIndent: boolean;
paddingTop: boolean;
paddingBottom: boolean;
paddingLeft: boolean;
paddingRight: boolean;
}
/** @internal */
export interface IRichComboValuesConfigParsed {
indent: IRangeParamsParsed;
padding: IRangeParamsParsed;
}
/** @internal */
export interface IZoomConfigParsed {
enabled: boolean;
minZoomPct: number;
maxZoomPct: number;
autoZoom?: IAutoZoomConfigParsed;
}
/** @internal */
export interface IAutoZoomConfigParsed {
enabled: boolean;
minFontSizeThresholdPt: number;
maxFontSizeThresholdPt: number;
}
/** @internal */
export interface IRichTextDialogConfigParsed {
forcePasteAsPlainText: boolean;
bgColor: string;
createMultiColumnText: boolean;
applyToAllTextMode: boolean;
wysiwygMode: boolean;
showHint: IShowHintSettingsParsed;
showInput: IShowInputSettings;
textOutline: ITextOutlineParsed;
toolbarConfig: ({
name: string;
items: string[];
} | string)[];
zoom: IZoomConfigParsed;
richComboValues: IRichComboValuesConfigParsed;
fitTextRectangle: IFitTextRectangleSettings;
}
export import TextRectangleFitMode = FitMode;
import { IColorPickerConfigParsed } from "./IColorPickerConfigParsed";
/** @internal */
export interface ITabDescriptorParsed {
name: string;
subFolderName?: string;
translationKey?: string;
canEdit?: boolean;
canUpload?: boolean;
canDelete?: boolean;
categoriesEnabled?: boolean;
showFileName?: boolean;
appKey?: string;
actionMode?: IActionMode;
}
/**
* A structure defining how to import SVG, PDF, and PSD graphics.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/image-manager.html|Image manager} topic.
* @example
* ``` json
* {
* "assetSources": {
* "My Shapes": {
* "type": "PrivateSource",
* "allowedExtensions": [ "pdf", "svg", "ai" ],
* "actionMode": {
* "pdf": "Shape",
* "svg": "Shape"
* }
* },
* "Public Group Elements": {
* "type": "PublicSource",
* "allowedExtensions": [ "psd" ],
* "actionMode": {
* "psd": "Group"
* }
* },
* "Public Cliparts": {
* "type": "PublicSource",
* "allowedExtensions": [ "svg" ],
* "actionMode": {
* "svg": "Clipart"
* }
* }
* }}
* ```
* @public
*/
export interface IActionMode {
/** The upload mode for PSD files. By default, the `Design` mode is enabled. */
psd?: PsdActionMode.PsdActionModeType;
/** The upload mode for SVG files. By default, the `Vector` mode is enabled. */
svg?: SvgActionMode.SvgActionModeType;
/** The upload mode for PDF and AI files. By default, the `Vector` mode is enabled. */
pdf?: PdfActionMode.PdfActionModeType;
}
/** @internal */
export interface IActionModeParsed {
psd?: PsdActionMode.PsdActionModeType;
svg?: SvgActionMode.SvgActionModeType;
pdf?: PdfActionMode.PdfActionModeType;
}
/** @internal */
export interface IImageEditorDialogConfigParsed {
colorAdjustButtonEnabled: boolean;
cropButtonEnabled: boolean;
backgroundEraseButtonEnabled: boolean;
imageContextMenuEnabled: boolean;
}
/**
* A structure defining tabs of the Asset Manager.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/image-manager.html|Image manager} topic.
* @example
* ``` json
* {
* "widgets": {
* "AssetManager": {
* "maxUploadFileSize": 2048000,
* "defaultTabName": "External urls",
* "tabs": [
* {
* "name": "My files",
* "assetSourceInstance": "My files",
* "iconClassName": "cc-icon-uploadable"
* },
* {
* "name": "External urls",
* "assetSourceInstance": "External urls",
* "iconClassName": "cc-icon-add-image"
* }
* ]
* }
* }
* }
* ```
* @public
*/
export interface IAssetManagerConfig {
/** Allows you to assign the selected image to the background. */
enabledBackgroundChange: boolean;
/** The default tab is displayed when you open the Asset Manager; it should be one of {@link (IAssetManagerConfig:namespace).ITabConfig.name}. */
defaultTabName?: string;
/** Allows you to restrict the image selection only to the asset tab from which an image was selected. If `true`, your users cannot open another tab. The default value is `false`. */
saveAllowedTabAfterInsert?: boolean;
/** Specifies either acs or desc sort order. */
defaultSortOrder: string;
/** The array of tabs available in the Asset Manager. The `IAssetSources` interface allows you to define the sources of these tabs. */
tabs: IAssetManagerConfig.ITabConfig[];
/** The maximum size of files that can be uploaded through the Asset Manager, in bytes. This value must be `102400` (100 kB) or more. By default, this value is `null`, and the size of uploaded files is not limited. */
maxUploadFileSize?: number;
}
/** @public */
export declare namespace IAssetManagerConfig {
/**
* A structure defining tabs of the Asset Manager.
* @remarks For details, see the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/image-manager.html|Image manager} topic.
* @example
* ``` json
* {
* "widgets": {
* "AssetManager": {
* "defaultTabName": "External urls",
* "tabs": [
* {
* "name": "My files",
* "assetSourceInstance": "My files",
* "iconClassName": "cc-icon-uploadable",
* "controls": {
* "canDelete": false,
* "toolbarEnabled": false,
* "selectAllButtonEnabled": true
* }
* },
* {
* "name": "Public Gallery",
* "assetSourceInstance": "Public Gallery",
* "iconClassName": "cc-icon-add-image",
* "controls": {
* "categoriesEnabled": false
* }
* },
* {
* "name": "External urls",
* "assetSourceInstance": "[source]External urls",
* "iconClassName": "cc-icon-add-image",
* "controls": {
* "assetNameEnabled": false,
* "insertToAllButtonEnabled": true
* }
* }
* ]
* }
* }
*}
* ```
* @public
*/
interface ITabConfig {
/** The tab ID. */
id: string;
/** The tab name. */
name: string;
/** A name of the structure defining a type, categories, titles, and links to the assets. For details, you can refer to the `IAssetSources` interface. */
assetSourceInstance: string;
/** A class of the tab icon. You can find the complete list of available icon classes in `/src/design-editor/Styles/ControlStyles/sp-icons.less`. */
iconClassName: string;
/** Additional settings. */
controls: {
/** Enables the **Categories** panel. The default value is `true`. */
categoriesEnabled: boolean;
/** Enables the asset title. The default value is `true`. */
assetNameEnabled: boolean;
/** Enables the asset file extension. The default value is `true`. */
extensionEnabled: boolean;
/** Enables the Asset Manager toolbar with the search box and additional buttons. The default value is `true`. */
toolbarEnabled: boolean;
/** Allows your users to edit images on the **"My files"** tab. If `true`, the **Edit** button appears on this tab. The default value is `true`. */
canEdit?: boolean;
/** Allows your users to upload images on the **"My files"** tab. If `true`, the **Upload files** button appears on this tab. The default value is `true` for the `PrivateSource`. Users cannot upload assets to other asset sources. */
canUpload?: boolean;
/** Allows your users to delete images on the **"My files"** tab. If `true`, the **Delete** button appears on this tab. The default value is `true` for the `PrivateSource`. Users cannot delete assets from other asset sources. */
canDelete?: boolean;
/** Allows your users to rename states on the **"States"** tab. If `true`, the **Rename** button appears on this tab. The default value is `true` for the `StatesSource`. Users cannot rename assets in other asset sources. */
canRename?: boolean;
/** Enables the **Insert to all** button that allows your users to change backgrounds of all product surfaces at once. The default value is `false`. */
insertToAllButtonEnabled: boolean;
/** Enables the **Select all** button that allows your users to select all images on the asset tab. The default value is `false`. */
selectAllButtonEnabled: boolean;
multiSelectEnabled: boolean;
};
}
}