3D Camera Record for ArcGIS JS API 4.0beta1

CameraRecorder.js

define([
  'dojo/_base/declare',
  'dojo/on',
  'dojo/dom-class',
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'esri/core/watchUtils',
  'esri/core/Scheduler',
  'dojo/text!./templates/widget.html',
  'xstyle/css!./css/widget.css'
], function(
  declare, on, domClass, _WidgetBase, _TemplatedMixin,
  watchUtils, Scheduler,
  template
) {

  var CameraRecorder = declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    constructor: function() {
      this.cameras = [null];
      this.timer = null;
      this.watcher = null;
      this.handler = null;
      this.intervalID = null;
      this.isPlaying = false;
    },
    clear: function() {
      if (this.watcher) {
        this.watcher.remove();
      }
      if (this.handler) {
        this.handler.remove();
      }
      if (this.timer) {
        this.timer.remove();
      }
      this.recordStart();
    },
    recordStart: function() {
      if (this.isPlaying || this.isPaused) {
        return;
      }
      this.timer = Scheduler.schedule(function() {
        this._cameraWatch();
        this._sliderWatch();
      }.bind(this));
    },
    play: function() {
      if (this.isPlaying) {
        return;
      }
      domClass.toggle(this.playBtn, 'btn-info btn-success');
      this._play(false);
    },
    stop: function() {
      this.isPaused = !this.isPaused;
      domClass.toggle(this.stopBtn, 'btn-info btn-danger');
      if (!this.isPaused) {
        this.recordStart();
      }
    },
    playReverse: function() {
      if (this.isPlaying) {
        return;
      }
      domClass.toggle(this.reverseBtn, 'btn-info btn-success');
      this._play(true);
    },
    _cameraWatch: function() {
      var view = this.get('view');
      var cameras = this.cameras;
      var slider = this.slider;
      this.watcher = view.watch('camera', function(val) {
        cameras.push(val.clone());
        slider.max = slider.value = cameras.length;
        this.clear();
      }.bind(this));
    },
    _sliderWatch: function() {
      var view = this.get('view');
      var cameras = this.cameras;
      this.handler = on(this.slider, 'input', function(e) {
        var val = parseInt(e.target.value);
        view.camera = cameras[val] || view.camera.clone();
        this.clear();
      }.bind(this));
    },
    _play: function(inReverse) {
      this.isPlaying = true;
      var intervalID = this.intervalID;
      var slider = this.slider;
      var view = this.view;
      var cameras = this.cameras;
      var len = cameras.length;

      var i = 0;
      intervalID = setInterval(function() {
        if (!inReverse) {
          slider.value = i;
          view.camera = cameras[i++] || view.camera.clone();
          if (i === len) {
            clearInterval(intervalID);
            domClass.toggle(this.playBtn, 'btn-info btn-success');
            this.isPlaying = false;
            this.recordStart();
          }
        } else {
          slider.value = len;
          view.camera = cameras[len--] || view.camera.clone();
          if (len < 1) {
            clearInterval(intervalID);
            domClass.toggle(this.reverseBtn, 'btn-info btn-success');
            this.isPlaying = false;
            this.recordStart();
          }
        }
      }.bind(this), 15);
    }
  });
  return CameraRecorder;
});