
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/


/**
 * AUTO-GENERATED FILE. DO NOT MODIFY.
 */

import { __extends } from "tslib";
import * as graphic from '../../util/graphic.js';
import ComponentView from '../../view/Component.js';
import { createSymbol } from '../../util/symbol.js';
var iconWidth = 20;
var iconHeight = 20;
// View
var PlaybackSelectView = /** @class */function (_super) {
  __extends(PlaybackSelectView, _super);
  function PlaybackSelectView() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.type = PlaybackSelectView.type;
    _this.initPosition = {
      x: 0,
      y: 0
    };
    _this.initDownPosition = {
      x: 0,
      y: 0
    };
    _this.currentPosition = {
      x: 0,
      y: 0
    };
    _this.isDown = false;
    _this.isMountEvent = false;
    _this.mouseIndex = 0;
    return _this;
  }
  PlaybackSelectView.prototype.init = function (ecModel, api) {
    this.ecModel = ecModel;
    this.api = api;
  };
  PlaybackSelectView.prototype.render = function (playbackSelectModel, ecModel, api) {
    if (!playbackSelectModel.get('show')) {
      this.clear();
      this.unmountEvent();
      return;
    }
    if (!this.playbackSelectModel) {
      this.playbackSelectModel = playbackSelectModel;
    }
    this.mountEvent();
    var group = this.group;
    var grid = ecModel.getComponent('grid', 0);
    // const z = playbackSelectModel.get('z');
    var rect = grid.coordinateSystem.getRect();
    var startIndex = playbackSelectModel.get('startIndex');
    var isMobile = playbackSelectModel.get('isMobile');
    var xAxis = ecModel.getComponent('xAxis', 0);
    var xAxis2D = xAxis.axis;
    if (startIndex === null || startIndex === void 0) {
      this.clear();
      return;
    }
    this._rect = rect;
    var bgColor = playbackSelectModel.get('bgColor');
    var color = playbackSelectModel.get('color');
    var icon = playbackSelectModel.get('icon');
    var yData = playbackSelectModel.get('yData');
    var x = Math.floor(xAxis2D.toGlobalCoord(xAxis2D.dataToCoord(startIndex)));
    var lineStyle = {
      lineWidth: 2,
      stroke: color
    };
    var lineShape = {
      x1: x,
      y1: rect.y,
      x2: x,
      y2: rect.height
    };
    if (!this.lineEl) {
      var lineEl = new graphic.Line({
        shape: lineShape,
        style: lineStyle
      });
      this.lineEl = lineEl;
      lineEl.z2 = 2;
      group.add(lineEl);
    } else {
      this.lineEl.attr({
        shape: lineShape,
        style: lineStyle
      });
    }
    var rectShape = {
      x: Math.max(rect.x, x),
      y: rect.y,
      height: rect.height,
      width: rect.width + rect.x - x
    };
    var rectStyle = {
      fill: bgColor,
      opacity: 0.5
    };
    if (!this.rectEl) {
      var rectEl = new graphic.Rect({
        shape: rectShape,
        style: rectStyle
      });
      rectEl.z2 = 1;
      group.add(rectEl);
      this.rectEl = rectEl;
    } else {
      this.rectEl.attr({
        shape: rectShape,
        style: rectStyle
      });
    }
    if (yData) {
      if (!this.imgEl) {
        this.imgEl = createSymbol(icon, x - iconWidth / 2, yData, iconWidth, iconHeight);
        group.add(this.imgEl);
      } else {
        this.imgEl.attr({
          style: {
            x: x - iconWidth / 2,
            y: yData
          }
        });
      }
    } else if (this.imgEl) {
      group.remove(this.imgEl);
      this.imgEl = null;
    }
    this.currentPosition.x = x;
    this.currentPosition.y = yData;
    this.isMobile = isMobile;
  };
  PlaybackSelectView.prototype._onMouseMove = function (e) {
    var offsetX = e.offsetX;
    var offsetY = e.offsetY;
    var isMobile = this.isMobile;
    if (isMobile) {
      if (!this.isDown) {
        return;
      }
      var initPosition = this.initPosition;
      var initDownPosition = this.initDownPosition;
      var diffX = offsetX - initDownPosition.x;
      offsetX = initPosition.x + diffX;
      if (initPosition.y) {
        var diffY = offsetY - initDownPosition.y;
        offsetY = initPosition.y + diffY;
      }
    }
    var ecModel = this.ecModel;
    var xAxis = ecModel.getComponent('xAxis', 0);
    if (offsetX > this._rect.x + this._rect.width) {
      if (isMobile) {
        offsetX = this._rect.x + this._rect.width;
      } else {
        this.api.dispatchAction({
          type: 'playbackSelect',
          playbackSelect: {
            startIndex: null
          }
        });
        return;
      }
    }
    var xAxis2D = xAxis.axis;
    var index = xAxis2D.coordToData(xAxis2D.toLocalCoord(offsetX));
    var list = xAxis2D.scale.getOrdinalMeta().getCategories();
    var selectedIndex = Math.max(Math.min(index, list.length - 1), 0);
    isMobile && (this.mouseIndex = selectedIndex);
    this.api.dispatchAction({
      type: 'playbackSelect',
      playbackSelect: {
        startIndex: selectedIndex,
        uid: this.playbackSelectModel.uid,
        yData: offsetY,
        time: list[selectedIndex]
      }
    });
  };
  PlaybackSelectView.prototype._onClick = function (e) {
    var offsetX = e.offsetX;
    if (this.isMobile) {
      this.api.trigger('playbackselected', {
        startIndex: this.mouseIndex
      });
      return;
    }
    var ecModel = this.ecModel;
    var xAxis = ecModel.getComponent('xAxis', 0);
    var xAxis2D = xAxis.axis;
    var index = xAxis2D.coordToData(xAxis2D.toLocalCoord(offsetX));
    var list = xAxis2D.scale.getOrdinalMeta().getCategories();
    var selectedIndex = Math.max(Math.min(index, list.length - 1), 0);
    this.api.trigger('playbackselected', {
      startIndex: selectedIndex
    });
  };
  PlaybackSelectView.prototype._globalout = function () {
    this.api.dispatchAction({
      type: 'playbackSelect',
      playbackSelect: {
        startIndex: null
      }
    });
  };
  PlaybackSelectView.prototype._onMousedown = function (e) {
    if (!this.isMobile) {
      return;
    }
    this.initDownPosition.x = e.offsetX;
    this.initDownPosition.y = e.offsetY;
    this.initPosition.x = this.currentPosition.x;
    this.initPosition.y = this.currentPosition.y;
    this.isDown = true;
  };
  PlaybackSelectView.prototype._onMouseUp = function (e) {
    if (!this.isDown) {
      return;
    }
    this.isDown = false;
  };
  PlaybackSelectView.prototype.mountEvent = function () {
    if (this.isMountEvent) {
      return;
    }
    var zr = this.api.getZr();
    zr.on('mousemove', this._onMouseMove, this);
    zr.on('click', this._onClick, this);
    zr.on('globalout', this._globalout, this);
    zr.on('mousedown', this._onMousedown, this);
    zr.on('mouseup', this._onMouseUp, this);
    // zr.on('mousewheel', this._onMousewheel, this);
    this.isMountEvent = true;
  };
  PlaybackSelectView.prototype.unmountEvent = function () {
    if (!this.isMountEvent) {
      return;
    }
    var zr = this.api.getZr();
    zr.off('mousemove', this._onMouseMove);
    zr.off('click', this._onClick);
    zr.off('globalout', this._globalout);
    zr.off('mousedown', this._onMousedown);
    zr.off('mouseup', this._onMouseUp);
    // zr.off('mousewheel', this._onMousewheel);
    this.isMountEvent = false;
  };
  PlaybackSelectView.prototype.clear = function () {
    if (this.rectEl) {
      this.group.removeAll();
      this.lineEl = null;
      this.rectEl = null;
      this.imgEl = null;
    }
  };
  PlaybackSelectView.prototype.dispose = function (ecModel, api) {
    this.clear();
    this.unmountEvent();
    this.playbackSelectModel = null;
    this.ecModel = null;
    this.api = null;
    this._rect = null;
  };
  PlaybackSelectView.type = 'playbackSelect';
  return PlaybackSelectView;
}(ComponentView);
export { PlaybackSelectView };