tis_platform/lib/tis-ui/c-gantt.js

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/dist/";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 585);
/******/ })
/************************************************************************/
/******/ ({

/***/ 124:
/***/ (function(module, exports) {

module.exports = require("echarts");

/***/ }),

/***/ 585:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: external "echarts"
var external_echarts_ = __webpack_require__(124);
var external_echarts_default = /*#__PURE__*/__webpack_require__.n(external_echarts_);

// CONCATENATED MODULE: ./packages/c-gantt/main.js

// import _rawData from './raw-data.json';

// let ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

var HEIGHT_RATIO = 0.5;
var DIM_CATEGORY_INDEX = 0;
var DIM_TIME_ARRIVAL = 1;
var DIM_TIME_DEPARTURE = 2;
var DATA_ZOOM_AUTO_MOVE_THROTTLE = 30;
var DATA_ZOOM_X_INSIDE_INDEX = 1;
var DATA_ZOOM_Y_INSIDE_INDEX = 3;
var DATA_ZOOM_AUTO_MOVE_SPEED = 0.2;
var DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH = 30;

var _draggable = void 0;
var _draggingEl = void 0;
var _dropShadow = void 0;
var _draggingCursorOffset = [0, 0];
var _draggingTimeLength = void 0;
var _draggingRecord = void 0;
var _dropRecord = void 0;
var _cartesianXBounds = [];
var _cartesianYBounds = [];
// let _rawData;
var _autoDataZoomAnimator = void 0;

// $.get(ROOT_PATH + '/data/asset/data/airport-schedule.json', function (rawData) {
//   _rawData = rawData;
//   this.myChart.setOption(option = makeOption());
//   initDrag();
// });

// _rawData = rawData;

/* harmony default export */ var main = ({
  name: 've-gantt',
  props: {
    width: { type: String, default: '100%' },
    height: { type: String, default: '100%' },
    options: { type: Object, default: null },
    data: { type: Object, default: null }
  },
  data: function data() {
    return {
      myChart: null
    };
  },
  mounted: function mounted() {
    // let chartDom = document.getElementById('main');

    this._rawData = this.data;

    this.myChart = external_echarts_default.a.init(this.$refs.ganttContainer);
    var option = void 0;
    this.myChart.setOption(option = this.makeOption());
    this.initDrag();

    option && this.myChart.setOption(option);
  },

  methods: {
    initDrag: function initDrag() {
      var _this = this;

      _autoDataZoomAnimator = makeAnimator(dispatchDataZoom);

      this.myChart.on('mousedown', function (param) {
        if (!_draggable || !param || param.seriesIndex == null) {
          return;
        }

        // Drag start
        _draggingRecord = {
          dataIndex: param.dataIndex,
          categoryIndex: param.value[DIM_CATEGORY_INDEX],
          timeArrival: param.value[DIM_TIME_ARRIVAL],
          timeDeparture: param.value[DIM_TIME_DEPARTURE]
        };
        var style = { lineWidth: 2, fill: 'rgba(255,0,0,0.1)', stroke: 'rgba(255,0,0,0.8)', lineDash: [6, 3] };

        _draggingEl = addOrUpdateBar(_draggingEl, _draggingRecord, style, 100);
        _draggingCursorOffset = [_draggingEl.position[0] - param.event.offsetX, _draggingEl.position[1] - param.event.offsetY];
        _draggingTimeLength = _draggingRecord.timeDeparture - _draggingRecord.timeArrival;
      });

      this.myChart.getZr().on('mousemove', function (event) {
        if (!_draggingEl) {
          return;
        }

        var cursorX = event.offsetX;
        var cursorY = event.offsetY;

        // Move _draggingEl.
        _draggingEl.attr('position', [_draggingCursorOffset[0] + cursorX, _draggingCursorOffset[1] + cursorY]);

        prepareDrop();

        autoDataZoomWhenDraggingOutside(cursorX, cursorY);
      });

      this.myChart.getZr().on('mouseup', function () {
        // Drop
        if (_draggingEl && _dropRecord) {

          updateRawData() && _this.myChart.setOption({
            series: {
              id: 'flightData',
              data: _this._rawData.items.data
            }
          });
        }
        dragRelease();
      });
      this.myChart.getZr().on('globalout', dragRelease);

      function dragRelease() {
        _autoDataZoomAnimator.stop();

        if (_draggingEl) {
          this.myChart.getZr().remove(_draggingEl);
          _draggingEl = null;
        }
        if (_dropShadow) {
          this.myChart.getZr().remove(_dropShadow);
          _dropShadow = null;
        }
        _dropRecord = _draggingRecord = null;
      }

      function addOrUpdateBar(el, itemData, style, z) {
        var pointArrival = this.myChart.convertToPixel('grid', [itemData.timeArrival, itemData.categoryIndex]);
        var pointDeparture = this.myChart.convertToPixel('grid', [itemData.timeDeparture, itemData.categoryIndex]);

        var barLength = pointDeparture[0] - pointArrival[0];
        var barHeight = Math.abs(this.myChart.convertToPixel('grid', [0, 0])[1] - this.myChart.convertToPixel('grid', [0, 1])[1]) * HEIGHT_RATIO;

        if (!el) {
          el = new external_echarts_default.a.graphic.Rect({
            shape: { x: 0, y: 0, width: 0, height: 0 },
            style: style,
            z: z
          });
          this.myChart.getZr().add(el);
        }
        el.attr({
          shape: { x: 0, y: 0, width: barLength, height: barHeight },
          position: [pointArrival[0], pointArrival[1] - barHeight]
        });
        return el;
      }

      function prepareDrop() {
        // Check droppable place.
        var xPixel = _draggingEl.shape.x + _draggingEl.position[0];
        var yPixel = _draggingEl.shape.y + _draggingEl.position[1];
        var cursorData = this.myChart.convertFromPixel('grid', [xPixel, yPixel]);
        if (cursorData) {
          // Make drop shadow and _dropRecord
          _dropRecord = {
            categoryIndex: Math.floor(cursorData[1]),
            timeArrival: cursorData[0],
            timeDeparture: cursorData[0] + _draggingTimeLength
          };
          var style = { fill: 'rgba(0,0,0,0.4)' };
          _dropShadow = addOrUpdateBar(_dropShadow, _dropRecord, style, 99);
        }
      }

      // This is some business logic, don't care about it.
      function updateRawData() {
        var flightData = this._rawData.items.data;
        var movingItem = flightData[_draggingRecord.dataIndex];

        // Check conflict
        for (var i = 0; i < flightData.length; i++) {
          var dataItem = flightData[i];
          if (dataItem !== movingItem && _dropRecord.categoryIndex === dataItem[DIM_CATEGORY_INDEX] && _dropRecord.timeArrival < dataItem[DIM_TIME_DEPARTURE] && _dropRecord.timeDeparture > dataItem[DIM_TIME_ARRIVAL]) {
            alert('Conflict! Find a free space to settle the bar!');
            return;
          }
        }

        // No conflict.
        movingItem[DIM_CATEGORY_INDEX] = _dropRecord.categoryIndex;
        movingItem[DIM_TIME_ARRIVAL] = _dropRecord.timeArrival;
        movingItem[DIM_TIME_DEPARTURE] = _dropRecord.timeDeparture;
        return true;
      }

      function autoDataZoomWhenDraggingOutside(cursorX, cursorY) {
        // When cursor is outside the cartesian and being dragging,
        // auto move the dataZooms.
        var cursorDistX = getCursorCartesianDist(cursorX, _cartesianXBounds);
        var cursorDistY = getCursorCartesianDist(cursorY, _cartesianYBounds);

        if (cursorDistX !== 0 || cursorDistY !== 0) {
          _autoDataZoomAnimator.start({
            cursorDistX: cursorDistX,
            cursorDistY: cursorDistY
          });
        } else {
          _autoDataZoomAnimator.stop();
        }
      }

      function dispatchDataZoom(params) {
        var option = this.myChart.getOption();
        var optionInsideX = option.dataZoom[DATA_ZOOM_X_INSIDE_INDEX];
        var optionInsideY = option.dataZoom[DATA_ZOOM_Y_INSIDE_INDEX];
        var batch = [];

        prepareBatch(batch, 'insideX', optionInsideX.start, optionInsideX.end, params.cursorDistX);
        prepareBatch(batch, 'insideY', optionInsideY.start, optionInsideY.end, -params.cursorDistY);

        batch.length && this.myChart.dispatchAction({
          type: 'dataZoom',
          batch: batch
        });

        function prepareBatch(batch, id, start, end, cursorDist) {
          if (cursorDist === 0) {
            return;
          }
          var sign = cursorDist / Math.abs(cursorDist);
          var size = end - start;
          var delta = DATA_ZOOM_AUTO_MOVE_SPEED * sign;

          start += delta;
          end += delta;

          if (end > 100) {
            end = 100;
            start = end - size;
          }
          if (start < 0) {
            start = 0;
            end = start + size;
          }
          batch.push({
            dataZoomId: id,
            start: start,
            end: end
          });
        }
      }

      function getCursorCartesianDist(cursorXY, bounds) {
        var dist0 = cursorXY - (bounds[0] + DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
        var dist1 = cursorXY - (bounds[1] - DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
        return dist0 * dist1 <= 0 ? 0 // cursor is in cartesian
        : dist0 < 0 ? dist0 // cursor is at left/top of cartesian
        : dist1; // cursor is at right/bottom of cartesian
      }

      function makeAnimator(callback) {
        var requestId = void 0;
        var callbackParams = void 0;
        // Use throttle to prevent from calling dispatchAction frequently.
        callback = external_echarts_default.a.throttle(callback, DATA_ZOOM_AUTO_MOVE_THROTTLE);

        function onFrame() {
          callback(callbackParams);
          requestId = requestAnimationFrame(onFrame);
        }

        return {
          start: function start(params) {
            callbackParams = params;
            if (requestId == null) {
              onFrame();
            }
          },
          stop: function stop() {
            if (requestId != null) {
              cancelAnimationFrame(requestId);
            }
            requestId = callbackParams = null;
          }
        };
      }
    },
    onDragSwitchClick: function onDragSwitchClick(model, api, type) {
      _draggable = !_draggable;
      this.myChart.setOption({
        dataZoom: [{
          id: 'insideX',
          disabled: _draggable
        }, {
          id: 'insideY',
          disabled: _draggable
        }]
      });
      this.model.setIconStatus(type, _draggable ? 'emphasis' : 'normal');
    },
    clipRectByRect: function clipRectByRect(params, rect) {
      return external_echarts_default.a.graphic.clipRectByRect(rect, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
      });
    },
    renderAxisLabelItem: function renderAxisLabelItem(params, api) {
      var y = api.coord([0, api.value(0)])[1];
      if (y < params.coordSys.y + 5) {
        return;
      }
      return {
        type: 'group',
        position: [10, y],
        children: [{
          type: 'path',
          shape: {
            d: 'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z',
            x: 0,
            y: -20,
            width: 90,
            height: 20,
            layout: 'cover'
          },
          style: {
            fill: '#368c6c'
          }
        }, {
          type: 'text',
          style: {
            x: 24,
            y: -3,
            text: api.value(1),
            textVerticalAlign: 'bottom',
            textAlign: 'center',
            textFill: '#fff'
          }
        }, {
          type: 'text',
          style: {
            x: 75,
            y: -2,
            textVerticalAlign: 'bottom',
            textAlign: 'center',
            text: api.value(2),
            textFill: '#FFF'
          }
        }]
      };
    },
    renderGanttItem: function renderGanttItem(params, api) {
      // console.log('renderGanttItem:', params);
      // console.log('api:', api);
      var categoryIndex = api.value(DIM_CATEGORY_INDEX);
      var timeArrival = api.coord([api.value(DIM_TIME_ARRIVAL), categoryIndex]);
      var timeDeparture = api.coord([api.value(DIM_TIME_DEPARTURE), categoryIndex]);

      var coordSys = params.coordSys;
      _cartesianXBounds[0] = coordSys.x;
      _cartesianXBounds[1] = coordSys.x + coordSys.width;
      _cartesianYBounds[0] = coordSys.y;
      _cartesianYBounds[1] = coordSys.y + coordSys.height;

      var barLength = timeDeparture[0] - timeArrival[0];
      // Get the heigth corresponds to length 1 on y axis.
      var barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;
      console.log('barLength:', barLength);
      console.log('barHeight:', barHeight);
      var x = timeArrival[0];
      var y = timeArrival[1] - barHeight;

      var flightNumber = api.value(3) + '';
      var flightNumberWidth = external_echarts_default.a.format.getTextRect(flightNumber).width;
      var text = barLength > flightNumberWidth + 40 && x + barLength >= 180 ? flightNumber : '';

      var rectNormal = this.clipRectByRect(params, {
        x: x, y: y, width: barLength, height: barHeight
      });
      var rectVIP = this.clipRectByRect(params, {
        x: x, y: y, width: barLength / 2, height: barHeight
      });
      var rectText = this.clipRectByRect(params, {
        x: x, y: y, width: barLength, height: barHeight
      });

      return {
        type: 'group',
        children: [{
          type: 'rect',
          ignore: !rectNormal,
          shape: rectNormal,
          style: api.style()
        }, {
          type: 'rect',
          ignore: !rectVIP && !api.value(4),
          shape: rectVIP,
          style: api.style({ fill: '#ddb30b' })
        }, {
          type: 'rect',
          ignore: !rectText,
          shape: rectText,
          style: api.style({
            fill: 'transparent',
            stroke: 'transparent',
            text: text,
            textFill: '#fff'
          })
        }]
      };
    },
    makeOption: function makeOption() {
      console.log('itemes length:', this._rawData.items.data.length);
      return {
        tooltip: {},
        animation: false,
        toolbox: {
          left: 20,
          top: 0,
          itemSize: 20,
          feature: {
            myDrag: {
              show: true,
              title: 'Make bars\ndraggable',
              icon: 'path://M990.55 380.08 q11.69 0 19.88 8.19 q7.02 7.01 7.02 18.71 l0 480.65 q-1.17 43.27 -29.83 71.93 q-28.65 28.65 -71.92 29.82 l-813.96 0 q-43.27 -1.17 -72.5 -30.41 q-28.07 -28.07 -29.24 -71.34 l0 -785.89 q1.17 -43.27 29.24 -72.5 q29.23 -29.24 72.5 -29.24 l522.76 0 q11.7 0 18.71 7.02 q8.19 8.18 8.19 18.71 q0 11.69 -7.6 19.29 q-7.6 7.61 -19.3 7.61 l-518.08 0 q-22.22 1.17 -37.42 16.37 q-15.2 15.2 -15.2 37.42 l0 775.37 q0 23.39 15.2 38.59 q15.2 15.2 37.42 15.2 l804.6 0 q22.22 0 37.43 -15.2 q15.2 -15.2 16.37 -38.59 l0 -474.81 q0 -11.7 7.02 -18.71 q8.18 -8.19 18.71 -8.19 l0 0 ZM493.52 723.91 l-170.74 -170.75 l509.89 -509.89 q23.39 -23.39 56.13 -21.05 q32.75 1.17 59.65 26.9 l47.94 47.95 q25.73 26.89 27.49 59.64 q1.75 32.75 -21.64 57.3 l-508.72 509.9 l0 0 ZM870.09 80.69 l-56.13 56.14 l94.72 95.9 l56.14 -57.31 q8.19 -9.35 8.19 -21.05 q-1.17 -12.86 -10.53 -22.22 l-47.95 -49.12 q-10.52 -9.35 -23.39 -9.35 q-11.69 -1.17 -21.05 7.01 l0 0 ZM867.75 272.49 l-93.56 -95.9 l-380.08 380.08 l94.73 94.73 l378.91 -378.91 l0 0 ZM322.78 553.16 l38.59 39.77 l-33.92 125.13 l125.14 -33.92 l38.59 38.6 l-191.79 52.62 q-5.85 1.17 -12.28 0 q-6.44 -1.17 -11.11 -5.84 q-4.68 -4.68 -5.85 -11.7 q-2.34 -5.85 0 -11.69 l52.63 -192.97 l0 0 Z',
              onclick: this.onDragSwitchClick
            }
          }
        },
        title: {
          text: '甘特图示例',
          left: 'center'
        },
        dataZoom: [{
          type: 'slider',
          xAxisIndex: 0,
          filterMode: 'weakFilter',
          height: 20,
          bottom: 0,
          start: 0,
          end: 26,
          handleIcon: 'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          showDetail: false
        }, {
          type: 'inside',
          id: 'insideX',
          xAxisIndex: 0,
          filterMode: 'weakFilter',
          start: 0,
          end: 26,
          zoomOnMouseWheel: false,
          moveOnMouseMove: true
        }, {
          type: 'slider',
          yAxisIndex: 0,
          zoomLock: true,
          width: 10,
          right: 10,
          top: 70,
          bottom: 20,
          start: 95,
          end: 100,
          handleSize: 0,
          showDetail: false
        }, {
          type: 'inside',
          id: 'insideY',
          yAxisIndex: 0,
          start: 95,
          end: 100,
          zoomOnMouseWheel: false,
          moveOnMouseMove: true,
          moveOnMouseWheel: true
        }],
        grid: {
          show: true,
          top: 70,
          bottom: 20,
          left: 100,
          right: 20,
          backgroundColor: '#fff',
          borderWidth: 0
        },
        xAxis: {
          type: 'time',
          position: 'top',
          splitLine: {
            lineStyle: {
              color: ['#E9EDFF']
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              color: '#929ABA'
            }
          },
          axisLabel: {
            color: '#929ABA',
            inside: false,
            align: 'center'
          }
        },
        yAxis: {
          axisTick: { show: false },
          splitLine: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false },
          min: 0,
          max: this._rawData.labels.data.length
        },
        series: [{
          id: 'flightData',
          type: 'custom',
          renderItem: this.renderGanttItem,
          dimensions: this._rawData.items.dimensions,
          encode: {
            x: [DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE],
            y: DIM_CATEGORY_INDEX,
            tooltip: [DIM_CATEGORY_INDEX, DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE]
          },
          data: this._rawData.items.data
        }, {
          type: 'custom',
          renderItem: this.renderAxisLabelItem,
          dimensions: this._rawData.labels.dimensions,
          encode: {
            x: -1, // Then this series will not controlled by x.
            y: 0
          },
          data: this._rawData.labels.data.map(function (item, index) {
            console.log('[index].concat(item);', [index].concat(item));
            return [index].concat(item);
          })
        }]
      };
    }
  },
  render: function render() {
    var h = arguments[0];

    return h(
      'div',
      {
        attrs: { className: 'c-gantt-wrapper' },
        style: { width: this.width, height: this.height } },
      [h('div', {
        attrs: { className: 'c-gantt-container' },
        ref: 'ganttContainer', style: { width: this.width, height: this.height } })]
    );
  }
});
// CONCATENATED MODULE: ./packages/c-gantt/index.js


/* harmony default export */ var c_gantt = __webpack_exports__["default"] = (main);

/***/ })

/******/ });