Only 1/2 of the bubbles are presented

[ingeniousgenius]

There is an issue in the current version of the library to which only half of the specified nodes are shown. This issue is related to #89, however, I thought it would be better to open a much more conclusive issue.

New Issue Checklist

• I updated Magnetic to the latest version.
• I read the Contribution Guidelines.
• I read the documentation.
• I searched for existing GitHub issues.

Issue Description

The issue stems from the Magnetic view showing only half the number of nodes .i.e. showing 8 opposed to 15 nodes.

The cause of the issue is unknown, however, after some investigation, it seems to be that it has to do with the node.position set in the addChild function.

When I run print(node.position) I get the following in the console:

(0.0, 0.0)
(-105.53099822998047, -85.56782531738281)
(110.28900146484375, -44.71046829223633)
(-124.88300323486328, -49.56586456298828)
(80.25800323486328, -63.09857940673828)
(-150.05499267578125, 25.044469833374023)
(113.4219970703125, -64.8022232055664)
(-101.36699676513672, 93.44188690185547)
(137.75799560546875, -63.273929595947266)
(-143.57000732421875, -19.013620376586914)
(85.4530029296875, -7.014369964599609)
(-110.39099884033203, -63.73573303222656)
(137.75799560546875, -54.6263313293457)
(-118.06199645996094, 85.56877899169922)
(123.26599884033203, 119.49418640136719)
(-115.60199737548828, -95.26038360595703)

and only 8 elements are shown on the screen like so:

however, when using the absolute position on both the x and y axis, so the node.position = CGPoint(x: abs(x), y: abs(y)),

and extra two elements are shown:

Despite that, when showing the nodes count, 47 nodes are drawn onto the screen, more than are visible:

So, my hypothesis is that the issue with only half of the items being shown stems with the positions they are assigned.

In particular, these lines in Magnetic.swift

override open func addChild(_ node: SKNode) {
        var x = -node.frame.width // left
        if children.count % 2 == 0 {
            x = frame.width + node.frame.width // right
        }
        let y = CGFloat.random(node.frame.height, frame.height - node.frame.height)
        node.position = CGPoint(x: abs(x), y: abs(y))
        print(node.position)
        super.addChild(node)
    }

Environment

• iOS Version: iOS 13.3
• Device(s): iPhone 11

It's worth nothing that this code is running in a react-native wrapper, from a library that I created around this https://github.com/jesster2k10/react-native-bubble-select

[ingeniousgenius]

As I suspected, setting the node.position.y to 0 causes all of the nodes to appear like so:

So my idea now, is that when the y-position is set randomly, there is a certain boundary, possibly the physics body, stopping the nodes from moving into the centre screen

[nurlan-dzhavadov]

Any progress on this?

[ingeniousgenius]

@dvlpd Are you working with the react-native or iOS library?

[nurlan-dzhavadov]

I work with iOS library, sir

[nurlan-dzhavadov]

any updates?

[josepedromonteiro]

Hey @jesster2k10 any updates for the react-native lib?

[taier]

are you adding nodes inside viewDidLoad?