import opentype, { Font, Glyph } from "opentype.js";
import { FunctionComponent, ReactNode, ReactElement } from "react";
import { Image as _Image1 } from "canvas";
export const generate: () => string;
/**
 * The state of the layouts.
 * In order for this to JSON.stringify correctly,
 * elements of this object may only be:
 * - booleans,
 * - numbers,
 * - strings,
 * - null,
 * - arrays,
 * - objects,
 * - values with a toJSON method (including Date).
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description
 */
export interface LayoutsState {
    layouts: {
        [id: string]: LayoutState;
    };
    serializableWorkflow: SerializableWorkflow;
}
export interface LayoutState {
    /**
     * The elements currently on this layout.
     */
    elements: LayoutElement[];
    /**
     * A file describing the properties of this layout.
     */
    layout: ILayout;
    /**
     * A unique ID regenerated each time this layout is changed.
     */
    modificationID: string;
}
/**
 * Represents a layout contained within a specific user created design.
 */
export interface ILayout {
    /**
     * The internal identifier for this layout.
     */
    id: string;
    /**
     * A link to the json resource describing this layout
     */
    layoutPath?: string;
    /**
     * The index this layout appears at in its design
     */
    index: number;
    /**
     * An id for the panel associated to this layout.
     */
    panelId: string;
    /**
     * The date this layout was created.
     */
    createdAt: Date;
    /**
     * The date this layout was last updated.
     */
    updatedAt: Date;
    /**
     * The height of the layout. This matches the background element on the canvas as a convenience.
     */
    height: number;
    /**
     * The width of the layout. This matches the background element on the canvas as a convenience.
     */
    width: number;
    /**
     * When true this layout should contain no background fill.
     */
    transparentBackground?: boolean;
    previewRegion?: {
        height: number;
        width: number;
        top: number;
        left: number;
    };
    name: string;
}
/**
 * The possible types for an element.
 */
export enum LayoutElementType {
    Frame = "frame",
    Image = "image",
    Illustration = "illustration",
    Textbox = "textbox",
    Patchwork = "patchwork"
}
/**
 * Represents an element on the SVG canvas. This may comprise of multiple SVG elements when
 * output such as path elements, defs, etc. All concrete elements must implement this interface.
 */
export interface LayoutElement {
    /**
     * The unique identifier for this element.
     */
    id: string;
    /**
     * If the element was made from a workflow step, this is its step name.
     */
    stepName?: string;
    /**
     * If the element was made from a workflow step, this is its region.
     */
    stepRegion?: Region;
    /**
     * The type of this element
     */
    type: LayoutElementType;
    /**
     * Horizontal offset from top left origin point.
     */
    x: number;
    /**
     * Vertical offset from top left origin point.
     */
    y: number;
    /**
     * The height in pixels of the element.
     */
    width: number;
    /**
     * The height in pixels of the element.
     */
    height: number;
    /**
     * The rotation in degrees.
     */
    rotation: number;
    /**
     * The index of this element on the canvas, 0 is lower, > 0 is higher
     */
    layerIndex?: number;
    /**
     * The element is considered immutable and shouldn't be modifiable by the user.
     */
    immutable?: boolean;
    /**
     * When true this element should be rendered on top of all other elements always.
     */
    productOverlay?: boolean;
    /**
     * When true, this element will be removed from SVGString output when
     * the removeExcludedElements flag is set to true.
     */
    excludeFromExport?: boolean;
    /**
     * Injected by the LayoutsProvider if required. Shouldn't be
     * used by the user. This is a simple way to pass global rendering configuration
     * to individual elements without having to set up a react context.
     */
    _renderingConfiguration?: RenderingConfiguration;
}
export interface Region {
    top: number;
    left: number;
    width: number;
    height: number;
    layerIndex?: number;
    rotation: number;
    panelId: string;
    immutable?: boolean;
    adjustmentBoundary?: {
        x: number;
        y: number;
        height: number;
        width: number;
    };
}
/**
 * Specifies configuration for rendering a Papyrus canvas as an SVG string.
 */
export interface RenderingConfiguration {
    /**
     * Sets the viewbox to a custom value when subregions are desired.
     */
    region?: PreviewRegion;
    /**
     * Excludes marked elements from the SVG output when true.
     */
    removeExcludedElements?: boolean;
    /**
     * When true will skip adding a clip mask on the layout bounds in the SVG. This clip
     * is useful when rendering an advanced editor for the SVG but can cause issues elsewhere.
     */
    omitClipMask?: boolean;
    /**
     * When true any cached data will be ignored and assets will be rendered in full
     * with the properties they are provided.
     */
    omitCachedFields?: boolean;
    /**
     * When true, spot colors will be output, when provided, into any
     * fill or stroke style in an illustration.
     */
    spotColors?: boolean;
    /**
     * Allow for debug rendering on elements.
     */
    debug?: boolean;
}
export interface IllustrationElement extends LayoutElement {
    /**
     * When provided a src will be used to rehyrdrate the svg field. On serialization
     * the svg field will be dropped and only src will remain.
     */
    src?: string;
    /**
     * The string representation of the SVG element. A valid SVG document.
     */
    svg?: string;
    /**
     * A cached image representation of this SVG, to be used for faster
     * rendering in performance critical code.
     */
    cachedObjectURL?: string;
    /**
     * A map of ID to color code, used to store color selections in the SVG.
     */
    colors: {
        [key: string]: ColorDefinition;
    };
}
/**
 * Represents a raster image on the Papyrus canvas.
 */
