(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/*
 * Copyright © HatioLab Inc. All rights reserved.
 */
var NATURE = {
  mutable: false,
  resizable: true,
  rotatable: true,
  properties: [{
    type: 'string',
    label: 'value',
    name: 'value',
    property: 'value'
  }, {
    type: 'number',
    label: 'start-value',
    name: 'startValue',
    observe: function observe(startValue) {
      this.parentElement.querySelector('[name=colorStops]').set('property.min', startValue);
    },
    property: 'startValue'
  }, {
    type: 'number',
    label: 'end-value',
    name: 'endValue',
    observe: function observe(endValue) {
      this.parentElement.querySelector('[name=colorStops]').set('property.max', endValue);
    },
    property: 'endValue'
  }, {
    type: 'number',
    label: 'step',
    name: 'step',
    property: 'step'
  }, {
    type: 'number',
    label: 'step-text-size',
    name: 'stepTextSize',
    property: 'stepTextSize'
  }, {
    type: 'number',
    label: 'sub-step',
    name: 'subStep',
    property: 'subStep'
  }, {
    type: 'number',
    label: 'step-needle-size',
    name: 'stepNeedleSize',
    property: 'stepNeedleSize'
  }, {
    type: 'number',
    label: 'start-angle',
    name: 'startAngle',
    property: 'startAngle'
  }, {
    type: 'number',
    label: 'end-angle',
    name: 'endAngle',
    property: 'endAngle'
  }, {
    type: 'color',
    label: 'text-fill-style',
    name: 'textFillStyle',
    property: 'textFillStyle'
  }, {
    type: 'color',
    label: 'needle-fill-style',
    name: 'needleFillStyle',
    property: 'needleFillStyle'
  }, {
    type: 'color',
    label: 'inner-circle-fill-style',
    name: 'innerCircleFillStyle',
    property: 'innerCircleFillStyle'
  }, {
    type: 'color',
    label: 'step-fill-style',
    name: 'stepFillStyle',
    property: 'stepFillStyle'
  }, {
    type: 'solid-color-stops',
    label: 'color-stops',
    name: 'colorStops',
    property: {
      min: 0,
      max: 100
    }
  }, {
    type: 'legend',
    label: '',
    name: 'toggleOption',
    property: {
      label: 'Toggle Option'
    }
  }, {
    type: 'checkbox',
    label: 'show-start-value',
    name: 'showStartValue',
    property: 'showStartValue'
  }, {
    type: 'checkbox',
    label: 'show-end-value',
    name: 'showEndValue',
    property: 'showEndValue'
  }, {
    type: 'checkbox',
    label: 'show-step-line',
    name: 'showStepLine',
    property: 'showStepLine'
  }, {
    type: 'checkbox',
    label: 'show-step-text',
    name: 'showStepText',
    property: 'showStepText'
  }, {
    type: 'checkbox',
    label: 'show-sub-step',
    name: 'showSubStep',
    property: 'showSubStep'
  }, {
    type: 'checkbox',
    label: 'in-text',
    name: 'inText',
    property: 'inText'
  }]
};

function drawStepLine(context, ang, rx, stepNeedleSize) {
  context.rotate(ang);
  context.translate(0, -rx);

  context.fillRect(0, -rx * 0.14, stepNeedleSize, rx * 0.175);
  context.translate(0, rx);
  context.rotate(-ang);
}

function drawSubStepLine(context, ang, rx, stepNeedleSize) {
  context.rotate(ang);
  context.translate(0, -rx);

  context.fillRect(0, -rx * 0.04, stepNeedleSize, rx * 0.075);
  context.translate(0, rx);
  context.rotate(-ang);
}

function drawStepText(context, text, ang, rx) {
  context.rotate(ang);
  context.translate(0, -rx * 0.83);
  context.rotate(-ang);

  context.fillText(text, 0, 0);
  context.rotate(ang);
  context.translate(0, rx * 0.83);
  context.rotate(-ang);
}

function drawNeedle(context, rx, ang) {
  context.rotate(ang);

  context.beginPath();

  context.moveTo(rx * 0.035, 0); // 중앙 두께

  context.lineTo(0, rx * 0.8); // 끝 점

  context.lineTo(-rx * 0.035, 0); // 중앙 두께

  context.lineTo(-rx * 0.015, -rx * 0.2); // 뒷쪽 두께
  context.lineTo(rx * 0.015, -rx * 0.2); // 뒷쪽 두께

  context.rotate(-ang);
}

var _scene = scene,
    ValueHolder = _scene.ValueHolder,
    Donut = _scene.Donut;

var GaugeCircle = function (_ValueHolder) {
  _inherits(GaugeCircle, _ValueHolder);

  function GaugeCircle() {
    _classCallCheck(this, GaugeCircle);

    return _possibleConstructorReturn(this, (GaugeCircle.__proto__ || Object.getPrototypeOf(GaugeCircle)).apply(this, arguments));
  }

  _createClass(GaugeCircle, [{
    key: '_draw',
    value: function _draw(context) {
      var _model = this.model,
          _model$lineWidth = _model.lineWidth,
          lineWidth = _model$lineWidth === undefined ? 20 : _model$lineWidth,
          startValue = _model.startValue,
          endValue = _model.endValue,
          step = _model.step,
          subStep = _model.subStep,
          _model$startAngle = _model.startAngle,
          startAngle = _model$startAngle === undefined ? 0 : _model$startAngle,
          _model$endAngle = _model.endAngle,
          endAngle = _model$endAngle === undefined ? 180 : _model$endAngle,
          _model$fontColor = _model.fontColor,
          fontColor = _model$fontColor === undefined ? 'black' : _model$fontColor,
          _model$showStepText = _model.showStepText,
          showStepText = _model$showStepText === undefined ? true : _model$showStepText,
          _model$showStartValue = _model.showStartValue,
          showStartValue = _model$showStartValue === undefined ? true : _model$showStartValue,
          _model$showEndValue = _model.showEndValue,
          showEndValue = _model$showEndValue === undefined ? true : _model$showEndValue,
          _model$showStepLine = _model.showStepLine,
          showStepLine = _model$showStepLine === undefined ? true : _model$showStepLine,
          _model$showSubStep = _model.showSubStep,
          showSubStep = _model$showSubStep === undefined ? true : _model$showSubStep,
          _model$inText = _model.inText,
          inText = _model$inText === undefined ? true : _model$inText,
          colorStops = _model.colorStops,
          fillStyle = _model.fillStyle,
          _model$textFillStyle = _model.textFillStyle,
          textFillStyle = _model$textFillStyle === undefined ? 'black' : _model$textFillStyle,
          _model$needleFillStyl = _model.needleFillStyle,
          needleFillStyle = _model$needleFillStyl === undefined ? 'black' : _model$needleFillStyl,
          _model$innerCircleFil = _model.innerCircleFillStyle,
          innerCircleFillStyle = _model$innerCircleFil === undefined ? 'gray' : _model$innerCircleFil,
          _model$stepNeedleSize = _model.stepNeedleSize,
          stepNeedleSize = _model$stepNeedleSize === undefined ? 2 : _model$stepNeedleSize,
          stepFillStyle = _model.stepFillStyle,
          stepTextSize = _model.stepTextSize,
          cx = _model.cx,
          cy = _model.cy,
          rx = _model.rx,
          ry = _model.ry,
          ratio = _model.ratio;


      this.animOnValueChange(this.value);

      var RADIAN = 0.0174533 / Math.PI;
      var rxRatio = rx / 100 * ratio; // 원 안에 지워지는 비율을 계산한 rx - ratio의 비율에 따라 크기가 변함
      var ryRatio = ry / 100 * ratio; // 원 안에 지워지는 비율을 계산한 ry - ratio의 비율에 따라 크기가 변함
      var circleSize = (endAngle - startAngle) / 180; // 원의 총 길이. - PI * 2가 원이므로 (360도 = 2, 180도 = 1)
      var totalValue = endValue - startValue; // 게이지의 시작과 끝 값의 크기

      startAngle = startAngle * RADIAN - 0.5; //  맨 위쪽을 중심으로 앵글의 범위에 따라 왼쪽으로 넓어짐
      endAngle = endAngle * RADIAN - 0.5; //  맨 위쪽을 중심으로 앵글의 범위에 따라 오른쪽으로 넓어짐

      context.translate(cx, cy);

      ////  메인 게이지 원 그리기  ////
      context.beginPath();

      context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, (startAngle * Math.PI).toFixed(2), (endAngle * Math.PI).toFixed(2));
      this.drawStroke(context);
      context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, (endAngle * Math.PI).toFixed(2), (startAngle * Math.PI).toFixed(2), true); // 반대로 그리며 원을 지움.
      // this.drawFill(context)

      context.closePath();

      ////  스텝별 색 칠하기  ////
      if (colorStops) {
        var beforeValue = 0;
        var endStepAngle = 0;
        context.moveTo(0, 0);

        colorStops.forEach(function (v, idx, arr) {
          context.beginPath();

          var value = Math.max(Math.min(v.position - startValue, totalValue), 0); // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.
          var startStepAngle = endStepAngle || Math.PI * (startAngle + circleSize * beforeValue / totalValue);

          if (idx === arr.length - 1) // 마지막값은 무조건 끝까지 채워주도록 한다
            endStepAngle = Math.PI * (startAngle + circleSize);else endStepAngle = Math.PI * (startAngle + circleSize * value / totalValue);

          if (beforeValue > totalValue || beforeValue > value) // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음
            return false;

          context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, startStepAngle, endStepAngle);
          context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, endStepAngle, startStepAngle, true);
          context.fillStyle = v.color;
          context.fill();

          beforeValue = value;
        });
      }
      context.scale(1, ry / rx);

      ////  바늘 그리기  ////
      context.beginPath();
      var drawingValue = this.animValue;
      drawingValue = Math.max(Math.min(drawingValue, endValue), startValue); // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.

      var ang = Math.PI * (circleSize * (drawingValue - startValue) / totalValue + startAngle - 0.5);

      drawNeedle(context, rx, ang);

      context.fillStyle = needleFillStyle;
      context.fill();

      ////  중앙 원 그리기  ////
      context.beginPath();
      context.ellipse(0, 0, Math.abs(rx) / 15, Math.abs(rx) / 15, 0, 0, 2 * Math.PI);
      context.fillStyle = innerCircleFillStyle;
      context.fill();

      ////  스텝 선 그리기  ////
      context.fillStyle = stepFillStyle;
      if (showStepLine) {
        var count = totalValue / step;

        // Draw StartValue
        drawStepLine(context, Math.PI * (startAngle + 0.5), rx * 0.8, stepNeedleSize); // 원을 그릴때 PI는 45도 부터 그리지만 angle은 0도부터 틀어서 + 0.5도를 곱해줘야함
        // Draw StepValue
        for (var num = 1; num < count; num++) {
          var _ang = Math.PI * (circleSize / count * num + startAngle + 0.5);

          drawStepLine(context, _ang, rx * 0.8, stepNeedleSize);
        }
        // Draw EndValue
        drawStepLine(context, Math.PI * (endAngle + 0.5), rx * 0.8, stepNeedleSize);
      }

      ////  서브 스탭 그리기  ////
      if (showSubStep) {
        var _count = totalValue;

        // Draw StepValue
        for (var _num = 1; _num <= _count; _num++) {
          if (_num % step == 0 || _num % subStep != 0) {
            // 메인 스탭과 서브 스탭은 그리지 않음
            continue;
          }
          var _ang2 = Math.PI * (circleSize / _count * _num + startAngle + 0.5);

          drawSubStepLine(context, _ang2, rx * 0.8, stepNeedleSize);
        }
      }

      ////  스텝 텍스트 그리기  ////
      context.fillStyle = textFillStyle;
      context.font = rx * stepTextSize / 50 + "px arial";
      context.textBaseline = "middle";
      context.textAlign = "center";
      var textLocation = inText ? 0.8 : 1.35;

      if (showStartValue) {
        // Draw StartText
        drawStepText(context, startValue, Math.PI * (startAngle + 0.5), rx * textLocation);
      }

      if (showEndValue) {
        // Draw EndText
        drawStepText(context, endValue, Math.PI * (endAngle + 0.5), rx * textLocation);
      }

      if (showStepText) {
        // Draw StepText
        var _count2 = totalValue / step;

        for (var _num2 = 1; _num2 < _count2; _num2++) {
          var value = startValue + step * _num2;
          var _ang3 = Math.PI * (circleSize / _count2 * _num2 + startAngle + 0.5);

          drawStepText(context, value, _ang3, rx * textLocation);
        }
      }

      context.scale(1, rx / ry);
      context.translate(-cx, -cy);
    }
  }, {
    key: 'contains',
    value: function contains(x, y) {
      // 컨테인즈는 Ellipse로 정의함
      var _model2 = this.model,
          cx = _model2.cx,
          cy = _model2.cy,
          rx = _model2.rx,
          ry = _model2.ry;


      var normx = (x - cx) / (rx * 2 - 0.5);
      var normy = (y - cy) / (ry * 2 - 0.5);

      return normx * normx + normy * normy < 0.25;
    }
  }, {
    key: '_post_draw',
    value: function _post_draw(context) {
      this.drawText(context);
    }
  }, {
    key: 'nature',
    get: function get() {
      return NATURE;
    }
  }]);

  return GaugeCircle;
}(ValueHolder(Donut));

