Settings

• Last updated on September 24, 2024
• •
• 3 minutes to read

Settings are a set of feature flags and configurations that change the Handy Editor behavior.

The settings are organized in sections. Each section configures one group of related features, such as an image gallery or a work area of the editor.

The supported sections are listed below.

{
    "settings": {
        "assetLibrary": {},
        "designViewer": {},
        "imageUploader": {},
        "itemValidation": {},
        "leaveConfirmation": {}
   }
}

Let's learn parameters of each section.

assetLibrary

The assetLibrary object manages the buttons for creating new elements. You can toggle the following elements:

• text - a tool that adds new text items
• shape - a tool that creates new rectangles, ellipses and potentially other shapes
• images - an image manager that allows inserting image items from a library
• cliparts - another image library that is more oriented for clipart - vector elements used as decorations, icons, etc.
• imageUploader - a tool for uploading and inserting new images from the user's device
• templates - a design selection tool that is available if multiple design templates are connected to the product variant
• productOptions - an option selection tool

If you omit the assetLibrary object, the following default values will be applied:

{
    "assetLibrary": {
        "text": {
            "enabled": true
        },
        "shapes": {
            "enabled": true
        },
        "images": {
            "enabled": true
        },
        "cliparts": {
            "enabled": true
        },
        "imageUploader": {
            "enabled": true
        },
        "templates": {
            "enabled": true
        },
        "productOptions": {
            "enabled": true
        }
    }
}

designViewer

The designViewer object is responsible for the user experience with the work area (design viewer) where the user manipulates the design elements.

{
    "designViewer": {
        "grid": { }
    }
}

The grid object configures the grid that makes it easier for the user to position and align the elements on the design.

The grid parameters:

• step defines the grid step, in points (1/72 inch).
• gridEnabled defines whether the grid is enabled when the editor is opened. The user can toggle it later through the user interface or a hotkey Ctrl+'.

If you omit the grid object, the following default values will be applied:

{
    "grid": {
        "step": 10,
        "gridEnabled": false
    }
}

imageUploader

The imageUploader object defines the format in which the uploaded images will be added to the design. You can set a singe option for all supported image types in the insertByDefaultAs property, which will be applied by default. At the same time, you can specify how different types of uploaded images will be added to the design in the insertFileAs object. This setting may look as follows:

{
    "imageUploader": {
        "insertByDefaultAs": "Auto",
        "insertFileAs": {
            "svg" : "Shape",
            "pdf": "Clipart",
            "png": "Image",
            "jpeg": "Image"
        }
    }
}

Here, the keys are the file formats (e.g. svg, pdf, png, jpeg, etc.), and the values may become "Clipart" | "Image" | "Shape" | "Group" | "Auto", where:

• "Clipart" creates a clipart item if possible
• "Image" create an image item if possible
• "Shape" create a shape item if possible
• "Group" create a group item if possible
• "Auto" automatically determines the type of uploaded graphics on the server.

itemValidation

The itemValidation object configures the validation rules for items in the design. At the moment, you can enable an image quality meter and low DPI warnings.

{
    "itemValidation": {
        "qualityMeter": {
            "targetResolution": 300,
            "bad": 50,
            "warning": 80
        }
    }
}

Here, the targetResolution specifies a DPI of the print files, and the bad and warning properties specify two image quality levels as a percentage of DPI. In this example, a DPI lower than 150 will be considered bad, a DPI in the range from 150 to 240 will display a warning, and a DPI higher than 240 will be considered acceptable.

leaveConfirmation

The leaveConfirmation object contains an enabled property that allows you to disable confirmation dialog for leaving the page. By default, this dialog will appear in a browser, and the property value is true.

{
   "leaveConfirmation": {
        "enabled": false
    }
}