FancyProductDesignerView Class

The class to create a view. A view contains the canvas. You need to call setup to set up the canvas with all elements, after setting an instance of FancyProductDesignerView.

Constructor

FancyProductDesignerView
(
  • elem
  • view
  • callback
  • fabricjsCanvasOptions
)

Parameters:

  • elem JQuery
    • jQuery object holding the container.
  • view Object
    • The default options for the view.
  • callback Function
    • This function will be called as soon as the view and all initial elements are loaded.
  • fabricjsCanvasOptions Object
    • Options for the fabricjs canvas.
Show:
addElement
(
  • type
  • source
  • title
  • parameters
)

Adds a new element to the view.

Parameters:

  • type String

    The type of an element you would like to add, 'image' or 'text'.

  • source String

    For image the URL to the image and for text elements the default text.

  • title String

    Only required for image elements.

  • [parameters] Object optional

    An object with the parameters, you would like to apply on the element.

addElements
(
  • elements
  • callback
)

Adds a set of elements into the view.

Parameters:

  • elements Array

    An array containing elements.

  • callback Function

    A function that will be called when all elements have beed added.

alignElement
(
  • pos
  • element
)

Aligns an element.

Parameters:

  • pos String

    Allowed values: left, right, top or bottom.

  • [element] fabric.Object optional

    The element to center. If not set, it centers the current selected element.

centerElement
(
  • h
  • v
  • element
)

Centers an element horizontal or/and vertical.

Parameters:

  • h Boolean

    Center horizontal.

  • v Boolean

    Center vertical.

  • [element] fabric.Object optional

    The element to center. If not set, it centers the current selected element.

changeColor
(
  • element
  • hex
  • colorLinking
)

Changes the color of an element.

Parameters:

  • element fabric.Object

    The element to colorize.

  • hex String

    The color.

  • colorLinking Boolean

    Use color linking.

changePrice
(
  • price
  • operator
)
Number

Changes the price by an operator, + or -.

Parameters:

  • price Number

    Price as number.

  • operator String

    "+" or "-".

Returns:

Number:

The total price of the view.

deselectElement
(
  • discardActiveObject=true
)

Deselects the current selected element.

Parameters:

  • [discardActiveObject=true] Boolean optional

    Discards the active element.

duplicate
(
  • element
)

Removes the canvas and resets all relevant view properties.

Parameters:

  • [element] fabric.Object optional

    The element to duplicate. If not set, it duplicates the current selected element.

getBoundingBoxCoords
(
  • element
)
Object | Boolean

Returns the bounding box of an element.

Parameters:

  • element fabric.Object

    A fabric object

Returns:

Object | Boolean:

The bounding box object with x,y,width and height or false.

getElementByReplace ()

Gets an elment by replace property.

getElementByTitle
(
  • title
)
Object

Returns an fabric object by title.

Parameters:

  • title String

    The title of an element.

Returns:

Object:

FabricJS Object.

getElementJSON
(
  • element
  • addPropertiesToInclude=false
)
Object

Gets the JSON of an element.

Parameters:

  • [element] String optional

    The target element. If not set, it it will use the current selected.

  • [addPropertiesToInclude=false] Boolean optional

    Include the properties from propertiesToInclude.

Returns:

Object:

An object with properties.

getIndex () Number

Gets the index of the view.

Returns:

Number:

The index.

getJSON () Object

Get the canvas(stage) JSON.

Returns:

Object:

An object with properties.

getOptions () Object

Returns all options with the keys that are set in FancyProductDesignerView.relevantOptions property.

Returns:

Object:

An object containing all relevant options.

getUploadZone
(
  • title
)
fabric.Object

Gets an upload zone by title.

Parameters:

  • title String

    The target title of an element.

Returns:

fabric.Object:

A fabric object representing the upload zone.

getZIndex
(
  • element
)
Number

Gets the z-index of an element.

Parameters:

  • [element] fabric.Object optional

    The element to center. If not set, it centers the current selected element.

Returns:

Number:

The index.

loadElements
(
  • elements
  • callback
)

Removes the current elements and loads a set of new elements into the view.

