GeoExt.tree.LayerParamNode work in progress

LayerParamNode.js

/*
 * Copyright (c) 2008-2015 The Open Source Geospatial Foundation
 *
 * Published under the BSD license.
 * See https://github.com/geoext/geoext2/blob/master/license.txt for the full
 * text of the license.
 */

/*
 * @requires GeoExt/Version.js
 */

/**
 *  A subclass of ``Ext.tree.TreeNode`` that represents a value of a list of
 *  values provided as one of an ``OpenLayers.Layer.HTTPRequest``'s params.
 *  The default iconCls for this node's icon is "gx-tree-layerparam-icon".
 *  
 *  To use this node type in a ``TreePanel`` config, set ``nodeType`` to
 *  "gx_layerparam".
 *
 * @class GeoExt.tree.LayerParamNode
 */

//Ext.define('GeoExt.tree.LayerNode', {

Ext.define('GeoExt.tree.LayerParamNode', {
    //extend: 'Ext.AbstractPlugin',
    extend: 'GeoExt.tree.LayerNode',
    alias: 'plugin.gx_layerparam',
    requires: [
        'GeoExt.Version',
        'GeoExt.tree.Util'
    ],

    /** api: config[layer]
     *  ``OpenLayers.Layer.HTTPRequest|String`` The layer that this node
     *  represents a subnode of. If provided as string, the string has to
     *  match the title of one of the records in the ``layerStore``.
     */

    /** private: property[layer]
     *  ``OpenLayers.Layer.HTTPRequest``
     */
    layer: null,

    /** api: config[layerStore]
     *  :class:`GeoExt.data.LayerStore` Only used if layer is provided as
     *  string. The store where we can find the layer. If not provided, the
     *  store of a map panel found by ``GeoExt.MapPanel::guess`` will be used.
     */

    /** api: config[param]
     *  ``String`` Key for a param (key-value pair in the params object of the
     *  layer) that this node represents an item of. The value can either be an
     *  ``Array`` or a ``String``, delimited by the character (or string)
     *  provided as ``delimiter`` config option.
     */

    /** private: property[param]
     *  ``String``
     */
    param: null,

    /** api: config[item]
     *  ``String`` The param's value's item that this node represents.
     */

    /** private: property[item]
     *  ``String``
     */
    item: null,

    /** api: config[delimiter]
     *  ``String`` Delimiter of the ``param``'s value's items. Default is
     *  ``,`` (comma). If the ``param``'s value is an array, this property
     *  has no effect.
     */

    /** private: property[delimiter]
     *  ``String``
     */
    delimiter: null,

    /** private: property[allItems]
     *  ``Array`` All items in the param value.
     */
    allItems: null,

    /** private: method[constructor]
     *  Private constructor override.
     */
    //constructor: function (attributes) {
    //    var config = attributes || {};
    //    config.iconCls = config.iconCls || "gx-tree-layerparam-icon";
    //    config.text = config.text || config.item;

    //    this.param = config.param;
    //    this.item = config.item;
    //    this.delimiter = config.delimiter || ",";

    //    GeoExt.tree.LayerParamNode.superclass.constructor.apply(this, arguments);

    //    // see if we have a layer already, and set allItems.
    //    if (this.getLayer()) {
    //        this.allItems = this.getItems();
    //    }
    //},

    /**
     * The init method is invoked after initComponent method has been run for
     * the client Component. It performs plugin initialization.
     *
     * @param {Ext.Component} target The client Component which owns this
     *     plugin.
     * @private
     */
    init: function (target) {

        this.callParent(arguments);
        this.param = target.param || target.raw.param;
        this.item = target.item || target.raw.item;
        this.delimiter = target.raw.delimiter || ",";

        // must have a layer already, and set allItems.
        this.layer = target.get('layer');
        this.allItems = this.getItems();

    },

    // override standard layer node edit as it uses
    // https://github.com/geoext/geoext2/blob/master/src/GeoExt/tree/Util.js
    onAfterEdit: function (node, modifiedFields) {
        var me = this;

        if (~Ext.Array.indexOf(modifiedFields, 'checked')) {
            me.onCheckChange();
        }
    },

    /** private: method[render]
     *  http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.NodeInterface
     * No longer has a render method
     */
    //render: function (bulkRender) {

    //    var layer = this.getLayer();

    //    // set allItems now if we weren't able to do so in the c'tor
    //    if (!this.allItems) {
    //        this.allItems = this.getItems();
    //    }

    //    var visibility = layer.getVisibility();
    //    this.attributes.checked = this.attributes.checked === null ?
    //        visibility : this.attributes.checked;
    //    if (this.attributes.checked !== visibility) {
    //        this.onCheckChange(this, !visibility);
    //    }

    //    this.addVisibilityEventHandlers();
    //    this.callParent(arguments);
    //    //GeoExt.tree.LayerParamNode.superclass.render.apply(this, arguments);
    //},

    /** private: method[getItems]
     *  :return: ``Array`` the current items of this node's layer's param (for the WMS layer)
     */
    getItems: function () {

        var paramValue = this.layer.params[this.param];
        return paramValue instanceof Array ?
            paramValue :
            (paramValue ? paramValue.split(this.delimiter) : []);
    },

    /** private: method[createParams]
     *  :param items: ``Array``
     *  :return: ``Object`` The params object to pass to mergeNewParams
     */
    createParams: function (items) {
        var params = {};
        params[this.param] = this.layer.params[this.param] instanceof Array ?
            items :
            items.join(this.delimiter);
        return params;
    },

    /** private: method[addVisibilityHandlers]
     *  Adds handlers that sync the checkbox state with the layer's visibility
     *  state
     */
    //addVisibilityEventHandlers: function () {
    //    this.layer.events.on({
    //        "visibilitychanged": this.onLayerVisibilityChanged,
    //        scope: this
    //    });
    //    this.on({
    //        "checkchange": this.onCheckChange,
    //        scope: this
    //    });
    //},

    /** private: method[onLayerVisibilityChanged]
     *  Handler for visibilitychanged events on the layer.
     */
    onLayerVisibilityChanged: function () {

        // the GeoExt tree panel now adds checkchange to
        // all nodes

        // https://github.com/geoext/geoext2/blob/cf670259d8b3503f191cafca3de5e6cf55d63556/src/GeoExt/tree/Panel.js

        if (this.getItems().length === 0) {
            this.layer.mergeNewParams(this.createParams(this.allItems));
        }


        var node = this.target;
        var visible = this.layer.getVisibility();
        if (visible && this.getItems().indexOf(this.item) !== -1) {
            node.set('checked', true);
            //this.getUI().toggleCheck(true);
        }
        if (!visible) {
            this.layer.mergeNewParams(this.createParams([]));
            node.set('checked', false);
            //this.getUI().toggleCheck(false);
        }

        // Must prevent the unchecking of radio buttons


    },

    /** private: method[onCheckChange]
     *  :param node: :class:`GeoExt.tree.LayerParamNode``
     *  :param checked: ``Boolean``
     *
     *  Handler for checkchange events.
     */
    onCheckChange: function () {


        var node = this.target,
    checked = this.target.get('checked');

        var layer = node.get('layer');

        //if (checked != layer.getVisibility()) {
        //    node._visibilityChanging = true;
        //    var layer = node.get('layer');

        //    layer.setVisibility(checked);
        //    delete node._visibilityChanging;
        //}
        //this.enforceOneVisible();


        var newItems = [];
        var curItems = this.getItems();
        var visible = layer.getVisibility();
        // if the layer is invisible, and a subnode is checked for the first
        // time, we need to pretend that no subnode param items are set.
        if (checked === true && visible === false &&
                                curItems.length === this.allItems.length) {
            curItems = [];

        }
        //Ext.each(this.allItems, function (item) {
        //    if ((item !== this.item && curItems.indexOf(item) !== -1) ||
        //                    (checked === true && item === this.item)) {
        //        newItems.push(item);
        //    }
        //}, this);

        Ext.each(this.allItems, function (item) {
            if ((item !== this.item && curItems.indexOf(item) !== -1) ||
                            (checked === true && item === this.item)) {
                newItems.push(item);
            }
        }, this);


        var visible = (newItems.length > 0);
        // if there is something to display, we want to update the params
        // before the layer is turned on
        if (visible) {
            layer.mergeNewParams(this.createParams(newItems));
        }

        if (visible !== layer.getVisibility()) {
            node._visibilityChanging = true;
            layer.setVisibility(visible);
            delete node._visibilityChanging;
        }

        // if there is nothing to display, we want to update the params
        // when the layer is turned off, so we don't fire illegal requests
        // (i.e. param value being empty)
        if (!visible) {
            layer.mergeNewParams(this.createParams([]));
        }
    }

    /** private: method[destroy]
     */
    //destroy: function () {
    //    var layer = this.layer;
    //    if (layer instanceof OpenLayers.Layer) {
    //        layer.events.un({
    //            "visibilitychanged": this.onLayerVisibilityChanged,
    //            scope: this
    //        });
    //    }
    //    delete this.layer;

    //    this.un("checkchange", this.onCheckChange, this);

    //    this.callParent(arguments);
    //    //GeoExt.tree.LayerNode.superclass.destroy.apply(this, arguments);
    //}
});