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.