EditorUi.js 104 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014
  1. /**
  2. * Copyright (c) 2006-2012, JGraph Ltd
  3. */
  4. /**
  5. * Constructs a new graph editor
  6. */
  7. EditorUi = function(editor, container, lightbox)
  8. {
  9. mxEventSource.call(this);
  10. this.destroyFunctions = [];
  11. this.editor = editor || new Editor();
  12. this.container = container || document.body;
  13. var graph = this.editor.graph;
  14. graph.lightbox = lightbox;
  15. // Pre-fetches submenu image or replaces with embedded image if supported
  16. if (mxClient.IS_SVG)
  17. {
  18. mxPopupMenu.prototype.submenuImage = 'data:image/gif;base64,R0lGODlhCQAJAIAAAP///zMzMyH5BAEAAAAALAAAAAAJAAkAAAIPhI8WebHsHopSOVgb26AAADs=';
  19. }
  20. else
  21. {
  22. new Image().src = mxPopupMenu.prototype.submenuImage;
  23. }
  24. // Pre-fetches connect image
  25. if (!mxClient.IS_SVG && mxConnectionHandler.prototype.connectImage != null)
  26. {
  27. new Image().src = mxConnectionHandler.prototype.connectImage.src;
  28. }
  29. // Disables graph and forced panning in chromeless mode
  30. if (this.editor.chromeless)
  31. {
  32. this.footerHeight = 0;
  33. graph.isEnabled = function() { return false; };
  34. graph.panningHandler.isForcePanningEvent = function(me)
  35. {
  36. return !mxEvent.isPopupTrigger(me.getEvent());
  37. };
  38. }
  39. // Creates the user interface
  40. this.actions = new Actions(this);
  41. this.menus = this.createMenus();
  42. this.createDivs();
  43. this.createUi();
  44. this.refresh();
  45. // Disables HTML and text selection
  46. var textEditing = mxUtils.bind(this, function(evt)
  47. {
  48. if (evt == null)
  49. {
  50. evt = window.event;
  51. }
  52. return this.isSelectionAllowed(evt) || graph.isEditing();
  53. });
  54. // Disables text selection while not editing and no dialog visible
  55. if (this.container == document.body)
  56. {
  57. this.menubarContainer.onselectstart = textEditing;
  58. this.menubarContainer.onmousedown = textEditing;
  59. this.toolbarContainer.onselectstart = textEditing;
  60. this.toolbarContainer.onmousedown = textEditing;
  61. this.diagramContainer.onselectstart = textEditing;
  62. this.diagramContainer.onmousedown = textEditing;
  63. this.sidebarContainer.onselectstart = textEditing;
  64. this.sidebarContainer.onmousedown = textEditing;
  65. this.formatContainer.onselectstart = textEditing;
  66. this.formatContainer.onmousedown = textEditing;
  67. this.footerContainer.onselectstart = textEditing;
  68. this.footerContainer.onmousedown = textEditing;
  69. if (this.tabContainer != null)
  70. {
  71. // Mouse down is needed for drag and drop
  72. this.tabContainer.onselectstart = textEditing;
  73. }
  74. }
  75. // And uses built-in context menu while editing
  76. if (!this.editor.chromeless)
  77. {
  78. if (mxClient.IS_IE && (typeof(document.documentMode) === 'undefined' || document.documentMode < 9))
  79. {
  80. mxEvent.addListener(this.diagramContainer, 'contextmenu', textEditing);
  81. }
  82. else
  83. {
  84. // Allows browser context menu outside of diagram and sidebar
  85. this.diagramContainer.oncontextmenu = textEditing;
  86. }
  87. }
  88. else
  89. {
  90. graph.panningHandler.usePopupTrigger = false;
  91. }
  92. // Contains the main graph instance inside the given panel
  93. graph.init(this.diagramContainer);
  94. // Creates hover icons
  95. this.hoverIcons = this.createHoverIcons();
  96. // Adds tooltip when mouse is over scrollbars to show space-drag panning option
  97. mxEvent.addListener(this.diagramContainer, 'mousemove', mxUtils.bind(this, function(evt)
  98. {
  99. var off = mxUtils.getOffset(this.diagramContainer);
  100. if (mxEvent.getClientX(evt) - off.x - this.diagramContainer.clientWidth > 0 ||
  101. mxEvent.getClientY(evt) - off.y - this.diagramContainer.clientHeight > 0)
  102. {
  103. this.diagramContainer.setAttribute('title', mxResources.get('panTooltip'));
  104. }
  105. else
  106. {
  107. this.diagramContainer.removeAttribute('title');
  108. }
  109. }));
  110. // Escape key hides dialogs, adds space+drag panning
  111. var spaceKeyPressed = false;
  112. // Overrides hovericons to disable while space key is pressed
  113. var hoverIconsIsResetEvent = this.hoverIcons.isResetEvent;
  114. this.hoverIcons.isResetEvent = function(evt, allowShift)
  115. {
  116. return spaceKeyPressed || hoverIconsIsResetEvent.apply(this, arguments);
  117. };
  118. this.keydownHandler = mxUtils.bind(this, function(evt)
  119. {
  120. if (evt.which == 32 /* Space */)
  121. {
  122. spaceKeyPressed = true;
  123. this.hoverIcons.reset();
  124. graph.container.style.cursor = 'move';
  125. // Disables scroll after space keystroke with scrollbars
  126. if (!graph.isEditing() && mxEvent.getSource(evt) == graph.container)
  127. {
  128. mxEvent.consume(evt);
  129. }
  130. }
  131. else if (!mxEvent.isConsumed(evt) && evt.keyCode == 27 /* Escape */)
  132. {
  133. this.hideDialog();
  134. }
  135. });
  136. mxEvent.addListener(document, 'keydown', this.keydownHandler);
  137. this.keyupHandler = mxUtils.bind(this, function(evt)
  138. {
  139. graph.container.style.cursor = '';
  140. spaceKeyPressed = false;
  141. });
  142. mxEvent.addListener(document, 'keyup', this.keyupHandler);
  143. // Forces panning for middle and right mouse buttons
  144. var panningHandlerIsForcePanningEvent = graph.panningHandler.isForcePanningEvent;
  145. graph.panningHandler.isForcePanningEvent = function(me)
  146. {
  147. // Ctrl+left button is reported as right button in FF on Mac
  148. return panningHandlerIsForcePanningEvent.apply(this, arguments) ||
  149. spaceKeyPressed || (mxEvent.isMouseEvent(me.getEvent()) &&
  150. (this.usePopupTrigger || !mxEvent.isPopupTrigger(me.getEvent())) &&
  151. ((!mxEvent.isControlDown(me.getEvent()) &&
  152. mxEvent.isRightMouseButton(me.getEvent())) ||
  153. mxEvent.isMiddleMouseButton(me.getEvent())));
  154. };
  155. // Ctrl/Cmd+Enter applies editing value except in Safari where Ctrl+Enter creates
  156. // a new line (while Enter creates a new paragraph and Shift+Enter stops)
  157. var cellEditorIsStopEditingEvent = graph.cellEditor.isStopEditingEvent;
  158. graph.cellEditor.isStopEditingEvent = function(evt)
  159. {
  160. return cellEditorIsStopEditingEvent.apply(this, arguments) ||
  161. (evt.keyCode == 13 && ((!mxClient.IS_SF && mxEvent.isControlDown(evt)) ||
  162. (mxClient.IS_MAC && mxEvent.isMetaDown(evt)) ||
  163. (mxClient.IS_SF && mxEvent.isShiftDown(evt))));
  164. };
  165. // Switches toolbar for text editing
  166. var textMode = false;
  167. var fontMenu = null;
  168. var sizeMenu = null;
  169. var nodes = null;
  170. var updateToolbar = mxUtils.bind(this, function()
  171. {
  172. if (textMode != graph.cellEditor.isContentEditing())
  173. {
  174. var node = this.toolbar.container.firstChild;
  175. var newNodes = [];
  176. while (node != null)
  177. {
  178. var tmp = node.nextSibling;
  179. if (mxUtils.indexOf(this.toolbar.staticElements, node) < 0)
  180. {
  181. node.parentNode.removeChild(node);
  182. newNodes.push(node);
  183. }
  184. node = tmp;
  185. }
  186. // Saves references to special items
  187. var tmp1 = this.toolbar.fontMenu;
  188. var tmp2 = this.toolbar.sizeMenu;
  189. if (nodes == null)
  190. {
  191. this.toolbar.createTextToolbar();
  192. }
  193. else
  194. {
  195. for (var i = 0; i < nodes.length; i++)
  196. {
  197. this.toolbar.container.appendChild(nodes[i]);
  198. }
  199. // Restores references to special items
  200. this.toolbar.fontMenu = fontMenu;
  201. this.toolbar.sizeMenu = sizeMenu;
  202. }
  203. textMode = graph.cellEditor.isContentEditing();
  204. fontMenu = tmp1;
  205. sizeMenu = tmp2;
  206. nodes = newNodes;
  207. }
  208. });
  209. var ui = this;
  210. // Overrides cell editor to update toolbar
  211. var cellEditorStartEditing = graph.cellEditor.startEditing;
  212. graph.cellEditor.startEditing = function()
  213. {
  214. cellEditorStartEditing.apply(this, arguments);
  215. updateToolbar();
  216. if (graph.cellEditor.isContentEditing())
  217. {
  218. var updating = false;
  219. var updateCssHandler = function()
  220. {
  221. if (!updating)
  222. {
  223. updating = true;
  224. window.setTimeout(function()
  225. {
  226. var selectedElement = graph.getSelectedElement();
  227. var node = selectedElement;
  228. while (node != null && node.nodeType != mxConstants.NODETYPE_ELEMENT)
  229. {
  230. node = node.parentNode;
  231. }
  232. if (node != null)
  233. {
  234. var css = mxUtils.getCurrentStyle(node);
  235. if (css != null && ui.toolbar != null)
  236. {
  237. // Strips leading and trailing quotes
  238. var ff = css.fontFamily;
  239. if (ff.charAt(0) == '\'')
  240. {
  241. ff = ff.substring(1);
  242. }
  243. if (ff.charAt(ff.length - 1) == '\'')
  244. {
  245. ff = ff.substring(0, ff.length - 1);
  246. }
  247. ui.toolbar.setFontName(ff);
  248. ui.toolbar.setFontSize(parseInt(css.fontSize));
  249. }
  250. }
  251. updating = false;
  252. }, 0);
  253. }
  254. };
  255. mxEvent.addListener(graph.cellEditor.textarea, 'input', updateCssHandler)
  256. mxEvent.addListener(graph.cellEditor.textarea, 'touchend', updateCssHandler);
  257. mxEvent.addListener(graph.cellEditor.textarea, 'mouseup', updateCssHandler);
  258. mxEvent.addListener(graph.cellEditor.textarea, 'keyup', updateCssHandler);
  259. updateCssHandler();
  260. }
  261. };
  262. var cellEditorStopEditing = graph.cellEditor.stopEditing;
  263. graph.cellEditor.stopEditing = function(cell, trigger)
  264. {
  265. cellEditorStopEditing.apply(this, arguments);
  266. updateToolbar();
  267. };
  268. // Enables scrollbars and sets cursor style for the container
  269. graph.container.setAttribute('tabindex', '0');
  270. graph.container.style.cursor = 'default';
  271. // Workaround for page scroll if embedded via iframe
  272. if (window.self === window.top && graph.container.parentNode != null)
  273. {
  274. try
  275. {
  276. graph.container.focus();
  277. }
  278. catch (e)
  279. {
  280. // ignores error in old versions of IE
  281. }
  282. }
  283. // Keeps graph container focused on mouse down
  284. var graphFireMouseEvent = graph.fireMouseEvent;
  285. graph.fireMouseEvent = function(evtName, me, sender)
  286. {
  287. if (evtName == mxEvent.MOUSE_DOWN)
  288. {
  289. this.container.focus();
  290. }
  291. graphFireMouseEvent.apply(this, arguments);
  292. };
  293. // Configures automatic expand on mouseover
  294. graph.popupMenuHandler.autoExpand = true;
  295. // Installs context menu
  296. if (this.menus != null)
  297. {
  298. graph.popupMenuHandler.factoryMethod = mxUtils.bind(this, function(menu, cell, evt)
  299. {
  300. this.menus.createPopupMenu(menu, cell, evt);
  301. });
  302. }
  303. // Hides context menu
  304. mxEvent.addGestureListeners(document, mxUtils.bind(this, function(evt)
  305. {
  306. graph.popupMenuHandler.hideMenu();
  307. }));
  308. // Create handler for key events
  309. this.keyHandler = this.createKeyHandler(editor);
  310. // Getter for key handler
  311. this.getKeyHandler = function()
  312. {
  313. return keyHandler;
  314. };
  315. // Stores the current style and assigns it to new cells
  316. var styles = ['rounded', 'shadow', 'glass', 'dashed', 'dashPattern', 'comic', 'labelBackgroundColor'];
  317. var connectStyles = ['shape', 'edgeStyle', 'curved', 'rounded', 'elbow', 'comic'];
  318. // Note: Everything that is not in styles is ignored (styles is augmented below)
  319. this.setDefaultStyle = function(cell)
  320. {
  321. var state = graph.view.getState(cell);
  322. if (state != null)
  323. {
  324. // Ignores default styles
  325. var clone = cell.clone();
  326. clone.style = ''
  327. var defaultStyle = graph.getCellStyle(clone);
  328. var values = [];
  329. var keys = [];
  330. for (var key in state.style)
  331. {
  332. if (defaultStyle[key] != state.style[key])
  333. {
  334. values.push(state.style[key]);
  335. keys.push(key);
  336. }
  337. }
  338. // Handles special case for value "none"
  339. var cellStyle = graph.getModel().getStyle(state.cell);
  340. var tokens = (cellStyle != null) ? cellStyle.split(';') : [];
  341. for (var i = 0; i < tokens.length; i++)
  342. {
  343. var tmp = tokens[i];
  344. var pos = tmp.indexOf('=');
  345. if (pos >= 0)
  346. {
  347. var key = tmp.substring(0, pos);
  348. var value = tmp.substring(pos + 1);
  349. if (defaultStyle[key] != null && value == 'none')
  350. {
  351. values.push(value);
  352. keys.push(key);
  353. }
  354. }
  355. }
  356. // Resets current style
  357. if (graph.getModel().isEdge(state.cell))
  358. {
  359. graph.currentEdgeStyle = {};
  360. }
  361. else
  362. {
  363. graph.currentVertexStyle = {}
  364. }
  365. this.fireEvent(new mxEventObject('styleChanged', 'keys', keys, 'values', values, 'cells', [state.cell]));
  366. }
  367. };
  368. this.clearDefaultStyle = function()
  369. {
  370. graph.currentEdgeStyle = graph.defaultEdgeStyle;
  371. graph.currentVertexStyle = graph.defaultVertexStyle;
  372. // Updates UI
  373. this.fireEvent(new mxEventObject('styleChanged', 'keys', [], 'values', [], 'cells', []));
  374. };
  375. // Keys that should be ignored if the cell has a value (known: new default for all cells is html=1 so
  376. // for the html key this effecticely only works for edges inserted via the connection handler)
  377. var valueStyles = ['fontFamily', 'fontSize', 'fontColor'];
  378. // Keys that always update the current edge style regardless of selection
  379. var alwaysEdgeStyles = ['edgeStyle', 'startArrow', 'startFill', 'startSize', 'endArrow', 'endFill', 'endSize', 'jettySize', 'orthogonalLoop'];
  380. // Keys that are ignored together (if one appears all are ignored)
  381. var keyGroups = [['startArrow', 'startFill', 'startSize', 'endArrow', 'endFill', 'endSize', 'jettySize', 'orthogonalLoop'],
  382. ['strokeColor', 'strokeWidth'],
  383. ['fillColor', 'gradientColor'],
  384. valueStyles,
  385. ['align'],
  386. ['html']];
  387. // Adds all keys used above to the styles array
  388. for (var i = 0; i < keyGroups.length; i++)
  389. {
  390. for (var j = 0; j < keyGroups[i].length; j++)
  391. {
  392. styles.push(keyGroups[i][j]);
  393. }
  394. }
  395. for (var i = 0; i < connectStyles.length; i++)
  396. {
  397. if (mxUtils.indexOf(styles, connectStyles[i]) < 0)
  398. {
  399. styles.push(connectStyles[i]);
  400. }
  401. }
  402. // Implements a global current style for edges and vertices that is applied to new cells
  403. var insertHandler = function(cells, asText)
  404. {
  405. graph.getModel().beginUpdate();
  406. try
  407. {
  408. // Applies only basic text styles
  409. if (asText)
  410. {
  411. var edge = graph.getModel().isEdge(cell);
  412. var current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle;
  413. var textStyles = ['fontSize', 'fontFamily', 'fontColor'];
  414. for (var j = 0; j < textStyles.length; j++)
  415. {
  416. var value = current[textStyles[j]];
  417. if (value != null)
  418. {
  419. graph.setCellStyles(textStyles[j], value, cells);
  420. }
  421. }
  422. }
  423. else
  424. {
  425. for (var i = 0; i < cells.length; i++)
  426. {
  427. var cell = cells[i];
  428. // Removes styles defined in the cell style from the styles to be applied
  429. var cellStyle = graph.getModel().getStyle(cell);
  430. var tokens = (cellStyle != null) ? cellStyle.split(';') : [];
  431. var appliedStyles = styles.slice();
  432. for (var j = 0; j < tokens.length; j++)
  433. {
  434. var tmp = tokens[j];
  435. var pos = tmp.indexOf('=');
  436. if (pos >= 0)
  437. {
  438. var key = tmp.substring(0, pos);
  439. var index = mxUtils.indexOf(appliedStyles, key);
  440. if (index >= 0)
  441. {
  442. appliedStyles.splice(index, 1);
  443. }
  444. // Handles special cases where one defined style ignores other styles
  445. for (var k = 0; k < keyGroups.length; k++)
  446. {
  447. var group = keyGroups[k];
  448. if (mxUtils.indexOf(group, key) >= 0)
  449. {
  450. for (var l = 0; l < group.length; l++)
  451. {
  452. var index2 = mxUtils.indexOf(appliedStyles, group[l]);
  453. if (index2 >= 0)
  454. {
  455. appliedStyles.splice(index2, 1);
  456. }
  457. }
  458. }
  459. }
  460. }
  461. }
  462. // Applies the current style to the cell
  463. var edge = graph.getModel().isEdge(cell);
  464. var current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle;
  465. for (var j = 0; j < appliedStyles.length; j++)
  466. {
  467. var key = appliedStyles[j];
  468. var styleValue = current[key];
  469. if (styleValue != null && (key != 'shape' || edge))
  470. {
  471. // Special case: Connect styles are not applied here but in the connection handler
  472. if (!edge || mxUtils.indexOf(connectStyles, key) < 0)
  473. {
  474. graph.setCellStyles(key, styleValue, [cell]);
  475. }
  476. }
  477. }
  478. }
  479. }
  480. }
  481. finally
  482. {
  483. graph.getModel().endUpdate();
  484. }
  485. };
  486. graph.addListener('cellsInserted', function(sender, evt)
  487. {
  488. insertHandler(evt.getProperty('cells'));
  489. });
  490. graph.addListener('textInserted', function(sender, evt)
  491. {
  492. insertHandler(evt.getProperty('cells'), true);
  493. });
  494. graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
  495. {
  496. var cells = [evt.getProperty('cell')];
  497. if (evt.getProperty('terminalInserted'))
  498. {
  499. cells.push(evt.getProperty('terminal'));
  500. }
  501. insertHandler(cells);
  502. });
  503. this.addListener('styleChanged', mxUtils.bind(this, function(sender, evt)
  504. {
  505. // Checks if edges and/or vertices were modified
  506. var cells = evt.getProperty('cells');
  507. var vertex = false;
  508. var edge = false;
  509. if (cells.length > 0)
  510. {
  511. for (var i = 0; i < cells.length; i++)
  512. {
  513. vertex = graph.getModel().isVertex(cells[i]) || vertex;
  514. edge = graph.getModel().isEdge(cells[i]) || edge;
  515. if (edge && vertex)
  516. {
  517. break;
  518. }
  519. }
  520. }
  521. else
  522. {
  523. vertex = true;
  524. edge = true;
  525. }
  526. var keys = evt.getProperty('keys');
  527. var values = evt.getProperty('values');
  528. for (var i = 0; i < keys.length; i++)
  529. {
  530. var common = mxUtils.indexOf(valueStyles, keys[i]) >= 0;
  531. // Ignores transparent stroke colors
  532. if (keys[i] != 'strokeColor' || (values[i] != null && values[i] != 'none'))
  533. {
  534. // Special case: Edge style and shape
  535. if (mxUtils.indexOf(connectStyles, keys[i]) >= 0)
  536. {
  537. if (edge || mxUtils.indexOf(alwaysEdgeStyles, keys[i]) >= 0)
  538. {
  539. if (values[i] == null)
  540. {
  541. delete graph.currentEdgeStyle[keys[i]];
  542. }
  543. else
  544. {
  545. graph.currentEdgeStyle[keys[i]] = values[i];
  546. }
  547. }
  548. // Uses style for vertex if defined in styles
  549. else if (vertex && mxUtils.indexOf(styles, keys[i]) >= 0)
  550. {
  551. if (values[i] == null)
  552. {
  553. delete graph.currentVertexStyle[keys[i]];
  554. }
  555. else
  556. {
  557. graph.currentVertexStyle[keys[i]] = values[i];
  558. }
  559. }
  560. }
  561. else if (mxUtils.indexOf(styles, keys[i]) >= 0)
  562. {
  563. if (vertex || common)
  564. {
  565. if (values[i] == null)
  566. {
  567. delete graph.currentVertexStyle[keys[i]];
  568. }
  569. else
  570. {
  571. graph.currentVertexStyle[keys[i]] = values[i];
  572. }
  573. }
  574. if (edge || common || mxUtils.indexOf(alwaysEdgeStyles, keys[i]) >= 0)
  575. {
  576. if (values[i] == null)
  577. {
  578. delete graph.currentEdgeStyle[keys[i]];
  579. }
  580. else
  581. {
  582. graph.currentEdgeStyle[keys[i]] = values[i];
  583. }
  584. }
  585. }
  586. }
  587. }
  588. if (this.toolbar != null)
  589. {
  590. this.toolbar.setFontName(graph.currentVertexStyle['fontFamily'] || Menus.prototype.defaultFont);
  591. this.toolbar.setFontSize(graph.currentVertexStyle['fontSize'] || Menus.prototype.defaultFontSize);
  592. if (this.toolbar.edgeStyleMenu != null)
  593. {
  594. // Updates toolbar icon for edge style
  595. var edgeStyleDiv = this.toolbar.edgeStyleMenu.getElementsByTagName('div')[0];
  596. if (graph.currentEdgeStyle['edgeStyle'] == 'orthogonalEdgeStyle' && graph.currentEdgeStyle['curved'] == '1')
  597. {
  598. edgeStyleDiv.className = 'geSprite geSprite-curved';
  599. }
  600. else if (graph.currentEdgeStyle['edgeStyle'] == 'straight' || graph.currentEdgeStyle['edgeStyle'] == 'none' ||
  601. graph.currentEdgeStyle['edgeStyle'] == null)
  602. {
  603. edgeStyleDiv.className = 'geSprite geSprite-straight';
  604. }
  605. else if (graph.currentEdgeStyle['edgeStyle'] == 'entityRelationEdgeStyle')
  606. {
  607. edgeStyleDiv.className = 'geSprite geSprite-entity';
  608. }
  609. else if (graph.currentEdgeStyle['edgeStyle'] == 'elbowEdgeStyle')
  610. {
  611. edgeStyleDiv.className = 'geSprite geSprite-' + ((graph.currentEdgeStyle['elbow'] == 'vertical') ?
  612. 'verticalelbow' : 'horizontalelbow');
  613. }
  614. else if (graph.currentEdgeStyle['edgeStyle'] == 'isometricEdgeStyle')
  615. {
  616. edgeStyleDiv.className = 'geSprite geSprite-' + ((graph.currentEdgeStyle['elbow'] == 'vertical') ?
  617. 'verticalisometric' : 'horizontalisometric');
  618. }
  619. else
  620. {
  621. edgeStyleDiv.className = 'geSprite geSprite-orthogonal';
  622. }
  623. }
  624. if (this.toolbar.edgeShapeMenu != null)
  625. {
  626. // Updates icon for edge shape
  627. var edgeShapeDiv = this.toolbar.edgeShapeMenu.getElementsByTagName('div')[0];
  628. if (graph.currentEdgeStyle['shape'] == 'link')
  629. {
  630. edgeShapeDiv.className = 'geSprite geSprite-linkedge';
  631. }
  632. else if (graph.currentEdgeStyle['shape'] == 'flexArrow')
  633. {
  634. edgeShapeDiv.className = 'geSprite geSprite-arrow';
  635. }
  636. else if (graph.currentEdgeStyle['shape'] == 'arrow')
  637. {
  638. edgeShapeDiv.className = 'geSprite geSprite-simplearrow';
  639. }
  640. else
  641. {
  642. edgeShapeDiv.className = 'geSprite geSprite-connection';
  643. }
  644. }
  645. // Updates icon for optinal line start shape
  646. if (this.toolbar.lineStartMenu != null)
  647. {
  648. var lineStartDiv = this.toolbar.lineStartMenu.getElementsByTagName('div')[0];
  649. lineStartDiv.className = this.getCssClassForMarker('start',
  650. graph.currentEdgeStyle['shape'], graph.currentEdgeStyle[mxConstants.STYLE_STARTARROW],
  651. mxUtils.getValue(graph.currentEdgeStyle, 'startFill', '1'));
  652. }
  653. // Updates icon for optinal line end shape
  654. if (this.toolbar.lineEndMenu != null)
  655. {
  656. var lineEndDiv = this.toolbar.lineEndMenu.getElementsByTagName('div')[0];
  657. lineEndDiv.className = this.getCssClassForMarker('end',
  658. graph.currentEdgeStyle['shape'], graph.currentEdgeStyle[mxConstants.STYLE_ENDARROW],
  659. mxUtils.getValue(graph.currentEdgeStyle, 'endFill', '1'));
  660. }
  661. }
  662. }));
  663. // Update font size and font family labels
  664. if (this.toolbar != null)
  665. {
  666. var update = mxUtils.bind(this, function()
  667. {
  668. var ff = graph.currentVertexStyle['fontFamily'] || 'Helvetica';
  669. var fs = String(graph.currentVertexStyle['fontSize'] || '12');
  670. var state = graph.getView().getState(graph.getSelectionCell());
  671. if (state != null)
  672. {
  673. ff = state.style[mxConstants.STYLE_FONTFAMILY] || ff;
  674. fs = state.style[mxConstants.STYLE_FONTSIZE] || fs;
  675. if (ff.length > 10)
  676. {
  677. ff = ff.substring(0, 8) + '...';
  678. }
  679. }
  680. this.toolbar.setFontName(ff);
  681. this.toolbar.setFontSize(fs);
  682. });
  683. graph.getSelectionModel().addListener(mxEvent.CHANGE, update);
  684. graph.getModel().addListener(mxEvent.CHANGE, update);
  685. }
  686. // Makes sure the current layer is visible when cells are added
  687. graph.addListener(mxEvent.CELLS_ADDED, function(sender, evt)
  688. {
  689. var cells = evt.getProperty('cells');
  690. var parent = evt.getProperty('parent');
  691. if (graph.getModel().isLayer(parent) && !graph.isCellVisible(parent) && cells != null && cells.length > 0)
  692. {
  693. graph.getModel().setVisible(parent, true);
  694. }
  695. });
  696. // Global handler to hide the current menu
  697. this.gestureHandler = mxUtils.bind(this, function(evt)
  698. {
  699. if (this.currentMenu != null && mxEvent.getSource(evt) != this.currentMenu.div)
  700. {
  701. this.hideCurrentMenu();
  702. }
  703. });
  704. mxEvent.addGestureListeners(document, this.gestureHandler);
  705. // Updates the editor UI after the window has been resized or the orientation changes
  706. // Timeout is workaround for old IE versions which have a delay for DOM client sizes.
  707. // Should not use delay > 0 to avoid handle multiple repaints during window resize
  708. this.resizeHandler = mxUtils.bind(this, function()
  709. {
  710. window.setTimeout(mxUtils.bind(this, function()
  711. {
  712. this.refresh();
  713. }), 0);
  714. });
  715. mxEvent.addListener(window, 'resize', this.resizeHandler);
  716. this.orientationChangeHandler = mxUtils.bind(this, function()
  717. {
  718. this.refresh();
  719. });
  720. mxEvent.addListener(window, 'orientationchange', this.orientationChangeHandler);
  721. // Workaround for bug on iOS see
  722. // http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue
  723. if (mxClient.IS_IOS && !window.navigator.standalone)
  724. {
  725. this.scrollHandler = mxUtils.bind(this, function()
  726. {
  727. window.scrollTo(0, 0);
  728. });
  729. mxEvent.addListener(window, 'scroll', this.scrollHandler);
  730. }
  731. /**
  732. * Sets the initial scrollbar locations after a file was loaded.
  733. */
  734. this.editor.addListener('resetGraphView', mxUtils.bind(this, function()
  735. {
  736. this.resetScrollbars();
  737. }));
  738. /**
  739. * Repaints the grid.
  740. */
  741. this.addListener('gridEnabledChanged', mxUtils.bind(this, function()
  742. {
  743. graph.view.validateBackground();
  744. }));
  745. this.addListener('backgroundColorChanged', mxUtils.bind(this, function()
  746. {
  747. graph.view.validateBackground();
  748. }));
  749. /**
  750. * Repaints the grid.
  751. */
  752. graph.addListener('gridSizeChanged', mxUtils.bind(this, function()
  753. {
  754. if (graph.isGridEnabled())
  755. {
  756. graph.view.validateBackground();
  757. }
  758. }));
  759. // Resets UI, updates action and menu states
  760. this.editor.resetGraph();
  761. this.init();
  762. this.open();
  763. };
  764. // Extends mxEventSource
  765. mxUtils.extend(EditorUi, mxEventSource);
  766. /**
  767. * Global config that specifies if the compact UI elements should be used.
  768. */
  769. EditorUi.compactUi = true;
  770. /**
  771. * Specifies the size of the split bar.
  772. */
  773. EditorUi.prototype.splitSize = (mxClient.IS_TOUCH || mxClient.IS_POINTER) ? 12 : 8;
  774. /**
  775. * Specifies the height of the menubar. Default is 34.
  776. */
  777. EditorUi.prototype.menubarHeight = 30;
  778. /**
  779. * Specifies the width of the format panel should be enabled. Default is true.
  780. */
  781. EditorUi.prototype.formatEnabled = true;
  782. /**
  783. * Specifies the width of the format panel. Default is 240.
  784. */
  785. EditorUi.prototype.formatWidth = 240;
  786. /**
  787. * Specifies the height of the toolbar. Default is 36.
  788. */
  789. EditorUi.prototype.toolbarHeight = 34;
  790. /**
  791. * Specifies the height of the footer. Default is 28.
  792. */
  793. EditorUi.prototype.footerHeight = 28;
  794. /**
  795. * Specifies the height of the optional sidebarFooterContainer. Default is 34.
  796. */
  797. EditorUi.prototype.sidebarFooterHeight = 34;
  798. /**
  799. * Specifies the link for the edit button in chromeless mode.
  800. */
  801. EditorUi.prototype.editButtonLink = null;
  802. /**
  803. * Specifies the position of the horizontal split bar. Default is 208 or 118 for
  804. * screen widths <= 640px.
  805. */
  806. EditorUi.prototype.hsplitPosition = (screen.width <= 640) ? 118 : 208;
  807. /**
  808. * Specifies if animations are allowed in <executeLayout>. Default is true.
  809. */
  810. EditorUi.prototype.allowAnimation = true;
  811. /**
  812. * Installs the listeners to update the action states.
  813. */
  814. EditorUi.prototype.init = function()
  815. {
  816. /**
  817. * Keypress starts immediate editing on selection cell
  818. */
  819. var graph = this.editor.graph;
  820. mxEvent.addListener(graph.container, 'keydown', mxUtils.bind(this, function(evt)
  821. {
  822. this.onKeyDown(evt);
  823. }));
  824. mxEvent.addListener(graph.container, 'keypress', mxUtils.bind(this, function(evt)
  825. {
  826. this.onKeyPress(evt);
  827. }));
  828. // Updates action states
  829. this.addUndoListener();
  830. this.addBeforeUnloadListener();
  831. graph.getSelectionModel().addListener(mxEvent.CHANGE, mxUtils.bind(this, function()
  832. {
  833. this.updateActionStates();
  834. }));
  835. graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(this, function()
  836. {
  837. this.updateActionStates();
  838. }));
  839. // Changes action states after change of default parent
  840. var graphSetDefaultParent = graph.setDefaultParent;
  841. var ui = this;
  842. this.editor.graph.setDefaultParent = function()
  843. {
  844. graphSetDefaultParent.apply(this, arguments);
  845. ui.updateActionStates();
  846. };
  847. // Hack to make editLink available in vertex handler
  848. graph.editLink = ui.actions.get('editLink').funct;
  849. this.updateActionStates();
  850. this.initClipboard();
  851. this.initCanvas();
  852. if (this.format != null)
  853. {
  854. this.format.init();
  855. }
  856. };
  857. /**
  858. * Returns true if the given event should start editing. This implementation returns true.
  859. */
  860. EditorUi.prototype.onKeyDown = function(evt)
  861. {
  862. var graph = this.editor.graph;
  863. // Tab selects next cell
  864. if (evt.which == 9 && graph.isEnabled() && !mxEvent.isAltDown(evt))
  865. {
  866. if (graph.isEditing())
  867. {
  868. graph.stopEditing(false);
  869. }
  870. else
  871. {
  872. graph.selectCell(!mxEvent.isShiftDown(evt));
  873. }
  874. mxEvent.consume(evt);
  875. }
  876. };
  877. /**
  878. * Returns true if the given event should start editing. This implementation returns true.
  879. */
  880. EditorUi.prototype.onKeyPress = function(evt)
  881. {
  882. var graph = this.editor.graph;
  883. // KNOWN: Focus does not work if label is empty in quirks mode
  884. if (this.isImmediateEditingEvent(evt) && !graph.isEditing() && !graph.isSelectionEmpty() && evt.which !== 0 &&
  885. !mxEvent.isAltDown(evt) && !mxEvent.isControlDown(evt) && !mxEvent.isMetaDown(evt))
  886. {
  887. graph.escape();
  888. graph.startEditing();
  889. // Workaround for FF where char is lost if cursor is placed before char
  890. if (mxClient.IS_FF)
  891. {
  892. var ce = graph.cellEditor;
  893. ce.textarea.innerHTML = String.fromCharCode(evt.which);
  894. // Moves cursor to end of textarea
  895. var range = document.createRange();
  896. range.selectNodeContents(ce.textarea);
  897. range.collapse(false);
  898. var sel = window.getSelection();
  899. sel.removeAllRanges();
  900. sel.addRange(range);
  901. }
  902. }
  903. };
  904. /**
  905. * Returns true if the given event should start editing. This implementation returns true.
  906. */
  907. EditorUi.prototype.isImmediateEditingEvent = function(evt)
  908. {
  909. return true;
  910. };
  911. /**
  912. * Private helper method.
  913. */
  914. EditorUi.prototype.getCssClassForMarker = function(prefix, shape, marker, fill)
  915. {
  916. var result = '';
  917. if (shape == 'flexArrow')
  918. {
  919. result = (marker != null && marker != mxConstants.NONE) ?
  920. 'geSprite geSprite-' + prefix + 'blocktrans' : 'geSprite geSprite-noarrow';
  921. }
  922. else
  923. {
  924. if (marker == mxConstants.ARROW_CLASSIC)
  925. {
  926. result = (fill == '1') ? 'geSprite geSprite-' + prefix + 'classic' : 'geSprite geSprite-' + prefix + 'classictrans';
  927. }
  928. else if (marker == mxConstants.ARROW_CLASSIC_THIN)
  929. {
  930. result = (fill == '1') ? 'geSprite geSprite-' + prefix + 'classicthin' : 'geSprite geSprite-' + prefix + 'classicthintrans';
  931. }
  932. else if (marker == mxConstants.ARROW_OPEN)
  933. {
  934. result = 'geSprite geSprite-' + prefix + 'open';
  935. }
  936. else if (marker == mxConstants.ARROW_OPEN_THIN)
  937. {
  938. result = 'geSprite geSprite-' + prefix + 'openthin';
  939. }
  940. else if (marker == mxConstants.ARROW_BLOCK)
  941. {
  942. result = (fill == '1') ? 'geSprite geSprite-' + prefix + 'block' : 'geSprite geSprite-' + prefix + 'blocktrans';
  943. }
  944. else if (marker == mxConstants.ARROW_BLOCK_THIN)
  945. {
  946. result = (fill == '1') ? 'geSprite geSprite-' + prefix + 'blockthin' : 'geSprite geSprite-' + prefix + 'blockthintrans';
  947. }
  948. else if (marker == mxConstants.ARROW_OVAL)
  949. {
  950. result = (fill == '1') ? 'geSprite geSprite-' + prefix + 'oval' : 'geSprite geSprite-' + prefix + 'ovaltrans';
  951. }
  952. else if (marker == mxConstants.ARROW_DIAMOND)
  953. {
  954. result = (fill == '1') ? 'geSprite geSprite-' + prefix + 'diamond' : 'geSprite geSprite-' + prefix + 'diamondtrans';
  955. }
  956. else if (marker == mxConstants.ARROW_DIAMOND_THIN)
  957. {
  958. result = (fill == '1') ? 'geSprite geSprite-' + prefix + 'thindiamond' : 'geSprite geSprite-' + prefix + 'thindiamondtrans';
  959. }
  960. else if (marker == 'openAsync')
  961. {
  962. result = 'geSprite geSprite-' + prefix + 'openasync';
  963. }
  964. else if (marker == 'dash')
  965. {
  966. result = 'geSprite geSprite-' + prefix + 'dash';
  967. }
  968. else if (marker == 'cross')
  969. {
  970. result = 'geSprite geSprite-' + prefix + 'cross';
  971. }
  972. else if (marker == 'async')
  973. {
  974. result = (fill == '1') ? 'geSprite geSprite-' + prefix + 'async' : 'geSprite geSprite-' + prefix + 'asynctrans';
  975. }
  976. else if (marker == 'circle' || marker == 'circlePlus')
  977. {
  978. result = (fill == '1' || marker == 'circle') ? 'geSprite geSprite-' + prefix + 'circle' : 'geSprite geSprite-' + prefix + 'circleplus';
  979. }
  980. else if (marker == 'ERone')
  981. {
  982. result = 'geSprite geSprite-' + prefix + 'erone';
  983. }
  984. else if (marker == 'ERmandOne')
  985. {
  986. result = 'geSprite geSprite-' + prefix + 'eronetoone';
  987. }
  988. else if (marker == 'ERmany')
  989. {
  990. result = 'geSprite geSprite-' + prefix + 'ermany';
  991. }
  992. else if (marker == 'ERoneToMany')
  993. {
  994. result = 'geSprite geSprite-' + prefix + 'eronetomany';
  995. }
  996. else if (marker == 'ERzeroToOne')
  997. {
  998. result = 'geSprite geSprite-' + prefix + 'eroneopt';
  999. }
  1000. else if (marker == 'ERzeroToMany')
  1001. {
  1002. result = 'geSprite geSprite-' + prefix + 'ermanyopt';
  1003. }
  1004. else
  1005. {
  1006. result = 'geSprite geSprite-noarrow';
  1007. }
  1008. }
  1009. return result;
  1010. };
  1011. /**
  1012. * Overridden in Menus.js
  1013. */
  1014. EditorUi.prototype.createMenus = function()
  1015. {
  1016. return null;
  1017. };
  1018. /**
  1019. * Hook for allowing selection and context menu for certain events.
  1020. */
  1021. EditorUi.prototype.updatePasteActionStates = function()
  1022. {
  1023. var graph = this.editor.graph;
  1024. var paste = this.actions.get('paste');
  1025. var pasteHere = this.actions.get('pasteHere');
  1026. paste.setEnabled(this.editor.graph.cellEditor.isContentEditing() || (!mxClipboard.isEmpty() &&
  1027. graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent())));
  1028. pasteHere.setEnabled(paste.isEnabled());
  1029. };
  1030. /**
  1031. * Hook for allowing selection and context menu for certain events.
  1032. */
  1033. EditorUi.prototype.initClipboard = function()
  1034. {
  1035. var ui = this;
  1036. var mxClipboardCut = mxClipboard.cut;
  1037. mxClipboard.cut = function(graph)
  1038. {
  1039. if (graph.cellEditor.isContentEditing())
  1040. {
  1041. document.execCommand('cut', false, null);
  1042. }
  1043. else
  1044. {
  1045. mxClipboardCut.apply(this, arguments);
  1046. }
  1047. ui.updatePasteActionStates();
  1048. };
  1049. var mxClipboardCopy = mxClipboard.copy;
  1050. mxClipboard.copy = function(graph)
  1051. {
  1052. if (graph.cellEditor.isContentEditing())
  1053. {
  1054. document.execCommand('copy', false, null);
  1055. }
  1056. else
  1057. {
  1058. mxClipboardCopy.apply(this, arguments);
  1059. }
  1060. ui.updatePasteActionStates();
  1061. };
  1062. var mxClipboardPaste = mxClipboard.paste;
  1063. mxClipboard.paste = function(graph)
  1064. {
  1065. var result = null;
  1066. if (graph.cellEditor.isContentEditing())
  1067. {
  1068. document.execCommand('paste', false, null);
  1069. }
  1070. else
  1071. {
  1072. result = mxClipboardPaste.apply(this, arguments);
  1073. }
  1074. ui.updatePasteActionStates();
  1075. return result;
  1076. };
  1077. // Overrides cell editor to update paste action state
  1078. var cellEditorStartEditing = this.editor.graph.cellEditor.startEditing;
  1079. this.editor.graph.cellEditor.startEditing = function()
  1080. {
  1081. cellEditorStartEditing.apply(this, arguments);
  1082. ui.updatePasteActionStates();
  1083. };
  1084. var cellEditorStopEditing = this.editor.graph.cellEditor.stopEditing;
  1085. this.editor.graph.cellEditor.stopEditing = function(cell, trigger)
  1086. {
  1087. cellEditorStopEditing.apply(this, arguments);
  1088. ui.updatePasteActionStates();
  1089. };
  1090. this.updatePasteActionStates();
  1091. };
  1092. /**
  1093. * Initializes the infinite canvas.
  1094. */
  1095. EditorUi.prototype.initCanvas = function()
  1096. {
  1097. var graph = this.editor.graph;
  1098. // Initial page layout view, scrollBuffer and timer-based scrolling
  1099. var graph = this.editor.graph;
  1100. graph.timerAutoScroll = true;
  1101. /**
  1102. * Returns the padding for pages in page view with scrollbars.
  1103. */
  1104. graph.getPagePadding = function()
  1105. {
  1106. return new mxPoint(Math.max(0, Math.round((graph.container.offsetWidth - 34) / graph.view.scale)),
  1107. Math.max(0, Math.round((graph.container.offsetHeight - 34) / graph.view.scale)));
  1108. };
  1109. // Fits the number of background pages to the graph
  1110. graph.view.getBackgroundPageBounds = function()
  1111. {
  1112. var layout = this.graph.getPageLayout();
  1113. var page = this.graph.getPageSize();
  1114. return new mxRectangle(this.scale * (this.translate.x + layout.x * page.width),
  1115. this.scale * (this.translate.y + layout.y * page.height),
  1116. this.scale * layout.width * page.width,
  1117. this.scale * layout.height * page.height);
  1118. };
  1119. graph.getPreferredPageSize = function(bounds, width, height)
  1120. {
  1121. var pages = this.getPageLayout();
  1122. var size = this.getPageSize();
  1123. return new mxRectangle(0, 0, pages.width * size.width, pages.height * size.height);
  1124. };
  1125. // Scales pages/graph to fit available size
  1126. var resize = null;
  1127. if (this.editor.chromeless)
  1128. {
  1129. resize = mxUtils.bind(this, function(autoscale, maxScale)
  1130. {
  1131. if (graph.container != null)
  1132. {
  1133. var b = (graph.pageVisible) ? graph.view.getBackgroundPageBounds() : graph.getGraphBounds();
  1134. var tr = graph.view.translate;
  1135. var s = graph.view.scale;
  1136. // Normalizes the bounds
  1137. b = mxRectangle.fromRectangle(b);
  1138. b.x = b.x / s - tr.x;
  1139. b.y = b.y / s - tr.y;
  1140. b.width /= s;
  1141. b.height /= s;
  1142. var st = graph.container.scrollTop;
  1143. var sl = graph.container.scrollLeft;
  1144. var sb = (mxClient.IS_QUIRKS || document.documentMode >= 8) ? 20 : 14;
  1145. if (document.documentMode == 8 || document.documentMode == 9)
  1146. {
  1147. sb += 3;
  1148. }
  1149. var cw = graph.container.offsetWidth - sb;
  1150. var ch = graph.container.offsetHeight - sb;
  1151. var ns = (autoscale) ? Math.max(0.3, Math.min(maxScale || 1, cw / b.width)) : s;
  1152. var dx = Math.max((cw - ns * b.width) / 2, 0) / ns;
  1153. var dy = Math.max((ch - ns * b.height) / 4, 0) / ns;
  1154. graph.view.scaleAndTranslate(ns, dx - b.x, dy - b.y);
  1155. graph.container.scrollTop = st * ns / s;
  1156. graph.container.scrollLeft = sl * ns/ s;
  1157. }
  1158. });
  1159. // Hack to make function available to subclassers
  1160. this.chromelessResize = resize;
  1161. // Removable resize listener
  1162. var autoscaleResize = mxUtils.bind(this, function()
  1163. {
  1164. resize(false);
  1165. });
  1166. mxEvent.addListener(window, 'resize', autoscaleResize);
  1167. this.destroyFunctions.push(function()
  1168. {
  1169. mxEvent.removeListener(window, 'resize', autoscaleResize);
  1170. });
  1171. this.editor.addListener('resetGraphView', mxUtils.bind(this, function()
  1172. {
  1173. resize(true);
  1174. }));
  1175. this.actions.get('zoomIn').funct = function(evt) { graph.zoomIn(); resize(false); };
  1176. this.actions.get('zoomOut').funct = function(evt) { graph.zoomOut(); resize(false); };
  1177. // Creates toolbar for viewer - do not use CSS here
  1178. // as this may be used in a viewer that has no CSS
  1179. this.chromelessToolbar = document.createElement('div');
  1180. this.chromelessToolbar.style.position = 'fixed';
  1181. this.chromelessToolbar.style.overflow = 'hidden';
  1182. this.chromelessToolbar.style.boxSizing = 'border-box';
  1183. this.chromelessToolbar.style.whiteSpace = 'nowrap';
  1184. this.chromelessToolbar.style.backgroundColor = '#000000';
  1185. this.chromelessToolbar.style.padding = '10px 10px 8px 10px';
  1186. this.chromelessToolbar.style.left = '50%';
  1187. if (!mxClient.IS_VML)
  1188. {
  1189. mxUtils.setPrefixedStyle(this.chromelessToolbar.style, 'borderRadius', '20px');
  1190. mxUtils.setPrefixedStyle(this.chromelessToolbar.style, 'transition', 'opacity 600ms ease-in-out');
  1191. }
  1192. var updateChromelessToolbarPosition = mxUtils.bind(this, function()
  1193. {
  1194. var css = mxUtils.getCurrentStyle(graph.container);
  1195. this.chromelessToolbar.style.bottom = ((css != null) ? parseInt(css['margin-bottom'] || 0) : 0) +
  1196. ((this.tabContainer != null) ? (20 + parseInt(this.tabContainer.style.height)) : 20) + 'px';
  1197. });
  1198. this.editor.addListener('resetGraphView', updateChromelessToolbarPosition);
  1199. updateChromelessToolbarPosition();
  1200. var btnCount = 0;
  1201. var addButton = mxUtils.bind(this, function(fn, imgSrc, tip)
  1202. {
  1203. btnCount++;
  1204. var a = document.createElement('span');
  1205. a.style.paddingLeft = '8px';
  1206. a.style.paddingRight = '8px';
  1207. a.style.cursor = 'pointer';
  1208. mxEvent.addListener(a, 'click', fn);
  1209. if (tip != null)
  1210. {
  1211. a.setAttribute('title', tip);
  1212. }
  1213. var img = document.createElement('img');
  1214. img.setAttribute('border', '0');
  1215. img.setAttribute('src', imgSrc);
  1216. a.appendChild(img);
  1217. this.chromelessToolbar.appendChild(a);
  1218. return a;
  1219. });
  1220. var prevButton = addButton(mxUtils.bind(this, function(evt)
  1221. {
  1222. this.actions.get('previousPage').funct();
  1223. mxEvent.consume(evt);
  1224. }), Editor.previousLargeImage, mxResources.get('previousPage'));
  1225. var pageInfo = document.createElement('div');
  1226. pageInfo.style.display = 'inline-block';
  1227. pageInfo.style.verticalAlign = 'top';
  1228. pageInfo.style.fontFamily = 'Helvetica,Arial';
  1229. pageInfo.style.marginTop = '8px';
  1230. pageInfo.style.color = '#ffffff';
  1231. this.chromelessToolbar.appendChild(pageInfo);
  1232. var nextButton = addButton(mxUtils.bind(this, function(evt)
  1233. {
  1234. this.actions.get('nextPage').funct();
  1235. mxEvent.consume(evt);
  1236. }), Editor.nextLargeImage, mxResources.get('nextPage'));
  1237. var updatePageInfo = mxUtils.bind(this, function()
  1238. {
  1239. if (this.pages != null && this.pages.length > 1 && this.currentPage != null)
  1240. {
  1241. pageInfo.innerHTML = '';
  1242. mxUtils.write(pageInfo, (mxUtils.indexOf(this.pages, this.currentPage) + 1) + ' / ' + this.pages.length);
  1243. }
  1244. });
  1245. prevButton.style.paddingLeft = '0px';
  1246. prevButton.style.paddingRight = '4px';
  1247. nextButton.style.paddingLeft = '4px';
  1248. nextButton.style.paddingRight = '0px';
  1249. var updatePageButtons = mxUtils.bind(this, function()
  1250. {
  1251. if (this.pages != null && this.pages.length > 1 && this.currentPage != null)
  1252. {
  1253. nextButton.style.display = '';
  1254. prevButton.style.display = '';
  1255. pageInfo.style.display = 'inline-block';
  1256. }
  1257. else
  1258. {
  1259. nextButton.style.display = 'none';
  1260. prevButton.style.display = 'none';
  1261. pageInfo.style.display = 'none';
  1262. }
  1263. updatePageInfo();
  1264. });
  1265. this.editor.addListener('resetGraphView', updatePageButtons);
  1266. this.editor.addListener('pageSelected', updatePageInfo);
  1267. addButton(mxUtils.bind(this, function(evt)
  1268. {
  1269. this.actions.get('zoomOut').funct();
  1270. mxEvent.consume(evt);
  1271. }), Editor.zoomOutLargeImage, mxResources.get('zoomOut') + ' (Alt+Mousewheel)');
  1272. addButton(mxUtils.bind(this, function(evt)
  1273. {
  1274. this.actions.get('zoomIn').funct();
  1275. mxEvent.consume(evt);
  1276. }), Editor.zoomInLargeImage, mxResources.get('zoomIn') + ' (Alt+Mousewheel)');
  1277. addButton(mxUtils.bind(this, function(evt)
  1278. {
  1279. if (graph.lightbox)
  1280. {
  1281. if (graph.view.scale == 1)
  1282. {
  1283. this.lightboxFit();
  1284. }
  1285. else
  1286. {
  1287. graph.zoomTo(1);
  1288. }
  1289. resize(false);
  1290. }
  1291. else
  1292. {
  1293. resize(true);
  1294. }
  1295. mxEvent.consume(evt);
  1296. }), Editor.actualSizeLargeImage, mxResources.get('fit'));
  1297. // Changes toolbar opacity on hover
  1298. var fadeThread = null;
  1299. var fadeThread2 = null;
  1300. var fadeOut = mxUtils.bind(this, function(delay)
  1301. {
  1302. if (fadeThread != null)
  1303. {
  1304. window.clearTimeout(fadeThread);
  1305. fadeThead = null;
  1306. }
  1307. if (fadeThread2 != null)
  1308. {
  1309. window.clearTimeout(fadeThread2);
  1310. fadeThead2 = null;
  1311. }
  1312. fadeThread = window.setTimeout(mxUtils.bind(this, function()
  1313. {
  1314. mxUtils.setOpacity(this.chromelessToolbar, 0);
  1315. fadeThread = null;
  1316. fadeThread2 = window.setTimeout(mxUtils.bind(this, function()
  1317. {
  1318. this.chromelessToolbar.style.display = 'none';
  1319. fadeThread2 = null;
  1320. }), 600);
  1321. }), delay || 200);
  1322. });
  1323. var fadeIn = mxUtils.bind(this, function(opacity)
  1324. {
  1325. if (fadeThread != null)
  1326. {
  1327. window.clearTimeout(fadeThread);
  1328. fadeThead = null;
  1329. }
  1330. if (fadeThread2 != null)
  1331. {
  1332. window.clearTimeout(fadeThread2);
  1333. fadeThead2 = null;
  1334. }
  1335. this.chromelessToolbar.style.display = '';
  1336. mxUtils.setOpacity(this.chromelessToolbar, opacity || 30);
  1337. });
  1338. if (urlParams['layers'] == '1')
  1339. {
  1340. this.layersDialog = null;
  1341. var layersButton = addButton(mxUtils.bind(this, function(evt)
  1342. {
  1343. if (this.layersDialog != null)
  1344. {
  1345. this.layersDialog.parentNode.removeChild(this.layersDialog);
  1346. this.layersDialog = null;
  1347. }
  1348. else
  1349. {
  1350. this.layersDialog = graph.createLayersDialog();
  1351. mxEvent.addListener(this.layersDialog, 'mouseleave', mxUtils.bind(this, function()
  1352. {
  1353. this.layersDialog.parentNode.removeChild(this.layersDialog);
  1354. this.layersDialog = null;
  1355. }));
  1356. var r = layersButton.getBoundingClientRect();
  1357. mxUtils.setPrefixedStyle(this.layersDialog.style, 'borderRadius', '5px');
  1358. this.layersDialog.style.position = 'fixed';
  1359. this.layersDialog.style.fontFamily = 'Helvetica,Arial';
  1360. this.layersDialog.style.backgroundColor = '#000000';
  1361. this.layersDialog.style.width = '160px';
  1362. this.layersDialog.style.padding = '4px 2px 4px 2px';
  1363. this.layersDialog.style.color = '#ffffff';
  1364. mxUtils.setOpacity(this.layersDialog, 70);
  1365. this.layersDialog.style.left = r.left + 'px';
  1366. this.layersDialog.style.bottom = parseInt(this.chromelessToolbar.style.bottom) +
  1367. this.chromelessToolbar.offsetHeight + 4 + 'px';
  1368. // Puts the dialog on top of the container z-index
  1369. var style = mxUtils.getCurrentStyle(this.editor.graph.container);
  1370. this.layersDialog.style.zIndex = style.zIndex;
  1371. document.body.appendChild(this.layersDialog);
  1372. }
  1373. mxEvent.consume(evt);
  1374. }), Editor.layersLargeImage, mxResources.get('layers'));
  1375. // Shows/hides layers button depending on content
  1376. var model = graph.getModel();
  1377. model.addListener(mxEvent.CHANGE, function()
  1378. {
  1379. layersButton.style.display = (model.getChildCount(model.root) > 1) ? '' : 'none';
  1380. });
  1381. }
  1382. addButton(mxUtils.bind(this, function(evt)
  1383. {
  1384. this.actions.get('print').funct();
  1385. mxEvent.consume(evt);
  1386. }), Editor.printLargeImage, mxResources.get('print'));
  1387. if (this.editor.editButtonLink != null)
  1388. {
  1389. addButton(mxUtils.bind(this, function(evt)
  1390. {
  1391. if (this.editor.editButtonLink == '_blank')
  1392. {
  1393. this.editor.editAsNew(this.getEditBlankXml(), null, true);
  1394. }
  1395. else
  1396. {
  1397. window.open(this.editor.editButtonLink, 'editWindow');
  1398. }
  1399. mxEvent.consume(evt);
  1400. }), Editor.editLargeImage, mxResources.get('openInNewWindow'));
  1401. }
  1402. if (graph.lightbox && (urlParams['close'] == '1' || this.container != document.body))
  1403. {
  1404. addButton(mxUtils.bind(this, function(evt)
  1405. {
  1406. if (urlParams['close'] == '1')
  1407. {
  1408. window.close();
  1409. }
  1410. else
  1411. {
  1412. this.destroy();
  1413. mxEvent.consume(evt);
  1414. }
  1415. }), Editor.closeLargeImage, mxResources.get('close') + ' (Escape)');
  1416. }
  1417. // Initial state invisible
  1418. this.chromelessToolbar.style.display = 'none';
  1419. mxUtils.setPrefixedStyle(this.chromelessToolbar.style, 'transform', 'translate(-50%,0)');
  1420. graph.container.appendChild(this.chromelessToolbar);
  1421. // Installs handling of hightligh and handling links to relative links and anchors
  1422. this.addChromelessClickHandler();
  1423. mxEvent.addListener(graph.container, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', mxUtils.bind(this, function(evt)
  1424. {
  1425. if (!mxEvent.isTouchEvent(evt))
  1426. {
  1427. if (!mxEvent.isShiftDown(evt))
  1428. {
  1429. fadeIn(30);
  1430. }
  1431. fadeOut();
  1432. }
  1433. }));
  1434. mxEvent.addListener(this.chromelessToolbar, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', function(evt)
  1435. {
  1436. mxEvent.consume(evt);
  1437. });
  1438. mxEvent.addListener(this.chromelessToolbar, 'mouseenter', mxUtils.bind(this, function(evt)
  1439. {
  1440. if (!mxEvent.isShiftDown(evt))
  1441. {
  1442. fadeIn(100);
  1443. }
  1444. else
  1445. {
  1446. fadeOut();
  1447. }
  1448. }));
  1449. mxEvent.addListener(this.chromelessToolbar, 'mousemove', mxUtils.bind(this, function(evt)
  1450. {
  1451. if (!mxEvent.isShiftDown(evt))
  1452. {
  1453. fadeIn(100);
  1454. }
  1455. else
  1456. {
  1457. fadeOut();
  1458. }
  1459. mxEvent.consume(evt);
  1460. }));
  1461. mxEvent.addListener(this.chromelessToolbar, 'mouseleave', mxUtils.bind(this, function(evt)
  1462. {
  1463. if (!mxEvent.isTouchEvent(evt))
  1464. {
  1465. fadeIn(30);
  1466. }
  1467. }));
  1468. // Shows/hides toolbar for touch devices
  1469. var tol = graph.getTolerance();
  1470. var ui = this;
  1471. graph.addMouseListener(
  1472. {
  1473. startX: 0,
  1474. startY: 0,
  1475. scrollLeft: 0,
  1476. scrollTop: 0,
  1477. mouseDown: function(sender, me)
  1478. {
  1479. this.startX = me.getGraphX();
  1480. this.startY = me.getGraphY();
  1481. this.scrollLeft = graph.container.scrollLeft;
  1482. this.scrollTop = graph.container.scrollTop;
  1483. },
  1484. mouseMove: function(sender, me) {},
  1485. mouseUp: function(sender, me)
  1486. {
  1487. if (mxEvent.isTouchEvent(me.getEvent()))
  1488. {
  1489. if ((Math.abs(this.scrollLeft - graph.container.scrollLeft) < tol &&
  1490. Math.abs(this.scrollTop - graph.container.scrollTop) < tol) &&
  1491. (Math.abs(this.startX - me.getGraphX()) < tol &&
  1492. Math.abs(this.startY - me.getGraphY()) < tol))
  1493. {
  1494. if (parseFloat(ui.chromelessToolbar.style.opacity || 0) > 0)
  1495. {
  1496. fadeOut();
  1497. }
  1498. else
  1499. {
  1500. fadeIn(30);
  1501. }
  1502. }
  1503. }
  1504. }
  1505. });
  1506. }
  1507. else if (this.editor.extendCanvas)
  1508. {
  1509. /**
  1510. * Guesses autoTranslate to avoid another repaint (see below).
  1511. * Works if only the scale of the graph changes or if pages
  1512. * are visible and the visible pages do not change.
  1513. */
  1514. var graphViewValidate = graph.view.validate;
  1515. graph.view.validate = function()
  1516. {
  1517. if (this.graph.container != null && mxUtils.hasScrollbars(this.graph.container))
  1518. {
  1519. var pad = this.graph.getPagePadding();
  1520. var size = this.graph.getPageSize();
  1521. // Updating scrollbars here causes flickering in quirks and is not needed
  1522. // if zoom method is always used to set the current scale on the graph.
  1523. var tx = this.translate.x;
  1524. var ty = this.translate.y;
  1525. this.translate.x = pad.x - (this.x0 || 0) * size.width;
  1526. this.translate.y = pad.y - (this.y0 || 0) * size.height;
  1527. }
  1528. graphViewValidate.apply(this, arguments);
  1529. };
  1530. var graphSizeDidChange = graph.sizeDidChange;
  1531. graph.sizeDidChange = function()
  1532. {
  1533. if (this.container != null && mxUtils.hasScrollbars(this.container))
  1534. {
  1535. var pages = this.getPageLayout();
  1536. var pad = this.getPagePadding();
  1537. var size = this.getPageSize();
  1538. // Updates the minimum graph size
  1539. var minw = Math.ceil(2 * pad.x + pages.width * size.width);
  1540. var minh = Math.ceil(2 * pad.y + pages.height * size.height);
  1541. var min = graph.minimumGraphSize;
  1542. // LATER: Fix flicker of scrollbar size in IE quirks mode
  1543. // after delayed call in window.resize event handler
  1544. if (min == null || min.width != minw || min.height != minh)
  1545. {
  1546. graph.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
  1547. }
  1548. // Updates auto-translate to include padding and graph size
  1549. var dx = pad.x - pages.x * size.width;
  1550. var dy = pad.y - pages.y * size.height;
  1551. if (!this.autoTranslate && (this.view.translate.x != dx || this.view.translate.y != dy))
  1552. {
  1553. this.autoTranslate = true;
  1554. this.view.x0 = pages.x;
  1555. this.view.y0 = pages.y;
  1556. // NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
  1557. // BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
  1558. // SHOULD MOVE TRANSLATE/SCALE TO VIEW.
  1559. var tx = graph.view.translate.x;
  1560. var ty = graph.view.translate.y;
  1561. graph.view.setTranslate(dx, dy);
  1562. // LATER: Fix rounding errors for small zoom
  1563. graph.container.scrollLeft += Math.round((dx - tx) * graph.view.scale);
  1564. graph.container.scrollTop += Math.round((dy - ty) * graph.view.scale);
  1565. this.autoTranslate = false;
  1566. return;
  1567. }
  1568. graphSizeDidChange.apply(this, arguments);
  1569. }
  1570. };
  1571. }
  1572. // Accumulates the zoom factor while the rendering is taking place
  1573. // so that not the complete sequence of zoom steps must be painted
  1574. graph.updateZoomTimeout = null;
  1575. graph.cumulativeZoomFactor = 1;
  1576. var cursorPosition = null;
  1577. graph.lazyZoom = function(zoomIn)
  1578. {
  1579. if (this.updateZoomTimeout != null)
  1580. {
  1581. window.clearTimeout(this.updateZoomTimeout);
  1582. }
  1583. // Switches to 1% zoom steps below 15%
  1584. // Lower bound depdends on rounding below
  1585. if (zoomIn)
  1586. {
  1587. if (this.view.scale * this.cumulativeZoomFactor < 0.15)
  1588. {
  1589. this.cumulativeZoomFactor = (this.view.scale + 0.01) / this.view.scale;
  1590. }
  1591. else
  1592. {
  1593. // Uses to 5% zoom steps for better grid rendering in webkit
  1594. // and to avoid rounding errors for zoom steps
  1595. this.cumulativeZoomFactor *= this.zoomFactor;
  1596. this.cumulativeZoomFactor = Math.round(this.view.scale * this.cumulativeZoomFactor * 20) / 20 / this.view.scale;
  1597. }
  1598. }
  1599. else
  1600. {
  1601. if (this.view.scale * this.cumulativeZoomFactor <= 0.15)
  1602. {
  1603. this.cumulativeZoomFactor = (this.view.scale - 0.01) / this.view.scale;
  1604. }
  1605. else
  1606. {
  1607. // Uses to 5% zoom steps for better grid rendering in webkit
  1608. // and to avoid rounding errors for zoom steps
  1609. this.cumulativeZoomFactor /= this.zoomFactor;
  1610. this.cumulativeZoomFactor = Math.round(this.view.scale * this.cumulativeZoomFactor * 20) / 20 / this.view.scale;
  1611. }
  1612. }
  1613. this.cumulativeZoomFactor = Math.max(0.01, Math.min(this.view.scale * this.cumulativeZoomFactor, 160) / this.view.scale);
  1614. this.updateZoomTimeout = window.setTimeout(mxUtils.bind(this, function()
  1615. {
  1616. this.zoom(this.cumulativeZoomFactor);
  1617. if (resize != null)
  1618. {
  1619. resize(false);
  1620. }
  1621. // Zooms to mouse position if scrollbars enabled
  1622. if (cursorPosition != null && mxUtils.hasScrollbars(graph.container))
  1623. {
  1624. var offset = mxUtils.getOffset(graph.container);
  1625. var dx = graph.container.offsetWidth / 2 - cursorPosition.x + offset.x;
  1626. var dy = graph.container.offsetHeight / 2 - cursorPosition.y + offset.y;
  1627. graph.container.scrollLeft -= dx * (this.cumulativeZoomFactor - 1);
  1628. graph.container.scrollTop -= dy * (this.cumulativeZoomFactor - 1);
  1629. }
  1630. this.cumulativeZoomFactor = 1;
  1631. this.updateZoomTimeout = null;
  1632. }), 20);
  1633. };
  1634. mxEvent.addMouseWheelListener(mxUtils.bind(this, function(evt, up)
  1635. {
  1636. // Ctrl+wheel (or pinch on touchpad) is a native browser zoom event is OS X
  1637. // LATER: Add support for zoom via pinch on trackpad for Chrome in OS X
  1638. if ((mxEvent.isAltDown(evt) || (mxEvent.isControlDown(evt) && !mxClient.IS_MAC) ||
  1639. graph.panningHandler.isActive()) && (this.dialogs == null || this.dialogs.length == 0))
  1640. {
  1641. var source = mxEvent.getSource(evt);
  1642. while (source != null)
  1643. {
  1644. if (source == graph.container)
  1645. {
  1646. cursorPosition = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
  1647. graph.lazyZoom(up);
  1648. mxEvent.consume(evt);
  1649. return;
  1650. }
  1651. source = source.parentNode;
  1652. }
  1653. }
  1654. }));
  1655. };
  1656. /**
  1657. * Creates a temporary graph instance for rendering off-screen content.
  1658. */
  1659. EditorUi.prototype.createTemporaryGraph = function(stylesheet)
  1660. {
  1661. var graph = new Graph(document.createElement('div'), null, null, stylesheet);
  1662. graph.resetViewOnRootChange = false;
  1663. graph.setConnectable(false);
  1664. graph.gridEnabled = false;
  1665. graph.autoScroll = false;
  1666. graph.setTooltips(false);
  1667. graph.setEnabled(false);
  1668. // Container must be in the DOM for correct HTML rendering
  1669. graph.container.style.visibility = 'hidden';
  1670. graph.container.style.position = 'absolute';
  1671. graph.container.style.overflow = 'hidden';
  1672. graph.container.style.height = '1px';
  1673. graph.container.style.width = '1px';
  1674. return graph;
  1675. };
  1676. /**
  1677. *
  1678. */
  1679. EditorUi.prototype.addChromelessClickHandler = function()
  1680. {
  1681. var hl = urlParams['highlight'];
  1682. // Adds leading # for highlight color code
  1683. if (hl != null && hl.length > 0)
  1684. {
  1685. hl = '#' + hl;
  1686. }
  1687. this.editor.graph.addClickHandler(hl);
  1688. };
  1689. /**
  1690. *
  1691. */
  1692. EditorUi.prototype.toggleFormatPanel = function(forceHide)
  1693. {
  1694. this.formatWidth = (forceHide || this.formatWidth > 0) ? 0 : 240;
  1695. this.formatContainer.style.display = (forceHide || this.formatWidth > 0) ? '' : 'none';
  1696. this.refresh();
  1697. this.format.refresh();
  1698. this.fireEvent(new mxEventObject('formatWidthChanged'));
  1699. };
  1700. /**
  1701. * Adds support for placeholders in labels.
  1702. */
  1703. EditorUi.prototype.lightboxFit = function()
  1704. {
  1705. // LATER: Use initial graph bounds to avoid rounding errors
  1706. this.editor.graph.maxFitScale = 2;
  1707. this.editor.graph.fit(60);
  1708. this.editor.graph.maxFitScale = null;
  1709. };
  1710. /**
  1711. * Hook for allowing selection and context menu for certain events.
  1712. */
  1713. EditorUi.prototype.isSelectionAllowed = function(evt)
  1714. {
  1715. return mxEvent.getSource(evt).nodeName == 'SELECT' || (mxEvent.getSource(evt).nodeName == 'INPUT' &&
  1716. mxUtils.isAncestorNode(this.formatContainer, mxEvent.getSource(evt)));
  1717. };
  1718. /**
  1719. * Installs dialog if browser window is closed without saving
  1720. * This must be disabled during save and image export.
  1721. */
  1722. EditorUi.prototype.addBeforeUnloadListener = function()
  1723. {
  1724. // Installs dialog if browser window is closed without saving
  1725. // This must be disabled during save and image export
  1726. window.onbeforeunload = mxUtils.bind(this, function()
  1727. {
  1728. if (!this.editor.chromeless)
  1729. {
  1730. return this.onBeforeUnload();
  1731. }
  1732. });
  1733. };
  1734. /**
  1735. * Sets the onbeforeunload for the application
  1736. */
  1737. EditorUi.prototype.onBeforeUnload = function()
  1738. {
  1739. if (this.editor.modified)
  1740. {
  1741. return mxResources.get('allChangesLost');
  1742. }
  1743. };
  1744. /**
  1745. * Opens the current diagram via the window.opener if one exists.
  1746. */
  1747. EditorUi.prototype.open = function()
  1748. {
  1749. // Cross-domain window access is not allowed in FF, so if we
  1750. // were opened from another domain then this will fail.
  1751. try
  1752. {
  1753. if (window.opener != null && window.opener.openFile != null)
  1754. {
  1755. window.opener.openFile.setConsumer(mxUtils.bind(this, function(xml, filename)
  1756. {
  1757. try
  1758. {
  1759. var doc = mxUtils.parseXml(xml);
  1760. this.editor.setGraphXml(doc.documentElement);
  1761. this.editor.setModified(false);
  1762. this.editor.undoManager.clear();
  1763. if (filename != null)
  1764. {
  1765. this.editor.setFilename(filename);
  1766. this.updateDocumentTitle();
  1767. }
  1768. return;
  1769. }
  1770. catch (e)
  1771. {
  1772. mxUtils.alert(mxResources.get('invalidOrMissingFile') + ': ' + e.message);
  1773. }
  1774. }));
  1775. }
  1776. }
  1777. catch(e)
  1778. {
  1779. // ignore
  1780. }
  1781. // Fires as the last step if no file was loaded
  1782. this.editor.graph.view.validate();
  1783. // Required only in special cases where an initial file is opened
  1784. // and the minimumGraphSize changes and CSS must be updated.
  1785. this.editor.graph.sizeDidChange();
  1786. this.editor.fireEvent(new mxEventObject('resetGraphView'));
  1787. };
  1788. /**
  1789. * Sets the current menu and element.
  1790. */
  1791. EditorUi.prototype.setCurrentMenu = function(menu, elt)
  1792. {
  1793. this.currentMenuElt = elt;
  1794. this.currentMenu = menu;
  1795. };
  1796. /**
  1797. * Resets the current menu and element.
  1798. */
  1799. EditorUi.prototype.resetCurrentMenu = function()
  1800. {
  1801. this.currentMenuElt = null;
  1802. this.currentMenu = null;
  1803. };
  1804. /**
  1805. * Hides and destroys the current menu.
  1806. */
  1807. EditorUi.prototype.hideCurrentMenu = function(menu, elt)
  1808. {
  1809. if (this.currentMenu != null)
  1810. {
  1811. this.currentMenu.hideMenu();
  1812. this.resetCurrentMenu();
  1813. }
  1814. };
  1815. /**
  1816. * Updates the document title.
  1817. */
  1818. EditorUi.prototype.updateDocumentTitle = function()
  1819. {
  1820. var title = this.editor.getOrCreateFilename();
  1821. if (this.editor.appName != null)
  1822. {
  1823. title += ' - ' + this.editor.appName;
  1824. }
  1825. document.title = title;
  1826. };
  1827. /**
  1828. * Updates the document title.
  1829. */
  1830. EditorUi.prototype.createHoverIcons = function()
  1831. {
  1832. return new HoverIcons(this.editor.graph);
  1833. };
  1834. /**
  1835. * Returns the URL for a copy of this editor with no state.
  1836. */
  1837. EditorUi.prototype.redo = function()
  1838. {
  1839. try
  1840. {
  1841. var graph = this.editor.graph;
  1842. if (graph.isEditing())
  1843. {
  1844. document.execCommand('redo', false, null);
  1845. }
  1846. else
  1847. {
  1848. this.editor.undoManager.redo();
  1849. }
  1850. }
  1851. catch (e)
  1852. {
  1853. // ignore all errors
  1854. }
  1855. };
  1856. /**
  1857. * Returns the URL for a copy of this editor with no state.
  1858. */
  1859. EditorUi.prototype.undo = function()
  1860. {
  1861. try
  1862. {
  1863. var graph = this.editor.graph;
  1864. if (graph.isEditing())
  1865. {
  1866. // Stops editing and executes undo on graph if native undo
  1867. // does not affect current editing value
  1868. var value = graph.cellEditor.textarea.innerHTML;
  1869. document.execCommand('undo', false, null);
  1870. if (value == graph.cellEditor.textarea.innerHTML)
  1871. {
  1872. graph.stopEditing(true);
  1873. this.editor.undoManager.undo();
  1874. }
  1875. }
  1876. else
  1877. {
  1878. this.editor.undoManager.undo();
  1879. }
  1880. }
  1881. catch (e)
  1882. {
  1883. // ignore all errors
  1884. }
  1885. };
  1886. /**
  1887. * Returns the URL for a copy of this editor with no state.
  1888. */
  1889. EditorUi.prototype.canRedo = function()
  1890. {
  1891. return this.editor.graph.isEditing() || this.editor.undoManager.canRedo();
  1892. };
  1893. /**
  1894. * Returns the URL for a copy of this editor with no state.
  1895. */
  1896. EditorUi.prototype.canUndo = function()
  1897. {
  1898. return this.editor.graph.isEditing() || this.editor.undoManager.canUndo();
  1899. };
  1900. /**
  1901. *
  1902. */
  1903. EditorUi.prototype.getEditBlankXml = function()
  1904. {
  1905. return mxUtils.getXml(this.getGraphXml());
  1906. };
  1907. /**
  1908. * Returns the URL for a copy of this editor with no state.
  1909. */
  1910. EditorUi.prototype.getUrl = function(pathname)
  1911. {
  1912. var href = (pathname != null) ? pathname : window.location.pathname;
  1913. var parms = (href.indexOf('?') > 0) ? 1 : 0;
  1914. // Removes template URL parameter for new blank diagram
  1915. for (var key in urlParams)
  1916. {
  1917. if (parms == 0)
  1918. {
  1919. href += '?';
  1920. }
  1921. else
  1922. {
  1923. href += '&';
  1924. }
  1925. href += key + '=' + urlParams[key];
  1926. parms++;
  1927. }
  1928. return href;
  1929. };
  1930. /**
  1931. * Specifies if the graph has scrollbars.
  1932. */
  1933. EditorUi.prototype.setScrollbars = function(value)
  1934. {
  1935. var graph = this.editor.graph;
  1936. var prev = graph.container.style.overflow;
  1937. graph.scrollbars = value;
  1938. this.editor.updateGraphComponents();
  1939. if (prev != graph.container.style.overflow)
  1940. {
  1941. if (graph.container.style.overflow == 'hidden')
  1942. {
  1943. var t = graph.view.translate;
  1944. graph.view.setTranslate(t.x - graph.container.scrollLeft / graph.view.scale, t.y - graph.container.scrollTop / graph.view.scale);
  1945. graph.container.scrollLeft = 0;
  1946. graph.container.scrollTop = 0;
  1947. graph.minimumGraphSize = null;
  1948. graph.sizeDidChange();
  1949. }
  1950. else
  1951. {
  1952. var dx = graph.view.translate.x;
  1953. var dy = graph.view.translate.y;
  1954. graph.view.translate.x = 0;
  1955. graph.view.translate.y = 0;
  1956. graph.sizeDidChange();
  1957. graph.container.scrollLeft -= Math.round(dx * graph.view.scale);
  1958. graph.container.scrollTop -= Math.round(dy * graph.view.scale);
  1959. }
  1960. }
  1961. this.fireEvent(new mxEventObject('scrollbarsChanged'));
  1962. };
  1963. /**
  1964. * Returns true if the graph has scrollbars.
  1965. */
  1966. EditorUi.prototype.hasScrollbars = function()
  1967. {
  1968. return this.editor.graph.scrollbars;
  1969. };
  1970. /**
  1971. * Resets the state of the scrollbars.
  1972. */
  1973. EditorUi.prototype.resetScrollbars = function()
  1974. {
  1975. var graph = this.editor.graph;
  1976. if (!this.editor.extendCanvas)
  1977. {
  1978. graph.container.scrollTop = 0;
  1979. graph.container.scrollLeft = 0;
  1980. if (!mxUtils.hasScrollbars(graph.container))
  1981. {
  1982. graph.view.setTranslate(0, 0);
  1983. }
  1984. }
  1985. else if (!this.editor.chromeless)
  1986. {
  1987. if (mxUtils.hasScrollbars(graph.container))
  1988. {
  1989. if (graph.pageVisible)
  1990. {
  1991. var pad = graph.getPagePadding();
  1992. graph.container.scrollTop = Math.floor(pad.y - this.editor.initialTopSpacing);
  1993. graph.container.scrollLeft = Math.floor(Math.min(pad.x, (graph.container.scrollWidth - graph.container.clientWidth) / 2));
  1994. // Scrolls graph to visible area
  1995. var bounds = graph.getGraphBounds();
  1996. if (bounds.width > 0 && bounds.height > 0)
  1997. {
  1998. if (bounds.x > graph.container.scrollLeft + graph.container.clientWidth * 0.9)
  1999. {
  2000. graph.container.scrollLeft = Math.min(bounds.x + bounds.width - graph.container.clientWidth, bounds.x - 10);
  2001. }
  2002. if (bounds.y > graph.container.scrollTop + graph.container.clientHeight * 0.9)
  2003. {
  2004. graph.container.scrollTop = Math.min(bounds.y + bounds.height - graph.container.clientHeight, bounds.y - 10);
  2005. }
  2006. }
  2007. }
  2008. else
  2009. {
  2010. var bounds = graph.getGraphBounds();
  2011. var width = Math.max(bounds.width, graph.scrollTileSize.width * graph.view.scale);
  2012. var height = Math.max(bounds.height, graph.scrollTileSize.height * graph.view.scale);
  2013. graph.container.scrollTop = Math.floor(Math.max(0, bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)));
  2014. graph.container.scrollLeft = Math.floor(Math.max(0, bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)));
  2015. }
  2016. }
  2017. else
  2018. {
  2019. // This code is not actively used since the default for scrollbars is always true
  2020. if (graph.pageVisible)
  2021. {
  2022. var b = graph.view.getBackgroundPageBounds();
  2023. graph.view.setTranslate(Math.floor(Math.max(0, (graph.container.clientWidth - b.width) / 2) - b.x),
  2024. Math.floor(Math.max(0, (graph.container.clientHeight - b.height) / 2) - b.y));
  2025. }
  2026. else
  2027. {
  2028. var bounds = graph.getGraphBounds();
  2029. graph.view.setTranslate(Math.floor(Math.max(0, Math.max(0, (graph.container.clientWidth - bounds.width) / 2) - bounds.x)),
  2030. Math.floor(Math.max(0, Math.max(20, (graph.container.clientHeight - bounds.height) / 4)) - bounds.y));
  2031. }
  2032. }
  2033. }
  2034. };
  2035. /**
  2036. * Loads the stylesheet for this graph.
  2037. */
  2038. EditorUi.prototype.setPageVisible = function(value)
  2039. {
  2040. var graph = this.editor.graph;
  2041. var hasScrollbars = mxUtils.hasScrollbars(graph.container);
  2042. var tx = 0;
  2043. var ty = 0;
  2044. if (hasScrollbars)
  2045. {
  2046. tx = graph.view.translate.x * graph.view.scale - graph.container.scrollLeft;
  2047. ty = graph.view.translate.y * graph.view.scale - graph.container.scrollTop;
  2048. }
  2049. graph.pageVisible = value;
  2050. graph.pageBreaksVisible = value;
  2051. graph.preferPageSize = value;
  2052. graph.view.validateBackground();
  2053. // Workaround for possible handle offset
  2054. if (hasScrollbars)
  2055. {
  2056. var cells = graph.getSelectionCells();
  2057. graph.clearSelection();
  2058. graph.setSelectionCells(cells);
  2059. }
  2060. // Calls updatePageBreaks
  2061. graph.sizeDidChange();
  2062. if (hasScrollbars)
  2063. {
  2064. graph.container.scrollLeft = graph.view.translate.x * graph.view.scale - tx;
  2065. graph.container.scrollTop = graph.view.translate.y * graph.view.scale - ty;
  2066. }
  2067. this.fireEvent(new mxEventObject('pageViewChanged'));
  2068. };
  2069. /**
  2070. * Change types
  2071. */
  2072. function ChangePageSetup(ui, color, image, format)
  2073. {
  2074. this.ui = ui;
  2075. this.previousColor = color;
  2076. this.previousImage = image;
  2077. this.previousFormat = format;
  2078. // Needed since null are valid values for color and image
  2079. this.ignoreColor = false;
  2080. this.ignoreImage = false;
  2081. }
  2082. /**
  2083. * Implementation of the undoable page rename.
  2084. */
  2085. ChangePageSetup.prototype.execute = function()
  2086. {
  2087. var graph = this.ui.editor.graph;
  2088. if (!this.ignoreColor)
  2089. {
  2090. var tmp = graph.background;
  2091. this.ui.setBackgroundColor(this.previousColor);
  2092. this.previousColor = tmp;
  2093. }
  2094. if (!this.ignoreImage)
  2095. {
  2096. var tmp = graph.backgroundImage;
  2097. this.ui.setBackgroundImage(this.previousImage);
  2098. this.previousImage = tmp;
  2099. }
  2100. if (this.previousFormat != null)
  2101. {
  2102. var tmp = graph.pageFormat;
  2103. if (this.previousFormat.width != tmp.width ||
  2104. this.previousFormat.height != tmp.height)
  2105. {
  2106. this.ui.setPageFormat(this.previousFormat);
  2107. this.previousFormat = tmp;
  2108. }
  2109. }
  2110. };
  2111. /**
  2112. * Loads the stylesheet for this graph.
  2113. */
  2114. EditorUi.prototype.setBackgroundColor = function(value)
  2115. {
  2116. this.editor.graph.background = value;
  2117. this.editor.graph.view.validateBackground();
  2118. this.fireEvent(new mxEventObject('backgroundColorChanged'));
  2119. };
  2120. /**
  2121. * Loads the stylesheet for this graph.
  2122. */
  2123. EditorUi.prototype.setFoldingEnabled = function(value)
  2124. {
  2125. this.editor.graph.foldingEnabled = value;
  2126. this.editor.graph.view.revalidate();
  2127. this.fireEvent(new mxEventObject('foldingEnabledChanged'));
  2128. };
  2129. /**
  2130. * Loads the stylesheet for this graph.
  2131. */
  2132. EditorUi.prototype.setPageFormat = function(value)
  2133. {
  2134. this.editor.graph.pageFormat = value;
  2135. if (!this.editor.graph.pageVisible)
  2136. {
  2137. this.actions.get('pageView').funct();
  2138. }
  2139. else
  2140. {
  2141. this.editor.graph.view.validateBackground();
  2142. this.editor.graph.sizeDidChange();
  2143. }
  2144. this.fireEvent(new mxEventObject('pageFormatChanged'));
  2145. };
  2146. /**
  2147. * Loads the stylesheet for this graph.
  2148. */
  2149. EditorUi.prototype.setPageScale = function(value)
  2150. {
  2151. this.editor.graph.pageScale = value;
  2152. if (!this.editor.graph.pageVisible)
  2153. {
  2154. this.actions.get('pageView').funct();
  2155. }
  2156. else
  2157. {
  2158. this.editor.graph.view.validateBackground();
  2159. this.editor.graph.sizeDidChange();
  2160. }
  2161. this.fireEvent(new mxEventObject('pageScaleChanged'));
  2162. };
  2163. /**
  2164. * Loads the stylesheet for this graph.
  2165. */
  2166. EditorUi.prototype.setGridColor = function(value)
  2167. {
  2168. this.editor.graph.view.gridColor = value;
  2169. this.editor.graph.view.validateBackground();
  2170. this.fireEvent(new mxEventObject('gridColorChanged'));
  2171. };
  2172. /**
  2173. * Updates the states of the given undo/redo items.
  2174. */
  2175. EditorUi.prototype.addUndoListener = function()
  2176. {
  2177. var undo = this.actions.get('undo');
  2178. var redo = this.actions.get('redo');
  2179. var undoMgr = this.editor.undoManager;
  2180. var undoListener = mxUtils.bind(this, function()
  2181. {
  2182. undo.setEnabled(this.canUndo());
  2183. redo.setEnabled(this.canRedo());
  2184. });
  2185. undoMgr.addListener(mxEvent.ADD, undoListener);
  2186. undoMgr.addListener(mxEvent.UNDO, undoListener);
  2187. undoMgr.addListener(mxEvent.REDO, undoListener);
  2188. undoMgr.addListener(mxEvent.CLEAR, undoListener);
  2189. // Overrides cell editor to update action states
  2190. var cellEditorStartEditing = this.editor.graph.cellEditor.startEditing;
  2191. this.editor.graph.cellEditor.startEditing = function()
  2192. {
  2193. cellEditorStartEditing.apply(this, arguments);
  2194. undoListener();
  2195. };
  2196. var cellEditorStopEditing = this.editor.graph.cellEditor.stopEditing;
  2197. this.editor.graph.cellEditor.stopEditing = function(cell, trigger)
  2198. {
  2199. cellEditorStopEditing.apply(this, arguments);
  2200. undoListener();
  2201. };
  2202. // Updates the button states once
  2203. undoListener();
  2204. };
  2205. /**
  2206. * Updates the states of the given toolbar items based on the selection.
  2207. */
  2208. EditorUi.prototype.updateActionStates = function()
  2209. {
  2210. var graph = this.editor.graph;
  2211. var selected = !graph.isSelectionEmpty();
  2212. var vertexSelected = false;
  2213. var edgeSelected = false;
  2214. var cells = graph.getSelectionCells();
  2215. if (cells != null)
  2216. {
  2217. for (var i = 0; i < cells.length; i++)
  2218. {
  2219. var cell = cells[i];
  2220. if (graph.getModel().isEdge(cell))
  2221. {
  2222. edgeSelected = true;
  2223. }
  2224. if (graph.getModel().isVertex(cell))
  2225. {
  2226. vertexSelected = true;
  2227. }
  2228. if (edgeSelected && vertexSelected)
  2229. {
  2230. break;
  2231. }
  2232. }
  2233. }
  2234. // Updates action states
  2235. var actions = ['cut', 'copy', 'bold', 'italic', 'underline', 'delete', 'duplicate',
  2236. 'editStyle', 'editTooltip', 'editLink', 'backgroundColor', 'borderColor',
  2237. 'edit', 'toFront', 'toBack', 'lockUnlock', 'solid', 'dashed',
  2238. 'dotted', 'fillColor', 'gradientColor', 'shadow', 'fontColor',
  2239. 'formattedText', 'rounded', 'toggleRounded', 'sharp', 'strokeColor'];
  2240. for (var i = 0; i < actions.length; i++)
  2241. {
  2242. this.actions.get(actions[i]).setEnabled(selected);
  2243. }
  2244. this.actions.get('setAsDefaultStyle').setEnabled(graph.getSelectionCount() == 1);
  2245. this.actions.get('clearWaypoints').setEnabled(!graph.isSelectionEmpty());
  2246. this.actions.get('turn').setEnabled(!graph.isSelectionEmpty());
  2247. this.actions.get('curved').setEnabled(edgeSelected);
  2248. this.actions.get('rotation').setEnabled(vertexSelected);
  2249. this.actions.get('wordWrap').setEnabled(vertexSelected);
  2250. this.actions.get('autosize').setEnabled(vertexSelected);
  2251. this.actions.get('collapsible').setEnabled(vertexSelected);
  2252. var oneVertexSelected = vertexSelected && graph.getSelectionCount() == 1;
  2253. this.actions.get('group').setEnabled(graph.getSelectionCount() > 1 ||
  2254. (oneVertexSelected && !graph.isContainer(graph.getSelectionCell())));
  2255. this.actions.get('ungroup').setEnabled(graph.getSelectionCount() == 1 &&
  2256. (graph.getModel().getChildCount(graph.getSelectionCell()) > 0 ||
  2257. (oneVertexSelected && graph.isContainer(graph.getSelectionCell()))));
  2258. this.actions.get('removeFromGroup').setEnabled(oneVertexSelected &&
  2259. graph.getModel().isVertex(graph.getModel().getParent(graph.getSelectionCell())));
  2260. // Updates menu states
  2261. var state = graph.view.getState(graph.getSelectionCell());
  2262. this.menus.get('navigation').setEnabled(selected || graph.view.currentRoot != null);
  2263. this.actions.get('collapsible').setEnabled(vertexSelected && graph.getSelectionCount() == 1 &&
  2264. (graph.isContainer(graph.getSelectionCell()) || graph.model.getChildCount(graph.getSelectionCell()) > 0));
  2265. this.actions.get('home').setEnabled(graph.view.currentRoot != null);
  2266. this.actions.get('exitGroup').setEnabled(graph.view.currentRoot != null);
  2267. this.actions.get('enterGroup').setEnabled(graph.getSelectionCount() == 1 && graph.isValidRoot(graph.getSelectionCell()));
  2268. var foldable = graph.getSelectionCount() == 1 && graph.isCellFoldable(graph.getSelectionCell())
  2269. this.actions.get('expand').setEnabled(foldable);
  2270. this.actions.get('collapse').setEnabled(foldable);
  2271. this.actions.get('editLink').setEnabled(graph.getSelectionCount() == 1);
  2272. this.actions.get('openLink').setEnabled(graph.getSelectionCount() == 1 &&
  2273. graph.getLinkForCell(graph.getSelectionCell()) != null);
  2274. this.actions.get('guides').setEnabled(graph.isEnabled());
  2275. this.actions.get('grid').setEnabled(!this.editor.chromeless);
  2276. var unlocked = graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent());
  2277. this.menus.get('layout').setEnabled(unlocked);
  2278. this.menus.get('insert').setEnabled(unlocked);
  2279. this.menus.get('direction').setEnabled(unlocked && vertexSelected);
  2280. this.menus.get('align').setEnabled(unlocked && vertexSelected && graph.getSelectionCount() > 1);
  2281. this.menus.get('distribute').setEnabled(unlocked && vertexSelected && graph.getSelectionCount() > 1);
  2282. this.actions.get('selectVertices').setEnabled(unlocked);
  2283. this.actions.get('selectEdges').setEnabled(unlocked);
  2284. this.actions.get('selectAll').setEnabled(unlocked);
  2285. this.actions.get('selectNone').setEnabled(unlocked);
  2286. this.updatePasteActionStates();
  2287. };
  2288. /**
  2289. * Refreshes the viewport.
  2290. */
  2291. EditorUi.prototype.refresh = function(sizeDidChange)
  2292. {
  2293. sizeDidChange = (sizeDidChange != null) ? sizeDidChange : true;
  2294. var quirks = mxClient.IS_IE && (document.documentMode == null || document.documentMode == 5);
  2295. var w = this.container.clientWidth;
  2296. var h = this.container.clientHeight;
  2297. if (this.container == document.body)
  2298. {
  2299. w = document.body.clientWidth || document.documentElement.clientWidth;
  2300. h = (quirks) ? document.body.clientHeight || document.documentElement.clientHeight : document.documentElement.clientHeight;
  2301. }
  2302. // Workaround for bug on iOS see
  2303. // http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue
  2304. // FIXME: Fix if footer visible
  2305. var off = 0;
  2306. if (mxClient.IS_IOS && !window.navigator.standalone)
  2307. {
  2308. if (window.innerHeight != document.documentElement.clientHeight)
  2309. {
  2310. off = document.documentElement.clientHeight - window.innerHeight;
  2311. window.scrollTo(0, 0);
  2312. }
  2313. }
  2314. var effHsplitPosition = Math.max(0, Math.min(this.hsplitPosition, w - this.splitSize - 20));
  2315. var tmp = 0;
  2316. if (this.menubar != null)
  2317. {
  2318. this.menubarContainer.style.height = this.menubarHeight + 'px';
  2319. tmp += this.menubarHeight;
  2320. }
  2321. if (this.toolbar != null)
  2322. {
  2323. this.toolbarContainer.style.top = this.menubarHeight + 'px';
  2324. this.toolbarContainer.style.height = this.toolbarHeight + 'px';
  2325. tmp += this.toolbarHeight;
  2326. }
  2327. if (tmp > 0 && !mxClient.IS_QUIRKS)
  2328. {
  2329. tmp += 1;
  2330. }
  2331. var sidebarFooterHeight = 0;
  2332. if (this.sidebarFooterContainer != null)
  2333. {
  2334. var bottom = this.footerHeight + off;
  2335. sidebarFooterHeight = Math.max(0, Math.min(h - tmp - bottom, this.sidebarFooterHeight));
  2336. this.sidebarFooterContainer.style.width = effHsplitPosition + 'px';
  2337. this.sidebarFooterContainer.style.height = sidebarFooterHeight + 'px';
  2338. this.sidebarFooterContainer.style.bottom = bottom + 'px';
  2339. }
  2340. var fw = (this.format != null) ? this.formatWidth : 0;
  2341. this.sidebarContainer.style.top = tmp + 'px';
  2342. this.sidebarContainer.style.width = effHsplitPosition + 'px';
  2343. this.formatContainer.style.top = tmp + 'px';
  2344. this.formatContainer.style.width = fw + 'px';
  2345. this.formatContainer.style.display = (this.format != null) ? '' : 'none';
  2346. this.diagramContainer.style.left = (this.hsplit.parentNode != null) ? (effHsplitPosition + this.splitSize) + 'px' : '0px';
  2347. this.diagramContainer.style.top = this.sidebarContainer.style.top;
  2348. this.footerContainer.style.height = this.footerHeight + 'px';
  2349. this.hsplit.style.top = this.sidebarContainer.style.top;
  2350. this.hsplit.style.bottom = (this.footerHeight + off) + 'px';
  2351. this.hsplit.style.left = effHsplitPosition + 'px';
  2352. if (this.tabContainer != null)
  2353. {
  2354. this.tabContainer.style.left = this.diagramContainer.style.left;
  2355. }
  2356. if (quirks)
  2357. {
  2358. this.menubarContainer.style.width = w + 'px';
  2359. this.toolbarContainer.style.width = this.menubarContainer.style.width;
  2360. var sidebarHeight = Math.max(0, h - this.footerHeight - this.menubarHeight - this.toolbarHeight);
  2361. this.sidebarContainer.style.height = (sidebarHeight - sidebarFooterHeight) + 'px';
  2362. this.formatContainer.style.height = sidebarHeight + 'px';
  2363. this.diagramContainer.style.width = (this.hsplit.parentNode != null) ? Math.max(0, w - effHsplitPosition - this.splitSize - fw) + 'px' : w + 'px';
  2364. this.footerContainer.style.width = this.menubarContainer.style.width;
  2365. var diagramHeight = Math.max(0, h - this.footerHeight - this.menubarHeight - this.toolbarHeight);
  2366. if (this.tabContainer != null)
  2367. {
  2368. this.tabContainer.style.width = this.diagramContainer.style.width;
  2369. this.tabContainer.style.bottom = (this.footerHeight + off) + 'px';
  2370. diagramHeight -= this.tabContainer.clientHeight;
  2371. }
  2372. this.diagramContainer.style.height = diagramHeight + 'px';
  2373. this.hsplit.style.height = diagramHeight + 'px';
  2374. }
  2375. else
  2376. {
  2377. if (this.footerHeight > 0)
  2378. {
  2379. this.footerContainer.style.bottom = off + 'px';
  2380. }
  2381. this.diagramContainer.style.right = fw + 'px';
  2382. var th = 0;
  2383. if (this.tabContainer != null)
  2384. {
  2385. this.tabContainer.style.bottom = (this.footerHeight + off) + 'px';
  2386. this.tabContainer.style.right = this.diagramContainer.style.right;
  2387. th = this.tabContainer.clientHeight;
  2388. }
  2389. this.sidebarContainer.style.bottom = (this.footerHeight + sidebarFooterHeight + off) + 'px';
  2390. this.formatContainer.style.bottom = (this.footerHeight + off) + 'px';
  2391. this.diagramContainer.style.bottom = (this.footerHeight + off + th) + 'px';
  2392. }
  2393. if (sizeDidChange)
  2394. {
  2395. this.editor.graph.sizeDidChange();
  2396. }
  2397. };
  2398. /**
  2399. * Creates the required containers.
  2400. */
  2401. EditorUi.prototype.createTabContainer = function()
  2402. {
  2403. return null;
  2404. };
  2405. /**
  2406. * Creates the required containers.
  2407. */
  2408. EditorUi.prototype.createDivs = function()
  2409. {
  2410. this.menubarContainer = this.createDiv('geMenubarContainer');
  2411. this.toolbarContainer = this.createDiv('geToolbarContainer');
  2412. this.sidebarContainer = this.createDiv('geSidebarContainer');
  2413. this.formatContainer = this.createDiv('geSidebarContainer');
  2414. this.diagramContainer = this.createDiv('geDiagramContainer');
  2415. this.footerContainer = this.createDiv('geFooterContainer');
  2416. this.hsplit = this.createDiv('geHsplit');
  2417. this.hsplit.setAttribute('title', mxResources.get('collapseExpand'));
  2418. // Sets static style for containers
  2419. this.menubarContainer.style.top = '0px';
  2420. this.menubarContainer.style.left = '0px';
  2421. this.menubarContainer.style.right = '0px';
  2422. this.toolbarContainer.style.left = '0px';
  2423. this.toolbarContainer.style.right = '0px';
  2424. this.sidebarContainer.style.left = '0px';
  2425. this.formatContainer.style.right = '0px';
  2426. this.formatContainer.style.zIndex = '1';
  2427. this.diagramContainer.style.right = ((this.format != null) ? this.formatWidth : 0) + 'px';
  2428. this.footerContainer.style.left = '0px';
  2429. this.footerContainer.style.right = '0px';
  2430. this.footerContainer.style.bottom = '0px';
  2431. this.footerContainer.style.zIndex = mxPopupMenu.prototype.zIndex - 2;
  2432. this.hsplit.style.width = this.splitSize + 'px';
  2433. // Only vertical scrollbars, no background in format sidebar
  2434. this.formatContainer.style.backgroundColor = 'whiteSmoke';
  2435. this.formatContainer.style.overflowX = 'hidden';
  2436. this.formatContainer.style.overflowY = 'auto';
  2437. this.formatContainer.style.fontSize = '12px';
  2438. this.sidebarFooterContainer = this.createSidebarFooterContainer();
  2439. if (this.sidebarFooterContainer)
  2440. {
  2441. this.sidebarFooterContainer.style.left = '0px';
  2442. }
  2443. if (!this.editor.chromeless)
  2444. {
  2445. this.tabContainer = this.createTabContainer();
  2446. }
  2447. };
  2448. /**
  2449. * Hook for sidebar footer container. This implementation returns null.
  2450. */
  2451. EditorUi.prototype.createSidebarFooterContainer = function()
  2452. {
  2453. return null;
  2454. };
  2455. /**
  2456. * Creates the required containers.
  2457. */
  2458. EditorUi.prototype.createUi = function()
  2459. {
  2460. // Creates menubar
  2461. this.menubar = (this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar'));
  2462. if (this.menubar != null)
  2463. {
  2464. this.menubarContainer.appendChild(this.menubar.container);
  2465. }
  2466. // Adds status bar in menubar
  2467. if (this.menubar != null)
  2468. {
  2469. this.statusContainer = this.createStatusContainer();
  2470. // Connects the status bar to the editor status
  2471. this.editor.addListener('statusChanged', mxUtils.bind(this, function()
  2472. {
  2473. this.setStatusText(this.editor.getStatus());
  2474. }));
  2475. this.setStatusText(this.editor.getStatus());
  2476. this.menubar.container.appendChild(this.statusContainer);
  2477. // Inserts into DOM
  2478. this.container.appendChild(this.menubarContainer);
  2479. }
  2480. // Creates the sidebar
  2481. this.sidebar = (this.editor.chromeless) ? null : this.createSidebar(this.sidebarContainer);
  2482. if (this.sidebar != null)
  2483. {
  2484. this.container.appendChild(this.sidebarContainer);
  2485. }
  2486. // Creates the format sidebar
  2487. this.format = (this.editor.chromeless || !this.formatEnabled) ? null : this.createFormat(this.formatContainer);
  2488. if (this.format != null)
  2489. {
  2490. this.container.appendChild(this.formatContainer);
  2491. }
  2492. // Creates the footer
  2493. var footer = (this.editor.chromeless) ? null : this.createFooter();
  2494. if (footer != null)
  2495. {
  2496. this.footerContainer.appendChild(footer);
  2497. this.container.appendChild(this.footerContainer);
  2498. }
  2499. if (this.sidebar != null && this.sidebarFooterContainer)
  2500. {
  2501. this.container.appendChild(this.sidebarFooterContainer);
  2502. }
  2503. this.container.appendChild(this.diagramContainer);
  2504. if (this.container != null && this.tabContainer != null)
  2505. {
  2506. this.container.appendChild(this.tabContainer);
  2507. }
  2508. // Creates toolbar
  2509. this.toolbar = (this.editor.chromeless) ? null : this.createToolbar(this.createDiv('geToolbar'));
  2510. if (this.toolbar != null)
  2511. {
  2512. this.toolbarContainer.appendChild(this.toolbar.container);
  2513. this.container.appendChild(this.toolbarContainer);
  2514. }
  2515. // HSplit
  2516. if (this.sidebar != null)
  2517. {
  2518. this.container.appendChild(this.hsplit);
  2519. this.addSplitHandler(this.hsplit, true, 0, mxUtils.bind(this, function(value)
  2520. {
  2521. this.hsplitPosition = value;
  2522. this.refresh();
  2523. }));
  2524. }
  2525. };
  2526. /**
  2527. * Creates a new toolbar for the given container.
  2528. */
  2529. EditorUi.prototype.createStatusContainer = function()
  2530. {
  2531. var container = document.createElement('a');
  2532. container.className = 'geItem geStatus';
  2533. if (screen.width < 420)
  2534. {
  2535. container.style.maxWidth = Math.max(20, screen.width - 320) + 'px';
  2536. container.style.overflow = 'hidden';
  2537. }
  2538. return container;
  2539. };
  2540. /**
  2541. * Creates a new toolbar for the given container.
  2542. */
  2543. EditorUi.prototype.setStatusText = function(value)
  2544. {
  2545. this.statusContainer.innerHTML = value;
  2546. };
  2547. /**
  2548. * Creates a new toolbar for the given container.
  2549. */
  2550. EditorUi.prototype.createToolbar = function(container)
  2551. {
  2552. return new Toolbar(this, container);
  2553. };
  2554. /**
  2555. * Creates a new sidebar for the given container.
  2556. */
  2557. EditorUi.prototype.createSidebar = function(container)
  2558. {
  2559. return new Sidebar(this, container);
  2560. };
  2561. /**
  2562. * Creates a new sidebar for the given container.
  2563. */
  2564. EditorUi.prototype.createFormat = function(container)
  2565. {
  2566. return new Format(this, container);
  2567. };
  2568. /**
  2569. * Creates and returns a new footer.
  2570. */
  2571. EditorUi.prototype.createFooter = function()
  2572. {
  2573. return this.createDiv('geFooter');
  2574. };
  2575. /**
  2576. * Creates the actual toolbar for the toolbar container.
  2577. */
  2578. EditorUi.prototype.createDiv = function(classname)
  2579. {
  2580. var elt = document.createElement('div');
  2581. elt.className = classname;
  2582. return elt;
  2583. };
  2584. /**
  2585. * Updates the states of the given undo/redo items.
  2586. */
  2587. EditorUi.prototype.addSplitHandler = function(elt, horizontal, dx, onChange)
  2588. {
  2589. var start = null;
  2590. var initial = null;
  2591. var ignoreClick = true;
  2592. var last = null;
  2593. // Disables built-in pan and zoom in IE10 and later
  2594. if (mxClient.IS_POINTER)
  2595. {
  2596. elt.style.touchAction = 'none';
  2597. }
  2598. var getValue = mxUtils.bind(this, function()
  2599. {
  2600. var result = parseInt(((horizontal) ? elt.style.left : elt.style.bottom));
  2601. // Takes into account hidden footer
  2602. if (!horizontal)
  2603. {
  2604. result = result + dx - this.footerHeight;
  2605. }
  2606. return result;
  2607. });
  2608. function moveHandler(evt)
  2609. {
  2610. if (start != null)
  2611. {
  2612. var pt = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
  2613. onChange(Math.max(0, initial + ((horizontal) ? (pt.x - start.x) : (start.y - pt.y)) - dx));
  2614. mxEvent.consume(evt);
  2615. if (initial != getValue())
  2616. {
  2617. ignoreClick = true;
  2618. last = null;
  2619. }
  2620. }
  2621. };
  2622. function dropHandler(evt)
  2623. {
  2624. moveHandler(evt);
  2625. initial = null;
  2626. start = null;
  2627. };
  2628. mxEvent.addGestureListeners(elt, function(evt)
  2629. {
  2630. start = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
  2631. initial = getValue();
  2632. ignoreClick = false;
  2633. mxEvent.consume(evt);
  2634. });
  2635. mxEvent.addListener(elt, 'click', function(evt)
  2636. {
  2637. if (!ignoreClick)
  2638. {
  2639. var next = (last != null) ? last - dx : 0;
  2640. last = getValue();
  2641. onChange(next);
  2642. mxEvent.consume(evt);
  2643. }
  2644. });
  2645. mxEvent.addGestureListeners(document, null, moveHandler, dropHandler);
  2646. this.destroyFunctions.push(function()
  2647. {
  2648. mxEvent.removeGestureListeners(document, null, moveHandler, dropHandler);
  2649. });
  2650. };
  2651. /**
  2652. * Displays a print dialog.
  2653. */
  2654. EditorUi.prototype.showDialog = function(elt, w, h, modal, closable, onClose)
  2655. {
  2656. this.editor.graph.tooltipHandler.hideTooltip();
  2657. if (this.dialogs == null)
  2658. {
  2659. this.dialogs = [];
  2660. }
  2661. this.dialog = new Dialog(this, elt, w, h, modal, closable, onClose);
  2662. this.dialogs.push(this.dialog);
  2663. };
  2664. /**
  2665. * Displays a print dialog.
  2666. */
  2667. EditorUi.prototype.hideDialog = function(cancel)
  2668. {
  2669. if (this.dialogs != null && this.dialogs.length > 0)
  2670. {
  2671. var dlg = this.dialogs.pop();
  2672. dlg.close(cancel);
  2673. this.dialog = (this.dialogs.length > 0) ? this.dialogs[this.dialogs.length - 1] : null;
  2674. if (this.dialog == null && this.editor.graph.container.style.visibility != 'hidden')
  2675. {
  2676. this.editor.graph.container.focus();
  2677. }
  2678. this.editor.fireEvent(new mxEventObject('hideDialog'));
  2679. }
  2680. };
  2681. /**
  2682. * Display a color dialog.
  2683. */
  2684. EditorUi.prototype.pickColor = function(color, apply)
  2685. {
  2686. var graph = this.editor.graph;
  2687. var selState = graph.cellEditor.saveSelection();
  2688. var dlg = new ColorDialog(this, color || 'none', function(color)
  2689. {
  2690. graph.cellEditor.restoreSelection(selState);
  2691. apply(color);
  2692. }, function()
  2693. {
  2694. graph.cellEditor.restoreSelection(selState);
  2695. });
  2696. this.showDialog(dlg.container, 220, 430, true, false);
  2697. dlg.init();
  2698. };
  2699. /**
  2700. * Adds the label menu items to the given menu and parent.
  2701. */
  2702. EditorUi.prototype.openFile = function()
  2703. {
  2704. // Closes dialog after open
  2705. window.openFile = new OpenFile(mxUtils.bind(this, function(cancel)
  2706. {
  2707. this.hideDialog(cancel);
  2708. }));
  2709. // Removes openFile if dialog is closed
  2710. this.showDialog(new OpenDialog(this).container, (Editor.useLocalStorage) ? 640 : 320,
  2711. (Editor.useLocalStorage) ? 480 : 220, true, true, function()
  2712. {
  2713. window.openFile = null;
  2714. });
  2715. };
  2716. /**
  2717. * Extracs the graph model from the given HTML data from a data transfer event.
  2718. */
  2719. EditorUi.prototype.extractGraphModelFromHtml = function(data)
  2720. {
  2721. var result = null;
  2722. try
  2723. {
  2724. var idx = data.indexOf('&lt;mxGraphModel ');
  2725. if (idx >= 0)
  2726. {
  2727. var idx2 = data.lastIndexOf('&lt;/mxGraphModel&gt;');
  2728. if (idx2 > idx)
  2729. {
  2730. result = data.substring(idx, idx2 + 21).replace(/&gt;/g, '>').
  2731. replace(/&lt;/g, '<').replace(/\\&quot;/g, '"').replace(/\n/g, '');
  2732. }
  2733. }
  2734. }
  2735. catch (e)
  2736. {
  2737. // ignore
  2738. }
  2739. return result;
  2740. };
  2741. /**
  2742. * Opens the given files in the editor.
  2743. */
  2744. EditorUi.prototype.extractGraphModelFromEvent = function(evt)
  2745. {
  2746. var result = null;
  2747. var data = null;
  2748. if (evt != null)
  2749. {
  2750. var provider = (evt.dataTransfer != null) ? evt.dataTransfer : evt.clipboardData;
  2751. if (provider != null)
  2752. {
  2753. if (document.documentMode == 10 || document.documentMode == 11)
  2754. {
  2755. data = provider.getData('Text');
  2756. }
  2757. else
  2758. {
  2759. data = (mxUtils.indexOf(provider.types, 'text/html') >= 0) ? provider.getData('text/html') : null;
  2760. if (mxUtils.indexOf(provider.types, 'text/plain' && (data == null || data.length == 0)))
  2761. {
  2762. data = provider.getData('text/plain');
  2763. }
  2764. }
  2765. if (data != null)
  2766. {
  2767. data = this.editor.graph.zapGremlins(mxUtils.trim(data));
  2768. // Tries parsing as HTML document with embedded XML
  2769. var xml = this.extractGraphModelFromHtml(data);
  2770. if (xml != null)
  2771. {
  2772. data = xml;
  2773. }
  2774. }
  2775. }
  2776. }
  2777. if (data != null && this.isCompatibleString(data))
  2778. {
  2779. result = data;
  2780. }
  2781. return result;
  2782. };
  2783. /**
  2784. * Hook for subclassers to return true if event data is a supported format.
  2785. * This implementation always returns false.
  2786. */
  2787. EditorUi.prototype.isCompatibleString = function(data)
  2788. {
  2789. return false;
  2790. };
  2791. /**
  2792. * Adds the label menu items to the given menu and parent.
  2793. */
  2794. EditorUi.prototype.saveFile = function(forceDialog)
  2795. {
  2796. if (!forceDialog && this.editor.filename != null)
  2797. {
  2798. this.save(this.editor.getOrCreateFilename());
  2799. }
  2800. else
  2801. {
  2802. var dlg = new FilenameDialog(this, this.editor.getOrCreateFilename(), mxResources.get('save'), mxUtils.bind(this, function(name)
  2803. {
  2804. this.save(name);
  2805. }), null, mxUtils.bind(this, function(name)
  2806. {
  2807. if (name != null && name.length > 0)
  2808. {
  2809. return true;
  2810. }
  2811. mxUtils.confirm(mxResources.get('invalidName'));
  2812. return false;
  2813. }));
  2814. this.showDialog(dlg.container, 300, 100, true, true);
  2815. dlg.init();
  2816. }
  2817. };
  2818. /**
  2819. * Saves the current graph under the given filename.
  2820. */
  2821. EditorUi.prototype.save = function(name)
  2822. {
  2823. if (name != null)
  2824. {
  2825. if (this.editor.graph.isEditing())
  2826. {
  2827. this.editor.graph.stopEditing();
  2828. }
  2829. var xml = mxUtils.getXml(this.editor.getGraphXml());
  2830. try
  2831. {
  2832. if (Editor.useLocalStorage)
  2833. {
  2834. if (localStorage.getItem(name) != null &&
  2835. !mxUtils.confirm(mxResources.get('replaceIt', [name])))
  2836. {
  2837. return;
  2838. }
  2839. localStorage.setItem(name, xml);
  2840. this.editor.setStatus(mxUtils.htmlEntities(mxResources.get('saved')) + ' ' + new Date());
  2841. }
  2842. else
  2843. {
  2844. if (xml.length < MAX_REQUEST_SIZE)
  2845. {
  2846. new mxXmlRequest(SAVE_URL, 'filename=' + encodeURIComponent(name) +
  2847. '&xml=' + encodeURIComponent(xml)).simulate(document, '_blank');
  2848. }
  2849. else
  2850. {
  2851. mxUtils.alert(mxResources.get('drawingTooLarge'));
  2852. mxUtils.popup(xml);
  2853. return;
  2854. }
  2855. }
  2856. this.editor.setModified(false);
  2857. this.editor.setFilename(name);
  2858. this.updateDocumentTitle();
  2859. }
  2860. catch (e)
  2861. {
  2862. this.editor.setStatus(mxUtils.htmlEntities(mxResources.get('errorSavingFile')));
  2863. }
  2864. }
  2865. };
  2866. /**
  2867. * Executes the given layout.
  2868. */
  2869. EditorUi.prototype.executeLayout = function(exec, animate, post)
  2870. {
  2871. var graph = this.editor.graph;
  2872. if (graph.isEnabled())
  2873. {
  2874. graph.getModel().beginUpdate();
  2875. try
  2876. {
  2877. exec();
  2878. }
  2879. catch (e)
  2880. {
  2881. throw e;
  2882. }
  2883. finally
  2884. {
  2885. // Animates the changes in the graph model except
  2886. // for Camino, where animation is too slow
  2887. if (this.allowAnimation && animate && navigator.userAgent.indexOf('Camino') < 0)
  2888. {
  2889. // New API for animating graph layout results asynchronously
  2890. var morph = new mxMorphing(graph);
  2891. morph.addListener(mxEvent.DONE, mxUtils.bind(this, function()
  2892. {
  2893. graph.getModel().endUpdate();
  2894. if (post != null)
  2895. {
  2896. post();
  2897. }
  2898. }));
  2899. morph.startAnimation();
  2900. }
  2901. else
  2902. {
  2903. graph.getModel().endUpdate();
  2904. if (post != null)
  2905. {
  2906. post();
  2907. }
  2908. }
  2909. }
  2910. }
  2911. };
  2912. /**
  2913. * Hides the current menu.
  2914. */
  2915. EditorUi.prototype.showImageDialog = function(title, value, fn, ignoreExisting)
  2916. {
  2917. var cellEditor = this.editor.graph.cellEditor;
  2918. var selState = cellEditor.saveSelection();
  2919. var newValue = mxUtils.prompt(title, value);
  2920. cellEditor.restoreSelection(selState);
  2921. if (newValue != null && newValue.length > 0)
  2922. {
  2923. var img = new Image();
  2924. img.onload = function()
  2925. {
  2926. fn(newValue, img.width, img.height);
  2927. };
  2928. img.onerror = function()
  2929. {
  2930. fn(null);
  2931. mxUtils.alert(mxResources.get('fileNotFound'));
  2932. };
  2933. img.src = newValue;
  2934. }
  2935. else
  2936. {
  2937. fn(null);
  2938. }
  2939. };
  2940. /**
  2941. * Hides the current menu.
  2942. */
  2943. EditorUi.prototype.showLinkDialog = function(value, btnLabel, fn)
  2944. {
  2945. var dlg = new LinkDialog(this, value, btnLabel, fn);
  2946. this.showDialog(dlg.container, 420, 90, true, true);
  2947. dlg.init();
  2948. };
  2949. /**
  2950. * Hides the current menu.
  2951. */
  2952. EditorUi.prototype.showBackgroundImageDialog = function(apply)
  2953. {
  2954. apply = (apply != null) ? apply : mxUtils.bind(this, function(image)
  2955. {
  2956. var change = new ChangeGraphBackground(this, null, image);
  2957. change.ignoreColor = true;
  2958. this.editor.graph.model.execute(change);
  2959. });
  2960. var newValue = mxUtils.prompt(mxResources.get('backgroundImage'), '');
  2961. if (newValue != null && newValue.length > 0)
  2962. {
  2963. var img = new Image();
  2964. img.onload = function()
  2965. {
  2966. apply(new mxImage(newValue, img.width, img.height));
  2967. };
  2968. img.onerror = function()
  2969. {
  2970. apply(null);
  2971. mxUtils.alert(mxResources.get('fileNotFound'));
  2972. };
  2973. img.src = newValue;
  2974. }
  2975. else
  2976. {
  2977. apply(null);
  2978. }
  2979. };
  2980. /**
  2981. * Loads the stylesheet for this graph.
  2982. */
  2983. EditorUi.prototype.setBackgroundImage = function(image)
  2984. {
  2985. this.editor.graph.setBackgroundImage(image);
  2986. this.editor.graph.view.validateBackgroundImage();
  2987. this.fireEvent(new mxEventObject('backgroundImageChanged'));
  2988. };
  2989. /**
  2990. * Creates the keyboard event handler for the current graph and history.
  2991. */
  2992. EditorUi.prototype.confirm = function(msg, okFn, cancelFn)
  2993. {
  2994. if (mxUtils.confirm(msg))
  2995. {
  2996. if (okFn != null)
  2997. {
  2998. okFn();
  2999. }
  3000. }
  3001. else if (cancelFn != null)
  3002. {
  3003. cancelFn();
  3004. }
  3005. };
  3006. /**
  3007. * Creates the keyboard event handler for the current graph and history.
  3008. */
  3009. EditorUi.prototype.createOutline = function(wnd)
  3010. {
  3011. var outline = new mxOutline(this.editor.graph);
  3012. outline.border = 20;
  3013. mxEvent.addListener(window, 'resize', function()
  3014. {
  3015. outline.update();
  3016. });
  3017. this.addListener('pageFormatChanged', function()
  3018. {
  3019. outline.update();
  3020. });
  3021. return outline;
  3022. };
  3023. /**
  3024. * Creates the keyboard event handler for the current graph and history.
  3025. */
  3026. EditorUi.prototype.createKeyHandler = function(editor)
  3027. {
  3028. var editorUi = this;
  3029. var graph = this.editor.graph;
  3030. var keyHandler = new mxKeyHandler(graph);
  3031. var isEventIgnored = keyHandler.isEventIgnored;
  3032. keyHandler.isEventIgnored = function(evt)
  3033. {
  3034. // Handles undo/redo/ctrl+./,/u via action and allows ctrl+b/i only if editing value is HTML (except for FF and Safari)
  3035. return (!this.isControlDown(evt) || mxEvent.isShiftDown(evt) || (evt.keyCode != 90 && evt.keyCode != 89 &&
  3036. evt.keyCode != 188 && evt.keyCode != 190 && evt.keyCode != 85)) && ((evt.keyCode != 66 && evt.keyCode != 73) ||
  3037. !this.isControlDown(evt) || (this.graph.cellEditor.isContentEditing() && !mxClient.IS_FF && !mxClient.IS_SF)) &&
  3038. isEventIgnored.apply(this, arguments);
  3039. };
  3040. // Ignores graph enabled state but not chromeless state
  3041. keyHandler.isEnabledForEvent = function(evt)
  3042. {
  3043. return (!mxEvent.isConsumed(evt) && this.isGraphEvent(evt) && this.isEnabled());
  3044. };
  3045. // Routes command-key to control-key on Mac
  3046. keyHandler.isControlDown = function(evt)
  3047. {
  3048. return mxEvent.isControlDown(evt) || (mxClient.IS_MAC && evt.metaKey);
  3049. };
  3050. var queue = [];
  3051. var thread = null;
  3052. // Helper function to move cells with the cursor keys
  3053. function nudge(keyCode, stepSize, resize)
  3054. {
  3055. queue.push(function()
  3056. {
  3057. if (!graph.isSelectionEmpty() && graph.isEnabled())
  3058. {
  3059. stepSize = (stepSize != null) ? stepSize : 1;
  3060. if (resize)
  3061. {
  3062. // Resizes all selected vertices
  3063. graph.getModel().beginUpdate();
  3064. try
  3065. {
  3066. var cells = graph.getSelectionCells();
  3067. for (var i = 0; i < cells.length; i++)
  3068. {
  3069. if (graph.getModel().isVertex(cells[i]) && graph.isCellResizable(cells[i]))
  3070. {
  3071. var geo = graph.getCellGeometry(cells[i]);
  3072. if (geo != null)
  3073. {
  3074. geo = geo.clone();
  3075. if (keyCode == 37)
  3076. {
  3077. geo.width = Math.max(0, geo.width - stepSize);
  3078. }
  3079. else if (keyCode == 38)
  3080. {
  3081. geo.height = Math.max(0, geo.height - stepSize);
  3082. }
  3083. else if (keyCode == 39)
  3084. {
  3085. geo.width += stepSize;
  3086. }
  3087. else if (keyCode == 40)
  3088. {
  3089. geo.height += stepSize;
  3090. }
  3091. graph.getModel().setGeometry(cells[i], geo);
  3092. }
  3093. }
  3094. }
  3095. }
  3096. finally
  3097. {
  3098. graph.getModel().endUpdate();
  3099. }
  3100. }
  3101. else
  3102. {
  3103. // Moves vertices up/down in a stack layout
  3104. var cell = graph.getSelectionCell();
  3105. var parent = graph.model.getParent(cell);
  3106. var layout = null;
  3107. if (graph.getSelectionCount() == 1 && graph.model.isVertex(cell) &&
  3108. graph.layoutManager != null && !graph.isCellLocked(cell))
  3109. {
  3110. layout = graph.layoutManager.getLayout(parent);
  3111. }
  3112. if (layout != null && layout.constructor == mxStackLayout)
  3113. {
  3114. var index = parent.getIndex(cell);
  3115. if (keyCode == 37 || keyCode == 38)
  3116. {
  3117. graph.model.add(parent, cell, Math.max(0, index - 1));
  3118. }
  3119. else if (keyCode == 39 ||keyCode == 40)
  3120. {
  3121. graph.model.add(parent, cell, Math.min(graph.model.getChildCount(parent), index + 1));
  3122. }
  3123. }
  3124. else
  3125. {
  3126. var dx = 0;
  3127. var dy = 0;
  3128. if (keyCode == 37)
  3129. {
  3130. dx = -stepSize;
  3131. }
  3132. else if (keyCode == 38)
  3133. {
  3134. dy = -stepSize;
  3135. }
  3136. else if (keyCode == 39)
  3137. {
  3138. dx = stepSize;
  3139. }
  3140. else if (keyCode == 40)
  3141. {
  3142. dy = stepSize;
  3143. }
  3144. graph.moveCells(graph.getMovableCells(graph.getSelectionCells()), dx, dy);
  3145. }
  3146. }
  3147. }
  3148. });
  3149. if (thread != null)
  3150. {
  3151. window.clearTimeout(thread);
  3152. }
  3153. thread = window.setTimeout(function()
  3154. {
  3155. if (queue.length > 0)
  3156. {
  3157. graph.getModel().beginUpdate();
  3158. try
  3159. {
  3160. for (var i = 0; i < queue.length; i++)
  3161. {
  3162. queue[i]();
  3163. }
  3164. queue = [];
  3165. }
  3166. finally
  3167. {
  3168. graph.getModel().endUpdate();
  3169. }
  3170. graph.scrollCellToVisible(graph.getSelectionCell());
  3171. }
  3172. }, 200);
  3173. };
  3174. // Overridden to handle special alt+shift+cursor keyboard shortcuts
  3175. var directions = {37: mxConstants.DIRECTION_WEST, 38: mxConstants.DIRECTION_NORTH,
  3176. 39: mxConstants.DIRECTION_EAST, 40: mxConstants.DIRECTION_SOUTH};
  3177. var keyHandlerGetFunction = keyHandler.getFunction;
  3178. // Alt+Shift+Keycode mapping to action
  3179. var altShiftActions = {67: this.actions.get('clearWaypoints')}; // Alt+Shift+C
  3180. mxKeyHandler.prototype.getFunction = function(evt)
  3181. {
  3182. if (graph.isEnabled())
  3183. {
  3184. // TODO: Add alt modified state in core API, here are some specific cases
  3185. if (!graph.isSelectionEmpty() && mxEvent.isShiftDown(evt) && mxEvent.isAltDown(evt))
  3186. {
  3187. var action = altShiftActions[evt.keyCode];
  3188. if (action != null)
  3189. {
  3190. return action.funct;
  3191. }
  3192. }
  3193. if (evt.keyCode == 9 && mxEvent.isAltDown(evt))
  3194. {
  3195. if (mxEvent.isShiftDown(evt))
  3196. {
  3197. // Alt+Shift+Tab
  3198. return function()
  3199. {
  3200. graph.selectParentCell();
  3201. };
  3202. }
  3203. else
  3204. {
  3205. // Alt+Tab
  3206. return function()
  3207. {
  3208. graph.selectChildCell();
  3209. };
  3210. }
  3211. }
  3212. else if (directions[evt.keyCode] != null && !graph.isSelectionEmpty())
  3213. {
  3214. if (mxEvent.isShiftDown(evt) && mxEvent.isAltDown(evt))
  3215. {
  3216. if (graph.model.isVertex(graph.getSelectionCell()))
  3217. {
  3218. return function()
  3219. {
  3220. var cells = graph.connectVertex(graph.getSelectionCell(), directions[evt.keyCode],
  3221. graph.defaultEdgeLength, evt, true);
  3222. if (cells != null && cells.length > 0)
  3223. {
  3224. if (cells.length == 1 && graph.model.isEdge(cells[0]))
  3225. {
  3226. graph.setSelectionCell(graph.model.getTerminal(cells[0], false));
  3227. }
  3228. else
  3229. {
  3230. graph.setSelectionCell(cells[cells.length - 1]);
  3231. }
  3232. if (editorUi.hoverIcons != null)
  3233. {
  3234. editorUi.hoverIcons.update(graph.view.getState(graph.getSelectionCell()));
  3235. }
  3236. }
  3237. };
  3238. }
  3239. }
  3240. else
  3241. {
  3242. // Avoids consuming event if no vertex is selected by returning null below
  3243. // Cursor keys move and resize (ctrl) cells
  3244. if (this.isControlDown(evt))
  3245. {
  3246. return function()
  3247. {
  3248. nudge(evt.keyCode, (mxEvent.isShiftDown(evt)) ? graph.gridSize : null, true);
  3249. };
  3250. }
  3251. else
  3252. {
  3253. return function()
  3254. {
  3255. nudge(evt.keyCode, (mxEvent.isShiftDown(evt)) ? graph.gridSize : null);
  3256. };
  3257. }
  3258. }
  3259. }
  3260. }
  3261. return keyHandlerGetFunction.apply(this, arguments);
  3262. };
  3263. // Binds keystrokes to actions
  3264. keyHandler.bindAction = mxUtils.bind(this, function(code, control, key, shift)
  3265. {
  3266. var action = this.actions.get(key);
  3267. if (action != null)
  3268. {
  3269. var f = function()
  3270. {
  3271. if (action.isEnabled())
  3272. {
  3273. action.funct();
  3274. }
  3275. };
  3276. if (control)
  3277. {
  3278. if (shift)
  3279. {
  3280. keyHandler.bindControlShiftKey(code, f);
  3281. }
  3282. else
  3283. {
  3284. keyHandler.bindControlKey(code, f);
  3285. }
  3286. }
  3287. else
  3288. {
  3289. if (shift)
  3290. {
  3291. keyHandler.bindShiftKey(code, f);
  3292. }
  3293. else
  3294. {
  3295. keyHandler.bindKey(code, f);
  3296. }
  3297. }
  3298. }
  3299. });
  3300. var ui = this;
  3301. var keyHandlerEscape = keyHandler.escape;
  3302. keyHandler.escape = function(evt)
  3303. {
  3304. keyHandlerEscape.apply(this, arguments);
  3305. };
  3306. // Ignores enter keystroke. Remove this line if you want the
  3307. // enter keystroke to stop editing. N, W, T are reserved.
  3308. keyHandler.enter = function() {};
  3309. keyHandler.bindControlShiftKey(36, function() { graph.exitGroup(); }); // Ctrl+Shift+Home
  3310. keyHandler.bindControlShiftKey(35, function() { graph.enterGroup(); }); // Ctrl+Shift+End
  3311. keyHandler.bindKey(36, function() { graph.home(); }); // Home
  3312. keyHandler.bindKey(35, function() { graph.refresh(); }); // End
  3313. keyHandler.bindAction(107, true, 'zoomIn'); // Ctrl+Plus
  3314. keyHandler.bindAction(109, true, 'zoomOut'); // Ctrl+Minus
  3315. keyHandler.bindAction(80, true, 'print'); // Ctrl+P
  3316. keyHandler.bindAction(79, true, 'outline', true); // Ctrl+Shift+O
  3317. keyHandler.bindAction(112, false, 'about'); // F1
  3318. if (!this.editor.chromeless)
  3319. {
  3320. keyHandler.bindControlKey(36, function() { if (graph.isEnabled()) { graph.foldCells(true); }}); // Ctrl+Home
  3321. keyHandler.bindControlKey(35, function() { if (graph.isEnabled()) { graph.foldCells(false); }}); // Ctrl+End
  3322. keyHandler.bindControlKey(13, function() { if (graph.isEnabled()) { graph.setSelectionCells(graph.duplicateCells(graph.getSelectionCells(), false)); }}); // Ctrl+Enter
  3323. keyHandler.bindAction(8, false, 'delete'); // Backspace
  3324. keyHandler.bindAction(8, true, 'deleteAll'); // Backspace
  3325. keyHandler.bindAction(46, false, 'delete'); // Delete
  3326. keyHandler.bindAction(46, true, 'deleteAll'); // Ctrl+Delete
  3327. keyHandler.bindAction(72, true, 'resetView'); // Ctrl+H
  3328. keyHandler.bindAction(72, true, 'fitWindow', true); // Ctrl+Shift+H
  3329. keyHandler.bindAction(74, true, 'fitPage'); // Ctrl+J
  3330. keyHandler.bindAction(74, true, 'fitTwoPages', true); // Ctrl+Shift+J
  3331. keyHandler.bindAction(48, true, 'customZoom'); // Ctrl+0
  3332. keyHandler.bindAction(82, true, 'turn'); // Ctrl+R
  3333. keyHandler.bindAction(82, true, 'clearDefaultStyle', true); // Ctrl+Shift+R
  3334. keyHandler.bindAction(83, true, 'save'); // Ctrl+S
  3335. keyHandler.bindAction(83, true, 'saveAs', true); // Ctrl+Shift+S
  3336. keyHandler.bindAction(65, true, 'selectAll'); // Ctrl+A
  3337. keyHandler.bindAction(65, true, 'selectNone', true); // Ctrl+A
  3338. keyHandler.bindAction(73, true, 'selectVertices', true); // Ctrl+Shift+I
  3339. keyHandler.bindAction(69, true, 'selectEdges', true); // Ctrl+Shift+E
  3340. keyHandler.bindAction(69, true, 'editStyle'); // Ctrl+E
  3341. keyHandler.bindAction(66, true, 'bold'); // Ctrl+B
  3342. keyHandler.bindAction(66, true, 'toBack', true); // Ctrl+Shift+B
  3343. keyHandler.bindAction(70, true, 'toFront', true); // Ctrl+Shift+F
  3344. keyHandler.bindAction(68, true, 'duplicate'); // Ctrl+D
  3345. keyHandler.bindAction(68, true, 'setAsDefaultStyle', true); // Ctrl+Shift+D
  3346. keyHandler.bindAction(90, true, 'undo'); // Ctrl+Z
  3347. keyHandler.bindAction(89, true, 'autosize', true); // Ctrl+Shift+Y
  3348. keyHandler.bindAction(88, true, 'cut'); // Ctrl+X
  3349. keyHandler.bindAction(67, true, 'copy'); // Ctrl+C
  3350. keyHandler.bindAction(81, true, 'connectionArrows'); // Ctrl+Q
  3351. keyHandler.bindAction(81, true, 'connectionPoints', true); // Ctrl+Shift+Q
  3352. keyHandler.bindAction(86, true, 'paste'); // Ctrl+V
  3353. keyHandler.bindAction(71, true, 'group'); // Ctrl+G
  3354. keyHandler.bindAction(77, true, 'editData'); // Ctrl+M
  3355. keyHandler.bindAction(71, true, 'grid', true); // Ctrl+Shift+G
  3356. keyHandler.bindAction(73, true, 'italic'); // Ctrl+I
  3357. keyHandler.bindAction(76, true, 'lockUnlock'); // Ctrl+L
  3358. keyHandler.bindAction(76, true, 'layers', true); // Ctrl+Shift+L
  3359. keyHandler.bindAction(80, true, 'formatPanel', true); // Ctrl+Shift+P
  3360. keyHandler.bindAction(85, true, 'underline'); // Ctrl+U
  3361. keyHandler.bindAction(85, true, 'ungroup', true); // Ctrl+Shift+U
  3362. keyHandler.bindAction(190, true, 'superscript'); // Ctrl+.
  3363. keyHandler.bindAction(188, true, 'subscript'); // Ctrl+,
  3364. keyHandler.bindKey(13, function() { if (graph.isEnabled()) { graph.startEditingAtCell(); }}); // Enter
  3365. keyHandler.bindKey(113, function() { if (graph.isEnabled()) { graph.startEditingAtCell(); }}); // F2
  3366. }
  3367. if (!mxClient.IS_WIN)
  3368. {
  3369. keyHandler.bindAction(90, true, 'redo', true); // Ctrl+Shift+Z
  3370. }
  3371. else
  3372. {
  3373. keyHandler.bindAction(89, true, 'redo'); // Ctrl+Y
  3374. }
  3375. return keyHandler;
  3376. };
  3377. /**
  3378. * Creates the keyboard event handler for the current graph and history.
  3379. */
  3380. EditorUi.prototype.destroy = function()
  3381. {
  3382. if (this.editor != null)
  3383. {
  3384. this.editor.destroy();
  3385. this.editor = null;
  3386. }
  3387. if (this.menubar != null)
  3388. {
  3389. this.menubar.destroy();
  3390. this.menubar = null;
  3391. }
  3392. if (this.toolbar != null)
  3393. {
  3394. this.toolbar.destroy();
  3395. this.toolbar = null;
  3396. }
  3397. if (this.sidebar != null)
  3398. {
  3399. this.sidebar.destroy();
  3400. this.sidebar = null;
  3401. }
  3402. if (this.keyHandler != null)
  3403. {
  3404. this.keyHandler.destroy();
  3405. this.keyHandler = null;
  3406. }
  3407. if (this.keydownHandler != null)
  3408. {
  3409. mxEvent.removeListener(document, 'keydown', this.keydownHandler);
  3410. this.keydownHandler = null;
  3411. }
  3412. if (this.keyupHandler != null)
  3413. {
  3414. mxEvent.removeListener(document, 'keyup', this.keyupHandler);
  3415. this.keyupHandler = null;
  3416. }
  3417. if (this.resizeHandler != null)
  3418. {
  3419. mxEvent.removeListener(window, 'resize', this.resizeHandler);
  3420. this.resizeHandler = null;
  3421. }
  3422. if (this.gestureHandler != null)
  3423. {
  3424. mxEvent.removeGestureListeners(document, this.gestureHandler);
  3425. this.gestureHandler = null;
  3426. }
  3427. if (this.orientationChangeHandler != null)
  3428. {
  3429. mxEvent.removeListener(window, 'orientationchange', this.orientationChangeHandler);
  3430. this.orientationChangeHandler = null;
  3431. }
  3432. if (this.scrollHandler != null)
  3433. {
  3434. mxEvent.removeListener(window, 'scroll', this.scrollHandler);
  3435. this.scrollHandler = null;
  3436. }
  3437. if (this.destroyFunctions != null)
  3438. {
  3439. for (var i = 0; i < this.destroyFunctions.length; i++)
  3440. {
  3441. this.destroyFunctions[i]();
  3442. }
  3443. this.destroyFunctions = null;
  3444. }
  3445. var c = [this.menubarContainer, this.toolbarContainer, this.sidebarContainer,
  3446. this.formatContainer, this.diagramContainer, this.footerContainer,
  3447. this.chromelessToolbar, this.hsplit, this.sidebarFooterContainer,
  3448. this.layersDialog];
  3449. for (var i = 0; i < c.length; i++)
  3450. {
  3451. if (c[i] != null && c[i].parentNode != null)
  3452. {
  3453. c[i].parentNode.removeChild(c[i]);
  3454. }
  3455. }
  3456. };