UIObject.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. /************************************************************************
  2. * UIObject.js
  3. ************************************************************************
  4. * Copyright (c) 2021 Pedro Tonini Rosenberg Schneider.
  5. *
  6. * This file is part of Pandora.
  7. *
  8. * Pandora is free software: you can redistribute it and/or modify
  9. * it under the terms of the GNU General Public License as published by
  10. * the Free Software Foundation, either version 3 of the License, or
  11. * (at your option) any later version.
  12. *
  13. * Pandora is distributed in the hope that it will be useful,
  14. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16. * GNU General Public License for more details.
  17. *
  18. * You should have received a copy of the GNU General Public License
  19. * along with Pandora. If not, see <https://www.gnu.org/licenses/>.
  20. *************************************************************************/
  21. class UIObject extends GameObject
  22. {
  23. constructor(name)
  24. {
  25. super(name);
  26. this.P5Element = null;
  27. this.visible = true;
  28. this.position = new Vector2(0, 0);
  29. this.size = new Vector2(300, 100);
  30. this.fontSize = STYLE.DEFAULT_FONT_SIZE;
  31. }
  32. connectCallbacks()
  33. {
  34. this.P5Element.mousePressed(this.onMousePressed);
  35. this.P5Element.doubleClicked(this.onDoubleClicked);
  36. this.P5Element.mouseWheel(this.onMouseWheel);
  37. this.P5Element.mouseReleased(this.onMouseReleased);
  38. this.P5Element.mouseClicked(this.onMouseClicked);
  39. this.P5Element.mouseMoved(this.onMouseMoved);
  40. this.P5Element.mouseOver(this.onMouseOver);
  41. this.P5Element.mouseOut(this.onMouseOut);
  42. this.P5Element.touchStarted(this.onTouchStarted);
  43. this.P5Element.touchMoved(this.onTouchMoved);
  44. this.P5Element.touchEnded(this.onTouchEnded);
  45. this.P5Element.dragOver(this.onDragOver);
  46. this.P5Element.dragLeave(this.onDragLeave);
  47. this.P5Element.pandoraObject = this;
  48. }
  49. // Setters
  50. setPosition(x, y)
  51. {
  52. this.position.x = x;
  53. this.position.y = y;
  54. }
  55. setSize(w, h)
  56. {
  57. this.size.x = w;
  58. this.size.y = h;
  59. }
  60. setFontSize(fs)
  61. {
  62. this.fontSize = fs;
  63. }
  64. setVisibility(vis)
  65. {
  66. if (vis) this.P5Element.show();
  67. else this.P5Element.hide();
  68. this.visible = !this.visible;
  69. }
  70. setValue(val)
  71. {
  72. this.P5Element.value(val)
  73. }
  74. setStyle(style)
  75. {
  76. for (const [key, value] of Object.entries(style))
  77. {
  78. this.P5Element.style(`${key}`, value);
  79. }
  80. }
  81. // Getters
  82. getPosition()
  83. {
  84. return this.position;
  85. }
  86. getSize()
  87. {
  88. return this.size;
  89. }
  90. getFontSize()
  91. {
  92. return this.fontSize;
  93. }
  94. getVisibility()
  95. {
  96. return this.visible;
  97. }
  98. getValue()
  99. {
  100. return this.P5Element.value();
  101. }
  102. // Methods
  103. toggleVisibility()
  104. {
  105. this.setVisibility(!this.visible);
  106. }
  107. addChild(child)
  108. {
  109. child.parent = this;
  110. child.parented = true;
  111. this.children.push(child);
  112. child.P5Element.parent(this.P5Element);
  113. }
  114. // Callbacks
  115. draw(delta, db)
  116. {
  117. let ar = db.screenWidth / db.width;
  118. let offsetx = (windowWidth - db.screenWidth) / 2;
  119. let offsety = (windowHeight - db.screenHeight) / 2;
  120. this.P5Element.position(offsetx + this.position.x * ar, offsety + this.position.y * ar);
  121. this.P5Element.size(this.size.x * ar, this.size.y * ar);
  122. this.setStyle(
  123. {
  124. "font-size": `${this.fontSize * ar}px`
  125. });
  126. this._draw(delta, db);
  127. for (let i = 0; i < this.children.length; i++)
  128. this.children[i].draw(delta, db);
  129. }
  130. _onMousePressed()
  131. {
  132. }
  133. _onDoubleClicked()
  134. {
  135. }
  136. _onMouseWheel()
  137. {
  138. }
  139. _onMouseReleased()
  140. {
  141. }
  142. _onMouseClicked()
  143. {
  144. }
  145. _onMouseMoved()
  146. {
  147. }
  148. _onMouseOver()
  149. {
  150. }
  151. _onMouseOut()
  152. {
  153. }
  154. _onTouchStarted()
  155. {
  156. }
  157. _onTouchMoved()
  158. {
  159. }
  160. _onTouchEnded()
  161. {
  162. }
  163. _onDragOver()
  164. {
  165. }
  166. _onDragLeave()
  167. {
  168. }
  169. // -----------------------------------------------
  170. onMousePressed()
  171. {
  172. this.pandoraObject._onMousePressed();
  173. }
  174. onDoubleClicked()
  175. {
  176. this.pandoraObject._onDoubleClicked();
  177. }
  178. onMouseWheel()
  179. {
  180. this.pandoraObject._onMouseWheel();
  181. }
  182. onMouseReleased()
  183. {
  184. this.pandoraObject._onMouseReleased();
  185. }
  186. onMouseClicked()
  187. {
  188. this.pandoraObject._onMouseClicked();
  189. }
  190. onMouseMoved()
  191. {
  192. this.pandoraObject._onMouseMoved();
  193. }
  194. onMouseOver()
  195. {
  196. this.pandoraObject._onMouseOver();
  197. }
  198. onMouseOut()
  199. {
  200. this.pandoraObject._onMouseOut();
  201. }
  202. onTouchStarted()
  203. {
  204. this.pandoraObject._onTouchStarted();
  205. }
  206. onTouchMoved()
  207. {
  208. this.pandoraObject._onTouchMoved();
  209. }
  210. onTouchEnded()
  211. {
  212. this.pandoraObject._onTouchEnded();
  213. }
  214. onDragOver()
  215. {
  216. this.pandoraObject._onDragOver();
  217. }
  218. onDragLeave()
  219. {
  220. this.pandoraObject._onDragLeave();
  221. }
  222. }