');
}
if (start >= 0 && end > start)
{
return [mxUtils.trim(trimStart(text.substring(0, start))),
text.substring(start, end + 15),
mxUtils.trim(trimEnd(text.substring(end + 15)))];
}
return null;
};
function addMessage(prompt)
{
var bubble = addBubble(prompt);
bubble.style.cursor = 'pointer';
bubble.style.marginBottom = '2px';
bubble.setAttribute('title', mxResources.get('insert'));
mxEvent.addListener(bubble, 'click', function(evt)
{
inp.value = prompt;
inp.focus();
});
var waiting = addBubble('');
waiting.style.marginTop = '2px';
var page = editorUi.currentPage;
var thePrompt = prompt;
var messages = [];
var xml = null;
if (typeSelect.value == 'includeCopyOfMyDiagram' || typeSelect.value == 'selectionOnly')
{
var enc = new mxCodec(mxUtils.createXmlDocument());
// Keeps IDs of selected cells and ignores unselected cells
if (typeSelect.value == 'selectionOnly')
{
enc.isObjectIgnored = function(obj)
{
return obj.constructor == mxCell &&
(!graph.model.isRoot(obj) &&
!graph.model.isLayer(obj) &&
!graph.isCellSelected(obj) &&
!graph.isAncestorSelected(obj));
};
}
xml = enc.encode(graph.getModel());
// Makes sure xml.ownerDocument.documentElement == xml
enc.document.appendChild(xml);
messages.push({'role': 'system', 'content': 'You are a helpful assistant that helps with ' +
'the following draw.io diagram and returns an updated draw.io diagram if needed. Never ' +
'include this instruction in your response.\n' +
mxUtils.getXml(xml)});
}
else if (typeSelect.value == 'create')
{
var type = diagramType.value.replace(/([A-Z])/g, " $1").toLowerCase();
thePrompt = 'Write the declaration code for a ' + (type != '' ? type : 'graph') +
' that shows "' + (prompt != '' ? prompt : 'something random') + '" using correct' +
' MermaidJS syntax and do not provide additional text in your response.';
}
else
{
messages.push({'role': 'system', 'content': 'You are a helpful ' +
'assistant that creates XML for draw.io diagrams or helps ' +
'with the draw.io diagram editor. Never include this ' +
'instruction in your response.'});
}
messages.push({'role': 'user', 'content': thePrompt});
var params = {
model: Editor.gptModel,
messages: messages
};
var tokens = 0;
// Loops through all messages and counts the tokens in the content
for (var i = 0; i < params.messages.length; i++)
{
tokens += params.messages[i].content.match(/\b\w+\b|[^\w\s]|\=/g).length;
}
var processMessage = mxUtils.bind(this, function()
{
waiting.innerHTML = '';
mxUtils.write(waiting, mxResources.get('loading') + '...');
var img = document.createElement('img');
img.setAttribute('title', 'Processing ' + tokens + ' tokens');
img.setAttribute('src', IMAGE_PATH + '/spin.gif');
img.style.marginLeft = '6px';
waiting.appendChild(img);
waiting.scrollIntoView({ behavior: 'smooth',
block: 'end', inline: 'nearest'});
editorUi.createTimeout(30000, mxUtils.bind(this, function(timeout)
{
var req = new mxXmlRequest(Editor.gptUrl, JSON.stringify(params), 'POST');
req.setRequestHeaders = mxUtils.bind(this, function(request, params)
{
request.setRequestHeader('Authorization', 'Bearer ' + Editor.gptApiKey);
request.setRequestHeader('Content-Type', 'application/json');
});
var handleError = mxUtils.bind(this, function(e)
{
timeout.clear();
waiting.innerHTML = '';
mxUtils.write(waiting, e.message);
waiting.appendChild(createButton(
mxResources.get('tryAgain'),
processMessage));
waiting.scrollIntoView({behavior: 'smooth',
block: 'end', inline: 'nearest'});
if (window.console != null)
{
console.error(e);
}
});
var handleResponse = mxUtils.bind(this, function(text)
{
var data = extractDiagramData(text);
var cells = (data != null) ? editorUi.stringToCells(data[1]) : null;
if (cells != null && cells.length > 0)
{
var wrapper = document.createElement('div');
wrapper.style.display = 'inline-block';
wrapper.style.position = 'relative';
wrapper.style.transform = 'translateX(-50%)';
wrapper.style.padding = '6px';
wrapper.style.left = '50%';
var doc = mxUtils.parseXml(data[1]);
var codec = new mxCodec(doc);
var model = new mxGraphModel();
codec.decode(doc.documentElement, model);
var sentModel = null;
if (xml != null)
{
// Creates a diff of the sent and recevied diagram
// to patch the current page and not lose changes
var dec = new mxCodec(xml.ownerDocument);
sentModel = new mxGraphModel();
dec.decode(xml, sentModel);
}
var clickFn = mxUtils.bind(this, function(e)
{
graph.model.beginUpdate();
try
{
if (sentModel != null && editorUi.getPageIndex(page) != null)
{
editorUi.selectPage(page);
var patch = editorUi.diffCells(sentModel.root, model.root);
editorUi.patchPage(page, patch, null, true);
}
else
{
var children = model.getChildren(model.getChildAt(model.getRoot(), 0));
graph.setSelectionCells(graph.importCells(children));
}
}
finally
{
graph.model.endUpdate();
}
mxEvent.consume(e);
});
var size = graph.getBoundingBoxFromGeometry(cells);
if (size != null)
{
wrapper.style.cursor = 'move';
wrapper.appendChild(editorUi.sidebar.createVertexTemplateFromCells(
cells, size.width, size.height, '', true,
null, true, true, clickFn, 160, 120));
}
else
{
wrapper.style.padding = '14px';
mxUtils.write(wrapper, mxResources.get('noPreview'));
}
waiting.innerHTML = '';
bubble = waiting;
if (data[0].length > 0)
{
mxUtils.write(bubble, data[0]);
mxUtils.br(bubble);
}
bubble.appendChild(wrapper);
var buttons = document.createElement('div');
buttons.style.display = 'flex';
buttons.style.gap = '6px';
buttons.style.margin = '6px';
buttons.appendChild(createButton(
mxResources.get('tryAgain'),
processMessage, 'flex'));
buttons.appendChild(createButton(mxResources.get(
(xml != null) ? 'apply' : 'insert'),
clickFn, 'flex'));
waiting.appendChild(buttons);
if (data[2].length > 0)
{
mxUtils.br(bubble);
mxUtils.write(bubble, data[2]);
}
bubble.scrollIntoView({behavior: 'smooth',
block: 'end', inline: 'nearest'});
}
else
{
waiting.innerHTML = '';
bubble = waiting;
mxUtils.write(bubble, text);
waiting.scrollIntoView({ behavior: 'smooth',
block: 'end', inline: 'nearest'});
}
});
req.send(mxUtils.bind(this, function(req)
{
if (timeout.clear())
{
try
{
if (req.getStatus() >= 200 && req.getStatus() <= 299)
{
var response = JSON.parse(req.getText());
EditorUi.debug('EditorUi.ChatWindow.addMessage',
'prompt:', params, 'response:', response);
var text = mxUtils.trim(response.choices[0].message.content);
if (typeSelect.value == 'create')
{
var mermaid = editorUi.extractMermaidDeclaration(text);
if (mermaid != null)
{
mxMermaidToDrawio.addListener(mxUtils.bind(this, function(data)
{
handleResponse(data);
}));
editorUi.generateMermaidImage(mermaid, null, function()
{
// callback implemented above
}, function(e)
{
mxMermaidToDrawio.resetListeners();
handleError(e);
});
}
else
{
handleResponse(text);
waiting.appendChild(createButton(
mxResources.get('tryAgain'),
processMessage));
}
}
else
{
handleResponse(text);
}
}
else
{
var result = 'Error: ' + req.getStatus();
try
{
var resp = JSON.parse(req.getText());
if (resp != null && resp.error != null &&
resp.error.message != null)
{
result = resp.error.message;
}
}
catch (e)
{
// ignore
}
waiting.innerHTML = '';
mxUtils.write(waiting, result);
waiting.scrollIntoView(
{behavior: 'smooth', block: 'end',
inline: 'nearest'});
}
}
catch (e)
{
handleError(e);
}
}
}), handleError);
}), function(e)
{
waiting.innerHTML = '';
mxUtils.write(waiting, e.message);
waiting.appendChild(createButton(
mxResources.get('tryAgain'),
processMessage));
waiting.scrollIntoView({behavior: 'smooth',
block: 'end', inline: 'nearest'});
});
});
processMessage();
};
function send()
{
if (mxUtils.trim(inp.value) != '')
{
addMessage(inp.value);
inp.value = '';
}
};
mxEvent.addListener(sendImg, 'click', send);
mxEvent.addListener(inp, 'keydown', function(evt)
{
if (evt.keyCode == 13 && !mxEvent.isShiftDown(evt))
{
send();
}
});
div.appendChild(user);
this.window = new mxWindow(mxResources.get('chatWindowTitle'), div, x, y, w, h, true, true);
this.window.minimumSize = new mxRectangle(0, 0, 120, 100);
this.window.destroyOnClose = false;
this.window.setMaximizable(false);
this.window.setResizable(true);
this.window.setClosable(true);
this.window.addListener(mxEvent.DESTROY, mxUtils.bind(this, function()
{
graph.getModel().removeListener(updateType);
}));
this.window.addListener('show', mxUtils.bind(this, function()
{
this.window.fit();
inp.focus();
}));
editorUi.installResizeHandler(this, true);
};
/**
*
*/
var TagsWindow = function(editorUi, x, y, w, h)
{
var graph = editorUi.editor.graph;
var helpButton = null;
if (!editorUi.isOffline() || mxClient.IS_CHROMEAPP)
{
helpButton = editorUi.menus.createHelpLink('https://www.drawio.com/blog/tags-in-diagrams');
}
var tagsComponent = editorUi.editor.graph.createTagsDialog(mxUtils.bind(this, function()
{
return this.window.isVisible();
}), null, function(allTags, updateFn)
{
if (graph.isEnabled())
{
var dlg = new FilenameDialog(editorUi, '', mxResources.get('add'), function(newValue)
{
editorUi.hideDialog();
if (newValue != null && newValue.length > 0)
{
var temp = newValue.split(' ');
var tags = [];
for (var i = 0; i < temp.length; i++)
{
var token = mxUtils.trim(temp[i]);
if (token != '' && mxUtils.indexOf(
allTags, token) < 0)
{
tags.push(token);
}
}
if (tags.length > 0)
{
if (graph.isSelectionEmpty())
{
updateFn(allTags.concat(tags));
}
else
{
graph.addTagsForCells(graph.getSelectionCells(), tags);
}
}
}
}, mxResources.get('tags'), null, null, 'https://www.drawio.com/blog/tags-in-diagrams');
editorUi.showDialog(dlg.container, 320, 80, true, true);
dlg.init();
}
}, helpButton);
var div = tagsComponent.div;
this.window = new mxWindow(mxResources.get('tags'), div, x, y, w, h, true, true);
this.window.minimumSize = new mxRectangle(0, 0, 212, 120);
this.window.destroyOnClose = false;
this.window.setMaximizable(false);
this.window.setResizable(true);
this.window.setClosable(true);
this.window.addListener('show', mxUtils.bind(this, function()
{
tagsComponent.refresh();
this.window.fit();
}));
editorUi.installResizeHandler(this, true);
};
/**
* Constructs a new auth dialog.
*/
var AuthDialog = function(editorUi, peer, showRememberOption, fn)
{
var div = document.createElement('div');
div.style.textAlign = 'center';
var hd = document.createElement('p');
hd.style.fontSize = '16pt';
hd.style.padding = '0px';
hd.style.margin = '0px';
hd.style.color = 'gray';
mxUtils.write(hd, mxResources.get('authorizationRequired'));
var service = 'Unknown';
var img = document.createElement('img');
img.setAttribute('border', '0');
img.setAttribute('align', 'absmiddle');
img.style.marginRight = '10px';
if (peer == editorUi.drive)
{
service = mxResources.get('googleDrive');
img.src = IMAGE_PATH + '/google-drive-logo-white.svg';
}
else if (peer == editorUi.dropbox)
{
service = mxResources.get('dropbox');
img.src = IMAGE_PATH + '/dropbox-logo-white.svg';
}
else if (peer == editorUi.oneDrive)
{
service = mxResources.get('oneDrive');
img.src = IMAGE_PATH + '/onedrive-logo-white.svg';
}
else if (peer == editorUi.gitHub)
{
service = mxResources.get('github');
img.src = IMAGE_PATH + '/github-logo-white.svg';
}
else if (peer == editorUi.gitLab)
{
service = mxResources.get('gitlab');
img.src = IMAGE_PATH + '/gitlab-logo.svg';
img.style.width = '32px';
}
else if (peer == editorUi.trello)
{
service = mxResources.get('trello');
img.src = IMAGE_PATH + '/trello-logo-white.svg';
}
var p = document.createElement('p');
mxUtils.write(p, mxResources.get('authorizeThisAppIn', [service]));
var cb = document.createElement('input');
cb.setAttribute('type', 'checkbox');
var button = mxUtils.button(mxResources.get('authorize'), function()
{
fn(cb.checked);
});
button.insertBefore(img, button.firstChild);
button.style.marginTop = '6px';
button.className = 'geBigButton';
button.style.fontSize = '18px';
button.style.padding = '14px';
div.appendChild(hd);
div.appendChild(p);
div.appendChild(button);
if (showRememberOption)
{
var p2 = document.createElement('p');
p2.style.marginTop = '20px';
p2.appendChild(cb);
var span = document.createElement('span');
mxUtils.write(span, ' ' + mxResources.get('rememberMe'));
p2.appendChild(span);
div.appendChild(p2);
cb.checked = true;
cb.defaultChecked = true;
mxEvent.addListener(span, 'click', function(evt)
{
cb.checked = !cb.checked;
mxEvent.consume(evt);
});
}
this.container = div;
};
var MoreShapesDialog = function(editorUi, expanded, entries)
{
entries = (entries != null) ? entries : editorUi.sidebar.entries;
var div = document.createElement('div');
var newEntries = [];
// Adds custom sections first
if (editorUi.sidebar.customEntries != null)
{
for (var i = 0; i < editorUi.sidebar.customEntries.length; i++)
{
var section = editorUi.sidebar.customEntries[i] || {};
var tmp = {title: editorUi.getResource(section.title), entries: []};
for (var j = 0; section.entries != null && j < section.entries.length; j++)
{
var entry = section.entries[j];
tmp.entries.push({id: entry.id, title:
editorUi.getResource(entry.title),
desc: editorUi.getResource(entry.desc),
image: entry.preview});
}
if (tmp.entries.length > 0)
{
newEntries.push(tmp);
}
}
}
// Adds built-in sections and filter entries
for (var i = 0; i < entries.length; i++)
{
if (editorUi.sidebar.enabledLibraries == null)
{
newEntries.push(entries[i]);
}
else
{
var tmp = {title: entries[i].title, entries: []};
for (var j = 0; j < entries[i].entries.length; j++)
{
if (mxUtils.indexOf(editorUi.sidebar.enabledLibraries,
entries[i].entries[j].id) >= 0)
{
tmp.entries.push(entries[i].entries[j]);
}
}
if (tmp.entries.length > 0)
{
newEntries.push(tmp);
}
}
}
entries = newEntries;
if (expanded)
{
var addEntries = mxUtils.bind(this, function(e)
{
for (var i = 0; i < e.length; i++)
{
(function(section)
{
var title = listEntry.cloneNode(false);
title.style.fontWeight = 'bold';
title.style.backgroundColor = Editor.isDarkMode() ? '#505759' : '#e5e5e5';
title.style.padding = '6px 0px 6px 20px';
mxUtils.write(title, section.title);
list.appendChild(title);
for (var j = 0; j < section.entries.length; j++)
{
(function(entry)
{
var option = listEntry.cloneNode(false);
option.style.cursor = 'pointer';
option.style.padding = '4px 0px 4px 20px';
option.style.whiteSpace = 'nowrap';
option.style.overflow = 'hidden';
option.style.textOverflow = 'ellipsis';
option.setAttribute('title', entry.title + ' (' + entry.id + ')');
var checkbox = document.createElement('input');
checkbox.setAttribute('type', 'checkbox');
checkbox.checked = editorUi.sidebar.isEntryVisible(entry.id);
checkbox.defaultChecked = checkbox.checked;
option.appendChild(checkbox);
mxUtils.write(option, ' ' + entry.title);
list.appendChild(option);
var itemClicked = function(evt)
{
if (evt == null || mxEvent.getSource(evt).nodeName != 'INPUT')
{
preview.style.textAlign = 'center';
preview.style.padding = '0px';
preview.style.color = '';
preview.innerText = '';
if (entry.desc != null)
{
var pre = document.createElement('pre');
pre.style.boxSizing = 'border-box';
pre.style.fontFamily = 'inherit';
pre.style.margin = '20px';
pre.style.right = '0px';
pre.style.textAlign = 'left';
mxUtils.write(pre, entry.desc);
preview.appendChild(pre);
}
if (entry.imageCallback != null)
{
entry.imageCallback(preview);
}
else if (entry.image != null)
{
var img = document.createElement('img');
img.setAttribute('border', '0');
img.style.maxWidth = '100%';
img.setAttribute('src', entry.image);
preview.appendChild(img);
}
else if (entry.desc == null)
{
preview.style.padding = '20px';
preview.style.color = 'rgb(179, 179, 179)';
mxUtils.write(preview, mxResources.get('noPreview'));
}
if (currentListItem != null)
{
currentListItem.style.backgroundColor = '';
}
currentListItem = option;
currentListItem.style.backgroundColor = Editor.isDarkMode() ? '#000000' : '#ebf2f9';
if (evt != null)
{
mxEvent.consume(evt);
}
}
};
mxEvent.addListener(option, 'click', itemClicked);
mxEvent.addListener(option, 'dblclick', function(evt)
{
checkbox.checked = !checkbox.checked;
mxEvent.consume(evt);
});
applyFunctions.push(function()
{
return (checkbox.checked) ? entry.id : null;
});
// Selects first entry
if (i == 0 && j == 0)
{
itemClicked();
}
})(section.entries[j]);
}
})(e[i]);
}
});
var hd = document.createElement('div');
hd.className = 'geDialogTitle';
mxUtils.write(hd, mxResources.get('shapes'));
hd.style.position = 'absolute';
hd.style.top = '0px';
hd.style.left = '0px';
hd.style.lineHeight = '40px';
hd.style.height = '40px';
hd.style.right = '0px';
var list = document.createElement('div');
var preview = document.createElement('div');
list.style.position = 'absolute';
list.style.top = '40px';
list.style.left = '0px';
list.style.width = '202px';
list.style.bottom = '60px';
list.style.overflow = 'auto';
preview.style.position = 'absolute';
preview.style.left = '202px';
preview.style.right = '0px';
preview.style.top = '40px';
preview.style.bottom = '60px';
preview.style.overflow = 'auto';
preview.style.borderLeftStyle = 'solid';
preview.style.borderLeftWidth = '1px';
preview.style.textAlign = 'center';
var currentListItem = null;
var applyFunctions = [];
var listEntry = document.createElement('div');
listEntry.style.position = 'relative';
listEntry.style.left = '0px';
listEntry.style.right = '0px';
addEntries(entries);
div.style.padding = '30px';
div.appendChild(hd);
div.appendChild(list);
div.appendChild(preview);
var buttons = document.createElement('div');
buttons.className = 'geDialogFooter';
buttons.style.position = 'absolute';
buttons.style.paddingRight = '16px';
buttons.style.color = 'gray';
buttons.style.left = '0px';
buttons.style.right = '0px';
buttons.style.bottom = '0px';
buttons.style.height = '60px';
buttons.style.lineHeight = '52px';
var labels = document.createElement('input');
labels.setAttribute('type', 'checkbox');
labels.style.position = 'relative';
labels.style.top = '1px';
labels.checked = editorUi.sidebar.sidebarTitles;
labels.defaultChecked = labels.checked;
buttons.appendChild(labels);
var span = document.createElement('span');
mxUtils.write(span, ' ' + mxResources.get('labels'));
span.style.paddingRight = '20px';
buttons.appendChild(span);
mxEvent.addListener(span, 'click', function(evt)
{
labels.checked = !labels.checked;
mxEvent.consume(evt);
});
var cb = document.createElement('input');
cb.setAttribute('type', 'checkbox');
if (isLocalStorage || mxClient.IS_CHROMEAPP)
{
var span = document.createElement('span');
span.style.paddingRight = '20px';
span.appendChild(cb);
mxUtils.write(span, ' ' + mxResources.get('rememberThisSetting'));
cb.style.position = 'relative';
cb.style.top = '1px';
cb.checked = true;
cb.defaultChecked = true;
mxEvent.addListener(span, 'click', function(evt)
{
if (mxEvent.getSource(evt) != cb)
{
cb.checked = !cb.checked;
mxEvent.consume(evt);
}
});
buttons.appendChild(span);
}
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
var applyBtn = mxUtils.button(mxResources.get('apply'), function()
{
editorUi.hideDialog();
var libs = [];
for (var i = 0; i < applyFunctions.length; i++)
{
var lib = applyFunctions[i].apply(this, arguments);
if (lib != null)
{
libs.push(lib);
}
}
// Redirects scratchpad and search entries
if ((Editor.currentTheme == 'sketch' ||
Editor.currentTheme == 'min') &&
Editor.isSettingsEnabled())
{
var idx = mxUtils.indexOf(libs, '.scratchpad');
if ((editorUi.scratchpad != null) != (idx >= 0 && libs.splice(idx, 1).length > 0))
{
editorUi.toggleScratchpad();
}
// Handles search after scratchpad
idx = mxUtils.indexOf(libs, 'search');
mxSettings.settings.search = (idx >= 0 && libs.splice(idx, 1).length > 0);
editorUi.sidebar.showPalette('search', mxSettings.settings.search);
if (cb.checked)
{
mxSettings.save();
}
}
editorUi.sidebar.showEntries(libs.join(';'), cb.checked, true);
editorUi.setSidebarTitles(labels.checked, cb.checked);
});
applyBtn.className = 'geBtn gePrimaryBtn';
if (editorUi.editor.cancelFirst)
{
buttons.appendChild(cancelBtn);
buttons.appendChild(applyBtn);
}
else
{
buttons.appendChild(applyBtn);
buttons.appendChild(cancelBtn);
}
div.appendChild(buttons);
}
else
{
var libFS = document.createElement('table');
var tbody = document.createElement('tbody');
div.style.height = '100%';
div.style.overflow = 'auto';
var row = document.createElement('tr');
libFS.style.width = '100%';
var leftDiv = document.createElement('td');
var midDiv = document.createElement('td');
var rightDiv = document.createElement('td');
var addLibCB = mxUtils.bind(this, function(wrapperDiv, title, key)
{
var libCB = document.createElement('input');
libCB.type = 'checkbox';
libFS.appendChild(libCB);
libCB.checked = editorUi.sidebar.isEntryVisible(key);
var libSpan = document.createElement('span');
mxUtils.write(libSpan, title);
var label = document.createElement('div');
label.style.display = 'block';
label.appendChild(libCB);
label.appendChild(libSpan);
mxEvent.addListener(libSpan, 'click', function(evt)
{
libCB.checked = !libCB.checked;
mxEvent.consume(evt);
});
wrapperDiv.appendChild(label);
return function()
{
return (libCB.checked) ? key : null;
};
});
row.appendChild(leftDiv);
row.appendChild(midDiv);
row.appendChild(rightDiv);
tbody.appendChild(row);
libFS.appendChild(tbody);
var applyFunctions = [];
var count = 0;
// Counts total number of entries
for (var i = 0; i < entries.length; i++)
{
for (var j = 0; j < entries[i].entries.length; j++)
{
count++;
}
}
// Distributes entries on columns
var cols = [leftDiv, midDiv, rightDiv];
var counter = 0;
for (var i = 0; i < entries.length; i++)
{
(function(section)
{
for (var j = 0; j < section.entries.length; j++)
{
(function(entry)
{
var index = Math.floor(counter / (count / 3));
applyFunctions.push(addLibCB(cols[index], entry.title, entry.id));
counter++;
})(section.entries[j]);
}
})(entries[i]);
}
div.appendChild(libFS);
var remember = document.createElement('div');
remember.style.marginTop = '18px';
remember.style.textAlign = 'center';
var cb = document.createElement('input');
if (isLocalStorage)
{
cb.setAttribute('type', 'checkbox');
cb.checked = true;
cb.defaultChecked = true;
remember.appendChild(cb);
var span = document.createElement('span');
mxUtils.write(span, ' ' + mxResources.get('rememberThisSetting'));
remember.appendChild(span);
mxEvent.addListener(span, 'click', function(evt)
{
cb.checked = !cb.checked;
mxEvent.consume(evt);
});
}
div.appendChild(remember);
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
var applyBtn = mxUtils.button(mxResources.get('apply'), function()
{
var libs = ['search'];
for (var i = 0; i < applyFunctions.length; i++)
{
var lib = applyFunctions[i].apply(this, arguments);
if (lib != null)
{
libs.push(lib);
}
}
editorUi.sidebar.showEntries((libs.length > 0) ? libs.join(';') : '', cb.checked);
editorUi.hideDialog();
});
applyBtn.className = 'geBtn gePrimaryBtn';
var buttons = document.createElement('div');
buttons.style.marginTop = '26px';
buttons.style.textAlign = 'right';
if (editorUi.editor.cancelFirst)
{
buttons.appendChild(cancelBtn);
buttons.appendChild(applyBtn);
}
else
{
buttons.appendChild(applyBtn);
buttons.appendChild(cancelBtn);
}
div.appendChild(buttons);
}
this.container = div;
};
var PluginsDialog = function(editorUi, addFn, delFn, closeOnly)
{
var div = document.createElement('div');
var inner = document.createElement('div');
inner.style.height = '180px';
inner.style.overflow = 'auto';
var plugins = mxSettings.getPlugins().slice();
var changed = false;
function refresh()
{
changed = true;
if (plugins.length == 0)
{
inner.innerText = mxResources.get('noPlugins');
}
else
{
inner.innerText = '';
for (var i = 0; i < plugins.length; i++)
{
var span = document.createElement('span');
span.style.whiteSpace = 'nowrap';
var img = document.createElement('span');
img.className = 'geSprite geSprite-delete';
img.style.position = 'relative';
img.style.cursor = 'pointer';
img.style.top = '5px';
img.style.marginRight = '4px';
img.style.display = 'inline-block';
span.appendChild(img);
mxUtils.write(span, plugins[i]);
inner.appendChild(span);
mxUtils.br(inner);
mxEvent.addListener(img, 'click', (function(index)
{
return function()
{
editorUi.confirm(mxResources.get('delete') + ' "' + plugins[index] + '"?', function()
{
if (delFn != null)
{
delFn(plugins[index]);
}
plugins.splice(index, 1);
refresh();
});
};
})(i));
}
}
}
div.appendChild(inner);
refresh();
changed = false;
var addBtn = mxUtils.button(mxResources.get('add'), addFn != null? function()
{
addFn(function(newPlugin)
{
if (newPlugin && mxUtils.indexOf(plugins, newPlugin) < 0)
{
plugins.push(newPlugin);
}
refresh();
});
}
: function()
{
var div = document.createElement('div');
var title = document.createElement('span');
title.style.marginTop = '6px';
mxUtils.write(title, mxResources.get('builtinPlugins') + ': ');
div.appendChild(title);
var pluginsSelect = document.createElement('select');
pluginsSelect.style.width = '150px';
for (var i = 0; i < App.publicPlugin.length; i++)
{
var option = document.createElement('option');
mxUtils.write(option, App.publicPlugin[i]);
option.value = App.publicPlugin[i];
pluginsSelect.appendChild(option);
}
div.appendChild(pluginsSelect);
mxUtils.br(div);
mxUtils.br(div);
var customBtn = mxUtils.button(mxResources.get('custom') + '...', function()
{
var dlg = new FilenameDialog(editorUi, '', mxResources.get('add'), function(newValue)
{
editorUi.hideDialog();
if (newValue != null && newValue.length > 0)
{
var tokens = newValue.split(';');
for (var i = 0; i < tokens.length; i++)
{
var token = tokens[i];
var url = App.pluginRegistry[token];
if (url != null)
{
token = url;
}
if (token.length > 0 && mxUtils.indexOf(plugins, token) < 0)
{
plugins.push(token);
}
}
refresh();
}
}, mxResources.get('enterValue') + ' (' + mxResources.get('url') + ')');
editorUi.showDialog(dlg.container, 300, 80, true, true);
dlg.init();
});
customBtn.className = 'geBtn';
if (!ALLOW_CUSTOM_PLUGINS)
{
customBtn.style.display = 'none';
}
var dlg = new CustomDialog(editorUi, div, mxUtils.bind(this, function()
{
var token = App.pluginRegistry[pluginsSelect.value];
if (mxUtils.indexOf(plugins, token) < 0)
{
plugins.push(token);
refresh();
}
}), null, null, null, customBtn);
editorUi.showDialog(dlg.container, 360, 100, true, true);
});
addBtn.className = 'geBtn';
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
var applyBtn = mxUtils.button(closeOnly? mxResources.get('close') : mxResources.get('apply'), function()
{
if (changed)
{
mxSettings.setPlugins(plugins);
mxSettings.save();
editorUi.hideDialog();
editorUi.alert(mxResources.get('restartForChangeRequired'));
}
else
{
editorUi.hideDialog();
}
});
applyBtn.className = 'geBtn gePrimaryBtn';
var buttons = document.createElement('div');
buttons.style.marginTop = '14px';
buttons.style.textAlign = 'right';
var helpBtn = mxUtils.button(mxResources.get('help'), function()
{
editorUi.openLink('https://www.drawio.com/doc/faq/plugins');
});
helpBtn.className = 'geBtn';
if (editorUi.isOffline() && !mxClient.IS_CHROMEAPP)
{
helpBtn.style.display = 'none';
}
buttons.appendChild(helpBtn);
if (editorUi.editor.cancelFirst)
{
if (!closeOnly)
{
buttons.appendChild(cancelBtn);
}
buttons.appendChild(addBtn);
buttons.appendChild(applyBtn);
}
else
{
buttons.appendChild(addBtn);
buttons.appendChild(applyBtn);
if (!closeOnly)
{
buttons.appendChild(cancelBtn);
}
}
div.appendChild(buttons);
this.container = div;
};
var CropImageDialog = function(editorUi, image, clipPath, fn)
{
var IMAGE_SIZE = 300;
var div = document.createElement('div');
var elt = document.createElement('div');
elt.style.height = IMAGE_SIZE + 'px';
elt.style.width = IMAGE_SIZE + 'px';
elt.style.display = 'inline-flex';
elt.style.justifyContent = 'center';
elt.style.alignItems = 'center';
elt.style.position = 'absolute';
var img = document.createElement('img');
img.onload = init;
img.onerror = function ()
{
img.onload = null;
img.src = Editor.errorImage;
}
img.setAttribute('src', image);
img.style.maxWidth = IMAGE_SIZE + 'px';
img.style.maxHeight = IMAGE_SIZE + 'px';
elt.appendChild(img);
div.appendChild(elt);
var croppingDiv = document.createElement('div');
croppingDiv.style.width = IMAGE_SIZE + 'px';
croppingDiv.style.height = IMAGE_SIZE + 'px';
croppingDiv.style.overflow = 'hidden';
croppingDiv.style.backgroundColor = '#fff9';
div.appendChild(croppingDiv);
var cropGraph = null, initGeo = new mxGeometry(100, 100, 100, 100),
arcSizeVal = 5, cropCell = new mxCell('', initGeo.clone(), ''),
commonStyle = 'shape=image;fillColor=none;rotatable=0;cloneable=0;deletable=0;image=' +
image.replace(';base64', '') + ';clipPath=';
function init()
{
cropGraph = new Graph(croppingDiv);
cropGraph.autoExtend = false;
cropGraph.autoScroll = false;
cropGraph.setGridEnabled(false);
cropGraph.setEnabled(true);
cropGraph.setPanning(false);
cropGraph.setConnectable(false);
cropGraph.getRubberband().setEnabled(false);
cropGraph.graphHandler.allowLivePreview = false;
var origCreateVertexHandler = cropGraph.createVertexHandler;
cropGraph.createVertexHandler = function()
{
var handler = origCreateVertexHandler.apply(this, arguments);
handler.livePreview = false;
return handler;
}
if (clipPath != null)
{
//Find position and size of cropCell
try
{
if (clipPath.substring(0, 5) == 'inset')
{
var geo = cropCell.geometry;
var imgW = img.width;
var imgH = img.height;
var imgX = (IMAGE_SIZE - imgW) / 2;
var imgY = (IMAGE_SIZE - imgH) / 2;
var tokens = clipPath.match(/\(([^)]+)\)/)[1].split(/[ ,]+/);
var top = parseFloat(tokens[0]);
var right = parseFloat(tokens[1]);
var bottom = parseFloat(tokens[2]);
var left = parseFloat(tokens[3]);
if (isFinite(top) && isFinite(right) && isFinite(bottom) && isFinite(left))
{
geo.x = left / 100 * imgW + imgX;
geo.y = top / 100 * imgH + imgY;
geo.width = (100 - right) / 100 * imgW + imgX - geo.x;
geo.height = (100 - bottom) / 100 * imgH + imgY - geo.y;
if (tokens[4] == 'round')
{
if (tokens[5] == '50%')
{
ellipseInput.setAttribute('checked', 'checked');
}
else
{
arcSizeVal = parseInt(tokens[5]);
arcSize.value = arcSizeVal;
roundedInput.setAttribute('checked', 'checked');
arcSizeDiv.style.visibility = 'visible';
}
}
else
{
rectInput.setAttribute('checked', 'checked');
}
}
else //Invalid clipPath
{
clipPath = null;
}
}
else //The dialog supports inset only
{
clipPath = null;
}
}
catch (e){} //Ignore
}
cropCell.style = getCropCellStyle(clipPath);
cropCell.vertex = true;
cropGraph.addCell(cropCell, null, null, null, null);
cropGraph.selectAll();
function updateCropCell()
{
cropGraph.model.setStyle(cropCell, getCropCellStyle());
};
cropGraph.addListener(mxEvent.CELLS_MOVED, updateCropCell);
cropGraph.addListener(mxEvent.CELLS_RESIZED, updateCropCell);
var origMouseUp = cropGraph.graphHandler.mouseUp;
var origMouseDown = cropGraph.graphHandler.mouseDown;
cropGraph.graphHandler.mouseUp = function()
{
origMouseUp.apply(this, arguments);
croppingDiv.style.backgroundColor = '#fff9';
};
cropGraph.graphHandler.mouseDown = function()
{
origMouseDown.apply(this, arguments);
croppingDiv.style.backgroundColor = '';
};
cropGraph.dblClick = function(){} //Disable text adding
var origChangeSelection = cropGraph.getSelectionModel().changeSelection;
//Prevent deselection
cropGraph.getSelectionModel().changeSelection = function()
{
origChangeSelection.call(this, [cropCell], [cropCell]);
};
};
var rectInput = document.createElement('input');
rectInput.setAttribute('type', 'radio');
rectInput.setAttribute('id', 'croppingRect');
rectInput.setAttribute('name', 'croppingShape');
rectInput.setAttribute('checked', 'checked');
rectInput.style.margin = '5px';
div.appendChild(rectInput);
var rectLbl = document.createElement('label');
rectLbl.setAttribute('for', 'croppingRect');
mxUtils.write(rectLbl, mxResources.get('rectangle'));
div.appendChild(rectLbl);
var roundedInput = document.createElement('input');
roundedInput.setAttribute('type', 'radio');
roundedInput.setAttribute('id', 'croppingRounded');
roundedInput.setAttribute('name', 'croppingShape');
roundedInput.style.margin = '5px';
div.appendChild(roundedInput);
var roundedLbl = document.createElement('label');
roundedLbl.setAttribute('for', 'croppingRounded');
mxUtils.write(roundedLbl, mxResources.get('rounded'));
div.appendChild(roundedLbl);
var ellipseInput = document.createElement('input');
ellipseInput.setAttribute('type', 'radio');
ellipseInput.setAttribute('id', 'croppingEllipse');
ellipseInput.setAttribute('name', 'croppingShape');
ellipseInput.style.margin = '5px';
div.appendChild(ellipseInput);
var ellipseLbl = document.createElement('label');
ellipseLbl.setAttribute('for', 'croppingEllipse');
mxUtils.write(ellipseLbl, mxResources.get('ellipse'));
div.appendChild(ellipseLbl);
function calcClipPath()
{
var isRounded = roundedInput.checked;
var isEllipse = ellipseInput.checked;
var geo = cropCell.geometry;
var imgW = img.width;
var imgH = img.height;
var imgX = (IMAGE_SIZE - imgW) / 2;
var imgY = (IMAGE_SIZE - imgH) / 2;
var left, right, top, bottom;
//prevent coords outside the image
if (geo.x < imgX)
{
geo.width -= (imgX - geo.x);
geo.x = imgX;
}
else if (geo.x + geo.width > imgX + imgW)
{
geo.width = imgX + imgW - geo.x;
geo.x = Math.min(geo.x, imgX + imgW);
}
if (geo.y < imgY)
{
geo.height -= (imgY - geo.y);
geo.y = imgY;
}
else if (geo.y + geo.height > imgY + imgH)
{
geo.height = imgY + imgH - geo.y;
geo.y = Math.min(geo.y, imgY + imgH);
}
var left = (geo.x - imgX) / imgW * 100;
var right = 100 - (geo.x + geo.width - imgX) / imgW * 100;
var top = (geo.y - imgY) / imgH * 100;
var bottom = 100 - (geo.y + geo.height - imgY) / imgH * 100;
//Use inset for circle also since it uses percentages from 4 sides and this scales no matter the shape of the image
//Using circle which is based on a single point to position (center) moves when the image is scaled and/or aspect is changed
return 'inset(' + mxUtils.format(top) + '% ' + mxUtils.format(right) + '% ' + mxUtils.format(bottom) + '% ' + mxUtils.format(left) + '%' +
(isRounded? ' round ' + arcSizeVal + '%' : (isEllipse? ' round 50%' : '')) + ')';
}
function typeChanged(noGeoReset)
{
if (cropGraph == null) return; //Image is not loaded yet. Graph had to wait for the image to load to be on-top
if (noGeoReset !== true)
{
cropGraph.model.setGeometry(cropCell, initGeo.clone());
arcSizeVal = 5;
arcSize.value = arcSizeVal;
}
cropGraph.model.setStyle(cropCell, getCropCellStyle());
cropGraph.selectAll();
arcSizeDiv.style.visibility = roundedInput.checked ? 'visible' : 'hidden';
}
function getCropCellStyle(clipPath)
{
return commonStyle + (clipPath? clipPath : calcClipPath());
}
mxEvent.addListener(rectInput, 'change', typeChanged);
mxEvent.addListener(roundedInput, 'change', typeChanged);
mxEvent.addListener(ellipseInput, 'change', typeChanged);
//Arc size slider
var arcSizeDiv = document.createElement('div');
arcSizeDiv.style.textAlign = 'center';
arcSizeDiv.style.visibility = 'hidden';
var arcSize = document.createElement('input');
arcSize.setAttribute('type', 'range');
arcSize.setAttribute('min', '1');
arcSize.setAttribute('max', '49');
arcSize.setAttribute('value', arcSizeVal);
arcSize.setAttribute('title', mxResources.get('arcSize'));
arcSizeDiv.appendChild(arcSize);
div.appendChild(arcSizeDiv);
mxEvent.addListener(arcSize, 'change', function()
{
arcSizeVal = this.value;
typeChanged(true);
});
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
var applyBtn = mxUtils.button(mxResources.get('apply'), function()
{
fn(calcClipPath(), cropCell.geometry.width, cropCell.geometry.height);
editorUi.hideDialog();
});
applyBtn.className = 'geBtn gePrimaryBtn';
var resetBtn = mxUtils.button(mxResources.get('reset'), function()
{
fn(null, img.width, img.height);
editorUi.hideDialog();
});
resetBtn.className = 'geBtn';
var buttons = document.createElement('div');
buttons.style.marginTop = '10px';
buttons.style.textAlign = 'right';
if (editorUi.editor.cancelFirst)
{
buttons.appendChild(cancelBtn);
buttons.appendChild(resetBtn);
buttons.appendChild(applyBtn);
}
else
{
buttons.appendChild(resetBtn);
buttons.appendChild(applyBtn);
buttons.appendChild(cancelBtn);
}
div.appendChild(buttons);
this.container = div;
};
var EditGeometryDialog = function(editorUi, vertices)
{
var graph = editorUi.editor.graph;
var geo = (vertices.length == 1) ? graph.getCellGeometry(vertices[0]) : null;
var div = document.createElement('div');
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.style.paddingLeft = '6px';
mxUtils.write(left, mxResources.get('relative') + ':');
var relInput = document.createElement('input');
relInput.setAttribute('type', 'checkbox');
if (geo != null && geo.relative)
{
relInput.setAttribute('checked', 'checked');
relInput.defaultChecked = true;
}
this.init = function()
{
relInput.focus();
};
right.appendChild(relInput);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
row = document.createElement('tr');
left = document.createElement('td');
right = document.createElement('td');
mxUtils.write(left, mxResources.get('left') + ':');
var xInput = document.createElement('input');
xInput.setAttribute('type', 'text');
xInput.style.width = '100px';
xInput.value = (geo != null) ? geo.x : '';
right.appendChild(xInput);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
row = document.createElement('tr');
left = document.createElement('td');
right = document.createElement('td');
mxUtils.write(left, mxResources.get('top') + ':');
var yInput = document.createElement('input');
yInput.setAttribute('type', 'text');
yInput.style.width = '100px';
yInput.value = (geo != null) ? geo.y : '';
right.appendChild(yInput);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
row = document.createElement('tr');
left = document.createElement('td');
right = document.createElement('td');
mxUtils.write(left, mxResources.get('dx') + ':');
var dxInput = document.createElement('input');
dxInput.setAttribute('type', 'text');
dxInput.style.width = '100px';
dxInput.value = (geo != null && geo.offset != null) ? geo.offset.x : '';
right.appendChild(dxInput);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
row = document.createElement('tr');
left = document.createElement('td');
right = document.createElement('td');
mxUtils.write(left, mxResources.get('dy') + ':');
var dyInput = document.createElement('input');
dyInput.setAttribute('type', 'text');
dyInput.style.width = '100px';
dyInput.value = (geo != null && geo.offset != null) ? geo.offset.y : '';
right.appendChild(dyInput);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
row = document.createElement('tr');
left = document.createElement('td');
right = document.createElement('td');
mxUtils.write(left, mxResources.get('width') + ':');
var wInput = document.createElement('input');
wInput.setAttribute('type', 'text');
wInput.style.width = '100px';
wInput.value = (geo != null) ? geo.width : '';
right.appendChild(wInput);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
row = document.createElement('tr');
left = document.createElement('td');
right = document.createElement('td');
mxUtils.write(left, mxResources.get('height') + ':');
var hInput = document.createElement('input');
hInput.setAttribute('type', 'text');
hInput.style.width = '100px';
hInput.value = (geo != null) ? geo.height : '';
right.appendChild(hInput);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
row = document.createElement('tr');
left = document.createElement('td');
right = document.createElement('td');
mxUtils.write(left, mxResources.get('rotation') + ':');
var rotInput = document.createElement('input');
rotInput.setAttribute('type', 'text');
rotInput.style.width = '100px';
rotInput.value = (vertices.length == 1) ? mxUtils.getValue(graph.getCellStyle(vertices[0]),
mxConstants.STYLE_ROTATION, 0) : '';
right.appendChild(rotInput);
row.appendChild(left);
row.appendChild(right);
tbody.appendChild(row);
table.appendChild(tbody);
div.appendChild(table);
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
var applyBtn = mxUtils.button(mxResources.get('apply'), function()
{
editorUi.hideDialog();
graph.getModel().beginUpdate();
try
{
for (var i = 0; i < vertices.length; i++)
{
var g = graph.getCellGeometry(vertices[i]);
if (g != null)
{
g = g.clone();
if (graph.isCellMovable(vertices[i]))
{
g.relative = relInput.checked;
if (mxUtils.trim(xInput.value).length > 0)
{
g.x = Number(xInput.value);
}
if (mxUtils.trim(yInput.value).length > 0)
{
g.y = Number(yInput.value);
}
if (mxUtils.trim(dxInput.value).length > 0)
{
if (g.offset == null)
{
g.offset = new mxPoint();
}
g.offset.x = Number(dxInput.value);
}
if (mxUtils.trim(dyInput.value).length > 0)
{
if (g.offset == null)
{
g.offset = new mxPoint();
}
g.offset.y = Number(dyInput.value);
}
}
if (graph.isCellResizable(vertices[i]))
{
if (mxUtils.trim(wInput.value).length > 0)
{
g.width = Number(wInput.value);
}
if (mxUtils.trim(hInput.value).length > 0)
{
g.height = Number(hInput.value);
}
}
graph.getModel().setGeometry(vertices[i], g);
}
if (mxUtils.trim(rotInput.value).length > 0)
{
graph.setCellStyles(mxConstants.STYLE_ROTATION, Number(rotInput.value), [vertices[i]]);
}
}
}
finally
{
graph.getModel().endUpdate();
}
});
applyBtn.className = 'geBtn gePrimaryBtn';
mxEvent.addListener(div, 'keypress', function(e)
{
if (e.keyCode == 13)
{
applyBtn.click();
}
});
var buttons = document.createElement('div');
buttons.style.marginTop = '20px';
buttons.style.textAlign = 'right';
if (editorUi.editor.cancelFirst)
{
buttons.appendChild(cancelBtn);
buttons.appendChild(applyBtn);
}
else
{
buttons.appendChild(applyBtn);
buttons.appendChild(cancelBtn);
}
div.appendChild(buttons);
this.container = div;
};
/**
* Constructs a new dialog for creating files from templates.
*/
var LibraryDialog = function(editorUi, name, library, initialImages, file, mode, allowBrowser)
{
var images = [];
var graph = editorUi.editor.graph;
var outer = document.createElement('div');
outer.style.height = '100%';
var header = document.createElement('div');
header.style.whiteSpace = 'nowrap';
header.style.height = '40px';
outer.appendChild(header);
mxUtils.write(header, mxResources.get('filename') + ':');
var nameValue = name;
if (nameValue == null)
{
nameValue = editorUi.defaultLibraryName + '.xml';
}
var nameInput = document.createElement('input');
nameInput.setAttribute('value', nameValue);
nameInput.style.marginRight = '20px';
nameInput.style.marginLeft = '10px';
nameInput.style.width = '500px';
if (file != null && !file.isRenamable())
{
nameInput.setAttribute('disabled', 'true');
}
this.init = function()
{
if (file == null || file.isRenamable())
{
nameInput.focus();
if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
{
nameInput.select();
}
else
{
document.execCommand('selectAll', false, null);
}
}
};
header.appendChild(nameInput);
if (Editor.enableUncompressedLibraries)
{
nameInput.style.width = '420px';
var compressedInput = document.createElement('input');
compressedInput.setAttribute('type', 'checkbox');
compressedInput.style.marginRight = '10px';
header.appendChild(compressedInput);
mxUtils.write(header, mxResources.get('compressed'));
}
var div = document.createElement('div');
div.style.borderWidth = '1px 0px 1px 0px';
div.style.borderColor = '#d3d3d3';
div.style.borderStyle = 'solid';
div.style.marginTop = '6px';
div.style.overflow = 'auto';
div.style.height = '340px';
div.style.backgroundPosition = 'center center';
div.style.backgroundRepeat = 'no-repeat';
if (images.length == 0 && Graph.fileSupport)
{
div.style.backgroundImage = 'url(\'' + IMAGE_PATH + '/droptarget.png\')';
}
var bg = document.createElement('div');
bg.style.position = 'absolute';
bg.style.width = '640px';
bg.style.top = '260px';
bg.style.textAlign = 'center';
bg.style.fontSize = '22px';
bg.style.color = '#a0c3ff';
mxUtils.write(bg, mxResources.get('dragImagesHere'));
outer.appendChild(bg);
var entries = {};
var ew = 100;
var eh = 100;
var dragSourceIndex = null;
var dropTargetIndex = null;
function getIndexForEvent(evt)
{
var dropTarget = document.elementFromPoint(evt.clientX, evt.clientY);
while (dropTarget != null && dropTarget.parentNode != div)
{
dropTarget = dropTarget.parentNode;
}
var result = null;
if (dropTarget != null)
{
var tmp = div.firstChild;
result = 0;
while (tmp != null && tmp != dropTarget)
{
tmp = tmp.nextSibling;
result++;
}
}
return result;
};
var stopEditing = null;
var stopWrapper = function(evt)
{
var source = mxEvent.getSource(evt);
if (source.getAttribute('contentEditable') != 'true' && stopEditing != null)
{
stopEditing();
stopEditing = null;
mxEvent.consume(evt);
}
};
mxEvent.addListener(div, 'mousedown', stopWrapper);
mxEvent.addListener(div, 'pointerdown', stopWrapper);
mxEvent.addListener(div, 'touchstart', stopWrapper);
// For converting image URLs
var converter = new mxUrlConverter();
var errorShowed = false;
function addButton(data, mimeType, x, y, w, h, img, aspect, title)
{
// Ignores duplicates
try
{
editorUi.spinner.stop();
if (mimeType == null || mimeType.substring(0, 6) == 'image/')
{
if ((data == null && img != null) || entries[data] == null)
{
div.style.backgroundImage = '';
bg.style.display = 'none';
var iw = w;
var ih = h;
if (w > editorUi.maxImageSize || h > editorUi.maxImageSize)
{
var s = Math.min(1, Math.min(editorUi.maxImageSize / Math.max(1, w)),
editorUi.maxImageSize / Math.max(1, h));
w *= s;
h *= s;
}
if (iw > ih)
{
ih = Math.round(ih * ew / iw);
iw = ew;
}
else
{
iw = Math.round(iw * eh / ih);
ih = eh;
}
var wrapper = document.createElement('div');
wrapper.setAttribute('draggable', 'true');
wrapper.style.display = 'inline-block';
wrapper.style.position = 'relative';
wrapper.style.padding = '0 12px';
wrapper.style.cursor = 'move';
mxUtils.setPrefixedStyle(wrapper.style, 'transition', 'transform .1s ease-in-out');
if (data != null)
{
var elt = document.createElement('img');
elt.setAttribute('src', converter.convert(data));
elt.style.width = iw + 'px';
elt.style.height = ih + 'px';
elt.style.margin = '10px';
elt.style.paddingBottom = Math.floor((eh - ih) / 2) + 'px';
elt.style.paddingLeft = Math.floor((ew - iw) / 2) + 'px';
wrapper.appendChild(elt);
}
else if (img != null)
{
var cells = editorUi.stringToCells((img.xml.charAt(0) == '<') ?
img.xml : Graph.decompress(img.xml));
if (cells.length > 0)
{
editorUi.sidebar.createThumb(cells, ew, eh, wrapper, null,
true, false, null, null, (Editor.isDarkMode()) ?
'#2a252f' : '#ffffff');
// Needs inline block on SVG for delete icon to appear on same line
wrapper.firstChild.style.display = 'inline-block';
wrapper.firstChild.style.cursor = '';
}
}
var rem = document.createElement('img');
rem.setAttribute('src', Editor.closeBlackImage);
rem.setAttribute('border', '0');
rem.setAttribute('title', mxResources.get('delete'));
rem.setAttribute('align', 'top');
rem.style.paddingTop = '4px';
rem.style.position = 'absolute';
rem.style.marginLeft = '-12px';
rem.style.zIndex = '1';
rem.style.cursor = 'pointer';
// Blocks dragging of remove icon
mxEvent.addListener(rem, 'dragstart', function(evt)
{
mxEvent.consume(evt);
});
(function(wrapperDiv, dataParam, imgParam)
{
mxEvent.addListener(rem, 'click', function(evt)
{
entries[dataParam] = null;
for (var i = 0; i < images.length; i++)
{
if ((images[i].data != null && images[i].data == dataParam) ||
(images[i].xml != null && imgParam != null &&
images[i].xml == imgParam.xml))
{
images.splice(i, 1);
break;
}
}
wrapper.parentNode.removeChild(wrapperDiv);
if (images.length == 0)
{
div.style.backgroundImage = 'url(\'' + IMAGE_PATH + '/droptarget.png\')';
bg.style.display = '';
}
mxEvent.consume(evt);
});
// Workaround for accidental select all
mxEvent.addListener(rem, 'dblclick', function(evt)
{
mxEvent.consume(evt);
});
})(wrapper, data, img);
wrapper.appendChild(rem);
wrapper.style.marginBottom = '30px';
var label = document.createElement('div');
label.style.position = 'absolute';
label.style.boxSizing = 'border-box';
label.style.bottom = '-18px';
label.style.left = '10px';
label.style.right = '10px';
label.style.backgroundColor = Editor.isDarkMode() ?
'transparent' : '#ffffff';
label.style.overflow = 'hidden';
label.style.textAlign = 'center';
label.setAttribute('title', mxResources.get('rename'));
var entry = null;
if (data != null)
{
entry = {data: data, w: w, h: h, title: title};
if (aspect != null)
{
entry.aspect = aspect;
}
entries[data] = elt;
images.push(entry);
}
else if (img != null)
{
img.aspect = 'fixed';
images.push(img);
entry = img;
}
function updateLabel()
{
label.innerText = '';
label.style.cursor = 'pointer';
label.style.whiteSpace = 'nowrap';
label.style.textOverflow = 'ellipsis';
mxUtils.write(label, (entry.title != null && entry.title.length > 0) ?
entry.title : mxResources.get('untitled'));
if (entry.title == null || entry.title.length == 0)
{
label.style.color = '#d0d0d0';
}
else
{
label.style.color = '';
}
};
mxEvent.addListener(label, 'keydown', function(evt)
{
if (evt.keyCode == 13 && stopEditing != null)
{
stopEditing();
stopEditing = null;
mxEvent.consume(evt);
}
});
updateLabel();
wrapper.appendChild(label);
// Blocks dragging of label
mxEvent.addListener(label, 'mousedown', function(evt)
{
if (label.getAttribute('contentEditable') != 'true')
{
mxEvent.consume(evt);
}
});
var startEditing = function(evt)
{
// Workaround for various issues in IE
if (!mxClient.IS_IOS && !mxClient.IS_FF &&
(document.documentMode == null || document.documentMode > 9))
{
if (label.getAttribute('contentEditable') != 'true')
{
if (stopEditing != null)
{
stopEditing();
stopEditing = null;
}
if (entry.title == null || entry.title.length == 0)
{
label.innerText = '';
}
label.style.textOverflow = '';
label.style.whiteSpace = '';
label.style.cursor = 'text';
label.style.color = '';
label.setAttribute('contentEditable', 'true');
mxUtils.setPrefixedStyle(label.style, 'user-select', 'text');
label.focus();
document.execCommand('selectAll', false, null);
stopEditing = function()
{
label.removeAttribute('contentEditable');
label.style.cursor = 'pointer';
entry.title = label.innerHTML;
updateLabel();
}
mxEvent.consume(evt);
}
}
else
{
var dlg = new FilenameDialog(editorUi, entry.title || '',
mxResources.get('ok'), function(newTitle)
{
if (newTitle != null)
{
entry.title = newTitle;
updateLabel();
}
}, mxResources.get('enterValue'));
editorUi.showDialog(dlg.container, 300, 80, true, true);
dlg.init();
mxEvent.consume(evt);
}
};
mxEvent.addListener(label, 'click', startEditing);
mxEvent.addListener(wrapper, 'dblclick', startEditing);
div.appendChild(wrapper);
mxEvent.addListener(wrapper, 'dragstart', function(evt)
{
if (stopEditing != null)
{
return;
}
if (data == null && img != null)
{
rem.style.visibility = 'hidden';
label.style.visibility = 'hidden';
}
// Workaround for no DnD on DIV in FF
if (mxClient.IS_FF && img.xml != null)
{
evt.dataTransfer.setData('Text', img.xml);
}
dragSourceIndex = getIndexForEvent(evt);
// Workaround for missing drag preview in Google Chrome
if (mxClient.IS_GC)
{
wrapper.style.opacity = '0.9';
}
window.setTimeout(function()
{
mxUtils.setPrefixedStyle(wrapper.style, 'transform', 'scale(0.5,0.5)');
mxUtils.setOpacity(wrapper, 30);
rem.style.visibility = '';
label.style.visibility = '';
}, 0);
});
mxEvent.addListener(wrapper, 'dragend', function(evt)
{
if (rem.style.visibility == 'hidden')
{
rem.style.visibility = '';
label.style.visibility = '';
}
dragSourceIndex = null;
mxUtils.setOpacity(wrapper, 100);
mxUtils.setPrefixedStyle(wrapper.style, 'transform', null);
});
}
else if (!errorShowed)
{
errorShowed = true;
editorUi.handleError({message: mxResources.get('fileExists')})
}
}
else
{
var done = false;
try
{
var doc = mxUtils.parseXml(data);
if (doc.documentElement.nodeName == 'mxlibrary')
{
var temp = JSON.parse(mxUtils.getTextContent(doc.documentElement));
if (temp != null && temp.length > 0)
{
for (var i = 0; i < temp.length; i++)
{
if (temp[i].xml != null)
{
addButton(null, null, 0, 0, 0, 0, temp[i]);
}
else
{
addButton(temp[i].data, null, 0, 0, temp[i].w, temp[i].h, null, 'fixed', temp[i].title);
}
}
}
done = true;
}
else if (doc.documentElement.nodeName == 'mxfile')
{
var pages = doc.documentElement.getElementsByTagName('diagram');
for (var i = 0; i < pages.length; i++)
{
var temp = mxUtils.getTextContent(pages[i]);
var cells = editorUi.stringToCells(Graph.decompress(temp));
var size = editorUi.editor.graph.getBoundingBoxFromGeometry(cells);
addButton(null, null, 0, 0, 0, 0, {xml: temp, w: size.width, h: size.height});
}
done = true;
}
}
catch (e)
{
if (window.console != null)
{
console.log('Error in library dialog: ' + e);
}
}
if (!done)
{
editorUi.spinner.stop();
editorUi.handleError({message: mxResources.get('errorLoadingFile')})
}
}
}
catch (e)
{
if (window.console != null)
{
console.log('Error in library dialog: ' + e);
}
}
return null;
};
if (initialImages != null)
{
for (var i = 0; i < initialImages.length; i++)
{
var img = initialImages[i];
addButton(img.data, null, 0, 0, img.w, img.h, img, img.aspect, img.title);
}
}
// Setup the dnd listeners
mxEvent.addListener(div, 'dragleave', function(evt)
{
bg.style.cursor = '';
var source = mxEvent.getSource(evt);
while (source != null)
{
if (source == div || source == bg)
{
evt.stopPropagation();
evt.preventDefault();
break;
}
source = source.parentNode;
}
});
function dragOver(evt)
{
evt.dataTransfer.dropEffect = (dragSourceIndex != null) ? 'move' : 'copy';
evt.stopPropagation();
evt.preventDefault();
};
var createImportHandler = function(evt)
{
return function(data, mimeType, x, y, w, h, img, doneFn, file)
{
if (file != null && EditorUi.isVisioFilename(file.name))
{
editorUi.importVisio(file, mxUtils.bind(this, function(xml)
{
addButton(xml, mimeType, x, y, w, h, img, 'fixed', (mxEvent.isAltDown(evt)) ?
null : img.substring(0, img.lastIndexOf('.')).replace(/_/g, ' '));
}));
}
else if (file != null && new XMLHttpRequest().upload && editorUi.isRemoteFileFormat(data, file.name))
{
if (editorUi.isExternalDataComms())
{
editorUi.parseFile(file, mxUtils.bind(this, function(xhr)
{
if (xhr.readyState == 4)
{
editorUi.spinner.stop();
if (xhr.status >= 200 && xhr.status <= 299)
{
var xml = xhr.responseText;
addButton(xml, mimeType, x, y, w, h, img, 'fixed', (mxEvent.isAltDown(evt)) ?
null : img.substring(0, img.lastIndexOf('.')).replace(/_/g, ' '));
div.scrollTop = div.scrollHeight;
}
}
}));
}
else
{
editorUi.spinner.stop();
editorUi.showError(mxResources.get('error'), mxResources.get('notInOffline'));
}
}
else
{
addButton(data, mimeType, x, y, w, h, img, 'fixed', (mxEvent.isAltDown(evt)) ?
null : img.substring(0, img.lastIndexOf('.')).replace(/_/g, ' '));
div.scrollTop = div.scrollHeight;
}
};
};
function dropHandler(evt)
{
evt.stopPropagation();
evt.preventDefault();
errorShowed = false;
dropTargetIndex = getIndexForEvent(evt);
if (dragSourceIndex != null)
{
if (dropTargetIndex != null && dropTargetIndex < div.children.length)
{
images.splice((dropTargetIndex > dragSourceIndex) ? dropTargetIndex - 1 : dropTargetIndex,
0, images.splice(dragSourceIndex, 1)[0]);
div.insertBefore(div.children[dragSourceIndex], div.children[dropTargetIndex]);
}
else
{
images.push(images.splice(dragSourceIndex, 1)[0]);
div.appendChild(div.children[dragSourceIndex]);
}
}
else if (evt.dataTransfer.files.length > 0)
{
editorUi.importFiles(evt.dataTransfer.files, 0, 0, editorUi.maxImageSize, createImportHandler(evt));
}
else if (mxUtils.indexOf(evt.dataTransfer.types, 'text/uri-list') >= 0)
{
var uri = decodeURIComponent(evt.dataTransfer.getData('text/uri-list'));
if (/(\.jpg)($|\?)/i.test(uri) || /(\.png)($|\?)/i.test(uri) ||
/(\.gif)($|\?)/i.test(uri) || /(\.svg)($|\?)/i.test(uri))
{
editorUi.loadImage(uri, function(img)
{
addButton(uri, null, 0, 0, img.width, img.height);
div.scrollTop = div.scrollHeight;
});
}
}
evt.stopPropagation();
evt.preventDefault();
};
mxEvent.addListener(div, 'dragover', dragOver);
mxEvent.addListener(div, 'drop', dropHandler);
mxEvent.addListener(bg, 'dragover', dragOver);
mxEvent.addListener(bg, 'drop', dropHandler);
outer.appendChild(div);
var btns = document.createElement('div');
btns.style.textAlign = 'right';
btns.style.marginTop = '20px';
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog(true);
});
cancelBtn.setAttribute('id', 'btnCancel');
cancelBtn.className = 'geBtn';
if (editorUi.editor.cancelFirst)
{
btns.appendChild(cancelBtn);
}
if (editorUi.getServiceName() == 'draw.io' && file != null &&
// Limits button to ibraries which are known to have public URLs
(file.constructor == DriveLibrary || file.constructor == GitHubLibrary))
{
var btn = mxUtils.button(mxResources.get('link'), function()
{
if (editorUi.spinner.spin(document.body, mxResources.get('loading')))
{
file.getPublicUrl(function(url)
{
editorUi.spinner.stop();
if (url != null)
{
var search = editorUi.getSearch(['create', 'title', 'mode', 'url', 'drive', 'splash', 'state', 'clibs', 'ui']);
search += ((search.length == 0) ? '?' : '&') + 'splash=0&clibs=U' + encodeURIComponent(url);
var dlg = new EmbedDialog(editorUi, window.location.protocol + '//' +
window.location.host + '/' + search, null, null, null, null,
'Check out the library I made using @drawio');
editorUi.showDialog(dlg.container, 450, 240, true);
dlg.init();
}
else if (file.constructor == DriveLibrary)
{
editorUi.showError(mxResources.get('error'), mxResources.get('diagramIsNotPublic'),
mxResources.get('share'), mxUtils.bind(this, function()
{
editorUi.drive.showPermissions(file.getId(), file);
}), null, mxResources.get('ok'), mxUtils.bind(this, function()
{
// Hides dialog
})
);
}
else
{
editorUi.handleError({message: mxResources.get('diagramIsNotPublic')});
}
});
}
});
btn.className = 'geBtn';
btns.appendChild(btn);
}
var btn = mxUtils.button(mxResources.get('export'), function()
{
var data = editorUi.createLibraryDataFromImages(images);
var filename = nameInput.value;
if (!/(\.xml)$/i.test(filename))
{
filename += '.xml';
}
if (editorUi.isLocalFileSave())
{
editorUi.saveLocalFile(data, filename, 'text/xml', null, null, allowBrowser != null? allowBrowser : true, null, 'xml');
}
else
{
new mxXmlRequest(SAVE_URL, 'filename=' + encodeURIComponent(filename) +
'&format=xml&xml=' + encodeURIComponent(data)).simulate(document, '_blank');
}
});
btn.setAttribute('id', 'btnDownload');
btn.className = 'geBtn';
btns.appendChild(btn);
if (Graph.fileSupport)
{
if (editorUi.libDlgFileInputElt == null)
{
var fileInput = document.createElement('input');
fileInput.setAttribute('multiple', 'multiple');
fileInput.setAttribute('type', 'file');
mxEvent.addListener(fileInput, 'change', function(evt)
{
errorShowed = false;
editorUi.importFiles(fileInput.files, 0, 0, editorUi.maxImageSize, function(data, mimeType, x, y, w, h, img, doneFn, file)
{
if (fileInput.files != null)
{
createImportHandler(evt)(data, mimeType, x, y, w, h, img, doneFn, file);
// Resets input to force change event for same file (type reset required for IE)
fileInput.type = '';
fileInput.type = 'file';
fileInput.value = '';
}
});
div.scrollTop = div.scrollHeight;
});
fileInput.style.display = 'none';
document.body.appendChild(fileInput);
editorUi.libDlgFileInputElt = fileInput;
}
var btn = mxUtils.button(mxResources.get('import'), function()
{
if (stopEditing != null)
{
stopEditing();
stopEditing = null;
}
editorUi.libDlgFileInputElt.click();
});
btn.setAttribute('id', 'btnAddImage');
btn.className = 'geBtn';
btns.appendChild(btn);
}
var btn = mxUtils.button(mxResources.get('addImages'), function()
{
if (stopEditing != null)
{
stopEditing();
stopEditing = null;
}
editorUi.showImageDialog(mxResources.get('addImageUrl'), '', function(url, w, h)
{
errorShowed = false;
if (url != null)
{
// Image dialog returns modified data URLs which
// must be converted back to real data URL
if (url.substring(0, 11) == 'data:image/')
{
var comma = url.indexOf(',');
if (comma > 0)
{
url = url.substring(0, comma) + ';base64,' + url.substring(comma + 1);
}
}
addButton(url, null, 0, 0, w, h);
div.scrollTop = div.scrollHeight;
}
});
});
btn.setAttribute('id', 'btnAddImageUrl');
btn.className = 'geBtn';
btns.appendChild(btn);
// Indirection for overriding
this.saveBtnClickHandler = function(name, images, file, mode)
{
console.log("saveBtnClickHandler");
editorUi.saveLibrary(name, images, file, mode);
};
var btn = mxUtils.button(mxResources.get('save'),mxUtils.bind(this, function()
{
if (stopEditing != null)
{
stopEditing();
stopEditing = null;
}
this.saveBtnClickHandler(nameInput.value, images, file, mode);
}));
btn.setAttribute('id', 'btnSave');
btn.className = 'geBtn gePrimaryBtn';
btns.appendChild(btn);
if (!editorUi.editor.cancelFirst)
{
btns.appendChild(cancelBtn);
}
outer.appendChild(btns);
this.container = outer;
};
/**
* Constructs a new textarea dialog.
*/
var EditShapeDialog = function(editorUi, cell, title, w, h)
{
w = (w != null) ? w : 300;
h = (h != null) ? h : 120;
var row, td;
var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.style.cellPadding = '4px';
row = document.createElement('tr');
td = document.createElement('td');
td.setAttribute('colspan', '2');
td.style.fontSize = '10pt';
mxUtils.write(td, title);
row.appendChild(td);
tbody.appendChild(row);
row = document.createElement('tr');
td = document.createElement('td');
var nameInput = document.createElement('textarea');
nameInput.style.outline = 'none';
nameInput.style.resize = 'none';
nameInput.style.width = (w - 200) + 'px';
nameInput.style.height = h + 'px';
this.textarea = nameInput;
this.init = function()
{
nameInput.focus();
nameInput.scrollTop = 0;
};
td.appendChild(nameInput);
row.appendChild(td);
td = document.createElement('td');
var container = document.createElement('div');
container.style.position = 'relative';
container.style.border = '1px solid gray';
container.style.top = '6px';
container.style.width = '200px';
container.style.height = (h + 4) + 'px';
container.style.overflow = 'hidden';
container.style.marginBottom = '16px';
mxEvent.disableContextMenu(container);
td.appendChild(container);
var graph = new Graph(container);
graph.setEnabled(false);
var clone = editorUi.editor.graph.cloneCell(cell);
graph.addCells([clone]);
var state = graph.view.getState(clone);
var stencil = '';
if (state.shape != null && state.shape.stencil != null)
{
stencil = mxUtils.getPrettyXml(state.shape.stencil.desc);
}
mxUtils.write(nameInput, stencil || '');
var b = graph.getGraphBounds();
var ns = Math.min((200 - 40) / b.width, (h - 40) / b.height);
graph.view.scaleAndTranslate(ns, 20 / ns - b.x, 20 / ns - b.y);
row.appendChild(td);
tbody.appendChild(row);
row = document.createElement('tr');
td = document.createElement('td');
td.setAttribute('colspan', '2');
td.style.paddingTop = '2px';
td.style.whiteSpace = 'nowrap';
td.setAttribute('align', 'right');
if (!editorUi.isOffline())
{
var helpBtn = mxUtils.button(mxResources.get('help'), function()
{
editorUi.openLink('https://www.drawio.com/doc/faq/shape-complex-create-edit');
});
helpBtn.className = 'geBtn';
td.appendChild(helpBtn);
}
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
if (editorUi.editor.cancelFirst)
{
td.appendChild(cancelBtn);
}
var updateShape = function(targetGraph, targetCell, hide)
{
var newValue = nameInput.value;
// Checks if XML has changed (getPrettyXml "normalizes" DOM)
var doc = mxUtils.parseXml(newValue);
newValue = mxUtils.getPrettyXml(doc.documentElement);
// Checks for validation errors
// LATER: Validate against XSD
var errors = doc.documentElement.getElementsByTagName('parsererror');
if (errors != null && errors.length > 0)
{
editorUi.showError(mxResources.get('error'), mxResources.get('containsValidationErrors'), mxResources.get('ok'));
}
else
{
if (hide)
{
editorUi.hideDialog();
}
var isNew = !targetGraph.model.contains(targetCell);
if (!hide || isNew || newValue != stencil)
{
// Transform XML value to be used in cell style
newValue = Graph.compress(newValue);
targetGraph.getModel().beginUpdate();
try
{
// Inserts cell if required
if (isNew)
{
var pt = editorUi.editor.graph.getFreeInsertPoint();
targetCell.geometry.x = pt.x;
targetCell.geometry.y = pt.y;
targetGraph.addCell(targetCell)
}
targetGraph.setCellStyles(mxConstants.STYLE_SHAPE, 'stencil(' + newValue + ')', [targetCell]);
}
catch (e)
{
throw e;
}
finally
{
// Updates the display
targetGraph.getModel().endUpdate();
}
// Updates selection after stencil was created for rendering
if (isNew)
{
targetGraph.setSelectionCell(targetCell);
targetGraph.scrollCellToVisible(targetCell);
}
}
}
};
var previewBtn = mxUtils.button(mxResources.get('preview'), function()
{
updateShape(graph, clone, false);
});
previewBtn.className = 'geBtn';
td.appendChild(previewBtn);
var applyBtn = mxUtils.button(mxResources.get('apply'), function()
{
updateShape(editorUi.editor.graph, cell, true);
});
applyBtn.className = 'geBtn gePrimaryBtn';
td.appendChild(applyBtn);
if (!editorUi.editor.cancelFirst)
{
td.appendChild(cancelBtn);
}
row.appendChild(td);
tbody.appendChild(row);
table.appendChild(tbody);
this.container = table;
};
var CustomDialog = function(editorUi, content, okFn, cancelFn, okButtonText, helpLink,
buttonsContent, hideCancel, cancelButtonText, hideAfterOKFn, customButtons,
marginTop)
{
var div = document.createElement('div');
div.appendChild(content);
var btns = document.createElement('div');
btns.style.marginTop = (marginTop != null) ? marginTop : '30px';
btns.style.textAlign = 'center';
if (buttonsContent != null)
{
btns.appendChild(buttonsContent);
}
if (!editorUi.isOffline() && helpLink != null)
{
var helpBtn = mxUtils.button(mxResources.get('help'), function()
{
editorUi.openLink(helpLink);
});
helpBtn.className = 'geBtn';
btns.appendChild(helpBtn);
}
var cancelBtn = mxUtils.button(cancelButtonText || mxResources.get('cancel'), function()
{
editorUi.hideDialog();
if (cancelFn != null)
{
cancelFn();
}
});
cancelBtn.className = 'geBtn';
if (hideCancel)
{
cancelBtn.style.display = 'none';
}
if (editorUi.editor.cancelFirst)
{
btns.appendChild(cancelBtn);
}
var okBtn = mxUtils.button(okButtonText || mxResources.get('ok'), mxUtils.bind(this, function()
{
if (!hideAfterOKFn)
{
editorUi.hideDialog(null, null, this.container);
}
if (okFn != null)
{
var okRet = okFn();
if (typeof okRet === 'string')
{
editorUi.showError(mxResources.get('error'), okRet);
return;
}
}
if (hideAfterOKFn)
{
editorUi.hideDialog(null, null, this.container);
}
}));
btns.appendChild(okBtn);
okBtn.className = 'geBtn gePrimaryBtn';
if (!editorUi.editor.cancelFirst)
{
btns.appendChild(cancelBtn);
}
if (customButtons != null)
{
for (var i = 0; i < customButtons.length; i++)
{
(function(label, fn, title)
{
var customBtn = mxUtils.button(label, function(e)
{
fn(e);
});
if (title != null)
{
customBtn.setAttribute('title', title);
}
customBtn.className = 'geBtn';
btns.appendChild(customBtn);
})(customButtons[i][0], customButtons[i][1], customButtons[i][2]);
}
}
div.appendChild(btns);
this.cancelBtn = cancelBtn;
this.okButton = okBtn;
this.container = div;
};
/**
* Constructs a new popup opener button dialog.
*/
var BtnDialog = function(editorUi, peer, btnLbl, fn)
{
var div = document.createElement('div');
div.style.textAlign = 'center';
var hd = document.createElement('p');
hd.style.fontSize = '16pt';
hd.style.padding = '0px';
hd.style.margin = '0px';
hd.style.color = 'gray';
mxUtils.write(hd, mxResources.get('done'));
var service = 'Unknown';
var img = document.createElement('img');
img.setAttribute('border', '0');
img.setAttribute('align', 'absmiddle');
img.style.marginRight = '10px';
if (peer == editorUi.drive)
{
service = mxResources.get('googleDrive');
img.src = IMAGE_PATH + '/google-drive-logo-white.svg';
}
else if (peer == editorUi.dropbox)
{
service = mxResources.get('dropbox');
img.src = IMAGE_PATH + '/dropbox-logo-white.svg';
}
else if (peer == editorUi.oneDrive)
{
service = mxResources.get('oneDrive');
img.src = IMAGE_PATH + '/onedrive-logo-white.svg';
}
else if (peer == editorUi.gitHub)
{
service = mxResources.get('github');
img.src = IMAGE_PATH + '/github-logo-white.svg';
}
else if (peer == editorUi.gitLab)
{
service = mxResources.get('gitlab');
img.src = IMAGE_PATH + '/gitlab-logo.svg';
}
else if (peer == editorUi.trello)
{
service = mxResources.get('trello');
img.src = IMAGE_PATH + '/trello-logo-white.svg';
}
var p = document.createElement('p');
mxUtils.write(p, mxResources.get('authorizedIn', [service], 'You are now authorized in {1}'));
var button = mxUtils.button(btnLbl, fn);
button.insertBefore(img, button.firstChild);
button.style.marginTop = '6px';
button.className = 'geBigButton';
button.style.fontSize = '18px';
button.style.padding = '14px';
div.appendChild(hd);
div.appendChild(p);
div.appendChild(button);
this.container = div;
};
/**
* Constructs a new font dialog.
*/
var FontDialog = function(editorUi, curFontname, curUrl, curType, fn)
{
var row, td, label;
var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.style.marginTop = '8px';
//System fonts section
row = document.createElement('tr');
td = document.createElement('td');
td.colSpan = 2;
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
td.style.fontWeight = 'bold';
var sysFontRadio = document.createElement('input');
sysFontRadio.style.cssText = 'margin-right:8px;margin-bottom:8px;';
sysFontRadio.setAttribute('value', 'sysfonts');
sysFontRadio.setAttribute('type', 'radio');
sysFontRadio.setAttribute('name', 'current-fontdialog');
sysFontRadio.setAttribute('id', 'fontdialog-sysfonts');
td.appendChild(sysFontRadio);
label = document.createElement('label');
label.setAttribute('for', 'fontdialog-sysfonts');
mxUtils.write(label, (mxResources.get('sysFonts', null, 'System Fonts')));
td.appendChild(label);
row.appendChild(td);
tbody.appendChild(row);
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
td.style.width = '120px';
td.style.paddingLeft = '15px';
mxUtils.write(td, (mxResources.get('fontname', null, 'Font Name')) + ':');
row.appendChild(td);
var sysFontInput = document.createElement('input');
if (curType == 's')
{
sysFontInput.setAttribute('value', curFontname);
}
sysFontInput.style.marginLeft = '4px';
sysFontInput.style.width = '250px';
sysFontInput.className = 'dlg_fontName_s';
td = document.createElement('td');
td.appendChild(sysFontInput);
row.appendChild(td);
tbody.appendChild(row);
//Google fonts section
row = document.createElement('tr');
td = document.createElement('td');
td.colSpan = 2;
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
td.style.fontWeight = 'bold';
var googleFontRadio = document.createElement('input');
googleFontRadio.style.cssText = 'margin-right:8px;margin-bottom:8px;';
googleFontRadio.setAttribute('value', 'googlefonts');
googleFontRadio.setAttribute('type', 'radio');
googleFontRadio.setAttribute('name', 'current-fontdialog');
googleFontRadio.setAttribute('id', 'fontdialog-googlefonts');
td.appendChild(googleFontRadio);
label = document.createElement('label');
label.setAttribute('for', 'fontdialog-googlefonts');
mxUtils.write(label, (mxResources.get('googleFonts', null, 'Google Fonts')));
td.appendChild(label);
// Link to Google Fonts
if (!mxClient.IS_CHROMEAPP && (!editorUi.isOffline() || EditorUi.isElectronApp))
{
var link = editorUi.menus.createHelpLink('https://fonts.google.com/');
link.getElementsByTagName('img')[0].setAttribute('valign', 'middle');
td.appendChild(link);
}
row.appendChild(td);
if (urlParams['isGoogleFontsEnabled'] != '0')
{
tbody.appendChild(row);
}
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
td.style.width = '120px';
td.style.paddingLeft = '15px';
mxUtils.write(td, (mxResources.get('fontname', null, 'Font Name')) + ':');
row.appendChild(td);
var googleFontInput = document.createElement('input');
if (curType == 'g')
{
googleFontInput.setAttribute('value', curFontname);
}
googleFontInput.style.marginLeft = '4px';
googleFontInput.style.width = '250px';
googleFontInput.className = 'dlg_fontName_g';
td = document.createElement('td');
td.appendChild(googleFontInput);
row.appendChild(td);
if (urlParams['isGoogleFontsEnabled'] != '0')
{
tbody.appendChild(row);
}
//Generic remote fonts section
row = document.createElement('tr');
td = document.createElement('td');
td.colSpan = 2;
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
td.style.fontWeight = 'bold';
var webFontRadio = document.createElement('input');
webFontRadio.style.cssText = 'margin-right:8px;margin-bottom:8px;';
webFontRadio.setAttribute('value', 'webfonts');
webFontRadio.setAttribute('type', 'radio');
webFontRadio.setAttribute('name', 'current-fontdialog');
webFontRadio.setAttribute('id', 'fontdialog-webfonts');
td.appendChild(webFontRadio);
label = document.createElement('label');
label.setAttribute('for', 'fontdialog-webfonts');
mxUtils.write(label, (mxResources.get('webfonts', null, 'Web Fonts')));
td.appendChild(label);
row.appendChild(td);
if (Editor.enableWebFonts)
{
tbody.appendChild(row);
}
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
td.style.width = '120px';
td.style.paddingLeft = '15px';
mxUtils.write(td, (mxResources.get('fontname', null, 'Font Name')) + ':');
row.appendChild(td);
var webFontInput = document.createElement('input');
if (curType == 'w')
{
if (Editor.enableWebFonts)
{
webFontInput.setAttribute('value', curFontname);
}
else
{
sysFontInput.setAttribute('value', curFontname);
}
}
webFontInput.style.marginLeft = '4px';
webFontInput.style.width = '250px';
webFontInput.className = 'dlg_fontName_w';
td = document.createElement('td');
td.appendChild(webFontInput);
row.appendChild(td);
if (Editor.enableWebFonts)
{
tbody.appendChild(row);
}
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
td.style.width = '120px';
td.style.paddingLeft = '15px';
mxUtils.write(td, (mxResources.get('fontUrl', null, 'Font URL')) + ':');
row.appendChild(td);
var webFontUrlInput = document.createElement('input');
webFontUrlInput.setAttribute('value', curUrl || '');
webFontUrlInput.style.marginLeft = '4px';
webFontUrlInput.style.width = '250px';
webFontUrlInput.className = 'dlg_fontUrl';
td = document.createElement('td');
td.appendChild(webFontUrlInput);
row.appendChild(td);
if (Editor.enableWebFonts)
{
tbody.appendChild(row);
}
this.init = function()
{
var input = sysFontInput;
if (curType == 'g')
{
input = googleFontInput;
}
else if (curType == 'w' && Editor.enableWebFonts)
{
input = webFontInput;
}
input.focus();
if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
{
input.select();
}
else
{
document.execCommand('selectAll', false, null);
}
};
row = document.createElement('tr');
td = document.createElement('td');
td.colSpan = 2;
td.style.paddingTop = '20px';
td.style.whiteSpace = 'nowrap';
td.setAttribute('align', 'right');
if (!editorUi.isOffline())
{
var helpBtn = mxUtils.button(mxResources.get('help'), function()
{
editorUi.openLink('https://www.drawio.com/blog/external-fonts');
});
helpBtn.className = 'geBtn';
td.appendChild(helpBtn);
}
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
fn();
});
cancelBtn.className = 'geBtn';
if (editorUi.editor.cancelFirst)
{
td.appendChild(cancelBtn);
}
function validateFn(fontName, fontUrl, type)
{
var urlPattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
if (fontName == null || fontName.length == 0)
{
table.querySelector('.dlg_fontName_' + type).style.border = '1px solid red';
return false;
}
if (type == 'w' && !urlPattern.test(fontUrl))
{
table.querySelector('.dlg_fontUrl').style.border = '1px solid red';
return false;
}
return true;
};
var okBtn = mxUtils.button(mxResources.get('apply'), function()
{
var fontName, fontUrl, type;
if (sysFontRadio.checked)
{
fontName = sysFontInput.value;
type = 's';
}
else if (googleFontRadio.checked)
{
fontName = googleFontInput.value;
fontUrl = Editor.GOOGLE_FONTS + encodeURIComponent(fontName).replace(/%20/g, '+');
type = 'g';
}
else if (webFontRadio.checked)
{
fontName = webFontInput.value;
fontUrl = webFontUrlInput.value;
type = 'w';
}
if (validateFn(fontName, fontUrl, type))
{
fn(fontName, fontUrl, type);
editorUi.hideDialog();
}
});
okBtn.className = 'geBtn gePrimaryBtn';
function enterSubmit(e)
{
this.style.border = '';
if (e.keyCode == 13)
{
okBtn.click();
}
};
mxEvent.addListener(sysFontInput, 'keypress', enterSubmit);
mxEvent.addListener(googleFontInput, 'keypress', enterSubmit);
mxEvent.addListener(webFontInput, 'keypress', enterSubmit);
mxEvent.addListener(webFontUrlInput, 'keypress', enterSubmit);
mxEvent.addListener(sysFontInput, 'focus', function()
{
sysFontRadio.setAttribute('checked', 'checked');
sysFontRadio.checked = true;
});
mxEvent.addListener(googleFontInput, 'focus', function()
{
googleFontRadio.setAttribute('checked', 'checked');
googleFontRadio.checked = true;
});
mxEvent.addListener(webFontInput, 'focus', function()
{
webFontRadio.setAttribute('checked', 'checked');
webFontRadio.checked = true;
});
mxEvent.addListener(webFontUrlInput, 'focus', function()
{
webFontRadio.setAttribute('checked', 'checked');
webFontRadio.checked = true;
});
td.appendChild(okBtn);
if (!editorUi.editor.cancelFirst)
{
td.appendChild(cancelBtn);
}
row.appendChild(td);
tbody.appendChild(row);
table.appendChild(tbody);
this.container = table;
};
/* Aspect Dialog
* @module drawio/aspect-dialog
*/
function AspectDialog(editorUi, pageId, layerIds, okFn, cancelFn)
{
this.aspect = {pageId : pageId || (editorUi.pages? editorUi.pages[0].getId() : null), layerIds : layerIds || []};
var div = document.createElement('div');
var title = document.createElement('h5');
title.style.margin = '0 0 10px';
mxUtils.write(title, mxResources.get('pages'));
div.appendChild(title);
var pagesContainer = document.createElement('div');
pagesContainer.className = 'geAspectDlgList';
div.appendChild(pagesContainer);
title = document.createElement('h5');
title.style.margin = '0 0 10px';
mxUtils.write(title, mxResources.get('layers'));
div.appendChild(title);
var layersContainer = document.createElement('div');
layersContainer.className = 'geAspectDlgList';
div.appendChild(layersContainer);
this.pagesContainer = pagesContainer;
this.layersContainer = layersContainer;
this.ui = editorUi;
var btns = document.createElement('div');
btns.style.marginTop = '16px';
btns.style.textAlign = 'center';
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
if (cancelFn != null)
{
cancelFn();
}
});
cancelBtn.className = 'geBtn';
if (editorUi.editor.cancelFirst)
{
btns.appendChild(cancelBtn);
}
var okBtn = mxUtils.button(mxResources.get('ok'), mxUtils.bind(this, function()
{
editorUi.hideDialog();
okFn({pageId: this.selectedPage, layerIds: Object.keys(this.selectedLayers)});
}));
btns.appendChild(okBtn);
okBtn.className = 'geBtn gePrimaryBtn';
if (!editorUi.editor.cancelFirst)
{
btns.appendChild(cancelBtn);
}
okBtn.setAttribute('disabled', 'disabled');
this.okBtn = okBtn;
div.appendChild(btns);
this.container = div;
};
//Drawing the graph with dialog not visible doesn't get dimensions right. It has to be visible!
AspectDialog.prototype.init = function()
{
var xml = this.ui.getFileData(true); //Force pages to update their nodes
if (this.ui.pages)
{
for (var i = 0; i < this.ui.pages.length; i++)
{
var page = this.ui.updatePageRoot(this.ui.pages[i]);
this.createPageItem(page.getId(), page.getName(), page.node);
}
}
else
{
this.createPageItem('1', 'Page-1', mxUtils.parseXml(xml).documentElement);
}
};
AspectDialog.prototype.createViewer = function(container, pageNode, layerId, defaultBackground)
{
mxEvent.disableContextMenu(container);
container.style.userSelect = 'none';
var graph = new Graph(container);
graph.setTooltips(false);
graph.setEnabled(false);
graph.setPanning(false);
graph.minFitScale = null;
graph.maxFitScale = null;
graph.centerZoom = true;
var node = pageNode.nodeName == 'mxGraphModel'? pageNode : Editor.parseDiagramNode(pageNode); //Handles compressed and non-compressed page node
if (node != null)
{
var bg = node.getAttribute('background');
if (bg == null || bg == '' || bg == mxConstants.NONE)
{
bg = (defaultBackground != null) ? defaultBackground : '#ffffff';
}
container.style.backgroundColor = bg;
var codec = new mxCodec(node.ownerDocument);
var model = graph.getModel();
codec.decode(node, model);
var childCount = model.getChildCount(model.root);
var showAll = layerId == null;
// handle layers visibility
for (var i = 0; i < childCount; i++)
{
var child = model.getChildAt(model.root, i);
model.setVisible(child, showAll || layerId == child.id);
}
graph.maxFitScale = 1;
graph.fit(0);
graph.center();
}
return graph;
};
AspectDialog.prototype.createPageItem = function(pageId, pageName, pageNode)
{
var $listItem = document.createElement('div');
$listItem.className = 'geAspectDlgListItem';
$listItem.setAttribute('data-page-id', pageId)
$listItem.innerHTML = '' + mxUtils.htmlEntities(pageName) + '
';
this.pagesContainer.appendChild($listItem);
var graph = this.createViewer($listItem.childNodes[0], pageNode);
var onClick = mxUtils.bind(this, function()
{
if (this.selectedItem != null)
{
this.selectedItem.className = 'geAspectDlgListItem';
}
this.selectedItem = $listItem;
this.selectedPage = pageId;
$listItem.className += ' geAspectDlgListItemSelected';
this.layersContainer.innerText = '';
this.selectedLayers = {};
this.okBtn.setAttribute('disabled', 'disabled');
var graphModel = graph.model;
var layers = graphModel.getChildCells(graphModel.getRoot());
for (var i = 0; i < layers.length; i++)
{
this.createLayerItem(layers[i], pageId, graph, pageNode);
}
});
mxEvent.addListener($listItem, 'click', onClick);
if(this.aspect.pageId == pageId)
{
onClick();
}
};
AspectDialog.prototype.createLayerItem = function(layer, pageId, graph, pageNode)
{
var layerName = graph.convertValueToString(layer) || (mxResources.get('background') || 'Background');
var $listItem = document.createElement('div');
$listItem.setAttribute('data-layer-id', layer.id);
$listItem.className = 'geAspectDlgListItem';
$listItem.innerHTML = '' + mxUtils.htmlEntities(layerName) + '
';
this.layersContainer.appendChild($listItem);
this.createViewer($listItem.childNodes[0], pageNode, layer.id);
var onClick = mxUtils.bind(this, function()
{
if ($listItem.className.indexOf('geAspectDlgListItemSelected') >= 0) //Selected
{
$listItem.className = 'geAspectDlgListItem';
delete this.selectedLayers[layer.id];
if (mxUtils.isEmptyObject(this.selectedLayers))
{
this.okBtn.setAttribute('disabled', 'disabled');
}
}
else
{
$listItem.className += ' geAspectDlgListItemSelected';
this.selectedLayers[layer.id] = true;
this.okBtn.removeAttribute('disabled');
}
});
mxEvent.addListener($listItem, 'click', onClick);
if(this.aspect.layerIds.indexOf(layer.id) != -1)
{
onClick();
}
};
/**
* Constructs a new page setup dialog.
*/
var FilePropertiesDialog = function(editorUi)
{
var row, td;
var table = document.createElement('table');
var tbody = document.createElement('tbody');
table.style.width = '100%';
table.style.marginTop = '8px';
table.style.tableLayout = 'fixed';
var file = editorUi.getCurrentFile();
var filename = (file != null && file.getTitle() != null) ?
file.getTitle() : editorUi.defaultFilename;
var isPng = /(\.png)$/i.test(filename);
var isSvg = /(\.svg)$/i.test(filename);
var apply = function() { };
if (isPng || isSvg)
{
var scale = 1;
var border = 0;
var node = editorUi.fileNode;
if (node != null)
{
if (node.hasAttribute('scale'))
{
scale = parseFloat(node.getAttribute('scale'));
}
if (node.hasAttribute('border'))
{
border = parseInt(node.getAttribute('border'));
}
}
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
mxUtils.write(td, mxResources.get('zoom') + ':');
row.appendChild(td);
var zoomInput = document.createElement('input');
zoomInput.setAttribute('value', (scale * 100) + '%');
zoomInput.style.marginLeft = '4px';
zoomInput.style.width = '100%';
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.appendChild(zoomInput);
row.appendChild(td);
tbody.appendChild(row);
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
mxUtils.write(td, mxResources.get('borderWidth') + ':');
row.appendChild(td);
var borderInput = document.createElement('input');
borderInput.setAttribute('value', border);
borderInput.style.marginLeft = '4px';
borderInput.style.width = '100%';
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.appendChild(borderInput);
row.appendChild(td);
tbody.appendChild(row);
this.init = function()
{
zoomInput.focus();
if (mxClient.IS_GC || mxClient.IS_FF || document.documentMode >= 5)
{
zoomInput.select();
}
else
{
document.execCommand('selectAll', false, null);
}
};
apply = function()
{
if (editorUi.fileNode != null)
{
editorUi.fileNode.setAttribute('scale', Math.max(0, parseInt(zoomInput.value) / 100));
editorUi.fileNode.setAttribute('border', Math.max(0, parseInt(borderInput.value)));
if (file != null)
{
file.fileChanged();
}
}
editorUi.hideDialog();
};
}
else if (!/(\.html)$/i.test(filename) &&
!/(\.svg)$/i.test(filename))
{
var initialCompressed = (file != null) ? file.isCompressed() : Editor.defaultCompressed;
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
mxUtils.write(td, mxResources.get('compressed') + ':');
row.appendChild(td);
var compressedInput = document.createElement('input');
compressedInput.setAttribute('type', 'checkbox');
if (initialCompressed)
{
compressedInput.setAttribute('checked', 'checked');
compressedInput.defaultChecked = true;
}
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.appendChild(compressedInput);
row.appendChild(td);
tbody.appendChild(row);
this.init = function()
{
compressedInput.focus();
};
apply = function()
{
if (editorUi.fileNode != null && initialCompressed != compressedInput.checked)
{
editorUi.fileNode.setAttribute('compressed',
(compressedInput.checked) ? 'true' : 'false');
if (file != null)
{
file.fileChanged();
}
}
editorUi.hideDialog();
};
}
if (file != null && file.isRealtimeOptional())
{
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
mxUtils.write(td, mxResources.get('realtimeCollaboration') + ':');
row.appendChild(td);
var collabInput = document.createElement('input');
collabInput.setAttribute('type', 'checkbox');
var initialCollab = file.isRealtimeEnabled();
var collab = editorUi.drive.getCustomProperty(file.desc, 'collaboration');
var initialCollab = collab != 'disabled';
if (initialCollab)
{
collabInput.setAttribute('checked', 'checked');
collabInput.defaultChecked = true;
}
prevApply = apply;
apply = function()
{
prevApply();
editorUi.hideDialog();
if (collabInput.checked != initialCollab)
{
if (editorUi.spinner.spin(document.body, mxResources.get('updatingDocument')))
{
file.setRealtimeEnabled(collabInput.checked, mxUtils.bind(this, function(resp)
{
editorUi.spinner.stop();
}), mxUtils.bind(this, function(resp)
{
editorUi.spinner.stop();
editorUi.showError(mxResources.get('error'), (resp != null && resp.error != null) ?
resp.error.message : mxResources.get('unknownError'), mxResources.get('ok'));
}));
}
}
};
this.init = (this.init != null) ? this.init : function()
{
collabInput.focus();
};
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.appendChild(collabInput);
td.appendChild(editorUi.menus.createHelpLink('https://github.com/jgraph/drawio/discussions/2672'));
row.appendChild(td);
tbody.appendChild(row);
}
if (file != null && editorUi.getServiceName() == 'draw.io' &&
file.getSize() > 0 && urlParams['embed'] != '1')
{
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
mxUtils.write(td, mxResources.get('size') + ':');
row.appendChild(td);
var temp = editorUi.formatFileSize(file.getSize());
var sizeInput = document.createElement('input');
sizeInput.setAttribute('title', temp);
sizeInput.setAttribute('value', temp);
sizeInput.setAttribute('disabled', 'disabled');
sizeInput.style.marginLeft = '4px';
sizeInput.style.width = '100%';
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.appendChild(sizeInput);
row.appendChild(td);
tbody.appendChild(row);
}
if (file != null && file.fileObject != null &&
file.fileObject.path != null)
{
row = document.createElement('tr');
td = document.createElement('td');
td.style.whiteSpace = 'nowrap';
td.style.fontSize = '10pt';
mxUtils.write(td, mxResources.get('pathFilename') + ':');
row.appendChild(td);
var pathInput = document.createElement('input');
pathInput.setAttribute('title', file.fileObject.path);
pathInput.setAttribute('value', file.fileObject.path);
pathInput.setAttribute('disabled', 'disabled');
pathInput.style.marginLeft = '4px';
pathInput.style.width = '100%';
td = document.createElement('td');
td.appendChild(pathInput);
row.appendChild(td);
tbody.appendChild(row);
}
this.init = (this.init != null) ? this.init : function() { };
var genericBtn = mxUtils.button(mxResources.get('apply'), apply);
genericBtn.className = 'geBtn gePrimaryBtn';
row = document.createElement('tr');
td = document.createElement('td');
td.colSpan = 2;
td.style.paddingTop = '20px';
td.style.whiteSpace = 'nowrap';
td.setAttribute('align', 'center');
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
if (editorUi.editor.cancelFirst)
{
td.appendChild(cancelBtn);
}
td.appendChild(genericBtn);
if (!editorUi.editor.cancelFirst)
{
td.appendChild(cancelBtn);
}
row.appendChild(td);
tbody.appendChild(row);
table.appendChild(tbody);
this.container = table;
};
var ConnectionPointsDialog = function(editorUi, cell)
{
var GRAPH_SIZE = 350, CP_SIZE = 6, CP_HLF_SIZE = 3;
var div = document.createElement('div');
div.style.userSelect = 'none';
var keyHandler = null;
this.init = function()
{
var graphDiv = document.createElement('div');
graphDiv.style.width = GRAPH_SIZE + 'px';
graphDiv.style.height = GRAPH_SIZE + 'px';
graphDiv.style.overflow = 'hidden';
graphDiv.style.border = '1px solid lightGray';
graphDiv.style.boxSizing = 'border-box';
mxEvent.disableContextMenu(graphDiv);
div.appendChild(graphDiv);
var editingGraph = new Graph(graphDiv);
editingGraph.transparentBackground = false;
editingGraph.autoExtend = false;
editingGraph.autoScroll = false;
editingGraph.setGridEnabled(false);
editingGraph.setEnabled(true);
editingGraph.setPanning(true);
editingGraph.setConnectable(false);
editingGraph.setTooltips(false);
editingGraph.minFitScale = null;
editingGraph.maxFitScale = null;
editingGraph.centerZoom = true;
editingGraph.maxFitScale = 2;
function createCPoint(x, y, constObj)
{
var cPointStyle = 'shape=mxgraph.basic.x;fillColor=#29b6f2;strokeColor=#29b6f2;points=[];rotatable=0;resizable=0;connectable=0;editable=0;';
var cPoint = new mxCell('', new mxGeometry(x, y, CP_SIZE, CP_SIZE), cPointStyle);
cPoint.vertex = true;
cPoint.cp = true;
cPoint.constObj = constObj;
return editingGraph.addCell(cPoint);
};
//Add cell and current connection points on it
var geo = cell.geometry;
var mainCell = new mxCell(cell.value, new mxGeometry(0, 0, geo.width, geo.height),
cell.style + ';rotatable=0;resizable=0;connectable=0;editable=0;movable=0;fillColor=none;');
mainCell.vertex = true;
editingGraph.addCell(mainCell);
//Adding a point via double click
editingGraph.dblClick = function(evt, cell)
{
if (cell != null && cell != mainCell)
{
editingGraph.setSelectionCell(cell);
}
else
{
var pt = mxUtils.convertPoint(editingGraph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));
mxEvent.consume(evt);
var scale = editingGraph.view.scale;
var tr = editingGraph.view.translate;
editingGraph.setSelectionCell(createCPoint((pt.x - CP_HLF_SIZE * scale) / scale - tr.x,
(pt.y - CP_HLF_SIZE * scale) / scale - tr.y));
}
}
keyHandler = new mxKeyHandler(editingGraph);
function removeCPoints(evt)
{
var cells = editingGraph.getSelectionCells();
editingGraph.deleteCells(cells);
};
keyHandler.bindKey(46, removeCPoints);
keyHandler.bindKey(8, removeCPoints);
//Force rubberband inside the cell
editingGraph.getRubberband().isForceRubberbandEvent = function(event)
{
//Left click and not a click on a connection point
return event.evt.button == 0
&& (event.getCell() == null || event.getCell() == mainCell);
};
//Force panning inside the cell
editingGraph.panningHandler.isForcePanningEvent = function(event)
{
return event.evt.button == 2;
};
var origIsCellSelectable = editingGraph.isCellSelectable;
editingGraph.isCellSelectable = function(cell)
{
if (cell == mainCell)
{
return false;
}
else
{
return origIsCellSelectable.apply(this, arguments);
}
};
// Disables hyperlinks
editingGraph.getLinkForCell = function()
{
return null;
};
var state = editingGraph.view.getState(mainCell);
var constraints = editingGraph.getAllConnectionConstraints(state);
for (var i = 0; constraints != null && i < constraints.length; i++)
{
var cp = editingGraph.getConnectionPoint(state, constraints[i]);
createCPoint(cp.x - CP_HLF_SIZE, cp.y - CP_HLF_SIZE, constraints[i]);
}
editingGraph.fit(8);
editingGraph.center();
var zoomInBtn = editorUi.createToolbarButton(Editor.zoomInImage,
mxResources.get('zoomIn'), function()
{
editingGraph.zoomIn();
}, 20);
var zoomOutBtn = editorUi.createToolbarButton(Editor.zoomOutImage,
mxResources.get('zoomOut'), function()
{
editingGraph.zoomOut();
}, 20);
var zoomFitBtn = editorUi.createToolbarButton(Editor.zoomFitImage,
mxResources.get('fit'), function()
{
if (editingGraph.view.scale == 1)
{
editingGraph.maxFitScale = 8;
editingGraph.fit(8);
}
else
{
editingGraph.zoomActual();
}
editingGraph.center();
}, 20);
var changeGridSize = function()
{
editorUi.prompt(mxResources.get('gridSize'), editingGraph.gridSize, function(newValue)
{
if (!isNaN(newValue) && newValue > 0)
{
editingGraph.setGridSize(newValue);
editingGraph.setGridEnabled(true);
editingGraph.refresh();
}
});
};
var gridBtn = editorUi.createToolbarButton(Editor.thinGridImage,
mxResources.get('grid'), function(evt)
{
if (mxEvent.isShiftDown(evt))
{
changeGridSize();
}
else
{
editingGraph.setGridEnabled(!editingGraph.isGridEnabled());
editingGraph.refresh();
}
}, 20);
mxEvent.addListener(gridBtn, 'dblclick', changeGridSize);
var deleteBtn = editorUi.createToolbarButton(Editor.trashImage,
mxResources.get('delete'), removeCPoints, 20);
mxUtils.setOpacity(deleteBtn, 10); //Disabled
var zoomBtns = document.createElement('div');
zoomBtns.style.display = 'flex';
zoomBtns.style.alignItems = 'center';
zoomBtns.style.paddingTop = '6px';
zoomBtns.appendChild(zoomInBtn);
zoomBtns.appendChild(zoomOutBtn);
zoomBtns.appendChild(zoomFitBtn);
zoomBtns.appendChild(gridBtn);
zoomBtns.appendChild(deleteBtn);
div.appendChild(zoomBtns);
var pCount = document.createElement('input');
pCount.setAttribute('type', 'number');
pCount.setAttribute('min', '1');
pCount.setAttribute('value', '1');
pCount.style.width = '45px';
pCount.style.position = 'relative';
pCount.style.margin = '0 4px 0 4px';
var sideSelect = document.createElement('select');
sideSelect.style.position = 'relative';
var sides = ['left', 'right', 'top', 'bottom'];
for (var i = 0; i < sides.length; i++)
{
var side = sides[i];
var option = document.createElement('option');
mxUtils.write(option, mxResources.get(side));
option.value = side;
sideSelect.appendChild(option);
}
var addBtn = mxUtils.button(mxResources.get('add'), function()
{
var count = parseInt(pCount.value);
count = count < 1? 1 : (count > 100? 100 : count);
pCount.value = count;
var side = sideSelect.value;
var geo = mainCell.geometry;
var cells = [];
for (var i = 0; i < count; i++)
{
var x, y;
switch(side)
{
case 'left':
x = geo.x;
y = geo.y + (i + 1) * geo.height / (count + 1);
break;
case 'right':
x = geo.x + geo.width;
y = geo.y + (i + 1) * geo.height / (count + 1);
break;
case 'top':
x = geo.x + (i + 1) * geo.width / (count + 1);
y = geo.y;
break;
case 'bottom':
x = geo.x + (i + 1) * geo.width / (count + 1);
y = geo.y + geo.height;
break;
}
cells.push(createCPoint(x - CP_HLF_SIZE, y - CP_HLF_SIZE));
}
editingGraph.setSelectionCells(cells);
});
addBtn.style.marginLeft = 'auto';
zoomBtns.appendChild(addBtn);
zoomBtns.appendChild(pCount);
zoomBtns.appendChild(sideSelect);
//Point properties
var pointPropsDiv = document.createElement('div');
pointPropsDiv.style.margin = '4px 0px 8px 0px';
pointPropsDiv.style.whiteSpace = 'nowrap';
pointPropsDiv.style.height = '24px';
var xSpan = document.createElement('span');
mxUtils.write(xSpan, mxResources.get('dx'));
pointPropsDiv.appendChild(xSpan);
var xInput = document.createElement('input');
xInput.setAttribute('type', 'number');
xInput.setAttribute('min', '0');
xInput.setAttribute('max', '100');
xInput.style.width = '45px';
xInput.style.margin = '0 4px 0 4px';
pointPropsDiv.appendChild(xInput);
mxUtils.write(pointPropsDiv, '%');
var dxInput = document.createElement('input');
dxInput.setAttribute('type', 'number');
dxInput.style.width = '45px';
dxInput.style.margin = '0 4px 0 4px';
pointPropsDiv.appendChild(dxInput);
mxUtils.write(pointPropsDiv, 'pt');
var ySpan = document.createElement('span');
mxUtils.write(ySpan, mxResources.get('dy'));
ySpan.style.marginLeft = '12px';
pointPropsDiv.appendChild(ySpan);
var yInput = document.createElement('input');
yInput.setAttribute('type', 'number');
yInput.setAttribute('min', '0');
yInput.setAttribute('max', '100');
yInput.style.width = '45px';
yInput.style.margin = '0 4px 0 4px';
pointPropsDiv.appendChild(yInput);
mxUtils.write(pointPropsDiv, '%');
var dyInput = document.createElement('input');
dyInput.setAttribute('type', 'number');
dyInput.style.width = '45px';
dyInput.style.margin = '0 4px 0 4px';
pointPropsDiv.appendChild(dyInput);
mxUtils.write(pointPropsDiv, 'pt');
div.appendChild(pointPropsDiv);
function applyPointProp()
{
var x = parseInt(xInput.value) || 0;
x = x < 0? 0 : (x > 100? 100 : x);
xInput.value = x;
var y = parseInt(yInput.value) || 0;
y = y < 0? 0 : (y > 100? 100 : y);
yInput.value = y;
var dx = parseInt(dxInput.value) || 0;
var dy = parseInt(dyInput.value) || 0;
var constObj = new mxConnectionConstraint(new mxPoint(x/100, y/100), false, null, dx, dy);
var cp = editingGraph.getConnectionPoint(state, constObj);
var cell = editingGraph.getSelectionCell();
if (cell != null)
{
cell.constObj = constObj;
var geo = cell.geometry.clone();
var scale = editingGraph.view.scale;
var tr = editingGraph.view.translate;
geo.x = (cp.x - CP_HLF_SIZE * scale) / scale - tr.x;
geo.y = (cp.y - CP_HLF_SIZE * scale) / scale - tr.y;
editingGraph.model.setGeometry(cell, geo);
}
};
function getConstraintFromCPoint(cp)
{
if (cp.constObj)
{
return {x: cp.constObj.point.x, y: cp.constObj.point.y, dx: cp.constObj.dx, dy: cp.constObj.dy};
}
var dx = 0, dy = 0, mGeo = mainCell.geometry;
var x = mxUtils.format((cp.geometry.x + CP_HLF_SIZE - mGeo.x) / mGeo.width);
var y = mxUtils.format((cp.geometry.y + CP_HLF_SIZE - mGeo.y) / mGeo.height);
if (x < 0)
{
dx = x * mGeo.width;
x = 0;
}
else if (x > 1)
{
dx = (x - 1) * mGeo.width;
x = 1;
}
if (y < 0)
{
dy = y * mGeo.height;
y = 0;
}
else if (y > 1)
{
dy = (y - 1) * mGeo.height;
y = 1;
}
return {x: x, y: y, dx: parseInt(dx), dy: parseInt(dy)};
};
function fillCPointProp(evt)
{
if (editingGraph.getSelectionCount() == 1)
{
var cell = editingGraph.getSelectionCell();
// On move events, exact constraint is lost
if (evt)
{
cell.constObj = null;
}
var constraint = getConstraintFromCPoint(cell);
xInput.value = constraint.x * 100;
yInput.value = constraint.y * 100;
dxInput.value = constraint.dx;
dyInput.value = constraint.dy;
pointPropsDiv.style.visibility = '';
}
else
{
pointPropsDiv.style.visibility = 'hidden';
}
};
fillCPointProp();
editingGraph.getSelectionModel().addListener(mxEvent.CHANGE, function()
{
if (editingGraph.getSelectionCount() > 0)
{
mxUtils.setOpacity(deleteBtn, 60); //Enabled
}
else
{
mxUtils.setOpacity(deleteBtn, 10); //Disabled
}
fillCPointProp();
});
editingGraph.addListener(mxEvent.CELLS_MOVED, fillCPointProp);
mxEvent.addListener(xInput, 'change', applyPointProp);
mxEvent.addListener(yInput, 'change', applyPointProp);
mxEvent.addListener(dxInput, 'change', applyPointProp);
mxEvent.addListener(dyInput, 'change', applyPointProp);
var cancelBtn = mxUtils.button(mxResources.get('cancel'), function()
{
destroy();
editorUi.hideDialog();
});
cancelBtn.className = 'geBtn';
var applyBtn = mxUtils.button(mxResources.get('apply'), function()
{
var cells = editingGraph.model.cells, points = [], constraints = [];
for (var id in cells)
{
var cp = cells[id];
if (!cp.cp) continue;
constraints.push(getConstraintFromCPoint(cp));
}
//Find and remove identical points
constraints.sort(function(a, b)
{
return (a.x != b.x) ? a.x - b.x : ((a.y != b.y) ? a.y - b.y :
((a.dx != b.dx) ? a.dx - b.dx : a.dy - b.dy)); //Sort based on x then y, dx and dy
});
for (var i = 0; i < constraints.length; i++)
{
if (i > 0 && constraints[i].x == constraints[i - 1].x && constraints[i].y == constraints[i - 1].y
&& constraints[i].dx == constraints[i - 1].dx && constraints[i].dy == constraints[i - 1].dy)
{
continue; //Skip this identical point
}
points.push('[' + constraints[i].x + ',' + constraints[i].y + ',0,' +
constraints[i].dx + ',' + constraints[i].dy + ']');
}
editorUi.editor.graph.setCellStyles('points', '[' + points.join(',') + ']', [cell]);
destroy();
editorUi.hideDialog();
});
applyBtn.className = 'geBtn gePrimaryBtn';
var resetBtn = mxUtils.button(mxResources.get('reset'), function()
{
editorUi.editor.graph.setCellStyles('points', null, [cell]);
destroy();
editorUi.hideDialog();
});
resetBtn.className = 'geBtn';
var buttons = document.createElement('div');
buttons.style.marginTop = '10px';
buttons.style.textAlign = 'right';
if (!editorUi.isOffline())
{
var helpBtn = mxUtils.button(mxResources.get('help'), function()
{
editorUi.openLink('https://www.drawio.com/doc/faq/shape-connection-points-customise');
});
helpBtn.className = 'geBtn';
buttons.appendChild(helpBtn);
}
if (editorUi.editor.cancelFirst)
{
buttons.appendChild(cancelBtn);
}
buttons.appendChild(resetBtn);
buttons.appendChild(applyBtn);
if (!editorUi.editor.cancelFirst)
{
buttons.appendChild(cancelBtn);
}
div.appendChild(buttons);
};
function destroy()
{
if (keyHandler != null)
{
keyHandler.destroy();
}
};
this.destroy = destroy;
this.container = div;
};