/**
* Copyright (c) 2006-2012, JGraph Ltd
*/
Format = function(editorUi, container)
{
this.editorUi = editorUi;
this.container = container;
};
/**
* Background color for inactive tabs.
*/
Format.inactiveTabBackgroundColor = '#f1f3f4';
/**
* Icons for markers (24x16).
*/
Format.classicFilledMarkerImage = Graph.createSvgImage(20, 22, '
' + graph.cellEditor.textarea.innerHTML + '
'; } node = graph.cellEditor.textarea.firstChild; } if (node != null && graph.cellEditor.textarea != null && node != graph.cellEditor.textarea && graph.cellEditor.textarea.contains(node)) { node.style.lineHeight = value / 100; } 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%)') : ''; }; var listener = mxUtils.bind(this, function(sender, evt, force) { ss = this.format.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) { dirSelect.value = 'automatic'; } 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 %'; } } // Converts rgb(r,g,b) values var color = css.color.replace( /\brgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+)\s*)?\)/g, function($0, $1, $2, $3, $4) { return '#' + ('0' + Number($1).toString(16)).substr(-2) + ('0' + Number($2).toString(16)).substr(-2) + ('0' + Number($3).toString(16)).substr(-2) + (($4 != null) ? ('0' + Number($4).toString(16)).substr(-2) : ''); }); var color2 = css.backgroundColor.replace( /\brgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d+)\s*)?\)/g, function($0, $1, $2, $3, $4) { return '#' + ('0' + Number($1).toString(16)).substr(-2) + ('0' + Number($2).toString(16)).substr(-2) + ('0' + Number($3).toString(16)).substr(-2) + (($4 != null) ? ('0' + Number($4).toString(16)).substr(-2) : ''); }); // Updates the color picker for the current font if (fontColorApply != null) { if (color.charAt(0) == '#') { currentFontColor = color; } else { currentFontColor = '#000000'; } fontColorApply(currentFontColor, true); } if (bgColorApply != null) { if (color2.charAt(0) == '#') { currentBgColor = color2; } else { currentBgColor = null; } 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 editor = ui.editor; var graph = editor.graph; var ss = this.format.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.containsImage || ss.style.shape == 'image') { 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 = '8px'; this.container.appendChild(opacityPanel); this.container.appendChild(this.addEffects(this.createPanel())); } var opsPanel = this.addEditOps(this.createPanel()); if (opsPanel.firstChild != null) { mxUtils.br(opsPanel); } this.container.appendChild(this.addStyleOps(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 graph = ui.editor.graph; var ss = this.format.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) ? 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(xml) : Base64.encode(xml, true)), this.format.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.format.getSelectionState(); var btn = null; if (ss.cells.length == 1) { btn = mxUtils.button(mxResources.get('editStyle'), mxUtils.bind(this, function(evt) { this.editorUi.actions.get('editStyle').funct(); })); btn.setAttribute('title', mxResources.get('editStyle') + ' (' + this.editorUi.actions.get('editStyle').shortcut + ')'); btn.style.width = '210px'; btn.style.marginBottom = '2px'; div.appendChild(btn); } if (ss.image && ss.cells.length > 0) { var btn2 = mxUtils.button(mxResources.get('editImage'), mxUtils.bind(this, function(evt) { this.editorUi.actions.get('image').funct(); })); btn2.setAttribute('title', mxResources.get('editImage')); btn2.style.marginBottom = '2px'; if (btn == null) { btn2.style.width = '210px'; } else { btn.style.width = '104px'; btn2.style.width = '104px'; btn2.style.marginLeft = '2px'; } div.appendChild(btn2); } 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 = this.format.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.borderRadius = '4px'; gradientSelect.style.border = '1px solid rgb(160, 160, 160)'; 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 defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); var gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR, (defs[mxConstants.STYLE_GRADIENTCOLOR] != null) ? defs[mxConstants.STYLE_GRADIENTCOLOR] : '#ffffff', function(color) { if (color == null || color == mxConstants.NONE) { gradientSelect.style.display = 'none'; } else { gradientSelect.style.display = ''; } }, function(color) { graph.updateCellStyles(mxConstants.STYLE_GRADIENTCOLOR, color, graph.getSelectionCells()); }); var fillKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BACKGROUND : mxConstants.STYLE_FILLCOLOR; var label = (ss.style.shape == 'image') ? mxResources.get('background') : mxResources.get('fill'); var fillPanel = this.createCellColorOption(label, fillKey, 'default', null, mxUtils.bind(this, function(color) { graph.setCellStyles(fillKey, color, ss.cells); }), graph.shapeBackgroundColor); 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); 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); } fillPanel.appendChild(fillStyleSelect); var listener = mxUtils.bind(this, function() { ss = this.format.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; fillStyleSelect.value = fillStyle; container.style.display = (ss.fill) ? '' : 'none'; var fillColor = mxUtils.getValue(ss.style, mxConstants.STYLE_FILLCOLOR, null); if (!ss.fill || ss.containsImage || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge') { fillStyleSelect.style.display = 'none'; gradientPanel.style.display = 'none'; } else { fillStyleSelect.style.display = (ss.style.sketch == '1') ? '' : 'none'; gradientPanel.style.display = (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.format.getSelectionState(); var result = []; if (ss.style.shape == 'swimlane' || ss.style.shape == 'table') { 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 = this.format.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.boxSizing = 'border-box'; styleSelect.style.left = '94px'; styleSelect.style.width = '80px'; styleSelect.style.border = '1px solid rgb(160, 160, 160)'; styleSelect.style.borderRadius = '4px'; 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]; // Default for rounded is 1 var values = ['0', null]; if (styleSelect.value == 'rounded') { values = ['1', null]; } else if (styleSelect.value == 'curved') { values = [null, '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); }), graph.shapeForegroundColor); lineColor.appendChild(styleSelect); colorPanel.appendChild(lineColor); // Used if only edges selected var stylePanel = colorPanel.cloneNode(false); stylePanel.style.fontWeight = 'normal'; stylePanel.style.whiteSpace = 'nowrap'; stylePanel.style.position = 'relative'; stylePanel.style.paddingLeft = '0px'; stylePanel.style.marginBottom = '2px'; stylePanel.style.overflow = 'hidden'; stylePanel.style.marginTop = '2px'; stylePanel.style.width = '220px'; stylePanel.className = 'geToolbarContainer'; 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')); 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, 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, 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, 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, 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')); 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 = '21px'; input.style.left = '146px'; input.style.border = '1px solid rgb(160, 160, 160)'; input.style.borderRadius = '4px'; 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.marginTop = '2px'; stepper.style.left = '198px'; stylePanel.appendChild(stepper); var altStepper = this.createStepper(altInput, altUpdate, 1, 9); altStepper.style.display = altInput.style.display; altStepper.style.marginTop = '2px'; altInput.style.position = 'absolute'; 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('simple')); 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('simple')); 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') { 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('font'); font.style.fontSize = '10px'; mxUtils.write(font, mxResources.get('none')); item.firstChild.firstChild.appendChild(font); if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') { 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'; } })); 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') { 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('font'); font.style.fontSize = '10px'; mxUtils.write(font, mxResources.get('none')); item.firstChild.firstChild.appendChild(font); if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') { 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'; } })); var elt = this.addArrow(edgeShape, 8); elt.nextSibling.style.position = 'relative'; elt.nextSibling.style.top = '-2px'; elt = this.addArrow(edgeStyle, 10); elt.nextSibling.style.position = 'relative'; elt.nextSibling.style.top = '-3px'; edgeStyle.getElementsByTagName('img')[0].style.top = '-1px'; this.addArrow(lineStart); this.addArrow(lineEnd); var symbol = this.addArrow(pattern, 9); symbol.className = 'geIcon'; symbol.style.width = 'auto'; var altSymbol = this.addArrow(altPattern, 9); altSymbol.className = 'geIcon'; altSymbol.style.width = '22px'; var solid = document.createElement('div'); solid.style.width = '84px'; solid.style.height = '1px'; solid.style.borderBottom = '1px solid ' + this.defaultStrokeColor; solid.style.marginBottom = '7px'; symbol.appendChild(solid); var altSolid = document.createElement('div'); altSolid.style.width = '23px'; altSolid.style.height = '1px'; altSolid.style.borderBottom = '1px solid ' + this.defaultStrokeColor; altSolid.style.marginBottom = '7px'; altSymbol.appendChild(altSolid); pattern.style.height = '15px'; pattern.style.marginLeft = '16px'; altPattern.style.height = '15px'; altPattern.style.marginLeft = '3px'; edgeShape.style.marginLeft = '10px'; edgeShape.style.height = '15px'; edgeStyle.style.marginLeft = '10px'; edgeStyle.style.height = '17px'; lineStart.style.marginLeft = '3px'; lineStart.style.height = '17px'; lineEnd.style.marginLeft = '3px'; lineEnd.style.height = '17px'; container.appendChild(colorPanel); container.appendChild(altStylePanel); container.appendChild(stylePanel); var arrowPanel = stylePanel.cloneNode(false); arrowPanel.style.padding = '5px 4px 6px 0px'; arrowPanel.style.fontWeight = 'normal'; var span = document.createElement('div'); span.style.position = 'absolute'; span.style.marginLeft = '0px'; span.style.marginBottom = '12px'; span.style.marginTop = '2px'; span.style.fontWeight = 'normal'; span.style.width = '76px'; 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, 52); this.addLabel(arrowPanel, mxResources.get('size'), 30, 52); 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 = this.format.getSelectionState(); var color = mxUtils.getValue(ss.style, strokeKey, null); 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') ? '' : '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) { 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) { markerDiv.className = ui.getCssClassForMarker(prefix, ss.style.shape, marker, fill); markerDiv.nextSibling.style.marginLeft = '1px'; markerDiv.nextSibling.style.paddingRight = '5px'; if (markerDiv.className == 'geSprite geSprite-noarrow') { markerDiv.innerHTML = mxUtils.htmlEntities(mxResources.get('none')); markerDiv.style.backgroundImage = 'none'; markerDiv.style.verticalAlign = 'top'; markerDiv.style.marginTop = '4px'; markerDiv.style.fontSize = '10px'; markerDiv.style.filter = 'none'; markerDiv.style.color = this.defaultStrokeColor; markerDiv.nextSibling.style.marginTop = '0px'; } else { markerDiv.nextSibling.style.position = 'relative'; markerDiv.nextSibling.style.top = '-2px'; } } 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') { 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 ss = this.format.getSelectionState(); if (Graph.lineJumpsEnabled && ss.edges.length > 0 && ss.vertices.length == 0 && ss.lineJumps) { container.style.padding = '2px 0px 24px 14px'; var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; var span = document.createElement('div'); span.style.position = 'absolute'; span.style.maxWidth = '82px'; 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.right = '76px'; styleSelect.style.width = '54px'; styleSelect.style.border = '1px solid rgb(160, 160, 160)'; styleSelect.style.borderRadius = '4px'; 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, 42, 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 = this.format.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 = this.format.getSelectionState(); div.style.paddingTop = '4px'; div.style.paddingBottom = '0px'; 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 count = 0; var addOption = mxUtils.bind(this, function(label, key, defaultValue) { var opt = this.createCellOption(label, key, defaultValue); opt.style.width = '100%'; current.appendChild(opt); current = (current == left) ? right : left; count++; }); var listener = mxUtils.bind(this, function(sender, evt, force) { ss = this.format.getSelectionState(); left.innerHTML = ''; right.innerHTML = ''; current = left; if (ss.rounded) { addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0); } if (ss.style.shape == 'swimlane') { addOption(mxResources.get('divider'), 'swimlaneLine', 1); } if (!ss.containsImage) { addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0); } if (ss.glass) { addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0); } addOption(mxResources.get('sketch'), 'sketch', 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) { div.style.paddingTop = '10px'; div.style.paddingBottom = '10px'; var btn = mxUtils.button(mxResources.get('setAsDefaultStyle'), mxUtils.bind(this, function(evt) { this.editorUi.actions.get('setAsDefaultStyle').funct(); })); btn.setAttribute('title', mxResources.get('setAsDefaultStyle') + ' (' + this.editorUi.actions.get('setAsDefaultStyle').shortcut + ')'); btn.style.width = '210px'; div.appendChild(btn); 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; var editor = ui.editor; var graph = editor.graph; 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.addView = function(div) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; var model = graph.getModel(); div.style.whiteSpace = 'normal'; var sketch = graph.currentVertexStyle['sketch'] == '1' && graph.currentEdgeStyle['sketch'] == '1'; var rounded = graph.currentVertexStyle['rounded'] == '1'; var curved = graph.currentEdgeStyle['curved'] == '1'; var opts = document.createElement('div'); opts.style.paddingBottom = '12px'; opts.style.marginRight = '16px'; div.style.paddingTop = '8px'; var table = document.createElement('table'); table.style.width = '210px'; table.style.fontWeight = 'bold'; 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', 'middle'); var right = left.cloneNode(true); right.style.paddingLeft = '8px'; row.appendChild(left); row.appendChild(right); tbody.appendChild(row); table.appendChild(tbody); // Sketch left.appendChild(this.createOption(mxResources.get('sketch'), function() { return sketch; }, function(checked) { sketch = checked; if (checked) { graph.currentEdgeStyle['sketch'] = '1'; graph.currentVertexStyle['sketch'] = '1'; } else { delete graph.currentEdgeStyle['sketch']; delete graph.currentVertexStyle['sketch']; } graph.updateCellStyles('sketch', (checked) ? '1' : null, graph.getVerticesAndEdges()); }, null, function(div) { div.style.width = 'auto'; })); // Rounded right.appendChild(this.createOption(mxResources.get('rounded'), function() { return rounded; }, function(checked) { rounded = checked; if (checked) { graph.currentEdgeStyle['rounded'] = '1'; graph.currentVertexStyle['rounded'] = '1'; } else { delete graph.currentEdgeStyle['rounded']; delete graph.currentVertexStyle['rounded']; } graph.updateCellStyles('rounded', (checked) ? '1' : '0', graph.getVerticesAndEdges()); }, null, function(div) { div.style.width = 'auto'; })); // Curved left = left.cloneNode(false); right = right.cloneNode(false); row = row.cloneNode(false); row.appendChild(left); row.appendChild(right); tbody.appendChild(row); left.appendChild(this.createOption(mxResources.get('curved'), function() { return curved; }, function(checked) { curved = checked; if (checked) { graph.currentEdgeStyle['curved'] = '1'; } else { delete graph.currentEdgeStyle['curved']; } graph.updateCellStyles('curved', (checked) ? '1' : null, graph.getVerticesAndEdges(false, true)); }, null, function(div) { div.style.width = 'auto'; })); opts.appendChild(table); div.appendChild(opts); var defaultStyles = ['fillColor', 'strokeColor', 'fontColor', 'gradientColor']; 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 (style['labelBackgroundColor'] != null) { graph.updateCellStyles('labelBackgroundColor', (graphStyle != null) ? graphStyle.background : null, [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)) { 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 applyStyle = mxUtils.bind(this, function(style, result, cell, graphStyle, theGraph) { if (style != null) { if (cell != null) { // Handles special label background color if (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; } } for (var key in style) { if (cell == null || ((result[key] != null && result[key] != mxConstants.NONE) || (key != mxConstants.STYLE_FILLCOLOR && key != mxConstants.STYLE_STROKECOLOR))) { result[key] = style[key]; } } } }); var btn = mxUtils.button(mxResources.get('reset'), mxUtils.bind(this, function(evt) { var all = graph.getVerticesAndEdges(true, true); if (all.length > 0) { model.beginUpdate(); try { graph.updateCellStyles('sketch', null, all); graph.updateCellStyles('rounded', null, all); graph.updateCellStyles('curved', null, graph.getVerticesAndEdges(false, true)); } finally { model.endUpdate(); } } ui.clearDefaultStyle(); })); btn.setAttribute('title', mxResources.get('reset')); btn.style.textOverflow = 'ellipsis'; btn.style.maxWidth = '90px'; right.appendChild(btn); var createPreview = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, container) { // Wrapper needed to catch events var div = document.createElement('div'); 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.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) { var result = mxUtils.clone(Graph.prototype.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 (result != null) { result = this.postProcessCellStyle(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, 40, '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, 70)]; e1.geometry.offset = new mxPoint(0, 8); } finally { graph2.model.endUpdate(); } }); // Entries var entries = document.createElement('div'); entries.style.position = 'relative'; div.appendChild(entries); // Cached entries if (this.format.cachedStyleEntries == null) { this.format.cachedStyleEntries = []; } 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 = '90px'; panel.style.cursor = 'pointer'; panel.style.border = '1px solid gray'; panel.style.borderRadius = '8px'; panel.style.margin = '2px'; panel.style.overflow = 'hidden'; if (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); if (sketch) { graph.currentEdgeStyle['sketch'] = '1'; graph.currentVertexStyle['sketch'] = '1'; } else { graph.currentEdgeStyle['sketch'] = '0'; graph.currentVertexStyle['sketch'] = '0'; } if (rounded) { graph.currentVertexStyle['rounded'] = '1'; graph.currentEdgeStyle['rounded'] = '1'; } else { graph.currentVertexStyle['rounded'] = '0'; graph.currentEdgeStyle['rounded'] = '1'; } if (curved) { graph.currentEdgeStyle['curved'] = '1'; } else { graph.currentEdgeStyle['curved'] = '0'; } model.beginUpdate(); try { updateCells(defaultStyles, graphStyle); 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 : graph.view.defaultGridColor)); } 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; graph.background = (graphStyle != null) ? graphStyle.background : null; graph.view.gridColor = (graphStyle != null && graphStyle.gridColor != null) ? graphStyle.gridColor : graph.view.defaultGridColor; graph.getCellStyle = function(cell) { 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 (result != null) { result = this.postProcessCellStyle(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.innerHTML = ''; 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'; div.style.paddingBottom = '8px'; 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.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 + ')'; if (Editor.isDarkMode()) { left.style.filter = 'invert(100%)'; } 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()) { // Background var bg = this.createColorOption(mxResources.get('background'), function() { return graph.background; }, function(color) { var change = new ChangePageSetup(ui, color); change.ignoreImage = true; graph.model.execute(change); }, '#ffffff', { install: function(apply) { this.listener = function() { apply(graph.background); }; ui.addListener('backgroundColorChanged', this.listener); }, destroy: function() { ui.removeListener(this.listener); } }); if (this.showBackgroundImageOption) { var label = bg.getElementsByTagName('span')[0]; label.style.display = 'inline-block'; label.style.textOverflow = 'ellipsis'; label.style.overflow = 'hidden'; label.style.maxWidth = '68px'; if (mxClient.IS_FF) { label.style.marginTop = '1px'; } var btn = mxUtils.button(mxResources.get('change'), function(evt) { ui.showBackgroundImageDialog(null, ui.editor.graph.backgroundImage); mxEvent.consume(evt); }) btn.className = 'geColorBtn'; btn.style.position = 'absolute'; btn.style.marginTop = '-3px'; btn.style.height = '22px'; btn.style.left = '118px'; btn.style.width = '56px'; bg.appendChild(btn); } div.appendChild(bg); } 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.border = '1px solid rgb(160, 160, 160)'; input.style.borderRadius = '4px'; 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 = '-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.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) { var btn = mxUtils.button(mxResources.get('editData'), mxUtils.bind(this, function(evt) { this.editorUi.actions.get('editData').funct(); })); btn.setAttribute('title', mxResources.get('editData') + ' (' + this.editorUi.actions.get('editData').shortcut + ')'); btn.style.width = '210px'; btn.style.marginBottom = '2px'; div.appendChild(btn); mxUtils.br(div); btn = mxUtils.button(mxResources.get('clearDefaultStyle'), mxUtils.bind(this, function(evt) { this.editorUi.actions.get('clearDefaultStyle').funct(); })); btn.setAttribute('title', mxResources.get('clearDefaultStyle') + ' (' + this.editorUi.actions.get('clearDefaultStyle').shortcut + ')'); btn.style.width = '210px'; div.appendChild(btn); 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; } };