/**
 * The 'd3-pack' component uses D3's
 * [Pack Layout](https://github.com/d3/d3-hierarchy/#pack)
 * to visualize hierarchical data as a enclosure diagram.
 * The size of each leaf node’s circle reveals a quantitative dimension
 * of each data point. The enclosing circles show the approximate cumulative size
 * of each subtree.
 *
 * The pack additionally layout populates the following attributes on each node:
 * - `r` - the computed node radius.
 *
 *     @example
 *     Ext.create('Ext.panel.Panel', {
 *         renderTo: Ext.getBody(),
 *         title: 'Pack Chart',
 *         height: 750,
 *         width: 750,
 *         layout: 'fit',
 *         items: [
 *             {
 *                 xtype: 'd3-pack',
 *                 tooltip: {
 *                     renderer: function(component, tooltip, node) {
 *                         var record = node.data;
 *                         tooltip.setHtml(record.get('text'));
 *                     }
 *                 },
 *                 store: {
 *                     type: 'tree',
 *                     data: [
 *                         {
 *                             "text": "DC",
 *                             "children": [
 *                                 {
 *                                     "text": "Flash",
 *                                     "children": [
 *                                         { "text": "Flashpoint" }
 *                                     ]
 *                                 },
 *                                 {
 *                                     "text": "Green Lantern",
 *                                     "children": [
 *                                         { "text": "Rebirth" },
 *                                         { "text": "Sinestro Corps War" }
 *                                     ]
 *                                 },
 *                                 {
 *                                     "text": "Batman",
 *                                     "children": [
 *                                         { "text": "Hush" },
 *                                         { "text": "The Long Halloween" },
 *                                         { "text": "Batman and Robin" },
 *                                         { "text": "The Killing Joke" }
 *                                     ]
 *                                 }
 *                             ]
 *                         },
 *                         {
 *                             "text": "Marvel",
 *                             "children": [
 *                                 {
 *                                     "text": "All",
 *                                     "children": [
 *                                         { "text": "Infinity War" },
 *                                         { "text": "Infinity Gauntlet" },
 *                                         { "text": "Avengers Disassembled" }
 *                                     ]
 *                                 },
 *                                 {
 *                                     "text": "Spiderman",
 *                                     "children": [
 *                                         { "text": "Ultimate Spiderman" }
 *                                     ]
 *                                 },
 *                                 {
 *                                     "text": "Vision",
 *                                     "children": [
 *                                         { "text": "The Vision" }
 *                                     ]
 *                                 },
 *                                 {
 *                                     "text": "X-Men",
 *                                     "children": [
 *                                         { "text": "Gifted" },
 *                                         { "text": "Dark Phoenix Saga" },
 *                                         { "text": "Unstoppable" }
 *                                     ]
 *                                 }
 *                             ]
 *                         }
 *                     ]
 *                 }
 *             }
 *         ]
 *     });
 *
 */
