gl-react/lib/Bus.js

Universal React library, write and compose WebGL shaders, implement complex effects using a descriptive paradigm

"use strict";

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

var _invariant = _interopRequireDefault(require("invariant"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _invariantNoDependentsLoop = _interopRequireDefault(require("./helpers/invariantNoDependentsLoop"));

var _genId = _interopRequireDefault(require("./genId"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

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

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

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; }

/**
 * a **Bus is a container to "cache" and re-use content** (tree of Node, canvas, video,...) somewhere else in your GL graph.
 * To use it, use the Bus `ref`:
 * - provide it in another Node texture uniform so you can share computation (send a Node texture to multiple Nodes dependent) (more exactly, a working pattern is to give a `()=>ref` function that will be resolved in `DidUpdate` lifecycle)
 * - You have a `capture()` method to snapshot the underlying Node (because Node can be hidden being nested React components).
 *
 *
 * @prop {any} children the content to render. It can also be a function that takes a redraw function and render an element.
 * @prop {string} [uniform] In case you want to explicitely draw Bus directly into a uniform, you can give the uniform name of the parent node.
 * If this prop is not used, the Bus does not directly belong to a Node and a ref can be used to indirectly give a texture to a node.
 * `uniform` is equivalent to directly pass your VDOM inside the Node uniforms prop.
 *
 * **Usage Example**
 *
 * [![](https://github.com/ProjectSeptemberInc/gl-react/raw/master/docs/examples/blur.gif)](/blurmapmouse)
 *
 * @example
 *
 * <Surface ...>
 *   <Bus ref="myBus">
 *     //here, glEffects or content like a canvas/video...
 *   </Bus>
 *   <Node uniforms={{
 *     texture: () => this.refs.myBus
 *   }} ... />
 * </Surface>
 *
 */
class Bus extends _react.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "id", (0, _genId.default)());

    _defineProperty(this, "context", void 0);

    _defineProperty(this, "dependents", []);

    _defineProperty(this, "glNode", null);

    _defineProperty(this, "glBusRootNode", void 0);

    _defineProperty(this, "onRef", ref => {
      this.glBusRootNode = ref;
    });

    _defineProperty(this, "redraw", () => {
      this.dependents.forEach(d => d.redraw());
    });

    _defineProperty(this, "_draw", () => {// FIXME: _draw() on a Bus? (would a third party need this?)
    });
  }

  componentDidMount() {
    const {
      uniform,
      index
    } = this.props;

    if (uniform) {
      const {
        glParent
      } = this.context;
      (0, _invariant.default)(glParent instanceof _Node.default, 'a <Bus uniform=".." /> needs to be inside a Node');

      glParent._addUniformBus(this, uniform, index);
    }

    this.redraw();
  }

  componentWillUnmount() {
    const {
      uniform,
      index
    } = this.props;

    if (uniform) {
      const {
        glParent
      } = this.context;
      (0, _invariant.default)(glParent instanceof _Node.default, 'a <Bus uniform=".." /> needs to be inside a Node');

      glParent._removeUniformBus(this, uniform, index);
    }
  }

  componentDidUpdate({
    uniform: oldUniform,
    index: oldIndex
  }) {
    const {
      uniform,
      index
    } = this.props;

    if (uniform && (uniform !== oldUniform || index !== oldIndex)) {
      const {
        glParent
      } = this.context;
      (0, _invariant.default)(glParent instanceof _Node.default, 'a <Bus uniform=".." /> needs to be inside a Node');
      if (oldUniform) glParent._removeUniformBus(this, oldUniform, oldIndex);

      glParent._addUniformBus(this, uniform, index);
    }

    this.redraw();
  }

  getChildContext() {
    return {
      glParent: this
    };
  }

  _addGLNodeChild(node) {
    this.glNode = node;
    this.context.glParent.redraw();
  }

  _removeGLNodeChild(node) {
    this.glNode = null;
  }

  _addDependent(node) {
    const i = this.dependents.indexOf(node);

    if (i === -1) {
      (0, _invariantNoDependentsLoop.default)(this, node);
      this.dependents.push(node);
    }
  }

  _removeDependent(node) {
    const i = this.dependents.indexOf(node);
    if (i !== -1) this.dependents.splice(i, 1);
  }

  getGLRenderableNode() {
    return this.glNode;
  }

  getGLRenderableContent() {
    const {
      mapRenderableContent
    } = this.context.glSurface;
    const {
      glBusRootNode
    } = this;
    return glBusRootNode && mapRenderableContent ? mapRenderableContent(glBusRootNode) : null;
  }

  getGLName() {
    return `Bus(${this.glNode ? this.glNode.getGLName() : String(this.getGLRenderableContent())})`;
  }

  getGLShortName() {
    const content = this.getGLRenderableContent();
    const shortContentName = String(content && content.constructor && content.constructor.name || content);
    return `Bus(${this.glNode ? this.glNode.getGLShortName() : shortContentName})`;
  }
  /**
   * Capture the underlying Node pixels.
   * NB it only works for nodes, not for content like video/canvas.
   */


  capture(x, y, w, h) {
    (0, _invariant.default)(this.glNode, "Bus does not contain any Node");
    return this.glNode.capture(x, y, w, h);
  }

  _onContextLost() {
    const {
      glNode
    } = this;
    if (glNode) glNode._onContextLost();
  }

  _onContextRestored(gl) {
    const {
      glNode
    } = this;
    if (glNode) glNode._onContextRestored(gl);
  }

  render() {
    const {
      children
    } = this.props;
    const {
      glSurface: {
        RenderLessElement,
        mapRenderableContent
      }
    } = this.context;
    return /*#__PURE__*/_react.default.createElement(RenderLessElement, {
      ref: mapRenderableContent ? this.onRef : undefined
    }, typeof children === "function" ? children(this.redraw) : children);
  }

}

exports.default = Bus;

_defineProperty(Bus, "defaultProps", {
  index: 0
});

_defineProperty(Bus, "contextTypes", {
  glParent: _propTypes.default.object.isRequired,
  glSurface: _propTypes.default.object.isRequired
});

_defineProperty(Bus, "childContextTypes", {
  glParent: _propTypes.default.object.isRequired
});
//# sourceMappingURL=Bus.js.map