exports.default = GaugeCircle;


scene.Component.register('gauge-circle', GaugeCircle);

},{}],2:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/*
 * Copyright © HatioLab Inc. All rights reserved.
 */
var NATURE = {
  mutable: false,
  resizable: true,
  rotatable: true,
  properties: [{
    type: 'string',
    label: 'value',
    name: 'value',
    property: 'value'
  }, {
    type: 'number',
    label: 'start-value',
    name: 'startValue',
    observe: function observe(startValue) {
      this.parentElement.querySelector('[name=colorStops]').set('property.min', startValue);
    },
    property: 'startValue'
  }, {
    type: 'number',
    label: 'end-value',
    name: 'endValue',
    observe: function observe(endValue) {
      this.parentElement.querySelector('[name=colorStops]').set('property.max', endValue);
    },
    property: 'endValue'
  }, {
    type: 'number',
    label: 'step',
    name: 'step',
    property: 'step'
  }, {
    type: 'number',
    label: 'step-text-size',
    name: 'stepTextSize',
    property: 'stepTextSize'
  }, {
    type: 'number',
    label: 'sub-step',
    name: 'subStep',
    property: 'subStep'
  }, {
    type: 'number',
    label: 'step-needle-size',
    name: 'stepNeedleSize',
    property: 'stepNeedleSize'
  }, {
    type: 'color',
    label: 'text-fill-style',
    name: 'textFillStyle',
    property: 'textFillStyle'
  }, {
    type: 'color',
    label: 'needle-fill-style',
    name: 'needleFillStyle',
    property: 'needleFillStyle'
  }, {
    type: 'number',
    label: 'needle-size',
    name: 'needleSize',
    property: 'needleSize'
  }, {
    type: 'color',
    label: 'step-fill-style',
    name: 'stepFillStyle',
    property: 'stepFillStyle'
  }, {
    type: 'solid-color-stops',
    label: 'color-stops',
    name: 'colorStops',
    property: {
      min: 0,
      max: 100
    }
  }, {
    type: 'legend',
    label: '',
    name: 'toggleOption',
    property: {
      label: 'Toggle Option'
    }
  }, {
    type: 'checkbox',
    label: 'show-start-value',
    name: 'showStartValue',
    property: 'showStartValue'
  }, {
    type: 'checkbox',
    label: 'show-end-value',
    name: 'showEndValue',
    property: 'showEndValue'
  }, {
    type: 'checkbox',
    label: 'show-step-line',
    name: 'showStepLine',
    property: 'showStepLine'
  }, {
    type: 'checkbox',
    label: 'show-step-text',
    name: 'showStepText',
    property: 'showStepText'
  }, {
    type: 'checkbox',
    label: 'show-sub-step',
    name: 'showSubStep',
    property: 'showSubStep'
  }]
};

