Object2D.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. "use strict";
  2. import {Vector2} from "./math/Vector2.js";
  3. import {Matrix} from "./math/Matrix.js";
  4. import {UUID} from "./math/UUID.js";
  5. /**
  6. * Base 2D object class, implements all the object positioning and scalling features.
  7. *
  8. * @class
  9. */
  10. function Object2D()
  11. {
  12. /**
  13. * UUID of the object.
  14. */
  15. this.uuid = UUID.generate();
  16. /**
  17. * List of children objects attached to the object.
  18. */
  19. this.children = [];
  20. /**
  21. * Parent object, the object position is affected by its parent position.
  22. */
  23. this.parent = null;
  24. /**
  25. * Position of the object.
  26. */
  27. this.position = new Vector2(0, 0);
  28. /**
  29. * Scale of the object.
  30. */
  31. this.scale = new Vector2(1, 1);
  32. /**
  33. * Rotation of the object relative to its center.
  34. */
  35. this.rotation = 0.0;
  36. /**
  37. * Indicates if the object is visible.
  38. */
  39. this.visible = true;
  40. /**
  41. * Layer of this object, objects are sorted by layer value.
  42. *
  43. * Lower layer value is draw first.
  44. */
  45. this.layer = 0;
  46. /**
  47. * Local transformation matrix applied to the object.
  48. */
  49. this.matrix = new Matrix();
  50. /**
  51. * Global transformation matrix multiplied by the parent matrix.
  52. *
  53. * Used to transform the object before projecting into screen coordinates.
  54. */
  55. this.globalMatrix = new Matrix();
  56. /**
  57. * Inverse of the global matrix.
  58. *
  59. * Used to convert pointer input points into object coordinates.
  60. */
  61. this.inverseGlobalMatrix = new Matrix();
  62. /**
  63. * If true the matrix is updated before rendering the object.
  64. */
  65. this.matrixNeedsUpdate = true;
  66. /**
  67. * Indicates if its possible to drag the object around.
  68. *
  69. * If true the onPointerDrag callback is used to update the state of the object.
  70. */
  71. this.draggable = true;
  72. /**
  73. * Flag indicating if the pointer is inside of the element.
  74. *
  75. * Used to control object event.
  76. */
  77. this.pointerInside = false;
  78. /**
  79. * Flag to indicate if the object is currently being dragged.
  80. */
  81. this.beingDragged = false;
  82. }
  83. /**
  84. * Traverse the object tree and run a function for all objects.
  85. *
  86. * @param callback Callback function that receives the object as parameter.
  87. */
  88. Object2D.prototype.traverse = function(callback)
  89. {
  90. callback(this);
  91. var children = this.children;
  92. for(var i = 0; i < children.length; i++)
  93. {
  94. children[i].traverse(callback);
  95. }
  96. };
  97. /**
  98. * Attach a children to the object.
  99. *
  100. * @param object Object to attach to this object.
  101. */
  102. Object2D.prototype.add = function(object)
  103. {
  104. object.parent = this;
  105. this.children.push(object);
  106. };
  107. /**
  108. * Remove object from the children list.
  109. *
  110. * @param object Object to be removed.
  111. */
  112. Object2D.prototype.remove = function(object)
  113. {
  114. var index = this.children.indexOf(object);
  115. if(index !== -1)
  116. {
  117. this.children[index].parent = null;
  118. this.children.splice(index, 1)
  119. }
  120. };
  121. /**
  122. * Check if a point is inside of the object.
  123. */
  124. Object2D.prototype.isInside = function(point)
  125. {
  126. return false;
  127. };
  128. /**
  129. * Update the transformation matrix of the object.
  130. */
  131. Object2D.prototype.updateMatrix = function(context)
  132. {
  133. if(this.matrixNeedsUpdate)
  134. {
  135. this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation);
  136. this.globalMatrix.copy(this.matrix);
  137. if(this.parent !== null)
  138. {
  139. this.globalMatrix.premultiply(this.parent.globalMatrix);
  140. }
  141. this.inverseGlobalMatrix = this.globalMatrix.getInverse()
  142. //this.matrixNeedsUpdate = false;
  143. }
  144. };
  145. /**
  146. * Draw the object into the canvas.
  147. *
  148. * Has to be implemented by underlying classes.
  149. *
  150. * @param context Canvas 2d drawing context.
  151. */
  152. Object2D.prototype.draw = function(context){};
  153. /**
  154. * Callback method called every time before the object is draw into the canvas.
  155. *
  156. * Can be used to run preparation code, move the object, etc.
  157. */
  158. Object2D.prototype.onUpdate = null;
  159. /**
  160. * Callback method called when the pointer enters the object.
  161. *
  162. * Receives (pointer, viewport) as arguments.
  163. */
  164. Object2D.prototype.onPointerEnter = null;
  165. /**
  166. * Callback method called when the was inside of the object and leaves the object.
  167. *
  168. * Receives (pointer, viewport) as arguments.
  169. */
  170. Object2D.prototype.onPointerLeave = null;
  171. /**
  172. * Callback method while the pointer is over (inside) of the object.
  173. *
  174. * Receives (pointer, viewport) as arguments.
  175. */
  176. Object2D.prototype.onPointerOver = null;
  177. /**
  178. * Callback method while the object is being dragged across the screen.
  179. *
  180. * Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
  181. */
  182. Object2D.prototype.onPointerDrag = null;
  183. /**
  184. * Callback method called while the pointer button is pressed.
  185. *
  186. * Receives (pointer, viewport) as arguments.
  187. */
  188. Object2D.prototype.onButtonPressed = null;
  189. /**
  190. * Callback method called when the pointer button is pressed down (single time).
  191. */
  192. Object2D.prototype.onButtonDown = null;
  193. /**
  194. * Callback method called when the pointer button is released (single time).
  195. */
  196. Object2D.prototype.onButtonUp = null;
  197. export {Object2D};