mxLabel.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  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. var clipPath = mxUtils.getValue(this.style, mxConstants.STYLE_CLIP_PATH, null);
  124. c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.image, false, false, false, clipPath);
  125. }
  126. };
  127. /**
  128. * Function: getImageBounds
  129. *
  130. * Generic background painting implementation.
  131. */
  132. mxLabel.prototype.getImageBounds = function(x, y, w, h)
  133. {
  134. var align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
  135. var valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
  136. var width = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_WIDTH, mxConstants.DEFAULT_IMAGESIZE);
  137. var height = mxUtils.getNumber(this.style, mxConstants.STYLE_IMAGE_HEIGHT, mxConstants.DEFAULT_IMAGESIZE);
  138. var spacing = mxUtils.getNumber(this.style, mxConstants.STYLE_SPACING, this.spacing) + 5;
  139. if (align == mxConstants.ALIGN_CENTER)
  140. {
  141. x += (w - width) / 2;
  142. }
  143. else if (align == mxConstants.ALIGN_RIGHT)
  144. {
  145. x += w - width - spacing;
  146. }
  147. else // default is left
  148. {
  149. x += spacing;
  150. }
  151. if (valign == mxConstants.ALIGN_TOP)
  152. {
  153. y += spacing;
  154. }
  155. else if (valign == mxConstants.ALIGN_BOTTOM)
  156. {
  157. y += h - height - spacing;
  158. }
  159. else // default is middle
  160. {
  161. y += (h - height) / 2;
  162. }
  163. return new mxRectangle(x, y, width, height);
  164. };
  165. /**
  166. * Function: paintIndicator
  167. *
  168. * Generic background painting implementation.
  169. */
  170. mxLabel.prototype.paintIndicator = function(c, x, y, w, h)
  171. {
  172. if (this.indicator != null)
  173. {
  174. this.indicator.bounds = this.getIndicatorBounds(x, y, w, h);
  175. this.indicator.paint(c);
  176. }
  177. else if (this.indicatorImage != null)
  178. {
  179. var bounds = this.getIndicatorBounds(x, y, w, h);
  180. c.image(bounds.x, bounds.y, bounds.width, bounds.height, this.indicatorImage, false, false, false);
  181. }
  182. };
  183. /**
  184. * Function: getIndicatorBounds
  185. *
  186. * Generic background painting implementation.
  187. */
  188. mxLabel.prototype.getIndicatorBounds = function(x, y, w, h)
  189. {
  190. var align = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_ALIGN, mxConstants.ALIGN_LEFT);
  191. var valign = mxUtils.getValue(this.style, mxConstants.STYLE_IMAGE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
  192. var width = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_WIDTH, this.indicatorSize);
  193. var height = mxUtils.getNumber(this.style, mxConstants.STYLE_INDICATOR_HEIGHT, this.indicatorSize);
  194. var spacing = this.spacing + 5;
  195. if (align == mxConstants.ALIGN_RIGHT)
  196. {
  197. x += w - width - spacing;
  198. }
  199. else if (align == mxConstants.ALIGN_CENTER)
  200. {
  201. x += (w - width) / 2;
  202. }
  203. else // default is left
  204. {
  205. x += spacing;
  206. }
  207. if (valign == mxConstants.ALIGN_BOTTOM)
  208. {
  209. y += h - height - spacing;
  210. }
  211. else if (valign == mxConstants.ALIGN_TOP)
  212. {
  213. y += spacing;
  214. }
  215. else // default is middle
  216. {
  217. y += (h - height) / 2;
  218. }
  219. return new mxRectangle(x, y, width, height);
  220. };
  221. /**
  222. * Function: redrawHtmlShape
  223. *
  224. * Generic background painting implementation.
  225. */
  226. mxLabel.prototype.redrawHtmlShape = function()
  227. {
  228. mxRectangleShape.prototype.redrawHtmlShape.apply(this, arguments);
  229. // Removes all children
  230. while(this.node.hasChildNodes())
  231. {
  232. this.node.removeChild(this.node.lastChild);
  233. }
  234. if (this.image != null)
  235. {
  236. var node = document.createElement('img');
  237. node.style.position = 'relative';
  238. node.setAttribute('border', '0');
  239. var bounds = this.getImageBounds(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
  240. bounds.x -= this.bounds.x;
  241. bounds.y -= this.bounds.y;
  242. node.style.left = Math.round(bounds.x) + 'px';
  243. node.style.top = Math.round(bounds.y) + 'px';
  244. node.style.width = Math.round(bounds.width) + 'px';
  245. node.style.height = Math.round(bounds.height) + 'px';
  246. node.src = this.image;
  247. this.node.appendChild(node);
  248. }
  249. };