sdk4.0/src/Global/efflect/Sunshine/timeLIne.js

export default class TimeLine {
  constructor(sdk, speed) {
    this.sdk = { ...sdk };
    this.progress = document.getElementById('progress');
    this.handle = document.getElementById('handle');
    // this.timeline = document.getElementById('timeline');
    this.timeline = document.getElementsByClassName('timeline-container')[0];
    this.currentTime = document.getElementById('currentTime');
    this.timelineCon = document.getElementsByClassName('timeline-container')[0];
    this.speed = speed;
    this.animationId;
    this.startTime = performance.now();
    this.manualPosition = null;
    this.isDragging = false;
    this.pauseed = false;
    this.time = '';
    this.update = this.update.bind(this);

    TimeLine.init(this)
  }
  static init(that) {
    for (let i = 0; i <= 24; i++) {
      if (i % 6 === 0) {
        const label = document.createElement('div');
        label.className = 'time-mark';
        label.textContent = `${i}:00`;
        label.style.left = `${(i / 24) * 100}%`;
        document.getElementsByClassName('time-marks')[0].appendChild(label)
      }
    }
    that.startTime = performance.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed);

    that.timeline.addEventListener('mousedown', (e) => {
      if (e.srcElement.className === 'handle') {
        that.isDragging = true;
      }
      e.preventDefault();
    });

    that.timeline.addEventListener('mousemove', (e) => {
      if (!that.isDragging) return;

      const rect = that.timeline.getBoundingClientRect();
      let pos = (e.clientX - rect.left) / rect.width;
      pos = Math.max(0, Math.min(1, pos));

      that.manualPosition = pos;
      that.progress.style.width = `${pos * 100}%`;

      const seconds = pos * 86400;
      that.currentTime.textContent = that.formatTime(seconds);
    });
    that.update();

    document.getElementById('timePause').addEventListener('click', function () {
      that.pauseed = !that.pauseed;
      if (that.pauseed) {//暂停
        that.pausedTime = performance.now(); // 记录暂停时刻
        document.getElementById('timePause').textContent = '播放';
        that.animationId && cancelAnimationFrame(that.animationId);
        that.sdk.viewer.clock.shouldAnimate = false
      } else {//播放
        let now = performance.now()
        const pausedDuration = now - that.pausedTime;
        document.getElementById('timePause').textContent = '暂停';
        that.manualPosition = null
        that.startTime += pausedDuration; // 补偿暂停期间的时间差

        if (that.changeDate) {//切换日期后让时间从0开始
          if (that.changeDateGrag) {
            that.changeDateGrag = undefined
          } else {
            that.startTime = now
          }
          that.changeDate = undefined
        }
        that.sdk.viewer.clock.shouldAnimate = true
        that.update(); // 重启动画循环
      }
    });
  }
  moveComplay(func) {
    let that = this
    // that.timeline.addEventListener('mouseup', () => {
    document.addEventListener('mouseup', () => {
      if (that.isDragging) {
        that.isDragging = false;
        if (that.manualPosition !== null) {
          // that.sdk.viewer.clock.shouldAnimate = true
          that.startTime = performance.now() - (that.manualPosition * 86400 * 1000 / that.speed);
          that.manualPosition = null;
          that.changeDate && (that.changeDateGrag = true)
          if (!that.pauseed) {
            that.update()
            func(that.time)
          } else {
            that.pausedTime = performance.now(); // 记录暂停时刻
            func(that.currentTime.textContent)
          }

        }
      }
    });
  }
  formatTime(seconds) {
    const hrs = Math.floor(seconds / 3600).toString().padStart(2, '0');
    const mins = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
    const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
    return `${hrs}:${mins}:${secs}`;
  }

  update() {
    if (this.manualPosition !== null) return;
    if (this.changeDate) {//切换日期后让时间从0开始
      this.startTime = performance.now()
    }
    let elapsed = (performance.now() - this.startTime) * this.speed;
    // if (this.elapsed) {
    //   elapsed = elapsed + this.elapsed
    //   this.elapsed = undefined
    // }
    const totalSeconds = elapsed / 1000;//秒
    const daySeconds = totalSeconds % 86400;//天
    const percentage = daySeconds / 86400;

    this.progress.style.width = `${percentage * 100}%`;
    this.time = this.formatTime(daySeconds)
    this.currentTime.textContent = this.time;
    if (!this.pauseed) {
      this.animationId && cancelAnimationFrame(this.animationId);
      this.animationId = requestAnimationFrame(this.update);
    }
  }
  setSpeed(v) {
    let now = performance.now()
    if (!this.pauseed) {
      const currentProgress = this.manualPosition ??
        (performance.now() - this.startTime) * this.speed / (86400 * 1000);
      this.speed = v;
      this.startTime = performance.now() - (currentProgress * 86400 * 1000 / this.speed);

    } else {
      let pausedDuration = now - this.pausedTime;
      this.startTime += pausedDuration; // 补偿暂停期间的时间差
      const currentProgress = this.manualPosition ??
        (now - this.startTime) * this.speed / (86400 * 1000);
      this.speed = v;
      this.startTime = now - (currentProgress * 86400 * 1000 / this.speed);

      this.pausedTime = now; // 记录切换speed暂停时刻
      // this.speed = v;
    }
    this.manualPosition = null;

    // this.update();

  }
  updateTime() {
    this.manualPosition = null;
    this.startTime = performance.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed);
    this.pauseed && (this.changeDate = true)
    this.changeDateGrag = undefined
    this.update();
  }
  clear() {
    this.animationId && cancelAnimationFrame(this.animationId);
    this.progress.style.width = '0%';
    this.currentTime.textContent = '00:00:00';
  }

}