@aurigma/design-atoms/Viewer/Interfaces/ICanvasStyle.d.ts

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

export interface ICanvasStyle {
    selection: ISelectionStyle;
    hover: IHoverStyle;
    spotlight: ISpotlightStyle;
    rubberband: IRubberbandStyle;
    interactiveZones: IInteractiveZonesStyles;
}
export declare enum InteractiveZoneLabelPosition {
    outside = 0,
    inside = 1
}
export interface IInteractiveZoneStateStyle {
    borderDash?: number[];
    borderWidth?: number;
    borderColor?: string;
    borderAltColor?: string;
    fillColor?: string;
    labelColor?: string;
    labelBackgroundColor?: string;
    labelPosition?: InteractiveZoneLabelPosition;
    labelFont?: string;
    labelFontSize?: number;
    labelMargin?: number | string;
    labelTitle?: string;
    showLabel?: boolean;
}
export interface IInteractiveZoneStyle {
    common?: IInteractiveZoneStateStyle;
    active?: IInteractiveZoneStateStyle;
    highlighted?: IInteractiveZoneStateStyle;
    activeHighlighted?: IInteractiveZoneStateStyle;
}
export interface IInteractiveZonesStyles {
    default?: IInteractiveZoneStyle;
    [key: string]: IInteractiveZoneStyle;
}
export interface ISelectionStyle {
    color: string;
    width: number;
    fillColor: string;
    dashPattern: number[];
    rotationGripSize: number;
    rotationGripSizeOnTouchDevice: number;
    rotationGripColor: string;
    rotationGripLineColor: string;
    resizeGripColor: string;
    resizeGripLineColor: string;
    resizeGripLineWidth: number;
    resizeGripSize: number;
}
export interface IHoverStyle {
    color: string;
    width: number;
    fillColor: string;
    showLabel: boolean;
    textStyle: string;
    textColor: string;
    dashPattern: number[];
}
export interface ISpotlightStyle {
    color: string;
    width: number;
    fillColor: string;
    showLabel: boolean;
    textStyle: string;
    textColor: string;
    dashPattern: number[];
}
export interface IRubberbandStyle {
    color: string;
    width: number;
    fillColor: string;
    dashPattern: number[];
}