mxStylesheet.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. * Class: mxStylesheet
  7. *
  8. * Defines the appearance of the cells in a graph. See <putCellStyle> for an
  9. * example of creating a new cell style. It is recommended to use objects, not
  10. * arrays for holding cell styles. Existing styles can be cloned using
  11. * <mxUtils.clone> and turned into a string for debugging using
  12. * <mxUtils.toString>.
  13. *
  14. * Default Styles:
  15. *
  16. * The stylesheet contains two built-in styles, which are used if no style is
  17. * defined for a cell:
  18. *
  19. * defaultVertex - Default style for vertices
  20. * defaultEdge - Default style for edges
  21. *
  22. * Example:
  23. *
  24. * (code)
  25. * var vertexStyle = stylesheet.getDefaultVertexStyle();
  26. * vertexStyle[mxConstants.STYLE_ROUNDED] = true;
  27. * var edgeStyle = stylesheet.getDefaultEdgeStyle();
  28. * edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
  29. * (end)
  30. *
  31. * Modifies the built-in default styles.
  32. *
  33. * To avoid the default style for a cell, add a leading semicolon
  34. * to the style definition, eg.
  35. *
  36. * (code)
  37. * ;shadow=1
  38. * (end)
  39. *
  40. * Removing keys:
  41. *
  42. * For removing a key in a cell style of the form [stylename;|key=value;] the
  43. * special value none can be used, eg. highlight;fillColor=none
  44. *
  45. * See also the helper methods in mxUtils to modify strings of this format,
  46. * namely <mxUtils.setStyle>, <mxUtils.indexOfStylename>,
  47. * <mxUtils.addStylename>, <mxUtils.removeStylename>,
  48. * <mxUtils.removeAllStylenames> and <mxUtils.setStyleFlag>.
  49. *
  50. * Constructor: mxStylesheet
  51. *
  52. * Constructs a new stylesheet and assigns default styles.
  53. */
  54. function mxStylesheet()
  55. {
  56. this.styles = new Object();
  57. this.putDefaultVertexStyle(this.createDefaultVertexStyle());
  58. this.putDefaultEdgeStyle(this.createDefaultEdgeStyle());
  59. };
  60. /**
  61. * Function: styles
  62. *
  63. * Maps from names to cell styles. Each cell style is a map of key,
  64. * value pairs.
  65. */
  66. mxStylesheet.prototype.styles;
  67. /**
  68. * Function: createDefaultVertexStyle
  69. *
  70. * Creates and returns the default vertex style.
  71. */
  72. mxStylesheet.prototype.createDefaultVertexStyle = function()
  73. {
  74. var style = new Object();
  75. style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
  76. style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
  77. style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
  78. style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
  79. style[mxConstants.STYLE_FILLCOLOR] = '#C3D9FF';
  80. style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
  81. style[mxConstants.STYLE_FONTCOLOR] = '#774400';
  82. return style;
  83. };
  84. /**
  85. * Function: createDefaultEdgeStyle
  86. *
  87. * Creates and returns the default edge style.
  88. */
  89. mxStylesheet.prototype.createDefaultEdgeStyle = function()
  90. {
  91. var style = new Object();
  92. style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
  93. style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
  94. style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
  95. style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
  96. style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
  97. style[mxConstants.STYLE_FONTCOLOR] = '#446299';
  98. return style;
  99. };
  100. /**
  101. * Function: putDefaultVertexStyle
  102. *
  103. * Sets the default style for vertices using defaultVertex as the
  104. * stylename.
  105. *
  106. * Parameters:
  107. * style - Key, value pairs that define the style.
  108. */
  109. mxStylesheet.prototype.putDefaultVertexStyle = function(style)
  110. {
  111. this.putCellStyle('defaultVertex', style);
  112. };
  113. /**
  114. * Function: putDefaultEdgeStyle
  115. *
  116. * Sets the default style for edges using defaultEdge as the stylename.
  117. */
  118. mxStylesheet.prototype.putDefaultEdgeStyle = function(style)
  119. {
  120. this.putCellStyle('defaultEdge', style);
  121. };
  122. /**
  123. * Function: getDefaultVertexStyle
  124. *
  125. * Returns the default style for vertices.
  126. */
  127. mxStylesheet.prototype.getDefaultVertexStyle = function()
  128. {
  129. return this.styles['defaultVertex'];
  130. };
  131. /**
  132. * Function: getDefaultEdgeStyle
  133. *
  134. * Sets the default style for edges.
  135. */
  136. mxStylesheet.prototype.getDefaultEdgeStyle = function()
  137. {
  138. return this.styles['defaultEdge'];
  139. };
  140. /**
  141. * Function: putCellStyle
  142. *
  143. * Stores the given map of key, value pairs under the given name in
  144. * <styles>.
  145. *
  146. * Example:
  147. *
  148. * The following example adds a new style called 'rounded' into an
  149. * existing stylesheet:
  150. *
  151. * (code)
  152. * var style = new Object();
  153. * style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
  154. * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
  155. * style[mxConstants.STYLE_ROUNDED] = true;
  156. * graph.getStylesheet().putCellStyle('rounded', style);
  157. * (end)
  158. *
  159. * In the above example, the new style is an object. The possible keys of
  160. * the object are all the constants in <mxConstants> that start with STYLE
  161. * and the values are either JavaScript objects, such as
  162. * <mxPerimeter.RightAngleRectanglePerimeter> (which is in fact a function)
  163. * or expressions, such as true. Note that not all keys will be
  164. * interpreted by all shapes (eg. the line shape ignores the fill color).
  165. * The final call to this method associates the style with a name in the
  166. * stylesheet. The style is used in a cell with the following code:
  167. *
  168. * (code)
  169. * model.setStyle(cell, 'rounded');
  170. * (end)
  171. *
  172. * Parameters:
  173. *
  174. * name - Name for the style to be stored.
  175. * style - Key, value pairs that define the style.
  176. */
  177. mxStylesheet.prototype.putCellStyle = function(name, style)
  178. {
  179. this.styles[name] = style;
  180. };
  181. /**
  182. * Function: getCellStyle
  183. *
  184. * Returns the cell style for the specified stylename or the given
  185. * defaultStyle if no style can be found for the given stylename.
  186. *
  187. * Parameters:
  188. *
  189. * name - String of the form [(stylename|key=value);] that represents the
  190. * style.
  191. * defaultStyle - Default style to be returned if no style can be found.
  192. */
  193. mxStylesheet.prototype.getCellStyle = function(name, defaultStyle)
  194. {
  195. var style = defaultStyle;
  196. if (name != null && name.length > 0)
  197. {
  198. var pairs = name.split(';');
  199. if (style != null &&
  200. name.charAt(0) != ';')
  201. {
  202. style = mxUtils.clone(style);
  203. }
  204. else
  205. {
  206. style = new Object();
  207. }
  208. // Parses each key, value pair into the existing style
  209. for (var i = 0; i < pairs.length; i++)
  210. {
  211. var tmp = pairs[i];
  212. var pos = tmp.indexOf('=');
  213. if (pos >= 0)
  214. {
  215. var key = tmp.substring(0, pos);
  216. var value = tmp.substring(pos + 1);
  217. if (value == mxConstants.NONE)
  218. {
  219. delete style[key];
  220. }
  221. else if (mxUtils.isNumeric(value))
  222. {
  223. style[key] = parseFloat(value);
  224. }
  225. else
  226. {
  227. style[key] = value;
  228. }
  229. }
  230. else
  231. {
  232. // Merges the entries from a named style
  233. var tmpStyle = this.styles[tmp];
  234. if (tmpStyle != null)
  235. {
  236. for (var key in tmpStyle)
  237. {
  238. style[key] = tmpStyle[key];
  239. }
  240. }
  241. }
  242. }
  243. }
  244. return style;
  245. };
  246. __mxOutput.mxStylesheet = typeof mxStylesheet !== 'undefined' ? mxStylesheet : undefined;