MenusController.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810
  1. /**
  2. *$id:Action 。JS,V 2017-12-19
  3. *$author shen.zhi
  4. */
  5. /**
  6. * 构建了一种新的图形编辑器
  7. */
  8. var data=null;
  9. Menus = function(editorUi)
  10. {
  11. this.editorUi = editorUi;
  12. this.menus = new Object();
  13. data="查看属性+m1&查看下级-my2+m2";
  14. //获取右键菜单 关联设备信息数据
  15. /*$.post($("#path").val()+"/GetConnIpServlet",function(text){
  16. text="127.0.0.1/1222-my+m1&127.0.0.2/1222-my2+m2";
  17. if(text!=null && text!=""){
  18. data = text;
  19. }
  20. });
  21. */
  22. this.init();
  23. //预取标记图像
  24. new Image().src = IMAGE_PATH + '/checkmark.gif';
  25. };
  26. /**
  27. *添加标签菜单项给定的菜单和母。
  28. */
  29. Menus.prototype.init = function()
  30. {
  31. var graph = this.editorUi.editor.graph;
  32. this.put('fontFamily', new Menu(mxUtils.bind(this, function(menu, parent)
  33. {
  34. var fonts = ['Helvetica', 'Verdana', 'Times New Roman', 'Garamond', 'Comic Sans MS',
  35. 'Courier New', 'Georgia', 'Lucida Console', 'Tahoma'];
  36. for (var i = 0; i < fonts.length; i++)
  37. {
  38. var tr = this.styleChange(menu, fonts[i], [mxConstants.STYLE_FONTFAMILY], [fonts[i]], null, parent);
  39. tr.firstChild.nextSibling.style.fontFamily = fonts[i];
  40. }
  41. menu.addSeparator(parent);
  42. this.promptChange(menu, mxResources.get('custom'), '', mxConstants.DEFAULT_FONTFAMILY, mxConstants.STYLE_FONTFAMILY, parent);
  43. })));
  44. this.put('fontSize', new Menu(mxUtils.bind(this, function(menu, parent)
  45. {
  46. var sizes = [6, 8, 9, 10, 11, 12, 14, 18, 24, 36, 48, 72];
  47. for (var i = 0; i < sizes.length; i++)
  48. {
  49. this.styleChange(menu, sizes[i], [mxConstants.STYLE_FONTSIZE], [sizes[i]], null, parent);
  50. }
  51. menu.addSeparator(parent);
  52. this.promptChange(menu, mxResources.get('custom'), '(pt)', '12', mxConstants.STYLE_FONTSIZE, parent);
  53. })));
  54. //右键线宽[1px,2px..自定义]
  55. this.put('linewidth', new Menu(mxUtils.bind(this, function(menu, parent)
  56. {
  57. var sizes = [1, 2, 3, 4, 8, 12, 16, 24];
  58. for (var i = 0; i < sizes.length; i++)
  59. {
  60. this.styleChange(menu, sizes[i] + 'px', [mxConstants.STYLE_STROKEWIDTH], [sizes[i]], null, parent);
  61. }
  62. menu.addSeparator(parent);
  63. this.promptChange(menu, mxResources.get('custom'), '(px)', '1', mxConstants.STYLE_STROKEWIDTH, parent);
  64. })));
  65. //右键关联设备信息{二级,三级...菜单}
  66. this.put('connip', new Menu(mxUtils.bind(this, function(menu, parent)
  67. {
  68. var idx=0;
  69. var sizes = data.split("&");
  70. for(var i = 0;i<sizes.length;i++){
  71. if(sizes[i]!="" && sizes[i]!=null){
  72. idx = sizes[i].indexOf("+");
  73. if(idx>0){
  74. this.valueChange(menu, sizes[i].substr(0,idx),sizes[i].substr(sizes[i].indexOf("+")+1), null, parent);
  75. }else{
  76. this.valueChange(menu, sizes[i],"", null, parent);
  77. }
  78. }
  79. }
  80. menu.addSeparator(parent);
  81. })));
  82. this.put('line', new Menu(mxUtils.bind(this, function(menu, parent)
  83. {
  84. this.styleChange(menu, mxResources.get('straight'), [mxConstants.STYLE_EDGE], [null], null, parent);
  85. this.styleChange(menu, mxResources.get('entityRelation'), [mxConstants.STYLE_EDGE], ['entityRelationEdgeStyle'], null, parent);
  86. menu.addSeparator(parent);
  87. this.styleChange(menu, mxResources.get('horizontal'), [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW], ['elbowEdgeStyle', 'horizontal'], null, parent);
  88. this.styleChange(menu, mxResources.get('vertical'), [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW], ['elbowEdgeStyle', 'vertical'], null, parent);
  89. menu.addSeparator(parent);
  90. this.styleChange(menu, mxResources.get('plain'), [mxConstants.STYLE_EDGE], ['segmentEdgeStyle'], null, parent);
  91. this.styleChange(menu, mxResources.get('orthogonal'), [mxConstants.STYLE_EDGE], ['orthogonalEdgeStyle'], null, parent);
  92. })));
  93. this.put('lineend', new Menu(mxUtils.bind(this, function(menu, parent)
  94. {
  95. this.styleChange(menu, mxResources.get('classic'), [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_CLASSIC], null, parent);
  96. this.styleChange(menu, mxResources.get('openArrow'), [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_OPEN], null, parent);
  97. this.styleChange(menu, mxResources.get('block') , [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_BLOCK], null, parent);
  98. menu.addSeparator(parent);
  99. this.styleChange(menu, mxResources.get('oval'), [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_OVAL], null, parent);
  100. this.styleChange(menu, mxResources.get('diamond'), [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_DIAMOND], null, parent);
  101. this.styleChange(menu, mxResources.get('diamondThin'), [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_DIAMOND_THIN], null, parent);
  102. menu.addSeparator(parent);
  103. this.styleChange(menu, mxResources.get('none'), [mxConstants.STYLE_ENDARROW], [mxConstants.NONE], null, parent);
  104. menu.addSeparator(parent);
  105. menu.addItem(mxResources.get('transparent'), null, function() { graph.toggleCellStyles('endFill', true); }, parent, null, true);
  106. menu.addSeparator(parent);
  107. this.promptChange(menu, mxResources.get('size'), '(px)', mxConstants.DEFAULT_MARKERSIZE, mxConstants.STYLE_ENDSIZE, parent);
  108. })));
  109. this.put('linestart', new Menu(mxUtils.bind(this, function(menu, parent)
  110. {
  111. this.styleChange(menu, mxResources.get('classic'), [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_CLASSIC], null, parent);
  112. this.styleChange(menu, mxResources.get('openArrow'), [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_OPEN], null, parent);
  113. this.styleChange(menu, mxResources.get('block'), [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_BLOCK], null, parent);
  114. menu.addSeparator(parent);
  115. this.styleChange(menu, mxResources.get('oval'), [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_OVAL], null, parent);
  116. this.styleChange(menu, mxResources.get('diamond'), [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_DIAMOND], null, parent);
  117. this.styleChange(menu, mxResources.get('diamondThin'), [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_DIAMOND_THIN], null, parent);
  118. menu.addSeparator(parent);
  119. this.styleChange(menu, mxResources.get('none'), [mxConstants.STYLE_STARTARROW], [mxConstants.NONE], null, parent);
  120. menu.addSeparator(parent);
  121. menu.addItem(mxResources.get('transparent'), null, function() { graph.toggleCellStyles('startFill', true); }, parent, null, true);
  122. menu.addSeparator(parent);
  123. this.promptChange(menu, mxResources.get('size'), '(px)', mxConstants.DEFAULT_MARKERSIZE, mxConstants.STYLE_STARTSIZE, parent);
  124. })));
  125. this.put('spacing', new Menu(mxUtils.bind(this, function(menu, parent)
  126. {
  127. // Uses shadow action and line menu to analyze selection
  128. var vertexSelected = this.editorUi.actions.get('shadow').enabled;
  129. var edgeSelected = this.get('line').enabled;
  130. if (vertexSelected || menu.showDisabled)
  131. {
  132. this.promptChange(menu, mxResources.get('top'), '(px)', '0', mxConstants.STYLE_SPACING_TOP, parent, vertexSelected);
  133. this.promptChange(menu, mxResources.get('right'), '(px)', '0', mxConstants.STYLE_SPACING_RIGHT, parent, vertexSelected);
  134. this.promptChange(menu, mxResources.get('bottom'), '(px)', '0', mxConstants.STYLE_SPACING_BOTTOM, parent, vertexSelected);
  135. this.promptChange(menu, mxResources.get('left'), '(px)', '0', mxConstants.STYLE_SPACING_LEFT, parent, vertexSelected);
  136. menu.addSeparator(parent);
  137. this.promptChange(menu, mxResources.get('global'), '(px)', '0', mxConstants.STYLE_SPACING, parent, vertexSelected);
  138. this.promptChange(menu, mxResources.get('perimeter'), '(px)', '0', mxConstants.STYLE_PERIMETER_SPACING, parent, vertexSelected);
  139. }
  140. if (edgeSelected || menu.showDisabled)
  141. {
  142. menu.addSeparator(parent);
  143. this.promptChange(menu, mxResources.get('sourceSpacing'), '(px)', '0', mxConstants.STYLE_SOURCE_PERIMETER_SPACING, parent, edgeSelected);
  144. this.promptChange(menu, mxResources.get('targetSpacing'), '(px)', '0', mxConstants.STYLE_TARGET_PERIMETER_SPACING, parent, edgeSelected);
  145. }
  146. })));
  147. this.put('format', new Menu(mxUtils.bind(this, function(menu, parent)
  148. {
  149. this.addSubmenu('spacing', menu, parent);
  150. this.addMenuItems(menu, ['-', 'fillColor'], parent);
  151. this.addSubmenu('gradient', menu, parent);
  152. this.addMenuItems(menu, ['-', 'shadow'], parent);
  153. this.promptChange(menu, mxResources.get('opacity'), '(%)', '100', mxConstants.STYLE_OPACITY, parent, this.get('format').enabled);
  154. this.addMenuItems(menu, ['-', 'rounded', 'dashed', '-', 'strokeColor'], parent);
  155. this.addSubmenu('linewidth', menu, parent);
  156. this.addMenuItems(menu, ['-'], parent);
  157. this.addSubmenu('line', menu, parent);
  158. this.addMenuItems(menu, ['-'], parent);
  159. this.addSubmenu('linestart', menu, parent);
  160. this.addSubmenu('lineend', menu, parent);
  161. menu.addSeparator(parent);
  162. this.addMenuItem(menu, 'style', parent);
  163. })));
  164. this.put('gradient', new Menu(mxUtils.bind(this, function(menu, parent)
  165. {
  166. this.addMenuItems(menu, ['gradientColor', '-'], parent);
  167. this.styleChange(menu, mxResources.get('north'), [mxConstants.STYLE_GRADIENT_DIRECTION], [mxConstants.DIRECTION_NORTH], null, parent);
  168. this.styleChange(menu, mxResources.get('east'), [mxConstants.STYLE_GRADIENT_DIRECTION], [mxConstants.DIRECTION_EAST], null, parent);
  169. this.styleChange(menu, mxResources.get('south'), [mxConstants.STYLE_GRADIENT_DIRECTION], [mxConstants.DIRECTION_SOUTH], null, parent);
  170. this.styleChange(menu, mxResources.get('west'), [mxConstants.STYLE_GRADIENT_DIRECTION], [mxConstants.DIRECTION_WEST], null, parent);
  171. })));
  172. this.put('text', new Menu(mxUtils.bind(this, function(menu, parent)
  173. {
  174. this.addMenuItem(menu, 'fontColor', parent);
  175. menu.addSeparator(parent);
  176. //this.addSubmenu('fontFamily', menu, parent);
  177. this.addSubmenu('fontSize', menu, parent);
  178. this.addMenuItems(menu, ['-', 'bold', 'italic','-'], parent);
  179. this.addSubmenu('alignment', menu, parent);
  180. this.addSubmenu('position', menu, parent);
  181. this.addMenuItems(menu, ['-', 'backgroundColor', 'borderColor', '-'], parent);
  182. var enabled = this.get('text').enabled;
  183. this.promptChange(menu, mxResources.get('textOpacity'), '(%)', '100', mxConstants.STYLE_TEXT_OPACITY, parent, enabled);
  184. menu.addItem(mxResources.get('hide'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_NOLABEL, false); }, parent, null, enabled);
  185. menu.addItem(mxResources.get('rotate'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_HORIZONTAL, true); }, parent, null, enabled);
  186. })));
  187. this.put('alignment', new Menu(mxUtils.bind(this, function(menu, parent)
  188. {
  189. this.styleChange(menu, mxResources.get('leftAlign'), [mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_LEFT], null, parent);
  190. this.styleChange(menu, mxResources.get('center'), [mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_CENTER], null, parent);
  191. this.styleChange(menu, mxResources.get('rightAlign'), [mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT], null, parent);
  192. menu.addSeparator(parent);
  193. this.styleChange(menu, mxResources.get('topAlign'), [mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP], null, parent);
  194. this.styleChange(menu, mxResources.get('middle'), [mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_MIDDLE], null, parent);
  195. this.styleChange(menu, mxResources.get('bottomAlign'), [mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM], null, parent);
  196. })));
  197. this.put('position', new Menu(mxUtils.bind(this, function(menu, parent)
  198. {
  199. this.styleChange(menu, mxResources.get('left'), [mxConstants.STYLE_LABEL_POSITION, mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_LEFT, mxConstants.ALIGN_RIGHT], null, parent);
  200. this.styleChange(menu, mxResources.get('center'), [mxConstants.STYLE_LABEL_POSITION, mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_CENTER, mxConstants.ALIGN_CENTER], null, parent);
  201. this.styleChange(menu, mxResources.get('right'), [mxConstants.STYLE_LABEL_POSITION, mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_LEFT], null, parent);
  202. menu.addSeparator(parent);
  203. this.styleChange(menu, mxResources.get('top'), [mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP, mxConstants.ALIGN_BOTTOM], null, parent);
  204. this.styleChange(menu, mxResources.get('middle'), [mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_MIDDLE, mxConstants.ALIGN_MIDDLE], null, parent);
  205. this.styleChange(menu, mxResources.get('bottom'), [mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM, mxConstants.ALIGN_TOP], null, parent);
  206. })));
  207. this.put('direction', new Menu(mxUtils.bind(this, function(menu, parent)
  208. {
  209. this.styleChange(menu, mxResources.get('north'), [mxConstants.STYLE_DIRECTION], [mxConstants.DIRECTION_NORTH], null, parent);
  210. this.styleChange(menu, mxResources.get('east'), [mxConstants.STYLE_DIRECTION], [mxConstants.DIRECTION_EAST], null, parent);
  211. this.styleChange(menu, mxResources.get('south'), [mxConstants.STYLE_DIRECTION], [mxConstants.DIRECTION_SOUTH], null, parent);
  212. this.styleChange(menu, mxResources.get('west'), [mxConstants.STYLE_DIRECTION], [mxConstants.DIRECTION_WEST], null, parent);
  213. menu.addSeparator(parent);
  214. menu.addItem(mxResources.get('flipH'), null, function()
  215. {
  216. graph.getModel().beginUpdate();
  217. try
  218. {
  219. graph.toggleCellStyles(mxConstants.STYLE_STENCIL_FLIPH, false);
  220. graph.toggleCellStyles(mxConstants.STYLE_IMAGE_FLIPH, false);
  221. }
  222. finally
  223. {
  224. graph.getModel().endUpdate();
  225. }
  226. }, parent);
  227. menu.addItem(mxResources.get('flipV'), null, function()
  228. {
  229. graph.getModel().beginUpdate();
  230. try
  231. {
  232. graph.toggleCellStyles(mxConstants.STYLE_STENCIL_FLIPV, false);
  233. graph.toggleCellStyles(mxConstants.STYLE_IMAGE_FLIPV, false);
  234. }
  235. finally
  236. {
  237. graph.getModel().endUpdate();
  238. }
  239. }, parent);
  240. this.addMenuItem(menu, 'rotation', parent);
  241. })));
  242. this.put('align', new Menu(mxUtils.bind(this, function(menu, parent)
  243. {
  244. menu.addItem(mxResources.get('leftAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_LEFT); }, parent);
  245. menu.addItem(mxResources.get('center'), null, function() { graph.alignCells(mxConstants.ALIGN_CENTER); }, parent);
  246. menu.addItem(mxResources.get('rightAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_RIGHT); }, parent);
  247. menu.addSeparator(parent);
  248. menu.addItem(mxResources.get('topAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_TOP); }, parent);
  249. menu.addItem(mxResources.get('middle'), null, function() { graph.alignCells(mxConstants.ALIGN_MIDDLE); }, parent);
  250. menu.addItem(mxResources.get('bottomAlign'), null, function() { graph.alignCells(mxConstants.ALIGN_BOTTOM); }, parent);
  251. })));
  252. this.put('layout', new Menu(mxUtils.bind(this, function(menu, parent)
  253. {
  254. menu.addItem(mxResources.get('horizontalTree'), null, mxUtils.bind(this, function()
  255. {
  256. if (!graph.isSelectionEmpty())
  257. {
  258. var layout = new mxCompactTreeLayout(graph, true);
  259. layout.edgeRouting = false;
  260. layout.levelDistance = 30;
  261. this.editorUi.executeLayout(layout, true, true);
  262. }
  263. }), parent);
  264. menu.addItem(mxResources.get('verticalTree'), null, mxUtils.bind(this, function()
  265. {
  266. if (!graph.isSelectionEmpty())
  267. {
  268. var layout = new mxCompactTreeLayout(graph, false);
  269. layout.edgeRouting = false;
  270. layout.levelDistance = 30;
  271. this.editorUi.executeLayout(layout, true, true);
  272. }
  273. }), parent);
  274. menu.addSeparator(parent);
  275. menu.addItem(mxResources.get('horizontalFlow'), null, mxUtils.bind(this, function()
  276. {
  277. var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
  278. this.editorUi.executeLayout(layout, true, true);
  279. }), parent);
  280. menu.addItem(mxResources.get('verticalFlow'), null, mxUtils.bind(this, function()
  281. {
  282. var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_NORTH);
  283. this.editorUi.executeLayout(layout, true, true);
  284. }), parent);
  285. menu.addSeparator(parent);
  286. menu.addItem(mxResources.get('organic'), null, mxUtils.bind(this, function()
  287. {
  288. var layout = new mxFastOrganicLayout(graph);
  289. this.editorUi.executeLayout(layout, true, true);
  290. }), parent);
  291. menu.addItem(mxResources.get('circle'), null, mxUtils.bind(this, function()
  292. {
  293. var layout = new mxCircleLayout(graph);
  294. this.editorUi.executeLayout(layout, true, true, graph.getSelectionCells());
  295. }), parent);
  296. })));
  297. this.put('navigation', new Menu(mxUtils.bind(this, function(menu, parent)
  298. {
  299. this.addMenuItems(menu, ['home', '-', 'exitGroup', 'enterGroup', '-', 'expand', 'collapse'], parent);
  300. })));
  301. this.put('arrange', new Menu(mxUtils.bind(this, function(menu, parent)
  302. {
  303. this.addMenuItems(menu, ['toFront', 'toBack', '-'], parent);
  304. this.addSubmenu('direction', menu, parent);
  305. this.addSubmenu('layout', menu, parent);
  306. this.addSubmenu('align', menu, parent);
  307. menu.addSeparator(parent);
  308. this.addSubmenu('navigation', menu, parent);
  309. this.addMenuItems(menu, ['-', 'group', 'ungroup', 'removeFromGroup', '-', 'autosize', 'rotate'], parent);
  310. })));
  311. this.put('view', new Menu(mxUtils.bind(this, function(menu, parent)
  312. {
  313. this.addMenuItems(menu, ['actualSize','refreshView'], parent);
  314. menu.addSeparator();
  315. var scales = [0.25, 0.5, 0.75, 1, 2, 4];
  316. for (var i = 0; i < scales.length; i++)
  317. {
  318. (function(scale)
  319. {
  320. menu.addItem((scale * 100) + '%', null, function()
  321. {
  322. graph.zoomTo(scale);
  323. }, parent);
  324. })(scales[i]);
  325. }
  326. this.addMenuItems(menu, ['-', 'zoomIn', 'zoomOut', '-', 'fitWindow', 'customZoom', '-', 'fitPage', 'fitPageWidth'], parent);
  327. })));
  328. this.put('file', new Menu(mxUtils.bind(this, function(menu, parent)
  329. {
  330. //this.addMenuItems(menu, ['save', '-', 'import', 'editFile', '-', 'pageSetup', 'print'], parent);
  331. this.addMenuItems(menu, ['pageSetup'], parent);
  332. })));
  333. this.put('edit', new Menu(mxUtils.bind(this, function(menu, parent)
  334. {
  335. this.addMenuItems(menu, ['undo', 'redo', '-', 'cut', 'copy', 'paste', 'delete', '-', 'duplicate', '-',
  336. /* 'editLink', 'openLink', '-', 取消编辑连接和打开连接*/
  337. 'selectVertices', 'selectEdges', 'selectAll', '-', 'setAsDefaultEdge']);
  338. })));
  339. this.put('options', new Menu(mxUtils.bind(this, function(menu, parent)
  340. {
  341. this.addMenuItems(menu, ['grid', 'guides', 'tooltips', '-', 'connect', 'navigation',
  342. 'scrollbars']);
  343. })));
  344. /*this.put('initNext', new Menu(mxUtils.bind(this, function(menu, parent)
  345. {
  346. this.addMenuItems(menu, ['initNextRes'], parent);
  347. var graph = this.editorUi.editor.graph;
  348. graph.getModel().beginUpdate();
  349. try
  350. {
  351. var cels = graph.getSelectionCell();//获取当前选中的cell对象
  352. var vl=cels.getValue();
  353. cels.setValue("111");
  354. cels.setRemark(values);
  355. //cels.setFid(values);
  356. graph.refresh();//刷新整个区域
  357. }
  358. finally
  359. {
  360. graph.getModel().endUpdate();
  361. }
  362. //this.addMenuItems(menu, ['initNext'], parent);
  363. //menu.addSeparator();
  364. })));*/
  365. };
  366. /**
  367. * Adds the label menu items to the given menu and parent.
  368. */
  369. Menus.prototype.put = function(name, menu)
  370. {
  371. this.menus[name] = menu;
  372. };
  373. /**
  374. * Adds the label menu items to the given menu and parent.
  375. */
  376. Menus.prototype.get = function(name)
  377. {
  378. return this.menus[name];
  379. };
  380. /**
  381. * Adds the given submenu.
  382. */
  383. Menus.prototype.addSubmenu = function(name, menu, parent)
  384. {
  385. var enabled = this.get(name).enabled;
  386. if (menu.showDisabled || enabled)
  387. {
  388. var submenu = menu.addItem(mxResources.get(name), null, null, parent, null, enabled);
  389. this.addMenu(name, menu, submenu);
  390. }
  391. };
  392. /**
  393. * Adds the label menu items to the given menu and parent.
  394. */
  395. Menus.prototype.addMenu = function(name, popupMenu, parent)
  396. {
  397. var menu = this.get(name);
  398. if (menu != null && (popupMenu.showDisabled || menu.enabled))
  399. {
  400. this.get(name).execute(popupMenu, parent);
  401. }
  402. };
  403. /**
  404. * Adds a style change item to the given menu.
  405. */
  406. Menus.prototype.styleChange = function(menu, label, keys, values, sprite, parent)
  407. {
  408. return menu.addItem(label, null, mxUtils.bind(this, function()
  409. {
  410. var graph = this.editorUi.editor.graph;
  411. graph.getModel().beginUpdate();
  412. try
  413. {
  414. for (var i = 0; i < keys.length; i++)
  415. {
  416. graph.setCellStyles(keys[i], values[i]);
  417. }
  418. }
  419. finally
  420. {
  421. graph.getModel().endUpdate();
  422. }
  423. }), parent, sprite);
  424. };
  425. Menus.prototype.valueChange = function(menu, label, values, sprite, parent)
  426. {
  427. return menu.addItem(label, null, mxUtils.bind(this, function()
  428. {
  429. var graph = this.editorUi.editor.graph;
  430. graph.getModel().beginUpdate();
  431. try
  432. {
  433. var cels = graph.getSelectionCell();//获取当前选中的cell对象
  434. cels.setValue(label.substr(label.indexOf("—")+1)+"\n通讯:"+label.substr(0,label.indexOf("—")).replace("/","\n业务:"));
  435. cels.setRemark(values);
  436. //cels.setFid(values);
  437. graph.refresh();//刷新整个区域
  438. }
  439. finally
  440. {
  441. graph.getModel().endUpdate();
  442. }
  443. }), parent, sprite);
  444. };
  445. /**
  446. * Adds a style change item with a prompt to the given menu.
  447. */
  448. Menus.prototype.promptChange = function(menu, label, hint, defaultValue, key, parent, enabled)
  449. {
  450. return menu.addItem(label, null, mxUtils.bind(this, function()
  451. {
  452. var graph = this.editorUi.editor.graph;
  453. var value = defaultValue;
  454. var state = graph.getView().getState(graph.getSelectionCell());
  455. if (state != null)
  456. {
  457. value = state.style[key] || value;
  458. }
  459. value = mxUtils.prompt(mxResources.get('enterValue') + ((hint.length > 0) ? (' ' + hint) : ''), value);
  460. if (value != null && value.length > 0)
  461. {
  462. graph.setCellStyles(key, value);
  463. }
  464. }), parent, null, enabled);
  465. };
  466. /**
  467. * Adds a handler for showing a menu in the given element.
  468. */
  469. Menus.prototype.pickColor = function(key)
  470. {
  471. if (this.colorDialog == null)
  472. {
  473. this.colorDialog = new ColorDialog(this.editorUi);
  474. }
  475. this.colorDialog.currentColorKey = key;
  476. var graph = this.editorUi.editor.graph;
  477. var state = graph.getView().getState(graph.getSelectionCell());
  478. var color = 'none';
  479. if (state != null)
  480. {
  481. color = state.style[key] || color;
  482. }
  483. if (color == 'none')
  484. {
  485. color = 'ffffff';
  486. this.colorDialog.picker.fromString('ffffff');
  487. this.colorDialog.colorInput.value = 'none';
  488. }
  489. else
  490. {
  491. this.colorDialog.picker.fromString(color);
  492. }
  493. this.editorUi.showDialog(this.colorDialog.container, 220, 360, true, false);
  494. if (!mxClient.IS_TOUCH)
  495. {
  496. this.colorDialog.colorInput.focus();
  497. }
  498. };
  499. /**
  500. * Creates the keyboard event handler for the current graph and history.
  501. */
  502. Menus.prototype.addMenuItem = function(menu, key, parent)
  503. {
  504. var action = this.editorUi.actions.get(key);
  505. if (action != null && (menu.showDisabled || action.enabled))
  506. {
  507. var item = menu.addItem(action.label, null, action.funct, parent, null, action.enabled);
  508. // Adds checkmark image
  509. if (action.toggleAction && action.isSelected())
  510. {
  511. this.addCheckmark(item);
  512. }
  513. this.addShortcut(item, action);
  514. return item;
  515. }
  516. return null;
  517. };
  518. /**
  519. * Adds a checkmark to the given menuitem.
  520. */
  521. Menus.prototype.addShortcut = function(item, action)
  522. {
  523. if (action.shortcut != null)
  524. {
  525. var td = item.firstChild.nextSibling.nextSibling;
  526. var span = document.createElement('span');
  527. span.style.color = 'gray';
  528. mxUtils.write(span, action.shortcut);
  529. td.appendChild(span);
  530. }
  531. };
  532. /**
  533. * Adds a checkmark to the given menuitem.
  534. */
  535. Menus.prototype.addCheckmark = function(item)
  536. {
  537. var td = item.firstChild.nextSibling;
  538. td.style.backgroundImage = 'url(' + IMAGE_PATH + '/checkmark.gif)';
  539. td.style.backgroundRepeat = 'no-repeat';
  540. td.style.backgroundPosition = '2px 50%';
  541. td.style.width = '20px';
  542. };
  543. /**
  544. * Creates the keyboard event handler for the current graph and history.
  545. */
  546. Menus.prototype.addMenuItems = function(menu, keys, parent)
  547. {
  548. for (var i = 0; i < keys.length; i++)
  549. {
  550. if (keys[i] == '-')
  551. {
  552. menu.addSeparator(parent);
  553. }
  554. else
  555. {
  556. this.addMenuItem(menu, keys[i], parent);
  557. }
  558. }
  559. };
  560. /**
  561. * Creates the keyboard event handler for the current graph and history.
  562. */
  563. Menus.prototype.createPopupMenu = function(menu, cell, evt)
  564. {
  565. var graph = this.editorUi.editor.graph;
  566. menu.smartSeparators = true;
  567. if (graph.isSelectionEmpty())
  568. {
  569. this.addMenuItems(menu, ['undo', 'redo', '-', 'paste', '-']);
  570. }
  571. else
  572. {
  573. //this.addMenuItems(menu, ['delete', '-', 'cut', 'copy', '-', 'duplicate','-']);
  574. }
  575. if (graph.getSelectionCount() > 0)
  576. {
  577. this.addMenuItems(menu, ['toFront', 'toBack','-','layout','refreshView']);
  578. this.addSubmenu('linewidth', menu);
  579. if (graph.getSelectionCount() == 1){//如果选中的数量只有一个
  580. var cel = graph.getSelectionCell();
  581. //graph.setCellStyles(mxConstants.GUIDE_COLOR,"#FFFFFF");
  582. //cel.style=cel.style+";color;color=#FFFFFF;";
  583. if(!cel.isEdge()){//如果选中的不是边 则增加关联ip菜单
  584. this.addMenuItems(menu, ['initNext','initResProperties','initSubRes','invisibleSub','invisibleOrther','viewSuperRoute']);
  585. //this.addSubmenu('initNext', menu);
  586. }else{
  587. this.addMenuItems(menu, ['viewLink']);
  588. }
  589. }
  590. /*if (graph.getSelectionCount() == 1){//如果选中的数量只有一个
  591. var cel = graph.getSelectionCell();
  592. if(!cel.isEdge()){//如果选中的不是边 则增加关联ip菜单
  593. this.addSubmenu('connip', menu);
  594. }
  595. }
  596. if (graph.getModel().isEdge(graph.getSelectionCell()))
  597. {
  598. this.addSubmenu('line', menu);
  599. menu.addSeparator();
  600. this.addSubmenu('linestart', menu);
  601. this.addSubmenu('lineend', menu);
  602. menu.addSeparator();
  603. this.addMenuItems(menu, ['setAsDefaultEdge']);
  604. }
  605. else if (graph.getSelectionCount() > 1)
  606. {
  607. menu.addSeparator();
  608. this.addMenuItems(menu, ['group']);
  609. }
  610. else
  611. {
  612. this.addSubmenu('layout', menu);
  613. }
  614. */
  615. menu.addSeparator();
  616. }
  617. else
  618. {
  619. this.addMenuItems(menu, ['-', 'selectVertices', 'selectEdges', '-', 'selectAll','refreshView']);
  620. }
  621. };
  622. /**
  623. * Creates the keyboard event handler for the current graph and history.
  624. */
  625. Menus.prototype.createMenubar = function(container)
  626. {
  627. var menubar = new Menubar(this.editorUi, container);
  628. var menus = ['file', 'edit', 'view', 'format', 'text', 'arrange', 'options'];
  629. for (var i = 0; i < menus.length; i++)
  630. {
  631. menubar.addMenu(mxResources.get(menus[i]), this.get(menus[i]).funct);
  632. }
  633. return menubar;
  634. };
  635. /**
  636. * Construcs a new menubar for the given editor.
  637. */
  638. function Menubar(editorUi, container)
  639. {
  640. this.editorUi = editorUi;
  641. this.container = container;
  642. // Global handler to hide the current menu
  643. var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown';
  644. mxEvent.addListener(document, md, mxUtils.bind(this, function(evt)
  645. {
  646. this.hideMenu();
  647. }));
  648. };
  649. /**
  650. * Adds the menubar elements.
  651. */
  652. Menubar.prototype.hideMenu = function()
  653. {
  654. if (this.currentMenu != null)
  655. {
  656. this.currentMenu.hideMenu();
  657. }
  658. };
  659. /**
  660. * Adds a submenu to this menubar.
  661. */
  662. Menubar.prototype.addMenu = function(label, funct)
  663. {
  664. var elt = document.createElement('a');
  665. elt.setAttribute('href', 'javascript:void(0);');
  666. elt.className = 'geItem';
  667. mxUtils.write(elt, label);
  668. this.addMenuHandler(elt, funct);
  669. this.container.appendChild(elt);
  670. return elt;
  671. };
  672. /**
  673. * Adds a handler for showing a menu in the given element.
  674. */
  675. Menubar.prototype.addMenuHandler = function(elt, funct)
  676. {
  677. if (funct != null)
  678. {
  679. var show = true;
  680. var clickHandler = mxUtils.bind(this, function(evt)
  681. {
  682. if (show && elt.enabled == null || elt.enabled)
  683. {
  684. this.editorUi.editor.graph.panningHandler.hideMenu();
  685. var menu = new mxPopupMenu(funct);
  686. menu.div.className += ' geMenubarMenu';
  687. menu.smartSeparators = true;
  688. menu.showDisabled = true;
  689. menu.autoExpand = true;
  690. // Disables autoexpand and destroys menu when hidden
  691. menu.hideMenu = mxUtils.bind(this, function()
  692. {
  693. mxPopupMenu.prototype.hideMenu.apply(menu, arguments);
  694. menu.destroy();
  695. this.currentMenu = null;
  696. this.currentElt = null;
  697. });
  698. menu.popup(elt.offsetLeft + 4, elt.offsetTop + elt.offsetHeight + 4, null, evt);
  699. this.currentMenu = menu;
  700. this.currentElt = elt;
  701. }
  702. show = true;
  703. mxEvent.consume(evt);
  704. });
  705. // Shows menu automatically while in expanded state
  706. mxEvent.addListener(elt, 'click', clickHandler);
  707. }
  708. };
  709. /**
  710. * Constructs a new action for the given parameters.
  711. */
  712. function Menu(funct, enabled)
  713. {
  714. mxEventSource.call(this);
  715. this.funct = funct;
  716. this.enabled = (enabled != null) ? enabled : true;
  717. };
  718. // Menu inherits from mxEventSource
  719. mxUtils.extend(Menu, mxEventSource);
  720. /**
  721. * Sets the enabled state of the action and fires a stateChanged event.
  722. */
  723. Menu.prototype.setEnabled = function(value)
  724. {
  725. if (this.enabled != value)
  726. {
  727. this.enabled = value;
  728. this.fireEvent(new mxEventObject('stateChanged'));
  729. }
  730. };
  731. /**
  732. * Sets the enabled state of the action and fires a stateChanged event.
  733. */
  734. Menu.prototype.execute = function(menu, parent)
  735. {
  736. this.funct(menu, parent);
  737. };