export interface ImageElement extends LayoutElement {
    /**
     * A src for the image. This will be used in place of the data URL in server environments and should
     * be original image quality.
     */
    src: string;
    /**
     * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
     */
    preserveAspectRatio?: string;
}
export interface PatchworkElement extends LayoutElement {
    svg: string;
    patchScale: number;
    patchX: number;
    patchY: number;
}
export enum TextAlgorithm {
    /**
     * An algorithm that finds the best size for text based
     * on a range minSize <-> maxSize
     * NOTE: Default, this is how we've calculated historically.
     */
    Autosize = "Autosize",
    /**
     * An algorithm that follows behavior of other popular
     * text editing applications.
     */
    Traditional = "Traditional"
}
export interface TextboxElement extends LayoutElement {
    /**
     * Horizontal alignment of text. eg. left, center, right.
     */
    align?: string;
    /**
     * Fill color of this text. Any value that can be parsed by css fill should work here.
     */
    fill: string;
    /**
     * The font size.
     */
    fontSize: number;
    /**
     * Information about the font family used to render this text.
     */
    fontData: FontData | undefined;
    /**
     * Text computed for this textbox.
     */
    text?: string;
    /**
     * Per element user input. Not used by the layout engine. Instead
     * used to store user input for textbox to preserve newlines.
     */
    input?: string;
    /**
     * Should the text layout top to bottom.
     */
    vertical?: boolean;
    /**
     * The height between text lines.
     */
    lineHeight?: number;
    /**
     * The alignment of text vertically, top center or bottom.
     */
    verticalAlign: string;
    /**
     * When true the text will be rendered using the provided curve.
     */
    curved?: boolean;
    /**
     * The curve to use when curved = true. Ignored otherwise.
     */
    paths?: string[];
    /**
     * The algorithm to use when laying out text.
     */
    algorithm?: TextAlgorithm;
}
/**
 * A pattern object stores data relevant for displaying an image within a frame, including
 * the source for the image itself and also dimensions and offsets.
 */
interface Pattern extends Omit<LayoutElement, "type"> {
    /**
     * The image to use when a file is generated, this should be an original high resolution source file.
     */
    src: string;
    /**
     * Scaling X of image within frame.
     */
    scaleX: number;
    /**
     * Scaling Y of image within frame.
     */
    scaleY: number;
}
export interface FrameElement extends LayoutElement {
    path: string;
    disablePlaceholder?: boolean;
    scaleX: number;
    scaleY: number;
    opacity?: number;
    pattern?: Pattern;
    focalBlur?: boolean;
    focalBlurStrength?: number;
    focalBlurRadius?: number;
}
export interface FontData {
    assetUrl: string;
    name: string;
}
export interface ColorDefinition {
    /**
     * Represents the color value in hex or any other
     * browser supported format. This will be used when rendering the canvas
     * in an environment that doesn't support spot color.
     */
    browserValue: string;
    /**
     * A spot color definition. This is optional and will
     * be applied to the SVG returned by toString when configured allowing
     * filegen to output spot colors.
     */
    spotColor?: SpotColorDefinition;
}
/**
 * A container for data related to a specific spotcolor. toString
 * can be used to output a string expected by Filegen inside a stroke or fill.
 */
export interface SpotColorDefinition {
    /**
     * The name of the profile being used.
     */
    profileName: string;
    /**
     * The named color expected by the profile.
     */
    namedColor: string;
}
/**
 * A workflow step in the process of being serialized or deserialized.
 */
export interface SerializableStep {
    stepName: string;
    storage?: StepStorage;
    selectedVariants?: SerializableVariant[];
}
export interface SerializableWorkflow {
    steps: SerializableStep[];
}
export interface SerializableVariant {
    id: string;
    priceModifier: number;
}
export interface StepStorage {
    bulkIsConnected?: boolean;
    color?: string;
    colour?: string;
    colors?: {
        [key: string]: IllustrationColorObject;
    };
    currentFrameSource?: string;
    defaultCleared?: boolean;
    inputText?: string;
    patchworkOffsets?: PatchworkOffsets[];
    text?: string;
    videoShortUrl?: string;
    videoUrl?: string;
    framePatternSrc?: string;
    frameOffsets?: FrameOffsets;
}
export interface IllustrationColorObject {
    browserValue: string;
    spotColor?: {
        profileName: string;
        namedColor: string;
    };
}
export interface PatchworkOffsets {
    scale: number;
    xOffset: number;
    yOffset: number;
}
export interface FrameOffsets {
    y: number;
    x: number;
    zoom: number;
}
export enum UnitOfMeasurement {
    Pixel = "px",
    Millimeter = "mm",
    Centimeter = "cm"
}
/**
 * Defines the direction of scaling, can be used
 * to determine the anchor point of a scale calculation.
 */
export enum ScaleAxis {
    North = 0,
    Northeast = 1,
    East = 2,
    Southeast = 3,
    South = 4,
    Southwest = 5,
    West = 6,
    Northwest = 7
}
/**
 * A point in a 2D coordinate space.
 */
export interface Point {
    x: number;
    y: number;
}
export interface CanvasRegion {
    top: number;
    left: number;
    width: number;
    height: number;
}
export interface FrameData {
    /**
     * The path data for a frame SVG
     */
    path: string;
    /**
     *  The viewbox width
     */
    width: number;
    /**
     * The viewbox height.
     */
    height: number;
}
export interface PatternImageData {
    /**
     * The original src of the image.
     */
    src: string;
    /**
     *  The natural width of the image.
     */
    width: number;
    /**
     * The natural height of the image.
     */
    height: number;
    /**
     * Cached result of the calculation width/height.
     */
    aspect: number;
}
/**
 * Contains configuration for font sizing.
 *
 * When min/maxSize values are set we interpret the textbox as being
 * in "Variable Mode" which essentially
 * auto sizes the text based on a given region.
 *
 * When only size is set, we interpret the textbox as being in "Fixed Mode" where
 * text is computed at a fixed font size.
 */
