drawio-offline
Version:
diagrams.net desktop
1,773 lines (1,533 loc) • 297 kB
JavaScript
/**
* Copyright (c) 2006-2020, JGraph Ltd
* Copyright (c) 2006-2020, draw.io AG
*/
var StorageDialog = function(editorUi, fn, rowLimit)
{
rowLimit = (rowLimit != null) ? rowLimit : 2;
var div = document.createElement('div');
div.style.textAlign = 'center';
div.style.whiteSpace = 'nowrap';
div.style.paddingTop = '0px';
div.style.paddingBottom = '20px';
var buttons = document.createElement('div');
buttons.style.border = '1px solid #d3d3d3';
buttons.style.borderWidth = '1px 0px 1px 0px';
buttons.style.padding = '10px 0px 20px 0px';
var count = 0;
var container = document.createElement('div');
container.style.paddingTop = '2px';
buttons.appendChild(container);
var p3 = document.createElement('p');
function addLogo(img, title, mode, clientName, labels, clientFn)
{
if (++count > rowLimit)
{
mxUtils.br(container);
count = 0;
}
var button = document.createElement('a');
button.style.overflow = 'hidden';
button.style.display = 'inline-block';
button.className = 'geBaseButton';
button.style.boxSizing = 'border-box';
button.style.fontSize = '11px';
button.style.position = 'relative';
button.style.margin = '4px';
button.style.marginTop = '8px';
button.style.marginBottom = '0px';
button.style.padding = '8px 10px 8px 10px';
button.style.width = '88px';
button.style.height = '100px';
button.style.whiteSpace = 'nowrap';
button.setAttribute('title', title);
var label = document.createElement('div');
label.style.textOverflow = 'ellipsis';
label.style.overflow = 'hidden';
label.style.position = 'absolute';
label.style.bottom = '8px';
label.style.left = '0px';
label.style.right = '0px';
mxUtils.write(label, title);
button.appendChild(label);
if (img != null)
{
var logo = document.createElement('img');
logo.setAttribute('src', img);
logo.setAttribute('border', '0');
logo.setAttribute('align', 'absmiddle');
logo.style.width = '60px';
logo.style.height = '60px';
logo.style.paddingBottom = '6px';
button.appendChild(logo);
}
else
{
label.style.paddingTop = '5px';
label.style.whiteSpace = 'normal';
// Handles special case
if (mxClient.IS_IOS)
{
button.style.padding = '0px 10px 20px 10px';
button.style.top = '6px';
}
else if (mxClient.IS_FF)
{
label.style.paddingTop = '0px';
label.style.marginTop = '-2px';
}
}
if (labels != null)
{
for (var i = 0; i < labels.length; i++)
{
mxUtils.br(label);
mxUtils.write(label, labels[i]);
}
}
function initButton()
{
mxEvent.addListener(button, 'click', (clientFn != null) ? clientFn : function()
{
// Special case: Redirect all drive users to draw.io pro
if (mode == App.MODE_GOOGLE && !editorUi.isDriveDomain())
{
window.location.hostname = DriveClient.prototype.newAppHostname;
}
else if (mode == App.MODE_GOOGLE && editorUi.spinner.spin(document.body, mxResources.get('authorizing')))
{
// Tries immediate authentication
editorUi.drive.checkToken(mxUtils.bind(this, function()
{
editorUi.spinner.stop();
editorUi.setMode(mode, true);
fn();
}));
}
else if (mode == App.MODE_ONEDRIVE && editorUi.spinner.spin(document.body, mxResources.get('authorizing')))
{
// Tries immediate authentication
editorUi.oneDrive.checkToken(mxUtils.bind(this, function()
{
editorUi.spinner.stop();
editorUi.setMode(mode, true);
fn();
}));
}
else
{
editorUi.setMode(mode, true);
fn();
}
});
};
// Supports lazy loading
if (clientName != null && editorUi[clientName] == null)
{
logo.style.visibility = 'hidden';
mxUtils.setOpacity(label, 10);
var size = 12;
var spinner = new Spinner({
lines: 12, // The number of lines to draw
length: size, // The length of each line
width: 5, // The line thickness
radius: 10, // The radius of the inner circle
rotate: 0, // The rotation offset
color: Editor.isDarkMode() ? '#c0c0c0' : '#000', // #rgb or #rrggbb
speed: 1.5, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
top: '40%',
zIndex: 2e9 // The z-index (defaults to 2000000000)
});
spinner.spin(button);
// Timeout after 30 secs
var timeout = window.setTimeout(function()
{
if (editorUi[clientName] == null)
{
spinner.stop();
button.style.display = 'none';
}
}, 30000);
editorUi.addListener('clientLoaded', mxUtils.bind(this, function(sender, evt)
{
if (editorUi[clientName] != null && evt.getProperty('client') == editorUi[clientName])
{
window.clearTimeout(timeout);
mxUtils.setOpacity(label, 100);
logo.style.visibility = '';
spinner.stop();
initButton();
if (clientName == 'drive' && p3.parentNode != null)
{
p3.parentNode.removeChild(p3);
}
}
}));
}
else
{
initButton();
}
container.appendChild(button);
};
var hd = document.createElement('p');
hd.style.cssText = 'font-size:22px;padding:4px 0 16px 0;margin:0;color:gray;';
mxUtils.write(hd, mxResources.get('saveDiagramsTo') + ':');
div.appendChild(hd);
var addButtons = function()
{
count = 0;
if (typeof window.DriveClient === 'function')
{
addLogo(IMAGE_PATH + '/google-drive-logo.svg', mxResources.get('googleDrive'), App.MODE_GOOGLE, 'drive');
}
if (typeof window.OneDriveClient === 'function')
{
addLogo(IMAGE_PATH + '/onedrive-logo.svg', mxResources.get('oneDrive'), App.MODE_ONEDRIVE, 'oneDrive');
}
addLogo(IMAGE_PATH + '/osa_drive-harddisk.png', mxResources.get('device'), App.MODE_DEVICE);
if (isLocalStorage && (urlParams['browser'] == '1' || urlParams['offline'] == '1'))
{
addLogo(IMAGE_PATH + '/osa_database.png', mxResources.get('browser'), App.MODE_BROWSER);
}
if (typeof window.DropboxClient === 'function')
{
addLogo(IMAGE_PATH + '/dropbox-logo.svg', mxResources.get('dropbox'), App.MODE_DROPBOX, 'dropbox');
}
if (editorUi.gitHub != null)
{
addLogo(IMAGE_PATH + '/github-logo.svg', mxResources.get('github'), App.MODE_GITHUB, 'gitHub');
}
if (editorUi.gitLab != null)
{
addLogo(IMAGE_PATH + '/gitlab-logo.svg', mxResources.get('gitlab'), App.MODE_GITLAB, 'gitLab');
}
};
div.appendChild(buttons);
addButtons();
var later = document.createElement('span');
later.style.cssText = 'position:absolute;cursor:pointer;bottom:27px;color:gray;userSelect:none;text-align:center;left:50%;';
mxUtils.setPrefixedStyle(later.style, 'transform', 'translate(-50%,0)');
mxUtils.write(later, mxResources.get('decideLater'));
mxEvent.addListener(later, 'click', function()
{
editorUi.hideDialog();
var prev = Editor.useLocalStorage;
editorUi.createFile(editorUi.defaultFilename,
null, null, null, null, null, null, true);
Editor.useLocalStorage = prev;
});
div.appendChild(later);
// Checks if Google Drive is missing after a 5 sec delay
if (mxClient.IS_SVG && isLocalStorage && urlParams['gapi'] != '0' &&
(document.documentMode == null || document.documentMode >= 10))
{
window.setTimeout(function()
{
if (editorUi.drive == null)
{
// To check for Disconnect plugin in chrome use mxClient.IS_GC and check for URL:
// chrome-extension://jeoacafpbcihiomhlakheieifhpjdfeo/scripts/vendor/jquery/jquery-2.0.3.min.map
p3.style.padding = '7px';
p3.style.fontSize = '9pt';
p3.style.marginTop = '-14px';
p3.innerHTML = '<a style="background-color:#dcdcdc;padding:6px;color:black;text-decoration:none;" ' +
'href="https://desk.draw.io/a/solutions/articles/16000074659" target="_blank">' +
'<img border="0" src="' + mxGraph.prototype.warningImage.src + '" align="absmiddle" ' +
'style="margin-top:-4px"> ' + mxResources.get('googleDriveMissingClickHere') + '</a>';
div.appendChild(p3);
}
}, 5000);
}
this.container = div;
};
/**
* Constructs a dialog for creating new files from templates.
*/
var SplashDialog = function(editorUi)
{
var div = document.createElement('div');
div.style.textAlign = 'center';
if (mxClient.IS_CHROMEAPP || EditorUi.isElectronApp)
{
var elt = editorUi.addLanguageMenu(div, true);
if (elt != null)
{
elt.style.bottom = '19px';
}
}
var serviceCount = editorUi.getServiceCount();
var logo = document.createElement('img');
logo.setAttribute('border', '0');
logo.setAttribute('align', 'absmiddle');
logo.style.width = '32px';
logo.style.height = '32px';
logo.style.marginRight = '8px';
logo.style.marginTop = '-4px';
var buttons = document.createElement('div');
buttons.style.margin = '8px 0px 0px 0px';
buttons.style.padding = '18px 0px 24px 0px';
var service = '';
if (editorUi.mode == App.MODE_GOOGLE)
{
logo.src = IMAGE_PATH + '/google-drive-logo.svg';
service = mxResources.get('googleDrive');
}
else if (editorUi.mode == App.MODE_DROPBOX)
{
logo.src = IMAGE_PATH + '/dropbox-logo.svg';
service = mxResources.get('dropbox');
}
else if (editorUi.mode == App.MODE_ONEDRIVE)
{
logo.src = IMAGE_PATH + '/onedrive-logo.svg';
service = mxResources.get('oneDrive');
}
else if (editorUi.mode == App.MODE_GITHUB)
{
logo.src = IMAGE_PATH + '/github-logo.svg';
service = mxResources.get('github');
}
else if (editorUi.mode == App.MODE_GITLAB)
{
logo.src = IMAGE_PATH + '/gitlab-logo.svg';
service = mxResources.get('gitlab');
}
else if (editorUi.mode == App.MODE_BROWSER)
{
logo.src = IMAGE_PATH + '/osa_database.png';
service = mxResources.get('browser');
}
else if (editorUi.mode == App.MODE_TRELLO)
{
logo.src = IMAGE_PATH + '/trello-logo.svg';
service = mxResources.get('trello');
}
else
{
logo.src = IMAGE_PATH + '/osa_drive-harddisk.png';
buttons.style.paddingBottom = '10px';
buttons.style.paddingTop = '30px';
service = mxResources.get('device');
}
var btn = document.createElement('button');
btn.className = 'geBigButton';
btn.style.marginBottom = '8px';
btn.style.fontSize = '18px';
btn.style.padding = '10px';
btn.style.width = '340px';
if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp)
{
buttons.style.border = '1px solid #d3d3d3';
buttons.style.borderWidth = '1px 0px 1px 0px';
var table = document.createElement('table');
var tbody = document.createElement('tbody');
var row = document.createElement('tr');
var left = document.createElement('td');
var right = document.createElement('td');
table.setAttribute('align', 'center');
left.appendChild(logo);
var title = document.createElement('div');
title.style.fontSize = '22px';
title.style.paddingBottom = '6px';
title.style.color = 'gray';
mxUtils.write(title, service);
right.style.textAlign = 'left';
right.appendChild(title);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
table.appendChild(tbody);
div.appendChild(table);
var change = document.createElement('span');
change.style.cssText = 'position:absolute;cursor:pointer;bottom:27px;color:gray;userSelect:none;text-align:center;left:50%;';
mxUtils.setPrefixedStyle(change.style, 'transform', 'translate(-50%,0)');
mxUtils.write(change, mxResources.get('changeStorage'));
mxEvent.addListener(change, 'click', function()
{
editorUi.hideDialog(false);
editorUi.setMode(null);
editorUi.clearMode();
editorUi.showSplash(true);
});
div.appendChild(change);
}
else
{
buttons.style.padding = '42px 0px 56px 0px';
btn.style.marginBottom = '12px';
}
mxUtils.write(btn, mxResources.get('createNewDiagram'));
mxEvent.addListener(btn, 'click', function()
{
editorUi.hideDialog();
editorUi.actions.get('new').funct();
});
buttons.appendChild(btn);
mxUtils.br(buttons);
var btn = document.createElement('button');
btn.className = 'geBigButton';
btn.style.marginBottom = '22px';
btn.style.fontSize = '18px';
btn.style.padding = '10px';
btn.style.width = '340px';
mxUtils.write(btn, mxResources.get('openExistingDiagram'));
mxEvent.addListener(btn, 'click', function()
{
editorUi.actions.get('open').funct();
});
buttons.appendChild(btn);
var storage = 'undefined';
if (editorUi.mode == App.MODE_GOOGLE)
{
storage = mxResources.get('googleDrive');
}
else if (editorUi.mode == App.MODE_DROPBOX)
{
storage = mxResources.get('dropbox');
}
else if (editorUi.mode == App.MODE_ONEDRIVE)
{
storage = mxResources.get('oneDrive');
}
else if (editorUi.mode == App.MODE_GITHUB)
{
storage = mxResources.get('github');
}
else if (editorUi.mode == App.MODE_GITLAB)
{
storage = mxResources.get('gitlab');
}
else if (editorUi.mode == App.MODE_TRELLO)
{
storage = mxResources.get('trello');
}
else if (editorUi.mode == App.MODE_DEVICE)
{
storage = mxResources.get('device');
}
else if (editorUi.mode == App.MODE_BROWSER)
{
storage = mxResources.get('browser');
}
if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp)
{
function addLogout(logout)
{
btn.style.marginBottom = '24px';
var link = document.createElement('a');
link.style.display = 'inline-block';
link.style.color = 'gray';
link.style.cursor = 'pointer';
link.style.marginTop = '6px';
mxUtils.write(link, mxResources.get('signOut'));
// Makes room after last big buttons
btn.style.marginBottom = '16px';
buttons.style.paddingBottom = '18px';
mxEvent.addListener(link, 'click', function()
{
editorUi.confirm(mxResources.get('areYouSure'), function()
{
logout();
});
});
buttons.appendChild(link);
};
if (editorUi.mode == App.MODE_GOOGLE && editorUi.drive != null)
{
var driveUsers =editorUi.drive.getUsersList();
if (driveUsers.length > 0)
{
var title = document.createElement('span');
title.style.marginTop = '6px';
mxUtils.write(title, mxResources.get('changeUser') + ':');
// Makes room after last big buttons
btn.style.marginBottom = '16px';
buttons.style.paddingBottom = '18px';
buttons.appendChild(title);
var usersSelect = document.createElement('select');
usersSelect.style.marginLeft = '4px';
usersSelect.style.width = '140px';
for (var i = 0; i < driveUsers.length; i++)
{
var option = document.createElement('option');
mxUtils.write(option, driveUsers[i].displayName);
option.value = i;
usersSelect.appendChild(option);
//More info (email) about the user in a disabled option
option = document.createElement('option');
option.innerHTML = ' ';
mxUtils.write(option, '<' + driveUsers[i].email + '>');
option.setAttribute('disabled', 'disabled');
usersSelect.appendChild(option);
}
//Add account option
var option = document.createElement('option');
mxUtils.write(option, mxResources.get('addAccount'));
option.value = driveUsers.length;
usersSelect.appendChild(option);
mxEvent.addListener(usersSelect, 'change', function()
{
var userIndex = usersSelect.value;
var existingAccount = driveUsers.length != userIndex;
if (existingAccount)
{
editorUi.drive.setUser(driveUsers[userIndex]);
}
editorUi.drive.authorize(existingAccount, function()
{
editorUi.setMode(App.MODE_GOOGLE);
editorUi.hideDialog();
editorUi.showSplash();
}, function(resp)
{
editorUi.handleError(resp, null, function()
{
editorUi.hideDialog();
editorUi.showSplash();
});
}, true);
});
buttons.appendChild(usersSelect);
}
else
{
addLogout(function()
{
editorUi.drive.logout();
});
}
}
else if (editorUi.mode == App.MODE_ONEDRIVE && editorUi.oneDrive != null && !editorUi.oneDrive.noLogout)
{
addLogout(function()
{
editorUi.oneDrive.logout();
});
}
else if (editorUi.mode == App.MODE_GITHUB && editorUi.gitHub != null)
{
addLogout(function()
{
editorUi.gitHub.logout();
editorUi.openLink('https://www.github.com/logout');
});
}
else if (editorUi.mode == App.MODE_GITLAB && editorUi.gitLab != null)
{
addLogout(function()
{
editorUi.gitLab.logout();
editorUi.openLink(DRAWIO_GITLAB_URL + '/users/sign_out');
});
}
else if (editorUi.mode == App.MODE_TRELLO && editorUi.trello != null)
{
if (editorUi.trello.isAuthorized())
{
addLogout(function()
{
editorUi.trello.logout();
});
}
}
else if (editorUi.mode == App.MODE_DROPBOX && editorUi.dropbox != null)
{
// NOTE: Dropbox has a logout option in the picker
addLogout(function()
{
editorUi.dropbox.logout();
editorUi.openLink('https://www.dropbox.com/logout');
});
}
}
div.appendChild(buttons);
this.container = div;
};
/**
* Constructs a new embed dialog
*/
var EmbedDialog = function(editorUi, result, timeout, ignoreSize, previewFn, title, tweet)
{
tweet = (tweet != null) ? tweet : 'Check out the diagram I made using @drawio';
var div = document.createElement('div');
var maxSize = 500000;
var maxFbSize = 51200;
var maxTwitterSize = 7168;
// Checks if result is a link
var validUrl = /^https?:\/\//.test(result) || /^mailto:\/\//.test(result);
if (title != null)
{
mxUtils.write(div, title);
}
else
{
mxUtils.write(div, mxResources.get((result.length < maxSize) ?
((validUrl) ? 'link' : 'mainEmbedNotice') : 'preview') + ':');
}
mxUtils.br(div);
var size = document.createElement('div');
size.style.position = 'absolute';
size.style.top = '30px';
size.style.right = '30px';
size.style.color = 'gray';
mxUtils.write(size, editorUi.formatFileSize(result.length));
div.appendChild(size);
// Using DIV for faster rendering
var text = document.createElement('textarea');
text.setAttribute('autocomplete', 'off');
text.setAttribute('autocorrect', 'off');
text.setAttribute('autocapitalize', 'off');
text.setAttribute('spellcheck', 'false');
text.style.fontFamily = 'monospace';
text.style.wordBreak = 'break-all';
text.style.marginTop = '10px';
text.style.resize = 'none';
text.style.height = '150px';
text.style.width = '440px';
text.style.border = '1px solid gray';
text.value = mxResources.get('updatingDocument');
div.appendChild(text);
mxUtils.br(div);
this.init = function()
{
window.setTimeout(function()
{
if (result.length < maxSize)
{
text.value = result;
text.focus();
if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
{
text.select();
}
else
{
document.execCommand('selectAll', false, null);
}
}
else
{
text.setAttribute('readonly', 'true');
text.value = mxResources.get('tooLargeUseDownload');
}
}, 0);
};
var buttons = document.createElement('div');
buttons.style.position = 'absolute';
buttons.style.bottom = '36px';
buttons.style.right = '32px';
var previewBtn = null;
// Loads forever in IE9
if (EmbedDialog.showPreviewOption && (!mxClient.IS_CHROMEAPP || validUrl) && !navigator.standalone && (validUrl ||
(mxClient.IS_SVG && (document.documentMode == null || document.documentMode > 9))))
{
previewBtn = mxUtils.button(mxResources.get((result.length < maxSize) ? 'preview' : 'openInNewWindow'), function()
{
var value = (result.length < maxSize) ? text.value : result;
if (previewFn != null)
{
previewFn(value);
}
else
{
if (validUrl)
{
try
{
var win = editorUi.openLink(value);
if (win != null && (timeout == null || timeout > 0))
{
window.setTimeout(mxUtils.bind(this, function()
{
try
{
if (win != null && win.location.href != null &&
win.location.href.substring(0, 8) != value.substring(0, 8))
{
win.close();
editorUi.handleError({message: mxResources.get('drawingTooLarge')});
}
}
catch (e)
{
// ignore
}
}), timeout || 500);
}
}
catch (e)
{
editorUi.handleError({message: e.message || mxResources.get('drawingTooLarge')});
}
}
else
{
var wnd = window.open();
var doc = (wnd != null) ? wnd.document : null;
if (doc != null)
{
doc.writeln('<html><head><title>' + encodeURIComponent(mxResources.get('preview')) +
'</title><meta charset="utf-8"></head>' +
'<body>' + result + '</body></html>');
doc.close();
}
else
{
editorUi.handleError({message: mxResources.get('errorUpdatingPreview')});
}
}
}
});
previewBtn.className = 'geBtn';
buttons.appendChild(previewBtn);
}
if (!validUrl || result.length > 7500)
{
var downloadBtn = mxUtils.button(mxResources.get('download'), function()
{
editorUi.hideDialog();
editorUi.saveData('embed.txt', 'txt', result, 'text/plain');
});
downloadBtn.className = 'geBtn';
buttons.appendChild(downloadBtn);
}
// Twitter-intent does not allow more characters, must be pasted manually
if (validUrl && (!editorUi.isOffline() || mxClient.IS_CHROMEAPP))
{
if (result.length < maxFbSize)
{
var fbBtn = mxUtils.button('', function()
{
try
{
var url = 'https://www.facebook.com/sharer.php?p[url]=' +
encodeURIComponent(text.value);
editorUi.openLink(url);
}
catch (e)
{
editorUi.handleError({message: e.message || mxResources.get('drawingTooLarge')});
}
});
var img = document.createElement('img');
img.setAttribute('src', Editor.facebookImage);
img.setAttribute('width', '18');
img.setAttribute('height', '18');
img.setAttribute('border', '0');
fbBtn.appendChild(img);
fbBtn.setAttribute('title', mxResources.get('facebook') + ' (' +
editorUi.formatFileSize(maxFbSize) + ' max)');
fbBtn.style.verticalAlign = 'bottom';
fbBtn.style.paddingTop = '4px';
fbBtn.style.minWidth = '46px'
fbBtn.className = 'geBtn';
buttons.appendChild(fbBtn);
}
if (result.length < maxTwitterSize)
{
var tweetBtn = mxUtils.button('', function()
{
try
{
var url = 'https://twitter.com/intent/tweet?text=' +
encodeURIComponent(tweet) + '&url=' +
encodeURIComponent(text.value);
editorUi.openLink(url);
}
catch (e)
{
editorUi.handleError({message: e.message || mxResources.get('drawingTooLarge')});
}
});
var img = document.createElement('img');
img.setAttribute('src', Editor.tweetImage);
img.setAttribute('width', '18');
img.setAttribute('height', '18');
img.setAttribute('border', '0');
img.style.marginBottom = '5px'
tweetBtn.appendChild(img);
tweetBtn.setAttribute('title', mxResources.get('twitter') + ' (' +
editorUi.formatFileSize(maxTwitterSize) + ' max)');
tweetBtn.style.verticalAlign = 'bottom';
tweetBtn.style.paddingTop = '4px';
tweetBtn.style.minWidth = '46px'
tweetBtn.className = 'geBtn';
buttons.appendChild(tweetBtn);
}
}
var closeBtn = mxUtils.button(mxResources.get('close'), function()
{
editorUi.hideDialog();
});
buttons.appendChild(closeBtn);
var copyBtn = mxUtils.button(mxResources.get('copy'), function()
{
text.focus();
if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
{
text.select();
}
else
{
document.execCommand('selectAll', false, null);
}
document.execCommand('copy');
editorUi.alert(mxResources.get('copiedToClipboard'));
});
if (result.length < maxSize)
{
// Does not work in Safari and shows annoying dialog for IE11-
if (!mxClient.IS_SF && document.documentMode == null)
{
buttons.appendChild(copyBtn);
copyBtn.className = 'geBtn gePrimaryBtn';
closeBtn.className = 'geBtn';
}
else
{
closeBtn.className = 'geBtn gePrimaryBtn';
}
}
else
{
buttons.appendChild(previewBtn);
closeBtn.className = 'geBtn';
previewBtn.className = 'geBtn gePrimaryBtn';
}
div.appendChild(buttons);
this.container = div;
};
/**
* Add embed dialog option.
*/
EmbedDialog.showPreviewOption = true;
/**
* Constructs a dialog for embedding the diagram in Google Sites.
*/
var GoogleSitesDialog = function(editorUi, publicUrl)
{
var div = document.createElement('div');
var graph = editorUi.editor.graph;
var bounds = graph.getGraphBounds();
var scale = graph.view.scale;
var x0 = Math.floor(bounds.x / scale - graph.view.translate.x);
var y0 = Math.floor(bounds.y / scale - graph.view.translate.y);
mxUtils.write(div, mxResources.get('googleGadget') + ':');
mxUtils.br(div);
var gadgetInput = document.createElement('input');
gadgetInput.setAttribute('type', 'text');
gadgetInput.style.marginBottom = '8px';
gadgetInput.style.marginTop = '2px';
gadgetInput.style.width = '410px';
div.appendChild(gadgetInput);
mxUtils.br(div);
this.init = function()
{
gadgetInput.focus();
if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
{
gadgetInput.select();
}
else
{
document.execCommand('selectAll', false, null);
}
};
mxUtils.write(div, mxResources.get('top') + ':');
var topInput = document.createElement('input');
topInput.setAttribute('type', 'text');
topInput.setAttribute('size', '4');
topInput.style.marginRight = '16px';
topInput.style.marginLeft = '4px';
topInput.value = x0;
div.appendChild(topInput);
mxUtils.write(div, mxResources.get('height') + ':');
var heightInput = document.createElement('input');
heightInput.setAttribute('type', 'text');
heightInput.setAttribute('size', '4');
heightInput.style.marginLeft = '4px';
heightInput.value = Math.ceil(bounds.height / scale);
div.appendChild(heightInput);
mxUtils.br(div);
var hr = document.createElement('hr');
hr.setAttribute('size', '1');
hr.style.marginBottom = '16px';
hr.style.marginTop = '16px';
div.appendChild(hr);
mxUtils.write(div, mxResources.get('publicDiagramUrl') + ':');
mxUtils.br(div);
var urlInput = document.createElement('input');
urlInput.setAttribute('type', 'text');
urlInput.setAttribute('size', '28');
urlInput.style.marginBottom = '8px';
urlInput.style.marginTop = '2px';
urlInput.style.width = '410px';
urlInput.value = publicUrl || '';
div.appendChild(urlInput);
mxUtils.br(div);
mxUtils.write(div, mxResources.get('borderWidth') + ':');
var borderInput = document.createElement('input');
borderInput.setAttribute('type', 'text');
borderInput.setAttribute('size', '3');
borderInput.style.marginBottom = '8px';
borderInput.style.marginLeft = '4px';
borderInput.value = '0';
div.appendChild(borderInput);
mxUtils.br(div);
var panCheckBox = document.createElement('input');
panCheckBox.setAttribute('type', 'checkbox');
panCheckBox.setAttribute('checked', 'checked');
panCheckBox.defaultChecked = true;
panCheckBox.style.marginLeft = '16px';
div.appendChild(panCheckBox);
mxUtils.write(div, mxResources.get('pan') + ' ');
var zoomCheckBox = document.createElement('input');
zoomCheckBox.setAttribute('type', 'checkbox');
zoomCheckBox.setAttribute('checked', 'checked');
zoomCheckBox.defaultChecked = true;
zoomCheckBox.style.marginLeft = '8px';
div.appendChild(zoomCheckBox);
mxUtils.write(div, mxResources.get('zoom') + ' ');
var editCheckBox = document.createElement('input');
editCheckBox.setAttribute('type', 'checkbox');
editCheckBox.style.marginLeft = '8px';
editCheckBox.setAttribute('title', window.location.href);
div.appendChild(editCheckBox);
mxUtils.write(div, mxResources.get('edit') + ' ');
var editBlankCheckBox = document.createElement('input');
editBlankCheckBox.setAttribute('type', 'checkbox');
editBlankCheckBox.style.marginLeft = '8px';
div.appendChild(editBlankCheckBox);
mxUtils.write(div, mxResources.get('asNew') + ' ');
mxUtils.br(div);
var resizeCheckBox = document.createElement('input');
resizeCheckBox.setAttribute('type', 'checkbox');
resizeCheckBox.setAttribute('checked', 'checked');
resizeCheckBox.defaultChecked = true;
resizeCheckBox.style.marginLeft = '16px';
div.appendChild(resizeCheckBox);
mxUtils.write(div, mxResources.get('resize') + ' ');
var fitCheckBox = document.createElement('input');
fitCheckBox.setAttribute('type', 'checkbox');
fitCheckBox.style.marginLeft = '8px';
div.appendChild(fitCheckBox);
mxUtils.write(div, mxResources.get('fit') + ' ');
var embedCheckBox = document.createElement('input');
embedCheckBox.setAttribute('type', 'checkbox');
embedCheckBox.style.marginLeft = '8px';
div.appendChild(embedCheckBox);
mxUtils.write(div, mxResources.get('embed') + ' ');
var node = null;
var s = editorUi.getBasenames().join(';');
var file = editorUi.getCurrentFile();
function update()
{
var title = (file != null && file.getTitle() != null) ? file.getTitle() : this.defaultFilename;
if (embedCheckBox.checked && urlInput.value != '')
{
var encUrl = encodeURIComponent(mxUtils.htmlEntities(urlInput.value));
var gurl = 'https://www.draw.io/gadget.xml?type=4&diagram=' + encUrl;
if (title != null)
{
gurl += '&title=' + encodeURIComponent(title);
}
if (s.length > 0)
{
gurl += '&s=' + s;
}
if (borderInput.value != '' && borderInput.value != '0')
{
gurl += '&border=' + borderInput.value;
}
if (heightInput.value != '')
{
gurl += '&height=' + heightInput.value;
}
gurl += '&pan=' + ((panCheckBox.checked) ? '1': '0');
gurl += '&zoom=' + ((zoomCheckBox.checked) ? '1': '0');
gurl += '&fit=' + ((fitCheckBox.checked) ? '1': '0');
gurl += '&resize=' + ((resizeCheckBox.checked) ? '1': '0');
gurl += '&x0=' + Number(topInput.value);
gurl += '&y0=' + y0;
if (graph.mathEnabled)
{
gurl += '&math=1';
}
if (editBlankCheckBox.checked)
{
gurl += '&edit=_blank';
}
else if (editCheckBox.checked)
{
gurl += '&edit=' + encodeURIComponent(mxUtils.htmlEntities(window.location.href));
}
gadgetInput.value = gurl;
}
else if (file.constructor == DriveFile || file.constructor == DropboxFile)
{
var gurl = 'https://www.draw.io/gadget.xml?embed=0&diagram=';
if (urlInput.value != '')
{
gurl += encodeURIComponent(mxUtils.htmlEntities(urlInput.value)) + '&type=3';
}
else
{
gurl += file.getHash().substring(1);
if (file.constructor == DropboxFile)
{
gurl += '&type=2';
}
else
{
gurl += '&type=1';
}
}
if (title != null)
{
gurl += '&title=' + encodeURIComponent(title);
}
if (heightInput.value != '')
{
var h = parseInt(heightInput.value) + parseInt(topInput.value);
gurl += '&height=' + h;
}
gadgetInput.value = gurl;
}
else
{
gadgetInput.value = '';
}
};
mxEvent.addListener(panCheckBox, 'change', update);
mxEvent.addListener(zoomCheckBox, 'change', update);
mxEvent.addListener(resizeCheckBox, 'change', update);
mxEvent.addListener(fitCheckBox, 'change', update);
mxEvent.addListener(editCheckBox, 'change', update);
mxEvent.addListener(editBlankCheckBox, 'change', update);
mxEvent.addListener(embedCheckBox, 'change', update);
mxEvent.addListener(heightInput, 'change', update);
mxEvent.addListener(topInput, 'change', update);
mxEvent.addListener(borderInput, 'change', update);
mxEvent.addListener(urlInput, 'change', update);
update();
mxEvent.addListener(gadgetInput, 'click', function()
{
gadgetInput.focus();
if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
{
gadgetInput.select();
}
else
{
document.execCommand('selectAll', false, null);
}
});
var buttons = document.createElement('div');
buttons.style.paddingTop = '12px';
buttons.style.textAlign = 'right';
var closeBtn = mxUtils.button(mxResources.get('close'), function()
{
editorUi.hideDialog();
});
closeBtn.className = 'geBtn gePrimaryBtn';
buttons.appendChild(closeBtn);
div.appendChild(buttons);
this.container = div;
};
/**
* Constructs a new parse dialog.
*/
var CreateGraphDialog = function(editorUi, title, type)
{
var div = document.createElement('div');
div.style.textAlign = 'right';
this.init = function()
{
var container = document.createElement('div');
container.style.position = 'relative';
container.style.border = '1px solid gray';
container.style.width = '100%';
container.style.height = '360px';
container.style.overflow = 'hidden';
container.style.marginBottom = '16px';
mxEvent.disableContextMenu(container);
div.appendChild(container);
var graph = new Graph(container);
graph.setCellsCloneable(true);
graph.setPanning(true);
graph.setAllowDanglingEdges(false);
graph.connectionHandler.select = false;
graph.view.setTranslate(20, 20);
graph.border = 20;
graph.panningHandler.useLeftButtonForPanning = true;
var vertexStyle = 'rounded=1;';
var edgeStyle = 'curved=1;';
var startStyle = 'ellipse';
// FIXME: Does not work in iPad
var mxCellRendererInstallCellOverlayListeners = mxCellRenderer.prototype.installCellOverlayListeners;
graph.cellRenderer.installCellOverlayListeners = function(state, overlay, shape)
{
mxCellRenderer.prototype.installCellOverlayListeners.apply(this, arguments);
mxEvent.addListener(shape.node, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', function (evt)
{
overlay.fireEvent(new mxEventObject('pointerdown', 'event', evt, 'state', state));
});
if (!mxClient.IS_POINTER && mxClient.IS_TOUCH)
{
mxEvent.addListener(shape.node, 'touchstart', function (evt)
{
overlay.fireEvent(new mxEventObject('pointerdown', 'event', evt, 'state', state));
});
}
};
graph.getAllConnectionConstraints = function()
{
return null;
};
// Keeps highlight behind overlays
graph.connectionHandler.marker.highlight.keepOnTop = false;
graph.connectionHandler.createEdgeState = function(me)
{
var edge = graph.createEdge(null, null, null, null, null, edgeStyle);
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
var addOverlay = mxUtils.bind(this, function(cell)
{
// Creates a new overlay with an image and a tooltip
var overlay = new mxCellOverlay(this.connectImage, 'Add outgoing');
overlay.cursor = 'hand';
// Installs a handler for clicks on the overlay
overlay.addListener(mxEvent.CLICK, function(sender, evt2)
{
// TODO: Add menu for picking next shape
graph.connectionHandler.reset();
graph.clearSelection();
var geo = graph.getCellGeometry(cell);
var v2;
executeLayout(function()
{
v2 = graph.insertVertex(parent, null, 'Entry', geo.x, geo.y, 80, 30, vertexStyle);
addOverlay(v2);
graph.view.refresh(v2);
var e1 = graph.insertEdge(parent, null, '', cell, v2, edgeStyle);
}, function()
{
graph.scrollCellToVisible(v2);
});
});
// FIXME: Does not work in iPad (inserts loop)
overlay.addListener('pointerdown', function(sender, eo)
{
var evt2 = eo.getProperty('event');
var state = eo.getProperty('state');
graph.popupMenuHandler.hideMenu();
graph.stopEditing(false);
var pt = mxUtils.convertPoint(graph.container,
mxEvent.getClientX(evt2), mxEvent.getClientY(evt2));
graph.connectionHandler.start(state, pt.x, pt.y);
graph.isMouseDown = true;
graph.isMouseTrigger = mxEvent.isMouseEvent(evt2);
mxEvent.consume(evt2);
});
// Sets the overlay for the cell in the graph
graph.addCellOverlay(cell, overlay);
});
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
var v1;
try
{
v1 = graph.insertVertex(parent, null, 'Start', 0, 0, 80, 30, startStyle);
addOverlay(v1);
}
finally
{
// Updates the display
graph.getModel().endUpdate();
}
var layout;
if (type == 'horizontalTree')
{
layout = new mxCompactTreeLayout(graph);
layout.edgeRouting = false;
layout.levelDistance = 30;
edgeStyle = 'edgeStyle=elbowEdgeStyle;elbow=horizontal;';
}
else if (type == 'verticalTree')
{
layout = new mxCompactTreeLayout(graph, false);
layout.edgeRouting = false;
layout.levelDistance = 30;
edgeStyle = 'edgeStyle=elbowEdgeStyle;elbow=vertical;';
}
else if (type == 'radialTree')
{
layout = new mxRadialTreeLayout(graph, false);
layout.edgeRouting = false;
layout.levelDistance = 80;
}
else if (type == 'verticalFlow')
{
layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_NORTH);
}
else if (type == 'horizontalFlow')
{
layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
}
else if (type == 'organic')
{
layout = new mxFastOrganicLayout(graph, false);
layout.forceConstant = 80;
}
else if (type == 'circle')
{
layout = new mxCircleLayout(graph);
}
if (layout != null)
{
var executeLayout = function(change, post)
{
graph.getModel().beginUpdate();
try
{
if (change != null)
{
change();
}
layout.execute(graph.getDefaultParent(), v1);
}
catch (e)
{
throw e;
}
finally
{
// New API for animating graph layout results asynchronously
var morph = new mxMorphing(graph);
morph.addListener(mxEvent.DONE, mxUtils.bind(this, function()
{
graph.getModel().endUpdate();
if (post != null)
{
post();
}
}));
morph.startAnimation();
}
};
var edgeHandleConnect = mxEdgeHandler.prototype.connect;
mxEdgeHandler.prototype.connect = function(edge, terminal, isSource, isClone, me)
{
edgeHandleConnect.apply(this, arguments);
executeLayout();
};
graph.resizeCell = function()
{
mxGraph.prototype.resizeCell.apply(this, arguments);
executeLayout();
};
graph.connectionHandler.addListener(mxEvent.CONNECT, function()
{
executeLayout();
});
}
var cancelBtn = mxUtils.button(mxResources.get('close'), function()
{
editorUi.confirm(mxResources.get('areYouSure'), function()
{
if (container.parentNode != null)
{
graph.destroy();
container.parentNode.removeChild(container);
}
editorUi.hideDialog();
});
})
cancelBtn.className = 'geBtn';
if (editorUi.editor.cancelFirst)
{
div.appendChild(cancelBtn);
}
var okBtn = mxUtils.button(mxResources.get('insert'), function(evt)
{
graph.clearCellOverlays();
var cells = graph.getModel().getChildren(graph.getDefaultParent());
var pt = (mxEvent.isAltDown(evt)) ?
editorUi.editor.graph.getFreeInsertPoint() :
editorUi.editor.graph.getCenterInsertPoint(
graph.getBoundingBoxFromGeometry(cells, true));
cells = editorUi.editor.graph.importCells(cells, pt.x, pt.y);
var view = editorUi.editor.graph.view;
var temp = view.getBounds(cells);
temp.x -= view.translate.x;
temp.y -= view.translate.y;
editorUi.editor.graph.scrollRectToVisible(temp);
editorUi.editor.graph.setSelectionCells(cells);
if (container.parentNode != null)
{
graph.destroy();
container.parentNode.removeChild(container);
}
editorUi.hideDialog();
});
div.appendChild(okBtn);
okBtn.className = 'geBtn gePrimaryBtn';
if (!editorUi.editor.cancelFirst)
{
div.appendChild(cancelBtn);
}
};
this.container = div;
};
/**
*
*/
CreateGraphDialog.prototype.connectImage = new mxImage((mxClient.IS_SVG) ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjQ3OTk0QjMyRDcyMTFFNThGQThGNDVBMjNBMjFDMzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjQ3OTk0QjQyRDcyMTFFNThGQThGNDVBMjNBMjFDMzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRjA0N0I2MjJENzExMUU1OEZBOEY0NUEyM0EyMUMzOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNDc5OTRCMjJENzIxMUU1OEZBOEY0NUEyM0EyMUMzOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjIf+MgAAATlSURBVHjanFZraFxFFD735u4ru3ls0yZG26ShgmJoKK1J2vhIYzBgRdtIURHyw1hQUH9IxIgI2h8iCEUF/1RRlNQYCsYfCTHVhiTtNolpZCEStqSC22xIsrs1bDfu7t37Gs/cO3Ozxs1DBw73zpk555vzmHNGgJ0NYatFgmNLYUHYUoHASMz5ijmgVLmxgfKCUiBxC4ACJAeSG8nb1dVVOTc3dyoSibwWDofPBIPBJzo7O8vpGtvjpDICGztxkciECpF2LS0tvZtOpwNkk5FKpcYXFxffwL1+JuPgllPj8nk1F6RoaGjoKCqZ5ApljZDZO4SMRA0SuG2QUJIQRV8HxMOM9vf3H0ZZH9Nhg20MMl2QkFwjIyNHWlpahtADnuUMwLcRHX5aNSBjCJYEsSSLUeLEbhGe3ytCmQtA1/XY+Pj46dbW1iDuyCJp9BC5ycBj4hoeHq5ra2sbw0Xn1ZgBZ+dVkA1Lc+6p0Ck2p0QS4Ox9EhwpEylYcmBg4LH29vYQLilIOt0u5FhDfevNZDI/u93uw6PLOrwTUtjxrbPYbhD42WgMrF8JmR894ICmCgnQjVe8Xu8pXEkzMJKbuo5oNPomBbm1ZsD7s2kwFA1JZ6QBUXWT1nmGNc/qoMgavDcrQzxjQGFh4aOYIJ0sFAXcEtui4uLiVjr5KpSBVFYDDZVrWUaKRRWSAYeK0fmKykgDXbVoNaPChRuyqdDv97czL5nXxQbq6empQmsaklkDBiNpSwFVrmr2P6UyicD5piI4f8wHh0oEm8/p4h8pyGiEWvVQd3e3nxtjAzU1NR2jP7NRBWQ8GbdEzzJAmc0V3RR4cI8Dvmwuhc8fKUFA0d6/ltHg5p+Kuaejo6OeY0jcNJ/PV00ZS0nFUoZRvvFS1bZFsKHCCQ2Pl8H0chY+C96B6ZUsrCQ1qKtwQVFRURW/QhIXMAzDPAZ6BgOr8tTa8dDxCmiYGApaJbJMxSzV+brE8pdgWkcpY5dbMF1AR9XH8/xu2ilef48bvn92n82ZwHh+8ssqTEXS9p7dHisiiURikd8PbpExNTU1UVNTA3V3Y7lC16n0gpB/NwpNcZjfa7dScC4Qh0kOQCwnlEgi3F/hMVl9fX0zvKrzSk2lfXjRhj0eT/2rvWG4+Pta3oJY7XfC3hInXAv/ldeFLx8shQ+eqQL0UAAz7ylkpej5eNZRVBWL6BU6ef14OYiY1oqyTtmsavr/5koaRucT1pzx+ZpL1+GV5nLutksUgIcmtwTRiuuVZXnU5XId7A2swJkfFsymRWC91hHg1Viw6x23+7vn9sPJ+j20BE1hCXqSWaNSQ8ScbknRZWxub1PGCw/fBV+c3AeijlUbY5bBjEqr9GuYZP4jP41WudGSC6erTRCqdGZm5i1WvXWeDHnbBCZGc2Nj4wBl/hZOwrmBBfgmlID1HmGJutHaF+tKoevp/XCgstDkjo2NtWKLuc6AVN4mNjY+s1XQxoenOoFuDPHGtnRbJj9ej5GvL0dI7+giuRyMk1giazc+DP6vgUDgOJVlOv7R+PJ12QIeL6SyeDz+Kfp8ZrNWjgDTsVjsQ7qXyTjztXJhm9ePxFLfMTg4eG9tbe1RTP9KFFYQfHliYmIS69kCC7jKYmKwxxD5P88tkVkqbPPcIps9t4T/+HjcuJ/s5BFJgf4WYABCtxGuxIZ90gAAAABJRU5ErkJggg==' :
IMAGE_PATH + '/handle-connect.png', 26, 26);
/**
* Constructs a new parse dialog.
*/
var BackgroundImageDialog = function(editorUi, applyFn, img)
{
var div = document.createElement('div');
div.style.whiteSpace = 'nowrap';
var h3 = document.createElement('h2');
mxUtils.write(h3, mxResources.get('backgroundImage'));
h3.style.marginTop = '0px';
div.appendChild(h3);
mxUtils.write(div, mxResources.get('image') + ' ' + mxResources.get('url') + ':');
mxUtils.br(div);
var urlInput = document.createElement('input');
urlInput.setAttribute('type', 'text');
urlInput.style.marginTop = '4px';
urlInput.style.marginBottom = '4px';
urlInput.style.width = '350px';
urlInput.value = (img != null) ? img.src : '';
var resetting = false;
var ignoreEvt = false;
var urlChanged = function(evt, done)
{
// Skips blur event if called from apply button
if (evt == null || !ignoreEvt)
{
urlInput.value = mxUtils.trim(urlInput.value);
if (!resetting && urlInput.value != '' && !editorUi.isOffline())
{
editorUi.loadImage(urlInput.value, function(img)
{
widthInput.value = img.width;
heightInput.value = img.height;
if (done != null)
{
done(urlInput.value);
}
}, function()
{
editorUi.showError(mxResources.get('error'), mxResources.get('fileNotFound'), mxResources.get('ok'));
widthInput.value = '';
heightInput.value = '';
if (done != null)
{
done(null);
}
});
}
else
{
widthInput.value = '';
heightInput.value = '';
if (done != null)
{
done('');
}
}
}
};
this.init = function()
{
urlInput.focus();
// Installs drag and drop handler for local images and links
if (Graph.fileSupport)
{
urlInput.setAttribute('placeholder', mxResources.get('dragImagesHere'));
// Setup the dnd listeners
var dlg = div.parentNode;
var graph = editorUi.editor.graph;
var dropElt = null;
mxEvent.addListener(dlg, 'dragleave', function(evt)
{
if (dropElt != null)
{
dropElt.parentNode.removeChild(dropElt);
dropElt = null;
}
evt.stopPropagation();
evt.preventDefault();
});
mxEvent.addListener(dlg, 'dragover', mxUtils.bind(this, function(evt)
{
// IE 10 does not implement pointer-events so it can't have a drop highlight
if (dropElt == null && (!mxClient.IS_IE || document.documentMode > 10))
{
dropElt = editorUi.highlightElement(dlg);
}
evt.stopPropagation();
evt.preventDefault();
}));
mxEvent.addListener(dlg, 'drop', mxUtils.bind(this, function(evt)
{
if (dropElt != null)
{
dropElt.parentNode.removeChild(dropElt);
dropElt = null;
}
if (evt.dataTransfer.files.length > 0)
{
editorUi.importFiles(evt.dataTransfer.files, 0, 0, editorUi.maxBackgroundSize, function(data, mimeType, x, y, w, h)
{
urlInput.value = data;
urlChanged();
}, function()
{
// No post processing
}, function(file)
{
// Handles only images
return file.type.substring(0, 6) == 'image/';
}, function(queue)
{
// Invokes elements of queue in order
for (var i = 0; i < queue.length; i++)
{
queue[i]();
}
}, true, editorUi.maxBackgroundBytes, editorUi.maxBackgroundBytes, true);
}
else if (mxUtils.indexOf(evt.dataTransfer.types, 'text/uri-list') >= 0)
{
var uri = evt.dataTransfer.getData('text/uri-list');
if ((/\.(gif|jpg|jpeg|tiff|png|svg)$/i).test(uri))
{
urlInput.value = decodeURIComponent(uri);
urlChanged();
}
}
evt.stopPropagation();
evt.preventDefault();
}), false);
}
};
div.appendChild(urlInput);
mxUtils.br(div);
mxUtils.br(div);
mxUtils.write(div, mxResources.get('width') + ':');
var widthInput = document.createElement('input');
widthInput.setAttribute('type', 'text');
widthInput.style.width = '60px';
widthInput.style.marginLeft = '4px';
widthInput.style.marginRight = '16px';
widthInput.value = (img != null) ? img.width : '';
div.appendChild(widthInput);
mxUtils.write(div, mxResources.get('height') + ':');
var heightInput = document.createElement('input');
heightInput.setAttribute('type', 'text');
heightInput.style.width = '60px';
heightInput.style.marginLeft = '4px';
heightInput.style.marginRight = '16px';
heightInput.value = (img != null) ? img.height : '';
div.appendChild(heightInput);
var resetBtn = mxUtils.button(mxResources.get('reset'), function()
{
urlInput.value = '';
widthInput.value = '';
heightInput.value = '';
resetting = false;
});
mxEvent.addGestureListeners(resetBtn, function()
{
// Blocks processing a image URL while clicking reset
resetting = true;
});
resetBtn.className = 'geBtn';
resetBtn.width = '100';
div.appendChild(resetBtn);
mxUtils.br(div);
mxEvent.addListener(urlInput, 'change', urlChanged);
ImageDialog.filePicked = function(data)
{
if (data.action == google.picker.Action.PICKED)
{
if (data.docs[0].thumbnails != null)
{
var thumb = data.docs[0].thumbnails[data.docs[0].thumbnails.length - 1];
if (thumb != null)
{
urlInput.value = thumb.url;
urlChanged();
}
}
}
urlInput.focus();
};
var btns = document.createElement('div');
btns.style.marginTop = '40px';
btns.style.textAlign = 'right';
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
resetting = true;
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
if (editorUi.editor.cancelFirst)
{
btns.appendChild(cancelBtn);
}
applyBtn = mxUtils.button(mxResources.get('apply'), function()
{
editorUi.hideDialog();
urlChanged(null, function(url)
{
applyFn((url != '' && url != null) ? new mxImage(urlInput.value,
widthInput.value, heightInput.value) : null, url == null);
});
});
mxEvent.addGestureListeners(applyBtn, function()
{
ignoreEvt = true;
});
applyBtn.className = 'geBtn gePrimaryBtn';
btns.appendChild(applyBtn);
if (!editorUi.editor.cancelFirst)
{
btns.appendChild(cancelBtn);
}
div.appendChild(btns);
this.container = div;
};
/**
* Constructs a new parse dialog.
*/
var ParseDialog = function(editorUi, title, defaultType)
{
var plantUmlExample = '@startuml\nskinparam shadowing false\nAlice -> Bob: Authentication Request\nBob --> Alice: Authentication Response\n\nAlice -> Bob: Another authentication Request\nAlice <-- Bob: Another authentication Response\n@enduml';
var insertPoint = editorUi.editor.graph.getFreeInsertPoint();
function parse(text, type, evt)
{
var lines = text.split('\n');
if (type == 'plantUmlPng' || type == 'plantUmlSvg' || type == 'plantUmlTxt')
{
if (editorUi.spinner.spin(document.body, mxResources.get('inserting')))
{
var graph = editorUi.editor.graph;
var format = (type == 'plantUmlTxt') ? 'txt' :
((type == 'plantUmlPng') ? 'png' : 'svg');
function insertPlantUmlImage(text, format, data, w, h)
{
insertPoint