root/sandbox/fvanderbiest/geoext.ux/ux/Measure/lib/GeoExt.ux/Measure.js

/**
 * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
 * 
 * Published under the BSD license.
 * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
 * of the license.
 */

Ext.namespace("GeoExt.ux")

/*
 * @requires GeoExt/widgets/Action.js
 */

/** api: (define)
 *  module = GeoExt.ux
 *  class = Measure
 */

/** api: constructor
 *  .. class:: Measure
 * 
 *  A GeoExt.Action configured with an OpenLayers.Control.Measure
 *  JSBuild: need to include OpenLayers/Control/Measure.js, OpenLayers/StyleMap.js,
 *  OpenLayers/Style.js, OpenLayers/Rule.js, OpenLayers/Handler.js
 */
GeoExt.ux.Measure = Ext.extend(GeoExt.Action, {

    /** api: config[styleMap]
     *  ``OpenLayers.StyleMap`` Optional StyleMap for the sketches
     */
    
    /** private: property[tip]
     *  ``Ext.Tip`` The displayed tip.
     */
    tip: null,

    /** api: config[template]
     *  ``String`` | ``Ext.XTemplate`` HTML template, or Ext.XTemplate used to display the measure.
     */
    /** api: property[template]
     *  ``Ext.XTemplate`` The template to display the measure.
     */
    template: null,
     
    /** api: config[decimals]
     *  ``Integer`` The number of decimals for the displayed values.
     *    Defaults to 2.
     */

    /** private: method[constructor]
     */
    constructor: function(handler, config) {
        config.control = this.buildControl({
            handler: handler, 
            styleMap: config.styleMap || this.styleMap()
        });
        delete config.styleMap;
        if (typeof(config.template) == "string") {
            this.template = new Ext.XTemplate(config.template, {
                decimals: config.decimals || 2,
                compiled: true
            });
        } else if (config.template instanceof Ext.XTemplate) {
            this.template = config.template;
        }
        delete config.template;
        delete config.decimals;
        arguments.callee.superclass.constructor.call(this, config);
    },

    /** private: method[buildControl]
     *  Private method to build the Measure control.
     *
     *  :param options ``Object`` A hash with keys:
     *         - handler: a reference to the OpenLayers.Handler class.
     *         - styleMap: an OpenLayers.StyleMap for sketches.
     *
     *  :return: ``OpenLayers.Control.Measure`` The configured control.
     */
    buildControl: function(options) {
        var listeners = {
            "measure": OpenLayers.Function.bind(this.display, this),
            "deactivate": OpenLayers.Function.bind(this.cleanup, this),
            "measurepartial": OpenLayers.Function.bind(this.cleanup, this)
        };
        return new OpenLayers.Control.Measure(
            options.handler, {
                persist: true,
                eventListeners: listeners,
                handlerOptions: {
                    layerOptions: {
                        styleMap: options.styleMap
                    }
                }
            }
        );
    },
    
    /** private: method[cleanup]
     *  Private method to destroy the tip.
     */
    cleanup: function() {
        if (this.tip) {
            this.tip.destroy();
            this.tip = null;
        }
    },
    
    /** private: method[makeString]
     *  Private method to build the HTML string.
     *
     *  :param event ``Object`` The event object.
     *
     *  :return: ``String`` The HTML string.
     */
    makeString: function(event) {
        return this.template.apply(event);
    },

    /** private: method[display]
     *  Private method to create and display the tip.
     *
     *  :param event ``Object`` The event object.
     */
    display: function(event) {
        this.cleanup();
        this.tip = new Ext.Tip({
            html: this.makeString(event),
            closable: true,
            draggable: false,
            listeners: {
                hide: function() {
                    this.control.cancel();
                    this.cleanup();
                },
                scope: this
            }
        });
        Ext.getBody().on("mousemove", function(e) {
            this.tip.showAt(e.getXY());
        }, this, {
            single: true
        });
    },

    /** private: method[styleMap]
     *  Private method to build the OpenLayers StyleMap.
     *
     *  :return: ``OpenLayers.StyleMap`` The StyleMap.
     */
    styleMap: function() {
        var sketchSymbolizers = {
            "Point": {
                pointRadius: 4,
                graphicName: "square",
                fillColor: "white",
                fillOpacity: 1,
                strokeWidth: 1,
                strokeOpacity: 1,
                strokeColor: "#333333"
            },
            "Line": {
                strokeWidth: 2,
                strokeOpacity: 1,
                strokeColor: "#666666",
                strokeDashstyle: "dash"
            },
            "Polygon": {
                strokeWidth: 2,
                strokeOpacity: 1,
                strokeColor: "#666666",
                fillColor: "white",
                fillOpacity: 0.3
            }
        };
        return new OpenLayers.StyleMap({
            "default": new OpenLayers.Style(null, {
                rules: [new OpenLayers.Rule({symbolizer: sketchSymbolizers})]
            })
        });
    }
});