export interface SizeRange {
    /**
     * Variable Mode: A maximum size
     */
    maxSize?: number;
    /**
     * Variable Mode: Minimum Size
     */
    minSize?: number;
    /**
     * Fixed Mode: A Fixed font size to be used at all times.
     */
    size: number;
}
export interface Workflow {
    defaultPreviewPanelIndex?: number;
    deletedAt?: Date;
    id: string;
    previewAssetKey?: string;
    previewImageUrl?: string;
    enableAdvancedMode?: boolean;
    name: string;
    introduction: string;
    panels: WorkflowPanel[];
    showModelOnFinishStep: boolean;
    showPricing?: boolean;
    baseCurrency?: string;
    showPlusInVariantPrices?: boolean;
    allowProofDownload: boolean;
    steps: Step<AnyStepData>[];
    stepGroups: StepGroup[];
    theme?: {
        primaryColour: string;
        textColour: string;
    };
    globalPreviewConfig?: PreviewConfiguration;
    finalizeStepConfig?: FinalizeStepConfig;
    partnerId?: string;
}
export interface WorkflowPanel {
    height: number;
    width: number;
    name: string;
    index: number;
    transparentBackground?: boolean;
    previewRegion?: PreviewRegion;
}
export interface PreviewRegion {
    top: number;
    left: number;
    width: number;
    height: number;
}
export interface StepGroup {
    id?: string;
    name: string;
    stepNames: string[];
}
export interface FinalizeStepConfig {
    termsMarkdown?: string;
    modelAnimation?: ModelAnimation;
    lookAtAnimation?: CameraAnimation;
    previewRegion?: {
        left: number;
        top: number;
        width: number;
        height: number;
    };
}
/**
 * Settings related to the 3D preview for use at either a global level or at per step level. The global
 * values can be a default if per step values aren't specified.
 */
export interface PreviewConfiguration {
    /**
     * @deprecated Removed in favor of backgroundColor as a simple hexadecimal color value.
     */
    clearColor?: [number, number, number];
    /**
     * The color expected to be seen in the background of the product
     */
    backgroundColor?: string;
    /**
     * The closest zoom the camera can achieve to the product.
     */
    maxZoomOverride?: number;
    /**
     * The furthest zoom the camera can achieve to the product.
     */
    minZoomOverride?: number;
    /**
     * The environment file used to calculate product lighting.
     */
    environmentFile?: string;
    /**
     * The lowest point, vertically, that the camera can rotate to.
     * https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
     */
    lowerBetaLimitDeg?: number;
    /**
     * The highest point, vertically, that the camera can rotate to.
     * https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
     */
    upperBetaLimitDeg?: number;
    /**
     * The leftmost point, horizontally, that the camera can rotate to.
     * https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
     */
    lowerAlphaLimitDeg?: number;
    /**
     * The rightmost point, horizontally, that the camera can rotate to.
     * https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
     */
    upperAlphaLimitDeg?: number;
    /**
     * When set the product while rotate slowly
     */
    autoRotation?: boolean;
    /**
     * Time in milliseconds before the product starts rotating after a user input has taken control.
     */
    idleTimeBeforeRotation?: number;
    /**
     * When set the 3D preview won't attempt to orient the product automatically to its front view at load.
     */
    disableAutomaticOrientation?: boolean;
    /**
     * When true the action bar won't be displayed to the user.
     */
    disableActionBar?: boolean;
}
export interface AnimationData {
    lookAtAnimation?: CameraAnimation;
    modelAnimation?: ModelAnimation;
}
export interface ModelAnimation {
    /**
     * A value it seconds along the animation timeline to begin at.
     */
    from: number;
    /**
     * A value in seconds along the animation timeline to end at.
     */
    to?: number;
    /**
     * When true the animation will loop. The only behaviour currently is to reset
     * back to from but we could have it bounce back and forth and/or follow a curve.
     */
    loop: boolean;
}
/**
 * A CameraAnimation specifies a discrete state that the camera should
 * animate to. This state represents the final position of the camera after animations have run.
 */
export interface CameraAnimation {
    /**
     * The longitutude in degrees the camera should animate to.
     */
    lonDeg: number;
    /**
     * The lattitude in degrees the camera should animnate to.
     */
    latDeg: number;
    /**
     * An optional target for the camera to focus on in the scene.
     */
    target?: {
        x: number;
        y: number;
        z: number;
    };
    /**
     * A value in scene units specifying camera distance from the target.
     */
    radius?: number;
}
export interface Step<T extends AnyStepData = AnyStepData> {
    type: StepType;
    stepTitle: string;
    stepName: string;
    helpText?: string;
    mandatory?: boolean;
    data: T;
    /**
     * @deprecated use optionId instead.
     */
    option?: IServerModel<OptionResource>;
    optionId?: string;
    conditions?: Condition[];
}
export interface Condition {
    requiredVariantSelections: string[];
    action: string;
    targetStepName: string;
}
export interface ResourceLink {
    /**
     * The type of resource we're dealing with.
     */
    rel: string;
    /**
     * A link to be followed for the resource.
     */
    href: string;
    /**
     * The title, if present, will contain a human readable string for display
     * where relevant.
     */
    title?: string;
}
export interface IServerModel<T = unknown> {
    data: T;
    links: ResourceLink[];
}
export interface OptionResource {
    id?: string;
    localId?: string;
    name: string;
    type?: string;
    variants: VariantResource[];
    defaultVariant?: string;
    workflowId?: string;
    public?: boolean;
    displayType?: string;
}
export interface VariantResource {
    id?: string;
    name: string;
    priceModifier: number;
    /**
     * @deprecated use assetKey instead.
     */
    asset?: IServerModel<Asset>;
    /**
     * @deprecated use displayImageKey instead.
     */
    displayImage?: IServerModel<Asset>;
    /**
     * @deprecated use materialId instead.
     */
    material?: IServerModel<MaterialResource>;
    /**
     * @deprecated use thumbnailKey instead.
     */
    thumbnail?: IServerModel<Asset>;
    assetKey?: string;
    displayImageKey?: string;
    thumbnailKey?: string;
    materialId?: string;
    color?: string;
    localId?: string;
    default?: boolean;
}
/**
 * Represents a material resource that can be additively applied to
 * a material targeted in the scene.
 */
