<!DOCTYPE html>
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<link rel="import" href="/base/bbox2.html">
<link rel="import" href="/base/math.html">
<link rel="import" href="/base/quad.html">
<link rel="import" href="/base/raf.html">
<link rel="import" href="/base/rect.html">
<link rel="import" href="/base/settings.html">
<link rel="import" href="/ui/base/camera.html">
<link rel="import" href="/ui/base/mouse_mode_selector.html">
<link rel="import" href="/ui/base/mouse_tracker.html">
<link rel="import" href="/ui/base/utils.html">

<style>
* /deep/ quad-stack-view {
  display: block;
  float: left;
  height: 100%;
  overflow: hidden;
  position: relative; /* For the absolute positioned mouse-mode-selector */
  width: 100%;
}

* /deep/ quad-stack-view > #header {
  position: absolute;
  font-size: 70%;
  top: 10px;
  left: 10px;
  width: 800px;
}
* /deep/ quad-stack-view > #stacking-distance-slider {
  position: absolute;
  font-size: 70%;
  top: 10px;
  right: 10px;
}

* /deep/ quad-stack-view > #chrome-left {
  content: url('../images/chrome-left.png');
  display: none;
}

* /deep/ quad-stack-view > #chrome-mid {
  content: url('../images/chrome-mid.png');
  display: none;
}

* /deep/ quad-stack-view > #chrome-right {
  content: url('../images/chrome-right.png');
  display: none;
}
</style>

<template id='quad-stack-view-template'>
  <div id="header"></div>
  <input id="stacking-distance-slider" type="range" min=1 max=400 step=1>
  </input>
  <canvas id='canvas'></canvas>
  <img id='chrome-left'/>
  <img id='chrome-mid'/>
  <img id='chrome-right'/>
</template>

<script>
'use strict';

/**
 * @fileoverview QuadStackView controls the content and viewing angle a
 * QuadStack.
 */