Ext.define('Ext.d3.hierarchy.Pack', {
    extend: 'Ext.d3.hierarchy.Hierarchy',
    xtype: 'd3-pack',
 
    requires: [
        'Ext.d3.Helpers'
    ],
 
    config: {
        componentCls: 'pack',
 
        /**
         * The padding of a node's text inside its container.
         * If the length of the text is such that it can't have the specified padding
         * and still fit into a container, the text will hidden, unless the
         * {@link #clipText} config is set to `false`.
         * It's possible to use negative values for the padding to allow the text to
         * go outside its container by the specified amount.
         * @cfg {Array} textPadding Array of two values: horizontal and vertical padding.
         */
        textPadding: [3, 3],
 
        /**
         * @cfg {Function/Number} nodeValue
         * By default, the area occupied by the node depends on the number
         * of children the node has, but cannot be zero, so that leaf
         * nodes are still visible.
         */
        nodeValue: function(record) {
            return record.childNodes.length + 1;
        },
 
        /**
         * If `false`, the text will always be visible, whether it fits inside its
         * container or not.
         * @cfg {Boolean} [clipText=true]
         */
        clipText: true,
 
        /**
         * @cfg {Boolean} noSizeLayout
         * @private
         */
        noSizeLayout: false
    },
 
    applyLayout: function() {
        return d3.pack();
    },
 
    onNodeSelect: function(node, el) {
        this.callParent(arguments);
 
        // Remove the fill given by the `colorAxis`, so that
        // the CSS style can be used to specify the color
        // of the selection.
        el.select('circle').style('fill', null);
    },
 
    onNodeDeselect: function(node, el) {
        var me = this,
            colorAxis = me.getColorAxis();
 
        me.callParent(arguments);
 
        // Restore the original color.
        // (see 'onNodeSelect' comments).
        el
            .select('circle')
            .style('fill', function(node) {
                return colorAxis.getColor(node);
            });
    },
 
    updateColorAxis: function(colorAxis) {
        var me = this;
 
        if (!me.isConfiguring) {
            me.getRenderedNodes()
                .select('circle')
                .style('fill', function(node) {
                    return colorAxis.getColor(node);
                });
        }
    },
 
    /**
     * @private
     */
    textVisibilityFn: function(selection) {
        // Text padding value is treated as pixels, even if it isn't.
        var me = this,
            textPadding = this.getTextPadding(),
            dx = parseFloat(textPadding[0]) * 2,
            dy = parseFloat(textPadding[1]) * 2;
 
        selection
            .classed(me.defaultCls.invisible, function(node) {
                // The 'text' attribute must be hidden via the 'visibility' attribute,
                // in addition to setting its 'fill-opacity' to 0, as otherwise
                // it will protrude outside from its 'circle', and may interfere with
                // click and other events on adjacent node elements.
                var bbox = this.getBBox(), // 'this' is SVG 'text' element
                    width = node.r - dx,
                    height = node.r - dy;
 
                return (bbox.width > width || bbox.height > height);
            });
    },
 
    addNodes: function(selection) {
        var me = this,
            nodeTransform = me.getNodeTransform(),
            clipText = me.getClipText(),
            labels;
 
        selection
            .call(me.onNodesAdd.bind(me))
            .call(nodeTransform)
            .append('circle');
 
        labels = selection
            .append('text')
            .attr('class', me.defaultCls.label);
 
        if (clipText) {
            labels.call(me.textVisibilityFn.bind(me));
        }
 
        if (Ext.d3.Helpers.noDominantBaseline()) {
            labels.each(function() {
                Ext.d3.Helpers.fakeDominantBaseline(this, 'central', true);
            });
        }
 
        labels.attr('opacity', 0);
    },
 
    updateNodes: function(update, enter) {
        var me = this,
            colorAxis = me.getColorAxis(),
            nodeTransform = me.getNodeTransform(),
            selectionCfg = me.getSelection(),
            nodeText = me.getNodeText(),
            clipText = me.getClipText(),
            selection = update.merge(enter),
            transition = me.layoutTransition,
            text;
 
        selection
            .transition(transition)
            .call(nodeTransform);
 
        selection
            .select('circle')
            .transition(transition)
            .attr('r', function(node) {
                return node.r;
            })
            .style('fill', function(node) {
                // Don't set the color of selected element to allow for CSS styling.
                return node.data === selectionCfg ? null : colorAxis.getColor(node);
            });
 
        text = selection.select('text')
            .text(function(node) {
                return nodeText(me, node);
            });
 
        if (clipText) {
            text.call(me.textVisibilityFn.bind(me));
        }
 
        text.transition(transition).attr('opacity', 1);
 
    },
 
    removeNodes: function(selection) {
        selection
            .attr('opacity', 1)
            .transition(this.layoutTransition)
            .attr('opacity', 0)
            .remove();
    }
});