var _scene = scene,
    ValueHolder = _scene.ValueHolder,
    RectPath = _scene.RectPath,
    Shape = _scene.Shape;

var GaugeHorizon = function (_ValueHolder) {
  _inherits(GaugeHorizon, _ValueHolder);

  function GaugeHorizon() {
    _classCallCheck(this, GaugeHorizon);

    return _possibleConstructorReturn(this, (GaugeHorizon.__proto__ || Object.getPrototypeOf(GaugeHorizon)).apply(this, arguments));
  }

  _createClass(GaugeHorizon, [{
    key: '_draw',
    value: function _draw(context) {
      var _model = this.model,
          startValue = _model.startValue,
          endValue = _model.endValue,
          step = _model.step,
          subStep = _model.subStep,
          colorStops = _model.colorStops,
          needleFillStyle = _model.needleFillStyle,
          stepFillStyle = _model.stepFillStyle,
          textFillStyle = _model.textFillStyle,
          needleSize = _model.needleSize,
          stepNeedleSize = _model.stepNeedleSize,
          stepTextSize = _model.stepTextSize,
          _model$showStepText = _model.showStepText,
          showStepText = _model$showStepText === undefined ? true : _model$showStepText,
          _model$showStartValue = _model.showStartValue,
          showStartValue = _model$showStartValue === undefined ? true : _model$showStartValue,
          _model$showEndValue = _model.showEndValue,
          showEndValue = _model$showEndValue === undefined ? true : _model$showEndValue,
          _model$showStepLine = _model.showStepLine,
          showStepLine = _model$showStepLine === undefined ? true : _model$showStepLine,
          _model$showSubStep = _model.showSubStep,
          showSubStep = _model$showSubStep === undefined ? true : _model$showSubStep,
          width = _model.width,
          height = _model.height,
          top = _model.top,
          left = _model.left;


      this.animOnValueChange(this.value);

      var totalValue = endValue - startValue; // 게이지의 시작과 끝 값의 크기

      context.translate(left, top); // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌

      ////  메인 막대 그리기  ////
      context.beginPath();

      context.rect(0, 0, width, height);

      this.drawFill(context);
      this.drawStroke(context);
      context.closePath();

      ////  스텝별 색 칠하기  ////
      if (colorStops) {
        var beforeValue = 0;
        colorStops.forEach(function (v, idx, arr) {
          context.beginPath();

          var value = Math.max(Math.min(v.position - startValue, totalValue), 0); // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.
          var startStepPosition = width * beforeValue / totalValue;
          var endStepPosition = void 0;
          // console.log(startStepPosition + (width * value / totalValue));
          if (idx == arr.length - 1 || startStepPosition + width * value / totalValue) // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 width 를 넘을 경우는 무조건 끝까지 채워주도록 한다
            endStepPosition = width - startStepPosition;else endStepPosition = width * value / totalValue;

          if (beforeValue > totalValue || beforeValue > value) // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음
            return false;

          context.rect(startStepPosition, 0, endStepPosition, height);

          context.fillStyle = v.color;
          context.fill();

          beforeValue = value;
        });
      }

      ////  스텝 선 그리기  ////
      context.fillStyle = stepFillStyle;
      if (showStepLine) {
        var count = totalValue / step;
        var stepSize = width * 0.06;

        // Draw StartValue
        context.fillRect(0, height - stepSize, stepNeedleSize, stepSize);
        // Draw StepValue
        for (var num = 1; num < count; num++) {
          var locate = width / count * num;

          context.fillRect(locate, height - stepSize, stepNeedleSize, stepSize);
        }
        // Draw EndValue
        context.fillRect(width, height - stepSize, stepNeedleSize, stepSize);
      }

      ////  서브 스탭 그리기  ////
      if (showSubStep) {
        var _count = totalValue;
        var subStepSize = width * 0.027;
        // Draw StartValue
        context.fillRect(0, height - subStepSize, stepNeedleSize, subStepSize);

        // Draw StepValue
        for (var _num = 1; _num <= _count; _num++) {
          if (_num % step == 0 || _num % subStep != 0) {
            // 메인 스탭과 서브 스탭은 그리지 않음
            continue;
          }
          var _locate = width / _count * _num;
          context.fillRect(_locate, height - subStepSize, stepNeedleSize, subStepSize);
        }
      }

      ////  스텝 텍스트 그리기  ////
      var fontSize = width * stepTextSize / 150;
      context.fillStyle = textFillStyle;
      context.font = fontSize + "px arial";
      context.textBaseline = "middle";
      context.textAlign = "center";
      if (showStartValue) {
        // Draw StartText
        context.fillText(startValue, 0, height + fontSize * 0.75);
      }

      if (showEndValue) {
        // Draw EndText
        context.fillText(endValue, width, height + fontSize * 0.75);
      }

      if (showStepText) {
        // Draw StepText
        var _count2 = totalValue / step;

        for (var _num2 = 1; _num2 < _count2; _num2++) {
          var value = startValue + step * _num2;
          var _locate2 = width / _count2 * _num2;

          context.fillText(value, _locate2, height + fontSize * 0.75);
        }
      }

      ////  바늘 그리기  ////
      context.beginPath();
      var drawingValue = this.animValue;
      drawingValue = Math.max(Math.min(drawingValue, endValue), startValue); // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.
      var position = (drawingValue - startValue) / totalValue * width;

      needleSize *= 4;
      context.moveTo(position, height + fontSize * 1.4);
      context.lineTo(position + needleSize / 2, height + needleSize + fontSize * 1.4);
      context.lineTo(position - needleSize / 2, height + needleSize + fontSize * 1.4);

      context.fillStyle = needleFillStyle;
      context.fill();
      context.closePath();

      context.translate(-left, -top);
    }
  }, {
    key: '_post_draw',
    value: function _post_draw(context) {
      this.drawText(context);
    }
  }, {
    key: 'nature',
    get: function get() {
      return NATURE;
    }
  }]);

  return GaugeHorizon;
}(ValueHolder(RectPath(Shape)));

