Object2D.js.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>JSDoc: Source: Object2D.js</title>
  6. <script src="scripts/prettify/prettify.js"> </script>
  7. <script src="scripts/prettify/lang-css.js"> </script>
  8. <!--[if lt IE 9]>
  9. <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  10. <![endif]-->
  11. <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
  12. <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
  13. </head>
  14. <body>
  15. <div id="main">
  16. <h1 class="page-title">Source: Object2D.js</h1>
  17. <section>
  18. <article>
  19. <pre class="prettyprint source linenums"><code>"use strict";
  20. import {Vector2} from "./math/Vector2.js";
  21. import {Matrix} from "./math/Matrix.js";
  22. import {UUID} from "./math/UUID.js";
  23. /**
  24. * Base 2D object class, implements all the object positioning and scalling features.
  25. *
  26. * @class
  27. */
  28. function Object2D()
  29. {
  30. /**
  31. * UUID of the object.
  32. */
  33. this.uuid = UUID.generate();
  34. /**
  35. * List of children objects attached to the object.
  36. */
  37. this.children = [];
  38. /**
  39. * Parent object, the object position is affected by its parent position.
  40. */
  41. this.parent = null;
  42. /**
  43. * Position of the object.
  44. */
  45. this.position = new Vector2(0, 0);
  46. /**
  47. * Scale of the object.
  48. */
  49. this.scale = new Vector2(1, 1);
  50. /**
  51. * Rotation of the object relative to its center.
  52. */
  53. this.rotation = 0.0;
  54. /**
  55. * Indicates if the object is visible.
  56. */
  57. this.visible = true;
  58. /**
  59. * Layer of this object, objects are sorted by layer value.
  60. *
  61. * Lower layer value is draw first.
  62. */
  63. this.layer = 0;
  64. /**
  65. * Local transformation matrix applied to the object.
  66. */
  67. this.matrix = new Matrix();
  68. /**
  69. * Global transformation matrix multiplied by the parent matrix.
  70. *
  71. * Used to transform the object before projecting into screen coordinates.
  72. */
  73. this.globalMatrix = new Matrix();
  74. /**
  75. * Inverse of the global matrix.
  76. *
  77. * Used to convert pointer input points into object coordinates.
  78. */
  79. this.inverseGlobalMatrix = new Matrix();
  80. /**
  81. * If true the matrix is updated before rendering the object.
  82. */
  83. this.matrixNeedsUpdate = true;
  84. /**
  85. * Indicates if its possible to drag the object around.
  86. *
  87. * If true the onPointerDrag callback is used to update the state of the object.
  88. */
  89. this.draggable = true;
  90. /**
  91. * Flag indicating if the pointer is inside of the element.
  92. *
  93. * Used to control object event.
  94. */
  95. this.pointerInside = false;
  96. /**
  97. * Flag to indicate if the object is currently being dragged.
  98. */
  99. this.beingDragged = false;
  100. }
  101. /**
  102. * Traverse the object tree and run a function for all objects.
  103. *
  104. * @param callback Callback function that receives the object as parameter.
  105. */
  106. Object2D.prototype.traverse = function(callback)
  107. {
  108. callback(this);
  109. var children = this.children;
  110. for(var i = 0; i &lt; children.length; i++)
  111. {
  112. children[i].traverse(callback);
  113. }
  114. };
  115. /**
  116. * Attach a children to the object.
  117. *
  118. * @param object Object to attach to this object.
  119. */
  120. Object2D.prototype.add = function(object)
  121. {
  122. object.parent = this;
  123. this.children.push(object);
  124. };
  125. /**
  126. * Remove object from the children list.
  127. *
  128. * @param object Object to be removed.
  129. */
  130. Object2D.prototype.remove = function(object)
  131. {
  132. var index = this.children.indexOf(object);
  133. if(index !== -1)
  134. {
  135. this.children[index].parent = null;
  136. this.children.splice(index, 1)
  137. }
  138. };
  139. /**
  140. * Check if a point is inside of the object.
  141. */
  142. Object2D.prototype.isInside = function(point)
  143. {
  144. return false;
  145. };
  146. /**
  147. * Update the transformation matrix of the object.
  148. */
  149. Object2D.prototype.updateMatrix = function(context)
  150. {
  151. if(this.matrixNeedsUpdate)
  152. {
  153. this.matrix.compose(this.position.x, this.position.y, this.scale.x, this.scale.y, this.rotation);
  154. this.globalMatrix.copy(this.matrix);
  155. if(this.parent !== null)
  156. {
  157. this.globalMatrix.premultiply(this.parent.globalMatrix);
  158. }
  159. this.inverseGlobalMatrix = this.globalMatrix.getInverse()
  160. //this.matrixNeedsUpdate = false;
  161. }
  162. };
  163. /**
  164. * Draw the object into the canvas.
  165. *
  166. * Has to be implemented by underlying classes.
  167. *
  168. * @param context Canvas 2d drawing context.
  169. */
  170. Object2D.prototype.draw = function(context){};
  171. /**
  172. * Callback method called every time before the object is draw into the canvas.
  173. *
  174. * Can be used to run preparation code, move the object, etc.
  175. */
  176. Object2D.prototype.onUpdate = null;
  177. /**
  178. * Callback method called when the pointer enters the object.
  179. *
  180. * Receives (pointer, viewport) as arguments.
  181. */
  182. Object2D.prototype.onPointerEnter = null;
  183. /**
  184. * Callback method called when the was inside of the object and leaves the object.
  185. *
  186. * Receives (pointer, viewport) as arguments.
  187. */
  188. Object2D.prototype.onPointerLeave = null;
  189. /**
  190. * Callback method while the pointer is over (inside) of the object.
  191. *
  192. * Receives (pointer, viewport) as arguments.
  193. */
  194. Object2D.prototype.onPointerOver = null;
  195. /**
  196. * Callback method while the object is being dragged across the screen.
  197. *
  198. * Receives (pointer, viewport, delta) as arguments. Delta is the movement of the pointer already translated into local object coordinates.
  199. */
  200. Object2D.prototype.onPointerDrag = null;
  201. /**
  202. * Callback method called while the pointer button is pressed.
  203. *
  204. * Receives (pointer, viewport) as arguments.
  205. */
  206. Object2D.prototype.onButtonPressed = null;
  207. /**
  208. * Callback method called when the pointer button is pressed down (single time).
  209. */
  210. Object2D.prototype.onButtonDown = null;
  211. /**
  212. * Callback method called when the pointer button is released (single time).
  213. */
  214. Object2D.prototype.onButtonUp = null;
  215. export {Object2D};
  216. </code></pre>
  217. </article>
  218. </section>
  219. </div>
  220. <nav>
  221. <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EventManager.html">EventManager</a></li><li><a href="Object2D.html">Object2D</a></li><li><a href="Renderer.html">Renderer</a></li><li><a href="Viewport.html">Viewport</a></li></ul>
  222. </nav>
  223. <br class="clear">
  224. <footer>
  225. Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Mon Jun 03 2019 12:31:58 GMT+0100 (Western European Summer Time)
  226. </footer>
  227. <script> prettyPrint(); </script>
  228. <script src="scripts/linenumber.js"> </script>
  229. </body>
  230. </html>