aframe-dat-gui/dist/dat-gui.js

Dataarts dat.gui for A-Frame components

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./index.js":
/*!******************!*\
  !*** ./index.js ***!
  \******************/
/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {

eval("const dat = __webpack_require__(/*! dat.gui */ \"./node_modules/dat.gui/build/dat.gui.module.js\");\r\nconst _color = new THREE.Color\r\n\r\nAFRAME.registerSystem('dat-gui', {\r\n\r\n  init() {\r\n    this.gui = new dat.GUI({closeOnTop: true});\r\n    this.gui.domElement.classList.add('gui')\r\n\r\n    // used for efficiently checking selector validity.\r\n    this.selectorChecker = document.createDocumentFragment()\r\n    this.folderNames = []\r\n\r\n    // CSS extensions to dat.GUI to highlight errored text in red\r\n    // (used for selectors)\r\n    document.head.insertAdjacentHTML(\"beforeend\", `\r\n    <style>\r\n     .dg .cr.string .error input[type=text] {\r\n      color: red;\r\n     }\r\n    </style>`)\r\n  },\r\n\r\n  addEntityFolder(el) {\r\n\r\n    let name = this.chooseUniqueName(el)\r\n    this.folderNames.push(name)\r\n    const folder = this.gui.addFolder(name)\r\n\r\n    return folder\r\n  },\r\n\r\n  chooseUniqueName(el, n = 1) {\r\n\r\n    let name = el.tagName.toLowerCase()\r\n    if (el.id) {\r\n      if (el.id.length > 12) {\r\n        name += ` ${el.id.substr(0, 10)}...`\r\n      }\r\n      else {\r\n        name += ` ${el.id}`\r\n      }\r\n    }\r\n    if (n > 1) {\r\n      name += ` (${n})`\r\n    }\r\n\r\n    if (this.folderNames.includes(name)) \r\n    {\r\n      return this.chooseUniqueName(el, n + 1)\r\n    }\r\n    else {\r\n      return name\r\n    }\r\n  }\r\n})\r\n\r\nAFRAME.registerComponent('dat-gui', {\r\n\r\n  init() {\r\n\r\n    this.entityFolder = this.system.addEntityFolder(this.el)\r\n\r\n    this.colorRecords = {}\r\n    this.selectorRecords = {}\r\n\r\n    const components = Object.values(this.el.components)\r\n\r\n    components.forEach(component => this.addFolder(component))\r\n  },\r\n\r\n  addFolder(component) {\r\n\r\n    // don't include this component itself.\r\n    if (component.attrName === 'dat-gui') return\r\n\r\n    const componentName = component.attrName\r\n    const folder = this.entityFolder.addFolder(componentName)\r\n\r\n    const data = component.data\r\n    const componentData = AFRAME.components[componentName]\r\n    const schema = componentData.schema\r\n\r\n    if (componentData.isSingleProperty) {\r\n      this.addProperty(folder, componentName, schema, data, componentName)\r\n    }\r\n    else {\r\n      const schemaEntries = Object.entries(schema)\r\n\r\n      schemaEntries.forEach(([prop, schemaData]) => {\r\n        this.addProperty(folder, componentName, schemaData, data, prop)\r\n      })\r\n    }\r\n\r\n    if (component.attrName === 'geometry') {\r\n      this.addGeometryProperties(component, folder)\r\n    }\r\n  },\r\n\r\n  addGeometryProperties(component, folder) {\r\n\r\n    const data = component.data\r\n    const geometry = AFRAME.geometries[data.primitive]\r\n    if (!geometry) return\r\n\r\n    const schema = geometry.schema\r\n    const schemaEntries = Object.entries(schema)\r\n\r\n    schemaEntries.forEach(([prop, schemaData]) => {\r\n      this.addProperty(folder, component.attrName, schemaData, data, prop)\r\n    })\r\n  },\r\n\r\n  addProperty(folder, componentName, schemaData, componentData, prop) {\r\n\r\n    const type = schemaData.type\r\n\r\n    const addProp = (parentData, prop, ...args) => {\r\n      const propController = folder.add(parentData, prop, ...args)\r\n      propController.onChange(() => {\r\n        this.el.setAttribute(componentName, componentData)\r\n      })\r\n    }\r\n\r\n    if (schemaData.oneOf) {\r\n      addProp(componentData, prop, schemaData.oneOf)\r\n      return\r\n    }\r\n\r\n    switch (type) {\r\n      case 'int':\r\n        addProp(componentData, prop, NaN, NaN, 1)\r\n        break\r\n\r\n      case 'number':\r\n        addProp(componentData, prop, NaN, NaN, undefined)\r\n        break\r\n\r\n      case 'string':\r\n      case 'boolean':\r\n        addProp(componentData, prop)\r\n        break\r\n\r\n      case 'color':\r\n        this.colorRecords[prop] = {r: 0, g: 0, b: 0}\r\n        _color.set(componentData[prop])\r\n        _color.multiplyScalar(255)\r\n        _color.getRGB(this.colorRecords[prop])\r\n        const colorController = folder.addColor(this.colorRecords, prop)\r\n        \r\n        colorController.onChange(() => {\r\n           const c = this.colorRecords[prop]\r\n           _color.setRGB(c.r / 255, c.g / 255, c.b / 255)\r\n           const colorString = _color.getStyle()\r\n           this.el.setAttribute(componentName, prop, colorString)\r\n        })\r\n        break\r\n\r\n      case 'vec2':\r\n      case 'vec3':\r\n      case 'vec4':\r\n        let parentData, subFolder\r\n        if (componentData[prop]) {\r\n          // not part of a single prop schema\r\n          subFolder = folder.addFolder(prop)\r\n          parentData = componentData[prop]\r\n        }\r\n        else {\r\n          // part of a single prop schema\r\n          subFolder = folder\r\n          parentData = componentData\r\n        }\r\n        \r\n        addProp(parentData, 'x', NaN, NaN, undefined)\r\n        addProp(parentData, 'y', NaN, NaN, undefined)\r\n        if (type !== 'vec2') {\r\n          addProp(parentData, 'z', NaN, NaN, undefined)\r\n        }\r\n        if (type === 'vec4') {\r\n          addProp(parentData, 'w', NaN, NaN, undefined)\r\n        }\r\n        break\r\n\r\n      case 'selector':\r\n        this.selectorRecords[prop] = componentData[prop] ? componentData[prop].id : \"\"\r\n        const controller = folder.add(this.selectorRecords, prop)\r\n\r\n        const isSelectorValid = (selector) => {\r\n          const queryCheck = (s) => this.system.selectorChecker.querySelector(s)\r\n          try { queryCheck(selector) } catch { return false }\r\n          return true\r\n        }\r\n\r\n        // when change starts, remove error marker, so text appears white while typing\r\n        controller.onChange(() => {\r\n          controller.domElement.classList.remove('error')\r\n        })\r\n        \r\n        // on finish change, recolor based on selector validity\r\n        controller.onFinishChange(() => {\r\n          const selector = this.selectorRecords[prop]\r\n          if (isSelectorValid(selector)) {\r\n            this.el.setAttribute(componentName, prop, selector)\r\n          }\r\n\r\n          if (!isSelectorValid(selector) || !document.querySelector(selector)) {\r\n            controller.domElement.classList.add('error')  \r\n          }\r\n        })\r\n        break\r\n\r\n      default:\r\n        console.warn(`Type: ${type} is not yet supported`)\r\n        break\r\n    }\r\n  }\r\n});\r\n\n\n//# sourceURL=webpack://aframe-dat-gui/./index.js?");

/***/ }),

