diff --git a/examples/index.html b/examples/index.html index 2c1ae54f..c105f254 100644 --- a/examples/index.html +++ b/examples/index.html @@ -53,6 +53,10 @@

Networked-Aframe Examples

Basic with events Example of listening to and logging NAF events +
+ Non Networked Parent + Demonstrates how to attach networked entities as children of non-networked parents +
Ownership Transfer Demonstrates transfering ownership of entities diff --git a/examples/non-networked-parent.html b/examples/non-networked-parent.html new file mode 100644 index 00000000..c7b88438 --- /dev/null +++ b/examples/non-networked-parent.html @@ -0,0 +1,206 @@ + + + + + Basic Example — Networked-Aframe + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ Use the buttons above to change the height of the platform. The player avatars are spawned on this platform. + Each client can independently change the height of this platform without that change being synced to other + clients, since the platform entity is not marked as networked, and the avatars have "allowNonNetworkedParent" + set to true. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/NetworkEntities.js b/src/NetworkEntities.js index 9cb5ba61..03068c8a 100644 --- a/src/NetworkEntities.js +++ b/src/NetworkEntities.js @@ -90,7 +90,17 @@ class NetworkEntities { var parent = entityData.parent; var networkId = entityData.networkId; - var parentNotCreatedYet = parent && !this.hasEntity(parent); + var parentNotCreatedYet + var cssIdentifierRegex = /^-?(?=[a-zA-Z\xA0-\uFFFF])([a-zA-Z0-9_\u00A0-\uFFFF]*)(-[a-zA-Z0-9_\u00A0-\uFFFF]+)*$/; + var isValidCssClass = cssIdentifierRegex.test(parent) + if (!parent) { + parentNotCreatedYet = false + } else if (isValidCssClass && document.querySelector(`#${parent}`)) { + parentNotCreatedYet = false + } else if (!this.hasEntity(parent)) { + parentNotCreatedYet = true + } + if (parentNotCreatedYet) { this.childCache.addChild(parent, entityData); } else { @@ -122,8 +132,11 @@ class NetworkEntities { } addEntityToPage(entity, parentId) { + var nonNetworkedParent; if (this.hasEntity(parentId)) { this.addEntityToParent(entity, parentId); + } else if ((nonNetworkedParent = document.querySelector(`#${parentId}`))) { + nonNetworkedParent.appendChild(entity); } else { this.addEntityToSceneRoot(entity); } diff --git a/src/components/networked.js b/src/components/networked.js index 636ef270..b56c5061 100644 --- a/src/components/networked.js +++ b/src/components/networked.js @@ -117,6 +117,7 @@ AFRAME.registerComponent('networked', { schema: { template: {default: ''}, attachTemplateToLocal: { default: true }, + allowNonNetworkedParent: { default: false }, persistent: { default: false }, networkId: {default: ''}, @@ -158,7 +159,7 @@ AFRAME.registerComponent('networked', { // Fill cachedElements array with null elements this.invalidateCachedElements(); - this.initNetworkParent(); + this.initParent(); let networkId; @@ -237,10 +238,13 @@ AFRAME.registerComponent('networked', { return !!this.el.firstUpdateData; }, - initNetworkParent: function() { + initParent: function() { var parentEl = this.el.parentElement; if (parentEl['components'] && parentEl.components['networked']) { this.parent = parentEl; + } else if (parentEl['components'] && this.data.allowNonNetworkedParent && parentEl.id) { + // Parent is non-networked + this.parent = parentEl; } else { this.parent = null; } @@ -454,12 +458,13 @@ AFRAME.registerComponent('networked', { }, getParentId: function() { - this.initNetworkParent(); // TODO fix calling this each network tick + this.initParent(); // TODO fix calling this each network tick if (!this.parent) { return null; } var netComp = this.parent.getAttribute('networked'); - return netComp.networkId; + // If the parent is networked return the networkedId, otherwise the html element id. + return netComp ? netComp.networkId: this.parent.id; }, /* Receiving updates */