UNPKG

@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.

950 lines (949 loc) 34.7 kB
import { ModelMode, FontListMode, ImageSize, CrossOriginMode } from "../ConfigurationTypes"; import { IProductThemeConfig, IDefaultItemsConfig, IGridConfig, IQualityMeterConfig, IQualityLevelsConfig, IRulersConfig, ISnapLinesConfig, ICanvasConfig, IUiConfig, IViolationWarningsSettingsConfig, IRotationConfig, ISnapElementConfiguration, IRasterElementsConfig, IMinFontSizeConfig } from "../ConfigurationInterfaces"; import { IActionMode, IRangeParamsParsed } from "./WidgetConfigurationInterfacesExtended"; import { IWidgetsConfig, IWidgetConfigsForSurface } from "../WidgetConfigurationInterfaces"; import { IBarcodeData } from "../Barcode"; import { IPrintZoneConfiguration, RulersConfigUnit, IHandlersConfiguration, TextEditorMode } from "@aurigma/design-atoms/Viewer/Interfaces"; import { ISnapItemConfiguration } from "@aurigma/design-atoms/Viewer/SnapLinesHandler"; import { IFloatingItemToolbarConfig } from "@aurigma/design-atoms/Services/FloatingToolbar/FloatingToolbarManager"; import { ItemHandlerState } from "@aurigma/design-atoms/ItemHandlers"; import { RotationType } from "@aurigma/design-atoms-interfaces"; /** @internal */ export interface IUiConfigParsed extends IUiConfig { defaultLanguage: string; canvas: ICanvasConfigParsed; grid: IGridConfigParsed; violationWarningsSettings: IViolationWarningsSettingsConfigParsed; alignToSafetyLineName: string; initialMode: ModelMode.ModelModeType; canvasOnlyMode: boolean; loadUserInfoButtonEnabled: boolean; autoLoadUserInfo: boolean; imageEditorEnabled: boolean; deleteItemConfirmationEnabled: boolean; revertProductConfirmationEnabled: boolean; restoreProductOnReloadEnabled: boolean; spellCheckEnabled: boolean; variableItemsMaskSymbol: string; fontList: string[] | { appFonts?: string[]; }; fontListMode: FontListMode.FontListModeType; defaultItemsConfig: IDefaultItemsConfig; userInfo: { [key: string]: string | IBarcodeData; }; perSurfaceConfiguration: IPerSurfaceConfiguration; productThemes: { [name: string]: IProductThemeConfig; }; defaultProductTheme: string; widgets: IWidgetsConfig; assetSources: IAssetSources; enableTrace: boolean; } /** * A configuration of widgets, that is defined for separate surfaces. * @remarks See the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/multipage-config.html|Per-surface configuration} topic for more details. * @example * ``` js *product: { * surfaces: [{ * name: "surface1", * printAreas: [{ designFile: "Postcard_side1" }] * }, * { * name: "surface2", * printAreas: [{ designFile: "Postcard_side2" }] * } * ] *}; * *config: { * perSurfaceConfiguration: { * "surface2": { * widgets: { * ObjectInspector: { * bgItemEnabled: false * }, * ColorPicker: { * showPaletteOnly: false, * sections: [ * { * type: "PaletteSection", * palette: [["rgb(0,0,0)", "rgb(255,255,255)"]] * } * ] * } * } * } * } *}; * ``` * @public */ export interface IPerSurfaceConfiguration { /** Key-value pairs, where the keys are surface names and the values are widget settings. */ [surfaceName: string]: { /** Settings for the Color Picker, the Toolbox, and the Object Inspector. */ widgets?: IWidgetConfigsForSurface; }; } /** * A structure defining sources for the Image Manager. * @remarks See the {@link https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/image-manager.html|Image manager} topic for more details. * @example The editor config may look as follows. * ``` json *{ * "assetSources": { * "My files": { * "type": "PrivateSource", * "allowedExtensions": [ "jpg", "jpeg", "png" ] * }, * "External urls": { * "type": "MemorySource", * "rootCategory": { * "assets": [ * { * "title": "Square", * "preview": "http://example.com/images/preview/2.jpg", * "source": "http://example.com/images/2.jpg" * }, * { * "title": "Buildings", * "preview": "http://example.com/images/preview/4.jpg", * "source": "http://example.com/images/4.jpg" * } * ], * "categories": [ * { * "name": "Stock images", * "assets": [ * { * "title": "Winter", * "preview": "http://example.com/images/preview/16.jpg", * "source": "http://example.com/images/16.jpg" * }, * { * "title": "Skating", * "preview": "http://example.com/images/preview/20.jpg", * "source": "http://example.com/images/20.jpg" * } * ] * } * ] * } * } * }, * "widgets": { * "AssetManager": { * "tabs": [ * { * "name": "My files", * "assetSourceInstance": "My files", * "iconClassName": "cc-icon-uploadable", * "controls": { "toolbarEnabled": false } * }, * { * "name": "The gallery based on external urls", * "assetSourceInstance": "External urls", * "iconClassName": "cc-icon-add-image" * } * ] * } * } *} * ``` * @public */ export interface IAssetSources { /** A set of sources of the Image Manager. */ [sourceInstanceName: string]: IAssetSources.IAssetSourceConfig; } /** * Configuration of image manager tabs. * @public */ export declare namespace IAssetSources { /** * A structure defining the source type of the Image Manager. * @example * ```json * { * "assetSources": { * "My files": { * "type": "PrivateSource", * "actionMode": { * "pdf": "Shape", * "svg": "Clipart" * } * } * } * } * ``` * @public */ interface IAssetSourceConfig<TType extends string = string> { /** Specifies a source type, one of {@link (IAssetSources:namespace).(IMemorySourceConfig:interface)|`"MemorySource"`}, {@link (IAssetSources:namespace).(IRemoteSourceConfig:interface)|`"RemoteSource"`}, {@link (IAssetSources:namespace).IDepositPhotosConfig|`"DepositPhotos"`}, {@link (IAssetSources:namespace).(IGallerySourceConfig:namespace).ICategory|`"PublicSource"`}, {@link (IAssetSources:namespace).IPrivateSourceConfig|`"PrivateSource"`}, or {@link (IAssetSources:namespace).ISocialNetworkSourceConfig|`"SocialNetworkSource"`}. */ type: TType; /** Defines how the Image Manager should import SVG, PDF, and PSD graphics. The default value is `"Vector"`. */ actionMode?: IActionMode; /** If this parameter is not set or its value is `"on"`, then the fetching of the image is performed using `crossOrigin = "anonymous"`. If `"off"`, images are requested without the `crossOrigin` attribute. The default value is `"on"`. */ crossOriginMode?: CrossOriginMode.CrossOriginModeType; } /** * A structure defining asset sources through direct URLs. * @example You can define images througn direct URLs with the following config. * ```json * { * "assetSources": { * "External urls": { * "type": "MemorySource", * "allCategoryEnabled": false, * "rootCategory": { * "assets": [ * { * "title": "Square", * "preview": "http://example.com/images/preview/2.jpg", * "source": "http://example.com/images/2.jpg" * }, * { * "title": "Buildings", * "preview": "http://example.com/images/preview/4.jpg", * "source": "http://example.com/images/4.jpg" * } * ], * "categories": [ * { * "name": "Stock images", * "assets": [ * { * "title": "Winter", * "preview": "http://example.com/images/preview/16.jpg", * "source": "http://example.com/images/16.jpg" * }, * { * "title": "Skating", * "preview": "http://example.com/images/preview/20.jpg", * "source": "http://example.com/images/20.jpg" * } * ] * } * ] * } * } * }, * "widgets": { * "AssetManager": { * "tabs": [ * { * "name": "The gallery based on external urls", * "assetSourceInstance": "External urls", * "iconClassName": "cc-icon-add-image" * } * ] * } * } * } * ``` * @public */ interface IMemorySourceConfig extends IAssetSourceConfig<"MemorySource"> { /** The object defining assests for the root category of this source. */ rootCategory: IMemorySourceConfig.ICategory; /** Disables the `All` category. The default value is `true`. */ allCategoryEnabled: boolean; } namespace IMemorySourceConfig { /** * A structure defining an asset category. * @example * ```json * { * "assetSources": { * "My files": { * "type": "PrivateSource", * "allowedExtensions": [ "jpg", "jpeg", "png" ] * }, * "External urls": { * "type": "MemorySource", * "rootCategory": { * "assets": [ * { * "title": "Square", * "preview": "http://example.com/images/preview/2.jpg", * "source": "http://example.com/images/2.jpg" * }, * { * "title": "Buildings", * "preview": "http://example.com/images/preview/4.jpg", * "source": "http://example.com/images/4.jpg" * } * ], * "categories": [ * { * "name": "Stock images", * "assets": [ * { * "title": "Winter", * "preview": "http://example.com/images/preview/16.jpg", * "source": "http://example.com/images/16.jpg" * }, * { * "title": "Skating", * "preview": "http://example.com/images/preview/20.jpg", * "source": "http://example.com/images/20.jpg" * } * ] * } * ] * } * } * }, * "widgets": { * "AssetManager": { * "tabs": [ * { * "name": "My files", * "assetSourceInstance": "My files", * "iconClassName": "cc-icon-uploadable", * "controls": { "toolbarEnabled": false } * }, * { * "name": "The gallery based on external urls", * "assetSourceInstance": "External urls", * "iconClassName": "cc-icon-add-image" * } * ] * } * } * } * ``` * @public */ interface ICategory { /** A category name. */ name?: string; /** An array of links to assets of this category. */ assets: IUrlAsset[]; /** An array of embedded categories. */ categories: ICategory[]; } /** * A structure defining links to images. * @example * ```json * { * ... * "categories": [ * { * "name": "Stock images", * "assets": [ * { * "title": "Winter", * "preview": "http://example.com/images/preview/16.jpg", * "source": "http://example.com/images/16.jpg" * }, * { * "title": "Skating", * "preview": "http://example.com/images/preview/20.jpg", * "source": "http://example.com/images/20.jpg" * } * ] * } * ] * } * ``` * @public */ interface IUrlAsset { /** A title of this image. This title appears below the image. */ title: string; /** A link to a thumbnail of this image. */ preview: string; /** A link to the full-size image. */ source: string; } } /** * A structure defining properties of the Depositphotos source. * @example * ```json * { * "assetSources": { * "[source]Deposit Photos": { * "type": "DepositPhotos", * "apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", * "size": "XL", * "insertItemConfirmationEnabled": false, * "startingQuery": "cats" * } * }, * * "widgets": { * "Toolbox": { * "buttons": [ * { * "type": "AssetManager", * "action": "Image", * "translationKey": "Toolbox.IMAGE", * "iconClass": "cc-icon-add-image" * } * ] * }, * * "AssetManager": { * "tabs": [ * { * "name": "Deposit Photos", * "assetSourceInstance": "[source]Deposit Photos", * "iconClassName": "cc-icon-deposit-photos" * } * ] * } * } * } * ``` * @public */ interface IDepositPhotosConfig extends IAssetSourceConfig<"DepositPhotos"> { /** The key required to use the Depositphotos API. To get this key, contact Depositphotos. */ apiKey: string; /** The size of images returned by the Depositphotos API. */ size: ImageSize.ImageSizeType; /** Allows you to filter assets by a user identifier in Depositphotos. By default, such a filtering is not performed. */ userId?: string; /** Displays a dialog box informing your users that they will need to pay for images at checkout. The default value is `true`. */ insertItemConfirmationEnabled?: boolean; /** The search query that will be executed for the first opening of the Depositphotos tab. If not specified, images are loaded by the most popular query. */ startingQuery?: string; } /** * A structure defining properties of the Depositphotos lightbox source. * @example * ```json * { * "assetSources": { * "[source]Deposit Photos Lightbox": { * "type": "DepositPhotosLightbox", * "apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", * "size": "XL", * "insertItemConfirmationEnabled": false, * "lightboxId": "xxxxx" * } * }, * * "widgets": { * "Toolbox": { * "buttons": [ * { * "type": "AssetManager", * "action": "Image", * "translationKey": "Toolbox.IMAGE", * "iconClass": "cc-icon-add-image" * } * ] * }, * * "AssetManager": { * "tabs": [ * { * "name": "Deposit Photos Lightbox", * "assetSourceInstance": "[source]Deposit Photos Lightbox", * "iconClassName": "cc-icon-deposit-photos-lightbox" * } * ] * } * } * } * ``` * @public */ interface IDepositPhotosLightboxConfig extends IAssetSourceConfig<"DepositPhotosLightbox"> { /** The key required to use the Depositphotos API. To get this key, contact Depositphotos. */ apiKey: string; /** The size of images returned by the Depositphotos API. */ size: ImageSize.ImageSizeType; /** Displays a dialog box informing your users that they will need to pay for images at checkout. The default value is `true`. */ insertItemConfirmationEnabled?: boolean; /** The lightbox identifier. */ lightboxId: string; } /** * @internal */ interface IArtLinkSourceConfig extends IAssetSourceConfig<"ArtLink"> { baseUrl: string; } /** * @internal */ interface IQueryBasedRemoteSourceConfig extends IAssetSourceConfig<"QueryBasedRemoteSource"> { baseUrl: string; productInfo: IProductInfo; baseNameRegexp: string; applier: { itemNamePattern: string; fieldList: string[]; }; endpoints: IEndPoint[]; } /** * @internal */ interface IProductInfo { imageUrl: string; description: string; additionalFields: [{ id: string; title: string; }]; } /** * @internal */ interface IEndPoint { url: string; method: string; responseDictionary: { [name: string]: string; }; requestParams: { [name: string]: string; }; title: string | { [lang: string]: string; }; } /** * A structure defining properties of the Google Drive and Amazon S3 sources. * @remarks {@link https://customerscanvas.com/dev/editors/iframe-api/howto/asset-sources/google-drive.html|Google Drive} and {@link https://customerscanvas.com/dev/editors/iframe-api/howto/asset-sources/amazon-s3.html|Amazon S3} for more details about configuring the service. * @example * ```json * { * "assetSources": { * "[source]Google Drive": { * "type": "RemoteSource", * "url": "https://example.com:3124/", * "subfolder": "/animals/cats/", * "fileSortTypes": [ * { * "asc": "createdTime", * "desc": "createdTime desc", * "title": { * "en": "Creation time", * "de": "Erstellungszeit" * } * }, * { * "asc": "starred", * "desc": "starred desc", * "title": { * "en": "Starred", * "de": "Markiert" * } * } * ], * "requestParams": { * "token": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", * "corpora": "domain", * "allowedItemOwnership": "all" * } * } * } * } * ``` * @public */ interface IRemoteSourceConfig extends IAssetSourceConfig<"RemoteSource"> { /** The URL of the GoogleDriveWebService communicating with the remote source. */ url: string; /** The sort order, according to which a list of images appears in the Image Manager's gallery. */ folderSortType?: string; /** The sort order of folders in the navigation tree of the Image Manager. */ fileSortTypes?: IRemoteSourceConfig.ISortType[]; /** Restricts access to images by specifying a subfolder name. Alternatively, you can specify `rootId` if the subfolder has an ID. */ subfolder?: string; /** Restricts access to images by specifying a rootId. Alternatively, you can specify `subfolder` if the subfolder has a name. */ rootId?: string; /** Additional parameters of HTTP requests. For example, you need to pass the `token` and `corpora` properties for the Google Drive source in the case if you have a service account. The Google Drive source can also take `allowedItemOwnership` specifying what asset types should appear in the Image Manager: `personal`, `shared`, or `all`. For Amazon S3, you must pass the `userId` (a folder in S3 backet) and `token`. */ requestParams?: { [name: string]: string; }; /** Defines the appearance of the root folder. */ rootFolder?: IRemoteSourceConfig.IRootFolderConfig; /** If `true`, allows your users to upload their images to your Amazon S3 bucket. The default value is `false`. */ uploadEnabled?: boolean; /** @internal */ requestUploadUrl?: boolean; /** @internal */ uploadUrl?: string; /** An array of image types that the user is allowed for uploading to Amazon S3. The complete list of supported extentions is ["jpg", "jpeg", "png", "bmp", "gif", "tiff", "svg", "pdf", "ai", "psd"]. */ allowedExtensions?: string[]; /** Allows for overwriting images with existing names when uploading images to Amazon S3. If `false`, the name of the uploaded file is changed by adding `_1`, `_2`, etc. to it. The default value is `false`. */ overwrite?: boolean; /** If `true`, the Image Manager closes as soon as it uploads a user image to Amazon S3. After that, this image is automatically inserted into the placeholder or image layer. The default value is `false`. */ autoInsertUploadedFile?: boolean; } namespace IRemoteSourceConfig { /** * A structure defining options to sort assets. * @example * ```json * { * "assetSources": { * "[source]Google Drive": { * "type": "RemoteSource", * "url": "https://example.com", * "subfolder": "/animals/cats/", * "fileSortTypes": [ * { * "asc": "createdTime", * "desc": "createdTime desc", * "title": { * "en": "Creation time", * "de": "Erstellungszeit" * } * }, * { * "asc": "starred", * "desc": "starred desc", * "title": { * "en": "Starred", * "de": "Markiert" * } * } * ] * } * } * } * ``` * @public */ interface ISortType { /** The ascending sort order. */ asc: string; /** The descending sort order. For Google Drive, to enable the descending order by the creation time, add the `desc` modifier `"desc": "createdTime desc"`. */ desc?: string; /** An array of localized titles of this sort option. You can specify a number of translations. */ title: string | { [lang: string]: string; }; } /** * A structure defining the appearance of the root folder. * @example * ```json * { * "assetSources": { * "[source]Google Drive": { * "type": "RemoteSource", * "url": "https://example.com:3124/", * "rootFolder": { * "show": true, * "title": "Company Assets" * } * } * } * } * ``` * @public */ interface IRootFolderConfig { /** Displays the root folder of the remote source. The default value is `false`. */ show: boolean; /** This title appears in the Image Manager for the root folder. The default value is `"Root Folder"`. */ title: string; } } /** * A structure defining properties of the user gallery and public gallery. * @example * ```json * { * "assetSources": { * "My files": { * "type": "PrivateSource", * "allowedExtensions": [ "jpg", "jpeg", "png" ] * } * } * } * ``` * @public */ interface IGallerySourceConfig extends IAssetSourceConfig<"PublicSource" | "PrivateSource"> { /** Allows you to specify a folder from which your users can select images in the `PublicSource`. You can also specify allowed subfolders of this folder. */ rootCategory?: IGallerySourceConfig.ICategory; /** An array of image types that the user is allowed for uploading. The complete list of supported extentions is ["jpg", "jpeg", "png", "bmp", "gif", "tiff", "svg", "pdf", "ai", "psd"]. */ allowedExtensions: string[]; } /** * A structure defining properties of the user states gallery. * @example * ```json * { * "assetSources": { * "States": { * "type": "StatesSource", * "displayBackSidePreview": false * } * } * } * ``` * @public */ interface IStatesSourceConfig extends IAssetSourceConfig<"StatesSource"> { /** Allows you to specify if preview for the back side of a design should be displayed. */ displayBackSidePreview?: boolean; } /** * A structure defining properties of asset sources. */ namespace IGallerySourceConfig { /** * A structure restricting folders in the public gallery. * * @example This example illustrates how you can display images from the following folders: * * - `/PublicGalleryFolder/logos/photos/` * * - `/PublicGalleryFolder/logos/photos/buildings/` and subfolders * * - `/PublicGalleryFolder/logos/shapes/` and subfolders * * ```json * { * "assetSources": { * "Public Gallery": { * "type": "PublicSource", * "allowedExtensions": [ "gif", "jpg", "svg", "pdf" ], * "rootCategory": { * "name": "logos", * "categories": [ * { * "name": "photos", * "categories": [ * { * "name": "buildings" * } * ] * }, * { * "name": "shapes" * } * ] * } * } * } * } * ``` * @public */ interface ICategory { /** The name of a folder to be displayed. */ name: string; /** An array of subfolders to be displayed. */ categories?: ICategory[]; } } /** * A structure defining properties of the private user gallery. * @example * ```json * { * "assetSources": { * "My files": { * "type": "PrivateSource", * "allowedExtensions": [ "jpg", "jpeg", "png", "bmp", "svg", "pdf" ], * "groupingByDateEnabled": true, * "autoInsertUploadedFile": true, * "overwrite": true, * "path": "order_3", * "actionMode": { * "pdf": "Shape", * "svg": "Shape" * } * } * } * } * ``` * @public */ interface IPrivateSourceConfig extends IGallerySourceConfig { /** If `true`, arranges images by date. The list of dates when the user uploaded the images appears in the `Categories`. The default value is `false`. */ groupingByDateEnabled?: boolean; /** Allows for overwriting images with existing names. If `false`, the name of the uploaded file is changed by adding `_1`, `_2`, etc. to it. The default value is `false`. */ overwrite?: boolean; /** If `true`, the `Asset Manager` closes as soon as it uploads a user image. After that, this image is automatically inserted into the placeholder or image layer. The default value is `false`. */ autoInsertUploadedFile?: boolean; /** A subfolder of `userdata/user/images`, where the `Asset Manager` saves uploaded files. By default, this is an empty string, and images are saved in the `userdata/user/images` folder. */ path?: string; } /** * A structure defining the API key of social networking services. * @example * ```json * { * "assetSources": { * "Facebook": { * "type": "SocialNetworkSource", * "network": "facebook", * "apiKey": "123456789012345" * }, * "Instagram": { * "type": "SocialNetworkSource", * "network": "instagram", * "apiKey": "88884444aaaa222288883333ffff6666" * } * }, * "widgets": { * "Toolbox": { "buttons": [ "Image" ] }, * "AssetManager": { * "tabs": [ * { * "name": "Facebook", * "assetSourceInstance": "Facebook", * }, * { * "name": "Instagram", * "assetSourceInstance": "Instagram", * } * ] * } * } * } * ``` * @public */ interface ISocialNetworkSourceConfig extends IAssetSourceConfig<"SocialNetworkSource"> { /** The name of a social networking service. */ network: SocialNetwotkSourceType; /** The key required to use an API of the social networking service. */ apiKey: string; } /** * Supported social networks. * @public */ enum SocialNetwotkSourceType { Instagram = "instagram", Facebook = "facebook" } } /** @internal */ export interface IGridConfigParsed extends IGridConfig { horizontalColor: string; verticalColor: string; stepX: number; stepY: number; lineWidthPx: number; enabled: boolean; } /** @internal */ export interface IViolationWarningsSettingsConfigParsed extends IViolationWarningsSettingsConfig { qualityMeter: IQualityMeterConfigParsed; safetyLineViolationWarningEnabled: boolean; regionViolationWarningEnabled: boolean; bleedViolationWarningEnabled: boolean; textCropViolationWarningEnabled: boolean; rasterElements: IRasterElementsConfigParsed; minFontSize: IMinFontSizeConfigParsed; shapeViolationsEnabled: boolean; inPlaceNotSupportedWarningEnabled: boolean; tolerance?: number; } /** @internal */ export interface IQualityMeterConfigParsed extends IQualityMeterConfig { qualityLevels: IQualityLevelsConfigParsed; enabled: boolean; } /** @internal */ export interface IQualityLevelsConfigParsed extends IQualityLevelsConfig { warning: number; bad: number; } /** @internal */ export interface IRasterElementsConfigParsed extends IRasterElementsConfig { enabled: boolean; severity: ValidationSeverity; } /** @internal */ export interface IMinFontSizeConfigParsed extends IMinFontSizeConfig { enabled: boolean; severity: ValidationSeverity; } /** @internal */ export declare enum ValidationSeverity { Warning = "Warning", Error = "Error" } /** @internal */ export interface IRulersConfigParsed extends IRulersConfig { enabled: boolean; unit: RulersConfigUnit; customUnitScale: number; origin: { X: number; Y: number; }; } /** @internal */ export interface ISnapLinesConfigParsed extends ISnapLinesConfig { items: ISnapItemConfigurationParsed; printArea: ISnapElementConfigurationParsed; safetyLines: ISnapElementConfigurationParsed; region: ISnapElementConfigurationParsed; grid: ISnapElementConfigurationParsed; interactiveZones: ISnapElementConfigurationParsed; } /** @internal */ export interface ISnapElementConfigurationParsed extends ISnapElementConfiguration { tolerance: number; color: string; enabled: boolean; priority: number; } /** @internal */ export interface ISnapItemConfigurationParsed extends ISnapItemConfiguration { includeLocked: boolean; } /** @internal */ export interface IRotationConfigParsed extends IRotationConfig { type: RotationType; } /** @internal */ export interface ICanvasConfigParsed extends ICanvasConfig { containerColor: string; color: string; shadowEnabled: boolean; paddingPct: number; pinchZoomEnabled: boolean; maskedPlaceholderUnderscoreEnabled: boolean; canvasItemHoverEnabled: boolean; suppressOutOfRegionManipulation: boolean; violationWarningButtonsEnabled: boolean; qualityChangeContainersEnabled: boolean; /** @deprecated Instead, you can fine-tune the floating toolbar through the {@link ICanvasConfigParsed.floatingToolbar} object. */ floatingItemToolbarEnabled: boolean; floatingToolbar: IFloatingItemToolbarConfig; autoItemSelectionEnabled: boolean; multipleObjectsUpdateOptimizationEnabled: boolean; zoom: IRangeParamsParsed; rulers: IRulersConfigParsed; snapLines: ISnapLinesConfigParsed; rotation: IRotationConfigParsed; printZone: IPrintZoneConfiguration; handlers: IHandlersConfiguration; autoPlaceholderEditModeEnabled: boolean; gridVisible: boolean; safetyLinesVisible: boolean; snapLinesVisible: boolean; historySize: number; textEditor: TextEditorMode; mockupMarginWorkaroundEnabled: boolean; curvedTextBaselineDrawStates: ItemHandlerState[]; rotatedTextInPlaceEditEnabled: boolean; inactiveContainerTransparencyEnabled: boolean; inactiveContainerTransparencyLevel: number; scrollbarEnabled?: boolean; }