/**
* Copyright (c) 2006-2012, JGraph Ltd
*/
Format = function(editorUi, container)
{
this.editorUi = editorUi;
this.container = container;
};
/**
* Background color for inactive tabs.
*/
Format.inactiveTabBackgroundColor = '#e4e4e4';
/**
* Icons for markers (24x16).
*/
Format.classicFilledMarkerImage = Graph.createSvgImage(20, 22, '
' + graph.cellEditor.textarea.innerHTML + '
'; } blocks = [graph.cellEditor.textarea.firstChild]; } for (var i = 0; i < blocks.length; i++) { blocks[i].style.lineHeight = value + '%'; } input.value = value + ' %'; }, function(input) { // Used in CSS handler to update current value lineHeightInput = input; // KNOWN: Arrow up/down clear selection text in quirks/IE 8 // Text size via arrow button limits to 16 in IE11. Why? mxEvent.addListener(input, 'mousedown', function() { if (document.activeElement == graph.cellEditor.textarea) { selState = graph.cellEditor.saveSelection(); } }); mxEvent.addListener(input, 'touchstart', function() { if (document.activeElement == graph.cellEditor.textarea) { selState = graph.cellEditor.saveSelection(); } }); input.value = '120 %'; })); var insertPanel = stylePanel.cloneNode(false); insertPanel.style.paddingLeft = '0px'; var insertBtns = this.editorUi.toolbar.addItems(['link', 'image'], insertPanel, true); var btns = [ this.editorUi.toolbar.addButton('geSprite-horizontalrule', mxResources.get('insertHorizontalRule'), function() { document.execCommand('inserthorizontalrule', false); }, insertPanel), this.editorUi.toolbar.addMenuFunctionInContainer(insertPanel, 'geSprite-table', mxResources.get('table'), false, mxUtils.bind(this, function(menu) { this.editorUi.menus.addInsertTableItem(menu, null, null, false); }))]; this.styleButtons(insertBtns); this.styleButtons(btns); var wrapper2 = this.createPanel(); wrapper2.style.paddingTop = '10px'; wrapper2.style.paddingBottom = '10px'; wrapper2.appendChild(this.createTitle(mxResources.get('insert'))); wrapper2.appendChild(insertPanel); container.appendChild(wrapper2); var tablePanel = stylePanel.cloneNode(false); tablePanel.style.paddingLeft = '0px'; var btns = [ this.editorUi.toolbar.addButton('geSprite-insertcolumnbefore', mxResources.get('insertColumnBefore'), mxUtils.bind(this, function() { try { if (currentTable != null) { graph.insertColumn(currentTable, (tableCell != null) ? tableCell.cellIndex : 0); } } catch (e) { this.editorUi.handleError(e); } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertcolumnafter', mxResources.get('insertColumnAfter'), mxUtils.bind(this, function() { try { if (currentTable != null) { graph.insertColumn(currentTable, (tableCell != null) ? tableCell.cellIndex + 1 : -1); } } catch (e) { this.editorUi.handleError(e); } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-deletecolumn', mxResources.get('deleteColumn'), mxUtils.bind(this, function() { try { if (currentTable != null && tableCell != null) { graph.deleteColumn(currentTable, tableCell.cellIndex); } } catch (e) { this.editorUi.handleError(e); } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertrowbefore', mxResources.get('insertRowBefore'), mxUtils.bind(this, function() { try { if (currentTable != null && tableRow != null) { graph.insertRow(currentTable, tableRow.sectionRowIndex); } } catch (e) { this.editorUi.handleError(e); } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-insertrowafter', mxResources.get('insertRowAfter'), mxUtils.bind(this, function() { try { if (currentTable != null && tableRow != null) { graph.insertRow(currentTable, tableRow.sectionRowIndex + 1); } } catch (e) { this.editorUi.handleError(e); } }), tablePanel), this.editorUi.toolbar.addButton('geSprite-deleterow', mxResources.get('deleteRow'), mxUtils.bind(this, function() { try { if (currentTable != null && tableRow != null) { graph.deleteRow(currentTable, tableRow.sectionRowIndex); } } catch (e) { this.editorUi.handleError(e); } }), tablePanel)]; this.styleButtons(btns); btns[2].style.marginRight = '10px'; var wrapper3 = this.createPanel(); wrapper3.style.paddingTop = '10px'; wrapper3.style.paddingBottom = '10px'; wrapper3.appendChild(this.createTitle(mxResources.get('table'))); wrapper3.appendChild(tablePanel); var tablePanel2 = stylePanel.cloneNode(false); tablePanel2.style.paddingLeft = '0px'; var btns = [ this.editorUi.toolbar.addButton('geSprite-strokecolor', mxResources.get('borderColor'), mxUtils.bind(this, function(evt) { if (currentTable != null) { // Converts rgb(r,g,b) values var color = currentTable.style.borderColor.replace( /\brgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g, function($0, $1, $2, $3) { return "#" + ("0"+Number($1).toString(16)).substr(-2) + ("0"+Number($2).toString(16)).substr(-2) + ("0"+Number($3).toString(16)).substr(-2); }); this.editorUi.pickColor(color, function(newColor) { var targetElt = (tableCell != null && (evt == null || !mxEvent.isShiftDown(evt))) ? tableCell : currentTable; graph.processElements(targetElt, function(elt) { elt.style.border = null; }); if (newColor == null || newColor == mxConstants.NONE) { targetElt.removeAttribute('border'); targetElt.style.border = ''; targetElt.style.borderCollapse = ''; } else { targetElt.setAttribute('border', '1'); targetElt.style.border = '1px solid ' + newColor; targetElt.style.borderCollapse = 'collapse'; } }); } }), tablePanel2), this.editorUi.toolbar.addButton('geSprite-fillcolor', mxResources.get('backgroundColor'), mxUtils.bind(this, function(evt) { // Converts rgb(r,g,b) values if (currentTable != null) { var color = currentTable.style.backgroundColor.replace( /\brgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g, function($0, $1, $2, $3) { return "#" + ("0"+Number($1).toString(16)).substr(-2) + ("0"+Number($2).toString(16)).substr(-2) + ("0"+Number($3).toString(16)).substr(-2); }); this.editorUi.pickColor(color, function(newColor) { var targetElt = (tableCell != null && (evt == null || !mxEvent.isShiftDown(evt))) ? tableCell : currentTable; graph.processElements(targetElt, function(elt) { elt.style.backgroundColor = null; }); if (newColor == null || newColor == mxConstants.NONE) { targetElt.style.backgroundColor = ''; } else { targetElt.style.backgroundColor = newColor; } }); } }), tablePanel2), this.editorUi.toolbar.addButton('geSprite-fit', mxResources.get('spacing'), function() { if (currentTable != null) { var value = currentTable.getAttribute('cellPadding') || 0; var dlg = new FilenameDialog(ui, value, mxResources.get('apply'), mxUtils.bind(this, function(newValue) { if (newValue != null && newValue.length > 0) { currentTable.setAttribute('cellPadding', newValue); } else { currentTable.removeAttribute('cellPadding'); } }), mxResources.get('spacing')); ui.showDialog(dlg.container, 300, 80, true, true); dlg.init(); } }, tablePanel2), this.editorUi.toolbar.addButton('geSprite-left', mxResources.get('left'), function() { if (currentTable != null) { currentTable.setAttribute('align', 'left'); } }, tablePanel2), this.editorUi.toolbar.addButton('geSprite-center', mxResources.get('center'), function() { if (currentTable != null) { currentTable.setAttribute('align', 'center'); } }, tablePanel2), this.editorUi.toolbar.addButton('geSprite-right', mxResources.get('right'), function() { if (currentTable != null) { currentTable.setAttribute('align', 'right'); } }, tablePanel2)]; this.styleButtons(btns); btns[2].style.marginRight = '10px'; wrapper3.appendChild(tablePanel2); container.appendChild(wrapper3); tableWrapper = wrapper3; } function setSelected(elt, selected) { elt.style.backgroundImage = (selected) ? (Editor.isDarkMode() ? 'linear-gradient(rgb(0 161 241) 0px, rgb(0, 97, 146) 100%)': 'linear-gradient(#c5ecff 0px,#87d4fb 100%)') : ''; }; // Updates font style state before typing for (var i = 0; i < 3; i++) { (function(index) { mxEvent.addListener(fontStyleItems[index], 'click', function() { setSelected(fontStyleItems[index], fontStyleItems[index].style.backgroundImage == ''); }); })(i); } var listener = mxUtils.bind(this, function(sender, evt, force) { ss = ui.getSelectionState(); var fontStyle = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSTYLE, 0); setSelected(fontStyleItems[0], (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD); setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC); setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE); fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTFAMILY, Menus.prototype.defaultFont); setSelected(verticalItem, mxUtils.getValue(ss.style, mxConstants.STYLE_HORIZONTAL, '1') == '0'); if (force || document.activeElement != input) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize)); input.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } var align = mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER); setSelected(left, align == mxConstants.ALIGN_LEFT); setSelected(center, align == mxConstants.ALIGN_CENTER); setSelected(right, align == mxConstants.ALIGN_RIGHT); var valign = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE); setSelected(top, valign == mxConstants.ALIGN_TOP); setSelected(middle, valign == mxConstants.ALIGN_MIDDLE); setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM); var pos = mxUtils.getValue(ss.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER); var vpos = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE); if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP) { positionSelect.value = 'topLeft'; } else if (pos == mxConstants.ALIGN_CENTER && vpos == mxConstants.ALIGN_TOP) { positionSelect.value = 'top'; } else if (pos == mxConstants.ALIGN_RIGHT && vpos == mxConstants.ALIGN_TOP) { positionSelect.value = 'topRight'; } else if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_BOTTOM) { positionSelect.value = 'bottomLeft'; } else if (pos == mxConstants.ALIGN_CENTER && vpos == mxConstants.ALIGN_BOTTOM) { positionSelect.value = 'bottom'; } else if (pos == mxConstants.ALIGN_RIGHT && vpos == mxConstants.ALIGN_BOTTOM) { positionSelect.value = 'bottomRight'; } else if (pos == mxConstants.ALIGN_LEFT) { positionSelect.value = 'left'; } else if (pos == mxConstants.ALIGN_RIGHT) { positionSelect.value = 'right'; } else { positionSelect.value = 'center'; } var dir = mxUtils.getValue(ss.style, mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION); if (dir == mxConstants.TEXT_DIRECTION_RTL) { dirSelect.value = 'rightToLeft'; } else if (dir == mxConstants.TEXT_DIRECTION_LTR) { dirSelect.value = 'leftToRight'; } else if (dir == mxConstants.TEXT_DIRECTION_AUTO || !ss.html) { dirSelect.value = 'automatic'; } else if (dir == mxConstants.TEXT_DIRECTION_VERTICAL_LR) { dirSelect.value = 'vertical-leftToRight'; } else if (dir == mxConstants.TEXT_DIRECTION_VERTICAL_RL) { dirSelect.value = 'vertical-rightToLeft'; } if (force || document.activeElement != globalSpacing) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2)); globalSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != topSpacing) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_TOP, 0)); topSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != rightSpacing) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_RIGHT, 0)); rightSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != bottomSpacing) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_BOTTOM, 0)); bottomSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != leftSpacing) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_LEFT, 0)); leftSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } }); globalUpdate = this.installInputHandler(globalSpacing, mxConstants.STYLE_SPACING, 2, -999, 999, ' pt'); topUpdate = this.installInputHandler(topSpacing, mxConstants.STYLE_SPACING_TOP, 0, -999, 999, ' pt'); rightUpdate = this.installInputHandler(rightSpacing, mxConstants.STYLE_SPACING_RIGHT, 0, -999, 999, ' pt'); bottomUpdate = this.installInputHandler(bottomSpacing, mxConstants.STYLE_SPACING_BOTTOM, 0, -999, 999, ' pt'); leftUpdate = this.installInputHandler(leftSpacing, mxConstants.STYLE_SPACING_LEFT, 0, -999, 999, ' pt'); this.addKeyHandler(input, listener); this.addKeyHandler(globalSpacing, listener); this.addKeyHandler(topSpacing, listener); this.addKeyHandler(rightSpacing, listener); this.addKeyHandler(bottomSpacing, listener); this.addKeyHandler(leftSpacing, listener); graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); if (graph.cellEditor.isContentEditing()) { var updating = false; var updateCssHandler = function() { if (!updating) { updating = true; window.setTimeout(function() { var node = graph.getSelectedEditingElement(); if (node != null) { function getRelativeLineHeight(fontSize, css, elt) { if (elt.style != null && css != null) { var lineHeight = css.lineHeight if (elt.style.lineHeight != null && elt.style.lineHeight.substring(elt.style.lineHeight.length - 1) == '%') { return parseInt(elt.style.lineHeight) / 100; } else { return (lineHeight.substring(lineHeight.length - 2) == 'px') ? parseFloat(lineHeight) / fontSize : parseInt(lineHeight); } } else { return ''; } }; function getAbsoluteFontSize(css) { var fontSize = (css != null) ? css.fontSize : null; if (fontSize != null && fontSize.substring(fontSize.length - 2) == 'px') { return parseFloat(fontSize); } else { return mxConstants.DEFAULT_FONTSIZE; } }; var css = mxUtils.getCurrentStyle(node); var fontSize = getAbsoluteFontSize(css); var lineHeight = getRelativeLineHeight(fontSize, css, node); // Finds common font size var elts = node.getElementsByTagName('*'); // IE does not support containsNode if (elts.length > 0 && window.getSelection && !mxClient.IS_IE && !mxClient.IS_IE11) { var selection = window.getSelection(); for (var i = 0; i < elts.length; i++) { if (selection.containsNode(elts[i], true)) { temp = mxUtils.getCurrentStyle(elts[i]); fontSize = Math.max(getAbsoluteFontSize(temp), fontSize); var lh = getRelativeLineHeight(fontSize, temp, elts[i]); if (lh != lineHeight || isNaN(lh)) { lineHeight = ''; } } } } function hasParentOrOnlyChild(name) { if (graph.getParentByName(node, name, graph.cellEditor.textarea) != null) { return true; } else { var child = node; while (child != null && child.childNodes.length == 1) { child = child.childNodes[0]; if (child.nodeName == name) { return true; } } } return false; }; function isEqualOrPrefixed(str, value) { if (str != null && value != null) { if (str == value) { return true; } else if (str.length > value.length + 1) { return str.substring(str.length - value.length - 1, str.length) == '-' + value; } } return false; }; if (css != null) { setSelected(fontStyleItems[0], css.fontWeight == 'bold' || css.fontWeight > 400 || hasParentOrOnlyChild('B') || hasParentOrOnlyChild('STRONG')); setSelected(fontStyleItems[1], css.fontStyle == 'italic' || hasParentOrOnlyChild('I') || hasParentOrOnlyChild('EM')); setSelected(fontStyleItems[2], hasParentOrOnlyChild('U')); setSelected(sup, hasParentOrOnlyChild('SUP')); setSelected(sub, hasParentOrOnlyChild('SUB')); if (!graph.cellEditor.isTableSelected()) { var align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER); if (isEqualOrPrefixed(css.textAlign, 'justify')) { setSelected(full, isEqualOrPrefixed(css.textAlign, 'justify')); setSelected(left, false); setSelected(center, false); setSelected(right, false); } else { setSelected(full, false); setSelected(left, align == mxConstants.ALIGN_LEFT); setSelected(center, align == mxConstants.ALIGN_CENTER); setSelected(right, align == mxConstants.ALIGN_RIGHT); } } else { setSelected(full, isEqualOrPrefixed(css.textAlign, 'justify')); setSelected(left, isEqualOrPrefixed(css.textAlign, 'left')); setSelected(center, isEqualOrPrefixed(css.textAlign, 'center')); setSelected(right, isEqualOrPrefixed(css.textAlign, 'right')); } currentTable = graph.getParentByName(node, 'TABLE', graph.cellEditor.textarea); tableRow = (currentTable == null) ? null : graph.getParentByName(node, 'TR', currentTable); tableCell = (currentTable == null) ? null : graph.getParentByNames(node, ['TD', 'TH'], currentTable); tableWrapper.style.display = (currentTable != null) ? '' : 'none'; if (document.activeElement != input) { if (node.nodeName == 'FONT' && node.getAttribute('size') == '4' && pendingFontSize != null) { node.removeAttribute('size'); node.style.fontSize = pendingFontSize + ' pt'; pendingFontSize = null; } else { input.value = (isNaN(fontSize)) ? '' : fontSize + ' pt'; } var lh = parseFloat(lineHeight); if (!isNaN(lh)) { lineHeightInput.value = Math.round(lh * 100) + ' %'; } else { lineHeightInput.value = '100 %'; } } // Updates the color picker for the current font if (fontColorApply != null) { if (css.color == 'rgba(0, 0, 0, 0)' || css.color == 'transparent') { currentFontColor = mxConstants.NONE; } else { currentFontColor = mxUtils.rgba2hex(css.color) } fontColorApply(currentFontColor, true); } if (bgColorApply != null) { if (css.backgroundColor == 'rgba(0, 0, 0, 0)' || css.backgroundColor == 'transparent') { currentBgColor = mxConstants.NONE; } else { currentBgColor = mxUtils.rgba2hex(css.backgroundColor); } bgColorApply(currentBgColor, true); } // Workaround for firstChild is null or not an object // in the log which seems to be IE8- only / 29.01.15 if (fontMenu.firstChild != null) { fontMenu.firstChild.nodeValue = Graph.stripQuotes(css.fontFamily); } } } updating = false; }, 0); } }; if (mxClient.IS_FF || mxClient.IS_EDGE || mxClient.IS_IE || mxClient.IS_IE11) { mxEvent.addListener(graph.cellEditor.textarea, 'DOMSubtreeModified', updateCssHandler); } mxEvent.addListener(graph.cellEditor.textarea, 'input', updateCssHandler); mxEvent.addListener(graph.cellEditor.textarea, 'touchend', updateCssHandler); mxEvent.addListener(graph.cellEditor.textarea, 'mouseup', updateCssHandler); mxEvent.addListener(graph.cellEditor.textarea, 'keyup', updateCssHandler); this.listeners.push({destroy: function() { // No need to remove listener since textarea is destroyed after edit }}); updateCssHandler(); } return container; }; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel = function(format, editorUi, container) { BaseFormatPanel.call(this, format, editorUi, container); this.init(); }; mxUtils.extend(StyleFormatPanel, BaseFormatPanel); /** * */ StyleFormatPanel.prototype.defaultStrokeColor = 'black'; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.init = function() { var ui = this.editorUi; var ss = ui.getSelectionState(); if (!ss.containsLabel && ss.cells.length > 0) { if (ss.containsImage && ss.vertices.length == 1 && ss.style.shape == 'image' && ss.style.image != null && ss.style.image.substring(0, 19) == 'data:image/svg+xml;') { this.container.appendChild(this.addSvgStyles(this.createPanel())); } if (ss.fill) { this.container.appendChild(this.addFill(this.createPanel())); } this.container.appendChild(this.addStroke(this.createPanel())); this.container.appendChild(this.addLineJumps(this.createPanel())); var opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY); opacityPanel.style.paddingTop = '8px'; opacityPanel.style.paddingBottom = '10px'; this.container.appendChild(opacityPanel); this.container.appendChild(this.addEffects(this.createPanel())); } var opsPanel = this.createPanel(); opsPanel.style.paddingTop = '8px'; if (ss.cells.length == 1) { this.addEditOps(opsPanel); if (opsPanel.firstChild != null) { mxUtils.br(opsPanel); } } if (ss.cells.length >= 1) { this.addStyleOps(opsPanel); } if (opsPanel.firstChild != null) { this.container.appendChild(opsPanel); } }; /** * Use browser for parsing CSS. */ StyleFormatPanel.prototype.getCssRules = function(css) { var doc = document.implementation.createHTMLDocument(''); var styleElement = document.createElement('style'); mxUtils.setTextContent(styleElement, css); doc.body.appendChild(styleElement); return styleElement.sheet.cssRules; }; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.addSvgStyles = function(container) { var ui = this.editorUi; var ss = ui.getSelectionState(); container.style.paddingTop = '6px'; container.style.paddingBottom = '6px'; container.style.fontWeight = 'bold'; container.style.display = 'none'; try { var exp = ss.style.editableCssRules; if (exp != null) { var regex = new RegExp(exp); var data = ss.style.image.substring(ss.style.image.indexOf(',') + 1); var xml = (window.atob) ? decodeURIComponent(escape(atob((data)))) : Base64.decode(data, true); var svg = mxUtils.parseXml(xml); if (svg != null) { var styles = svg.getElementsByTagName('style'); for (var i = 0; i < styles.length; i++) { var rules = this.getCssRules(mxUtils.getTextContent(styles[i])); for (var j = 0; j < rules.length; j++) { this.addSvgRule(container, rules[j], svg, styles[i], rules, j, regex); } } } } } catch (e) { // ignore } return container; }; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem, rules, ruleIndex, regex) { var ui = this.editorUi; var graph = ui.editor.graph; if (regex.test(rule.selectorText)) { function rgb2hex(rgb) { rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); return (rgb && rgb.length === 4) ? "#" + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; }; var addStyleRule = mxUtils.bind(this, function(rule, key, label) { var value = mxUtils.trim(rule.style[key]); if (value != '' && value.substring(0, 4) != 'url(') { var option = this.createColorOption(label + ' ' + rule.selectorText, function() { return rgb2hex(value); }, mxUtils.bind(this, function(color) { rules[ruleIndex].style[key] = color; var cssTxt = ''; for (var i = 0; i < rules.length; i++) { cssTxt += rules[i].cssText + ' '; } styleElem.textContent = cssTxt; var xml = mxUtils.getXml(svg.documentElement); graph.setCellStyles(mxConstants.STYLE_IMAGE, 'data:image/svg+xml,' + ((window.btoa) ? btoa(unescape(encodeURIComponent(xml))) : Base64.encode(xml, true)), ui.getSelectionState().cells); }), '#ffffff', { install: function(apply) { // ignore }, destroy: function() { // ignore } }); container.appendChild(option); // Shows container if rules are added container.style.display = ''; } }); addStyleRule(rule, 'fill', mxResources.get('fill')); addStyleRule(rule, 'stroke', mxResources.get('line')); addStyleRule(rule, 'stop-color', mxResources.get('gradient')); } }; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.addEditOps = function(div) { var ss = this.editorUi.getSelectionState(); if (ss.cells.length == 1) { var editSelect = document.createElement('select'); editSelect.style.width = '210px'; editSelect.style.textAlign = 'center'; editSelect.style.marginBottom = '2px'; var ops = ['edit', 'copyAsText', 'editLink', 'editShape', 'editImage', 'editData', 'copyData', 'pasteData', 'editConnectionPoints', 'editGeometry', 'editTooltip', 'editStyle']; for (var i = 0; i < ops.length; i++) { var action = this.editorUi.actions.get(ops[i]); if (action == null || action.enabled) { var editOption = document.createElement('option'); editOption.setAttribute('value', ops[i]); var title = mxResources.get(ops[i]); mxUtils.write(editOption, title + ((ops[i] == 'edit') ? '' : '...')); if (action != null && action.shortcut != null) { title += ' (' + action.shortcut + ')'; } editOption.setAttribute('title', title); editSelect.appendChild(editOption); } } if (editSelect.children.length > 1) { div.appendChild(editSelect); mxEvent.addListener(editSelect, 'change', mxUtils.bind(this, function(evt) { var action = this.editorUi.actions.get(editSelect.value); editSelect.value = 'edit'; if (action != null) { action.funct(); } })); if (ss.image && ss.cells.length > 0) { var graph = this.editorUi.editor.graph; var state = graph.view.getState(graph.getSelectionCell()); if (state != null && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null) { var btn = mxUtils.button(mxResources.get('crop') + '...', mxUtils.bind(this, function(evt) { this.editorUi.actions.get('crop').funct(); })); btn.setAttribute('title', mxResources.get('crop')); editSelect.style.width = '104px'; btn.style.width = '104px'; btn.style.marginLeft = '2px'; btn.style.marginBottom = '2px'; div.appendChild(btn); } } } } return div; }; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.addFill = function(container) { var ui = this.editorUi; var graph = ui.editor.graph; var ss = ui.getSelectionState(); container.style.paddingTop = '6px'; container.style.paddingBottom = '6px'; // Adds gradient direction option var gradientSelect = document.createElement('select'); gradientSelect.style.position = 'absolute'; gradientSelect.style.left = '104px'; gradientSelect.style.width = '70px'; gradientSelect.style.height = '22px'; gradientSelect.style.padding = '0px'; gradientSelect.style.marginTop = '-3px'; gradientSelect.style.borderWidth = '1px'; gradientSelect.style.borderStyle = 'solid'; gradientSelect.style.boxSizing = 'border-box'; var fillStyleSelect = gradientSelect.cloneNode(false); // Stops events from bubbling to color option event handler mxEvent.addListener(gradientSelect, 'click', function(evt) { mxEvent.consume(evt); }); mxEvent.addListener(fillStyleSelect, 'click', function(evt) { mxEvent.consume(evt); }); var gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR, 'default', function(color) { if (color == null || color == mxConstants.NONE) { gradientSelect.style.display = 'none'; } else { gradientSelect.style.display = ''; } }, function(color) { graph.updateCellStyles({'gradientColor': color}, graph.getSelectionCells()); }, graph.getDefaultColor(ss.style, mxConstants.STYLE_GRADIENTCOLOR, graph.shapeForegroundColor, graph.shapeBackgroundColor)); var fillKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BACKGROUND : mxConstants.STYLE_FILLCOLOR; var fillPanel = this.createCellColorOption(mxResources.get('fill'), fillKey, 'default', null, mxUtils.bind(this, function(color) { graph.setCellStyles(fillKey, color, ss.cells); }), graph.getDefaultColor(ss.style, fillKey, graph.shapeBackgroundColor, graph.shapeForegroundColor)); fillPanel.style.fontWeight = 'bold'; var tmpColor = mxUtils.getValue(ss.style, fillKey, null); gradientPanel.style.display = (tmpColor != null && tmpColor != mxConstants.NONE && ss.fill && ss.style.shape != 'image') ? '' : 'none'; var directions = [mxConstants.DIRECTION_NORTH, mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH, mxConstants.DIRECTION_WEST, mxConstants.DIRECTION_RADIAL]; for (var i = 0; i < directions.length; i++) { var gradientOption = document.createElement('option'); gradientOption.setAttribute('value', directions[i]); mxUtils.write(gradientOption, mxResources.get(directions[i])); gradientSelect.appendChild(gradientOption); } gradientPanel.appendChild(gradientSelect); var curFillStyle; function populateFillStyle() { fillStyleSelect.innerHTML = ''; curFillStyle = 1; for (var i = 0; i < Editor.fillStyles.length; i++) { var fillStyleOption = document.createElement('option'); fillStyleOption.setAttribute('value', Editor.fillStyles[i].val); mxUtils.write(fillStyleOption, Editor.fillStyles[i].dispName); fillStyleSelect.appendChild(fillStyleOption); } }; function populateRoughFillStyle() { fillStyleSelect.innerHTML = ''; curFillStyle = 2; for (var i = 0; i < Editor.roughFillStyles.length; i++) { var fillStyleOption = document.createElement('option'); fillStyleOption.setAttribute('value', Editor.roughFillStyles[i].val); mxUtils.write(fillStyleOption, Editor.roughFillStyles[i].dispName); fillStyleSelect.appendChild(fillStyleOption); } fillStyleSelect.value = 'auto'; }; populateFillStyle(); if (ss.gradient) { fillPanel.appendChild(fillStyleSelect); } var listener = mxUtils.bind(this, function() { ss = ui.getSelectionState(); var value = mxUtils.getValue(ss.style, mxConstants.STYLE_GRADIENT_DIRECTION, mxConstants.DIRECTION_SOUTH); var fillStyle = mxUtils.getValue(ss.style, 'fillStyle', 'auto'); // Handles empty string which is not allowed as a value if (value == '') { value = mxConstants.DIRECTION_SOUTH; } gradientSelect.value = value; container.style.display = (ss.fill) ? '' : 'none'; var fillColor = mxUtils.getValue(ss.style, fillKey, null); if (!ss.fill || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge') { fillStyleSelect.style.display = 'none'; gradientPanel.style.display = 'none'; } else { if (ss.style.sketch == '1') { if (curFillStyle != 2) { populateRoughFillStyle() } } else if (curFillStyle != 1) { populateFillStyle(); } fillStyleSelect.value = fillStyle; //In case of switching from sketch to regular and fill type is not there if (!fillStyleSelect.value) { fillStyle = 'auto'; fillStyleSelect.value = fillStyle; } fillStyleSelect.style.display = ss.style.sketch == '1' || gradientSelect.style.display == 'none'? '' : 'none'; gradientPanel.style.display = (ss.gradient && !ss.containsImage && (ss.style.sketch != '1' || fillStyle == 'solid' || fillStyle == 'auto')) ? '' : 'none'; } }); graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); mxEvent.addListener(gradientSelect, 'change', function(evt) { graph.setCellStyles(mxConstants.STYLE_GRADIENT_DIRECTION, gradientSelect.value, ss.cells); ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_GRADIENT_DIRECTION], 'values', [gradientSelect.value], 'cells', ss.cells)); mxEvent.consume(evt); }); mxEvent.addListener(fillStyleSelect, 'change', function(evt) { graph.setCellStyles('fillStyle', fillStyleSelect.value, ss.cells); ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['fillStyle'], 'values', [fillStyleSelect.value], 'cells', ss.cells)); mxEvent.consume(evt); }); container.appendChild(fillPanel); container.appendChild(gradientPanel); // Adds custom colors var custom = this.getCustomColors(); for (var i = 0; i < custom.length; i++) { container.appendChild(this.createCellColorOption(custom[i].title, custom[i].key, custom[i].defaultValue)); } return container; }; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.getCustomColors = function() { var ss = this.editorUi.getSelectionState(); var result = []; if (ss.swimlane) { result.push({title: mxResources.get('laneColor'), key: 'swimlaneFillColor', defaultValue: 'default'}); } return result; }; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.addStroke = function(container) { var ui = this.editorUi; var graph = ui.editor.graph; var ss = ui.getSelectionState(); container.style.paddingTop = '6px'; container.style.paddingBottom = '4px'; container.style.whiteSpace = 'normal'; var colorPanel = document.createElement('div'); colorPanel.style.fontWeight = 'bold'; if (!ss.stroke) { colorPanel.style.display = 'none'; } // Adds gradient direction option var styleSelect = document.createElement('select'); styleSelect.style.position = 'absolute'; styleSelect.style.height = '22px'; styleSelect.style.padding = '0px'; styleSelect.style.marginTop = '-3px'; styleSelect.style.textAlign = 'center'; styleSelect.style.boxSizing = 'border-box'; styleSelect.style.left = '90px'; styleSelect.style.width = '83px'; styleSelect.style.borderWidth = '1px'; styleSelect.style.borderStyle = 'solid'; var styles = ['sharp', 'rounded', 'curved']; for (var i = 0; i < styles.length; i++) { var styleOption = document.createElement('option'); styleOption.setAttribute('value', styles[i]); mxUtils.write(styleOption, mxResources.get(styles[i])); styleSelect.appendChild(styleOption); } mxEvent.addListener(styleSelect, 'change', function(evt) { graph.getModel().beginUpdate(); try { var keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED]; var values = ['0', '0']; if (styleSelect.value == 'rounded') { values = ['1', '0']; } else if (styleSelect.value == 'curved') { values = ['0', '1']; } for (var i = 0; i < keys.length; i++) { graph.setCellStyles(keys[i], values[i], ss.cells); } ui.fireEvent(new mxEventObject('styleChanged', 'keys', keys, 'values', values, 'cells', ss.cells)); } finally { graph.getModel().endUpdate(); } mxEvent.consume(evt); }); // Stops events from bubbling to color option event handler mxEvent.addListener(styleSelect, 'click', function(evt) { mxEvent.consume(evt); }); var strokeKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BORDER : mxConstants.STYLE_STROKECOLOR; var label = (ss.style.shape == 'image') ? mxResources.get('border') : mxResources.get('line'); var lineColor = this.createCellColorOption(label, strokeKey, 'default', null, mxUtils.bind(this, function(color) { graph.setCellStyles(strokeKey, color, ss.cells); // Sets strokeColor to inherit for rows and cells in tables if (color == null || color == mxConstants.NONE) { var tableCells = []; for (var i = 0; i < ss.cells.length; i++) { if (graph.isTableCell(ss.cells[i]) || graph.isTableRow(ss.cells[i])) { tableCells.push(ss.cells[i]); } } if (tableCells.length > 0) { graph.setCellStyles(strokeKey, 'inherit', tableCells); } } }), graph.shapeForegroundColor); lineColor.appendChild(styleSelect); colorPanel.appendChild(lineColor); // Used if only edges selected var stylePanel = colorPanel.cloneNode(false); stylePanel.style.display = 'inline-flex'; stylePanel.style.alignItems = 'top'; stylePanel.style.fontWeight = 'normal'; stylePanel.style.whiteSpace = 'nowrap'; stylePanel.style.position = 'relative'; stylePanel.style.paddingLeft = '5px'; stylePanel.style.overflow = 'hidden'; stylePanel.style.marginTop = '2px'; stylePanel.style.width = '220px'; var addItem = mxUtils.bind(this, function(menu, width, cssName, keys, values) { var item = this.editorUi.menus.styleChange(menu, '', keys, values, 'geIcon', null); var pat = document.createElement('div'); pat.style.width = width + 'px'; pat.style.height = '1px'; pat.style.borderBottom = '1px ' + cssName + ' ' + this.defaultStrokeColor; pat.style.paddingTop = '6px'; item.firstChild.firstChild.style.padding = '0px 4px 0px 4px'; item.firstChild.firstChild.style.width = width + 'px'; item.firstChild.firstChild.appendChild(pat); return item; }); var pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu) { addItem(menu, 75, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid')); addItem(menu, 75, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed') + ' (1)'); addItem(menu, 75, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '8 8']).setAttribute('title', mxResources.get('dashed') + ' (2)'); addItem(menu, 75, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '12 12']).setAttribute('title', mxResources.get('dashed') + ' (3)'); addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)'); addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)'); addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)'); })); // Used for mixed selection (vertices and edges) var altStylePanel = stylePanel.cloneNode(false); var edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', mxResources.get('connection'), false, mxUtils.bind(this, function(menu) { this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, null, null, true).setAttribute('title', mxResources.get('line')); this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, null, null, true).setAttribute('title', mxResources.get('link')); this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, null, null, true).setAttribute('title', mxResources.get('arrow')); this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, null, null, true).setAttribute('title', mxResources.get('simpleArrow')); })); var altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu) { addItem(menu, 33, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid')); addItem(menu, 33, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed') + ' (1)'); addItem(menu, 33, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '8 8']).setAttribute('title', mxResources.get('dashed') + ' (2)'); addItem(menu, 33, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '12 12']).setAttribute('title', mxResources.get('dashed') + ' (3)'); addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)'); addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)'); addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)'); })); var stylePanel2 = stylePanel.cloneNode(false); // Stroke width var input = document.createElement('input'); input.style.position = 'absolute'; input.style.textAlign = 'right'; input.style.marginTop = '2px'; input.style.width = '52px'; input.style.height = '22px'; input.style.left = '146px'; input.style.borderWidth = '1px'; input.style.borderStyle = 'solid'; input.style.boxSizing = 'border-box'; input.setAttribute('title', mxResources.get('linewidth')); stylePanel.appendChild(input); var altInput = input.cloneNode(true); altStylePanel.appendChild(altInput); function update(evt) { // Maximum stroke width is 999 var value = parseFloat(input.value); value = Math.min(999, Math.max(0, (isNaN(value)) ? 1 : value)); if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)) { graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, ss.cells); ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH], 'values', [value], 'cells', ss.cells)); } input.value = value + ' pt'; mxEvent.consume(evt); }; function altUpdate(evt) { // Maximum stroke width is 999 var value = parseFloat(altInput.value); value = Math.min(999, Math.max(0, (isNaN(value)) ? 1 : value)); if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)) { graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, ss.cells); ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH], 'values', [value], 'cells', ss.cells)); } altInput.value = value + ' pt'; mxEvent.consume(evt); }; var stepper = this.createStepper(input, update, 1, 9); stepper.style.display = input.style.display; stepper.style.top = '2px'; stepper.style.left = '198px'; stylePanel.appendChild(stepper); var altStepper = this.createStepper(altInput, altUpdate, 1, 9); altStepper.style.display = altInput.style.display; altInput.style.position = 'absolute'; altStepper.style.top = '2px'; altStepper.style.left = '198px'; altStylePanel.appendChild(altStepper); mxEvent.addListener(input, 'blur', update); mxEvent.addListener(input, 'change', update); mxEvent.addListener(altInput, 'blur', altUpdate); mxEvent.addListener(altInput, 'change', altUpdate); var edgeStyle = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-orthogonal', mxResources.get('waypoints'), false, mxUtils.bind(this, function(menu) { if (ss.style.shape != 'arrow') { this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight')); this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal')); this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('vertical')); this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('horizontal')); this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric')); this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric')); if (ss.style.shape == 'connector') { this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved')); } this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation')); } })); var lineStart = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-startclassic', mxResources.get('linestart'), false, mxUtils.bind(this, function(menu) { if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge' || ss.style.shape == 'wire') { var item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false); item.setAttribute('title', mxResources.get('none')); var font = document.createElement('span'); font.style.fontSize = '11px'; mxUtils.write(font, mxResources.get('none')); item.firstChild.firstChild.appendChild(font); if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge' || ss.style.shape == 'wire') { Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 1], null, null, false, Format.classicFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], null, null, false, Format.classicThinFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN, 0], null, null, false, Format.openFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], null, null, false, Format.openThinFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['openAsync', 0], null, null, false, Format.openAsyncFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 1], null, null, false, Format.blockFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], null, null, false, Format.blockThinFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 1], null, null, false, Format.asyncFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 1], null, null, false, Format.ovalFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 1], null, null, false, Format.diamondFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], null, null, false, Format.diamondThinFilledMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 0], null, null, false, Format.classicMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], null, null, false, Format.classicThinMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 0], null, null, false, Format.blockMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], null, null, false, Format.blockThinMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 0], null, null, false, Format.asyncMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 0], null, null, false, Format.ovalMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 0], null, null, false, Format.diamondMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], null, null, false, Format.diamondThinMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['box', 0], null, null, false, Format.boxMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['halfCircle', 0], null, null, false, Format.halfCircleMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['dash', 0], null, null, false, Format.dashMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['cross', 0], null, null, false, Format.crossMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circlePlus', 0], null, null, false, Format.circlePlusMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circle', 1], null, null, false, Format.circleMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['baseDash', 0], null, null, false, Format.baseDashMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERone', 0], null, null, false, Format.EROneMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmandOne', 0], null, null, false, Format.ERmandOneMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmany', 0], null, null, false, Format.ERmanyMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERoneToMany', 0], null, null, false, Format.ERoneToManyMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToOne', 0], null, null, false, Format.ERzeroToOneMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToMany', 0], null, null, false, Format.ERzeroToManyMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['doubleBlock', 0], null, null, false, Format.doubleBlockMarkerImage.src)); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['doubleBlock', 1], null, null, false, Format.doubleBlockFilledMarkerImage.src)); } else { this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block')); } menu.div.style.width = '40px'; window.setTimeout(mxUtils.bind(this, function() { if (menu.div != null) { mxUtils.fit(menu.div); } }), 0); } })); var lineEnd = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel2, 'geSprite-endclassic', mxResources.get('lineend'), false, mxUtils.bind(this, function(menu) { if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge' || ss.style.shape == 'wire') { var item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false); item.setAttribute('title', mxResources.get('none')); var font = document.createElement('span'); font.style.fontSize = '11px'; mxUtils.write(font, mxResources.get('none')); item.firstChild.firstChild.appendChild(font); if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge' || ss.style.shape == 'wire') { Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 1], null, null, false, Format.classicFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], null, null, false, Format.classicThinFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN, 0], null, null, false, Format.openFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], null, null, false, Format.openThinFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['openAsync', 0], null, null, false, Format.openAsyncFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 1], null, null, false, Format.blockFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], null, null, false, Format.blockThinFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 1], null, null, false, Format.asyncFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 1], null, null, false, Format.ovalFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 1], null, null, false, Format.diamondFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], null, null, false, Format.diamondThinFilledMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 0], null, null, false, Format.classicMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], null, null, false, Format.classicThinMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 0], null, null, false, Format.blockMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], null, null, false, Format.blockThinMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 0], null, null, false, Format.asyncMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 0], null, null, false, Format.ovalMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 0], null, null, false, Format.diamondMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], null, null, false, Format.diamondThinMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['box', 0], null, null, false, Format.boxMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['halfCircle', 0], null, null, false, Format.halfCircleMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['dash', 0], null, null, false, Format.dashMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['cross', 0], null, null, false, Format.crossMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circlePlus', 0], null, null, false, Format.circlePlusMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circle', 0], null, null, false, Format.circleMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['baseDash', 0], null, null, false, Format.baseDashMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERone', 0], null, null, false, Format.EROneMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmandOne', 0], null, null, false, Format.ERmandOneMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmany', 0], null, null, false, Format.ERmanyMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERoneToMany', 0], null, null, false, Format.ERoneToManyMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToOne', 0], null, null, false, Format.ERzeroToOneMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToMany', 0], null, null, false, Format.ERzeroToManyMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['doubleBlock', 0], null, null, false, Format.doubleBlockMarkerImage.src), 'scaleX(-1)'); Format.processMenuIcon(this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['doubleBlock', 1], null, null, false, Format.doubleBlockFilledMarkerImage.src), 'scaleX(-1)'); } else { this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block')); } menu.div.style.width = '40px'; window.setTimeout(mxUtils.bind(this, function() { if (menu.div != null) { mxUtils.fit(menu.div); } }), 0); } })); this.addArrow(edgeShape); this.addArrow(edgeStyle).style.marginTop = '-1px'; this.addArrow(lineStart); this.addArrow(lineEnd); var symbol = this.addArrow(pattern); symbol.className = 'geIcon'; pattern.style.width = '134px'; var altSymbol = this.addArrow(altPattern); altSymbol.className = 'geIcon'; altSymbol.style.width = '22px'; var solid = document.createElement('div'); solid.style.width = '102px'; solid.style.height = '10px'; solid.style.borderBottom = '1px solid ' + this.defaultStrokeColor; solid.style.marginLeft = '10px'; symbol.appendChild(solid); var altSolid = document.createElement('div'); altSolid.style.width = '30px'; altSolid.style.height = '10px'; altSolid.style.borderBottom = '1px solid ' + this.defaultStrokeColor; altSolid.style.marginLeft = '10px'; altSymbol.appendChild(altSolid); container.appendChild(colorPanel); container.appendChild(altStylePanel); container.appendChild(stylePanel); var arrowPanel = stylePanel.cloneNode(false); arrowPanel.style.display = 'block'; arrowPanel.style.padding = '5px 4px 6px 0px'; arrowPanel.style.fontWeight = 'normal'; var span = document.createElement('div'); span.style.position = 'absolute'; span.style.maxWidth = '78px'; span.style.overflow = 'hidden'; span.style.textOverflow = 'ellipsis'; span.style.marginLeft = '0px'; span.style.marginBottom = '12px'; span.style.marginTop = '2px'; span.style.fontWeight = 'normal'; mxUtils.write(span, mxResources.get('lineend')); arrowPanel.appendChild(span); var endSpacingUpdate, endSizeUpdate; var endSpacing = this.addUnitInput(arrowPanel, 'pt', 98, 52, function() { endSpacingUpdate.apply(this, arguments); }); var endSize = this.addUnitInput(arrowPanel, 'pt', 30, 52, function() { endSizeUpdate.apply(this, arguments); }); mxUtils.br(arrowPanel); var spacer = document.createElement('div'); spacer.style.height = '8px'; arrowPanel.appendChild(spacer); span = span.cloneNode(false); mxUtils.write(span, mxResources.get('linestart')); arrowPanel.appendChild(span); var startSpacingUpdate, startSizeUpdate; var startSpacing = this.addUnitInput(arrowPanel, 'pt', 98, 52, function() { startSpacingUpdate.apply(this, arguments); }); var startSize = this.addUnitInput(arrowPanel, 'pt', 30, 52, function() { startSizeUpdate.apply(this, arguments); }); mxUtils.br(arrowPanel); this.addLabel(arrowPanel, mxResources.get('spacing'), 98, 64).style.fontSize = '11px'; this.addLabel(arrowPanel, mxResources.get('size'), 30, 64).style.fontSize = '11px'; mxUtils.br(arrowPanel); var perimeterPanel = colorPanel.cloneNode(false); perimeterPanel.style.fontWeight = 'normal'; perimeterPanel.style.position = 'relative'; perimeterPanel.style.paddingLeft = '16px' perimeterPanel.style.marginBottom = '2px'; perimeterPanel.style.marginTop = '6px'; perimeterPanel.style.borderWidth = '0px'; perimeterPanel.style.paddingBottom = '18px'; var span = document.createElement('div'); span.style.position = 'absolute'; span.style.marginLeft = '3px'; span.style.marginBottom = '12px'; span.style.marginTop = '1px'; span.style.fontWeight = 'normal'; span.style.width = '120px'; mxUtils.write(span, mxResources.get('perimeter')); perimeterPanel.appendChild(span); var perimeterUpdate; var perimeterSpacing = this.addUnitInput(perimeterPanel, 'pt', 30, 52, function() { perimeterUpdate.apply(this, arguments); }); if (ss.edges.length == ss.cells.length) { container.appendChild(stylePanel2); container.appendChild(arrowPanel); } else if (ss.vertices.length == ss.cells.length) { container.appendChild(perimeterPanel); } var listener = mxUtils.bind(this, function(sender, evt, force) { ss = ui.getSelectionState(); if (force || document.activeElement != input) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)); input.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != altInput) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)); altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } styleSelect.style.visibility = (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge' || ss.style.shape == 'wire') ? '' : 'hidden'; if (mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1') { styleSelect.value = 'curved'; } else if (mxUtils.getValue(ss.style, mxConstants.STYLE_ROUNDED, null) == '1') { styleSelect.value = 'rounded'; } if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1') { if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null || String(mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, '')).substring(0, 2) != '1 ') { solid.style.borderBottom = '1px dashed ' + this.defaultStrokeColor; } else { solid.style.borderBottom = '1px dotted ' + this.defaultStrokeColor; } } else { solid.style.borderBottom = '1px solid ' + this.defaultStrokeColor; } altSolid.style.borderBottom = solid.style.borderBottom; // Updates toolbar icon for edge style var edgeStyleDiv = edgeStyle.getElementsByTagName('div')[0]; if (edgeStyleDiv != null) { var es = mxUtils.getValue(ss.style, mxConstants.STYLE_EDGE, null); if (mxUtils.getValue(ss.style, mxConstants.STYLE_NOEDGESTYLE, null) == '1') { es = null; } if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1') { edgeStyleDiv.className = 'geSprite geSprite-curved'; } else if (es == 'straight' || es == 'none' || es == null) { edgeStyleDiv.className = 'geSprite geSprite-straight'; } else if (es == 'entityRelationEdgeStyle') { edgeStyleDiv.className = 'geSprite geSprite-entity'; } else if (es == 'elbowEdgeStyle') { edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) == 'vertical') ? 'geSprite-verticalelbow' : 'geSprite-horizontalelbow'); } else if (es == 'isometricEdgeStyle') { edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) == 'vertical') ? 'geSprite-verticalisometric' : 'geSprite-horizontalisometric'); } else { edgeStyleDiv.className = 'geSprite geSprite-orthogonal'; } } // Updates icon for edge shape var edgeShapeDiv = edgeShape.getElementsByTagName('div')[0]; if (edgeShapeDiv != null) { if (ss.style.shape == 'link') { edgeShapeDiv.className = 'geSprite geSprite-linkedge'; } else if (ss.style.shape == 'flexArrow') { edgeShapeDiv.className = 'geSprite geSprite-arrow'; } else if (ss.style.shape == 'arrow') { edgeShapeDiv.className = 'geSprite geSprite-simplearrow'; } else { edgeShapeDiv.className = 'geSprite geSprite-connection'; } } if (ss.edges.length == ss.cells.length) { altStylePanel.style.display = ''; stylePanel.style.display = 'none'; } else { altStylePanel.style.display = 'none'; stylePanel.style.display = ''; } if (Graph.lineJumpsEnabled && ss.edges.length > 0 && ss.vertices.length == 0 && ss.lineJumps) { container.style.borderBottomStyle = 'none'; } function updateArrow(marker, fill, elt, prefix) { var markerDiv = elt.getElementsByTagName('div')[0]; if (markerDiv != null) { ui.updateCssForMarker(markerDiv, prefix, ss.style.shape, marker, fill); } return markerDiv; }; var sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTARROW, null), mxUtils.getValue(ss.style, 'startFill', '1'), lineStart, 'start'); var targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDARROW, null), mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end'); // Special cases for markers if (sourceDiv != null && targetDiv != null) { if (ss.style.shape == 'arrow') { sourceDiv.className = 'geSprite geSprite-noarrow'; targetDiv.className = 'geSprite geSprite-endblocktrans'; } else if (ss.style.shape == 'link') { sourceDiv.className = 'geSprite geSprite-noarrow'; targetDiv.className = 'geSprite geSprite-noarrow'; } } mxUtils.setOpacity(edgeStyle, (ss.style.shape == 'arrow') ? 30 : 100); if (ss.style.shape != 'connector' && ss.style.shape != 'flexArrow' && ss.style.shape != 'filledEdge' && ss.style.shape != 'wire') { mxUtils.setOpacity(lineStart, 30); mxUtils.setOpacity(lineEnd, 30); } else { mxUtils.setOpacity(lineStart, 100); mxUtils.setOpacity(lineEnd, 100); } if (force || document.activeElement != startSize) { var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE)); startSize.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != startSpacing) { var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0)); startSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != endSize) { var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE)); endSize.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != startSpacing) { var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0)); endSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != perimeterSpacing) { var tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_PERIMETER_SPACING, 0)); perimeterSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } }); startSizeUpdate = this.installInputHandler(startSize, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt'); startSpacingUpdate = this.installInputHandler(startSpacing, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0, -999, 999, ' pt'); endSizeUpdate = this.installInputHandler(endSize, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt'); endSpacingUpdate = this.installInputHandler(endSpacing, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0, -999, 999, ' pt'); perimeterUpdate = this.installInputHandler(perimeterSpacing, mxConstants.STYLE_PERIMETER_SPACING, 0, 0, 999, ' pt'); this.addKeyHandler(input, listener); this.addKeyHandler(startSize, listener); this.addKeyHandler(startSpacing, listener); this.addKeyHandler(endSize, listener); this.addKeyHandler(endSpacing, listener); this.addKeyHandler(perimeterSpacing, listener); graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); return container; }; /** * Adds UI for configuring line jumps. */ StyleFormatPanel.prototype.addLineJumps = function(container) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); if (Graph.lineJumpsEnabled && ss.edges.length > 0 && ss.vertices.length == 0 && ss.lineJumps) { container.style.padding = '2px 0px 24px 14px'; var span = document.createElement('div'); span.style.position = 'absolute'; span.style.maxWidth = '78px'; span.style.overflow = 'hidden'; span.style.textOverflow = 'ellipsis'; mxUtils.write(span, mxResources.get('lineJumps')); container.appendChild(span); var styleSelect = document.createElement('select'); styleSelect.style.position = 'absolute'; styleSelect.style.height = '21px'; styleSelect.style.padding = '0px'; styleSelect.style.marginTop = '-2px'; styleSelect.style.boxSizing = 'border-box'; styleSelect.style.textAlign = 'center'; styleSelect.style.right = '84px'; styleSelect.style.width = '64px'; styleSelect.style.borderWidth = '1px'; styleSelect.style.borderStyle = 'solid'; var styles = ['none', 'arc', 'gap', 'sharp', 'line']; for (var i = 0; i < styles.length; i++) { var styleOption = document.createElement('option'); styleOption.setAttribute('value', styles[i]); mxUtils.write(styleOption, mxResources.get(styles[i])); styleSelect.appendChild(styleOption); } mxEvent.addListener(styleSelect, 'change', function(evt) { graph.getModel().beginUpdate(); try { graph.setCellStyles('jumpStyle', styleSelect.value, ss.cells); ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['jumpStyle'], 'values', [styleSelect.value], 'cells', ss.cells)); } finally { graph.getModel().endUpdate(); } mxEvent.consume(evt); }); // Stops events from bubbling to color option event handler mxEvent.addListener(styleSelect, 'click', function(evt) { mxEvent.consume(evt); }); container.appendChild(styleSelect); var jumpSizeUpdate; var jumpSize = this.addUnitInput(container, 'pt', 16, 52, function() { jumpSizeUpdate.apply(this, arguments); }); jumpSizeUpdate = this.installInputHandler(jumpSize, 'jumpSize', Graph.defaultJumpSize, 0, 999, ' pt'); var listener = mxUtils.bind(this, function(sender, evt, force) { ss = ui.getSelectionState(); styleSelect.value = mxUtils.getValue(ss.style, 'jumpStyle', 'none'); if (force || document.activeElement != jumpSize) { var tmp = parseInt(mxUtils.getValue(ss.style, 'jumpSize', Graph.defaultJumpSize)); jumpSize.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } }); this.addKeyHandler(jumpSize, listener); graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); } else { container.style.display = 'none'; } return container; }; /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.addEffects = function(div) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); div.style.paddingTop = '4px'; div.style.paddingBottom = '4px'; var table = document.createElement('table'); table.style.width = '210px'; table.style.fontWeight = 'bold'; table.style.tableLayout = 'fixed'; var tbody = document.createElement('tbody'); var row = document.createElement('tr'); row.style.padding = '0px'; var left = document.createElement('td'); left.style.padding = '0px'; left.style.width = '50%'; left.setAttribute('valign', 'top'); var right = left.cloneNode(true); right.style.paddingLeft = '8px'; row.appendChild(left); row.appendChild(right); tbody.appendChild(row); table.appendChild(tbody); div.appendChild(table); var current = left; var addOption = mxUtils.bind(this, function(label, key, defaultValue, fn) { var opt = this.createCellOption(label, key, defaultValue, null, null, fn); opt.style.width = '100%'; current.appendChild(opt); current = (current == left) ? right : left; }); var listener = mxUtils.bind(this, function(sender, evt, force) { ss = ui.getSelectionState(); left.innerText = ''; right.innerText = ''; current = left; if (ss.rounded) { addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0); } if (ss.swimlane) { addOption(mxResources.get('divider'), 'swimlaneLine', 1); } addOption(mxResources.get('sketch'), 'sketch', 0, function(cells, enabled) { graph.updateCellStyles({'sketch': (enabled) ? '1' : null, 'curveFitting': (enabled) ? Editor.sketchDefaultCurveFitting : null, 'jiggle': (enabled) ? Editor.sketchDefaultJiggle : null}, cells); }); if (ss.glass) { addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0); } if (!ss.containsImage) { addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0); } }); graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); return div; } /** * Adds the label menu items to the given menu and parent. */ StyleFormatPanel.prototype.addStyleOps = function(div) { var ss = this.editorUi.getSelectionState(); if (ss.cells.length == 1) { this.addActions(div, ['setAsDefaultStyle']); } return div; }; /** * Adds the label menu items to the given menu and parent. */ DiagramStylePanel = function(format, editorUi, container) { BaseFormatPanel.call(this, format, editorUi, container); this.init(); }; mxUtils.extend(DiagramStylePanel, BaseFormatPanel); /** * Adds the label menu items to the given menu and parent. */ DiagramStylePanel.prototype.init = function() { var ui = this.editorUi; this.darkModeChangedListener = mxUtils.bind(this, function() { this.format.cachedStyleEntries = []; }); ui.addListener('darkModeChanged', this.darkModeChangedListener); this.container.appendChild(this.addView(this.createPanel())); }; /** * Adds the label menu items to the given menu and parent. */ DiagramStylePanel.prototype.getGlobalStyleButtons = function() { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; var sketchDiv = document.createElement('div'); sketchDiv.style.fontWeight = 'bold'; sketchDiv.style.alignItems = 'center'; sketchDiv.style.textAlign = 'left'; sketchDiv.style.display = 'flex'; sketchDiv.style.padding = '4px'; var sketchInput = document.createElement('input'); sketchInput.setAttribute('type', 'checkbox'); sketchInput.style.margin = '1px 6px 0px 0px'; sketchInput.checked = Editor.sketchMode; sketchDiv.appendChild(sketchInput); mxUtils.write(sketchDiv, mxResources.get('sketch')); mxEvent.addListener(sketchDiv, 'click', function(evt) { var value = !Editor.sketchMode; // Temporary overrides sketch mode to avoid flickering // for the first async update after updating cells Editor.sketchMode = value; graph.updateCellStyles({'sketch': (value) ? '1' : null, 'curveFitting': (value) ? Editor.sketchDefaultCurveFitting : null, 'jiggle': (value) ? Editor.sketchDefaultJiggle : null}, graph.getVerticesAndEdges()); mxEvent.consume(evt); // Restores and udpates sketch mode asynchronously window.setTimeout(function() { Editor.sketchMode = !value; ui.setSketchMode(value); }); }); var buttons = [sketchDiv, mxUtils.button(mxResources.get('rounded'), mxUtils.bind(this, function(evt) { // Checks if all cells are rounded var cells = graph.getVerticesAndEdges(); var rounded = true; if (cells.length > 0) { for (var i = 0; i < cells.length; i++) { var style = graph.getCellStyle(cells[i]); if (mxUtils.getValue(style, mxConstants.STYLE_ROUNDED, 0) == 0) { rounded = false; break; } } } rounded = !rounded; graph.updateCellStyles({'rounded': (rounded) ? '1' : '0'}, cells); if (rounded) { graph.currentEdgeStyle['rounded'] = '1'; graph.currentVertexStyle['rounded'] = '1'; } else { delete graph.currentEdgeStyle['rounded']; delete graph.currentVertexStyle['rounded']; } mxEvent.consume(evt); } ))]; return buttons; }; /** * Adds the label menu items to the given menu and parent. */ DiagramStylePanel.prototype.addView = function(div) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; var model = graph.getModel(); var gridColor = graph.view.gridColor; div.style.paddingTop = '2px'; div.style.whiteSpace = 'normal'; var opts = document.createElement('div'); opts.style.marginRight = '16px'; opts.style.paddingBottom = '2px'; var table = document.createElement('table'); table.style.width = '204px'; var tbody = document.createElement('tbody'); var row = document.createElement('tr'); row.style.padding = '0px'; var left = document.createElement('td'); left.style.textAlign = 'center'; left.style.padding = '2px'; left.style.width = '50%'; var right = left.cloneNode(true); var buttons = this.getGlobalStyleButtons(); for (var i = 0; i < buttons.length; i += 2) { var btn = buttons[i]; btn.style.height = '22px'; btn.style.width = '92px'; left.appendChild(btn); row.appendChild(left); btn = buttons[i + 1]; if (btn != null) { btn.style.height = '22px'; btn.style.width = '92px'; right.appendChild(btn); } row.appendChild(right); tbody.appendChild(row); left = left.cloneNode(false); right = right.cloneNode(false); row = row.cloneNode(false); } table.appendChild(tbody); opts.appendChild(table); div.appendChild(opts); var defaultStyles = ['fillColor', 'strokeColor', 'fontColor', 'gradientColor']; div.style.whiteSpace = 'normal'; div.style.paddingLeft = '18px'; div.style.paddingTop = '6px'; var updateCells = mxUtils.bind(this, function(styles, graphStyle) { var cells = graph.getVerticesAndEdges(); model.beginUpdate(); try { for (var i = 0; i < cells.length; i++) { var style = graph.getCellStyle(cells[i]); // Handles special label background color if (!ignoreGraphStyle && style['labelBackgroundColor'] != null) { graph.updateCellStyles({'labelBackgroundColor': (graphStyle != null) ? graphStyle.background : null}, [cells[i]]); } else if (ignoreGraphStyle) { graph.updateCellStyles({'labelBackgroundColor': mxConstants.NONE}, [cells[i]]); } var edge = model.isEdge(cells[i]); var newStyle = model.getStyle(cells[i]); var current = (edge) ? graph.currentEdgeStyle : graph.currentVertexStyle; for (var j = 0; j < styles.length; j++) { if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) || (styles[j] != mxConstants.STYLE_FILLCOLOR && styles[j] != mxConstants.STYLE_STROKECOLOR)) { if (ignoreGraphStyle && edge && styles[j] == mxConstants.STYLE_FONTCOLOR) { newStyle = mxUtils.setStyle(newStyle, styles[j], 'default'); } else { newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]); } } } model.setStyle(cells[i], newStyle); } } finally { model.endUpdate(); } }); var removeStyles = mxUtils.bind(this, function(style, styles, defaultStyle) { if (style != null) { for (var j = 0; j < styles.length; j++) { if (((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) || (styles[j] != mxConstants.STYLE_FILLCOLOR && styles[j] != mxConstants.STYLE_STROKECOLOR))) { style[styles[j]] = defaultStyle[styles[j]]; } } } }); var ignoreGraphStyle = true; var applyStyle = mxUtils.bind(this, function(style, result, cell, graphStyle, theGraph) { if (style != null) { if (cell != null) { // Handles special label background color if (!ignoreGraphStyle && result['labelBackgroundColor'] != null) { var bg = (graphStyle != null) ? graphStyle.background : null; theGraph = (theGraph != null) ? theGraph : graph; if (bg == null) { bg = theGraph.background; } if (bg == null) { bg = theGraph.defaultPageBackgroundColor; } result['labelBackgroundColor'] = bg; } else if (ignoreGraphStyle) { result['labelBackgroundColor'] = mxConstants.NONE; } } for (var key in style) { if (cell == null || ((result[key] != null && result[key] != mxConstants.NONE) || (key != mxConstants.STYLE_FILLCOLOR && key != mxConstants.STYLE_STROKECOLOR))) { if (ignoreGraphStyle && model.isEdge(cell) && key == mxConstants.STYLE_FONTCOLOR) { result[key] = 'default'; } else { result[key] = style[key]; } } } } }); var createPreview = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, container) { // Wrapper needed to catch events var div = document.createElement('div'); div.style.background = (Editor.isDarkMode() ? '#2a252f' : '#f1f3f4'); div.style.position = 'absolute'; div.style.display = 'inline-block'; div.style.overflow = 'hidden'; div.style.pointerEvents = 'none'; div.style.width = '100%'; div.style.height = '100%'; container.appendChild(div); var graph2 = new Graph(div, null, null, graph.getStylesheet()); graph2.shapeBackgroundColor = div.style.background; graph2.resetViewOnRootChange = false; graph2.foldingEnabled = false; graph2.gridEnabled = false; graph2.autoScroll = false; graph2.setTooltips(false); graph2.setConnectable(false); graph2.setPanning(false); graph2.setEnabled(false); graph2.getCellStyle = function(cell, resolve) { resolve = (resolve != null) ? resolve : true; var result = mxUtils.clone(graph.getCellStyle.apply(this, arguments)); var defaultStyle = graph.stylesheet.getDefaultVertexStyle(); var appliedStyle = vertexStyle; if (model.isEdge(cell)) { defaultStyle = graph.stylesheet.getDefaultEdgeStyle(); appliedStyle = edgeStyle; } removeStyles(result, defaultStyles, defaultStyle); applyStyle(commonStyle, result, cell, graphStyle, graph2); applyStyle(appliedStyle, result, cell, graphStyle, graph2); if (resolve) { result = graph.postProcessCellStyle(cell, result); } return result; }; // Avoid HTML labels to capture events in bubble phase graph2.model.beginUpdate(); try { var v1 = graph2.insertVertex(graph2.getDefaultParent(), null, 'Shape', 14, 8, 70, 36, 'strokeWidth=2;'); var e1 = graph2.insertEdge(graph2.getDefaultParent(), null, 'Connector', v1, v1, 'edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;endSize=5;strokeWidth=2;') e1.geometry.points = [new mxPoint(32, 66)]; e1.geometry.offset = new mxPoint(0, 8); } finally { graph2.model.endUpdate(); } }); // Entries var entries = document.createElement('div'); entries.style.position = 'relative'; entries.style.width = '210px'; div.appendChild(entries); // Cached entries if (this.format.cachedStyleEntries == null) { this.format.cachedStyleEntries = []; } function addKeys(style, result) { for (var key in style) { result.push(key); } return result; }; var addEntry = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, index) { var panel = this.format.cachedStyleEntries[index]; if (panel == null) { panel = document.createElement('div'); panel.style.display = 'inline-block'; panel.style.position = 'relative'; panel.style.width = '96px'; panel.style.height = '86px'; panel.style.cursor = 'pointer'; panel.style.border = '1px solid gray'; panel.style.borderRadius = '8px'; panel.style.margin = '1px 2px'; panel.style.overflow = 'hidden'; if (!ignoreGraphStyle && graphStyle != null && graphStyle.background != null) { panel.style.backgroundColor = graphStyle.background; } createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel); mxEvent.addGestureListeners(panel, mxUtils.bind(this, function(evt) { panel.style.opacity = 0.5; }), null, mxUtils.bind(this, function(evt) { panel.style.opacity = 1; graph.currentVertexStyle = mxUtils.clone(graph.defaultVertexStyle); graph.currentEdgeStyle = mxUtils.clone(graph.defaultEdgeStyle); applyStyle(commonStyle, graph.currentVertexStyle); applyStyle(commonStyle, graph.currentEdgeStyle); applyStyle(vertexStyle, graph.currentVertexStyle); applyStyle(edgeStyle, graph.currentEdgeStyle); model.beginUpdate(); try { updateCells(addKeys(commonStyle, defaultStyles.slice()), graphStyle); if (!ignoreGraphStyle) { var change = new ChangePageSetup(ui, (graphStyle != null) ? graphStyle.background : null); change.ignoreImage = true; model.execute(change); model.execute(new ChangeGridColor(ui, (graphStyle != null && graphStyle.gridColor != null) ? graphStyle.gridColor : gridColor)); } } finally { model.endUpdate(); } })); mxEvent.addListener(panel, 'mouseenter', mxUtils.bind(this, function(evt) { var prev = graph.getCellStyle; var prevBg = graph.background; var prevGrid = graph.view.gridColor; if (!ignoreGraphStyle) { graph.background = (graphStyle != null) ? graphStyle.background : null; graph.view.gridColor = (graphStyle != null && graphStyle.gridColor != null) ? graphStyle.gridColor : gridColor; } graph.getCellStyle = function(cell, resolve) { resolve = (resolve != null) ? resolve : true; var result = mxUtils.clone(prev.apply(this, arguments)); var defaultStyle = graph.stylesheet.getDefaultVertexStyle(); var appliedStyle = vertexStyle; if (model.isEdge(cell)) { defaultStyle = graph.stylesheet.getDefaultEdgeStyle(); appliedStyle = edgeStyle; } removeStyles(result, defaultStyles, defaultStyle); applyStyle(commonStyle, result, cell, graphStyle); applyStyle(appliedStyle, result, cell, graphStyle); if (resolve) { result = this.postProcessCellStyle(cell, result); } return result; }; graph.refresh(); graph.getCellStyle = prev; graph.background = prevBg; graph.view.gridColor = prevGrid; })); mxEvent.addListener(panel, 'mouseleave', mxUtils.bind(this, function(evt) { graph.refresh(); })); // Workaround for broken cache in IE11 if (!mxClient.IS_IE && !mxClient.IS_IE11) { this.format.cachedStyleEntries[index] = panel; } } entries.appendChild(panel); }); // Maximum palettes to switch the switcher var maxEntries = 10; var pageCount = Math.ceil(Editor.styles.length / maxEntries); this.format.currentStylePage = (this.format.currentStylePage != null) ? this.format.currentStylePage : 0; var dots = []; var addEntries = mxUtils.bind(this, function() { if (dots.length > 0) { dots[this.format.currentStylePage].style.background = '#84d7ff'; } for (var i = this.format.currentStylePage * maxEntries; i < Math.min((this.format.currentStylePage + 1) * maxEntries, Editor.styles.length); i++) { var s = Editor.styles[i]; addEntry(s.commonStyle, s.vertexStyle, s.edgeStyle, s.graph, i); } }); var selectPage = mxUtils.bind(this, function(index) { if (index >= 0 && index < pageCount) { dots[this.format.currentStylePage].style.background = 'transparent'; entries.innerText = ''; this.format.currentStylePage = index; addEntries(); } }); if (pageCount > 1) { // Selector var switcher = document.createElement('div'); switcher.style.whiteSpace = 'nowrap'; switcher.style.position = 'relative'; switcher.style.textAlign = 'center'; switcher.style.paddingTop = '4px'; switcher.style.width = '210px'; for (var i = 0; i < pageCount; i++) { var dot = document.createElement('div'); dot.style.display = 'inline-block'; dot.style.width = '6px'; dot.style.height = '6px'; dot.style.marginLeft = '4px'; dot.style.marginRight = '3px'; dot.style.borderRadius = '3px'; dot.style.cursor = 'pointer'; dot.style.background = 'transparent'; dot.style.border = '1px solid #b5b6b7'; (mxUtils.bind(this, function(index, elt) { mxEvent.addListener(dot, 'click', mxUtils.bind(this, function() { selectPage(index); })); }))(i, dot); switcher.appendChild(dot); dots.push(dot); } div.appendChild(switcher); addEntries(); if (pageCount < 15) { var left = document.createElement('div'); left.className = 'geAdaptiveAsset'; left.style.position = 'absolute'; left.style.left = '0px'; left.style.top = '0px'; left.style.bottom = '0px'; left.style.width = '24px'; left.style.height = '24px'; left.style.margin = '0px'; left.style.cursor = 'pointer'; left.style.opacity = '0.5'; left.style.backgroundRepeat = 'no-repeat'; left.style.backgroundPosition = 'center center'; left.style.backgroundSize = '24px 24px'; left.style.backgroundImage = 'url(' + Editor.previousImage + ')'; var right = left.cloneNode(false); right.style.backgroundImage = 'url(' + Editor.nextImage + ')'; right.style.left = ''; right.style.right = '2px'; switcher.appendChild(left); switcher.appendChild(right); mxEvent.addListener(left, 'click', mxUtils.bind(this, function() { selectPage(mxUtils.mod(this.format.currentStylePage - 1, pageCount)); })); mxEvent.addListener(right, 'click', mxUtils.bind(this, function() { selectPage(mxUtils.mod(this.format.currentStylePage + 1, pageCount)); })); // Hover state function addHoverState(elt) { mxEvent.addListener(elt, 'mouseenter', function() { elt.style.opacity = '1'; }); mxEvent.addListener(elt, 'mouseleave', function() { elt.style.opacity = '0.5'; }); }; addHoverState(left); addHoverState(right); } } else { addEntries(); } return div; }; /** * Adds the label menu items to the given menu and parent. */ DiagramStylePanel.prototype.destroy = function() { BaseFormatPanel.prototype.destroy.apply(this, arguments); if (this.darkModeChangedListener) { this.editorUi.removeListener(this.darkModeChangedListener); this.darkModeChangedListener = null; } }; /** * Adds the label menu items to the given menu and parent. */ DiagramFormatPanel = function(format, editorUi, container) { BaseFormatPanel.call(this, format, editorUi, container); this.init(); }; mxUtils.extend(DiagramFormatPanel, BaseFormatPanel); /** * Switch to disable page view. */ DiagramFormatPanel.showPageView = true; /** * Specifies if the background image option should be shown. Default is true. */ DiagramFormatPanel.prototype.showBackgroundImageOption = true; /** * Adds the label menu items to the given menu and parent. */ DiagramFormatPanel.prototype.init = function() { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; this.container.appendChild(this.addView(this.createPanel())); if (graph.isEnabled()) { this.container.appendChild(this.addOptions(this.createPanel())); this.container.appendChild(this.addPaperSize(this.createPanel())); this.container.appendChild(this.addStyleOps(this.createPanel())); } }; /** * Adds the label menu items to the given menu and parent. */ DiagramFormatPanel.prototype.addView = function(div) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; div.appendChild(this.createTitle(mxResources.get('view'))); // Grid this.addGridOption(div); // Page View if (DiagramFormatPanel.showPageView) { div.appendChild(this.createOption(mxResources.get('pageView'), function() { return graph.pageVisible; }, function(checked) { ui.actions.get('pageView').funct(); }, { install: function(apply) { this.listener = function() { apply(graph.pageVisible); }; ui.addListener('pageViewChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } })); } if (graph.isEnabled()) { if (this.showBackgroundImageOption) { var bg = this.createOption(mxResources.get('background'), function() { return graph.backgroundImage != null; }, function(checked) { if (!checked) { var change = new ChangePageSetup(ui, null, null); change.ignoreColor = true; graph.model.execute(change); } }, { install: function(apply) { this.listener = function() { apply(graph.backgroundImage != null); }; ui.addListener('backgroundImageChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } }); var input = bg.getElementsByTagName('input')[0]; if (input != null) { input.style.visibility = graph.backgroundImage != null ? 'visible' : 'hidden'; } var label = bg.getElementsByTagName('div')[0]; if (label != null) { label.style.display = 'inline-block'; label.style.textOverflow = 'ellipsis'; label.style.overflow = 'hidden'; label.style.maxWidth = '80px'; } if (mxClient.IS_FF) { label.style.marginTop = '1px'; } var btn = mxUtils.button(mxResources.get('change') + '...', function(evt) { ui.showBackgroundImageDialog(null, ui.editor.graph.backgroundImage, ui.editor.graph.background); mxEvent.consume(evt); }) btn.style.position = 'absolute'; btn.style.height = '22px'; btn.style.left = '47%'; btn.style.marginLeft = '1px'; btn.style.width = '110px'; btn.style.maxWidth = '110px'; bg.appendChild(btn); div.appendChild(bg); } var bgColor = this.createColorOption(mxResources.get('backgroundColor'), function() { return graph.background; }, function(color) { var change = new ChangePageSetup(ui, color); change.ignoreImage = true; graph.model.execute(change); }, '#ffffff'); bgColor.style.padding = '5px 0 1px 0'; div.appendChild(bgColor); var option = this.createOption(mxResources.get('shadow'), function() { return graph.shadowVisible; }, function(checked) { var change = new ChangePageSetup(ui); change.ignoreColor = true; change.ignoreImage = true; change.shadowVisible = checked; graph.model.execute(change); }, { install: function(apply) { this.listener = function() { apply(graph.shadowVisible); }; ui.addListener('shadowVisibleChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } }); if (!Editor.enableShadowOption) { option.getElementsByTagName('input')[0].setAttribute('disabled', 'disabled'); mxUtils.setOpacity(option, 60); } option.style.display = 'inline-flex'; option.style.width = '100px'; option.style.maxWidth = '100px'; option.style.marginRight = '4px'; div.appendChild(option); var sketchOption = this.createOption(mxResources.get('sketch'), function() { return Editor.sketchMode; }, function(checked) { ui.setSketchMode(checked); }, { install: function(apply) { this.listener = function() { apply(Editor.sketchMode); }; ui.addListener('sketchModeChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } }); sketchOption.style.display = 'inline-flex'; sketchOption.style.width = '104px'; sketchOption.style.maxWidth = '104px'; div.appendChild(sketchOption); } return div; }; /** * Adds the label menu items to the given menu and parent. */ DiagramFormatPanel.prototype.addOptions = function(div) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; div.appendChild(this.createTitle(mxResources.get('options'))); if (graph.isEnabled()) { // Connection arrows div.appendChild(this.createOption(mxResources.get('connectionArrows'), function() { return graph.connectionArrowsEnabled; }, function(checked) { ui.actions.get('connectionArrows').funct(); }, { install: function(apply) { this.listener = function() { apply(graph.connectionArrowsEnabled); }; ui.addListener('connectionArrowsChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } })); // Connection points div.appendChild(this.createOption(mxResources.get('connectionPoints'), function() { return graph.connectionHandler.isEnabled(); }, function(checked) { ui.actions.get('connectionPoints').funct(); }, { install: function(apply) { this.listener = function() { apply(graph.connectionHandler.isEnabled()); }; ui.addListener('connectionPointsChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } })); // Guides div.appendChild(this.createOption(mxResources.get('guides'), function() { return graph.graphHandler.guidesEnabled; }, function(checked) { ui.actions.get('guides').funct(); }, { install: function(apply) { this.listener = function() { apply(graph.graphHandler.guidesEnabled); }; ui.addListener('guidesEnabledChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } })); } return div; }; /** * */ DiagramFormatPanel.prototype.addGridOption = function(container) { var fPanel = this; var ui = this.editorUi; var graph = ui.editor.graph; var input = document.createElement('input'); input.style.position = 'absolute'; input.style.textAlign = 'right'; input.style.width = '48px'; input.style.marginTop = '-2px'; input.style.height = '21px'; input.style.borderWidth = '1px'; input.style.borderStyle = 'solid'; input.style.boxSizing = 'border-box'; input.value = this.inUnit(graph.getGridSize()) + ' ' + this.getUnit(); var stepper = this.createStepper(input, update, this.getUnitStep(), null, null, null, this.isFloatUnit()); input.style.display = (graph.isGridEnabled()) ? '' : 'none'; stepper.style.display = input.style.display; mxEvent.addListener(input, 'keydown', function(e) { if (e.keyCode == 13) { graph.container.focus(); mxEvent.consume(e); } else if (e.keyCode == 27) { input.value = graph.getGridSize(); graph.container.focus(); mxEvent.consume(e); } }); function update(evt) { var value = fPanel.isFloatUnit()? parseFloat(input.value) : parseInt(input.value); value = fPanel.fromUnit(Math.max(fPanel.inUnit(1), (isNaN(value)) ? fPanel.inUnit(10) : value)); if (value != graph.getGridSize()) { mxGraph.prototype.gridSize = value; graph.setGridSize(value) } input.value = fPanel.inUnit(value) + ' ' + fPanel.getUnit(); mxEvent.consume(evt); }; mxEvent.addListener(input, 'blur', update); mxEvent.addListener(input, 'change', update); input.style.right = '78px'; stepper.style.marginTop = (mxClient.IS_MAC && mxClient.IS_GC) ? '-16px' : ((mxClient.IS_WIN) ? '-18px' : '-17px'); stepper.style.right = '66px'; var panel = this.createColorOption(mxResources.get('grid'), function() { var color = graph.view.gridColor; return (graph.isGridEnabled()) ? color : null; }, function(color) { var enabled = graph.isGridEnabled(); if (color == mxConstants.NONE) { graph.setGridEnabled(false); } else { graph.setGridEnabled(true); ui.setGridColor(color); } input.style.display = (graph.isGridEnabled()) ? '' : 'none'; stepper.style.display = input.style.display; if (enabled != graph.isGridEnabled()) { graph.defaultGridEnabled = graph.isGridEnabled(); ui.fireEvent(new mxEventObject('gridEnabledChanged')); } }, Editor.isDarkMode() ? graph.view.defaultDarkGridColor : graph.view.defaultGridColor, { install: function(apply) { this.listener = function() { apply((graph.isGridEnabled()) ? graph.view.gridColor : null); }; ui.addListener('gridColorChanged', this.listener); ui.addListener('gridEnabledChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } }); panel.style.padding = '6px 0 0 0'; panel.appendChild(input); panel.appendChild(stepper); container.appendChild(panel); }; /** * Adds the label menu items to the given menu and parent. */ DiagramFormatPanel.prototype.addDocumentProperties = function(div) { // Hook for subclassers var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; div.appendChild(this.createTitle(mxResources.get('options'))); return div; }; /** * Adds the label menu items to the given menu and parent. */ DiagramFormatPanel.prototype.addPaperSize = function(div) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; div.appendChild(this.createTitle(mxResources.get('paperSize'))); var accessor = PageSetupDialog.addPageFormatPanel(div, 'formatpanel', graph.pageFormat, function(pageFormat) { if (graph.pageFormat == null || graph.pageFormat.width != pageFormat.width || graph.pageFormat.height != pageFormat.height) { var change = new ChangePageSetup(ui, null, null, pageFormat); change.ignoreColor = true; change.ignoreImage = true; graph.model.execute(change); } }); this.addKeyHandler(accessor.widthInput, function() { accessor.set(graph.pageFormat); }); this.addKeyHandler(accessor.heightInput, function() { accessor.set(graph.pageFormat); }); var listener = function() { accessor.set(graph.pageFormat); }; ui.addListener('pageFormatChanged', listener); this.listeners.push({destroy: function() { ui.removeListener(listener); }}); graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); return div; }; /** * Adds the label menu items to the given menu and parent. */ DiagramFormatPanel.prototype.addStyleOps = function(div) { this.addActions(div, ['editData']); this.addActions(div, ['clearDefaultStyle']); return div; }; /** * Adds the label menu items to the given menu and parent. */ DiagramFormatPanel.prototype.destroy = function() { BaseFormatPanel.prototype.destroy.apply(this, arguments); if (this.gridEnabledListener) { this.editorUi.removeListener(this.gridEnabledListener); this.gridEnabledListener = null; } };