Source: core/drawing/shape/shapeCircle.js

  1. /**
  2.  * @fileoverview A class representing an engine-independent
  3.  * hoverable, selectable, modifiable and creatable circle shape.
  4.  */
  6. goog.provide('xrx.shape.Circle');
  7. goog.provide('xrx.shape.CircleCreatable');
  8. goog.provide('xrx.shape.CircleHoverable');
  9. goog.provide('xrx.shape.CircleModifiable');
  10. goog.provide('xrx.shape.CircleSelectable');
  14. goog.require('xrx.geometry.Circle');
  15. goog.require('xrx.shape.Creatable');
  16. goog.require('xrx.shape.Geometry');
  17. goog.require('xrx.shape.Hoverable');
  18. goog.require('xrx.shape.Modifiable');
  19. goog.require('xrx.shape.Selectable');
  23. /**
  24.  * A class representing an engine-independent hoverable, selectable,
  25.  * modifiable and creatable circle shape.
  26.  * @param {xrx.drawing.Drawing} drawing The parent drawing canvas.
  27.  * @constructor
  28.  * @extends {xrx.shape.Style}
  29.  */
  30. xrx.shape.Circle = function(drawing) {
  32.   goog.base(this, drawing, new xrx.geometry.Circle());
  34.   /**
  35.    * The engine element.
  36.    * @type {(xrx.canvas.Circle|xrx.svg.Circle|xrx.vml.Circle)}
  37.    * @private
  38.    */
  39.   this.engineElement_ = this.drawing_.getEngine().createCircle();
  40. };
  41. goog.inherits(xrx.shape.Circle, xrx.shape.Geometry);
  45. /**
  46.  * Returns the center point of this circle.
  47.  * @return {Array<number>}
  48.  */
  49. xrx.shape.Circle.prototype.getCenter = function() {
  50.   return [this.geometry_.cx, this.geometry_.cy];
  51. };
  55. /**
  56.  * Sets the center point of this circle.
  57.  * @param {number} cx The X coordinate of the center point.
  58.  * @param {number} cy The Y coordinate of the center point.
  59.  */
  60. xrx.shape.Circle.prototype.setCenter = function(cx, cy) {
  61.   this.geometry_.cx = cx;
  62.   this.geometry_.cy = cy;
  63. };
  67. /**
  68.  * Returns the radius of this circle.
  69.  * @return {number} The radius.
  70.  */
  71. xrx.shape.Circle.prototype.getRadius = function() {
  72.   return this.geometry_.r;
  73. };
  77. /**
  78.  * Sets the radius of this circle.
  79.  * @param {number} r The radius.
  80.  */
  81. xrx.shape.Circle.prototype.setRadius = function(r) {
  82.   this.geometry_.r = r;
  83. };
  87. /**
  88.  * Returns the coordinates of this circle. We assume the center point.
  89.  * @return {Array<Array<number>>} The coordinates.
  90.  * @private
  91.  */
  92. xrx.shape.Circle.prototype.getCoords = function() {
  93.   return [this.getCenter()];
  94. };
  98. /**
  99.  * Sets the coordinates of this circle. We assume the center point.
  100.  * @param {Array<Array<number>>} coords The coordinate.
  101.  * @private
  102.  */
  103. xrx.shape.Circle.prototype.setCoords = function(coords) {
  104.   this.setCenter(coords[0][0], coords[0][1]);
  105. };
  109. /**
  110.  * Sets the x coordinate of this circle. We assume the center point.
  111.  * @param {number} coords The x coordinate.
  112.  * @private
  113.  */
  114. xrx.shape.Circle.prototype.setCoordX = function(x) {
  115.   this.geometry_.cx = x;
  116. };
  120. /**
  121.  * Sets the y coordinate of this circle. We assume the center point.
  122.  * @param {number} coords The y coordinate.
  123.  * @private
  124.  */
  125. xrx.shape.Circle.prototype.setCoordY = function(y) {
  126.   this.geometry_.cy = y;
  127. };
  131. /**
  132.  * Draws this circle shape.
  133.  * @private
  134.  */
  135. xrx.shape.Circle.prototype.draw = function() {
  136.   this.startDrawing_();
  137.   var center = this.getCenter();
  138.   this.engineElement_.draw(center[0], center[1], this.getRadius(),
  139.       this.getRenderingFillColor(), this.getRenderingFillOpacity(),
  140.       this.getRenderingStrokeColor(), this.getRenderingStrokeWidth());
  141.   this.finishDrawing_();
  142. };
  146. /**
  147.  * Returns a helper shape that makes this shape hoverable.
  148.  * @return {xrx.shape.CircleHoverable} The hoverable circle shape.
  149.  */
  150. xrx.shape.Circle.prototype.getHoverable = function() {
  151.   if (!this.hoverable_) this.hoverable_ = new xrx.shape.CircleHoverable(this);
  152.   return this.hoverable_;
  153. };
  157. /**
  158.  * Returns a helper shape that makes this shape selectable.
  159.  * @return {xrx.shape.CircleSelectable} The selectable circle shape.
  160.  */
  161. xrx.shape.Circle.prototype.getSelectable = function() {
  162.   if (!this.selectable_) this.selectable_ = new xrx.shape.CircleSelectable(this);
  163.   return this.selectable_;
  164. };
  168. /**
  169.  * Returns a helper shape that makes this shape modifiable.
  170.  * @return {xrx.shape.CircleModifiable} The modifiable circle shape.
  171.  */
  172. xrx.shape.Circle.prototype.getModifiable = function() {
  173.   if (!this.modifiable_) this.modifiable_ = new xrx.shape.CircleModifiable(this);
  174.   return this.modifiable_;
  175. };
  179. /**
  180.  * Returns a helper shape that makes this shape creatable.
  181.  * @return {xrx.shape.CircleCreatable} The creatable circle shape.
  182.  */
  183. xrx.shape.Circle.prototype.getCreatable = function() {
  184.   if (!this.creatable_) this.creatable_ = new xrx.shape.CircleCreatable(this);
  185.   return this.creatable_;
  186. };
  190. /**
  191.  * Disposes this circle shape.
  192.  */
  193. xrx.shape.Circle.prototype.disposeInternal = function() {
  194.   goog.base(this, 'disposeInternal');
  195. };
  199. /**
  200.  * A class representing a hoverable circle shape.
  201.  * @param {xrx.shape.Circle} circle The parent circle shape.
  202.  * @constructor
  203.  * @private
  204.  */
  205. xrx.shape.CircleHoverable = function(circle) {
  207.   goog.base(this, circle);
  208. };
  209. goog.inherits(xrx.shape.CircleHoverable, xrx.shape.Hoverable);
  213. /**
  214.  * Disposes this hoverable circle shape.
  215.  */
  216. xrx.shape.CircleHoverable.prototype.disposeInternal = function() {
  217.   goog.base(this, 'disposeInternal');
  218. };
  223. /**
  224.  * A class representing a selectable circle shape.
  225.  * @param {xrx.shape.Circle} circle The circle to be selected.
  226.  * @constructor
  227.  * @private
  228.  */
  229. xrx.shape.CircleSelectable = function(circle) {
  231.   goog.base(this, circle);
  232. };
  233. goog.inherits(xrx.shape.CircleSelectable, xrx.shape.Selectable);
  237. /**
  238.  * Disposes this selectable circle shape.
  239.  * @private
  240.  */
  241. xrx.shape.CircleSelectable.prototype.disposeInternal = function() {
  242.   goog.base(this, 'disposeInternal');
  243. };
  247. /**
  248.  * A class representing a modifiable circle shape.
  249.  * @param {xrx.shape.Circle} circle The circle to be modified.
  250.  * @constructor
  251.  * @private
  252.  */
  253. xrx.shape.CircleModifiable = function(circle) {
  255.   goog.base(this, circle);
  257.   this.init_();
  258. };
  259. goog.inherits(xrx.shape.CircleModifiable, xrx.shape.Modifiable);
  263. /**
  264.  * @private
  265.  */
  266. xrx.shape.CircleModifiable.prototype.setCoords = function(coords) {
  267.   this.shape_.setCoords(coords);
  268.   this.dragger_[0].setCoordX(coords[0][0] + this.shape_.getRadius());
  269.   this.dragger_[0].setCoordY(coords[0][1]);
  270. };
  274. /**
  275.  * @private
  276.  */
  277. xrx.shape.CircleModifiable.prototype.setCoordAt = function(pos, coord) {
  278.   this.shape_.setRadius(Math.abs(coord[0] - this.shape_.getCenter()[0]));
  279.   this.dragger_[0].setCoordX(coord[0]);
  280. };
  284. /**
  285.  * @private
  286.  */
  287. xrx.shape.CircleModifiable.prototype.move = function(distX, distY) {
  288.   var coords = this.shape_.getCoordsCopy();
  289.   coords[0][0] += distX;
  290.   coords[0][1] += distY;
  291.   this.setCoords(coords);
  292. };
  296. /**
  297.  * @private
  298.  */
  299. xrx.shape.CircleModifiable.prototype.init_ = function() {
  300.   var center = this.shape_.getCenter();
  301.   var radius = this.shape_.getRadius();
  302.   var dragger = new xrx.shape.Dragger(this, 0);
  303.   dragger.setCoords([[center[0] + radius, center[1]]]);
  304.   this.setDragger([dragger]);
  305. };
  309. /**
  310.  * Disposes this modifiable circle shape.
  311.  * @private
  312.  */
  313. xrx.shape.CircleModifiable.prototype.disposeInternal = function() {
  314.   goog.base(this, 'disposeInternal');
  315. };
  319. /**
  320.  * A class representing a creatable circle shape.
  321.  * @param {xrx.shape.Circle} circle The target circle to be created.
  322.  * @constructor
  323.  * @private
  324.  */
  325. xrx.shape.CircleCreatable = function(circle) {
  327.   goog.base(this, circle, new xrx.shape.Circle(circle.getDrawing()));
  329.   /**
  330.    * Center point helper.
  331.    * @type {Array<number>}
  332.    */
  333.   this.point_ = new Array(2);
  334. };
  335. goog.inherits(xrx.shape.CircleCreatable, xrx.shape.Creatable);
  339. /**
  340.  * Returns the coordinates of the circle currently created.
  341.  * @return Array<number> The coordinates.
  342.  * @private
  343.  */
  344. xrx.shape.CircleCreatable.prototype.getCoords = function() {
  345.   return this.preview_.getCoords();
  346. };
  350. /**
  351.  * Handles down gestures.
  352.  * @param {goog.events.BrowserEvent} e The browser event.
  353.  * @param {xrx.drawing.Cursor} cursor The drawing cursor.
  354.  * @private
  355.  */
  356. xrx.shape.CircleCreatable.prototype.handleDown = function(e, cursor) {
  357.   var point = cursor.getPointTransformed();
  358.   this.point_[0] = point[0];
  359.   this.point_[1] = point[1];
  360.   this.preview_.setCenter(point[0], point[1]);
  361.   this.preview_.setRadius(0);
  362.   this.target_.getDrawing().eventShapeCreate([this.preview_]);
  363. };
  367. /**
  368.  * Handles <em>move</em> gestures.
  369.  * @param {goog.events.BrowserEvent} e The browser event.
  370.  * @param {xrx.drawing.Cursor} cursor The drawing cursor.
  371.  * @private
  372.  */
  373. xrx.shape.CircleCreatable.prototype.handleMove = function(e, cursor) {
  374.   var point = cursor.getPointTransformed();
  375.   var distX = point[0] - this.point_[0];
  376.   var distY = point[1] - this.point_[1];
  377.   this.preview_.setCenter(point[0] - distX / 2, point[1] - distY / 2);
  378.   this.preview_.setRadius(Math.sqrt(distX * distX + distY * distY) / 2);
  379. };
  383. /**
  384.  * Handles <em>up</em> gestures.
  385.  * @param {goog.events.BrowserEvent} e The browser event.
  386.  * @param {xrx.drawing.Cursor} cursor The drawing cursor.
  387.  * @private
  388.  */
  389. xrx.shape.CircleCreatable.prototype.handleUp = function(e, cursor) {
  390.   var point = cursor.getPointTransformed();
  391.   var circle = new xrx.shape.Circle(this.target_.getDrawing());
  392.   var center = this.preview_.getCenter();
  393.   circle.setStyle(this.target_);
  394.   circle.setCenter(center[0], center[1]);
  395.   circle.setRadius(this.preview_.getRadius());
  396.   this.target_.getDrawing().eventShapeCreated(circle);
  397. };
  400. /**
  401.  * Disposes this creatable circle shape.
  402.  * @private
  403.  */
  404. xrx.shape.CircleCreatable.prototype.disposeInternal = function() {
  405.   this.point_ = null;
  406.   goog.base(this, 'disposeInternal');
  407. };