mxgraph-map-fix
Version:
mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.
1,185 lines (1,029 loc) • 138 kB
JavaScript
/**
* Copyright (c) 2006-2012, JGraph Ltd
*/
/**
* Construcs a new sidebar for the given editor.
*/
function Sidebar(editorUi, container)
{
this.editorUi = editorUi;
this.container = container;
this.palettes = new Object();
this.taglist = new Object();
this.showTooltips = true;
this.graph = editorUi.createTemporaryGraph(this.editorUi.editor.graph.getStylesheet());
this.graph.cellRenderer.antiAlias = false;
this.graph.foldingEnabled = false;
// Workaround for blank output in IE11-
if (!mxClient.IS_IE && !mxClient.IS_IE11)
{
this.graph.container.style.display = 'none';
}
document.body.appendChild(this.graph.container);
this.pointerUpHandler = mxUtils.bind(this, function()
{
this.showTooltips = true;
});
mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerup' : 'mouseup', this.pointerUpHandler);
this.pointerDownHandler = mxUtils.bind(this, function()
{
this.showTooltips = false;
this.hideTooltip();
});
mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', this.pointerDownHandler);
this.pointerMoveHandler = mxUtils.bind(this, function(evt)
{
var src = mxEvent.getSource(evt);
while (src != null)
{
if (src == this.currentElt)
{
return;
}
src = src.parentNode;
}
this.hideTooltip();
});
mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointermove' : 'mousemove', this.pointerMoveHandler);
// Handles mouse leaving the window
this.pointerOutHandler = mxUtils.bind(this, function(evt)
{
if (evt.toElement == null && evt.relatedTarget == null)
{
this.hideTooltip();
}
});
mxEvent.addListener(document, (mxClient.IS_POINTER) ? 'pointerout' : 'mouseout', this.pointerOutHandler);
// Enables tooltips after scroll
mxEvent.addListener(container, 'scroll', mxUtils.bind(this, function()
{
this.showTooltips = true;
}));
this.init();
// Pre-fetches tooltip image
if (!mxClient.IS_SVG)
{
new Image().src = IMAGE_PATH + '/tooltip.png';
}
};
/**
* Adds all palettes to the sidebar.
*/
Sidebar.prototype.init = function()
{
var dir = STENCIL_PATH;
this.addSearchPalette(true);
this.addGeneralPalette(true);
this.addMiscPalette(false);
this.addAdvancedPalette(false);
this.addBasicPalette(dir);
this.addStencilPalette('arrows', mxResources.get('arrows'), dir + '/arrows.xml',
';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2');
this.addUmlPalette(false);
this.addBpmnPalette(dir, false);
this.addStencilPalette('flowchart', 'Flowchart', dir + '/flowchart.xml',
';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2');
this.addImagePalette('clipart', mxResources.get('clipart'), dir + '/clipart/', '_128x128.png',
['Earth_globe', 'Empty_Folder', 'Full_Folder', 'Gear', 'Lock', 'Software', 'Virus', 'Email',
'Database', 'Router_Icon', 'iPad', 'iMac', 'Laptop', 'MacBook', 'Monitor_Tower', 'Printer',
'Server_Tower', 'Workstation', 'Firewall_02', 'Wireless_Router_N', 'Credit_Card',
'Piggy_Bank', 'Graph', 'Safe', 'Shopping_Cart', 'Suit1', 'Suit2', 'Suit3', 'Pilot1',
'Worker1', 'Soldier1', 'Doctor1', 'Tech1', 'Security1', 'Telesales1'], null,
{'Wireless_Router_N': 'wireless router switch wap wifi access point wlan',
'Router_Icon': 'router switch'});
};
/**
* Sets the default font size.
*/
Sidebar.prototype.collapsedImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/collapsed.gif' : 'data:image/gif;base64,R0lGODlhDQANAIABAJmZmf///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNUQyRTJFNjZGNUYxMUU1QjZEOThCNDYxMDQ2MzNCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNUQyRTJFNzZGNUYxMUU1QjZEOThCNDYxMDQ2MzNCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFERjc3MEUxNkY1RjExRTVCNkQ5OEI0NjEwNDYzM0JCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFERjc3MEUyNkY1RjExRTVCNkQ5OEI0NjEwNDYzM0JCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAA0ADQAAAhSMj6lrwAjcC1GyahV+dcZJgeIIFgA7';
/**
* Sets the default font size.
*/
Sidebar.prototype.expandedImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/expanded.gif' : 'data:image/gif;base64,R0lGODlhDQANAIABAJmZmf///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxREY3NzBERjZGNUYxMUU1QjZEOThCNDYxMDQ2MzNCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxREY3NzBFMDZGNUYxMUU1QjZEOThCNDYxMDQ2MzNCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFERjc3MERENkY1RjExRTVCNkQ5OEI0NjEwNDYzM0JCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFERjc3MERFNkY1RjExRTVCNkQ5OEI0NjEwNDYzM0JCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAA0ADQAAAhGMj6nL3QAjVHIu6azbvPtWAAA7';
/**
* Sets the default font size.
*/
Sidebar.prototype.tooltipImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/tooltip.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAbCAMAAAB7jU7LAAAACVBMVEX///+ZmZn///9Y2COLAAAAA3RSTlP//wDXyg1BAAAAOElEQVR42mXQMQ4AMAgDsWv//+iutcJmIQSk+9dJpVKpVCqVSqVSqZTdncWzF8/NeP7FkxWenPEDOnUBiL3jWx0AAAAASUVORK5CYII=';
/**
*
*/
Sidebar.prototype.searchImage = (!mxClient.IS_SVG) ? IMAGE_PATH + '/search.png' : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEaSURBVHjabNGxS5VxFIfxz71XaWuQUJCG/gCHhgTD9VpEETg4aMOlQRp0EoezObgcd220KQiXmpretTAHQRBdojlQEJyukPdt+b1ywfvAGc7wnHP4nlZd1yKijQW8xzNc4Su+ZOYfQ3T6/f4YNvEJYzjELXp4VVXVz263+7cR2niBxAFeZ2YPi3iHR/gYERPDwhpOsd6sz8x/mfkNG3iOlWFhFj8y89J9KvzGXER0GuEaD42mgwHqUtoljbcRsTBCeINpfM/MgZLKPpaxFxGbOCqDXmILN7hoJrTKH+axhxmcYRxP0MIDnOBDZv5q1XUNIuJxifJp+UNV7t7BFM6xeic0RMQ4Bpl5W/ol7GISx/eEUUTECrbx+f8A8xhiZht9zsgAAAAASUVORK5CYII=';
/**
* Specifies if tooltips should be visible. Default is true.
*/
Sidebar.prototype.enableTooltips = true;
/**
* Specifies the delay for the tooltip. Default is 16 px.
*/
Sidebar.prototype.tooltipBorder = 16;
/**
* Specifies the delay for the tooltip. Default is 300 ms.
*/
Sidebar.prototype.tooltipDelay = 300;
/**
* Specifies the delay for the drop target icons. Default is 200 ms.
*/
Sidebar.prototype.dropTargetDelay = 200;
/**
* Specifies the URL of the gear image.
*/
Sidebar.prototype.gearImage = STENCIL_PATH + '/clipart/Gear_128x128.png';
/**
* Specifies the width of the thumbnails.
*/
Sidebar.prototype.thumbWidth = 36;
/**
* Specifies the height of the thumbnails.
*/
Sidebar.prototype.thumbHeight = 36;
/**
* Specifies the padding for the thumbnails. Default is 3.
*/
Sidebar.prototype.thumbPadding = (document.documentMode >= 5) ? 0 : 1;
/**
* Specifies the delay for the tooltip. Default is 2 px.
*/
Sidebar.prototype.thumbBorder = 2;
/**
* Specifies the size of the sidebar titles.
*/
Sidebar.prototype.sidebarTitleSize = 9;
/**
* Specifies if titles in the sidebar should be enabled.
*/
Sidebar.prototype.sidebarTitles = false;
/**
* Specifies if titles in the tooltips should be enabled.
*/
Sidebar.prototype.tooltipTitles = true;
/**
* Specifies if titles in the tooltips should be enabled.
*/
Sidebar.prototype.maxTooltipWidth = 400;
/**
* Specifies if titles in the tooltips should be enabled.
*/
Sidebar.prototype.maxTooltipHeight = 400;
/**
* Specifies if stencil files should be loaded and added to the search index
* when stencil palettes are added. If this is false then the stencil files
* are lazy-loaded when the palette is shown.
*/
Sidebar.prototype.addStencilsToIndex = true;
/**
* Specifies the width for clipart images. Default is 80.
*/
Sidebar.prototype.defaultImageWidth = 80;
/**
* Specifies the height for clipart images. Default is 80.
*/
Sidebar.prototype.defaultImageHeight = 80;
/**
* Adds all palettes to the sidebar.
*/
Sidebar.prototype.getTooltipOffset = function()
{
return new mxPoint(0, 0);
};
/**
* Adds all palettes to the sidebar.
*/
Sidebar.prototype.showTooltip = function(elt, cells, w, h, title, showLabel)
{
if (this.enableTooltips && this.showTooltips)
{
if (this.currentElt != elt)
{
if (this.thread != null)
{
window.clearTimeout(this.thread);
this.thread = null;
}
var show = mxUtils.bind(this, function()
{
// Lazy creation of the DOM nodes and graph instance
if (this.tooltip == null)
{
this.tooltip = document.createElement('div');
this.tooltip.className = 'geSidebarTooltip';
this.tooltip.style.zIndex = mxPopupMenu.prototype.zIndex - 1;
document.body.appendChild(this.tooltip);
this.graph2 = new Graph(this.tooltip, null, null, this.editorUi.editor.graph.getStylesheet());
this.graph2.resetViewOnRootChange = false;
this.graph2.foldingEnabled = false;
this.graph2.gridEnabled = false;
this.graph2.autoScroll = false;
this.graph2.setTooltips(false);
this.graph2.setConnectable(false);
this.graph2.setEnabled(false);
if (!mxClient.IS_SVG)
{
this.graph2.view.canvas.style.position = 'relative';
}
this.tooltipImage = mxUtils.createImage(this.tooltipImage);
this.tooltipImage.className = 'geSidebarTooltipImage';
this.tooltipImage.style.zIndex = mxPopupMenu.prototype.zIndex - 1;
this.tooltipImage.style.position = 'absolute';
this.tooltipImage.style.width = '14px';
this.tooltipImage.style.height = '27px';
document.body.appendChild(this.tooltipImage);
}
this.graph2.model.clear();
this.graph2.view.setTranslate(this.tooltipBorder, this.tooltipBorder);
if (w > this.maxTooltipWidth || h > this.maxTooltipHeight)
{
this.graph2.view.scale = Math.round(Math.min(this.maxTooltipWidth / w, this.maxTooltipHeight / h) * 100) / 100;
}
else
{
this.graph2.view.scale = 1;
}
this.tooltip.style.display = 'block';
this.graph2.labelsVisible = (showLabel == null || showLabel);
var fo = mxClient.NO_FO;
mxClient.NO_FO = Editor.prototype.originalNoForeignObject;
this.graph2.addCells(cells);
mxClient.NO_FO = fo;
var bounds = this.graph2.getGraphBounds();
var width = bounds.width + 2 * this.tooltipBorder + 4;
var height = bounds.height + 2 * this.tooltipBorder;
if (mxClient.IS_QUIRKS)
{
height += 4;
this.tooltip.style.overflow = 'hidden';
}
else
{
this.tooltip.style.overflow = 'visible';
}
this.tooltipImage.style.visibility = 'visible';
this.tooltip.style.width = width + 'px';
// Adds title for entry
if (this.tooltipTitles && title != null && title.length > 0)
{
if (this.tooltipTitle == null)
{
this.tooltipTitle = document.createElement('div');
this.tooltipTitle.style.borderTop = '1px solid gray';
this.tooltipTitle.style.textAlign = 'center';
this.tooltipTitle.style.width = '100%';
// Oversize titles are cut-off currently. Should make tooltip wider later.
this.tooltipTitle.style.overflow = 'hidden';
if (mxClient.IS_SVG)
{
this.tooltipTitle.style.paddingTop = '6px';
}
else
{
this.tooltipTitle.style.position = 'absolute';
this.tooltipTitle.style.paddingTop = '6px';
}
this.tooltip.appendChild(this.tooltipTitle);
}
else
{
this.tooltipTitle.innerHTML = '';
}
this.tooltipTitle.style.display = '';
mxUtils.write(this.tooltipTitle, title);
var ddy = this.tooltipTitle.offsetHeight + 10;
height += ddy;
if (mxClient.IS_SVG)
{
this.tooltipTitle.style.marginTop = (2 - ddy) + 'px';
}
else
{
height -= 6;
this.tooltipTitle.style.top = (height - ddy) + 'px';
}
}
else if (this.tooltipTitle != null && this.tooltipTitle.parentNode != null)
{
this.tooltipTitle.style.display = 'none';
}
this.tooltip.style.height = height + 'px';
var x0 = -Math.round(bounds.x - this.tooltipBorder);
var y0 = -Math.round(bounds.y - this.tooltipBorder);
var b = document.body;
var d = document.documentElement;
var off = this.getTooltipOffset();
var bottom = Math.max(b.clientHeight || 0, d.clientHeight);
var left = this.container.clientWidth + this.editorUi.splitSize + 3 + this.editorUi.container.offsetLeft + off.x;
var top = Math.min(bottom - height - 20 /*status bar*/, Math.max(0, (this.editorUi.container.offsetTop +
this.container.offsetTop + elt.offsetTop - this.container.scrollTop - height / 2 + 16))) + off.y;
if (mxClient.IS_SVG)
{
if (x0 != 0 || y0 != 0)
{
this.graph2.view.canvas.setAttribute('transform', 'translate(' + x0 + ',' + y0 + ')');
}
else
{
this.graph2.view.canvas.removeAttribute('transform');
}
}
else
{
this.graph2.view.drawPane.style.left = x0 + 'px';
this.graph2.view.drawPane.style.top = y0 + 'px';
}
// Workaround for ignored position CSS style in IE9
// (changes to relative without the following line)
this.tooltip.style.position = 'absolute';
this.tooltip.style.left = left + 'px';
this.tooltip.style.top = top + 'px';
this.tooltipImage.style.left = (left - 13) + 'px';
this.tooltipImage.style.top = (top + height / 2 - 13) + 'px';
});
if (this.tooltip != null && this.tooltip.style.display != 'none')
{
show();
}
else
{
this.thread = window.setTimeout(show, this.tooltipDelay);
}
this.currentElt = elt;
}
}
};
/**
* Hides the current tooltip.
*/
Sidebar.prototype.hideTooltip = function()
{
if (this.thread != null)
{
window.clearTimeout(this.thread);
this.thread = null;
}
if (this.tooltip != null)
{
this.tooltip.style.display = 'none';
this.tooltipImage.style.visibility = 'hidden';
this.currentElt = null;
}
};
/**
* Hides the current tooltip.
*/
Sidebar.prototype.addDataEntry = function(tags, width, height, title, data)
{
return this.addEntry(tags, mxUtils.bind(this, function()
{
return this.createVertexTemplateFromData(data, width, height, title);
}));
};
/**
* Hides the current tooltip.
*/
Sidebar.prototype.addEntry = function(tags, fn)
{
if (this.taglist != null && tags != null && tags.length > 0)
{
// Replaces special characters
var tmp = tags.toLowerCase().replace(/[\/\,\(\)]/g, ' ').split(' ');
var doAddEntry = mxUtils.bind(this, function(tag)
{
if (tag.length > 1)
{
var entry = this.taglist[tag];
if (typeof entry !== 'object')
{
entry = {entries: [], dict: new mxDictionary()};
this.taglist[tag] = entry;
}
// Ignores duplicates
if (entry.dict.get(fn) == null)
{
entry.dict.put(fn, fn);
entry.entries.push(fn);
}
}
});
for (var i = 0; i < tmp.length; i++)
{
doAddEntry(tmp[i]);
// Adds additional entry with removed trailing numbers
var normalized = tmp[i].replace(/\.*\d*$/, '');
if (normalized != tmp[i])
{
doAddEntry(normalized);
}
}
}
return fn;
};
/**
* Adds shape search UI.
*/
Sidebar.prototype.searchEntries = function(searchTerms, count, page, success, error)
{
if (this.taglist != null && searchTerms != null)
{
var tmp = searchTerms.toLowerCase().split(' ');
var dict = new mxDictionary();
var max = (page + 1) * count;
var results = [];
var index = 0;
for (var i = 0; i < tmp.length; i++)
{
if (tmp[i].length > 0)
{
var entry = this.taglist[tmp[i]];
var tmpDict = new mxDictionary();
if (entry != null)
{
var arr = entry.entries;
results = [];
for (var j = 0; j < arr.length; j++)
{
var entry = arr[j];
// NOTE Array does not contain duplicates
if ((index == 0) == (dict.get(entry) == null))
{
tmpDict.put(entry, entry);
results.push(entry);
if (i == tmp.length - 1 && results.length == max)
{
success(results.slice(page * count, max), max, true, tmp);
return;
}
}
}
}
else
{
results = [];
}
dict = tmpDict;
index++;
}
}
var len = results.length;
success(results.slice(page * count, (page + 1) * count), len, false, tmp);
}
else
{
success([], null, null, tmp);
}
};
/**
* Adds shape search UI.
*/
Sidebar.prototype.filterTags = function(tags)
{
if (tags != null)
{
var arr = tags.split(' ');
var result = [];
var hash = {};
// Ignores tags with leading numbers, strips trailing numbers
for (var i = 0; i < arr.length; i++)
{
// Removes duplicates
if (hash[arr[i]] == null)
{
hash[arr[i]] = '1';
result.push(arr[i]);
}
}
return result.join(' ');
}
return null;
};
/**
* Adds the general palette to the sidebar.
*/
Sidebar.prototype.cloneCell = function(cell, value)
{
var clone = cell.clone();
if (value != null)
{
clone.value = value;
}
return clone;
};
/**
* Adds shape search UI.
*/
Sidebar.prototype.addSearchPalette = function(expand)
{
var elt = document.createElement('div');
elt.style.visibility = 'hidden';
this.container.appendChild(elt);
var div = document.createElement('div');
div.className = 'geSidebar';
div.style.boxSizing = 'border-box';
div.style.overflow = 'hidden';
div.style.width = '100%';
div.style.padding = '8px';
div.style.paddingTop = '14px';
div.style.paddingBottom = '0px';
if (!expand)
{
div.style.display = 'none';
}
var inner = document.createElement('div');
inner.style.whiteSpace = 'nowrap';
inner.style.textOverflow = 'clip';
inner.style.paddingBottom = '8px';
inner.style.cursor = 'default';
var input = document.createElement('input');
input.setAttribute('placeholder', mxResources.get('searchShapes'));
input.setAttribute('type', 'text');
input.style.fontSize = '12px';
input.style.overflow = 'hidden';
input.style.boxSizing = 'border-box';
input.style.border = 'solid 1px #d5d5d5';
input.style.borderRadius = '4px';
input.style.width = '100%';
input.style.outline = 'none';
input.style.padding = '6px';
inner.appendChild(input);
var cross = document.createElement('img');
cross.setAttribute('src', Sidebar.prototype.searchImage);
cross.setAttribute('title', mxResources.get('search'));
cross.style.position = 'relative';
cross.style.left = '-18px';
if (mxClient.IS_QUIRKS)
{
input.style.height = '28px';
cross.style.top = '-4px';
}
else
{
cross.style.top = '1px';
}
// Needed to block event transparency in IE
cross.style.background = 'url(\'' + this.editorUi.editor.transparentImage + '\')';
var find;
inner.appendChild(cross);
div.appendChild(inner);
var center = document.createElement('center');
var button = mxUtils.button(mxResources.get('moreResults'), function()
{
find();
});
button.style.display = 'none';
// Workaround for inherited line-height in quirks mode
button.style.lineHeight = 'normal';
button.style.marginTop = '4px';
button.style.marginBottom = '8px';
center.style.paddingTop = '4px';
center.style.paddingBottom = '8px';
center.appendChild(button);
div.appendChild(center);
var searchTerm = '';
var active = false;
var complete = false;
var page = 0;
var hash = new Object();
// Count is dynamically updated below
var count = 12;
var clearDiv = mxUtils.bind(this, function()
{
active = false;
this.currentSearch = null;
var child = div.firstChild;
while (child != null)
{
var next = child.nextSibling;
if (child != inner && child != center)
{
child.parentNode.removeChild(child);
}
child = next;
}
});
mxEvent.addListener(cross, 'click', function()
{
if (cross.getAttribute('src') == Dialog.prototype.closeImage)
{
cross.setAttribute('src', Sidebar.prototype.searchImage);
cross.setAttribute('title', mxResources.get('search'));
button.style.display = 'none';
input.value = '';
searchTerm = '';
clearDiv();
}
input.focus();
});
find = mxUtils.bind(this, function()
{
// Shows 4 rows (minimum 4 results)
count = 4 * Math.max(1, Math.floor(this.container.clientWidth / (this.thumbWidth + 10)));
this.hideTooltip();
if (input.value != '')
{
if (center.parentNode != null)
{
if (searchTerm != input.value)
{
clearDiv();
searchTerm = input.value;
hash = new Object();
complete = false;
page = 0;
}
if (!active && !complete)
{
button.setAttribute('disabled', 'true');
button.style.display = '';
button.style.cursor = 'wait';
button.innerHTML = mxResources.get('loading') + '...';
active = true;
// Ignores old results
var current = new Object();
this.currentSearch = current;
this.searchEntries(searchTerm, count, page, mxUtils.bind(this, function(results, len, more, terms)
{
if (this.currentSearch == current)
{
results = (results != null) ? results : [];
active = false;
page++;
center.parentNode.removeChild(center);
this.insertSearchHint(div, searchTerm, count, page, results, len, more, terms);
for (var i = 0; i < results.length; i++)
{
var elt = results[i]();
// Avoids duplicates in results
if (hash[elt.innerHTML] == null)
{
hash[elt.innerHTML] = '1';
div.appendChild(results[i]());
}
}
if (more)
{
button.removeAttribute('disabled');
button.innerHTML = mxResources.get('moreResults');
}
else
{
button.innerHTML = mxResources.get('reset');
button.style.display = 'none';
complete = true;
}
button.style.cursor = '';
div.appendChild(center);
}
}), mxUtils.bind(this, function()
{
// TODO: Error handling
button.style.cursor = '';
}));
}
}
}
else
{
clearDiv();
input.value = '';
searchTerm = '';
hash = new Object();
button.style.display = 'none';
complete = false;
input.focus();
}
});
mxEvent.addListener(input, 'keydown', mxUtils.bind(this, function(evt)
{
if (evt.keyCode == 13 /* Enter */)
{
find();
}
}));
mxEvent.addListener(input, 'focus', function()
{
input.style.paddingRight = '';
});
mxEvent.addListener(input, 'blur', function()
{
input.style.paddingRight = '20px';
});
input.style.paddingRight = '20px';
mxEvent.addListener(input, 'keyup', mxUtils.bind(this, function(evt)
{
if (input.value == '')
{
cross.setAttribute('src', Sidebar.prototype.searchImage);
cross.setAttribute('title', mxResources.get('search'));
}
else
{
cross.setAttribute('src', Dialog.prototype.closeImage);
cross.setAttribute('title', mxResources.get('reset'));
}
if (input.value == '')
{
complete = true;
button.style.display = 'none';
}
else if (input.value != searchTerm)
{
button.style.display = 'none';
complete = false;
}
else if (!active)
{
if (complete)
{
button.style.display = 'none';
}
else
{
button.style.display = '';
}
}
}));
// Workaround for blocked text selection in Editor
mxEvent.addListener(input, 'mousedown', function(evt)
{
if (evt.stopPropagation)
{
evt.stopPropagation();
}
evt.cancelBubble = true;
});
// Workaround for blocked text selection in Editor
mxEvent.addListener(input, 'selectstart', function(evt)
{
if (evt.stopPropagation)
{
evt.stopPropagation();
}
evt.cancelBubble = true;
});
var outer = document.createElement('div');
outer.appendChild(div);
this.container.appendChild(outer);
// Keeps references to the DOM nodes
this.palettes['search'] = [elt, outer];
};
/**
* Adds the general palette to the sidebar.
*/
Sidebar.prototype.insertSearchHint = function(div, searchTerm, count, page, results, len, more, terms)
{
if (results.length == 0 && page == 1)
{
var err = document.createElement('div');
err.className = 'geTitle';
err.style.cssText = 'background-color:transparent;border-color:transparent;' +
'color:gray;padding:6px 0px 0px 0px !important;margin:4px 8px 4px 8px;' +
'text-align:center;cursor:default !important';
mxUtils.write(err, mxResources.get('noResultsFor', [searchTerm]));
div.appendChild(err);
}
};
/**
* Adds the general palette to the sidebar.
*/
Sidebar.prototype.addGeneralPalette = function(expand)
{
var lineTags = 'line lines connector connectors connection connections arrow arrows ';
var fns = [
this.createVertexTemplateEntry('rounded=0;whiteSpace=wrap;html=1;', 120, 60, '', 'Rectangle', null, null, 'rect rectangle box'),
this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;', 120, 60, '', 'Rounded Rectangle', null, null, 'rounded rect rectangle box'),
// Explicit strokecolor/fillcolor=none is a workaround to maintain transparent background regardless of current style
this.createVertexTemplateEntry('text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;',
40, 20, 'Text', 'Text', null, null, 'text textbox textarea label'),
this.createVertexTemplateEntry('text;html=1;strokeColor=none;fillColor=none;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;', 190, 120,
'<h1>Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',
'Textbox', null, null, 'text textbox textarea'),
this.createVertexTemplateEntry('ellipse;whiteSpace=wrap;html=1;', 120, 80, '', 'Ellipse', null, null, 'oval ellipse state'),
this.createVertexTemplateEntry('whiteSpace=wrap;html=1;aspect=fixed;', 80, 80, '', 'Square', null, null, 'square'),
this.createVertexTemplateEntry('ellipse;whiteSpace=wrap;html=1;aspect=fixed;', 80, 80, '', 'Circle', null, null, 'circle'),
this.createVertexTemplateEntry('shape=process;whiteSpace=wrap;html=1;', 120, 60, '', 'Process', null, null, 'process task'),
this.createVertexTemplateEntry('rhombus;whiteSpace=wrap;html=1;', 80, 80, '', 'Diamond', null, null, 'diamond rhombus if condition decision conditional question test'),
this.createVertexTemplateEntry('shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;', 120, 60, '', 'Parallelogram'),
this.createVertexTemplateEntry('shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;', 120, 80, '', 'Hexagon', null, null, 'hexagon preparation'),
this.createVertexTemplateEntry('triangle;whiteSpace=wrap;html=1;', 60, 80, '', 'Triangle', null, null, 'triangle logic inverter buffer'),
this.createVertexTemplateEntry('shape=cylinder;whiteSpace=wrap;html=1;boundedLbl=1;', 60, 80, '', 'Cylinder', null, null, 'cylinder data database'),
this.createVertexTemplateEntry('ellipse;shape=cloud;whiteSpace=wrap;html=1;', 120, 80, '', 'Cloud', null, null, 'cloud network'),
this.createVertexTemplateEntry('shape=document;whiteSpace=wrap;html=1;boundedLbl=1;', 120, 80, '', 'Document'),
this.createVertexTemplateEntry('shape=internalStorage;whiteSpace=wrap;html=1;', 80, 80, '', 'Internal Storage'),
this.createVertexTemplateEntry('shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;', 120, 80, '', 'Cube'),
this.createVertexTemplateEntry('shape=step;perimeter=stepPerimeter;whiteSpace=wrap;html=1;fixedSize=1;', 120, 80, '', 'Step'),
this.createVertexTemplateEntry('shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;html=1;', 120, 60, '', 'Trapezoid'),
this.createVertexTemplateEntry('shape=tape;whiteSpace=wrap;html=1;', 120, 100, '', 'Tape'),
this.createVertexTemplateEntry('shape=note;whiteSpace=wrap;html=1;', 80, 100, '', 'Note'),
this.createVertexTemplateEntry('shape=card;whiteSpace=wrap;html=1;', 80, 100, '', 'Card'),
this.createVertexTemplateEntry('shape=callout;whiteSpace=wrap;html=1;perimeter=calloutPerimeter;', 120, 80, '', 'Callout'),
this.createVertexTemplateEntry('shape=umlActor;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;html=1;', 30, 60, 'Actor', 'Actor', false, null, 'user person human stickman'),
this.addEntry('curve', mxUtils.bind(this, function()
{
var cell = new mxCell('', new mxGeometry(0, 0, 50, 50), 'curved=1;endArrow=classic;html=1;');
cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
cell.geometry.relative = true;
cell.edge = true;
return this.createEdgeTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Curve');
})),
this.createEdgeTemplateEntry('shape=flexArrow;endArrow=classic;startArrow=classic;html=1;fillColor=#ffffff;', 50, 50, '', 'Bidirectional Arrow', null, lineTags + 'bidirectional'),
this.createEdgeTemplateEntry('shape=flexArrow;endArrow=classic;html=1;fillColor=#ffffff;', 50, 50, '', 'Arrow', null, lineTags + 'directional directed'),
this.createEdgeTemplateEntry('shape=link;html=1;', 50, 50, '', 'Link', null, lineTags + 'link'),
this.createEdgeTemplateEntry('endArrow=none;dashed=1;html=1;', 50, 50, '', 'Dashed Line', null, lineTags + 'dashed undirected no'),
this.createEdgeTemplateEntry('endArrow=none;html=1;', 50, 50, '', 'Line', null, lineTags + 'simple undirected plain blank no'),
this.createEdgeTemplateEntry('endArrow=classic;startArrow=classic;html=1;', 50, 50, '', 'Bidirectional Connector', null, lineTags + 'bidirectional'),
this.createEdgeTemplateEntry('endArrow=classic;html=1;', 50, 50, '', 'Directional Connector', null, lineTags + 'directional directed')
];
this.addPaletteFunctions('general', mxResources.get('general'), (expand != null) ? expand : true, fns);
};
/**
* Adds the general palette to the sidebar.
*/
Sidebar.prototype.addBasicPalette = function(dir)
{
this.addStencilPalette('basic', mxResources.get('basic'), dir + '/basic.xml',
';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2',
null, null, null, null, [
this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;top=0;bottom=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;right=0;top=0;bottom=0;fillColor=none;routingCenterX=-0.5;', 120, 60, '', 'Partial Rectangle'),
this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;bottom=0;right=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;top=0;left=0;fillColor=none;', 120, 60, '', 'Partial Rectangle')
]);
};
/**
* Adds the general palette to the sidebar.
*/
Sidebar.prototype.addMiscPalette = function(expand)
{
var lineTags = 'line lines connector connectors connection connections arrow arrows '
var fns = [
this.createVertexTemplateEntry('text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;', 100, 40, 'Title', 'Title', null, null, 'text heading title'),
this.createVertexTemplateEntry('text;strokeColor=none;fillColor=none;html=1;whiteSpace=wrap;verticalAlign=middle;overflow=hidden;', 100, 80,
'<ul><li>Value 1</li><li>Value 2</li><li>Value 3</li></ul>', 'Unordered List'),
this.createVertexTemplateEntry('text;strokeColor=none;fillColor=none;html=1;whiteSpace=wrap;verticalAlign=middle;overflow=hidden;', 100, 80,
'<ol><li>Value 1</li><li>Value 2</li><li>Value 3</li></ol>', 'Ordered List'),
this.createVertexTemplateEntry('text;html=1;strokeColor=#c0c0c0;fillColor=#ffffff;overflow=fill;rounded=0;', 280, 160,
'<table border="1" width="100%" height="100%" cellpadding="4" style="width:100%;height:100%;border-collapse:collapse;">' +
'<tr style="background-color:#A7C942;color:#ffffff;border:1px solid #98bf21;"><th align="left">Title 1</th><th align="left">Title 2</th><th align="left">Title 3</th></tr>' +
'<tr style="border:1px solid #98bf21;"><td>Value 1</td><td>Value 2</td><td>Value 3</td></tr>' +
'<tr style="background-color:#EAF2D3;border:1px solid #98bf21;"><td>Value 4</td><td>Value 5</td><td>Value 6</td></tr>' +
'<tr style="border:1px solid #98bf21;"><td>Value 7</td><td>Value 8</td><td>Value 9</td></tr>' +
'<tr style="background-color:#EAF2D3;border:1px solid #98bf21;"><td>Value 10</td><td>Value 11</td><td>Value 12</td></tr></table>', 'Table 1'),
this.createVertexTemplateEntry('text;html=1;strokeColor=#c0c0c0;fillColor=none;overflow=fill;', 180, 140,
'<table border="0" width="100%" height="100%" style="width:100%;height:100%;border-collapse:collapse;">' +
'<tr><td align="center">Value 1</td><td align="center">Value 2</td><td align="center">Value 3</td></tr>' +
'<tr><td align="center">Value 4</td><td align="center">Value 5</td><td align="center">Value 6</td></tr>' +
'<tr><td align="center">Value 7</td><td align="center">Value 8</td><td align="center">Value 9</td></tr></table>', 'Table 2'),
this.createVertexTemplateEntry('text;html=1;strokeColor=none;fillColor=none;overflow=fill;', 180, 140,
'<table border="1" width="100%" height="100%" style="width:100%;height:100%;border-collapse:collapse;">' +
'<tr><td align="center">Value 1</td><td align="center">Value 2</td><td align="center">Value 3</td></tr>' +
'<tr><td align="center">Value 4</td><td align="center">Value 5</td><td align="center">Value 6</td></tr>' +
'<tr><td align="center">Value 7</td><td align="center">Value 8</td><td align="center">Value 9</td></tr></table>', 'Table 3'),
this.createVertexTemplateEntry('text;html=1;strokeColor=none;fillColor=none;overflow=fill;', 160, 140,
'<table border="1" width="100%" height="100%" cellpadding="4" style="width:100%;height:100%;border-collapse:collapse;">' +
'<tr><th align="center"><b>Title</b></th></tr>' +
'<tr><td align="center">Section 1.1\nSection 1.2\nSection 1.3</td></tr>' +
'<tr><td align="center">Section 2.1\nSection 2.2\nSection 2.3</td></tr></table>', 'Table 4'),
this.addEntry('link hyperlink', mxUtils.bind(this, function()
{
var cell = new mxCell('Link', new mxGeometry(0, 0, 60, 40), 'text;html=1;strokeColor=none;fillColor=none;whiteSpace=wrap;align=center;verticalAlign=middle;fontColor=#0000EE;fontStyle=4;');
cell.vertex = true;
this.graph.setLinkForCell(cell, 'https://www.draw.io');
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Link');
})),
this.addEntry('timestamp date time text label', mxUtils.bind(this, function()
{
var cell = new mxCell('%date{ddd mmm dd yyyy HH:MM:ss}%', new mxGeometry(0, 0, 160, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
cell.vertex = true;
this.graph.setAttributeForCell(cell, 'placeholders', '1');
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Timestamp');
})),
this.addEntry('variable placeholder metadata hello world text label', mxUtils.bind(this, function()
{
var cell = new mxCell('%name% Text', new mxGeometry(0, 0, 80, 20), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
cell.vertex = true;
this.graph.setAttributeForCell(cell, 'placeholders', '1');
this.graph.setAttributeForCell(cell, 'name', 'Variable');
return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Variable');
})),
this.createVertexTemplateEntry('shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;', 120, 80, '', 'Double Rectangle', null, null, 'rect rectangle box double'),
this.createVertexTemplateEntry('shape=ext;double=1;rounded=1;whiteSpace=wrap;html=1;', 120, 80, '', 'Double Rounded Rectangle', null, null, 'rounded rect rectangle box double'),
this.createVertexTemplateEntry('ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;', 100, 60, '', 'Double Ellipse', null, null, 'oval ellipse start end state double'),
this.createVertexTemplateEntry('shape=ext;double=1;whiteSpace=wrap;html=1;aspect=fixed;', 80, 80, '', 'Double Square', null, null, 'double square'),
this.createVertexTemplateEntry('ellipse;shape=doubleEllipse;whiteSpace=wrap;html=1;aspect=fixed;', 80, 80, '', 'Double Circle', null, null, 'double circle'),
this.createEdgeTemplateEntry('rounded=0;comic=1;strokeWidth=2;endArrow=blockThin;html=1;fontFamily=Comic Sans MS;fontStyle=1;', 50, 50, '', 'Comic Arrow'),
this.createVertexTemplateEntry('html=1;whiteSpace=wrap;comic=1;strokeWidth=2;fontFamily=Comic Sans MS;fontStyle=1;', 120, 60, 'RECTANGLE', 'Comic Rectangle', true, null, 'comic rectangle rect box text retro'),
this.createVertexTemplateEntry('rhombus;html=1;align=center;whiteSpace=wrap;comic=1;strokeWidth=2;fontFamily=Comic Sans MS;fontStyle=1;', 100, 100, 'DIAMOND', 'Comic Diamond', true, null, 'comic diamond rhombus if condition decision conditional question test retro'),
this.createVertexTemplateEntry('html=1;whiteSpace=wrap;aspect=fixed;shape=isoRectangle;', 150, 90, '', 'Isometric Square', true, null, 'rectangle rect box iso isometric'),
this.createVertexTemplateEntry('html=1;whiteSpace=wrap;aspect=fixed;shape=isoCube;', 90, 100, '', 'Isometric Cube', true, null, 'cube box iso isometric'),
this.createEdgeTemplateEntry('edgeStyle=isometricEdgeStyle;endArrow=none;html=1;', 50, 100, '', 'Isometric Edge 1'),
this.createEdgeTemplateEntry('edgeStyle=isometricEdgeStyle;endArrow=none;html=1;elbow=vertical;', 50, 100, '', 'Isometric Edge 2'),
this.createVertexTemplateEntry('shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;', 20, 120, '', 'Curly Bracket'),
this.createVertexTemplateEntry('line;strokeWidth=2;html=1;', 160, 10, '', 'Horizontal Line'),
this.createVertexTemplateEntry('line;strokeWidth=2;direction=south;html=1;', 10, 160, '', 'Vertical Line'),
this.createVertexTemplateEntry('line;strokeWidth=4;html=1;perimeter=backbonePerimeter;points=[];outlineConnect=0;', 160, 10, '', 'Horizontal Backbone', false, null, 'backbone bus network'),
this.createVertexTemplateEntry('line;strokeWidth=4;direction=south;html=1;perimeter=backbonePerimeter;points=[];outlineConnect=0;', 10, 160, '', 'Vertical Backbone', false, null, 'backbone bus network'),
this.createVertexTemplateEntry('shape=crossbar;whiteSpace=wrap;html=1;rounded=1;', 120, 20, '', 'Crossbar', false, null, 'crossbar distance measure dimension unit'),
this.createVertexTemplateEntry('shape=image;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;imageAspect=1;aspect=fixed;image=' + this.gearImage, 52, 61, '', 'Image (Fixed Aspect)', false, null, 'fixed image icon symbol'),
this.createVertexTemplateEntry('shape=image;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;imageAspect=0;image=' + this.gearImage, 50, 60, '', 'Image (Variable Aspect)', false, null, 'strechted image icon symbol'),
this.createVertexTemplateEntry('icon;html=1;image=' + this.gearImage, 60, 60, 'Icon', 'Icon', false, null, 'icon image symbol'),
this.createVertexTemplateEntry('label;whiteSpace=wrap;html=1;image=' + this.gearImage, 140, 60, 'Label', 'Label 1', null, null, 'label image icon symbol'),
this.createVertexTemplateEntry('label;whiteSpace=wrap;html=1;align=center;verticalAlign=bottom;spacingLeft=0;spacingBottom=4;imageAlign=center;imageVerticalAlign=top;image=' + this.gearImage, 120, 80, 'Label', 'Label 2', null, null, 'label image icon symbol'),
this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;left=0;right=0;fillColor=none;', 120, 60, '', 'Partial Rectangle'),
this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;left=0;right=0;top=0;fillColor=none;routingCenterY=0.5;', 120, 60, '', 'Partial Rectangle'),
this.createVertexTemplateEntry('shape=partialRectangle;whiteSpace=wrap;html=1;bottom=1;right=1;top=0;bottom=1;fillColor=none;routingCenterX=-0.5;', 120, 60, '', 'Partial Rectangle'),
this.createEdgeTemplateEntry('edgeStyle=segmentEdgeStyle;endArrow=classic;html=1;', 50, 50, '', 'Manual Line', null, lineTags + 'manual'),
this.createEdgeTemplateEntry('shape=filledEdge;rounded=0;fixDash=1;endArrow=none;strokeWidth=10;fillColor=#ffffff;edgeStyle=orthogonalEdgeStyle;', 60, 40, '', 'Filled Edge'),
this.createEdgeTemplateEntry('edgeStyle=elbowEdgeStyle;elbow=horizontal;endArrow=classic;html=1;', 50, 50, '', 'Horizontal Elbow', null, lineTags + 'elbow horizontal'),
this.createEdgeTemplateEntry('edgeStyle=elbowEdgeStyle;elbow=vertical;endArrow=classic;html=1;', 50, 50, '', 'Vertical Elbow', null, lineTags + 'elbow vertical')
];
this.addPaletteFunctions('misc', mxResources.get('misc'), (expand != null) ? expand : true, fns);
};
/**
* Adds the container palette to the sidebar.
*/
Sidebar.prototype.addAdvancedPalette = function(expand)
{
this.addPaletteFunctions('advanced', mxResources.get('advanced'), (expand != null) ? expand : false, this.createAdvancedShapes());
};
/**
* Adds the container palette to the sidebar.
*/
Sidebar.prototype.createAdvancedShapes = function()
{
// Avoids having to bind all functions to "this"
var sb = this;
// Reusable cells
var field = new mxCell('List Item', new mxGeometry(0, 0, 60, 26), 'text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;');
field.vertex = true;
return [
this.createVertexTemplateEntry('shape=xor;whiteSpace=wrap;html=1;', 60, 80, '', 'Or', null, null, 'logic or'),
this.createVertexTemplateEntry('shape=or;whiteSpace=wrap;html=1;', 60, 80, '', 'And', null, null, 'logic and'),
this.createVertexTemplateEntry('shape=dataStorage;whiteSpace=wrap;html=1;', 100, 80, '', 'Data Storage'),
this.createVertexTemplateEntry('shape=tapeData;whiteSpace=wrap;html=1;perimeter=ellipsePerimeter;', 80, 80, '', 'Tape Data'),
this.createVertexTemplateEntry('shape=manualInput;whiteSpace=wrap;html=1;', 80, 80, '', 'Manual Input'),
this.createVertexTemplateEntry('shape=loopLimit;whiteSpace=wrap;html=1;', 100, 80, '', 'Loop Limit'),
this.createVertexTemplateEntry('shape=offPageConnector;whiteSpace=wrap;html=1;', 80, 80, '', 'Off Page Connector'),
this.createVertexTemplateEntry('shape=delay;whiteSpace=wrap;html=1;', 80, 40, '', 'Delay'),
this.createVertexTemplateEntry('shape=display;whiteSpace=wrap;html=1;', 80, 40, '', 'Display'),
this.createVertexTemplateEntry('shape=singleArrow;direction=west;whiteSpace=wrap;html=1;', 100, 60, '', 'Arrow Left'),
this.createVertexTemplateEntry('shape=singleArrow;whiteSpace=wrap;html=1;', 100, 60, '', 'Arrow Right'),
this.createVertexTemplateEntry('shape=singleArrow;direction=north;whiteSpace=wrap;html=1;', 60, 100, '', 'Arrow Up'),
this.createVertexTemplateEntry('shape=singleArrow;direction=south;whiteSpace=wrap;html=1;', 60, 100, '', 'Arrow Down'),
this.createVertexTemplateEntry('shape=doubleArrow;whiteSpace=wrap;html=1;', 100, 60, '', 'Double Arrow'),
this.createVertexTemplateEntry('shape=doubleArrow;direction=south;whiteSpace=wrap;html=1;', 60, 100, '', 'Double Arrow Vertical', null, null, 'double arrow'),
this.createVertexTemplateEntry('shape=actor;whiteSpace=wrap;html=1;', 40, 60, '', 'User', null, null, 'user person human'),
this.createVertexTemplateEntry('shape=cross;whiteSpace=wrap;html=1;', 80, 80, '', 'Cross'),
this.createVertexTemplateEntry('shape=corner;whiteSpace=wrap;html=1;', 80, 80, '', 'Corner'),
this.createVertexTemplateEntry('shape=tee;whiteSpace=wrap;html=1;', 80, 80, '', 'Tee'),
this.createVertexTemplateEntry('shape=datastore;whiteSpace=wrap;html=1;', 60, 60, '', 'Data Store', null, null, 'data store cylinder database'),
this.createVertexTemplateEntry('shape=orEllipse;perimeter=ellipsePerimeter;whiteSpace=wrap;html=1;', 80, 80, '', 'Or', null, null, 'or circle oval ellipse'),
this.createVertexTemplateEntry('shape=sumEllipse;perimeter=ellipsePerimeter;whiteSpace=wrap;html=1;', 80, 80, '', 'Sum', null, null, 'sum circle oval ellipse'),
this.createVertexTemplateEntry('shape=lineEllipse;perimeter=ellipsePerimeter;whiteSpace=wrap;html=1;', 80, 80, '', 'Ellipse with horizontal divider', null, null, 'circle oval ellipse'),
this.createVertexTemplateEntry('shape=lineEllipse;line=vertical;perimeter=ellipsePerimeter;whiteSpace=wrap;html=1;', 80, 80, '', 'Ellipse with vertical divider', null, null, 'circle oval ellipse'),
this.createVertexTemplateEntry('shape=sortShape;perimeter=rhombusPerimeter;whiteSpace=wrap;html=1;', 80, 80, '', 'Sort', null, null, 'sort'),
this.createVertexTemplateEntry('shape=collate;whiteSpace=wrap;html=1;', 80, 80, '', 'Collate', null, null, 'collate'),
this.createVertexTemplateEntry('shape=switch;whiteSpace=wrap;html=1;', 60, 60, '', 'Switch', null, null, 'switch router'),
this.addEntry('process bar', function()
{
return sb.createVertexTemplateFromData('zZXRaoMwFIafJpcDjbNrb2233rRQ8AkyPdPQaCRJV+3T7yTG2rUVBoOtgpDzn/xJzncCIdGyateKNeVW5iBI9EqipZLS9KOqXYIQhAY8J9GKUBrgT+jbRDZ02aBhCmrzEwPtDZ9MHKBXdkpmoDWKCVN9VptO+Kw+8kqwGqMkK7nIN6yTB7uTNizbD1FSSsVPsjYMC1qFKHxwIZZSSIVxLZ1/nJNar5+oQPMT7IYCrqUta1ENzuqGaeOFTArBGs3f3Vmtoo2Se7ja1h00kSoHK4bBIKUNy3hdoPYU0mF91i9mT8EEL2ocZ3gKa00ayWujLZY4IfHKFonVDLsRGgXuQ90zBmWgneyTk3yT1iArMKrDKUeem9L3ajHrbSXwohxsQd/ggOleKM7ese048J2/fwuim1uQGmhQCW8vQMkacP3GCQgBFMftHEsr7cYYe95CnmKTPMFbYD8CQ++DGQy+/M5X4ku5wHYmdIktfvk9tecpavThqS3m/0YtnqIWPTy1cD77K2wYjo+Ay317I74A', 296, 100, 'Process Bar');
}),
this.createVertexTemplateEntry('swimlane;', 200, 200, 'Container', 'Container', null, null, 'container swimlane lane pool'),
this.addEntry('list', function()
{
var cell = new mxCell('List', new mxGeometry(0, 0, 140, 110),
'swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=26;fillColor=none;horizontalStack=0;' +
'resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;swimlaneFillColor=#ffffff;');
cell.vertex = true;
cell.insert(sb.cloneCell(field, 'Item 1'));
cell.insert(sb.cloneCell(field, 'Item 2'));
cell.insert(sb.cloneCell(field, 'Item 3'));
return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'List');
}),
this.addEntry('list item entry value', function()
{
return sb.createVertexTemplateFromCells([sb.cloneCell(field, 'List Item')], field.geometry.width, field.geometry.height, 'List Item');
})
];
};
/**
* Adds the general palette to the sidebar.
*/
Sidebar.prototype.addUmlPalette = function(expand)
{
// Avoids having to bind all functions to "this"
var sb = this;
// Reusable cells
var field = new mxCell('+ field: type', new mxGeometry(0, 0, 100, 26), 'text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;');
field.vertex = true;
var divider = new mxCell('', new mxGeometry(0, 0, 40, 8), 'line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;');
divider.vertex = true;
// Default tags
var dt = 'uml static class ';
var fns = [
this.createVertexTemplateEntry('html=1;', 110, 50, 'Object', 'Object', null, null, dt + 'object instance'),
this.createVertexTemplateEntry('html=1;', 110, 50, '«interface»<br><b>Name</b>', 'Interface', null, null, dt + 'interface object instance annotated annotation'),
this.addEntry(dt + 'object instance', function()
{
var cell = new mxCell('Classname', new mxGeometry(0, 0, 160, 90),
'swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;swimlaneFillColor=#ffffff;');
cell.vertex = true;
cell.