PropertyStack

Extends PropertyComposite

Properties

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

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

• emptyValue (String (opens new window) | Function (opens new window))? 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 (opens new window)<Layer>

hasLayers

Check if the property has layers.

Returns Boolean (opens new window)

getLayer

Get layer by index.

Parameters

• index Number (opens new window) 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 (opens new window))

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 (opens new window) 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 (opens new window) 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 (opens new window) Custom property values to use in a new layer. (optional, default {})

• opts Object (opens new window) Options (optional, default {})

  • opts.at Number (opens new window)? 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 (opens new window) 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 (opens new window)

getStyleFromLayer

Get style object from the layer.

Parameters

• layer Layer

• opts Object (opens new window) Options (optional, default {})

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

Returns Object (opens new window) 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 (opens new window) Options. Same of getStyleFromLayer (optional, default {})

Returns Object (opens new window) Style object

getLayerSeparator

Get layer separator.

Returns RegExp (opens new window)

hasEmptyValue

Check if the property is with an empty value.

Returns Boolean (opens new window)