export type MaterialResource = {
    /**
     * A unique identified for this material.
     */
    id: string;
    /**
     * The name of this material
     */
    name: string;
    /**
     * Defines the base color of a surface before any other calculations are made.
     */
    albedoMapKey?: string;
    /**
     * Defines the transparency of a surface.
     */
    alphaMapKey?: string;
    /**
     * Defines shadowing on a surface.
     */
    ambientMapKey?: string;
    /**
     * Defines the amount of light being emitted from a surface.
     */
    emissionMapKey?: string;
    /**
     * Identical to roughness.
     */
    metallicMapKey?: string;
    /**
     * Defines the direction light will bounce in when it hits a point on a surface.
     */
    normalMapKey?: string;
    /**
     * Used to define how smooth a surface is.
     */
    roughnessMapKey?: string;
    /**
     * Used to define refreaction of light on a surface.
     */
    refractionMapKey?: string;
    /**
     * The intensity of refraction, when refraction is enabled via a texture.
     */
    refractionIntensity?: number;
    /**
     * When enabled the material will be displayed with a clearcoat affect for simulating coated plastic surfaces.
     */
    clearCoat: MaterialEffectMode;
    /**
     * Index of refraction when clear coat is enabled.
     */
    clearCoatIOR?: number;
    /**
     * The date that this material resource was created
     */
    createdAt: string;
    /**
     * The date that this material resource was last updated.
     */
    updatedAt: string;
};
/**
 * Used to specify the behavior of a material effect such as clearcoat, sheen and translucency.
 */
export enum MaterialEffectMode {
    /**
     * When a material variant effect specifies 'None' the effect doesn't change in any way. This is the default behavior.
     */
    None = "None",
    /**
     * When a material variant effect specifies 'RemoveWhenSelected' the effect is removed.
     */
    RemoveWhenSelected = "RemoveWhenSelected",
    /**
     * When a material variant effect specifies 'ApplyWhenSelected' the effect is enabled.
     */
    ApplyWhenSelected = "ApplyWhenSelected"
}
export interface Asset {
    /**
     * The path of the asset within the bucket.
     */
    key: string;
    /**
     * The name of this asset, the file name by default, otherwise a name set by the user.
     */
    name?: string;
    /**
     * The time that this asset was uploaded.
     */
    createdAt: number;
    /**
     * The ID of this asset's license.
     */
    licenseId: string;
    /**
     * The content type registered with the bucket.
     */
    mimeType: string;
    /**
     * The ID of the person that uploaded this asset.
     */
    ownerId: string;
    /**
     * The price to use this asset.
     */
    price: number;
    /**
     * The asset type being dealt with.
     */
    type: AssetType;
    /**
     * True when this asset is publicly available to anyone.
     */
    public: boolean;
    /**
     * All versions for this asset, including the "latest" one which is the default and represented
     * by the key of the asset itself.
     */
    objectVersions: AssetObjectVersion[];
    /**
     * A list of tags for organisational purposes.
     */
    tags: AssetTag[];
}
/**
 * An object version is a snapshow of an asset at a given point in time. Each time
 * the user updates the file associated to an asset a new object version is created.
 * Users can then see a timeline of all object versions and switch between them.
 */
export interface AssetObjectVersion {
    /**
     * The size of the file in bytes.
     */
    size: number;
    /**
     * A timestamp for when this version was created.
     */
    timestamp: string;
    /**
     * The id of the version, this is required in cases where we want to perform
     * specific operations on a version such as making it the latest one or deleting it.
     */
    versionId: string;
    /**
     * The url that this asset should be called on when we want to get it,
     * instead of the base key. This key is
     */
    versionedKey: string;
}
/**
 * A tag for organisation of assets
 */
