MplD3 plugin to draw a rectangle that can be manipulated

mpld3_rect_plugin.py

"""
Rectangle Plugin
=================
This is a demo adapted from a `matplotlib gallery example
<http://matplotlib.org/examples/shapes_and_collections/path_patch_demo.html>`_

This example adds a custom D3 plugin allowing the user to drag a
rectangle and adjust the rectangle shape.

Use the toolbar buttons at the bottom-right of the plot to enable zooming
and panning, to reset the view, and to toggle the rectangle plugin.
"""
import matplotlib.pyplot as plt
import mpld3
from mpld3 import plugins


class RectPlugin(plugins.PluginBase):
    JAVASCRIPT = r"""
    mpld3.register_plugin("rect", RectPlugin);
    RectPlugin.prototype = Object.create(mpld3.Plugin.prototype);
    RectPlugin.prototype.constructor = RectPlugin;
    RectPlugin.prototype.requiredProps = [];
    RectPlugin.prototype.defaultProps = {
      button: true,
      enabled: null
    };
    function RectPlugin(fig, props){
      mpld3.Plugin.call(this, fig, props);
      var enabled = this.props.enabled;
      if (this.props.button) {
        var rectButton = mpld3.ButtonFactory({
          buttonID: "rect",
          sticky: true,
          actions: [ "drag" ],
          onActivate: this.activate.bind(this),
          onDeactivate: this.deactivate.bind(this),
          onDraw: function() {
            this.setState(enabled);
          },
          icon: function() {
            return mpld3.icons["brush"];
          }
        });
        this.fig.buttons.push(rectButton);
      }
      this.extentClass = "rectbrush";
    }
    RectPlugin.prototype.activate = function() {
      if (this.enable) this.enable();
    };
    RectPlugin.prototype.deactivate = function() {
      if (this.disable) this.disable();
    };
    RectPlugin.prototype.draw = function() {
      mpld3.insert_css("#" + this.fig.figid + " rect.extent." + this.extentClass, {
        fill: "#fff",
        "fill-opacity": 0,
        stroke: "#999"
      });
      var brush = this.fig.getBrush();
      this.enable = function() {
        this.fig.showBrush(this.extentClass);
        brush.on("brushend", brushend.bind(this));
        this.enabled = true;
      };
      this.disable = function() {
        this.fig.hideBrush(this.extentClass);
        this.enabled = false;
      };
      this.toggle = function() {
        this.enabled ? this.disable() : this.enable();
      };
      function brushend(d) {
        if (this.enabled) {
          var extent = brush.extent();
          if (!brush.empty()) {
          }
        } else {
          d.axes.call(brush.clear());
        }
      }
      this.disable();
    };

    """
    def __init__(self, button=True, enabled=True):
        if enabled is None:
            enabled = not button
        self.dict_ = {"type": "rect",
                      "button": button,
                      "enabled": enabled}

from skimage import data
fig, ax = plt.subplots()
plt.imshow(data.moon(), cmap='gray')

plugins.connect(fig, RectPlugin())
mpld3.show()