Parameters:

  • elements Array

    An array containing elements.

  • callback Function

    A function that will be called when all elements have beed added.

redo ()

Redo the last change.

removeElement
(
  • element
)

Removes an element using the fabric object or the title of an element.

Parameters:

  • element Object | String

    Needs to be a fabric object or the title of an element.

reset ()

Removes the canvas and resets all relevant view properties.

resetCanvasSize ()

Resizes the canvas responsive.

setElementParameters
(
  • parameters
  • element
  • saveUndo=true
)

Sets the parameters for a specified element.

Parameters:

  • parameters Object

    An object with the parameters that should be applied to the element.

  • [element] fabric.Object | string optional

    A fabric object or the title of an element. If no element is set, the parameters will be applied to the current selected element.

  • [saveUndo=true] Boolean optional

    Save new parameters also in undos.

setMask
(
  • maskOptions
)

Use a SVG image as mask for the whole view. The image needs to be a SVG file with only one path. The method toSVG() does not include the mask.

Parameters:

  • maskOptions Object | Null

    An object containing the URL to the svg. Optional: scaleX, scaleY, left and top.

setup ()

This method needs to be called after the instance of FancyProductDesignerView is set.

toDataURL
(
  • callback
  • backgroundColor=transparent
  • options
  • watermarkImg=null
  • deselectElement=true
)

Creates a data URL of the view.

Parameters:

  • callback Function

    A function that will be called when the data URL is created. The function receives the data URL.

  • [backgroundColor=transparent] String optional

    The background color as hexadecimal value. For 'png' you can also use 'transparent'.

  • [options] Object optional

    See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.

    • [onlyExportable=false] Boolean optional

      If true elements with excludeFromExport=true are not exported in the image.

  • [watermarkImg=null] fabric.Image optional

    A fabricJS image that includes the watermark image.

  • [deselectElement=true] Boolean optional

    Deselect current selected element.

toggleLock
(
  • toggle
)
Boolean

Toggles the lockment of view. If the view is locked, the price of the view will not be added to the total product price.

Parameters:

  • toggle Boolean

    The toggle state.

Returns:

Boolean:

The toggle state.

toSVG
(
  • options
  • reviver
  • respectPrintingBox
  • watermarkImg=null
  • fontsToEmbed=[]
)
String

Returns the view as SVG.

Parameters:

Returns:

String:

A XML representing a SVG.

undo ()

Undo the last change.

additionalPrice

Number

Additional price for the view.


Default: 0

currentBoundingObject

fabric.Object

The current selected bounding box object.


Default: null

currentElement

fabric.Object

The current selected element.


Default: null

currentUploadZone

String

The title of the current selected upload zone.


Default: null

elements

Object

The view elements.

fCanv

fabric.Canvas

An instance of fabricJS canvas class. It allows to interact with the fabricjs API.


Default: null

locked

Boolean

The locked state of the view.


Default: false

mask

Object

The properties for the mask object (url, left, top, width, height).


Default: null

maskObject

fabric.Image

The image object that is going to be used as mask for this view.


Default: null

options

Object

The view options.

printingBoxObject

fabric.Rect

A fabric.Rect representing the printing box.


Default: null

propertiesToInclude

Array static

Properties to include when using the getJSON or getElementJSON.


Default: ['_isInitial', 'lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockScalingFlip', 'lockUniScaling', 'resizeType', 'clipTo', 'clippingRect', 'boundingBox', 'boundingBoxMode', 'selectable', 'evented', 'title', 'editable', 'cornerColor', 'cornerIconColor', 'borderColor', 'isEditable', 'hasUploadZone']

redos

Array

The view redos.


Default: []

relevantOptions

Array static

Relevant options for the view when saving order data.


Default: ['stageWidth', 'stageHeight', 'customAdds', 'customImageParameters', 'customTextParameters', 'maxPrice', 'optionalView', 'designCategories', 'printingBox', 'output', 'layouts', 'usePrintingBoxAsBounding']

responsiveScale

Number

The responsive scale.


Default: 1

stage

fabric.Canvas deprecated

Deprecated: since version 4.7.7, use fCanv instead

