'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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; }; }();

var _desc, _value, _class; /**
                            * Created by geweimin on 17/4/1.
                            */

/* eslint-disable */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _coreDecorators = require('core-decorators');

var _activityImpl = require('./activityImpl');

var _activityImpl2 = _interopRequireDefault(_activityImpl);

var _process = require('../../styles/global/process.less');

var _process2 = _interopRequireDefault(_process);

var _processAttr = require('./processAttr');

var _lineBreakMeasurer = require('./lineBreakMeasurer');

var _lineBreakMeasurer2 = _interopRequireDefault(_lineBreakMeasurer);

var _arrow = require('../../../asset/arrow.svg');

var _arrow2 = _interopRequireDefault(_arrow);

var _user_normal = require('../../../asset/user_normal.png');

var _user_normal2 = _interopRequireDefault(_user_normal);

var _user_active = require('../../../asset/user_active.png');

var _user_active2 = _interopRequireDefault(_user_active);

var _massage = require('../../../asset/massage.svg');

var _massage2 = _interopRequireDefault(_massage);

var _Polyline = require('./Polyline');

var _Polyline2 = _interopRequireDefault(_Polyline);

var _StringUtils = require('../../utils/StringUtils');

var _components = require('../../../components');

var _titleBar = require('../info/titleBar');

var _titleBar2 = _interopRequireDefault(_titleBar);

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

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; }

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
  var desc = {};
  Object['ke' + 'ys'](descriptor).forEach(function (key) {
    desc[key] = descriptor[key];
  });
  desc.enumerable = !!desc.enumerable;
  desc.configurable = !!desc.configurable;

  if ('value' in desc || desc.initializer) {
    desc.writable = true;
  }

  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
    return decorator(target, property, desc) || desc;
  }, desc);

  if (context && desc.initializer !== void 0) {
    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
    desc.initializer = undefined;
  }

  if (desc.initializer === void 0) {
    Object['define' + 'Property'](target, property, desc);
    desc = null;
  }

  return desc;
}

var START_EVENT_COLOR = Raphael.getRGB("rgb(251, 251, 251)");
var START_EVENT_STROKE_COLOR = _processAttr.Color.black;
var NORMAL_STROKE = 1;
var NORMAL_FONT = { font: "10px Arial", opacity: 1, fill: '#93C7EB' };
var CATCHING_EVENT_COLOR = _processAttr.Color.black;
var NONE_END_EVENT_STROKE_COLOR = _processAttr.Color.Firebrick4;
var NONE_END_EVENT_COLOR = _processAttr.Color.Firebrick4;
var TASK_CORNER_ROUND = 10;
var TASK_STROKE_COLOR = '#2B97E0';
var TASK_FONT = { font: "11px Arial", opacity: 1, fill: '#2B97E0' };
var LABEL_FONT = { font: "11px Arial", "font-style": "italic", opacity: 1, "fill": LABEL_COLOR };
var LABEL_COLOR = _processAttr.Color.get(72, 106, 150);
var TEXT_PADDING = 3;
var ICON_SIZE = 16;
var ICON_PADDING = 4;
var MARKER_WIDTH = 12;
var TASK_COLOR = _processAttr.Color.white;
var MULTILINE_VERTICAL_ALIGN_MIDDLE = "middle";
var MULTILINE_HORIZONTAL_ALIGN_MIDDLE = "middle";
var MULTILINE_HORIZONTAL_ALIGN_RIGHT = "end";
var GATEWAY_TYPE_STROKE = 3.2;
var ARROW_WIDTH = 4;
var THICK_TASK_BORDER_STROKE = 2.5;
var CONNECTION_TYPE = {
  SEQUENCE_FLOW: "sequence_flow",
  MESSAGE_FLOW: "message_flow",
  ASSOCIATION: "association"
};
var imgArr = {
  userTask: {
    normal: _user_normal2.default,
    highLight: _user_active2.default,
    active: _user_active2.default
  }
};
var EventUtil = {
  addHandler: function addHandler(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, handler);
    } else {
      element['on' + type] = handler;
    }
  },
  getEvent: function getEvent(event) {
    return event ? event : window.event;
  },
  stopPropagation: function stopPropagation(event) {
    event = event || window.event;
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  }
};
var RaphaelOriginal = Raphael;

