[bug?] Both setting the content behavior and content in the tree causes what seems like two DOMElement contents on a single node.

[trusktr]

Example: https://api-beta.famo.us/codemanager/v1/containers/c3283546-9d8b-4c6d-a3c0-dd8c68fae9b4/share

Inspect element on one of those "spinners" and you'll see they contain more than one famous-dom-element-content DIV elements.

[trusktr]

I chatted with @Morgantheplant and we thought perhaps a nice result would be that the content behavior of the node overrides whatever is in the tree?

[arkadyp]

@trusktr Can you share the code for that example?

[trusktr]

@arkadyp Sure. (:

FamousFramework.component('joejoe:experiments', {
    behaviors: {
        '#root': {
            content: `<h1>Hello render glitches!</h1>`,
            size: [undefined, undefined],
            style: {
                'background-color': 'rgba(217, 154, 167, 0.5)',
                perspective: '1000px'
            }
        },
        '.hello': {
            'inner-html': function(options) {
               var content = ''
               for (let i = 0, len=options.length; i<len; i+=1) {
                   content += (`
                       <option value="${options[i].toLowerCase()}">
                           Option ${options[i]}!
                       </option>
                   `)
               }
               return content
            }
        },
        '.spinner': {
            $repeat: function(spinners) {
                return spinners
                //return 3 // this would be nice.
            },
            //$repeat: 3, // or this, when we don't have an array.
            content: (` <h2>spinner</h2> `),
            size: [100, 100],
            origin: [0.5,0.5,0.5],
            style: {
                'background-color': '#9AD9CC',
                'backface-visibility': 'visible'
            },
            'position-x': function(spinners, $index) {
                var i = $index
                return 100+(i*100)
            },
            'position-y': function(spinners, $index) {
                var i = spinners[$index] / 12000
                return 200+(100*Math.sin(i))
            },
            'position-z': function(spinners, $index) {
                var i = spinners[$index] / 12000
                return (200*Math.sin(i))
            }
            //'rotation-y': function(rotation, $index) {
                //return rotation*($index+1);
            //}
        }
    },
    states: {
        options: [ 'one', 'two', 'three' ],
        spinners: [1000,4000,7000,10000,13000,16000,19000,22000,25000,28000,31000,34000]
    },
    events: {
        // life cycle events for child nodes would be great!! Any implications?
        //'.spinner': {
            //'post-load': function($index, $famousNode) {
            //}
        //},
        $lifecycle: {
            'post-load': function($state, $timelines, $famousNode /*, $clock*/) {
                //$clock.setInterval(function() {
                    //$state.set('rotation', $state.get('rotation') + Math.PI, {duration: 5000})
                //}, 16)
                setTimeout(function() {
                    $timelines.get('startRotation').start({duration: 8000}, function rotate() {
                        $timelines.get('rotation').start({duration: 4000}, rotate)
                    })
                }, 1000)

                var id = $famousNode.addComponent({
                    onUpdate: function(time) {
                        var spinners = $state.get('spinners')
                        for (let i=0, len=spinners.length; i<len; i+=1) {
                            spinners[i] = (spinners[i]+500)
                        }
                        $state.set('spinners', spinners)
                        $famousNode.requestUpdateOnNextTick(id)
                    }
                })
                $famousNode.requestUpdateOnNextTick(id)
            }
        }
    },
    tree: (`
        <node id="root">
            <node class="spinner">
                <div>
                    <select class="hello"> </select>
                </div>
            </node>
        </node>
    `)
})

.timelines({
    rotation: {
        '.spinner': {
            'rotation-y': {
                '0%':   { value: 0, curve: 'linear' },
                '100%':  { value: Math.PI * 2, curve: 'linear'}
            }
        }
    },
    startRotation: {
        '.spinner': {
            'rotation-y': {
                '0%':   { value: 0, curve: 'easeIn' },
                '100%':  { value: Math.PI * 2, curve: 'linear'}
            }
        }
    }
})