Canvas.st 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  1. Object subclass: #CanvasRenderingContext
  2. instanceVariableNames: ''
  3. category: 'Canvas'!
  4. !CanvasRenderingContext methodsFor: 'drawing arcs'!
  5. arcTo: aPoint radius: aNumber startAngle: aNumber2 endAngle: aNumber3 anticlockwise: aBoolean
  6. {'self.arc(aPoint._x(), aPoint._y(), aNumber, aNumber2, aNumber3, aBoolean)'}
  7. !
  8. arcTo: aPoint radius: aNumber
  9. self arcTo: aPoint radius: aNumber startAngle: 0 endAngle: Number pi * 2 anticlockwise: false
  10. ! !
  11. !CanvasRenderingContext methodsFor: 'drawing paths'!
  12. fillStyle: aString
  13. {'self.fillStyle = String(aString)'}
  14. !
  15. beginPath
  16. {'self.beginPath()'}
  17. !
  18. closePath
  19. {'self.closePath()'}
  20. !
  21. fill
  22. {'self.fill()'}
  23. !
  24. stroke
  25. {'self.stroke()'}
  26. !
  27. moveTo: aPoint
  28. {'self.moveTo(aPoint._x(), aPoint._y())'}
  29. !
  30. lineTo: aPoint
  31. {'self.lineTo(aPoint._x(), aPoint._y())'}
  32. !
  33. strokeStyle: aString
  34. {'self.strokeStyle = String(aString)'}
  35. !
  36. lineWidth: aNumber
  37. {'self.lineWidth = aNumber'}
  38. ! !
  39. !CanvasRenderingContext methodsFor: 'drawing rectangles'!
  40. fillRectFrom: aPoint to: anotherPoint
  41. {'self.fillRect(aPoint._x(), aPoint._y(), anotherPoint._x(), anotherPoint._y())'}
  42. !
  43. strokeRectFrom: aPoint to: anotherPoint
  44. {'self.strokeRect(aPoint._x(), aPoint._y(), anotherPoint._x(), anotherPoint._y())'}
  45. !
  46. clearRectFrom: aPoint to: anotherPoint
  47. {'self.fillRect(aPoint._x(), aPoint._y(), anotherPoint._x(), anotherPoint._y())'}
  48. ! !
  49. !CanvasRenderingContext class methodsFor: 'instance creation'!
  50. tagBrush: aTagBrush
  51. {'return aTagBrush._element().getContext(''2d'')'}
  52. ! !
  53. Object subclass: #HTMLCanvas
  54. instanceVariableNames: 'root'
  55. category: 'Canvas'!
  56. !HTMLCanvas methodsFor: '*JQuery'!
  57. appendToJQuery: aJQuery
  58. aJQuery appendElement: root element
  59. ! !
  60. !HTMLCanvas methodsFor: 'accessing'!
  61. root: aTagBrush
  62. root := aTagBrush
  63. !
  64. root
  65. ^root
  66. ! !
  67. !HTMLCanvas methodsFor: 'adding'!
  68. with: anObject
  69. ^self root with: anObject
  70. ! !
  71. !HTMLCanvas methodsFor: 'initialization'!
  72. initialize
  73. super initialize.
  74. root := TagBrush fromString: 'div' canvas: self
  75. ! !
  76. !HTMLCanvas methodsFor: 'tags'!
  77. newTag: aString
  78. ^TagBrush fromString: aString canvas: self
  79. !
  80. tag: aString
  81. ^root addBrush: (self newTag: aString)
  82. !
  83. h1
  84. ^self tag: 'h1'
  85. !
  86. h2
  87. ^self tag: 'h2'
  88. !
  89. h3
  90. ^self tag: 'h3'
  91. !
  92. h4
  93. ^self tag: 'h4'
  94. !
  95. h5
  96. ^self tag: 'h5'
  97. !
  98. h6
  99. ^self tag: 'h6'
  100. !
  101. p
  102. ^self tag: 'p'
  103. !
  104. div
  105. ^self tag: 'div'
  106. !
  107. span
  108. ^self tag: 'span'
  109. !
  110. img
  111. ^self tag: 'img'
  112. !
  113. ul
  114. ^self tag: 'ul'
  115. !
  116. ol
  117. ^self tag: 'ol'
  118. !
  119. li
  120. ^self tag: 'li'
  121. !
  122. table
  123. ^self tag: 'table'
  124. !
  125. tr
  126. ^self tag: 'tr'
  127. !
  128. td
  129. ^self tag: 'td'
  130. !
  131. th
  132. ^self tag: 'th'
  133. !
  134. form
  135. ^self tag: 'form'
  136. !
  137. input
  138. ^self tag: 'input'
  139. !
  140. button
  141. ^self tag: 'button'
  142. !
  143. select
  144. ^self tag: 'select'
  145. !
  146. option
  147. ^self tag: 'option'
  148. !
  149. textarea
  150. ^self tag: 'textarea'
  151. !
  152. a
  153. ^self tag: 'a'
  154. !
  155. canvas
  156. ^self tag: 'canvas'
  157. ! !
  158. Object subclass: #TagBrush
  159. instanceVariableNames: 'canvas element'
  160. category: 'Canvas'!
  161. !TagBrush methodsFor: 'accessing'!
  162. element
  163. ^element
  164. ! !
  165. !TagBrush methodsFor: 'adding'!
  166. contents: anObject
  167. self asJQuery empty.
  168. self append: anObject
  169. !
  170. addBrush: aTagBrush
  171. self appendChild: aTagBrush element.
  172. ^aTagBrush
  173. !
  174. with: anObject
  175. self append: anObject
  176. !
  177. append: anObject
  178. anObject appendToBrush: self
  179. !
  180. appendToBrush: aTagBrush
  181. aTagBrush addBrush: self
  182. !
  183. appendBlock: aBlock
  184. | root |
  185. root := canvas root.
  186. canvas root: self.
  187. aBlock value: canvas.
  188. canvas root: root
  189. !
  190. appendChild: anElement
  191. {'self[''@element''].appendChild(anElement)'}
  192. !
  193. appendString: aString
  194. self appendChild: (self createTextNodeFor: aString)
  195. ! !
  196. !TagBrush methodsFor: 'attributes'!
  197. at: aString put: aValue
  198. {'self[''@element''].setAttribute(aString, aValue)'}
  199. !
  200. removeAt: aString
  201. {'self[''@element''].removeAttribute(aString)'}
  202. !
  203. class: aString
  204. self at: 'class' put: aString
  205. !
  206. id: aString
  207. self at: 'id' put: aString
  208. !
  209. src: aString
  210. self at: 'src' put: aString
  211. !
  212. href: aString
  213. self at: 'href' put: aString
  214. !
  215. title: aString
  216. self at: 'title' put: aString
  217. !
  218. style: aString
  219. self at: 'style' put: aString
  220. ! !
  221. !TagBrush methodsFor: 'converting'!
  222. asJQuery
  223. {'return smalltalk.JQuery._from_(jQuery(self[''@element'']))'}
  224. !
  225. asJQueryDo: aBlock
  226. aBlock value: self asJQuery
  227. ! !
  228. !TagBrush methodsFor: 'events'!
  229. onKeyDown: aBlock
  230. self asJQuery on: 'keydown' do: aBlock
  231. !
  232. onKeyPress: aBlock
  233. self asJQuery on: 'keypress' do: aBlock
  234. !
  235. onKeyUp: aBlock
  236. self asJQuery on: 'keyup' do: aBlock
  237. !
  238. onFocus: aBlock
  239. self asJQuery on: 'focus' do: aBlock
  240. !
  241. onBlur: aBlock
  242. self asJQuery on: 'blur' do: aBlock
  243. !
  244. onChange: aBlock
  245. self asJQuery on: 'change' do: aBlock
  246. !
  247. onClick: aBlock
  248. self asJQuery on: 'click' do: aBlock
  249. ! !
  250. !TagBrush methodsFor: 'initialization'!
  251. initializeFromString: aString canvas: aCanvas
  252. element := self createElementFor: aString.
  253. canvas := aCanvas
  254. ! !
  255. !TagBrush methodsFor: 'private'!
  256. createElementFor: aString
  257. {'return document.createElement(String(aString))'}
  258. !
  259. createTextNodeFor: aString
  260. {'return document.createTextNode(String(aString))'}
  261. ! !
  262. !TagBrush class methodsFor: 'instance creation'!
  263. fromString: aString canvas: aCanvas
  264. ^self new
  265. initializeFromString: aString canvas: aCanvas;
  266. yourself
  267. ! !
  268. Object subclass: #Widget
  269. instanceVariableNames: 'root'
  270. category: 'Canvas'!
  271. !Widget methodsFor: 'accessing'!
  272. root
  273. ^root
  274. ! !
  275. !Widget methodsFor: 'actions'!
  276. alert: aString
  277. {'alert(aString)'}
  278. !
  279. confirm: aString
  280. {'return window.confirm(aString)'}
  281. !
  282. prompt: aString
  283. ^self prompt: aString default: ''
  284. !
  285. prompt: aString default: anotherString
  286. {'return window.prompt(aString, anotherString)'}
  287. !
  288. update
  289. | canvas |
  290. canvas := HTMLCanvas new.
  291. canvas root: self root.
  292. self root asJQuery empty.
  293. self renderOn: canvas
  294. ! !
  295. !Widget methodsFor: 'adding'!
  296. appendToBrush: aTagBrush
  297. self appendToJQuery: aTagBrush asJQuery
  298. !
  299. appendToJQuery: aJQuery
  300. self render.
  301. aJQuery append: self root asJQuery
  302. ! !
  303. !Widget methodsFor: 'rendering'!
  304. render
  305. | canvas |
  306. canvas := HTMLCanvas new.
  307. root := canvas root.
  308. self renderOn: canvas
  309. !
  310. renderOn: html
  311. self
  312. ! !
  313. TagBrush subclass: #CanvasBrush
  314. instanceVariableNames: ''
  315. category: 'Canvas'!
  316. !CanvasBrush methodsFor: 'initialization'!
  317. initializeWithCanvas: aCanvas
  318. canvas := aCanvas
  319. ! !
  320. !CanvasBrush methodsFor: 'private'!
  321. createElement
  322. {'return document.createElement(''canvas'')'}
  323. ! !
  324. !CanvasBrush class methodsFor: 'instance creation'!
  325. canvas: aCanvas
  326. ^self new
  327. initializeWithCanvas: aCanvas;
  328. yourself
  329. ! !
  330. appendToBrush: aTagBrush
  331. aTagBrush append: self asString
  332. !
  333. appendToBrush: aTagBrush
  334. aTagBrush appendBlock: self
  335. !
  336. appendToBrush: aTagBrush
  337. aTagBrush appendString: self
  338. !