first: function()

in toolkit/jb/svg.js [461:497]


        first: function(bodyElm) {
            var valueOut = Kefir.pool();
            var nodeRoot = bodyElm;
            var knobsRoot = d3.select(nodeRoot).append('g')
                              .attr('transform', 'translate(' + knobsX + ',' + shiftY + ')')
                              .node();
            var defaultValueStream;
            var knobsOut = Kefir.combine(
                knobs.map(function(knob, i) {
                    defaultValueStream = Kefir.constant(DEFAULT_LAYERS_OPACITIES[i]);
                    return initKnobInGroup(knob, knobsRoot, i, count, defaultKnobConf.width, defaultKnobConf.height - 5, defaultValueStream)
                           .merge(defaultValueStream);
                           // knob.init() returns stream of updates,
                           // so Kefir.combine will send every change
                })
            );
            var switchersRoot = d3.select(nodeRoot).append('g')
                                  .attr('transform', 'translate(' + modesX + ',' + shiftY + ')')
                                  .node();
            var blendsChanges = [];
            for (var i = 0; i < count; i++) {
                blendsChanges.push(initBlendSwitchInGroup(switchersRoot, i, count, 50, defaultKnobConf.height - 5)
                                   .merge(Kefir.constant(DEFAULT_LAYERS_BLENDS[i] || DEFAULT_BLEND)));
            }
            var blendsOut = Kefir.combine(blendsChanges);
            valueOut = knobsOut.combine(blendsOut).map(function(combined) {
                return combined[0].map(function(opacity, index) {
                    return {
                        opacity: opacity,
                        blendMode: combined[1][index]
                    }
                });
            });
            return {
                'renderOptions': { valueOut: valueOut }
            };
        }