tr.exportTo('tr.ui.b', function() {
  var THIS_DOC = document.currentScript.ownerDocument;

  var constants = {};
  constants.IMAGE_LOAD_RETRY_TIME_MS = 500;
  constants.SUBDIVISION_MINIMUM = 1;
  constants.SUBDIVISION_RECURSION_DEPTH = 3;
  constants.SUBDIVISION_DEPTH_THRESHOLD = 100;
  constants.FAR_PLANE_DISTANCE = 10000;

  // Care of bckenney@ via
  // http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
  function drawTexturedTriangle(ctx, img, p0, p1, p2, t0, t1, t2) {
    var tmp_p0 = [p0[0], p0[1]];
    var tmp_p1 = [p1[0], p1[1]];
    var tmp_p2 = [p2[0], p2[1]];
    var tmp_t0 = [t0[0], t0[1]];
    var tmp_t1 = [t1[0], t1[1]];
    var tmp_t2 = [t2[0], t2[1]];

    ctx.beginPath();
    ctx.moveTo(tmp_p0[0], tmp_p0[1]);
    ctx.lineTo(tmp_p1[0], tmp_p1[1]);
    ctx.lineTo(tmp_p2[0], tmp_p2[1]);
    ctx.closePath();

    tmp_p1[0] -= tmp_p0[0];
    tmp_p1[1] -= tmp_p0[1];
    tmp_p2[0] -= tmp_p0[0];
    tmp_p2[1] -= tmp_p0[1];

    tmp_t1[0] -= tmp_t0[0];
    tmp_t1[1] -= tmp_t0[1];
    tmp_t2[0] -= tmp_t0[0];
    tmp_t2[1] -= tmp_t0[1];

    var det = 1 / (tmp_t1[0] * tmp_t2[1] - tmp_t2[0] * tmp_t1[1]),

        // linear transformation
        a = (tmp_t2[1] * tmp_p1[0] - tmp_t1[1] * tmp_p2[0]) * det,
        b = (tmp_t2[1] * tmp_p1[1] - tmp_t1[1] * tmp_p2[1]) * det,
        c = (tmp_t1[0] * tmp_p2[0] - tmp_t2[0] * tmp_p1[0]) * det,
        d = (tmp_t1[0] * tmp_p2[1] - tmp_t2[0] * tmp_p1[1]) * det,

        // translation
        e = tmp_p0[0] - a * tmp_t0[0] - c * tmp_t0[1],
        f = tmp_p0[1] - b * tmp_t0[0] - d * tmp_t0[1];

    ctx.save();
    ctx.transform(a, b, c, d, e, f);
    ctx.clip();
    ctx.drawImage(img, 0, 0);
    ctx.restore();
  }

  function drawTriangleSub(
      ctx, img, p0, p1, p2, t0, t1, t2, opt_recursion_depth) {
    var depth = opt_recursion_depth || 0;

    // We may subdivide if we are not at the limit of recursion.
    var subdivisionIndex = 0;
    if (depth < constants.SUBDIVISION_MINIMUM) {
      subdivisionIndex = 7;
    } else if (depth < constants.SUBDIVISION_RECURSION_DEPTH) {
      if (Math.abs(p0[2] - p1[2]) > constants.SUBDIVISION_DEPTH_THRESHOLD)
        subdivisionIndex += 1;
      if (Math.abs(p0[2] - p2[2]) > constants.SUBDIVISION_DEPTH_THRESHOLD)
        subdivisionIndex += 2;
      if (Math.abs(p1[2] - p2[2]) > constants.SUBDIVISION_DEPTH_THRESHOLD)
        subdivisionIndex += 4;
    }

    // These need to be created every time, since temporaries
    // outside of the scope will be rewritten in recursion.
    var p01 = vec4.create();
    var p02 = vec4.create();
    var p12 = vec4.create();
    var t01 = vec2.create();
    var t02 = vec2.create();
    var t12 = vec2.create();

    // Calculate the position before w-divide.
    for (var i = 0; i < 2; ++i) {
      p0[i] *= p0[2];
      p1[i] *= p1[2];
      p2[i] *= p2[2];
    }

    // Interpolate the 3d position.
    for (var i = 0; i < 4; ++i) {
      p01[i] = (p0[i] + p1[i]) / 2;
      p02[i] = (p0[i] + p2[i]) / 2;
      p12[i] = (p1[i] + p2[i]) / 2;
    }

    // Re-apply w-divide to the original points and the interpolated ones.
    for (var i = 0; i < 2; ++i) {
      p0[i] /= p0[2];
      p1[i] /= p1[2];
      p2[i] /= p2[2];

      p01[i] /= p01[2];
      p02[i] /= p02[2];
      p12[i] /= p12[2];
    }

    // Interpolate the texture coordinates.
    for (var i = 0; i < 2; ++i) {
      t01[i] = (t0[i] + t1[i]) / 2;
      t02[i] = (t0[i] + t2[i]) / 2;
      t12[i] = (t1[i] + t2[i]) / 2;
    }

    // Based on the index, we subdivide the triangle differently.
    // Assuming the triangle is p0, p1, p2 and points between i j
    // are represented as pij (that is, a point between p2 and p0
    // is p02, etc), then the new triangles are defined by
    // the 3rd 4th and 5th arguments into the function.
    switch (subdivisionIndex) {
      case 1:
        drawTriangleSub(ctx, img, p0, p01, p2, t0, t01, t2, depth + 1);
        drawTriangleSub(ctx, img, p01, p1, p2, t01, t1, t2, depth + 1);
        break;
      case 2:
        drawTriangleSub(ctx, img, p0, p1, p02, t0, t1, t02, depth + 1);
        drawTriangleSub(ctx, img, p1, p02, p2, t1, t02, t2, depth + 1);
        break;
      case 3:
        drawTriangleSub(ctx, img, p0, p01, p02, t0, t01, t02, depth + 1);
        drawTriangleSub(ctx, img, p02, p01, p2, t02, t01, t2, depth + 1);
        drawTriangleSub(ctx, img, p01, p1, p2, t01, t1, t2, depth + 1);
        break;
      case 4:
        drawTriangleSub(ctx, img, p0, p12, p2, t0, t12, t2, depth + 1);
        drawTriangleSub(ctx, img, p0, p1, p12, t0, t1, t12, depth + 1);
        break;
      case 5:
        drawTriangleSub(ctx, img, p0, p01, p2, t0, t01, t2, depth + 1);
        drawTriangleSub(ctx, img, p2, p01, p12, t2, t01, t12, depth + 1);
        drawTriangleSub(ctx, img, p01, p1, p12, t01, t1, t12, depth + 1);
        break;
      case 6:
        drawTriangleSub(ctx, img, p0, p12, p02, t0, t12, t02, depth + 1);
        drawTriangleSub(ctx, img, p0, p1, p12, t0, t1, t12, depth + 1);
        drawTriangleSub(ctx, img, p02, p12, p2, t02, t12, t2, depth + 1);
        break;
      case 7:
        drawTriangleSub(ctx, img, p0, p01, p02, t0, t01, t02, depth + 1);
        drawTriangleSub(ctx, img, p01, p12, p02, t01, t12, t02, depth + 1);
        drawTriangleSub(ctx, img, p01, p1, p12, t01, t1, t12, depth + 1);
        drawTriangleSub(ctx, img, p02, p12, p2, t02, t12, t2, depth + 1);
        break;
      default:
        // In the 0 case and all other cases, we simply draw the triangle.
        drawTexturedTriangle(ctx, img, p0, p1, p2, t0, t1, t2);
        break;
    }
  }

  // Created to avoid creating garbage when doing bulk transforms.
  var tmp_vec4 = vec4.create();
  function transform(transformed, point, matrix, viewport) {
    vec4.set(tmp_vec4, point[0], point[1], 0, 1);
    vec4.transformMat4(tmp_vec4, tmp_vec4, matrix);

    var w = tmp_vec4[3];
    if (w < 1e-6) w = 1e-6;

    transformed[0] = ((tmp_vec4[0] / w) + 1) * viewport.width / 2;
    transformed[1] = ((tmp_vec4[1] / w) + 1) * viewport.height / 2;
    transformed[2] = w;
  }

  function drawProjectedQuadBackgroundToContext(
      quad, p1, p2, p3, p4, ctx, quadCanvas) {
    if (quad.imageData) {
      quadCanvas.width = quad.imageData.width;
      quadCanvas.height = quad.imageData.height;
      quadCanvas.getContext('2d').putImageData(quad.imageData, 0, 0);
      var quadBBox = new tr.b.BBox2();
      quadBBox.addQuad(quad);
      var iw = quadCanvas.width;
      var ih = quadCanvas.height;
      drawTriangleSub(
          ctx, quadCanvas,
          p1, p2, p4,
          [0, 0], [iw, 0], [0, ih]);
      drawTriangleSub(
          ctx, quadCanvas,
          p2, p3, p4,
          [iw, 0], [iw, ih], [0, ih]);
    }

    if (quad.backgroundColor) {
      ctx.fillStyle = quad.backgroundColor;
      ctx.beginPath();
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
      ctx.fill();
    }
  }

  function drawProjectedQuadOutlineToContext(
      quad, p1, p2, p3, p4, ctx, quadCanvas) {
    ctx.beginPath();
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p4[0], p4[1]);
    ctx.closePath();
    ctx.save();
    if (quad.borderColor)
      ctx.strokeStyle = quad.borderColor;
    else
      ctx.strokeStyle = 'rgb(128,128,128)';

    if (quad.shadowOffset) {
      ctx.shadowColor = 'rgb(0, 0, 0)';
      ctx.shadowOffsetX = quad.shadowOffset[0];
      ctx.shadowOffsetY = quad.shadowOffset[1];
      if (quad.shadowBlur)
        ctx.shadowBlur = quad.shadowBlur;
    }

    if (quad.borderWidth)
      ctx.lineWidth = quad.borderWidth;
    else
      ctx.lineWidth = 1;

    ctx.stroke();
    ctx.restore();
  }

  function drawProjectedQuadSelectionOutlineToContext(
      quad, p1, p2, p3, p4, ctx, quadCanvas) {
    if (!quad.upperBorderColor)
      return;

    ctx.lineWidth = 8;
    ctx.strokeStyle = quad.upperBorderColor;

    ctx.beginPath();
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.lineTo(p4[0], p4[1]);
    ctx.closePath();
    ctx.stroke();
  }

  function drawProjectedQuadToContext(
      passNumber, quad, p1, p2, p3, p4, ctx, quadCanvas) {
    if (passNumber === 0) {
      drawProjectedQuadBackgroundToContext(
          quad, p1, p2, p3, p4, ctx, quadCanvas);
    } else if (passNumber === 1) {
      drawProjectedQuadOutlineToContext(
          quad, p1, p2, p3, p4, ctx, quadCanvas);
    } else if (passNumber === 2) {
      drawProjectedQuadSelectionOutlineToContext(
          quad, p1, p2, p3, p4, ctx, quadCanvas);
    } else {
      throw new Error('Invalid pass number');
    }
  }

  var tmp_p1 = vec3.create();
  var tmp_p2 = vec3.create();
  var tmp_p3 = vec3.create();
  var tmp_p4 = vec3.create();
  function transformAndProcessQuads(
      matrix, viewport, quads, numPasses, handleQuadFunc, opt_arg1, opt_arg2) {

    for (var passNumber = 0; passNumber < numPasses; passNumber++) {
      for (var i = 0; i < quads.length; i++) {
        var quad = quads[i];
        transform(tmp_p1, quad.p1, matrix, viewport);
        transform(tmp_p2, quad.p2, matrix, viewport);
        transform(tmp_p3, quad.p3, matrix, viewport);
        transform(tmp_p4, quad.p4, matrix, viewport);
        handleQuadFunc(passNumber, quad,
                       tmp_p1, tmp_p2, tmp_p3, tmp_p4,
                       opt_arg1, opt_arg2);
      }
    }
  }

  /**
   * @constructor
   */
  var QuadStackView = tr.ui.b.define('quad-stack-view');

  QuadStackView.prototype = {
    __proto__: HTMLUnknownElement.prototype,

    decorate: function() {
      this.className = 'quad-stack-view';

      var node = tr.ui.b.instantiateTemplate('#quad-stack-view-template',
                                          THIS_DOC);
      this.appendChild(node);
      this.updateHeaderVisibility_();
      this.canvas_ = this.querySelector('#canvas');
      this.chromeImages_ = {
        left: this.querySelector('#chrome-left'),
        mid: this.querySelector('#chrome-mid'),
        right: this.querySelector('#chrome-right')
      };

      var stackingDistanceSlider = this.querySelector(
          '#stacking-distance-slider');
      stackingDistanceSlider.value = tr.b.Settings.get(
          'quadStackView.stackingDistance', 45);
      stackingDistanceSlider.addEventListener(
          'change', this.onStackingDistanceChange_.bind(this));
      stackingDistanceSlider.addEventListener(
          'input', this.onStackingDistanceChange_.bind(this));

      this.trackMouse_();

      this.camera_ = new tr.ui.b.Camera(this.mouseModeSelector_);
      this.camera_.addEventListener('renderrequired',
          this.onRenderRequired_.bind(this));
      this.cameraWasReset_ = false;
      this.camera_.canvas = this.canvas_;

      this.viewportRect_ = tr.b.Rect.fromXYWH(0, 0, 0, 0);

      this.pixelRatio_ = window.devicePixelRatio || 1;
    },

    updateHeaderVisibility_: function() {
      if (this.headerText)
        this.querySelector('#header').style.display = '';
      else
        this.querySelector('#header').style.display = 'none';
    },

    get headerText() {
      return this.querySelector('#header').textContent;
    },

    set headerText(headerText) {
      this.querySelector('#header').textContent = headerText;
      this.updateHeaderVisibility_();
    },

    onStackingDistanceChange_: function(e) {
      tr.b.Settings.set('quadStackView.stackingDistance',
                        this.stackingDistance);
      this.scheduleRender();
      e.stopPropagation();
    },

    get stackingDistance() {
      return this.querySelector('#stacking-distance-slider').value;
    },

    get mouseModeSelector() {
      return this.mouseModeSelector_;
    },

    get camera() {
      return this.camera_;
    },

    set quads(q) {
      this.quads_ = q;
      this.scheduleRender();
    },

    set deviceRect(rect) {
      if (!rect || rect.equalTo(this.deviceRect_))
        return;

      this.deviceRect_ = rect;
      this.camera_.deviceRect = rect;
      this.chromeQuad_ = undefined;
    },

    resize: function() {
      if (!this.offsetParent)
        return true;

      var width = parseInt(window.getComputedStyle(this.offsetParent).width);
      var height = parseInt(window.getComputedStyle(this.offsetParent).height);
      var rect = tr.b.Rect.fromXYWH(0, 0, width, height);

      if (rect.equalTo(this.viewportRect_))
        return false;

      this.viewportRect_ = rect;
      this.style.width = width + 'px';
      this.style.height = height + 'px';
      this.canvas_.style.width = width + 'px';
      this.canvas_.style.height = height + 'px';
      this.canvas_.width = this.pixelRatio_ * width;
      this.canvas_.height = this.pixelRatio_ * height;
      if (!this.cameraWasReset_) {
        this.camera_.resetCamera();
        this.cameraWasReset_ = true;
      }
      return true;
    },

    readyToDraw: function() {
      // If src isn't set yet, set it to ensure we can use
      // the image to draw onto a canvas.
      if (!this.chromeImages_.left.src) {
        var leftContent =
            window.getComputedStyle(this.chromeImages_.left).content;
        leftContent = leftContent.replace(/url\((.*)\)/, '$1');

        var midContent =
            window.getComputedStyle(this.chromeImages_.mid).content;
        midContent = midContent.replace(/url\((.*)\)/, '$1');

        var rightContent =
            window.getComputedStyle(this.chromeImages_.right).content;
        rightContent = rightContent.replace(/url\((.*)\)/, '$1');

        this.chromeImages_.left.src = leftContent;
        this.chromeImages_.mid.src = midContent;
        this.chromeImages_.right.src = rightContent;
      }

      // If all of the images are loaded (height > 0), then
      // we are ready to draw.
      return (this.chromeImages_.left.height > 0) &&
             (this.chromeImages_.mid.height > 0) &&
             (this.chromeImages_.right.height > 0);
    },

    get chromeQuad() {
      if (this.chromeQuad_)
        return this.chromeQuad_;

      // Draw the chrome border into a separate canvas.
      var chromeCanvas = document.createElement('canvas');
      var offsetY = this.chromeImages_.left.height;

      chromeCanvas.width = this.deviceRect_.width;
      chromeCanvas.height = this.deviceRect_.height + offsetY;

      var leftWidth = this.chromeImages_.left.width;
      var midWidth = this.chromeImages_.mid.width;
      var rightWidth = this.chromeImages_.right.width;

      var chromeCtx = chromeCanvas.getContext('2d');
      chromeCtx.drawImage(this.chromeImages_.left, 0, 0);

      chromeCtx.save();
      chromeCtx.translate(leftWidth, 0);

      // Calculate the scale of the mid image.
      var s = (this.deviceRect_.width - leftWidth - rightWidth) / midWidth;
      chromeCtx.scale(s, 1);

      chromeCtx.drawImage(this.chromeImages_.mid, 0, 0);
      chromeCtx.restore();

      chromeCtx.drawImage(
          this.chromeImages_.right, leftWidth + s * midWidth, 0);

      // Construct the quad.
      var chromeRect = tr.b.Rect.fromXYWH(
          this.deviceRect_.x,
          this.deviceRect_.y - offsetY,
          this.deviceRect_.width,
          this.deviceRect_.height + offsetY);
      var chromeQuad = tr.b.Quad.fromRect(chromeRect);
      chromeQuad.stackingGroupId = this.maxStackingGroupId_ + 1;
      chromeQuad.imageData = chromeCtx.getImageData(
          0, 0, chromeCanvas.width, chromeCanvas.height);
      chromeQuad.shadowOffset = [0, 0];
      chromeQuad.shadowBlur = 5;
      chromeQuad.borderWidth = 3;
      this.chromeQuad_ = chromeQuad;
      return this.chromeQuad_;
    },

    scheduleRender: function() {
      if (this.redrawScheduled_)
        return false;
      this.redrawScheduled_ = true;
      tr.b.requestAnimationFrame(this.render, this);
    },

    onRenderRequired_: function(e) {
      this.scheduleRender();
    },

    stackTransformAndProcessQuads_: function(
        numPasses, handleQuadFunc, includeChromeQuad, opt_arg1, opt_arg2) {
      var mv = this.camera_.modelViewMatrix;
      var p = this.camera_.projectionMatrix;

      var viewport = tr.b.Rect.fromXYWH(
          0, 0, this.canvas_.width, this.canvas_.height);

      // Calculate the quad stacks.
      var quadStacks = [];
      for (var i = 0; i < this.quads_.length; ++i) {
        var quad = this.quads_[i];
        var stackingId = quad.stackingGroupId || 0;
        while (stackingId >= quadStacks.length)
          quadStacks.push([]);

        quadStacks[stackingId].push(quad);
      }

      var mvp = mat4.create();
      this.maxStackingGroupId_ = quadStacks.length;
      var effectiveStackingDistance =
          this.stackingDistance * this.camera_.stackingDistanceDampening;

      // Draw the quad stacks, raising each subsequent level.
      mat4.multiply(mvp, p, mv);
      for (var i = 0; i < quadStacks.length; ++i) {
        transformAndProcessQuads(mvp, viewport, quadStacks[i],
                                 numPasses, handleQuadFunc,
                                 opt_arg1, opt_arg2);

        mat4.translate(mv, mv, [0, 0, effectiveStackingDistance]);
        mat4.multiply(mvp, p, mv);
      }

      if (includeChromeQuad && this.deviceRect_) {
        transformAndProcessQuads(mvp, viewport, [this.chromeQuad],
                                 numPasses, drawProjectedQuadToContext,
                                 opt_arg1, opt_arg2);
      }
    },

    render: function() {
      this.redrawScheduled_ = false;

      if (!this.readyToDraw()) {
        setTimeout(this.scheduleRender.bind(this),
                   constants.IMAGE_LOAD_RETRY_TIME_MS);
        return;
      }

      if (!this.quads_)
        return;

      var canvasCtx = this.canvas_.getContext('2d');
      if (!this.resize())
        canvasCtx.clearRect(0, 0, this.canvas_.width, this.canvas_.height);

      var quadCanvas = document.createElement('canvas');
      this.stackTransformAndProcessQuads_(
          3, drawProjectedQuadToContext, true,
          canvasCtx, quadCanvas);
      quadCanvas.width = 0; // Hack: Frees the quadCanvas' resources.
    },

    trackMouse_: function() {
      this.mouseModeSelector_ = document.createElement(
          'tr-ui-b-mouse-mode-selector');
      this.mouseModeSelector_.targetElement = this.canvas_;
      this.mouseModeSelector_.supportedModeMask =
          tr.ui.b.MOUSE_SELECTOR_MODE.SELECTION |
          tr.ui.b.MOUSE_SELECTOR_MODE.PANSCAN |
          tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM |
          tr.ui.b.MOUSE_SELECTOR_MODE.ROTATE;
      this.mouseModeSelector_.mode = tr.ui.b.MOUSE_SELECTOR_MODE.PANSCAN;
      this.mouseModeSelector_.pos = {x: 0, y: 100};
      this.appendChild(this.mouseModeSelector_);
      this.mouseModeSelector_.settingsKey =
          'quadStackView.mouseModeSelector';

      this.mouseModeSelector_.setModifierForAlternateMode(
          tr.ui.b.MOUSE_SELECTOR_MODE.ROTATE, tr.ui.b.MODIFIER.SHIFT);
      this.mouseModeSelector_.setModifierForAlternateMode(
          tr.ui.b.MOUSE_SELECTOR_MODE.PANSCAN, tr.ui.b.MODIFIER.SPACE);
      this.mouseModeSelector_.setModifierForAlternateMode(
          tr.ui.b.MOUSE_SELECTOR_MODE.ZOOM, tr.ui.b.MODIFIER.CMD_OR_CTRL);

      this.mouseModeSelector_.addEventListener('updateselection',
          this.onSelectionUpdate_.bind(this));
      this.mouseModeSelector_.addEventListener('endselection',
          this.onSelectionUpdate_.bind(this));
    },

    extractRelativeMousePosition_: function(e) {
      var br = this.canvas_.getBoundingClientRect();
      return [
        this.pixelRatio_ * (e.clientX - this.canvas_.offsetLeft - br.left),
        this.pixelRatio_ * (e.clientY - this.canvas_.offsetTop - br.top)
      ];
    },

    onSelectionUpdate_: function(e) {
      var mousePos = this.extractRelativeMousePosition_(e);
      var res = [];
      function handleQuad(passNumber, quad, p1, p2, p3, p4) {
        if (tr.b.pointInImplicitQuad(mousePos, p1, p2, p3, p4))
          res.push(quad);
      }
      this.stackTransformAndProcessQuads_(1, handleQuad, false);
      var e = new tr.b.Event('selectionchange');
      e.quads = res;
      this.dispatchEvent(e);
    }
  };

  return {
    QuadStackView: QuadStackView
  };
});
</script>