michaelwooley/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Adding Rectangles</title>


  <style>
    rect.rect-main {
      stroke: #d32f2f;
      stroke-width: 2;
      fill-opacity: 0;
      stroke-opacity: 0.5;
    }

    div.sample-div {
      position: absolute;
      top: 10%;
      left: 10%;
    }

  </style>
</head>

<body>
  <div class="sample-div">
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script>
  <script type="text/javascript">
    function SVGCanvas(options) {
      // An SVG-based drawing
      var self = this;

      // Define the global SVG options
      this.options = options || {};
      this.options.h = options.h || 250; // SVG Height and Width
      this.options.w = options.w || 250;
      this.options.addTo = options.addTo || 'body'; // Where to add the SVG (a css selector)
      this.options.addBorderRect = options.addBorderRect || true; // Whether to add a border around the SVG.

      // Make the SVG
      this.svg = d3.select(this.options.addTo)
        .append('svg')
        .attr('height', this.options.h)
        .attr('width', this.options.w)
        .attr('class', 'display-svg');

      // Add border if requested
      if (this.options.addBorderRect) {
        this.svg.append('rect')
          .attr('height', this.options.h)
          .attr('width', this.options.w)
          .attr('stroke', 'black')
          .attr('stroke-width', 4)
          .attr('opacity', 0.25)
          .attr('fill-opacity', 0.0)
          .attr('class', 'border-rect');
      }

      // Rectangles
      this.Rect = { // Current Selection
        'r': null,
        'x0': null,
        'y0': null,
      };
      this.Rects = []; // Collection

      // Actions/Listeners
      this.addRect = this.makeAddRect(); // Methods for adding rectangles

      // On drag: call addRect methods
      this.svg.call(
        d3.drag()
        .on('start', this.addRect.start)
        .on('drag', this.addRect.drag)
        .on('end', this.addRect.end)
      );

    }

    SVGCanvas.prototype.mouseOffset = function() {
      // Get the current location of mouse along with other info (to be added to later)
      var m = d3.event;
      return m;
    }

    SVGCanvas.prototype.makeAddRect = function() {
      // Methods for adding rectangles to the svg.
      var self = this;

      start = function() {
        //Add a rectangle
        // 1. Get mouse location in SVG
        var m = self.mouseOffset();
        self.Rect.x0 = m.x;
        self.Rect.y0 = m.y;
        // 2. Make a rectangle
        self.Rect.r = self.svg //self.zoomG
          .append('g')
          .append('rect') // An SVG `rect` element
          .attr('x', self.Rect.x0) // Position at mouse location
          .attr('y', self.Rect.y0)
          .attr('width', 1) // Make it tiny
          .attr('height', 1)
          .attr('class', 'rect-main') // Assign a class for formatting purposes
        ;
      }

      drag = function() {
        // What to do when mouse is dragged
        // 1. Get the new mouse position
        var m = self.mouseOffset();
        // 2. Update the attributes of the rectangle
        self.Rect.r.attr('x', Math.min(self.Rect.x0, m.x))
          .attr('y', Math.min(self.Rect.y0, m.y))
          .attr('width', Math.abs(self.Rect.x0 - m.x))
          .attr('height', Math.abs(self.Rect.y0 - m.y));
      }

      end = function() {
        // What to do on mouseup
        self.Rects.push(self.Rect);
      }

      return {
        start: start,
        drag: drag,
        end: end
      };

    }

    /**********
        SETUP
    **********/
    options = {
      h: 300,
      w: 500,
      addTo: '.sample-div',
      addBorderRect: true,
    }

    var c = new SVGCanvas(options);

  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Adding Rectangles</title>


	<style>
	rect.rect-main {
	stroke: #d32f2f;
	stroke-width: 2;
	fill-opacity: 0;
	stroke-opacity: 0.5;
	}

	div.sample-div {
	position: absolute;
	top: 10%;
	left: 10%;
	}

	</style>
	</head>

	<body>
	<div class="sample-div">
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script>
	<script type="text/javascript">
	function SVGCanvas(options) {
	// An SVG-based drawing
	var self = this;

	// Define the global SVG options
	this.options = options \|\| {};
	this.options.h = options.h \|\| 250; // SVG Height and Width
	this.options.w = options.w \|\| 250;
	this.options.addTo = options.addTo \|\| 'body'; // Where to add the SVG (a css selector)
	this.options.addBorderRect = options.addBorderRect \|\| true; // Whether to add a border around the SVG.

	// Make the SVG
	this.svg = d3.select(this.options.addTo)
	.append('svg')
	.attr('height', this.options.h)
	.attr('width', this.options.w)
	.attr('class', 'display-svg');

	// Add border if requested
	if (this.options.addBorderRect) {
	this.svg.append('rect')
	.attr('height', this.options.h)
	.attr('width', this.options.w)
	.attr('stroke', 'black')
	.attr('stroke-width', 4)
	.attr('opacity', 0.25)
	.attr('fill-opacity', 0.0)
	.attr('class', 'border-rect');
	}

	// Rectangles
	this.Rect = { // Current Selection
	'r': null,
	'x0': null,
	'y0': null,
	};
	this.Rects = []; // Collection

	// Actions/Listeners
	this.addRect = this.makeAddRect(); // Methods for adding rectangles

	// On drag: call addRect methods
	this.svg.call(
	d3.drag()
	.on('start', this.addRect.start)
	.on('drag', this.addRect.drag)
	.on('end', this.addRect.end)
	);

	}

	SVGCanvas.prototype.mouseOffset = function() {
	// Get the current location of mouse along with other info (to be added to later)
	var m = d3.event;
	return m;
	}

	SVGCanvas.prototype.makeAddRect = function() {
	// Methods for adding rectangles to the svg.
	var self = this;

	start = function() {
	//Add a rectangle
	// 1. Get mouse location in SVG
	var m = self.mouseOffset();
	self.Rect.x0 = m.x;
	self.Rect.y0 = m.y;
	// 2. Make a rectangle
	self.Rect.r = self.svg //self.zoomG
	.append('g')
	.append('rect') // An SVG `rect` element
	.attr('x', self.Rect.x0) // Position at mouse location
	.attr('y', self.Rect.y0)
	.attr('width', 1) // Make it tiny
	.attr('height', 1)
	.attr('class', 'rect-main') // Assign a class for formatting purposes
	;
	}

	drag = function() {
	// What to do when mouse is dragged
	// 1. Get the new mouse position
	var m = self.mouseOffset();
	// 2. Update the attributes of the rectangle
	self.Rect.r.attr('x', Math.min(self.Rect.x0, m.x))
	.attr('y', Math.min(self.Rect.y0, m.y))
	.attr('width', Math.abs(self.Rect.x0 - m.x))
	.attr('height', Math.abs(self.Rect.y0 - m.y));
	}

	end = function() {
	// What to do on mouseup
	self.Rects.push(self.Rect);
	}

	return {
	start: start,
	drag: drag,
	end: end
	};

	}

	/**********
	SETUP
	**********/
	options = {
	h: 300,
	w: 500,
	addTo: '.sample-div',
	addBorderRect: true,
	}

	var c = new SVGCanvas(options);

	</script>
	</body>

	</html>