An instance of fabricjs canvas class. It allows to interact with the fabricjs API.


Default: null

thumbnail

String

The view thumbnail.

title

String

The view title.

totalPrice

Number

The total price for the view without max. price.


Default: 0

truePrice

Number

The total price for the view including max. price and corrert formatting.


Default: 0

undos

Array

The view undos.


Default: []

zoom

Number

The set zoom for the view.


Default: 0

FancyProductDesignerView#beforeElementAdd

Gets fired as soon as an element has beed added.

Event Payload:

  • event Event
  • type String
    • The element type.
  • source String
    • URL for image, text string for text element.
  • title String
    • The title for the element.
  • params Object
    • The default properties.

FancyProductDesignerView#boundingBoxToggle

Gets fired when bounding box is toggling.

Event Payload:

  • event Event
  • currentBoundingObject fabric.Object
    • The current bounding box object.
  • state Boolean

FancyProductDesignerView#canvas:mouseDown

Gets fired when the mouse/touch gets down on fabricJS canvas.

Event Payload:

  • event Event
  • instance String
    • The view instance.
  • opts Event
    • FabricJS event options.

FancyProductDesignerView#canvas:mouseMove

Gets fired when the mouse/touch is moving on fabricJS canvas.

Event Payload:

  • event Event
  • instance String
    • The view instance.
  • opts Event
    • FabricJS event options.

FancyProductDesignerView#canvas:mouseOut

Gets fired when the mouse gets over on fabricJS canvas.

Event Payload:

  • event Event
  • instance String
    • The view instance.
  • opts Event
    • FabricJS event options.

FancyProductDesignerView#canvas:mouseOver

Gets fired when the mouse gets over on fabricJS canvas.

Event Payload:

  • event Event
  • instance String
    • The view instance.
  • opts Event
    • FabricJS event options.

FancyProductDesignerView#canvas:mouseUp

Gets fired when the mouse/touch gets up on fabricJS canvas.

Event Payload:

  • event Event
  • instance String
    • The view instance.
  • opts Event
    • FabricJS event options.

FancyProductDesignerView#elementAdd

Gets fired as soon as an element has beed added.

Event Payload:

  • event Event
  • object fabric.Object
    • The fabric object.

FancyProductDesignerView#elementChange

Gets fired when an element is changing via drag, resize or rotate.

Event Payload:

  • event Event
  • modifiedType String
    • The modified type.
  • element fabric.Object
    • The fabricJS object.

FancyProductDesignerView#elementCheckContainemt

Gets fired when the containment of an element is checked.

Event Payload:

  • event Event
  • target fabric.Object
  • boundingBoxMode Boolean

FancyProductDesignerView#elementColorChange

Gets fired when the color of an element is changing.

Event Payload:

  • event Event
  • element fabric.Object
  • hex String
  • colorLinking Boolean

FancyProductDesignerView#elementIn

Gets fired as soon as an element is inside of its bounding box again.

Event Payload:

  • event Event

FancyProductDesignerView#elementModify

Gets fired when an element is modified.

Event Payload:

  • event Event
  • element fabric.Object
    • The fabricJS object.
  • modifiedParameters Object
    • The modified parameters.

FancyProductDesignerView#elementOut

Gets fired as soon as an element is outside of its bounding box.

Event Payload:

  • event Event

FancyProductDesignerView#elementRemove

Gets fired as soon as an element has been removed.

Event Payload:

  • event Event
  • element fabric.Object
    • The fabric object that has been removed.

FancyProductDesignerView#elementSelect

Gets fired as soon as an element is selected.

Event Payload:

  • event Event
  • currentElement fabric.Object
    • The current selected element.

FancyProductDesignerView#priceChange

Gets fired as soon as the price has changed.

Event Payload:

  • event Event
  • elementPrice Number
    • The price of the added element.
  • truePrice Number
    • The total price.

FancyProductDesignerView#undoRedoSet

Gets fired when the canvas has been saved in the undos or redos array.

Event Payload:

  • event Event
  • undos Array
    • An array containing all undo objects.
  • redos Array
    • An array containing all redos objects.