drawio-offline
Version:
diagrams.net desktop
1,645 lines (1,428 loc) • 123 kB
JavaScript
/**
* Copyright (c) 2006-2020, JGraph Ltd
* Copyright (c) 2006-2020, draw.io AG
*/
(function()
{
// Adds scrollbars for menus that exceed the page height
var mxPopupMenuShowMenu = mxPopupMenu.prototype.showMenu;
mxPopupMenu.prototype.showMenu = function()
{
mxPopupMenuShowMenu.apply(this, arguments);
this.div.style.overflowY = 'auto';
this.div.style.overflowX = 'hidden';
var h0 = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
this.div.style.maxHeight = (h0 - 10) + 'px';
};
Menus.prototype.createHelpLink = function(href)
{
var link = document.createElement('span');
link.setAttribute('title', mxResources.get('help'));
link.style.cssText = 'color:blue;text-decoration:underline;margin-left:8px;cursor:help;';
var icon = document.createElement('img');
mxUtils.setOpacity(icon, 50);
icon.style.height = '16px';
icon.style.width = '16px';
icon.setAttribute('border', '0');
icon.setAttribute('valign', 'bottom');
icon.setAttribute('src', Editor.helpImage);
link.appendChild(icon);
mxEvent.addGestureListeners(link, mxUtils.bind(this, function(evt)
{
this.editorUi.hideCurrentMenu();
this.editorUi.openLink(href);
mxEvent.consume(evt);
}));
return link;
};
Menus.prototype.addLinkToItem = function(item, href)
{
if (item != null)
{
item.firstChild.nextSibling.appendChild(this.createHelpLink(href));
}
};
var menusInit = Menus.prototype.init;
Menus.prototype.init = function()
{
menusInit.apply(this, arguments);
var editorUi = this.editorUi;
var graph = editorUi.editor.graph;
var isGraphEnabled = mxUtils.bind(graph, graph.isEnabled);
var googleEnabled = ((urlParams['embed'] != '1' && urlParams['gapi'] != '0') ||
(urlParams['embed'] == '1' && urlParams['gapi'] == '1')) && mxClient.IS_SVG &&
isLocalStorage && (document.documentMode == null || document.documentMode >= 10);
var dropboxEnabled = ((urlParams['embed'] != '1' && urlParams['db'] != '0') || (urlParams['embed'] == '1' && urlParams['db'] == '1')) &&
mxClient.IS_SVG && (document.documentMode == null || document.documentMode > 9);
var oneDriveEnabled = (window.location.hostname == 'www.draw.io' || window.location.hostname == 'test.draw.io' ||
window.location.hostname == 'drive.draw.io' || window.location.hostname == 'app.diagrams.net') &&
(((urlParams['embed'] != '1' && urlParams['od'] != '0') || (urlParams['embed'] == '1' && urlParams['od'] == '1')) &&
!mxClient.IS_IOS && (navigator.userAgent.indexOf('MSIE') < 0 || document.documentMode >= 10));
var trelloEnabled = urlParams['tr'] == '1' && mxClient.IS_SVG && (document.documentMode == null ||
document.documentMode > 9);
if (!mxClient.IS_SVG && !editorUi.isOffline())
{
var img = new Image();
img.src = IMAGE_PATH + '/help.png';
}
if (urlParams['noFileMenu'] == '1')
{
this.defaultMenuItems = this.defaultMenuItems.filter(function(m)
{
return m != 'file';
});
}
editorUi.actions.addAction('new...', function()
{
var compact = editorUi.isOffline();
var dlg = new NewDialog(editorUi, compact, !(editorUi.mode == App.MODE_DEVICE && 'chooseFileSystemEntries' in window));
editorUi.showDialog(dlg.container, (compact) ? 350 : 620, (compact) ? 70 : 440, true, true, function(cancel)
{
if (cancel && editorUi.getCurrentFile() == null)
{
editorUi.showSplash();
}
});
dlg.init();
});
editorUi.actions.put('insertTemplate', new Action(mxResources.get('template') + '...', function()
{
var dlg = new NewDialog(editorUi, null, false, function(xml)
{
editorUi.hideDialog();
if (xml != null)
{
var insertPoint = editorUi.editor.graph.getFreeInsertPoint();
graph.setSelectionCells(editorUi.importXml(xml,
Math.max(insertPoint.x, 20),
Math.max(insertPoint.y, 20),
true, null, null, true));
graph.scrollCellToVisible(graph.getSelectionCell());
}
}, null, null, null, null, null, null, null, null, null, null,
false, mxResources.get('insert'));
editorUi.showDialog(dlg.container, 620, 440, true, true);
})).isEnabled = isGraphEnabled;
var pointAction = editorUi.actions.addAction('points', function()
{
editorUi.editor.graph.view.setUnit(mxConstants.POINTS);
});
pointAction.setToggleAction(true);
pointAction.setSelectedCallback(function() { return editorUi.editor.graph.view.unit == mxConstants.POINTS; });
var inchAction = editorUi.actions.addAction('inches', function()
{
editorUi.editor.graph.view.setUnit(mxConstants.INCHES);
});
inchAction.setToggleAction(true);
inchAction.setSelectedCallback(function() { return editorUi.editor.graph.view.unit == mxConstants.INCHES; });
var mmAction = editorUi.actions.addAction('millimeters', function()
{
editorUi.editor.graph.view.setUnit(mxConstants.MILLIMETERS);
});
mmAction.setToggleAction(true);
mmAction.setSelectedCallback(function() { return editorUi.editor.graph.view.unit == mxConstants.MILLIMETERS; });
this.put('units', new Menu(mxUtils.bind(this, function(menu, parent)
{
this.addMenuItems(menu, ['points', /*'inches',*/ 'millimeters'], parent);
})));
var rulerAction = editorUi.actions.addAction('ruler', function()
{
mxSettings.setRulerOn(!mxSettings.isRulerOn());
mxSettings.save();
if (editorUi.ruler != null)
{
editorUi.ruler.destroy();
editorUi.ruler = null;
editorUi.refresh();
}
else
{
editorUi.ruler = new mxDualRuler(editorUi, editorUi.editor.graph.view.unit);
editorUi.refresh();
}
});
rulerAction.setEnabled(editorUi.canvasSupported && document.documentMode != 9);
rulerAction.setToggleAction(true);
rulerAction.setSelectedCallback(function() { return editorUi.ruler != null; });
var fullscreenAction = editorUi.actions.addAction('fullscreen', function()
{
if (document.fullscreenElement == null)
{
document.body.requestFullscreen();
}
else
{
document.exitFullscreen();
}
});
fullscreenAction.visible = document.fullscreenEnabled && document.body.requestFullscreen != null;
fullscreenAction.setToggleAction(true);
fullscreenAction.setSelectedCallback(function() { return document.fullscreenElement != null; });
editorUi.actions.addAction('properties...', function()
{
var dlg = new FilePropertiesDialog(editorUi);
editorUi.showDialog(dlg.container, 320, 120, true, true);
dlg.init();
}).isEnabled = isGraphEnabled;
if (window.mxFreehand)
{
editorUi.actions.put('insertFreehand', new Action(mxResources.get('freehand') + '...', function(evt)
{
if (graph.isEnabled())
{
if (this.freehandWindow == null)
{
this.freehandWindow = new FreehandWindow(editorUi, document.body.offsetWidth - 420, 102, 176, 104);
}
if (graph.freehand.isDrawing())
{
graph.freehand.stopDrawing();
}
else
{
graph.freehand.startDrawing();
}
this.freehandWindow.window.setVisible(graph.freehand.isDrawing());
}
})).isEnabled = function()
{
return isGraphEnabled() && mxClient.IS_SVG;
};
}
editorUi.actions.put('exportXml', new Action(mxResources.get('formatXml') + '...', function()
{
var div = document.createElement('div');
div.style.whiteSpace = 'nowrap';
var noPages = editorUi.pages == null || editorUi.pages.length <= 1;
var hd = document.createElement('h3');
mxUtils.write(hd, mxResources.get('formatXml'));
hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:4px';
div.appendChild(hd);
var selection = editorUi.addCheckbox(div, mxResources.get('selectionOnly'),
false, graph.isSelectionEmpty());
var compressed = editorUi.addCheckbox(div, mxResources.get('compressed'), true);
var pages = editorUi.addCheckbox(div, mxResources.get('allPages'), !noPages, noPages);
pages.style.marginBottom = '16px';
mxEvent.addListener(selection, 'change', function()
{
if (selection.checked)
{
pages.setAttribute('disabled', 'disabled');
}
else
{
pages.removeAttribute('disabled');
}
});
var dlg = new CustomDialog(editorUi, div, mxUtils.bind(this, function()
{
editorUi.downloadFile('xml', !compressed.checked, null,
!selection.checked, noPages || !pages.checked);
}), null, mxResources.get('export'));
editorUi.showDialog(dlg.container, 300, 180, true, true);
}));
editorUi.actions.put('exportUrl', new Action(mxResources.get('url') + '...', function()
{
editorUi.showPublishLinkDialog(mxResources.get('url'), true, null, null,
function(linkTarget, linkColor, allPages, lightbox, editLink, layers)
{
var dlg = new EmbedDialog(editorUi, editorUi.createLink(linkTarget,
linkColor, allPages, lightbox, editLink, layers, null, true));
editorUi.showDialog(dlg.container, 440, 240, true, true);
dlg.init();
});
}));
editorUi.actions.put('exportHtml', new Action(mxResources.get('formatHtmlEmbedded') + '...', function()
{
if (editorUi.spinner.spin(document.body, mxResources.get('loading')))
{
editorUi.getPublicUrl(editorUi.getCurrentFile(), function(url)
{
editorUi.spinner.stop();
editorUi.showHtmlDialog(mxResources.get('export'), null, url, function(publicUrl, zoomEnabled,
initialZoom, linkTarget, linkColor, fit, allPages, layers, lightbox, editLink)
{
editorUi.createHtml(publicUrl, zoomEnabled, initialZoom, linkTarget, linkColor,
fit, allPages, layers, lightbox, editLink, mxUtils.bind(this, function(html, scriptTag)
{
var basename = editorUi.getBaseFilename(allPages);
var result = '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->\n' +
'<!DOCTYPE html>\n<html>\n<head>\n<title>' + mxUtils.htmlEntities(basename) + '</title>\n' +
'<meta charset="utf-8"/>\n</head>\n<body>' + html + '\n' + scriptTag + '\n</body>\n</html>';
editorUi.saveData(basename + '.html', 'html', result, 'text/html');
}));
});
});
}
}));
editorUi.actions.put('exportPdf', new Action(mxResources.get('formatPdf') + '...', function()
{
if (!EditorUi.isElectronApp && (editorUi.isOffline() || editorUi.printPdfExport))
{
// Export PDF action for chrome OS (same as print with different dialog title)
editorUi.showDialog(new PrintDialog(editorUi, mxResources.get('formatPdf')).container, 360,
(editorUi.pages != null && editorUi.pages.length > 1 && (editorUi.editor.editable ||
urlParams['hide-pages'] != '1')) ?
450 : 370, true, true);
}
else
{
var noPages = editorUi.pages == null || editorUi.pages.length <= 1;
var div = document.createElement('div');
div.style.whiteSpace = 'nowrap';
var hd = document.createElement('h3');
mxUtils.write(hd, mxResources.get('formatPdf'));
hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:4px';
div.appendChild(hd);
var cropEnableFn = function()
{
if (allPages != this && this.checked)
{
crop.removeAttribute('disabled');
crop.checked = !graph.pageVisible;
}
else
{
crop.setAttribute('disabled', 'disabled');
crop.checked = false;
}
};
var dlgH = 180;
if (editorUi.pdfPageExport && !noPages)
{
var allPages = editorUi.addRadiobox(div, 'pages', mxResources.get('allPages'), true);
var currentPage = editorUi.addRadiobox(div, 'pages', mxResources.get('currentPage'), false);
var selection = editorUi.addRadiobox(div, 'pages', mxResources.get('selectionOnly'), false, graph.isSelectionEmpty());
var crop = editorUi.addCheckbox(div, mxResources.get('crop'), false, true);
var grid = editorUi.addCheckbox(div, mxResources.get('grid'), false, false);
mxEvent.addListener(allPages, 'change', cropEnableFn);
mxEvent.addListener(currentPage, 'change', cropEnableFn);
mxEvent.addListener(selection, 'change', cropEnableFn);
dlgH += 60;
}
else
{
var selection = editorUi.addCheckbox(div, mxResources.get('selectionOnly'),
false, graph.isSelectionEmpty());
var crop = editorUi.addCheckbox(div, mxResources.get('crop'),
!graph.pageVisible || !editorUi.pdfPageExport,
!editorUi.pdfPageExport);
var grid = editorUi.addCheckbox(div, mxResources.get('grid'), false, false);
// Crop is only enabled if selection only is selected
if (!editorUi.pdfPageExport)
{
mxEvent.addListener(selection, 'change', cropEnableFn);
}
}
var isDrawioWeb = !mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp &&
editorUi.getServiceName() == 'draw.io';
var transparentBkg = null, include = null;
if (EditorUi.isElectronApp || isDrawioWeb)
{
include = editorUi.addCheckbox(div,
mxResources.get('includeCopyOfMyDiagram'), true);
dlgH += 30;
}
if (isDrawioWeb)
{
transparentBkg = editorUi.addCheckbox(div,
mxResources.get('transparentBackground'), false);
dlgH += 30;
}
var dlg = new CustomDialog(editorUi, div, mxUtils.bind(this, function()
{
editorUi.downloadFile('pdf', null, null, !selection.checked,
noPages? true : !allPages.checked, !crop.checked, transparentBkg != null && transparentBkg.checked, null,
null, grid.checked, include != null && include.checked);
}), null, mxResources.get('export'));
editorUi.showDialog(dlg.container, 300, dlgH, true, true);
}
}));
editorUi.actions.addAction('open...', function()
{
editorUi.pickFile();
});
editorUi.actions.addAction('close', function()
{
var currentFile = editorUi.getCurrentFile();
function fn()
{
if (currentFile != null)
{
currentFile.removeDraft();
}
editorUi.fileLoaded(null);
};
if (currentFile != null && currentFile.isModified())
{
editorUi.confirm(mxResources.get('allChangesLost'), null, fn,
mxResources.get('cancel'), mxResources.get('discardChanges'));
}
else
{
fn();
}
});
editorUi.actions.addAction('editShape...', mxUtils.bind(this, function()
{
var cells = graph.getSelectionCells();
if (graph.getSelectionCount() == 1)
{
var cell = graph.getSelectionCell();
var state = graph.view.getState(cell);
if (state != null && state.shape != null && state.shape.stencil != null)
{
var dlg = new EditShapeDialog(editorUi, cell, mxResources.get('editShape') + ':', 630, 400);
editorUi.showDialog(dlg.container, 640, 480, true, false);
dlg.init();
}
}
}));
editorUi.actions.addAction('revisionHistory...', function()
{
if (!editorUi.isRevisionHistorySupported())
{
editorUi.showError(mxResources.get('error'), mxResources.get('notAvailable'), mxResources.get('ok'));
}
else if (editorUi.spinner.spin(document.body, mxResources.get('loading')))
{
editorUi.getRevisions(mxUtils.bind(this, function(revs, restoreFn)
{
editorUi.spinner.stop();
var dlg = new RevisionDialog(editorUi, revs, restoreFn);
editorUi.showDialog(dlg.container, 640, 480, true, true);
dlg.init();
}), mxUtils.bind(this, function(err)
{
editorUi.handleError(err);
}));
}
});
editorUi.actions.addAction('createRevision', function()
{
editorUi.actions.get('save').funct();
}, null, null, Editor.ctrlKey + '+S');
var action = editorUi.actions.addAction('synchronize', function()
{
editorUi.synchronizeCurrentFile(DrawioFile.SYNC == 'none');
}, null, null, 'Alt+Shift+S');
// Changes the label if synchronization is disabled
if (DrawioFile.SYNC == 'none')
{
action.label = mxResources.get('refresh');
}
editorUi.actions.addAction('upload...', function()
{
var file = editorUi.getCurrentFile();
if (file != null)
{
// Data is pulled from global variable after tab loads
// LATER: Change to use message passing to deal with potential cross-domain
window.drawdata = editorUi.getFileData();
var filename = (file.getTitle() != null) ? file.getTitle() : editorUi.defaultFilename;
editorUi.openLink(window.location.protocol + '//' + window.location.host + '/?create=drawdata&' +
((editorUi.mode == App.MODE_DROPBOX) ? 'mode=dropbox&' : '') +
'title=' + encodeURIComponent(filename), null, true);
}
});
if (typeof(MathJax) !== 'undefined')
{
var action = editorUi.actions.addAction('mathematicalTypesetting', function()
{
var change = new ChangePageSetup(editorUi);
change.ignoreColor = true;
change.ignoreImage = true;
change.mathEnabled = !editorUi.isMathEnabled();
graph.model.execute(change);
});
action.setToggleAction(true);
action.setSelectedCallback(function() { return editorUi.isMathEnabled(); });
action.isEnabled = isGraphEnabled;
}
if (isLocalStorage)
{
var action = editorUi.actions.addAction('showStartScreen', function()
{
mxSettings.setShowStartScreen(!mxSettings.getShowStartScreen());
mxSettings.save();
});
action.setToggleAction(true);
action.setSelectedCallback(function() { return mxSettings.getShowStartScreen(); });
}
var autosaveAction = editorUi.actions.addAction('autosave', function()
{
editorUi.editor.setAutosave(!editorUi.editor.autosave);
});
autosaveAction.setToggleAction(true);
autosaveAction.setSelectedCallback(function()
{
return autosaveAction.isEnabled() && editorUi.editor.autosave;
});
editorUi.actions.addAction('editGeometry...', function()
{
var cells = graph.getSelectionCells();
var vertices = [];
for (var i = 0; i < cells.length; i++)
{
if (graph.getModel().isVertex(cells[i]))
{
vertices.push(cells[i]);
}
}
if (vertices.length > 0)
{
var dlg = new EditGeometryDialog(editorUi, vertices);
editorUi.showDialog(dlg.container, 200, 270, true, true);
dlg.init();
}
}, null, null, Editor.ctrlKey + '+Shift+M');
var currentStyle = null;
editorUi.actions.addAction('copyStyle', function()
{
if (graph.isEnabled() && !graph.isSelectionEmpty())
{
currentStyle = graph.copyStyle(graph.getSelectionCell())
}
}, null, null, Editor.ctrlKey + '+Shift+C');
editorUi.actions.addAction('pasteStyle', function()
{
if (graph.isEnabled() && !graph.isSelectionEmpty() && currentStyle != null)
{
graph.pasteStyle(currentStyle, graph.getSelectionCells())
}
}, null, null, Editor.ctrlKey + '+Shift+V');
editorUi.actions.put('pageBackgroundImage', new Action(mxResources.get('backgroundImage') + '...', function()
{
if (!editorUi.isOffline())
{
var apply = function(image)
{
editorUi.setBackgroundImage(image);
};
var dlg = new BackgroundImageDialog(editorUi, apply);
editorUi.showDialog(dlg.container, 320, 170, true, true);
dlg.init();
}
}));
editorUi.actions.put('exportSvg', new Action(mxResources.get('formatSvg') + '...', function()
{
editorUi.showExportDialog(mxResources.get('formatSvg'), true, mxResources.get('export'),
'https://www.diagrams.net/doc/faq/export-diagram',
mxUtils.bind(this, function(scale, transparentBackground, ignoreSelection, addShadow, editable,
embedImages, border, cropImage, currentPage, linkTarget, grid, keepTheme, exportType)
{
var val = parseInt(scale);
if (!isNaN(val) && val > 0)
{
editorUi.exportSvg(val / 100, transparentBackground, ignoreSelection,
addShadow, editable, embedImages, border, !cropImage, false,
linkTarget, keepTheme, exportType);
}
}), true, null, 'svg', true);
}));
editorUi.actions.put('exportPng', new Action(mxResources.get('formatPng') + '...', function()
{
if (editorUi.isExportToCanvas())
{
editorUi.showExportDialog(mxResources.get('image'), false, mxResources.get('export'),
'https://www.diagrams.net/doc/faq/export-diagram',
mxUtils.bind(this, function(scale, transparentBackground, ignoreSelection, addShadow, editable,
embedImages, border, cropImage, currentPage, dummy, grid, keepTheme, exportType)
{
var val = parseInt(scale);
if (!isNaN(val) && val > 0)
{
editorUi.exportImage(val / 100, transparentBackground, ignoreSelection,
addShadow, editable, border, !cropImage, false, null, grid, null,
keepTheme, exportType);
}
}), true, true, 'png', true);
}
else if (!editorUi.isOffline() && (!mxClient.IS_IOS || !navigator.standalone))
{
editorUi.showRemoteExportDialog(mxResources.get('export'), null, mxUtils.bind(this, function(ignoreSelection, editable, transparent, scale, border)
{
editorUi.downloadFile((editable) ? 'xmlpng' : 'png', null, null, ignoreSelection, null, null, transparent, scale, border);
}), false, true);
}
}));
editorUi.actions.put('exportJpg', new Action(mxResources.get('formatJpg') + '...', function()
{
if (editorUi.isExportToCanvas())
{
editorUi.showExportDialog(mxResources.get('image'), false, mxResources.get('export'),
'https://www.diagrams.net/doc/faq/export-diagram',
mxUtils.bind(this, function(scale, transparentBackground, ignoreSelection, addShadow, editable,
embedImages, border, cropImage, currentPage, dummy, grid, keepTheme, exportType)
{
var val = parseInt(scale);
if (!isNaN(val) && val > 0)
{
editorUi.exportImage(val / 100, false, ignoreSelection,
addShadow, false, border, !cropImage, false, 'jpeg',
grid, null, keepTheme, exportType);
}
}), true, false, 'jpeg', true);
}
else if (!editorUi.isOffline() && (!mxClient.IS_IOS || !navigator.standalone))
{
editorUi.showRemoteExportDialog(mxResources.get('export'), null, mxUtils.bind(this, function(ignoreSelection, editable, tranaparent, scale, border)
{
editorUi.downloadFile('jpeg', null, null, ignoreSelection, null, null, null, scale, border);
}), true, true);
}
}));
action = editorUi.actions.addAction('copyAsImage', mxUtils.bind(this, function()
{
var cells = mxUtils.sortCells(graph.model.getTopmostCells(graph.getSelectionCells()));
var xml = mxUtils.getXml((cells.length == 0) ? editorUi.editor.getGraphXml() : graph.encodeCells(cells));
editorUi.copyImage(cells, xml);
}));
// Disabled in Safari as operation is not allowed
action.visible = Editor.enableNativeCipboard && editorUi.isExportToCanvas() && !mxClient.IS_SF;
action = editorUi.actions.put('shadowVisible', new Action(mxResources.get('shadow'), function()
{
graph.setShadowVisible(!graph.shadowVisible);
}));
action.setToggleAction(true);
action.setSelectedCallback(function() { return graph.shadowVisible; });
editorUi.actions.put('about', new Action(mxResources.get('about') + ' ' + EditorUi.VERSION + '...', function()
{
if (editorUi.isOffline() || mxClient.IS_CHROMEAPP || EditorUi.isElectronApp)
{
editorUi.alert(editorUi.editor.appName + ' ' + EditorUi.VERSION);
}
else
{
editorUi.openLink('https://www.diagrams.net/');
}
}));
editorUi.actions.addAction('support...', function()
{
if (EditorUi.isElectronApp)
{
editorUi.openLink('https://github.com/jgraph/drawio-desktop/wiki/Getting-Support');
}
else
{
editorUi.openLink('https://github.com/jgraph/drawio/wiki/Getting-Support');
}
});
editorUi.actions.addAction('exportOptionsDisabled...', function()
{
editorUi.handleError({message: mxResources.get('exportOptionsDisabledDetails')},
mxResources.get('exportOptionsDisabled'));
});
editorUi.actions.addAction('keyboardShortcuts...', function()
{
if (mxClient.IS_SVG && !mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp)
{
editorUi.openLink('shortcuts.svg');
}
else
{
editorUi.openLink('https://viewer.diagrams.net/#Uhttps%3A%2F%2Fviewer.diagrams.net%2Fshortcuts.svg');
}
});
editorUi.actions.addAction('feedback...', function()
{
var dlg = new FeedbackDialog(editorUi);
editorUi.showDialog(dlg.container, 610, 360, true, false);
dlg.init();
});
editorUi.actions.addAction('quickStart...', function()
{
editorUi.openLink('https://www.youtube.com/watch?v=Z0D96ZikMkc');
});
editorUi.actions.addAction('forkme', function()
{
if (EditorUi.isElectronApp)
{
editorUi.openLink('https://github.com/jgraph/drawio-desktop');
}
else
{
editorUi.openLink('https://github.com/jgraph/drawio');
}
}).label = 'Fork me on GitHub...';
editorUi.actions.addAction('downloadDesktop...', function()
{
editorUi.openLink('https://get.diagrams.net/');
});
action = editorUi.actions.addAction('tags...', mxUtils.bind(this, function()
{
if (this.tagsWindow == null)
{
this.tagsWindow = new TagsWindow(editorUi, document.body.offsetWidth - 380, 230, 300, 120);
this.tagsWindow.window.addListener('show', function()
{
editorUi.fireEvent(new mxEventObject('tags'));
});
this.tagsWindow.window.addListener('hide', function()
{
editorUi.fireEvent(new mxEventObject('tags'));
});
this.tagsWindow.window.setVisible(true);
editorUi.fireEvent(new mxEventObject('tags'));
}
else
{
this.tagsWindow.window.setVisible(!this.tagsWindow.window.isVisible());
}
}));
action.setToggleAction(true);
action.setSelectedCallback(mxUtils.bind(this, function() { return this.tagsWindow != null && this.tagsWindow.window.isVisible(); }));
action = editorUi.actions.addAction('findReplace...', mxUtils.bind(this, function(arg1, evt)
{
var findReplace = graph.isEnabled() && (evt == null || !mxEvent.isShiftDown(evt));
var evtName = (findReplace) ? 'findReplace' : 'find';
var name = evtName + 'Window';
if (this[name] == null)
{
var w = (findReplace) ? ((uiTheme == 'min') ? 330 : 300) : 240;
var h = (findReplace) ? ((uiTheme == 'min') ? 304 : 288) : 170;
this[name] = new FindWindow(editorUi,
document.body.offsetWidth - (w + 20),
100, w, h, findReplace);
this[name].window.addListener('show', function()
{
editorUi.fireEvent(new mxEventObject(evtName));
});
this[name].window.addListener('hide', function()
{
editorUi.fireEvent(new mxEventObject(evtName));
});
this[name].window.setVisible(true);
}
else
{
this[name].window.setVisible(!this[name].window.isVisible());
}
}), null, null, Editor.ctrlKey + '+F');
action.setToggleAction(true);
action.setSelectedCallback(mxUtils.bind(this, function()
{
var name = (graph.isEnabled()) ? 'findReplaceWindow' : 'findWindow';
return this[name] != null && this[name].window.isVisible();
}));
editorUi.actions.put('exportVsdx', new Action(mxResources.get('formatVsdx') + ' (beta)...', function()
{
var noPages = editorUi.pages == null || editorUi.pages.length <= 1;
if (noPages)
{
editorUi.exportVisio();
}
else
{
var div = document.createElement('div');
div.style.whiteSpace = 'nowrap';
var hd = document.createElement('h3');
mxUtils.write(hd, mxResources.get('formatVsdx'));
hd.style.cssText = 'width:100%;text-align:center;margin-top:0px;margin-bottom:4px';
div.appendChild(hd);
var pages = editorUi.addCheckbox(div, mxResources.get('allPages'), !noPages, noPages);
pages.style.marginBottom = '16px';
var dlg = new CustomDialog(editorUi, div, mxUtils.bind(this, function()
{
editorUi.exportVisio(!pages.checked);
}), null, mxResources.get('export'));
editorUi.showDialog(dlg.container, 300, 110, true, true);
}
}));
if (isLocalStorage && localStorage != null && urlParams['embed'] != '1')
{
editorUi.actions.addAction('configuration...', function()
{
// Add help, link button
var value = localStorage.getItem(Editor.configurationKey);
var buttons = [[mxResources.get('reset'), function(evt, input)
{
editorUi.confirm(mxResources.get('areYouSure'), function()
{
try
{
localStorage.removeItem(Editor.configurationKey);
if (mxEvent.isShiftDown(evt))
{
localStorage.removeItem('.drawio-config');
localStorage.removeItem('.mode');
}
editorUi.hideDialog();
editorUi.alert(mxResources.get('restartForChangeRequired'));
}
catch (e)
{
editorUi.handleError(e);
}
});
}]];
if (!EditorUi.isElectronApp)
{
buttons.push([mxResources.get('share'), function(evt, input)
{
if (input.value.length > 0)
{
try
{
var obj = JSON.parse(input.value);
var url = window.location.protocol + '//' + window.location.host +
'/' + editorUi.getSearch() + '#_CONFIG_' +
Graph.compress(JSON.stringify(obj));
var dlg = new EmbedDialog(editorUi, url);
editorUi.showDialog(dlg.container, 440, 240, true);
dlg.init();
}
catch (e)
{
editorUi.handleError(e);
}
}
else
{
editorUi.handleError({message: mxResources.get('invalidInput')});
}
}])
}
var dlg = new TextareaDialog(editorUi, mxResources.get('configuration') + ':',
(value != null) ? JSON.stringify(JSON.parse(value), null, 2) : '', function(newValue)
{
if (newValue != null)
{
try
{
if (newValue.length > 0)
{
var obj = JSON.parse(newValue);
localStorage.setItem(Editor.configurationKey, JSON.stringify(obj));
}
else
{
localStorage.removeItem(Editor.configurationKey);
}
editorUi.hideDialog();
editorUi.alert(mxResources.get('restartForChangeRequired'));
}
catch (e)
{
editorUi.handleError(e);
}
}
}, null, null, null, null, null, true, null, null,
'https://www.diagrams.net/doc/faq/configure-diagram-editor',
buttons);
dlg.textarea.style.width = '600px';
dlg.textarea.style.height = '380px';
editorUi.showDialog(dlg.container, 620, 460, true, false);
dlg.init();
});
}
// Adds language menu to options only if localStorage is available for
// storing the choice. We do not want to use cookies for older browsers.
// Note that the URL param lang=XX is available for setting the language
// in older browsers. URL param has precedence over the saved setting.
if (mxClient.IS_CHROMEAPP || isLocalStorage)
{
this.put('language', new Menu(mxUtils.bind(this, function(menu, parent)
{
var addLangItem = mxUtils.bind(this, function (id)
{
var lang = (id == '') ? mxResources.get('automatic') : mxLanguageMap[id];
var item = null;
if (lang != '')
{
item = menu.addItem(lang, null, mxUtils.bind(this, function()
{
mxSettings.setLanguage(id);
mxSettings.save();
// Shows dialog in new language
mxClient.language = id;
mxResources.loadDefaultBundle = false;
mxResources.add(RESOURCE_BASE);
editorUi.alert(mxResources.get('restartForChangeRequired'));
}), parent);
if (id == mxLanguage || (id == '' && mxLanguage == null))
{
menu.addCheckmark(item, Editor.checkmarkImage);
}
}
return item;
});
var item = addLangItem('');
menu.addSeparator(parent);
// LATER: Sort menu by language name
for(var langId in mxLanguageMap)
{
addLangItem(langId);
}
})));
// Extends the menubar with the language menu
var menusCreateMenuBar = Menus.prototype.createMenubar;
Menus.prototype.createMenubar = function(container)
{
var menubar = menusCreateMenuBar.apply(this, arguments);
if (menubar != null && urlParams['noLangIcon'] != '1')
{
var langMenu = this.get('language');
if (langMenu != null)
{
var elt = menubar.addMenu('', langMenu.funct);
elt.setAttribute('title', mxResources.get('language'));
elt.style.width = '16px';
elt.style.paddingTop = '2px';
elt.style.paddingLeft = '4px';
elt.style.zIndex = '1';
elt.style.position = 'absolute';
elt.style.display = 'block';
elt.style.cursor = 'pointer';
elt.style.right = '17px';
if (uiTheme == 'atlas')
{
elt.style.top = '6px';
elt.style.right = '15px';
}
else if (uiTheme == 'min')
{
elt.style.top = '2px';
}
else
{
elt.style.top = '0px';
}
var icon = document.createElement('div');
icon.style.backgroundImage = 'url(' + Editor.globeImage + ')';
icon.style.backgroundPosition = 'center center';
icon.style.backgroundRepeat = 'no-repeat';
icon.style.backgroundSize = '19px 19px';
icon.style.position = 'absolute';
icon.style.height = '19px';
icon.style.width = '19px';
icon.style.marginTop = '2px';
icon.style.zIndex = '1';
elt.appendChild(icon);
mxUtils.setOpacity(elt, 40);
if (uiTheme == 'atlas' || uiTheme == 'dark')
{
elt.style.opacity = '0.85';
elt.style.filter = 'invert(100%)';
}
document.body.appendChild(elt);
}
}
return menubar;
};
}
editorUi.customLayoutConfig = [{'layout': 'mxHierarchicalLayout',
'config':
{'orientation': 'west',
'intraCellSpacing': 30,
'interRankCellSpacing': 100,
'interHierarchySpacing': 60,
'parallelEdgeSpacing': 10}}];
// Adds action
editorUi.actions.addAction('runLayout', function()
{
var dlg = new TextareaDialog(editorUi, 'Run Layouts:',
JSON.stringify(editorUi.customLayoutConfig, null, 2),
function(newValue)
{
if (newValue.length > 0)
{
try
{
var layoutList = JSON.parse(newValue);
editorUi.executeLayoutList(layoutList)
editorUi.customLayoutConfig = layoutList;
}
catch (e)
{
editorUi.handleError(e);
if (window.console != null)
{
console.error(e);
}
}
}
}, null, null, null, null, null, true, null, null,
'https://www.diagrams.net/doc/faq/apply-layouts');
dlg.textarea.style.width = '600px';
dlg.textarea.style.height = '380px';
editorUi.showDialog(dlg.container, 620, 460, true, true);
dlg.init();
});
var layoutMenu = this.get('layout');
var layoutMenuFunct = layoutMenu.funct;
layoutMenu.funct = function(menu, parent)
{
layoutMenuFunct.apply(this, arguments);
menu.addItem(mxResources.get('orgChart'), null, function()
{
var branchOptimizer = null, parentChildSpacingVal = 20, siblingSpacingVal = 20, notExecuted = true;
// Invoked when orgchart code was loaded
var delayed = function()
{
editorUi.loadingOrgChart = false;
editorUi.spinner.stop();
if (typeof mxOrgChartLayout !== 'undefined' && branchOptimizer != null && notExecuted)
{
var graph = editorUi.editor.graph;
var orgChartLayout = new mxOrgChartLayout(graph, branchOptimizer, parentChildSpacingVal, siblingSpacingVal);
var cell = graph.getDefaultParent();
if (graph.model.getChildCount(graph.getSelectionCell()) > 1)
{
cell = graph.getSelectionCell();
}
orgChartLayout.execute(cell);
notExecuted = false;
}
};
// Invoked from dialog
function doLayout()
{
if (typeof mxOrgChartLayout === 'undefined' && !editorUi.loadingOrgChart && !editorUi.isOffline(true))
{
if (editorUi.spinner.spin(document.body, mxResources.get('loading')))
{
editorUi.loadingOrgChart = true;
if (urlParams['dev'] == '1')
{
mxscript('js/orgchart/bridge.min.js', function()
{
mxscript('js/orgchart/bridge.collections.min.js', function()
{
mxscript('js/orgchart/OrgChart.Layout.min.js', function()
{
mxscript('js/orgchart/mxOrgChartLayout.js', delayed);
});
});
});
}
else
{
mxscript('js/extensions.min.js', delayed);
}
}
}
else
{
delayed();
}
};
var div = document.createElement('div');
var title = document.createElement('div');
title.style.marginTop = '6px';
title.style.display = 'inline-block';
title.style.width = '140px';
mxUtils.write(title, mxResources.get('orgChartType') + ': ');
div.appendChild(title);
var typeSelect = document.createElement('select');
typeSelect.style.width = '200px';
typeSelect.style.boxSizing = 'border-box';
//Types are hardcoded here since the code is not loaded yet
var typesArr = [mxResources.get('linear'),
mxResources.get('hanger2'),
mxResources.get('hanger4'),
mxResources.get('fishbone1'),
mxResources.get('fishbone2'),
mxResources.get('1ColumnLeft'),
mxResources.get('1ColumnRight'),
mxResources.get('smart')
];
for (var i = 0; i < typesArr.length; i++)
{
var option = document.createElement('option');
mxUtils.write(option, typesArr[i]);
option.value = i;
if (i == 2)
{
option.setAttribute('selected', 'selected');
}
typeSelect.appendChild(option);
}
mxEvent.addListener(typeSelect, 'change', function()
{
branchOptimizer = typeSelect.value;
});
div.appendChild(typeSelect);
title = document.createElement('div');
title.style.marginTop = '6px';
title.style.display = 'inline-block';
title.style.width = '140px';
mxUtils.write(title, mxResources.get('parentChildSpacing') + ': ');
div.appendChild(title);
var parentChildSpacing = document.createElement('input');
parentChildSpacing.type = 'number';
parentChildSpacing.value = parentChildSpacingVal;
parentChildSpacing.style.width = '200px';
parentChildSpacing.style.boxSizing = 'border-box';
div.appendChild(parentChildSpacing);
mxEvent.addListener(parentChildSpacing, 'change', function()
{
parentChildSpacingVal = parentChildSpacing.value;
});
title = document.createElement('div');
title.style.marginTop = '6px';
title.style.display = 'inline-block';
title.style.width = '140px';
mxUtils.write(title, mxResources.get('siblingSpacing') + ': ');
div.appendChild(title);
var siblingSpacing = document.createElement('input');
siblingSpacing.type = 'number';
siblingSpacing.value = siblingSpacingVal;
siblingSpacing.style.width = '200px';
siblingSpacing.style.boxSizing = 'border-box';
div.appendChild(siblingSpacing);
mxEvent.addListener(siblingSpacing, 'change', function()
{
siblingSpacingVal = siblingSpacing.value;
});
var dlg = new CustomDialog(editorUi, div, function()
{
if (branchOptimizer == null)
{
branchOptimizer = 2;
}
doLayout();
});
editorUi.showDialog(dlg.container, 355, 125, true, true);
}, parent, null, isGraphEnabled());
menu.addSeparator(parent);
menu.addItem(mxResources.get('parallels'), null, mxUtils.bind(this, function()
{
// Keeps parallel edges apart
var layout = new mxParallelEdgeLayout(graph);
layout.checkOverlap = true;
layout.spacing = 20;
editorUi.executeLayout(function()
{
layout.execute(graph.getDefaultParent(), (!graph.isSelectionEmpty()) ?
graph.getSelectionCells() : null);
}, false);
}), parent);
menu.addSeparator(parent);
editorUi.menus.addMenuItem(menu, 'runLayout', parent, null, null, mxResources.get('apply') + '...');
};
this.put('help', new Menu(mxUtils.bind(this, function(menu, parent)
{
if (!mxClient.IS_CHROMEAPP && editorUi.isOffline())
{
this.addMenuItems(menu, ['about'], parent);
}
else
{
// No translation for menu item since help is english only
var item = menu.addItem('Search:', null, null, parent, null, null, false);
item.style.backgroundColor = Editor.isDarkMode() ? '#505759' : 'whiteSmoke';
item.style.cursor = 'default';
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('size', '25');
input.style.marginLeft = '8px';
mxEvent.addListener(input, 'keydown', mxUtils.bind(this, function(e)
{
var term = mxUtils.trim(input.value);
if (e.keyCode == 13 && term.length > 0)
{
this.editorUi.openLink('https://www.google.com/search?q=site%3Adiagrams.net+inurl%3A%2Fdoc%2Ffaq%2F+' +
encodeURIComponent(term));
input.value = '';
EditorUi.logEvent({category: 'SEARCH-HELP', action: 'search', label: term});
window.setTimeout(mxUtils.bind(this, function()
{
this.editorUi.hideCurrentMenu();
}), 0);
}
else if (e.keyCode == 27)
{
input.value = '';
}
}));
item.firstChild.nextSibling.appendChild(input);
mxEvent.addGestureListeners(input, function(evt)
{
if (document.activeElement != input)
{
input.focus();
}
mxEvent.consume(evt);
}, function(evt)
{
mxEvent.consume(evt);
}, function(evt)
{
mxEvent.consume(evt);
});
window.setTimeout(function()
{
input.focus();
}, 0);
if (EditorUi.isElectronApp)
{
console.log('electron help menu');
this.addMenuItems(menu, ['-', 'keyboardShortcuts', 'quickStart',
'support', '-', 'forkme', '-', 'about'], parent);
}
else
{
this.addMenuItems(menu, ['-', 'keyboardShortcuts', 'quickStart',
'support', '-', 'forkme', 'downloadDesktop', '-', 'about'], parent);
}
}
if (urlParams['test'] == '1')
{
menu.addSeparator(parent);
this.addSubmenu('testDevelop', menu, parent);
}
})));
// Experimental
mxResources.parse('diagramLanguage=Diagram Language');
editorUi.actions.addAction('diagramLanguage...', function()
{
var lang = prompt('Language Code', Graph.diagramLanguage || '');
if (lang != null)
{
Graph.diagramLanguage = (lang.length > 0) ? lang : null;
graph.refresh();
}
});
// Only visible in test mode
if (urlParams['test'] == '1')
{
mxResources.parse('testDevelop=Develop');
mxResources.parse('showBoundingBox=Show bounding box');
mxResources.parse('createSidebarEntry=Create Sidebar Entry');
mxResources.parse('testCheckFile=Check File');
mxResources.parse('testDiff=Diff/Sync');
mxResources.parse('testInspect=Inspect');
mxResources.parse('testShowConsole=Show Console');
mxResources.parse('testXmlImageExport=XML Image Export');
mxResources.parse('testDownloadRtModel=Export RT model');
mxResources.parse('testImportRtModel=Import RT model');
editorUi.actions.addAction('createSidebarEntry', mxUtils.bind(this, function()
{
if (!graph.isSelectionEmpty())
{
var cells = graph.cloneCells(graph.getSelectionCells());
var bbox = graph.getBoundingBoxFromGeometry(cells);
cells = graph.moveCells(cells, -bbox.x, -bbox.y);
editorUi.showTextDialog('Create Sidebar Entry', 'this.addDataEntry(\'tag1 tag2\', ' +
bbox.width + ', ' + bbox.height + ', \'The Title\', \'' +
Graph.compress(mxUtils.getXml(graph.encodeCells(cells))) + '\'),');
}
}));
editorUi.actions.addAction('showBoundingBox', mxUtils.bind(this, function()
{
var b = graph.getGraphBounds();
var tr = graph.view.translate;
var s = graph.view.scale;
graph.insertVertex(graph.getDefaultParent(), null, '',
b.x / s - tr.x, b.y / s - tr.y, b.width / s, b.height / s,
'fillColor=none;strokeColor=red;');
}));
editorUi.actions.addAction('testCheckFile', mxUtils.bind(this, function()
{
var xml = (editorUi.pages != null && editorUi.getCurrentFile() != null) ?
editorUi.getCurrentFile().getAnonymizedXmlForPages(editorUi.pages) : '';
var dlg = new TextareaDialog(editorUi, 'Paste Data:', xml,
function(newValue)
{
if (newValue.length > 0)
{
try
{
if (newValue.charAt(0) != '<')
{
newValue = Graph.decompress(newValue);
mxLog.debug('See console for uncompressed XML');
console.log('xml', newValue);
}
var doc = mxUtils.parseXml(newValue);
var pages = editorUi.getPagesForNode(doc.documentElement, 'mxGraphModel');
if (pages != null && pages.length > 0)
{
try
{
var checksum = editorUi.getHashValueForPages(pages);
mxLog.debug('Checksum: ', checksum);
}
catch (e)
{
mxLog.debug('Error: ', e.message);
}
}
else
{
mxLog.debug('No pages found for checksum');
}
// Checks for duplicates
function checkModel(node)
{
var pageId = node.parentNode.id;
var all = node.childNodes;
var allIds = {};
var childs = {};
var root = null;
var dups = {};
for (var i = 0; i < all.length; i++)
{
var el = all[i];
if (el.id != null && el.id.length > 0)
{
if (allIds[el.id] == null)
{
allIds[el.id] = el.id;
var pid = el.getAttribute('parent');
if (pid == null)
{
if (root != null)
{
mxLog.debug(pageId + ': Multiple roots: ' + el.id);
}
else
{
root = el.id;
}
}
else
{
if (childs[pid] == null)
{
childs[pid] = [];
}
childs[pid].push(el.id);
}
}
else
{
dups[el.id] = el.id;
}
}
}
if (Object.keys(dups).length > 0)
{
var log = pageId + ': ' + Object.keys(dups).length + ' Duplicates: ' + Object.keys(dups).join(', ');
mxLog.debug(log + ' (see console)');
}
else
{
mxLog.debug(pageId + ': Checked');
}
// Checks tree for cycles
var visited = {};
function visit(id)
{
if (visited[id] == null)
{
visited[id] = true;
if (childs[id] != null)
{
while (childs[id].length > 0)
{
var temp = childs[id].pop();
visit(temp);
}
delete childs[id];
}
}
else
{
mxLog.debug(pageId + ': Visited: ' + id);
}
};
if (root == null)
{
mxLog.debug(pageId + ': No root');
}
else
{
visit(root);
if (Object.keys(visited).length != Object.keys(allIds).length)
{
mxLog.debug(pageId + ': Invalid tree: (see console)');
console.log(pageId + ': Invalid tree', childs);
}
}
};
var roots = doc.getElementsByTagName('root');
for (var i = 0; i < roots.length; i++)
{
checkModel(roots[i]);
}
mxLog.show();
}
catch (e)
{
editorUi.handleError(e);
if (window.console != null)
{
console.error(e);
}
}
}
});
dlg.textarea.style.width = '600px';
dlg.textarea.style.height = '380px';
editorUi.showDialog(dlg.container, 620, 460, true, true);
dlg.init();
}));
var snapshot = null;
editorUi.actions.addAction('testDiff', mxUtils.bind(this, function()
{
if (editorUi.pages != null)
{
var buttons = [['Snapshot', function(evt, input)
{
snapshot = editorUi.getPagesForNode(mxUtils.parseXml(
editorUi.getFileData(true)).documentElement);
dlg.textarea.value = 'Snapshot updated ' + new Date().toLocaleString();
}], ['Diff', function(evt, input)
{
try
{
dlg.textarea.value = JSON.stringify(editorUi.diffPages(
snapshot, editorUi.pages), null, 2);
}
catch (e)
{
editorUi.handleError(e);
}
}]];
var dlg = new TextareaDialog(editorUi, 'Diff/Sync:', '',
function(newValue)
{
var file = editorUi.getCurrentFile();
if (newValue.length > 0 && file != null)
{
try
{
var patch = JSON.parse(newValue);
file.patch([patch], null, true);
editorUi.hideDialog();
}
catch (e)
{
editorUi.handleError(e);
}
}
}, null, 'Close', null, null, null, true, null, 'Patch', null, buttons);
dlg.textarea.style.width = '600px';
dlg.textarea.style.height = '380px';
if (snapshot == null)
{
snapshot = editorUi.getPagesForNode(mxUtils.parseXml(
editorUi.getFileData(true)).documentElement);
dlg.textarea.value = 'Snapshot created ' + new Date().toLocaleString();
}
else
{
dlg.textarea.value = JSON.stringify(editorUi.diffPages(
snapshot, editorUi.pages), null, 2);
}
editorUi.showDialog(dlg.container, 620, 460, true, true);
dlg.init();
}
else
{
editorUi.alert('No pages');
}
}));
editorUi.actions.addAction('testInspect',