grapesjs/docs/api/property_stack.md

PropertyStack

Extends PropertyComposite

Properties

• preview Boolean? Indicate if the layer should display a preview.
• layerSeparator (String | RegExp)? The separator used to split layer values.
• layerJoin String? Value used to join layer values.
• layerLabel Function? Custom logic for creating layer labels.

   layerLabel: (layer) => {
     const values = layer.getValues();
     return `A: ${values['prop-a']} B: ${values['prop-b']}`;
   }
  

• emptyValue (String | Function)? Empty value to apply when all layers are removed.

   // use simple string
   emptyValue: 'inherit',
   // or a function for a custom style object
   emptyValue: () => ({
     color: 'unset',
     width: 'auto'
   }),
  

getLayers

Get all available layers.

Returns Array<Layer>

hasLayers

Check if the property has layers.

Returns Boolean

getLayer

Get layer by index.

Parameters

• index Number Layer index position. (optional, default 0)

Examples

// Get the first layer
const layerFirst = property.getLayer(0);
// Get the last layer
const layers = this.getLayers();
const layerLast = property.getLayer(layers.length - 1);

Returns (Layer | null)

getSelectedLayer

Get selected layer.

Returns (Layer | undefined)

selectLayer

Select layer. Without a selected layer any update made on inner properties has no effect.

Parameters

• layer Layer Layer to select

Examples

const layer = property.getLayer(0);
property.selectLayer(layer);

selectLayerAt

Select layer by index.

Parameters

• index Number Index of the layer to select. (optional, default 0)

Examples

property.selectLayerAt(1);

moveLayer

Move layer by index.

Parameters

• layer Layer Layer to move.
• index Number New layer index. (optional, default 0)

Examples

const layer = property.getLayer(1);
property.moveLayer(layer, 0);

addLayer

Add new layer to the stack.

Parameters

• props Object Custom property values to use in a new layer. (optional, default {})

• opts Object Options (optional, default {})

  • opts.at Number? Position index (by default the layer will be appended at the end).

Examples

// Add new layer at the beginning of the stack with custom values
property.addLayer({ 'sub-prop1': 'value1', 'sub-prop2': 'value2' }, { at: 0 });

Returns Layer Added layer.

removeLayer

Remove layer.

Parameters

• layer Layer Layer to remove.

Examples

const layer = property.getLayer(0);
property.removeLayer(layer);

Returns Layer Removed layer

removeLayerAt

Remove layer by index.

Parameters

• index Number Index of the layer to remove (optional, default 0)

Examples

property.removeLayerAt(0);

Returns (Layer | null) Removed layer

getLayerLabel

Get the layer label. The label can be customized with the layerLabel property.

Parameters

• layer Layer

Examples

const layer = this.getLayer(1);
const label = this.getLayerLabel(layer);

Returns String

getStyleFromLayer

Get style object from the layer.

Parameters

• layer Layer

• opts Object Options (optional, default {})

  • opts.camelCase Boolean? Return property names in camelCase.
  • opts.number Object? Limit the result of the number types, eg. number: { min: -3, max: 3 }

Returns Object Style object

getStylePreview

Get preview style object from the layer. If the property has preview: false the returned object will be empty.

Parameters

• layer Layer
• opts Object Options. Same of getStyleFromLayer (optional, default {})

Returns Object Style object

getLayerSeparator

Get layer separator.

Returns RegExp

hasEmptyValue

Check if the property is with an empty value.

Returns Boolean