12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263 |
- /**
- * Copyright (c) 2006-2012, JGraph Ltd
- */
- /**
- * Constructs a new dialog.
- */
- function Dialog(editorUi, elt, w, h, modal, closable, onClose)
- {
- var dx = 0;
-
- if (mxClient.IS_VML && (document.documentMode == null || document.documentMode < 8))
- {
- // Adds padding as a workaround for box model in older IE versions
- // This needs to match the total padding of geDialog in CSS
- dx = 80;
- }
- w += dx;
- h += dx;
-
- var left = Math.max(0, Math.round((document.body.scrollWidth - w) / 2));
- var top = Math.max(0, Math.round((Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - h - editorUi.footerHeight) / 3));
-
- // Increments zIndex to put subdialogs and background over existing dialogs and background
- if (editorUi.dialogs.length > 0)
- {
- this.zIndex += editorUi.dialogs.length * 2;
- }
-
- var div = editorUi.createDiv('geDialog');
- div.style.width = w + 'px';
- div.style.height = h + 'px';
- div.style.left = left + 'px';
- div.style.top = top + 'px';
- div.style.zIndex = this.zIndex;
-
- if (this.bg == null)
- {
- this.bg = editorUi.createDiv('background');
- this.bg.style.position = 'absolute';
- this.bg.style.background = 'white';
- this.bg.style.left = '0px';
- this.bg.style.top = '0px';
- this.bg.style.bottom = '0px';
- this.bg.style.right = '0px';
- this.bg.style.zIndex = this.zIndex - 2;
-
- mxUtils.setOpacity(this.bg, this.bgOpacity);
-
- if (mxClient.IS_QUIRKS)
- {
- new mxDivResizer(this.bg);
- }
- }
- if (modal)
- {
- document.body.appendChild(this.bg);
- }
-
- div.appendChild(elt);
- document.body.appendChild(div);
-
- if (closable)
- {
- var img = document.createElement('img');
- img.setAttribute('src', Dialog.prototype.closeImage);
- img.setAttribute('title', mxResources.get('close'));
- img.className = 'geDialogClose';
- img.style.top = (top + 14) + 'px';
- img.style.left = (left + w + 38 - dx) + 'px';
- img.style.zIndex = this.zIndex;
-
- mxEvent.addListener(img, 'click', mxUtils.bind(this, function()
- {
- editorUi.hideDialog(true);
- }));
-
- document.body.appendChild(img);
- this.dialogImg = img;
-
- mxEvent.addListener(this.bg, 'click', mxUtils.bind(this, function()
- {
- editorUi.hideDialog(true);
- }));
- }
-
- this.onDialogClose = onClose;
- this.container = div;
-
- editorUi.editor.fireEvent(new mxEventObject('showDialog'));
- };
- /**
- *
- */
- Dialog.prototype.zIndex = mxPopupMenu.prototype.zIndex - 1;
- /**
- *
- */
- Dialog.prototype.noColorImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/nocolor.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkEzRDlBMUUwODYxMTExRTFCMzA4RDdDMjJBMEMxRDM3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkEzRDlBMUUxODYxMTExRTFCMzA4RDdDMjJBMEMxRDM3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTNEOUExREU4NjExMTFFMUIzMDhEN0MyMkEwQzFEMzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTNEOUExREY4NjExMTFFMUIzMDhEN0MyMkEwQzFEMzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5xh3fmAAAABlBMVEX////MzMw46qqDAAAAGElEQVR42mJggAJGKGAYIIGBth8KAAIMAEUQAIElnLuQAAAAAElFTkSuQmCC';
- /**
- *
- */
- Dialog.prototype.closeImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/close.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEV7mr3///+wksspAAAAAnRSTlP/AOW3MEoAAAAdSURBVAgdY9jXwCDDwNDRwHCwgeExmASygSL7GgB12QiqNHZZIwAAAABJRU5ErkJggg==';
- /**
- *
- */
- Dialog.prototype.clearImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/clear.gif' : 'data:image/gif;base64,R0lGODlhDQAKAIABAMDAwP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUIzOEM1NzI4NjEyMTFFMUEzMkNDMUE3NjZERDE2QjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUIzOEM1NzM4NjEyMTFFMUEzMkNDMUE3NjZERDE2QjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QjM4QzU3MDg2MTIxMUUxQTMyQ0MxQTc2NkREMTZCMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QjM4QzU3MTg2MTIxMUUxQTMyQ0MxQTc2NkREMTZCMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAAANAAoAAAIXTGCJebD9jEOTqRlttXdrB32PJ2ncyRQAOw==';
- /**
- *
- */
- Dialog.prototype.lockedImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/locked.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzdDMDZCODExNzIxMTFFNUI0RTk5NTg4OTcyMUUyODEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzdDMDZCODIxNzIxMTFFNUI0RTk5NTg4OTcyMUUyODEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozN0MwNkI3RjE3MjExMUU1QjRFOTk1ODg5NzIxRTI4MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozN0MwNkI4MDE3MjExMUU1QjRFOTk1ODg5NzIxRTI4MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvqMCFYAAAAVUExURZmZmb+/v7KysqysrMzMzLGxsf///4g8N1cAAAAHdFJOU////////wAaSwNGAAAAPElEQVR42lTMQQ4AIQgEwUa0//9kTQirOweYOgDqAMbZUr10AGlAwx4/BJ2QJ4U0L5brYjovvpv32xZgAHZaATFtMbu4AAAAAElFTkSuQmCC';
- /**
- *
- */
- Dialog.prototype.unlockedImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/unlocked.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzdDMDZCN0QxNzIxMTFFNUI0RTk5NTg4OTcyMUUyODEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzdDMDZCN0UxNzIxMTFFNUI0RTk5NTg4OTcyMUUyODEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozN0MwNkI3QjE3MjExMUU1QjRFOTk1ODg5NzIxRTI4MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozN0MwNkI3QzE3MjExMUU1QjRFOTk1ODg5NzIxRTI4MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkKMpVwAAAAYUExURZmZmbKysr+/v6ysrOXl5czMzLGxsf///zHN5lwAAAAIdFJOU/////////8A3oO9WQAAADxJREFUeNpUzFESACAEBNBVsfe/cZJU+8Mzs8CIABCidtfGOndnYsT40HDSiCcbPdoJo10o9aI677cpwACRoAF3dFNlswAAAABJRU5ErkJggg==';
- /**
- * Removes the dialog from the DOM.
- */
- Dialog.prototype.bgOpacity = 80;
- /**
- * Removes the dialog from the DOM.
- */
- Dialog.prototype.close = function(cancel)
- {
- if (this.onDialogClose != null)
- {
- this.onDialogClose(cancel);
- this.onDialogClose = null;
- }
-
- if (this.dialogImg != null)
- {
- this.dialogImg.parentNode.removeChild(this.dialogImg);
- this.dialogImg = null;
- }
-
- if (this.bg != null && this.bg.parentNode != null)
- {
- this.bg.parentNode.removeChild(this.bg);
- }
-
- this.container.parentNode.removeChild(this.container);
- };
- /**
- * Constructs a new open dialog.
- */
- var OpenDialog = function()
- {
- var iframe = document.createElement('iframe');
- iframe.style.backgroundColor = 'transparent';
- iframe.allowTransparency = 'true';
- iframe.style.borderStyle = 'none';
- iframe.style.borderWidth = '0px';
- iframe.style.overflow = 'hidden';
- iframe.frameBorder = '0';
-
- // Adds padding as a workaround for box model in older IE versions
- var dx = (mxClient.IS_VML && (document.documentMode == null || document.documentMode < 8)) ? 20 : 0;
-
- iframe.setAttribute('width', (((Editor.useLocalStorage) ? 640 : 320) + dx) + 'px');
- iframe.setAttribute('height', (((Editor.useLocalStorage) ? 480 : 220) + dx) + 'px');
- iframe.setAttribute('src', OPEN_FORM);
-
- this.container = iframe;
- };
- /**
- * Constructs a new color dialog.
- */
- var ColorDialog = function(editorUi, color, apply, cancelFn)
- {
- this.editorUi = editorUi;
-
- var input = document.createElement('input');
- input.style.marginBottom = '10px';
- input.style.width = '216px';
-
- // Required for picker to render in IE
- if (mxClient.IS_IE)
- {
- input.style.marginTop = '10px';
- document.body.appendChild(input);
- }
-
- this.init = function()
- {
- if (!mxClient.IS_TOUCH)
- {
- input.focus();
- }
- };
- var picker = new jscolor.color(input);
- picker.pickerOnfocus = false;
- picker.showPicker();
- var div = document.createElement('div');
- jscolor.picker.box.style.position = 'relative';
- jscolor.picker.box.style.width = '230px';
- jscolor.picker.box.style.height = '100px';
- jscolor.picker.box.style.paddingBottom = '10px';
- div.appendChild(jscolor.picker.box);
- var center = document.createElement('center');
-
- function addPresets(presets, rowLength, defaultColor)
- {
- rowLength = (rowLength != null) ? rowLength : 12;
- var table = document.createElement('table');
- table.style.borderCollapse = 'collapse';
- table.setAttribute('cellspacing', '0');
- table.style.marginBottom = '20px';
- table.style.cellSpacing = '0px';
- var tbody = document.createElement('tbody');
- table.appendChild(tbody);
- var rows = presets.length / rowLength;
-
- for (var row = 0; row < rows; row++)
- {
- var tr = document.createElement('tr');
-
- for (var i = 0; i < rowLength; i++)
- {
- (function(clr)
- {
- var td = document.createElement('td');
- td.style.border = '1px solid black';
- td.style.padding = '0px';
- td.style.width = '16px';
- td.style.height = '16px';
-
- if (clr == null)
- {
- clr = defaultColor;
- }
-
- if (clr == 'none')
- {
- td.style.background = 'url(\'' + Dialog.prototype.noColorImage + '\')';
- }
- else
- {
- td.style.backgroundColor = '#' + clr;
- }
-
- tr.appendChild(td);
- if (clr != null)
- {
- td.style.cursor = 'pointer';
-
- mxEvent.addListener(td, 'click', function()
- {
- if (clr == 'none')
- {
- picker.fromString('ffffff');
- input.value = 'none';
- }
- else
- {
- picker.fromString(clr);
- }
- });
- }
- })(presets[row * rowLength + i]);
- }
-
- tbody.appendChild(tr);
- }
-
- center.appendChild(table);
-
- return table;
- };
- div.appendChild(input);
- mxUtils.br(div);
-
- // Adds recent colors
- var table = addPresets((ColorDialog.recentColors.length == 0) ? ['FFFFFF'] : ColorDialog.recentColors, 12, 'FFFFFF');
- table.style.marginBottom = '8px';
-
- // Adds presets
- var table = addPresets(['E6D0DE', 'CDA2BE', 'B5739D', 'E1D5E7', 'C3ABD0', 'A680B8', 'D4E1F5', 'A9C4EB', '7EA6E0', 'D5E8D4', '9AC7BF', '67AB9F', 'D5E8D4', 'B9E0A5', '97D077', 'FFF2CC', 'FFE599', 'FFD966', 'FFF4C3', 'FFCE9F', 'FFB570', 'F8CECC', 'F19C99', 'EA6B66'], 12);
- table.style.marginBottom = '8px';
- table = addPresets(['none', 'FFFFFF', 'E6E6E6', 'CCCCCC', 'B3B3B3', '999999', '808080', '666666', '4D4D4D', '333333', '1A1A1A', '000000', 'FFCCCC', 'FFE6CC', 'FFFFCC', 'E6FFCC', 'CCFFCC', 'CCFFE6', 'CCFFFF', 'CCE5FF', 'CCCCFF', 'E5CCFF', 'FFCCFF', 'FFCCE6', 'FF9999', 'FFCC99', 'FFFF99', 'CCFF99', '99FF99', '99FFCC', '99FFFF', '99CCFF', '9999FF', 'CC99FF', 'FF99FF', 'FF99CC', 'FF6666', 'FFB366', 'FFFF66', 'B3FF66', '66FF66', '66FFB3', '66FFFF', '66B2FF', '6666FF', 'B266FF', 'FF66FF', 'FF66B3', 'FF3333', 'FF9933', 'FFFF33', '99FF33', '33FF33', '33FF99', '33FFFF', '3399FF', '3333FF', '9933FF', 'FF33FF', 'FF3399', 'FF0000', 'FF8000', 'FFFF00', '80FF00', '00FF00', '00FF80', '00FFFF', '007FFF', '0000FF', '7F00FF', 'FF00FF', 'FF0080', 'CC0000', 'CC6600', 'CCCC00', '66CC00', '00CC00', '00CC66', '00CCCC', '0066CC', '0000CC', '6600CC', 'CC00CC', 'CC0066', '990000', '994C00', '999900', '4D9900', '009900', '00994D', '009999', '004C99', '000099', '4C0099', '990099', '99004D', '660000', '663300', '666600', '336600', '006600', '006633', '006666', '003366', '000066', '330066', '660066', '660033', '330000', '331A00', '333300', '1A3300', '003300', '00331A', '003333', '001933', '000033', '190033', '330033', '33001A']);
- table.style.marginBottom = '16px';
- div.appendChild(center);
- var buttons = document.createElement('div');
- buttons.style.textAlign = 'right';
- buttons.style.whiteSpace = 'nowrap';
-
- var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
- {
- editorUi.hideDialog();
-
- if (cancelFn != null)
- {
- cancelFn();
- }
- });
- cancelBtn.className = 'geBtn';
- if (editorUi.editor.cancelFirst)
- {
- buttons.appendChild(cancelBtn);
- }
-
- var applyFunction = (apply != null) ? apply : this.createApplyFunction();
-
- var applyBtn = mxUtils.button(mxResources.get('apply'), function()
- {
- var color = input.value;
- ColorDialog.addRecentColor(color, 12);
-
- if (color != 'none' && color.charAt(0) != '#')
- {
- color = '#' + color;
- }
- applyFunction(color);
- editorUi.hideDialog();
- });
- applyBtn.className = 'geBtn gePrimaryBtn';
- buttons.appendChild(applyBtn);
-
- if (!editorUi.editor.cancelFirst)
- {
- buttons.appendChild(cancelBtn);
- }
-
- if (color != null)
- {
- if (color == 'none')
- {
- picker.fromString('ffffff');
- input.value = 'none';
- }
- else
- {
- picker.fromString(color);
- }
- }
-
- div.appendChild(buttons);
- this.picker = picker;
- this.colorInput = input;
- // LATER: Only fires if input if focused, should always
- // fire if this dialog is showing.
- mxEvent.addListener(div, 'keydown', function(e)
- {
- if (e.keyCode == 27)
- {
- editorUi.hideDialog();
-
- if (cancelFn != null)
- {
- cancelFn();
- }
-
- mxEvent.consume(e);
- }
- });
-
- this.container = div;
- };
- /* Creates function to apply value */
- ColorDialog.prototype.createApplyFunction = function()
- {
- return mxUtils.bind(this, function(color)
- {
- var graph = this.editorUi.editor.graph;
-
- graph.getModel().beginUpdate();
- try
- {
- graph.setCellStyles(this.currentColorKey, color);
- this.editorUi.fireEvent(new mxEventObject('styleChanged', 'keys', [this.currentColorKey],
- 'values', [color], 'cells', graph.getSelectionCells()));
- }
- finally
- {
- graph.getModel().endUpdate();
- }
- });
- };
- /**
- *
- */
- ColorDialog.recentColors = [];
- /**
- * Adds recent color for later use.
- */
- ColorDialog.addRecentColor = function(color, max)
- {
- if (color != null)
- {
- mxUtils.remove(color, ColorDialog.recentColors);
- ColorDialog.recentColors.splice(0, 0, color);
-
- if (ColorDialog.recentColors.length > max)
- {
- ColorDialog.recentColors.pop();
- }
- }
- };
- /**
- * Constructs a new about dialog.
- */
- var AboutDialog = function(editorUi)
- {
- var div = document.createElement('div');
- div.setAttribute('align', 'center');
- var h3 = document.createElement('h3');
- mxUtils.write(h3, mxResources.get('about') + ' GraphEditor');
- div.appendChild(h3);
- var img = document.createElement('img');
- img.style.border = '0px';
- img.setAttribute('width', '176');
- img.setAttribute('width', '151');
- img.setAttribute('src', IMAGE_PATH + '/logo.png');
- div.appendChild(img);
- mxUtils.br(div);
- mxUtils.write(div, 'Powered by mxGraph ' + mxClient.VERSION);
- mxUtils.br(div);
- var link = document.createElement('a');
- link.setAttribute('href', 'http://www.jgraph.com/');
- link.setAttribute('target', '_blank');
- mxUtils.write(link, 'www.jgraph.com');
- div.appendChild(link);
- mxUtils.br(div);
- mxUtils.br(div);
- var closeBtn = mxUtils.button(mxResources.get('close'), function()
- {
- editorUi.hideDialog();
- });
- closeBtn.className = 'geBtn gePrimaryBtn';
- div.appendChild(closeBtn);
-
- this.container = div;
- };
- /**
- * Constructs a new page setup dialog.
- */
- var PageSetupDialog = function(editorUi)
- {
- var graph = editorUi.editor.graph;
- var row, td;
- var table = document.createElement('table');
- table.style.width = '100%';
- table.style.height = '100%';
- var tbody = document.createElement('tbody');
-
- row = document.createElement('tr');
-
- td = document.createElement('td');
- td.style.verticalAlign = 'top';
- td.style.fontSize = '10pt';
- mxUtils.write(td, mxResources.get('paperSize') + ':');
-
- row.appendChild(td);
-
- td = document.createElement('td');
- td.style.verticalAlign = 'top';
- td.style.fontSize = '10pt';
-
- var accessor = PageSetupDialog.addPageFormatPanel(td, 'pagesetupdialog', graph.pageFormat);
- row.appendChild(td);
- tbody.appendChild(row);
-
- row = document.createElement('tr');
-
- td = document.createElement('td');
- mxUtils.write(td, mxResources.get('background') + ':');
-
- row.appendChild(td);
-
- td = document.createElement('td');
- td.style.whiteSpace = 'nowrap';
-
- var backgroundInput = document.createElement('input');
- backgroundInput.setAttribute('type', 'text');
- var backgroundButton = document.createElement('button');
-
- backgroundButton.style.width = '18px';
- backgroundButton.style.height = '18px';
- backgroundButton.style.marginRight = '20px';
- backgroundButton.style.backgroundPosition = 'center center';
- backgroundButton.style.backgroundRepeat = 'no-repeat';
-
- var newBackgroundColor = graph.background;
-
- function updateBackgroundColor()
- {
- if (newBackgroundColor == null || newBackgroundColor == mxConstants.NONE)
- {
- backgroundButton.style.backgroundColor = '';
- backgroundButton.style.backgroundImage = 'url(\'' + Dialog.prototype.noColorImage + '\')';
- }
- else
- {
- backgroundButton.style.backgroundColor = newBackgroundColor;
- backgroundButton.style.backgroundImage = '';
- }
- };
-
- updateBackgroundColor();
- mxEvent.addListener(backgroundButton, 'click', function(evt)
- {
- editorUi.pickColor(newBackgroundColor || 'none', function(color)
- {
- newBackgroundColor = color;
- updateBackgroundColor();
- });
- mxEvent.consume(evt);
- });
-
- td.appendChild(backgroundButton);
-
- mxUtils.write(td, mxResources.get('gridSize') + ':');
-
- var gridSizeInput = document.createElement('input');
- gridSizeInput.setAttribute('type', 'number');
- gridSizeInput.setAttribute('min', '0');
- gridSizeInput.style.width = '40px';
- gridSizeInput.style.marginLeft = '6px';
-
- gridSizeInput.value = graph.getGridSize();
- td.appendChild(gridSizeInput);
-
- mxEvent.addListener(gridSizeInput, 'change', function()
- {
- var value = parseInt(gridSizeInput.value);
- gridSizeInput.value = Math.max(1, (isNaN(value)) ? graph.getGridSize() : value);
- });
-
- row.appendChild(td);
- tbody.appendChild(row);
-
- row = document.createElement('tr');
- td = document.createElement('td');
-
- mxUtils.write(td, mxResources.get('image') + ':');
-
- row.appendChild(td);
- td = document.createElement('td');
-
- var changeImageLink = document.createElement('a');
- changeImageLink.style.textDecoration = 'underline';
- changeImageLink.style.cursor = 'pointer';
- changeImageLink.style.color = '#a0a0a0';
-
- var newBackgroundImage = graph.backgroundImage;
-
- function updateBackgroundImage()
- {
- if (newBackgroundImage == null)
- {
- changeImageLink.removeAttribute('title');
- changeImageLink.style.fontSize = '';
- changeImageLink.innerHTML = mxResources.get('change') + '...';
- }
- else
- {
- changeImageLink.setAttribute('title', newBackgroundImage.src);
- changeImageLink.style.fontSize = '11px';
- changeImageLink.innerHTML = newBackgroundImage.src.substring(0, 42) + '...';
- }
- };
-
- mxEvent.addListener(changeImageLink, 'click', function(evt)
- {
- editorUi.showBackgroundImageDialog(function(image)
- {
- newBackgroundImage = image;
- updateBackgroundImage();
- });
-
- mxEvent.consume(evt);
- });
-
- updateBackgroundImage();
- td.appendChild(changeImageLink);
-
- row.appendChild(td);
- tbody.appendChild(row);
-
- row = document.createElement('tr');
- td = document.createElement('td');
- td.colSpan = 2;
- td.style.paddingTop = '16px';
- td.setAttribute('align', 'right');
- var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
- {
- editorUi.hideDialog();
- });
- cancelBtn.className = 'geBtn';
-
- if (editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- }
-
- var applyBtn = mxUtils.button(mxResources.get('apply'), function()
- {
- editorUi.hideDialog();
- editorUi.setPageFormat(accessor.get());
-
- if (graph.background != newBackgroundColor)
- {
- editorUi.setBackgroundColor(newBackgroundColor);
- }
-
- if (graph.backgroundImage !== newBackgroundImage)
- {
- editorUi.setBackgroundImage(newBackgroundImage);
- }
-
- if (graph.gridSize !== gridSizeInput.value)
- {
- graph.setGridSize(parseInt(gridSizeInput.value));
- }
- });
- applyBtn.className = 'geBtn gePrimaryBtn';
- td.appendChild(applyBtn);
- if (!editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- }
-
- row.appendChild(td);
- tbody.appendChild(row);
-
- table.appendChild(tbody);
- this.container = table;
- };
- /**
- *
- */
- PageSetupDialog.addPageFormatPanel = function(div, namePostfix, pageFormat, pageFormatListener)
- {
- var formatName = 'format-' + namePostfix;
-
- var portraitCheckBox = document.createElement('input');
- portraitCheckBox.setAttribute('name', formatName);
- portraitCheckBox.setAttribute('type', 'radio');
- portraitCheckBox.setAttribute('value', 'portrait');
-
- var landscapeCheckBox = document.createElement('input');
- landscapeCheckBox.setAttribute('name', formatName);
- landscapeCheckBox.setAttribute('type', 'radio');
- landscapeCheckBox.setAttribute('value', 'landscape');
-
- var paperSizeSelect = document.createElement('select');
- paperSizeSelect.style.marginBottom = '8px';
- paperSizeSelect.style.width = '202px';
- var formatDiv = document.createElement('div');
- formatDiv.style.marginLeft = '4px';
- formatDiv.style.width = '210px';
- formatDiv.style.height = '24px';
- portraitCheckBox.style.marginRight = '6px';
- formatDiv.appendChild(portraitCheckBox);
-
- var portraitSpan = document.createElement('span');
- portraitSpan.style.maxWidth = '100px';
- mxUtils.write(portraitSpan, mxResources.get('portrait'));
- formatDiv.appendChild(portraitSpan);
- landscapeCheckBox.style.marginLeft = '10px';
- landscapeCheckBox.style.marginRight = '6px';
- formatDiv.appendChild(landscapeCheckBox);
-
- var landscapeSpan = document.createElement('span');
- landscapeSpan.style.width = '100px';
- mxUtils.write(landscapeSpan, mxResources.get('landscape'));
- formatDiv.appendChild(landscapeSpan)
- var customDiv = document.createElement('div');
- customDiv.style.marginLeft = '4px';
- customDiv.style.width = '210px';
- customDiv.style.height = '24px';
-
- var widthInput = document.createElement('input');
- widthInput.setAttribute('size', '6');
- widthInput.setAttribute('value', pageFormat.width);
- customDiv.appendChild(widthInput);
- mxUtils.write(customDiv, ' x ');
-
- var heightInput = document.createElement('input');
- heightInput.setAttribute('size', '6');
- heightInput.setAttribute('value', pageFormat.height);
- customDiv.appendChild(heightInput);
- mxUtils.write(customDiv, ' pt');
- formatDiv.style.display = 'none';
- customDiv.style.display = 'none';
-
- var pf = new Object();
- var formats = PageSetupDialog.getFormats();
-
- for (var i = 0; i < formats.length; i++)
- {
- var f = formats[i];
- pf[f.key] = f;
- var paperSizeOption = document.createElement('option');
- paperSizeOption.setAttribute('value', f.key);
- mxUtils.write(paperSizeOption, f.title);
- paperSizeSelect.appendChild(paperSizeOption);
- }
-
- var customSize = false;
-
- function listener(sender, evt, force)
- {
- if (force || (widthInput != document.activeElement && heightInput != document.activeElement))
- {
- var detected = false;
-
- for (var i = 0; i < formats.length; i++)
- {
- var f = formats[i];
-
- // Special case where custom was chosen
- if (customSize)
- {
- if (f.key == 'custom')
- {
- paperSizeSelect.value = f.key;
- customSize = false;
- }
- }
- else if (f.format != null)
- {
- if (pageFormat.width == f.format.width && pageFormat.height == f.format.height)
- {
- paperSizeSelect.value = f.key;
- portraitCheckBox.setAttribute('checked', 'checked');
- portraitCheckBox.defaultChecked = true;
- portraitCheckBox.checked = true;
- landscapeCheckBox.removeAttribute('checked');
- landscapeCheckBox.defaultChecked = false;
- landscapeCheckBox.checked = false;
- detected = true;
- }
- else if (pageFormat.width == f.format.height && pageFormat.height == f.format.width)
- {
- paperSizeSelect.value = f.key;
- portraitCheckBox.removeAttribute('checked');
- portraitCheckBox.defaultChecked = false;
- portraitCheckBox.checked = false;
- landscapeCheckBox.setAttribute('checked', 'checked');
- landscapeCheckBox.defaultChecked = true;
- landscapeCheckBox.checked = true;
- detected = true;
- }
- }
- }
-
- // Selects custom format which is last in list
- if (!detected)
- {
- widthInput.value = pageFormat.width;
- heightInput.value = pageFormat.height;
- paperSizeOption.setAttribute('selected', 'selected');
- portraitCheckBox.setAttribute('checked', 'checked');
- portraitCheckBox.defaultChecked = true;
- formatDiv.style.display = 'none';
- customDiv.style.display = '';
- }
- else
- {
- formatDiv.style.display = '';
- customDiv.style.display = 'none';
- }
- }
- };
- listener();
- div.appendChild(paperSizeSelect);
- mxUtils.br(div);
- div.appendChild(formatDiv);
- div.appendChild(customDiv);
-
- var currentPageFormat = pageFormat;
-
- var update = function()
- {
- var f = pf[paperSizeSelect.value];
-
- if (f.format != null)
- {
- widthInput.value = f.format.width;
- heightInput.value = f.format.height;
- customDiv.style.display = 'none';
- formatDiv.style.display = '';
- }
- else
- {
- formatDiv.style.display = 'none';
- customDiv.style.display = '';
- }
-
- var newPageFormat = new mxRectangle(0, 0, parseInt(widthInput.value), parseInt(heightInput.value));
-
- if (paperSizeSelect.value != 'custom' && landscapeCheckBox.checked)
- {
- newPageFormat = new mxRectangle(0, 0, newPageFormat.height, newPageFormat.width);
- }
-
- if (newPageFormat.width != currentPageFormat.width || newPageFormat.height != currentPageFormat.height)
- {
- currentPageFormat = newPageFormat;
-
- if (pageFormatListener != null)
- {
- pageFormatListener(currentPageFormat);
- }
- }
- };
- mxEvent.addListener(portraitSpan, 'click', function(evt)
- {
- portraitCheckBox.checked = true;
- update();
- mxEvent.consume(evt);
- });
-
- mxEvent.addListener(landscapeSpan, 'click', function(evt)
- {
- landscapeCheckBox.checked = true;
- update();
- mxEvent.consume(evt);
- });
-
- mxEvent.addListener(widthInput, 'blur', update);
- mxEvent.addListener(widthInput, 'click', update);
- mxEvent.addListener(heightInput, 'blur', update);
- mxEvent.addListener(heightInput, 'click', update);
- mxEvent.addListener(landscapeCheckBox, 'change', update);
- mxEvent.addListener(portraitCheckBox, 'change', update);
- mxEvent.addListener(paperSizeSelect, 'change', function()
- {
- // Handles special case where custom was chosen
- customSize = paperSizeSelect.value == 'custom';
- update();
- });
-
- update();
-
- return {set: function(value)
- {
- pageFormat = value;
- listener(null, null, true);
- },get: function()
- {
- return currentPageFormat;
- }, widthInput: widthInput,
- heightInput: heightInput};
- };
- /**
- *
- */
- PageSetupDialog.getFormats = function()
- {
- return [{key: 'letter', title: 'US-Letter (8,5" x 11")', format: mxConstants.PAGE_FORMAT_LETTER_PORTRAIT},
- {key: 'legal', title: 'US-Legal (8,5" x 14")', format: new mxRectangle(0, 0, 850, 1400)},
- {key: 'tabloid', title: 'US-Tabloid (279 mm x 432 mm)', format: new mxRectangle(0, 0, 1100, 1700)},
- {key: 'a3', title: 'A3 (297 mm x 420 mm)', format: new mxRectangle(0, 0, 1169, 1652)},
- {key: 'a4', title: 'A4 (210 mm x 297 mm)', format: mxConstants.PAGE_FORMAT_A4_PORTRAIT},
- {key: 'a5', title: 'A5 (148 mm x 210 mm)', format: new mxRectangle(0, 0, 584, 826)},
- {key: 'custom', title: mxResources.get('custom'), format: null}];
- };
- /**
- * Constructs a new print dialog.
- */
- var PrintDialog = function(editorUi)
- {
- this.create(editorUi);
- };
- /**
- * Constructs a new print dialog.
- */
- PrintDialog.prototype.create = function(editorUi)
- {
- var graph = editorUi.editor.graph;
- var row, td;
-
- var table = document.createElement('table');
- table.style.width = '100%';
- table.style.height = '100%';
- var tbody = document.createElement('tbody');
-
- row = document.createElement('tr');
-
- var onePageCheckBox = document.createElement('input');
- onePageCheckBox.setAttribute('type', 'checkbox');
- td = document.createElement('td');
- td.setAttribute('colspan', '2');
- td.style.fontSize = '10pt';
- td.appendChild(onePageCheckBox);
-
- var span = document.createElement('span');
- mxUtils.write(span, ' ' + mxResources.get('fitPage'));
- td.appendChild(span);
-
- mxEvent.addListener(span, 'click', function(evt)
- {
- onePageCheckBox.checked = !onePageCheckBox.checked;
- pageCountCheckBox.checked = !onePageCheckBox.checked;
- mxEvent.consume(evt);
- });
-
- mxEvent.addListener(onePageCheckBox, 'change', function()
- {
- pageCountCheckBox.checked = !onePageCheckBox.checked;
- });
-
- row.appendChild(td);
- tbody.appendChild(row);
- row = row.cloneNode(false);
-
- var pageCountCheckBox = document.createElement('input');
- pageCountCheckBox.setAttribute('type', 'checkbox');
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- td.appendChild(pageCountCheckBox);
-
- var span = document.createElement('span');
- mxUtils.write(span, ' ' + mxResources.get('posterPrint') + ':');
- td.appendChild(span);
-
- mxEvent.addListener(span, 'click', function(evt)
- {
- pageCountCheckBox.checked = !pageCountCheckBox.checked;
- onePageCheckBox.checked = !pageCountCheckBox.checked;
- mxEvent.consume(evt);
- });
-
- row.appendChild(td);
-
- var pageCountInput = document.createElement('input');
- pageCountInput.setAttribute('value', '1');
- pageCountInput.setAttribute('type', 'number');
- pageCountInput.setAttribute('min', '1');
- pageCountInput.setAttribute('size', '4');
- pageCountInput.setAttribute('disabled', 'disabled');
- pageCountInput.style.width = '50px';
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- td.appendChild(pageCountInput);
- mxUtils.write(td, ' ' + mxResources.get('pages') + ' (max)');
- row.appendChild(td);
- tbody.appendChild(row);
- mxEvent.addListener(pageCountCheckBox, 'change', function()
- {
- if (pageCountCheckBox.checked)
- {
- pageCountInput.removeAttribute('disabled');
- }
- else
- {
- pageCountInput.setAttribute('disabled', 'disabled');
- }
- onePageCheckBox.checked = !pageCountCheckBox.checked;
- });
- row = row.cloneNode(false);
-
- td = document.createElement('td');
- mxUtils.write(td, mxResources.get('pageScale') + ':');
- row.appendChild(td);
-
- td = document.createElement('td');
- var pageScaleInput = document.createElement('input');
- pageScaleInput.setAttribute('value', '100 %');
- pageScaleInput.setAttribute('size', '5');
- pageScaleInput.style.width = '50px';
-
- td.appendChild(pageScaleInput);
- row.appendChild(td);
- tbody.appendChild(row);
-
- row = document.createElement('tr');
- td = document.createElement('td');
- td.colSpan = 2;
- td.style.paddingTop = '20px';
- td.setAttribute('align', 'right');
-
- // Overall scale for print-out to account for print borders in dialogs etc
- function preview(print)
- {
- var autoOrigin = onePageCheckBox.checked || pageCountCheckBox.checked;
- var printScale = parseInt(pageScaleInput.value) / 100;
-
- if (isNaN(printScale))
- {
- printScale = 1;
- pageScaleInput.value = '100%';
- }
-
- // Workaround to match available paper size in actual print output
- printScale *= 0.75;
- var pf = graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT;
- var scale = 1 / graph.pageScale;
-
- if (autoOrigin)
- {
- var pageCount = (onePageCheckBox.checked) ? 1 : parseInt(pageCountInput.value);
-
- if (!isNaN(pageCount))
- {
- scale = mxUtils.getScaleForPageCount(pageCount, graph, pf);
- }
- }
- // Negative coordinates are cropped or shifted if page visible
- var gb = graph.getGraphBounds();
- var border = 0;
- var x0 = 0;
- var y0 = 0;
- // Applies print scale
- pf = mxRectangle.fromRectangle(pf);
- pf.width = Math.ceil(pf.width * printScale);
- pf.height = Math.ceil(pf.height * printScale);
- scale *= printScale;
-
- // Starts at first visible page
- if (!autoOrigin && graph.pageVisible)
- {
- var layout = graph.getPageLayout();
- x0 -= layout.x * pf.width;
- y0 -= layout.y * pf.height;
- }
- else
- {
- autoOrigin = true;
- }
-
- var preview = PrintDialog.createPrintPreview(graph, scale, pf, border, x0, y0, autoOrigin);
- preview.open();
-
- if (print)
- {
- PrintDialog.printPreview(preview);
- }
- };
-
- var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
- {
- editorUi.hideDialog();
- });
- cancelBtn.className = 'geBtn';
-
- if (editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- }
-
- if (!mxClient.IS_CHROMEAPP)
- {
- var previewBtn = mxUtils.button(mxResources.get('preview'), function()
- {
- editorUi.hideDialog();
- preview(false);
- });
- previewBtn.className = 'geBtn';
- td.appendChild(previewBtn);
- }
-
- var printBtn = mxUtils.button(mxResources.get((mxClient.IS_CHROMEAPP) ? 'ok' : 'print'), function()
- {
- editorUi.hideDialog();
- preview(true);
- });
- printBtn.className = 'geBtn gePrimaryBtn';
- td.appendChild(printBtn);
-
- if (!editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- }
- row.appendChild(td);
- tbody.appendChild(row);
-
- table.appendChild(tbody);
- this.container = table;
- };
- /**
- * Constructs a new print dialog.
- */
- PrintDialog.printPreview = function(preview)
- {
- if (preview.wnd != null)
- {
- var printFn = function()
- {
- preview.wnd.focus();
- preview.wnd.print();
- preview.wnd.close();
- };
-
- // Workaround for Google Chrome which needs a bit of a
- // delay in order to render the SVG contents
- // Needs testing in production
- if (mxClient.IS_GC)
- {
- window.setTimeout(printFn, 500);
- }
- else
- {
- printFn();
- }
- }
- };
- /**
- * Constructs a new print dialog.
- */
- PrintDialog.createPrintPreview = function(graph, scale, pf, border, x0, y0, autoOrigin)
- {
- var preview = new mxPrintPreview(graph, scale, pf, border, x0, y0);
- preview.title = mxResources.get('preview');
- preview.printBackgroundImage = true;
- preview.autoOrigin = autoOrigin;
- var bg = graph.background;
-
- if (bg == null || bg == '' || bg == mxConstants.NONE)
- {
- bg = '#ffffff';
- }
-
- preview.backgroundColor = bg;
-
- var writeHead = preview.writeHead;
-
- // Adds a border in the preview
- preview.writeHead = function(doc)
- {
- writeHead.apply(this, arguments);
-
- doc.writeln('<style type="text/css">');
- doc.writeln('@media screen {');
- doc.writeln(' body > div { padding:30px;box-sizing:content-box; }');
- doc.writeln('}');
- doc.writeln('</style>');
- };
-
- return preview;
- };
- /**
- * Constructs a new filename dialog.
- */
- var FilenameDialog = function(editorUi, filename, buttonText, fn, label, validateFn, content, helpLink, closeOnBtn)
- {
- closeOnBtn = (closeOnBtn != null) ? closeOnBtn : true;
- var row, td;
-
- var table = document.createElement('table');
- var tbody = document.createElement('tbody');
- table.style.marginTop = '8px';
-
- row = document.createElement('tr');
-
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- td.style.width = '120px';
- mxUtils.write(td, (label || mxResources.get('filename')) + ':');
-
- row.appendChild(td);
-
- var nameInput = document.createElement('input');
- nameInput.setAttribute('value', filename || '');
- nameInput.style.width = '180px';
-
- var genericBtn = mxUtils.button(buttonText, function()
- {
- if (validateFn == null || validateFn(nameInput.value))
- {
- if (closeOnBtn)
- {
- editorUi.hideDialog();
- }
-
- fn(nameInput.value);
- }
- });
- genericBtn.className = 'geBtn gePrimaryBtn';
-
- this.init = function()
- {
- if (label == null && content != null)
- {
- return;
- }
-
- nameInput.focus();
-
- if (mxClient.IS_FF || document.documentMode >= 5 || mxClient.IS_QUIRKS)
- {
- nameInput.select();
- }
- else
- {
- document.execCommand('selectAll', false, null);
- }
-
- // Installs drag and drop handler for links
- if (Graph.fileSupport)
- {
- // Setup the dnd listeners
- var dlg = table.parentNode;
- var graph = editorUi.editor.graph;
- var dropElt = null;
-
- mxEvent.addListener(dlg, 'dragleave', function(evt)
- {
- if (dropElt != null)
- {
- dropElt.style.backgroundColor = '';
- dropElt = null;
- }
-
- evt.stopPropagation();
- evt.preventDefault();
- });
-
- mxEvent.addListener(dlg, 'dragover', mxUtils.bind(this, function(evt)
- {
- // IE 10 does not implement pointer-events so it can't have a drop highlight
- if (dropElt == null && (!mxClient.IS_IE || document.documentMode > 10))
- {
- dropElt = nameInput;
- dropElt.style.backgroundColor = '#ebf2f9';
- }
-
- evt.stopPropagation();
- evt.preventDefault();
- }));
-
- mxEvent.addListener(dlg, 'drop', mxUtils.bind(this, function(evt)
- {
- if (dropElt != null)
- {
- dropElt.style.backgroundColor = '';
- dropElt = null;
- }
- if (mxUtils.indexOf(evt.dataTransfer.types, 'text/uri-list') >= 0)
- {
- nameInput.value = decodeURIComponent(evt.dataTransfer.getData('text/uri-list'));
- genericBtn.click();
- }
- evt.stopPropagation();
- evt.preventDefault();
- }));
- }
- };
- td = document.createElement('td');
- td.appendChild(nameInput);
- row.appendChild(td);
-
- if (label != null || content == null)
- {
- tbody.appendChild(row);
- }
-
- if (content != null)
- {
- row = document.createElement('tr');
- td = document.createElement('td');
- td.colSpan = 2;
- td.appendChild(content);
- row.appendChild(td);
- tbody.appendChild(row);
- }
-
- row = document.createElement('tr');
- td = document.createElement('td');
- td.colSpan = 2;
- td.style.paddingTop = '20px';
- td.style.whiteSpace = 'nowrap';
- td.setAttribute('align', 'right');
-
- var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
- {
- editorUi.hideDialog();
- });
- cancelBtn.className = 'geBtn';
-
- if (editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- }
-
- if (helpLink != null)
- {
- var helpBtn = mxUtils.button(mxResources.get('help'), function()
- {
- window.open(helpLink);
- });
-
- helpBtn.className = 'geBtn';
- td.appendChild(helpBtn);
- }
- mxEvent.addListener(nameInput, 'keypress', function(e)
- {
- if (e.keyCode == 13)
- {
- genericBtn.click();
- }
- });
-
- td.appendChild(genericBtn);
-
- if (!editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- }
- row.appendChild(td);
- tbody.appendChild(row);
- table.appendChild(tbody);
-
- this.container = table;
- };
- /**
- * Constructs a new textarea dialog.
- */
- var TextareaDialog = function(editorUi, title, url, fn, cancelFn, cancelTitle, w, h, addButtons, noHide)
- {
- w = (w != null) ? w : 300;
- h = (h != null) ? h : 120;
- noHide = (noHide != null) ? noHide : false;
- var row, td;
-
- var table = document.createElement('table');
- var tbody = document.createElement('tbody');
-
- row = document.createElement('tr');
-
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- td.style.width = '100px';
- mxUtils.write(td, title);
-
- row.appendChild(td);
- tbody.appendChild(row);
- row = document.createElement('tr');
- td = document.createElement('td');
- var nameInput = document.createElement('textarea');
- mxUtils.write(nameInput, url || '');
- nameInput.style.resize = 'none';
- nameInput.style.width = w + 'px';
- nameInput.style.height = h + 'px';
-
- this.textarea = nameInput;
- this.init = function()
- {
- nameInput.focus();
- nameInput.scrollTop = 0;
- };
- td.appendChild(nameInput);
- row.appendChild(td);
-
- tbody.appendChild(row);
- row = document.createElement('tr');
- td = document.createElement('td');
- td.style.paddingTop = '14px';
- td.style.whiteSpace = 'nowrap';
- td.setAttribute('align', 'right');
-
- var cancelBtn = mxUtils.button(cancelTitle || mxResources.get('cancel'), function()
- {
- editorUi.hideDialog();
-
- if (cancelFn != null)
- {
- cancelFn();
- }
- });
- cancelBtn.className = 'geBtn';
-
- if (editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- }
-
- if (addButtons != null)
- {
- addButtons(td);
- }
-
- if (fn != null)
- {
- var genericBtn = mxUtils.button(mxResources.get('apply'), function()
- {
- if (!noHide)
- {
- editorUi.hideDialog();
- }
-
- fn(nameInput.value);
- });
-
- genericBtn.className = 'geBtn gePrimaryBtn';
- td.appendChild(genericBtn);
- }
-
- if (!editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- }
- row.appendChild(td);
- tbody.appendChild(row);
- table.appendChild(tbody);
- this.container = table;
- };
- /**
- * Constructs a new edit file dialog.
- */
- var EditDiagramDialog = function(editorUi)
- {
- var div = document.createElement('div');
- div.style.textAlign = 'right';
- var textarea = document.createElement('textarea');
- textarea.setAttribute('wrap', 'off');
- textarea.style.overflow = 'auto';
- textarea.style.resize = 'none';
- textarea.style.width = '600px';
- textarea.style.height = '370px';
- textarea.style.marginBottom = '16px';
-
- textarea.value = mxUtils.getPrettyXml(editorUi.editor.getGraphXml());
- div.appendChild(textarea);
-
- this.init = function()
- {
- textarea.focus();
- };
-
- // Enables dropping files
- if (Graph.fileSupport)
- {
- function handleDrop(evt)
- {
- evt.stopPropagation();
- evt.preventDefault();
-
- if (evt.dataTransfer.files.length > 0)
- {
- var file = evt.dataTransfer.files[0];
- var reader = new FileReader();
-
- reader.onload = function(e)
- {
- textarea.value = e.target.result;
- };
-
- reader.readAsText(file);
- }
- else
- {
- textarea.value = editorUi.extractGraphModelFromEvent(evt);
- }
- };
-
- function handleDragOver(evt)
- {
- evt.stopPropagation();
- evt.preventDefault();
- };
- // Setup the dnd listeners.
- textarea.addEventListener('dragover', handleDragOver, false);
- textarea.addEventListener('drop', handleDrop, false);
- }
-
- var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
- {
- editorUi.hideDialog();
- });
- cancelBtn.className = 'geBtn';
-
- if (editorUi.editor.cancelFirst)
- {
- div.appendChild(cancelBtn);
- }
-
- var select = document.createElement('select');
- select.style.width = '180px';
- select.className = 'geBtn';
- if (editorUi.editor.graph.isEnabled())
- {
- var replaceOption = document.createElement('option');
- replaceOption.setAttribute('value', 'replace');
- mxUtils.write(replaceOption, mxResources.get('replaceExistingDrawing'));
- select.appendChild(replaceOption);
- }
- var newOption = document.createElement('option');
- newOption.setAttribute('value', 'new');
- mxUtils.write(newOption, mxResources.get('openInNewWindow'));
-
- var chromeApp = window.chrome != null && chrome.app != null && chrome.app.runtime != null;
-
- if (!chromeApp)
- {
- select.appendChild(newOption);
- }
- if (editorUi.editor.graph.isEnabled())
- {
- var importOption = document.createElement('option');
- importOption.setAttribute('value', 'import');
- mxUtils.write(importOption, mxResources.get('addToExistingDrawing'));
- select.appendChild(importOption);
- }
- div.appendChild(select);
- var okBtn = mxUtils.button(mxResources.get('ok'), function()
- {
- // Removes all illegal control characters before parsing
- var data = editorUi.editor.graph.zapGremlins(mxUtils.trim(textarea.value));
- var error = null;
-
- if (select.value == 'new')
- {
- window.openFile = new OpenFile(function()
- {
- editorUi.hideDialog();
- window.openFile = null;
- });
-
- window.openFile.setData(data, null);
- window.open(editorUi.getUrl());
- }
- else if (select.value == 'replace')
- {
- editorUi.editor.graph.model.beginUpdate();
- try
- {
- editorUi.editor.setGraphXml(mxUtils.parseXml(data).documentElement);
- // LATER: Why is hideDialog between begin-/endUpdate faster?
- editorUi.hideDialog();
- }
- catch (e)
- {
- error = e;
- }
- finally
- {
- editorUi.editor.graph.model.endUpdate();
- }
- }
- else if (select.value == 'import')
- {
- editorUi.editor.graph.model.beginUpdate();
- try
- {
- var doc = mxUtils.parseXml(data);
- var model = new mxGraphModel();
- var codec = new mxCodec(doc);
- codec.decode(doc.documentElement, model);
-
- var children = model.getChildren(model.getChildAt(model.getRoot(), 0));
- editorUi.editor.graph.setSelectionCells(editorUi.editor.graph.importCells(children));
-
- // LATER: Why is hideDialog between begin-/endUpdate faster?
- editorUi.hideDialog();
- }
- catch (e)
- {
- error = e;
- }
- finally
- {
- editorUi.editor.graph.model.endUpdate();
- }
- }
-
- if (error != null)
- {
- mxUtils.alert(error.message);
- }
- });
- okBtn.className = 'geBtn gePrimaryBtn';
- div.appendChild(okBtn);
-
- if (!editorUi.editor.cancelFirst)
- {
- div.appendChild(cancelBtn);
- }
- this.container = div;
- };
- /**
- * Constructs a new export dialog.
- */
- var ExportDialog = function(editorUi)
- {
- var graph = editorUi.editor.graph;
- var bounds = graph.getGraphBounds();
- var scale = graph.view.scale;
-
- var width = Math.ceil(bounds.width / scale);
- var height = Math.ceil(bounds.height / scale);
- var row, td;
-
- var table = document.createElement('table');
- var tbody = document.createElement('tbody');
-
- row = document.createElement('tr');
-
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- td.style.width = '100px';
- mxUtils.write(td, mxResources.get('filename') + ':');
-
- row.appendChild(td);
-
- var nameInput = document.createElement('input');
- nameInput.setAttribute('value', editorUi.editor.getOrCreateFilename());
- nameInput.style.width = '180px';
- td = document.createElement('td');
- td.appendChild(nameInput);
- row.appendChild(td);
-
- tbody.appendChild(row);
-
- row = document.createElement('tr');
-
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- mxUtils.write(td, mxResources.get('format') + ':');
-
- row.appendChild(td);
-
- var imageFormatSelect = document.createElement('select');
- imageFormatSelect.style.width = '180px';
- var pngOption = document.createElement('option');
- pngOption.setAttribute('value', 'png');
- mxUtils.write(pngOption, mxResources.get('formatPng'));
- imageFormatSelect.appendChild(pngOption);
- var gifOption = document.createElement('option');
-
- if (ExportDialog.showGifOption)
- {
- gifOption.setAttribute('value', 'gif');
- mxUtils.write(gifOption, mxResources.get('formatGif'));
- imageFormatSelect.appendChild(gifOption);
- }
-
- var jpgOption = document.createElement('option');
- jpgOption.setAttribute('value', 'jpg');
- mxUtils.write(jpgOption, mxResources.get('formatJpg'));
- imageFormatSelect.appendChild(jpgOption);
- var pdfOption = document.createElement('option');
- pdfOption.setAttribute('value', 'pdf');
- mxUtils.write(pdfOption, mxResources.get('formatPdf'));
- imageFormatSelect.appendChild(pdfOption);
-
- var svgOption = document.createElement('option');
- svgOption.setAttribute('value', 'svg');
- mxUtils.write(svgOption, mxResources.get('formatSvg'));
- imageFormatSelect.appendChild(svgOption);
-
- if (ExportDialog.showXmlOption)
- {
- var xmlOption = document.createElement('option');
- xmlOption.setAttribute('value', 'xml');
- mxUtils.write(xmlOption, mxResources.get('formatXml'));
- imageFormatSelect.appendChild(xmlOption);
- }
- td = document.createElement('td');
- td.appendChild(imageFormatSelect);
- row.appendChild(td);
-
- tbody.appendChild(row);
- row = document.createElement('tr');
-
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- mxUtils.write(td, mxResources.get('backgroundColor') + ':');
-
- row.appendChild(td);
-
- var backgroundInput = document.createElement('input');
- var tmp = (graph.background == null || graph.background == mxConstants.NONE) ? '#ffffff' : graph.background;
- backgroundInput.setAttribute('value', tmp);
- backgroundInput.style.width = '80px';
- var backgroundCheckbox = document.createElement('input');
- backgroundCheckbox.setAttribute('type', 'checkbox');
- backgroundCheckbox.checked = graph.background == null || graph.background == mxConstants.NONE;
- td = document.createElement('td');
- td.appendChild(backgroundInput);
- td.appendChild(backgroundCheckbox);
- mxUtils.write(td, mxResources.get('transparent'));
-
- row.appendChild(td);
-
- tbody.appendChild(row);
-
- row = document.createElement('tr');
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- mxUtils.write(td, mxResources.get('width') + ':');
-
- row.appendChild(td);
-
- var widthInput = document.createElement('input');
- widthInput.setAttribute('value', width);
- widthInput.style.width = '180px';
- td = document.createElement('td');
- td.appendChild(widthInput);
- row.appendChild(td);
- tbody.appendChild(row);
-
- row = document.createElement('tr');
-
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- mxUtils.write(td, mxResources.get('height') + ':');
-
- row.appendChild(td);
-
- var heightInput = document.createElement('input');
- heightInput.setAttribute('value', height);
- heightInput.style.width = '180px';
- td = document.createElement('td');
- td.appendChild(heightInput);
- row.appendChild(td);
- tbody.appendChild(row);
- row = document.createElement('tr');
- td = document.createElement('td');
- td.style.fontSize = '10pt';
- mxUtils.write(td, mxResources.get('borderWidth') + ':');
-
- row.appendChild(td);
-
- var borderInput = document.createElement('input');
- borderInput.setAttribute('value', width);
- borderInput.style.width = '180px';
- borderInput.value = '0';
- td = document.createElement('td');
- td.appendChild(borderInput);
- row.appendChild(td);
- tbody.appendChild(row);
- table.appendChild(tbody);
-
- // Handles changes in the export format
- function formatChanged()
- {
- var name = nameInput.value;
- var dot = name.lastIndexOf('.');
-
- if (dot > 0)
- {
- nameInput.value = name.substring(0, dot + 1) + imageFormatSelect.value;
- }
- else
- {
- nameInput.value = name + '.' + imageFormatSelect.value;
- }
-
- if (imageFormatSelect.value === 'xml')
- {
- widthInput.setAttribute('disabled', 'true');
- heightInput.setAttribute('disabled', 'true');
- borderInput.setAttribute('disabled', 'true');
- }
- else
- {
- widthInput.removeAttribute('disabled');
- heightInput.removeAttribute('disabled');
- borderInput.removeAttribute('disabled');
- }
-
- if (imageFormatSelect.value === 'png' || imageFormatSelect.value === 'svg')
- {
- backgroundCheckbox.removeAttribute('disabled');
- }
- else
- {
- backgroundCheckbox.setAttribute('disabled', 'disabled');
- }
- };
-
- mxEvent.addListener(imageFormatSelect, 'change', formatChanged);
- formatChanged();
-
- function checkValues()
- {
- if (widthInput.value * heightInput.value > MAX_AREA || widthInput.value <= 0)
- {
- widthInput.style.backgroundColor = 'red';
- }
- else
- {
- widthInput.style.backgroundColor = '';
- }
-
- if (widthInput.value * heightInput.value > MAX_AREA || heightInput.value <= 0)
- {
- heightInput.style.backgroundColor = 'red';
- }
- else
- {
- heightInput.style.backgroundColor = '';
- }
- };
- mxEvent.addListener(widthInput, 'change', function()
- {
- if (width > 0)
- {
- heightInput.value = Math.ceil(parseInt(widthInput.value) * height / width);
- }
- else
- {
- heightInput.value = '0';
- }
-
- checkValues();
- });
- mxEvent.addListener(heightInput, 'change', function()
- {
- if (height > 0)
- {
- widthInput.value = Math.ceil(parseInt(heightInput.value) * width / height);
- }
- else
- {
- widthInput.value = '0';
- }
-
- checkValues();
- });
- // Resuable image export instance
- var imgExport = new mxImageExport();
-
- function getSvg()
- {
- var b = Math.max(0, parseInt(borderInput.value)) + 1;
- var scale = parseInt(widthInput.value) / width;
- var bg = null;
-
- if (backgroundInput.value != '' && backgroundInput.value != mxConstants.NONE && !backgroundCheckbox.checked)
- {
- bg = backgroundInput.value;
- }
-
- return graph.getSvg(bg, scale, b);
- };
-
- function getXml()
- {
- return mxUtils.getXml(editorUi.editor.getGraphXml());
- };
- row = document.createElement('tr');
- td = document.createElement('td');
- td.setAttribute('align', 'right');
- td.style.paddingTop = '24px';
- td.colSpan = 2;
-
- var saveBtn = mxUtils.button(mxResources.get('export'), mxUtils.bind(this, function()
- {
- if (parseInt(widthInput.value) <= 0 && parseInt(heightInput.value) <= 0)
- {
- mxUtils.alert(mxResources.get('drawingEmpty'));
- }
- else
- {
- var format = imageFormatSelect.value;
- var name = nameInput.value;
-
- if (format == 'xml')
- {
- editorUi.hideDialog();
- ExportDialog.saveLocalFile(getXml(), name, format);
- }
- else if (format == 'svg')
- {
- var xml = mxUtils.getXml(getSvg());
-
- if (xml.length < MAX_REQUEST_SIZE)
- {
- editorUi.hideDialog();
- ExportDialog.saveLocalFile(xml, name, format);
- }
- else
- {
- mxUtils.alert(mxResources.get('drawingTooLarge'));
- mxUtils.popup(xml);
- }
- }
- else
- {
- var param = null;
- var w = parseInt(widthInput.value) || 0;
- var h = parseInt(heightInput.value) || 0;
- var b = Math.max(0, parseInt(borderInput.value)) + 1;
-
- var exp = ExportDialog.getExportParameter(editorUi, format);
-
- if (typeof exp == 'function')
- {
- param = exp();
- }
- else
- {
- var scale = parseInt(widthInput.value) / width;
- var bounds = graph.getGraphBounds();
- var vs = graph.view.scale;
-
- // New image export
- var xmlDoc = mxUtils.createXmlDocument();
- var root = xmlDoc.createElement('output');
- xmlDoc.appendChild(root);
-
- // Renders graph. Offset will be multiplied with state's scale when painting state.
- var xmlCanvas = new mxXmlCanvas2D(root);
- xmlCanvas.translate(Math.floor((b / scale - bounds.x) / vs), Math.floor((b / scale - bounds.y) / vs));
- xmlCanvas.scale(scale / vs);
- imgExport.drawState(graph.getView().getState(graph.model.root), xmlCanvas);
-
- // Puts request data together
- w = Math.ceil(bounds.width * scale / vs + 2 * b);
- h = Math.ceil(bounds.height * scale / vs + 2 * b);
- param = 'xml=' + encodeURIComponent(mxUtils.getXml(root));
- }
-
- // Requests image if request is valid
- if (param != null && param.length <= MAX_REQUEST_SIZE && w * h < MAX_AREA)
- {
- var bg = '&bg=none';
-
- if (backgroundInput.value != '' && backgroundInput.value != mxConstants.NONE &&
- (format != 'png' || !backgroundCheckbox.checked))
- {
- bg = '&bg=' + backgroundInput.value;
- }
-
- editorUi.hideDialog();
- var data = decodeURIComponent(param.substring(param.indexOf('=') + 1));
- ExportDialog.saveRequest(data, name, format,
- function(newTitle, base64)
- {
- // Base64 not used in this example
- return new mxXmlRequest(EXPORT_URL, 'format=' + format + '&base64=' + (base64 || '0') +
- ((newTitle != null) ? '&filename=' + encodeURIComponent(newTitle) : '') +
- bg + '&w=' + w + '&h=' + h + '&border=' + b + '&' + param);
- });
- }
- else
- {
- mxUtils.alert(mxResources.get('drawingTooLarge'));
- }
- }
- }
- }));
- saveBtn.className = 'geBtn gePrimaryBtn';
-
- var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
- {
- editorUi.hideDialog();
- });
- cancelBtn.className = 'geBtn';
-
- if (editorUi.editor.cancelFirst)
- {
- td.appendChild(cancelBtn);
- td.appendChild(saveBtn);
- }
- else
- {
- td.appendChild(saveBtn);
- td.appendChild(cancelBtn);
- }
- row.appendChild(td);
- tbody.appendChild(row);
- table.appendChild(tbody);
- this.container = table;
- };
- /**
- * Global switches for the export dialog.
- */
- ExportDialog.showGifOption = true;
- /**
- * Global switches for the export dialog.
- */
- ExportDialog.showXmlOption = true;
- /**
- * Hook for getting the export format. Returns null for the default
- * intermediate XML export format or a function that returns the
- * parameter and value to be used in the request in the form
- * key=value, where value should be URL encoded.
- */
- ExportDialog.saveLocalFile = function(data, filename, format)
- {
- new mxXmlRequest(SAVE_URL, 'xml=' + encodeURIComponent(data) + '&filename=' +
- encodeURIComponent(filename) + '&format=' + format).simulate(document, '_blank');
- };
- /**
- * Hook for getting the export format. Returns null for the default
- * intermediate XML export format or a function that returns the
- * parameter and value to be used in the request in the form
- * key=value, where value should be URL encoded.
- */
- ExportDialog.saveRequest = function(data, filename, format, fn)
- {
- fn(filename).simulate(document, '_blank');
- };
- /**
- * Hook for getting the export format. Returns null for the default
- * intermediate XML export format or a function that returns the
- * parameter and value to be used in the request in the form
- * key=value, where value should be URL encoded.
- */
- ExportDialog.getExportParameter = function(ui, format)
- {
- return null;
- };
- /**
- * Constructs a new metadata dialog.
- */
- var EditDataDialog = function(ui, cell)
- {
- var div = document.createElement('div');
- var graph = ui.editor.graph;
- div.style.height = '310px';
- div.style.overflow = 'auto';
-
- var value = graph.getModel().getValue(cell);
-
- // Converts the value to an XML node
- if (!mxUtils.isNode(value))
- {
- var doc = mxUtils.createXmlDocument();
- var obj = doc.createElement('object');
- obj.setAttribute('label', value || '');
- value = obj;
- }
- // Creates the dialog contents
- var form = new mxForm('properties');
- form.table.style.width = '100%';
- form.table.style.paddingRight = '20px';
- var attrs = value.attributes;
- var names = [];
- var texts = [];
- var count = 0;
-
- // FIXME: Fix remove button for quirks mode
- var addRemoveButton = function(text, name)
- {
- text.parentNode.style.marginRight = '12px';
-
- var removeAttr = document.createElement('a');
- var img = mxUtils.createImage(Dialog.prototype.closeImage);
- img.style.height = '9px';
- img.style.fontSize = '9px';
- img.style.marginBottom = '7px';
-
- removeAttr.className = 'geButton';
- removeAttr.setAttribute('title', mxResources.get('delete'));
- removeAttr.style.margin = '0px';
- removeAttr.style.width = '14px';
- removeAttr.style.height = '14px';
- removeAttr.style.fontSize = '14px';
- removeAttr.style.cursor = 'pointer';
- removeAttr.style.marginLeft = '6px';
- removeAttr.appendChild(img);
-
- var removeAttrFn = (function(name)
- {
- return function()
- {
- var count = 0;
-
- for (var j = 0; j < names.length; j++)
- {
- if (names[j] == name)
- {
- texts[j] = null;
- form.table.deleteRow(count);
-
- break;
- }
-
- if (texts[j] != null)
- {
- count++;
- }
- }
- };
- })(name);
-
- mxEvent.addListener(removeAttr, 'click', removeAttrFn);
-
- text.parentNode.style.whiteSpace = 'nowrap';
- text.parentNode.appendChild(removeAttr);
- };
-
- var addTextArea = function(index, name, value)
- {
- names[index] = name;
- texts[index] = form.addTextarea(names[count] + ':', value, 2);
- texts[index].style.width = '100%';
-
- addRemoveButton(texts[index], name);
- };
- for (var i = 0; i < attrs.length; i++)
- {
- if (attrs[i].nodeName != 'label' && attrs[i].nodeName != 'placeholders')
- {
- addTextArea(count, attrs[i].nodeName, attrs[i].nodeValue);
- count++;
- }
- }
-
- div.appendChild(form.table);
- var newProp = document.createElement('div');
- newProp.style.whiteSpace = 'nowrap';
- newProp.style.marginTop = '6px';
- var nameInput = document.createElement('input');
- nameInput.setAttribute('placeholder', mxResources.get('enterPropertyName'));
- nameInput.setAttribute('type', 'text');
- nameInput.setAttribute('size', (mxClient.IS_QUIRKS) ? '18' : '22');
- nameInput.style.marginLeft = '2px';
- newProp.appendChild(nameInput);
- div.appendChild(newProp);
-
- var addBtn = mxUtils.button(mxResources.get('addProperty'), function()
- {
- if (nameInput.value.length > 0)
- {
- var name = nameInput.value;
-
- if (name != null && name.length > 0 && name != 'label' && name != 'placeholders')
- {
- try
- {
- var idx = mxUtils.indexOf(names, name);
-
- if (idx >= 0 && texts[idx] != null)
- {
- texts[idx].focus();
- }
- else
- {
- // Checks if the name is valid
- var clone = value.cloneNode(false);
- clone.setAttribute(name, '');
-
- if (idx >= 0)
- {
- names.splice(idx, 1);
- texts.splice(idx, 1);
- }
- names.push(name);
- var text = form.addTextarea(name + ':', '', 2);
- text.style.width = '100%';
- texts.push(text);
- addRemoveButton(text, name);
- text.focus();
- }
- nameInput.value = '';
- }
- catch (e)
- {
- mxUtils.alert(e);
- }
- }
- }
- else
- {
- mxUtils.alert(mxResources.get('invalidName'));
- }
- });
-
- this.init = function()
- {
- if (texts.length > 0)
- {
- texts[0].focus();
- }
- else
- {
- nameInput.focus();
- }
- };
-
- addBtn.setAttribute('disabled', 'disabled');
- addBtn.style.marginLeft = '10px';
- addBtn.style.width = '144px';
- newProp.appendChild(addBtn);
- var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
- {
- ui.hideDialog.apply(ui, arguments);
- });
- cancelBtn.className = 'geBtn';
-
- var applyBtn = mxUtils.button(mxResources.get('apply'), function()
- {
- try
- {
- ui.hideDialog.apply(ui, arguments);
-
- // Clones and updates the value
- value = value.cloneNode(true);
-
- for (var i = 0; i < names.length; i++)
- {
- if (texts[i] == null)
- {
- value.removeAttribute(names[i]);
- }
- else
- {
- value.setAttribute(names[i], texts[i].value);
- }
- }
-
- // Updates the value of the cell (undoable)
- graph.getModel().setValue(cell, value);
- }
- catch (e)
- {
- mxUtils.alert(e);
- }
- });
- applyBtn.className = 'geBtn gePrimaryBtn';
-
- function updateAddBtn()
- {
- if (nameInput.value.length > 0)
- {
- addBtn.removeAttribute('disabled');
- }
- else
- {
- addBtn.setAttribute('disabled', 'disabled');
- }
- };
- mxEvent.addListener(nameInput, 'keyup', updateAddBtn);
-
- // Catches all changes that don't fire a keyup (such as paste via mouse)
- mxEvent.addListener(nameInput, 'change', updateAddBtn);
-
- var buttons = document.createElement('div');
- buttons.style.marginTop = '18px';
- buttons.style.textAlign = 'right';
-
- if (ui.editor.graph.getModel().isVertex(cell) || ui.editor.graph.getModel().isEdge(cell))
- {
- var replace = document.createElement('span');
- replace.style.marginRight = '10px';
- var input = document.createElement('input');
- input.setAttribute('type', 'checkbox');
- input.style.marginRight = '6px';
-
- if (value.getAttribute('placeholders') == '1')
- {
- input.setAttribute('checked', 'checked');
- input.defaultChecked = true;
- }
-
- mxEvent.addListener(input, 'click', function()
- {
- if (value.getAttribute('placeholders') == '1')
- {
- value.removeAttribute('placeholders');
- }
- else
- {
- value.setAttribute('placeholders', '1');
- }
- });
-
- replace.appendChild(input);
- mxUtils.write(replace, mxResources.get('placeholders'));
-
- if (EditDataDialog.placeholderHelpLink != null)
- {
- var link = document.createElement('a');
- link.setAttribute('href', EditDataDialog.placeholderHelpLink);
- link.setAttribute('title', mxResources.get('help'));
- link.setAttribute('target', '_blank');
- link.style.marginLeft = '10px';
- link.style.cursor = 'help';
-
- var icon = document.createElement('img');
- icon.setAttribute('border', '0');
- icon.setAttribute('valign', 'middle');
- icon.style.marginTop = '-4px';
- icon.setAttribute('src', Editor.helpImage);
- link.appendChild(icon);
-
- replace.appendChild(link);
- }
-
- buttons.appendChild(replace);
- }
-
- if (ui.editor.cancelFirst)
- {
- buttons.appendChild(cancelBtn);
- buttons.appendChild(applyBtn);
- }
- else
- {
- buttons.appendChild(applyBtn);
- buttons.appendChild(cancelBtn);
- }
- div.appendChild(buttons);
- this.container = div;
- };
- /**
- * Optional help link.
- */
- EditDataDialog.placeholderHelpLink = null;
- /**
- * Constructs a new link dialog.
- */
- var LinkDialog = function(editorUi, initialValue, btnLabel, fn)
- {
- var div = document.createElement('div');
- mxUtils.write(div, mxResources.get('editLink') + ':');
-
- var inner = document.createElement('div');
- inner.className = 'geTitle';
- inner.style.backgroundColor = 'transparent';
- inner.style.borderColor = 'transparent';
- inner.style.whiteSpace = 'nowrap';
- inner.style.textOverflow = 'clip';
- inner.style.cursor = 'default';
-
- if (!mxClient.IS_VML)
- {
- inner.style.paddingRight = '20px';
- }
-
- var linkInput = document.createElement('input');
- linkInput.setAttribute('value', initialValue);
- linkInput.setAttribute('placeholder', 'http://www.example.com/');
- linkInput.setAttribute('type', 'text');
- linkInput.style.marginTop = '6px';
- linkInput.style.width = '400px';
- linkInput.style.backgroundImage = 'url(\'' + Dialog.prototype.clearImage + '\')';
- linkInput.style.backgroundRepeat = 'no-repeat';
- linkInput.style.backgroundPosition = '100% 50%';
- linkInput.style.paddingRight = '14px';
-
- var cross = document.createElement('div');
- cross.setAttribute('title', mxResources.get('reset'));
- cross.style.position = 'relative';
- cross.style.left = '-16px';
- cross.style.width = '12px';
- cross.style.height = '14px';
- cross.style.cursor = 'pointer';
- // Workaround for inline-block not supported in IE
- cross.style.display = (mxClient.IS_VML) ? 'inline' : 'inline-block';
- cross.style.top = ((mxClient.IS_VML) ? 0 : 3) + 'px';
-
- // Needed to block event transparency in IE
- cross.style.background = 'url(' + IMAGE_PATH + '/transparent.gif)';
- mxEvent.addListener(cross, 'click', function()
- {
- linkInput.value = '';
- linkInput.focus();
- });
-
- inner.appendChild(linkInput);
- inner.appendChild(cross);
- div.appendChild(inner);
-
- this.init = function()
- {
- linkInput.focus();
-
- if (mxClient.IS_FF || document.documentMode >= 5 || mxClient.IS_QUIRKS)
- {
- linkInput.select();
- }
- else
- {
- document.execCommand('selectAll', false, null);
- }
- };
-
- var btns = document.createElement('div');
- btns.style.marginTop = '18px';
- btns.style.textAlign = 'right';
- mxEvent.addListener(linkInput, 'keypress', function(e)
- {
- if (e.keyCode == 13)
- {
- editorUi.hideDialog();
- fn(linkInput.value);
- }
- });
- var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
- {
- editorUi.hideDialog();
- });
- cancelBtn.className = 'geBtn';
-
- if (editorUi.editor.cancelFirst)
- {
- btns.appendChild(cancelBtn);
- }
-
- var mainBtn = mxUtils.button(btnLabel, function()
- {
- editorUi.hideDialog();
- fn(linkInput.value);
- });
- mainBtn.className = 'geBtn gePrimaryBtn';
- btns.appendChild(mainBtn);
-
- if (!editorUi.editor.cancelFirst)
- {
- btns.appendChild(cancelBtn);
- }
- div.appendChild(btns);
- this.container = div;
- };
- /**
- *
- */
- var OutlineWindow = function(editorUi, x, y, w, h)
- {
- var graph = editorUi.editor.graph;
-
- var div = document.createElement('div');
- div.style.position = 'absolute';
- div.style.width = '100%';
- div.style.height = '100%';
- div.style.border = '1px solid whiteSmoke';
- div.style.overflow = 'hidden';
- this.window = new mxWindow(mxResources.get('outline'), div, x, y, w, h, true, true);
- this.window.destroyOnClose = false;
- this.window.setMaximizable(false);
- this.window.setResizable(true);
- this.window.setClosable(true);
- this.window.setVisible(true);
-
- this.window.setLocation = function(x, y)
- {
- x = Math.max(0, x);
- y = Math.max(0, y);
- mxWindow.prototype.setLocation.apply(this, arguments);
- };
-
- mxEvent.addListener(window, 'resize', mxUtils.bind(this, function()
- {
- var iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
- var ih = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-
- var x = this.window.getX();
- var y = this.window.getY();
-
- if (x + this.window.table.clientWidth > iw)
- {
- x = Math.max(0, iw - this.window.table.clientWidth);
- }
-
- if (y + this.window.table.clientHeight > ih)
- {
- y = Math.max(0, ih - this.window.table.clientHeight);
- }
-
- if (this.window.getX() != x || this.window.getY() != y)
- {
- this.window.setLocation(x, y);
- }
- }));
-
- var outline = editorUi.createOutline(this.window);
- this.window.addListener(mxEvent.RESIZE, mxUtils.bind(this, function()
- {
- outline.update(false);
- outline.outline.sizeDidChange();
- }));
-
- this.window.addListener(mxEvent.SHOW, mxUtils.bind(this, function()
- {
- outline.suspended = false;
- outline.outline.refresh();
- outline.update();
- }));
-
- this.window.addListener(mxEvent.HIDE, mxUtils.bind(this, function()
- {
- outline.suspended = true;
- }));
-
- this.window.addListener(mxEvent.NORMALIZE, mxUtils.bind(this, function()
- {
- outline.suspended = false;
- outline.update();
- }));
-
- this.window.addListener(mxEvent.MINIMIZE, mxUtils.bind(this, function()
- {
- outline.suspended = true;
- }));
- var outlineCreateGraph = outline.createGraph;
- outline.createGraph = function(container)
- {
- var g = outlineCreateGraph.apply(this, arguments);
- g.gridEnabled = false;
- g.pageScale = graph.pageScale;
- g.pageFormat = graph.pageFormat;
- g.background = graph.background;
- g.pageVisible = graph.pageVisible;
-
- var current = mxUtils.getCurrentStyle(graph.container);
- div.style.backgroundColor = current.backgroundColor;
-
- return g;
- };
-
- function update()
- {
- outline.outline.pageScale = graph.pageScale;
- outline.outline.pageFormat = graph.pageFormat;
- outline.outline.pageVisible = graph.pageVisible;
- outline.outline.background = graph.background;
-
- var current = mxUtils.getCurrentStyle(graph.container);
- div.style.backgroundColor = current.backgroundColor;
-
- if (graph.view.backgroundPageShape != null && outline.outline.view.backgroundPageShape != null)
- {
- outline.outline.view.backgroundPageShape.fill = graph.view.backgroundPageShape.fill;
- }
-
- outline.outline.refresh();
- };
- outline.init(div);
- editorUi.editor.addListener('resetGraphView', update);
- editorUi.addListener('pageFormatChanged', update);
- editorUi.addListener('backgroundColorChanged', update);
- editorUi.addListener('backgroundImageChanged', update);
- editorUi.addListener('pageViewChanged', function()
- {
- update();
- outline.update(true);
- });
-
- if (outline.outline.dialect == mxConstants.DIALECT_SVG)
- {
- var zoomInAction = editorUi.actions.get('zoomIn');
- var zoomOutAction = editorUi.actions.get('zoomOut');
-
- mxEvent.addMouseWheelListener(function(evt, up)
- {
- var outlineWheel = false;
- var source = mxEvent.getSource(evt);
-
- while (source != null)
- {
- if (source == outline.outline.view.canvas.ownerSVGElement)
- {
- outlineWheel = true;
- break;
- }
-
- source = source.parentNode;
- }
-
- if (outlineWheel)
- {
- if (up)
- {
- zoomInAction.funct();
- }
- else
- {
- zoomOutAction.funct();
- }
-
- mxEvent.consume(evt);
- }
- });
- }
- };
- /**
- *
- */
- var LayersWindow = function(editorUi, x, y, w, h)
- {
- var graph = editorUi.editor.graph;
-
- var div = document.createElement('div');
- div.style.userSelect = 'none';
- div.style.background = 'whiteSmoke';
- div.style.border = '1px solid whiteSmoke';
- div.style.height = '100%';
- div.style.marginBottom = '10px';
- div.style.overflow = 'auto';
- var tbarHeight = (!EditorUi.compactUi) ? '30px' : '26px';
-
- var listDiv = document.createElement('div')
- listDiv.style.backgroundColor = '#e5e5e5';
- listDiv.style.position = 'absolute';
- listDiv.style.overflow = 'auto';
- listDiv.style.left = '0px';
- listDiv.style.right = '0px';
- listDiv.style.top = '0px';
- listDiv.style.bottom = tbarHeight;
- div.appendChild(listDiv);
-
- var dragSource = null;
- var dropIndex = null;
-
- mxEvent.addListener(div, 'dragover', function(evt)
- {
- evt.dataTransfer.dropEffect = 'move';
- dropIndex = null;
- evt.stopPropagation();
- evt.preventDefault();
- });
- var layerCount = null;
- var selectionLayer = null;
-
- var ldiv = document.createElement('div');
-
- ldiv.className = 'geToolbarContainer';
- ldiv.style.position = 'absolute';
- ldiv.style.bottom = '0px';
- ldiv.style.left = '0px';
- ldiv.style.right = '0px';
- ldiv.style.height = tbarHeight;
- ldiv.style.overflow = 'hidden';
- ldiv.style.padding = (!EditorUi.compactUi) ? '1px' : '4px 0px 3px 0px';
- ldiv.style.backgroundColor = 'whiteSmoke';
- ldiv.style.borderWidth = '1px 0px 0px 0px';
- ldiv.style.borderColor = '#c3c3c3';
- ldiv.style.borderStyle = 'solid';
- ldiv.style.display = 'block';
- ldiv.style.whiteSpace = 'nowrap';
-
- if (mxClient.IS_QUIRKS)
- {
- ldiv.style.filter = 'none';
- }
-
- var link = document.createElement('a');
- link.className = 'geButton';
-
- if (mxClient.IS_QUIRKS)
- {
- link.style.filter = 'none';
- }
-
- var removeLink = link.cloneNode();
- removeLink.innerHTML = '<div class="geSprite geSprite-delete" style="display:inline-block;"></div>';
- mxEvent.addListener(removeLink, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- graph.model.beginUpdate();
- try
- {
- var index = graph.model.root.getIndex(selectionLayer);
- graph.removeCells([selectionLayer], false);
-
- // Creates default layer if no layer exists
- if (graph.model.getChildCount(graph.model.root) == 0)
- {
- graph.model.add(graph.model.root, new mxCell());
- graph.setDefaultParent(null);
- }
- else if (index > 0 && index <= graph.model.getChildCount(graph.model.root))
- {
- graph.setDefaultParent(graph.model.getChildAt(graph.model.root, index - 1));
- }
- else
- {
- graph.setDefaultParent(null);
- }
- }
- finally
- {
- graph.model.endUpdate();
- }
- }
-
- mxEvent.consume(evt);
- });
-
- if (!graph.isEnabled())
- {
- removeLink.className = 'geButton mxDisabled';
- }
-
- ldiv.appendChild(removeLink);
- var insertLink = link.cloneNode();
- insertLink.innerHTML = '<div class="geSprite geSprite-insert" style="display:inline-block;"></div>';
-
- mxEvent.addListener(insertLink, 'click', function(evt)
- {
- if (graph.isEnabled() && !graph.isSelectionEmpty())
- {
- graph.moveCells(graph.getSelectionCells(), 0, 0, false, selectionLayer);
- }
- });
- ldiv.appendChild(insertLink);
-
- var renameLink = link.cloneNode();
- renameLink.innerHTML = '<div class="geSprite geSprite-dots" style="display:inline-block;"></div>';
- renameLink.setAttribute('title', mxResources.get('rename'));
-
- function renameLayer(layer)
- {
- if (graph.isEnabled() && layer != null)
- {
- var dlg = new FilenameDialog(editorUi, layer.value || mxResources.get('background'), mxResources.get('rename'), mxUtils.bind(this, function(newValue)
- {
- if (newValue != null)
- {
- graph.getModel().setValue(layer, newValue);
- }
- }), mxResources.get('enterName'));
- editorUi.showDialog(dlg.container, 300, 100, true, true);
- dlg.init();
- }
- };
-
- mxEvent.addListener(renameLink, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- renameLayer(selectionLayer);
- }
-
- mxEvent.consume(evt);
- });
-
- if (!graph.isEnabled())
- {
- renameLink.className = 'geButton mxDisabled';
- }
-
- ldiv.appendChild(renameLink);
-
- var duplicateLink = link.cloneNode();
- duplicateLink.innerHTML = '<div class="geSprite geSprite-duplicate" style="display:inline-block;"></div>';
-
- mxEvent.addListener(duplicateLink, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- var newCell = null;
- graph.model.beginUpdate();
- try
- {
- newCell = graph.cloneCells([selectionLayer])[0];
- newCell.value = mxResources.get('untitledLayer');
- newCell.setVisible(true);
- newCell = graph.addCell(newCell, graph.model.root);
- graph.setDefaultParent(newCell);
- }
- finally
- {
- graph.model.endUpdate();
- }
- if (newCell != null && !graph.isCellLocked(newCell))
- {
- graph.selectAll(newCell);
- }
- }
- });
-
- if (!graph.isEnabled())
- {
- duplicateLink.className = 'geButton mxDisabled';
- }
- ldiv.appendChild(duplicateLink);
- var addLink = link.cloneNode();
- addLink.innerHTML = '<div class="geSprite geSprite-plus" style="display:inline-block;"></div>';
- addLink.setAttribute('title', mxResources.get('addLayer'));
-
- mxEvent.addListener(addLink, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- graph.model.beginUpdate();
-
- try
- {
- var cell = graph.addCell(new mxCell(mxResources.get('untitledLayer')), graph.model.root);
- graph.setDefaultParent(cell);
- }
- finally
- {
- graph.model.endUpdate();
- }
- }
-
- mxEvent.consume(evt);
- });
-
- if (!graph.isEnabled())
- {
- addLink.className = 'geButton mxDisabled';
- }
-
- ldiv.appendChild(addLink);
- div.appendChild(ldiv);
-
- function refresh()
- {
- layerCount = graph.model.getChildCount(graph.model.root)
- listDiv.innerHTML = '';
- function addLayer(index, label, child, defaultParent)
- {
- var ldiv = document.createElement('div');
- ldiv.className = 'geToolbarContainer';
- ldiv.style.overflow = 'hidden';
- ldiv.style.position = 'relative';
- ldiv.style.padding = '4px';
- ldiv.style.height = '22px';
- ldiv.style.display = 'block';
- ldiv.style.backgroundColor = 'whiteSmoke';
- ldiv.style.borderWidth = '0px 0px 1px 0px';
- ldiv.style.borderColor = '#c3c3c3';
- ldiv.style.borderStyle = 'solid';
- ldiv.style.whiteSpace = 'nowrap';
-
- var left = document.createElement('div');
- left.style.display = 'inline-block';
- left.style.width = '100%';
- left.style.textOverflow = 'ellipsis';
- left.style.overflow = 'hidden';
-
- mxEvent.addListener(ldiv, 'dragover', function(evt)
- {
- evt.dataTransfer.dropEffect = 'move';
- dropIndex = index;
- evt.stopPropagation();
- evt.preventDefault();
- });
-
- mxEvent.addListener(ldiv, 'dragstart', function(evt)
- {
- dragSource = ldiv;
-
- // Workaround for no DnD on DIV in FF
- if (mxClient.IS_FF)
- {
- // LATER: Check what triggers a parse as XML on this in FF after drop
- evt.dataTransfer.setData('Text', '<layer/>');
- }
- });
-
- mxEvent.addListener(ldiv, 'dragend', function(evt)
- {
- if (dragSource != null)
- {
- graph.addCell(child, graph.model.root, dropIndex);
- dragSource = null;
- dropIndex = null;
- }
-
- evt.stopPropagation();
- evt.preventDefault();
- });
- var btn = document.createElement('img');
- btn.setAttribute('draggable', 'false');
- btn.setAttribute('align', 'top');
- btn.setAttribute('border', '0');
- btn.style.cursor = 'pointer';
- btn.style.padding = '4px';
- btn.setAttribute('title', mxResources.get('lockUnlock'));
- var state = graph.view.getState(child);
- var style = (state != null) ? state.style : graph.getCellStyle(child);
- if (mxUtils.getValue(style, 'locked', '0') == '1')
- {
- btn.setAttribute('src', Dialog.prototype.lockedImage);
- }
- else
- {
- btn.setAttribute('src', Dialog.prototype.unlockedImage);
- }
-
- mxEvent.addListener(btn, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- var value = null;
- graph.getModel().beginUpdate();
- try
- {
- value = (mxUtils.getValue(style, 'locked', '0') == '1') ? null : '1';
- graph.setCellStyles('locked', value, [child]);
- }
- finally
- {
- graph.getModel().endUpdate();
- }
- if (value == '1')
- {
- graph.removeSelectionCells(graph.getModel().getDescendants(child));
- }
-
- mxEvent.consume(evt);
- }
- });
- left.appendChild(btn);
- var inp = document.createElement('input');
- inp.setAttribute('type', 'checkbox');
- inp.setAttribute('title', mxResources.get('hideIt', [child.value || mxResources.get('background')]));
- inp.style.marginLeft = '4px';
- inp.style.marginRight = '6px';
- inp.style.marginTop = '4px';
- left.appendChild(inp);
-
- if (!graph.isEnabled())
- {
- inp.setAttribute('disabled', 'disabled');
- }
- if (graph.model.isVisible(child))
- {
- inp.setAttribute('checked', 'checked');
- inp.defaultChecked = true;
- }
- mxEvent.addListener(inp, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- graph.model.setVisible(child, !graph.model.isVisible(child));
- mxEvent.consume(evt);
- }
- });
- mxUtils.write(left, label);
- ldiv.appendChild(left);
-
- if (graph.isEnabled())
- {
- // Fallback if no drag and drop is available
- if (mxClient.IS_TOUCH || mxClient.IS_POINTER || mxClient.IS_VML ||
- (mxClient.IS_IE && document.documentMode < 10))
- {
- var right = document.createElement('div');
- right.style.display = 'block';
- right.style.textAlign = 'right';
- right.style.whiteSpace = 'nowrap';
- right.style.position = 'absolute';
- right.style.right = '6px';
- right.style.top = '6px';
-
- // Poor man's change layer order
- if (index > 0)
- {
- var img2 = document.createElement('a');
-
- img2.setAttribute('title', mxResources.get('toBack'));
-
- img2.className = 'geButton';
- img2.style.cssFloat = 'none';
- img2.innerHTML = '▲';
- img2.style.width = '14px';
- img2.style.height = '14px';
- img2.style.fontSize = '14px';
- img2.style.margin = '0px';
- img2.style.marginTop = '-1px';
- right.appendChild(img2);
-
- mxEvent.addListener(img2, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- graph.addCell(child, graph.model.root, index - 1);
- }
-
- mxEvent.consume(evt);
- });
- }
-
- if (index >= 0 && index < layerCount - 1)
- {
- var img1 = document.createElement('a');
-
- img1.setAttribute('title', mxResources.get('toFront'));
-
- img1.className = 'geButton';
- img1.style.cssFloat = 'none';
- img1.innerHTML = '▼';
- img1.style.width = '14px';
- img1.style.height = '14px';
- img1.style.fontSize = '14px';
- img1.style.margin = '0px';
- img1.style.marginTop = '-1px';
- right.appendChild(img1);
-
- mxEvent.addListener(img1, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- graph.addCell(child, graph.model.root, index + 1);
- }
-
- mxEvent.consume(evt);
- });
- }
-
- ldiv.appendChild(right);
- }
-
- if (mxClient.IS_SVG && (!mxClient.IS_IE || document.documentMode >= 10))
- {
- ldiv.setAttribute('draggable', 'true');
- ldiv.style.cursor = 'move';
- }
- }
- mxEvent.addListener(ldiv, 'dblclick', function(evt)
- {
- var nodeName = mxEvent.getSource(evt).nodeName;
-
- if (nodeName != 'INPUT' && nodeName != 'IMG')
- {
- renameLayer(child);
- mxEvent.consume(evt);
- }
- });
- if (graph.getDefaultParent() == child)
- {
- ldiv.style.background = '#e6eff8';
- selectionLayer = child;
- }
- else
- {
- mxEvent.addListener(ldiv, 'click', function(evt)
- {
- if (graph.isEnabled())
- {
- graph.setDefaultParent(defaultParent);
- graph.view.setCurrentRoot(null);
- refresh();
- }
- });
- }
-
- listDiv.appendChild(ldiv);
- };
-
- // Cannot be moved or deleted
- for (var i = 0; i < layerCount; i++)
- {
- (mxUtils.bind(this, function(child)
- {
- addLayer(i, child.value || mxResources.get('background'), child, child);
- }))(graph.model.getChildAt(graph.model.root, i));
- }
-
- removeLink.setAttribute('title', mxResources.get('removeIt', [selectionLayer.value || mxResources.get('background')]));
- insertLink.setAttribute('title', mxResources.get('moveSelectionTo', [selectionLayer.value || mxResources.get('background')]));
- duplicateLink.setAttribute('title', mxResources.get('duplicateIt', [selectionLayer.value || mxResources.get('background')]));
- renameLink.setAttribute('title', mxResources.get('renameIt', [selectionLayer.value || mxResources.get('background')]));
-
- if (graph.isSelectionEmpty())
- {
- insertLink.className = 'geButton mxDisabled';
- }
- };
- refresh();
- graph.model.addListener(mxEvent.CHANGE, function()
- {
- refresh();
- });
- graph.selectionModel.addListener(mxEvent.CHANGE, function()
- {
- if (graph.isSelectionEmpty())
- {
- insertLink.className = 'geButton mxDisabled';
- }
- else
- {
- insertLink.className = 'geButton';
- }
- });
- this.window = new mxWindow(mxResources.get('layers'), div, x, y, w, h, true, true);
- this.window.destroyOnClose = false;
- this.window.setMaximizable(false);
- this.window.setResizable(true);
- this.window.setClosable(true);
- this.window.setVisible(true);
-
- // Make refresh available via instance
- this.refreshLayers = refresh;
-
- this.window.setLocation = function(x, y)
- {
- x = Math.max(0, x);
- y = Math.max(0, y);
- mxWindow.prototype.setLocation.apply(this, arguments);
- };
-
- mxEvent.addListener(window, 'resize', mxUtils.bind(this, function()
- {
- var iw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
- var ih = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-
- var x = this.window.getX();
- var y = this.window.getY();
-
- if (x + this.window.table.clientWidth > iw)
- {
- x = Math.max(0, iw - this.window.table.clientWidth);
- }
-
- if (y + this.window.table.clientHeight > ih)
- {
- y = Math.max(0, ih - this.window.table.clientHeight);
- }
-
- if (this.window.getX() != x || this.window.getY() != y)
- {
- this.window.setLocation(x, y);
- }
- }));
- };
|