-
Notifications
You must be signed in to change notification settings - Fork 250
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DOMElement lifecycle issues #245
Comments
Try it out live here: https://fview-lab2.meteor.com/pads/3WusgoWo7BRWpj5JX/4 |
This is definitely a bug IMO. The DOMElement should be completely cleaned up.
Same as 1: We need to reset the cutout state. @redwoodfavorite
Calling
Expected behavior should be the same as when removing the node with only the component in question added to it. This is definitely not the case currently. I think this can be summed up as following: The DOMElement's onDismount function is lacking some cleanup logic! Thanks for reporting this! I was planning to refactor the DOMElement on Monday anyways. This is very helpful input! Expect a PR early next week. @DnMllr @redwoodfavorite |
Wow, super quick weekend response. Glad my timing was good :> Have a relaxing weekend, guys! |
Yeah this is indeed an issue with the WebGL cutouts. They're simply not being deleted 'onDismount' which is definitely an oversight. Thanks, will fix this ASAP. |
Looks like @alexanderGugel's PR should fix this issue. It's worth testing though. |
@arkadyp comment on same issueHere is an example where I'm adding, then removing, then re-adding two nodes with DOMElements attached. Depending on the order that I add and remove them, I can end up in a state where the border-radius that is only supposed to be applied to the circle node gets applied to the square node. I think this is due to the way that Engine is recycling divs but I haven't gotten the change to dig into the code. 'use strict';
// Famous dependencies
var DOMElement = require('famous/dom-renderables/DOMElement');
var FamousEngine = require('famous/core/FamousEngine');
// Boilerplate code to make your life easier
FamousEngine.init();
// Initialize with a scene; then, add a 'node' to the scene root
var root = FamousEngine.createScene().addChild();
var circle;
var square;
var el;
function addCircle() {
circle = root.addChild();
circle.setSizeMode(1,1,1);
circle.setAbsoluteSize(300, 300);
el = new DOMElement(circle);
el.setProperty('border', '5px solid red');
el.setProperty('border-radius', '50%');
el.setContent('circle');
}
function addSquare() {
square = root.addChild();
square.setSizeMode(1,1,1);
square.setAbsoluteSize(300, 300);
square.setPosition(400, 0);
el = new DOMElement(square);
el.setProperty('border', '5px solid green');
el.setContent('square');
}
addCircle();
addSquare();
setTimeout(function (){
root.removeChild(square);
root.removeChild(circle)
setTimeout(function() {
// Seems like the node that was was allocated to circle
// gets reallocated to square but the border-radius property
// doesn't get properly wiped away.
addSquare();
setTimeout(function() {
addCircle();
}, 750)
}, 750)
}, 750); |
Ok, belated update (from me, at least). Part 2 (Mesh cutouts) was of course solved by PR #247 ("fix: Reset cutout on dismount") - thanks @alexanderGugel! - which landed in 0.6. Regarding the other issues, after updating the test code above from part 1 (DOMElement recycling), I can confirm that PR #266 ("fix: Refactor DOMElement") solves the issue. But it's never been merged. It does seem to have been rebased quite a few times over the last month though :> @michaelobriena, this is reasonably serious issue. The current famous playbook is basically "don't ever remove nodes with DOMElements or don't ever use classes, styles, or attributes on them". It would be amazing if this landed before the next release :> If there's an issue with particular parts of the refactor, perhaps they could be worked on in isolation rather than blocking the fix (although it looks like a lot of them relate to part 3 too). |
I will look into that PR again. Right now with a lot going on here it would be better if this fix was a smaller fix than a full rewrite of DOMElement. If that was to happen I could merge very easily. |
Got it, thanks @michaelobriena! |
As long as the API doesn't change, I don't see why a full (tested) rewrite is not fine. I'm going to merge into infamous/engine and test... |
On second though, too much has changed and there's conflicts. I don't yet know enough to merge properly. @gadicc Can you confirm if you still have any of the same problems with the latest Engine? |
Repurposing a DOMElement leaves existing/previous classes/attributes/properties intact, e.g:
or as a pseudo-test (can I submit PRs just for tests? :))
Note: unnoticeable without the setTimeout.
Fixed in 0.6.
InDOMElement.onDismount
, we recycle the element by (amongst other things), settingdisplay: none
and leaving it attached to the DOM. But the plane is still visible on WebGL animations:at least in Chrome stable 43 and beta 44. cc: @trusktr. Confirming that.display: none
is set (you can see the contents and background color all disappear)Should
node.removeComponent(domElement)
do any of the stuff thatDOMElement.onDismount
does? i.e. recycle the domElement.What is the expected behaviour if we call removeComponent with and/or without removing the node too?
The text was updated successfully, but these errors were encountered: