Comments (13)
I tried reproducing with this simple example:
var scene = FamousEngine.createScene()
var logo = scene.addChild()
var node2 = scene.addChild()
scene.removeChild(logo)
node2.addChild(logo)
new Position(logo)
node2.removeChild(logo)
scene.addChild(logo)
but that works. In my case, I'm removing and adding hundreds of nodes at a time.
from engine.
Alright, so I did an experiment to double check that I'm not accidentally adding nodes to the same parent node (in fact, they shouldn't be on any node at all because I'm calling removeChild
elsewhere first). I've got code like this:
if (viewNode === cardFamousNode.getParent()) {
console.log('viewNode is already parent...')
debugger
}
viewNode.addChild(cardFamousNode)
The console.log
and debugger
statements never fire, and the error happens on the line after the conditional check.
from engine.
Sorry, this is really hard to debug without the specific code. Not much we can do here.
from engine.
Here is the situation in which this bug occurs for me:
class MyNode extends Node
constructor: ()->
super
@.nextBtn = new NextBtnNode() #this class also extends Node
@.addChild( @.nextBtn )
@.moduleNodes = []
#remove all of the current module nodes and insert the new modules
setModules: (modules)->
@.modules = modules
for node in @.moduleNodes
@.removeChild node
for module in @.modules
newNode = new ModuleNode(module)
@.moduleNodes.push newNode
@.addChild newNode
myNode = new MyNode()
myNode.setModules( [1, 2, 3] )
myNode.setModules( [4, 5, 6] ) #ERROR item already exists at path
On the last line, the node's TransformSystem tries to register a new node at the path of the current NextBtn node, which was never removed. If I remove all the nodes including the NextBtn and then add all of the nodes, I don't receive an error. Thus, the path to the NextBtn node needs to update itself to reflect that it has moved from being at index 1 among all the children (for example) to index 0.
from engine.
@artichox Is that code who's repo you don't mind sharing?
from engine.
I have this problem in another project now. My case is simple. I've got some code like this:
import Node from 'react-famous/Node'
import {SplashScreen, SignUpScreen, LoginScreen} from './screens'
// This must contain React components that extend from react-famous/Node
let loginlayouts = {
SplashScreen, SignUpScreen, LoginScreen
}
class Login extends Node {
render() {
return (
<Node _famousParent = {this} id="rootNode">
{React.createElement(this.data.loginLayout)}
</Node>
)
}
getMeteorData() {
console.log('login root data changed.')
return {
loginLayout: loginlayouts[Session.get('loginlayout')]
}
}
}
reactMixin(Login.prototype, ReactMeteorData)
export default Login
When the value of this.data.loginLayout
changes, the Login
component is re-rendered (in React's sense of rendering). The Node
instance in the return function creates a Famous Node behind the scenes, and that instance remains instantiated across React renders. What changes is the value of {React.createElement(this.data.loginLayout)}
. The value of that is a component that looks like this:
import Node from 'react-famous/Node'
import Node from 'react-famous/dom-rederables/DOMElement'
export default
class SplashScreen extends Node {
render() {
return (
<Node _famousParent={this} id="SplashRoot">
<DOMElement>
<h1>...</h1>
</DOMElement>
<Node>
...
</Node>
</Node>
)
}
}
When the value of {React.createElement(this.data.loginLayout)}
in the Login component changes, that causes the (React) component to be unmounted, which behind the scene unmounts the Famous Node that it represents. Then, the new value of {React.createElement(this.data.loginLayout)}
is another React component that, when mounted (in React's sense of mounting) goes a head and creates a new Famous Node and adds that with addChild
to the Login component's Famous Node.
So, in my case, all that is happening (when the value of this.data.loginLayout
changes) is a single node is removed (and all it's sub-nodes along with it) and a single node is added (and all it's sub-nodes along with it), and that's when I get the error.
Maybe the index in one of the loops in the path logic is off by one or something?
from engine.
@artichox I'm gonna look into fixing this today.
from engine.
Great thank you @trusktr
Here is the repo
client/modules/base/ModulesView.coffee is the node class. setModules is called in client/Scene.coffee
Also, I was mistaken: the bug still persists if I remove all of the child nodes including the NextBtn
from engine.
@artichox I didn't get to solve this today. I found a temporary workaround to the problem in my case: I'm swapping views by positioning them off screen or on screen instead of adding/removing nodes. It's lame, but that'll do for now.
from engine.
@trusktr this should be one of the highest priorities to fix
from engine.
@talves @michaelobriena @alexanderGugel As mentioned on Slack in #engine, the current workaround is to manually remove child nodes before removing parent nodes, in post-order. I'm gonna test that out.
from engine.
Manually removing all of the child nodes in the tree does prevent path collisions, but unfortunately the recycling of DOM elements will sometimes result in some of the node's content being retained. So when I make a new node, it occasionally will have the content of one of my previous nodes in its background. Pretty funky looking. Preemptively setting content to "" in the node constructor doesn't fix the issue. Anyone found a workaround for this?
from engine.
@artichox Maybe we can override a method in the dom renderer to not recycle anything, for now?
from engine.
Related Issues (20)
- [question] How does Rotation component's set method work (from Position#set)? HOT 4
- [question] What's the proper way to clean up nodes? HOT 2
- [BUG] when Animations with a callback is Paused, does not pause the callback HOT 2
- [Bug?] onUpdate fires continuously despite not calling requestUpdate or requestUpdateOnNextTick HOT 2
- [question] Render Size DOM wrapps the text in 2 lines HOT 6
- Flickering on IOS
- [question] what is the correct way to MOVE a subtree of Nodes to elsewhere in the scene graph?
- Bug with Materials
- [question] how does one test that the PhysicsEngine has converged?
- why DomElement not remove form dom tree when removeChild() HOT 2
- Change URL to Famous.org
- publish Famous/engine to cdnjs HOT 1
- Famous Engine - MOST STABLE RELEASE HERE HOT 36
- Program events document still miss
- Is the repository deprecated? HOT 2
- Is Famous Engine & Framework Dead ? HOT 3
- Slack sign up not working
- dead
- #THEREISNOSPOON
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from engine.