Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-three-renderer

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-three-renderer - npm Package Compare versions

Comparing version 0.0.8-alpha to 0.0.9-alpha

6

lib/descriptors/Geometry/GeometryDescriptorBase.js

@@ -85,3 +85,3 @@ 'use strict';

value: function unmount(geometry) {
var parent = geometry.userData.parentMarkup.threeObject;
var parent = geometry.userData.markup.parentMarkup.threeObject;

@@ -102,3 +102,3 @@ // could either be a resource description or an actual geometry

value: function highlight(threeObject) {
var ownerMesh = threeObject.userData.parentMarkup.threeObject;
var ownerMesh = threeObject.userData.markup.parentMarkup.threeObject;
threeObject.userData.events.emit('highlight', {

@@ -118,3 +118,3 @@ uuid: threeObject.uuid,

value: function getBoundingBoxes(threeObject) {
var ownerMesh = threeObject.userData.parentMarkup.threeObject;
var ownerMesh = threeObject.userData.markup.parentMarkup.threeObject;

@@ -121,0 +121,0 @@ var boundingBox = new _threeJs2['default'].Box3();

4

lib/descriptors/Geometry/Shapes/PathDescriptorBase.js

@@ -119,3 +119,3 @@ 'use strict';

value: function highlight(threeObject) {
var parentObject = threeObject.userData.parentMarkup.threeObject;
var parentObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -127,3 +127,3 @@ parentObject.userData._descriptor.highlight(parentObject);

value: function getBoundingBoxes(threeObject) {
var parentObject = threeObject.userData.parentMarkup.threeObject;
var parentObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -130,0 +130,0 @@ return parentObject.userData._descriptor.getBoundingBoxes(parentObject);

4

lib/descriptors/Geometry/Shapes/ShapeActionDescriptorBase.js

@@ -52,3 +52,3 @@ 'use strict';

value: function highlight(threeObject) {
var parentObject = threeObject.userData.parentMarkup.threeObject;
var parentObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -60,3 +60,3 @@ parentObject.userData._descriptor.highlight(parentObject);

value: function getBoundingBoxes(threeObject) {
var parentObject = threeObject.userData.parentMarkup.threeObject;
var parentObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -63,0 +63,0 @@ return parentObject.userData._descriptor.getBoundingBoxes(parentObject);

6

lib/descriptors/Material/MaterialDescriptorBase.js

@@ -183,3 +183,3 @@ 'use strict';

value: function unmount(material) {
var parent = material.userData.parentMarkup.threeObject;
var parent = material.userData.markup.parentMarkup.threeObject;

@@ -204,3 +204,3 @@ // could either be a resource description or an actual material

value: function highlight(threeObject) {
var ownerMesh = threeObject.userData.parentMarkup.threeObject;
var ownerMesh = threeObject.userData.markup.parentMarkup.threeObject;
threeObject.userData.events.emit('highlight', {

@@ -222,3 +222,3 @@ uuid: threeObject.uuid,

boundingBox.setFromObject(threeObject.userData.parentMarkup.threeObject);
boundingBox.setFromObject(threeObject.userData.markup.parentMarkup.threeObject);

@@ -225,0 +225,0 @@ return [boundingBox];

6

lib/descriptors/Material/TextureDescriptor.js

@@ -141,3 +141,3 @@ 'use strict';

value: function unmount(texture) {
var parent = texture.userData.parentMarkup.threeObject;
var parent = texture.userData.markup.parentMarkup.threeObject;

@@ -164,3 +164,3 @@ // could either be a resource description or an actual texture

value: function highlight(threeObject) {
var parent = threeObject.userData.parentMarkup.threeObject;
var parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.highlight(parent);

@@ -171,3 +171,3 @@ }

value: function hideHighlight(threeObject) {
var parent = threeObject.userData.parentMarkup.threeObject;
var parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.hideHighlight(parent);

@@ -174,0 +174,0 @@ }

6

lib/descriptors/Material/UniformDescriptor.js

@@ -151,3 +151,3 @@ 'use strict';

value: function highlight(threeObject) {
var parent = threeObject.userData.parentMarkup.threeObject;
var parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.highlight(parent);

@@ -158,3 +158,3 @@ }

value: function getBoundingBoxes(threeObject) {
var parent = threeObject.userData.parentMarkup.threeObject;
var parent = threeObject.userData.markup.parentMarkup.threeObject;
return parent.userData._descriptor.getBoundingBoxes(parent);

@@ -165,3 +165,3 @@ }

value: function hideHighlight(threeObject) {
var parent = threeObject.userData.parentMarkup.threeObject;
var parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.hideHighlight(parent);

@@ -168,0 +168,0 @@ }

6

lib/descriptors/Material/UniformsDescriptor.js

@@ -71,3 +71,3 @@ 'use strict';

value: function highlight(threeObject) {
var parent = threeObject.userData.parentMarkup.threeObject;
var parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.highlight(parent);

@@ -78,3 +78,3 @@ }

value: function getBoundingBoxes(threeObject) {
var parent = threeObject.userData.parentMarkup.threeObject;
var parent = threeObject.userData.markup.parentMarkup.threeObject;
return parent.userData._descriptor.getBoundingBoxes(parent);

@@ -85,3 +85,3 @@ }

value: function hideHighlight(threeObject) {
var parent = threeObject.userData.parentMarkup.threeObject;
var parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.hideHighlight(parent);

@@ -88,0 +88,0 @@ }

4

lib/descriptors/Object/Camera/CameraDescriptorBase.js

@@ -25,6 +25,2 @@ 'use strict';

var _getRoot = require('../../../getRoot');
var _getRoot2 = _interopRequireDefault(_getRoot);
var CameraDescriptorBase = (function (_Object3DDescriptor) {

@@ -31,0 +27,0 @@ _inherits(CameraDescriptorBase, _Object3DDescriptor);

14

lib/descriptors/Resource/ResourceDescriptorBase.js

@@ -48,3 +48,3 @@ 'use strict';

this._addedIntoRoot = function (threeObject) {
var currentParentMarkup = threeObject.userData.parentMarkup;
var currentParentMarkup = threeObject.userData.markup.parentMarkup;

@@ -54,3 +54,3 @@ var distance = 0;

while (currentParentMarkup) {
var parentResources = currentParentMarkup.userData._resources;
var parentResources = currentParentMarkup.threeObject.userData._resources;

@@ -71,3 +71,3 @@ if (parentResources) {

distance++;
currentParentMarkup = currentParentMarkup.userData.parentMarkup;
currentParentMarkup = currentParentMarkup.threeObject.userData.markup.parentMarkup;
}

@@ -142,3 +142,3 @@

var parentEvents = currentParentMarkup.userData.events;
var parentEvents = currentParentMarkup.threeObject.userData.events;
parentEvents.on('resource.added', onResourceAdded);

@@ -220,3 +220,3 @@ parentEvents.on('resource.removed', onResourceRemoved);

value: function resourceUpdated(threeObject, newResource, oldResource) {
var parentObject = threeObject.userData.parentMarkup && threeObject.userData.parentMarkup.threeObject || undefined;
var parentObject = threeObject.userData.markup.parentMarkup && threeObject.userData.markup.parentMarkup.threeObject || undefined;

@@ -257,3 +257,3 @@ if (parentObject) {

value: function highlight(threeObject) {
var ownerObject = threeObject.userData.parentMarkup.threeObject;
var ownerObject = threeObject.userData.markup.parentMarkup.threeObject;
ownerObject.userData._descriptor.highlight(ownerObject);

@@ -264,3 +264,3 @@ }

value: function hideHighlight(threeObject) {
var ownerObject = threeObject.userData.parentMarkup.threeObject;
var ownerObject = threeObject.userData.markup.parentMarkup.threeObject;
ownerObject.userData._descriptor.hideHighlight(ownerObject);

@@ -267,0 +267,0 @@ }

14

lib/descriptors/Resource/ResourcesDescriptor.js

@@ -50,4 +50,4 @@ 'use strict';

value: function unmount(threeObject) {
var parentMarkup = threeObject.userData.parentMarkup;
var parentEvents = parentMarkup.userData.events;
var parentMarkup = threeObject.userData.markup.parentMarkup;
var parentEvents = parentMarkup.threeObject.userData.events;

@@ -76,5 +76,5 @@ threeObject.resourceIds.forEach(function (id) {

var parentMarkup = threeObject.userData.parentMarkup;
var parentMarkup = threeObject.userData.markup.parentMarkup;
if (parentMarkup) {
parentMarkup.userData.events.emit('resource.added', {
parentMarkup.threeObject.userData.events.emit('resource.added', {
id: resourceId,

@@ -99,5 +99,5 @@ distance: 0,

var parentMarkup = threeObject.userData.parentMarkup;
var parentMarkup = threeObject.userData.markup.parentMarkup;
if (parentMarkup) {
parentMarkup.userData.events.emit('resource.removed', {
parentMarkup.threeObject.userData.events.emit('resource.removed', {
id: resourceId,

@@ -129,3 +129,3 @@ distance: 0,

value: function highlight(threeObject) {
var ownerObject = threeObject.userData.parentMarkup.threeObject;
var ownerObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -132,0 +132,0 @@ if (!(ownerObject.updateMatrixWorld && ownerObject.traverse)) {

8

lib/descriptors/THREEElementDescriptor.js

@@ -220,3 +220,3 @@ 'use strict';

eventsForObject.on('resource.added', function (data) {
var childrenMarkup = threeObject.userData.childrenMarkup;
var childrenMarkup = threeObject.userData.markup.childrenMarkup;

@@ -228,3 +228,3 @@ var increasedDistance = _extends({}, data, {

childrenMarkup.forEach(function (childMarkup) {
return childMarkup.userData.events.emit('resource.added', increasedDistance);
return childMarkup.threeObject.userData.events.emit('resource.added', increasedDistance);
});

@@ -234,3 +234,3 @@ });

eventsForObject.on('resource.removed', function (data) {
var childrenMarkup = threeObject.userData.childrenMarkup;
var childrenMarkup = threeObject.userData.markup.childrenMarkup;

@@ -242,3 +242,3 @@ var increasedDistance = _extends({}, data, {

childrenMarkup.forEach(function (childMarkup) {
return childMarkup.userData.events.emit('resource.removed', increasedDistance);
return childMarkup.threeObject.userData.events.emit('resource.removed', increasedDistance);
});

@@ -245,0 +245,0 @@ });

71

lib/InternalComponent.js

@@ -7,6 +7,6 @@ 'use strict';

var _extends = require('babel-runtime/helpers/extends')['default'];
var _defineProperty = require('babel-runtime/helpers/define-property')['default'];
var _Object$assign = require('babel-runtime/core-js/object/assign')['default'];
var _Object$keys = require('babel-runtime/core-js/object/keys')['default'];

@@ -166,3 +166,3 @@

value: function mountComponent(rootID, transaction, context) {
var _extends2;
var _markup;

@@ -187,17 +187,21 @@ // console.log("mount component", rootID);

var markup = {
userData: _extends({}, this._threeObject.userData, (_extends2 = {}, _defineProperty(_extends2, ID_ATTR_NAME, rootID), _defineProperty(_extends2, 'childrenMarkup', mountImages), _defineProperty(_extends2, 'object3D', this._threeObject), _defineProperty(_extends2, 'react3internalComponent', this), _defineProperty(_extends2, 'toJSON', function toJSON() {
var markup = (_markup = {}, _defineProperty(_markup, ID_ATTR_NAME, rootID), _defineProperty(_markup, '_rootInstance', null), _defineProperty(_markup, 'elementType', element.type), _defineProperty(_markup, 'threeObject', this._threeObject), _defineProperty(_markup, 'parentMarkup', null), _defineProperty(_markup, 'childrenMarkup', mountImages), _defineProperty(_markup, 'toJSON', function toJSON() {
return '---MARKUP---';
}), _markup);
if (process.env.NODE_ENV !== 'production') {
(0, _fbjsLibInvariant2['default'])(!!this._threeObject.userData, 'No userdata present in threeobject for %s', element.type);
} else {
(0, _fbjsLibInvariant2['default'])(!!this._threeObject.userData);
}
_Object$assign(this._threeObject.userData, {
object3D: this._threeObject,
react3internalComponent: this, // used for highlighting etc
toJSON: function toJSON() {
return '---USERDATA---';
}), _extends2)),
_rootInstance: null,
elementType: element.type,
threeObject: this._threeObject,
toJSON: function toJSON() {
return '---MARKUP---';
}
};
},
markup: markup
});
markup.userData.markup = markup;
this._threeObject.userData = markup.userData;
var threeElementDescriptors = this._react3RendererInstance.threeElementDescriptors;

@@ -213,3 +217,3 @@

mountImage.userData.parentMarkup = markup;
mountImage.parentMarkup = markup;

@@ -229,2 +233,4 @@ descriptorForChild.setParent(mountImage.threeObject, this._threeObject);

if (this._currentElement) {
var previousCurrent = _reactLibReactCurrentOwner2['default'].current;
try {

@@ -234,3 +240,3 @@ _reactLibReactCurrentOwner2['default'].current = this._currentElement._owner;

} finally {
_reactLibReactCurrentOwner2['default'].current = null;
_reactLibReactCurrentOwner2['default'].current = previousCurrent;
}

@@ -247,2 +253,4 @@ }

if (this._currentElement) {
var previousCurrent = _reactLibReactCurrentOwner2['default'].current;
try {

@@ -252,3 +260,3 @@ _reactLibReactCurrentOwner2['default'].current = this._currentElement._owner;

} finally {
_reactLibReactCurrentOwner2['default'].current = null;
_reactLibReactCurrentOwner2['default'].current = previousCurrent;
}

@@ -299,3 +307,3 @@

_arrayMove(markup.userData.childrenMarkup, lastIndex, toIndex);
_arrayMove(markup.childrenMarkup, lastIndex, toIndex);
}

@@ -426,3 +434,3 @@ }, {

this.threeElementDescriptor.unmount(this._threeObject);
delete this._threeObject.userData.markup;
// delete this._threeObject.userData.markup;
}

@@ -447,11 +455,11 @@

value: function getPublicInstance() {
var node = this._react3RendererInstance.getUserData(this._rootNodeID);
var markup = this._react3RendererInstance.getMarkup(this._rootNodeID);
if (node.object3D) {
node.object3D.toJSON = this.emptyJson;
return node.object3D;
if (markup.threeObject) {
markup.threeObject.toJSON = this.emptyJson;
return markup.threeObject;
}
if (process.env.NODE_ENV !== 'production') {
(0, _fbjsLibInvariant2['default'])(false, 'Node has no object3d?');
(0, _fbjsLibInvariant2['default'])(false, 'Node has no threeObject?');
} else {

@@ -559,4 +567,4 @@ (0, _fbjsLibInvariant2['default'])(false);

this._markup.userData.childrenMarkup.splice(mountIndex, 0, mountImage);
mountImage.userData.parentMarkup = this._markup;
this._markup.childrenMarkup.splice(mountIndex, 0, mountImage);
mountImage.parentMarkup = this._markup;

@@ -593,3 +601,3 @@ this.threeElementDescriptor.addChild(this._threeObject, mountImage.threeObject, mountIndex);

var childrenMarkup = this._markup.userData.childrenMarkup;
var childrenMarkup = this._markup.childrenMarkup;

@@ -602,3 +610,3 @@ for (var i = 0; i < childrenMarkup.length; i++) {

delete child._threeObject.userData.parentMarkup;
delete childMarkup.parentMarkup;
return;

@@ -620,3 +628,2 @@ }

exports['default'] = InternalComponent;
module.exports = exports['default'];
// used for highlighting etc
module.exports = exports['default'];

2

lib/React3.js

@@ -126,3 +126,3 @@ 'use strict';

this.props.children
));
), canvas);
}

@@ -129,0 +129,0 @@ }, {

5

lib/React3CompositeComponentWrapper.js

@@ -145,8 +145,11 @@ 'use strict';

if (process.env.NODE_ENV !== 'production') {
var previousCurrent = _reactLibReactCurrentOwner2['default'].current;
// noinspection JSValidateTypes
_reactLibReactCurrentOwner2['default'].current = this;
try {
inst = new Component(publicProps, publicContext, _reactLibReactUpdateQueue2['default']);
} finally {
_reactLibReactCurrentOwner2['default'].current = null;
_reactLibReactCurrentOwner2['default'].current = previousCurrent;
}

@@ -153,0 +156,0 @@ } else {

2

lib/React3Instance.js

@@ -733,3 +733,3 @@ 'use strict';

var childrenMarkup = current.userData.childrenMarkup;
var childrenMarkup = current.userData.markup.childrenMarkup;

@@ -736,0 +736,0 @@ if (object instanceof _threeJs2['default'].Material) {

422

lib/React3Renderer.js

@@ -11,6 +11,6 @@ 'use strict';

var _extends = require('babel-runtime/helpers/extends')['default'];
var _Object$keys = require('babel-runtime/core-js/object/keys')['default'];
var _Object$assign = require('babel-runtime/core-js/object/assign')['default'];
var _Object$preventExtensions = require('babel-runtime/core-js/object/prevent-extensions')['default'];

@@ -68,2 +68,14 @@

var _reactLibReactInjection = require('react/lib/ReactInjection');
var _reactLibReactInjection2 = _interopRequireDefault(_reactLibReactInjection);
var _reactLibReactReconcileTransaction = require('react/lib/ReactReconcileTransaction');
var _reactLibReactReconcileTransaction2 = _interopRequireDefault(_reactLibReactReconcileTransaction);
var _reactLibReactDefaultBatchingStrategy = require('react/lib/ReactDefaultBatchingStrategy');
var _reactLibReactDefaultBatchingStrategy2 = _interopRequireDefault(_reactLibReactDefaultBatchingStrategy);
var _fbjsLibEmptyObject = require('fbjs/lib/emptyObject');

@@ -248,21 +260,21 @@

function internalGetID(userData) {
return userData && userData[ID_ATTR_NAME] || '';
// If userData is something like a window, document, or text userData, none of
function internalGetID(markup) {
return markup && markup[ID_ATTR_NAME] || '';
// If markup is something like a window, document, or text markup, none of
// which support attributes or a .getAttribute method, gracefully return
// the empty string, as if the attribute were missing.
// return userData && userData.getAttribute && userData.getAttribute(ID_ATTR_NAME) || '';
// return markup && markup.getAttribute && markup.getAttribute(ID_ATTR_NAME) || '';
}
/**
* @param {THREE.Object3D} threeObject Object3D that may contain
* @param {THREE.Object3D|HTMLCanvasElement} container That may contain
* a React component
* @return {?*} Userdata that may have the reactRoot ID, or null.
* @return {?*} The markup that may have the reactRoot ID, or null.
*/
function getReactRootUserDataInObject3D(threeObject) {
if (!threeObject) {
function getReactRootMarkupInContainer(container) {
if (!container) {
return null;
}
return threeObject.userData && threeObject.userData.childrenMarkup && threeObject.userData.childrenMarkup[0] || null;
return container.userData && container.userData.markup && container.userData.markup.childrenMarkup[0] || null;
}

@@ -350,4 +362,4 @@

}, {
key: 'getUserDataFromInstance',
value: function getUserDataFromInstance(instance) {
key: 'getMarkupFromInstance',
value: function getMarkupFromInstance(instance) {
var id = _reactLibReactInstanceMap2['default'].get(instance)._rootNodeID;

@@ -359,7 +371,7 @@

if (!this.userDataCache.hasOwnProperty(id) || !this.isValid(this.userDataCache[id], id)) {
this.userDataCache[id] = this.findReactNodeByID(id);
if (!this.markupCache.hasOwnProperty(id) || !this.isValid(this.markupCache[id], id)) {
this.markupCache[id] = this.findMarkupByID(id);
}
return this.userDataCache[id];
return this.markupCache[id];
}

@@ -402,3 +414,3 @@ }, {

return instance._react3RendererInstance.getUserDataFromInstance(componentOrElement).object3D;
return instance._react3RendererInstance.getMarkupFromInstance(componentOrElement).threeObject;
}

@@ -432,5 +444,5 @@

this.findDeepestCachedAncestorImpl = function (ancestorID) {
var ancestorUserData = _this.userDataCache[ancestorID];
if (ancestorUserData && _this.isValid(ancestorUserData, ancestorID)) {
_this.deepestObject3DSoFar = ancestorUserData.object3D;
var ancestorMarkup = _this.markupCache[ancestorID];
if (ancestorMarkup && _this.isValid(ancestorMarkup, ancestorID)) {
_this.deepestContainerSoFar = ancestorMarkup.threeObject;
} else {

@@ -455,5 +467,5 @@ // This node isn't populated in the cache, so presumably none of its

this.findNodeHandle = function (instance) {
var userData = _this.getUserData(instance._rootNodeID);
var markup = _this.getMarkup(instance._rootNodeID);
_this._highlightCache = userData;
_this._highlightCache = markup;
return _this._highlightElement;

@@ -490,9 +502,9 @@ };

this._instancesByReactRootID = {};
this.object3DsByReactRootID = {};
this.containersByReactRootID = {};
if (process.env.NODE_ENV !== 'production') {
this.rootUserDatasByReactRootID = {};
this.rootMarkupsByReactRootID = {};
}
this.findComponentRootReusableArray = [];
this.userDataCache = {};
this.deepestObject3DSoFar = null;
this.markupCache = {};
this.deepestContainerSoFar = null;
this.nextMountID = 1;

@@ -503,4 +515,2 @@ this.nextReactRootIndex = 0;

this._root = {};
this._highlightElement = document.createElement('div');

@@ -513,4 +523,4 @@ this._highlightCache = null;

this._onHideHighlightFromInspector = function () {
if (_this._highlightCache && _this._highlightCache.react3internalComponent) {
var internalComponent = _this._highlightCache.react3internalComponent;
if (_this._highlightCache && _this._highlightCache.threeObject.userData.react3internalComponent) {
var internalComponent = _this._highlightCache.threeObject.userData.react3internalComponent;

@@ -525,4 +535,4 @@ internalComponent.hideHighlight();

if (highlightInfo.node === _this._highlightElement) {
if (_this._highlightCache && _this._highlightCache.react3internalComponent) {
var internalComponent = _this._highlightCache.react3internalComponent;
if (_this._highlightCache && _this._highlightCache.threeObject.userData.react3internalComponent) {
var internalComponent = _this._highlightCache.threeObject.userData.react3internalComponent;

@@ -568,5 +578,8 @@ internalComponent.highlightComponent();

_this._reactDevtoolsRendererId = info.id;
_this._rendererListenerCleanup();
delete _this._rendererListenerCleanup;
};
__REACT_DEVTOOLS_GLOBAL_HOOK__.sub('renderer', rendererListener);
this._rendererListenerCleanup = __REACT_DEVTOOLS_GLOBAL_HOOK__.sub('renderer', rendererListener);
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject(this._devToolsRendererDefinition);

@@ -595,9 +608,9 @@

value: function findDeepestCachedAncestor(targetID) {
this.deepestObject3DSoFar = null;
this.deepestContainerSoFar = null;
_reactLibReactInstanceHandles2['default'].traverseAncestors(targetID, this.findDeepestCachedAncestorImpl);
var foundUserData = this.deepestObject3DSoFar;
this.deepestObject3DSoFar = null;
return foundUserData;
var foundAncestor = this.deepestContainerSoFar;
this.deepestContainerSoFar = null;
return foundAncestor;
}

@@ -619,6 +632,6 @@ }, {

key: 'containsChild',
value: function containsChild(container, userData) {
var childrenMarkup = container.userData.childrenMarkup;
value: function containsChild(container, markup) {
var childrenMarkup = container.userData.markup.childrenMarkup;
for (var i = 0; i < childrenMarkup.length; i++) {
if (childrenMarkup[i].userData === userData) {
if (childrenMarkup[i] === markup) {
return true;

@@ -632,5 +645,5 @@ }

key: 'isValid',
value: function isValid(userData, id) {
if (userData) {
if (internalGetID(userData) !== id) {
value: function isValid(markup, id) {
if (markup) {
if (internalGetID(markup) !== id) {
if (process.env.NODE_ENV !== 'production') {

@@ -643,9 +656,9 @@ (0, _fbjsLibInvariant2['default'])(false, 'React3Renderer: Unexpected modification of `%s`', ID_ATTR_NAME);

var container = this.findReactContainerForID(id);
var container = this.findContainerForID(id);
// if (container && container.userData === userData) {
// if (container && container.markup === markup) {
// return true;
// }
if (container && this.containsChild(container, userData)) {
if (container && this.containsChild(container, markup)) {
return true;

@@ -659,3 +672,3 @@ }

/**
* Finds the object3D DOM element that contains React component to which the
* Finds the container that contains React component to which the
* supplied DOM `id` belongs.

@@ -667,28 +680,30 @@ *

}, {
key: 'findReactContainerForID',
value: function findReactContainerForID(id) {
key: 'findContainerForID',
value: function findContainerForID(id) {
var reactRootID = _reactLibReactInstanceHandles2['default'].getReactRootIDFromNodeID(id);
var object3D = this.object3DsByReactRootID[reactRootID];
var container = this.containersByReactRootID[reactRootID];
if (process.env.NODE_ENV !== 'production') {
var rootElement = this.rootUserDatasByReactRootID[reactRootID];
if (rootElement && rootElement.userData.parentMarkup.threeObject !== object3D) {
if (process.env.NODE_ENV !== 'production') {
(0, _fbjsLibWarning2['default'])(
// Call internalGetID here because getID calls isValid which calls
// findReactContainerForID (this function).
internalGetID(rootElement) === reactRootID, 'React3Renderer: Root element ID differed from reactRootID.');
}
var containerChild = object3D.userData.childrenMarkup[0]; // firstChild;
if (containerChild && reactRootID === internalGetID(containerChild)) {
// If the object3D has a new child with the same ID as the old
// root element, then rootUserDatasByReactRootID[reactRootID] is
// just stale and needs to be updated. The case that deserves a
// warning is when the object3D is empty.
this.rootUserDatasByReactRootID[reactRootID] = containerChild;
} else {
var rootMarkup = this.rootMarkupsByReactRootID[reactRootID];
if (rootMarkup) {
if (!rootMarkup.parentMarkup || rootMarkup.parentMarkup.threeObject !== container) {
if (process.env.NODE_ENV !== 'production') {
(0, _fbjsLibWarning2['default'])(false, 'React3Renderer: Root element has been removed from its original ' + 'object3D. New object3D: %s', rootElement.parentNode);
(0, _fbjsLibWarning2['default'])(
// Call internalGetID here because getID calls isValid which calls
// findThreeObjectForID (this function).
internalGetID(rootMarkup) === reactRootID, 'React3Renderer: Root element ID differed from reactRootID.');
}
var containerChildMarkup = container.userData && container.userData.markup && container.userData.markup.childrenMarkup[0]; // firstChild;
if (containerChildMarkup && reactRootID === internalGetID(containerChildMarkup)) {
// If the container has a new child with the same ID as the old
// root element, then rootUserDatasByReactRootID[reactRootID] is
// just stale and needs to be updated. The case that deserves a
// warning is when the container is empty.
this.rootMarkupsByReactRootID[reactRootID] = containerChildMarkup;
} else {
if (process.env.NODE_ENV !== 'production') {
(0, _fbjsLibWarning2['default'])(false, 'React3Renderer: Root element has been removed from its original ' + 'container. New container: %s', rootMarkup.parentNode);
}
}
}

@@ -698,14 +713,17 @@ }

return object3D;
return container;
}
}, {
key: 'getUserData',
value: function getUserData(id) {
if (!this.userDataCache.hasOwnProperty(id) || !this.isValid(this.userDataCache[id], id)) {
this.userDataCache[id] = this.findReactNodeByID(id);
key: 'getMarkup',
value: function getMarkup(id) {
if (!this.markupCache.hasOwnProperty(id) || !this.isValid(this.markupCache[id], id)) {
this.markupCache[id] = this.findMarkupByID(id);
}
return this.userDataCache[id];
return this.markupCache[id];
}
// DO NOT RENAME
// used by react devtools!
}, {
key: 'findReactNodeByID',
key: 'findMarkupByID',

@@ -718,23 +736,23 @@ /**

*/
value: function findReactNodeByID(id) {
var reactRoot = this.findReactContainerForID(id);
return this.findComponentRoot(reactRoot, id);
value: function findMarkupByID(id) {
var container = this.findContainerForID(id);
return this.findComponentRoot(container, id);
}
}, {
key: 'findComponentRoot',
value: function findComponentRoot(ancestorNode, targetID) {
var firstUserDataList = this.findComponentRootReusableArray;
value: function findComponentRoot(ancestorContainer, targetID) {
var firstMarkupList = this.findComponentRootReusableArray;
var childIndex = 0;
var deepestAncestor = this.findDeepestCachedAncestor(targetID) || ancestorNode;
var deepestAncestorContainer = this.findDeepestCachedAncestor(targetID) || ancestorContainer;
firstUserDataList[0] = deepestAncestor.userData.childrenMarkup[0].userData;
firstUserDataList.length = 1;
firstMarkupList[0] = deepestAncestorContainer.userData.markup.childrenMarkup[0];
firstMarkupList.length = 1;
while (childIndex < firstUserDataList.length) {
var child = firstUserDataList[childIndex++];
var targetChild = undefined;
while (childIndex < firstMarkupList.length) {
var childMarkup = firstMarkupList[childIndex++];
var targetChildMarkup = undefined;
while (child) {
var childID = this.getID(child);
while (childMarkup) {
var childID = this.getID(childMarkup);
if (childID) {

@@ -747,3 +765,3 @@ // Even if we find the node we're looking for, we finish looping

if (targetID === childID) {
targetChild = child;
targetChildMarkup = childMarkup;
} else if (_reactLibReactInstanceHandles2['default'].isAncestorIDOf(childID, targetID)) {

@@ -754,7 +772,8 @@ // If we find a child whose ID is an ancestor of the given ID,

// search state.
firstUserDataList.length = childIndex = 0;
firstUserDataList.push(child.childrenMarkup[0].userData);
firstMarkupList.length = childIndex = 0;
firstMarkupList.push(childMarkup.childrenMarkup[0]);
}
} else {
debugger;
(0, _fbjsLibInvariant2['default'])(false);
// debugger;
// If this child had no ID, then there's a chance that it was

@@ -765,16 +784,22 @@ // injected automatically by the browser, as when a `<table>`

// branch, but not before examining the other siblings.
firstUserDataList.push(child.childrenMarkup[0].userData);
firstMarkupList.push(childMarkup.childrenMarkup[0]);
}
var ownerChildren = child.parentMarkup.userData.childrenMarkup;
// if childMarkup doesn't exist it may have been unmounted
var childParentMarkup = childMarkup && childMarkup.parentMarkup;
// if parentMarkup doesn't exist it could be a root (or unmounted)
var ownerChildrenMarkups = childParentMarkup && childParentMarkup.childrenMarkup;
child = null;
childMarkup = null;
// child = child.nextSibling;
for (var i = 0; i < ownerChildren.length - 1; i++) {
var ownerChildId = this.getID(ownerChildren[i].userData);
if (ownerChildrenMarkups) {
// child = child.nextSibling;
for (var i = 0; i < ownerChildrenMarkups.length - 1; i++) {
var ownerChildId = this.getID(ownerChildrenMarkups[i]);
if (ownerChildId === childID) {
child = ownerChildren[i + 1].userData;
break;
if (ownerChildId === childID) {
// if the owner's child's id is the same as my id, then the next sibling markup is:
childMarkup = ownerChildrenMarkups[i + 1];
break;
}
}

@@ -784,16 +809,16 @@ }

if (targetChild) {
// Emptying firstUserDataList/findComponentRootReusableArray is
if (targetChildMarkup) {
// Emptying firstMarkupList/findComponentRootReusableArray is
// not necessary for correctness, but it helps the GC reclaim
// any nodes that were left at the end of the search.
firstUserDataList.length = 0;
firstMarkupList.length = 0;
return targetChild;
return targetChildMarkup;
}
}
firstUserDataList.length = 0;
firstMarkupList.length = 0;
if (process.env.NODE_ENV !== 'production') {
(0, _fbjsLibInvariant2['default'])(false, 'findComponentRoot(..., %s): Unable to find element. This probably ' + 'means the DOM was unexpectedly mutated (e.g., by the browser), ' + 'usually due to forgetting a <tbody> when using tables, nesting tags ' + 'like <form>, <p>, or <a>, or using non-SVG elements in an <svg> ' + 'parent. ' + 'Try inspecting the child nodes of the element with React ID `%s`.', targetID, this.getID(ancestorNode));
(0, _fbjsLibInvariant2['default'])(false, 'findComponentRoot(..., %s): Unable to find element. This probably ' + 'means the DOM was unexpectedly mutated (e.g., by the browser), ' + 'usually due to forgetting a <tbody> when using tables, nesting tags ' + 'like <form>, <p>, or <a>, or using non-SVG elements in an <svg> ' + 'parent. ' + 'Try inspecting the child nodes of the element with React ID `%s`.', targetID, this.getID(ancestorContainer.userData.markup));
} else {

@@ -809,3 +834,3 @@ (0, _fbjsLibInvariant2['default'])(false);

* @param {string} rootID DOM ID of the root node.
* @param {THREE.Object3D} container DOM element to mount into.
* @param {THREE.Object3D|HTMLCanvasElement} container DOM element to mount into.
* @param {ReactReconcileTransaction} transaction

@@ -817,3 +842,3 @@ * @param {boolean} shouldReuseMarkup If true, do not insert markup

key: '_mountRootImage',
value: function _mountRootImage(markup, container) {
value: function _mountRootImage(rootImage, container) {
// if (!(container && (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE || container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE))) {

@@ -829,4 +854,4 @@ // if (process.env.NODE_ENV !== 'production') {

// if (shouldReuseMarkup) {
// const rootElement = getReactRootUserDataInObject3D(container);
// if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
// const rootElement = getReactRootMarkupInContainer(container);
// if (ReactMarkupChecksum.canReuseMarkup(rootImage, rootElement)) {
// return;

@@ -841,4 +866,4 @@ // }

//
// const diffIndex = firstDifferenceIndex(markup, rootMarkup);
// const difference = ' (client) ' + markup.substring(diffIndex - 20, diffIndex + 20) + '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
// const diffIndex = firstDifferenceIndex(rootImage, rootMarkup);
// const difference = ' (client) ' + rootImage.substring(diffIndex - 20, diffIndex + 20) + '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
//

@@ -848,3 +873,3 @@ // !(container.nodeType !== DOC_NODE_TYPE) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'You\'re trying to render a component to the document using ' + 'server rendering but the checksum was invalid. This usually ' + 'means you rendered a different component type or props on ' + 'the client from the one on the server, or your render() ' + 'methods are impure. React cannot handle this case due to ' + 'cross-browser quirks by rendering at the document root. You ' + 'should look for environment dependent code in your components ' + 'and ensure the props are the same client and server side:\n%s', difference) : invariant(false) : undefined;

// if (process.env.NODE_ENV !== 'production') {
// process.env.NODE_ENV !== 'production' ? warning(false, 'React attempted to reuse markup in a container but the ' + 'checksum was invalid. This generally means that you are ' + 'using server rendering and the markup generated on the ' + 'server was not what the client was expecting. React injected ' + 'new markup to compensate which works but you have lost many ' + 'of the benefits of server rendering. Instead, figure out ' + 'why the markup being generated is different on the client ' + 'or server:\n%s', difference) : undefined;
// process.env.NODE_ENV !== 'production' ? warning(false, 'React attempted to reuse rootImage in a container but the ' + 'checksum was invalid. This generally means that you are ' + 'using server rendering and the rootImage generated on the ' + 'server was not what the client was expecting. React injected ' + 'new rootImage to compensate which works but you have lost many ' + 'of the benefits of server rendering. Instead, figure out ' + 'why the rootImage being generated is different on the client ' + 'or server:\n%s', difference) : undefined;
// }

@@ -861,14 +886,16 @@ // }

// console.log('setting inner html!?', markup);
// console.log('setting inner html!?', rootImage);
if (!container.userData) {
// it has to be a HTMLCanvasElement I guess?
(0, _fbjsLibInvariant2['default'])(container instanceof HTMLCanvasElement, 'The root container can only be a THREE.js object (with an userData property) or HTMLCanvasElement.');
container.userData = {
_createdByReact3: true
};
}
var rootMarkup = {
userData: _extends({}, container.userData, {
childrenMarkup: [markup],
parentMarkup: null,
object3D: container,
toJSON: function toJSON() {
return '---USERDATA---';
}
}),
threeObject: container,
parentMarkup: null,
childrenMarkup: [rootImage],
toJSON: function toJSON() {

@@ -879,11 +906,15 @@ return '---MARKUP---';

rootMarkup.userData.markup = rootMarkup;
_Object$assign(container.userData, {
object3D: container,
toJSON: function toJSON() {
return '---USERDATA---';
},
markup: rootMarkup
});
container.userData = rootMarkup.userData;
rootImage.parentMarkup = rootMarkup;
markup.userData.parentMarkup = rootMarkup;
// all objects now added can be marked as added to scene now!
var instance = markup.threeObject;
var instance = rootImage.threeObject;

@@ -893,4 +924,2 @@ (0, _fbjsLibInvariant2['default'])(instance instanceof _React3Instance2['default'], 'Invalid root component type found');

instance.mountedIntoRoot();
container.instance = instance;
}

@@ -903,3 +932,3 @@

* @param {string} rootID DOM ID of the root node.
* @param {THREE.Object3D} container DOM element to mount into.
* @param {THREE.Object3D|HTMLCanvasElement} container THREE Object or HTMLCanvasElement to mount into.
* @param {boolean} shouldReuseMarkup If true, do not insert markup

@@ -910,10 +939,16 @@ * @param {any} context

key: 'render',
value: function render(nextElement, callback) {
return this._renderSubtree(null, nextElement, callback);
/**
*
* @param nextElement A react element
* @param container A canvas or a THREE.js object
* @param callback The callback function
* @returns {*}
*/
value: function render(nextElement, container, callback) {
return this._renderSubtreeIntoContainer(null, nextElement, container, callback);
}
}, {
key: '_renderSubtree',
value: function _renderSubtree(parentComponent, nextElement, callback) {
var root = this._root;
key: '_renderSubtreeIntoContainer',
value: function _renderSubtreeIntoContainer(parentComponent, nextElement, container, callback) {
if (!_reactLibReactElement2['default'].isValidElement(nextElement)) {

@@ -937,3 +972,3 @@ if (process.env.NODE_ENV !== 'production') {

var prevComponent = this._instancesByReactRootID[this.getReactRootID(root)];
var prevComponent = this._instancesByReactRootID[this.getReactRootID(container)];

@@ -944,14 +979,15 @@ if (prevComponent) {

if ((0, _reactLibShouldUpdateReactComponent2['default'])(prevElement, nextElement)) {
return this._updateRootComponent(prevComponent, nextWrappedElement, root, callback)._renderedComponent.getPublicInstance();
return this._updateRootComponent(prevComponent, nextWrappedElement, container, callback)._renderedComponent.getPublicInstance();
}
this.unmountComponentAtNode(root);
this.unmountComponentAtNode(container);
}
var reactRootUserData = getReactRootUserDataInObject3D(root);
var containerHasReactMarkup = reactRootUserData && internalGetID(reactRootUserData);
// aka first child
var reactRootMarkup = getReactRootMarkupInContainer(container);
var containerHasReactMarkup = reactRootMarkup && internalGetID(reactRootMarkup);
// if (process.env.NODE_ENV !== 'production') {
// if (!containerHasReactMarkup || reactRootUserData.nextSibling) {
// let rootElementSibling = reactRootUserData;
// if (!containerHasReactMarkup || reactRootMarkup.nextSibling) {
// let rootElementSibling = reactRootMarkup;
// while (rootElementSibling) {

@@ -974,6 +1010,7 @@ // if (this.isRenderedByReact(rootElementSibling)) {

if (parentComponent === null) {
// root !
component = this._renderNewRootComponent(nextWrappedElement, root, shouldReuseMarkup, _fbjsLibEmptyObject2['default'])._renderedComponent.getPublicInstance();
// no context
component = this._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, _fbjsLibEmptyObject2['default'])._renderedComponent.getPublicInstance();
} else {
component = this._renderNewRootComponent(nextWrappedElement, root, shouldReuseMarkup, parentComponent._reactInternalInstance._processChildContext(parentComponent._reactInternalInstance._context))._renderedComponent.getPublicInstance();
// yes context
component = this._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, parentComponent._reactInternalInstance._processChildContext(parentComponent._reactInternalInstance._context))._renderedComponent.getPublicInstance();
}

@@ -990,15 +1027,16 @@

value: function dispose() {
this.unmountComponentAtNode(this._root);
var rootIds = _Object$keys(this.containersByReactRootID);
delete this._root.instance;
delete this._root;
for (var i = 0; i < rootIds.length; ++i) {
this.unmountComponentAtNode(this.containersByReactRootID[rootIds[i]]);
}
delete this._instancesByReactRootID;
delete this.object3DsByReactRootID;
delete this.containersByReactRootID;
if (process.env.NODE_ENV !== 'production') {
delete this.rootUserDatasByReactRootID;
delete this.rootMarkupsByReactRootID;
}
delete this.findComponentRootReusableArray;
delete this.userDataCache;
delete this.deepestObject3DSoFar;
delete this.markupCache;
delete this.deepestContainerSoFar;
delete this._highlightElement;

@@ -1011,4 +1049,12 @@ this.nextMountID = 1;

this._devtoolsCallbackCleanup();
delete this._devtoolsCallbackCleanup;
}
if (this._rendererListenerCleanup) {
this._rendererListenerCleanup();
delete this._rendererListenerCleanup;
}
if (this._devToolsRendererDefinition) {

@@ -1047,3 +1093,3 @@ if (this._agent) {

// Record the root element in case it later gets transplanted.
this.rootUserDatasByReactRootID[this.getReactRootID(container)] = getReactRootUserDataInObject3D(container);
this.rootMarkupsByReactRootID[this.getReactRootID(container)] = getReactRootMarkupInContainer(container);
}

@@ -1073,8 +1119,12 @@

delete this._instancesByReactRootID[reactRootID];
delete this.object3DsByReactRootID[reactRootID];
delete this.containersByReactRootID[reactRootID];
if (process.env.NODE_ENV !== 'production') {
delete this.rootUserDatasByReactRootID[reactRootID];
delete this.rootMarkupsByReactRootID[reactRootID];
}
if (container && container.userData && container.userData._createdByReact3) {
delete container.userData;
}
return true;

@@ -1084,3 +1134,3 @@ }

/**
* @param {THREE.Object3D} scene DOM element that may contain a React component.
* @param {THREE.Object3D|HTMLCanvasElement} container THREE Object or HTML Canvas Element that may contain a React component.
* @return {?string} A "reactRoot" ID, if a React component is rendered.

@@ -1090,5 +1140,5 @@ */

key: 'getReactRootID',
value: function getReactRootID(scene) {
var rootElement = getReactRootUserDataInObject3D(scene);
return rootElement && this.getID(rootElement.userData);
value: function getReactRootID(container) {
var rootMarkup = getReactRootMarkupInContainer(container);
return rootMarkup && this.getID(rootMarkup);
}

@@ -1134,3 +1184,3 @@ }, {

console.log('internal component type herp derp');
console.log('internal component type');
} else {

@@ -1185,3 +1235,3 @@ instance = new _React3CompositeComponentWrapper2['default'](this);

* @param nextElement
* @param object3D
* @param {THREE.Object3D | HTMLCanvasElement} container
* @param shouldReuseMarkup

@@ -1194,3 +1244,3 @@ * @param context

key: '_renderNewRootComponent',
value: function _renderNewRootComponent(nextElement, object3D, shouldReuseMarkup, context) {
value: function _renderNewRootComponent(nextElement, container, shouldReuseMarkup, context) {
// Various parts of our code (such as ReactCompositeComponent's

@@ -1204,3 +1254,3 @@ // _renderValidatedComponent) assume that calls to render aren't nested;

var componentInstance = this.instantiateReactComponent(nextElement);
var reactRootID = this._registerComponent(componentInstance, object3D);
var reactRootID = this._registerComponent(componentInstance, container);

@@ -1211,7 +1261,13 @@ // The initial render is synchronous but any updates that happen during

_reactLibReactUpdates2['default'].batchedUpdates(this.batchedMountRootComponent, componentInstance, reactRootID, object3D, shouldReuseMarkup, context);
if (!_reactLibReactUpdates2['default'].ReactReconcileTransaction) {
// If the ReactReconcileTransaction has not been injected let's just use the defaults from ReactMount.
_reactLibReactInjection2['default'].Updates.injectReconcileTransaction(_reactLibReactReconcileTransaction2['default']);
_reactLibReactInjection2['default'].Updates.injectBatchingStrategy(_reactLibReactDefaultBatchingStrategy2['default']);
}
_reactLibReactUpdates2['default'].batchedUpdates(this.batchedMountRootComponent, componentInstance, reactRootID, container, shouldReuseMarkup, context);
if (process.env.NODE_ENV !== 'production') {
// Record the root element in case it later gets transplanted.
this.rootUserDatasByReactRootID[reactRootID] = getReactRootUserDataInObject3D(object3D);
this.rootMarkupsByReactRootID[reactRootID] = getReactRootMarkupInContainer(container);
}

@@ -1223,6 +1279,6 @@

key: '_registerComponent',
value: function _registerComponent(nextComponent, object3D) {
// if (!(object3D && (object3D.nodeType === ELEMENT_NODE_TYPE || object3D.nodeType === DOC_NODE_TYPE || object3D.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE))) {
value: function _registerComponent(nextComponent, container) {
// if (!(container && (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE || container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE))) {
// if (process.env.NODE_ENV !== 'production') {
// invariant(false, '_registerComponent(...): Target object3D is not a DOM element.');
// invariant(false, '_registerComponent(...): Target container is not a DOM element.');
// } else {

@@ -1235,3 +1291,3 @@ // invariant(false);

var reactRootID = this.registerContainer(object3D);
var reactRootID = this.registerContainer(container);
this._instancesByReactRootID[reactRootID] = nextComponent;

@@ -1242,7 +1298,7 @@ return reactRootID;

/**
* Registers a object3D node into which React components will be rendered.
* Registers a container node into which React components will be rendered.
* This also creates the "reactRoot" ID that will be assigned to the element
* rendered within.
*
* @param {THREE.Object3D} object3D DOM element to register as a object3D.
* @param {THREE.Object3D} container DOM element to register as a container.
* @return {string} The "reactRoot" ID of elements rendered within.

@@ -1252,4 +1308,4 @@ */

key: 'registerContainer',
value: function registerContainer(object3D) {
var reactRootID = this.getReactRootID(object3D);
value: function registerContainer(container) {
var reactRootID = this.getReactRootID(container);
if (reactRootID) {

@@ -1263,3 +1319,3 @@ // If one exists, make sure it is a valid "reactRoot" ID.

}
this.object3DsByReactRootID[reactRootID] = object3D;
this.containersByReactRootID[reactRootID] = container;
return reactRootID;

@@ -1274,8 +1330,8 @@ }

key: 'getID',
value: function getID(userData) {
var id = internalGetID(userData);
value: function getID(markup) {
var id = internalGetID(markup);
if (id) {
if (this.userDataCache.hasOwnProperty(id)) {
var cached = this.userDataCache[id];
if (cached !== userData) {
var cached = this.markupCache[id];
if (!!cached) {
if (cached !== markup) {
if (!!this.isValid(cached, id)) {

@@ -1289,6 +1345,6 @@ if (process.env.NODE_ENV !== 'production') {

this.userDataCache[id] = userData;
this.markupCache[id] = markup;
}
} else {
this.userDataCache[id] = userData;
this.markupCache[id] = markup;
}

@@ -1295,0 +1351,0 @@ }

2

package.json
{
"name": "react-three-renderer",
"version": "0.0.8-alpha",
"version": "0.0.9-alpha",
"description": "Render into a three.js canvas using React.",

@@ -5,0 +5,0 @@ "main": "./lib/React3.js",

6

src/descriptors/Geometry/GeometryDescriptorBase.js

@@ -53,3 +53,3 @@ import THREE from 'three.js';

unmount(geometry) {
const parent = geometry.userData.parentMarkup.threeObject;
const parent = geometry.userData.markup.parentMarkup.threeObject;

@@ -69,3 +69,3 @@ // could either be a resource description or an actual geometry

highlight(threeObject) {
const ownerMesh = threeObject.userData.parentMarkup.threeObject;
const ownerMesh = threeObject.userData.markup.parentMarkup.threeObject;
threeObject.userData.events.emit('highlight', {

@@ -84,3 +84,3 @@ uuid: threeObject.uuid,

getBoundingBoxes(threeObject) {
const ownerMesh = threeObject.userData.parentMarkup.threeObject;
const ownerMesh = threeObject.userData.markup.parentMarkup.threeObject;

@@ -87,0 +87,0 @@ const boundingBox = new THREE.Box3();

4

src/descriptors/Geometry/Shapes/PathDescriptorBase.js

@@ -79,3 +79,3 @@ import THREE from 'three.js';

highlight(threeObject) {
const parentObject = threeObject.userData.parentMarkup.threeObject;
const parentObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -86,3 +86,3 @@ parentObject.userData._descriptor.highlight(parentObject);

getBoundingBoxes(threeObject) {
const parentObject = threeObject.userData.parentMarkup.threeObject;
const parentObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -89,0 +89,0 @@ return parentObject.userData._descriptor.getBoundingBoxes(parentObject);

4

src/descriptors/Geometry/Shapes/ShapeActionDescriptorBase.js

@@ -19,3 +19,3 @@ import THREE from 'three.js';

highlight(threeObject) {
const parentObject = threeObject.userData.parentMarkup.threeObject;
const parentObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -26,3 +26,3 @@ parentObject.userData._descriptor.highlight(parentObject);

getBoundingBoxes(threeObject) {
const parentObject = threeObject.userData.parentMarkup.threeObject;
const parentObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -29,0 +29,0 @@ return parentObject.userData._descriptor.getBoundingBoxes(parentObject);

6

src/descriptors/Material/MaterialDescriptorBase.js

@@ -140,3 +140,3 @@ import THREE from 'three.js';

unmount(material) {
const parent = material.userData.parentMarkup.threeObject;
const parent = material.userData.markup.parentMarkup.threeObject;

@@ -160,3 +160,3 @@ // could either be a resource description or an actual material

highlight(threeObject) {
const ownerMesh = threeObject.userData.parentMarkup.threeObject;
const ownerMesh = threeObject.userData.markup.parentMarkup.threeObject;
threeObject.userData.events.emit('highlight', {

@@ -177,3 +177,3 @@ uuid: threeObject.uuid,

boundingBox.setFromObject(threeObject.userData.parentMarkup.threeObject);
boundingBox.setFromObject(threeObject.userData.markup.parentMarkup.threeObject);

@@ -180,0 +180,0 @@ return [boundingBox];

6

src/descriptors/Material/TextureDescriptor.js

@@ -108,3 +108,3 @@ import THREE from 'three.js';

unmount(texture) {
const parent = texture.userData.parentMarkup.threeObject;
const parent = texture.userData.markup.parentMarkup.threeObject;

@@ -130,3 +130,3 @@ // could either be a resource description or an actual texture

highlight(threeObject) {
const parent = threeObject.userData.parentMarkup.threeObject;
const parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.highlight(parent);

@@ -136,3 +136,3 @@ }

hideHighlight(threeObject) {
const parent = threeObject.userData.parentMarkup.threeObject;
const parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.hideHighlight(parent);

@@ -139,0 +139,0 @@ }

6

src/descriptors/Material/UniformDescriptor.js

@@ -103,3 +103,3 @@ import THREE from 'three.js';

highlight(threeObject) {
const parent = threeObject.userData.parentMarkup.threeObject;
const parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.highlight(parent);

@@ -109,3 +109,3 @@ }

getBoundingBoxes(threeObject) {
const parent = threeObject.userData.parentMarkup.threeObject;
const parent = threeObject.userData.markup.parentMarkup.threeObject;
return parent.userData._descriptor.getBoundingBoxes(parent);

@@ -115,3 +115,3 @@ }

hideHighlight(threeObject) {
const parent = threeObject.userData.parentMarkup.threeObject;
const parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.hideHighlight(parent);

@@ -118,0 +118,0 @@ }

6

src/descriptors/Material/UniformsDescriptor.js

@@ -35,3 +35,3 @@ import THREE from 'three.js';

highlight(threeObject) {
const parent = threeObject.userData.parentMarkup.threeObject;
const parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.highlight(parent);

@@ -41,3 +41,3 @@ }

getBoundingBoxes(threeObject) {
const parent = threeObject.userData.parentMarkup.threeObject;
const parent = threeObject.userData.markup.parentMarkup.threeObject;
return parent.userData._descriptor.getBoundingBoxes(parent);

@@ -47,3 +47,3 @@ }

hideHighlight(threeObject) {
const parent = threeObject.userData.parentMarkup.threeObject;
const parent = threeObject.userData.markup.parentMarkup.threeObject;
parent.userData._descriptor.hideHighlight(parent);

@@ -50,0 +50,0 @@ }

2

src/descriptors/Object/Camera/CameraDescriptorBase.js
import Object3DDescriptor from '../Object3DDescriptor';
import THREE from 'three.js';
import getRoot from '../../../getRoot';
class CameraDescriptorBase extends Object3DDescriptor {

@@ -7,0 +5,0 @@ applyInitialProps(threeObject, props) {

14

src/descriptors/Resource/ResourceDescriptorBase.js

@@ -38,3 +38,3 @@ import THREEElementDescriptor from '../THREEElementDescriptor';

_addedIntoRoot = (threeObject) => {
let currentParentMarkup = threeObject.userData.parentMarkup;
let currentParentMarkup = threeObject.userData.markup.parentMarkup;

@@ -44,3 +44,3 @@ let distance = 0;

while (currentParentMarkup) {
const parentResources = currentParentMarkup.userData._resources;
const parentResources = currentParentMarkup.threeObject.userData._resources;

@@ -61,3 +61,3 @@ if (parentResources) {

distance++;
currentParentMarkup = currentParentMarkup.userData.parentMarkup;
currentParentMarkup = currentParentMarkup.threeObject.userData.markup.parentMarkup;
}

@@ -102,3 +102,3 @@

const parentEvents = currentParentMarkup.userData.events;
const parentEvents = currentParentMarkup.threeObject.userData.events;
parentEvents.on('resource.added', onResourceAdded);

@@ -175,3 +175,3 @@ parentEvents.on('resource.removed', onResourceRemoved);

resourceUpdated(threeObject, newResource, oldResource) {
const parentObject = threeObject.userData.parentMarkup && threeObject.userData.parentMarkup.threeObject || undefined;
const parentObject = threeObject.userData.markup.parentMarkup && threeObject.userData.markup.parentMarkup.threeObject || undefined;

@@ -210,3 +210,3 @@ if (parentObject) {

highlight(threeObject) {
const ownerObject = threeObject.userData.parentMarkup.threeObject;
const ownerObject = threeObject.userData.markup.parentMarkup.threeObject;
ownerObject.userData._descriptor.highlight(ownerObject);

@@ -216,3 +216,3 @@ }

hideHighlight(threeObject) {
const ownerObject = threeObject.userData.parentMarkup.threeObject;
const ownerObject = threeObject.userData.markup.parentMarkup.threeObject;
ownerObject.userData._descriptor.hideHighlight(ownerObject);

@@ -219,0 +219,0 @@ }

14

src/descriptors/Resource/ResourcesDescriptor.js

@@ -13,4 +13,4 @@ import THREE from 'three.js';

unmount(threeObject) {
const parentMarkup = threeObject.userData.parentMarkup;
const parentEvents = parentMarkup.userData.events;
const parentMarkup = threeObject.userData.markup.parentMarkup;
const parentEvents = parentMarkup.threeObject.userData.events;

@@ -38,5 +38,5 @@ threeObject.resourceIds.forEach(id => {

const parentMarkup = threeObject.userData.parentMarkup;
const parentMarkup = threeObject.userData.markup.parentMarkup;
if (parentMarkup) {
parentMarkup.userData.events.emit('resource.added', {
parentMarkup.threeObject.userData.events.emit('resource.added', {
id: resourceId,

@@ -59,5 +59,5 @@ distance: 0,

const parentMarkup = threeObject.userData.parentMarkup;
const parentMarkup = threeObject.userData.markup.parentMarkup;
if (parentMarkup) {
parentMarkup.userData.events.emit('resource.removed', {
parentMarkup.threeObject.userData.events.emit('resource.removed', {
id: resourceId,

@@ -87,3 +87,3 @@ distance: 0,

highlight(threeObject) {
const ownerObject = threeObject.userData.parentMarkup.threeObject;
const ownerObject = threeObject.userData.markup.parentMarkup.threeObject;

@@ -90,0 +90,0 @@ if (!(ownerObject.updateMatrixWorld && ownerObject.traverse)) {

8

src/descriptors/THREEElementDescriptor.js

@@ -175,3 +175,3 @@ import invariant from 'fbjs/lib/invariant';

eventsForObject.on('resource.added', (data) => {
const childrenMarkup = threeObject.userData.childrenMarkup;
const childrenMarkup = threeObject.userData.markup.childrenMarkup;

@@ -183,7 +183,7 @@ const increasedDistance = {

childrenMarkup.forEach(childMarkup => childMarkup.userData.events.emit('resource.added', increasedDistance));
childrenMarkup.forEach(childMarkup => childMarkup.threeObject.userData.events.emit('resource.added', increasedDistance));
});
eventsForObject.on('resource.removed', (data) => {
const childrenMarkup = threeObject.userData.childrenMarkup;
const childrenMarkup = threeObject.userData.markup.childrenMarkup;

@@ -195,3 +195,3 @@ const increasedDistance = {

childrenMarkup.forEach(childMarkup => childMarkup.userData.events.emit('resource.removed', increasedDistance));
childrenMarkup.forEach(childMarkup => childMarkup.threeObject.userData.events.emit('resource.removed', increasedDistance));
});

@@ -198,0 +198,0 @@

61

src/InternalComponent.js

@@ -130,15 +130,8 @@ import ReactReconciler from 'react/lib/ReactReconciler';

const markup = {
userData: {
...this._threeObject.userData,
[ID_ATTR_NAME]: rootID,
childrenMarkup: mountImages,
object3D: this._threeObject,
react3internalComponent: this, // used for highlighting etc
toJSON: () => {
return '---USERDATA---';
},
},
[ID_ATTR_NAME]: rootID,
_rootInstance: null,
elementType: element.type,
threeObject: this._threeObject,
parentMarkup: null,
childrenMarkup: mountImages,
toJSON: () => {

@@ -149,5 +142,17 @@ return '---MARKUP---';

markup.userData.markup = markup;
this._threeObject.userData = markup.userData;
if (process.env.NODE_ENV !== 'production') {
invariant(!!this._threeObject.userData, 'No userdata present in threeobject for %s', element.type);
} else {
invariant(!!this._threeObject.userData);
}
Object.assign(this._threeObject.userData, {
object3D: this._threeObject,
react3internalComponent: this, // used for highlighting etc
toJSON: () => {
return '---USERDATA---';
},
markup,
});
const threeElementDescriptors = this._react3RendererInstance.threeElementDescriptors;

@@ -163,3 +168,3 @@

mountImage.userData.parentMarkup = markup;
mountImage.parentMarkup = markup;

@@ -178,2 +183,4 @@ descriptorForChild.setParent(mountImage.threeObject, this._threeObject);

if (this._currentElement) {
const previousCurrent = ReactCurrentOwner.current;
try {

@@ -185,3 +192,3 @@ ReactCurrentOwner.current = this._currentElement._owner;

} finally {
ReactCurrentOwner.current = null;
ReactCurrentOwner.current = previousCurrent;
}

@@ -199,2 +206,4 @@ }

if (this._currentElement) {
const previousCurrent = ReactCurrentOwner.current;
try {

@@ -204,3 +213,3 @@ ReactCurrentOwner.current = this._currentElement._owner;

} finally {
ReactCurrentOwner.current = null;
ReactCurrentOwner.current = previousCurrent;
}

@@ -254,3 +263,3 @@

_arrayMove(markup.userData.childrenMarkup, lastIndex, toIndex);
_arrayMove(markup.childrenMarkup, lastIndex, toIndex);
}

@@ -375,3 +384,3 @@

this.threeElementDescriptor.unmount(this._threeObject);
delete this._threeObject.userData.markup;
// delete this._threeObject.userData.markup;
}

@@ -395,11 +404,11 @@

getPublicInstance() {
const node = this._react3RendererInstance.getUserData(this._rootNodeID);
const markup = this._react3RendererInstance.getMarkup(this._rootNodeID);
if (node.object3D) {
node.object3D.toJSON = this.emptyJson;
return node.object3D;
if (markup.threeObject) {
markup.threeObject.toJSON = this.emptyJson;
return markup.threeObject;
}
if (process.env.NODE_ENV !== 'production') {
invariant(false, 'Node has no object3d?');
invariant(false, 'Node has no threeObject?');
} else {

@@ -504,4 +513,4 @@ invariant(false);

this._markup.userData.childrenMarkup.splice(mountIndex, 0, mountImage);
mountImage.userData.parentMarkup = this._markup;
this._markup.childrenMarkup.splice(mountIndex, 0, mountImage);
mountImage.parentMarkup = this._markup;

@@ -536,3 +545,3 @@ this.threeElementDescriptor.addChild(this._threeObject, mountImage.threeObject, mountIndex);

const childrenMarkup = this._markup.userData.childrenMarkup;
const childrenMarkup = this._markup.childrenMarkup;

@@ -545,3 +554,3 @@ for (let i = 0; i < childrenMarkup.length; i++) {

delete child._threeObject.userData.parentMarkup;
delete childMarkup.parentMarkup;
return;

@@ -548,0 +557,0 @@ }

2

src/React3.js

@@ -96,3 +96,3 @@ import React from 'react';

{this.props.children}
</react3>);
</react3>, canvas);
}

@@ -99,0 +99,0 @@

5

src/React3CompositeComponentWrapper.js

@@ -77,8 +77,11 @@ import ReactCompositeComponent from 'react/lib/ReactCompositeComponent';

if (process.env.NODE_ENV !== 'production') {
const previousCurrent = ReactCurrentOwner.current;
// noinspection JSValidateTypes
ReactCurrentOwner.current = this;
try {
inst = new Component(publicProps, publicContext, ReactUpdateQueue);
} finally {
ReactCurrentOwner.current = null;
ReactCurrentOwner.current = previousCurrent;
}

@@ -85,0 +88,0 @@ } else {

2

src/React3Instance.js

@@ -649,3 +649,3 @@ import THREE from 'three.js';

const childrenMarkup = current.userData.childrenMarkup;
const childrenMarkup = current.userData.markup.childrenMarkup;

@@ -652,0 +652,0 @@ if (object instanceof THREE.Material) {

429

src/React3Renderer.js

@@ -12,2 +12,6 @@ import DOMProperty from 'react/lib/DOMProperty';

import ReactComponent from 'react/lib/ReactComponent';
import ReactInjection from 'react/lib/ReactInjection';
import ReactReconcileTransaction from 'react/lib/ReactReconcileTransaction';
import ReactDefaultBatchingStrategy from 'react/lib/ReactDefaultBatchingStrategy';
import emptyObject from 'fbjs/lib/emptyObject';

@@ -85,8 +89,8 @@ import invariant from 'fbjs/lib/invariant';

function internalGetID(userData) {
return userData && userData[ID_ATTR_NAME] || '';
// If userData is something like a window, document, or text userData, none of
function internalGetID(markup) {
return markup && markup[ID_ATTR_NAME] || '';
// If markup is something like a window, document, or text markup, none of
// which support attributes or a .getAttribute method, gracefully return
// the empty string, as if the attribute were missing.
// return userData && userData.getAttribute && userData.getAttribute(ID_ATTR_NAME) || '';
// return markup && markup.getAttribute && markup.getAttribute(ID_ATTR_NAME) || '';
}

@@ -96,12 +100,12 @@

/**
* @param {THREE.Object3D} threeObject Object3D that may contain
* @param {THREE.Object3D|HTMLCanvasElement} container That may contain
* a React component
* @return {?*} Userdata that may have the reactRoot ID, or null.
* @return {?*} The markup that may have the reactRoot ID, or null.
*/
function getReactRootUserDataInObject3D(threeObject) {
if (!threeObject) {
function getReactRootMarkupInContainer(container) {
if (!container) {
return null;
}
return threeObject.userData && threeObject.userData.childrenMarkup && threeObject.userData.childrenMarkup[0] || null;
return container.userData && container.userData.markup && container.userData.markup.childrenMarkup[0] || null;
}

@@ -154,3 +158,3 @@

return instance._react3RendererInstance.getUserDataFromInstance(componentOrElement).object3D;
return instance._react3RendererInstance.getMarkupFromInstance(componentOrElement).threeObject;
}

@@ -239,3 +243,3 @@

getUserDataFromInstance(instance) {
getMarkupFromInstance(instance) {
const id = ReactInstanceMap.get(instance)._rootNodeID;

@@ -247,7 +251,7 @@

if (!this.userDataCache.hasOwnProperty(id) || !this.isValid(this.userDataCache[id], id)) {
this.userDataCache[id] = this.findReactNodeByID(id);
if (!this.markupCache.hasOwnProperty(id) || !this.isValid(this.markupCache[id], id)) {
this.markupCache[id] = this.findMarkupByID(id);
}
return this.userDataCache[id];
return this.markupCache[id];
}

@@ -261,9 +265,9 @@

this._instancesByReactRootID = {};
this.object3DsByReactRootID = {};
this.containersByReactRootID = {};
if (process.env.NODE_ENV !== 'production') {
this.rootUserDatasByReactRootID = {};
this.rootMarkupsByReactRootID = {};
}
this.findComponentRootReusableArray = [];
this.userDataCache = {};
this.deepestObject3DSoFar = null;
this.markupCache = {};
this.deepestContainerSoFar = null;
this.nextMountID = 1;

@@ -274,4 +278,2 @@ this.nextReactRootIndex = 0;

this._root = {};
this._highlightElement = document.createElement('div');

@@ -284,4 +286,4 @@ this._highlightCache = null;

this._onHideHighlightFromInspector = () => {
if (this._highlightCache && this._highlightCache.react3internalComponent) {
const internalComponent = this._highlightCache.react3internalComponent;
if (this._highlightCache && this._highlightCache.threeObject.userData.react3internalComponent) {
const internalComponent = this._highlightCache.threeObject.userData.react3internalComponent;

@@ -296,4 +298,4 @@ internalComponent.hideHighlight();

if (highlightInfo.node === this._highlightElement) {
if (this._highlightCache && this._highlightCache.react3internalComponent) {
const internalComponent = this._highlightCache.react3internalComponent;
if (this._highlightCache && this._highlightCache.threeObject.userData.react3internalComponent) {
const internalComponent = this._highlightCache.threeObject.userData.react3internalComponent;

@@ -339,5 +341,8 @@ internalComponent.highlightComponent();

this._reactDevtoolsRendererId = info.id;
this._rendererListenerCleanup();
delete this._rendererListenerCleanup;
};
__REACT_DEVTOOLS_GLOBAL_HOOK__.sub('renderer', rendererListener);
this._rendererListenerCleanup = __REACT_DEVTOOLS_GLOBAL_HOOK__.sub('renderer', rendererListener);
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject(this._devToolsRendererDefinition);

@@ -362,5 +367,5 @@

findDeepestCachedAncestorImpl = (ancestorID) => {
const ancestorUserData = this.userDataCache[ancestorID];
if (ancestorUserData && this.isValid(ancestorUserData, ancestorID)) {
this.deepestObject3DSoFar = ancestorUserData.object3D;
const ancestorMarkup = this.markupCache[ancestorID];
if (ancestorMarkup && this.isValid(ancestorMarkup, ancestorID)) {
this.deepestContainerSoFar = ancestorMarkup.threeObject;
} else {

@@ -377,9 +382,9 @@ // This node isn't populated in the cache, so presumably none of its

findDeepestCachedAncestor(targetID) {
this.deepestObject3DSoFar = null;
this.deepestContainerSoFar = null;
ReactInstanceHandles.traverseAncestors(targetID, this.findDeepestCachedAncestorImpl);
const foundUserData = this.deepestObject3DSoFar;
this.deepestObject3DSoFar = null;
return foundUserData;
const foundAncestor = this.deepestContainerSoFar;
this.deepestContainerSoFar = null;
return foundAncestor;
}

@@ -410,6 +415,6 @@

containsChild(container, userData) {
const childrenMarkup = container.userData.childrenMarkup;
containsChild(container, markup) {
const childrenMarkup = container.userData.markup.childrenMarkup;
for (let i = 0; i < childrenMarkup.length; i++) {
if (childrenMarkup[i].userData === userData) {
if (childrenMarkup[i] === markup) {
return true;

@@ -422,5 +427,5 @@ }

isValid(userData, id) {
if (userData) {
if (internalGetID(userData) !== id) {
isValid(markup, id) {
if (markup) {
if (internalGetID(markup) !== id) {
if (process.env.NODE_ENV !== 'production') {

@@ -433,9 +438,9 @@ invariant(false, 'React3Renderer: Unexpected modification of `%s`', ID_ATTR_NAME);

const container = this.findReactContainerForID(id);
const container = this.findContainerForID(id);
// if (container && container.userData === userData) {
// if (container && container.markup === markup) {
// return true;
// }
if (container && this.containsChild(container, userData)) {
if (container && this.containsChild(container, markup)) {
return true;

@@ -450,3 +455,3 @@ }

/**
* Finds the object3D DOM element that contains React component to which the
* Finds the container that contains React component to which the
* supplied DOM `id` belongs.

@@ -457,27 +462,29 @@ *

*/
findReactContainerForID(id) {
findContainerForID(id) {
const reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(id);
const object3D = this.object3DsByReactRootID[reactRootID];
const container = this.containersByReactRootID[reactRootID];
if (process.env.NODE_ENV !== 'production') {
const rootElement = this.rootUserDatasByReactRootID[reactRootID];
if (rootElement && rootElement.userData.parentMarkup.threeObject !== object3D) {
if (process.env.NODE_ENV !== 'production') {
warning(
// Call internalGetID here because getID calls isValid which calls
// findReactContainerForID (this function).
internalGetID(rootElement) === reactRootID, 'React3Renderer: Root element ID differed from reactRootID.');
}
const containerChild = object3D.userData.childrenMarkup[0];// firstChild;
if (containerChild && reactRootID === internalGetID(containerChild)) {
// If the object3D has a new child with the same ID as the old
// root element, then rootUserDatasByReactRootID[reactRootID] is
// just stale and needs to be updated. The case that deserves a
// warning is when the object3D is empty.
this.rootUserDatasByReactRootID[reactRootID] = containerChild;
} else {
const rootMarkup = this.rootMarkupsByReactRootID[reactRootID];
if (rootMarkup) {
if ((!rootMarkup.parentMarkup) || rootMarkup.parentMarkup.threeObject !== container) {
if (process.env.NODE_ENV !== 'production') {
warning(false, 'React3Renderer: Root element has been removed from its original ' + 'object3D. New object3D: %s', rootElement.parentNode);
warning(
// Call internalGetID here because getID calls isValid which calls
// findThreeObjectForID (this function).
internalGetID(rootMarkup) === reactRootID, 'React3Renderer: Root element ID differed from reactRootID.');
}
const containerChildMarkup = container.userData && container.userData.markup && container.userData.markup.childrenMarkup[0];// firstChild;
if (containerChildMarkup && reactRootID === internalGetID(containerChildMarkup)) {
// If the container has a new child with the same ID as the old
// root element, then rootUserDatasByReactRootID[reactRootID] is
// just stale and needs to be updated. The case that deserves a
// warning is when the container is empty.
this.rootMarkupsByReactRootID[reactRootID] = containerChildMarkup;
} else {
if (process.env.NODE_ENV !== 'production') {
warning(false, 'React3Renderer: Root element has been removed from its original ' + 'container. New container: %s', rootMarkup.parentNode);
}
}
}

@@ -487,16 +494,18 @@ }

return object3D;
return container;
}
getUserData(id) {
if (!this.userDataCache.hasOwnProperty(id) || !this.isValid(this.userDataCache[id], id)) {
this.userDataCache[id] = this.findReactNodeByID(id);
getMarkup(id) {
if (!this.markupCache.hasOwnProperty(id) || !this.isValid(this.markupCache[id], id)) {
this.markupCache[id] = this.findMarkupByID(id);
}
return this.userDataCache[id];
return this.markupCache[id];
}
// DO NOT RENAME
// used by react devtools!
findNodeHandle = (instance) => {
const userData = this.getUserData(instance._rootNodeID);
const markup = this.getMarkup(instance._rootNodeID);
this._highlightCache = userData;
this._highlightCache = markup;
return this._highlightElement;

@@ -518,22 +527,22 @@ };

*/
findReactNodeByID(id) {
const reactRoot = this.findReactContainerForID(id);
return this.findComponentRoot(reactRoot, id);
findMarkupByID(id) {
const container = this.findContainerForID(id);
return this.findComponentRoot(container, id);
}
findComponentRoot(ancestorNode, targetID) {
const firstUserDataList = this.findComponentRootReusableArray;
findComponentRoot(ancestorContainer, targetID) {
const firstMarkupList = this.findComponentRootReusableArray;
let childIndex = 0;
const deepestAncestor = this.findDeepestCachedAncestor(targetID) || ancestorNode;
const deepestAncestorContainer = this.findDeepestCachedAncestor(targetID) || ancestorContainer;
firstUserDataList[0] = deepestAncestor.userData.childrenMarkup[0].userData;
firstUserDataList.length = 1;
firstMarkupList[0] = deepestAncestorContainer.userData.markup.childrenMarkup[0];
firstMarkupList.length = 1;
while (childIndex < firstUserDataList.length) {
let child = firstUserDataList[childIndex++];
let targetChild;
while (childIndex < firstMarkupList.length) {
let childMarkup = firstMarkupList[childIndex++];
let targetChildMarkup;
while (child) {
const childID = this.getID(child);
while (childMarkup) {
const childID = this.getID(childMarkup);
if (childID) {

@@ -546,3 +555,3 @@ // Even if we find the node we're looking for, we finish looping

if (targetID === childID) {
targetChild = child;
targetChildMarkup = childMarkup;
} else if (ReactInstanceHandles.isAncestorIDOf(childID, targetID)) {

@@ -553,7 +562,8 @@ // If we find a child whose ID is an ancestor of the given ID,

// search state.
firstUserDataList.length = childIndex = 0;
firstUserDataList.push(child.childrenMarkup[0].userData);
firstMarkupList.length = childIndex = 0;
firstMarkupList.push(childMarkup.childrenMarkup[0]);
}
} else {
debugger;
invariant(false);
// debugger;
// If this child had no ID, then there's a chance that it was

@@ -564,16 +574,22 @@ // injected automatically by the browser, as when a `<table>`

// branch, but not before examining the other siblings.
firstUserDataList.push(child.childrenMarkup[0].userData);
firstMarkupList.push(childMarkup.childrenMarkup[0]);
}
const ownerChildren = child.parentMarkup.userData.childrenMarkup;
// if childMarkup doesn't exist it may have been unmounted
const childParentMarkup = childMarkup && childMarkup.parentMarkup;
// if parentMarkup doesn't exist it could be a root (or unmounted)
const ownerChildrenMarkups = childParentMarkup && childParentMarkup.childrenMarkup;
child = null;
childMarkup = null;
// child = child.nextSibling;
for (let i = 0; i < ownerChildren.length - 1; i++) {
const ownerChildId = this.getID(ownerChildren[i].userData);
if (ownerChildrenMarkups) {
// child = child.nextSibling;
for (let i = 0; i < ownerChildrenMarkups.length - 1; i++) {
const ownerChildId = this.getID(ownerChildrenMarkups[i]);
if (ownerChildId === childID) {
child = ownerChildren[i + 1].userData;
break;
if (ownerChildId === childID) {
// if the owner's child's id is the same as my id, then the next sibling markup is:
childMarkup = ownerChildrenMarkups[i + 1];
break;
}
}

@@ -583,16 +599,22 @@ }

if (targetChild) {
// Emptying firstUserDataList/findComponentRootReusableArray is
if (targetChildMarkup) {
// Emptying firstMarkupList/findComponentRootReusableArray is
// not necessary for correctness, but it helps the GC reclaim
// any nodes that were left at the end of the search.
firstUserDataList.length = 0;
firstMarkupList.length = 0;
return targetChild;
return targetChildMarkup;
}
}
firstUserDataList.length = 0;
firstMarkupList.length = 0;
if (process.env.NODE_ENV !== 'production') {
invariant(false, 'findComponentRoot(..., %s): Unable to find element. This probably ' + 'means the DOM was unexpectedly mutated (e.g., by the browser), ' + 'usually due to forgetting a <tbody> when using tables, nesting tags ' + 'like <form>, <p>, or <a>, or using non-SVG elements in an <svg> ' + 'parent. ' + 'Try inspecting the child nodes of the element with React ID `%s`.', targetID, this.getID(ancestorNode));
invariant(false, 'findComponentRoot(..., %s): Unable to find element. This probably ' +
'means the DOM was unexpectedly mutated (e.g., by the browser), ' +
'usually due to forgetting a <tbody> when using tables, nesting tags ' +
'like <form>, <p>, or <a>, or using non-SVG elements in an <svg> ' +
'parent. ' +
'Try inspecting the child nodes of the element with React ID `%s`.', targetID,
this.getID(ancestorContainer.userData.markup));
} else {

@@ -609,3 +631,3 @@ invariant(false);

* @param {string} rootID DOM ID of the root node.
* @param {THREE.Object3D} container DOM element to mount into.
* @param {THREE.Object3D|HTMLCanvasElement} container DOM element to mount into.
* @param {ReactReconcileTransaction} transaction

@@ -629,3 +651,3 @@ * @param {boolean} shouldReuseMarkup If true, do not insert markup

_mountRootImage(markup, container) {
_mountRootImage(rootImage, container) {
// if (!(container && (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE || container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE))) {

@@ -641,4 +663,4 @@ // if (process.env.NODE_ENV !== 'production') {

// if (shouldReuseMarkup) {
// const rootElement = getReactRootUserDataInObject3D(container);
// if (ReactMarkupChecksum.canReuseMarkup(markup, rootElement)) {
// const rootElement = getReactRootMarkupInContainer(container);
// if (ReactMarkupChecksum.canReuseMarkup(rootImage, rootElement)) {
// return;

@@ -653,4 +675,4 @@ // }

//
// const diffIndex = firstDifferenceIndex(markup, rootMarkup);
// const difference = ' (client) ' + markup.substring(diffIndex - 20, diffIndex + 20) + '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
// const diffIndex = firstDifferenceIndex(rootImage, rootMarkup);
// const difference = ' (client) ' + rootImage.substring(diffIndex - 20, diffIndex + 20) + '\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
//

@@ -660,3 +682,3 @@ // !(container.nodeType !== DOC_NODE_TYPE) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'You\'re trying to render a component to the document using ' + 'server rendering but the checksum was invalid. This usually ' + 'means you rendered a different component type or props on ' + 'the client from the one on the server, or your render() ' + 'methods are impure. React cannot handle this case due to ' + 'cross-browser quirks by rendering at the document root. You ' + 'should look for environment dependent code in your components ' + 'and ensure the props are the same client and server side:\n%s', difference) : invariant(false) : undefined;

// if (process.env.NODE_ENV !== 'production') {
// process.env.NODE_ENV !== 'production' ? warning(false, 'React attempted to reuse markup in a container but the ' + 'checksum was invalid. This generally means that you are ' + 'using server rendering and the markup generated on the ' + 'server was not what the client was expecting. React injected ' + 'new markup to compensate which works but you have lost many ' + 'of the benefits of server rendering. Instead, figure out ' + 'why the markup being generated is different on the client ' + 'or server:\n%s', difference) : undefined;
// process.env.NODE_ENV !== 'production' ? warning(false, 'React attempted to reuse rootImage in a container but the ' + 'checksum was invalid. This generally means that you are ' + 'using server rendering and the rootImage generated on the ' + 'server was not what the client was expecting. React injected ' + 'new rootImage to compensate which works but you have lost many ' + 'of the benefits of server rendering. Instead, figure out ' + 'why the rootImage being generated is different on the client ' + 'or server:\n%s', difference) : undefined;
// }

@@ -673,15 +695,16 @@ // }

// console.log('setting inner html!?', markup);
// console.log('setting inner html!?', rootImage);
if (!container.userData) {
// it has to be a HTMLCanvasElement I guess?
invariant(container instanceof HTMLCanvasElement, 'The root container can only be a THREE.js object (with an userData property) or HTMLCanvasElement.');
container.userData = {
_createdByReact3: true,
};
}
const rootMarkup = {
userData: {
...container.userData,
childrenMarkup: [markup],
parentMarkup: null,
object3D: container,
toJSON: () => {
return '---USERDATA---';
},
},
threeObject: container,
parentMarkup: null,
childrenMarkup: [rootImage],
toJSON: () => {

@@ -692,11 +715,15 @@ return '---MARKUP---';

rootMarkup.userData.markup = rootMarkup;
Object.assign(container.userData, {
object3D: container,
toJSON: () => {
return '---USERDATA---';
},
markup: rootMarkup,
});
container.userData = rootMarkup.userData;
rootImage.parentMarkup = rootMarkup;
markup.userData.parentMarkup = rootMarkup;
// all objects now added can be marked as added to scene now!
const instance:React3DInstance = markup.threeObject;
const instance:React3DInstance = rootImage.threeObject;

@@ -706,4 +733,2 @@ invariant(instance instanceof React3DInstance, 'Invalid root component type found');

instance.mountedIntoRoot();
container.instance = instance;
}

@@ -716,3 +741,3 @@

* @param {string} rootID DOM ID of the root node.
* @param {THREE.Object3D} container DOM element to mount into.
* @param {THREE.Object3D|HTMLCanvasElement} container THREE Object or HTMLCanvasElement to mount into.
* @param {boolean} shouldReuseMarkup If true, do not insert markup

@@ -728,17 +753,28 @@ * @param {any} context

render(nextElement, callback) {
return this._renderSubtree(null, nextElement, callback);
/**
*
* @param nextElement A react element
* @param container A canvas or a THREE.js object
* @param callback The callback function
* @returns {*}
*/
render(nextElement, container, callback) {
return this._renderSubtreeIntoContainer(null, nextElement, container, callback);
}
_renderSubtree(parentComponent, nextElement, callback) {
const root = this._root;
_renderSubtreeIntoContainer(parentComponent, nextElement, container, callback) {
if (!ReactElement.isValidElement(nextElement)) {
if (process.env.NODE_ENV !== 'production') {
if (typeof nextElement === 'string') {
invariant(false, 'React.render(): Invalid component element.%s', ' Instead of passing an element string, make sure to instantiate ' + 'it by passing it to React.createElement.');
invariant(false, 'React.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, 'React.render(): Invalid component element.%s', ' Instead of passing a component class, make sure to instantiate ' + 'it by passing it to React.createElement.');
invariant(false, 'React.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, 'React.render(): Invalid component element.%s', ' This may be caused by unintentionally loading two independent ' + 'copies of React.');
invariant(false, 'React.render(): Invalid component element.%s',
' This may be caused by unintentionally loading two independent ' +
'copies of React.');
} else {

@@ -754,3 +790,3 @@ invariant(false, 'React.render(): Invalid component element.%s', '');

const prevComponent = this._instancesByReactRootID[this.getReactRootID(root)];
const prevComponent = this._instancesByReactRootID[this.getReactRootID(container)];

@@ -761,14 +797,15 @@ if (prevComponent) {

if (shouldUpdateReactComponent(prevElement, nextElement)) {
return this._updateRootComponent(prevComponent, nextWrappedElement, root, callback)._renderedComponent.getPublicInstance();
return this._updateRootComponent(prevComponent, nextWrappedElement, container, callback)._renderedComponent.getPublicInstance();
}
this.unmountComponentAtNode(root);
this.unmountComponentAtNode(container);
}
const reactRootUserData = getReactRootUserDataInObject3D(root);
const containerHasReactMarkup = reactRootUserData && internalGetID(reactRootUserData);
// aka first child
const reactRootMarkup = getReactRootMarkupInContainer(container);
const containerHasReactMarkup = reactRootMarkup && internalGetID(reactRootMarkup);
// if (process.env.NODE_ENV !== 'production') {
// if (!containerHasReactMarkup || reactRootUserData.nextSibling) {
// let rootElementSibling = reactRootUserData;
// if (!containerHasReactMarkup || reactRootMarkup.nextSibling) {
// let rootElementSibling = reactRootMarkup;
// while (rootElementSibling) {

@@ -791,6 +828,11 @@ // if (this.isRenderedByReact(rootElementSibling)) {

if (parentComponent === null) {
// root !
component = this._renderNewRootComponent(nextWrappedElement, root, shouldReuseMarkup, emptyObject)._renderedComponent.getPublicInstance();
// no context
component = this._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup,
emptyObject
)._renderedComponent.getPublicInstance();
} else {
component = this._renderNewRootComponent(nextWrappedElement, root, shouldReuseMarkup, parentComponent._reactInternalInstance._processChildContext(parentComponent._reactInternalInstance._context))._renderedComponent.getPublicInstance();
// yes context
component = this._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup,
parentComponent._reactInternalInstance._processChildContext(parentComponent._reactInternalInstance._context)
)._renderedComponent.getPublicInstance();
}

@@ -806,15 +848,16 @@

dispose() {
this.unmountComponentAtNode(this._root);
const rootIds = Object.keys(this.containersByReactRootID);
delete this._root.instance;
delete this._root;
for (let i = 0; i < rootIds.length; ++i) {
this.unmountComponentAtNode(this.containersByReactRootID[rootIds[i]]);
}
delete this._instancesByReactRootID;
delete this.object3DsByReactRootID;
delete this.containersByReactRootID;
if (process.env.NODE_ENV !== 'production') {
delete this.rootUserDatasByReactRootID;
delete this.rootMarkupsByReactRootID;
}
delete this.findComponentRootReusableArray;
delete this.userDataCache;
delete this.deepestObject3DSoFar;
delete this.markupCache;
delete this.deepestContainerSoFar;
delete this._highlightElement;

@@ -827,4 +870,12 @@ this.nextMountID = 1;

this._devtoolsCallbackCleanup();
delete this._devtoolsCallbackCleanup;
}
if (this._rendererListenerCleanup) {
this._rendererListenerCleanup();
delete this._rendererListenerCleanup;
}
if (this._devToolsRendererDefinition) {

@@ -863,3 +914,3 @@ if (this._agent) {

// Record the root element in case it later gets transplanted.
this.rootUserDatasByReactRootID[this.getReactRootID(container)] = getReactRootUserDataInObject3D(container);
this.rootMarkupsByReactRootID[this.getReactRootID(container)] = getReactRootMarkupInContainer(container);
}

@@ -888,8 +939,12 @@

delete this._instancesByReactRootID[reactRootID];
delete this.object3DsByReactRootID[reactRootID];
delete this.containersByReactRootID[reactRootID];
if (process.env.NODE_ENV !== 'production') {
delete this.rootUserDatasByReactRootID[reactRootID];
delete this.rootMarkupsByReactRootID[reactRootID];
}
if (container && container.userData && container.userData._createdByReact3) {
delete container.userData;
}
return true;

@@ -899,8 +954,8 @@ }

/**
* @param {THREE.Object3D} scene DOM element that may contain a React component.
* @param {THREE.Object3D|HTMLCanvasElement} container THREE Object or HTML Canvas Element that may contain a React component.
* @return {?string} A "reactRoot" ID, if a React component is rendered.
*/
getReactRootID(scene) {
const rootElement = getReactRootUserDataInObject3D(scene);
return rootElement && this.getID(rootElement.userData);
getReactRootID(container) {
const rootMarkup = getReactRootMarkupInContainer(container);
return rootMarkup && this.getID(rootMarkup);
}

@@ -947,3 +1002,3 @@

console.log('internal component type herp derp');
console.log('internal component type');
} else {

@@ -998,3 +1053,3 @@ instance = new React3CompositeComponentWrapper(this);

* @param nextElement
* @param object3D
* @param {THREE.Object3D | HTMLCanvasElement} container
* @param shouldReuseMarkup

@@ -1005,3 +1060,3 @@ * @param context

*/
_renderNewRootComponent(nextElement, object3D, shouldReuseMarkup, context) {
_renderNewRootComponent(nextElement, container, shouldReuseMarkup, context) {
// Various parts of our code (such as ReactCompositeComponent's

@@ -1011,7 +1066,13 @@ // _renderValidatedComponent) assume that calls to render aren't nested;

if (process.env.NODE_ENV !== 'production') {
warning(ReactCurrentOwner.current === null, '_renderNewRootComponent(): Render methods should be a pure function ' + 'of props and state; triggering nested component updates from ' + 'render is not allowed. If necessary, trigger nested updates in ' + 'componentDidUpdate. Check the render method of %s.', ReactCurrentOwner.current && ReactCurrentOwner.current.getName() || 'ReactCompositeComponent');
warning(ReactCurrentOwner.current === null, '_renderNewRootComponent(): Render methods should be a pure function ' +
'of props and state; triggering nested component updates from ' +
'render is not allowed. If necessary, trigger nested updates in ' +
'componentDidUpdate. Check the render method of %s.',
ReactCurrentOwner.current &&
ReactCurrentOwner.current.getName()
|| 'ReactCompositeComponent');
}
const componentInstance = this.instantiateReactComponent(nextElement);
const reactRootID = this._registerComponent(componentInstance, object3D);
const reactRootID = this._registerComponent(componentInstance, container);

@@ -1022,7 +1083,13 @@ // The initial render is synchronous but any updates that happen during

ReactUpdates.batchedUpdates(this.batchedMountRootComponent, componentInstance, reactRootID, object3D, shouldReuseMarkup, context);
if (!ReactUpdates.ReactReconcileTransaction) {
// If the ReactReconcileTransaction has not been injected let's just use the defaults from ReactMount.
ReactInjection.Updates.injectReconcileTransaction(ReactReconcileTransaction);
ReactInjection.Updates.injectBatchingStrategy(ReactDefaultBatchingStrategy);
}
ReactUpdates.batchedUpdates(this.batchedMountRootComponent, componentInstance, reactRootID, container, shouldReuseMarkup, context);
if (process.env.NODE_ENV !== 'production') {
// Record the root element in case it later gets transplanted.
this.rootUserDatasByReactRootID[reactRootID] = getReactRootUserDataInObject3D(object3D);
this.rootMarkupsByReactRootID[reactRootID] = getReactRootMarkupInContainer(container);
}

@@ -1033,6 +1100,6 @@

_registerComponent(nextComponent, object3D) {
// if (!(object3D && (object3D.nodeType === ELEMENT_NODE_TYPE || object3D.nodeType === DOC_NODE_TYPE || object3D.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE))) {
_registerComponent(nextComponent, container) {
// if (!(container && (container.nodeType === ELEMENT_NODE_TYPE || container.nodeType === DOC_NODE_TYPE || container.nodeType === DOCUMENT_FRAGMENT_NODE_TYPE))) {
// if (process.env.NODE_ENV !== 'production') {
// invariant(false, '_registerComponent(...): Target object3D is not a DOM element.');
// invariant(false, '_registerComponent(...): Target container is not a DOM element.');
// } else {

@@ -1045,3 +1112,3 @@ // invariant(false);

const reactRootID = this.registerContainer(object3D);
const reactRootID = this.registerContainer(container);
this._instancesByReactRootID[reactRootID] = nextComponent;

@@ -1052,11 +1119,11 @@ return reactRootID;

/**
* Registers a object3D node into which React components will be rendered.
* Registers a container node into which React components will be rendered.
* This also creates the "reactRoot" ID that will be assigned to the element
* rendered within.
*
* @param {THREE.Object3D} object3D DOM element to register as a object3D.
* @param {THREE.Object3D} container DOM element to register as a container.
* @return {string} The "reactRoot" ID of elements rendered within.
*/
registerContainer(object3D) {
let reactRootID = this.getReactRootID(object3D);
registerContainer(container) {
let reactRootID = this.getReactRootID(container);
if (reactRootID) {

@@ -1070,3 +1137,3 @@ // If one exists, make sure it is a valid "reactRoot" ID.

}
this.object3DsByReactRootID[reactRootID] = object3D;
this.containersByReactRootID[reactRootID] = container;
return reactRootID;

@@ -1079,8 +1146,8 @@ }

getID(userData) {
const id = internalGetID(userData);
getID(markup) {
const id = internalGetID(markup);
if (id) {
if (this.userDataCache.hasOwnProperty(id)) {
const cached = this.userDataCache[id];
if (cached !== userData) {
const cached = this.markupCache[id];
if (!!cached) {
if (cached !== markup) {
if (!!this.isValid(cached, id)) {

@@ -1094,6 +1161,6 @@ if (process.env.NODE_ENV !== 'production') {

this.userDataCache[id] = userData;
this.markupCache[id] = markup;
}
} else {
this.userDataCache[id] = userData;
this.markupCache[id] = markup;
}

@@ -1100,0 +1167,0 @@ }

lib/getRoot.js
src/getRoot.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc