mxAbstractCanvas2D.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. * Class: mxAbstractCanvas2D
  7. *
  8. * Base class for all canvases. A description of the public API is available in <mxXmlCanvas2D>.
  9. * All color values of <mxConstants.NONE> will be converted to null in the state.
  10. *
  11. * Constructor: mxAbstractCanvas2D
  12. *
  13. * Constructs a new abstract canvas.
  14. */
  15. function mxAbstractCanvas2D()
  16. {
  17. /**
  18. * Variable: converter
  19. *
  20. * Holds the <mxUrlConverter> to convert image URLs.
  21. */
  22. this.converter = this.createUrlConverter();
  23. this.reset();
  24. };
  25. /**
  26. * Variable: state
  27. *
  28. * Holds the current state.
  29. */
  30. mxAbstractCanvas2D.prototype.state = null;
  31. /**
  32. * Variable: states
  33. *
  34. * Stack of states.
  35. */
  36. mxAbstractCanvas2D.prototype.states = null;
  37. /**
  38. * Variable: path
  39. *
  40. * Holds the current path as an array.
  41. */
  42. mxAbstractCanvas2D.prototype.path = null;
  43. /**
  44. * Variable: rotateHtml
  45. *
  46. * Switch for rotation of HTML. Default is false.
  47. */
  48. mxAbstractCanvas2D.prototype.rotateHtml = true;
  49. /**
  50. * Variable: lastX
  51. *
  52. * Holds the last x coordinate.
  53. */
  54. mxAbstractCanvas2D.prototype.lastX = 0;
  55. /**
  56. * Variable: lastY
  57. *
  58. * Holds the last y coordinate.
  59. */
  60. mxAbstractCanvas2D.prototype.lastY = 0;
  61. /**
  62. * Variable: moveOp
  63. *
  64. * Contains the string used for moving in paths. Default is 'M'.
  65. */
  66. mxAbstractCanvas2D.prototype.moveOp = 'M';
  67. /**
  68. * Variable: lineOp
  69. *
  70. * Contains the string used for moving in paths. Default is 'L'.
  71. */
  72. mxAbstractCanvas2D.prototype.lineOp = 'L';
  73. /**
  74. * Variable: quadOp
  75. *
  76. * Contains the string used for quadratic paths. Default is 'Q'.
  77. */
  78. mxAbstractCanvas2D.prototype.quadOp = 'Q';
  79. /**
  80. * Variable: curveOp
  81. *
  82. * Contains the string used for bezier curves. Default is 'C'.
  83. */
  84. mxAbstractCanvas2D.prototype.curveOp = 'C';
  85. /**
  86. * Variable: closeOp
  87. *
  88. * Holds the operator for closing curves. Default is 'Z'.
  89. */
  90. mxAbstractCanvas2D.prototype.closeOp = 'Z';
  91. /**
  92. * Variable: pointerEvents
  93. *
  94. * Boolean value that specifies if events should be handled. Default is false.
  95. */
  96. mxAbstractCanvas2D.prototype.pointerEvents = false;
  97. /**
  98. * Function: createUrlConverter
  99. *
  100. * Create a new <mxUrlConverter> and returns it.
  101. */
  102. mxAbstractCanvas2D.prototype.createUrlConverter = function()
  103. {
  104. return new mxUrlConverter();
  105. };
  106. /**
  107. * Function: reset
  108. *
  109. * Resets the state of this canvas.
  110. */
  111. mxAbstractCanvas2D.prototype.reset = function()
  112. {
  113. this.state = this.createState();
  114. this.states = [];
  115. };
  116. /**
  117. * Function: createState
  118. *
  119. * Creates the state of the this canvas.
  120. */
  121. mxAbstractCanvas2D.prototype.createState = function()
  122. {
  123. return {
  124. dx: 0,
  125. dy: 0,
  126. scale: 1,
  127. alpha: 1,
  128. fillAlpha: 1,
  129. strokeAlpha: 1,
  130. fillColor: null,
  131. gradientFillAlpha: 1,
  132. gradientColor: null,
  133. gradientAlpha: 1,
  134. gradientDirection: null,
  135. strokeColor: null,
  136. strokeWidth: 1,
  137. dashed: false,
  138. dashPattern: '3 3',
  139. fixDash: false,
  140. lineCap: 'flat',
  141. lineJoin: 'miter',
  142. miterLimit: 10,
  143. fontColor: '#000000',
  144. fontBackgroundColor: null,
  145. fontBorderColor: null,
  146. fontSize: mxConstants.DEFAULT_FONTSIZE,
  147. fontFamily: mxConstants.DEFAULT_FONTFAMILY,
  148. fontStyle: 0,
  149. shadow: false,
  150. shadowColor: mxConstants.SHADOWCOLOR,
  151. shadowAlpha: mxConstants.SHADOW_OPACITY,
  152. shadowDx: mxConstants.SHADOW_OFFSET_X,
  153. shadowDy: mxConstants.SHADOW_OFFSET_Y,
  154. rotation: 0,
  155. rotationCx: 0,
  156. rotationCy: 0
  157. };
  158. };
  159. /**
  160. * Function: format
  161. *
  162. * Rounds all numbers to integers.
  163. */
  164. mxAbstractCanvas2D.prototype.format = function(value)
  165. {
  166. return Math.round(parseFloat(value));
  167. };
  168. /**
  169. * Function: addOp
  170. *
  171. * Adds the given operation to the path.
  172. */
  173. mxAbstractCanvas2D.prototype.addOp = function()
  174. {
  175. if (this.path != null)
  176. {
  177. this.path.push(arguments[0]);
  178. if (arguments.length > 2)
  179. {
  180. var s = this.state;
  181. for (var i = 2; i < arguments.length; i += 2)
  182. {
  183. this.lastX = arguments[i - 1];
  184. this.lastY = arguments[i];
  185. this.path.push(this.format((this.lastX + s.dx) * s.scale));
  186. this.path.push(this.format((this.lastY + s.dy) * s.scale));
  187. }
  188. }
  189. }
  190. };
  191. /**
  192. * Function: rotatePoint
  193. *
  194. * Rotates the given point and returns the result as an <mxPoint>.
  195. */
  196. mxAbstractCanvas2D.prototype.rotatePoint = function(x, y, theta, cx, cy)
  197. {
  198. var rad = theta * (Math.PI / 180);
  199. return mxUtils.getRotatedPoint(new mxPoint(x, y), Math.cos(rad),
  200. Math.sin(rad), new mxPoint(cx, cy));
  201. };
  202. /**
  203. * Function: save
  204. *
  205. * Saves the current state.
  206. */
  207. mxAbstractCanvas2D.prototype.save = function()
  208. {
  209. this.states.push(this.state);
  210. this.state = mxUtils.clone(this.state);
  211. };
  212. /**
  213. * Function: restore
  214. *
  215. * Restores the current state.
  216. */
  217. mxAbstractCanvas2D.prototype.restore = function()
  218. {
  219. if (this.states.length > 0)
  220. {
  221. this.state = this.states.pop();
  222. }
  223. };
  224. /**
  225. * Function: setLink
  226. *
  227. * Sets the current link. Hook for subclassers.
  228. */
  229. mxAbstractCanvas2D.prototype.setLink = function(link)
  230. {
  231. // nop
  232. };
  233. /**
  234. * Function: scale
  235. *
  236. * Scales the current state.
  237. */
  238. mxAbstractCanvas2D.prototype.scale = function(value)
  239. {
  240. this.state.scale *= value;
  241. this.state.strokeWidth *= value;
  242. };
  243. /**
  244. * Function: translate
  245. *
  246. * Translates the current state.
  247. */
  248. mxAbstractCanvas2D.prototype.translate = function(dx, dy)
  249. {
  250. this.state.dx += dx;
  251. this.state.dy += dy;
  252. };
  253. /**
  254. * Function: rotate
  255. *
  256. * Rotates the current state.
  257. */
  258. mxAbstractCanvas2D.prototype.rotate = function(theta, flipH, flipV, cx, cy)
  259. {
  260. // nop
  261. };
  262. /**
  263. * Function: setAlpha
  264. *
  265. * Sets the current alpha.
  266. */
  267. mxAbstractCanvas2D.prototype.setAlpha = function(value)
  268. {
  269. this.state.alpha = value;
  270. };
  271. /**
  272. * Function: setFillAlpha
  273. *
  274. * Sets the current solid fill alpha.
  275. */
  276. mxAbstractCanvas2D.prototype.setFillAlpha = function(value)
  277. {
  278. this.state.fillAlpha = value;
  279. };
  280. /**
  281. * Function: setStrokeAlpha
  282. *
  283. * Sets the current stroke alpha.
  284. */
  285. mxAbstractCanvas2D.prototype.setStrokeAlpha = function(value)
  286. {
  287. this.state.strokeAlpha = value;
  288. };
  289. /**
  290. * Function: setFillColor
  291. *
  292. * Sets the current fill color.
  293. */
  294. mxAbstractCanvas2D.prototype.setFillColor = function(value)
  295. {
  296. if (value == mxConstants.NONE)
  297. {
  298. value = null;
  299. }
  300. this.state.fillColor = value;
  301. this.state.gradientColor = null;
  302. };
  303. /**
  304. * Function: setGradient
  305. *
  306. * Sets the current gradient.
  307. */
  308. mxAbstractCanvas2D.prototype.setGradient = function(color1, color2, x, y, w, h, direction, alpha1, alpha2)
  309. {
  310. var s = this.state;
  311. s.fillColor = color1;
  312. s.gradientFillAlpha = (alpha1 != null) ? alpha1 : 1;
  313. s.gradientColor = color2;
  314. s.gradientAlpha = (alpha2 != null) ? alpha2 : 1;
  315. s.gradientDirection = direction;
  316. };
  317. /**
  318. * Function: setStrokeColor
  319. *
  320. * Sets the current stroke color.
  321. */
  322. mxAbstractCanvas2D.prototype.setStrokeColor = function(value)
  323. {
  324. if (value == mxConstants.NONE)
  325. {
  326. value = null;
  327. }
  328. this.state.strokeColor = value;
  329. };
  330. /**
  331. * Function: setStrokeWidth
  332. *
  333. * Sets the current stroke width.
  334. */
  335. mxAbstractCanvas2D.prototype.setStrokeWidth = function(value)
  336. {
  337. this.state.strokeWidth = value;
  338. };
  339. /**
  340. * Function: setDashed
  341. *
  342. * Enables or disables dashed lines.
  343. */
  344. mxAbstractCanvas2D.prototype.setDashed = function(value, fixDash)
  345. {
  346. this.state.dashed = value;
  347. this.state.fixDash = fixDash;
  348. };
  349. /**
  350. * Function: setDashPattern
  351. *
  352. * Sets the current dash pattern.
  353. */
  354. mxAbstractCanvas2D.prototype.setDashPattern = function(value)
  355. {
  356. this.state.dashPattern = value;
  357. };
  358. /**
  359. * Function: setLineCap
  360. *
  361. * Sets the current line cap.
  362. */
  363. mxAbstractCanvas2D.prototype.setLineCap = function(value)
  364. {
  365. this.state.lineCap = value;
  366. };
  367. /**
  368. * Function: setLineJoin
  369. *
  370. * Sets the current line join.
  371. */
  372. mxAbstractCanvas2D.prototype.setLineJoin = function(value)
  373. {
  374. this.state.lineJoin = value;
  375. };
  376. /**
  377. * Function: setMiterLimit
  378. *
  379. * Sets the current miter limit.
  380. */
  381. mxAbstractCanvas2D.prototype.setMiterLimit = function(value)
  382. {
  383. this.state.miterLimit = value;
  384. };
  385. /**
  386. * Function: setFontColor
  387. *
  388. * Sets the current font color.
  389. */
  390. mxAbstractCanvas2D.prototype.setFontColor = function(value)
  391. {
  392. if (value == mxConstants.NONE)
  393. {
  394. value = null;
  395. }
  396. this.state.fontColor = value;
  397. };
  398. /**
  399. * Function: setFontBackgroundColor
  400. *
  401. * Sets the current font background color.
  402. */
  403. mxAbstractCanvas2D.prototype.setFontBackgroundColor = function(value)
  404. {
  405. if (value == mxConstants.NONE)
  406. {
  407. value = null;
  408. }
  409. this.state.fontBackgroundColor = value;
  410. };
  411. /**
  412. * Function: setFontBorderColor
  413. *
  414. * Sets the current font border color.
  415. */
  416. mxAbstractCanvas2D.prototype.setFontBorderColor = function(value)
  417. {
  418. if (value == mxConstants.NONE)
  419. {
  420. value = null;
  421. }
  422. this.state.fontBorderColor = value;
  423. };
  424. /**
  425. * Function: setFontSize
  426. *
  427. * Sets the current font size.
  428. */
  429. mxAbstractCanvas2D.prototype.setFontSize = function(value)
  430. {
  431. this.state.fontSize = parseFloat(value);
  432. };
  433. /**
  434. * Function: setFontFamily
  435. *
  436. * Sets the current font family.
  437. */
  438. mxAbstractCanvas2D.prototype.setFontFamily = function(value)
  439. {
  440. this.state.fontFamily = value;
  441. };
  442. /**
  443. * Function: setFontStyle
  444. *
  445. * Sets the current font style.
  446. */
  447. mxAbstractCanvas2D.prototype.setFontStyle = function(value)
  448. {
  449. if (value == null)
  450. {
  451. value = 0;
  452. }
  453. this.state.fontStyle = value;
  454. };
  455. /**
  456. * Function: setShadow
  457. *
  458. * Enables or disables and configures the current shadow.
  459. */
  460. mxAbstractCanvas2D.prototype.setShadow = function(enabled)
  461. {
  462. this.state.shadow = enabled;
  463. };
  464. /**
  465. * Function: setShadowColor
  466. *
  467. * Enables or disables and configures the current shadow.
  468. */
  469. mxAbstractCanvas2D.prototype.setShadowColor = function(value)
  470. {
  471. if (value == mxConstants.NONE)
  472. {
  473. value = null;
  474. }
  475. this.state.shadowColor = value;
  476. };
  477. /**
  478. * Function: setShadowAlpha
  479. *
  480. * Enables or disables and configures the current shadow.
  481. */
  482. mxAbstractCanvas2D.prototype.setShadowAlpha = function(value)
  483. {
  484. this.state.shadowAlpha = value;
  485. };
  486. /**
  487. * Function: setShadowOffset
  488. *
  489. * Enables or disables and configures the current shadow.
  490. */
  491. mxAbstractCanvas2D.prototype.setShadowOffset = function(dx, dy)
  492. {
  493. this.state.shadowDx = dx;
  494. this.state.shadowDy = dy;
  495. };
  496. /**
  497. * Function: begin
  498. *
  499. * Starts a new path.
  500. */
  501. mxAbstractCanvas2D.prototype.begin = function()
  502. {
  503. this.lastX = 0;
  504. this.lastY = 0;
  505. this.path = [];
  506. };
  507. /**
  508. * Function: moveTo
  509. *
  510. * Moves the current path the given coordinates.
  511. */
  512. mxAbstractCanvas2D.prototype.moveTo = function(x, y)
  513. {
  514. this.addOp(this.moveOp, x, y);
  515. };
  516. /**
  517. * Function: lineTo
  518. *
  519. * Draws a line to the given coordinates. Uses moveTo with the op argument.
  520. */
  521. mxAbstractCanvas2D.prototype.lineTo = function(x, y)
  522. {
  523. this.addOp(this.lineOp, x, y);
  524. };
  525. /**
  526. * Function: quadTo
  527. *
  528. * Adds a quadratic curve to the current path.
  529. */
  530. mxAbstractCanvas2D.prototype.quadTo = function(x1, y1, x2, y2)
  531. {
  532. this.addOp(this.quadOp, x1, y1, x2, y2);
  533. };
  534. /**
  535. * Function: curveTo
  536. *
  537. * Adds a bezier curve to the current path.
  538. */
  539. mxAbstractCanvas2D.prototype.curveTo = function(x1, y1, x2, y2, x3, y3)
  540. {
  541. this.addOp(this.curveOp, x1, y1, x2, y2, x3, y3);
  542. };
  543. /**
  544. * Function: arcTo
  545. *
  546. * Adds the given arc to the current path. This is a synthetic operation that
  547. * is broken down into curves.
  548. */
  549. mxAbstractCanvas2D.prototype.arcTo = function(rx, ry, angle, largeArcFlag, sweepFlag, x, y)
  550. {
  551. var curves = mxUtils.arcToCurves(this.lastX, this.lastY, rx, ry, angle, largeArcFlag, sweepFlag, x, y);
  552. if (curves != null)
  553. {
  554. for (var i = 0; i < curves.length; i += 6)
  555. {
  556. this.curveTo(curves[i], curves[i + 1], curves[i + 2],
  557. curves[i + 3], curves[i + 4], curves[i + 5]);
  558. }
  559. }
  560. };
  561. /**
  562. * Function: close
  563. *
  564. * Closes the current path.
  565. */
  566. mxAbstractCanvas2D.prototype.close = function(x1, y1, x2, y2, x3, y3)
  567. {
  568. this.addOp(this.closeOp);
  569. };
  570. /**
  571. * Function: end
  572. *
  573. * Empty implementation for backwards compatibility. This will be removed.
  574. */
  575. mxAbstractCanvas2D.prototype.end = function() { };
  576. __mxOutput.mxAbstractCanvas2D = typeof mxAbstractCanvas2D !== 'undefined' ? mxAbstractCanvas2D : undefined;