computeLayers (layers) {
    const array = [];
    let layer;

    // Iterate over the layers
    Object.keys(layers).forEach((key) => {
      layer = layers[key];

      // If the layer is hidden, ignore it
      if (this.getLayerValue(layers, layer, 'hidden') === true) {
        return;
      };

      // Setup an object to contain our layer data
      const layerData = {};

      // Iterate over the properties of the layer, and compute the value (handles getters, functions, and object implementations such as `y`)
      Object.keys(layer).forEach((k) => {
        layerData[k] = this.getLayerValue(layers, layer, k);
      });

      // Make the fill value map to a gradient name, if a gradient has been configured
      // See computeGradients() for the creation of gradient definitions
      if (this.getLayerValue(layers, layer, 'gradient')) {
        layerData.fill = `url(#${key})`;
      }

      // Switch over the layer type to ensure we create the card correctly
      switch (layer.type) {
        case 'text':
          // Split by newline
          const text = layerData.text.split('\n');

          array.push(<Text x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            fontFamily={layerData.fontFamily}
            fontSize={layerData.fontSize}
            fontWeight={layerData.fontWeight}
            lineHeight={layerData.lineHeight}
            textAnchor={layerData.textAnchor}
            fill={layerData.fill}
            draggable={layerData.draggable}
            transform={layerData.transform}
            opacity={layerData.opacity}
            smartQuotes={layerData.smartQuotes}
            key={key}>
            {text}
          </Text>);
          break;
        case 'image':
          array.push(<Image x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            href={layerData.src}
            height={layerData.height}
            width={layerData.width}
            draggable={layerData.draggable}
            transform={layerData.transform}
            opacity={layerData.opacity}
            key={key} />);
          break;
        case 'rectangle':
          array.push(<Rectangle x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            fill={layerData.fill}
            height={layerData.height}
            width={layerData.width}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />);
          break;
        case 'circle':
          array.push(<Circle x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            fill={layerData.fill}
            radius={layerData.radius}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />);
          break;
        case 'ellipse':
          array.push(<Ellipse x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            fill={layerData.fill}
            radiusX={layerData.radiusX}
            radiusY={layerData.radiusY}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />);
          break;
        case 'line':
          array.push(<Line x={[layerData.x1, layerData.x2]}
            y={[layerData.y1, layerData.y2]}
            stroke={layerData.stroke || layerData.fill}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />);
          break;
        case 'path':
          array.push(<Path d={layerData.path || layerData.d}
            fill={layerData.fill}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />)
          break;
      }
    });

    return array;
  }
/**
   * Compute the layers to render on the Card
   *
   * @param {object} layers - The configuration object representing the layers to render
   *
   * @return {array} An array of React elements to render on the card
   */
Compute the layers to render on the Card
@param {object} layers - The configuration object representing the layers to render

@return {array} An array of React elements to render on the card
Compute the layers to render on the Card @param { object } layers - The configuration object representing the layers to render @return { array } An array of React elements to render on the card
computeLayers (layers) {
    const array = [];
    let layer;
    Object.keys(layers).forEach((key) => {
      layer = layers[key];
      if (this.getLayerValue(layers, layer, 'hidden') === true) {
        return;
      };
      const layerData = {};
      Object.keys(layer).forEach((k) => {
        layerData[k] = this.getLayerValue(layers, layer, k);
      });
      if (this.getLayerValue(layers, layer, 'gradient')) {
        layerData.fill = `url(#${key})`;
      }
      switch (layer.type) {
        case 'text':
          const text = layerData.text.split('\n');
          array.push(<Text x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            fontFamily={layerData.fontFamily}
            fontSize={layerData.fontSize}
            fontWeight={layerData.fontWeight}
            lineHeight={layerData.lineHeight}
            textAnchor={layerData.textAnchor}
            fill={layerData.fill}
            draggable={layerData.draggable}
            transform={layerData.transform}
            opacity={layerData.opacity}
            smartQuotes={layerData.smartQuotes}
            key={key}>
            {text}
          </Text>);
          break;
        case 'image':
          array.push(<Image x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            href={layerData.src}
            height={layerData.height}
            width={layerData.width}
            draggable={layerData.draggable}
            transform={layerData.transform}
            opacity={layerData.opacity}
            key={key} />);
          break;
        case 'rectangle':
          array.push(<Rectangle x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            fill={layerData.fill}
            height={layerData.height}
            width={layerData.width}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />);
          break;
        case 'circle':
          array.push(<Circle x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            fill={layerData.fill}
            radius={layerData.radius}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />);
          break;
        case 'ellipse':
          array.push(<Ellipse x={layerData.x}
            y={this.calculateYPosition(layers, layerData)}
            fill={layerData.fill}
            radiusX={layerData.radiusX}
            radiusY={layerData.radiusY}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />);
          break;
        case 'line':
          array.push(<Line x={[layerData.x1, layerData.x2]}
            y={[layerData.y1, layerData.y2]}
            stroke={layerData.stroke || layerData.fill}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />);
          break;
        case 'path':
          array.push(<Path d={layerData.path || layerData.d}
            fill={layerData.fill}
            draggable={layerData.draggable}
            transform={layerData.transform}
            key={key} />)
          break;
      }
    });
    return array;
  }
computeLayers ( layers ) { const array = [ ] ; let layer ; Object . keys ( layers ) . forEach ( ( key ) => { layer = layers [ key ] ; if ( this . getLayerValue ( layers , layer , 'hidden' ) === true ) { return ; } ; const layerData = { } ; Object . keys ( layer ) . forEach ( ( k ) => { layerData [ k ] = this . getLayerValue ( layers , layer , k ) ; } ) ; if ( this . getLayerValue ( layers , layer , 'gradient' ) ) { layerData . fill = ` ${ key } ` ; } switch ( layer . type ) { case 'text' : const text = layerData . text . split ( '\n' ) ; array . push ( < Text x = { layerData . x } y = { this . calculateYPosition ( layers , layerData ) } fontFamily = { layerData . fontFamily } fontSize = { layerData . fontSize } fontWeight = { layerData . fontWeight } lineHeight = { layerData . lineHeight } textAnchor = { layerData . textAnchor } fill = { layerData . fill } draggable = { layerData . draggable } transform = { layerData . transform } opacity = { layerData . opacity } smartQuotes = { layerData . smartQuotes } key = { key } > { text } < / Text > ) ; break ; case 'image' : array . push ( < Image x = { layerData . x } y = { this . calculateYPosition ( layers , layerData ) } href = { layerData . src } height = { layerData . height } width = { layerData . width } draggable = { layerData . draggable } transform = { layerData . transform } opacity = { layerData . opacity } key = { key } / > ) ; break ; case 'rectangle' : array . push ( < Rectangle x = { layerData . x } y = { this . calculateYPosition ( layers , layerData ) } fill = { layerData . fill } height = { layerData . height } width = { layerData . width } draggable = { layerData . draggable } transform = { layerData . transform } key = { key } / > ) ; break ; case 'circle' : array . push ( < Circle x = { layerData . x } y = { this . calculateYPosition ( layers , layerData ) } fill = { layerData . fill } radius = { layerData . radius } draggable = { layerData . draggable } transform = { layerData . transform } key = { key } / > ) ; break ; case 'ellipse' : array . push ( < Ellipse x = { layerData . x } y = { this . calculateYPosition ( layers , layerData ) } fill = { layerData . fill } radiusX = { layerData . radiusX } radiusY = { layerData . radiusY } draggable = { layerData . draggable } transform = { layerData . transform } key = { key } / > ) ; break ; case 'line' : array . push ( < Line x = { [ layerData . x1 , layerData . x2 ] } y = { [ layerData . y1 , layerData . y2 ] } stroke = { layerData . stroke || layerData . fill } draggable = { layerData . draggable } transform = { layerData . transform } key = { key } / > ) ; break ; case 'path' : array . push ( < Path d = { layerData . path || layerData . d } fill = { layerData . fill } draggable = { layerData . draggable } transform = { layerData . transform } key = { key } / > ) break ; } } ) ; return array ; }
Compute the layers to render on the Card
 @param {object} layers - The configuration object representing the layers to render
Compute the layers to render on the Card @param { object } layers - The configuration object representing the layers to render
// Iterate over the layers // If the layer is hidden, ignore it // Setup an object to contain our layer data // Iterate over the properties of the layer, and compute the value (handles getters, functions, and object implementations such as `y`) // Make the fill value map to a gradient name, if a gradient has been configured // See computeGradients() for the creation of gradient definitions // Switch over the layer type to ensure we create the card correctly // Split by newline