简柏林 / thingskit-scada · Commits

Commit 4ba2e5dc8aeab4e3d778fb66b24450043cfa01d9

Authored by ww
1 parent a5e5359b

chore: 格式化代码

Inline Side-by-side
Showing 1 changed file with 789 additions and 1133 deletions
... ... @@ -9,8 +9,7 @@ window.uiTheme = '';
9 9 * No CSS and resources available in embed mode. Parameters and docs:
10 10 * https://www.drawio.com/doc/faq/embed-html-options
11 11 */
12   -GraphViewer = function(container, xmlNode, graphConfig)
13   -{
  12 +GraphViewer = function (container, xmlNode, graphConfig) {
14 13 this.init(container, xmlNode, graphConfig);
15 14 };
16 15
... ... @@ -119,8 +118,7 @@ GraphViewer.prototype.responsive = false;
119 118 /**
120 119 * Initializes the viewer.
121 120 */
122   -GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
123   -{
  121 +GraphViewer.prototype.init = function (container, xmlNode, graphConfig) {
124 122 this.graphConfig = (graphConfig != null) ? graphConfig : {};
125 123 this.autoFit = (this.graphConfig['auto-fit'] != null) ?
126 124 this.graphConfig['auto-fit'] : this.autoFit;
... ... @@ -155,55 +153,46 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
155 153 this.pageId = this.graphConfig.pageId;
156 154 this.editor = null;
157 155 var self = this;
158   -
159   - if (this.graphConfig['toolbar-position'] == 'inline')
160   - {
  156 +
  157 + if (this.graphConfig['toolbar-position'] == 'inline') {
161 158 this.minHeight += this.toolbarHeight;
162 159 }
163   -
164   - if (xmlNode != null)
165   - {
  160 +
  161 + if (xmlNode != null) {
166 162 this.xmlDocument = xmlNode.ownerDocument;
167 163 this.xmlNode = xmlNode;
168 164 this.xml = mxUtils.getXml(xmlNode);
169 165
170   - if (container != null)
171   - {
172   - var render = mxUtils.bind(this, function()
173   - {
  166 + if (container != null) {
  167 + var render = mxUtils.bind(this, function () {
174 168 this.graph = new Graph(container);
175 169 this.graph.enableFlowAnimation = true;
176 170 this.graph.defaultPageBackgroundColor = 'transparent';
177 171 this.graph.diagramBackgroundColor = 'transparent';
178 172 this.graph.transparentBackground = false;
179   -
180   - if (this.responsive && this.graph.dialect == mxConstants.DIALECT_SVG)
181   - {
  173 +
  174 + if (this.responsive && this.graph.dialect == mxConstants.DIALECT_SVG) {
182 175 var root = this.graph.view.getDrawPane().ownerSVGElement;
183 176 var canvas = this.graph.view.getCanvas();
184   -
185   - if (this.graphConfig.border != null)
186   - {
  177 +
  178 + if (this.graphConfig.border != null) {
187 179 root.style.padding = this.graphConfig.border + 'px';
188 180 }
189   - else if (container.style.padding == '')
190   - {
  181 + else if (container.style.padding == '') {
191 182 root.style.padding = '8px';
192 183 }
193   -
  184 +
194 185 root.style.boxSizing = 'border-box';
195 186 root.style.overflow = 'visible';
196   -
197   - this.graph.fit = function()
198   - {
  187 +
  188 + this.graph.fit = function () {
199 189 // Automatic
200 190 };
201   -
202   - this.graph.sizeDidChange = function()
203   - {
  191 +
  192 + this.graph.sizeDidChange = function () {
204 193 var bounds = this.view.graphBounds;
205 194 var tr = this.view.translate;
206   -
  195 +
207 196 root.setAttribute('viewBox',
208 197 (bounds.x + tr.x - this.panDx) + ' ' +
209 198 (bounds.y + tr.y - this.panDy) + ' ' +
... ... @@ -215,21 +204,18 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
215 204 this.fireEvent(new mxEventObject(mxEvent.SIZE, 'bounds', bounds));
216 205 };
217 206 }
218   -
219   - if (this.graphConfig.move)
220   - {
221   - this.graph.isMoveCellsEvent = function(evt)
222   - {
  207 +
  208 + if (this.graphConfig.move) {
  209 + this.graph.isMoveCellsEvent = function (evt) {
223 210 return true;
224 211 };
225 212 }
226   -
  213 +
227 214 // Adds lightbox and link handling for shapes
228   - if (this.lightboxClickEnabled)
229   - {
  215 + if (this.lightboxClickEnabled) {
230 216 container.style.cursor = 'pointer';
231 217 }
232   -
  218 +
233 219 // Hack for using EditorUi methods on the graph instance
234 220 this.editor = new Editor(true, null, null, this.graph);
235 221 this.editor.editBlankUrl = this.editBlankUrl;
... ... @@ -238,113 +224,94 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
238 224 this.graph.autoExtend = false;
239 225 this.graph.autoScroll = false;
240 226 this.graph.setEnabled(false);
241   -
242   - if (this.graphConfig['toolbar-nohide'] == true)
243   - {
  227 +
  228 + if (this.graphConfig['toolbar-nohide'] == true) {
244 229 this.editor.defaultGraphOverflow = 'visible';
245 230 }
246   -
  231 +
247 232 //Extract graph model from html & svg formats
248 233 this.xmlNode = this.editor.extractGraphModel(this.xmlNode, true);
249   -
250   - if (this.xmlNode != xmlNode)
251   - {
  234 +
  235 + if (this.xmlNode != xmlNode) {
252 236 this.xml = mxUtils.getXml(this.xmlNode);
253 237 this.xmlDocument = this.xmlNode.ownerDocument;
254 238 }
255   -
  239 +
256 240 // Handles relative images
257 241 var self = this;
258   -
259   - this.graph.getImageFromBundles = function(key)
260   - {
  242 +
  243 + this.graph.getImageFromBundles = function (key) {
261 244 return self.getImageUrl(key);
262 245 };
263   -
264   - if (mxClient.IS_SVG)
265   - {
  246 +
  247 + if (mxClient.IS_SVG) {
266 248 // LATER: Add shadow for labels in graph.container (eg. math, NO_FO), scaling
267 249 this.graph.addSvgShadow(this.graph.view.canvas.ownerSVGElement, null, true);
268 250 }
269   -
  251 +
270 252 // Adds page placeholders
271   - if (this.xmlNode.nodeName == 'mxfile')
272   - {
  253 + if (this.xmlNode.nodeName == 'mxfile') {
273 254 var diagrams = this.xmlNode.getElementsByTagName('diagram');
274   -
275   - if (diagrams.length > 0)
276   - {
  255 +
  256 + if (diagrams.length > 0) {
277 257 //Find the page index if the pageId is provided
278   - if (this.pageId != null)
279   - {
280   - for (var i = 0; i < diagrams.length; i++)
281   - {
282   - if (this.pageId == diagrams[i].getAttribute('id'))
283   - {
  258 + if (this.pageId != null) {
  259 + for (var i = 0; i < diagrams.length; i++) {
  260 + if (this.pageId == diagrams[i].getAttribute('id')) {
284 261 this.currentPage = i;
285 262 break;
286 263 }
287 264 }
288 265 }
289   -
  266 +
290 267 var graphGetGlobalVariable = this.graph.getGlobalVariable;
291 268 var self = this;
292   -
293   - this.graph.getGlobalVariable = function(name)
294   - {
  269 +
  270 + this.graph.getGlobalVariable = function (name) {
295 271 var diagram = diagrams[self.currentPage];
296   -
297   - if (name == 'page')
298   - {
  272 +
  273 + if (name == 'page') {
299 274 return diagram.getAttribute('name') || 'Page-' + (self.currentPage + 1);
300 275 }
301   - else if (name == 'pagenumber')
302   - {
  276 + else if (name == 'pagenumber') {
303 277 return self.currentPage + 1;
304 278 }
305   - else if (name == 'pagecount')
306   - {
  279 + else if (name == 'pagecount') {
307 280 return diagrams.length;
308 281 }
309   -
  282 +
310 283 return graphGetGlobalVariable.apply(this, arguments);
311 284 };
312 285 }
313 286 }
314   -
  287 +
315 288 this.diagrams = [];
316 289 var lastXmlNode = null;
317   -
318   - this.selectPage = function(number)
319   - {
320   - if(this.handlingResize)
  290 +
  291 + this.selectPage = function (number) {
  292 + if (this.handlingResize)
321 293 return;
322   -
  294 +
323 295 this.currentPage = mxUtils.mod(number, this.diagrams.length);
324 296 this.updateGraphXml(Editor.parseDiagramNode(this.diagrams[this.currentPage]));
325 297 };
326   -
327   - this.selectPageById = function(id)
328   - {
  298 +
  299 + this.selectPageById = function (id) {
329 300 var index = this.getIndexById(id);
330 301 var found = index >= 0;
331 302
332   - if (found)
333   - {
  303 + if (found) {
334 304 this.selectPage(index);
335 305 }
336   -
  306 +
337 307 return found;
338 308 };
339   -
340   - var update = mxUtils.bind(this, function()
341   - {
342   - if (this.xmlNode == null || this.xmlNode.nodeName != 'mxfile')
343   - {
  309 +
  310 + var update = mxUtils.bind(this, function () {
  311 + if (this.xmlNode == null || this.xmlNode.nodeName != 'mxfile') {
344 312 this.diagrams = [];
345 313 }
346   - if (this.xmlNode != lastXmlNode)
347   - {
  314 + if (this.xmlNode != lastXmlNode) {
348 315 this.diagrams = this.xmlNode.getElementsByTagName('diagram');
349 316 lastXmlNode = this.xmlNode;
350 317 }
... ... @@ -352,23 +319,19 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
352 319
353 320 // Replaces background page reference with SVG
354 321 var graphSetBackgroundImage = this.graph.setBackgroundImage;
355   -
356   - this.graph.setBackgroundImage = function(img)
357   - {
358   - if (img != null && Graph.isPageLink(img.src))
359   - {
  322 +
  323 + this.graph.setBackgroundImage = function (img) {
  324 + if (img != null && Graph.isPageLink(img.src)) {
360 325 var src = img.src;
361 326 var comma = src.indexOf(',');
362   -
363   - if (comma > 0)
364   - {
  327 +
  328 + if (comma > 0) {
365 329 var index = self.getIndexById(src.substring(comma + 1));
366   -
367   - if (index >= 0)
368   - {
  330 +
  331 + if (index >= 0) {
369 332 img = self.getImageForGraphModel(
370 333 Editor.parseDiagramNode(
371   - self.diagrams[index]));
  334 + self.diagrams[index]));
372 335 img.originalSrc = src;
373 336 }
374 337 }
... ... @@ -379,19 +342,17 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
379 342
380 343 // Overrides graph bounds to include background pages
381 344 var graphGetGraphBounds = this.graph.getGraphBounds;
382   -
383   - this.graph.getGraphBounds = function(img)
384   - {
  345 +
  346 + this.graph.getGraphBounds = function (img) {
385 347 var bounds = graphGetGraphBounds.apply(this, arguments);
386 348 var img = this.backgroundImage;
387 349
388 350 // Check img.originalSrc to ignore background
389 351 // images but not background pages
390   - if (img != null)
391   - {
  352 + if (img != null) {
392 353 var t = this.view.translate;
393 354 var s = this.view.scale;
394   -
  355 +
395 356 bounds = mxRectangle.fromRectangle(bounds);
396 357 bounds.add(new mxRectangle(
397 358 (t.x + img.x) * s, (t.y + img.y) * s,
... ... @@ -404,66 +365,57 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
404 365 // LATER: Add event for setGraphXml
405 366 this.addListener('xmlNodeChanged', update);
406 367 update();
407   -
  368 +
408 369 // Passes current page via urlParams global variable
409 370 // to let the parser know which page we're using
410 371 urlParams['page'] = self.currentPage;
411 372 var visible = null;
412 373
413 374 this.graph.getModel().beginUpdate();
414   - try
415   - {
  375 + try {
416 376 // Required for correct parsing of fold parameter
417 377 urlParams['nav'] = (this.graphConfig.nav != false) ? '1' : '0';
418   -
  378 +
419 379 this.editor.setGraphXml(this.xmlNode);
420 380 this.graph.view.scale = this.graphConfig.zoom || 1;
421 381 visible = this.setLayersVisible();
422   -
423   - if (!this.responsive)
424   - {
  382 +
  383 + if (!this.responsive) {
425 384 this.graph.border = (this.graphConfig.border != null) ? this.graphConfig.border : 8;
426 385 }
427 386 }
428   - finally
429   - {
  387 + finally {
430 388 this.graph.getModel().endUpdate();
431 389 }
432   -
  390 +
433 391 // Adds left-button panning only if scrollbars are visible
434   - if (!this.responsive)
435   - {
436   - this.graph.panningHandler.isForcePanningEvent = function(me)
437   - {
  392 + if (!this.responsive) {
  393 + this.graph.panningHandler.isForcePanningEvent = function (me) {
438 394 return !mxEvent.isPopupTrigger(me.getEvent()) &&
439 395 this.graph.container.style.overflow == 'auto';
440 396 };
441   -
442   - this.graph.panningHandler.useLeftButtonForPanning = true;
  397 +
  398 + this.graph.panningHandler.useLeftButtonForPanning = true;
443 399 this.graph.panningHandler.ignoreCell = true;
444 400 this.graph.panningHandler.usePopupTrigger = false;
445 401 this.graph.panningHandler.pinchEnabled = false;
446 402 }
447   -
  403 +
448 404 this.graph.setPanning(false);
449   -
450   - if (this.graphConfig.toolbar != null)
451   - {
  405 +
  406 + if (this.graphConfig.toolbar != null) {
452 407 this.addToolbar();
453 408 }
454   - else if (this.graphConfig.title != null && this.showTitleAsTooltip)
455   - {
  409 + else if (this.graphConfig.title != null && this.showTitleAsTooltip) {
456 410 container.setAttribute('title', this.graphConfig.title);
457 411 }
458   -
459   - if (!this.responsive)
460   - {
  412 +
  413 + if (!this.responsive) {
461 414 this.addSizeHandler();
462 415 }
463 416
464 417 // Crops to visible layers if no layers toolbar button
465   - if (this.showLayers(this.graph) && !this.forceCenter && (!this.layersEnabled || this.autoCrop))
466   - {
  418 + if (this.showLayers(this.graph) && !this.forceCenter && (!this.layersEnabled || this.autoCrop)) {
467 419 this.crop();
468 420 }
469 421
... ... @@ -473,73 +425,61 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
473 425 translate: this.graph.view.translate.clone(),
474 426 scale: this.graph.view.scale
475 427 };
476   -
477   - if (visible != null)
478   - {
  428 +
  429 + if (visible != null) {
479 430 this.setLayersVisible(visible);
480 431 }
481   -
482   - this.graph.customLinkClicked = function(href)
483   - {
484   - try
485   - {
486   - if (Graph.isPageLink(href))
487   - {
  432 +
  433 + this.graph.customLinkClicked = function (href) {
  434 + try {
  435 + if (Graph.isPageLink(href)) {
488 436 var comma = href.indexOf(',');
489   -
490   - if (!self.selectPageById(href.substring(comma + 1)))
491   - {
  437 +
  438 + if (!self.selectPageById(href.substring(comma + 1))) {
492 439 alert(mxResources.get('pageNotFound') || 'Page not found');
493 440 }
494 441 }
495   - else
496   - {
  442 + else {
497 443 this.handleCustomLink(href);
498 444 }
499 445 }
500   - catch (e)
501   - {
  446 + catch (e) {
502 447 alert(e.message);
503 448 }
504   -
  449 +
505 450 return true;
506 451 };
507   -
  452 +
508 453 // Updates origin after tree cell folding
509 454 var graphFoldTreeCell = this.graph.foldTreeCell;
510   -
511   - this.graph.foldTreeCell = mxUtils.bind(this, function()
512   - {
  455 +
  456 + this.graph.foldTreeCell = mxUtils.bind(this, function () {
513 457 this.treeCellFolded = true;
514   -
  458 +
515 459 return graphFoldTreeCell.apply(this.graph, arguments);
516 460 });
517   -
  461 +
518 462 this.fireEvent(new mxEventObject('render'));
519 463 });
520 464
521 465 var MutObs = window.MutationObserver ||
522 466 window.WebKitMutationObserver ||
523 467 window.MozMutationObserver;
524   -
525   - if (this.checkVisibleState && container.offsetWidth == 0 && typeof MutObs !== 'undefined')
526   - {
  468 +
  469 + if (this.checkVisibleState && container.offsetWidth == 0 && typeof MutObs !== 'undefined') {
527 470 // Delayed rendering if inside hidden container and event available
528 471 var par = this.getObservableParent(container);
529   -
530   - var observer = new MutObs(mxUtils.bind(this, function(mutation)
531   - {
532   - if (container.offsetWidth > 0)
533   - {
  472 +
  473 + var observer = new MutObs(mxUtils.bind(this, function (mutation) {
  474 + if (container.offsetWidth > 0) {
534 475 observer.disconnect();
535 476 render();
536 477 }
537 478 }));
538   -
539   - observer.observe(par, {attributes: true});
  479 +
  480 + observer.observe(par, { attributes: true });
540 481 }
541   - else
542   - {
  482 + else {
543 483 // Immediate rendering in all other cases
544 484 render();
545 485 }
... ... @@ -550,43 +490,37 @@ GraphViewer.prototype.init = function(container, xmlNode, graphConfig)
550 490 /**
551 491 *
552 492 */
553   -GraphViewer.prototype.getObservableParent = function(container)
554   -{
  493 +GraphViewer.prototype.getObservableParent = function (container) {
555 494 var node = container.parentNode;
556   -
  495 +
557 496 while (node != document.body && node.parentNode != null &&
558   - mxUtils.getCurrentStyle(node).display !== 'none')
559   - {
  497 + mxUtils.getCurrentStyle(node).display !== 'none') {
560 498 node = node.parentNode;
561 499 }
562   -
  500 +
563 501 return node;
564 502 };
565 503
566 504 /**
567 505 *
568 506 */
569   -GraphViewer.prototype.getImageUrl = function(url)
570   -{
  507 +GraphViewer.prototype.getImageUrl = function (url) {
571 508 if (url != null && url.substring(0, 7) != 'http://' &&
572   - url.substring(0, 8) != 'https://' && url.substring(0, 10) != 'data:image')
573   - {
574   - if (url.charAt(0) == '/')
575   - {
  509 + url.substring(0, 8) != 'https://' && url.substring(0, 10) != 'data:image') {
  510 + if (url.charAt(0) == '/') {
576 511 url = url.substring(1, url.length);
577 512 }
578   -
  513 +
579 514 url = this.imageBaseUrl + url;
580 515 }
581   -
  516 +
582 517 return url;
583 518 };
584 519
585 520 /**
586 521 *
587 522 */
588   -GraphViewer.prototype.getImageForGraphModel = function(node)
589   -{
  523 +GraphViewer.prototype.getImageForGraphModel = function (node) {
590 524 var graph = Graph.createOffscreenGraph(this.graph.getStylesheet());
591 525 graph.getGlobalVariable = this.graph.getGlobalVariable;
592 526 document.body.appendChild(graph.container);
... ... @@ -594,7 +528,7 @@ GraphViewer.prototype.getImageForGraphModel = function(node)
594 528 var codec = new mxCodec(node.ownerDocument);
595 529 var root = codec.decode(node).root;
596 530 graph.model.setRoot(root);
597   -
  531 +
598 532 var svgRoot = graph.getSvg();
599 533 var bounds = graph.getGraphBounds();
600 534 document.body.removeChild(graph.container);
... ... @@ -606,14 +540,10 @@ GraphViewer.prototype.getImageForGraphModel = function(node)
606 540 /**
607 541 *
608 542 */
609   -GraphViewer.prototype.getIndexById = function(id)
610   -{
611   - if (this.diagrams != null)
612   - {
613   - for (var i = 0; i < this.diagrams.length; i++)
614   - {
615   - if (this.diagrams[i].getAttribute('id') == id)
616   - {
  543 +GraphViewer.prototype.getIndexById = function (id) {
  544 + if (this.diagrams != null) {
  545 + for (var i = 0; i < this.diagrams.length; i++) {
  546 + if (this.diagrams[i].getAttribute('id') == id) {
617 547 return i;
618 548 }
619 549 }
... ... @@ -625,15 +555,14 @@ GraphViewer.prototype.getIndexById = function(id)
625 555 /**
626 556 *
627 557 */
628   -GraphViewer.prototype.setXmlNode = function(xmlNode)
629   -{
  558 +GraphViewer.prototype.setXmlNode = function (xmlNode) {
630 559 //Extract graph model from html & svg formats
631 560 xmlNode = this.editor.extractGraphModel(xmlNode, true);
632 561
633 562 this.xmlDocument = xmlNode.ownerDocument;
634 563 this.xml = mxUtils.getXml(xmlNode);
635 564 this.xmlNode = xmlNode;
636   -
  565 +
637 566 this.updateGraphXml(xmlNode);
638 567 this.fireEvent(new mxEventObject('xmlNodeChanged'));
639 568 };
... ... @@ -641,23 +570,20 @@ GraphViewer.prototype.setXmlNode = function(xmlNode)
641 570 /**
642 571 *
643 572 */
644   -GraphViewer.prototype.setFileNode = function(xmlNode)
645   -{
646   - if (this.xmlNode == null)
647   - {
  573 +GraphViewer.prototype.setFileNode = function (xmlNode) {
  574 + if (this.xmlNode == null) {
648 575 this.xmlDocument = xmlNode.ownerDocument;
649 576 this.xml = mxUtils.getXml(xmlNode);
650 577 this.xmlNode = xmlNode;
651 578 }
652   -
  579 +
653 580 this.setGraphXml(xmlNode);
654 581 };
655 582
656 583 /**
657 584 *
658 585 */
659   -GraphViewer.prototype.updateGraphXml = function(xmlNode)
660   -{
  586 +GraphViewer.prototype.updateGraphXml = function (xmlNode) {
661 587 this.setGraphXml(xmlNode);
662 588 this.fireEvent(new mxEventObject('graphChanged'));
663 589 };
... ... @@ -665,81 +591,68 @@ GraphViewer.prototype.updateGraphXml = function(xmlNode)
665 591 /**
666 592 *
667 593 */
668   -GraphViewer.prototype.setLayersVisible = function(visible)
669   -{
  594 +GraphViewer.prototype.setLayersVisible = function (visible) {
670 595 var allVisible = true;
671   -
672   - if (!this.autoOrigin)
673   - {
  596 +
  597 + if (!this.autoOrigin) {
674 598 var result = [];
675 599 var model = this.graph.getModel();
676   -
  600 +
677 601 model.beginUpdate();
678   - try
679   - {
680   - for (var i = 0; i < model.getChildCount(model.root); i++)
681   - {
  602 + try {
  603 + for (var i = 0; i < model.getChildCount(model.root); i++) {
682 604 var layer = model.getChildAt(model.root, i);
683 605 allVisible = allVisible && model.isVisible(layer);
684 606 result.push(model.isVisible(layer));
685 607 model.setVisible(layer, (visible != null) ? visible[i] : true);
686 608 }
687 609 }
688   - finally
689   - {
  610 + finally {
690 611 model.endUpdate();
691 612 }
692 613 }
693   -
  614 +
694 615 return (allVisible) ? null : result;
695 616 };
696 617
697 618 /**
698 619 *
699 620 */
700   -GraphViewer.prototype.setGraphXml = function(xmlNode)
701   -{
702   - if (this.graph != null)
703   - {
  621 +GraphViewer.prototype.setGraphXml = function (xmlNode) {
  622 + if (this.graph != null) {
704 623 this.graph.view.translate = new mxPoint();
705 624 this.graph.view.scale = 1;
706 625 var visible = null;
707   -
  626 +
708 627 this.graph.getModel().beginUpdate();
709   - try
710   - {
  628 + try {
711 629 this.graph.getModel().clear();
712 630 this.editor.setGraphXml(xmlNode);
713 631 visible = this.setLayersVisible(true);
714 632 }
715   - finally
716   - {
  633 + finally {
717 634 this.graph.getModel().endUpdate();
718 635 }
719   -
720   - if (!this.responsive)
721   - {
  636 +
  637 + if (!this.responsive) {
722 638 // Restores initial CSS state
723   - if (this.widthIsEmpty)
724   - {
  639 + if (this.widthIsEmpty) {
725 640 this.graph.container.style.width = '';
726 641 this.graph.container.style.height = '';
727 642 }
728   - else
729   - {
  643 + else {
730 644 this.graph.container.style.width = this.initialWidth;
731 645 }
732   -
  646 +
733 647 this.positionGraph();
734 648 }
735   -
  649 +
736 650 this.graph.initialViewState = {
737 651 translate: this.graph.view.translate.clone(),
738 652 scale: this.graph.view.scale
739 653 };
740   -
741   - if (visible)
742   - {
  654 +
  655 + if (visible) {
743 656 this.setLayersVisible(visible);
744 657 }
745 658 }
... ... @@ -748,88 +661,72 @@ GraphViewer.prototype.setGraphXml = function(xmlNode)
748 661 /**
749 662 *
750 663 */
751   -GraphViewer.prototype.addSizeHandler = function()
752   -{
  664 +GraphViewer.prototype.addSizeHandler = function () {
753 665 var container = this.graph.container;
754 666 var bounds = this.graph.getGraphBounds();
755 667 var updatingOverflow = false;
756 668
757   - if (this.graphConfig['toolbar-nohide'] != true)
758   - {
  669 + if (this.graphConfig['toolbar-nohide'] != true) {
759 670 container.style.overflow = 'hidden';
760 671 }
761   - else
762   - {
  672 + else {
763 673 container.style.overflow = 'visible';
764 674 }
765   -
766   - var updateOverflow = mxUtils.bind(this, function()
767   - {
768   - if (!updatingOverflow)
769   - {
  675 +
  676 + var updateOverflow = mxUtils.bind(this, function () {
  677 + if (!updatingOverflow) {
770 678 updatingOverflow = true;
771 679 var tmp = this.graph.getGraphBounds();
772   -
773   - if (this.graphConfig['toolbar-nohide'] != true)
774   - {
  680 +
  681 + if (this.graphConfig['toolbar-nohide'] != true) {
775 682 // Shows scrollbars if graph is larger than available width
776   - if (tmp.width + 2 * this.graph.border > container.offsetWidth - 2)
777   - {
  683 + if (tmp.width + 2 * this.graph.border > container.offsetWidth - 2) {
778 684 container.style.overflow = 'auto';
779 685 }
780   - else
781   - {
  686 + else {
782 687 container.style.overflow = 'hidden';
783 688 }
784 689 }
785   - else
786   - {
  690 + else {
787 691 container.style.overflow = 'visible';
788 692 }
789 693
790   - if (this.toolbar != null && this.graphConfig['toolbar-nohide'] != true)
791   - {
  694 + if (this.toolbar != null && this.graphConfig['toolbar-nohide'] != true) {
792 695 var r = container.getBoundingClientRect();
793   -
  696 +
794 697 // Workaround for position:relative set in ResizeSensor
795 698 var origin = mxUtils.getScrollOrigin(document.body)
796 699 var b = (document.body.style.position === 'relative') ?
797 700 document.body.getBoundingClientRect() :
798   - {left: -origin.x, top: -origin.y};
799   - r = {left: r.left - b.left, top: r.top - b.top, bottom: r.bottom - b.top, right: r.right - b.left};
800   -
  701 + { left: -origin.x, top: -origin.y };
  702 + r = { left: r.left - b.left, top: r.top - b.top, bottom: r.bottom - b.top, right: r.right - b.left };
  703 +
801 704 this.toolbar.style.left = r.left + 'px';
802   -
803   - if (this.graphConfig['toolbar-position'] == 'bottom')
804   - {
  705 +
  706 + if (this.graphConfig['toolbar-position'] == 'bottom') {
805 707 this.toolbar.style.top = r.bottom - 1 + 'px';
806 708 }
807   - else
808   - {
809   - if (this.graphConfig['toolbar-position'] != 'inline')
810   - {
  709 + else {
  710 + if (this.graphConfig['toolbar-position'] != 'inline') {
811 711 this.toolbar.style.width = Math.max(this.minToolbarWidth, container.offsetWidth) + 'px';
812 712 this.toolbar.style.top = r.top + 1 + 'px';
813 713 }
814   - else
815   - {
  714 + else {
816 715 this.toolbar.style.top = r.top + 'px';
817 716 }
818 717 }
819 718 }
820   - else if (this.toolbar != null)
821   - {
  719 + else if (this.toolbar != null) {
822 720 this.toolbar.style.width = Math.max(this.minToolbarWidth, container.offsetWidth) + 'px';
823 721 }
824 722
825 723 // Updates origin after tree cell folding
826   - if (this.treeCellFolded)
827   - {
  724 + if (this.treeCellFolded) {
828 725 this.treeCellFolded = false;
829 726 this.positionGraph(this.graph.view.translate);
830 727 this.graph.initialViewState.translate = this.graph.view.translate.clone();
831 728 }
832   -
  729 +
833 730 updatingOverflow = false;
834 731 }
835 732 });
... ... @@ -837,35 +734,30 @@ GraphViewer.prototype.addSizeHandler = function()
837 734 var lastOffsetWidth = null;
838 735 var cachedOffsetWidth = null;
839 736 this.handlingResize = false;
840   -
  737 +
841 738 // Installs function on instance
842   - this.fitGraph = mxUtils.bind(this, function(maxScale)
843   - {
  739 + this.fitGraph = mxUtils.bind(this, function (maxScale) {
844 740 var cachedOffsetWidth = container.offsetWidth;
845   -
846   - if (cachedOffsetWidth != lastOffsetWidth && !this.handlingResize)
847   - {
  741 +
  742 + if (cachedOffsetWidth != lastOffsetWidth && !this.handlingResize) {
848 743 this.handlingResize = true;
849   -
  744 +
850 745 // Hides scrollbars to force update of translate
851   - if (container.style.overflow == 'auto')
852   - {
  746 + if (container.style.overflow == 'auto') {
853 747 container.style.overflow = 'hidden';
854 748 }
855   -
  749 +
856 750 this.graph.maxFitScale = (maxScale != null) ? maxScale : (this.graphConfig.zoom ||
857 751 ((this.allowZoomIn) ? null : 1));
858 752 this.graph.fit(null, null, null, null, null, true);
859 753
860   - if (this.center || !(this.graphConfig.resize != false || container.style.height == ''))
861   - {
  754 + if (this.center || !(this.graphConfig.resize != false || container.style.height == '')) {
862 755 this.graph.center();
863   - }
864   -
  756 + }
  757 +
865 758 this.graph.maxFitScale = null;
866   -
867   - if (this.graphConfig.resize != false || container.style.height == '')
868   - {
  759 +
  760 + if (this.graphConfig.resize != false || container.style.height == '') {
869 761 this.updateContainerHeight(container, Math.max(this.minHeight,
870 762 this.graph.getGraphBounds().height +
871 763 2 * this.graph.border + 1));
... ... @@ -875,136 +767,112 @@ GraphViewer.prototype.addSizeHandler = function()
875 767 translate: this.graph.view.translate.clone(),
876 768 scale: this.graph.view.scale
877 769 };
878   -
  770 +
879 771 lastOffsetWidth = cachedOffsetWidth;
880   -
  772 +
881 773 // Workaround for fit triggering scrollbars triggering doResize (infinite loop)
882   - window.setTimeout(mxUtils.bind(this, function()
883   - {
  774 + window.setTimeout(mxUtils.bind(this, function () {
884 775 this.handlingResize = false;
885 776 }), 0);
886 777 }
887 778 });
888 779
889   - if (GraphViewer.useResizeSensor)
890   - {
891   - if (document.documentMode <= 9)
892   - {
  780 + if (GraphViewer.useResizeSensor) {
  781 + if (document.documentMode <= 9) {
893 782 mxEvent.addListener(window, 'resize', updateOverflow);
894 783 this.graph.addListener('size', updateOverflow);
895 784 }
896   - else
897   - {
  785 + else {
898 786 new ResizeSensor(this.graph.container, updateOverflow);
899 787 }
900 788 }
901   -
902   - if (this.graphConfig.resize || ((this.zoomEnabled || !this.autoFit) && this.graphConfig.resize != false))
903   - {
  789 +
  790 + if (this.graphConfig.resize || ((this.zoomEnabled || !this.autoFit) && this.graphConfig.resize != false)) {
904 791 this.graph.minimumContainerSize = new mxRectangle(0, 0, this.minWidth, this.minHeight);
905 792 this.graph.resizeContainer = true;
906 793 }
907   - else
908   - {
  794 + else {
909 795 // Sets initial size for responsive diagram to stop at actual size
910   - if (this.widthIsEmpty && !(container.style.height != '' && this.autoFit))
911   - {
  796 + if (this.widthIsEmpty && !(container.style.height != '' && this.autoFit)) {
912 797 this.updateContainerWidth(container, bounds.width + 2 * this.graph.border);
913 798 }
914   -
915   - if (this.graphConfig.resize != false || container.style.height == '')
916   - {
  799 +
  800 + if (this.graphConfig.resize != false || container.style.height == '') {
917 801 this.updateContainerHeight(container, Math.max(this.minHeight, bounds.height + 2 * this.graph.border + 1));
918 802 }
919 803
920   - if (!this.zoomEnabled && this.autoFit)
921   - {
  804 + if (!this.zoomEnabled && this.autoFit) {
922 805 var lastOffsetWidth = null;
923 806 var scheduledResize = null;
924 807 var cachedOffsetWidth = null;
925   -
926   - var doResize = mxUtils.bind(this, function()
927   - {
  808 +
  809 + var doResize = mxUtils.bind(this, function () {
928 810 window.clearTimeout(scheduledResize);
929   -
930   - if (!this.handlingResize)
931   - {
  811 +
  812 + if (!this.handlingResize) {
932 813 scheduledResize = window.setTimeout(mxUtils.bind(this, this.fitGraph), 100);
933 814 }
934 815 });
935   -
936   - if (GraphViewer.useResizeSensor)
937   - {
938   - if (document.documentMode <= 9)
939   - {
  816 +
  817 + if (GraphViewer.useResizeSensor) {
  818 + if (document.documentMode <= 9) {
940 819 mxEvent.addListener(window, 'resize', doResize);
941 820 }
942   - else
943   - {
  821 + else {
944 822 new ResizeSensor(this.graph.container, doResize);
945 823 }
946 824 }
947 825 }
948   - else if (!(document.documentMode <= 9))
949   - {
  826 + else if (!(document.documentMode <= 9)) {
950 827 this.graph.addListener('size', updateOverflow);
951 828 }
952 829 }
953 830
954   - var positionGraph = mxUtils.bind(this, function(origin)
955   - {
  831 + var positionGraph = mxUtils.bind(this, function (origin) {
956 832 // Allocates maximum width while setting initial view state
957 833 var prev = container.style.minWidth;
958   -
959   - if (this.widthIsEmpty)
960   - {
  834 +
  835 + if (this.widthIsEmpty) {
961 836 container.style.minWidth = '100%';
962 837 }
963   -
  838 +
964 839 var maxHeight = (this.graphConfig['max-height'] != null) ? this.graphConfig['max-height'] :
965 840 ((container.style.height != '' && this.autoFit) ? container.offsetHeight : undefined);
966   -
  841 +
967 842 if (container.offsetWidth > 0 && origin == null && this.allowZoomOut && (this.allowZoomIn ||
968 843 bounds.width + 2 * this.graph.border > container.offsetWidth ||
969   - bounds.height + 2 * this.graph.border > maxHeight))
970   - {
  844 + bounds.height + 2 * this.graph.border > maxHeight)) {
971 845 var maxScale = null;
972 846
973   - if (maxHeight != null && bounds.height + 2 * this.graph.border > maxHeight - 2)
974   - {
  847 + if (maxHeight != null && bounds.height + 2 * this.graph.border > maxHeight - 2) {
975 848 maxScale = (maxHeight - 2 * this.graph.border - 2) / bounds.height;
976 849 }
977 850
978 851 this.fitGraph(maxScale);
979 852 }
980   - else if (!this.widthIsEmpty && origin == null && !(this.graphConfig.resize != false || container.style.height == ''))
981   - {
  853 + else if (!this.widthIsEmpty && origin == null && !(this.graphConfig.resize != false || container.style.height == '')) {
982 854 this.graph.center((!this.widthIsEmpty || bounds.width < this.minWidth) && this.graphConfig.resize != true);
983 855 }
984   - else
985   - {
  856 + else {
986 857 origin = (origin != null) ? origin : new mxPoint();
987   -
  858 +
988 859 this.graph.view.setTranslate(Math.floor(this.graph.border - bounds.x / this.graph.view.scale) + origin.x,
989 860 Math.floor(this.graph.border - bounds.y / this.graph.view.scale) + origin.y);
990 861 lastOffsetWidth = container.offsetWidth;
991 862 }
992   -
  863 +
993 864 container.style.minWidth = prev
994 865 });
995 866
996   - if (document.documentMode == 8)
997   - {
  867 + if (document.documentMode == 8) {
998 868 window.setTimeout(positionGraph, 0);
999 869 }
1000   - else
1001   - {
  870 + else {
1002 871 positionGraph();
1003 872 }
1004 873
1005 874 // Installs function on instance
1006   - this.positionGraph = function(origin)
1007   - {
  875 + this.positionGraph = function (origin) {
1008 876 bounds = this.graph.getGraphBounds();
1009 877 lastOffsetWidth = null;
1010 878 positionGraph(origin);
... ... @@ -1014,8 +882,7 @@ GraphViewer.prototype.addSizeHandler = function()
1014 882 /**
1015 883 * Moves the origin of the graph to the top, right corner.
1016 884 */
1017   -GraphViewer.prototype.crop = function()
1018   -{
  885 +GraphViewer.prototype.crop = function () {
1019 886 var graph = this.graph;
1020 887 var bounds = graph.getGraphBounds();
1021 888 var border = graph.border;
... ... @@ -1029,19 +896,16 @@ GraphViewer.prototype.crop = function()
1029 896 /**
1030 897 *
1031 898 */
1032   -GraphViewer.prototype.updateContainerWidth = function(container, width)
1033   -{
  899 +GraphViewer.prototype.updateContainerWidth = function (container, width) {
1034 900 container.style.width = width + 'px';
1035 901 };
1036 902
1037 903 /**
1038 904 *
1039 905 */
1040   -GraphViewer.prototype.updateContainerHeight = function(container, height)
1041   -{
  906 +GraphViewer.prototype.updateContainerHeight = function (container, height) {
1042 907 if (this.forceCenter || this.zoomEnabled || !this.autoFit || document.compatMode == 'BackCompat' ||
1043   - document.documentMode == 8)
1044   - {
  908 + document.documentMode == 8) {
1045 909 container.style.height = height + 'px';
1046 910 }
1047 911 };
... ... @@ -1049,76 +913,62 @@ GraphViewer.prototype.updateContainerHeight = function(container, height)
1049 913 /**
1050 914 * Shows the
1051 915 */
1052   -GraphViewer.prototype.showLayers = function(graph, sourceGraph)
1053   -{
  916 +GraphViewer.prototype.showLayers = function (graph, sourceGraph) {
1054 917 var layers = this.graphConfig.layers;
1055 918 var idx = (layers != null && layers.length > 0) ? layers.split(' ') : [];
1056 919 var layerIds = this.graphConfig.layerIds;
1057 920 var hasLayerIds = layerIds != null && layerIds.length > 0;
1058 921 var result = false;
1059   -
1060   - if (idx.length > 0 || hasLayerIds || sourceGraph != null)
1061   - {
  922 +
  923 + if (idx.length > 0 || hasLayerIds || sourceGraph != null) {
1062 924 var source = (sourceGraph != null) ? sourceGraph.getModel() : null;
1063 925 var model = graph.getModel();
1064 926 model.beginUpdate();
1065   -
1066   - try
1067   - {
  927 +
  928 + try {
1068 929 var childCount = model.getChildCount(model.root);
1069   -
  930 +
1070 931 // Shows specified layers (eg. 0 1 3)
1071   - if (source == null)
1072   - {
  932 + if (source == null) {
1073 933 var layersFound = false, visibleLayers = {};
1074   -
1075   - if (hasLayerIds)
1076   - {
1077   - for (var i = 0; i < layerIds.length; i++)
1078   - {
  934 +
  935 + if (hasLayerIds) {
  936 + for (var i = 0; i < layerIds.length; i++) {
1079 937 var layer = model.getCell(layerIds[i]);
1080   -
1081   - if (layer != null)
1082   - {
  938 +
  939 + if (layer != null) {
1083 940 layersFound = true;
1084 941 visibleLayers[layer.id] = true;
1085 942 }
1086 943 }
1087 944 }
1088   - else
1089   - {
1090   - for (var i = 0; i < idx.length; i++)
1091   - {
  945 + else {
  946 + for (var i = 0; i < idx.length; i++) {
1092 947 var layer = model.getChildAt(model.root, parseInt(idx[i]));
1093 948
1094   - if (layer != null)
1095   - {
  949 + if (layer != null) {
1096 950 layersFound = true;
1097 951 visibleLayers[layer.id] = true;
1098 952 }
1099 953 }
1100 954 }
1101   -
  955 +
1102 956 //To prevent hiding all layers, only apply if the specified layers are found
1103 957 //This prevents incorrect settings from showing an empty viewer
1104   - for (var i = 0; layersFound && i < childCount; i++)
1105   - {
  958 + for (var i = 0; layersFound && i < childCount; i++) {
1106 959 var layer = model.getChildAt(model.root, i);
1107 960 model.setVisible(layer, visibleLayers[layer.id] || false);
1108 961 }
1109 962 }
1110   - else
1111   - {
  963 + else {
1112 964 // Match visible layers in source graph
1113   - for (var i = 0; i < childCount; i++)
1114   - {
  965 + for (var i = 0; i < childCount; i++) {
1115 966 model.setVisible(model.getChildAt(model.root, i),
1116 967 source.isVisible(source.getChildAt(source.root, i)));
1117 968 }
1118 969 }
1119 970 }
1120   - finally
1121   - {
  971 + finally {
1122 972 model.endUpdate();
1123 973 }
1124 974
... ... @@ -1131,16 +981,13 @@ GraphViewer.prototype.showLayers = function(graph, sourceGraph)
1131 981 /**
1132 982 *
1133 983 */
1134   -GraphViewer.prototype.addToolbar = function()
1135   -{
  984 +GraphViewer.prototype.addToolbar = function () {
1136 985 var container = this.graph.container;
1137   -
1138   - if (this.graphConfig['toolbar-position'] == 'bottom')
1139   - {
  986 +
  987 + if (this.graphConfig['toolbar-position'] == 'bottom') {
1140 988 container.style.marginBottom = this.toolbarHeight + 'px';
1141 989 }
1142   - else if (this.graphConfig['toolbar-position'] != 'inline')
1143   - {
  990 + else if (this.graphConfig['toolbar-position'] != 'inline') {
1144 991 container.style.marginTop = this.toolbarHeight + 'px';
1145 992 }
1146 993
... ... @@ -1155,145 +1002,122 @@ GraphViewer.prototype.addToolbar = function()
1155 1002 toolbar.style.backgroundColor = '#eee';
1156 1003 toolbar.style.height = this.toolbarHeight + 'px';
1157 1004 this.toolbar = toolbar;
1158   -
1159   - if (this.graphConfig['toolbar-position'] == 'inline')
1160   - {
  1005 +
  1006 + if (this.graphConfig['toolbar-position'] == 'inline') {
1161 1007 mxUtils.setPrefixedStyle(toolbar.style, 'transition', 'opacity 100ms ease-in-out');
1162 1008 mxUtils.setOpacity(toolbar, 30);
1163   -
  1009 +
1164 1010 // Changes toolbar opacity on hover
1165 1011 var fadeThread = null;
1166 1012 var fadeThread2 = null;
1167   -
1168   - var fadeOut = mxUtils.bind(this, function(delay)
1169   - {
1170   - if (fadeThread != null)
1171   - {
  1013 +
  1014 + var fadeOut = mxUtils.bind(this, function (delay) {
  1015 + if (fadeThread != null) {
1172 1016 window.clearTimeout(fadeThread);
1173 1017 fadeThead = null;
1174 1018 }
1175   -
1176   - if (fadeThread2 != null)
1177   - {
  1019 +
  1020 + if (fadeThread2 != null) {
1178 1021 window.clearTimeout(fadeThread2);
1179 1022 fadeThead2 = null;
1180 1023 }
1181   -
1182   - fadeThread = window.setTimeout(mxUtils.bind(this, function()
1183   - {
1184   - mxUtils.setOpacity(toolbar, 0);
  1024 +
  1025 + fadeThread = window.setTimeout(mxUtils.bind(this, function () {
  1026 + mxUtils.setOpacity(toolbar, 0);
1185 1027 fadeThread = null;
1186   -
1187   - fadeThread2 = window.setTimeout(mxUtils.bind(this, function()
1188   - {
  1028 +
  1029 + fadeThread2 = window.setTimeout(mxUtils.bind(this, function () {
1189 1030 toolbar.style.display = 'none';
1190 1031 fadeThread2 = null;
1191 1032 }), 100);
1192 1033 }), delay || 200);
1193 1034 });
1194   -
1195   - var fadeIn = mxUtils.bind(this, function(opacity)
1196   - {
1197   - if (fadeThread != null)
1198   - {
  1035 +
  1036 + var fadeIn = mxUtils.bind(this, function (opacity) {
  1037 + if (fadeThread != null) {
1199 1038 window.clearTimeout(fadeThread);
1200 1039 fadeThead = null;
1201 1040 }
1202   -
1203   - if (fadeThread2 != null)
1204   - {
  1041 +
  1042 + if (fadeThread2 != null) {
1205 1043 window.clearTimeout(fadeThread2);
1206 1044 fadeThead2 = null;
1207 1045 }
1208   -
  1046 +
1209 1047 toolbar.style.display = '';
1210   - mxUtils.setOpacity(toolbar, opacity || 30);
  1048 + mxUtils.setOpacity(toolbar, opacity || 30);
1211 1049 });
1212   -
1213   - mxEvent.addListener(this.graph.container, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', mxUtils.bind(this, function(evt)
1214   - {
1215   - if (!mxEvent.isTouchEvent(evt))
1216   - {
  1050 +
  1051 + mxEvent.addListener(this.graph.container, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', mxUtils.bind(this, function (evt) {
  1052 + if (!mxEvent.isTouchEvent(evt)) {
1217 1053 fadeIn(30);
1218 1054 fadeOut();
1219 1055 }
1220 1056 }));
1221   -
1222   - mxEvent.addListener(toolbar, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', function(evt)
1223   - {
  1057 +
  1058 + mxEvent.addListener(toolbar, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', function (evt) {
1224 1059 mxEvent.consume(evt);
1225 1060 });
1226   -
1227   - mxEvent.addListener(toolbar, 'mouseenter', mxUtils.bind(this, function(evt)
1228   - {
  1061 +
  1062 + mxEvent.addListener(toolbar, 'mouseenter', mxUtils.bind(this, function (evt) {
1229 1063 fadeIn(100);
1230 1064 }));
1231 1065
1232   - mxEvent.addListener(toolbar, 'mousemove', mxUtils.bind(this, function(evt)
1233   - {
  1066 + mxEvent.addListener(toolbar, 'mousemove', mxUtils.bind(this, function (evt) {
1234 1067 fadeIn(100);
1235 1068 mxEvent.consume(evt);
1236 1069 }));
1237 1070
1238   - mxEvent.addListener(toolbar, 'mouseleave', mxUtils.bind(this, function(evt)
1239   - {
1240   - if (!mxEvent.isTouchEvent(evt))
1241   - {
  1071 + mxEvent.addListener(toolbar, 'mouseleave', mxUtils.bind(this, function (evt) {
  1072 + if (!mxEvent.isTouchEvent(evt)) {
1242 1073 fadeIn(30);
1243 1074 }
1244 1075 }));
1245   -
  1076 +
1246 1077 // Shows/hides toolbar for touch devices
1247 1078 var graph = this.graph;
1248 1079 var tol = graph.getTolerance();
1249 1080
1250 1081 graph.addMouseListener(
1251   - {
1252   - startX: 0,
1253   - startY: 0,
1254   - scrollLeft: 0,
1255   - scrollTop: 0,
1256   - mouseDown: function(sender, me)
1257   - {
1258   - this.startX = me.getGraphX();
1259   - this.startY = me.getGraphY();
1260   - this.scrollLeft = graph.container.scrollLeft;
1261   - this.scrollTop = graph.container.scrollTop;
1262   - },
1263   - mouseMove: function(sender, me) {},
1264   - mouseUp: function(sender, me)
1265   - {
1266   - if (mxEvent.isTouchEvent(me.getEvent()))
1267   - {
1268   - if ((Math.abs(this.scrollLeft - graph.container.scrollLeft) < tol &&
1269   - Math.abs(this.scrollTop - graph.container.scrollTop) < tol) &&
1270   - (Math.abs(this.startX - me.getGraphX()) < tol &&
1271   - Math.abs(this.startY - me.getGraphY()) < tol))
1272   - {
1273   - if (parseFloat(toolbar.style.opacity || 0) > 0)
1274   - {
1275   - fadeOut();
1276   - }
1277   - else
1278   - {
1279   - fadeIn(30);
1280   - }
  1082 + {
  1083 + startX: 0,
  1084 + startY: 0,
  1085 + scrollLeft: 0,
  1086 + scrollTop: 0,
  1087 + mouseDown: function (sender, me) {
  1088 + this.startX = me.getGraphX();
  1089 + this.startY = me.getGraphY();
  1090 + this.scrollLeft = graph.container.scrollLeft;
  1091 + this.scrollTop = graph.container.scrollTop;
  1092 + },
  1093 + mouseMove: function (sender, me) { },
  1094 + mouseUp: function (sender, me) {
  1095 + if (mxEvent.isTouchEvent(me.getEvent())) {
  1096 + if ((Math.abs(this.scrollLeft - graph.container.scrollLeft) < tol &&
  1097 + Math.abs(this.scrollTop - graph.container.scrollTop) < tol) &&
  1098 + (Math.abs(this.startX - me.getGraphX()) < tol &&
  1099 + Math.abs(this.startY - me.getGraphY()) < tol)) {
  1100 + if (parseFloat(toolbar.style.opacity || 0) > 0) {
  1101 + fadeOut();
  1102 + }
  1103 + else {
  1104 + fadeIn(30);
  1105 + }
  1106 + }
1281 1107 }
1282   - }
1283   - }
1284   - });
  1108 + }
  1109 + });
1285 1110 }
1286   -
  1111 +
1287 1112 var tokens = this.toolbarItems;
1288 1113 var buttonCount = 0;
1289   -
1290   - var addButton = mxUtils.bind(this, function(fn, imgSrc, tip, enabled)
1291   - {
  1114 +
  1115 + var addButton = mxUtils.bind(this, function (fn, imgSrc, tip, enabled) {
1292 1116 var a = this.createToolbarButton(fn, imgSrc, tip, enabled);
1293 1117 toolbar.appendChild(a);
1294   -
  1118 +
1295 1119 buttonCount++;
1296   -
  1120 +
1297 1121 return a;
1298 1122 });
1299 1123
... ... @@ -1301,20 +1125,17 @@ GraphViewer.prototype.addToolbar = function()
1301 1125 var tagsComponent = null;
1302 1126 var tagsDialog = null;
1303 1127 var pageInfo = null;
1304   -
1305   - for (var i = 0; i < tokens.length; i++)
1306   - {
  1128 +
  1129 + for (var i = 0; i < tokens.length; i++) {
1307 1130 var token = tokens[i];
1308   -
1309   - if (token == 'pages')
1310   - {
  1131 +
  1132 + if (token == 'pages') {
1311 1133 pageInfo = container.ownerDocument.createElement('div');
1312 1134 pageInfo.style.cssText = 'display:inline-block;position:relative;top:5px;padding:0 4px 0 4px;' +
1313 1135 'vertical-align:top;font-family:Helvetica,Arial;font-size:12px;;cursor:default;'
1314 1136 mxUtils.setOpacity(pageInfo, 70);
1315   -
1316   - var prevButton = addButton(mxUtils.bind(this, function()
1317   - {
  1137 +
  1138 + var prevButton = addButton(mxUtils.bind(this, function () {
1318 1139 this.selectPage(this.currentPage - 1);
1319 1140 }), Editor.previousImage, mxResources.get('previousPage') || 'Previous Page');
1320 1141
... ... @@ -1323,79 +1144,63 @@ GraphViewer.prototype.addToolbar = function()
1323 1144 prevButton.style.paddingRight = '0px';
1324 1145 toolbar.appendChild(pageInfo);
1325 1146
1326   - var nextButton = addButton(mxUtils.bind(this, function()
1327   - {
  1147 + var nextButton = addButton(mxUtils.bind(this, function () {
1328 1148 this.selectPage(this.currentPage + 1);
1329 1149 }), Editor.nextImage, mxResources.get('nextPage') || 'Next Page');
1330   -
  1150 +
1331 1151 nextButton.style.paddingLeft = '0px';
1332 1152 nextButton.style.paddingRight = '0px';
1333   -
  1153 +
1334 1154 var lastXmlNode = null;
1335   -
1336   - var update = mxUtils.bind(this, function()
1337   - {
  1155 +
  1156 + var update = mxUtils.bind(this, function () {
1338 1157 pageInfo.innerText = '';
1339 1158 mxUtils.write(pageInfo, (this.currentPage + 1) + ' / ' + this.diagrams.length);
1340 1159 pageInfo.style.display = (this.diagrams.length > 1) ? 'inline-block' : 'none';
1341 1160 prevButton.style.display = pageInfo.style.display;
1342 1161 nextButton.style.display = pageInfo.style.display;
1343 1162 });
1344   -
  1163 +
1345 1164 // LATER: Add event for setGraphXml
1346 1165 this.addListener('graphChanged', update);
1347 1166 update();
1348 1167 }
1349   - else if (token == 'zoom')
1350   - {
1351   - if (this.zoomEnabled)
1352   - {
1353   - addButton(mxUtils.bind(this, function()
1354   - {
  1168 + else if (token == 'zoom') {
  1169 + if (this.zoomEnabled) {
  1170 + addButton(mxUtils.bind(this, function () {
1355 1171 this.graph.zoomOut();
1356 1172 }), Editor.zoomOutImage, mxResources.get('zoomOut') || 'Zoom Out');
1357 1173
1358   - addButton(mxUtils.bind(this, function()
1359   - {
  1174 + addButton(mxUtils.bind(this, function () {
1360 1175 this.graph.zoomIn();
1361 1176 }), Editor.zoomInImage, mxResources.get('zoomIn') || 'Zoom In');
1362 1177
1363   - addButton(mxUtils.bind(this, function()
1364   - {
  1178 + addButton(mxUtils.bind(this, function () {
1365 1179 this.graph.view.scaleAndTranslate(this.graph.initialViewState.scale,
1366 1180 this.graph.initialViewState.translate.x,
1367 1181 this.graph.initialViewState.translate.y);
1368 1182 }), Editor.zoomFitImage, mxResources.get('fit') || 'Fit');
1369 1183 }
1370 1184 }
1371   - else if (token == 'layers')
1372   - {
1373   - if (this.layersEnabled)
1374   - {
  1185 + else if (token == 'layers') {
  1186 + if (this.layersEnabled) {
1375 1187 var model = this.graph.getModel();
1376 1188
1377   - var layersButton = addButton(mxUtils.bind(this, function(evt)
1378   - {
1379   - if (layersDialog != null)
1380   - {
  1189 + var layersButton = addButton(mxUtils.bind(this, function (evt) {
  1190 + if (layersDialog != null) {
1381 1191 layersDialog.parentNode.removeChild(layersDialog);
1382 1192 layersDialog = null;
1383 1193 }
1384   - else
1385   - {
1386   - layersDialog = this.graph.createLayersDialog(mxUtils.bind(this, function()
1387   - {
1388   - if (this.autoCrop)
1389   - {
  1194 + else {
  1195 + layersDialog = this.graph.createLayersDialog(mxUtils.bind(this, function () {
  1196 + if (this.autoCrop) {
1390 1197 this.crop();
1391 1198 }
1392   - else if (this.autoOrigin)
1393   - {
  1199 + else if (this.autoOrigin) {
1394 1200 var bounds = this.graph.getGraphBounds();
1395 1201 var v = this.graph.view;
1396   -
1397   - if (bounds.x < 0 || bounds.y < 0)
1398   - {
  1202 +
  1203 + if (bounds.x < 0 || bounds.y < 0) {
1399 1204 this.crop();
1400 1205 this.graph.originalViewState = this.graph.initialViewState;
1401 1206
... ... @@ -1406,12 +1211,11 @@ GraphViewer.prototype.addToolbar = function()
1406 1211 }
1407 1212 else if (this.graph.originalViewState != null &&
1408 1213 bounds.x / v.scale + this.graph.originalViewState.translate.x - v.translate.x > 0 &&
1409   - bounds.y / v.scale + this.graph.originalViewState.translate.y - v.translate.y > 0)
1410   - {
  1214 + bounds.y / v.scale + this.graph.originalViewState.translate.y - v.translate.y > 0) {
1411 1215 v.setTranslate(this.graph.originalViewState.translate.x,
1412 1216 this.graph.originalViewState.translate.y);
1413 1217 this.graph.originalViewState = null;
1414   -
  1218 +
1415 1219 this.graph.initialViewState = {
1416 1220 translate: v.translate.clone(),
1417 1221 scale: v.scale
... ... @@ -1419,13 +1223,12 @@ GraphViewer.prototype.addToolbar = function()
1419 1223 }
1420 1224 }
1421 1225 }));
1422   -
1423   - mxEvent.addListener(layersDialog, 'mouseleave', function()
1424   - {
  1226 +
  1227 + mxEvent.addListener(layersDialog, 'mouseleave', function () {
1425 1228 layersDialog.parentNode.removeChild(layersDialog);
1426 1229 layersDialog = null;
1427 1230 });
1428   -
  1231 +
1429 1232 var r = layersButton.getBoundingClientRect();
1430 1233
1431 1234 layersDialog.style.width = '140px';
... ... @@ -1441,29 +1244,23 @@ GraphViewer.prototype.addToolbar = function()
1441 1244 var origin = mxUtils.getDocumentScrollOrigin(document);
1442 1245 layersDialog.style.left = origin.x + r.left - 1 + 'px';
1443 1246 layersDialog.style.top = origin.y + r.bottom - 2 + 'px';
1444   -
  1247 +
1445 1248 document.body.appendChild(layersDialog);
1446 1249 }
1447 1250 }), Editor.layersImage, mxResources.get('layers') || 'Layers');
1448   -
1449   - model.addListener(mxEvent.CHANGE, function()
1450   - {
  1251 +
  1252 + model.addListener(mxEvent.CHANGE, function () {
1451 1253 layersButton.style.display = (model.getChildCount(model.root) > 1) ? 'inline-block' : 'none';
1452 1254 });
1453   -
  1255 +
1454 1256 layersButton.style.display = (model.getChildCount(model.root) > 1) ? 'inline-block' : 'none';
1455 1257 }
1456 1258 }
1457   - else if (token == 'tags')
1458   - {
1459   - if (this.tagsEnabled)
1460   - {
1461   - var tagsButton = addButton(mxUtils.bind(this, function(evt)
1462   - {
1463   - if (tagsComponent == null)
1464   - {
1465   - tagsComponent = this.graph.createTagsDialog(mxUtils.bind(this, function()
1466   - {
  1259 + else if (token == 'tags') {
  1260 + if (this.tagsEnabled) {
  1261 + var tagsButton = addButton(mxUtils.bind(this, function (evt) {
  1262 + if (tagsComponent == null) {
  1263 + tagsComponent = this.graph.createTagsDialog(mxUtils.bind(this, function () {
1467 1264 return true;
1468 1265 }));
1469 1266
... ... @@ -1483,24 +1280,20 @@ GraphViewer.prototype.addToolbar = function()
1483 1280 mxUtils.setOpacity(tagsComponent.div, 80);
1484 1281 }
1485 1282
1486   - if (tagsDialog != null)
1487   - {
  1283 + if (tagsDialog != null) {
1488 1284 tagsDialog.parentNode.removeChild(tagsDialog);
1489 1285 tagsDialog = null;
1490 1286 }
1491   - else
1492   - {
  1287 + else {
1493 1288 tagsDialog = tagsComponent.div;
1494   -
1495   - mxEvent.addListener(tagsDialog, 'mouseleave', function()
1496   - {
1497   - if (tagsDialog != null)
1498   - {
  1289 +
  1290 + mxEvent.addListener(tagsDialog, 'mouseleave', function () {
  1291 + if (tagsDialog != null) {
1499 1292 tagsDialog.parentNode.removeChild(tagsDialog);
1500 1293 tagsDialog = null;
1501 1294 }
1502 1295 });
1503   -
  1296 +
1504 1297 var r = tagsButton.getBoundingClientRect();
1505 1298 var origin = mxUtils.getDocumentScrollOrigin(document);
1506 1299 tagsDialog.style.left = origin.x + r.left - 1 + 'px';
... ... @@ -1510,159 +1303,131 @@ GraphViewer.prototype.addToolbar = function()
1510 1303 }
1511 1304 }), Editor.tagsImage, mxResources.get('tags') || 'Tags');
1512 1305
1513   - model.addListener(mxEvent.CHANGE, mxUtils.bind(this, function()
1514   - {
  1306 + model.addListener(mxEvent.CHANGE, mxUtils.bind(this, function () {
1515 1307 tagsButton.style.display = (this.graph.getAllTags().length > 0) ? 'inline-block' : 'none';
1516 1308 }));
1517   -
  1309 +
1518 1310 tagsButton.style.display = (this.graph.getAllTags().length > 0) ? 'inline-block' : 'none';
1519 1311 }
1520 1312 }
1521   - else if (token == 'lightbox')
1522   - {
1523   - if (this.lightboxEnabled)
1524   - {
1525   - addButton(mxUtils.bind(this, function()
1526   - {
  1313 + else if (token == 'lightbox') {
  1314 + if (this.lightboxEnabled) {
  1315 + addButton(mxUtils.bind(this, function () {
1527 1316 this.showLightbox();
1528 1317 }), Editor.fullscreenImage, (mxResources.get('fullscreen') || 'Fullscreen'));
1529 1318 }
1530 1319 }
1531   - else if (this.graphConfig['toolbar-buttons'] != null)
1532   - {
  1320 + else if (this.graphConfig['toolbar-buttons'] != null) {
1533 1321 var def = this.graphConfig['toolbar-buttons'][token];
1534   -
1535   - if (def != null)
1536   - {
1537   - def.elem = addButton((def.enabled == null || def.enabled) ? def.handler : function() {},
  1322 +
  1323 + if (def != null) {
  1324 + def.elem = addButton((def.enabled == null || def.enabled) ? def.handler : function () { },
1538 1325 def.image, def.title, def.enabled);
1539 1326 }
1540 1327 }
1541 1328 }
1542   -
1543   - if (this.graph.minimumContainerSize != null)
1544   - {
  1329 +
  1330 + if (this.graph.minimumContainerSize != null) {
1545 1331 this.graph.minimumContainerSize.width = buttonCount * 34;
1546 1332 }
1547   -
1548   - if (this.graphConfig.title != null)
1549   - {
  1333 +
  1334 + if (this.graphConfig.title != null) {
1550 1335 var filename = container.ownerDocument.createElement('div');
1551 1336 filename.style.cssText = 'display:inline-block;position:relative;padding:3px 6px 0 6px;' +
1552 1337 'vertical-align:top;font-family:Helvetica,Arial;font-size:12px;top:4px;cursor:default;'
1553 1338 filename.setAttribute('title', this.graphConfig.title);
1554 1339 mxUtils.write(filename, this.graphConfig.title);
1555 1340 mxUtils.setOpacity(filename, 70);
1556   -
  1341 +
1557 1342 toolbar.appendChild(filename);
1558 1343 this.filename = filename;
1559 1344 }
1560   -
  1345 +
1561 1346 this.minToolbarWidth = buttonCount * 34;
1562 1347 var prevBorder = container.style.border;
1563   -
1564   - var enter = mxUtils.bind(this, function()
1565   - {
  1348 +
  1349 + var enter = mxUtils.bind(this, function () {
1566 1350 toolbar.style.width = (this.graphConfig['toolbar-position'] == 'inline') ? 'auto' :
1567 1351 Math.max(this.minToolbarWidth, container.offsetWidth) + 'px';
1568 1352 toolbar.style.border = '1px solid #d0d0d0';
1569 1353
1570   - if (this.graphConfig['toolbar-nohide'] != true)
1571   - {
  1354 + if (this.graphConfig['toolbar-nohide'] != true) {
1572 1355 var r = container.getBoundingClientRect();
1573   -
  1356 +
1574 1357 // Workaround for position:relative set in ResizeSensor
1575 1358 var origin = mxUtils.getScrollOrigin(document.body)
1576 1359 var b = (document.body.style.position === 'relative') ? document.body.getBoundingClientRect() :
1577   - {left: -origin.x, top: -origin.y};
1578   - r = {left: r.left - b.left, top: r.top - b.top, bottom: r.bottom - b.top, right: r.right - b.left};
1579   -
  1360 + { left: -origin.x, top: -origin.y };
  1361 + r = { left: r.left - b.left, top: r.top - b.top, bottom: r.bottom - b.top, right: r.right - b.left };
  1362 +
1580 1363 toolbar.style.left = r.left + 'px';
1581 1364
1582   - if (this.graphConfig['toolbar-position'] == 'bottom')
1583   - {
  1365 + if (this.graphConfig['toolbar-position'] == 'bottom') {
1584 1366 toolbar.style.top = r.bottom - 1 + 'px';
1585 1367 }
1586   - else
1587   - {
1588   - if (this.graphConfig['toolbar-position'] != 'inline')
1589   - {
  1368 + else {
  1369 + if (this.graphConfig['toolbar-position'] != 'inline') {
1590 1370 toolbar.style.marginTop = -this.toolbarHeight + 'px';
1591 1371 toolbar.style.top = r.top + 1 + 'px';
1592 1372 }
1593   - else
1594   - {
  1373 + else {
1595 1374 toolbar.style.top = r.top + 'px';
1596 1375 }
1597 1376 }
1598   -
1599   - if (prevBorder == '1px solid transparent')
1600   - {
  1377 +
  1378 + if (prevBorder == '1px solid transparent') {
1601 1379 container.style.border = '1px solid #d0d0d0';
1602 1380 }
1603   -
  1381 +
1604 1382 document.body.appendChild(toolbar);
1605 1383
1606   - var hideToolbar = mxUtils.bind(this, function()
1607   - {
1608   - if (toolbar.parentNode != null)
1609   - {
  1384 + var hideToolbar = mxUtils.bind(this, function () {
  1385 + if (toolbar.parentNode != null) {
1610 1386 toolbar.parentNode.removeChild(toolbar);
1611 1387 }
1612   -
1613   - if (layersDialog != null)
1614   - {
  1388 +
  1389 + if (layersDialog != null) {
1615 1390 layersDialog.parentNode.removeChild(layersDialog);
1616 1391 layersDialog = null;
1617 1392 }
1618   -
  1393 +
1619 1394 container.style.border = prevBorder;
1620 1395 });
1621   -
1622   - mxEvent.addListener(document, 'mousemove', function(evt)
1623   - {
  1396 +
  1397 + mxEvent.addListener(document, 'mousemove', function (evt) {
1624 1398 var source = mxEvent.getSource(evt);
1625   -
1626   - while (source != null)
1627   - {
1628   - if (source == container || source == toolbar || source == layersDialog)
1629   - {
  1399 +
  1400 + while (source != null) {
  1401 + if (source == container || source == toolbar || source == layersDialog) {
1630 1402 return;
1631 1403 }
1632   -
  1404 +
1633 1405 source = source.parentNode;
1634 1406 }
1635   -
  1407 +
1636 1408 hideToolbar();
1637 1409 });
1638   -
1639   - mxEvent.addListener(document.body, 'mouseleave', function(evt)
1640   - {
  1410 +
  1411 + mxEvent.addListener(document.body, 'mouseleave', function (evt) {
1641 1412 hideToolbar();
1642 1413 });
1643 1414 }
1644   - else
1645   - {
  1415 + else {
1646 1416 toolbar.style.top = -this.toolbarHeight + 'px';
1647 1417 container.appendChild(toolbar);
1648 1418 }
1649 1419 });
1650   -
1651   - if (this.graphConfig['toolbar-nohide'] != true)
1652   - {
  1420 +
  1421 + if (this.graphConfig['toolbar-nohide'] != true) {
1653 1422 mxEvent.addListener(container, 'mouseenter', enter);
1654 1423 }
1655   - else
1656   - {
  1424 + else {
1657 1425 enter();
1658 1426 }
1659   -
1660   - if (this.responsive && typeof ResizeObserver !== 'undefined')
1661   - {
1662   - new ResizeObserver(function()
1663   - {
1664   - if (toolbar.parentNode != null)
1665   - {
  1427 +
  1428 + if (this.responsive && typeof ResizeObserver !== 'undefined') {
  1429 + new ResizeObserver(function () {
  1430 + if (toolbar.parentNode != null) {
1666 1431 enter();
1667 1432 }
1668 1433 }).observe(container)
... ... @@ -1672,60 +1437,51 @@ GraphViewer.prototype.addToolbar = function()
1672 1437 /**
1673 1438 *
1674 1439 */
1675   -GraphViewer.prototype.createToolbarButton = function(fn, imgSrc, tip, enabled)
1676   -{
  1440 +GraphViewer.prototype.createToolbarButton = function (fn, imgSrc, tip, enabled) {
1677 1441 var a = document.createElement('div');
1678 1442 a.style.borderRight = '1px solid #d0d0d0';
1679 1443 a.style.padding = '3px 6px 3px 6px';
1680 1444 mxEvent.addListener(a, 'click', fn);
1681 1445
1682   - if (tip != null)
1683   - {
  1446 + if (tip != null) {
1684 1447 a.setAttribute('title', tip);
1685 1448 }
1686   -
  1449 +
1687 1450 a.style.display = 'inline-block';
1688 1451 var img = document.createElement('img');
1689 1452 img.setAttribute('border', '0');
1690 1453 img.setAttribute('src', imgSrc);
1691 1454 img.style.width = '18px';
1692 1455
1693   - if (enabled == null || enabled)
1694   - {
1695   - mxEvent.addListener(a, 'mouseenter', function()
1696   - {
  1456 + if (enabled == null || enabled) {
  1457 + mxEvent.addListener(a, 'mouseenter', function () {
1697 1458 a.style.backgroundColor = '#ddd';
1698 1459 });
1699   -
1700   - mxEvent.addListener(a, 'mouseleave', function()
1701   - {
  1460 +
  1461 + mxEvent.addListener(a, 'mouseleave', function () {
1702 1462 a.style.backgroundColor = '#eee';
1703 1463 });
1704 1464
1705 1465 mxUtils.setOpacity(img, 60);
1706 1466 a.style.cursor = 'pointer';
1707 1467 }
1708   - else
1709   - {
  1468 + else {
1710 1469 mxUtils.setOpacity(a, 30);
1711 1470 }
1712   -
  1471 +
1713 1472 a.appendChild(img);
1714 1473
1715 1474 return a;
1716 1475 };
1717 1476
1718   -GraphViewer.prototype.disableButton = function(token)
1719   -{
1720   - var def = this.graphConfig['toolbar-buttons']? this.graphConfig['toolbar-buttons'][token] : null;
1721   -
1722   - if (def != null)
1723   - {
  1477 +GraphViewer.prototype.disableButton = function (token) {
  1478 + var def = this.graphConfig['toolbar-buttons'] ? this.graphConfig['toolbar-buttons'][token] : null;
  1479 +
  1480 + if (def != null) {
1724 1481 mxUtils.setOpacity(def.elem, 30);
1725 1482 mxEvent.removeListener(def.elem, 'click', def.handler);
1726 1483 //Workaround to stop highlighting the disabled button
1727   - mxEvent.addListener(def.elem, 'mouseenter', function()
1728   - {
  1484 + mxEvent.addListener(def.elem, 'mouseenter', function () {
1729 1485 def.elem.style.backgroundColor = '#eee';
1730 1486 });
1731 1487 }
... ... @@ -1734,58 +1490,46 @@ GraphViewer.prototype.disableButton = function(token)
1734 1490 /**
1735 1491 * Adds event handler for links and lightbox.
1736 1492 */
1737   -GraphViewer.prototype.addClickHandler = function(graph, ui)
1738   -{
  1493 +GraphViewer.prototype.addClickHandler = function (graph, ui) {
1739 1494 graph.linkPolicy = this.graphConfig.target || graph.linkPolicy;
1740 1495
1741   - graph.addClickHandler(this.graphConfig.highlight, mxUtils.bind(this, function(evt, href)
1742   - {
1743   - if (href == null)
1744   - {
  1496 + graph.addClickHandler(this.graphConfig.highlight, mxUtils.bind(this, function (evt, href) {
  1497 + if (href == null) {
1745 1498 var source = mxEvent.getSource(evt);
1746   -
1747   - while (source != graph.container && source != null && href == null)
1748   - {
1749   - if (source.nodeName.toLowerCase() == 'a')
1750   - {
  1499 +
  1500 + while (source != graph.container && source != null && href == null) {
  1501 + if (source.nodeName.toLowerCase() == 'a') {
1751 1502 href = source.getAttribute('href');
1752 1503 }
1753   -
  1504 +
1754 1505 source = source.parentNode;
1755 1506 }
1756 1507 }
1757   -
1758   - if (ui != null)
1759   - {
1760   - if (href == null || graph.isCustomLink(href))
1761   - {
  1508 +
  1509 + if (ui != null) {
  1510 + if (href == null || graph.isCustomLink(href)) {
1762 1511 mxEvent.consume(evt);
1763 1512 }
1764 1513 else if (!graph.isExternalProtocol(href) &&
1765   - !graph.isBlankLink(href))
1766   - {
  1514 + !graph.isBlankLink(href)) {
1767 1515 // Hides lightbox if any links are clicked
1768 1516 // Async handling needed for anchors to work
1769   - window.setTimeout(function()
1770   - {
  1517 + window.setTimeout(function () {
1771 1518 ui.destroy();
1772 1519 }, 0);
1773 1520 }
1774 1521 }
1775 1522 else if (href != null && ui == null && graph.isCustomLink(href) &&
1776 1523 (mxEvent.isTouchEvent(evt) || !mxEvent.isPopupTrigger(evt)) &&
1777   - graph.customLinkClicked(href))
1778   - {
  1524 + graph.customLinkClicked(href)) {
1779 1525 // Workaround for text selection in Firefox on Windows
1780 1526 mxUtils.clearSelection();
1781 1527 mxEvent.consume(evt);
1782 1528 }
1783   - }), mxUtils.bind(this, function(evt)
1784   - {
  1529 + }), mxUtils.bind(this, function (evt) {
1785 1530 if (ui == null && this.lightboxClickEnabled &&
1786 1531 (!mxEvent.isTouchEvent(evt) ||
1787   - this.toolbarItems.length == 0))
1788   - {
  1532 + this.toolbarItems.length == 0)) {
1789 1533 this.showLightbox();
1790 1534 }
1791 1535 }));
... ... @@ -1794,90 +1538,72 @@ GraphViewer.prototype.addClickHandler = function(graph, ui)
1794 1538 /**
1795 1539 * Adds the given array of stencils to avoid dynamic loading of shapes.
1796 1540 */
1797   -GraphViewer.prototype.showLightbox = function(editable, closable, target)
1798   -{
1799   - if (this.graphConfig.lightbox == 'open' || window.self !== window.top)
1800   - {
1801   - if (this.lightboxWindow != null && !this.lightboxWindow.closed)
1802   - {
  1541 +GraphViewer.prototype.showLightbox = function (editable, closable, target) {
  1542 + if (this.graphConfig.lightbox == 'open' || window.self !== window.top) {
  1543 + if (this.lightboxWindow != null && !this.lightboxWindow.closed) {
1803 1544 this.lightboxWindow.focus();
1804 1545 }
1805   - else
1806   - {
  1546 + else {
1807 1547 editable = (editable != null) ? editable :
1808 1548 ((this.graphConfig.editable != null) ?
1809 1549 this.graphConfig.editable : true);
1810 1550 closable = (closable != null) ? closable : true;
1811 1551 target = (target != null) ? target : 'blank';
1812   -
1813   - var param = {'client': 1, 'target': target};
1814   -
1815   - if (editable)
1816   - {
  1552 +
  1553 + var param = { 'client': 1, 'target': target };
  1554 +
  1555 + if (editable) {
1817 1556 param.edit = this.graphConfig.edit || '_blank';
1818 1557 }
1819   -
1820   - if (closable)
1821   - {
1822   - param.close = 1;
  1558 +
  1559 + if (closable) {
  1560 + param.close = 1;
1823 1561 }
1824 1562
1825   - if (this.layersEnabled)
1826   - {
1827   - param.layers = 1;
  1563 + if (this.layersEnabled) {
  1564 + param.layers = 1;
1828 1565 }
1829   -
1830   - if (this.tagsEnabled)
1831   - {
1832   - param.tags = {};
  1566 +
  1567 + if (this.tagsEnabled) {
  1568 + param.tags = {};
1833 1569 }
1834 1570
1835   - if (this.graphConfig != null && this.graphConfig.nav != false)
1836   - {
  1571 + if (this.graphConfig != null && this.graphConfig.nav != false) {
1837 1572 param.nav = 1;
1838 1573 }
1839   -
1840   - if (this.graphConfig != null && this.graphConfig.highlight != null)
1841   - {
  1574 +
  1575 + if (this.graphConfig != null && this.graphConfig.highlight != null) {
1842 1576 param.highlight = this.graphConfig.highlight.substring(1);
1843 1577 }
1844   -
1845   - if (this.currentPage != null && this.currentPage > 0)
1846   - {
  1578 +
  1579 + if (this.currentPage != null && this.currentPage > 0) {
1847 1580 param.page = this.currentPage;
1848 1581 }
1849 1582
1850   - if (typeof window.postMessage !== 'undefined' && (document.documentMode == null || document.documentMode >= 10))
1851   - {
1852   - if (this.lightboxWindow == null)
1853   - {
1854   - mxEvent.addListener(window, 'message', mxUtils.bind(this, function(evt)
1855   - {
1856   - if (evt.data == 'ready' && evt.source == this.lightboxWindow)
1857   - {
  1583 + if (typeof window.postMessage !== 'undefined' && (document.documentMode == null || document.documentMode >= 10)) {
  1584 + if (this.lightboxWindow == null) {
  1585 + mxEvent.addListener(window, 'message', mxUtils.bind(this, function (evt) {
  1586 + if (evt.data == 'ready' && evt.source == this.lightboxWindow) {
1858 1587 this.lightboxWindow.postMessage(this.xml, '*');
1859 1588 }
1860   - }));
  1589 + }));
1861 1590 }
1862 1591 }
1863   - else
1864   - {
  1592 + else {
1865 1593 // Data is pulled from global variable after tab loads
1866 1594 param.data = encodeURIComponent(this.xml);
1867 1595 }
1868   -
1869   - if (urlParams['dev'] == '1')
1870   - {
  1596 +
  1597 + if (urlParams['dev'] == '1') {
1871 1598 param.dev = '1';
1872 1599 }
1873   -
1874   - this.lightboxWindow = window.open(((urlParams['dev'] != '1') ?
1875   - EditorUi.lightboxHost : 'https://test.draw.io') +
1876   - '/#P' + encodeURIComponent(JSON.stringify(param)));
  1600 +
  1601 + this.lightboxWindow = window.open(((urlParams['dev'] != '1') ?
  1602 + EditorUi.lightboxHost : 'https://test.draw.io') +
  1603 + '/#P' + encodeURIComponent(JSON.stringify(param)));
1877 1604 }
1878 1605 }
1879   - else
1880   - {
  1606 + else {
1881 1607 this.showLocalLightbox();
1882 1608 }
1883 1609 };
... ... @@ -1885,168 +1611,148 @@ GraphViewer.prototype.showLightbox = function(editable, closable, target)
1885 1611 /**
1886 1612 * Adds the given array of stencils to avoid dynamic loading of shapes.
1887 1613 */
1888   -GraphViewer.prototype.showLocalLightbox = function(container)
1889   -{
  1614 +GraphViewer.prototype.showLocalLightbox = function (container) {
1890 1615 var backdrop = document.createElement('div');
1891 1616
1892 1617 backdrop.style.cssText = 'position:fixed;top:0;left:0;bottom:0;right:0;';
1893 1618 backdrop.style.zIndex = this.lightboxZIndex;
1894 1619 backdrop.style.backgroundColor = '#000000';
1895 1620 mxUtils.setOpacity(backdrop, 70);
1896   -
  1621 +
1897 1622 document.body.appendChild(backdrop);
1898   -
  1623 +
1899 1624 var closeImg = document.createElement('img');
1900 1625 closeImg.setAttribute('border', '0');
1901 1626 closeImg.setAttribute('src', Editor.closeBlackImage);
1902 1627 closeImg.style.cssText = 'position:fixed;top:32px;right:32px;';
1903 1628 closeImg.style.cursor = 'pointer';
1904   -
1905   - mxEvent.addListener(closeImg, 'click', function()
1906   - {
  1629 +
  1630 + mxEvent.addListener(closeImg, 'click', function () {
1907 1631 ui.destroy();
1908 1632 });
1909   -
  1633 +
1910 1634 // LATER: Make possible to assign after instance was created
1911 1635 urlParams['pages'] = '1';
1912 1636 urlParams['page'] = this.currentPage;
1913 1637 urlParams['page-id'] = this.graphConfig.pageId;
1914 1638 urlParams['layer-ids'] = (this.graphConfig.layerIds != null && this.graphConfig.layerIds.length > 0)
1915   - ? this.graphConfig.layerIds.join(' ') : null;
  1639 + ? this.graphConfig.layerIds.join(' ') : null;
1916 1640 urlParams['nav'] = (this.graphConfig.nav != false) ? '1' : '0';
1917 1641 urlParams['layers'] = (this.layersEnabled) ? '1' : '0';
1918 1642
1919   - if (this.tagsEnabled)
1920   - {
  1643 + if (this.tagsEnabled) {
1921 1644 urlParams['tags'] = '{}';
1922 1645 }
1923 1646
1924   - if (container != null)
1925   - {
1926   - try
1927   - {
  1647 + if (container != null) {
  1648 + try {
1928 1649 var toolbarConfig = JSON.parse(decodeURIComponent(urlParams['toolbar-config'] || '{}'));
1929 1650 toolbarConfig.noCloseBtn = true;
1930 1651 urlParams['toolbar-config'] = encodeURIComponent(JSON.stringify(toolbarConfig));
1931 1652 }
1932   - catch (e) {}
  1653 + catch (e) { }
1933 1654 }
1934 1655
1935 1656 // PostMessage not working and Permission denied for opened access in IE9-
1936   - if (document.documentMode == null || document.documentMode >= 10)
1937   - {
  1657 + if (document.documentMode == null || document.documentMode >= 10) {
1938 1658 Editor.prototype.editButtonLink = this.graphConfig.edit;
1939 1659 Editor.prototype.editButtonFunc = this.graphConfig.editFunc;
1940 1660 }
1941   -
1942   - EditorUi.prototype.updateActionStates = function() {};
1943   - EditorUi.prototype.addBeforeUnloadListener = function() {};
1944   - EditorUi.prototype.addChromelessClickHandler = function() {};
1945   -
  1661 +
  1662 + EditorUi.prototype.updateActionStates = function () { };
  1663 + EditorUi.prototype.addBeforeUnloadListener = function () { };
  1664 + EditorUi.prototype.addChromelessClickHandler = function () { };
  1665 +
1946 1666 // Workaround for lost reference with same ID is to change
1947 1667 // ID which must be done before calling EditorUi constructor
1948 1668 var previousShadowId = Graph.prototype.shadowId;
1949 1669 Graph.prototype.shadowId = 'lightboxDropShadow';
1950   -
  1670 +
1951 1671 var ui = new EditorUi(new Editor(true), document.createElement('div'), true);
1952 1672 ui.editor.editBlankUrl = this.editBlankUrl;
1953   -
  1673 +
1954 1674 // Overrides instance variable and restores prototype state
1955 1675 ui.editor.graph.shadowId = 'lightboxDropShadow';
1956 1676 Graph.prototype.shadowId = previousShadowId;
1957 1677
1958 1678 // Disables refresh
1959   - ui.refresh = function() {};
1960   -
  1679 + ui.refresh = function () { };
  1680 +
1961 1681 // Handles escape keystroke
1962   - var keydownHandler = mxUtils.bind(this, function(evt)
1963   - {
1964   - if (evt.keyCode == 27 /* Escape */)
1965   - {
  1682 + var keydownHandler = mxUtils.bind(this, function (evt) {
  1683 + if (evt.keyCode == 27 /* Escape */) {
1966 1684 ui.destroy();
1967 1685 }
1968 1686 });
1969 1687
1970 1688 var overflow = this.initialOverflow;
1971 1689 var destroy = ui.destroy;
1972   -
1973   - ui.destroy = function()
1974   - {
1975   - if (container == null)
1976   - {
  1690 +
  1691 + ui.destroy = function () {
  1692 + if (container == null) {
1977 1693 mxEvent.removeListener(document.documentElement, 'keydown', keydownHandler);
1978 1694 document.body.removeChild(backdrop);
1979 1695 document.body.removeChild(closeImg);
1980 1696 document.body.style.overflow = overflow;
1981 1697 GraphViewer.resizeSensorEnabled = true;
1982   -
  1698 +
1983 1699 destroy.apply(this, arguments);
1984 1700 }
1985 1701 };
1986   -
  1702 +
1987 1703 var graph = ui.editor.graph;
1988 1704 var lightbox = graph.container;
1989 1705 lightbox.style.overflow = 'hidden';
1990   -
1991   - if (this.lightboxChrome && container == null)
1992   - {
  1706 +
  1707 + if (this.lightboxChrome && container == null) {
1993 1708 lightbox.style.border = '1px solid #c0c0c0';
1994 1709 lightbox.style.margin = '40px';
1995 1710
1996 1711 // Installs the keystroke listener in the target
1997 1712 mxEvent.addListener(document.documentElement, 'keydown', keydownHandler);
1998 1713 }
1999   - else
2000   - {
  1714 + else {
2001 1715 backdrop.style.display = 'none';
2002 1716 closeImg.style.display = 'none';
2003 1717 }
2004   -
  1718 +
2005 1719 // Handles relative images
2006 1720 var self = this;
2007   -
2008   - graph.getImageFromBundles = function(key)
2009   - {
  1721 +
  1722 + graph.getImageFromBundles = function (key) {
2010 1723 return self.getImageUrl(key);
2011 1724 };
2012   -
  1725 +
2013 1726 // Handles relative images in print output and temporary graphs
2014 1727 var uiCreateTemporaryGraph = ui.createTemporaryGraph;
2015   -
2016   - ui.createTemporaryGraph = function()
2017   - {
  1728 +
  1729 + ui.createTemporaryGraph = function () {
2018 1730 var newGraph = uiCreateTemporaryGraph.apply(this, arguments);
2019   -
2020   - newGraph.getImageFromBundles = function(key)
2021   - {
  1731 +
  1732 + newGraph.getImageFromBundles = function (key) {
2022 1733 return self.getImageUrl(key);
2023 1734 };
2024   -
  1735 +
2025 1736 return newGraph;
2026 1737 };
2027   -
2028   - if (this.graphConfig.move)
2029   - {
2030   - graph.isMoveCellsEvent = function(evt)
2031   - {
  1738 +
  1739 + if (this.graphConfig.move) {
  1740 + graph.isMoveCellsEvent = function (evt) {
2032 1741 return true;
2033 1742 };
2034 1743 }
2035   -
  1744 +
2036 1745 mxUtils.setPrefixedStyle(lightbox.style, 'border-radius', '4px');
2037 1746 lightbox.style.position = 'fixed';
2038   -
  1747 +
2039 1748 GraphViewer.resizeSensorEnabled = false;
2040 1749 document.body.style.overflow = 'hidden';
2041 1750 this.addClickHandler(graph, ui);
2042 1751
2043   - window.setTimeout(mxUtils.bind(this, function()
2044   - {
2045   - try
2046   - {
  1752 + window.setTimeout(mxUtils.bind(this, function () {
  1753 + try {
2047 1754 // Click on backdrop closes lightbox
2048   - mxEvent.addListener(backdrop, 'click', function()
2049   - {
  1755 + mxEvent.addListener(backdrop, 'click', function () {
2050 1756 ui.destroy();
2051 1757 });
2052 1758
... ... @@ -2055,39 +1761,34 @@ GraphViewer.prototype.showLocalLightbox = function(container)
2055 1761 lightbox.style.zIndex = this.lightboxZIndex;
2056 1762 closeImg.style.zIndex = this.lightboxZIndex;
2057 1763
2058   - if (container != null)
2059   - {
  1764 + if (container != null) {
2060 1765 container.innerHTML = '';
2061 1766 container.appendChild(lightbox);
2062 1767 }
2063   - else
2064   - {
  1768 + else {
2065 1769 document.body.appendChild(lightbox);
2066 1770 document.body.appendChild(closeImg);
2067 1771 }
2068   -
  1772 +
2069 1773 ui.setFileData(this.xml);
2070   -
  1774 +
2071 1775 mxUtils.setPrefixedStyle(lightbox.style, 'transform', 'rotateY(0deg)');
2072 1776 ui.chromelessToolbar.style.bottom = 60 + 'px';
2073 1777 ui.chromelessToolbar.style.zIndex = this.lightboxZIndex;
2074   -
  1778 +
2075 1779 // Workaround for clipping in IE11-
2076 1780 (container || document.body).appendChild(ui.chromelessToolbar);
2077   -
2078   - ui.getEditBlankXml = mxUtils.bind(this, function()
2079   - {
  1781 +
  1782 + ui.getEditBlankXml = mxUtils.bind(this, function () {
2080 1783 return this.xml;
2081 1784 });
2082   -
  1785 +
2083 1786 ui.lightboxFit();
2084 1787 ui.chromelessResize();
2085 1788 this.showLayers(graph, this.graph);
2086 1789 }
2087   - catch (e)
2088   - {
2089   - ui.handleError(e, null, function()
2090   - {
  1790 + catch (e) {
  1791 + ui.handleError(e, null, function () {
2091 1792 ui.destroy();
2092 1793 });
2093 1794 }
... ... @@ -2099,8 +1800,7 @@ GraphViewer.prototype.showLocalLightbox = function(container)
2099 1800 /**
2100 1801 * Removes the dialog from the DOM.
2101 1802 */
2102   -Dialog.prototype.getDocumentSize = function()
2103   -{
  1803 +Dialog.prototype.getDocumentSize = function () {
2104 1804 var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
2105 1805 var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
2106 1806
... ... @@ -2110,17 +1810,14 @@ Dialog.prototype.getDocumentSize = function()
2110 1810 /**
2111 1811 *
2112 1812 */
2113   -GraphViewer.prototype.updateTitle = function(title)
2114   -{
  1813 +GraphViewer.prototype.updateTitle = function (title) {
2115 1814 title = title || '';
2116   -
2117   - if (this.showTitleAsTooltip && this.graph != null && this.graph.container != null)
2118   - {
  1815 +
  1816 + if (this.showTitleAsTooltip && this.graph != null && this.graph.container != null) {
2119 1817 this.graph.container.setAttribute('title', title);
2120   - }
2121   -
2122   - if (this.filename != null)
2123   - {
  1818 + }
  1819 +
  1820 + if (this.filename != null) {
2124 1821 this.filename.innerText = '';
2125 1822 mxUtils.write(this.filename, title);
2126 1823 this.filename.setAttribute('title', title);
... ... @@ -2130,21 +1827,16 @@ GraphViewer.prototype.updateTitle = function(title)
2130 1827 /**
2131 1828 *
2132 1829 */
2133   -GraphViewer.processElements = function(classname)
2134   -{
2135   - mxUtils.forEach(GraphViewer.getElementsByClassName(classname || 'mxgraph'), function(div)
2136   - {
2137   - try
2138   - {
  1830 +GraphViewer.processElements = function (classname) {
  1831 + mxUtils.forEach(GraphViewer.getElementsByClassName(classname || 'mxgraph'), function (div) {
  1832 + try {
2139 1833 div.innerText = '';
2140 1834 GraphViewer.createViewerForElement(div);
2141 1835 }
2142   - catch (e)
2143   - {
  1836 + catch (e) {
2144 1837 div.innerText = e.message;
2145   -
2146   - if (window.console != null)
2147   - {
  1838 +
  1839 + if (window.console != null) {
2148 1840 console.error(e);
2149 1841 }
2150 1842 }
... ... @@ -2154,37 +1846,30 @@ GraphViewer.processElements = function(classname)
2154 1846 /**
2155 1847 * Adds the given array of stencils to avoid dynamic loading of shapes.
2156 1848 */
2157   -GraphViewer.getElementsByClassName = function(classname)
2158   -{
2159   - if (document.getElementsByClassName)
2160   - {
  1849 +GraphViewer.getElementsByClassName = function (classname) {
  1850 + if (document.getElementsByClassName) {
2161 1851 var divs = document.getElementsByClassName(classname);
2162   -
  1852 +
2163 1853 // Workaround for changing divs while processing
2164 1854 var result = [];
2165   -
2166   - for (var i = 0; i < divs.length; i++)
2167   - {
  1855 +
  1856 + for (var i = 0; i < divs.length; i++) {
2168 1857 result.push(divs[i]);
2169 1858 }
2170   -
  1859 +
2171 1860 return result;
2172 1861 }
2173   - else
2174   - {
  1862 + else {
2175 1863 var tmp = document.getElementsByTagName('*');
2176 1864 var divs = [];
2177   -
2178   - for (var i = 0; i < tmp.length; i++)
2179   - {
  1865 +
  1866 + for (var i = 0; i < tmp.length; i++) {
2180 1867 var cls = tmp[i].className;
2181 1868
2182   - if (cls != null && cls.length > 0)
2183   - {
  1869 + if (cls != null && cls.length > 0) {
2184 1870 var tokens = cls.split(' ');
2185   -
2186   - if (mxUtils.indexOf(tokens, classname) >= 0)
2187   - {
  1871 +
  1872 + if (mxUtils.indexOf(tokens, classname) >= 0) {
2188 1873 divs.push(tmp[i]);
2189 1874 }
2190 1875 }
... ... @@ -2197,67 +1882,53 @@ GraphViewer.getElementsByClassName = function(classname)
2197 1882 /**
2198 1883 * Adds the given array of stencils to avoid dynamic loading of shapes.
2199 1884 */
2200   -GraphViewer.createViewerForElement = function(element, callback)
2201   -{
  1885 +GraphViewer.createViewerForElement = function (element, callback) {
2202 1886 var data = element.getAttribute('data-mxgraph');
2203   -
2204   - if (data != null)
2205   - {
  1887 +
  1888 + if (data != null) {
2206 1889 var config = JSON.parse(data);
2207   -
2208   - var createViewer = function(xml)
2209   - {
  1890 +
  1891 + var createViewer = function (xml) {
2210 1892 var xmlDoc = mxUtils.parseXml(xml);
2211 1893 var viewer = new GraphViewer(element, xmlDoc.documentElement, config);
2212   -
2213   - if (callback != null)
2214   - {
  1894 +
  1895 + if (callback != null) {
2215 1896 callback(viewer);
2216 1897 }
2217 1898 };
2218 1899
2219   - if (config.url != null)
2220   - {
2221   - GraphViewer.getUrl(config.url, function(xml)
2222   - {
  1900 + if (config.url != null) {
  1901 + GraphViewer.getUrl(config.url, function (xml) {
2223 1902 createViewer(xml);
2224 1903 });
2225 1904 }
2226   - else
2227   - {
  1905 + else {
2228 1906 createViewer(config.xml);
2229 1907 }
2230 1908 }
2231 1909 };
2232 1910
2233   -GraphViewer.logAncestorFrames = function()
2234   -{
2235   - try
2236   - {
  1911 +GraphViewer.logAncestorFrames = function () {
  1912 + try {
2237 1913 if (window.location.ancestorOrigins && window.location.hostname &&
2238   - window.location.ancestorOrigins.length && window.location.ancestorOrigins.length > 0)
2239   - {
  1914 + window.location.ancestorOrigins.length && window.location.ancestorOrigins.length > 0) {
2240 1915 var hostname = window.location.hostname;
2241 1916
2242   - if (hostname && hostname.length > 1 && hostname.charAt(hostname.length - 1) == '/')
2243   - {
  1917 + if (hostname && hostname.length > 1 && hostname.charAt(hostname.length - 1) == '/') {
2244 1918 hostname = hostname.substring(0, hostname.length - 1)
2245 1919 }
2246 1920
2247 1921 var message = '';
2248 1922
2249   - for (var i = 0; i < window.location.ancestorOrigins.length; i++)
2250   - {
  1923 + for (var i = 0; i < window.location.ancestorOrigins.length; i++) {
2251 1924 message += ' -> ' + window.location.ancestorOrigins[i];
2252 1925 }
2253 1926
2254 1927 if (hostname.endsWith('.draw.io') && window.location.ancestorOrigins.length == 1 &&
2255   - window.location.ancestorOrigins[0] && window.location.ancestorOrigins[0].endsWith('.atlassian.net'))
2256   - {
  1928 + window.location.ancestorOrigins[0] && window.location.ancestorOrigins[0].endsWith('.atlassian.net')) {
2257 1929 // do not log *.draw.io domains embedded directly into atlassian.net
2258 1930 }
2259   - else if (window.location.ancestorOrigins.length > 0)
2260   - {
  1931 + else if (window.location.ancestorOrigins.length > 0) {
2261 1932 var img = new Image();
2262 1933 img.src = 'https://log.diagrams.net/images/1x1.png?src=ViewerAncestorFrames' +
2263 1934 ((typeof window.EditorUi !== 'undefined') ? '&v=' + encodeURIComponent(EditorUi.VERSION) : '') +
... ... @@ -2265,8 +1936,7 @@ GraphViewer.logAncestorFrames = function()
2265 1936 }
2266 1937 }
2267 1938 }
2268   - catch (e)
2269   - {
  1939 + catch (e) {
2270 1940 // ignore
2271 1941 }
2272 1942 };
... ... @@ -2274,10 +1944,8 @@ GraphViewer.logAncestorFrames = function()
2274 1944 /**
2275 1945 * Adds event if grid size is changed.
2276 1946 */
2277   -GraphViewer.initCss = function()
2278   -{
2279   - try
2280   - {
  1947 +GraphViewer.initCss = function () {
  1948 + try {
2281 1949 var style = document.createElement('style')
2282 1950 style.type = 'text/css';
2283 1951 style.innerHTML = ['div.mxTooltip {',
... ... @@ -2350,8 +2018,7 @@ GraphViewer.initCss = function()
2350 2018 // Log the ansestor frames
2351 2019 GraphViewer.logAncestorFrames();
2352 2020 }
2353   - catch (e)
2354   - {
  2021 + catch (e) {
2355 2022 // ignore
2356 2023 }
2357 2024 };
... ... @@ -2364,25 +2031,21 @@ GraphViewer.cachedUrls = {};
2364 2031 /**
2365 2032 * Workaround for unsupported CORS in IE9 XHR
2366 2033 */
2367   -GraphViewer.getUrl = function(url, onload, onerror)
2368   -{
2369   - if (GraphViewer.cachedUrls[url] != null)
2370   - {
  2034 +GraphViewer.getUrl = function (url, onload, onerror) {
  2035 + if (GraphViewer.cachedUrls[url] != null) {
2371 2036 onload(GraphViewer.cachedUrls[url]);
2372 2037 }
2373   - else
2374   - {
  2038 + else {
2375 2039 var xhr = (navigator.userAgent != null && navigator.userAgent.indexOf('MSIE 9') > 0) ?
2376 2040 new XDomainRequest() : new XMLHttpRequest();
2377 2041 xhr.open('GET', url);
2378   -
2379   - xhr.onload = function()
2380   - {
2381   - onload((xhr.getText != null) ? xhr.getText() : xhr.responseText);
  2042 +
  2043 + xhr.onload = function () {
  2044 + onload((xhr.getText != null) ? xhr.getText() : xhr.responseText);
2382 2045 };
2383   -
2384   - xhr.onerror = onerror;
2385   - xhr.send();
  2046 +
  2047 + xhr.onerror = onerror;
  2048 + xhr.send();
2386 2049 }
2387 2050 };
2388 2051
... ... @@ -2407,53 +2070,46 @@ GraphViewer.useResizeSensor = true;
2407 2070 * directory of this distribution and at
2408 2071 * https://github.com/marcj/css-element-queries/blob/master/LICENSE.
2409 2072 */
2410   -(function() {
2411   -
2412   - // Only used for the dirty checking, so the event callback count is limted to max 1 call per fps per sensor.
2413   - // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
2414   - // would generate too many unnecessary events.
2415   - var requestAnimationFrame = window.requestAnimationFrame ||
2416   - window.mozRequestAnimationFrame ||
2417   - window.webkitRequestAnimationFrame ||
2418   - function (fn) {
2419   - return window.setTimeout(fn, 20);
2420   - };
2421   -
2422   - /**
2423   - * Class for dimension change detection.
2424   - *
2425   - * @param {Element|Element[]|Elements|jQuery} element
2426   - * @param {Function} callback
2427   - *
2428   - * @constructor
2429   - */
2430   - var ResizeSensor = function(element, fn) {
2431   -
2432   - var callback = function()
2433   - {
2434   - if (GraphViewer.resizeSensorEnabled)
2435   - {
2436   - fn();
2437   - }
2438   - };
  2073 +(function () {
  2074 +
  2075 + // Only used for the dirty checking, so the event callback count is limted to max 1 call per fps per sensor.
  2076 + // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
  2077 + // would generate too many unnecessary events.
  2078 + var requestAnimationFrame = window.requestAnimationFrame ||
  2079 + window.mozRequestAnimationFrame ||
  2080 + window.webkitRequestAnimationFrame ||
  2081 + function (fn) {
  2082 + return window.setTimeout(fn, 20);
  2083 + };
  2084 +
  2085 + /**
  2086 + * Class for dimension change detection.
  2087 + *
  2088 + * @param {Element|Element[]|Elements|jQuery} element
  2089 + * @param {Function} callback
  2090 + *
  2091 + * @constructor
  2092 + */
  2093 + var ResizeSensor = function (element, fn) {
  2094 +
  2095 + var callback = function () {
  2096 + if (GraphViewer.resizeSensorEnabled) {
  2097 + fn();
  2098 + }
  2099 + };
2439 2100
2440 2101 // Uses ResizeObserver, if available
2441   - if (GraphViewer.useResizeObserver && typeof ResizeObserver !== 'undefined')
2442   - {
  2102 + if (GraphViewer.useResizeObserver && typeof ResizeObserver !== 'undefined') {
2443 2103 var callbackThread = null;
2444 2104 var active = false;
2445 2105
2446   - new ResizeObserver(function()
2447   - {
2448   - if (!active)
2449   - {
2450   - if (callbackThread != null)
2451   - {
  2106 + new ResizeObserver(function () {
  2107 + if (!active) {
  2108 + if (callbackThread != null) {
2452 2109 window.clearTimeout(callbackThread);
2453 2110 }
2454 2111
2455   - callbackThread = window.setTimeout(function()
2456   - {
  2112 + callbackThread = window.setTimeout(function () {
2457 2113 active = true;
2458 2114 callback();
2459 2115 callbackThread = null;
... ... @@ -2464,165 +2120,165 @@ GraphViewer.useResizeSensor = true;
2464 2120
2465 2121 return
2466 2122 }
2467   -
2468   - /**
2469   - *
2470   - * @constructor
2471   - */
2472   - function EventQueue() {
2473   - this.q = [];
2474   - this.add = function(ev) {
2475   - this.q.push(ev);
2476   - };
2477   -
2478   - var i, j;
2479   - this.call = function() {
2480   - for (i = 0, j = this.q.length; i < j; i++) {
2481   - this.q[i].call();
2482   - }
2483   - };
2484   - }
2485   -
2486   - /**
2487   - * @param {HTMLElement} element
2488   - * @param {String} prop
2489   - * @returns {String|Number}
2490   - */
2491   - function getComputedStyle(element, prop) {
2492   - if (element.currentStyle) {
2493   - return element.currentStyle[prop];
2494   - } else if (window.getComputedStyle) {
2495   - return window.getComputedStyle(element, null).getPropertyValue(prop);
2496   - } else {
2497   - return element.style[prop];
2498   - }
2499   - }
2500   -
2501   - /**
2502   - *
2503   - * @param {HTMLElement} element
2504   - * @param {Function} resized
2505   - */
2506   - function attachResizeEvent(element, resized) {
2507   - if (!element.resizedAttached) {
2508   - element.resizedAttached = new EventQueue();
2509   - element.resizedAttached.add(resized);
2510   - } else if (element.resizedAttached) {
2511   - element.resizedAttached.add(resized);
2512   - return;
2513   - }
2514   -
2515   - element.resizeSensor = document.createElement('div');
2516   - element.resizeSensor.className = 'resize-sensor';
2517   - var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
2518   - var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
2519   -
2520   - element.resizeSensor.style.cssText = style;
2521   - element.resizeSensor.innerHTML =
2522   - '<div class="resize-sensor-expand" style="' + style + '">' +
2523   - '<div style="' + styleChild + '"></div>' +
2524   - '</div>' +
2525   - '<div class="resize-sensor-shrink" style="' + style + '">' +
2526   - '<div style="' + styleChild + ' width: 200%; height: 200%"></div>' +
2527   - '</div>';
2528   - element.appendChild(element.resizeSensor);
2529   -
2530   - // FIXME: Should not change element style
2531   - if (getComputedStyle(element, 'position') == 'static') {
2532   - element.style.position = 'relative';
2533   - }
2534   -
2535   - var expand = element.resizeSensor.childNodes[0];
2536   - var expandChild = expand.childNodes[0];
2537   - var shrink = element.resizeSensor.childNodes[1];
2538   -
2539   - var reset = function() {
2540   - expandChild.style.width = 100000 + 'px';
2541   - expandChild.style.height = 100000 + 'px';
2542   -
2543   - expand.scrollLeft = 100000;
2544   - expand.scrollTop = 100000;
2545   -
2546   - shrink.scrollLeft = 100000;
2547   - shrink.scrollTop = 100000;
2548   - };
2549   -
2550   - reset();
2551   - var dirty = false;
2552   -
2553   - var dirtyChecking = function(){
2554   - if (!element.resizedAttached) return;
2555   -
2556   - if (dirty) {
2557   - element.resizedAttached.call();
2558   - dirty = false;
2559   - }
2560   -
2561   - requestAnimationFrame(dirtyChecking);
2562   - };
2563   -
2564   - requestAnimationFrame(dirtyChecking);
2565   - var lastWidth, lastHeight;
2566   - var cachedWidth, cachedHeight; //useful to not query offsetWidth twice
2567   -
2568   - var onScroll = function() {
2569   - if ((cachedWidth = element.offsetWidth) != lastWidth || (cachedHeight = element.offsetHeight) != lastHeight) {
2570   - dirty = true;
2571   -
2572   - lastWidth = cachedWidth;
2573   - lastHeight = cachedHeight;
2574   - }
2575   - reset();
2576   - };
2577   -
2578   - var addEvent = function(el, name, cb) {
2579   - if (el.attachEvent) {
2580   - el.attachEvent('on' + name, cb);
2581   - } else {
2582   - el.addEventListener(name, cb);
2583   - }
2584   - };
2585   -
2586   - addEvent(expand, 'scroll', onScroll);
2587   - addEvent(shrink, 'scroll', onScroll);
2588   - }
2589   -
2590   - var elementType = Object.prototype.toString.call(element);
2591   - var isCollectionTyped = ('[object Array]' === elementType
2592   - || ('[object NodeList]' === elementType)
2593   - || ('[object HTMLCollection]' === elementType)
2594   - || ('undefined' !== typeof jQuery && element instanceof jQuery) //jquery
2595   - || ('undefined' !== typeof Elements && element instanceof Elements) //mootools
2596   - );
2597   -
2598   - if (isCollectionTyped) {
2599   - var i = 0, j = element.length;
2600   - for (; i < j; i++) {
2601   - attachResizeEvent(element[i], callback);
2602   - }
2603   - } else {
2604   - attachResizeEvent(element, callback);
2605   - }
2606   -
2607   - this.detach = function() {
2608   - if (isCollectionTyped) {
2609   - var i = 0, j = element.length;
2610   - for (; i < j; i++) {
2611   - ResizeSensor.detach(element[i]);
2612   - }
2613   - } else {
2614   - ResizeSensor.detach(element);
2615   - }
2616   - };
2617   - };
2618   -
2619   - ResizeSensor.detach = function(element) {
2620   - if (element.resizeSensor) {
2621   - element.removeChild(element.resizeSensor);
2622   - delete element.resizeSensor;
2623   - delete element.resizedAttached;
2624   - }
2625   - };
2626   -
2627   - window.ResizeSensor = ResizeSensor;
  2123 +
  2124 + /**
  2125 + *
  2126 + * @constructor
  2127 + */
  2128 + function EventQueue() {
  2129 + this.q = [];
  2130 + this.add = function (ev) {
  2131 + this.q.push(ev);
  2132 + };
  2133 +
  2134 + var i, j;
  2135 + this.call = function () {
  2136 + for (i = 0, j = this.q.length; i < j; i++) {
  2137 + this.q[i].call();
  2138 + }
  2139 + };
  2140 + }
  2141 +
  2142 + /**
  2143 + * @param {HTMLElement} element
  2144 + * @param {String} prop
  2145 + * @returns {String|Number}
  2146 + */
  2147 + function getComputedStyle(element, prop) {
  2148 + if (element.currentStyle) {
  2149 + return element.currentStyle[prop];
  2150 + } else if (window.getComputedStyle) {
  2151 + return window.getComputedStyle(element, null).getPropertyValue(prop);
  2152 + } else {
  2153 + return element.style[prop];
  2154 + }
  2155 + }
  2156 +
  2157 + /**
  2158 + *
  2159 + * @param {HTMLElement} element
  2160 + * @param {Function} resized
  2161 + */
  2162 + function attachResizeEvent(element, resized) {
  2163 + if (!element.resizedAttached) {
  2164 + element.resizedAttached = new EventQueue();
  2165 + element.resizedAttached.add(resized);
  2166 + } else if (element.resizedAttached) {
  2167 + element.resizedAttached.add(resized);
  2168 + return;
  2169 + }
  2170 +
  2171 + element.resizeSensor = document.createElement('div');
  2172 + element.resizeSensor.className = 'resize-sensor';
  2173 + var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
  2174 + var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
  2175 +
  2176 + element.resizeSensor.style.cssText = style;
  2177 + element.resizeSensor.innerHTML =
  2178 + '<div class="resize-sensor-expand" style="' + style + '">' +
  2179 + '<div style="' + styleChild + '"></div>' +
  2180 + '</div>' +
  2181 + '<div class="resize-sensor-shrink" style="' + style + '">' +
  2182 + '<div style="' + styleChild + ' width: 200%; height: 200%"></div>' +
  2183 + '</div>';
  2184 + element.appendChild(element.resizeSensor);
  2185 +
  2186 + // FIXME: Should not change element style
  2187 + if (getComputedStyle(element, 'position') == 'static') {
  2188 + element.style.position = 'relative';
  2189 + }
  2190 +
  2191 + var expand = element.resizeSensor.childNodes[0];
  2192 + var expandChild = expand.childNodes[0];
  2193 + var shrink = element.resizeSensor.childNodes[1];
  2194 +
  2195 + var reset = function () {
  2196 + expandChild.style.width = 100000 + 'px';
  2197 + expandChild.style.height = 100000 + 'px';
  2198 +
  2199 + expand.scrollLeft = 100000;
  2200 + expand.scrollTop = 100000;
  2201 +
  2202 + shrink.scrollLeft = 100000;
  2203 + shrink.scrollTop = 100000;
  2204 + };
  2205 +
  2206 + reset();
  2207 + var dirty = false;
  2208 +
  2209 + var dirtyChecking = function () {
  2210 + if (!element.resizedAttached) return;
  2211 +
  2212 + if (dirty) {
  2213 + element.resizedAttached.call();
  2214 + dirty = false;
  2215 + }
  2216 +
  2217 + requestAnimationFrame(dirtyChecking);
  2218 + };
  2219 +
  2220 + requestAnimationFrame(dirtyChecking);
  2221 + var lastWidth, lastHeight;
  2222 + var cachedWidth, cachedHeight; //useful to not query offsetWidth twice
  2223 +
  2224 + var onScroll = function () {
  2225 + if ((cachedWidth = element.offsetWidth) != lastWidth || (cachedHeight = element.offsetHeight) != lastHeight) {
  2226 + dirty = true;
  2227 +
  2228 + lastWidth = cachedWidth;
  2229 + lastHeight = cachedHeight;
  2230 + }
  2231 + reset();
  2232 + };
  2233 +
  2234 + var addEvent = function (el, name, cb) {
  2235 + if (el.attachEvent) {
  2236 + el.attachEvent('on' + name, cb);
  2237 + } else {
  2238 + el.addEventListener(name, cb);
  2239 + }
  2240 + };
  2241 +
  2242 + addEvent(expand, 'scroll', onScroll);
  2243 + addEvent(shrink, 'scroll', onScroll);
  2244 + }
  2245 +
  2246 + var elementType = Object.prototype.toString.call(element);
  2247 + var isCollectionTyped = ('[object Array]' === elementType
  2248 + || ('[object NodeList]' === elementType)
  2249 + || ('[object HTMLCollection]' === elementType)
  2250 + || ('undefined' !== typeof jQuery && element instanceof jQuery) //jquery
  2251 + || ('undefined' !== typeof Elements && element instanceof Elements) //mootools
  2252 + );
  2253 +
  2254 + if (isCollectionTyped) {
  2255 + var i = 0, j = element.length;
  2256 + for (; i < j; i++) {
  2257 + attachResizeEvent(element[i], callback);
  2258 + }
  2259 + } else {
  2260 + attachResizeEvent(element, callback);
  2261 + }
  2262 +
  2263 + this.detach = function () {
  2264 + if (isCollectionTyped) {
  2265 + var i = 0, j = element.length;
  2266 + for (; i < j; i++) {
  2267 + ResizeSensor.detach(element[i]);
  2268 + }
  2269 + } else {
  2270 + ResizeSensor.detach(element);
  2271 + }
  2272 + };
  2273 + };
  2274 +
  2275 + ResizeSensor.detach = function (element) {
  2276 + if (element.resizeSensor) {
  2277 + element.removeChild(element.resizeSensor);
  2278 + delete element.resizeSensor;
  2279 + delete element.resizedAttached;
  2280 + }
  2281 + };
  2282 +
  2283 + window.ResizeSensor = ResizeSensor;
2628 2284 })();
... ...