draw-elements.js

/** Import decamelize um camelCase in Dashed-Schreibweise umzuwandeln */
var decamelize = require('decamelize')

var d3 = require('d3')

/**
 * Funktion zum Zeichnen der Elemente aus Datensatz
 * @param  {Object} canvas SVG in dem die Elemente gezeichnet werden
 * @param  {Array} data   Daten und Attribute der Elemente
 */
var drawElements = function (canvas, data) {
  var elements = data
  if (!(canvas instanceof d3.selection)) {
    canvas = d3.select(canvas)
  }
  canvas.html('')
  /**
   * Schleife durch alle Elemente in data-Array
   */
  for (var i = 0; i < elements.length; i++) {
    /** SVG Element erstellen (text|image|rect) */
    var e = canvas.append(elements[i].type)
    /** Attribute des aktuellen Elements (font-family, font-size, x, y, etc.) */
    var keys = Object.keys(elements[i])

    /**
     * Schleife durch alle Attribute des aktuellen Elements
     */
    for (var j = 0; j < keys.length; j++) {
      /** Attribute die nicht type, content oder class sind werden in
       *  folgender Form gesetzt:
       *
       *  key="<value>"  Bsp.: font-family="Alte-Schwabacher"
       */
      if (keys[j] !== 'type' && keys[j] !== 'content' && keys[j] !== 'class') {
        /**
         * Bilder links benötigen in SVG einen Namespace deswegen wird href
         * folgendermaßen gesetzt:
         *
         * xlink:href="<Link zum Bild>"
         */
        if (keys[j] === 'href') {
          e.attr(decamelize('xlink:' + keys[j], '-'), elements[i][keys[j]])
        /**
         * preserveAspectRatio wird als einziges SVG-Attribut nicht mit dashes geschrieben
         * deshalb kein decamelize
         *
         * preserveAspectRatio="<value>"
         */
        } else if (keys[j] === 'preserveAspectRatio') {
          e.attr(keys[j], elements[i][keys[j]])
          /**
           * Alle anderen Attribute werden von camelCase in dashed-case umgeschrieben
           *
           * Bsp.: fontFamily -> font-family
           */
        } else {
          e.attr(decamelize(keys[j], '-'), elements[i][keys[j]])
        }
      /**
       * Content ist kein Elementattribut sondern der Text und wird folgendermaßen gesetzt:
       *
       * <text ...>[Content]</text>
       */
      } else if (keys[j] !== 'type' && keys[j] === 'content') {
        e.text(elements[i][keys[j]])
      }
    }
  }
}

module.exports = drawElements