I've encountered this problem on several occasions, with objects created dynamically, regardless of whether they were created in QML or C++. The objects are deleted while still in use, causing hard crashes for no apparent reason. The objects are still referenced and parented to other objects all the way down to the root object, so I find it strange for QML to delete those objects while their refcount is still above zero.
So far the only solution I found was to create the objects in C++ and set the ownership to CPP explicitly, making it impossible to delete the objects from QML.
At first I assumed it may be an issue with parenting, since I was using QObject derived classes, and the QML method of dynamic instantiation passes an Item for a parent, whereas QtObject doesn't even come with a parent property - it is not exposed from QObject.
But then I tried with a Qobject derived which exposes and uses parenting and finally even tried using Item just for the sake of being sure that the objects are properly parented, and yet this behavior still persists.
Here is an example that produces this behavior, unfortunately I could not flatten it down to a single source because the deep nesting of Components breaks it:
// ObjMain.qml
Item {
property ListModel list : ListModel { }
Component.onCompleted: console.log("created " + this + " with parent " + parent)
Component.onDestruction: console.log("deleted " + this)
}
// Uimain.qml
Item {
id: main
width: childrenRect.width
height: childrenRect.height
property Item object
property bool expanded : true
Loader {
id: li
x: 50
y: 50
active: expanded && object && object.list.count
width: childrenRect.width
height: childrenRect.height
sourceComponent: listView
}
Component {
id: listView
ListView {
width: contentItem.childrenRect.width
height: contentItem.childrenRect.height
model: object.list
delegate: Item {
id: p
width: childrenRect.width
height: childrenRect.height
Component.onCompleted: Qt.createComponent("Uimain.qml").createObject(p, {"object" : o})
}
}
}
Rectangle {
width: 50
height: 50
color: "red"
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton | Qt.LeftButton
onClicked: {
if (mouse.button == Qt.RightButton) {
expanded = !expanded
} else {
object.list.append({ "o" : Qt.createComponent("ObjMain.qml").createObject(object) })
}
}
}
}
}
// main.qml
Window {
visible: true
width: 1280
height: 720
ObjMain {
id: obj
}
Uimain {
object: obj
}
}
The example is a trivial object tree builder, with the left button adding a leaf to the node and the right button collapsing the node. All it takes to reproduce the bug is to create a node with depth of 3 and then collapse and expand the root node, upon which the console output shows:
qml: created ObjMain_QMLTYPE_0(0x1e15bb8) with parent QQuickRootItem(0x1e15ca8)
qml: created ObjMain_QMLTYPE_0(0x1e5afc8) with parent ObjMain_QMLTYPE_0(0x1e15bb8)
qml: created ObjMain_QMLTYPE_0(0x1e30f58) with parent ObjMain_QMLTYPE_0(0x1e5afc8)
qml: deleted ObjMain_QMLTYPE_0(0x1e30f58)
The object of the deepest node is deleted for no reason, even though it is parented to the parent node Item and referenced in the JS object in the list model. Attempting to add a new node to the deepest node crashes the program.
The behavior is consistent, regardless of the structure of the tree, only the second level of nodes survives, all deeper nodes are lost when the tree is collapsed.
The fault does not lie in the list model being used as storage, I've tested with a JS array and a QList and the objects are still lost. This example uses a list model merely to save the extra implementation of a C++ model. The sole remedy I found so far was to deny QML ownership of the objects altogether. Although this example produces rather consistent behavior, in production code the spontaneous deletions are often completely arbitrary.
In regard to the garbage collector - I've tested it before, and noticed it is quite liberal - creating and deleting objects a 100 MB of ram worth did not trigger the garbage collection to release that memory, and yet in this case only a few objects, worth a few hundred bytes are being hastily deleted.
According to the documentation, objects which have a parent or are referenced by JS should not be deleted, and in my case, both are valid:
The object is owned by JavaScript. When the object is returned to QML
as the return value of a method call, QML will track it and delete it
if there are no remaining JavaScript references to it and it has no
QObject::parent()
As mentioned in Filip's answer, this does not happen if the objects are created by a function which is not in an object that gets deleted, so it may have something to do with the vaguely mentioned JS state associated with QML objects, but I am essentially still in the dark as of why the deletion happens, so the question is effectively still unanswered.
Any ideas what causes this?
UPDATE: Nine months later still zero development on this critical bug. Meanwhile I discovered several additional scenarios where objects still in use are deleted, scenarios in which it doesn't matter where the object was created and the workaround to simply create the objects in the main qml file doesn't apply. The strangest part is the objects are not being destroyed when they are being "un-referenced" but as they are being "re-referenced". That is, they are not being destroyed when the visual objects referencing them are getting destroyed, but when they are being re-created.
The good news is that it is still possible to set the ownership to C++ even for objects, which are created in QML, so the flexibility of object creation in QML is not lost. There is the minor inconvenience to call a function to protect and delete every object, but at least you avoid the buggy lifetime management of QtQuick. Gotta love the "convenience" of QML though - being forced back to manual object lifetime management.
I've encountered this problem on several occasions, with objects created dynamically, regardless of whether they were created in QML or C++
Objects are only considered for garbage collection if they have JavaScriptOwnership set, which is the case if they are
Directly created by JavaScript/QML
Ownership is explicitly set to JavaScriptOwnership
The object is returned from a Q_INVOKABLE method and didn't have setObjectOwnership() called on it previously.
In all other cases objects are assumed to be owned by C++ and not considered for garbage collection.
At first I assumed it may be an issue with parenting, since I was using QObject derived classes, and the QML method of dynamic instantiation passes an Item for a parent, whereas QtObject doesn't even come with a parent property - it is not exposed from QObject.
The Qt object tree is completely different from the Qml object tree. QML only cares about its own object tree.
delegate: Item {
id: p
width: childrenRect.width
height: childrenRect.height
Component.onCompleted: Qt.createComponent("Uimain.qml").createObject(p, {"object" : o})
}
The combination of dynamically created objects in the onCompleted handler of a delegate is bound to lead to bugs.
When you collapse the tree, the delegates get destroyed, and with them all of their children, which includes your dynamically created objects. It doesn't matter if there are still live references to the children.
Essentially you've provided no stable backing store for the tree - it consists of a bunch of nested delegates which can go away at any time.
Now, there are some situations where QML owned objects are unexpectedly deleted: any C++ references don't count as a ref for the garbage collector; this includes Q_PROPERTYs. In this case, you can:
Set CppOwnership explicitly
Use QPointer<> to hold the reference to deal with objects going away.
Hold an explicit reference to the object in QML.
QML is not C++ in a way of managing memory. QML is intended to take care about allocating memory and releasing it. I think the problem you found is just the result of this.
If dynamic object creation goes too deep everything seems to be deleted. So it does not matter that your created objects were a part of the data - they are destroyed too.
Unfortunately my knowledge ends here.
One of the work arounds to the problem (proving my previous statement) is moving the creation of data structure out from the dynamic UI qml files:
Place object creating function for example in main.qml
function createNewObject(parentObject) {
parentObject.list.append({ "o" : Qt.createComponent("ObjMain.qml").createObject(parentObject) })
}
Use this function instead in your code:
// fragment of the Uimain.qml file
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.RightButton | Qt.LeftButton
onClicked: {
if (mouse.button == Qt.RightButton) {
expanded = !expanded
} else {
createNewObject(object)
}
}
}
Create an array inside of a .js file and then create an instance of that array with var myArray = []; on the top-level of that .js. file.
Now you can reference any object that you append to myArray including ones that are created dynamically.
Javascript vars are not deleted by garbage collection as long as they remain defined, so if you define one as a global object then include that Javascript file in your qml document, it will remain as long as the main QML is in scope.
In a file called: backend.js
var tiles = [];
function create_square(new_square) {
var component = Qt.createComponent("qrc:///src_qml/src_game/Square.qml");
var sq = component.createObject(background, { "backend" : new_square });
sq.x = new_square.tile.x
sq.y = new_square.tile.y
sq.width = new_square.tile.width;
sq.height = new_square.tile.height;
tiles[game.board.getIndex(new_square.tile.row, new_square.tile.col)] = sq;
sq.visible = true;
}
EDIT :
Let me explain a little more clearly how this could apply to your particular tree example.
By using the line property Item object you are inadvertently forcing it to be a property of Item, which is treated differently in QML. Specifically, properties fall under a unique set of rules in terms of garbage collections, since the QML engine can simply start removing properties of any object to decrease the memory required to run.
Instead, at the top of your QML document, include this line:
import "./object_file.js" as object_file
Then in the file object_file.js , include this line:
var object_hash = [];
Now you can use object_hash any time to save your dynamically created components and prevent them from getting wiped out by referencing the
object_file.object_hash
object.
No need to go crazy changing ownership etc
Related
If we implement a DataStructure in JavaScript, will the browsers underlying implementation use same data structure for handling data?
A Linked List for example - we will have a Node structure something like this
class Node {
constructor(data) {
this.data = data;
this.next = null;
}
}
Now let's say we set next to another node to create a linked list.
Does next really point to next Node using Linked List in underlying implementation? Linked List has O(1) to add a new node. Will this be actually same O(1) for JavaScript too when C++ (or any JavaScript engine) converts the implementation to system level ?
In JavaScript, identifiers (variables and arguments) and properties of objects are all essentially pointers to structures in memory (or on the heap).
Say that you have two Nodes like in your code, one linked to the other. One way to visualize the resulting structure is:
<Node>: memory address 16325
data: memory address 45642 (points to whatever argument was passed)
next: memory address 62563
<Node>: memory address 62563 (this is the same as the `next` above)
data: memory address 36425 (points to whatever argument was passed)
next: memory address 1 (points to null)
That's not exactly what happens, but it's close enough for the "underlying implementation" you're concerned about. If, in your JavaScript, you have a reference to one Node, and you link it to another by assigning to its next property, what's involved under the hood is simply taking the location of the linked object and changing the original object's next property to point to that location. And yes, that operation takes next to no processing power - it's definitely an O(1) process in any reasonable implementation, such as in browsers and Node.
The JavaScript engine does not have to re-analyze the structure from the ground up when a new property is created somewhere - it's all just objects and properties linking to other objects.
Here's my situation: I'm using the MEAN stack, and on my Angular front-end I'm creating instances of classes and putting them into an array of arrays which are all inside a gameMap/mapData object. I'm then stringifying and sending this object via a socket connection to my back-end, which broadcasts the object to other connected clients so they can see the current game state.
It seems like everyone else having issues with JSON.parse() wants it to instantiate classes, but I am having the opposite problem. When a client receives this game object via sockets and then tries to JSON.parse() the object, it seems to be automatically instantiating classes from the data, which causes the problem of running the constructor on those classes, overwriting the class attributes with the constructor defaults. How can I stop JSON.parse from instantiating these classes and instead have it just create objects with types?
To illustrate that I am getting the correct data in my stringified JSON object but the issue is when it gets parsed, I put a console.log immediately before and after the JSON.parse() of my incoming data. This code looks like this:
console.log('got existing map data, beginning processing:', mapDataRaw);
var mapData2 = JSON.parse(mapDataRaw);
console.log('parsed mapData:', mapData2);
In the first console log, I get the correct changed values, as shown below (edited and shortened the returned object because it is huge):
{"location":{"row":1,"col":0,"rotate":180,"transform":"rotate(180deg)"},"hp":50,"speed":4,"range":6,"ammo":0,"shieldHP":0,"size":50,"border":"","team":"blue","moved":false,"imgAlpha":"1","name":"Fighter","missile":{"firing":true,"target":{"row":4,"col":3}},"img":"assets/img/playerShip1_blue.png","imgTop":{"img":"assets/img/Power-ups/pill_yellow.png","alpha":1,"transform":"","size":22}}
As you can see, the ammo is set to 0 and inside the missile attribute the firing attribute is set to true. However, this is the section of this object in the console log after the parse:
0: Fighter
location: {row: 1, col: 0, rotate: 180, transform: "rotate(180deg)"}
hp: 50
speed: 4
range: 6
ammo: 1
shieldHP: 0
size: 50
border: ""
team: "blue"
moved: false
imgAlpha: "1"
name: "Fighter"
missile: {firing: false, target: {…}}
img: "assets/img/playerShip1_blue.png"
__proto__: BaseObj
Note that the ammo is 1 and in the attribute missile, the attribute firing is false. These are both incorrect and are what these values would be by default at the start of the game. Also note that it says at index 0 of the array is 'Fighter', which is the name of the class. How in the world did JSON.parse() know to create it as an instance of the Fighter class when that doesn't seem to be stated anywhere in the raw stringified object attributes (I have 'name' set to the class name but I tried changing this to 'unitName' in case 'name' was some built-in class name thing and that didn't change anything)? Is there any kind of option I can set to have JSON parse these objects into regular objects instead of instances of classes? I already have the code written to copy the values from these objects into actual class object instances on the client, but this doesn't work if the values I'm copying from have been overwritten by defaults!
Okay I figured out what was going on, in case anyone runs into a similar situation. It has to do with JavaScript hoisting I think. Later in my code I set a different object's map equal to the gameData.map, and then edit values and adjust it. Apparently JavaScript was hoisting all of this adjustment and new object code up to the top ahead of my console.logs, so even though it looked like the values were being changed immediately after the parse, it was actually later that the values were changed. The root cause was having that other object's map set to be equal to gameData.map, because instead of copying the values, that instead literally pointed to the same objects which caused them to be overwritten in what I thought was the unchanged original.
Let's say I have a library that keeps an array of objects, the purpose is not really relevant to the issue. it looks like this:
window.Tracker = {
objects: [],
track: function(obj){
this.objects.push(obj)
}
}
In other parts of the app, Vue/React components constantly push objects to this library as they're loaded from a server:
this.movie = { id: 56456, name: "Avengers" }
Tracker.track(this.props.movie)
Overtime, the Tracker.objects array gets bigger and bigger, mostly because of objects no longer needed (their components no longer exist), and I really don't want to keep objects like this in the array.
The problem is I don't have control over anything aside from this Tracker library. (so I can't really make callbacks when the object is no longer needed)
But I need a way to garbage collect/ get rid of objects that are no longer used by anything other than in the Tracker.objects array.
Is this possible?
The only way to store objects in a collection so that they are still garbage collected are WeakMaps. However you can't iterate them:
Because of references being weak, WeakMap keys are not enumerable (i.e. there is no method giving you a list of the keys). If they were, the list would depend on the state of garbage collection, introducing non-determinism.
~ MDN
So no, this is not possible in js for good reasons.
This JSBin isolates a problem I ran into in my code. I have a hierarchy of embedded models and a computed property (data) that is supposed to fire whenever a value at the very bottom of the chain changes (symbol). The example displays the property directly as well as the result of the computed property. A button changes the value on click. You'll see that it updates the property but the computed property doesn't fire. Why doesn't selectedAllocation.positions.#each.instrument.symbol work to trigger the computation when any instrument.symbol changes?
If the example seems contrived, it's only because I tried to abstract something that is more complex in reality, e.g. there is more than just one object in these arrays and data is necessary because another library expects a simple JS object in a particular format.
Note that #each only works one level deep. You cannot use nested forms
like todos.#each.owner.name or todos.#each.owner.#each.name.
http://emberjs.com/guides/object-model/computed-properties-and-aggregate-data/
You'll need to create an alias to bring symbol up one level (Not a coffeescript guy, hopefully you can read through the hacking, the positions alias below is for kicks and giggles, makes no difference).
App.Position = Ember.Object.extend({
instrumentSymbol: Em.computed.alias('instrument.symbol')
})
App.IndexController = Ember.ArrayController.extend
selectedAllocation: null
positions: Em.computed.alias('selectedAllocation.positions'),
data: (->
#get("positions").map (position) ->
symbol: position.get "instrumentSymbol"
).property "positions.#each.instrumentSymbol"
...
http://jsbin.com/bivoyako/1/edit
To be honest, I'm not quite sure where to start with this question.
I'll describe the situation: I am in the process of making a level editor for an HTML5 game. The level editor is already functional - now I would like to save/load levels created with this editor.
Since this is all being done in Javascript (the level editor as well as the game), I was thinking of having the save simply convert the level to a JSON and the load, well... un-jsonify it.
The problem is - the level contains several types of objects (several different types of entities, several types of animation objects, etc...) Right now, every time I want to add an object to the game I have to write an unjsonify method specifically for that object and then modify the level object's unjsonify method so it can handle unjsonifying the newly defined type of object.
I can't simply use JSON.parse because that just returns an object with the same keys and values as the original had, but it is not actually an object of that class/prototype. My question is, then, is there a correct way to do this that does not require having to continuously modify the code every time I want to add a new type of object to the game?
I would create serialise/deserialise methods on each of your objects to put their state into JSON objects and recover it from them. Compound objects would recursively serialise/deserialise their children. To give an example:
function Player {
this.weapon = new Weapon();
}
Player.prototype.serialise = function () {
return {'type': 'Player', weapon: this.weapon.serialise()};
}
Player.deserialise = function(json_object) {
var player = new Player();
player.weapon = Weapon.deserialise(json.weapon);
return player;
}
Obviously in real code you would have checks to make sure you were getting the types of objects that you expect. Arrays and simple hash objects could be simply copied during serialisation/deserialisation though their children will often need to be recursed over.