export interface AssetTag {
    /**
     * A unique ID.
     */
    id: string;
    /**
     * The human friendly display name of the tag.
     */
    name: string;
    /**
     * The key of the asset the tag is associated to.
     */
    assetKey: string;
    /**
     * The partner that owns that asset & tag.
     */
    partnerId: string;
}
export enum AssetType {
    Font = "Font",
    Frame = "Frame",
    Illustration = "Illustration",
    Image = "Image",
    Model = "Model",
    Material = "Material",
    Patchwork = "Patchwork",
    Color = "Color",
    QuestionnaireCollateral = "QuestionnaireCollateral",
    RequestCollateral = "RequestCollateral",
    SignupCollateral = "SignupCollateral",
    Video = "Video",
    ColorProfile = "ColorProfile"
}
export enum StepType {
    Bulk = "Bulk",
    DigitalContent = "DigitalContent",
    Finish = "Finish",
    Frame = "Frame",
    Illustration = "Illustration",
    Introduction = "Introduction",
    Material = "Material",
    Model = "Model",
    Module = "Module",
    Patchwork = "Patchwork",
    Picture = "Picture",
    Photo = "Photo",
    ProductOverlay = "ProductOverlay",
    Question = "Question",
    Shape = "Shape",
    SilentIllustration = "SilentIllustration",
    Text = "Text"
}
export enum StepAspectType {
    Color = "Color",
    Colors = "Colors",
    Selection = "Selection",
    Selections = "Selections",
    Text = "Text",
    Upload = "Upload"
}
export interface StepAspect {
    stepName: string;
    stepType: StepType;
    aspectType: StepAspectType;
}
export type AnyStepData = AnimationData | BulkStepData | DigitalContentStepData | FinalizeStepData | FrameStepData | IllustrationStepData | MaterialStepData | ModelStepData | ModuleStepData | PatchworkStepData | PictureStepData | QuestionStepData | ShapeStepData | SilentStepData | TextStepData;
export interface BulkStepData extends AnimationData {
    aspects: StepAspect[];
}
export interface DigitalContentStepData extends AnimationData, RegionData {
    baseUrl: string;
    varyUpload?: boolean;
}
export interface FrameStepData extends AnimationData, RegionData {
    hideSelectionInCart?: boolean;
    hideImageInCart?: boolean;
    displaySelectionOnFinishStep?: boolean;
    displayImageOnFinishStep?: boolean;
    disablePlaceholder?: boolean;
    markSelectionAsCustomField?: boolean;
    markImageAsCustomField?: boolean;
    focalBlur?: boolean;
    focalBlurRadius?: number;
    focalBlurStrength?: number;
    forceImageCover?: boolean;
    overlayImageKey?: string;
    placeholderImageKey?: string;
    varySelection?: boolean;
    varyUpload?: boolean;
}
export interface IllustrationStepData extends AnimationData, RegionData, Colorable {
    hideSelectionInCart?: boolean;
    hideColorsInCart?: boolean;
    displaySelectionOnFinishStep?: boolean;
    displayColorsOnFinishStep?: boolean;
    markSelectionAsCustomField?: boolean;
    markColorsAsCustomField?: boolean;
    assetKeys?: string[];
    assets?: StepAsset[];
    colours?: string[];
    defaultAssetKey?: string;
    colourPickerEnabled: boolean;
    varySelection?: boolean;
    varyColors?: boolean;
}
export interface MaterialStepData extends AnimationData {
    hideSelectionInCart?: boolean;
    displaySelectionOnFinishStep?: boolean;
    markSelectionAsCustomField?: boolean;
    targetMaterials: string[];
    varySelection?: boolean;
}
export interface ModelStepData extends AnimationData {
    replaceProductModel?: boolean;
    hideSelectionInCart?: boolean;
    displaySelectionOnFinishStep?: boolean;
    markSelectionAsCustomField?: boolean;
    varySelection?: boolean;
}
export interface ModuleStepData extends AnimationData, RegionData {
    hideTextInCart?: boolean;
    displayTextOnFinishStep?: boolean;
    markTextAsCustomField?: boolean;
    module: string;
    maxLength: number;
    varyText?: string;
}
export interface PatchworkStepData extends AnimationData, RegionData {
    hideSelectionInCart?: boolean;
    displaySelectionOnFinishStep?: boolean;
    markSelectionAsCustomField?: boolean;
    sendToBack?: boolean;
}
export interface PictureStepData extends AnimationData, RegionData {
    hideSelectionInCart?: boolean;
    displaySelectionOnFinishStep?: boolean;
    markSelectionAsCustomField?: boolean;
    varySelection?: boolean;
}
export interface QuestionStepData extends AnimationData {
    hideSelectionsInCart?: boolean;
    displaySelectionsOnFinishStep?: boolean;
    markSelectionsAsCustomField?: boolean;
    allowMultipleSelections: boolean;
    varySelections?: boolean;
}
export interface ShapeStepData extends AnimationData, RegionData {
    hideSelectionInCart?: boolean;
    displaySelectionOnFinishStep?: boolean;
    markSelectionAsCustomField?: boolean;
    colours: string[];
    defaultColour?: string;
    excludeFromPrint?: boolean;
    varySelection?: boolean;
}
export interface TextStepData extends AnimationData, RegionData, Colorable {
    hideSelectionInCart?: boolean;
    hideColorInCart?: boolean;
    hideTextInCart?: boolean;
    displaySelectionOnFinishStep?: boolean;
    displayColorOnFinishStep?: boolean;
    displayTextOnFinishStep?: boolean;
    markSelectionAsCustomField?: boolean;
    markColorAsCustomField?: boolean;
    markTextAsCustomField?: boolean;
    allowNewlines?: boolean;
    defaultText: string;
    deleteDefaultOnFocus?: boolean;
    replaceableText?: string;
    font: string;
    colourPickerEnabled?: boolean;
    colours?: string[];
    maxLength: number;
    maxSize?: number;
    minSize?: number;
    size: number;
    textAlign: string;
    colour: string;
    uppercase?: boolean;
    vertical?: boolean;
    verticalAlign: string;
    curved?: boolean;
    paths?: string[];
    userCanReplaceText?: boolean;
    varySelection?: boolean;
    varyText?: boolean;
    varyColor?: boolean;
}
export interface SilentStepData extends AnimationData, RegionData {
    assetKey?: string;
    excludeFromPrint?: boolean;
}
type FinalizeStepData = AnimationData;
export interface Colorable {
    /**
     * @deprecated use colourOptionId instead
     */
    colourOption?: IServerModel<OptionResource>;
    colourOptionId?: string;
}
export interface RegionData {
    regions: Region[];
}
interface StepAsset {
    key: string;
    previewKey?: string;
}
export type StepSelections = {
    [key: string]: SelectionStorage;
};
export interface SelectionStorage {
    selectedVariants?: VariantResource[];
}
/**
 * We use this to register nodejs only library jsdom, functionality in the browser is all handled
 * by the browser but jsdom is used as a fallback to fill in any missing data. Import and assign the value here before calling anything that would require it.
 * @param impl
 */
export function registerJSDOM(impl: any): void;
export const createElement: (tag: string) => HTMLElement;
export const createElementNS: (namespace: string, tag: string) => any;
export const domParser: () => any;
export const fetchAsArrayBuffer: (externalUrl: string) => Promise<ArrayBuffer>;
export const fetchAsString: (externalUrl: string) => Promise<string>;
/**
 * Loads a given font as a font face set in the browser. This function has
 * no effect in a server environment, in the browser it gives the browser access to a font face for
 * use in font rendering.
 * @param font An opentype font object.
 * @param externalUrl An external URL that can be used to access the original font file.
 * @returns A promise resolved when the font has been loaded. Rejected if an error occured.
 */
