isMounted: function() {
var internalInstance = ReactInstanceMap.get(this);
return (
internalInstance &&
internalInstance !== ReactLifeCycle.currentlyMountingInstance
);
},
/**
* Returns the THREE.js object rendered by this element.
*
* @param {React.Component|THREE.Object3D|HTMLCanvasElement} componentOrElement
* @return {?THREE.Object3D} The root node of this element.
*/
static findTHREEObject(componentOrElement) {
if (process.env.NODE_ENV !== 'production') {
const owner = ReactCurrentOwner.current;
if (owner !== null) {
if (process.env.NODE_ENV !== 'production') {
warning(
owner._warnedAboutRefsInRender,
'%s is accessing findDOMNode inside its render(). ' +
'render() should be a pure function of props and state. It should ' +
'never access something that requires stale data from the previous ' +
'render, such as refs. Move this logic to componentDidMount and ' +
'componentDidUpdate instead.',
owner.getName() || 'A component'
);
}
owner._warnedAboutRefsInRender = true;
}
}
if (componentOrElement === null) {
return null;
}
if (componentOrElement instanceof THREE.Object3D ||
componentOrElement instanceof HTMLCanvasElement) {
return componentOrElement;
}
if (ReactInstanceMap.has(componentOrElement)) {
let instance = ReactInstanceMap.get(componentOrElement);
instance = getHostComponentFromComposite(instance);
return instance ? React3ComponentTree.getMarkupFromInstance(instance).threeObject : null;
}
if (!(componentOrElement.render === null || typeof componentOrElement.render !== 'function')) {
if (process.env.NODE_ENV !== 'production') {
invariant(false, 'Component (with keys: %s) contains `render` method ' +
'but is not mounted', Object.keys(componentOrElement));
} else {
invariant(false);
}
}
if (process.env.NODE_ENV !== 'production') {
invariant(false,
'Element appears to be neither ReactComponent, ' +
'a THREE.js object, nor a HTMLCanvasElement (keys: %s)',
Object.keys(componentOrElement));
} else {
invariant(false);
}
return null;
}
getDebugID = function _(inst) {
if (!inst._debugID) {
// Check for ART-like instances. TODO: This is silly/gross.
const internal = ReactInstanceMap.get(inst);
if (internal) {
return internal._debugID;
}
}
return inst._debugID;
};
componentDidMount: function() {
var domNode = ReactDOM.findDOMNode(this);
this.node = Mode.Surface(+this.props.width, +this.props.height, domNode);
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
transaction.perform(
this.mountAndInjectChildren,
this,
this.props.children,
transaction,
ReactInstanceMap.get(this)._context
);
ReactUpdates.ReactReconcileTransaction.release(transaction);
},
componentDidUpdate: function(oldProps) {
var node = this.node;
this.applyNodeProps(oldProps, this.props);
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
transaction.perform(
this.updateChildren,
this,
this.props.children,
transaction,
ReactInstanceMap.get(this)._context
);
ReactUpdates.ReactReconcileTransaction.release(transaction);
},
componentDidUpdate: function(oldProps) {
var node = this.node;
if (this.props.width != oldProps.width ||
this.props.height != oldProps.height) {
node.resize(+this.props.width, +this.props.height);
}
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
transaction.perform(
this.updateChildren,
this,
this.props.children,
transaction,
ReactInstanceMap.get(this)._context
);
ReactUpdates.ReactReconcileTransaction.release(transaction);
if (node.render) {
node.render();
}
},
componentDidMount: function() {
this.node = new Konva.Stage({
container: this.domNode,
width: this.props.width,
height: this.props.height
});
this.applyNodeProps(emptyObject, this.props);
this._debugID = this._reactInternalInstance._debugID;
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
transaction.perform(
this.mountAndInjectChildren,
this,
this.props.children,
transaction,
ReactInstanceMap.get(this)._context
);
ReactUpdates.ReactReconcileTransaction.release(transaction);
this.node.draw();
},
render() {
const componentCreator = ReactInstanceMap.get(this)._currentElement.type;
const element = componentCreator(this.props, this.context, this.updater);
warnIfInvalidElement(componentCreator, element);
return element;
}
_renderSubtreeIntoContainer(parentComponent, nextElement, container, callback) {
if (!reactElementWrapper.isValidElement(nextElement)) {
if (process.env.NODE_ENV !== 'production') {
if (typeof nextElement === 'string') {
invariant(false, 'React3Renderer.render(): Invalid component element.%s',
' Instead of passing an element string, make sure to instantiate ' +
'it by passing it to React.createElement.');
} else {
if (typeof nextElement === 'function') {
invariant(false, 'React3Renderer.render(): Invalid component element.%s',
' Instead of passing a component class, make sure to instantiate ' +
'it by passing it to React.createElement.');
} else {
if (nextElement !== null && nextElement.props !== undefined) {
invariant(false, 'React3Renderer.render(): Invalid component element.%s',
' This may be caused by unintentionally loading two independent ' +
'copies of React.');
} else {
invariant(false, 'React3Renderer.render(): Invalid component element.');
}
}
}
} else {
invariant(false);
}
}
const nextWrappedElement = reactElementWrapper(TopLevelWrapper,
null, null, null, null, null, nextElement);
let nextContext;
if (parentComponent) {
const parentInst = ReactInstanceMap.get(parentComponent);
nextContext = parentInst._processChildContext(parentInst._context);
} else {
nextContext = emptyObject;
}
const prevComponent = this.getTopLevelWrapperInContainer(container);
if (prevComponent) {
const prevWrappedElement = prevComponent._currentElement;
const prevElement = prevWrappedElement.props;
if (shouldUpdateReactComponent(prevElement, nextElement)) {
const publicInst = prevComponent._renderedComponent.getPublicInstance();
const updatedCallback = callback &&
(() => {
callback.call(publicInst);
});
this._updateRootComponent(prevComponent,
nextWrappedElement,
nextContext,
container,
updatedCallback);
return publicInst;
}
this.unmountComponentAtNode(container);
}
// aka first child
const reactRootMarkup = getReactRootMarkupInContainer(container);
const containerHasReactMarkup = reactRootMarkup && !!internalGetID(reactRootMarkup);
// containerHasNonRootReactChild not implemented
const shouldReuseMarkup = containerHasReactMarkup && !prevComponent;
const component = this._renderNewRootComponent(
nextWrappedElement,
container,
shouldReuseMarkup,
nextContext
)._renderedComponent.getPublicInstance();
if (callback) {
callback.call(component);
}
return component;
}