mxLabel.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. * Class: mxLabel
  7. *
  8. * Extends <mxShape> to implement an image shape with a label.
  9. * This shape is registered under <mxConstants.SHAPE_LABEL> in
  10. * <mxCellRenderer>.
  11. *
  12. * Constructor: mxLabel
  13. *
  14. * Constructs a new label shape.
  15. *
  16. * Parameters:
  17. *
  18. * bounds - <mxRectangle> that defines the bounds. This is stored in
  19. * <mxShape.bounds>.
  20. * fill - String that defines the fill color. This is stored in <fill>.
  21. * stroke - String that defines the stroke color. This is stored in <stroke>.
  22. * strokewidth - Optional integer that defines the stroke width. Default is
  23. * 1. This is stored in <strokewidth>.
  24. */
  25. function mxLabel(bounds, fill, stroke, strokewidth)
  26. {
  27. mxRectangleShape.call(this, bounds, fill, stroke, strokewidth);
  28. };
  29. /**
  30. * Extends mxShape.
  31. */
  32. mxUtils.extend(mxLabel, mxRectangleShape);
  33. /**
  34. * Variable: imageSize
  35. *
  36. * Default width and height for the image. Default is
  37. * <mxConstants.DEFAULT_IMAGESIZE>.
  38. */
  39. mxLabel.prototype.imageSize = mxConstants.DEFAULT_IMAGESIZE;
  40. /**
  41. * Variable: spacing
  42. *
  43. * Default value for image spacing. Default is 2.
  44. */
  45. mxLabel.prototype.spacing = 2;
  46. /**
  47. * Variable: indicatorSize
  48. *
  49. * Default width and height for the indicicator. Default is 10.
  50. */
  51. mxLabel.prototype.indicatorSize = 10;
  52. /**
  53. * Variable: indicatorSpacing
  54. *
  55. * Default spacing between image and indicator. Default is 2.
  56. */
  57. mxLabel.prototype.indicatorSpacing = 2;
  58. /**
  59. * Function: init
  60. *
  61. * Initializes the shape and the <indicator>.
  62. */
  63. mxLabel.prototype.init = function(container)
  64. {
  65. mxShape.prototype.init.apply(this, arguments);
  66. if (this.indicatorShape != null)
  67. {
  68. this.indicator = new this.indicatorShape();
  69. this.indicator.dialect = this.dialect;
  70. this.indicator.init(this.node);
  71. }
  72. };
  73. /**
  74. * Function: redraw
  75. *
  76. * Reconfigures this shape. This will update the colors of the indicator
  77. * and reconfigure it if required.
  78. */
  79. mxLabel.prototype.redraw = function()
  80. {
  81. if (this.indicator != null)
  82. {
  83. this.indicator.fill = this.indicatorColor;
  84. this.indicator.stroke = this.indicatorStrokeColor;
  85. this.indicator.gradient = this.indicatorGradientColor;
  86. this.indicator.direction = this.indicatorDirection;
  87. this.indicator.redraw();
  88. }
  89. mxShape.prototype.redraw.apply(this, arguments);
  90. };
  91. /**
  92. * Function: isHtmlAllowed
  93. *
  94. * Returns true for non-rounded, non-rotated shapes with no glass gradient and
  95. * no indicator shape.
  96. */
  97. mxLabel.prototype.isHtmlAllowed = function()
  98. {
  99. return mxRectangleShape.prototype.isHtmlAllowed.apply(this, arguments) &&
  100. this.indicatorColor == null && this.indicatorShape == null;
  101. };
  102. /**
  103. * Function: paintForeground
  104. *
  105. * Generic background painting implementation.
  106. */
  107. mxLabel.prototype.paintForeground = function(c, x, y, w, h)
  108. {
  109. this.paintImage(c, x, y, w, h);
  110. this.paintIndicator(c, x, y, w, h);
  111. mxRectangleShape.prototype.paintForeground.apply(this, arguments);
  112. };
  113. /**
  114. * Function: paintImage
  115. *
  116. * Generic background painting implementation.
  117. */
  118. mxLabel.prototype.paintImage = function(c, x, y, w, h)
  119. {
  120. if (this.image != null)
  121. {
  122. var bounds = this.getImageBounds(x, y, w, h);
  123. c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.image, false, false, false);
  124. }
  125. };
  126. /**
  127. * Function: getImageBounds
  128. *
  129. * Generic background painting implementation.
  130. */
  131. mxLabel.prototype.getImageBounds = function(x, y, w, h)
  132. {
  133. var align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
  134. var valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
  135. var width = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_WIDTH, mxConstants.DEFAULT_IMAGESIZE);
  136. var height = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_HEIGHT, mxConstants.DEFAULT_IMAGESIZE);
  137. var spacing = mxUtils.getNumber(this.style, mxConstants.STYLE_SPACING, this.spacing) + 5;
  138. if (align == mxConstants.ALIGN_CENTER)
  139. {
  140. x += (w - width) / 2;
  141. }
  142. else if (align == mxConstants.ALIGN_RIGHT)
  143. {
  144. x += w - width - spacing;
  145. }
  146. else // default is left
  147. {
  148. x += spacing;
  149. }
  150. if (valign == mxConstants.ALIGN_TOP)
  151. {
  152. y += spacing;
  153. }
  154. else if (valign == mxConstants.ALIGN_BOTTOM)
  155. {
  156. y += h - height - spacing;
  157. }
  158. else // default is middle
  159. {
  160. y += (h - height) / 2;
  161. }
  162. return new mxRectangle(x, y, width, height);
  163. };
  164. /**
  165. * Function: paintIndicator
  166. *
  167. * Generic background painting implementation.
  168. */
  169. mxLabel.prototype.paintIndicator = function(c, x, y, w, h)
  170. {
  171. if (this.indicator != null)
  172. {
  173. this.indicator.bounds = this.getIndicatorBounds(x, y, w, h);
  174. this.indicator.paint(c);
  175. }
  176. else if (this.indicatorImage != null)
  177. {
  178. var bounds = this.getIndicatorBounds(x, y, w, h);
  179. c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.indicatorImage, false, false, false);
  180. }
  181. };
  182. /**
  183. * Function: getIndicatorBounds
  184. *
  185. * Generic background painting implementation.
  186. */
  187. mxLabel.prototype.getIndicatorBounds = function(x, y, w, h)
  188. {
  189. var align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
  190. var valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
  191. var width = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_WIDTH, this.indicatorSize);
  192. var height = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_HEIGHT, this.indicatorSize);
  193. var spacing = this.spacing + 5;
  194. if (align == mxConstants.ALIGN_RIGHT)
  195. {
  196. x += w - width - spacing;
  197. }
  198. else if (align == mxConstants.ALIGN_CENTER)
  199. {
  200. x += (w - width) / 2;
  201. }
  202. else // default is left
  203. {
  204. x += spacing;
  205. }
  206. if (valign == mxConstants.ALIGN_BOTTOM)
  207. {
  208. y += h - height - spacing;
  209. }
  210. else if (valign == mxConstants.ALIGN_TOP)
  211. {
  212. y += spacing;
  213. }
  214. else // default is middle
  215. {
  216. y += (h - height) / 2;
  217. }
  218. return new mxRectangle(x, y, width, height);
  219. };
  220. /**
  221. * Function: redrawHtmlShape
  222. *
  223. * Generic background painting implementation.
  224. */
  225. mxLabel.prototype.redrawHtmlShape = function()
  226. {
  227. mxRectangleShape.prototype.redrawHtmlShape.apply(this, arguments);
  228. // Removes all children
  229. while(this.node.hasChildNodes())
  230. {
  231. this.node.removeChild(this.node.lastChild);
  232. }
  233. if (this.image != null)
  234. {
  235. var node = document.createElement('img');
  236. node.style.position = 'relative';
  237. node.setAttribute('border', '0');
  238. var bounds = this.getImageBounds(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
  239. bounds.x -= this.bounds.x;
  240. bounds.y -= this.bounds.y;
  241. node.style.left = Math.round(bounds.x) + 'px';
  242. node.style.top = Math.round(bounds.y) + 'px';
  243. node.style.width = Math.round(bounds.width) + 'px';
  244. node.style.height = Math.round(bounds.height) + 'px';
  245. node.src = this.image;
  246. this.node.appendChild(node);
  247. }
  248. };
  249. __mxOutput.mxLabel = typeof mxLabel !== 'undefined' ? mxLabel : undefined;