Source: core/drawing/tool/toolMagnifier.js

  1. /**
  2.  * @fileoverview A class implementing a magnifier tool for
  3.  * a drawing canvas.
  4.  * @private
  5.  */
  7. goog.provide('xrx.drawing.tool.Magnifier');
  11. goog.require('goog.dom.DomHelper');
  12. goog.require('goog.events');
  13. goog.require('goog.events.EventType');
  14. goog.require('goog.fx.Dragger');
  15. goog.require('goog.math.AffineTransform');
  16. goog.require('goog.math.Rect');
  17. goog.require('goog.style');
  18. goog.require('xrx.canvas');
  19. goog.require('xrx.drawing.tool.Tool');
  20. goog.require('xrx.engine.Engines');
  21. goog.require('xrx.svg');
  22. goog.require('xrx.vml');
  26. /**
  27.  * @constructor
  28.  * @private
  29.  */
  30. xrx.drawing.tool.Magnifier = function(drawing, element, canvas, group, image) {
  32.   goog.base(this, drawing, element, canvas);
  34.   this.group_ = group;
  36.   this.image_ = image;
  38.   this.width_ = 110;
  40.   this.height_ = 100;
  42.   this.ctm_ = new goog.math.AffineTransform();
  43. };
  44. goog.inherits(xrx.drawing.tool.Magnifier, xrx.drawing.tool.Tool);
  48. xrx.drawing.tool.Magnifier.prototype.hide = function() {
  49.   goog.style.setStyle(this.element_, 'display', 'none');
  50.   this.isActive_ = false;
  51. };
  55. xrx.drawing.tool.Magnifier.prototype.show = function() {
  56.   goog.style.setStyle(this.element_, 'display', 'block');
  57.   this.isActive_ = true;
  58. };
  62. xrx.drawing.tool.Magnifier.prototype.reset = function() {
  63.   var canvas = this.canvas_;
  64.   canvas.setWidth(this.width_);
  65.   canvas.setHeight(this.height_);
  66.   goog.style.setStyle(this.element_, 'position', 'absolute');
  67.   goog.style.setStyle(this.element_, 'display', 'block');
  68.   goog.style.setStyle(this.element_, 'z-index', '1001');
  69.   goog.style.setStyle(this.element_, 'left', '50px');
  70.   goog.style.setStyle(this.element_, 'top', '50px');
  71.   goog.style.setStyle(this.element_, 'border', 'solid black 4px');
  72.   this.group_.draw();
  73. };
  77. xrx.drawing.tool.Magnifier.prototype.handleDrag_ = function(e, dragger) {
  78.   var ctm;
  79.   var eventPoint = [dragger.deltaX + (this.width_ / 2), dragger.deltaY];
  80.   var point = new Array(2);
  81.   var viewboxCtm = this.drawing_.getViewbox().getCTM()
  82.   var engine = this.drawing_.getEngine();
  84.   viewboxCtm.createInverse().transform(eventPoint, 0, point, 0, 1);
  85.   ctm = this.ctm_.createInverse().translate(-point[0], -point[1]);
  87.   // TODO: same as in xrx.drawing.Drawing
  88.   if (engine.typeOf(xrx.engine.CANVAS)) {
  89.     var c = this.canvas_.getElement();
  90.     var ctx = c.getContext('2d');
  91.     ctx.save();
  92.     ctx.fillStyle = 'white';
  93.     ctx.fillRect(0, 0, c.width, c.height);
  94.     ctx.beginPath();
  95.     xrx.canvas.setTransform_(ctx, ctm);
  96.     this.group_.draw();
  97.     ctx.closePath();
  98.     ctx.restore();
  99.   } else if (engine.typeOf(xrx.engine.SVG)) {
  100.     xrx.svg.render(this.group_.getElement(), ctm);
  101.   } else if (engine.typeOf(xrx.engine.VML)) {
  102.     xrx.vml.render(this.group_.getRaphael(), ctm);
  103.   } else {
  104.     throw Error('Unknown engine.');
  105.   }
  106. };
  110. xrx.drawing.tool.Magnifier.prototype.registerDrag_ = function() {
  111.   var size = goog.style.getSize(this.drawing_.getElement());
  112.   var limits = new goog.math.Rect(0, 0, size.width, size.height);
  113.   var dragger = new goog.fx.Dragger(this.element_, this.element_, limits); // TODO: limits (IE < 9)
  114.   goog.events.listen(dragger, goog.events.EventType.DRAG, function(e) {
  115.     this.handleDrag_(e, dragger);
  116.   }, false, this);
  117. };
  121. xrx.drawing.tool.Magnifier.create = function(drawing) {
  122.   var graphics = drawing.getGraphics();
  123.   var backgroundImage = drawing.getLayerBackground().getImage();
  124.   var div = goog.dom.createElement('div');
  125.   var canvas = graphics.Canvas.create(drawing.getElement());
  126.   var group = graphics.Group.create(canvas);
  127.   var image = graphics.Image.create(backgroundImage.getImage(), canvas);
  128.   var magnifier = new xrx.drawing.tool.Magnifier(drawing, div, canvas, group, image);
  130.   goog.dom.appendChild(div, canvas.getElement());
  131.   canvas.addChild(group);
  132.   group.addChildren(image);
  133.   goog.dom.appendChild(drawing.getElement(), div);
  135.   magnifier.reset();
  136.   magnifier.registerDrag_();
  138.   return magnifier;
  139. };