infamous/core/Camera.js

A CSS3D/WebGL UI library.

"use strict";

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

var _lowclass = _interopRequireDefault(require("lowclass"));

var _three = require("three");

var _Node = _interopRequireDefault(require("./Node"));

var _Motor = _interopRequireDefault(require("./Motor"));

var _props = require("./props");

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

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

// TODO: update this to have a CSS3D-perspective-like API like with the Scene's
// default camera.
var _default = (0, _lowclass.default)('PerspectiveCamera').extends(_Node.default, ({
  Super,
  Public,
  Private
}) => ({
  static: {
    defaultElementName: 'i-perspective-camera',
    // TODO remove attributeChangedCallback, replace with updated based on these props
    props: _objectSpread({}, _Node.default.props, {
      fov: _objectSpread({}, _props.props.number, {
        default: 75
      }),
      aspect: _objectSpread({}, _props.props.number, {
        default() {
          return Private(this)._getDefaultAspect();
        },

        deserialize(val) {
          val == null ? this.constructor.props.aspect.default.call(this) : _props.props.number.deserialize(val);
        }

      }),
      near: _objectSpread({}, _props.props.number, {
        default: 0.1
      }),
      far: _objectSpread({}, _props.props.number, {
        default: 1000
      }),
      zoom: _objectSpread({}, _props.props.number, {
        default: 1
      }),
      active: _objectSpread({}, _props.props.boolean, {
        default: false
      })
    })
  },

  updated(oldProps, oldState, modifiedProps) {
    Super(this).updated(oldProps, oldState, modifiedProps);
    if (!this.isConnected) return;

    if (modifiedProps.active) {
      this._setSceneCamera(this.active ? undefined : 'unset');
    }

    if (modifiedProps.aspect) {
      if (!this.aspect) // default aspect value based on the scene size.
        privateThis._startAutoAspect();else privateThis._stopAutoAspect();
    } // TODO handle the other props here, remove attributeChangedCallback

  },

  makeThreeObject3d() {
    return new _three.PerspectiveCamera(75, 16 / 9, 1, 1000);
  },

  connectedCallback() {
    Super(this).connectedCallback();
    const privateThis = Private(this);
    privateThis._lastKnownScene = this.scene;
  },

  // TODO replace with unmountedCallback #150
  deinit() {
    Super(this).deinit(); // TODO we want to call this in the upcoming
    // unmountedCallback, but for now it's harmless but
    // will run unnecessary logic. #150

    Private(this)._setSceneCamera('unset');

    Private(this)._lastKnownScene = null;
  },

  // TODO, unmountedCallback functionality. issue #150
  unmountedCallback() {},

  attributeChangedCallback(attr, oldVal, newVal) {
    Super(this).attributeChangedCallback(attr, oldVal, newVal);

    if (typeof newVal == 'string') {
      Private(this)._attributeAddedOrChanged(attr, newVal);
    } else {
      Private(this)._attributeRemoved(attr);
    }
  },

  private: {
    _lastKnownScene: null,

    // TODO CAMERA-DEFAULTS, get defaults from somewhere common.
    _attributeRemoved(attr, newVal) {
      const publicThis = Public(this);

      if (attr == 'fov') {
        publicThis.threeObject3d.fov = 75;
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'aspect') {
        this._startAutoAspect();

        publicThis.threeObject3d.aspect = this._getDefaultAspect();
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'near') {
        publicThis.threeObject3d.near = 0.1;
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'far') {
        publicThis.threeObject3d.far = 1000;
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'zoom') {
        publicThis.threeObject3d.zoom = 1;
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'active') {
        this._setSceneCamera('unset');
      }
    },

    _attributeAddedOrChanged(attr, newVal) {
      const publicThis = Public(this);

      if (attr == 'fov') {
        publicThis.threeObject3d.fov = parseFloat(newVal);
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'aspect') {
        this._stopAutoAspect();

        publicThis.threeObject3d.aspect = parseFloat(newVal);
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'near') {
        publicThis.threeObject3d.near = parseFloat(newVal);
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'far') {
        publicThis.threeObject3d.far = parseFloat(newVal);
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'zoom') {
        publicThis.threeObject3d.zoom = parseFloat(newVal);
        publicThis.threeObject3d.updateProjectionMatrix();
      } else if (attr == 'active') {
        this._setSceneCamera();
      }
    },

    _startAutoAspect() {
      if (!this._startedAutoAspect) {
        this._startedAutoAspect = true;
        Public(this).scene.on('sizechange', this._updateAspectOnSceneResize, this);
      }
    },

    _stopAutoAspect() {
      if (this._startedAutoAspect) {
        this._startedAutoAspect = false;
        Public(this).scene.off('sizechange', this._updateAspectOnSceneResize);
      }
    },

    _updateAspectOnSceneResize({
      x,
      y
    }) {
      Public(this).threeObject3d.aspect = x / y;
    },

    _getDefaultAspect() {
      let result = 0;
      const publicThis = Public(this);

      if (publicThis.scene) {
        result = publicThis.scene.calculatedSize.x / publicThis.scene.calculatedSize.y;
      } // in case of a 0 or NaN (0 / 0 == NaN)


      if (!result) result = 16 / 9;
      return result;
    },

    _setSceneCamera(unset) {
      const publicThis = Public(this);

      if (unset) {
        // TODO: unset might be triggered before the scene was mounted, so
        // there might not be a last known scene. We won't need this check
        // when we add unmountedCallback. #150
        if (this._lastKnownScene) this._lastKnownScene._removeCamera(publicThis);
      } else {
        if (!publicThis.scene || !publicThis.isConnected) return;

        publicThis.scene._addCamera(publicThis);
      }
    }

  }
}));

exports.default = _default;