exports.default = GaugeHorizon;


scene.Component.register('gauge-horizon', GaugeHorizon);

},{}],3:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/*
 * Copyright © HatioLab Inc. All rights reserved.
 */
var NATURE = {
  mutable: false,
  resizable: true,
  rotatable: true,
  properties: [{
    type: 'string',
    label: 'value',
    name: 'value',
    property: 'value'
  }, {
    type: 'number',
    label: 'start-value',
    name: 'startValue',
    observe: function observe(startValue) {
      this.parentElement.querySelector('[name=colorStops]').set('property.min', startValue);
    },
    property: 'startValue'
  }, {
    type: 'number',
    label: 'end-value',
    name: 'endValue',
    observe: function observe(endValue) {
      this.parentElement.querySelector('[name=colorStops]').set('property.max', endValue);
    },
    property: 'endValue'
  }, {
    type: 'number',
    label: 'step',
    name: 'step',
    property: 'step'
  }, {
    type: 'number',
    label: 'step-text-size',
    name: 'stepTextSize',
    property: 'stepTextSize'
  }, {
    type: 'number',
    label: 'sub-step',
    name: 'subStep',
    property: 'subStep'
  }, {
    type: 'number',
    label: 'step-needle-size',
    name: 'stepNeedleSize',
    property: 'stepNeedleSize'
  }, {
    type: 'color',
    label: 'text-fill-style',
    name: 'textFillStyle',
    property: 'textFillStyle'
  }, {
    type: 'color',
    label: 'needle-fill-style',
    name: 'needleFillStyle',
    property: 'needleFillStyle'
  }, {
    type: 'number',
    label: 'needle-size',
    name: 'needleSize',
    property: 'needleSize'
  }, {
    type: 'color',
    label: 'step-fill-style',
    name: 'stepFillStyle',
    property: 'stepFillStyle'
  }, {
    type: 'solid-color-stops',
    label: 'color-stops',
    name: 'colorStops',
    property: {
      min: 0,
      max: 100
    }
  }, {
    type: 'legend',
    label: '',
    name: 'toggleOption',
    property: {
      label: 'Toggle Option'
    }
  }, {
    type: 'checkbox',
    label: 'show-start-value',
    name: 'showStartValue',
    property: 'showStartValue'
  }, {
    type: 'checkbox',
    label: 'show-end-value',
    name: 'showEndValue',
    property: 'showEndValue'
  }, {
    type: 'checkbox',
    label: 'show-step-line',
    name: 'showStepLine',
    property: 'showStepLine'
  }, {
    type: 'checkbox',
    label: 'show-step-text',
    name: 'showStepText',
    property: 'showStepText'
  }, {
    type: 'checkbox',
    label: 'show-sub-step',
    name: 'showSubStep',
    property: 'showSubStep'
  }]
};