var Process = (_class = function (_React$Component) {
  _inherits(Process, _React$Component);

  function Process(props) {
    _classCallCheck(this, Process);

    var _this = _possibleConstructorReturn(this, (Process.__proto__ || Object.getPrototypeOf(Process)).call(this, props));

    var _this$props = _this.props,
        dataSource = _this$props.dataSource,
        query = _this$props.query;

    var svgSize = _this.getSvgSize(dataSource);
    _this.activityDrawInstructions = {};
    _this.timeStamp = 0;
    _this._initActivityDrawInstructions();
    _this.zoomNum = 0;
    _this.state = {
      svgSize: svgSize,
      highlightActivity: dataSource.highLightedActivities[0],
      taskList: null,
      processInstanceId: 225094,
      processDefinition: dataSource.processDefinition.id,
      taskListActionLink: '/Api/BPM/process-instance/' + query.processInstanceId + '/taskHistory',
      radius: 5,
      closeBtnClassName: 'burger'
    };
    return _this;
  }

  _createClass(Process, [{
    key: '_initActivityDrawInstructions',
    value: function _initActivityDrawInstructions() {
      var _this2 = this;

      // start event
      this.activityDrawInstructions["startEvent"] = function (activityImpl) {
        _this2.g.setStart();
        var x = activityImpl.getX();
        var y = activityImpl.getY();
        var width = activityImpl.getWidth();
        var height = activityImpl.getHeight();
        var originalPaint = _this2._getPaint();
        if (typeof START_EVENT_STROKE_COLOR !== "undefined") {
          _this2._setPaint(START_EVENT_STROKE_COLOR);
        }

        width -= _this2._getStroke() / 2;
        height -= _this2._getStroke() / 2;

        x = x + width / 2;
        y = y + height / 2;

        var circle = _this2.g.ellipse(x, y, width / 2, height / 2);
        //TODO: TEST
        circle.attr({
          "stroke-width": _this2.strokeWidth,
          "stroke": _this2.paint,
          "fill": START_EVENT_COLOR
        });

        circle.id = activityImpl.id;
        circle.data("contextObject", activityImpl);

        _this2._setPaint(originalPaint);
        var set = _this2.g.setFinish();
        // this.addHandlers(set, x, y, width, height, "event", activityImpl, circle);
      };

      // end event
      this.activityDrawInstructions["endEvent"] = function (activityImpl) {

        _this2.g.setStart();
        var x = activityImpl.getX();
        var y = activityImpl.getY();
        var width = activityImpl.getWidth();
        var height = activityImpl.getHeight();
        var originalPaint = _this2._getPaint();
        if (typeof START_EVENT_STROKE_COLOR !== "undefined") {
          _this2._setPaint(START_EVENT_STROKE_COLOR);
        }

        width -= _this2._getStroke() / 2;
        height -= _this2._getStroke() / 2;

        x = x + width / 2;
        y = y + height / 2;

        var circle = _this2.g.ellipse(x, y, width / 2, height / 2);
        //TODO: TEST
        circle.attr({
          "stroke-width": _this2.strokeWidth + 1,
          "stroke": _this2.paint,
          "fill": START_EVENT_COLOR
        });

        circle.id = activityImpl.id;
        circle.data("contextObject", activityImpl);

        _this2._setPaint(originalPaint);
        var set = _this2.g.setFinish();
        // this.addHandlers(set, x, y, width, height, "event", activityImpl, circle);
      };

      // user task
      this.activityDrawInstructions["userTask"] = function (activityImpl) {
        _this2.drawTask(activityImpl, imgArr.userTask.normal);
      };

      // script task
      this.activityDrawInstructions["scriptTask"] = function (activityImpl) {
        _this2.drawTask(activityImpl, imgArr.userTask.normal);
      };

      // service task
      this.activityDrawInstructions["serviceTask"] = function (activityImpl) {
        _this2.drawTask(activityImpl, imgArr.userTask.normal);
      };

      // exclusive gateway
      this.activityDrawInstructions["exclusiveGateway"] = function (activityImpl) {
        var x = activityImpl.getX();
        var y = activityImpl.getY();
        var width = activityImpl.getWidth();
        var height = activityImpl.getHeight();
        _this2.g.setStart();

        var shape = _this2.drawGateway(x, y, width, height, activityImpl);

        var quarterWidth = width / 4;
        var quarterHeight = height / 4;

        // X inside rhombus
        var originalStroke = _this2._getStroke();
        _this2._setStroke(GATEWAY_TYPE_STROKE);

        var iks = _this2.g.path("M" + (x + quarterWidth + 3) + " " + (y + quarterHeight + 3) + "L" + (x + 3 * quarterWidth - 3) + " " + (y + 3 * quarterHeight - 3) + "M" + (x + quarterWidth + 3) + " " + (y + 3 * quarterHeight - 3) + "L" + (x + 3 * quarterWidth - 3) + " " + (y + quarterHeight + 3));
        iks.attr({ "stroke-width": _this2._getStroke(), "stroke": _this2._getPaint() });

        _this2._setStroke(originalStroke);

        var set = _this2.g.setFinish();
        // this.addHandlers(set, x, y, width, height, "gateway", shape);
      };

      // inclusive gateway
      this.activityDrawInstructions["inclusiveGateway"] = function () {
        var x = activityImpl.getX();
        var y = activityImpl.getY();
        var width = activityImpl.getWidth();
        var height = activityImpl.getHeight();
        this.g.setStart();

        // rhombus
        var shape = this.drawGateway(x, y, width, height, activityImpl);

        var diameter = width / 4;

        // circle inside rhombus
        var originalStroke = this._getStroke();
        this._setStroke(GATEWAY_TYPE_STROKE);
        var circle = this.g.ellipse(width / 2 + x, height / 2 + y, diameter, diameter);
        circle.attr({ "stroke-width": this._getStroke(), "stroke": this._getPaint() });

        this._setStroke(originalStroke);

        var set = this.g.setFinish();
        // this.addHandlers(set, x, y, width, height, "gateway", shape);
      };

      // parallel gateway
      this.activityDrawInstructions["parallelGateway"] = function () {
        var x = activityImpl.getX();
        var y = activityImpl.getY();
        var width = activityImpl.getWidth();
        var height = activityImpl.getHeight();
        this.g.setStart();

        // rhombus
        var shape = this.drawGateway(x, y, width, height, activityImpl);

        // plus inside rhombus
        var originalStroke = this._getStroke();
        this._setStroke(GATEWAY_TYPE_STROKE);

        var plus = this.g.path("M" + (x + 10) + " " + (y + height / 2) + "L" + (x + width - 10) + " " + (y + height / 2) + // horizontal
        "M" + (x + width / 2) + " " + (y + height - 10) + "L" + (x + width / 2) + " " + (y + 10) // vertical
        );
        plus.attr({ "stroke-width": this._getStroke(), "stroke": this._getPaint() });

        this._setStroke(originalStroke);

        var set = this.g.setFinish();
        // this.addHandlers(set, x, y, width, height, "gateway", shape);
      };
    }
  }, {
    key: 'drawGateway',
    value: function drawGateway(x, y, width, height, activityImpl) {

      var rhombus = this.g.path("M" + x + " " + (y + height / 2) + "L" + (x + width / 2) + " " + (y + height) + "L" + (x + width) + " " + (y + height / 2) + "L" + (x + width / 2) + " " + y + "z");

      // white shaddow
      // this.drawShaddow(rhombus);

      rhombus.attr("stroke-width", this.strokeWidth);
      rhombus.attr("stroke", _processAttr.Color.SlateGrey);
      rhombus.attr({ fill: _processAttr.Color.white });

      rhombus.id = activityImpl.id;
      rhombus.data("contextObject", activityImpl);

      return rhombus;
    }
  }, {
    key: 'drawTask',
    value: function drawTask(activityImpl, imgArr1) {
      var name = activityImpl.getProperty("name");
      var x = activityImpl.getX();
      var y = activityImpl.getY();
      var width = activityImpl.getWidth();
      var height = activityImpl.getHeight();
      this.g.setStart();
      var shape = this._drawTask(name, x, y, width, height, activityImpl);
      var img = this.g.image(imgArr1, x + ICON_PADDING, y + ICON_PADDING, ICON_SIZE, ICON_SIZE);
      img.id = activityImpl.id + 'Image';
      var set = this.g.setFinish();
      this.addHandlers(set, x, y, width, height, "task", activityImpl, shape);
    }
  }, {
    key: '_drawTask',
    value: function _drawTask(name, x, y, width, height, activityImpl) {
      var originalPaint = this._getPaint();
      this._setPaint(TASK_COLOR);

      // anti smoothing
      if (this.strokeWidth % 2 === 1) {
        x = Math.round(x) + .5, y = Math.round(y) + .5;
      }

      // shape
      var shape = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
      var attr = { "stroke-width": this.strokeWidth, stroke: TASK_STROKE_COLOR, fill: this._getPaint() };
      shape.attr(attr);
      shape.glow({ width: 4, fill: false, color: '#2b97e0' });
      //shape.attr({fill: "90-"+this.getPaint()+"-" + Color.get(250, 250, 244)});

      shape.id = activityImpl.id;
      shape.data("contextObject", activityImpl);

      this._setPaint(originalPaint);

      if (name) {
        var fontAttr = TASK_FONT;

        // Include some padding
        var paddingX = 5;
        var paddingY = 5;
        var availableTextSpace = width - paddingX * 2;

        var boxWidth = width - 2 * TEXT_PADDING;
        var boxHeight = height - ICON_SIZE - ICON_PADDING - ICON_PADDING - MARKER_WIDTH - 2 - 2;
        var boxX = x + width / 2 - boxWidth / 2;
        var boxY = y + height / 2 - boxHeight / 2 + ICON_PADDING + ICON_PADDING - 2 - 2;

        this._drawTaskLabel(name, boxX, boxY, boxWidth, boxHeight);
      }
      return shape;
    }
  }, {
    key: '_drawTaskLabel',
    value: function _drawTaskLabel(text, x, y, boxWidth, boxHeight) {
      var originalFont = this._getFont();
      this._setFont(TASK_FONT);

      var verticalAlign = MULTILINE_VERTICAL_ALIGN_MIDDLE;
      var horizontalAlign = MULTILINE_HORIZONTAL_ALIGN_MIDDLE;

      if (!text || text === "") return;

      // Autostretch boxHeight if boxHeight is 0
      if (boxHeight === 0) {
        verticalAlign = MULTILINE_VERTICAL_ALIGN_TOP;
      }

      //var TEXT_PADDING = 3;
      var width = boxWidth;
      var height = null;
      if (boxHeight) {
        height = boxHeight;
      }

      var layouts = [];

      //var font = {font: "11px Arial", opacity: 1, "fill": LABEL_COLOR};
      var font = this._getFont();
      var measurer = new _lineBreakMeasurer2.default(this.g, x, y, text, font);
      var lineHeight = measurer.rafaelTextObject.getBBox().height;
      //console.log("text: ", text.replace(/\n/g, "?"));
      var availableLinesCount = null;
      if (height) {
        availableLinesCount = parseInt(height / lineHeight);
      }

      var i = 1;
      while (measurer.getPosition() < measurer.text.getEndIndex()) {
        var layout = measurer.nextLayout(width);
        //console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());

        if (layout !== null) {
          // TODO: and check if measurer has next layout. If no then don't draw  dots
          if (!availableLinesCount || i < availableLinesCount) {
            layouts.push(layout);
          } else {
            layouts.push(this._fitTextToWidth(layout + "...", boxWidth));
            break;
          }
        }
        i++;
      }
      //console.log(layouts);

      measurer.rafaelTextObject.attr({ "text": layouts.join("\n") });

      if (horizontalAlign) measurer.rafaelTextObject.attr({ "text-anchor": horizontalAlign }); // end, middle, start

      var bb = measurer.rafaelTextObject.getBBox();
      // TODO: there is somethin wrong with wertical align. May be: measurer.rafaelTextObject.attr({"y": y + height/2 - bb.height/2})
      measurer.rafaelTextObject.attr({ "y": y + bb.height / 2 });
      //var bb = measurer.rafaelTextObject.getBBox();

      if (measurer.rafaelTextObject.attr("text-anchor") === MULTILINE_HORIZONTAL_ALIGN_MIDDLE) measurer.rafaelTextObject.attr("x", x + boxWidth / 2);else if (measurer.rafaelTextObject.attr("text-anchor") === MULTILINE_HORIZONTAL_ALIGN_RIGHT) measurer.rafaelTextObject.attr("x", x + boxWidth);

      var boxStyle = { stroke: _processAttr.Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- " };
      //var box = this.g.rect(x+.5, y + .5, width, height).attr(boxStyle);
      var textAreaCX = x + boxWidth / 2;
      var height1 = boxHeight;
      if (!height1) height1 = bb.height;
      var textAreaCY = y + height1 / 2;
      var dotLeftTop = this.g.ellipse(x, y, 3, 3).attr({
        "stroke-width": 0,
        fill: _processAttr.Color.LightSteelBlue,
        stroke: "none"
      }).hide();
      var dotCenter = this.g.ellipse(textAreaCX, textAreaCY, 3, 3).attr({
        fill: _processAttr.Color.LightSteelBlue2,
        stroke: "none"
      }).hide();

      /*
       // real bbox
       var bb = measurer.rafaelTextObject.getBBox();
       var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
       */
      var rect = this.g.rect(x, y, boxWidth, height).attr({ "stroke-width": 1 }).attr(boxStyle).hide();
      var debugSet = this.g.set();
      debugSet.push(dotLeftTop, dotCenter, rect);

      this._setFont(originalFont);
    }
  }, {
    key: '_fitTextToWidth',
    value: function _fitTextToWidth(original, width) {
      var text = original;

      // TODO: move attr on parameters
      var attr = { font: "11px Arial", opacity: 0 };

      // remove length for "..."
      var dots = this.g.text(0, 0, "...").attr(attr).hide();
      var dotsBB = dots.getBBox();

      var maxWidth = width - dotsBB.width;

      var textElement = this.g.text(0, 0, text).attr(attr).hide();
      var bb = textElement.getBBox();

      // it's a little bit incorrect with "..."
      while (bb.width > maxWidth && text.length > 0) {
        text = text.substring(0, text.length - 1);
        textElement.attr({ "text": text });
        bb = textElement.getBBox();
      }

      textElement.remove();

      if (text !== original) {
        text = text + "...";
      }

      return text;
    }
  }, {
    key: 'addHandlers',
    value: function addHandlers(set, x, y, width, height, type, contextObject, shape) {

      var cx = x + width / 2,
          cy = y + height / 2;
      var border = null;
      var overlay = null;
      if (type === "event") {
        border = this.g.ellipse(cx, cy, width / 2 + 4, height / 2 + 4);
        overlay = this.g.ellipse(cx, cy, width / 2, height / 2);
      } else if (type === "gateway") {
        // rhombus
        border = this.g.path("M" + (x - 4) + " " + (y + height / 2) + "L" + (x + width / 2) + " " + (y + height + 4) + "L" + (x + width + 4) + " " + (y + height / 2) + "L" + (x + width / 2) + " " + (y - 4) + "z");
        overlay = this.g.path("M" + x + " " + (y + height / 2) + "L" + (x + width / 2) + " " + (y + height) + "L" + (x + width) + " " + (y + height / 2) + "L" + (x + width / 2) + " " + y + "z");
      } else if (type === "task") {
        border = this.g.rect(x - 4, y - 4, width + 9, height + 9, TASK_CORNER_ROUND + 4);
        overlay = this.g.rect(x, y, width, height, TASK_CORNER_ROUND);
      }

      border.attr({ stroke: RaphaelOriginal.getRGB("rgb(132, 112, 255)"), "stroke-width": 4, opacity: 0.0 });
      border.id = contextObject.id + "_border";

      set.push(border);
      overlay[0].id = contextObject.id;
      overlay.attr({ stroke: _processAttr.Color.Orange, "stroke-width": 3, fill: RaphaelOriginal.getRGB("rgb(0, 0, 0)"), opacity: 0.0, cursor: "hand" });
      overlay.data("set", set);
      overlay.id = contextObject.id;
      overlay.data("contextObject", contextObject);

      var that = this;

      if (type === "task") {
        overlay.click(function (event) {
          //TODO: click event
          console.log("click event");
          that.taskOnClick(shape);
        });
      }

      overlay.hover(function (event) {
        var clientRect = overlay.node.getBoundingClientRect();
        var toolTips = document.querySelector('#toolTips');
        var arrow = document.querySelector('#tipsArrow');
        var tipContent = document.querySelector('#tipContent');
        if (!toolTips) {
          toolTips = document.createElement('div');
          toolTips.className = "toolTips";
          toolTips.id = 'toolTips';
          arrow = document.createElement('span');
          arrow.className = "tipsArrow";
          arrow.id = 'tipsArrow';
          toolTips.appendChild(arrow);
          tipContent = document.createElement('div');
          tipContent.className = "tipContent";
          tipContent.id = 'tipContent';
          toolTips.appendChild(tipContent);
        } else {
          toolTips.style.visibility = 'visible';
        }
        toolTips.style.top = clientRect.top + clientRect.height + 5 + 'px';
        toolTips.style.left = clientRect.left + 'px';
        document.getElementsByTagName('body')[0].append(toolTips);

        var vars = {};
        Object.keys(contextObject.properties).forEach(function (key) {
          var value = contextObject.properties[key];
          // if(key === "name") {
          //   Object.assign(vars, {"节点名": value});
          // } else if(key === "type") {
          //   Object.assign(vars, {"任务类型": value});
          // } else if(key === 'documentation') {
          //   Object.assign(vars, {"任务说明": value});
          // } else if(key === "isInterrupting") {
          //   Object.assign(vars, {"是否中断": value ? "是" : "否"});
          // } else
          if (key === "assignee") {
            Object.assign(vars, { "执行人：": value });
          } else {
            Object.assign(vars, { "执行人：": '未执行' });
          }
          // else if (key === "candidateGroups") {
          //   let valueRes = '(';
          //   value.forEach(function(item) {
          //     let valueTemp = '';
          //     if (item.indexOf('.') >= 0) {
          //       item.split('.').reduce(function(prev, item1) {
          //         return prev += item1 + ',';
          //       }, valueTemp);
          //       valueTemp = valueTemp.substr(0, valueTemp.length - 1);
          //     } else {
          //       valueTemp += item;
          //     }
          //     valueRes += valueTemp + '),(';
          //   });
          //   Object.assign(vars, {"可指派执行人": valueRes.substr(0, valueRes.length - 2)});
          // }
        });
        var tipContentChild = "<table cellSpacing=0 cellPadding=0 class='need-border'>";
        Object.keys(vars).forEach(function (varKey) {
          var varValue = vars[varKey];
          if (varValue) {
            tipContentChild += "<tr><td style='white-space: nowrap;text-align: right; padding-right: 5px; color: #011000;' valign='top'>" + varKey + "</td><td style='white-space: nowrap;'>" + varValue + "<td/></tr>";
          }
        });
        tipContentChild += "</table>";
        tipContent.innerHTML = tipContentChild;
      }, function (event) {
        document.getElementById('toolTips').style.visibility = 'hidden';
      });

      /*$('#' + contextObject.id).qtip({
       content: function() {
       var vars = {};
       $.each(contextObject.properties, function(key, value) {
       if(key == "name") {
       Object.assign(vars, {"节点名": value});
       } else if(key == "type") {
       Object.assign(vars, {"任务类型": value});
       } else if(key == 'documentation') {
       Object.assign(vars, {"任务说明": value});
       } else if(key == "isInterrupting") {
       Object.assign(vars, {"是否中断": value ? "是" : "否"});
       } else if (key == "assignee") {
       Object.assign(vars, {"执行人": value});
       } else if (key == "candidateGroups") {
       var valueRes = '(';
       value.forEach(function(item) {
       var valueTemp = '';
       if (item.indexOf('.') >= 0) {
       item.split('.').reduce(function(prev, item1) {
       return prev += item1 + ',';
       }, valueTemp);
       valueTemp = valueTemp.substr(0, valueTemp.length - 1);
       } else {
       valueTemp += item;
       }
       valueRes += valueTemp + '),(';
       });
       Object.assign(vars, {"可指派执行人": valueRes.substr(0, valueRes.length - 2)});
       }
       });
       var tipContent = "<table cellSpacing=0 cellPadding=0 class='need-border'>";
       $.each(vars, function(varKey, varValue) {
       if (varValue) {
       tipContent += "<tr><td class='label' valign='top'>" + varKey + "</td><td style='white-space: nowrap;'>" + varValue + "<td/></tr>";
       }
       });
       tipContent += "</table>";
       return tipContent;
       },
       position: {
       at: 'bottom left',
       adjust: {
       x: 3
       }
       },
       style: {
       classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
       }
       });*/
    }
  }, {
    key: '_drawActivity',
    value: function _drawActivity(activity) {
      var type = activity.getProperty("type");
      var drawInstruction = this.activityDrawInstructions[type];
      if (drawInstruction) {
        drawInstruction(activity);
      } else {
        console.error("no drawInstruction for " + type + ": ", activity);
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this3 = this;

      document.getElementsByClassName('wrapper-panel')[0].style.height = '100%';
      var dataSource = this.props.dataSource;
      var svgSize = this.state.svgSize;

      document.getElementById("diagramHolder").style.minWidth = svgSize.maxX + 'px';
      this.g = Raphael(document.getElementsByClassName("diagram")[0], svgSize.maxX, svgSize.maxY);
      this.g.clear();
      this._setPaint(_processAttr.Color.black);
      this._setStroke(NORMAL_STROKE);
      this._setFont(NORMAL_FONT);
      var self = this;
      this.ninjaPaper = function (local_raphael) {
        return local_raphael(1, 1, 1, 1, self.state.processDefinition);
      }(Raphael.ninja());

      var laneSets = dataSource && dataSource.laneSets ? dataSource.laneSets : [];
      var activities = dataSource && dataSource.activities ? dataSource.activities : [];
      var sequenceFlows = dataSource && dataSource.sequenceFlows ? dataSource.sequenceFlows : [];

      var cnt = 0;
      if (laneSets) {
        laneSets.forEach(function (item) {
          return cnt += item.lanes.length;
        });
      }

      if (activities) {
        cnt += activities.length;
      }
      if (sequenceFlows) {
        cnt += sequenceFlows.length;
      }
      var step = cnt > 0 ? 100 / cnt : 0;
      var progress = 0;

      laneSets.forEach(function (item) {
        item.forEach(function (item1) {
          // processDiagramCanvas.drawPoolOrLane(lane.x, lane.y, lane.width, lane.height, lane.name);
        });
      });

      activities.forEach(function (item) {
        var activity = new _activityImpl2.default(item);
        _this3._drawActivity(activity);
      });

      sequenceFlows.forEach(function (flow) {
        var waypoints = [];
        flow.xPointArray.forEach(function (item, index) {
          return waypoints.push({ x: item, y: flow.yPointArray[index] });
        });
        var isDefault = flow.isDefault;
        var isConditional = flow.isConditional;
        var isHighLighted = flow.isHighLighted;

        // TODO: add source and destination for sequence flows in REST
        // parse for test
        var f = flow.flow;
        var matches = f.match(/\((.*)\)--.*-->\((.*)\)/);
        var sourceActivityId = void 0,
            destinationActivityId = void 0;
        if (matches !== null) {
          sourceActivityId = matches[1];
          destinationActivityId = matches[2];
        }
        flow.sourceActivityId = sourceActivityId;
        flow.destinationActivityId = destinationActivityId;
        var withArrowHead = true;

        _this3._drawFlow(waypoints, isConditional, isDefault, isHighLighted, withArrowHead, CONNECTION_TYPE.SEQUENCE_FLOW, flow);
      });
      if (!this.props.dataSource.processFinish) {
        var shape = this.highLightActivity(this.state.highlightActivity);
        this.taskOnClick(shape);
      } else {
        this.highLightActivity(this.state.highlightActivity, true);
      }
      var diagramHolder = document.getElementById("diagramHolder");

      if (window.navigator.userAgent.indexOf('Firefox') !== -1) {
        EventUtil.addHandler(diagramHolder, 'DOMMouseScroll', this.handleMouseWheel);
      } else {
        EventUtil.addHandler(diagramHolder, 'mousewheel', this.handleMouseWheel);
      }

      var mask = document.querySelector('.first-loading-mask');
      if (mask) {
        mask.style.display = 'none';
      }
    }
  }, {
    key: 'handleMouseWheel',
    value: function handleMouseWheel(event) {
      EventUtil.stopPropagation(event);
      event = EventUtil.getEvent(event);
      var value = event.wheelDelta || -event.detail;
      var delta = Math.max(-1, Math.min(1, value));
      if (delta === 1) {
        if (event.timeStamp - this.timeStamp > 600) {
          this.timeStamp = event.timeStamp;
          this.zoomClick("+");
        }
      } else if (delta === -1) {
        if (event.timeStamp - this.timeStamp > 600) {
          this.timeStamp = event.timeStamp;
          this.zoomClick("-");
        }
      }
      return false;
      // console.log('delta:' + delta + ' event.timeStamp:' + event.timeStamp + ' event.wheelDelta:' + event.wheelDelta);
    }
  }, {
    key: 'highLightActivity',
    value: function highLightActivity(activityId, isFinish) {
      var shape = this.g.getById(activityId);
      if (!shape) {
        console.error("Activity " + activityId + " not found");
        return;
      }

      var contextObject = shape.data("contextObject");
      if (contextObject && !isFinish) {
        var img = this.g.getById(activityId + 'Image');
        if (img) {
          img.attr('src', imgArr[contextObject.properties.type].highLight);
          console.log("--> highLightActivity: [" + contextObject.getProperty("type") + "], activityId: " + contextObject.getId());
        }
      } else console.log("--> highLightActivity: ", shape, shape.data("contextObject"));
      // shape.attr("stroke", HIGHLIGHT_COLOR);
      if (!isFinish) {
        shape.attr("stroke-width", 0);
        shape.attr("fill", '#FFA94B');
        shape.next.attr('fill', '#FFFFFF');
        shape.node.id = activityId;
      } else {
        shape.attr("stroke-width", 3);
        shape.attr("stroke", NONE_END_EVENT_STROKE_COLOR);
      }
      return shape;
    }
  }, {
    key: 'drawActiveActivity',
    value: function drawActiveActivity(activityId) {
      var shape = this.g.getById(activityId);
      console.log(shape);
      if (!shape) {
        console.error("Activity " + activityId + " not found");
        return;
      }

      var contextObject = shape.data("contextObject");
      if (contextObject) console.log("--> highLightActivity: [" + contextObject.getProperty("type") + "], activityId: " + contextObject.getId());else console.log("--> highLightActivity: ", shape, shape.data("contextObject"));
      if (activityId === this.state.highlightActivity) {
        shape.attr("stroke-width", THICK_TASK_BORDER_STROKE);
        shape.attr("stroke", "FFA94B");
      } else {
        shape.attr("stroke-width", 0);
        // shape.attr("stroke", ACTIVE_COLOR);
      }
      shape.attr("fill", '#2B97E0');
      shape.next.attr('fill', '#FFFFFF');
      var img = this.g.getById(activityId + 'Image');
      img.attr('src', imgArr[contextObject.properties.type].active);
    }
  }, {
    key: 'normalActivity',
    value: function normalActivity(activityId) {
      var shape = this.g.getById(activityId);
      if (!shape) {
        console.error("Activity " + activityId + " not found");
        return;
      }

      var contextObject = shape.data("contextObject");
      if (contextObject) console.log("--> highLightActivity: [" + contextObject.getProperty("type") + "], activityId: " + contextObject.getId());else console.log("--> highLightActivity: ", shape, shape.data("contextObject"));

      shape.attr("stroke-width", NORMAL_STROKE);
      shape.attr("stroke", TASK_STROKE_COLOR);
      shape.attr("fill", TASK_COLOR);
      shape.next.attr('fill', '#2B97E0');
      var img = this.g.getById(activityId + 'Image');
      img.attr('src', imgArr[contextObject.properties.type].normal);
    }
  }, {
    key: 'taskOnClick',
    value: function taskOnClick(shape) {
      var _this4 = this;

      var overlay = shape;
      var set = overlay.data("set");
      var contextObject = overlay.data("contextObject");
      var activeActivity = this.activeActivity;
      if (contextObject.properties.type === 'startEvent' || contextObject.properties.type === 'endEvent') {
        return;
      }

      if (!activeActivity || activeActivity !== overlay.id) {
        this.drawActiveActivity(overlay.id);
        if (activeActivity) {
          if (activeActivity === this.state.highlightActivity) {
            this.highLightActivity(activeActivity);
          } else {
            this.normalActivity(activeActivity);
          }
        }
        this.activeActivity = overlay.id;
      }

      if (this.taskHistoryList && this.taskHistoryList.length > 0) {
        this._taskOnClick(contextObject, this.taskHistoryList);
      } else {
        this.props.exec(function () {
          return _this4.props.fetch(_this4.state.taskListActionLink, {}).then(function (data) {
            _this4._taskOnClick(contextObject, data);
            _this4.taskHistoryList = data;
          }).catch(function (err) {
            console.log('err:' + err);
          });
        });
      }
    }
  }, {
    key: '_taskOnClick',
    value: function _taskOnClick(contextObject, taskHistoryList) {
      var id = contextObject.id;
      var taskList = [];
      taskHistoryList && (0, _StringUtils.isArray)(taskHistoryList) && taskHistoryList.forEach(function (item, index) {
        if (item.taskDefinitionKey === id) {
          taskList.push(Object.assign({ index: index }, item));
        }
      });

      taskList.map(function (item) {
        if (item.index < taskHistoryList.length - 1) {
          var afterIndex = item.index + 1;
          Object.assign(item, {
            afterAssigneeName: taskHistoryList[afterIndex].assigneeName,
            afterRoleName: taskHistoryList[afterIndex].roleName,
            afterDeptName: taskHistoryList[afterIndex].deptName
          });
        } else {
          Object.assign(item, {
            afterAssigneeName: '',
            afterRoleName: '',
            afterDeptName: ''
          });
        }

        if (item.index > 0) {
          var frontIndex = item.index - 1;
          Object.assign(item, {
            frontAssigneeName: taskHistoryList[frontIndex].assigneeName,
            frontRoleName: taskHistoryList[frontIndex].roleName,
            frontDeptName: taskHistoryList[frontIndex].deptName
          });
        } else {
          Object.assign(item, {
            frontAssigneeName: '',
            frontRoleName: '',
            frontDeptName: ''
          });
        }
        item.startTime = new Date(item.startTime).toLocaleString().substr(0, 9);
        item.endTime = item.endTime ? new Date(item.endTime).toLocaleString().substr(0, 9) : '';
        return item;
      });
      // taskList[0].frontAssigneeName = '粉红色的粉红色的很快就到合肥科技的首付款粉红色的粉红色的很快就到合肥科技的首付款粉红色的粉红色的很快就到合肥科技的首付款粉红色的粉红色的很快就到合肥科技的首付款粉红色的粉红色的很快就到合肥科技的首付款';
      // const tempTaskList = [];
      // tempTaskList.push(taskList[0]);
      // tempTaskList.push(taskList[0]);
      // tempTaskList.push(taskList[0]);
      // tempTaskList.push(taskList[0]);
      this.burgerClick(true);
      taskList.reverse();
      this.setState({
        taskList: taskList
      });
    }
  }, {
    key: '_drawFlow',
    value: function _drawFlow(waypoints, conditional, isDefault, highLighted, withArrowHead, connectionType, flow) {
      var originalPaint = this._getPaint();
      var originalStroke = this._getStroke();

      var SEQUENCEFLOW_COLOR = _processAttr.Color.black;
      var SEQUENCEFLOW_STROKE = 1.5;

      this._setPaint(SEQUENCEFLOW_COLOR);
      this._setStroke(SEQUENCEFLOW_STROKE);

      // TODO: generate polylineId or do something!!
      var uuid = RaphaelOriginal.createUUID();

      var contextObject = flow;
      var newWaypoints = waypoints;
      if (contextObject) {
        newWaypoints = this._connectFlowToActivity(contextObject.sourceActivityId, contextObject.destinationActivityId, waypoints);

        if (!newWaypoints) {
          console.error("Error draw flow from '" + contextObject.sourceActivityId + "' to '" + contextObject.destinationActivityId + "' ");
          return;
        }
      }
      var polyline = new _Polyline2.default(uuid, newWaypoints, this._getStroke(), this.flowRebuildPath);
      // this.flowRebuildPath(polyline);
      //var polyline = new Polyline(waypoints, 3);

      polyline.element = this.g.path(polyline.path);
      polyline.element.attr("stroke-width", this._getStroke());
      polyline.element.attr("stroke", this._getPaint());

      if (contextObject) {
        polyline.element.id = contextObject.id;
        polyline.element.data("contextObject", contextObject);
      } else {
        polyline.element.id = uuid;
      }

      var last = polyline.getAnchorsCount() - 1;
      var x = polyline.getAnchor(last).x;
      var y = polyline.getAnchor(last).y;
      //var c = this.g.ellipse(x, y, 5, 5);

      var lastLineIndex = polyline.getLinesCount() - 1;
      var line = polyline.getLine(lastLineIndex);
      var firstLine = polyline.getLine(0);

      var arrowHead = null,
          circleTail = null,
          defaultSequenceFlowIndicator = null,
          conditionalSequenceFlowIndicator = null;

      if (connectionType === CONNECTION_TYPE.MESSAGE_FLOW) {
        circleTail = this._drawCircleTail(firstLine, connectionType);
      }
      if (withArrowHead) arrowHead = this._drawArrowHead(line, connectionType);

      //console.log("isDefault: ", isDefault, ", isDefaultConditionAvailable: ", polyline.isDefaultConditionAvailable);
      if (isDefault && polyline.isDefaultConditionAvailable) {
        //var angle = polyline.getLineAngle(0);
        //console.log("firstLine", firstLine);
        defaultSequenceFlowIndicator = this._drawDefaultSequenceFlowIndicator(firstLine);
      }

      //TODO: conditional的情况的处理
      /*if (conditional) {
       conditionalSequenceFlowIndicator = this._drawConditionalSequenceFlowIndicator(firstLine);
       }*/

      // draw flow name
      var flowName = contextObject.name;
      if (flowName) {
        var xPointArray = contextObject.xPointArray;
        var yPointArray = contextObject.yPointArray;
        var textX = xPointArray[0] < xPointArray[1] ? xPointArray[0] : xPointArray[1];
        var textY = yPointArray[0] < yPointArray[1] ? yPointArray[1] : yPointArray[0];
        // fix xy
        textX += 20;
        textY -= 10;
        this.g.text(textX, textY, flowName).attr(LABEL_FONT);
      }

      var st = this.g.set();
      st.push(polyline.element, arrowHead, circleTail, conditionalSequenceFlowIndicator);
      polyline.element.data("set", st);
      polyline.element.data("withArrowHead", withArrowHead);

      var polyCloneAttrNormal = {
        "stroke-width": this._getStroke() + 5,
        stroke: RaphaelOriginal.getRGB("rgb(132, 112, 255)"),
        opacity: 0.0,
        cursor: "hand"
      };
      var polyClone = st.clone().attr(polyCloneAttrNormal).hover(function () {
        //if (polyLine.data("isSelected")) return;
        polyClone.attr({ opacity: 0.2 });
      }, function () {
        //if (polyLine.data("isSelected")) return;
        polyClone.attr({ opacity: 0.0 });
      });
      polyClone.data("objectId", polyline.element.id);
      polyClone.data("parentId", uuid);

      if (!connectionType || connectionType === CONNECTION_TYPE.SEQUENCE_FLOW) polyline.element.attr("stroke-width", this._getStroke());else if (connectionType === CONNECTION_TYPE.MESSAGE_FLOW) polyline.element.attr({ "stroke-dasharray": "--" });else if (connectionType === CONNECTION_TYPE.ASSOCIATION) polyline.element.attr({ "stroke-dasharray": ". " });

      this._setPaint(originalPaint);
      this._setStroke(originalStroke);
    }
  }, {
    key: '_drawConditionalSequenceFlowIndicator',
    value: function _drawConditionalSequenceFlowIndicator(line) {
      var horizontal = CONDITIONAL_INDICATOR_WIDTH * 0.7;
      var halfOfHorizontal = horizontal / 2;
      var halfOfVertical = CONDITIONAL_INDICATOR_WIDTH / 2;

      var uuid = null;
      var waypoints = [{ x: 0, y: 0 }, { x: -halfOfHorizontal, y: halfOfVertical }, { x: 0, y: CONDITIONAL_INDICATOR_WIDTH }, { x: halfOfHorizontal, y: halfOfVertical }];
      /*
       var polyline = new Polyline(uuid, waypoints, this.getStroke());
       polyline.element = this.g.path(polyline.path);
       polyline.element.attr("stroke-width", this.getStroke());
       polyline.element.attr("stroke", this.getPaint());
       polyline.element.id = uuid;
       */
      var polygone = new Polygone(waypoints, this._getStroke());
      polygone.element = this.g.path(polygone.path);
      polygone.element.attr("fill", _processAttr.Color.white);

      polygone.transform("t" + line.x1 + "," + line.y1 + "");
      polygone.transform("...r" + RaphaelOriginal.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);

      var cosAngle = Math.cos(line.angle);
      var sinAngle = Math.sin(line.angle);

      //polygone.element.attr("stroke-width", this.getStroke());
      //polygone.element.attr("stroke", this.getPaint());

      polygone.attr({ "stroke-width": this._getStroke(), "stroke": this._getPaint() });

      return polygone.element;
    }
  }, {
    key: '_drawDefaultSequenceFlowIndicator',
    value: function _drawDefaultSequenceFlowIndicator(line) {
      //console.log("line: ", line);

      var len = 10;
      var c = len / 2,
          f = 8;
      var defaultIndicator = this.g.path("M" + -c + " " + 0 + "L" + c + " " + 0);
      defaultIndicator.attr("stroke-width", this._getStroke() + 0);
      defaultIndicator.attr("stroke", this._getPaint());

      var cosAngle = Math.cos(line.angle);
      var sinAngle = Math.sin(line.angle);

      var dx = f * cosAngle;
      var dy = f * sinAngle;

      var x1 = line.x1 + dx + 0 * c * cosAngle;
      var y1 = line.y1 + dy + 0 * c * sinAngle;

      defaultIndicator.transform("t" + x1 + "," + y1 + "");
      defaultIndicator.transform("...r" + RaphaelOriginal.deg(line.angle - 3 * Math.PI / 4) + " " + 0 + " " + 0);
      /*
       var c0 = this.g.ellipse(0, 0, 1, 1).attr({stroke: Color.Blue});
       c0.transform("t" + (line.x1) + "," + (line.y1) + "");
       var center = this.g.ellipse(0, 0, 1, 1).attr({stroke: Color.Red});
       center.transform("t" + (line.x1+dx) + "," + (line.y1+dy) + "");
       */

      return defaultIndicator;
    }
  }, {
    key: '_drawArrowHead',
    value: function _drawArrowHead(line, connectionType) {
      var doubleArrowWidth = 2 * ARROW_WIDTH;

      var arrowHead = null;
      if (connectionType === CONNECTION_TYPE.ASSOCIATION) arrowHead = this.g.path("M-" + (ARROW_WIDTH / 2 + .5) + " -" + doubleArrowWidth + "L 0 0 L" + (ARROW_WIDTH / 2 + .5) + " -" + doubleArrowWidth);else arrowHead = this.g.path("M0 0L-" + (ARROW_WIDTH / 2 + .5) + " -" + doubleArrowWidth + "L" + (ARROW_WIDTH / 2 + .5) + " -" + doubleArrowWidth + "z");

      //arrowHead.transform("t" + 0 + ",-" + this.getStroke() + "");

      // anti smoothing
      if (this.strokeWidth % 2 === 1) line.x2 += .5, line.y2 += .5;

      arrowHead.transform("t" + line.x2 + "," + line.y2 + "");
      arrowHead.transform("...r" + RaphaelOriginal.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);

      if (!connectionType || connectionType === CONNECTION_TYPE.SEQUENCE_FLOW) arrowHead.attr("fill", this._getPaint());else if (connectionType === CONNECTION_TYPE.MESSAGE_FLOW) arrowHead.attr("fill", _processAttr.Color.white);

      arrowHead.attr("stroke-width", this._getStroke());
      arrowHead.attr("stroke", this._getPaint());

      return arrowHead;
    }
  }, {
    key: '_drawCircleTail',
    value: function _drawCircleTail(line, connectionType) {
      var diameter = ARROW_WIDTH / 2 * 1.5;

      // anti smoothing
      if (this.strokeWidth % 2 === 1) line.x1 += .5, line.y1 += .5;

      var circleTail = this.g.ellipse(line.x1, line.y1, diameter, diameter);
      circleTail.attr("fill", _processAttr.Color.white);
      circleTail.attr("stroke", this._getPaint());

      return circleTail;
    }
  }, {
    key: '_connectFlowToActivity',
    value: function _connectFlowToActivity(sourceActivityId, destinationActivityId, waypoints) {
      var sourceActivity = this.g.getById(sourceActivityId);
      var destinationActivity = this.g.getById(destinationActivityId);
      if (sourceActivity === null || destinationActivity === null) {
        if (sourceActivity === null) console.error("source activity[" + sourceActivityId + "] not found");else console.error("destination activity[" + destinationActivityId + "] not found");
        return null;
      }
      var bbSourceActivity = sourceActivity.getBBox();
      var bbDestinationActivity = destinationActivity.getBBox();

      var path = [];
      var newWaypoints = [];
      for (var i = 0; i < waypoints.length; i++) {
        var pathType = "";
        if (i === 0) pathType = "M";else pathType = "L";

        path.push([pathType, waypoints[i].x, waypoints[i].y]);
        newWaypoints.push({ x: waypoints[i].x, y: waypoints[i].y });
      }

      var ninjaPathSourceActivity = this.ninjaPaper.path(sourceActivity.realPath);
      var ninjaPathDestinationActivity = this.ninjaPaper.path(destinationActivity.realPath);
      var ninjaBBSourceActivity = ninjaPathSourceActivity.getBBox();
      var ninjaBBDestinationActivity = ninjaPathDestinationActivity.getBBox();

      // set target of the flow to the center of the taskObject
      var newPath = path;
      var originalSource = { x: newPath[0][1], y: newPath[0][2] };
      var originalTarget = { x: newPath[newPath.length - 1][1], y: newPath[newPath.length - 1][2] };
      newPath[0][1] = ninjaBBSourceActivity.x + (ninjaBBSourceActivity.x2 - ninjaBBSourceActivity.x) / 2;
      newPath[0][2] = ninjaBBSourceActivity.y + (ninjaBBSourceActivity.y2 - ninjaBBSourceActivity.y) / 2;
      newPath[newPath.length - 1][1] = ninjaBBDestinationActivity.x + (ninjaBBDestinationActivity.x2 - ninjaBBDestinationActivity.x) / 2;
      newPath[newPath.length - 1][2] = ninjaBBDestinationActivity.y + (ninjaBBDestinationActivity.y2 - ninjaBBDestinationActivity.y) / 2;

      var ninjaPathFlowObject = this.ninjaPaper.path(newPath);
      var ninjaBBFlowObject = ninjaPathFlowObject.getBBox();

      var intersectionsSource = RaphaelOriginal.pathIntersection(ninjaPathSourceActivity.realPath, ninjaPathFlowObject.realPath);
      var intersectionsDestination = RaphaelOriginal.pathIntersection(ninjaPathDestinationActivity.realPath, ninjaPathFlowObject.realPath);
      var intersectionSource = intersectionsSource.pop();
      var intersectionDestination = intersectionsDestination.pop();
      var dotOriginal = null;
      var dot = null;
      if (intersectionSource !== undefined) {
        if (this.gebug) {
          var diameter = 5;
          dotOriginal = this.g.ellipse(originalSource.x, originalSource.y, diameter, diameter).attr({
            "fill": _processAttr.Color.white,
            "stroke": _processAttr.Color.Pink
          });
          dot = this.g.ellipse(intersectionSource.x, intersectionSource.y, diameter, diameter).attr({
            "fill": _processAttr.Color.white,
            "stroke": _processAttr.Color.Green
          });
        }

        newWaypoints[0].x = intersectionSource.x;
        newWaypoints[0].y = intersectionSource.y;
      }
      if (intersectionDestination !== undefined) {
        if (this.gebug) {
          var _diameter = 5;
          dotOriginal = this.g.ellipse(originalTarget.x, originalTarget.y, _diameter, _diameter).attr({
            "fill": _processAttr.Color.white,
            "stroke": _processAttr.Color.Red
          });
          dot = this.g.ellipse(intersectionDestination.x, intersectionDestination.y, _diameter, _diameter).attr({
            "fill": _processAttr.Color.white,
            "stroke": _processAttr.Color.Blue
          });
        }

        newWaypoints[newWaypoints.length - 1].x = intersectionDestination.x;
        newWaypoints[newWaypoints.length - 1].y = intersectionDestination.y;
      }

      this.ninjaPaper.clear();
      return newWaypoints;
    }
  }, {
    key: 'flowRebuildPath',
    value: function flowRebuildPath(polyline) {
      var path = [];

      for (var i = 0; i < polyline.getAnchorsCount(); i++) {
        var anchor = polyline.getAnchor(i);

        var pathType = "";
        if (i === 0) pathType = "M";else pathType = "L";

        var targetX = anchor.x,
            targetY = anchor.y;
        var dx0 = 0,
            dy0 = 0,
            ax = 0,
            ay = 0,
            dx1 = 0,
            dy1 = 0,
            bx = 0,
            by = 0,
            zx = 0,
            zy = 0;
        if (i > 0 && i < polyline.getAnchorsCount() - 1) {
          // get new x,y
          var cx = anchor.x,
              cy = anchor.y;

          // pivot point of prev line
          var AO = polyline.getLineLength(i - 1);
          if (AO < polyline.radius) {
            AO = polyline.radius;
          }

          polyline.isDefaultConditionAvailable = polyline.isDefaultConditionAvailable || i === 1 && AO > 10;
          //console.log("isDefaultConditionAvailable", polyline.isDefaultConditionAvailable);

          var ED = polyline.getLineLengthY(i - 1) * polyline.radius / AO;
          var OD = polyline.getLineLengthX(i - 1) * polyline.radius / AO;
          targetX = anchor.x - OD;
          targetY = anchor.y - ED;

          if (AO < 2 * polyline.radius && i > 1) {
            targetX = anchor.x - polyline.getLineLengthX(i - 1) / 2;
            targetY = anchor.y - polyline.getLineLengthY(i - 1) / 2;
          }

          // pivot point of next line
          var AO1 = polyline.getLineLength(i);
          if (AO1 < polyline.radius) {
            AO1 = polyline.radius;
          }
          var ED1 = polyline.getLineLengthY(i) * polyline.radius / AO1;
          var OD1 = polyline.getLineLengthX(i) * polyline.radius / AO1;
          var nextSrcX = anchor.x + OD1;
          var nextSrcY = anchor.y + ED1;

          if (AO1 < 2 * polyline.radius && i < polyline.getAnchorsCount() - 2) {
            nextSrcX = anchor.x + polyline.getLineLengthX(i) / 2;
            nextSrcY = anchor.y + polyline.getLineLengthY(i) / 2;
          }

          dx0 = (cx - targetX) / 3;
          dy0 = (cy - targetY) / 3;
          ax = cx - dx0;
          ay = cy - dy0;
          dx1 = (cx - nextSrcX) / 3;
          dy1 = (cy - nextSrcY) / 3;
          bx = cx - dx1;
          by = cy - dy1;
          zx = nextSrcX;
          zy = nextSrcY;

          if (polyline.showDetails) {
            this.g.path("M" + targetX + "," + targetY + "L" + ax + "," + ay).attr({
              stroke: RaphaelOriginal.getRGB("rgb(255, 153, 51)"),
              "stroke-dasharray": "- "
            });
            this.g.path("M" + nextSrcX + "," + nextSrcY + "L" + bx + "," + by).attr({
              stroke: RaphaelOriginal.getRGB("rgb(255, 153, 51)"),
              "stroke-dasharray": "- "
            });
            this.g.ellipse(ax, ay, 2, 2).attr({ stroke: _processAttr.Color.SlateGrey });
            this.g.ellipse(bx, by, 2, 2).attr({ stroke: _processAttr.Color.SlateGrey });
            this.g.ellipse(cx, cy, polyline.radius, polyline.radius).attr({ stroke: _processAttr.Color.Gainsboro });
            this.g.ellipse(targetX, targetY, 2, 2).attr({ fill: _processAttr.Color.red });
            this.g.ellipse(nextSrcX, nextSrcY, 2, 2).attr({ fill: _processAttr.Color.red });
          }
        } else if (i === 1 && polyline.getAnchorsCount() === 2) {
          var _AO = polyline.getLineLength(i - 1);
          if (_AO < polyline.radius) {
            _AO = polyline.radius;
          }
          polyline.isDefaultConditionAvailable = polyline.isDefaultConditionAvailable || i === 1 && _AO > 10;
          //console.log("-- isDefaultConditionAvailable", polyline.isDefaultConditionAvailable);
        }

        // anti smoothing
        if (polyline.strokeWidth % 2 === 1) {
          targetX += 0.5;
          targetY += 0.5;
        }

        path.push([pathType, targetX, targetY]);

        if (i > 0 && i < polyline.getAnchorsCount() - 1) {
          path.push(["C", ax, ay, bx, by, zx, zy]);
        }
      }

      if (polyline.closePath) {
        console.log("closePath:", polyline.closePath);
        path.push(["Z"]);
      }

      polyline.path = path;
    }
  }, {
    key: '_setFont',
    value: function _setFont(font) {
      this.font = font;
    }
  }, {
    key: '_getFont',
    value: function _getFont() {
      return this.font;
    }
  }, {
    key: '_setStroke',
    value: function _setStroke(strokeWidth) {
      this.strokeWidth = strokeWidth;
    }
  }, {
    key: '_getStroke',
    value: function _getStroke() {
      return this.strokeWidth;
    }
  }, {
    key: '_setPaint',
    value: function _setPaint(color) {
      this.paint = color;
    }
  }, {
    key: '_getPaint',
    value: function _getPaint() {
      return this.paint;
    }
  }, {
    key: 'getSvgSize',
    value: function getSvgSize(dataSource) {
      var minX = 0;
      var maxX = 0;
      var minY = 0;
      var maxY = 0;

      var activities = dataSource.activities;
      var minOffsetTop = 10000;
      activities.forEach(function (item) {
        if (item.y < minOffsetTop) {
          minOffsetTop = item.y;
        }
      });
      minOffsetTop -= 30;
      activities.map(function (item) {
        item.y -= minOffsetTop;
        return item;
      });
      activities.forEach(function (item, i) {
        var activityJson = item;
        var activity = new _activityImpl2.default(activityJson);

        // width
        if (activity.getX() + activity.getWidth() > maxX) {
          maxX = activity.getX() + activity.getWidth();
        }
        if (activity.getX() < minX) {
          minX = activity.getX();
        }
        // height
        if (activity.getY() + activity.getHeight() > maxY) {
          maxY = activity.getY() + activity.getHeight();
        }
        if (activity.getY() < minY) {
          minY = activity.getY();
        }
      });

      var sequenceFlows = dataSource.sequenceFlows;
      sequenceFlows.map(function (item) {
        item.yPointArray[0] -= minOffsetTop;
        item.yPointArray[1] -= minOffsetTop;
        return item;
      });
      sequenceFlows.forEach(function (item, i) {
        var flow = item;
        var waypoints = [];
        flow.xPointArray.forEach(function (item1, j) {
          waypoints[j] = { x: flow.xPointArray[j], y: flow.yPointArray[j] };
          // width
          if (waypoints[j].x > maxX) {
            maxX = waypoints[j].x;
          }
          if (waypoints[j].x < minX) {
            minX = waypoints[j].x;
          }
          // height
          if (waypoints[j].y > maxY) {
            maxY = waypoints[j].y;
          }
          if (waypoints[j].y < minY) {
            minY = waypoints[j].y;
          }
        });
      });

      return { maxX: maxX + 20, maxY: maxY + 20 };
    }
  }, {
    key: 'messageClick',
    value: function messageClick() {}
  }, {
    key: 'renderActivityList',
    value: function renderActivityList(taskList) {
      var _this5 = this;

      if (taskList.length === 0) {
        return _react2.default.createElement(
          'div',
          { className: 'activityInfoEmpty' },
          '\u6682\u65E0\u8FDB\u5EA6\u6D41\u8F6C\uFF01'
        );
      }
      // taskList.push(this.state.taskList[0]);
      // taskList.push(this.state.taskList[0]);
      // taskList.push(this.state.taskList[0]);
      this.timeLine = [];
      var radius = this.state.radius;
      return _react2.default.createElement(
        'div',
        { style: { display: 'flex' } },
        _react2.default.createElement(
          'div',
          { id: 'canvasBox', style: { width: 40 } },
          _react2.default.createElement('canvas', { id: 'timeLineCanvas' })
        ),
        _react2.default.createElement(
          'div',
          { style: { width: 'calc(100% - 40px)' } },
          taskList.map(function (item, i) {
            _this5.timeLine.push({ type: "circle", y: 300 * i + 14 });
            if (item.endTime) {
              _this5.timeLine.push({
                type: "line",
                startY: _this5.timeLine[_this5.timeLine.length - 1].y + radius,
                endY: _this5.timeLine[_this5.timeLine.length - 1].y + 244 + 14 + 14 - radius
              });
              _this5.timeLine.push({ type: "circle", y: _this5.timeLine[_this5.timeLine.length - 1].endY + radius });
            } else {
              _this5.timeLine.push({
                type: "line",
                startY: _this5.timeLine[_this5.timeLine.length - 1].y + radius,
                endY: _this5.timeLine[_this5.timeLine.length - 1].y + 300 - 14
              });
            }
            return _react2.default.createElement(
              'div',
              { className: 'activityInfoItem' },
              _react2.default.createElement(
                'span',
                { style: { lineHeight: '28px' } },
                item.startTime,
                '  \u5F00\u59CB\u627F\u529E\u65F6\u95F4'
              ),
              _react2.default.createElement(
                'div',
                { style: { height: 'calc(100% - 56px)' } },
                _react2.default.createElement(
                  'div',
                  { className: 'activityInfoItemCard', style: { minHeight: 58, border: '1px solid #C1C1C1', borderRadius: 4, marginBottom: 4 } },
                  item.frontAssigneeName ? _react2.default.createElement(
                    'div',
                    null,
                    _react2.default.createElement(
                      'div',
                      { style: { lineHeight: '28px', marginLeft: 10 } },
                      '\u524D\u624B\u4FE1\u606F\uFF1A'
                    ),
                    _react2.default.createElement(
                      'div',
                      { style: { height: 'calc(100% - 28px)', display: 'flex', alignItems: 'center', marginLeft: 30, fontSize: 15 } },
                      item.frontAssigneeName
                    )
                  ) : _react2.default.createElement(
                    'span',
                    { style: { lineHeight: '60px', marginLeft: 10, fontSize: 15 } },
                    '\u6CA1\u6709\u524D\u624B\u4FE1\u606F\uFF01'
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { style: { height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                  _react2.default.createElement('img', { src: _arrow2.default })
                ),
                _react2.default.createElement(
                  'div',
                  { className: 'activityInfoItemCard', style: { minHeight: 58, display: 'flex', border: '1px solid #C1C1C1', borderRadius: 4 } },
                  _react2.default.createElement(
                    'div',
                    { style: { width: 64, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
                    _react2.default.createElement('img', { src: _user_normal2.default })
                  ),
                  _react2.default.createElement(
                    'div',
                    { style: { width: 'calc(100% - 64px)' } },
                    _react2.default.createElement(
                      'div',
                      { style: { height: '50%', display: 'flex', alignItems: 'center' } },
                      _react2.default.createElement(
                        'i',
                        null,
                        item.assigneeName
                      )
                    ),
                    _react2.default.createElement(
                      'div',
                      { style: { height: '50%', display: 'flex', alignItems: 'center' } },
                      _react2.default.createElement(
                        'i',
                        null,
                        item.deptName
                      )
                    )
                  )
                ),
                _react2.default.createElement(
                  'div',
                  { style: { height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
                  _react2.default.createElement('img', { src: _arrow2.default })
                ),
                _react2.default.createElement(
                  'div',
                  { className: 'activityInfoItemCard', style: { minHeight: 58, border: '1px solid #C1C1C1', borderRadius: 4, marginTop: 4 } },
                  item.endTime ? item.afterAssigneeName ? _react2.default.createElement(
                    'div',
                    null,
                    _react2.default.createElement(
                      'div',
                      { style: { lineHeight: '28px', marginLeft: 10 } },
                      '\u540E\u624B\u4FE1\u606F\uFF1A'
                    ),
                    _react2.default.createElement(
                      'div',
                      { style: { height: 'calc(100% - 28px)', display: 'flex', alignItems: 'center', marginLeft: 30, fontSize: 15 } },
                      item.afterAssigneeName
                    )
                  ) : _react2.default.createElement(
                    'span',
                    { style: { lineHeight: '56px', marginLeft: 10, fontSize: 15 } },
                    '\u6CA1\u6709\u540E\u624B\u4FE1\u606F'
                  ) : _react2.default.createElement(
                    'span',
                    { style: { lineHeight: '56px', marginLeft: 10, fontSize: 15 } },
                    '\u5F85\u5BA1\u6838...'
                  )
                )
              ),
              _react2.default.createElement(
                'div',
                { style: { height: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
                item.endTime && _react2.default.createElement(
                  'span',
                  null,
                  item.endTime,
                  '  \u7ED3\u675F\u627F\u529E\u65F6\u95F4'
                ),
                item.endTime && item.frontAssigneeName && _react2.default.createElement(
                  'div',
                  { style: { display: 'flex', alignItems: 'center' } },
                  _react2.default.createElement('img', { style: { width: 18, height: 18 }, src: _massage2.default }),
                  taskList[0].frontAssigneeName && _react2.default.createElement(_components.ExtendButton, _extends({
                    type: 'link',
                    inline: false,
                    buttonProps: { type: 'ghost' }
                  }, {
                    buttonDescription: "查看意见",
                    hideIfReadonly: false,
                    interactiveType: "MODAL",
                    messagePromptType: "NONE",
                    actionLink: "/Api/BPM/RetrieveSpecificTaskIdFormValue",
                    nextActionLink: null,
                    templateType: "Detail",
                    actionName: null,
                    buttonCode: "creditLineAssessmentApplyInfo_Detail_render_In_creditLineAssessmentApplyInfo_Detail",
                    transmitParameters: [{
                      name: "processInstanceId"
                    }, {
                      name: "taskId"
                    }, {
                      name: "other"
                    }, {
                      name: "taskDefinitionKey"
                    }],
                    bindParameterType: null,
                    bindParameters: null,
                    actionType: "ROUTER",
                    relatedItems: null,
                    requestSuccessDesc: null,
                    isTransmitAllParameters: false,
                    relatedData: "NONE"
                  }, {
                    disabled: false,
                    key: '\u67E5\u770B\u610F\u89C1',
                    noneIcon: true,
                    query: { processInstanceId: item.processInstanceId, taskId: item.taskId, other: 'taskHistory', taskDefinitionKey: item.taskDefinitionKey }
                  }))
                )
              )
            );
          })
        )
      );
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      var _this6 = this;

      // const activityInfoItems =  document.getElementsByClassName("activityInfoItem");
      // for(let i = 0; i < activityInfoItems.length; i++) {
      //   const item = activityInfoItems[i];
      //   const activityInfoItemCards = item.getElementsByClassName("activityInfoItemCard");
      //   let itemHeights = [];
      //   for(let j = 0; j < activityInfoItemCards.length; j++) {
      //     itemHeights.push(parseInt(activityInfoItemCards[j].scrollHeight));
      //   }
      //
      //   for(let k = 0; k < activityInfoItemCards.length; k++) {
      //     activityInfoItemCards[k].style.height = Math.max(...itemHeights) + 'px';
      //   }
      // }

      var _state = this.state,
          radius = _state.radius,
          taskList = _state.taskList;

      if (taskList && taskList.length > 0) {
        (function () {
          // taskList.push(this.state.taskList[0]);
          // taskList.push(this.state.taskList[0]);
          // taskList.push(this.state.taskList[0]);
          _this6.timeLine = [];
          var itemHeights = [];
          taskList.forEach(function (item, i) {
            var itemHeight = document.getElementsByClassName("activityInfoItem")[i].clientHeight;
            var startHeight = itemHeights.slice(0, i + 1).reduce(function (a, b) {
              return a + b;
            }, 0);
            itemHeights.push(itemHeight);
            _this6.timeLine.push({ type: 'circle', y: startHeight + 14 });
            if (item.endTime) {
              _this6.timeLine.push({
                type: 'line',
                startY: _this6.timeLine[_this6.timeLine.length - 1].y + radius,
                endY: _this6.timeLine[_this6.timeLine.length - 1].y + itemHeight - 56 + 14 + 14 - radius
              });
              _this6.timeLine.push({ type: 'circle', y: _this6.timeLine[_this6.timeLine.length - 1].endY + radius });
            } else {
              _this6.timeLine.push({
                type: 'line',
                startY: _this6.timeLine[_this6.timeLine.length - 1].y + radius,
                endY: _this6.timeLine[_this6.timeLine.length - 1].y + itemHeight - 14
              });
            }
          });

          var timeLineCanvas = document.getElementById("timeLineCanvas");
          var canvasBox = document.getElementById("canvasBox");
          var activityInfoContent = document.getElementById("activityInfoContent");
          var ctx = timeLineCanvas.getContext("2d");
          ctx.canvas.width = canvasBox.clientWidth;
          // canvasBox.style.height = activityInfoContent.clientHeight + 'px';
          var lastTimeLine = _this6.timeLine[_this6.timeLine.length - 1];
          // ctx.canvas.height = canvasBox.clientHeight;
          if (lastTimeLine.type === 'circle') {
            ctx.canvas.height = lastTimeLine.y + radius;
            canvasBox.style.height = lastTimeLine.y + radius + 'px';
          } else {
            ctx.canvas.height = lastTimeLine.endY;
            canvasBox.style.height = lastTimeLine.endY + 'px';
          }
          var lineArr = [];
          _this6.timeLine.forEach(function (item) {
            if (item.type === 'circle') {
              ctx.beginPath();
              ctx.arc(20, item.y, _this6.state.radius, 0, 2 * Math.PI);
              ctx.fillStyle = '#2B97E0';
              ctx.strokeStyle = '#2B97E0';
              ctx.fill();
              ctx.closePath();
            } else {
              lineArr.push(item);
            }
          });
          lineArr.forEach(function (item) {
            ctx.beginPath();
            ctx.strokeStyle = '#CCCCCC';
            ctx.moveTo(20, item.startY);
            ctx.lineTo(20, item.endY);
            ctx.stroke();
            ctx.closePath();
          });
        })();
      }
      document.querySelector('#activityList').scrollTop = 0;
    }
  }, {
    key: 'burgerClick',
    value: function burgerClick(firstClick) {
      var _this7 = this;

      if (this.activeActivity) {
        (function () {
          var activityInfo = document.getElementById("diagramActivityInfo");
          var holderBox = document.getElementById("diagramHolderBox");
          var activityList = document.getElementById("activityList");
          var activityInfoTitle = document.getElementById("activityInfoTitle");
          var diagramActivityInfoBtn = document.getElementById("diagramActivityInfoBtn");
          if (firstClick || activityInfo.style.width === '32px' || activityInfo.style.width === '0px' || activityInfo.style.width === '') {
            activityInfo.style.width = '26%';
            holderBox.style.width = 'calc(74% + 16px)';
            setTimeout(function () {
              diagramActivityInfoBtn.style.top = 0;
              activityList.style.visibility = "visible";
              activityInfoTitle.style.visibility = "visible";
            }, 200);
            setTimeout(function () {
              _this7.setState({
                closeBtnClassName: 'burger burgerClose'
              });
            }, 300);
          } else {
            diagramActivityInfoBtn.style.top = 'calc((100% - 16px) / 2)';
            setTimeout(function () {
              activityInfo.style.width = 0;
              holderBox.style.width = '100%';
              activityList.style.visibility = 'hidden';
              activityInfoTitle.style.visibility = 'hidden';
            }, 200);
            _this7.setState({
              closeBtnClassName: 'burger'
            });
          }
        })();
      }
    }
  }, {
    key: 'burgerMouseOver',
    value: function burgerMouseOver() {
      var activityInfo = document.getElementById("diagramActivityInfo");
      if (activityInfo.style.width === '0px' || activityInfo.style.width === '') {
        activityInfo.style.width = '32px';
      }
    }
  }, {
    key: 'burgerMouseOut',
    value: function burgerMouseOut() {
      var activityInfo = document.getElementById("diagramActivityInfo");
      if (activityInfo.style.width === '32px') {
        activityInfo.style.width = 0;
      }
    }
  }, {
    key: 'holderMouseDown',
    value: function holderMouseDown(event) {
      var holderBox = document.getElementById("diagramHolderBox");
      this.divLeft = parseInt(holderBox.scrollLeft, 10);
      this.divTop = parseInt(holderBox.scrollTop, 10);
      this.mousey = event.pageY;
      this.mousex = event.pageX;
      document.getElementById("diagramHolder").onmousemove = this.holderMouseMove;
    }
  }, {
    key: 'holderMouseMove',
    value: function holderMouseMove(event) {
      var holderBox = document.getElementById("diagramHolderBox");
      var left = this.divLeft - (event.pageX - this.mousex);
      var top1 = this.divTop - (event.pageY - this.mousey);
      holderBox.scrollTop = top1;
      holderBox.scrollLeft = left;
      return false;
    }
  }, {
    key: 'holderMouseUp',
    value: function holderMouseUp() {
      document.getElementById("diagramHolder").onmousemove = null;
    }
  }, {
    key: 'zoomClick',
    value: function zoomClick(e) {
      var zoomNum = this.zoomNum;
      var svg = document.querySelector(".diagram svg");
      var diagramHolder = document.getElementById("diagramHolder");
      var diagram = document.getElementsByClassName("diagram")[0];
      var diagramHolderBox = document.getElementById("diagramHolderBox");
      if (zoomNum >= -3 && zoomNum <= 3 || zoomNum < -3 && e === '+' || zoomNum > 3 && e === '-') {
        if (!this.g._viewBox) {
          this.g.setViewBox(0, 0, parseInt(svg.getBoundingClientRect().width), parseInt(svg.getBoundingClientRect().height));
        }
        if (e === '-') {
          diagram.style.width = svg.getBoundingClientRect().width * 0.8;
          diagram.style.height = svg.getBoundingClientRect().height * 0.8;
          svg.setAttribute('width', svg.getBoundingClientRect().width * 0.8);
          svg.setAttribute('height', svg.getBoundingClientRect().height * 0.8);
          if (zoomNum > 0) {
            diagramHolder.style.width = diagramHolder.clientWidth * 0.8 + 'px';
            diagramHolder.style.height = diagramHolder.clientHeight * 0.8 + 'px';
            diagramHolderBox.scrollTop = (parseInt(diagramHolder.style.width) - diagramHolderBox.clientWidth) / 2;
            diagramHolderBox.scrollLeft = (parseInt(diagramHolder.style.height) - diagramHolderBox.clientHeight) / 2;
          }
          this.zoomNum -= 1;
        } else {
          diagram.style.width = svg.getBoundingClientRect().width / 0.8 + 'px';
          diagram.style.height = svg.getBoundingClientRect().height / 0.8 + 'px';
          svg.setAttribute('width', svg.getBoundingClientRect().width / 0.8);
          svg.setAttribute('height', svg.getBoundingClientRect().height / 0.8);
          if (zoomNum >= 0) {
            diagramHolder.style.width = diagramHolder.clientWidth / 0.8 + 'px';
            diagramHolder.style.height = diagramHolder.clientHeight / 0.8 + 'px';
            diagramHolderBox.scrollTop = (parseInt(diagramHolder.style.width) - diagramHolderBox.clientWidth) / 2;
            diagramHolderBox.scrollLeft = (parseInt(diagramHolder.style.height) - diagramHolderBox.clientHeight) / 2;
          }
          this.zoomNum += 1;
        }
      }
    }

    /* eslint-disable */

  }, {
    key: 'render',
    value: function render() {
      var _this8 = this;

      var dataSource = this.props.dataSource;
      var _state2 = this.state,
          svgSize = _state2.svgSize,
          taskList = _state2.taskList,
          closeBtnClassName = _state2.closeBtnClassName;

      var diagramStyle = {
        width: svgSize.maxX,
        height: svgSize.maxY
      };
      return _react2.default.createElement(
        'div',
        { id: 'svgWrapper' },
        _react2.default.createElement(
          'div',
          { style: { position: 'fixed', top: 0, left: 0, width: '100%' } },
          _react2.default.createElement(_titleBar2.default, { getTitleDesc: function getTitleDesc() {
              return dataSource && dataSource.processDefinition && dataSource.processDefinition.name ? '进度查询-' + dataSource.processDefinition.name : '进度查询';
            } })
        ),
        _react2.default.createElement(
          'div',
          { id: 'contentBox', className: 'contentBox' },
          _react2.default.createElement(
            'div',
            { className: 'diagramTitle', id: 'diagramTitle' },
            _react2.default.createElement(
              'span',
              { style: { fontSize: 14 } },
              '\u603B\u4F53\u6D41\u7A0B\u56FE'
            ),
            _react2.default.createElement(
              'div',
              { style: { display: 'flex', justifyContent: 'space-between', marginRight: 20 } },
              _react2.default.createElement(
                'div',
                { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginRight: 20 } },
                _react2.default.createElement('div', { style: { width: 24, height: 8, backgroundColor: '#FFA94B', marginRight: 10 } }),
                _react2.default.createElement(
                  'div',
                  { style: { fontSize: 14 } },
                  '\u5F53\u524D\u8FDB\u5EA6'
                )
              ),
              _react2.default.createElement(
                'div',
                { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
                _react2.default.createElement('div', { style: { width: 24, height: 8, backgroundColor: '#2B97E0', marginRight: 10 } }),
                _react2.default.createElement(
                  'div',
                  { style: { fontSize: 14 } },
                  '\u67E5\u8BE2\u8FDB\u5EA6'
                )
              )
            )
          ),
          _react2.default.createElement(
            'div',
            { style: { position: 'absolute', top: 60, left: 10, zIndex: 110 } },
            _react2.default.createElement(
              'div',
              { style: { cursor: 'pointer', width: 20, height: 20, backgroundColor: '#FFFFFF', display: 'flex', justifyContent: 'center', alignItems: 'center' }, onClick: function onClick() {
                  _this8.zoomClick("+");
                } },
              '+'
            ),
            _react2.default.createElement(
              'div',
              { style: { fontSize: 18, cursor: 'pointer', width: 20, height: 20, backgroundColor: '#FFFFFF', marginTop: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }, onClick: function onClick() {
                  _this8.zoomClick("-");
                } },
              '-'
            )
          ),
          _react2.default.createElement(
            'div',
            { id: 'diagramHolderBox', className: 'diagramHolderBox' },
            _react2.default.createElement(
              'div',
              { id: 'diagramHolder', className: 'diagramHolder', onMouseDown: this.holderMouseDown, onMouseUp: this.holderMouseUp },
              _react2.default.createElement('div', { id: dataSource.processDefinition.name, className: 'diagram', style: diagramStyle })
            ),
            _react2.default.createElement('div', { style: { width: 18, height: '100%', position: 'absolute', top: 0, right: -18, backgroundColor: '#fafafa', zIndex: 101 } })
          ),
          _react2.default.createElement(
            'div',
            { className: 'diagramActivityInfo', id: 'diagramActivityInfo' },
            _react2.default.createElement(
              'div',
              { id: 'activityInfoTitle', className: 'activityInfoTitle' },
              '\u8FDB\u5EA6\u6D41\u8F6C\u60C5\u51B5'
            ),
            _react2.default.createElement(
              'div',
              { className: 'diagramActivityInfoBtn', id: 'diagramActivityInfoBtn', onMouseOut: this.burgerMouseOut, onMouseOver: this.burgerMouseOver, onClick: function onClick() {
                  return _this8.burgerClick();
                } },
              _react2.default.createElement(
                'div',
                { className: closeBtnClassName, id: 'burger' },
                _react2.default.createElement('div', { className: 'burgerPatty' }),
                _react2.default.createElement('div', { className: 'burgerPatty' }),
                _react2.default.createElement('div', { className: 'burgerPatty' })
              )
            ),
            _react2.default.createElement(
              'div',
              { className: 'activityList', id: 'activityList' },
              _react2.default.createElement(
                'div',
                { id: 'activityInfoContent', style: { marginTop: 40 } },
                taskList && this.renderActivityList(taskList)
              )
            )
          )
        )
      );
    }
  }]);

  return Process;
}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, '_initActivityDrawInstructions', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_initActivityDrawInstructions'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'drawGateway', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'drawGateway'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'drawTask', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'drawTask'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_drawTask', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_drawTask'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_drawTaskLabel', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_drawTaskLabel'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_fitTextToWidth', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_fitTextToWidth'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'addHandlers', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'addHandlers'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_drawActivity', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_drawActivity'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'handleMouseWheel', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'handleMouseWheel'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'highLightActivity', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'highLightActivity'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'drawActiveActivity', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'drawActiveActivity'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'normalActivity', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'normalActivity'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'taskOnClick', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'taskOnClick'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_taskOnClick', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_taskOnClick'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_drawFlow', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_drawFlow'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_drawConditionalSequenceFlowIndicator', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_drawConditionalSequenceFlowIndicator'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_drawDefaultSequenceFlowIndicator', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_drawDefaultSequenceFlowIndicator'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_drawArrowHead', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_drawArrowHead'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_drawCircleTail', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_drawCircleTail'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_connectFlowToActivity', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_connectFlowToActivity'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'flowRebuildPath', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'flowRebuildPath'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_setFont', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_setFont'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_getFont', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_getFont'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_setStroke', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_setStroke'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_getStroke', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_getStroke'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_setPaint', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_setPaint'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_getPaint', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_getPaint'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'getSvgSize', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'getSvgSize'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'messageClick', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'messageClick'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'renderActivityList', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'renderActivityList'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'burgerClick', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'burgerClick'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'burgerMouseOver', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'burgerMouseOver'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'burgerMouseOut', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'burgerMouseOut'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'holderMouseDown', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'holderMouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'holderMouseMove', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'holderMouseMove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'holderMouseUp', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'holderMouseUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'zoomClick', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'zoomClick'), _class.prototype)), _class);
exports.default = Process;