Interface IFoldingLine

A structure holding settings for a folding line.

Package: @aurigma/design-editor-iframe

Remarks

For details, see the Folding lines topic.

Examples

const fold = {
   isVertical: false,
   bleed: 10,
   pen: { color: "green" }
};

// Load the editor.
CustomersCanvas.IframeApi.loadEditor(
   iframe,
   {
       surfaces: [{
           height: 600, width: 800,
           foldingLines: [fold]
       }]
   }
);

Properties

bleed

Defines offset for the folding line, in points, depending on its orientation. It is a top/bottom offset for the vertical line and a left/right offset for the horizontal line. The default value is 0.

Declaration

bleed?: number;

Property Value

Type	Description
number	Defines offset for the folding line, in points, depending on its orientation. It is a top/bottom offset for the vertical line and a left/right offset for the horizontal line. The default value is 0.

isVertical

If true, then the folding line is vertical, otherwise it is horizontal. The default value is true.

Declaration

isVertical?: boolean;

Property Value

Type	Description
boolean	If true, then the folding line is vertical, otherwise it is horizontal. The default value is true.

margin

Defines the absolute or relative location of the folding line on the product, in points or percent. For vertical lines, it defines the x-axis offset from the left edge. For horizontal lines, it defines the y-axis offset from the top edge of the product. To set the relative offset in percent, add the percent sign to the number. The default value is "50%".

Declaration

margin?: string;

Property Value

Type	Description
string	Defines the absolute or relative location of the folding line on the product, in points or percent. For vertical lines, it defines the x-axis offset from the left edge. For horizontal lines, it defines the y-axis offset from the top edge of the product. To set the relative offset in percent, add the percent sign to the number. The default value is "50%".

pen

Configures the outline of the folding line.

Declaration

pen?: {
        width?: number;
        dashStep?: number;
        color?: string;
        altColor?: string;
    };

Property Value

Type	Description
{ width?: number; dashStep?: number; color?: string; altColor?: string; }	Configures the outline of the folding line.