export const loadFontFaceSet: (font: Font, externalUrl: string) => Promise<FontFace | undefined>;
export const xmlSerializer: () => XMLSerializer;
export const toBase64: (input: string) => string;
export const dataUrlFromExternalUrl: (url: string) => Promise<string>;
export const arrayBufferToDataUrl: (arrayBuffer: ArrayBuffer) => Promise<string>;
export const dataUrlToArrayBuffer: (dataUrl: string) => ArrayBuffer;
export const arrayBufferToBuffer: (ab: ArrayBuffer) => Buffer;
export const colorDefinitionPrintValue: (colorDefinition: ColorDefinition) => string;
export const spotColorDefinitionString: (spotColorDefinition?: SpotColorDefinition) => string;
/**
 * Converts a color value found in an SVG file into a color definition. This
 * logic will split out the browser value eg. "#ffffff" and the spot color value if available eg.
 * icc-named-color(cub, PANTONE_AAA_100_C)
 * @param value A color definition based on the data provided in the value.
 */
export const svgColorValueToDefinition: (value: string) => ColorDefinition;
export const traverse: (node: Element, f: (node: Element) => void) => void;
export const sanitizeSvgTree: (root: Element, preserveAspectRatio?: boolean) => void;
export const modifySVGWithElementProperties: (svg: string, width: number, height: number, colors: {
    [key: string]: ColorDefinition;
}, includeSpotColors?: boolean) => string;
export const generateSVGWithUnknownColors: (svgBody: string) => Promise<{
    svg: string;
    colors: {
        [key: string]: ColorDefinition;
    };
}>;
export class ElementNotFoundError extends Error {
    constructor(id: string);
}
export const findElement: <T extends LayoutElement>(id: string, layouts: LayoutState[]) => T;
export const findLayoutForElement: (id: string, layouts: LayoutState[]) => LayoutState;
export const updatedLayoutForElement: (element: LayoutElement, state: LayoutState) => LayoutState;
export const rehydrateSerializedLayout: (transactionState: LayoutsState, variationState?: LayoutsState) => Promise<void>;
/**
 * Stores cached information about metrics related to a spefici font.
 */
export class FontMetrics {
    constructor(font: Font);
    getFont(): Font;
    getGlyphs(text: string): opentype.Glyph[];
    /**
     * @returns The approximate height of any text line based on all main characters of the alphabet.
     */
    getApproximateHeight(): number;
    /**
     * Computes the exact height of a line of text.
     * @param text
     * @returns
     */
    getExactHeight(text: string): number;
    getKerningValue(a: Glyph, b: Glyph): number;
}
export const loadFontFromExternalUrl: (externalUrl: string) => Promise<Font>;
export const loadFontFromDataUrl: (dataUrl: string) => Font;
export const getFontMetrics: (fontData: FontData) => FontMetrics;
export interface TraditionalTextResults {
    lines: string[];
    requiredHeight: number;
}
/**
 * Calculates the lines of text for a given region.
 * @param fontSize The font size to use when calculating width and height of glyphs.
 * @param fontData The font family / metrics.
 * @param region The region that currently contains the text
 * @param untransformedText The next textbox for the region
 * @returns Calculated values for the text.
 */
export const calculateTextboxLines: (fontSize: number, fontData: FontData, region: CanvasRegion, untransformedText: string, lineHeight?: number) => TraditionalTextResults;
/**
 * The size of a step used to compute font sizes.
 */
export const fontSizeStep = 1;
/**
 * Computes the width of text. See the following link for a detailed breakdown.
 * https://developer.tizen.org/community/tip-tech/working-fonts-using-opentype.js?langswitch=en
 * @param text The text to get width for.
 * @param scale The scale
 * @param cache The font metric cache to be used for calculations.
 * @returns The width of the text.
 */
export const textWidth: (text: string, scale: number, cache: FontMetrics) => number;
interface TextTransformationConfiguration {
    stripControlCharacters: boolean;
    vertical: boolean;
    uppercase: boolean;
}
/**
 * Applies a number of different transformations to a piece of text based on configuration
 * @param text The text to transform.
 * @param options The requested options, this will default to sensible defaults if not provided.
 * @returns A string represented the transformed value of the input text.
 */
export const applyTextTransformations: (text: string, options?: Partial<TextTransformationConfiguration>) => string;
export const zip: (xs: any[], ys: any[]) => any[][];
export const getTextAlignment: (align?: string, isVertical?: boolean) => string;
/**
 * Returns the correct text anchor for the given alignment.
 */
export const getAnchor: (align?: string) => "end" | "start" | "middle";
export const recomputeTextOnElement: (el: TextboxElement, newText: string) => TextboxElement;
/**
 * The default line height to use in situations where none is specified.
 * Typical default is suggested to be between 1.1 & 1.2
 */
export const defaultLineHeightFactor = 1.1;
/**
 * An abstract base class from which to extend all potential element commands. These commands
 * follow the command design pattern in software development. To learn more about this pattern
 * take a look at the following link.
 *
 * https://sourcemaking.com/design_patterns/command
 *
 */
export abstract class CanvasCommand {
    abstract apply(state: LayoutsState): LayoutsState;
    varying?: boolean;
    protected oldState?: LayoutsState;
    undo(): LayoutsState;
    overrideOldState(state: LayoutsState): void;
    sequenceId?: string;
}
/**
 * Sets the serializable workflow in the reducer state.
 */
export class UpdateWorkflowStateCommand extends CanvasCommand {
    constructor(serializableWorkflow: SerializableWorkflow);
    apply(state: LayoutsState): LayoutsState;
}
/**
 * Shifts an element with given ID from its current position to a new position.
 */
