infamous/html/HTMLScene.js

A CSS3D/WebGL UI library.

"use strict";

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

var _HTMLScene = _interopRequireDefault(require("./HTMLScene.style"));

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

var _DeclarativeBase = _interopRequireWildcard(require("./DeclarativeBase"));

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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

(0, _DeclarativeBase.initDeclarativeBase)();

const HTMLScene = _DeclarativeBase.default.subclass('HTMLScene', ({
  Public,
  Private,
  Super
}) => ({
  constructor() {
    const self = Super(this).constructor();
    const privateThis = Private(self);
    privateThis._root = self.attachShadow({
      mode: 'open'
    });
    privateThis._root.innerHTML = `
            <style>
                .i-scene-CSS3DLayer,
                .i-scene-MiscellaneousLayer,
                .i-scene-WebGLLayer,
                .i-scene-WebGLLayer > canvas  {
                    margin: 0; padding: 0;
                    width: 100%; height: 100%;
                    display: block;
                }
                .i-scene-CSS3DLayer,
                .i-scene-MiscellaneousLayer,
                .i-scene-WebGLLayer {
                    position: absolute; top: 0; left: 0;
                }
                .i-scene-CSS3DLayer {
                    transform-style: preserve-3d;
                }
                .i-scene-WebGLLayer,
                .i-scene-MiscellaneousLayer {
                    pointer-events: none;
                }
            </style>
            <div class="i-scene-CSS3DLayer">
                <slot></slot>
            </div>
            <div class="i-scene-WebGLLayer"></div>
            <div class="i-scene-MiscellaneousLayer">
                <slot name="misc"></slot>
            </div>
        `; // TODO make this similar to "package protected". It is public for now
    // because WebGLRendererThree accesses it.

    self._canvasContainer = privateThis._root.querySelector('.i-scene-WebGLLayer');
    return self;
  },

  /** @override */
  getStyles() {
    return _HTMLScene.default;
  },

  deinit() {
    Super(this).deinit();
    this.unmount();
  },

  init() {
    Super(this).init(); // When the HTMLScene gets addded to the DOM, make it be "mounted".

    if (!this._mounted) this.mount(this.parentNode);
  },

  // TODO make these next two size-polling at least protected once we convert
  // the Scene class, or perhaps move the size polling stuff from Scene to
  // here where it can be colocated with this code.
  _startOrStopSizePolling() {
    const publicThis = Public(this);

    if (publicThis._mounted && (publicThis._properties.sizeMode.x == 'proportional' || publicThis._properties.sizeMode.y == 'proportional' || publicThis._properties.sizeMode.z == 'proportional')) {
      Private(this)._startSizePolling();
    } else {
      publicThis._stopSizePolling();
    }
  },

  // Don't observe size changes on the scene element.
  // HTML
  //
  // TODO make this at least protected once we convert the Scene class
  _stopSizePolling() {
    const publicThis = Public(this);
    const privateThis = Private(this);
    publicThis.off('parentsizechange', publicThis._onElementParentSizeChange);

    _Motor.default.removeRenderTask(privateThis._sizePollTask);

    privateThis._sizePollTask = null;
  },

  private: {
    _sizePollTask: null,
    _parentSize: {
      x: 0,
      y: 0,
      z: 0
    },
    _root: null,

    // observe size changes on the scene element.
    // HTML
    _startSizePolling() {
      const publicThis = Public(this); // NOTE Polling is currently required because there's no other way to do this
      // reliably, not even with MutationObserver. ResizeObserver hasn't
      // landed in browsers yet.

      if (!this._sizePollTask) this._sizePollTask = _Motor.default.addRenderTask(this._checkSize.bind(this));
      publicThis.on('parentsizechange', publicThis._onElementParentSizeChange, publicThis);
    },

    // NOTE, the Z dimension of a scene doesn't matter, it's a flat plane, so
    // we haven't taken that into consideration here.
    // HTML
    _checkSize() {
      const publicThis = Public(this);
      const parent = publicThis.parentNode;
      const parentSize = this._parentSize;
      const style = getComputedStyle(parent);
      const width = parseFloat(style.width);
      const height = parseFloat(style.height); // if we have a size change, trigger parentsizechange

      if (parentSize.x != width || parentSize.y != height) {
        parentSize.x = width;
        parentSize.y = height;
        publicThis.trigger('parentsizechange', Object.assign({}, parentSize));
      }
    }

  }
}));

exports.default = HTMLScene;