Skip to main content

Options

Options​

Kind: global class

Options.defaults : Object​

The default options.

Kind: static property of Options
Properties

Name
defaults

defaults.stageWidth : Number​

The stage(canvas) width for the product designer.

Kind: static property of defaults
Default: 900
Properties

Name
stageWidth

defaults.stageHeight : Number​

The stage(canvas) height for the product designer.

Kind: static property of defaults
Default: 600
Properties

Name
stageHeight

defaults.editorMode : Boolean​

Enables the editor mode, which will add a helper box underneath the product designer with some options of the current selected element.

Kind: static property of defaults
Default: false
Properties

Name
editorMode

defaults.editorBoxParameters : Array​

The properties that will be displayed in the editor box when an element is selected.

Kind: static property of defaults
Default: ['left', 'top', 'angle', 'fill', 'width', 'height', 'fontSize', 'price']
Properties

Name
editorBoxParameters

defaults.fonts : Aarray​

An array containing all available fonts.

Kind: static property of defaults
Default: [{name: 'Arial'}, {name: 'Lobster', url: 'google'}]
Properties

Name
fonts

Example 

[{name: "Lobster", url: "google"}, {name: 'Custom', url: 'https://yourdomain.com/fonts/custom.ttf"}, {name: 'Aller', url: 'path/Aller.ttf', variants: {'n7': 'path/Aller__bold.ttf','i4': 'path/Aller__italic.ttf','i7': 'path/Aller__bolditalic.ttf'}}]

defaults.facebookAppId : String​

To add photos from Facebook, you have to set your own Facebook API key.

Kind: static property of defaults
Default: ''
Properties

Name
facebookAppId

defaults.instagramClientId : String​

To add photos from Instagram, you have to set an Instagram client ID.

Kind: static property of defaults
Default: ''
Properties

Name
instagramClientId

defaults.instagramRedirectUri : String​

This URI to the html/instagram_auth.html. You have to update this option if you are using a different folder structure.

Kind: static property of defaults
Default: ''
Properties

Name
instagramRedirectUri

defaults.instagramTokenUri : String​

The URI to the script that get the access token from Instagram. You need the enter the Instagram Secret ID.

Kind: static property of defaults
Default: ''
Properties

Name
instagramTokenUri

defaults.hexNames : Object​

Set custom names for your hexdecimal colors. key=hexcode without #, value: name of the color.

Kind: static property of defaults
Default: {}
Properties

Name
hexNames

Example 

hexNames: {000000: 'dark',ffffff: 'white'}

defaults.selectedColor : String​

The border color of the selected element.

Kind: static property of defaults
Default: '#d5d5d5'
Properties

Name
selectedColor

defaults.boundingBoxColor : String​

The border color of the bounding box.

Kind: static property of defaults
Default: '#005ede'
Properties

Name
boundingBoxColor

defaults.outOfBoundaryColor : String​

The border color of the element when its outside of his bounding box.

Kind: static property of defaults
Default: '#990000'
Properties

Name
outOfBoundaryColor

defaults.replaceInitialElements : Boolean​

If true only the initial elements will be replaced when changing the product. Custom added elements will not be removed.

Kind: static property of defaults
Default: false
Properties

Name
replaceInitialElements

defaults.fileServerURL : String​

An object that contains the settings for the AJAX post when a custom added image is added to the canvas (Uploaded Images, Facebook/Instagram Photos). This allows to send the URL of the image to a custom-built script, that returns the data URI of the image or uploads the image to your server and returns the new URL on your server. By default the URL is send to php/custom-image-handler.php. See the official jQuery.ajax documentation for more information. The data object has a reserved property called url, which is the image URL that will send to the script. The success function is also reserved.

Kind: static property of defaults
Properties

Name
fileServerURL

defaults.responsive : Boolean​

Make the canvas and the elements in the canvas responsive.

Kind: static property of defaults
Default: true
Properties

Name
responsive

defaults.cornerIconColor : String​

Hex color value defining the color for the corner icon controls.

Kind: static property of defaults
Default: '#000000'
Properties

Name
cornerIconColor

defaults.langJSON : Object | Boolean​

The URL to the JSON file or an object containing all content from the JSON file. Set to false, if you do not need it.

Kind: static property of defaults
Default: 'lang/default.json'
Properties

Name
langJSON

defaults.colorPickerPalette : Array​

The color palette when the color wheel is displayed.

Kind: static property of defaults
Default: []
Properties

Name
colorPickerPalette

Example 

['#000', '#fff']

defaults.actions : Object​

An object defining the available actions in the different zones.

Kind: static property of defaults
Default: {left: ['info', 'download', 'print', 'preview-lightbox', 'reset-product'], center: ['undo', 'redo'], right: ['zoom', 'ruler', 'guided-tour']}
Properties

Name
actions

defaults.mainBarModules : Array​

An array defining the available modules in the main bar. Possible values: 'products', 'images', 'text', 'designs'. 'names-numbers', 'drawing'

Kind: static property of defaults
Default: ['products', 'images', 'text', 'designs']
Properties

Name
mainBarModules

defaults.initialActiveModule : String​

Set the initial active module.

Kind: static property of defaults
Default: ''
Properties

Name
initialActiveModule

defaults.maxValues : String​

An object defining the maximum values for input elements in the toolbar.

Kind: static property of defaults
Default: {}
Properties

Name
maxValues

defaults.watermark : Boolean | String​

Set a watermark image when the user downloads/prints the product via the actions. To pass a watermark, just enter a string with an image URL.

Kind: static property of defaults
Default: false
Properties

Name
watermark

defaults.priceFormat : Object​

An object containing the currency string(use %d as placeholder for price), decimal separator and thousand separator.

Kind: static property of defaults
Default: {currency: '$%d', decimalSep: '.', thousandSep: ','}
Properties

Name
priceFormat

defaults.mainBarContainer : Boolean | String​

The ID of an element that will be used as container for the main bar.

Kind: static property of defaults
Default: false
Properties

Name
mainBarContainer

Example 

#customMainBarContainer

defaults.modalMode : Boolean | String​

The ID of an element that will be used to open the modal, in which the designer is included.

Kind: static property of defaults
Default: false
Properties

Name
modalMode

Example 

#modalButton

defaults.keyboardControl : Boolean​

Enable keyboard control. Use arrow keys to move and backspace key to delete selected element.

Kind: static property of defaults
Default: true
Properties

Name
keyboardControl

defaults.deselectActiveOnOutside : Boolean​

Deselect active element when clicking outside of the product designer.

Kind: static property of defaults
Default: true
Properties

Name
deselectActiveOnOutside

defaults.uploadZonesTopped : Boolean​

All upload zones will be always on top of all elements.

Kind: static property of defaults
Default: true
Properties

Name
uploadZonesTopped

defaults.loadFirstProductInStage : Boolean​

Loads the first initial product into stage.

Kind: static property of defaults
Default: true
Properties

Name
loadFirstProductInStage

defaults.unsavedProductAlert : Boolean​

If the user leaves the page without saving the product or the getProduct() method is not, a alert window will pop up.

Kind: static property of defaults
Default: false
Properties

Name
unsavedProductAlert

defaults.hideDialogOnAdd : Boolean​

If the user adds something and off-canvas panel or dialog is opened, it will be closed.

Kind: static property of defaults
Default: true
Properties

Name
hideDialogOnAdd

defaults.toolbarPlacement : String​

Set the placement of the toolbar. For smartphones the toolbar will be fixed at the bottom of the page. Possible values:'smart', 'sidebar'

Kind: static property of defaults
Default: 'smart'
Properties

Name
toolbarPlacement

defaults.snapGridSize : Array​

The grid size for snap action. First value defines the width on the a-axis, the second on the y-axis.

Kind: static property of defaults
Default: [50, 50]
Properties

Name
snapGridSize

defaults.fabricCanvasOptions : Object​

An object containing options for the fabricjs canvas.

Kind: static property of defaults
Default: {}
Properties

Name
fabricCanvasOptions

defaults.namesNumbersDropdown : Array​

Defines the values for the select element in the names & numbers module.

Kind: static property of defaults
Default: []
Properties

Name
namesNumbersDropdown

defaults.namesNumbersEntryPrice : Number​

Sets price for any extra entry in the names & numbers module.

Kind: static property of defaults
Default: 0
Properties

Name
namesNumbersEntryPrice

defaults.colorSelectionPlacement : String​

Sets the placement for the color selection. Create a HTML element inside your document and use the selector for that element as value, e.g. #my-color-selection.

Kind: static property of defaults
Default: ''
Properties

Name
colorSelectionPlacement

Example 

#my-color-selection

defaults.bulkVariationsPlacement : String​

Sets the placement for the Bulk-Add Variations Form. Just enter ID or class of another element(#my-color-selection).

Kind: static property of defaults
Default: ''
Properties

Name
bulkVariationsPlacement

defaults.bulkVariations : Object​

The available variations for the Bulk-Add Variations Form.

Kind: static property of defaults
Default: {}
Properties

Name
bulkVariations

Example 

{'Size': ['XL', 'L', 'M', 'S'], 'Color': ['Red', 'Blue']}

defaults.toolbarDynamicContext : String​

The element where the toolbar will be appended when toolbarPlacement='smart'.

Kind: static property of defaults
Default: 'body'
Properties

Name
toolbarDynamicContext

defaults.boundingBoxProps : Object​

Addtional properties for the bounding box. Can be used to set the stroke width etc.. See http://fabricjs.com/docs/fabric.Rect.html

Kind: static property of defaults
Default: {strokeWidth: 1}
Properties

Name
boundingBoxProps

defaults.fitImagesInCanvas : Boolean​

If the image (custom uploaded or design) is larger than the canvas, it will be scaled down to fit into the canvas.

Kind: static property of defaults
Default: false
Properties

Name
fitImagesInCanvas

defaults.maxPrice : Number​

Set a maximum price for all products or for specific views. -1 disables the max. price.

Kind: static property of defaults
Default: -1
Properties

Name
maxPrice

defaults.inCanvasTextEditing : Boolean​

The text can be edited in the canvas by double click/tap.

Kind: static property of defaults
Default: true
Properties

Name
inCanvasTextEditing

defaults.openTextInputOnSelect : Boolean​

The text input in the toolbar when be opened when an editable text is selected.

Kind: static property of defaults
Default: false
Properties

Name
openTextInputOnSelect

defaults.designCategories : Array​

An array of design category titles (only top-level categories) to enable particular design categories for an upload zone or for the view. An empty array will enable all design categories.

Kind: static property of defaults
Default: []
Properties

Name
designCategories

defaults.optionalView : Boolean​

Will make the view(s) optional, so the user have to unlock it. The price for the elements in the view will be added to the total product price as soon as the view is unlocked.

Kind: static property of defaults
Default: false
Properties

Name
optionalView

defaults.saveActionBrowserStorage : Boolean​

When using the save/load actions, store the product in user's browser storage.

Kind: static property of defaults
Default: true
Properties

Name
saveActionBrowserStorage

defaults.pricingRules : Array​

An array containing the pricing rules groups. Use the online tool to generate pricing rules.

Kind: static property of defaults
Default: []
Properties

Name
pricingRules

defaults.uploadAgreementModal : Boolean​

Enables an agreement modal that needs to be confirmed before uploaded images can be used in the product designer. The text in the agreement modal can be set through the language JSON.

Kind: static property of defaults
Default: false
Properties

Name
uploadAgreementModal

defaults.imageEditorSettings : Object​

An object containing the settings for the image editor.

Kind: static property of defaults
Default: {masks: []}
Properties

Name
imageEditorSettings
imageEditorSettings.masks : Array​

An array containing the SVG urls for custom mask shapes. Use only one path per SVG, only the first path will be used as mask shape.

Kind: static property of imageEditorSettings
Default: []
Properties

Name
masks

defaults.printingBox : Object​

An object containing left, top, width and height properties that represents a printing box. A printing box is a rectangle which is always visible in the canvas and represents the printing area. It is used in the ADMIN solution to create a PDF with a specific printing area.

Kind: static property of defaults
Default: null
Propert: printingBox

defaults.autoOpenInfo : Boolean​

Open the Info modal when product designer is loaded. The Info action needs to be added to show the modal.

Kind: static property of defaults
Default: false
Properties

Name
autoOpenInfo

defaults.guidedTour : Null | Object​

Create a custom guided tour by definifing an object with a key/css selector for the target element and the value for the text in the guided tour step. The first part of the key string defines the target type (module or action) followed by a a colon and the name of the module/action or just enter a custom CSS selector string, e.g. module:products, action:manage-layers or #any-element.

Kind: static property of defaults
Default: null
Properties

Name
guidedTour

Example 

guidedTour: {
"module:products": "This is the text for first step.",
"action:manage-layers": "This is the text for second step.",
"#any-element": "Pointer on a custom HTML element"
}

defaults.replaceColorsInColorGroup : Boolean​

As soon as an element with a color link group is added, the colours of this element will be used for the color group. If false, the colours of all element in the color group will be concatenated.

Kind: static property of defaults
Default: false
Properties

Name
replaceColorsInColorGroup

defaults.allowedImageTypes : Array​

Defines the image types in lowercase that can be uploaded. Currently the designer supports jpg, svg, png images and PDF files.

Kind: static property of defaults
Default: ['jpeg', 'png', 'svg', 'pdf']
Properties

Name
allowedImageTypes

defaults.pixabayApiKey : String​

To add photos from Pixabay, you have to set an Pixabay API key.

Kind: static property of defaults
Default: ''
Properties

Name
pixabayApiKey

defaults.pixabayHighResImages : Boolean​

If you want to access high-resolution images, enable this option and you have to ask Pixabay for permission. You can easily do that here, next to the headline.

Kind: static property of defaults
Default: false
Properties

Name
pixabayHighResImages

defaults.pixabayLang : String​

Language code of the language to be searched in. Accepted values: cs, da, de, en, es, fr, id, it, hu, nl, no, pl, pt, ro, sk, fi, sv, tr, vi, th, bg, ru, el, ja, ko, zh.

Kind: static property of defaults
Default: ''
Version: 4.7.5
Properties

Name
pixabayLang

defaults.imageSizeTooltip : Boolean​

Shows the current image size in pixels in a tooltip above the image element when its selected.

Kind: static property of defaults
Default: false
Properties

Name
imageSizeTooltip

defaults.highlightEditableObjects : String​

Highlight objects (editable texts and upload zones) with a dashed border. To enable this just define a hexadecimal color value.

Kind: static property of defaults
Default: ''
Version: 3.7.2
Properties

Name
highlightEditableObjects

defaults.applyFillWhenReplacing : Boolean​

When an element is replaced, apply fill(color) from replaced element to added element.

Kind: static property of defaults
Default: true
Version: 3.7.2
Properties

Name
applyFillWhenReplacing

defaults.layouts : Array​

An array containing layouts. A layout is technically a view that will replace all elements in a view when selected.

Kind: static property of defaults
Default: []
Version: 4.7.0
Properties

Name
layouts

defaults.dynamicViewsOptions : Object​

Options for the Dynamic Views modul.

Kind: static property of defaults
Default: {}
Version: 4.7.0
Properties

Name
dynamicViewsOptions
dynamicViewsOptions.unit : String​

Set the length unit that you would like to set the canvas site: 'mm', 'cm', 'inch'

Kind: static property of dynamicViewsOptions
Default: 'mm'
Properties

Name
unit
dynamicViewsOptions.formats : Array​

An array will all available formats when adding a new view.

Kind: static property of dynamicViewsOptions
Default: []
Properties

Name
formats

Example 

[
    [100, 100],
    [500, 500],
    [1000, 1000]
]
dynamicViewsOptions.pricePerArea : Number​

Charge price per area in centimeter. For example if you want to charge a price of 1 per 10cm2, you have to enter 0.1.

Kind: static property of dynamicViewsOptions
Default: 0
Properties

Name
pricePerArea
dynamicViewsOptions.minWidth : Number​

Minimum width that the user can enter as view width.

Kind: static property of dynamicViewsOptions
Default: 0
Properties

Name
minWidth
dynamicViewsOptions.minHeight : Number​

Minimum height that the user can enter as view height.

Kind: static property of dynamicViewsOptions
Default: 0
Properties

Name
minHeight
dynamicViewsOptions.maxWidth : Number​

Maximum width that the user can enter as view width.

Kind: static property of dynamicViewsOptions
Default: 10000
Properties

Name
maxWidth
dynamicViewsOptions.maxHeight : Number​

Maximum height that the user can enter as view height.

Kind: static property of dynamicViewsOptions
Default: 10000
Properties

Name
maxHeight

defaults.enableDynamicViews : Object​

Enable dynamic views, so the user can remove, duplicate and add own views.

Kind: static property of defaults
Default: {}
Version: 6.0.0
Properties

Name
enableDynamicViews

defaults.disableTextEmojis : Boolean​

Emojis in text elements will be removed when changing or adding text.

Kind: static property of defaults
Default: false
Version: 4.7.4
Properties

Name
disableTextEmojis

defaults.smartGuides : Boolean​

Enable guide lines to align the selected object to the edges of the other objects.

Kind: static property of defaults
Default: false
Version: 4.7.7
Properties

Name
smartGuides

defaults.usePrintingBoxAsBounding : Boolean​

If a printing box has been defined for a view and the element has no individual bounding box, the printing box will be used as bounding box.

Kind: static property of defaults
Default: false
Version: 4.8.0
Properties

Name
usePrintingBoxAsBounding

defaults.printingBox : Object​

An object defining the printing area when exporting the product as SVG. The visibility property shows the printing box to the customers.

Kind: static property of defaults
Default: {}
Version: 4.7.0
Properties

Name
printingBox

Example 

{top: 100, left: 100, width: 400, height: 500, visibility: true}

defaults.productsJSON : String​

A JSON object or URL to a JSON file that stores all initial products. These products will be displayed in the Products module.

Kind: static property of defaults
Default: null
Version: 4.9.0
Properties

Name
productsJSON

defaults.designsJSON : String​

A JSON object or URL to a JSON file that stores all designs. These designs will be displayed in the Designs module.

Kind: static property of defaults
Default: null
Version: 4.9.0
Properties

Name
designsJSON

defaults.customizationRequiredRule : String​

When the customizationRequired argument in the getProduct is set to true, you can control if any view needs to be customized or all. Possible values: any, all.

Kind: static property of defaults
Default: 'any'
Version: 4.9.4
Properties

Name
customizationRequiredRule

defaults.swapProductConfirmation : Boolean​

Display the notification that the product is going to be changed when clicking on a product item in the Products module.

Kind: static property of defaults
Default: false
Version: 4.9.5
Properties

Name
swapProductConfirmation

defaults.textLinkGroupProps : Array​

Define additional properties that will be applied to all text elements in the same textLinkGroup. E.g.: ['fontFamily', 'fontSize', 'fontStyle']

Kind: static property of defaults
Default: []
Version: 5.0.3
Properties

Name
textLinkGroupProps

defaults.textTemplates : Array​

Text Templates that will appear in the Text module.

Kind: static property of defaults
Default: []
Version: 5.1.0
Properties

Name
textTemplates

Example 

[{text: 'Hello World', properties: {fontFamily: 'Arial', textSize: 35}}]

defaults.multiSelection : Boolean​

Multiple objects can be selected and moved at the same time.

Kind: static property of defaults
Default: false
Version: 5.1.0
Properties

Name
multiSelection

defaults.multiSelectionColor : Boolean​

The border color when multiple elements are selected.

Kind: static property of defaults
Default: '#54dfe6'
Version: 5.0.0
Properties

Name
multiSelectionColor

defaults.canvasHeight : Number​

The maximum canvas height related to the window height. A number between 0 and 1, e.g. 0.8 will set a maximum canvas height of 80% of the window height. A value of 1 will disable a calculation of a max. height.

Kind: static property of defaults
Default: 'auto'
Version: 6.0.0
Properties

Name
canvasHeight

defaults.maxCanvasHeight : Number​

The maximum canvas height related to the window height. A number between 0 and 1, e.g. 0.8 will set a maximum canvas height of 80% of the window height. A value of 1 will disable a calculation of a max. height.

Kind: static property of defaults
Default: 0.8
Version: 5.1.1
Properties

Name
maxCanvasHeight

defaults.mobileGesturesBehaviour : String​

Set the behaviour for mobile gestures. Possible values: 'none': No behaviour, 'pinchPanCanvas': Zoom in/out and pan canvas, 'pinchImageScale': Scale selected image with pinch.

Kind: static property of defaults
Default: 'none'
Version: 5.1.3
Properties

Name
mobileGesturesBehaviour

defaults.imageQualityRatings : Object​

Enable image quality ratings for uploaded images. Therefore you can define low, mid and high quality steps. The object receives low, mid and high keys. The values of these keys are arrays, where the first entry defines the width and the second entry defines the height.

Kind: static property of defaults
Default: null
Version: 5.1.4
Properties

Name
imageQualityRatings

Example 

{low: [100, 200], mid: [500, 600], high: [1000, 1200]}

defaults.cornerControlsStyle : Boolean​

Set corner controls style: "basic" (Rescale and Rotate) or "advanced" (Rescale, Rotate, Delete, Duplicate).

Kind: static property of defaults
Default: "advanced"
Version: 5.1.4
Properties

Name
cornerControlsStyle

defaults.downloadFilename : String​

The filename when the user downloads the product design as image or PDF.

Kind: static property of defaults
Default: 'Product'
Version: 5.1.5
Properties

Name
downloadFilename

defaults.autoFillUploadZones : Boolean​

Fill all upload zones with the first uploaded images.

Kind: static property of defaults
Default: false
Version: 5.2.7
Properties

Name
autoFillUploadZones

defaults.dragDropImagesToUploadZones : Boolean​

Drag & Drop images from the images and designs module into upload zones or on canvas.

Kind: static property of defaults
Default: false
Version: 5.2.7
Properties

Name
dragDropImagesToUploadZones

defaults.responsiveBreakpoints : Object​

Controls the breakpoints for a responsive layout. You can define small and medium breakpoints. As soon as the window width will be under one of these values, it will change to small (smartphone) or medium (tablet) layout, otherwise it uses the standard layout for large screens (desktop).

Kind: static property of defaults
Default: {small: 768, medium: 1024}
Version: 6.0.0
Properties

Name
responsiveBreakpoints

defaults.dynamicDesigns : Object​

Define our dynamic designs module.

Kind: static property of defaults
Default: {}
Version: 5.0.0
Properties

Name
dynamicDesigns

defaults.elementParameters : Object​

An object containing the default element parameters in addition to the default Fabric Object properties. See Options.defaults.elementParameters.

Kind: static property of defaults
Properties

Name
elementParameters
elementParameters.z : Number​

Allows to set the z-index of an element, -1 means it will be added on the stack of layers

Kind: static property of elementParameters
Default: -1
Properties

Name
z
elementParameters.price : Number​

The price for the element.

Kind: static property of elementParameters
Default: 0
Properties

Name
price
elementParameters.colors : Boolean | String​

If false, no colorization for the element is possible.One hexadecimal color will enable the colorpicker. Mulitple hexadecimal colors separated by commmas will show a range of colors the user can choose from.

Kind: static property of elementParameters
Default: false
Properties

Name
colors

Example 

colors: "#000000" => Colorpicker, colors: "#000000,#ffffff" => Range of colors
elementParameters.removable : Boolean​

If true the user can remove the element.

Kind: static property of elementParameters
Default: false
Properties

Name
removable
elementParameters.draggable : Boolean​

If true the user can drag the element.

Kind: static property of elementParameters
Default: false
Properties

Name
draggable
elementParameters.rotatable : Boolean​

If true the user can rotate the element.

Kind: static property of elementParameters
Default: false
Properties

Name
rotatable
elementParameters.resizable : Boolean​

If true the user can resize the element.

Kind: static property of elementParameters
Default: false
Properties

Name
resizable
elementParameters.copyable : Boolean​

If true the user can copy non-initial elements. Copyable property is enabled for designs and custom added elements automatically.

Kind: static property of elementParameters
Default: false
Properties

Name
copyable
elementParameters.zChangeable : Boolean​

If true the user can change the z-position the element.

Kind: static property of elementParameters
Default: false
Properties

Name
zChangeable
elementParameters.boundingBox : Boolean​

Defines a bounding box (printing area) for the element. If false no bounding box. The title of an element in the same view, then the boundary of the target element will be used as bounding box. An object with x,y,width and height defines the bounding box.

Kind: static property of elementParameters
Default: false
Properties

Name
boundingBox
elementParameters.boundingBoxMode : String​

Set the mode for the bounding box. Possible values: 'none', 'clipping', 'limitModify', 'inside'

Kind: static property of elementParameters
Default: 'clipping'
Properties

Name
boundingBoxMode
elementParameters.autoCenter : Boolean​

Centers the element in the canvas or when it has a bounding box in the bounding box.

Kind: static property of elementParameters
Default: false
Properties

Name
autoCenter
elementParameters.replace : String​

Replaces an element with the same type and replace value.

Kind: static property of elementParameters
Default: ''
Properties

Name
replace
elementParameters.replaceInAllViews : Boolean​

If a replace value is set, you can decide if the element replaces the elements with the same replace value in all views or only in the current showing view.

Kind: static property of elementParameters
Default: ''
Properties

Name
replaceInAllViews
elementParameters.autoSelect : Boolean​

Selects the element when its added to stage.

Kind: static property of elementParameters
Default: false
Properties

Name
autoSelect
elementParameters.topped : Boolean​

Sets the element always on top.

Kind: static property of elementParameters
Default: false
Properties

Name
topped
elementParameters.colorPrices : Object​

You can define different prices when using a range of colors, set through the colors option.

Kind: static property of elementParameters
Default: {}
Properties

Name
colorPrices

Example 

colorPrices: {"000000": 2, "ffffff: "3.5"}
elementParameters.colorLinkGroup : Boolean | String​

Include the element in a color link group. So elements with the same color link group are changing to same color as soon as one element in the group is changing the color.

Kind: static property of elementParameters
Default: false
Properties

Name
colorLinkGroup

Example 

'my-color-group'
elementParameters.patterns : Array​

An array of URLs to pattern image - onyl for SVG images or text elements.

Kind: static property of elementParameters
Default: []
Properties

Name
patterns

Example 

patterns: ['patterns/pattern_1.png', 'patterns/pattern_2.png',]
elementParameters.sku : String​

An unique identifier for the element.

Kind: static property of elementParameters
Default: ''
Properties

Name
sku
elementParameters.excludeFromExport : Boolean​

When true the element is not exported in SVG. If you are going to use one of the data URI methods, you need to set onlyExportable=true in the options, so the element is not exported in the data URL.

Kind: static property of elementParameters
Default: false
Properties

Name
excludeFromExport
elementParameters.showInColorSelection : Boolean​

Shows the element colors in color selection panel.

Kind: static property of elementParameters
Default: false
Properties

Name
showInColorSelection
elementParameters.locked : Boolean​

By the default the element will be locked and needs to be unlocked by the user via the "Manage Layers" module.

Kind: static property of elementParameters
Default: false
Properties

Name
locked
elementParameters.uniScalingUnlockable : Boolean​

Allow user to unlock proportional scaling in the toolbar. After that the user scale the element unproportional via toolbar or element boundary controls.

Kind: static property of elementParameters
Default: false
Properties

Name
uniScalingUnlockable
elementParameters.fixed : Boolean​

The layer is fixed and will stay on the canvas when changing the product.

Kind: static property of elementParameters
Default: false
Properties

Name
fixed

defaults.textParameters : Object​

An object containing the default text element parameters in addition to the default Fabric IText properties. The properties in the object will merge with the properties in the elementParameters.

Kind: static property of defaults
Properties

Name
textParameters
textParameters.maxLength : Number​

The maximal allowed characters. 0 means unlimited characters.

Kind: static property of textParameters
Default: 0
Properties

Name
maxLength
textParameters.curved : Boolean​

If true the text will be curved.

Kind: static property of textParameters
Default: false
Properties

Name
curved
textParameters.curvable : Boolean​

If true the the user can switch between curved and normal text.

Kind: static property of textParameters
Default: false
Properties

Name
curvable
textParameters.curveRadius : Number​

The radius when the text is curved.

Kind: static property of textParameters
Default: 80
Properties

Name
curveRadius
textParameters.curveReverse : Boolean​

Reverses the curved text.

Kind: static property of textParameters
Default: false
Properties

Name
curveReverse
textParameters.maxLines : Number​

The maximal allowed lines. 0 means unlimited lines.

Kind: static property of textParameters
Default: 0
Properties

Name
maxLines
textParameters.textBox : Boolean​

Enables the text element as a text box. A text box has a fixed width and not be resized.

Kind: static property of textParameters
Default: false
Properties

Name
textBox
textParameters.textPlaceholder : Boolean | Array​

Enables the text element as a placeholder for the Names & Numbers module. You can enable this parameter for one text element in a view.

Kind: static property of textParameters
Default: false
Properties

Name
textPlaceholder
textParameters.numberPlaceholder : Boolean​

Enables the text element as a number placeholder for the Names & Numbers module. You can enable this parameter for one text element in a view. If you want to define a range of allowed numbers, just use an array. The first value in the array defines the minimum value, the second value defines the maximum value, e.g. [0, 10].

Kind: static property of textParameters
Default: false
Properties

Name
numberPlaceholder
textParameters.letterSpacing : Number​

Addtional space between letters.

Kind: static property of textParameters
Default: 0
Properties

Name
letterSpacing
textParameters.chargeAfterEditing : Boolean​

The price will be charged first after the text has been edited.

Kind: static property of textParameters
Default: false
Properties

Name
chargeAfterEditing
textParameters.minFontSize : Number​

The minimum font size.

Kind: static property of textParameters
Default: 1
Properties

Name
minFontSize
textParameters.textTransform : String​

Set the text transform - none, lowercase, uppercase.

Kind: static property of textParameters
Default: 'none'
Properties

Name
textTransform
textParameters.widthFontSize : Number​

Set a width for the text, so the text will be scaled up/down to the given area.

Kind: static property of textParameters
Default: 0
Properties

Name
widthFontSize
textParameters.maxFontSize : Number​

The maximum font size. Using a value higher than 200 can cause performance issues with text boxes.

Kind: static property of textParameters
Default: 1
Properties

Name
maxFontSize
textParameters.shadowColor : String​

The color of the shadow.

Kind: static property of textParameters
Default: ''
Properties

Name
shadowColor
textParameters.shadowBlur : Number​

Shadow Blur.

Kind: static property of textParameters
Default: 0
Properties

Name
shadowBlur
textParameters.shadowOffsetX : Number​

Shadow horizontal offset.

Kind: static property of textParameters
Default: 0
Properties

Name
shadowOffsetX
textParameters.shadowOffsetY : Number​

Shadow vertical offset.

Kind: static property of textParameters
Default: 0
Properties

Name
shadowOffsetY
textParameters.textLinkGroup : String​

Link the text of different text elements, changing the text of one element will also change the text of text elements with the same textLinkGroup value.

Kind: static property of textParameters
Default: ""
Properties

Name
textLinkGroup
textParameters.strokeColors : Array​

The colors for the stroke. If empty, the color wheel will be displayed.

Kind: static property of textParameters
Default: []
Properties

Name
strokeColors

defaults.imageParameters : Object​

An object containing the default image element parameters in addition to the default Fabric Image properties. See Options.defaults.imageParameters. The properties in the object will merge with the properties in the elementParameters.

Kind: static property of defaults
Properties

Name
imageParameters
imageParameters.uploadZone : Boolean​

If true the image will be used as upload zone. That means the image is a clickable area in which the user can add different media types.

Kind: static property of imageParameters
Default: false
Properties

Name
uploadZone
imageParameters.filter : Boolean​

Sets a filter on the image. Possible values: 'grayscale', 'sepia' or any filter name from FPDFilters class.

Kind: static property of imageParameters
Default: null
Properties

Name
filter
imageParameters.scaleMode : String​

Set the scale mode when image is added into an upload zone or resizeToW/resizeToH properties are set. Possible values: 'fit', 'cover'

Kind: static property of imageParameters
Default: 'fit'
Properties

Name
scaleMode
imageParameters.resizeToW : Number​

Resizes the uploaded image to this width. 0 means it will not be resized.

Kind: static property of imageParameters
Default: 0
Properties

Name
resizeToW
imageParameters.resizeToH : Number​

Resizes the uploaded image to this height. 0 means it will not be resized.

Kind: static property of imageParameters
Default: 0
Properties

Name
resizeToH
imageParameters.advancedEditing : Boolean​

Enables advanced editing, the user can crop, set filters and manipulate the color of the image. This works only for png or jpeg images. If the original image has been edited via the image editor, the original image will be replaced by a PNG with 72DPI!

Kind: static property of imageParameters
Default: false
Properties

Name
advancedEditing
imageParameters.uploadZoneMovable : Boolean​

If true the upload zone can be moved by the user.

Kind: static property of imageParameters
Default: 

false
version 4.8.2

Properties

Name
uploadZoneMovable
imageParameters.uploadZoneRemovable : Boolean​

If true the upload zone can be removed by the user.

Kind: static property of imageParameters
Default: 

false
version 5.0.0

Properties

Name
uploadZoneRemovable

defaults.customImageParameters : Object​

An object containing the default parameters for custom added images. See Options.defaults.customImageParameters. The properties in the object will merge with the properties in the elementParameters and imageParameters.

Kind: static property of defaults
Properties

Name
customImageParameters
customImageParameters.minW : Number​

The minimum upload size width.

Kind: static property of customImageParameters
Default: 100
Properties

Name
minW
customImageParameters.minH : Number​

The minimum upload size height.

Kind: static property of customImageParameters
Default: 100
Properties

Name
minH
customImageParameters.maxW : Number​

The maximum upload size width.

Kind: static property of customImageParameters
Default: 10000
Properties

Name
maxW
customImageParameters.maxH : Number​

The maximum upload size height.

Kind: static property of customImageParameters
Default: 10000
Properties

Name
maxH
customImageParameters.minDPI : Number​

The minimum allowed DPI for uploaded images. Works only with JPEG images.

Kind: static property of customImageParameters
Default: 72
Properties

Name
minDPI
customImageParameters.maxSize : Number​

The maxiumum image size in MB.

Kind: static property of customImageParameters
Default: 10
Properties

Name
maxSize

defaults.customTextParameters : Object​

An object containing additional parameters for custom added text.The properties in the object will merge with the properties in the elementParameters and textParameters.

Kind: static property of defaults
Properties

Name
customTextParameters

defaults.customAdds : Object​

An object containing the supported media types the user can add in the product designer.

Kind: static property of defaults
Properties

Name
customAdds
customAdds.designs : Boolean​

If true the user can add images from the designs library.

Kind: static property of customAdds
Default: true
Properties

Name
designs
customAdds.uploads : Boolean​

If true the user can add an own image.

Kind: static property of customAdds
Default: true
Properties

Name
uploads
customAdds.texts : Boolean​

If true the user can add own text.

Kind: static property of customAdds
Default: true
Properties

Name
texts
customAdds.drawing : Boolean​

If true the user can add own drawings.

Kind: static property of customAdds
Default: true
Properties

Name
drawing

defaults.qrCodeProps : Object​

An object containing the properties (parameters) for the QR code.

Kind: static property of defaults
Properties

Name
qrCodeProps
qrCodeProps.autoCenter : Boolean​

Kind: static property of qrCodeProps
Default: true
Properties

Name
autoCenter
qrCodeProps.draggable : Boolean​

Kind: static property of qrCodeProps
Default: true
Properties

Name
draggable
qrCodeProps.removable : Boolean​

Kind: static property of qrCodeProps
Default: true
Properties

Name
removable
qrCodeProps.resizable : Boolean​

Kind: static property of qrCodeProps
Default: true
Properties

Name
resizable

Options.merge(defaults, [merge]) ⇒ Object​

Merges the default options with custom options.

Kind: static method of Options
Returns: Object - The new options object.

ParamTypeDescription
defaultsObjectThe default object.
[merge]ObjectThe merged object, that will be merged into the defaults.

Options.getParameterKeys() ⇒ Array​

Returns all element parameter keys.

Kind: static method of Options
Returns: Array - An array containing all element parameter keys.