var _scene = scene,
    ValueHolder = _scene.ValueHolder,
    RectPath = _scene.RectPath,
    Shape = _scene.Shape;

var GaugeVertical = function (_ValueHolder) {
  _inherits(GaugeVertical, _ValueHolder);

  function GaugeVertical() {
    _classCallCheck(this, GaugeVertical);

    return _possibleConstructorReturn(this, (GaugeVertical.__proto__ || Object.getPrototypeOf(GaugeVertical)).apply(this, arguments));
  }

  _createClass(GaugeVertical, [{
    key: '_draw',
    value: function _draw(context) {
      var _model = this.model,
          startValue = _model.startValue,
          endValue = _model.endValue,
          step = _model.step,
          subStep = _model.subStep,
          colorStops = _model.colorStops,
          needleFillStyle = _model.needleFillStyle,
          stepFillStyle = _model.stepFillStyle,
          textFillStyle = _model.textFillStyle,
          needleSize = _model.needleSize,
          stepNeedleSize = _model.stepNeedleSize,
          stepTextSize = _model.stepTextSize,
          _model$showStepText = _model.showStepText,
          showStepText = _model$showStepText === undefined ? true : _model$showStepText,
          _model$showStartValue = _model.showStartValue,
          showStartValue = _model$showStartValue === undefined ? true : _model$showStartValue,
          _model$showEndValue = _model.showEndValue,
          showEndValue = _model$showEndValue === undefined ? true : _model$showEndValue,
          _model$showStepLine = _model.showStepLine,
          showStepLine = _model$showStepLine === undefined ? true : _model$showStepLine,
          _model$showSubStep = _model.showSubStep,
          showSubStep = _model$showSubStep === undefined ? true : _model$showSubStep,
          width = _model.width,
          height = _model.height,
          top = _model.top,
          left = _model.left;


      this.animOnValueChange(this.value);

      var totalValue = endValue - startValue; // 게이지의 시작과 끝 값의 크기

      context.translate(left, top); // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌


      ////  메인 막대 그리기  ////
      context.beginPath();

      context.rect(0, 0, width, height);

      this.drawFill(context);
      this.drawStroke(context);
      context.closePath();

      ////  스텝별 색 칠하기  ////
      if (colorStops) {
        var beforeValue = 0;
        colorStops.forEach(function (v, idx, arr) {
          context.beginPath();

          var value = Math.max(Math.min(v.position - startValue, totalValue), 0); // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.
          var startStepPosition = height * beforeValue / totalValue;
          var endStepPosition = void 0;

          // console.log(startStepPosition + (height * value / totalValue));
          if (idx === arr.length - 1 || startStepPosition + height * value / totalValue) // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 height 를 넘을 경우는 무조건 끝까지 채워주도록 한다
            endStepPosition = height - startStepPosition;else endStepPosition = height - height * value / totalValue;

          if (beforeValue > totalValue || beforeValue > value) // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음
            return false;

          context.rect(0, height - startStepPosition, width, -endStepPosition);

          context.fillStyle = v.color;
          context.fill();
          beforeValue = value;
        });
      }

      ////  바늘 그리기  ////
      context.beginPath();
      var drawingValue = this.animValue;
      drawingValue = Math.max(Math.min(drawingValue, endValue), startValue); // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.
      var position = height - (drawingValue - startValue) / totalValue * height;

      needleSize *= 4;
      context.moveTo(width * 1.05, position);
      context.lineTo(width * 1.05 + needleSize, position + needleSize / 2);
      context.lineTo(width * 1.05 + needleSize, position - needleSize / 2);

      context.fillStyle = needleFillStyle;
      context.fill();
      context.closePath();

      ////  스텝 선 그리기  ////
      context.fillStyle = stepFillStyle;
      if (showStepLine) {
        var count = totalValue / step;

        // Draw StartValue
        context.fillRect(0, height, height * 0.06, stepNeedleSize);
        // Draw StepValue
        for (var num = 1; num < count; num++) {
          var locate = height / count * num;

          context.fillRect(0, locate, height * 0.06, stepNeedleSize);
        }
        // Draw EndValue
        context.fillRect(0, 0, height * 0.06, stepNeedleSize);
      }

      ////  서브 스탭 그리기  ////
      if (showSubStep) {
        var _count = totalValue;

        // Draw StartValue
        context.fillRect(0, 0, height * 0.027, stepNeedleSize);

        // Draw StepValue
        for (var _num = 1; _num <= _count; _num++) {
          if (_num % step == 0 || _num % subStep != 0) {
            // 메인 스탭과 서브 스탭은 그리지 않음
            continue;
          }
          var _locate = height / _count * _num;
          context.fillRect(0, _locate, height * 0.027, stepNeedleSize);
        }
      }

      ////  스텝 텍스트 그리기  ////
      var fontSize = height * stepTextSize / 150;
      context.fillStyle = textFillStyle;
      context.font = fontSize + "px arial";
      context.textBaseline = "middle";
      context.textAlign = "center";
      if (showStartValue) {
        // Draw StartText
        context.fillText(startValue, -fontSize, height);
      }

      if (showEndValue) {
        // Draw EndText
        context.fillText(endValue, -fontSize, 0);
      }

      if (showStepText) {
        // Draw StepText
        var _count2 = totalValue / step;

        for (var _num2 = 1; _num2 < _count2; _num2++) {
          var value = startValue + step * _num2;
          var _locate2 = height - height / _count2 * _num2;

          context.fillText(value, -fontSize, _locate2);
        }
      }

      context.translate(-left, -top);
    }
  }, {
    key: '_post_draw',
    value: function _post_draw(context) {
      this.drawText(context);
    }
  }, {
    key: 'nature',
    get: function get() {
      return NATURE;
    }
  }]);

  return GaugeVertical;
}(ValueHolder(RectPath(Shape)));

exports.default = GaugeVertical;


scene.Component.register('gauge-vertical', GaugeVertical);

},{}],4:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _gaugeCircle = require('./gauge-circle');

Object.defineProperty(exports, 'GaugeCircle', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_gaugeCircle).default;
  }
});

var _gaugeVertical = require('./gauge-vertical');

Object.defineProperty(exports, 'GaugeVertical', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_gaugeVertical).default;
  }
});

var _gaugeHorizon = require('./gauge-horizon');

Object.defineProperty(exports, 'GaugeHorizon', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_gaugeHorizon).default;
  }
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

},{"./gauge-circle":1,"./gauge-horizon":2,"./gauge-vertical":3}]},{},[1,2,3,4]);