export class MoveCommand extends CanvasCommand {
    constructor(id: string, x: number, y: number);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
/**
 * Rotates an element to a given angle in degrees.
 */
export class RotateCommand extends CanvasCommand {
    constructor(id: string, angle: number);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
/**
 * Updates the width and height of an element to reflect a new size. Negative values will be
 * converted to their absolute value. ie. -10 will become 10.
 */
export class ResizeCommand extends CanvasCommand {
    constructor(id: string, width: number, height: number);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
/**
 * Applys a list of command objects to the current state, the final state
 * will be that of all commands applied in the order of left to right.
 */
export class GroupCommand extends CanvasCommand {
    constructor(commands: CanvasCommand[]);
    apply(state: LayoutsState): LayoutsState;
}
export class CreateLayoutCommand extends CanvasCommand {
    constructor(layout: ILayout);
    apply(state: LayoutsState): LayoutsState;
}
/**
 * Clear all elements from a given layout.
 */
export class ClearLayoutCommand extends CanvasCommand {
    constructor(panelName: string);
    apply(state: LayoutsState): {
        layouts: {
            [key: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
/**
 * Add an element to the canvas
 */
export class CreateElementCommand<T extends LayoutElement> extends CanvasCommand {
    /**
     * @param initialParams The initial parameters to be set on this new object
     * @param callback An optional callback function to be notified when the object has been instantiated
     * @param layout
     */
    constructor(element: T, layout: ILayout);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState | {
                elements: LayoutElement[];
                modificationID: string;
                layout: ILayout;
            };
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
/**
 * Delete an element on the canvas
 */
export class DeleteElementCommand extends CanvasCommand {
    constructor(id: string);
    apply(state: LayoutsState): {
        layouts: {
            [key: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class CloneElementCommand extends CanvasCommand {
    constructor(el: LayoutElement, layout: ILayout);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState | {
                elements: LayoutElement[];
                modificationID: string;
                layout: ILayout;
            };
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class FontColorCommand extends CanvasCommand {
    constructor(id: string, color: string);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class FontSizeCommand extends CanvasCommand {
    constructor(id: string, size: number);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class FontAlgorithmCommand extends CanvasCommand {
    constructor(id: string, algorithm: TextAlgorithm);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class FontSourceCommand extends CanvasCommand {
    constructor(id: string, fontData: FontData);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class FontAlignmentCommand extends CanvasCommand {
    constructor(id: string, align: "left" | "center" | "right");
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class UpdateFramePattern extends CanvasCommand {
    constructor(id: string, imageData: PatternImageData, offsets: FrameOffsets);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
/**
 * TextChange will modify the text displayed in a text box
 */
export class TextChangeCommand extends CanvasCommand {
    constructor(id: string, text: string);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class IllustrationColorCommand extends CanvasCommand {
    constructor(id: string, className: string, fill: string);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class IllustrationCacheCommand extends CanvasCommand {
    constructor(id: string, svgBody: string, objectURL: string);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export class ShiftPatchworkCommand extends CanvasCommand {
    constructor(id: string, scale: number, leftOffset: number, topOffset: number);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState;
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
/**
 * Bring an element forward by one layer. Does nothing if the element is already at the front.
 */
export class BringForwardCommand extends CanvasCommand {
    /**
     * @param id The targeted element to bring to the front.
     */
    constructor(id: string);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState | {
                elements: LayoutElement[];
                modificationID: string;
                layout: ILayout;
            };
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
/**
 * Send an element backwards by one layer. Does nothing if the element is already at the back.
 */
export class SendBackwardsCommand extends CanvasCommand {
    /**
     * @param id The targeted element to bring to the front.
     */
    constructor(id: string);
    apply(state: LayoutsState): {
        layouts: {
            [x: string]: LayoutState | {
                elements: LayoutElement[];
                modificationID: string;
                layout: ILayout;
            };
        };
        serializableWorkflow: SerializableWorkflow;
    };
}
export interface SVGLayoutProps {
    preserveAspectRatio?: string;
    viewmask?: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    viewBox?: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    width: number | string;
    height: number | string;
    position?: string;
    maxWidth?: string;
    maxHeight?: string;
    elements?: ReactNode[];
    backgroundColor?: string;
    omitBoundClipping?: boolean;
    borderRadius?: number;
}
export const SVGLayout: FunctionComponent<SVGLayoutProps>;
/**
 * Returns an axis aligned bounding box for a given element.
 * @param element The element to calculate an AABB for.
 * @returns The AABB for the element.
 */
export const getAxisAlignedBoundingBox: (x: number, y: number, width: number, height: number, rotation: number) => {
    minX: number;
    maxX: number;
    minY: number;
    maxY: number;
};
export const findAngle: (a: Point, b: Point, c: Point) => number;
/**
 * Degrees to radians.
 * @param degrees An angle in degrees.
 * @returns The equivelant angle in radians.
 */
export const degreesToRadians: (degrees: number) => number;
/**
 * Radians to degrees.
 * @param radians An angle in radians.
 * @returns The equivelant angle in degrees.
 */
export const radiansToDegrees: (radians: number) => number;
/**
 * @param a The first value.
 * @param b The second value.
 * @returns Returns true if two values are within a distance to each other.
 */
export const isCloseToValue: (a: number, b: number, allowableDistance: number) => boolean;
export const getTrueCoordinates: (point: Point, pointOfRotation: Point, rotation: number) => Point;
export const getPointOfRotation: (nwPoint: Point, sePoint: Point) => Point;
export const getNWPoint: (bounds: DOMRect, element: LayoutElement, scaleX: number, scaleY: number) => Point;
export const getNEPoint: (bounds: DOMRect, element: LayoutElement, scaleX: number, scaleY: number) => Point;
export const getSWPoint: (bounds: DOMRect, element: LayoutElement, scaleX: number, scaleY: number) => Point;
export const getSEPoint: (bounds: DOMRect, element: LayoutElement, scaleX: number, scaleY: number) => Point;
export const turnRightClockwise: (dir: ScaleAxis) => ScaleAxis;
export const currentDirection: (originalDirection: ScaleAxis, rotation: number) => ScaleAxis;
/**
 * Computes helpful values about a rotated element, Useful in calculating updated element locations.
 * @param element The element to calculate the vertices for.
 * @returns a, b, c, d starting from top left and moving clockwise. Center represents the point central to
 * all vertices on thge element.
 */
export const getElementVertices: (element: {
    x: number;
    y: number;
    width: number;
    height: number;
    rotation: number;
}, canvasBounds?: Point, scale?: Point) => {
    a: {
        x: number;
        y: number;
    };
    b: {
        x: number;
        y: number;
    };
    c: {
        x: number;
        y: number;
    };
    d: {
        x: number;
        y: number;
    };
    center: Point;
};
/**
 * Rotates a point around another point by an angle.
 * @param p The point to rotate.
 * @param c The point to rotate around..
 * @param angleRadians The angle to rotate.
 * @returns A new point transformed by the rotation.
 */
export const rotateAroundPoint: (p: Point, c: Point, angleRadians: number) => {
    x: number;
    y: number;
};
export const mmPerPixel = 0.352778;
export const cmPerPixel = 0.035277;
export const Image: FunctionComponent<Omit<ImageElement, "type">>;
export const Frame: FunctionComponent<Omit<FrameElement, "type">>;
export const Textbox: FunctionComponent<Omit<TextboxElement, "type">>;
export const Illustration: FunctionComponent<Omit<IllustrationElement, "type">>;
export const Patchwork: FunctionComponent<Omit<PatchworkElement, "type">>;
export interface CommandState {
    transaction: LayoutsState;
    variation?: Partial<LayoutsState>;
}
export class CommandContext {
    constructor();
    registerStateCallback(callback: () => void): void;
    getState(): CommandState | undefined;
    apply(command: CanvasCommand): void;
    undo(): void;
    redo(): void;
    /**
     * Find all commands in history with the given sequence ID,
     * discard all but the last and overwrite its oldState.
     */
    flattenSequence(sequenceId: string, initialState: LayoutsState): void;
    getLayoutById(layoutId: string): LayoutData;
    getAllLayouts(): LayoutData[];
    initialize(layouts: ILayout[], reloadedState?: LayoutsState): void;
}
export const getSvgString: (layout: ILayout, elements: LayoutElement[], configuration?: RenderingConfiguration) => string;
export interface LayoutData {
    layoutState: LayoutState;
    Component: ReactElement<SVGLayoutProps>;
    getComponentWithProps: (configuration: {
        viewmask?: {
            x: number;
            y: number;
            width: number;
            height: number;
        };
        viewBox?: {
            x: number;
            y: number;
            width: number;
            height: number;
        };
        maxHeight?: string;
        maxWidth?: string;
        height?: string;
        width?: string;
        position?: string;
        borderRadius?: number;
    }) => ReactElement<SVGLayoutProps>;
}
export const getExifOrientation: (arrayBuffer: ArrayBuffer) => Promise<number>;
export const canvasDims: (img: _Image1) => [number, number];
export const getAttributesFromArrayBuffer: (arrayBuffer: ArrayBuffer) => Promise<{
    dataUrl: string;
    height: number;
    width: number;
}>;
export const getDefaultVariant: (option: OptionResource) => VariantResource | undefined;
/**
 * A map of src to pattern image data.
 */
export const patternImageDataCache: Map<string, PatternImageData>;
/**
 * A map of frame path to frame data relevant to that path.
 */
export const frameDataCache: Map<string, FrameData>;
export const generateFrameSVG: (region?: Region, src?: string) => Promise<string>;
export const generateDefaultRectangleFrameSvg: (region: Region) => string;
export const getVariant: (designInputStepData: any, option?: IServerModel<OptionResource>) => undefined | VariantResource;
export const getFrameData: (frameSvg: string) => Promise<FrameData>;
export const calculateOffsets: (imageData: PatternImageData, frameData: FrameData, nondefaults?: {
    scale?: number;
    left?: number;
    top?: number;
}) => FrameOffsets;
export const getPatternImageData: (src: string) => Promise<PatternImageData>;
/**
 * Returns dimensions of a given svg string in viewbox and rendered form and a dataURL allowing for
 * the SVG to be rendered cross origin on a canvas.
 * @param src The source for the SVG
 */
export const GetSVGDimensions: (src: string) => Promise<{
    width: number;
    height: number;
}>;
/**
 * Return the dimensions of an SVG string.
 */
export const svgStringDimensions: (svgText: string) => {
    width: number;
    height: number;
};
/**
 * Determine what the font size for a text element should be,
 * taking autosizing into account.
 * @Deprecated Old Text system, Transition to new system when Autosizing has been brought across in a way that makes sense.
 */
export const determineCorrectFontSizeAndLines: (curFontSize: number, fontData: FontData, region: Region, text: string, sizeRange: SizeRange) => [number, null | string[], null | number];
/**
 * If a textbox has a fixed font size, it's width should be changed to fit the text.
 * Needs to take rotation into consideration.
 * The left alignment case appears to be resolved but the other cases have not been addressed.
 * @Deprecated Old Text system, Transition to new system when Autosizing has been brought across in a way that makes sense.
 */
export const determineCorrectTextboxRegion: (currentRegion: Region, fontData: FontData, fontSize: number, textLines: string[], align?: string) => Region;
export class LayoutElementFactory {
    static getFrame(opts: {
        region: Region;
        configuration: Partial<FrameStepData>;
        src?: string;
    }): Promise<FrameElement>;
    static getImage(opts: {
        region?: Region;
        layout?: LayoutData;
        configuration: Partial<PictureStepData>;
        src: string;
    }): Promise<ImageElement>;
    static getTextbox(opts: {
        region: Region;
        configuration: Partial<TextStepData>;
        fontSrc: string;
        designInputStep?: any;
    }): Promise<TextboxElement>;
    static getShape(opts: {
        region: Region;
        color: string;
    }): Promise<{
        stepRegion: Region;
        colors: {
            [key: string]: ColorDefinition;
        };
        id: string;
        svg: string;
        type: string;
        y: number;
        x: number;
        rotation: number;
        width: number;
        height: number;
        layerIndex: number | undefined;
        immutable: boolean | undefined;
    }>;
}

//# sourceMappingURL=types.d.ts.map