/***/ "./node_modules/dat.gui/build/dat.gui.module.js":
/*!******************************************************!*\
  !*** ./node_modules/dat.gui/build/dat.gui.module.js ***!
  \******************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   GUI: () => (/* binding */ GUI$1),\n/* harmony export */   color: () => (/* binding */ color),\n/* harmony export */   controllers: () => (/* binding */ controllers),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   dom: () => (/* binding */ dom$1),\n/* harmony export */   gui: () => (/* binding */ gui)\n/* harmony export */ });\n/**\n * dat-gui JavaScript Controller Library\n * https://github.com/dataarts/dat.gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\nfunction ___$insertStyle(css) {\n  if (!css) {\n    return;\n  }\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  var style = document.createElement('style');\n\n  style.setAttribute('type', 'text/css');\n  style.innerHTML = css;\n  document.head.appendChild(style);\n\n  return css;\n}\n\nfunction colorToString (color, forceCSSHex) {\n  var colorFormat = color.__state.conversionName.toString();\n  var r = Math.round(color.r);\n  var g = Math.round(color.g);\n  var b = Math.round(color.b);\n  var a = color.a;\n  var h = Math.round(color.h);\n  var s = color.s.toFixed(1);\n  var v = color.v.toFixed(1);\n  if (forceCSSHex || colorFormat === 'THREE_CHAR_HEX' || colorFormat === 'SIX_CHAR_HEX') {\n    var str = color.hex.toString(16);\n    while (str.length < 6) {\n      str = '0' + str;\n    }\n    return '#' + str;\n  } else if (colorFormat === 'CSS_RGB') {\n    return 'rgb(' + r + ',' + g + ',' + b + ')';\n  } else if (colorFormat === 'CSS_RGBA') {\n    return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';\n  } else if (colorFormat === 'HEX') {\n    return '0x' + color.hex.toString(16);\n  } else if (colorFormat === 'RGB_ARRAY') {\n    return '[' + r + ',' + g + ',' + b + ']';\n  } else if (colorFormat === 'RGBA_ARRAY') {\n    return '[' + r + ',' + g + ',' + b + ',' + a + ']';\n  } else if (colorFormat === 'RGB_OBJ') {\n    return '{r:' + r + ',g:' + g + ',b:' + b + '}';\n  } else if (colorFormat === 'RGBA_OBJ') {\n    return '{r:' + r + ',g:' + g + ',b:' + b + ',a:' + a + '}';\n  } else if (colorFormat === 'HSV_OBJ') {\n    return '{h:' + h + ',s:' + s + ',v:' + v + '}';\n  } else if (colorFormat === 'HSVA_OBJ') {\n    return '{h:' + h + ',s:' + s + ',v:' + v + ',a:' + a + '}';\n  }\n  return 'unknown format';\n}\n\nvar ARR_EACH = Array.prototype.forEach;\nvar ARR_SLICE = Array.prototype.slice;\nvar Common = {\n  BREAK: {},\n  extend: function extend(target) {\n    this.each(ARR_SLICE.call(arguments, 1), function (obj) {\n      var keys = this.isObject(obj) ? Object.keys(obj) : [];\n      keys.forEach(function (key) {\n        if (!this.isUndefined(obj[key])) {\n          target[key] = obj[key];\n        }\n      }.bind(this));\n    }, this);\n    return target;\n  },\n  defaults: function defaults(target) {\n    this.each(ARR_SLICE.call(arguments, 1), function (obj) {\n      var keys = this.isObject(obj) ? Object.keys(obj) : [];\n      keys.forEach(function (key) {\n        if (this.isUndefined(target[key])) {\n          target[key] = obj[key];\n        }\n      }.bind(this));\n    }, this);\n    return target;\n  },\n  compose: function compose() {\n    var toCall = ARR_SLICE.call(arguments);\n    return function () {\n      var args = ARR_SLICE.call(arguments);\n      for (var i = toCall.length - 1; i >= 0; i--) {\n        args = [toCall[i].apply(this, args)];\n      }\n      return args[0];\n    };\n  },\n  each: function each(obj, itr, scope) {\n    if (!obj) {\n      return;\n    }\n    if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) {\n      obj.forEach(itr, scope);\n    } else if (obj.length === obj.length + 0) {\n      var key = void 0;\n      var l = void 0;\n      for (key = 0, l = obj.length; key < l; key++) {\n        if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) {\n          return;\n        }\n      }\n    } else {\n      for (var _key in obj) {\n        if (itr.call(scope, obj[_key], _key) === this.BREAK) {\n          return;\n        }\n      }\n    }\n  },\n  defer: function defer(fnc) {\n    setTimeout(fnc, 0);\n  },\n  debounce: function debounce(func, threshold, callImmediately) {\n    var timeout = void 0;\n    return function () {\n      var obj = this;\n      var args = arguments;\n      function delayed() {\n        timeout = null;\n        if (!callImmediately) func.apply(obj, args);\n      }\n      var callNow = callImmediately || !timeout;\n      clearTimeout(timeout);\n      timeout = setTimeout(delayed, threshold);\n      if (callNow) {\n        func.apply(obj, args);\n      }\n    };\n  },\n  toArray: function toArray(obj) {\n    if (obj.toArray) return obj.toArray();\n    return ARR_SLICE.call(obj);\n  },\n  isUndefined: function isUndefined(obj) {\n    return obj === undefined;\n  },\n  isNull: function isNull(obj) {\n    return obj === null;\n  },\n  isNaN: function (_isNaN) {\n    function isNaN(_x) {\n      return _isNaN.apply(this, arguments);\n    }\n    isNaN.toString = function () {\n      return _isNaN.toString();\n    };\n    return isNaN;\n  }(function (obj) {\n    return isNaN(obj);\n  }),\n  isArray: Array.isArray || function (obj) {\n    return obj.constructor === Array;\n  },\n  isObject: function isObject(obj) {\n    return obj === Object(obj);\n  },\n  isNumber: function isNumber(obj) {\n    return obj === obj + 0;\n  },\n  isString: function isString(obj) {\n    return obj === obj + '';\n  },\n  isBoolean: function isBoolean(obj) {\n    return obj === false || obj === true;\n  },\n  isFunction: function isFunction(obj) {\n    return obj instanceof Function;\n  }\n};\n\nvar INTERPRETATIONS = [\n{\n  litmus: Common.isString,\n  conversions: {\n    THREE_CHAR_HEX: {\n      read: function read(original) {\n        var test = original.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);\n        if (test === null) {\n          return false;\n        }\n        return {\n          space: 'HEX',\n          hex: parseInt('0x' + test[1].toString() + test[1].toString() + test[2].toString() + test[2].toString() + test[3].toString() + test[3].toString(), 0)\n        };\n      },\n      write: colorToString\n    },\n    SIX_CHAR_HEX: {\n      read: function read(original) {\n        var test = original.match(/^#([A-F0-9]{6})$/i);\n        if (test === null) {\n          return false;\n        }\n        return {\n          space: 'HEX',\n          hex: parseInt('0x' + test[1].toString(), 0)\n        };\n      },\n      write: colorToString\n    },\n    CSS_RGB: {\n      read: function read(original) {\n        var test = original.match(/^rgb\\(\\s*(\\S+)\\s*,\\s*(\\S+)\\s*,\\s*(\\S+)\\s*\\)/);\n        if (test === null) {\n          return false;\n        }\n        return {\n          space: 'RGB',\n          r: parseFloat(test[1]),\n          g: parseFloat(test[2]),\n          b: parseFloat(test[3])\n        };\n      },\n      write: colorToString\n    },\n    CSS_RGBA: {\n      read: function read(original) {\n        var test = original.match(/^rgba\\(\\s*(\\S+)\\s*,\\s*(\\S+)\\s*,\\s*(\\S+)\\s*,\\s*(\\S+)\\s*\\)/);\n        if (test === null) {\n          return false;\n        }\n        return {\n          space: 'RGB',\n          r: parseFloat(test[1]),\n          g: parseFloat(test[2]),\n          b: parseFloat(test[3]),\n          a: parseFloat(test[4])\n        };\n      },\n      write: colorToString\n    }\n  }\n},\n{\n  litmus: Common.isNumber,\n  conversions: {\n    HEX: {\n      read: function read(original) {\n        return {\n          space: 'HEX',\n          hex: original,\n          conversionName: 'HEX'\n        };\n      },\n      write: function write(color) {\n        return color.hex;\n      }\n    }\n  }\n},\n{\n  litmus: Common.isArray,\n  conversions: {\n    RGB_ARRAY: {\n      read: function read(original) {\n        if (original.length !== 3) {\n          return false;\n        }\n        return {\n          space: 'RGB',\n          r: original[0],\n          g: original[1],\n          b: original[2]\n        };\n      },\n      write: function write(color) {\n        return [color.r, color.g, color.b];\n      }\n    },\n    RGBA_ARRAY: {\n      read: function read(original) {\n        if (original.length !== 4) return false;\n        return {\n          space: 'RGB',\n          r: original[0],\n          g: original[1],\n          b: original[2],\n          a: original[3]\n        };\n      },\n      write: function write(color) {\n        return [color.r, color.g, color.b, color.a];\n      }\n    }\n  }\n},\n{\n  litmus: Common.isObject,\n  conversions: {\n    RGBA_OBJ: {\n      read: function read(original) {\n        if (Common.isNumber(original.r) && Common.isNumber(original.g) && Common.isNumber(original.b) && Common.isNumber(original.a)) {\n          return {\n            space: 'RGB',\n            r: original.r,\n            g: original.g,\n            b: original.b,\n            a: original.a\n          };\n        }\n        return false;\n      },\n      write: function write(color) {\n        return {\n          r: color.r,\n          g: color.g,\n          b: color.b,\n          a: color.a\n        };\n      }\n    },\n    RGB_OBJ: {\n      read: function read(original) {\n        if (Common.isNumber(original.r) && Common.isNumber(original.g) && Common.isNumber(original.b)) {\n          return {\n            space: 'RGB',\n            r: original.r,\n            g: original.g,\n            b: original.b\n          };\n        }\n        return false;\n      },\n      write: function write(color) {\n        return {\n          r: color.r,\n          g: color.g,\n          b: color.b\n        };\n      }\n    },\n    HSVA_OBJ: {\n      read: function read(original) {\n        if (Common.isNumber(original.h) && Common.isNumber(original.s) && Common.isNumber(original.v) && Common.isNumber(original.a)) {\n          return {\n            space: 'HSV',\n            h: original.h,\n            s: original.s,\n            v: original.v,\n            a: original.a\n          };\n        }\n        return false;\n      },\n      write: function write(color) {\n        return {\n          h: color.h,\n          s: color.s,\n          v: color.v,\n          a: color.a\n        };\n      }\n    },\n    HSV_OBJ: {\n      read: function read(original) {\n        if (Common.isNumber(original.h) && Common.isNumber(original.s) && Common.isNumber(original.v)) {\n          return {\n            space: 'HSV',\n            h: original.h,\n            s: original.s,\n            v: original.v\n          };\n        }\n        return false;\n      },\n      write: function write(color) {\n        return {\n          h: color.h,\n          s: color.s,\n          v: color.v\n        };\n      }\n    }\n  }\n}];\nvar result = void 0;\nvar toReturn = void 0;\nvar interpret = function interpret() {\n  toReturn = false;\n  var original = arguments.length > 1 ? Common.toArray(arguments) : arguments[0];\n  Common.each(INTERPRETATIONS, function (family) {\n    if (family.litmus(original)) {\n      Common.each(family.conversions, function (conversion, conversionName) {\n        result = conversion.read(original);\n        if (toReturn === false && result !== false) {\n          toReturn = result;\n          result.conversionName = conversionName;\n          result.conversion = conversion;\n          return Common.BREAK;\n        }\n      });\n      return Common.BREAK;\n    }\n  });\n  return toReturn;\n};\n\nvar tmpComponent = void 0;\nvar ColorMath = {\n  hsv_to_rgb: function hsv_to_rgb(h, s, v) {\n    var hi = Math.floor(h / 60) % 6;\n    var f = h / 60 - Math.floor(h / 60);\n    var p = v * (1.0 - s);\n    var q = v * (1.0 - f * s);\n    var t = v * (1.0 - (1.0 - f) * s);\n    var c = [[v, t, p], [q, v, p], [p, v, t], [p, q, v], [t, p, v], [v, p, q]][hi];\n    return {\n      r: c[0] * 255,\n      g: c[1] * 255,\n      b: c[2] * 255\n    };\n  },\n  rgb_to_hsv: function rgb_to_hsv(r, g, b) {\n    var min = Math.min(r, g, b);\n    var max = Math.max(r, g, b);\n    var delta = max - min;\n    var h = void 0;\n    var s = void 0;\n    if (max !== 0) {\n      s = delta / max;\n    } else {\n      return {\n        h: NaN,\n        s: 0,\n        v: 0\n      };\n    }\n    if (r === max) {\n      h = (g - b) / delta;\n    } else if (g === max) {\n      h = 2 + (b - r) / delta;\n    } else {\n      h = 4 + (r - g) / delta;\n    }\n    h /= 6;\n    if (h < 0) {\n      h += 1;\n    }\n    return {\n      h: h * 360,\n      s: s,\n      v: max / 255\n    };\n  },\n  rgb_to_hex: function rgb_to_hex(r, g, b) {\n    var hex = this.hex_with_component(0, 2, r);\n    hex = this.hex_with_component(hex, 1, g);\n    hex = this.hex_with_component(hex, 0, b);\n    return hex;\n  },\n  component_from_hex: function component_from_hex(hex, componentIndex) {\n    return hex >> componentIndex * 8 & 0xFF;\n  },\n  hex_with_component: function hex_with_component(hex, componentIndex, value) {\n    return value << (tmpComponent = componentIndex * 8) | hex & ~(0xFF << tmpComponent);\n  }\n};\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n  return typeof obj;\n} : function (obj) {\n  return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\n\n\n\n\n\n\n\n\n\n\n\nvar classCallCheck = function (instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n};\n\nvar createClass = function () {\n  function defineProperties(target, props) {\n    for (var i = 0; i < props.length; i++) {\n      var descriptor = props[i];\n      descriptor.enumerable = descriptor.enumerable || false;\n      descriptor.configurable = true;\n      if (\"value\" in descriptor) descriptor.writable = true;\n      Object.defineProperty(target, descriptor.key, descriptor);\n    }\n  }\n\n  return function (Constructor, protoProps, staticProps) {\n    if (protoProps) defineProperties(Constructor.prototype, protoProps);\n    if (staticProps) defineProperties(Constructor, staticProps);\n    return Constructor;\n  };\n}();\n\n\n\n\n\n\n\nvar get = function get(object, property, receiver) {\n  if (object === null) object = Function.prototype;\n  var desc = Object.getOwnPropertyDescriptor(object, property);\n\n  if (desc === undefined) {\n    var parent = Object.getPrototypeOf(object);\n\n    if (parent === null) {\n      return undefined;\n    } else {\n      return get(parent, property, receiver);\n    }\n  } else if (\"value\" in desc) {\n    return desc.value;\n  } else {\n    var getter = desc.get;\n\n    if (getter === undefined) {\n      return undefined;\n    }\n\n    return getter.call(receiver);\n  }\n};\n\nvar inherits = function (subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass);\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      enumerable: false,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n};\n\n\n\n\n\n\n\n\n\n\n\nvar possibleConstructorReturn = function (self, call) {\n  if (!self) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self;\n};\n\nvar Color = function () {\n  function Color() {\n    classCallCheck(this, Color);\n    this.__state = interpret.apply(this, arguments);\n    if (this.__state === false) {\n      throw new Error('Failed to interpret color arguments');\n    }\n    this.__state.a = this.__state.a || 1;\n  }\n  createClass(Color, [{\n    key: 'toString',\n    value: function toString() {\n      return colorToString(this);\n    }\n  }, {\n    key: 'toHexString',\n    value: function toHexString() {\n      return colorToString(this, true);\n    }\n  }, {\n    key: 'toOriginal',\n    value: function toOriginal() {\n      return this.__state.conversion.write(this);\n    }\n  }]);\n  return Color;\n}();\nfunction defineRGBComponent(target, component, componentHexIndex) {\n  Object.defineProperty(target, component, {\n    get: function get$$1() {\n      if (this.__state.space === 'RGB') {\n        return this.__state[component];\n      }\n      Color.recalculateRGB(this, component, componentHexIndex);\n      return this.__state[component];\n    },\n    set: function set$$1(v) {\n      if (this.__state.space !== 'RGB') {\n        Color.recalculateRGB(this, component, componentHexIndex);\n        this.__state.space = 'RGB';\n      }\n      this.__state[component] = v;\n    }\n  });\n}\nfunction defineHSVComponent(target, component) {\n  Object.defineProperty(target, component, {\n    get: function get$$1() {\n      if (this.__state.space === 'HSV') {\n        return this.__state[component];\n      }\n      Color.recalculateHSV(this);\n      return this.__state[component];\n    },\n    set: function set$$1(v) {\n      if (this.__state.space !== 'HSV') {\n        Color.recalculateHSV(this);\n        this.__state.space = 'HSV';\n      }\n      this.__state[component] = v;\n    }\n  });\n}\nColor.recalculateRGB = function (color, component, componentHexIndex) {\n  if (color.__state.space === 'HEX') {\n    color.__state[component] = ColorMath.component_from_hex(color.__state.hex, componentHexIndex);\n  } else if (color.__state.space === 'HSV') {\n    Common.extend(color.__state, ColorMath.hsv_to_rgb(color.__state.h, color.__state.s, color.__state.v));\n  } else {\n    throw new Error('Corrupted color state');\n  }\n};\nColor.recalculateHSV = function (color) {\n  var result = ColorMath.rgb_to_hsv(color.r, color.g, color.b);\n  Common.extend(color.__state, {\n    s: result.s,\n    v: result.v\n  });\n  if (!Common.isNaN(result.h)) {\n    color.__state.h = result.h;\n  } else if (Common.isUndefined(color.__state.h)) {\n    color.__state.h = 0;\n  }\n};\nColor.COMPONENTS = ['r', 'g', 'b', 'h', 's', 'v', 'hex', 'a'];\ndefineRGBComponent(Color.prototype, 'r', 2);\ndefineRGBComponent(Color.prototype, 'g', 1);\ndefineRGBComponent(Color.prototype, 'b', 0);\ndefineHSVComponent(Color.prototype, 'h');\ndefineHSVComponent(Color.prototype, 's');\ndefineHSVComponent(Color.prototype, 'v');\nObject.defineProperty(Color.prototype, 'a', {\n  get: function get$$1() {\n    return this.__state.a;\n  },\n  set: function set$$1(v) {\n    this.__state.a = v;\n  }\n});\nObject.defineProperty(Color.prototype, 'hex', {\n  get: function get$$1() {\n    if (this.__state.space !== 'HEX') {\n      this.__state.hex = ColorMath.rgb_to_hex(this.r, this.g, this.b);\n      this.__state.space = 'HEX';\n    }\n    return this.__state.hex;\n  },\n  set: function set$$1(v) {\n    this.__state.space = 'HEX';\n    this.__state.hex = v;\n  }\n});\n\nvar Controller = function () {\n  function Controller(object, property) {\n    classCallCheck(this, Controller);\n    this.initialValue = object[property];\n    this.domElement = document.createElement('div');\n    this.object = object;\n    this.property = property;\n    this.__onChange = undefined;\n    this.__onFinishChange = undefined;\n  }\n  createClass(Controller, [{\n    key: 'onChange',\n    value: function onChange(fnc) {\n      this.__onChange = fnc;\n      return this;\n    }\n  }, {\n    key: 'onFinishChange',\n    value: function onFinishChange(fnc) {\n      this.__onFinishChange = fnc;\n      return this;\n    }\n  }, {\n    key: 'setValue',\n    value: function setValue(newValue) {\n      this.object[this.property] = newValue;\n      if (this.__onChange) {\n        this.__onChange.call(this, newValue);\n      }\n      this.updateDisplay();\n      return this;\n    }\n  }, {\n    key: 'getValue',\n    value: function getValue() {\n      return this.object[this.property];\n    }\n  }, {\n    key: 'updateDisplay',\n    value: function updateDisplay() {\n      return this;\n    }\n  }, {\n    key: 'isModified',\n    value: function isModified() {\n      return this.initialValue !== this.getValue();\n    }\n  }]);\n  return Controller;\n}();\n\nvar EVENT_MAP = {\n  HTMLEvents: ['change'],\n  MouseEvents: ['click', 'mousemove', 'mousedown', 'mouseup', 'mouseover'],\n  KeyboardEvents: ['keydown']\n};\nvar EVENT_MAP_INV = {};\nCommon.each(EVENT_MAP, function (v, k) {\n  Common.each(v, function (e) {\n    EVENT_MAP_INV[e] = k;\n  });\n});\nvar CSS_VALUE_PIXELS = /(\\d+(\\.\\d+)?)px/;\nfunction cssValueToPixels(val) {\n  if (val === '0' || Common.isUndefined(val)) {\n    return 0;\n  }\n  var match = val.match(CSS_VALUE_PIXELS);\n  if (!Common.isNull(match)) {\n    return parseFloat(match[1]);\n  }\n  return 0;\n}\nvar dom = {\n  makeSelectable: function makeSelectable(elem, selectable) {\n    if (elem === undefined || elem.style === undefined) return;\n    elem.onselectstart = selectable ? function () {\n      return false;\n    } : function () {};\n    elem.style.MozUserSelect = selectable ? 'auto' : 'none';\n    elem.style.KhtmlUserSelect = selectable ? 'auto' : 'none';\n    elem.unselectable = selectable ? 'on' : 'off';\n  },\n  makeFullscreen: function makeFullscreen(elem, hor, vert) {\n    var vertical = vert;\n    var horizontal = hor;\n    if (Common.isUndefined(horizontal)) {\n      horizontal = true;\n    }\n    if (Common.isUndefined(vertical)) {\n      vertical = true;\n    }\n    elem.style.position = 'absolute';\n    if (horizontal) {\n      elem.style.left = 0;\n      elem.style.right = 0;\n    }\n    if (vertical) {\n      elem.style.top = 0;\n      elem.style.bottom = 0;\n    }\n  },\n  fakeEvent: function fakeEvent(elem, eventType, pars, aux) {\n    var params = pars || {};\n    var className = EVENT_MAP_INV[eventType];\n    if (!className) {\n      throw new Error('Event type ' + eventType + ' not supported.');\n    }\n    var evt = document.createEvent(className);\n    switch (className) {\n      case 'MouseEvents':\n        {\n          var clientX = params.x || params.clientX || 0;\n          var clientY = params.y || params.clientY || 0;\n          evt.initMouseEvent(eventType, params.bubbles || false, params.cancelable || true, window, params.clickCount || 1, 0,\n          0,\n          clientX,\n          clientY,\n          false, false, false, false, 0, null);\n          break;\n        }\n      case 'KeyboardEvents':\n        {\n          var init = evt.initKeyboardEvent || evt.initKeyEvent;\n          Common.defaults(params, {\n            cancelable: true,\n            ctrlKey: false,\n            altKey: false,\n            shiftKey: false,\n            metaKey: false,\n            keyCode: undefined,\n            charCode: undefined\n          });\n          init(eventType, params.bubbles || false, params.cancelable, window, params.ctrlKey, params.altKey, params.shiftKey, params.metaKey, params.keyCode, params.charCode);\n          break;\n        }\n      default:\n        {\n          evt.initEvent(eventType, params.bubbles || false, params.cancelable || true);\n          break;\n        }\n    }\n    Common.defaults(evt, aux);\n    elem.dispatchEvent(evt);\n  },\n  bind: function bind(elem, event, func, newBool) {\n    var bool = newBool || false;\n    if (elem.addEventListener) {\n      elem.addEventListener(event, func, bool);\n    } else if (elem.attachEvent) {\n      elem.attachEvent('on' + event, func);\n    }\n    return dom;\n  },\n  unbind: function unbind(elem, event, func, newBool) {\n    var bool = newBool || false;\n    if (elem.removeEventListener) {\n      elem.removeEventListener(event, func, bool);\n    } else if (elem.detachEvent) {\n      elem.detachEvent('on' + event, func);\n    }\n    return dom;\n  },\n  addClass: function addClass(elem, className) {\n    if (elem.className === undefined) {\n      elem.className = className;\n    } else if (elem.className !== className) {\n      var classes = elem.className.split(/ +/);\n      if (classes.indexOf(className) === -1) {\n        classes.push(className);\n        elem.className = classes.join(' ').replace(/^\\s+/, '').replace(/\\s+$/, '');\n      }\n    }\n    return dom;\n  },\n  removeClass: function removeClass(elem, className) {\n    if (className) {\n      if (elem.className === className) {\n        elem.removeAttribute('class');\n      } else {\n        var classes = elem.className.split(/ +/);\n        var index = classes.indexOf(className);\n        if (index !== -1) {\n          classes.splice(index, 1);\n          elem.className = classes.join(' ');\n        }\n      }\n    } else {\n      elem.className = undefined;\n    }\n    return dom;\n  },\n  hasClass: function hasClass(elem, className) {\n    return new RegExp('(?:^|\\\\s+)' + className + '(?:\\\\s+|$)').test(elem.className) || false;\n  },\n  getWidth: function getWidth(elem) {\n    var style = getComputedStyle(elem);\n    return cssValueToPixels(style['border-left-width']) + cssValueToPixels(style['border-right-width']) + cssValueToPixels(style['padding-left']) + cssValueToPixels(style['padding-right']) + cssValueToPixels(style.width);\n  },\n  getHeight: function getHeight(elem) {\n    var style = getComputedStyle(elem);\n    return cssValueToPixels(style['border-top-width']) + cssValueToPixels(style['border-bottom-width']) + cssValueToPixels(style['padding-top']) + cssValueToPixels(style['padding-bottom']) + cssValueToPixels(style.height);\n  },\n  getOffset: function getOffset(el) {\n    var elem = el;\n    var offset = { left: 0, top: 0 };\n    if (elem.offsetParent) {\n      do {\n        offset.left += elem.offsetLeft;\n        offset.top += elem.offsetTop;\n        elem = elem.offsetParent;\n      } while (elem);\n    }\n    return offset;\n  },\n  isActive: function isActive(elem) {\n    return elem === document.activeElement && (elem.type || elem.href);\n  }\n};\n\nvar BooleanController = function (_Controller) {\n  inherits(BooleanController, _Controller);\n  function BooleanController(object, property) {\n    classCallCheck(this, BooleanController);\n    var _this2 = possibleConstructorReturn(this, (BooleanController.__proto__ || Object.getPrototypeOf(BooleanController)).call(this, object, property));\n    var _this = _this2;\n    _this2.__prev = _this2.getValue();\n    _this2.__checkbox = document.createElement('input');\n    _this2.__checkbox.setAttribute('type', 'checkbox');\n    function onChange() {\n      _this.setValue(!_this.__prev);\n    }\n    dom.bind(_this2.__checkbox, 'change', onChange, false);\n    _this2.domElement.appendChild(_this2.__checkbox);\n    _this2.updateDisplay();\n    return _this2;\n  }\n  createClass(BooleanController, [{\n    key: 'setValue',\n    value: function setValue(v) {\n      var toReturn = get(BooleanController.prototype.__proto__ || Object.getPrototypeOf(BooleanController.prototype), 'setValue', this).call(this, v);\n      if (this.__onFinishChange) {\n        this.__onFinishChange.call(this, this.getValue());\n      }\n      this.__prev = this.getValue();\n      return toReturn;\n    }\n  }, {\n    key: 'updateDisplay',\n    value: function updateDisplay() {\n      if (this.getValue() === true) {\n        this.__checkbox.setAttribute('checked', 'checked');\n        this.__checkbox.checked = true;\n        this.__prev = true;\n      } else {\n        this.__checkbox.checked = false;\n        this.__prev = false;\n      }\n      return get(BooleanController.prototype.__proto__ || Object.getPrototypeOf(BooleanController.prototype), 'updateDisplay', this).call(this);\n    }\n  }]);\n  return BooleanController;\n}(Controller);\n\nvar OptionController = function (_Controller) {\n  inherits(OptionController, _Controller);\n  function OptionController(object, property, opts) {\n    classCallCheck(this, OptionController);\n    var _this2 = possibleConstructorReturn(this, (OptionController.__proto__ || Object.getPrototypeOf(OptionController)).call(this, object, property));\n    var options = opts;\n    var _this = _this2;\n    _this2.__select = document.createElement('select');\n    if (Common.isArray(options)) {\n      var map = {};\n      Common.each(options, function (element) {\n        map[element] = element;\n      });\n      options = map;\n    }\n    Common.each(options, function (value, key) {\n      var opt = document.createElement('option');\n      opt.innerHTML = key;\n      opt.setAttribute('value', value);\n      _this.__select.appendChild(opt);\n    });\n    _this2.updateDisplay();\n    dom.bind(_this2.__select, 'change', function () {\n      var desiredValue = this.options[this.selectedIndex].value;\n      _this.setValue(desiredValue);\n    });\n    _this2.domElement.appendChild(_this2.__select);\n    return _this2;\n  }\n  createClass(OptionController, [{\n    key: 'setValue',\n    value: function setValue(v) {\n      var toReturn = get(OptionController.prototype.__proto__ || Object.getPrototypeOf(OptionController.prototype), 'setValue', this).call(this, v);\n      if (this.__onFinishChange) {\n        this.__onFinishChange.call(this, this.getValue());\n      }\n      return toReturn;\n    }\n  }, {\n    key: 'updateDisplay',\n    value: function updateDisplay() {\n      if (dom.isActive(this.__select)) return this;\n      this.__select.value = this.getValue();\n      return get(OptionController.prototype.__proto__ || Object.getPrototypeOf(OptionController.prototype), 'updateDisplay', this).call(this);\n    }\n  }]);\n  return OptionController;\n}(Controller);\n\nvar StringController = function (_Controller) {\n  inherits(StringController, _Controller);\n  function StringController(object, property) {\n    classCallCheck(this, StringController);\n    var _this2 = possibleConstructorReturn(this, (StringController.__proto__ || Object.getPrototypeOf(StringController)).call(this, object, property));\n    var _this = _this2;\n    function onChange() {\n      _this.setValue(_this.__input.value);\n    }\n    function onBlur() {\n      if (_this.__onFinishChange) {\n        _this.__onFinishChange.call(_this, _this.getValue());\n      }\n    }\n    _this2.__input = document.createElement('input');\n    _this2.__input.setAttribute('type', 'text');\n    dom.bind(_this2.__input, 'keyup', onChange);\n    dom.bind(_this2.__input, 'change', onChange);\n    dom.bind(_this2.__input, 'blur', onBlur);\n    dom.bind(_this2.__input, 'keydown', function (e) {\n      if (e.keyCode === 13) {\n        this.blur();\n      }\n    });\n    _this2.updateDisplay();\n    _this2.domElement.appendChild(_this2.__input);\n    return _this2;\n  }\n  createClass(StringController, [{\n    key: 'updateDisplay',\n    value: function updateDisplay() {\n      if (!dom.isActive(this.__input)) {\n        this.__input.value = this.getValue();\n      }\n      return get(StringController.prototype.__proto__ || Object.getPrototypeOf(StringController.prototype), 'updateDisplay', this).call(this);\n    }\n  }]);\n  return StringController;\n}(Controller);\n\nfunction numDecimals(x) {\n  var _x = x.toString();\n  if (_x.indexOf('.') > -1) {\n    return _x.length - _x.indexOf('.') - 1;\n  }\n  return 0;\n}\nvar NumberController = function (_Controller) {\n  inherits(NumberController, _Controller);\n  function NumberController(object, property, params) {\n    classCallCheck(this, NumberController);\n    var _this = possibleConstructorReturn(this, (NumberController.__proto__ || Object.getPrototypeOf(NumberController)).call(this, object, property));\n    var _params = params || {};\n    _this.__min = _params.min;\n    _this.__max = _params.max;\n    _this.__step = _params.step;\n    if (Common.isUndefined(_this.__step)) {\n      if (_this.initialValue === 0) {\n        _this.__impliedStep = 1;\n      } else {\n        _this.__impliedStep = Math.pow(10, Math.floor(Math.log(Math.abs(_this.initialValue)) / Math.LN10)) / 10;\n      }\n    } else {\n      _this.__impliedStep = _this.__step;\n    }\n    _this.__precision = numDecimals(_this.__impliedStep);\n    return _this;\n  }\n  createClass(NumberController, [{\n    key: 'setValue',\n    value: function setValue(v) {\n      var _v = v;\n      if (this.__min !== undefined && _v < this.__min) {\n        _v = this.__min;\n      } else if (this.__max !== undefined && _v > this.__max) {\n        _v = this.__max;\n      }\n      if (this.__step !== undefined && _v % this.__step !== 0) {\n        _v = Math.round(_v / this.__step) * this.__step;\n      }\n      return get(NumberController.prototype.__proto__ || Object.getPrototypeOf(NumberController.prototype), 'setValue', this).call(this, _v);\n    }\n  }, {\n    key: 'min',\n    value: function min(minValue) {\n      this.__min = minValue;\n      return this;\n    }\n  }, {\n    key: 'max',\n    value: function max(maxValue) {\n      this.__max = maxValue;\n      return this;\n    }\n  }, {\n    key: 'step',\n    value: function step(stepValue) {\n      this.__step = stepValue;\n      this.__impliedStep = stepValue;\n      this.__precision = numDecimals(stepValue);\n      return this;\n    }\n  }]);\n  return NumberController;\n}(Controller);\n\nfunction roundToDecimal(value, decimals) {\n  var tenTo = Math.pow(10, decimals);\n  return Math.round(value * tenTo) / tenTo;\n}\nvar NumberControllerBox = function (_NumberController) {\n  inherits(NumberControllerBox, _NumberController);\n  function NumberControllerBox(object, property, params) {\n    classCallCheck(this, NumberControllerBox);\n    var _this2 = possibleConstructorReturn(this, (NumberControllerBox.__proto__ || Object.getPrototypeOf(NumberControllerBox)).call(this, object, property, params));\n    _this2.__truncationSuspended = false;\n    var _this = _this2;\n    var prevY = void 0;\n    function onChange() {\n      var attempted = parseFloat(_this.__input.value);\n      if (!Common.isNaN(attempted)) {\n        _this.setValue(attempted);\n      }\n    }\n    function onFinish() {\n      if (_this.__onFinishChange) {\n        _this.__onFinishChange.call(_this, _this.getValue());\n      }\n    }\n    function onBlur() {\n      onFinish();\n    }\n    function onMouseDrag(e) {\n      var diff = prevY - e.clientY;\n      _this.setValue(_this.getValue() + diff * _this.__impliedStep);\n      prevY = e.clientY;\n    }\n    function onMouseUp() {\n      dom.unbind(window, 'mousemove', onMouseDrag);\n      dom.unbind(window, 'mouseup', onMouseUp);\n      onFinish();\n    }\n    function onMouseDown(e) {\n      dom.bind(window, 'mousemove', onMouseDrag);\n      dom.bind(window, 'mouseup', onMouseUp);\n      prevY = e.clientY;\n    }\n    _this2.__input = document.createElement('input');\n    _this2.__input.setAttribute('type', 'text');\n    dom.bind(_this2.__input, 'change', onChange);\n    dom.bind(_this2.__input, 'blur', onBlur);\n    dom.bind(_this2.__input, 'mousedown', onMouseDown);\n    dom.bind(_this2.__input, 'keydown', function (e) {\n      if (e.keyCode === 13) {\n        _this.__truncationSuspended = true;\n        this.blur();\n        _this.__truncationSuspended = false;\n        onFinish();\n      }\n    });\n    _this2.updateDisplay();\n    _this2.domElement.appendChild(_this2.__input);\n    return _this2;\n  }\n  createClass(NumberControllerBox, [{\n    key: 'updateDisplay',\n    value: function updateDisplay() {\n      this.__input.value = this.__truncationSuspended ? this.getValue() : roundToDecimal(this.getValue(), this.__precision);\n      return get(NumberControllerBox.prototype.__proto__ || Object.getPrototypeOf(NumberControllerBox.prototype), 'updateDisplay', this).call(this);\n    }\n  }]);\n  return NumberControllerBox;\n}(NumberController);\n\nfunction map(v, i1, i2, o1, o2) {\n  return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));\n}\nvar NumberControllerSlider = function (_NumberController) {\n  inherits(NumberControllerSlider, _NumberController);\n  function NumberControllerSlider(object, property, min, max, step) {\n    classCallCheck(this, NumberControllerSlider);\n    var _this2 = possibleConstructorReturn(this, (NumberControllerSlider.__proto__ || Object.getPrototypeOf(NumberControllerSlider)).call(this, object, property, { min: min, max: max, step: step }));\n    var _this = _this2;\n    _this2.__background = document.createElement('div');\n    _this2.__foreground = document.createElement('div');\n    dom.bind(_this2.__background, 'mousedown', onMouseDown);\n    dom.bind(_this2.__background, 'touchstart', onTouchStart);\n    dom.addClass(_this2.__background, 'slider');\n    dom.addClass(_this2.__foreground, 'slider-fg');\n    function onMouseDown(e) {\n      document.activeElement.blur();\n      dom.bind(window, 'mousemove', onMouseDrag);\n      dom.bind(window, 'mouseup', onMouseUp);\n      onMouseDrag(e);\n    }\n    function onMouseDrag(e) {\n      e.preventDefault();\n      var bgRect = _this.__background.getBoundingClientRect();\n      _this.setValue(map(e.clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));\n      return false;\n    }\n    function onMouseUp() {\n      dom.unbind(window, 'mousemove', onMouseDrag);\n      dom.unbind(window, 'mouseup', onMouseUp);\n      if (_this.__onFinishChange) {\n        _this.__onFinishChange.call(_this, _this.getValue());\n      }\n    }\n    function onTouchStart(e) {\n      if (e.touches.length !== 1) {\n        return;\n      }\n      dom.bind(window, 'touchmove', onTouchMove);\n      dom.bind(window, 'touchend', onTouchEnd);\n      onTouchMove(e);\n    }\n    function onTouchMove(e) {\n      var clientX = e.touches[0].clientX;\n      var bgRect = _this.__background.getBoundingClientRect();\n      _this.setValue(map(clientX, bgRect.left, bgRect.right, _this.__min, _this.__max));\n    }\n    function onTouchEnd() {\n      dom.unbind(window, 'touchmove', onTouchMove);\n      dom.unbind(window, 'touchend', onTouchEnd);\n      if (_this.__onFinishChange) {\n        _this.__onFinishChange.call(_this, _this.getValue());\n      }\n    }\n    _this2.updateDisplay();\n    _this2.__background.appendChild(_this2.__foreground);\n    _this2.domElement.appendChild(_this2.__background);\n    return _this2;\n  }\n  createClass(NumberControllerSlider, [{\n    key: 'updateDisplay',\n    value: function updateDisplay() {\n      var pct = (this.getValue() - this.__min) / (this.__max - this.__min);\n      this.__foreground.style.width = pct * 100 + '%';\n      return get(NumberControllerSlider.prototype.__proto__ || Object.getPrototypeOf(NumberControllerSlider.prototype), 'updateDisplay', this).call(this);\n    }\n  }]);\n  return NumberControllerSlider;\n}(NumberController);\n\nvar FunctionController = function (_Controller) {\n  inherits(FunctionController, _Controller);\n  function FunctionController(object, property, text) {\n    classCallCheck(this, FunctionController);\n    var _this2 = possibleConstructorReturn(this, (FunctionController.__proto__ || Object.getPrototypeOf(FunctionController)).call(this, object, property));\n    var _this = _this2;\n    _this2.__button = document.createElement('div');\n    _this2.__button.innerHTML = text === undefined ? 'Fire' : text;\n    dom.bind(_this2.__button, 'click', function (e) {\n      e.preventDefault();\n      _this.fire();\n      return false;\n    });\n    dom.addClass(_this2.__button, 'button');\n    _this2.domElement.appendChild(_this2.__button);\n    return _this2;\n  }\n  createClass(FunctionController, [{\n    key: 'fire',\n    value: function fire() {\n      if (this.__onChange) {\n        this.__onChange.call(this);\n      }\n      this.getValue().call(this.object);\n      if (this.__onFinishChange) {\n        this.__onFinishChange.call(this, this.getValue());\n      }\n    }\n  }]);\n  return FunctionController;\n}(Controller);\n\nvar ColorController = function (_Controller) {\n  inherits(ColorController, _Controller);\n  function ColorController(object, property) {\n    classCallCheck(this, ColorController);\n    var _this2 = possibleConstructorReturn(this, (ColorController.__proto__ || Object.getPrototypeOf(ColorController)).call(this, object, property));\n    _this2.__color = new Color(_this2.getValue());\n    _this2.__temp = new Color(0);\n    var _this = _this2;\n    _this2.domElement = document.createElement('div');\n    dom.makeSelectable(_this2.domElement, false);\n    _this2.__selector = document.createElement('div');\n    _this2.__selector.className = 'selector';\n    _this2.__saturation_field = document.createElement('div');\n    _this2.__saturation_field.className = 'saturation-field';\n    _this2.__field_knob = document.createElement('div');\n    _this2.__field_knob.className = 'field-knob';\n    _this2.__field_knob_border = '2px solid ';\n    _this2.__hue_knob = document.createElement('div');\n    _this2.__hue_knob.className = 'hue-knob';\n    _this2.__hue_field = document.createElement('div');\n    _this2.__hue_field.className = 'hue-field';\n    _this2.__input = document.createElement('input');\n    _this2.__input.type = 'text';\n    _this2.__input_textShadow = '0 1px 1px ';\n    dom.bind(_this2.__input, 'keydown', function (e) {\n      if (e.keyCode === 13) {\n        onBlur.call(this);\n      }\n    });\n    dom.bind(_this2.__input, 'blur', onBlur);\n    dom.bind(_this2.__selector, 'mousedown', function () {\n      dom.addClass(this, 'drag').bind(window, 'mouseup', function () {\n        dom.removeClass(_this.__selector, 'drag');\n      });\n    });\n    dom.bind(_this2.__selector, 'touchstart', function () {\n      dom.addClass(this, 'drag').bind(window, 'touchend', function () {\n        dom.removeClass(_this.__selector, 'drag');\n      });\n    });\n    var valueField = document.createElement('div');\n    Common.extend(_this2.__selector.style, {\n