From f0ec9b78263da98d01a741786fb6615366321ba1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A6=E8=8D=A3=E8=B6=85?= <302645122@qq.com> Date: Tue, 15 Feb 2022 11:05:48 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90=E6=96=87=E4=BB=B6=E3=80=91?= =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=9B=BE=E6=96=B0=E7=BB=84=E4=BB=B6=E5=A4=8D?= =?UTF-8?q?=E9=80=89=E6=A1=86=E5=9C=A8360=E6=B5=8F=E8=A7=88=E5=99=A8?= =?UTF-8?q?=E4=B8=AD=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/drawio/js/diagramly/App.js | 2 +- public/js/drawio/js/grapheditor/Format.js | 1264 ++++++++--------- .../public/js/drawio/js/diagramly/App.js | 2 +- .../public/js/drawio/js/grapheditor/Format.js | 1264 ++++++++--------- 4 files changed, 1266 insertions(+), 1266 deletions(-) diff --git a/public/js/drawio/js/diagramly/App.js b/public/js/drawio/js/diagramly/App.js index 97eb8071..c344c62e 100644 --- a/public/js/drawio/js/diagramly/App.js +++ b/public/js/drawio/js/diagramly/App.js @@ -791,7 +791,7 @@ App.main = function(callback, createUi) (urlParams['embed'] == '1' && urlParams['gapi'] == '1')) && isSvgBrowser && isLocalStorage && (document.documentMode == null || document.documentMode >= 10)))) { - mxscript('https://apis.google.com/js/api.js?onload=DrawGapiClientCallback', null, null, null, mxClient.IS_SVG); + // mxscript('https://apis.google.com/js/api.js?onload=DrawGapiClientCallback', null, null, null, mxClient.IS_SVG); } // Disables client else if (typeof window.gapi === 'undefined') diff --git a/public/js/drawio/js/grapheditor/Format.js b/public/js/drawio/js/grapheditor/Format.js index cdf287ad..86e6e3e3 100644 --- a/public/js/drawio/js/grapheditor/Format.js +++ b/public/js/drawio/js/grapheditor/Format.js @@ -56,14 +56,14 @@ Format.doubleBlockFilledMarkerImage = Graph.createSvgImage(20, 22, ' 0) { if (Editor.isDarkMode()) { imgs[0].style.filter = 'invert(100%)'; } - + imgs[0].className = 'geIcon'; imgs[0].style.padding = '0px'; imgs[0].style.margin = '0 0 0 2px'; @@ -73,10 +73,10 @@ Format.processMenuIcon = function(elt, transform) mxUtils.setPrefixedStyle(imgs[0].style, 'transform', transform); } } - + return elt; }; - + /** * Returns information about the current selection. */ @@ -105,12 +105,12 @@ Format.prototype.init = function() var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - + this.update = mxUtils.bind(this, function(sender, evt) { this.refresh(); }); - + graph.getSelectionModel().addListener(mxEvent.CHANGE, this.update); graph.getModel().addListener(mxEvent.CHANGE, this.update); graph.addListener(mxEvent.EDITING_STARTED, this.update); @@ -119,7 +119,7 @@ Format.prototype.init = function() editor.addListener('autosaveChanged', this.update); graph.addListener(mxEvent.ROOT, this.update); ui.addListener('styleChanged', this.update); - + this.refresh(); }; @@ -129,7 +129,7 @@ Format.prototype.init = function() Format.prototype.clear = function() { this.container.innerHTML = ''; - + // Destroy existing panels if (this.panels != null) { @@ -138,7 +138,7 @@ Format.prototype.clear = function() this.panels[i].destroy(); } } - + this.panels = []; }; @@ -169,17 +169,17 @@ Format.prototype.immediateRefresh = function() { return; } - + this.clear(); var ui = this.editorUi; var graph = ui.editor.graph; - + var div = document.createElement('div'); div.style.whiteSpace = 'nowrap'; div.style.color = 'rgb(112, 112, 112)'; div.style.textAlign = 'left'; div.style.cursor = 'default'; - + var label = document.createElement('div'); label.className = 'geFormatSection'; label.style.textAlign = 'center'; @@ -193,7 +193,7 @@ Format.prototype.immediateRefresh = function() label.style.overflow = 'hidden'; label.style.width = '100%'; this.container.appendChild(div); - + // Prevents text selection mxEvent.addListener(label, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', mxUtils.bind(this, function(evt) @@ -205,7 +205,7 @@ Format.prototype.immediateRefresh = function() var containsLabel = ss.containsLabel; var currentLabel = null; var currentPanel = null; - + var addClickHandler = mxUtils.bind(this, function(elt, panel, index, lastEntry) { var clickHandler = mxUtils.bind(this, function(evt) @@ -224,7 +224,7 @@ Format.prototype.immediateRefresh = function() { this.currentIndex = index; } - + if (currentLabel != null) { currentLabel.style.backgroundColor = Format.inactiveTabBackgroundColor; @@ -234,29 +234,29 @@ Format.prototype.immediateRefresh = function() currentLabel = elt; currentLabel.style.backgroundColor = ''; currentLabel.style.borderBottomWidth = '0px'; - + if (currentPanel != panel) { if (currentPanel != null) { currentPanel.style.display = 'none'; } - + currentPanel = panel; currentPanel.style.display = ''; } } }); - + mxEvent.addListener(elt, 'click', clickHandler); - + // Prevents text selection mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', mxUtils.bind(this, function(evt) { evt.preventDefault(); })); - + if ((lastEntry && currentLabel == null) || (index == ((containsLabel) ? this.labelIndex : ((graph.isSelectionEmpty()) ? this.diagramIndex : this.currentIndex)))) @@ -265,7 +265,7 @@ Format.prototype.immediateRefresh = function() clickHandler(); } }); - + var idx = 0; if (graph.isSelectionEmpty()) @@ -277,31 +277,31 @@ Format.prototype.immediateRefresh = function() var diagramPanel = div.cloneNode(false); this.panels.push(new DiagramFormatPanel(this, ui, diagramPanel)); this.container.appendChild(diagramPanel); - + if (Editor.styles != null) { diagramPanel.style.display = 'none'; label.style.width = (this.showCloseButton) ? '106px' : '50%'; label.style.cursor = 'pointer'; label.style.backgroundColor = Format.inactiveTabBackgroundColor; - + var label2 = label.cloneNode(false); label2.style.borderLeftWidth = '1px'; label2.style.borderRightWidth = '1px'; label2.style.backgroundColor = Format.inactiveTabBackgroundColor; - + addClickHandler(label, diagramPanel, idx++); - + var stylePanel = div.cloneNode(false); stylePanel.style.display = 'none'; mxUtils.write(label2, mxResources.get('style')); div.appendChild(label2); this.panels.push(new DiagramStylePanel(this, ui, stylePanel)); this.container.appendChild(stylePanel); - + addClickHandler(label2, stylePanel, idx++); } - + // Adds button to hide the format panel since // people don't seem to find the toolbar button // and the menu item in the format menu @@ -316,7 +316,7 @@ Format.prototype.immediateRefresh = function() label2.style.right = '0px'; label2.style.top = '0px'; label2.style.width = '25px'; - + var img = document.createElement('img'); img.setAttribute('border', '0'); img.setAttribute('src', Dialog.prototype.closeImage); @@ -332,12 +332,12 @@ Format.prototype.immediateRefresh = function() img.style.padding = '1px'; img.style.opacity = 0.5; label2.appendChild(img) - + mxEvent.addListener(img, 'click', function() { ui.actions.get('formatPanel').funct(); }); - + div.appendChild(label2); } } @@ -359,7 +359,7 @@ Format.prototype.immediateRefresh = function() // Workaround for ignored background in IE label2.style.backgroundColor = Format.inactiveTabBackgroundColor; label3.style.backgroundColor = Format.inactiveTabBackgroundColor; - + // Style if (containsLabel) { @@ -370,7 +370,7 @@ Format.prototype.immediateRefresh = function() label.style.borderLeftWidth = '0px'; mxUtils.write(label, mxResources.get('style')); div.appendChild(label); - + var stylePanel = div.cloneNode(false); stylePanel.style.display = 'none'; this.panels.push(new StyleFormatPanel(this, ui, stylePanel)); @@ -378,7 +378,7 @@ Format.prototype.immediateRefresh = function() addClickHandler(label, stylePanel, idx++); } - + // Text mxUtils.write(label2, mxResources.get('text')); div.appendChild(label2); @@ -387,7 +387,7 @@ Format.prototype.immediateRefresh = function() textPanel.style.display = 'none'; this.panels.push(new TextFormatPanel(this, ui, textPanel)); this.container.appendChild(textPanel); - + // Arrange mxUtils.write(label3, mxResources.get('arrange')); div.appendChild(label3); @@ -396,7 +396,7 @@ Format.prototype.immediateRefresh = function() arrangePanel.style.display = 'none'; this.panels.push(new ArrangePanel(this, ui, arrangePanel)); this.container.appendChild(arrangePanel); - + if (ss.cells.length > 0) { addClickHandler(label2, textPanel, idx++); @@ -405,7 +405,7 @@ Format.prototype.immediateRefresh = function() { label2.style.display = 'none'; } - + addClickHandler(label3, arrangePanel, idx++, true); } }; @@ -422,7 +422,7 @@ BaseFormatPanel = function(format, editorUi, container) }; /** - * + * */ BaseFormatPanel.prototype.buttonBackgroundColor = 'white'; @@ -433,16 +433,16 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu { unit = (unit != null) ? unit : ''; isFloat = (isFloat != null) ? isFloat : false; - + var ui = this.editorUi; var graph = ui.editor.graph; - + min = (min != null) ? min : 1; max = (max != null) ? max : 999; - + var selState = null; var updating = false; - + var update = mxUtils.bind(this, function(evt) { var value = (isFloat) ? parseFloat(input.value) : parseInt(input.value); @@ -454,24 +454,24 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu // use integer and round all numbers to two decimal point value = mxUtils.mod(Math.round(value * 100), 36000) / 100; } - + value = Math.min(max, Math.max(min, (isNaN(value)) ? defaultValue : value)); - + if (graph.cellEditor.isContentEditing() && textEditFallback) { if (!updating) { updating = true; - + if (selState != null) { graph.cellEditor.restoreSelection(selState); selState = null; } - + textEditFallback(value); input.value = value + unit; - + // Restore focus and selection in input updating = false; } @@ -482,7 +482,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu { graph.stopEditing(true); } - + graph.getModel().beginUpdate(); try { @@ -498,7 +498,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu elt.removeAttribute('size'); }); } - + for (var i = 0; i < cells.length; i++) { if (graph.model.getChildCount(cells[i]) == 0) @@ -506,7 +506,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu graph.autoSizeCell(cells[i], false); } } - + ui.fireEvent(new mxEventObject('styleChanged', 'keys', [key], 'values', [value], 'cells', cells)); } @@ -515,7 +515,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu graph.getModel().endUpdate(); } } - + input.value = value + unit; mxEvent.consume(evt); }); @@ -531,7 +531,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu selState = graph.cellEditor.saveSelection(); } }); - + mxEvent.addListener(input, 'touchstart', function() { if (document.activeElement == graph.cellEditor.textarea) @@ -540,10 +540,10 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu } }); } - + mxEvent.addListener(input, 'change', update); mxEvent.addListener(input, 'blur', update); - + return update; }; @@ -555,7 +555,7 @@ BaseFormatPanel.prototype.createPanel = function() var div = document.createElement('div'); div.className = 'geFormatSection'; div.style.padding = '12px 0px 12px 14px'; - + return div; }; @@ -571,12 +571,12 @@ BaseFormatPanel.prototype.createTitle = function(title) div.style.width = '200px'; div.style.fontWeight = 'bold'; mxUtils.write(div, title); - + return div; }; /** - * + * */ BaseFormatPanel.prototype.addAction = function(div, name) { @@ -589,7 +589,7 @@ BaseFormatPanel.prototype.addAction = function(div, name) { action.funct(evt, evt); }); - + var short = (action.shortcut != null) ? ' (' + action.shortcut + ')' : ''; btn.setAttribute('title', action.label + short); btn.style.marginBottom = '2px'; @@ -602,7 +602,7 @@ BaseFormatPanel.prototype.addAction = function(div, name) }; /** - * + * */ BaseFormatPanel.prototype.addActions = function(div, names) { @@ -635,19 +635,19 @@ BaseFormatPanel.prototype.addActions = function(div, names) }; /** - * + * */ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, disableFocus, defaultValue, isFloat) { step = (step != null) ? step : 1; height = (height != null) ? height : 9; var bigStep = 10 * step; - + var stepper = document.createElement('div'); mxUtils.setPrefixedStyle(stepper.style, 'borderRadius', '3px'); stepper.style.border = '1px solid rgb(192, 192, 192)'; stepper.style.position = 'absolute'; - + var up = document.createElement('div'); up.style.borderBottom = '1px solid rgb(192, 192, 192)'; up.style.position = 'relative'; @@ -655,7 +655,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, up.style.width = '10px'; up.className = 'geBtnUp'; stepper.appendChild(up); - + var down = up.cloneNode(false); down.style.border = 'none'; down.style.height = height + 'px'; @@ -672,13 +672,13 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, { input.value = defaultValue || '2'; } - + var val = isFloat? parseFloat(input.value) : parseInt(input.value); - + if (!isNaN(val)) { input.value = val - (mxEvent.isShiftDown(evt) ? bigStep : step); - + if (update != null) { update(evt); @@ -687,7 +687,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, mxEvent.consume(evt); }); - + mxEvent.addGestureListeners(up, function(evt) { // Stops text selection on shift+click @@ -698,13 +698,13 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, { input.value = defaultValue || '0'; } - + var val = isFloat? parseFloat(input.value) : parseInt(input.value); - + if (!isNaN(val)) { input.value = val + (mxEvent.isShiftDown(evt) ? bigStep : step); - + if (update != null) { update(evt); @@ -713,14 +713,14 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, mxEvent.consume(evt); }); - + // Disables transfer of focus to DIV but also :active CSS // so it's only used for fontSize where the focus should // stay on the selected text, but not for any other input. if (disableFocus) { var currentSelection = null; - + mxEvent.addGestureListeners(stepper, function(evt) { @@ -740,7 +740,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, { // ignore } - + currentSelection = null; mxEvent.consume(evt); } @@ -755,7 +755,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, mxEvent.consume(evt); }); } - + return stepper; }; @@ -771,10 +771,10 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked div.style.overflow = 'hidden'; div.style.width = '200px'; div.style.height = '18px'; - + var cb = document.createElement('input'); cb.setAttribute('type', 'checkbox'); - cb.style.margin = '1px 6px 0px 0px'; + // cb.style.margin = '1px 6px 0px 0px'; cb.style.verticalAlign = 'top'; div.appendChild(cb); @@ -786,13 +786,13 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked var applying = false; var value = isCheckedFn(); - + var apply = function(newValue, evt) { if (!applying) { applying = true; - + if (newValue) { cb.setAttribute('checked', 'checked'); @@ -805,18 +805,18 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked cb.defaultChecked = false; cb.checked = false; } - + if (value != newValue) { value = newValue; - + // Checks if the color value needs to be updated in the model if (isCheckedFn() != value) { setCheckedFn(value, evt); } } - + applying = false; } }; @@ -827,24 +827,24 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked { // Toggles checkbox state for click on label var source = mxEvent.getSource(evt); - + if (source == div || source == span) { cb.checked = !cb.checked; } - + apply(cb.checked, evt); } }); - + apply(value); - + if (listener != null) { listener.install(apply); this.listeners.push(listener); } - + if (fn != null) { fn(div); @@ -857,11 +857,11 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked * The string 'null' means use null in values. */ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, enabledValue, disabledValue, fn, action, stopEditing, cells) -{ +{ var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - + enabledValue = (enabledValue != null) ? ((enabledValue == 'null') ? null : enabledValue) : 1; disabledValue = (disabledValue != null) ? ((disabledValue == 'null') ? null : disabledValue) : 0; @@ -876,7 +876,7 @@ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, { graph.stopEditing(); } - + if (action != null) { action.funct(); @@ -894,7 +894,7 @@ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, { fn(temp, value); } - + ui.fireEvent(new mxEventObject('styleChanged', 'keys', [key], 'values', [value], 'cells', temp)); } @@ -911,7 +911,7 @@ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, { apply(mxUtils.getValue(style, key, defaultValue) != disabledValue); }; - + graph.getModel().addListener(mxEvent.CHANGE, this.listener); }, destroy: function() @@ -933,15 +933,15 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol div.style.overflow = 'hidden'; div.style.width = '200px'; div.style.height = '18px'; - + var cb = document.createElement('input'); cb.setAttribute('type', 'checkbox'); - cb.style.margin = '1px 6px 0px 0px'; + // cb.style.margin = '1px 6px 0px 0px'; cb.style.verticalAlign = 'top'; - + if (!hideCheckbox) { - div.appendChild(cb); + div.appendChild(cb); } var span = document.createElement('span'); @@ -979,7 +979,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol var name = ColorDialog.prototype.colorNames[clr]; btn.setAttribute('title', (name != null) ? name + ' (' + title + ')' : title); } - + if (color != null && color != mxConstants.NONE) { cb.setAttribute('checked', 'checked'); @@ -992,7 +992,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol cb.defaultChecked = false; cb.checked = false; } - + btn.style.display = (cb.checked || hideCheckbox) ? '' : 'none'; if (callbackFn != null) @@ -1010,11 +1010,11 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol setColorFn(value == 'null' ? null : value, value); } } - + applying = false; } }; - + var clrInput = document.createElement('input'); clrInput.setAttribute('type', 'color'); clrInput.style.visibility = 'hidden'; @@ -1031,7 +1031,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol { color = defaultColorValue; } - + if (mxEvent.isShiftDown(evt) && !mxClient.IS_IE && !mxClient.IS_IE11) { clrInput.value = color; @@ -1052,7 +1052,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol mxEvent.consume(evt); })); - + btn.style.position = 'absolute'; btn.style.marginTop = '-3px'; btn.style.left = '178px'; @@ -1068,15 +1068,15 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol mxEvent.addListener(div, 'click', function(evt) { var source = mxEvent.getSource(evt); - + if (source == cb || source.nodeName != 'INPUT') - { + { // Toggles checkbox state for click on label if (source != cb) { cb.checked = !cb.checked; } - + // Overrides default value with current value to make it easier // to restore previous value if the checkbox is clicked twice if (!cb.checked && value != null && value != mxConstants.NONE && @@ -1084,41 +1084,41 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol { defaultColor = value; } - + apply((cb.checked) ? defaultColor : mxConstants.NONE); } }); - + apply(value, true); - + if (listener != null) { listener.install(apply); this.listeners.push(listener); } - + return div; }; /** - * + * */ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defaultColor, callbackFn, setStyleFn, defaultColorValue) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - + return this.createColorOption(label, function() { // Seems to be null sometimes, not sure why... var state = graph.view.getState(ui.getSelectionState().cells[0]); - + if (state != null) { return mxUtils.getValue(state.style, colorKey, null); } - + return null; }, function(color, realValue) { @@ -1132,7 +1132,7 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa { setStyleFn(color); } - + ui.fireEvent(new mxEventObject('styleChanged', 'keys', [colorKey], 'values', [color], 'cells', cells)); } @@ -1148,13 +1148,13 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa { // Seems to be null sometimes, not sure why... var state = graph.view.getState(ui.getSelectionState().cells[0]); - + if (state != null) { apply(mxUtils.getValue(state.style, colorKey, null), true); } }; - + graph.getModel().addListener(mxEvent.CHANGE, this.listener); }, destroy: function() @@ -1165,19 +1165,19 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa }; /** - * + * */ BaseFormatPanel.prototype.addArrow = function(elt, height) { height = (height != null) ? height : 10; - + var arrow = document.createElement('div'); arrow.style.display = 'inline-block'; arrow.style.paddingRight = '4px'; arrow.style.padding = '6px'; - + var m = (10 - height); - + if (m == 2) { arrow.style.paddingTop = 6 + 'px'; @@ -1190,7 +1190,7 @@ BaseFormatPanel.prototype.addArrow = function(elt, height) { arrow.style.marginTop = '-2px'; } - + arrow.style.height = height + 'px'; arrow.style.borderLeft = '1px solid #a0a0a0'; @@ -1205,9 +1205,9 @@ BaseFormatPanel.prototype.addArrow = function(elt, height) img.style.left = '1px'; img.style.top = (mxClient.IS_FF) ? '0px' : '-4px'; mxUtils.setOpacity(arrow, 70); - + var symbol = elt.getElementsByTagName('div')[0]; - + if (symbol != null) { symbol.style.paddingRight = '6px'; @@ -1224,19 +1224,19 @@ BaseFormatPanel.prototype.addArrow = function(elt, height) elt.style.width = 'auto'; elt.className += ' geColorBtn'; mxUtils.setPrefixedStyle(elt.style, 'borderRadius', '3px'); - + elt.appendChild(arrow); - + return symbol; }; /** - * + * */ BaseFormatPanel.prototype.addUnitInput = function(container, unit, right, width, update, step, marginTop, disableFocus, isFloat) { marginTop = (marginTop != null) ? marginTop : 0; - + var input = document.createElement('input'); input.style.position = 'absolute'; input.style.textAlign = 'right'; @@ -1249,7 +1249,7 @@ BaseFormatPanel.prototype.addUnitInput = function(container, unit, right, width, input.style.boxSizing = 'border-box'; container.appendChild(input); - + var stepper = this.createStepper(input, update, step, null, disableFocus, null, isFloat); stepper.style.marginTop = (marginTop - 2) + 'px'; stepper.style.left = (228 - right) + 'px'; @@ -1259,12 +1259,12 @@ BaseFormatPanel.prototype.addUnitInput = function(container, unit, right, width, }; /** - * + * */ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, handler, init) { width = (width != null) ? width : 52; - + var ui = this.editorUi; var graph = ui.editor.graph; var div = this.createPanel(); @@ -1272,7 +1272,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han div.style.paddingBottom = '10px'; mxUtils.write(div, label); div.style.fontWeight = 'bold'; - + var update = mxUtils.bind(this, function(evt) { if (handler != null) @@ -1284,7 +1284,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han var value = parseInt(input.value); value = Math.min(100, Math.max(0, (isNaN(value)) ? 100 : value)); var state = graph.view.getState(ui.getSelectionState().cells[0]); - + if (state != null && value != mxUtils.getValue(state.style, key, 100)) { // Removes entry in style (assumes 100 is default for relative values) @@ -1292,16 +1292,16 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han { value = null; } - + var cells = ui.getSelectionState().cells; graph.setCellStyles(key, value, cells); this.editorUi.fireEvent(new mxEventObject('styleChanged', 'keys', [key], 'values', [value], 'cells', cells)); } - + input.value = ((value != null) ? value : '100') + ' %'; } - + mxEvent.consume(evt); }); @@ -1318,7 +1318,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han input.value = (isNaN(tmp)) ? '' : tmp + ' %'; } }); - + mxEvent.addListener(input, 'keydown', function(e) { if (e.keyCode == 13) @@ -1333,7 +1333,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han mxEvent.consume(e); } }); - + graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); @@ -1341,7 +1341,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han mxEvent.addListener(input, 'blur', update); mxEvent.addListener(input, 'change', update); - + if (init != null) { init(input); @@ -1351,12 +1351,12 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han }; /** - * + * */ BaseFormatPanel.prototype.addLabel = function(div, title, right, width) { width = (width != null) ? width : 61; - + var label = document.createElement('div'); mxUtils.write(label, title); label.style.position = 'absolute'; @@ -1368,7 +1368,7 @@ BaseFormatPanel.prototype.addLabel = function(div, title, right, width) }; /** - * + * */ BaseFormatPanel.prototype.addKeyHandler = function(input, listener) { @@ -1383,7 +1383,7 @@ BaseFormatPanel.prototype.addKeyHandler = function(input, listener) { if (listener != null) { - listener(null, null, true); + listener(null, null, true); } this.editorUi.editor.graph.container.focus(); @@ -1393,7 +1393,7 @@ BaseFormatPanel.prototype.addKeyHandler = function(input, listener) }; /** - * + * */ BaseFormatPanel.prototype.styleButtons = function(elts) { @@ -1424,7 +1424,7 @@ BaseFormatPanel.prototype.destroy = function() { this.listeners[i].destroy(); } - + this.listeners = null; } }; @@ -1450,23 +1450,23 @@ ArrangePanel.prototype.init = function() if (ss.cells.length > 0) { this.container.appendChild(this.addLayerOps(this.createPanel())); - + // Special case that adds two panels this.addGeometry(this.container); this.addEdgeGeometry(this.container); - + if (!ss.containsLabel || ss.edges.length == 0) { this.container.appendChild(this.addAngle(this.createPanel())); } - + if (!ss.containsLabel) { this.container.appendChild(this.addFlip(this.createPanel())); } this.container.appendChild(this.addAlign(this.createPanel())); - + if (ss.vertices.length > 1 && !ss.cell && !ss.row) { this.container.appendChild(this.addDistribute(this.createPanel())); @@ -1475,7 +1475,7 @@ ArrangePanel.prototype.init = function() this.container.appendChild(this.addTable(this.createPanel())); this.container.appendChild(this.addGroupOps(this.createPanel())); } - + if (ss.containsLabel) { // Adds functions from hidden style format panel @@ -1486,13 +1486,13 @@ ArrangePanel.prototype.init = function() span.style.padding = '10px 0 0 14px'; mxUtils.write(span, mxResources.get('style')); this.container.appendChild(span); - + new StyleFormatPanel(this.format, this.editorUi, this.container); } }; /** - * + * */ ArrangePanel.prototype.addTable = function(div) { @@ -1509,7 +1509,7 @@ ArrangePanel.prototype.addTable = function(div) span.style.fontWeight = 'bold'; mxUtils.write(span, mxResources.get('table')); div.appendChild(span); - + var panel = document.createElement('div'); panel.style.position = 'relative'; panel.style.paddingLeft = '0px'; @@ -1703,41 +1703,41 @@ ArrangePanel.prototype.addTable = function(div) { div.style.display = 'none'; } - + return div; }; /** - * + * */ ArrangePanel.prototype.addLayerOps = function(div) { this.addActions(div, ['toFront', 'toBack']); this.addActions(div, ['bringForward', 'sendBackward']); - + return div; }; /** - * + * */ ArrangePanel.prototype.addGroupOps = function(div) { var ui = this.editorUi; var graph = ui.editor.graph; var ss = ui.getSelectionState(); - + div.style.paddingTop = '8px'; div.style.paddingBottom = '6px'; var count = 0; - + if (!ss.cell && !ss.row) { count += this.addActions(div, ['group', 'ungroup', 'copySize', 'pasteSize']) + this.addActions(div, ['removeFromGroup']); } - + var copyBtn = null; if (ss.cells.length == 1 && ss.cells[0].value != null && !isNaN(ss.cells[0].value.nodeType)) @@ -1761,7 +1761,7 @@ ArrangePanel.prototype.addGroupOps = function(div) ui.actions.get('copyData').funct(evt); } }); - + copyBtn.setAttribute('title', mxResources.get('copyData') + ' (' + this.editorUi.actions.get('copyData').shortcut + ')' + ' Shift+Click to Extract Data'); @@ -1772,14 +1772,14 @@ ArrangePanel.prototype.addGroupOps = function(div) } var pasteBtn = null; - + if (ui.copiedValue != null && ss.cells.length > 0) { pasteBtn = mxUtils.button(mxResources.get('pasteData'), function(evt) { ui.actions.get('pasteData').funct(evt); }); - + pasteBtn.setAttribute('title', mxResources.get('pasteData') + ' (' + this.editorUi.actions.get('pasteData').shortcut + ')'); pasteBtn.style.marginBottom = '2px'; @@ -1801,7 +1801,7 @@ ArrangePanel.prototype.addGroupOps = function(div) { mxUtils.br(div); } - + var clearWaypoints = this.addAction(div, 'clearWaypoints'); if (clearWaypoints != null) @@ -1817,17 +1817,17 @@ ArrangePanel.prototype.addGroupOps = function(div) { count += this.addActions(div, ['editData', 'editLink']); } - + if (count == 0) { div.style.display = 'none'; } - + return div; }; /** - * + * */ ArrangePanel.prototype.addAlign = function(div) { @@ -1836,7 +1836,7 @@ ArrangePanel.prototype.addAlign = function(div) div.style.paddingTop = '6px'; div.style.paddingBottom = '8px'; div.appendChild(this.createTitle(mxResources.get('align'))); - + var stylePanel = document.createElement('div'); stylePanel.style.position = 'relative'; stylePanel.style.whiteSpace = 'nowrap'; @@ -1861,19 +1861,19 @@ ArrangePanel.prototype.addAlign = function(div) function() { graph.alignCells(mxConstants.ALIGN_MIDDLE); }, stylePanel); var bottom = this.editorUi.toolbar.addButton('geSprite-alignbottom', mxResources.get('bottom'), function() { graph.alignCells(mxConstants.ALIGN_BOTTOM); }, stylePanel); - + this.styleButtons([left, center, right, top, middle, bottom]); right.style.marginRight = '10px'; } div.appendChild(stylePanel); this.addActions(div, ['snapToGrid']); - + return div; }; /** - * + * */ ArrangePanel.prototype.addFlip = function(div) { @@ -1890,31 +1890,31 @@ ArrangePanel.prototype.addFlip = function(div) span.style.fontWeight = 'bold'; mxUtils.write(span, mxResources.get('flip')); div.appendChild(span); - + var btn = mxUtils.button(mxResources.get('horizontal'), function(evt) { graph.flipCells(ss.cells, true); }) - + btn.setAttribute('title', mxResources.get('horizontal')); btn.style.width = '104px'; btn.style.marginRight = '2px'; div.appendChild(btn); - + var btn = mxUtils.button(mxResources.get('vertical'), function(evt) { graph.flipCells(ss.cells, false); }) - + btn.setAttribute('title', mxResources.get('vertical')); btn.style.width = '104px'; div.appendChild(btn); - + return div; }; /** - * + * */ ArrangePanel.prototype.addDistribute = function(div) { @@ -1923,33 +1923,33 @@ ArrangePanel.prototype.addDistribute = function(div) var graph = editor.graph; div.style.paddingTop = '6px'; div.style.paddingBottom = '12px'; - + div.appendChild(this.createTitle(mxResources.get('distribute'))); var btn = mxUtils.button(mxResources.get('horizontal'), function(evt) { graph.distributeCells(true); }) - + btn.setAttribute('title', mxResources.get('horizontal')); btn.style.width = '104px'; btn.style.marginRight = '2px'; div.appendChild(btn); - + var btn = mxUtils.button(mxResources.get('vertical'), function(evt) { graph.distributeCells(false); }) - + btn.setAttribute('title', mxResources.get('vertical')); btn.style.width = '104px'; div.appendChild(btn); - + return div; }; /** - * + * */ ArrangePanel.prototype.addAngle = function(div) { @@ -1959,27 +1959,27 @@ ArrangePanel.prototype.addAngle = function(div) var ss = ui.getSelectionState(); div.style.paddingBottom = '8px'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '70px'; span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; - + var input = null; var update = null; var btn = null; - + if (ss.rotatable && !ss.table && !ss.row && !ss.cell) { mxUtils.write(span, mxResources.get('angle')); div.appendChild(span); - + input = this.addUnitInput(div, '°', 16, 52, function() { update.apply(this, arguments); }); - + mxUtils.br(div); div.style.paddingTop = '10px'; } @@ -1991,7 +1991,7 @@ ArrangePanel.prototype.addAngle = function(div) if (!ss.containsLabel) { var label = mxResources.get('reverse'); - + if (ss.vertices.length > 0 && ss.edges.length > 0) { label = mxResources.get('turn') + ' / ' + label; @@ -2005,17 +2005,17 @@ ArrangePanel.prototype.addAngle = function(div) { ui.actions.get('turn').funct(evt); }) - + btn.setAttribute('title', label + ' (' + this.editorUi.actions.get('turn').shortcut + ')'); btn.style.width = '210px'; div.appendChild(btn); - + if (input != null) { btn.style.marginTop = '8px'; } } - + if (input != null) { var listener = mxUtils.bind(this, function(sender, evt, force) @@ -2027,10 +2027,10 @@ ArrangePanel.prototype.addAngle = function(div) input.value = (isNaN(tmp)) ? '' : tmp + '°'; } }); - + update = this.installInputHandler(input, mxConstants.STYLE_ROTATION, 0, 0, 360, '°', null, true); this.addKeyHandler(input, listener); - + graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); @@ -2042,7 +2042,7 @@ ArrangePanel.prototype.addAngle = function(div) BaseFormatPanel.prototype.getUnit = function() { var unit = this.editorUi.editor.graph.view.unit; - + switch(unit) { case mxConstants.POINTS: @@ -2064,7 +2064,7 @@ BaseFormatPanel.prototype.inUnit = function(pixels) BaseFormatPanel.prototype.fromUnit = function(value) { var unit = this.editorUi.editor.graph.view.unit; - + switch(unit) { case mxConstants.POINTS: @@ -2086,7 +2086,7 @@ BaseFormatPanel.prototype.isFloatUnit = function() BaseFormatPanel.prototype.getUnitStep = function() { var unit = this.editorUi.editor.graph.view.unit; - + switch(unit) { case mxConstants.POINTS: @@ -2101,7 +2101,7 @@ BaseFormatPanel.prototype.getUnitStep = function() }; /** - * + * */ ArrangePanel.prototype.addGeometry = function(container) { @@ -2113,7 +2113,7 @@ ArrangePanel.prototype.addGeometry = function(container) var div = this.createPanel(); div.style.paddingBottom = '8px'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '50px'; @@ -2131,7 +2131,7 @@ ArrangePanel.prototype.addGeometry = function(container) { heightUpdate.apply(this, arguments); }, this.getUnitStep(), null, null, this.isFloatUnit()); - + var autosizeBtn = document.createElement('div'); autosizeBtn.className = 'geSprite geSprite-fit'; autosizeBtn.setAttribute('title', mxResources.get('autosize') + ' (' + this.editorUi.actions.get('autosize').shortcut + ')'); @@ -2141,12 +2141,12 @@ ArrangePanel.prototype.addGeometry = function(container) autosizeBtn.style.border = '0px'; autosizeBtn.style.left = '42px'; mxUtils.setOpacity(autosizeBtn, 50); - + mxEvent.addListener(autosizeBtn, 'mouseenter', function() { mxUtils.setOpacity(autosizeBtn, 100); }); - + mxEvent.addListener(autosizeBtn, 'mouseleave', function() { mxUtils.setOpacity(autosizeBtn, 50); @@ -2156,9 +2156,9 @@ ArrangePanel.prototype.addGeometry = function(container) { ui.actions.get('autosize').funct(); }); - + div.appendChild(autosizeBtn); - + if (rect.row) { width.style.visibility = 'hidden'; @@ -2168,7 +2168,7 @@ ArrangePanel.prototype.addGeometry = function(container) { this.addLabel(div, mxResources.get('width'), 87); } - + this.addLabel(div, mxResources.get('height'), 16); mxUtils.br(div); @@ -2181,7 +2181,7 @@ ArrangePanel.prototype.addGeometry = function(container) mxConstants.STYLE_ASPECT, null, 'fixed', 'null'); opt.style.width = '210px'; wrapper.appendChild(opt); - + if (!rect.cell && !rect.row) { div.appendChild(wrapper); @@ -2190,29 +2190,29 @@ ArrangePanel.prototype.addGeometry = function(container) { autosizeBtn.style.visibility = 'hidden'; } - + var constrainCheckbox = opt.getElementsByTagName('input')[0]; this.addKeyHandler(width, listener); this.addKeyHandler(height, listener); - + widthUpdate = this.addGeometryHandler(width, function(geo, value, cell) { if (graph.isTableCell(cell)) { graph.setTableColumnWidth(cell, value - geo.width, true); - + // Blocks processing in caller return true; } else if (geo.width > 0) { var value = Math.max(1, panel.fromUnit(value)); - + if (constrainCheckbox.checked) { geo.height = Math.round((geo.height * value * 100) / geo.width) / 100; } - + geo.width = value; } }); @@ -2222,35 +2222,35 @@ ArrangePanel.prototype.addGeometry = function(container) { cell = graph.model.getParent(cell); } - + if (graph.isTableRow(cell)) { graph.setTableRowHeight(cell, value - geo.height); - + // Blocks processing in caller return true; } else if (geo.height > 0) { var value = Math.max(1, panel.fromUnit(value)); - + if (constrainCheckbox.checked) { geo.width = Math.round((geo.width * value * 100) / geo.height) / 100; } - + geo.height = value; } }); - + if (rect.resizable || rect.row || rect.cell) { container.appendChild(div); } - + var div2 = this.createPanel(); div2.style.paddingBottom = '30px'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '70px'; @@ -2258,7 +2258,7 @@ ArrangePanel.prototype.addGeometry = function(container) span.style.fontWeight = 'bold'; mxUtils.write(span, mxResources.get('position')); div2.appendChild(span); - + var left = this.addUnitInput(div2, this.getUnit(), 87, 52, function() { leftUpdate.apply(this, arguments); @@ -2272,7 +2272,7 @@ ArrangePanel.prototype.addGeometry = function(container) this.addLabel(div2, mxResources.get('left'), 87); this.addLabel(div2, mxResources.get('top'), 16); - + var listener = mxUtils.bind(this, function(sender, evt, force) { rect = ui.getSelectionState(); @@ -2281,12 +2281,12 @@ ArrangePanel.prototype.addGeometry = function(container) rect.width != null && rect.height != null) { div.style.display = ''; - + if (force || document.activeElement != width) { width.value = this.inUnit(rect.width) + ((rect.width == '') ? '' : ' ' + this.getUnit()); } - + if (force || document.activeElement != height) { height.value = this.inUnit(rect.height) + ((rect.height == '') ? '' : ' ' + this.getUnit()); @@ -2296,17 +2296,17 @@ ArrangePanel.prototype.addGeometry = function(container) { div.style.display = 'none'; } - + if (rect.vertices.length == graph.getSelectionCount() && rect.x != null && rect.y != null) { div2.style.display = ''; - + if (force || document.activeElement != left) { left.value = this.inUnit(rect.x) + ((rect.x == '') ? '' : ' ' + this.getUnit()); } - + if (force || document.activeElement != top) { top.value = this.inUnit(rect.y) + ((rect.y == '') ? '' : ' ' + this.getUnit()); @@ -2324,11 +2324,11 @@ ArrangePanel.prototype.addGeometry = function(container) model.addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { model.removeListener(listener); }}); listener(); - + leftUpdate = this.addGeometryHandler(left, function(geo, value) { value = panel.fromUnit(value); - + if (geo.relative) { geo.offset.x = value; @@ -2341,7 +2341,7 @@ ArrangePanel.prototype.addGeometry = function(container) topUpdate = this.addGeometryHandler(top, function(geo, value) { value = panel.fromUnit(value); - + if (geo.relative) { geo.offset.y = value; @@ -2358,7 +2358,7 @@ ArrangePanel.prototype.addGeometry = function(container) model.isEdge(model.getParent(rect.vertices[0]))) { var geo = graph.getCellGeometry(rect.vertices[0]); - + if (geo != null && geo.relative) { var btn = mxUtils.button(mxResources.get('center'), mxUtils.bind(this, function(evt) @@ -2377,7 +2377,7 @@ ArrangePanel.prototype.addGeometry = function(container) model.endUpdate(); } })); - + btn.setAttribute('title', mxResources.get('center')); btn.style.width = '210px'; btn.style.position = 'absolute'; @@ -2391,7 +2391,7 @@ ArrangePanel.prototype.addGeometry = function(container) }; /** - * + * */ ArrangePanel.prototype.addGeometryHandler = function(input, fn) { @@ -2399,14 +2399,14 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) var graph = ui.editor.graph; var initialValue = null; var panel = this; - + function update(evt) { if (input.value != '') { var value = parseFloat(input.value); - if (isNaN(value)) + if (isNaN(value)) { input.value = initialValue + ' ' + panel.getUnit(); } @@ -2416,26 +2416,26 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) try { var cells = ui.getSelectionState().cells; - + for (var i = 0; i < cells.length; i++) { if (graph.getModel().isVertex(cells[i])) { var geo = graph.getCellGeometry(cells[i]); - + if (geo != null) { geo = geo.clone(); - + if (!fn(geo, value, cells[i])) { var state = graph.view.getState(cells[i]); - + if (state != null && graph.isRecursiveVertexResize(state)) { graph.resizeChildCells(cells[i], geo); } - + graph.getModel().setGeometry(cells[i], geo); graph.constrainChildCells(cells[i]); } @@ -2447,12 +2447,12 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) { graph.getModel().endUpdate(); } - + initialValue = value; input.value = value + ' ' + panel.getUnit(); } } - + mxEvent.consume(evt); }; @@ -2462,7 +2462,7 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) { initialValue = input.value; }); - + return update; }; @@ -2529,7 +2529,7 @@ ArrangePanel.prototype.addEdgeGeometryHandler = function(input, fn) }; /** - * + * */ ArrangePanel.prototype.addEdgeGeometry = function(container) { @@ -2537,7 +2537,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) var graph = ui.editor.graph; var rect = ui.getSelectionState(); var div = this.createPanel(); - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '70px'; @@ -2554,13 +2554,13 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) mxUtils.br(div); this.addKeyHandler(width, listener); - + var widthUpdate = mxUtils.bind(this, function(evt) { // Maximum stroke width is 999 var value = parseInt(width.value); value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value)); - + if (value != mxUtils.getValue(rect.style, 'width', mxCellRenderer.defaultShapes['flexArrow'].prototype.defaultWidth)) { var cells = ui.getSelectionState().cells; @@ -2634,11 +2634,11 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) { rect = ui.getSelectionState(); var cell = rect.cells[0]; - + if (rect.style.shape == 'link' || rect.style.shape == 'flexArrow') { div.style.display = ''; - + if (force || document.activeElement != width) { var value = mxUtils.getValue(rect.style, 'width', @@ -2654,7 +2654,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) if (rect.cells.length == 1 && graph.model.isEdge(cell)) { var geo = graph.model.getGeometry(cell); - + if (geo.sourcePoint != null && graph.model.getTerminal(cell, true) == null) { xs.value = geo.sourcePoint.x; @@ -2664,7 +2664,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) { divs.style.display = 'none'; } - + if (geo.targetPoint != null && graph.model.getTerminal(cell, false) == null) { xt.value = geo.targetPoint.x; @@ -2736,7 +2736,7 @@ TextFormatPanel.prototype.addFont = function(container) var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); - + var title = this.createTitle(mxResources.get('font')); title.style.paddingLeft = '14px'; title.style.paddingTop = '10px'; @@ -2750,11 +2750,11 @@ TextFormatPanel.prototype.addFont = function(container) stylePanel.style.marginLeft = '-2px'; stylePanel.style.borderWidth = '0px'; stylePanel.className = 'geToolbarContainer'; - + if (graph.cellEditor.isContentEditing()) { var cssPanel = stylePanel.cloneNode(); - + var cssMenu = this.editorUi.toolbar.addMenu(mxResources.get('style'), mxResources.get('style'), true, 'formatBlock', cssPanel, null, true); cssMenu.style.color = 'rgb(112, 112, 112)'; @@ -2764,49 +2764,49 @@ TextFormatPanel.prototype.addFont = function(container) this.addArrow(cssMenu); cssMenu.style.width = '200px'; cssMenu.style.height = '15px'; - + var arrow = cssMenu.getElementsByTagName('div')[0]; arrow.style.cssFloat = 'right'; container.appendChild(cssPanel); } - + container.appendChild(stylePanel); - + var colorPanel = this.createPanel(); colorPanel.style.marginTop = '8px'; colorPanel.style.borderTop = '1px solid #c0c0c0'; colorPanel.style.paddingTop = '6px'; colorPanel.style.paddingBottom = '6px'; - + var fontMenu = this.editorUi.toolbar.addMenu('Helvetica', mxResources.get('fontFamily'), true, 'fontFamily', stylePanel, null, true); fontMenu.style.color = 'rgb(112, 112, 112)'; fontMenu.style.whiteSpace = 'nowrap'; fontMenu.style.overflow = 'hidden'; fontMenu.style.margin = '0px'; - + this.addArrow(fontMenu); fontMenu.style.width = '200px'; fontMenu.style.height = '15px'; - + var stylePanel2 = stylePanel.cloneNode(false); stylePanel2.style.marginLeft = '-3px'; var fontStyleItems = this.editorUi.toolbar.addItems(['bold', 'italic', 'underline'], stylePanel2, true); fontStyleItems[0].setAttribute('title', mxResources.get('bold') + ' (' + this.editorUi.actions.get('bold').shortcut + ')'); fontStyleItems[1].setAttribute('title', mxResources.get('italic') + ' (' + this.editorUi.actions.get('italic').shortcut + ')'); fontStyleItems[2].setAttribute('title', mxResources.get('underline') + ' (' + this.editorUi.actions.get('underline').shortcut + ')'); - + var verticalItem = this.editorUi.toolbar.addItems(['vertical'], stylePanel2, true)[0]; - + container.appendChild(stylePanel2); this.styleButtons(fontStyleItems); this.styleButtons([verticalItem]); - + var stylePanel3 = stylePanel.cloneNode(false); stylePanel3.style.marginLeft = '-3px'; stylePanel3.style.paddingBottom = '0px'; - + // Helper function to return a wrapper function does not pass any arguments var callFn = function(fn) { @@ -2815,7 +2815,7 @@ TextFormatPanel.prototype.addFont = function(container) return fn(); }; }; - + var left = this.editorUi.toolbar.addButton('geSprite-left', mxResources.get('left'), (graph.cellEditor.isContentEditing()) ? function(evt) @@ -2848,7 +2848,7 @@ TextFormatPanel.prototype.addFont = function(container) } : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT])), stylePanel3); this.styleButtons([left, center, right]); - + // Quick hack for strikethrough // TODO: Add translations and toggle state if (graph.cellEditor.isContentEditing()) @@ -2866,7 +2866,7 @@ TextFormatPanel.prototype.addFont = function(container) this.styleButtons([strike]); } - + var top = this.editorUi.toolbar.addButton('geSprite-top', mxResources.get('top'), callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP])), stylePanel3); @@ -2876,22 +2876,22 @@ TextFormatPanel.prototype.addFont = function(container) var bottom = this.editorUi.toolbar.addButton('geSprite-bottom', mxResources.get('bottom'), callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM])), stylePanel3); - + this.styleButtons([top, middle, bottom]); - + container.appendChild(stylePanel3); - + // Hack for updating UI state below based on current text selection // currentTable is the current selected DOM table updated below var sub, sup, full, tableWrapper, currentTable, tableCell, tableRow; - + if (graph.cellEditor.isContentEditing()) { top.style.display = 'none'; middle.style.display = 'none'; bottom.style.display = 'none'; verticalItem.style.display = 'none'; - + full = this.editorUi.toolbar.addButton('geSprite-justifyfull', mxResources.get('block'), function() { @@ -2916,7 +2916,7 @@ TextFormatPanel.prototype.addFont = function(container) document.execCommand('superscript', false, null); }, stylePanel3)]); sub.style.marginLeft = '10px'; - + var tmp = stylePanel3.cloneNode(false); tmp.style.paddingTop = '4px'; var btns = [this.editorUi.toolbar.addButton('geSprite-orderedlist', mxResources.get('numberedList'), @@ -2951,7 +2951,7 @@ TextFormatPanel.prototype.addFont = function(container) }, tmp)]; this.styleButtons(btns); btns[btns.length - 2].style.marginLeft = '10px'; - + container.appendChild(tmp); } else @@ -2959,16 +2959,16 @@ TextFormatPanel.prototype.addFont = function(container) fontStyleItems[2].style.marginRight = '12px'; right.style.marginRight = '12px'; } - + // Label position var stylePanel4 = stylePanel.cloneNode(false); stylePanel4.style.marginLeft = '0px'; stylePanel4.style.paddingTop = '8px'; stylePanel4.style.paddingBottom = '4px'; stylePanel4.style.fontWeight = 'normal'; - + mxUtils.write(stylePanel4, mxResources.get('position')); - + // Adds label position options var positionSelect = document.createElement('select'); positionSelect.style.position = 'absolute'; @@ -2977,7 +2977,7 @@ TextFormatPanel.prototype.addFont = function(container) positionSelect.style.border = '1px solid rgb(160, 160, 160)'; positionSelect.style.borderRadius = '4px'; positionSelect.style.marginTop = '-2px'; - + var directions = ['topLeft', 'top', 'topRight', 'left', 'center', 'right', 'bottomLeft', 'bottom', 'bottomRight']; var lset = {'topLeft': [mxConstants.ALIGN_LEFT, mxConstants.ALIGN_TOP, mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_BOTTOM], 'top': [mxConstants.ALIGN_CENTER, mxConstants.ALIGN_TOP, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_BOTTOM], @@ -2998,7 +2998,7 @@ TextFormatPanel.prototype.addFont = function(container) } stylePanel4.appendChild(positionSelect); - + // Writing direction var stylePanel5 = stylePanel.cloneNode(false); stylePanel5.style.marginLeft = '0px'; @@ -3007,7 +3007,7 @@ TextFormatPanel.prototype.addFont = function(container) stylePanel5.style.fontWeight = 'normal'; mxUtils.write(stylePanel5, mxResources.get('writingDirection')); - + // Adds writing direction options // LATER: Handle reselect of same option in all selects (change event // is not fired for same option so have opened state on click) and @@ -3036,18 +3036,18 @@ TextFormatPanel.prototype.addFont = function(container) } stylePanel5.appendChild(dirSelect); - + if (!graph.isEditing()) { container.appendChild(stylePanel4); - + mxEvent.addListener(positionSelect, 'change', function(evt) { graph.getModel().beginUpdate(); try { var vals = lset[positionSelect.value]; - + if (vals != null) { graph.setCellStyles(mxConstants.STYLE_LABEL_POSITION, vals[0], ss.cells); @@ -3060,14 +3060,14 @@ TextFormatPanel.prototype.addFont = function(container) { graph.getModel().endUpdate(); } - + mxEvent.consume(evt); }); // LATER: Update dir in text editor while editing and update style with label // NOTE: The tricky part is handling and passing on the auto value container.appendChild(stylePanel5); - + mxEvent.addListener(dirSelect, 'change', function(evt) { graph.setCellStyles(mxConstants.STYLE_TEXT_DIRECTION, dirSet[dirSelect.value], ss.cells); @@ -3087,7 +3087,7 @@ TextFormatPanel.prototype.addFont = function(container) input.style.height = '23px'; input.style.boxSizing = 'border-box'; stylePanel2.appendChild(input); - + // Workaround for font size 4 if no text is selected is update font size below // after first character was entered (as the font element is lazy created) var pendingFontSize = null; @@ -3117,7 +3117,7 @@ TextFormatPanel.prototype.addFont = function(container) else { var css = mxUtils.getCurrentStyle(elt); - + if (css.fontSize != fontSize + 'px') { if (mxUtils.getCurrentStyle(elt.parentNode).fontSize != fontSize + 'px') @@ -3136,7 +3136,7 @@ TextFormatPanel.prototype.addFont = function(container) 'keys', [mxConstants.STYLE_FONTSIZE], 'values', [fontSize], 'cells', ss.cells)); }; - + // Wraps text node or mixed selection with leading text in a font element if (container == graph.cellEditor.textarea || container.nodeType != mxConstants.NODETYPE_ELEMENT) @@ -3148,12 +3148,12 @@ TextFormatPanel.prototype.addFont = function(container) { container = container.parentNode; } - + if (container != null && container.nodeType == mxConstants.NODETYPE_ELEMENT) { var elts = container.getElementsByTagName('*'); updateSize(container); - + for (var i = 0; i < elts.length; i++) { updateSize(elts[i]); @@ -3166,7 +3166,7 @@ TextFormatPanel.prototype.addFont = function(container) { // Checks selection var par = null; - + if (document.selection) { par = document.selection.createRange().parentElement(); @@ -3174,13 +3174,13 @@ TextFormatPanel.prototype.addFont = function(container) else { var selection = window.getSelection(); - + if (selection.rangeCount > 0) { par = selection.getRangeAt(0).commonAncestorContainer; } } - + // Node.contains does not work for text nodes in IE11 function isOrContains(container, node) { @@ -3190,28 +3190,28 @@ TextFormatPanel.prototype.addFont = function(container) { return true; } - + node = node.parentNode; } - + return false; }; - + if (par != null && isOrContains(graph.cellEditor.textarea, par)) { pendingFontSize = fontSize; - + // Workaround for can't set font size in px is to change font size afterwards document.execCommand('fontSize', false, '4'); var elts = graph.cellEditor.textarea.getElementsByTagName('font'); - + for (var i = 0; i < elts.length; i++) { if (elts[i].getAttribute('size') == '4') { elts[i].removeAttribute('size'); elts[i].style.fontSize = pendingFontSize + 'px'; - + // Overrides fontSize in input with the one just assigned as a workaround // for potential fontSize values of parent elements that don't match window.setTimeout(function() @@ -3219,30 +3219,30 @@ TextFormatPanel.prototype.addFont = function(container) input.value = pendingFontSize + ' pt'; pendingFontSize = null; }, 0); - + break; } } } } }, true); - + var stepper = this.createStepper(input, inputUpdate, 1, 10, true, Menus.prototype.defaultFontSize); stepper.style.display = input.style.display; stepper.style.marginTop = '4px'; stepper.style.left = '214px'; - + stylePanel2.appendChild(stepper); - + var arrow = fontMenu.getElementsByTagName('div')[0]; arrow.style.cssFloat = 'right'; - + var bgColorApply = null; var currentBgColor = graph.shapeBackgroundColor; - + var fontColorApply = null; var currentFontColor = graph.shapeForegroundColor; - + var bgPanel = (graph.cellEditor.isContentEditing()) ? this.createColorOption(mxResources.get('backgroundColor'), function() { return currentBgColor; @@ -3270,7 +3270,7 @@ TextFormatPanel.prototype.addFont = function(container) mxConstants.STYLE_LABEL_BORDERCOLOR, 'default', null, null, graph.shapeForegroundColor); borderPanel.style.fontWeight = 'bold'; - + var defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); @@ -3360,7 +3360,7 @@ TextFormatPanel.prototype.addFont = function(container) { bgPanel.style.display = ''; } - + borderPanel.style.display = bgPanel.style.display; }, function(color) { @@ -3372,7 +3372,7 @@ TextFormatPanel.prototype.addFont = function(container) { graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, ss.cells); } - + graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, color, ss.cells); graph.updateLabelElements(ss.cells, function(elt) @@ -3382,51 +3382,51 @@ TextFormatPanel.prototype.addFont = function(container) }); }, graph.shapeForegroundColor); panel.style.fontWeight = 'bold'; - + colorPanel.appendChild(panel); colorPanel.appendChild(bgPanel); - + if (!graph.cellEditor.isContentEditing()) { colorPanel.appendChild(borderPanel); } - + container.appendChild(colorPanel); var extraPanel = this.createPanel(); extraPanel.style.paddingTop = '2px'; extraPanel.style.paddingBottom = '4px'; - + var wwCells = graph.filterSelectionCells(mxUtils.bind(this, function(cell) { var state = graph.view.getState(cell); - + return state == null || graph.isAutoSizeState(state) || graph.getModel().isEdge(cell) || (!graph.isTableRow(cell) && !graph.isTableCell(cell) && !graph.isCellResizable(cell)); })); - + var wwOpt = this.createCellOption(mxResources.get('wordWrap'), mxConstants.STYLE_WHITE_SPACE, null, 'wrap', 'null', null, null, true, wwCells); wwOpt.style.fontWeight = 'bold'; - + // Word wrap in edge labels only supported via labelWidth style if (wwCells.length > 0) { extraPanel.appendChild(wwOpt); } - + // Delegates switch of style to formattedText action as it also convertes newlines var htmlOpt = this.createCellOption(mxResources.get('formattedText'), 'html', 0, null, null, null, ui.actions.get('formattedText')); htmlOpt.style.fontWeight = 'bold'; extraPanel.appendChild(htmlOpt); - + var spacingPanel = this.createPanel(); spacingPanel.style.paddingTop = '10px'; spacingPanel.style.paddingBottom = '28px'; spacingPanel.style.fontWeight = 'normal'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '70px'; @@ -3468,7 +3468,7 @@ TextFormatPanel.prototype.addFont = function(container) this.addLabel(spacingPanel, mxResources.get('left'), 158); this.addLabel(spacingPanel, mxResources.get('bottom'), 87); this.addLabel(spacingPanel, mxResources.get('right'), 16); - + if (!graph.cellEditor.isContentEditing()) { container.appendChild(extraPanel); @@ -3479,7 +3479,7 @@ TextFormatPanel.prototype.addFont = function(container) { var selState = null; var lineHeightInput = null; - + container.appendChild(this.createRelativeOption(mxResources.get('lineheight'), null, null, function(input) { var value = (input.value == '') ? 120 : parseInt(input.value); @@ -3490,37 +3490,37 @@ TextFormatPanel.prototype.addFont = function(container) graph.cellEditor.restoreSelection(selState); selState = null; } - + var selectedElement = graph.getSelectedElement(); var node = selectedElement; - + while (node != null && node.nodeType != mxConstants.NODETYPE_ELEMENT) { node = node.parentNode; } - + if (node != null && node == graph.cellEditor.textarea && graph.cellEditor.textarea.firstChild != null) { if (graph.cellEditor.textarea.firstChild.nodeName != 'P') { graph.cellEditor.textarea.innerHTML = '

' + 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() @@ -3530,7 +3530,7 @@ TextFormatPanel.prototype.addFont = function(container) selState = graph.cellEditor.saveSelection(); } }); - + mxEvent.addListener(input, 'touchstart', function() { if (document.activeElement == graph.cellEditor.textarea) @@ -3538,10 +3538,10 @@ TextFormatPanel.prototype.addFont = function(container) 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); @@ -3551,24 +3551,24 @@ TextFormatPanel.prototype.addFont = function(container) function() { document.execCommand('inserthorizontalrule', false); - }, insertPanel), + }, 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() @@ -3662,7 +3662,7 @@ TextFormatPanel.prototype.addFont = function(container) }), tablePanel)]; this.styleButtons(btns); btns[2].style.marginRight = '10px'; - + var wrapper3 = this.createPanel(); wrapper3.style.paddingTop = '10px'; wrapper3.style.paddingBottom = '10px'; @@ -3671,7 +3671,7 @@ TextFormatPanel.prototype.addFont = function(container) 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) @@ -3687,12 +3687,12 @@ TextFormatPanel.prototype.addFont = function(container) 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'); @@ -3722,12 +3722,12 @@ TextFormatPanel.prototype.addFont = function(container) 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 = ''; @@ -3745,7 +3745,7 @@ TextFormatPanel.prototype.addFont = function(container) 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) @@ -3787,20 +3787,20 @@ TextFormatPanel.prototype.addFont = function(container) }, 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 = ui.getSelectionState(); @@ -3811,26 +3811,26 @@ TextFormatPanel.prototype.addFont = function(container) 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'; @@ -3867,9 +3867,9 @@ TextFormatPanel.prototype.addFont = function(container) { 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'; @@ -3882,7 +3882,7 @@ TextFormatPanel.prototype.addFont = function(container) { dirSelect.value = 'automatic'; } - + if (force || document.activeElement != globalSpacing) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2)); @@ -3894,19 +3894,19 @@ TextFormatPanel.prototype.addFont = function(container) 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)); @@ -3930,17 +3930,17 @@ TextFormatPanel.prototype.addFont = function(container) 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(); @@ -3952,7 +3952,7 @@ TextFormatPanel.prototype.addFont = function(container) 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; @@ -3968,11 +3968,11 @@ TextFormatPanel.prototype.addFont = function(container) return ''; } }; - + function getAbsoluteFontSize(css) { var fontSize = (css != null) ? css.fontSize : null; - + if (fontSize != null && fontSize.substring(fontSize.length - 2) == 'px') { return parseFloat(fontSize); @@ -3982,7 +3982,7 @@ TextFormatPanel.prototype.addFont = function(container) return mxConstants.DEFAULT_FONTSIZE; } }; - + var css = mxUtils.getCurrentStyle(node); var fontSize = getAbsoluteFontSize(css); var lineHeight = getRelativeLineHeight(fontSize, css, node); @@ -4002,7 +4002,7 @@ TextFormatPanel.prototype.addFont = function(container) temp = mxUtils.getCurrentStyle(elts[i]); fontSize = Math.max(getAbsoluteFontSize(temp), fontSize); var lh = getRelativeLineHeight(fontSize, temp, elts[i]); - + if (lh != lineHeight || isNaN(lh)) { lineHeight = ''; @@ -4010,7 +4010,7 @@ TextFormatPanel.prototype.addFont = function(container) } } } - + function hasParentOrOnlyChild(name) { if (graph.getParentByName(node, name, graph.cellEditor.textarea) != null) @@ -4020,21 +4020,21 @@ TextFormatPanel.prototype.addFont = function(container) 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) @@ -4048,10 +4048,10 @@ TextFormatPanel.prototype.addFont = function(container) return str.substring(str.length - value.length - 1, str.length) == '-' + value; } } - + return false; }; - + if (css != null) { setSelected(fontStyleItems[0], css.fontWeight == 'bold' || @@ -4062,7 +4062,7 @@ TextFormatPanel.prototype.addFont = function(container) 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); @@ -4089,12 +4089,12 @@ TextFormatPanel.prototype.addFont = function(container) 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' && @@ -4108,9 +4108,9 @@ TextFormatPanel.prototype.addFont = function(container) { input.value = (isNaN(fontSize)) ? '' : fontSize + ' pt'; } - + var lh = parseFloat(lineHeight); - + if (!isNaN(lh)) { lineHeightInput.value = Math.round(lh * 100) + ' %'; @@ -4120,7 +4120,7 @@ TextFormatPanel.prototype.addFont = function(container) lineHeightInput.value = '100 %'; } } - + // Updates the color picker for the current font if (fontColorApply != null) { @@ -4136,7 +4136,7 @@ TextFormatPanel.prototype.addFont = function(container) fontColorApply(currentFontColor, true); } - + if (bgColorApply != null) { if (css.backgroundColor == 'rgba(0, 0, 0, 0)' || @@ -4148,10 +4148,10 @@ TextFormatPanel.prototype.addFont = function(container) { currentBgColor = mxUtils.rgba2hex(css.backgroundColor); } - + bgColorApply(currentBgColor, true); } - + // Workaround for firstChild is null or not an object // in the log which seems to be IE8- only / 29.01.15 if (fontMenu.firstChild != null) @@ -4160,17 +4160,17 @@ TextFormatPanel.prototype.addFont = function(container) } } } - + 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); @@ -4197,7 +4197,7 @@ StyleFormatPanel = function(format, editorUi, container) mxUtils.extend(StyleFormatPanel, BaseFormatPanel); /** - * + * */ StyleFormatPanel.prototype.defaultStrokeColor = 'black'; @@ -4210,7 +4210,7 @@ StyleFormatPanel.prototype.init = function() var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); - + if (!ss.containsLabel && ss.cells.length > 0) { if (ss.containsImage && ss.vertices.length == 1 && ss.style.shape == 'image' && @@ -4223,7 +4223,7 @@ StyleFormatPanel.prototype.init = function() { 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); @@ -4232,14 +4232,14 @@ StyleFormatPanel.prototype.init = function() 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)); }; @@ -4250,10 +4250,10 @@ 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; }; @@ -4273,23 +4273,23 @@ StyleFormatPanel.prototype.addSvgStyles = function(container) 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); @@ -4302,7 +4302,7 @@ StyleFormatPanel.prototype.addSvgStyles = function(container) { // ignore } - + return container; }; @@ -4313,23 +4313,23 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem { 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() @@ -4339,15 +4339,15 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem { rules[ruleIndex].style[key] = color; var cssTxt = ''; - - for (var i = 0; i < rules.length; i++) + + 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)), ui.getSelectionState().cells); @@ -4362,14 +4362,14 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem // 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')); @@ -4383,31 +4383,31 @@ StyleFormatPanel.prototype.addEditOps = function(div) { var ss = this.editorUi.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'; @@ -4418,10 +4418,10 @@ StyleFormatPanel.prototype.addEditOps = function(div) btn2.style.width = '104px'; btn2.style.marginLeft = '2px'; } - + div.appendChild(btn2); } - + return div; }; @@ -4447,9 +4447,9 @@ StyleFormatPanel.prototype.addFill = function(container) 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) { @@ -4459,7 +4459,7 @@ StyleFormatPanel.prototype.addFill = function(container) { mxEvent.consume(evt); }); - + var defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); @@ -4505,9 +4505,9 @@ StyleFormatPanel.prototype.addFill = function(container) 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'); @@ -4515,7 +4515,7 @@ StyleFormatPanel.prototype.addFill = function(container) mxUtils.write(fillStyleOption, Editor.roughFillStyles[i].dispName); fillStyleSelect.appendChild(fillStyleOption); } - + fillPanel.appendChild(fillStyleSelect); var listener = mxUtils.bind(this, function() @@ -4523,19 +4523,19 @@ StyleFormatPanel.prototype.addFill = function(container) ss = ui.getSelectionState(); var value = mxUtils.getValue(ss.style, mxConstants.STYLE_GRADIENT_DIRECTION, mxConstants.DIRECTION_SOUTH); var fillStyle = mxUtils.getValue(ss.style, 'fillStyle', 'auto'); - + // Handles empty string which is not allowed as a value if (value == '') { value = mxConstants.DIRECTION_SOUTH; } - + gradientSelect.value = value; fillStyleSelect.value = fillStyle; container.style.display = (ss.fill) ? '' : 'none'; - + var fillColor = mxUtils.getValue(ss.style, fillKey, null); - + if (!ss.fill || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge') { fillStyleSelect.style.display = 'none'; @@ -4548,7 +4548,7 @@ StyleFormatPanel.prototype.addFill = function(container) fillStyle == 'solid' || fillStyle == 'auto')) ? '' : 'none'; } }); - + graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); @@ -4560,7 +4560,7 @@ StyleFormatPanel.prototype.addFill = function(container) 'values', [gradientSelect.value], 'cells', ss.cells)); mxEvent.consume(evt); }); - + mxEvent.addListener(fillStyleSelect, 'change', function(evt) { graph.setCellStyles('fillStyle', fillStyleSelect.value, ss.cells); @@ -4568,18 +4568,18 @@ StyleFormatPanel.prototype.addFill = function(container) '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; }; @@ -4590,13 +4590,13 @@ StyleFormatPanel.prototype.getCustomColors = function() { var ss = this.editorUi.getSelectionState(); var result = []; - + if (ss.swimlane) { result.push({title: mxResources.get('laneColor'), key: 'swimlaneFillColor', defaultValue: 'default'}); } - + return result; }; @@ -4608,19 +4608,19 @@ StyleFormatPanel.prototype.addStroke = function(container) var ui = this.editorUi; var graph = ui.editor.graph; var ss = ui.getSelectionState(); - + container.style.paddingTop = '6px'; container.style.paddingBottom = '4px'; container.style.whiteSpace = 'normal'; - + var colorPanel = document.createElement('div'); colorPanel.style.fontWeight = 'bold'; - + if (!ss.stroke) { colorPanel.style.display = 'none'; } - + // Adds gradient direction option var styleSelect = document.createElement('select'); styleSelect.style.position = 'absolute'; @@ -4642,7 +4642,7 @@ StyleFormatPanel.prototype.addStroke = function(container) mxUtils.write(styleOption, mxResources.get(styles[i])); styleSelect.appendChild(styleOption); } - + mxEvent.addListener(styleSelect, 'change', function(evt) { graph.getModel().beginUpdate(); @@ -4651,7 +4651,7 @@ StyleFormatPanel.prototype.addStroke = function(container) var keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED]; // Default for rounded is 1 var values = ['0', null]; - + if (styleSelect.value == 'rounded') { values = ['1', null]; @@ -4660,12 +4660,12 @@ StyleFormatPanel.prototype.addStroke = function(container) { 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)); } @@ -4673,10 +4673,10 @@ StyleFormatPanel.prototype.addStroke = function(container) { graph.getModel().endUpdate(); } - + mxEvent.consume(evt); }); - + // Stops events from bubbling to color option event handler mxEvent.addListener(styleSelect, 'click', function(evt) { @@ -4690,10 +4690,10 @@ StyleFormatPanel.prototype.addStroke = function(container) { 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'; @@ -4709,7 +4709,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -4719,7 +4719,7 @@ StyleFormatPanel.prototype.addStroke = function(container) item.firstChild.firstChild.style.padding = '0px 4px 0px 4px'; item.firstChild.firstChild.style.width = width + 'px'; item.firstChild.firstChild.appendChild(pat); - + return item; }); @@ -4731,16 +4731,16 @@ StyleFormatPanel.prototype.addStroke = function(container) 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')); + 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) @@ -4751,7 +4751,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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 @@ -4766,9 +4766,9 @@ StyleFormatPanel.prototype.addStroke = function(container) 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); @@ -4777,7 +4777,7 @@ StyleFormatPanel.prototype.addStroke = function(container) // 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); @@ -4794,7 +4794,7 @@ StyleFormatPanel.prototype.addStroke = function(container) // 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); @@ -4818,13 +4818,13 @@ StyleFormatPanel.prototype.addStroke = function(container) 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') @@ -4835,12 +4835,12 @@ StyleFormatPanel.prototype.addStroke = function(container) 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')); } })); @@ -4922,7 +4922,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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)'); @@ -4986,22 +4986,22 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5029,7 +5029,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5037,10 +5037,10 @@ StyleFormatPanel.prototype.addStroke = function(container) 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() { @@ -5052,15 +5052,15 @@ StyleFormatPanel.prototype.addStroke = function(container) }); 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() { @@ -5075,7 +5075,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5084,7 +5084,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5094,7 +5094,7 @@ StyleFormatPanel.prototype.addStroke = function(container) span.style.width = '120px'; mxUtils.write(span, mxResources.get('perimeter')); perimeterPanel.appendChild(span); - + var perimeterUpdate; var perimeterSpacing = this.addUnitInput(perimeterPanel, 'pt', 30, 52, function() { @@ -5110,7 +5110,7 @@ StyleFormatPanel.prototype.addStroke = function(container) { container.appendChild(perimeterPanel); } - + var listener = mxUtils.bind(this, function(sender, evt, force) { ss = ui.getSelectionState(); @@ -5120,15 +5120,15 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5137,7 +5137,7 @@ StyleFormatPanel.prototype.addStroke = function(container) { styleSelect.value = 'rounded'; } - + if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1') { if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null) @@ -5153,21 +5153,21 @@ StyleFormatPanel.prototype.addStroke = function(container) { 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'; @@ -5197,10 +5197,10 @@ StyleFormatPanel.prototype.addStroke = function(container) edgeStyleDiv.className = 'geSprite geSprite-orthogonal'; } } - + // Updates icon for edge shape var edgeShapeDiv = edgeShape.getElementsByTagName('div')[0]; - + if (edgeShapeDiv != null) { if (ss.style.shape == 'link') @@ -5220,7 +5220,7 @@ StyleFormatPanel.prototype.addStroke = function(container) edgeShapeDiv.className = 'geSprite geSprite-connection'; } } - + if (ss.edges.length == ss.cells.length) { altStylePanel.style.display = ''; @@ -5241,7 +5241,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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); @@ -5265,10 +5265,10 @@ StyleFormatPanel.prototype.addStroke = function(container) 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), @@ -5289,8 +5289,8 @@ StyleFormatPanel.prototype.addStroke = function(container) } } - mxUtils.setOpacity(edgeStyle, (ss.style.shape == 'arrow') ? 30 : 100); - + 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); @@ -5307,7 +5307,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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)); @@ -5319,20 +5319,20 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'); @@ -5362,21 +5362,21 @@ StyleFormatPanel.prototype.addLineJumps = function(container) var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); - + if (Graph.lineJumpsEnabled && ss.edges.length > 0 && ss.vertices.length == 0 && ss.lineJumps) { container.style.padding = '2px 0px 24px 14px'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.maxWidth = '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'; @@ -5397,7 +5397,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container) mxUtils.write(styleOption, mxResources.get(styles[i])); styleSelect.appendChild(styleOption); } - + mxEvent.addListener(styleSelect, 'change', function(evt) { graph.getModel().beginUpdate(); @@ -5411,28 +5411,28 @@ StyleFormatPanel.prototype.addLineJumps = function(container) { 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 = ui.getSelectionState(); @@ -5455,7 +5455,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container) { container.style.display = 'none'; } - + return container; }; @@ -5468,7 +5468,7 @@ StyleFormatPanel.prototype.addEffects = function(div) var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); - + div.style.paddingTop = '4px'; div.style.paddingBottom = '0px'; @@ -5484,7 +5484,7 @@ StyleFormatPanel.prototype.addEffects = function(div) left.style.padding = '0px'; left.style.width = '50%'; left.setAttribute('valign', 'top'); - + var right = left.cloneNode(true); right.style.paddingLeft = '8px'; row.appendChild(left); @@ -5495,7 +5495,7 @@ StyleFormatPanel.prototype.addEffects = function(div) var current = left; var count = 0; - + var addOption = mxUtils.bind(this, function(label, key, defaultValue) { var opt = this.createCellOption(label, key, defaultValue); @@ -5508,16 +5508,16 @@ StyleFormatPanel.prototype.addEffects = function(div) var listener = mxUtils.bind(this, function(sender, evt, force) { ss = ui.getSelectionState(); - + left.innerHTML = ''; right.innerHTML = ''; current = left; - + if (ss.rounded) { addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0); } - + if (ss.swimlane) { addOption(mxResources.get('divider'), 'swimlaneLine', 1); @@ -5527,7 +5527,7 @@ StyleFormatPanel.prototype.addEffects = function(div) { addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0); } - + if (ss.glass) { addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0); @@ -5535,7 +5535,7 @@ StyleFormatPanel.prototype.addEffects = function(div) addOption(mxResources.get('sketch'), 'sketch', 0); }); - + graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); @@ -5605,21 +5605,21 @@ DiagramStylePanel.prototype.addView = function(div) var opts = document.createElement('div'); 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'; @@ -5635,7 +5635,7 @@ DiagramStylePanel.prototype.addView = function(div) }, function(checked) { sketch = checked; - + if (checked) { graph.currentEdgeStyle['sketch'] = '1'; @@ -5646,18 +5646,18 @@ DiagramStylePanel.prototype.addView = function(div) delete graph.currentEdgeStyle['sketch']; delete graph.currentVertexStyle['sketch']; } - + graph.updateCellStyles({'sketch': (checked) ? '1' : null}, graph.getVerticesAndEdges()); }, null, function(div) { div.style.width = 'auto'; })); } - + row.appendChild(right); tbody.appendChild(row); table.appendChild(tbody); - + // Rounded right.appendChild(this.createOption(mxResources.get('rounded'), function() { @@ -5665,7 +5665,7 @@ DiagramStylePanel.prototype.addView = function(div) }, function(checked) { rounded = checked; - + if (checked) { graph.currentEdgeStyle['rounded'] = '1'; @@ -5676,13 +5676,13 @@ DiagramStylePanel.prototype.addView = function(div) delete graph.currentEdgeStyle['rounded']; delete graph.currentVertexStyle['rounded']; } - + graph.updateCellStyles({'rounded': (checked) ? '1' : '0'}, graph.getVerticesAndEdges()); }, null, function(div) { div.style.width = 'auto'; })); - + // Curved if (urlParams['sketch'] != '1') { @@ -5699,7 +5699,7 @@ DiagramStylePanel.prototype.addView = function(div) }, function(checked) { curved = checked; - + if (checked) { graph.currentEdgeStyle['curved'] = '1'; @@ -5708,7 +5708,7 @@ DiagramStylePanel.prototype.addView = function(div) { delete graph.currentEdgeStyle['curved']; } - + graph.updateCellStyles({'curved': (checked) ? '1' : null}, graph.getVerticesAndEdges(false, true)); }, null, function(div) { @@ -5720,25 +5720,25 @@ DiagramStylePanel.prototype.addView = function(div) 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; @@ -5752,7 +5752,7 @@ DiagramStylePanel.prototype.addView = function(div) newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]); } } - + model.setStyle(cells[i], newStyle); } } @@ -5761,7 +5761,7 @@ DiagramStylePanel.prototype.addView = function(div) model.endUpdate(); } }); - + var removeStyles = mxUtils.bind(this, function(style, styles, defaultStyle) { if (style != null) @@ -5790,21 +5790,21 @@ DiagramStylePanel.prototype.addView = function(div) { 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 && @@ -5817,13 +5817,13 @@ DiagramStylePanel.prototype.addView = function(div) } } }); - + if (urlParams['sketch'] != '1') { var btn = mxUtils.button(mxResources.get('reset'), mxUtils.bind(this, function(evt) { var all = graph.getVerticesAndEdges(true, true); - + if (all.length > 0) { model.beginUpdate(); @@ -5837,16 +5837,16 @@ DiagramStylePanel.prototype.addView = function(div) 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 @@ -5858,7 +5858,7 @@ DiagramStylePanel.prototype.addView = function(div) div.style.width = '100%'; div.style.height = '100%'; container.appendChild(div); - + var graph2 = new Graph(div, null, null, graph.getStylesheet()); graph2.resetViewOnRootChange = false; @@ -5869,24 +5869,24 @@ DiagramStylePanel.prototype.addView = function(div) graph2.setConnectable(false); graph2.setPanning(false); graph2.setEnabled(false); - + graph2.getCellStyle = function(cell, resolve) { resolve = (resolve != null) ? resolve : true; var result = mxUtils.clone(graph.getCellStyle.apply(this, arguments)); var defaultStyle = graph.stylesheet.getDefaultVertexStyle(); var appliedStyle = vertexStyle; - + if (model.isEdge(cell)) { defaultStyle = graph.stylesheet.getDefaultEdgeStyle(); - appliedStyle = edgeStyle; + appliedStyle = edgeStyle; } - + removeStyles(result, defaultStyles, defaultStyle); applyStyle(commonStyle, result, cell, graphStyle, graph2); applyStyle(appliedStyle, result, cell, graphStyle, graph2); - + if (resolve) { result = graph.postProcessCellStyle(cell, result); @@ -5894,7 +5894,7 @@ DiagramStylePanel.prototype.addView = function(div) return result; }; - + // Avoid HTML labels to capture events in bubble phase graph2.model.beginUpdate(); try @@ -5910,12 +5910,12 @@ DiagramStylePanel.prototype.addView = function(div) graph2.model.endUpdate(); } }); - + // Entries var entries = document.createElement('div'); entries.style.position = 'relative'; div.appendChild(entries); - + // Cached entries if (this.format.cachedStyleEntries == null) { @@ -5935,7 +5935,7 @@ DiagramStylePanel.prototype.addView = function(div) var addEntry = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, index) { var panel = this.format.cachedStyleEntries[index]; - + if (panel == null) { panel = document.createElement('div'); @@ -5948,14 +5948,14 @@ DiagramStylePanel.prototype.addView = function(div) 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); - + + createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel); + mxEvent.addGestureListeners(panel, mxUtils.bind(this, function(evt) { panel.style.opacity = 0.5; @@ -5964,7 +5964,7 @@ DiagramStylePanel.prototype.addView = function(div) 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); @@ -5974,7 +5974,7 @@ DiagramStylePanel.prototype.addView = function(div) { sketch = Editor.sketchMode; } - + if (sketch) { graph.currentEdgeStyle['sketch'] = '1'; @@ -5985,7 +5985,7 @@ DiagramStylePanel.prototype.addView = function(div) graph.currentEdgeStyle['sketch'] = '0'; graph.currentVertexStyle['sketch'] = '0'; } - + if (rounded) { graph.currentVertexStyle['rounded'] = '1'; @@ -5996,7 +5996,7 @@ DiagramStylePanel.prototype.addView = function(div) graph.currentVertexStyle['rounded'] = '0'; graph.currentEdgeStyle['rounded'] = '1'; } - + if (curved) { graph.currentEdgeStyle['curved'] = '1'; @@ -6005,16 +6005,16 @@ DiagramStylePanel.prototype.addView = function(div) { graph.currentEdgeStyle['curved'] = '0'; } - + model.beginUpdate(); try { updateCells(addKeys(commonStyle, defaultStyles.slice()), 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 : gridColor)); @@ -6024,77 +6024,77 @@ DiagramStylePanel.prototype.addView = function(div) 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 : gridColor; - + graph.getCellStyle = function(cell, resolve) { resolve = (resolve != null) ? resolve : true; var result = mxUtils.clone(prev.apply(this, arguments)); - + var defaultStyle = graph.stylesheet.getDefaultVertexStyle(); var appliedStyle = vertexStyle; - + if (model.isEdge(cell)) { defaultStyle = graph.stylesheet.getDefaultEdgeStyle(); - appliedStyle = edgeStyle; + appliedStyle = edgeStyle; } - + removeStyles(result, defaultStyles, defaultStyle); applyStyle(commonStyle, result, cell, graphStyle); applyStyle(appliedStyle, result, cell, graphStyle); - + if (resolve) { result = this.postProcessCellStyle(cell, result); } - + return result; }; - + graph.refresh(); graph.getCellStyle = prev; graph.background = prevBg; graph.view.gridColor = prevGrid; })); - + mxEvent.addListener(panel, 'mouseleave', mxUtils.bind(this, function(evt) { graph.refresh(); })); - + // Workaround for broken cache in IE11 if (!mxClient.IS_IE && !mxClient.IS_IE11) { this.format.cachedStyleEntries[index] = panel; } } - + entries.appendChild(panel); }); - + // Maximum palettes to switch the switcher var maxEntries = 10; var pageCount = Math.ceil(Editor.styles.length / maxEntries); this.format.currentStylePage = (this.format.currentStylePage != null) ? this.format.currentStylePage : 0; var dots = []; - + var addEntries = mxUtils.bind(this, function() { if (dots.length > 0) { dots[this.format.currentStylePage].style.background = '#84d7ff'; } - + for (var i = this.format.currentStylePage * maxEntries; i < Math.min((this.format.currentStylePage + 1) * maxEntries, Editor.styles.length); i++) @@ -6103,7 +6103,7 @@ DiagramStylePanel.prototype.addView = function(div) addEntry(s.commonStyle, s.vertexStyle, s.edgeStyle, s.graph, i); } }); - + var selectPage = mxUtils.bind(this, function(index) { if (index >= 0 && index < pageCount) @@ -6114,7 +6114,7 @@ DiagramStylePanel.prototype.addView = function(div) addEntries(); } }); - + if (pageCount > 1) { // Selector @@ -6124,9 +6124,9 @@ DiagramStylePanel.prototype.addView = function(div) 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'); @@ -6139,7 +6139,7 @@ DiagramStylePanel.prototype.addView = function(div) 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() @@ -6147,14 +6147,14 @@ DiagramStylePanel.prototype.addView = function(div) selectPage(index); })); }))(i, dot); - + switcher.appendChild(dot); dots.push(dot); } - + div.appendChild(switcher); addEntries(); - + if (pageCount < 15) { var left = document.createElement('div'); @@ -6171,12 +6171,12 @@ DiagramStylePanel.prototype.addView = function(div) 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 = ''; @@ -6184,17 +6184,17 @@ DiagramStylePanel.prototype.addView = function(div) 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) { @@ -6207,7 +6207,7 @@ DiagramStylePanel.prototype.addView = function(div) elt.style.opacity = '0.5'; }); }; - + addHoverState(left); addHoverState(right); } @@ -6216,7 +6216,7 @@ DiagramStylePanel.prototype.addView = function(div) { addEntries(); } - + return div; }; @@ -6226,14 +6226,14 @@ DiagramStylePanel.prototype.addView = function(div) 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. */ @@ -6282,12 +6282,12 @@ 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) { @@ -6305,7 +6305,7 @@ DiagramFormatPanel.prototype.addView = function(div) { apply(graph.pageVisible); }; - + ui.addListener('pageViewChanged', this.listener); }, destroy: function() @@ -6314,7 +6314,7 @@ DiagramFormatPanel.prototype.addView = function(div) } })); } - + if (graph.isEnabled()) { // Background @@ -6326,7 +6326,7 @@ DiagramFormatPanel.prototype.addView = function(div) var change = new ChangePageSetup(ui, color); change.ignoreImage = color != null && color != mxConstants.NONE; - + graph.model.execute(change); }, '#ffffff', { @@ -6336,7 +6336,7 @@ DiagramFormatPanel.prototype.addView = function(div) { apply(graph.background); }; - + ui.addListener('backgroundColorChanged', this.listener); }, destroy: function() @@ -6344,7 +6344,7 @@ DiagramFormatPanel.prototype.addView = function(div) ui.removeListener(this.listener); } }); - + if (this.showBackgroundImageOption) { var label = bg.getElementsByTagName('span')[0]; @@ -6363,20 +6363,20 @@ DiagramFormatPanel.prototype.addView = function(div) 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; }; @@ -6388,8 +6388,8 @@ DiagramFormatPanel.prototype.addOptions = function(div) var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - - div.appendChild(this.createTitle(mxResources.get('options'))); + + div.appendChild(this.createTitle(mxResources.get('options'))); if (graph.isEnabled()) { @@ -6408,7 +6408,7 @@ DiagramFormatPanel.prototype.addOptions = function(div) { apply(graph.connectionArrowsEnabled); }; - + ui.addListener('connectionArrowsChanged', this.listener); }, destroy: function() @@ -6416,7 +6416,7 @@ DiagramFormatPanel.prototype.addOptions = function(div) ui.removeListener(this.listener); } })); - + // Connection points div.appendChild(this.createOption(mxResources.get('connectionPoints'), function() { @@ -6432,7 +6432,7 @@ DiagramFormatPanel.prototype.addOptions = function(div) { apply(graph.connectionHandler.isEnabled()); }; - + ui.addListener('connectionPointsChanged', this.listener); }, destroy: function() @@ -6456,7 +6456,7 @@ DiagramFormatPanel.prototype.addOptions = function(div) { apply(graph.graphHandler.guidesEnabled); }; - + ui.addListener('guidesEnabledChanged', this.listener); }, destroy: function() @@ -6470,14 +6470,14 @@ DiagramFormatPanel.prototype.addOptions = function(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'; @@ -6487,8 +6487,8 @@ DiagramFormatPanel.prototype.addGridOption = function(container) 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(); - + 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; @@ -6507,12 +6507,12 @@ DiagramFormatPanel.prototype.addGridOption = function(container) 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; @@ -6538,7 +6538,7 @@ DiagramFormatPanel.prototype.addGridOption = function(container) }, function(color) { var enabled = graph.isGridEnabled(); - + if (color == mxConstants.NONE) { graph.setGridEnabled(false); @@ -6551,7 +6551,7 @@ DiagramFormatPanel.prototype.addGridOption = function(container) input.style.display = (graph.isGridEnabled()) ? '' : 'none'; stepper.style.display = input.style.display; - + if (enabled != graph.isGridEnabled()) { graph.defaultGridEnabled = graph.isGridEnabled(); @@ -6565,7 +6565,7 @@ DiagramFormatPanel.prototype.addGridOption = function(container) { apply((graph.isGridEnabled()) ? graph.view.gridColor : null); }; - + ui.addListener('gridColorChanged', this.listener); ui.addListener('gridEnabledChanged', this.listener); }, @@ -6589,7 +6589,7 @@ DiagramFormatPanel.prototype.addDocumentProperties = function(div) var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - + div.appendChild(this.createTitle(mxResources.get('options'))); return div; @@ -6603,7 +6603,7 @@ 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) @@ -6614,31 +6614,31 @@ DiagramFormatPanel.prototype.addPaperSize = function(div) 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); + 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; }; @@ -6659,7 +6659,7 @@ DiagramFormatPanel.prototype.addStyleOps = function(div) DiagramFormatPanel.prototype.destroy = function() { BaseFormatPanel.prototype.destroy.apply(this, arguments); - + if (this.gridEnabledListener) { this.editorUi.removeListener(this.gridEnabledListener); diff --git a/resources/assets/statics/public/js/drawio/js/diagramly/App.js b/resources/assets/statics/public/js/drawio/js/diagramly/App.js index 97eb8071..c344c62e 100644 --- a/resources/assets/statics/public/js/drawio/js/diagramly/App.js +++ b/resources/assets/statics/public/js/drawio/js/diagramly/App.js @@ -791,7 +791,7 @@ App.main = function(callback, createUi) (urlParams['embed'] == '1' && urlParams['gapi'] == '1')) && isSvgBrowser && isLocalStorage && (document.documentMode == null || document.documentMode >= 10)))) { - mxscript('https://apis.google.com/js/api.js?onload=DrawGapiClientCallback', null, null, null, mxClient.IS_SVG); + // mxscript('https://apis.google.com/js/api.js?onload=DrawGapiClientCallback', null, null, null, mxClient.IS_SVG); } // Disables client else if (typeof window.gapi === 'undefined') diff --git a/resources/assets/statics/public/js/drawio/js/grapheditor/Format.js b/resources/assets/statics/public/js/drawio/js/grapheditor/Format.js index cdf287ad..86e6e3e3 100644 --- a/resources/assets/statics/public/js/drawio/js/grapheditor/Format.js +++ b/resources/assets/statics/public/js/drawio/js/grapheditor/Format.js @@ -56,14 +56,14 @@ Format.doubleBlockFilledMarkerImage = Graph.createSvgImage(20, 22, ' 0) { if (Editor.isDarkMode()) { imgs[0].style.filter = 'invert(100%)'; } - + imgs[0].className = 'geIcon'; imgs[0].style.padding = '0px'; imgs[0].style.margin = '0 0 0 2px'; @@ -73,10 +73,10 @@ Format.processMenuIcon = function(elt, transform) mxUtils.setPrefixedStyle(imgs[0].style, 'transform', transform); } } - + return elt; }; - + /** * Returns information about the current selection. */ @@ -105,12 +105,12 @@ Format.prototype.init = function() var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - + this.update = mxUtils.bind(this, function(sender, evt) { this.refresh(); }); - + graph.getSelectionModel().addListener(mxEvent.CHANGE, this.update); graph.getModel().addListener(mxEvent.CHANGE, this.update); graph.addListener(mxEvent.EDITING_STARTED, this.update); @@ -119,7 +119,7 @@ Format.prototype.init = function() editor.addListener('autosaveChanged', this.update); graph.addListener(mxEvent.ROOT, this.update); ui.addListener('styleChanged', this.update); - + this.refresh(); }; @@ -129,7 +129,7 @@ Format.prototype.init = function() Format.prototype.clear = function() { this.container.innerHTML = ''; - + // Destroy existing panels if (this.panels != null) { @@ -138,7 +138,7 @@ Format.prototype.clear = function() this.panels[i].destroy(); } } - + this.panels = []; }; @@ -169,17 +169,17 @@ Format.prototype.immediateRefresh = function() { return; } - + this.clear(); var ui = this.editorUi; var graph = ui.editor.graph; - + var div = document.createElement('div'); div.style.whiteSpace = 'nowrap'; div.style.color = 'rgb(112, 112, 112)'; div.style.textAlign = 'left'; div.style.cursor = 'default'; - + var label = document.createElement('div'); label.className = 'geFormatSection'; label.style.textAlign = 'center'; @@ -193,7 +193,7 @@ Format.prototype.immediateRefresh = function() label.style.overflow = 'hidden'; label.style.width = '100%'; this.container.appendChild(div); - + // Prevents text selection mxEvent.addListener(label, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', mxUtils.bind(this, function(evt) @@ -205,7 +205,7 @@ Format.prototype.immediateRefresh = function() var containsLabel = ss.containsLabel; var currentLabel = null; var currentPanel = null; - + var addClickHandler = mxUtils.bind(this, function(elt, panel, index, lastEntry) { var clickHandler = mxUtils.bind(this, function(evt) @@ -224,7 +224,7 @@ Format.prototype.immediateRefresh = function() { this.currentIndex = index; } - + if (currentLabel != null) { currentLabel.style.backgroundColor = Format.inactiveTabBackgroundColor; @@ -234,29 +234,29 @@ Format.prototype.immediateRefresh = function() currentLabel = elt; currentLabel.style.backgroundColor = ''; currentLabel.style.borderBottomWidth = '0px'; - + if (currentPanel != panel) { if (currentPanel != null) { currentPanel.style.display = 'none'; } - + currentPanel = panel; currentPanel.style.display = ''; } } }); - + mxEvent.addListener(elt, 'click', clickHandler); - + // Prevents text selection mxEvent.addListener(elt, (mxClient.IS_POINTER) ? 'pointerdown' : 'mousedown', mxUtils.bind(this, function(evt) { evt.preventDefault(); })); - + if ((lastEntry && currentLabel == null) || (index == ((containsLabel) ? this.labelIndex : ((graph.isSelectionEmpty()) ? this.diagramIndex : this.currentIndex)))) @@ -265,7 +265,7 @@ Format.prototype.immediateRefresh = function() clickHandler(); } }); - + var idx = 0; if (graph.isSelectionEmpty()) @@ -277,31 +277,31 @@ Format.prototype.immediateRefresh = function() var diagramPanel = div.cloneNode(false); this.panels.push(new DiagramFormatPanel(this, ui, diagramPanel)); this.container.appendChild(diagramPanel); - + if (Editor.styles != null) { diagramPanel.style.display = 'none'; label.style.width = (this.showCloseButton) ? '106px' : '50%'; label.style.cursor = 'pointer'; label.style.backgroundColor = Format.inactiveTabBackgroundColor; - + var label2 = label.cloneNode(false); label2.style.borderLeftWidth = '1px'; label2.style.borderRightWidth = '1px'; label2.style.backgroundColor = Format.inactiveTabBackgroundColor; - + addClickHandler(label, diagramPanel, idx++); - + var stylePanel = div.cloneNode(false); stylePanel.style.display = 'none'; mxUtils.write(label2, mxResources.get('style')); div.appendChild(label2); this.panels.push(new DiagramStylePanel(this, ui, stylePanel)); this.container.appendChild(stylePanel); - + addClickHandler(label2, stylePanel, idx++); } - + // Adds button to hide the format panel since // people don't seem to find the toolbar button // and the menu item in the format menu @@ -316,7 +316,7 @@ Format.prototype.immediateRefresh = function() label2.style.right = '0px'; label2.style.top = '0px'; label2.style.width = '25px'; - + var img = document.createElement('img'); img.setAttribute('border', '0'); img.setAttribute('src', Dialog.prototype.closeImage); @@ -332,12 +332,12 @@ Format.prototype.immediateRefresh = function() img.style.padding = '1px'; img.style.opacity = 0.5; label2.appendChild(img) - + mxEvent.addListener(img, 'click', function() { ui.actions.get('formatPanel').funct(); }); - + div.appendChild(label2); } } @@ -359,7 +359,7 @@ Format.prototype.immediateRefresh = function() // Workaround for ignored background in IE label2.style.backgroundColor = Format.inactiveTabBackgroundColor; label3.style.backgroundColor = Format.inactiveTabBackgroundColor; - + // Style if (containsLabel) { @@ -370,7 +370,7 @@ Format.prototype.immediateRefresh = function() label.style.borderLeftWidth = '0px'; mxUtils.write(label, mxResources.get('style')); div.appendChild(label); - + var stylePanel = div.cloneNode(false); stylePanel.style.display = 'none'; this.panels.push(new StyleFormatPanel(this, ui, stylePanel)); @@ -378,7 +378,7 @@ Format.prototype.immediateRefresh = function() addClickHandler(label, stylePanel, idx++); } - + // Text mxUtils.write(label2, mxResources.get('text')); div.appendChild(label2); @@ -387,7 +387,7 @@ Format.prototype.immediateRefresh = function() textPanel.style.display = 'none'; this.panels.push(new TextFormatPanel(this, ui, textPanel)); this.container.appendChild(textPanel); - + // Arrange mxUtils.write(label3, mxResources.get('arrange')); div.appendChild(label3); @@ -396,7 +396,7 @@ Format.prototype.immediateRefresh = function() arrangePanel.style.display = 'none'; this.panels.push(new ArrangePanel(this, ui, arrangePanel)); this.container.appendChild(arrangePanel); - + if (ss.cells.length > 0) { addClickHandler(label2, textPanel, idx++); @@ -405,7 +405,7 @@ Format.prototype.immediateRefresh = function() { label2.style.display = 'none'; } - + addClickHandler(label3, arrangePanel, idx++, true); } }; @@ -422,7 +422,7 @@ BaseFormatPanel = function(format, editorUi, container) }; /** - * + * */ BaseFormatPanel.prototype.buttonBackgroundColor = 'white'; @@ -433,16 +433,16 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu { unit = (unit != null) ? unit : ''; isFloat = (isFloat != null) ? isFloat : false; - + var ui = this.editorUi; var graph = ui.editor.graph; - + min = (min != null) ? min : 1; max = (max != null) ? max : 999; - + var selState = null; var updating = false; - + var update = mxUtils.bind(this, function(evt) { var value = (isFloat) ? parseFloat(input.value) : parseInt(input.value); @@ -454,24 +454,24 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu // use integer and round all numbers to two decimal point value = mxUtils.mod(Math.round(value * 100), 36000) / 100; } - + value = Math.min(max, Math.max(min, (isNaN(value)) ? defaultValue : value)); - + if (graph.cellEditor.isContentEditing() && textEditFallback) { if (!updating) { updating = true; - + if (selState != null) { graph.cellEditor.restoreSelection(selState); selState = null; } - + textEditFallback(value); input.value = value + unit; - + // Restore focus and selection in input updating = false; } @@ -482,7 +482,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu { graph.stopEditing(true); } - + graph.getModel().beginUpdate(); try { @@ -498,7 +498,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu elt.removeAttribute('size'); }); } - + for (var i = 0; i < cells.length; i++) { if (graph.model.getChildCount(cells[i]) == 0) @@ -506,7 +506,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu graph.autoSizeCell(cells[i], false); } } - + ui.fireEvent(new mxEventObject('styleChanged', 'keys', [key], 'values', [value], 'cells', cells)); } @@ -515,7 +515,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu graph.getModel().endUpdate(); } } - + input.value = value + unit; mxEvent.consume(evt); }); @@ -531,7 +531,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu selState = graph.cellEditor.saveSelection(); } }); - + mxEvent.addListener(input, 'touchstart', function() { if (document.activeElement == graph.cellEditor.textarea) @@ -540,10 +540,10 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu } }); } - + mxEvent.addListener(input, 'change', update); mxEvent.addListener(input, 'blur', update); - + return update; }; @@ -555,7 +555,7 @@ BaseFormatPanel.prototype.createPanel = function() var div = document.createElement('div'); div.className = 'geFormatSection'; div.style.padding = '12px 0px 12px 14px'; - + return div; }; @@ -571,12 +571,12 @@ BaseFormatPanel.prototype.createTitle = function(title) div.style.width = '200px'; div.style.fontWeight = 'bold'; mxUtils.write(div, title); - + return div; }; /** - * + * */ BaseFormatPanel.prototype.addAction = function(div, name) { @@ -589,7 +589,7 @@ BaseFormatPanel.prototype.addAction = function(div, name) { action.funct(evt, evt); }); - + var short = (action.shortcut != null) ? ' (' + action.shortcut + ')' : ''; btn.setAttribute('title', action.label + short); btn.style.marginBottom = '2px'; @@ -602,7 +602,7 @@ BaseFormatPanel.prototype.addAction = function(div, name) }; /** - * + * */ BaseFormatPanel.prototype.addActions = function(div, names) { @@ -635,19 +635,19 @@ BaseFormatPanel.prototype.addActions = function(div, names) }; /** - * + * */ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, disableFocus, defaultValue, isFloat) { step = (step != null) ? step : 1; height = (height != null) ? height : 9; var bigStep = 10 * step; - + var stepper = document.createElement('div'); mxUtils.setPrefixedStyle(stepper.style, 'borderRadius', '3px'); stepper.style.border = '1px solid rgb(192, 192, 192)'; stepper.style.position = 'absolute'; - + var up = document.createElement('div'); up.style.borderBottom = '1px solid rgb(192, 192, 192)'; up.style.position = 'relative'; @@ -655,7 +655,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, up.style.width = '10px'; up.className = 'geBtnUp'; stepper.appendChild(up); - + var down = up.cloneNode(false); down.style.border = 'none'; down.style.height = height + 'px'; @@ -672,13 +672,13 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, { input.value = defaultValue || '2'; } - + var val = isFloat? parseFloat(input.value) : parseInt(input.value); - + if (!isNaN(val)) { input.value = val - (mxEvent.isShiftDown(evt) ? bigStep : step); - + if (update != null) { update(evt); @@ -687,7 +687,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, mxEvent.consume(evt); }); - + mxEvent.addGestureListeners(up, function(evt) { // Stops text selection on shift+click @@ -698,13 +698,13 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, { input.value = defaultValue || '0'; } - + var val = isFloat? parseFloat(input.value) : parseInt(input.value); - + if (!isNaN(val)) { input.value = val + (mxEvent.isShiftDown(evt) ? bigStep : step); - + if (update != null) { update(evt); @@ -713,14 +713,14 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, mxEvent.consume(evt); }); - + // Disables transfer of focus to DIV but also :active CSS // so it's only used for fontSize where the focus should // stay on the selected text, but not for any other input. if (disableFocus) { var currentSelection = null; - + mxEvent.addGestureListeners(stepper, function(evt) { @@ -740,7 +740,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, { // ignore } - + currentSelection = null; mxEvent.consume(evt); } @@ -755,7 +755,7 @@ BaseFormatPanel.prototype.createStepper = function(input, update, step, height, mxEvent.consume(evt); }); } - + return stepper; }; @@ -771,10 +771,10 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked div.style.overflow = 'hidden'; div.style.width = '200px'; div.style.height = '18px'; - + var cb = document.createElement('input'); cb.setAttribute('type', 'checkbox'); - cb.style.margin = '1px 6px 0px 0px'; + // cb.style.margin = '1px 6px 0px 0px'; cb.style.verticalAlign = 'top'; div.appendChild(cb); @@ -786,13 +786,13 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked var applying = false; var value = isCheckedFn(); - + var apply = function(newValue, evt) { if (!applying) { applying = true; - + if (newValue) { cb.setAttribute('checked', 'checked'); @@ -805,18 +805,18 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked cb.defaultChecked = false; cb.checked = false; } - + if (value != newValue) { value = newValue; - + // Checks if the color value needs to be updated in the model if (isCheckedFn() != value) { setCheckedFn(value, evt); } } - + applying = false; } }; @@ -827,24 +827,24 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked { // Toggles checkbox state for click on label var source = mxEvent.getSource(evt); - + if (source == div || source == span) { cb.checked = !cb.checked; } - + apply(cb.checked, evt); } }); - + apply(value); - + if (listener != null) { listener.install(apply); this.listeners.push(listener); } - + if (fn != null) { fn(div); @@ -857,11 +857,11 @@ BaseFormatPanel.prototype.createOption = function(label, isCheckedFn, setChecked * The string 'null' means use null in values. */ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, enabledValue, disabledValue, fn, action, stopEditing, cells) -{ +{ var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - + enabledValue = (enabledValue != null) ? ((enabledValue == 'null') ? null : enabledValue) : 1; disabledValue = (disabledValue != null) ? ((disabledValue == 'null') ? null : disabledValue) : 0; @@ -876,7 +876,7 @@ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, { graph.stopEditing(); } - + if (action != null) { action.funct(); @@ -894,7 +894,7 @@ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, { fn(temp, value); } - + ui.fireEvent(new mxEventObject('styleChanged', 'keys', [key], 'values', [value], 'cells', temp)); } @@ -911,7 +911,7 @@ BaseFormatPanel.prototype.createCellOption = function(label, key, defaultValue, { apply(mxUtils.getValue(style, key, defaultValue) != disabledValue); }; - + graph.getModel().addListener(mxEvent.CHANGE, this.listener); }, destroy: function() @@ -933,15 +933,15 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol div.style.overflow = 'hidden'; div.style.width = '200px'; div.style.height = '18px'; - + var cb = document.createElement('input'); cb.setAttribute('type', 'checkbox'); - cb.style.margin = '1px 6px 0px 0px'; + // cb.style.margin = '1px 6px 0px 0px'; cb.style.verticalAlign = 'top'; - + if (!hideCheckbox) { - div.appendChild(cb); + div.appendChild(cb); } var span = document.createElement('span'); @@ -979,7 +979,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol var name = ColorDialog.prototype.colorNames[clr]; btn.setAttribute('title', (name != null) ? name + ' (' + title + ')' : title); } - + if (color != null && color != mxConstants.NONE) { cb.setAttribute('checked', 'checked'); @@ -992,7 +992,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol cb.defaultChecked = false; cb.checked = false; } - + btn.style.display = (cb.checked || hideCheckbox) ? '' : 'none'; if (callbackFn != null) @@ -1010,11 +1010,11 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol setColorFn(value == 'null' ? null : value, value); } } - + applying = false; } }; - + var clrInput = document.createElement('input'); clrInput.setAttribute('type', 'color'); clrInput.style.visibility = 'hidden'; @@ -1031,7 +1031,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol { color = defaultColorValue; } - + if (mxEvent.isShiftDown(evt) && !mxClient.IS_IE && !mxClient.IS_IE11) { clrInput.value = color; @@ -1052,7 +1052,7 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol mxEvent.consume(evt); })); - + btn.style.position = 'absolute'; btn.style.marginTop = '-3px'; btn.style.left = '178px'; @@ -1068,15 +1068,15 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol mxEvent.addListener(div, 'click', function(evt) { var source = mxEvent.getSource(evt); - + if (source == cb || source.nodeName != 'INPUT') - { + { // Toggles checkbox state for click on label if (source != cb) { cb.checked = !cb.checked; } - + // Overrides default value with current value to make it easier // to restore previous value if the checkbox is clicked twice if (!cb.checked && value != null && value != mxConstants.NONE && @@ -1084,41 +1084,41 @@ BaseFormatPanel.prototype.createColorOption = function(label, getColorFn, setCol { defaultColor = value; } - + apply((cb.checked) ? defaultColor : mxConstants.NONE); } }); - + apply(value, true); - + if (listener != null) { listener.install(apply); this.listeners.push(listener); } - + return div; }; /** - * + * */ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defaultColor, callbackFn, setStyleFn, defaultColorValue) { var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - + return this.createColorOption(label, function() { // Seems to be null sometimes, not sure why... var state = graph.view.getState(ui.getSelectionState().cells[0]); - + if (state != null) { return mxUtils.getValue(state.style, colorKey, null); } - + return null; }, function(color, realValue) { @@ -1132,7 +1132,7 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa { setStyleFn(color); } - + ui.fireEvent(new mxEventObject('styleChanged', 'keys', [colorKey], 'values', [color], 'cells', cells)); } @@ -1148,13 +1148,13 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa { // Seems to be null sometimes, not sure why... var state = graph.view.getState(ui.getSelectionState().cells[0]); - + if (state != null) { apply(mxUtils.getValue(state.style, colorKey, null), true); } }; - + graph.getModel().addListener(mxEvent.CHANGE, this.listener); }, destroy: function() @@ -1165,19 +1165,19 @@ BaseFormatPanel.prototype.createCellColorOption = function(label, colorKey, defa }; /** - * + * */ BaseFormatPanel.prototype.addArrow = function(elt, height) { height = (height != null) ? height : 10; - + var arrow = document.createElement('div'); arrow.style.display = 'inline-block'; arrow.style.paddingRight = '4px'; arrow.style.padding = '6px'; - + var m = (10 - height); - + if (m == 2) { arrow.style.paddingTop = 6 + 'px'; @@ -1190,7 +1190,7 @@ BaseFormatPanel.prototype.addArrow = function(elt, height) { arrow.style.marginTop = '-2px'; } - + arrow.style.height = height + 'px'; arrow.style.borderLeft = '1px solid #a0a0a0'; @@ -1205,9 +1205,9 @@ BaseFormatPanel.prototype.addArrow = function(elt, height) img.style.left = '1px'; img.style.top = (mxClient.IS_FF) ? '0px' : '-4px'; mxUtils.setOpacity(arrow, 70); - + var symbol = elt.getElementsByTagName('div')[0]; - + if (symbol != null) { symbol.style.paddingRight = '6px'; @@ -1224,19 +1224,19 @@ BaseFormatPanel.prototype.addArrow = function(elt, height) elt.style.width = 'auto'; elt.className += ' geColorBtn'; mxUtils.setPrefixedStyle(elt.style, 'borderRadius', '3px'); - + elt.appendChild(arrow); - + return symbol; }; /** - * + * */ BaseFormatPanel.prototype.addUnitInput = function(container, unit, right, width, update, step, marginTop, disableFocus, isFloat) { marginTop = (marginTop != null) ? marginTop : 0; - + var input = document.createElement('input'); input.style.position = 'absolute'; input.style.textAlign = 'right'; @@ -1249,7 +1249,7 @@ BaseFormatPanel.prototype.addUnitInput = function(container, unit, right, width, input.style.boxSizing = 'border-box'; container.appendChild(input); - + var stepper = this.createStepper(input, update, step, null, disableFocus, null, isFloat); stepper.style.marginTop = (marginTop - 2) + 'px'; stepper.style.left = (228 - right) + 'px'; @@ -1259,12 +1259,12 @@ BaseFormatPanel.prototype.addUnitInput = function(container, unit, right, width, }; /** - * + * */ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, handler, init) { width = (width != null) ? width : 52; - + var ui = this.editorUi; var graph = ui.editor.graph; var div = this.createPanel(); @@ -1272,7 +1272,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han div.style.paddingBottom = '10px'; mxUtils.write(div, label); div.style.fontWeight = 'bold'; - + var update = mxUtils.bind(this, function(evt) { if (handler != null) @@ -1284,7 +1284,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han var value = parseInt(input.value); value = Math.min(100, Math.max(0, (isNaN(value)) ? 100 : value)); var state = graph.view.getState(ui.getSelectionState().cells[0]); - + if (state != null && value != mxUtils.getValue(state.style, key, 100)) { // Removes entry in style (assumes 100 is default for relative values) @@ -1292,16 +1292,16 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han { value = null; } - + var cells = ui.getSelectionState().cells; graph.setCellStyles(key, value, cells); this.editorUi.fireEvent(new mxEventObject('styleChanged', 'keys', [key], 'values', [value], 'cells', cells)); } - + input.value = ((value != null) ? value : '100') + ' %'; } - + mxEvent.consume(evt); }); @@ -1318,7 +1318,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han input.value = (isNaN(tmp)) ? '' : tmp + ' %'; } }); - + mxEvent.addListener(input, 'keydown', function(e) { if (e.keyCode == 13) @@ -1333,7 +1333,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han mxEvent.consume(e); } }); - + graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); @@ -1341,7 +1341,7 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han mxEvent.addListener(input, 'blur', update); mxEvent.addListener(input, 'change', update); - + if (init != null) { init(input); @@ -1351,12 +1351,12 @@ BaseFormatPanel.prototype.createRelativeOption = function(label, key, width, han }; /** - * + * */ BaseFormatPanel.prototype.addLabel = function(div, title, right, width) { width = (width != null) ? width : 61; - + var label = document.createElement('div'); mxUtils.write(label, title); label.style.position = 'absolute'; @@ -1368,7 +1368,7 @@ BaseFormatPanel.prototype.addLabel = function(div, title, right, width) }; /** - * + * */ BaseFormatPanel.prototype.addKeyHandler = function(input, listener) { @@ -1383,7 +1383,7 @@ BaseFormatPanel.prototype.addKeyHandler = function(input, listener) { if (listener != null) { - listener(null, null, true); + listener(null, null, true); } this.editorUi.editor.graph.container.focus(); @@ -1393,7 +1393,7 @@ BaseFormatPanel.prototype.addKeyHandler = function(input, listener) }; /** - * + * */ BaseFormatPanel.prototype.styleButtons = function(elts) { @@ -1424,7 +1424,7 @@ BaseFormatPanel.prototype.destroy = function() { this.listeners[i].destroy(); } - + this.listeners = null; } }; @@ -1450,23 +1450,23 @@ ArrangePanel.prototype.init = function() if (ss.cells.length > 0) { this.container.appendChild(this.addLayerOps(this.createPanel())); - + // Special case that adds two panels this.addGeometry(this.container); this.addEdgeGeometry(this.container); - + if (!ss.containsLabel || ss.edges.length == 0) { this.container.appendChild(this.addAngle(this.createPanel())); } - + if (!ss.containsLabel) { this.container.appendChild(this.addFlip(this.createPanel())); } this.container.appendChild(this.addAlign(this.createPanel())); - + if (ss.vertices.length > 1 && !ss.cell && !ss.row) { this.container.appendChild(this.addDistribute(this.createPanel())); @@ -1475,7 +1475,7 @@ ArrangePanel.prototype.init = function() this.container.appendChild(this.addTable(this.createPanel())); this.container.appendChild(this.addGroupOps(this.createPanel())); } - + if (ss.containsLabel) { // Adds functions from hidden style format panel @@ -1486,13 +1486,13 @@ ArrangePanel.prototype.init = function() span.style.padding = '10px 0 0 14px'; mxUtils.write(span, mxResources.get('style')); this.container.appendChild(span); - + new StyleFormatPanel(this.format, this.editorUi, this.container); } }; /** - * + * */ ArrangePanel.prototype.addTable = function(div) { @@ -1509,7 +1509,7 @@ ArrangePanel.prototype.addTable = function(div) span.style.fontWeight = 'bold'; mxUtils.write(span, mxResources.get('table')); div.appendChild(span); - + var panel = document.createElement('div'); panel.style.position = 'relative'; panel.style.paddingLeft = '0px'; @@ -1703,41 +1703,41 @@ ArrangePanel.prototype.addTable = function(div) { div.style.display = 'none'; } - + return div; }; /** - * + * */ ArrangePanel.prototype.addLayerOps = function(div) { this.addActions(div, ['toFront', 'toBack']); this.addActions(div, ['bringForward', 'sendBackward']); - + return div; }; /** - * + * */ ArrangePanel.prototype.addGroupOps = function(div) { var ui = this.editorUi; var graph = ui.editor.graph; var ss = ui.getSelectionState(); - + div.style.paddingTop = '8px'; div.style.paddingBottom = '6px'; var count = 0; - + if (!ss.cell && !ss.row) { count += this.addActions(div, ['group', 'ungroup', 'copySize', 'pasteSize']) + this.addActions(div, ['removeFromGroup']); } - + var copyBtn = null; if (ss.cells.length == 1 && ss.cells[0].value != null && !isNaN(ss.cells[0].value.nodeType)) @@ -1761,7 +1761,7 @@ ArrangePanel.prototype.addGroupOps = function(div) ui.actions.get('copyData').funct(evt); } }); - + copyBtn.setAttribute('title', mxResources.get('copyData') + ' (' + this.editorUi.actions.get('copyData').shortcut + ')' + ' Shift+Click to Extract Data'); @@ -1772,14 +1772,14 @@ ArrangePanel.prototype.addGroupOps = function(div) } var pasteBtn = null; - + if (ui.copiedValue != null && ss.cells.length > 0) { pasteBtn = mxUtils.button(mxResources.get('pasteData'), function(evt) { ui.actions.get('pasteData').funct(evt); }); - + pasteBtn.setAttribute('title', mxResources.get('pasteData') + ' (' + this.editorUi.actions.get('pasteData').shortcut + ')'); pasteBtn.style.marginBottom = '2px'; @@ -1801,7 +1801,7 @@ ArrangePanel.prototype.addGroupOps = function(div) { mxUtils.br(div); } - + var clearWaypoints = this.addAction(div, 'clearWaypoints'); if (clearWaypoints != null) @@ -1817,17 +1817,17 @@ ArrangePanel.prototype.addGroupOps = function(div) { count += this.addActions(div, ['editData', 'editLink']); } - + if (count == 0) { div.style.display = 'none'; } - + return div; }; /** - * + * */ ArrangePanel.prototype.addAlign = function(div) { @@ -1836,7 +1836,7 @@ ArrangePanel.prototype.addAlign = function(div) div.style.paddingTop = '6px'; div.style.paddingBottom = '8px'; div.appendChild(this.createTitle(mxResources.get('align'))); - + var stylePanel = document.createElement('div'); stylePanel.style.position = 'relative'; stylePanel.style.whiteSpace = 'nowrap'; @@ -1861,19 +1861,19 @@ ArrangePanel.prototype.addAlign = function(div) function() { graph.alignCells(mxConstants.ALIGN_MIDDLE); }, stylePanel); var bottom = this.editorUi.toolbar.addButton('geSprite-alignbottom', mxResources.get('bottom'), function() { graph.alignCells(mxConstants.ALIGN_BOTTOM); }, stylePanel); - + this.styleButtons([left, center, right, top, middle, bottom]); right.style.marginRight = '10px'; } div.appendChild(stylePanel); this.addActions(div, ['snapToGrid']); - + return div; }; /** - * + * */ ArrangePanel.prototype.addFlip = function(div) { @@ -1890,31 +1890,31 @@ ArrangePanel.prototype.addFlip = function(div) span.style.fontWeight = 'bold'; mxUtils.write(span, mxResources.get('flip')); div.appendChild(span); - + var btn = mxUtils.button(mxResources.get('horizontal'), function(evt) { graph.flipCells(ss.cells, true); }) - + btn.setAttribute('title', mxResources.get('horizontal')); btn.style.width = '104px'; btn.style.marginRight = '2px'; div.appendChild(btn); - + var btn = mxUtils.button(mxResources.get('vertical'), function(evt) { graph.flipCells(ss.cells, false); }) - + btn.setAttribute('title', mxResources.get('vertical')); btn.style.width = '104px'; div.appendChild(btn); - + return div; }; /** - * + * */ ArrangePanel.prototype.addDistribute = function(div) { @@ -1923,33 +1923,33 @@ ArrangePanel.prototype.addDistribute = function(div) var graph = editor.graph; div.style.paddingTop = '6px'; div.style.paddingBottom = '12px'; - + div.appendChild(this.createTitle(mxResources.get('distribute'))); var btn = mxUtils.button(mxResources.get('horizontal'), function(evt) { graph.distributeCells(true); }) - + btn.setAttribute('title', mxResources.get('horizontal')); btn.style.width = '104px'; btn.style.marginRight = '2px'; div.appendChild(btn); - + var btn = mxUtils.button(mxResources.get('vertical'), function(evt) { graph.distributeCells(false); }) - + btn.setAttribute('title', mxResources.get('vertical')); btn.style.width = '104px'; div.appendChild(btn); - + return div; }; /** - * + * */ ArrangePanel.prototype.addAngle = function(div) { @@ -1959,27 +1959,27 @@ ArrangePanel.prototype.addAngle = function(div) var ss = ui.getSelectionState(); div.style.paddingBottom = '8px'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '70px'; span.style.marginTop = '0px'; span.style.fontWeight = 'bold'; - + var input = null; var update = null; var btn = null; - + if (ss.rotatable && !ss.table && !ss.row && !ss.cell) { mxUtils.write(span, mxResources.get('angle')); div.appendChild(span); - + input = this.addUnitInput(div, '°', 16, 52, function() { update.apply(this, arguments); }); - + mxUtils.br(div); div.style.paddingTop = '10px'; } @@ -1991,7 +1991,7 @@ ArrangePanel.prototype.addAngle = function(div) if (!ss.containsLabel) { var label = mxResources.get('reverse'); - + if (ss.vertices.length > 0 && ss.edges.length > 0) { label = mxResources.get('turn') + ' / ' + label; @@ -2005,17 +2005,17 @@ ArrangePanel.prototype.addAngle = function(div) { ui.actions.get('turn').funct(evt); }) - + btn.setAttribute('title', label + ' (' + this.editorUi.actions.get('turn').shortcut + ')'); btn.style.width = '210px'; div.appendChild(btn); - + if (input != null) { btn.style.marginTop = '8px'; } } - + if (input != null) { var listener = mxUtils.bind(this, function(sender, evt, force) @@ -2027,10 +2027,10 @@ ArrangePanel.prototype.addAngle = function(div) input.value = (isNaN(tmp)) ? '' : tmp + '°'; } }); - + update = this.installInputHandler(input, mxConstants.STYLE_ROTATION, 0, 0, 360, '°', null, true); this.addKeyHandler(input, listener); - + graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); @@ -2042,7 +2042,7 @@ ArrangePanel.prototype.addAngle = function(div) BaseFormatPanel.prototype.getUnit = function() { var unit = this.editorUi.editor.graph.view.unit; - + switch(unit) { case mxConstants.POINTS: @@ -2064,7 +2064,7 @@ BaseFormatPanel.prototype.inUnit = function(pixels) BaseFormatPanel.prototype.fromUnit = function(value) { var unit = this.editorUi.editor.graph.view.unit; - + switch(unit) { case mxConstants.POINTS: @@ -2086,7 +2086,7 @@ BaseFormatPanel.prototype.isFloatUnit = function() BaseFormatPanel.prototype.getUnitStep = function() { var unit = this.editorUi.editor.graph.view.unit; - + switch(unit) { case mxConstants.POINTS: @@ -2101,7 +2101,7 @@ BaseFormatPanel.prototype.getUnitStep = function() }; /** - * + * */ ArrangePanel.prototype.addGeometry = function(container) { @@ -2113,7 +2113,7 @@ ArrangePanel.prototype.addGeometry = function(container) var div = this.createPanel(); div.style.paddingBottom = '8px'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '50px'; @@ -2131,7 +2131,7 @@ ArrangePanel.prototype.addGeometry = function(container) { heightUpdate.apply(this, arguments); }, this.getUnitStep(), null, null, this.isFloatUnit()); - + var autosizeBtn = document.createElement('div'); autosizeBtn.className = 'geSprite geSprite-fit'; autosizeBtn.setAttribute('title', mxResources.get('autosize') + ' (' + this.editorUi.actions.get('autosize').shortcut + ')'); @@ -2141,12 +2141,12 @@ ArrangePanel.prototype.addGeometry = function(container) autosizeBtn.style.border = '0px'; autosizeBtn.style.left = '42px'; mxUtils.setOpacity(autosizeBtn, 50); - + mxEvent.addListener(autosizeBtn, 'mouseenter', function() { mxUtils.setOpacity(autosizeBtn, 100); }); - + mxEvent.addListener(autosizeBtn, 'mouseleave', function() { mxUtils.setOpacity(autosizeBtn, 50); @@ -2156,9 +2156,9 @@ ArrangePanel.prototype.addGeometry = function(container) { ui.actions.get('autosize').funct(); }); - + div.appendChild(autosizeBtn); - + if (rect.row) { width.style.visibility = 'hidden'; @@ -2168,7 +2168,7 @@ ArrangePanel.prototype.addGeometry = function(container) { this.addLabel(div, mxResources.get('width'), 87); } - + this.addLabel(div, mxResources.get('height'), 16); mxUtils.br(div); @@ -2181,7 +2181,7 @@ ArrangePanel.prototype.addGeometry = function(container) mxConstants.STYLE_ASPECT, null, 'fixed', 'null'); opt.style.width = '210px'; wrapper.appendChild(opt); - + if (!rect.cell && !rect.row) { div.appendChild(wrapper); @@ -2190,29 +2190,29 @@ ArrangePanel.prototype.addGeometry = function(container) { autosizeBtn.style.visibility = 'hidden'; } - + var constrainCheckbox = opt.getElementsByTagName('input')[0]; this.addKeyHandler(width, listener); this.addKeyHandler(height, listener); - + widthUpdate = this.addGeometryHandler(width, function(geo, value, cell) { if (graph.isTableCell(cell)) { graph.setTableColumnWidth(cell, value - geo.width, true); - + // Blocks processing in caller return true; } else if (geo.width > 0) { var value = Math.max(1, panel.fromUnit(value)); - + if (constrainCheckbox.checked) { geo.height = Math.round((geo.height * value * 100) / geo.width) / 100; } - + geo.width = value; } }); @@ -2222,35 +2222,35 @@ ArrangePanel.prototype.addGeometry = function(container) { cell = graph.model.getParent(cell); } - + if (graph.isTableRow(cell)) { graph.setTableRowHeight(cell, value - geo.height); - + // Blocks processing in caller return true; } else if (geo.height > 0) { var value = Math.max(1, panel.fromUnit(value)); - + if (constrainCheckbox.checked) { geo.width = Math.round((geo.width * value * 100) / geo.height) / 100; } - + geo.height = value; } }); - + if (rect.resizable || rect.row || rect.cell) { container.appendChild(div); } - + var div2 = this.createPanel(); div2.style.paddingBottom = '30px'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '70px'; @@ -2258,7 +2258,7 @@ ArrangePanel.prototype.addGeometry = function(container) span.style.fontWeight = 'bold'; mxUtils.write(span, mxResources.get('position')); div2.appendChild(span); - + var left = this.addUnitInput(div2, this.getUnit(), 87, 52, function() { leftUpdate.apply(this, arguments); @@ -2272,7 +2272,7 @@ ArrangePanel.prototype.addGeometry = function(container) this.addLabel(div2, mxResources.get('left'), 87); this.addLabel(div2, mxResources.get('top'), 16); - + var listener = mxUtils.bind(this, function(sender, evt, force) { rect = ui.getSelectionState(); @@ -2281,12 +2281,12 @@ ArrangePanel.prototype.addGeometry = function(container) rect.width != null && rect.height != null) { div.style.display = ''; - + if (force || document.activeElement != width) { width.value = this.inUnit(rect.width) + ((rect.width == '') ? '' : ' ' + this.getUnit()); } - + if (force || document.activeElement != height) { height.value = this.inUnit(rect.height) + ((rect.height == '') ? '' : ' ' + this.getUnit()); @@ -2296,17 +2296,17 @@ ArrangePanel.prototype.addGeometry = function(container) { div.style.display = 'none'; } - + if (rect.vertices.length == graph.getSelectionCount() && rect.x != null && rect.y != null) { div2.style.display = ''; - + if (force || document.activeElement != left) { left.value = this.inUnit(rect.x) + ((rect.x == '') ? '' : ' ' + this.getUnit()); } - + if (force || document.activeElement != top) { top.value = this.inUnit(rect.y) + ((rect.y == '') ? '' : ' ' + this.getUnit()); @@ -2324,11 +2324,11 @@ ArrangePanel.prototype.addGeometry = function(container) model.addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { model.removeListener(listener); }}); listener(); - + leftUpdate = this.addGeometryHandler(left, function(geo, value) { value = panel.fromUnit(value); - + if (geo.relative) { geo.offset.x = value; @@ -2341,7 +2341,7 @@ ArrangePanel.prototype.addGeometry = function(container) topUpdate = this.addGeometryHandler(top, function(geo, value) { value = panel.fromUnit(value); - + if (geo.relative) { geo.offset.y = value; @@ -2358,7 +2358,7 @@ ArrangePanel.prototype.addGeometry = function(container) model.isEdge(model.getParent(rect.vertices[0]))) { var geo = graph.getCellGeometry(rect.vertices[0]); - + if (geo != null && geo.relative) { var btn = mxUtils.button(mxResources.get('center'), mxUtils.bind(this, function(evt) @@ -2377,7 +2377,7 @@ ArrangePanel.prototype.addGeometry = function(container) model.endUpdate(); } })); - + btn.setAttribute('title', mxResources.get('center')); btn.style.width = '210px'; btn.style.position = 'absolute'; @@ -2391,7 +2391,7 @@ ArrangePanel.prototype.addGeometry = function(container) }; /** - * + * */ ArrangePanel.prototype.addGeometryHandler = function(input, fn) { @@ -2399,14 +2399,14 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) var graph = ui.editor.graph; var initialValue = null; var panel = this; - + function update(evt) { if (input.value != '') { var value = parseFloat(input.value); - if (isNaN(value)) + if (isNaN(value)) { input.value = initialValue + ' ' + panel.getUnit(); } @@ -2416,26 +2416,26 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) try { var cells = ui.getSelectionState().cells; - + for (var i = 0; i < cells.length; i++) { if (graph.getModel().isVertex(cells[i])) { var geo = graph.getCellGeometry(cells[i]); - + if (geo != null) { geo = geo.clone(); - + if (!fn(geo, value, cells[i])) { var state = graph.view.getState(cells[i]); - + if (state != null && graph.isRecursiveVertexResize(state)) { graph.resizeChildCells(cells[i], geo); } - + graph.getModel().setGeometry(cells[i], geo); graph.constrainChildCells(cells[i]); } @@ -2447,12 +2447,12 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) { graph.getModel().endUpdate(); } - + initialValue = value; input.value = value + ' ' + panel.getUnit(); } } - + mxEvent.consume(evt); }; @@ -2462,7 +2462,7 @@ ArrangePanel.prototype.addGeometryHandler = function(input, fn) { initialValue = input.value; }); - + return update; }; @@ -2529,7 +2529,7 @@ ArrangePanel.prototype.addEdgeGeometryHandler = function(input, fn) }; /** - * + * */ ArrangePanel.prototype.addEdgeGeometry = function(container) { @@ -2537,7 +2537,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) var graph = ui.editor.graph; var rect = ui.getSelectionState(); var div = this.createPanel(); - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '70px'; @@ -2554,13 +2554,13 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) mxUtils.br(div); this.addKeyHandler(width, listener); - + var widthUpdate = mxUtils.bind(this, function(evt) { // Maximum stroke width is 999 var value = parseInt(width.value); value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value)); - + if (value != mxUtils.getValue(rect.style, 'width', mxCellRenderer.defaultShapes['flexArrow'].prototype.defaultWidth)) { var cells = ui.getSelectionState().cells; @@ -2634,11 +2634,11 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) { rect = ui.getSelectionState(); var cell = rect.cells[0]; - + if (rect.style.shape == 'link' || rect.style.shape == 'flexArrow') { div.style.display = ''; - + if (force || document.activeElement != width) { var value = mxUtils.getValue(rect.style, 'width', @@ -2654,7 +2654,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) if (rect.cells.length == 1 && graph.model.isEdge(cell)) { var geo = graph.model.getGeometry(cell); - + if (geo.sourcePoint != null && graph.model.getTerminal(cell, true) == null) { xs.value = geo.sourcePoint.x; @@ -2664,7 +2664,7 @@ ArrangePanel.prototype.addEdgeGeometry = function(container) { divs.style.display = 'none'; } - + if (geo.targetPoint != null && graph.model.getTerminal(cell, false) == null) { xt.value = geo.targetPoint.x; @@ -2736,7 +2736,7 @@ TextFormatPanel.prototype.addFont = function(container) var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); - + var title = this.createTitle(mxResources.get('font')); title.style.paddingLeft = '14px'; title.style.paddingTop = '10px'; @@ -2750,11 +2750,11 @@ TextFormatPanel.prototype.addFont = function(container) stylePanel.style.marginLeft = '-2px'; stylePanel.style.borderWidth = '0px'; stylePanel.className = 'geToolbarContainer'; - + if (graph.cellEditor.isContentEditing()) { var cssPanel = stylePanel.cloneNode(); - + var cssMenu = this.editorUi.toolbar.addMenu(mxResources.get('style'), mxResources.get('style'), true, 'formatBlock', cssPanel, null, true); cssMenu.style.color = 'rgb(112, 112, 112)'; @@ -2764,49 +2764,49 @@ TextFormatPanel.prototype.addFont = function(container) this.addArrow(cssMenu); cssMenu.style.width = '200px'; cssMenu.style.height = '15px'; - + var arrow = cssMenu.getElementsByTagName('div')[0]; arrow.style.cssFloat = 'right'; container.appendChild(cssPanel); } - + container.appendChild(stylePanel); - + var colorPanel = this.createPanel(); colorPanel.style.marginTop = '8px'; colorPanel.style.borderTop = '1px solid #c0c0c0'; colorPanel.style.paddingTop = '6px'; colorPanel.style.paddingBottom = '6px'; - + var fontMenu = this.editorUi.toolbar.addMenu('Helvetica', mxResources.get('fontFamily'), true, 'fontFamily', stylePanel, null, true); fontMenu.style.color = 'rgb(112, 112, 112)'; fontMenu.style.whiteSpace = 'nowrap'; fontMenu.style.overflow = 'hidden'; fontMenu.style.margin = '0px'; - + this.addArrow(fontMenu); fontMenu.style.width = '200px'; fontMenu.style.height = '15px'; - + var stylePanel2 = stylePanel.cloneNode(false); stylePanel2.style.marginLeft = '-3px'; var fontStyleItems = this.editorUi.toolbar.addItems(['bold', 'italic', 'underline'], stylePanel2, true); fontStyleItems[0].setAttribute('title', mxResources.get('bold') + ' (' + this.editorUi.actions.get('bold').shortcut + ')'); fontStyleItems[1].setAttribute('title', mxResources.get('italic') + ' (' + this.editorUi.actions.get('italic').shortcut + ')'); fontStyleItems[2].setAttribute('title', mxResources.get('underline') + ' (' + this.editorUi.actions.get('underline').shortcut + ')'); - + var verticalItem = this.editorUi.toolbar.addItems(['vertical'], stylePanel2, true)[0]; - + container.appendChild(stylePanel2); this.styleButtons(fontStyleItems); this.styleButtons([verticalItem]); - + var stylePanel3 = stylePanel.cloneNode(false); stylePanel3.style.marginLeft = '-3px'; stylePanel3.style.paddingBottom = '0px'; - + // Helper function to return a wrapper function does not pass any arguments var callFn = function(fn) { @@ -2815,7 +2815,7 @@ TextFormatPanel.prototype.addFont = function(container) return fn(); }; }; - + var left = this.editorUi.toolbar.addButton('geSprite-left', mxResources.get('left'), (graph.cellEditor.isContentEditing()) ? function(evt) @@ -2848,7 +2848,7 @@ TextFormatPanel.prototype.addFont = function(container) } : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT])), stylePanel3); this.styleButtons([left, center, right]); - + // Quick hack for strikethrough // TODO: Add translations and toggle state if (graph.cellEditor.isContentEditing()) @@ -2866,7 +2866,7 @@ TextFormatPanel.prototype.addFont = function(container) this.styleButtons([strike]); } - + var top = this.editorUi.toolbar.addButton('geSprite-top', mxResources.get('top'), callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP])), stylePanel3); @@ -2876,22 +2876,22 @@ TextFormatPanel.prototype.addFont = function(container) var bottom = this.editorUi.toolbar.addButton('geSprite-bottom', mxResources.get('bottom'), callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM])), stylePanel3); - + this.styleButtons([top, middle, bottom]); - + container.appendChild(stylePanel3); - + // Hack for updating UI state below based on current text selection // currentTable is the current selected DOM table updated below var sub, sup, full, tableWrapper, currentTable, tableCell, tableRow; - + if (graph.cellEditor.isContentEditing()) { top.style.display = 'none'; middle.style.display = 'none'; bottom.style.display = 'none'; verticalItem.style.display = 'none'; - + full = this.editorUi.toolbar.addButton('geSprite-justifyfull', mxResources.get('block'), function() { @@ -2916,7 +2916,7 @@ TextFormatPanel.prototype.addFont = function(container) document.execCommand('superscript', false, null); }, stylePanel3)]); sub.style.marginLeft = '10px'; - + var tmp = stylePanel3.cloneNode(false); tmp.style.paddingTop = '4px'; var btns = [this.editorUi.toolbar.addButton('geSprite-orderedlist', mxResources.get('numberedList'), @@ -2951,7 +2951,7 @@ TextFormatPanel.prototype.addFont = function(container) }, tmp)]; this.styleButtons(btns); btns[btns.length - 2].style.marginLeft = '10px'; - + container.appendChild(tmp); } else @@ -2959,16 +2959,16 @@ TextFormatPanel.prototype.addFont = function(container) fontStyleItems[2].style.marginRight = '12px'; right.style.marginRight = '12px'; } - + // Label position var stylePanel4 = stylePanel.cloneNode(false); stylePanel4.style.marginLeft = '0px'; stylePanel4.style.paddingTop = '8px'; stylePanel4.style.paddingBottom = '4px'; stylePanel4.style.fontWeight = 'normal'; - + mxUtils.write(stylePanel4, mxResources.get('position')); - + // Adds label position options var positionSelect = document.createElement('select'); positionSelect.style.position = 'absolute'; @@ -2977,7 +2977,7 @@ TextFormatPanel.prototype.addFont = function(container) positionSelect.style.border = '1px solid rgb(160, 160, 160)'; positionSelect.style.borderRadius = '4px'; positionSelect.style.marginTop = '-2px'; - + var directions = ['topLeft', 'top', 'topRight', 'left', 'center', 'right', 'bottomLeft', 'bottom', 'bottomRight']; var lset = {'topLeft': [mxConstants.ALIGN_LEFT, mxConstants.ALIGN_TOP, mxConstants.ALIGN_RIGHT, mxConstants.ALIGN_BOTTOM], 'top': [mxConstants.ALIGN_CENTER, mxConstants.ALIGN_TOP, mxConstants.ALIGN_CENTER, mxConstants.ALIGN_BOTTOM], @@ -2998,7 +2998,7 @@ TextFormatPanel.prototype.addFont = function(container) } stylePanel4.appendChild(positionSelect); - + // Writing direction var stylePanel5 = stylePanel.cloneNode(false); stylePanel5.style.marginLeft = '0px'; @@ -3007,7 +3007,7 @@ TextFormatPanel.prototype.addFont = function(container) stylePanel5.style.fontWeight = 'normal'; mxUtils.write(stylePanel5, mxResources.get('writingDirection')); - + // Adds writing direction options // LATER: Handle reselect of same option in all selects (change event // is not fired for same option so have opened state on click) and @@ -3036,18 +3036,18 @@ TextFormatPanel.prototype.addFont = function(container) } stylePanel5.appendChild(dirSelect); - + if (!graph.isEditing()) { container.appendChild(stylePanel4); - + mxEvent.addListener(positionSelect, 'change', function(evt) { graph.getModel().beginUpdate(); try { var vals = lset[positionSelect.value]; - + if (vals != null) { graph.setCellStyles(mxConstants.STYLE_LABEL_POSITION, vals[0], ss.cells); @@ -3060,14 +3060,14 @@ TextFormatPanel.prototype.addFont = function(container) { graph.getModel().endUpdate(); } - + mxEvent.consume(evt); }); // LATER: Update dir in text editor while editing and update style with label // NOTE: The tricky part is handling and passing on the auto value container.appendChild(stylePanel5); - + mxEvent.addListener(dirSelect, 'change', function(evt) { graph.setCellStyles(mxConstants.STYLE_TEXT_DIRECTION, dirSet[dirSelect.value], ss.cells); @@ -3087,7 +3087,7 @@ TextFormatPanel.prototype.addFont = function(container) input.style.height = '23px'; input.style.boxSizing = 'border-box'; stylePanel2.appendChild(input); - + // Workaround for font size 4 if no text is selected is update font size below // after first character was entered (as the font element is lazy created) var pendingFontSize = null; @@ -3117,7 +3117,7 @@ TextFormatPanel.prototype.addFont = function(container) else { var css = mxUtils.getCurrentStyle(elt); - + if (css.fontSize != fontSize + 'px') { if (mxUtils.getCurrentStyle(elt.parentNode).fontSize != fontSize + 'px') @@ -3136,7 +3136,7 @@ TextFormatPanel.prototype.addFont = function(container) 'keys', [mxConstants.STYLE_FONTSIZE], 'values', [fontSize], 'cells', ss.cells)); }; - + // Wraps text node or mixed selection with leading text in a font element if (container == graph.cellEditor.textarea || container.nodeType != mxConstants.NODETYPE_ELEMENT) @@ -3148,12 +3148,12 @@ TextFormatPanel.prototype.addFont = function(container) { container = container.parentNode; } - + if (container != null && container.nodeType == mxConstants.NODETYPE_ELEMENT) { var elts = container.getElementsByTagName('*'); updateSize(container); - + for (var i = 0; i < elts.length; i++) { updateSize(elts[i]); @@ -3166,7 +3166,7 @@ TextFormatPanel.prototype.addFont = function(container) { // Checks selection var par = null; - + if (document.selection) { par = document.selection.createRange().parentElement(); @@ -3174,13 +3174,13 @@ TextFormatPanel.prototype.addFont = function(container) else { var selection = window.getSelection(); - + if (selection.rangeCount > 0) { par = selection.getRangeAt(0).commonAncestorContainer; } } - + // Node.contains does not work for text nodes in IE11 function isOrContains(container, node) { @@ -3190,28 +3190,28 @@ TextFormatPanel.prototype.addFont = function(container) { return true; } - + node = node.parentNode; } - + return false; }; - + if (par != null && isOrContains(graph.cellEditor.textarea, par)) { pendingFontSize = fontSize; - + // Workaround for can't set font size in px is to change font size afterwards document.execCommand('fontSize', false, '4'); var elts = graph.cellEditor.textarea.getElementsByTagName('font'); - + for (var i = 0; i < elts.length; i++) { if (elts[i].getAttribute('size') == '4') { elts[i].removeAttribute('size'); elts[i].style.fontSize = pendingFontSize + 'px'; - + // Overrides fontSize in input with the one just assigned as a workaround // for potential fontSize values of parent elements that don't match window.setTimeout(function() @@ -3219,30 +3219,30 @@ TextFormatPanel.prototype.addFont = function(container) input.value = pendingFontSize + ' pt'; pendingFontSize = null; }, 0); - + break; } } } } }, true); - + var stepper = this.createStepper(input, inputUpdate, 1, 10, true, Menus.prototype.defaultFontSize); stepper.style.display = input.style.display; stepper.style.marginTop = '4px'; stepper.style.left = '214px'; - + stylePanel2.appendChild(stepper); - + var arrow = fontMenu.getElementsByTagName('div')[0]; arrow.style.cssFloat = 'right'; - + var bgColorApply = null; var currentBgColor = graph.shapeBackgroundColor; - + var fontColorApply = null; var currentFontColor = graph.shapeForegroundColor; - + var bgPanel = (graph.cellEditor.isContentEditing()) ? this.createColorOption(mxResources.get('backgroundColor'), function() { return currentBgColor; @@ -3270,7 +3270,7 @@ TextFormatPanel.prototype.addFont = function(container) mxConstants.STYLE_LABEL_BORDERCOLOR, 'default', null, null, graph.shapeForegroundColor); borderPanel.style.fontWeight = 'bold'; - + var defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); @@ -3360,7 +3360,7 @@ TextFormatPanel.prototype.addFont = function(container) { bgPanel.style.display = ''; } - + borderPanel.style.display = bgPanel.style.display; }, function(color) { @@ -3372,7 +3372,7 @@ TextFormatPanel.prototype.addFont = function(container) { graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, ss.cells); } - + graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, color, ss.cells); graph.updateLabelElements(ss.cells, function(elt) @@ -3382,51 +3382,51 @@ TextFormatPanel.prototype.addFont = function(container) }); }, graph.shapeForegroundColor); panel.style.fontWeight = 'bold'; - + colorPanel.appendChild(panel); colorPanel.appendChild(bgPanel); - + if (!graph.cellEditor.isContentEditing()) { colorPanel.appendChild(borderPanel); } - + container.appendChild(colorPanel); var extraPanel = this.createPanel(); extraPanel.style.paddingTop = '2px'; extraPanel.style.paddingBottom = '4px'; - + var wwCells = graph.filterSelectionCells(mxUtils.bind(this, function(cell) { var state = graph.view.getState(cell); - + return state == null || graph.isAutoSizeState(state) || graph.getModel().isEdge(cell) || (!graph.isTableRow(cell) && !graph.isTableCell(cell) && !graph.isCellResizable(cell)); })); - + var wwOpt = this.createCellOption(mxResources.get('wordWrap'), mxConstants.STYLE_WHITE_SPACE, null, 'wrap', 'null', null, null, true, wwCells); wwOpt.style.fontWeight = 'bold'; - + // Word wrap in edge labels only supported via labelWidth style if (wwCells.length > 0) { extraPanel.appendChild(wwOpt); } - + // Delegates switch of style to formattedText action as it also convertes newlines var htmlOpt = this.createCellOption(mxResources.get('formattedText'), 'html', 0, null, null, null, ui.actions.get('formattedText')); htmlOpt.style.fontWeight = 'bold'; extraPanel.appendChild(htmlOpt); - + var spacingPanel = this.createPanel(); spacingPanel.style.paddingTop = '10px'; spacingPanel.style.paddingBottom = '28px'; spacingPanel.style.fontWeight = 'normal'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.width = '70px'; @@ -3468,7 +3468,7 @@ TextFormatPanel.prototype.addFont = function(container) this.addLabel(spacingPanel, mxResources.get('left'), 158); this.addLabel(spacingPanel, mxResources.get('bottom'), 87); this.addLabel(spacingPanel, mxResources.get('right'), 16); - + if (!graph.cellEditor.isContentEditing()) { container.appendChild(extraPanel); @@ -3479,7 +3479,7 @@ TextFormatPanel.prototype.addFont = function(container) { var selState = null; var lineHeightInput = null; - + container.appendChild(this.createRelativeOption(mxResources.get('lineheight'), null, null, function(input) { var value = (input.value == '') ? 120 : parseInt(input.value); @@ -3490,37 +3490,37 @@ TextFormatPanel.prototype.addFont = function(container) graph.cellEditor.restoreSelection(selState); selState = null; } - + var selectedElement = graph.getSelectedElement(); var node = selectedElement; - + while (node != null && node.nodeType != mxConstants.NODETYPE_ELEMENT) { node = node.parentNode; } - + if (node != null && node == graph.cellEditor.textarea && graph.cellEditor.textarea.firstChild != null) { if (graph.cellEditor.textarea.firstChild.nodeName != 'P') { graph.cellEditor.textarea.innerHTML = '

' + 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() @@ -3530,7 +3530,7 @@ TextFormatPanel.prototype.addFont = function(container) selState = graph.cellEditor.saveSelection(); } }); - + mxEvent.addListener(input, 'touchstart', function() { if (document.activeElement == graph.cellEditor.textarea) @@ -3538,10 +3538,10 @@ TextFormatPanel.prototype.addFont = function(container) 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); @@ -3551,24 +3551,24 @@ TextFormatPanel.prototype.addFont = function(container) function() { document.execCommand('inserthorizontalrule', false); - }, insertPanel), + }, 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() @@ -3662,7 +3662,7 @@ TextFormatPanel.prototype.addFont = function(container) }), tablePanel)]; this.styleButtons(btns); btns[2].style.marginRight = '10px'; - + var wrapper3 = this.createPanel(); wrapper3.style.paddingTop = '10px'; wrapper3.style.paddingBottom = '10px'; @@ -3671,7 +3671,7 @@ TextFormatPanel.prototype.addFont = function(container) 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) @@ -3687,12 +3687,12 @@ TextFormatPanel.prototype.addFont = function(container) 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'); @@ -3722,12 +3722,12 @@ TextFormatPanel.prototype.addFont = function(container) 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 = ''; @@ -3745,7 +3745,7 @@ TextFormatPanel.prototype.addFont = function(container) 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) @@ -3787,20 +3787,20 @@ TextFormatPanel.prototype.addFont = function(container) }, 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 = ui.getSelectionState(); @@ -3811,26 +3811,26 @@ TextFormatPanel.prototype.addFont = function(container) 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'; @@ -3867,9 +3867,9 @@ TextFormatPanel.prototype.addFont = function(container) { 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'; @@ -3882,7 +3882,7 @@ TextFormatPanel.prototype.addFont = function(container) { dirSelect.value = 'automatic'; } - + if (force || document.activeElement != globalSpacing) { var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2)); @@ -3894,19 +3894,19 @@ TextFormatPanel.prototype.addFont = function(container) 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)); @@ -3930,17 +3930,17 @@ TextFormatPanel.prototype.addFont = function(container) 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(); @@ -3952,7 +3952,7 @@ TextFormatPanel.prototype.addFont = function(container) 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; @@ -3968,11 +3968,11 @@ TextFormatPanel.prototype.addFont = function(container) return ''; } }; - + function getAbsoluteFontSize(css) { var fontSize = (css != null) ? css.fontSize : null; - + if (fontSize != null && fontSize.substring(fontSize.length - 2) == 'px') { return parseFloat(fontSize); @@ -3982,7 +3982,7 @@ TextFormatPanel.prototype.addFont = function(container) return mxConstants.DEFAULT_FONTSIZE; } }; - + var css = mxUtils.getCurrentStyle(node); var fontSize = getAbsoluteFontSize(css); var lineHeight = getRelativeLineHeight(fontSize, css, node); @@ -4002,7 +4002,7 @@ TextFormatPanel.prototype.addFont = function(container) temp = mxUtils.getCurrentStyle(elts[i]); fontSize = Math.max(getAbsoluteFontSize(temp), fontSize); var lh = getRelativeLineHeight(fontSize, temp, elts[i]); - + if (lh != lineHeight || isNaN(lh)) { lineHeight = ''; @@ -4010,7 +4010,7 @@ TextFormatPanel.prototype.addFont = function(container) } } } - + function hasParentOrOnlyChild(name) { if (graph.getParentByName(node, name, graph.cellEditor.textarea) != null) @@ -4020,21 +4020,21 @@ TextFormatPanel.prototype.addFont = function(container) 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) @@ -4048,10 +4048,10 @@ TextFormatPanel.prototype.addFont = function(container) return str.substring(str.length - value.length - 1, str.length) == '-' + value; } } - + return false; }; - + if (css != null) { setSelected(fontStyleItems[0], css.fontWeight == 'bold' || @@ -4062,7 +4062,7 @@ TextFormatPanel.prototype.addFont = function(container) 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); @@ -4089,12 +4089,12 @@ TextFormatPanel.prototype.addFont = function(container) 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' && @@ -4108,9 +4108,9 @@ TextFormatPanel.prototype.addFont = function(container) { input.value = (isNaN(fontSize)) ? '' : fontSize + ' pt'; } - + var lh = parseFloat(lineHeight); - + if (!isNaN(lh)) { lineHeightInput.value = Math.round(lh * 100) + ' %'; @@ -4120,7 +4120,7 @@ TextFormatPanel.prototype.addFont = function(container) lineHeightInput.value = '100 %'; } } - + // Updates the color picker for the current font if (fontColorApply != null) { @@ -4136,7 +4136,7 @@ TextFormatPanel.prototype.addFont = function(container) fontColorApply(currentFontColor, true); } - + if (bgColorApply != null) { if (css.backgroundColor == 'rgba(0, 0, 0, 0)' || @@ -4148,10 +4148,10 @@ TextFormatPanel.prototype.addFont = function(container) { currentBgColor = mxUtils.rgba2hex(css.backgroundColor); } - + bgColorApply(currentBgColor, true); } - + // Workaround for firstChild is null or not an object // in the log which seems to be IE8- only / 29.01.15 if (fontMenu.firstChild != null) @@ -4160,17 +4160,17 @@ TextFormatPanel.prototype.addFont = function(container) } } } - + 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); @@ -4197,7 +4197,7 @@ StyleFormatPanel = function(format, editorUi, container) mxUtils.extend(StyleFormatPanel, BaseFormatPanel); /** - * + * */ StyleFormatPanel.prototype.defaultStrokeColor = 'black'; @@ -4210,7 +4210,7 @@ StyleFormatPanel.prototype.init = function() var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); - + if (!ss.containsLabel && ss.cells.length > 0) { if (ss.containsImage && ss.vertices.length == 1 && ss.style.shape == 'image' && @@ -4223,7 +4223,7 @@ StyleFormatPanel.prototype.init = function() { 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); @@ -4232,14 +4232,14 @@ StyleFormatPanel.prototype.init = function() 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)); }; @@ -4250,10 +4250,10 @@ 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; }; @@ -4273,23 +4273,23 @@ StyleFormatPanel.prototype.addSvgStyles = function(container) 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); @@ -4302,7 +4302,7 @@ StyleFormatPanel.prototype.addSvgStyles = function(container) { // ignore } - + return container; }; @@ -4313,23 +4313,23 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem { 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() @@ -4339,15 +4339,15 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem { rules[ruleIndex].style[key] = color; var cssTxt = ''; - - for (var i = 0; i < rules.length; i++) + + 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)), ui.getSelectionState().cells); @@ -4362,14 +4362,14 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem // 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')); @@ -4383,31 +4383,31 @@ StyleFormatPanel.prototype.addEditOps = function(div) { var ss = this.editorUi.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'; @@ -4418,10 +4418,10 @@ StyleFormatPanel.prototype.addEditOps = function(div) btn2.style.width = '104px'; btn2.style.marginLeft = '2px'; } - + div.appendChild(btn2); } - + return div; }; @@ -4447,9 +4447,9 @@ StyleFormatPanel.prototype.addFill = function(container) 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) { @@ -4459,7 +4459,7 @@ StyleFormatPanel.prototype.addFill = function(container) { mxEvent.consume(evt); }); - + var defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); @@ -4505,9 +4505,9 @@ StyleFormatPanel.prototype.addFill = function(container) 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'); @@ -4515,7 +4515,7 @@ StyleFormatPanel.prototype.addFill = function(container) mxUtils.write(fillStyleOption, Editor.roughFillStyles[i].dispName); fillStyleSelect.appendChild(fillStyleOption); } - + fillPanel.appendChild(fillStyleSelect); var listener = mxUtils.bind(this, function() @@ -4523,19 +4523,19 @@ StyleFormatPanel.prototype.addFill = function(container) ss = ui.getSelectionState(); var value = mxUtils.getValue(ss.style, mxConstants.STYLE_GRADIENT_DIRECTION, mxConstants.DIRECTION_SOUTH); var fillStyle = mxUtils.getValue(ss.style, 'fillStyle', 'auto'); - + // Handles empty string which is not allowed as a value if (value == '') { value = mxConstants.DIRECTION_SOUTH; } - + gradientSelect.value = value; fillStyleSelect.value = fillStyle; container.style.display = (ss.fill) ? '' : 'none'; - + var fillColor = mxUtils.getValue(ss.style, fillKey, null); - + if (!ss.fill || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge') { fillStyleSelect.style.display = 'none'; @@ -4548,7 +4548,7 @@ StyleFormatPanel.prototype.addFill = function(container) fillStyle == 'solid' || fillStyle == 'auto')) ? '' : 'none'; } }); - + graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); @@ -4560,7 +4560,7 @@ StyleFormatPanel.prototype.addFill = function(container) 'values', [gradientSelect.value], 'cells', ss.cells)); mxEvent.consume(evt); }); - + mxEvent.addListener(fillStyleSelect, 'change', function(evt) { graph.setCellStyles('fillStyle', fillStyleSelect.value, ss.cells); @@ -4568,18 +4568,18 @@ StyleFormatPanel.prototype.addFill = function(container) '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; }; @@ -4590,13 +4590,13 @@ StyleFormatPanel.prototype.getCustomColors = function() { var ss = this.editorUi.getSelectionState(); var result = []; - + if (ss.swimlane) { result.push({title: mxResources.get('laneColor'), key: 'swimlaneFillColor', defaultValue: 'default'}); } - + return result; }; @@ -4608,19 +4608,19 @@ StyleFormatPanel.prototype.addStroke = function(container) var ui = this.editorUi; var graph = ui.editor.graph; var ss = ui.getSelectionState(); - + container.style.paddingTop = '6px'; container.style.paddingBottom = '4px'; container.style.whiteSpace = 'normal'; - + var colorPanel = document.createElement('div'); colorPanel.style.fontWeight = 'bold'; - + if (!ss.stroke) { colorPanel.style.display = 'none'; } - + // Adds gradient direction option var styleSelect = document.createElement('select'); styleSelect.style.position = 'absolute'; @@ -4642,7 +4642,7 @@ StyleFormatPanel.prototype.addStroke = function(container) mxUtils.write(styleOption, mxResources.get(styles[i])); styleSelect.appendChild(styleOption); } - + mxEvent.addListener(styleSelect, 'change', function(evt) { graph.getModel().beginUpdate(); @@ -4651,7 +4651,7 @@ StyleFormatPanel.prototype.addStroke = function(container) var keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED]; // Default for rounded is 1 var values = ['0', null]; - + if (styleSelect.value == 'rounded') { values = ['1', null]; @@ -4660,12 +4660,12 @@ StyleFormatPanel.prototype.addStroke = function(container) { 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)); } @@ -4673,10 +4673,10 @@ StyleFormatPanel.prototype.addStroke = function(container) { graph.getModel().endUpdate(); } - + mxEvent.consume(evt); }); - + // Stops events from bubbling to color option event handler mxEvent.addListener(styleSelect, 'click', function(evt) { @@ -4690,10 +4690,10 @@ StyleFormatPanel.prototype.addStroke = function(container) { 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'; @@ -4709,7 +4709,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -4719,7 +4719,7 @@ StyleFormatPanel.prototype.addStroke = function(container) item.firstChild.firstChild.style.padding = '0px 4px 0px 4px'; item.firstChild.firstChild.style.width = width + 'px'; item.firstChild.firstChild.appendChild(pat); - + return item; }); @@ -4731,16 +4731,16 @@ StyleFormatPanel.prototype.addStroke = function(container) 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')); + 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) @@ -4751,7 +4751,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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 @@ -4766,9 +4766,9 @@ StyleFormatPanel.prototype.addStroke = function(container) 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); @@ -4777,7 +4777,7 @@ StyleFormatPanel.prototype.addStroke = function(container) // 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); @@ -4794,7 +4794,7 @@ StyleFormatPanel.prototype.addStroke = function(container) // 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); @@ -4818,13 +4818,13 @@ StyleFormatPanel.prototype.addStroke = function(container) 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') @@ -4835,12 +4835,12 @@ StyleFormatPanel.prototype.addStroke = function(container) 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')); } })); @@ -4922,7 +4922,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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)'); @@ -4986,22 +4986,22 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5029,7 +5029,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5037,10 +5037,10 @@ StyleFormatPanel.prototype.addStroke = function(container) 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() { @@ -5052,15 +5052,15 @@ StyleFormatPanel.prototype.addStroke = function(container) }); 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() { @@ -5075,7 +5075,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5084,7 +5084,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5094,7 +5094,7 @@ StyleFormatPanel.prototype.addStroke = function(container) span.style.width = '120px'; mxUtils.write(span, mxResources.get('perimeter')); perimeterPanel.appendChild(span); - + var perimeterUpdate; var perimeterSpacing = this.addUnitInput(perimeterPanel, 'pt', 30, 52, function() { @@ -5110,7 +5110,7 @@ StyleFormatPanel.prototype.addStroke = function(container) { container.appendChild(perimeterPanel); } - + var listener = mxUtils.bind(this, function(sender, evt, force) { ss = ui.getSelectionState(); @@ -5120,15 +5120,15 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'; @@ -5137,7 +5137,7 @@ StyleFormatPanel.prototype.addStroke = function(container) { styleSelect.value = 'rounded'; } - + if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1') { if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null) @@ -5153,21 +5153,21 @@ StyleFormatPanel.prototype.addStroke = function(container) { 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'; @@ -5197,10 +5197,10 @@ StyleFormatPanel.prototype.addStroke = function(container) edgeStyleDiv.className = 'geSprite geSprite-orthogonal'; } } - + // Updates icon for edge shape var edgeShapeDiv = edgeShape.getElementsByTagName('div')[0]; - + if (edgeShapeDiv != null) { if (ss.style.shape == 'link') @@ -5220,7 +5220,7 @@ StyleFormatPanel.prototype.addStroke = function(container) edgeShapeDiv.className = 'geSprite geSprite-connection'; } } - + if (ss.edges.length == ss.cells.length) { altStylePanel.style.display = ''; @@ -5241,7 +5241,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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); @@ -5265,10 +5265,10 @@ StyleFormatPanel.prototype.addStroke = function(container) 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), @@ -5289,8 +5289,8 @@ StyleFormatPanel.prototype.addStroke = function(container) } } - mxUtils.setOpacity(edgeStyle, (ss.style.shape == 'arrow') ? 30 : 100); - + 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); @@ -5307,7 +5307,7 @@ StyleFormatPanel.prototype.addStroke = function(container) 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)); @@ -5319,20 +5319,20 @@ StyleFormatPanel.prototype.addStroke = function(container) 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'); @@ -5362,21 +5362,21 @@ StyleFormatPanel.prototype.addLineJumps = function(container) var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); - + if (Graph.lineJumpsEnabled && ss.edges.length > 0 && ss.vertices.length == 0 && ss.lineJumps) { container.style.padding = '2px 0px 24px 14px'; - + var span = document.createElement('div'); span.style.position = 'absolute'; span.style.maxWidth = '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'; @@ -5397,7 +5397,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container) mxUtils.write(styleOption, mxResources.get(styles[i])); styleSelect.appendChild(styleOption); } - + mxEvent.addListener(styleSelect, 'change', function(evt) { graph.getModel().beginUpdate(); @@ -5411,28 +5411,28 @@ StyleFormatPanel.prototype.addLineJumps = function(container) { 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 = ui.getSelectionState(); @@ -5455,7 +5455,7 @@ StyleFormatPanel.prototype.addLineJumps = function(container) { container.style.display = 'none'; } - + return container; }; @@ -5468,7 +5468,7 @@ StyleFormatPanel.prototype.addEffects = function(div) var editor = ui.editor; var graph = editor.graph; var ss = ui.getSelectionState(); - + div.style.paddingTop = '4px'; div.style.paddingBottom = '0px'; @@ -5484,7 +5484,7 @@ StyleFormatPanel.prototype.addEffects = function(div) left.style.padding = '0px'; left.style.width = '50%'; left.setAttribute('valign', 'top'); - + var right = left.cloneNode(true); right.style.paddingLeft = '8px'; row.appendChild(left); @@ -5495,7 +5495,7 @@ StyleFormatPanel.prototype.addEffects = function(div) var current = left; var count = 0; - + var addOption = mxUtils.bind(this, function(label, key, defaultValue) { var opt = this.createCellOption(label, key, defaultValue); @@ -5508,16 +5508,16 @@ StyleFormatPanel.prototype.addEffects = function(div) var listener = mxUtils.bind(this, function(sender, evt, force) { ss = ui.getSelectionState(); - + left.innerHTML = ''; right.innerHTML = ''; current = left; - + if (ss.rounded) { addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0); } - + if (ss.swimlane) { addOption(mxResources.get('divider'), 'swimlaneLine', 1); @@ -5527,7 +5527,7 @@ StyleFormatPanel.prototype.addEffects = function(div) { addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0); } - + if (ss.glass) { addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0); @@ -5535,7 +5535,7 @@ StyleFormatPanel.prototype.addEffects = function(div) addOption(mxResources.get('sketch'), 'sketch', 0); }); - + graph.getModel().addListener(mxEvent.CHANGE, listener); this.listeners.push({destroy: function() { graph.getModel().removeListener(listener); }}); listener(); @@ -5605,21 +5605,21 @@ DiagramStylePanel.prototype.addView = function(div) var opts = document.createElement('div'); 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'; @@ -5635,7 +5635,7 @@ DiagramStylePanel.prototype.addView = function(div) }, function(checked) { sketch = checked; - + if (checked) { graph.currentEdgeStyle['sketch'] = '1'; @@ -5646,18 +5646,18 @@ DiagramStylePanel.prototype.addView = function(div) delete graph.currentEdgeStyle['sketch']; delete graph.currentVertexStyle['sketch']; } - + graph.updateCellStyles({'sketch': (checked) ? '1' : null}, graph.getVerticesAndEdges()); }, null, function(div) { div.style.width = 'auto'; })); } - + row.appendChild(right); tbody.appendChild(row); table.appendChild(tbody); - + // Rounded right.appendChild(this.createOption(mxResources.get('rounded'), function() { @@ -5665,7 +5665,7 @@ DiagramStylePanel.prototype.addView = function(div) }, function(checked) { rounded = checked; - + if (checked) { graph.currentEdgeStyle['rounded'] = '1'; @@ -5676,13 +5676,13 @@ DiagramStylePanel.prototype.addView = function(div) delete graph.currentEdgeStyle['rounded']; delete graph.currentVertexStyle['rounded']; } - + graph.updateCellStyles({'rounded': (checked) ? '1' : '0'}, graph.getVerticesAndEdges()); }, null, function(div) { div.style.width = 'auto'; })); - + // Curved if (urlParams['sketch'] != '1') { @@ -5699,7 +5699,7 @@ DiagramStylePanel.prototype.addView = function(div) }, function(checked) { curved = checked; - + if (checked) { graph.currentEdgeStyle['curved'] = '1'; @@ -5708,7 +5708,7 @@ DiagramStylePanel.prototype.addView = function(div) { delete graph.currentEdgeStyle['curved']; } - + graph.updateCellStyles({'curved': (checked) ? '1' : null}, graph.getVerticesAndEdges(false, true)); }, null, function(div) { @@ -5720,25 +5720,25 @@ DiagramStylePanel.prototype.addView = function(div) 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; @@ -5752,7 +5752,7 @@ DiagramStylePanel.prototype.addView = function(div) newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]); } } - + model.setStyle(cells[i], newStyle); } } @@ -5761,7 +5761,7 @@ DiagramStylePanel.prototype.addView = function(div) model.endUpdate(); } }); - + var removeStyles = mxUtils.bind(this, function(style, styles, defaultStyle) { if (style != null) @@ -5790,21 +5790,21 @@ DiagramStylePanel.prototype.addView = function(div) { 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 && @@ -5817,13 +5817,13 @@ DiagramStylePanel.prototype.addView = function(div) } } }); - + if (urlParams['sketch'] != '1') { var btn = mxUtils.button(mxResources.get('reset'), mxUtils.bind(this, function(evt) { var all = graph.getVerticesAndEdges(true, true); - + if (all.length > 0) { model.beginUpdate(); @@ -5837,16 +5837,16 @@ DiagramStylePanel.prototype.addView = function(div) 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 @@ -5858,7 +5858,7 @@ DiagramStylePanel.prototype.addView = function(div) div.style.width = '100%'; div.style.height = '100%'; container.appendChild(div); - + var graph2 = new Graph(div, null, null, graph.getStylesheet()); graph2.resetViewOnRootChange = false; @@ -5869,24 +5869,24 @@ DiagramStylePanel.prototype.addView = function(div) graph2.setConnectable(false); graph2.setPanning(false); graph2.setEnabled(false); - + graph2.getCellStyle = function(cell, resolve) { resolve = (resolve != null) ? resolve : true; var result = mxUtils.clone(graph.getCellStyle.apply(this, arguments)); var defaultStyle = graph.stylesheet.getDefaultVertexStyle(); var appliedStyle = vertexStyle; - + if (model.isEdge(cell)) { defaultStyle = graph.stylesheet.getDefaultEdgeStyle(); - appliedStyle = edgeStyle; + appliedStyle = edgeStyle; } - + removeStyles(result, defaultStyles, defaultStyle); applyStyle(commonStyle, result, cell, graphStyle, graph2); applyStyle(appliedStyle, result, cell, graphStyle, graph2); - + if (resolve) { result = graph.postProcessCellStyle(cell, result); @@ -5894,7 +5894,7 @@ DiagramStylePanel.prototype.addView = function(div) return result; }; - + // Avoid HTML labels to capture events in bubble phase graph2.model.beginUpdate(); try @@ -5910,12 +5910,12 @@ DiagramStylePanel.prototype.addView = function(div) graph2.model.endUpdate(); } }); - + // Entries var entries = document.createElement('div'); entries.style.position = 'relative'; div.appendChild(entries); - + // Cached entries if (this.format.cachedStyleEntries == null) { @@ -5935,7 +5935,7 @@ DiagramStylePanel.prototype.addView = function(div) var addEntry = mxUtils.bind(this, function(commonStyle, vertexStyle, edgeStyle, graphStyle, index) { var panel = this.format.cachedStyleEntries[index]; - + if (panel == null) { panel = document.createElement('div'); @@ -5948,14 +5948,14 @@ DiagramStylePanel.prototype.addView = function(div) 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); - + + createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel); + mxEvent.addGestureListeners(panel, mxUtils.bind(this, function(evt) { panel.style.opacity = 0.5; @@ -5964,7 +5964,7 @@ DiagramStylePanel.prototype.addView = function(div) 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); @@ -5974,7 +5974,7 @@ DiagramStylePanel.prototype.addView = function(div) { sketch = Editor.sketchMode; } - + if (sketch) { graph.currentEdgeStyle['sketch'] = '1'; @@ -5985,7 +5985,7 @@ DiagramStylePanel.prototype.addView = function(div) graph.currentEdgeStyle['sketch'] = '0'; graph.currentVertexStyle['sketch'] = '0'; } - + if (rounded) { graph.currentVertexStyle['rounded'] = '1'; @@ -5996,7 +5996,7 @@ DiagramStylePanel.prototype.addView = function(div) graph.currentVertexStyle['rounded'] = '0'; graph.currentEdgeStyle['rounded'] = '1'; } - + if (curved) { graph.currentEdgeStyle['curved'] = '1'; @@ -6005,16 +6005,16 @@ DiagramStylePanel.prototype.addView = function(div) { graph.currentEdgeStyle['curved'] = '0'; } - + model.beginUpdate(); try { updateCells(addKeys(commonStyle, defaultStyles.slice()), 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 : gridColor)); @@ -6024,77 +6024,77 @@ DiagramStylePanel.prototype.addView = function(div) 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 : gridColor; - + graph.getCellStyle = function(cell, resolve) { resolve = (resolve != null) ? resolve : true; var result = mxUtils.clone(prev.apply(this, arguments)); - + var defaultStyle = graph.stylesheet.getDefaultVertexStyle(); var appliedStyle = vertexStyle; - + if (model.isEdge(cell)) { defaultStyle = graph.stylesheet.getDefaultEdgeStyle(); - appliedStyle = edgeStyle; + appliedStyle = edgeStyle; } - + removeStyles(result, defaultStyles, defaultStyle); applyStyle(commonStyle, result, cell, graphStyle); applyStyle(appliedStyle, result, cell, graphStyle); - + if (resolve) { result = this.postProcessCellStyle(cell, result); } - + return result; }; - + graph.refresh(); graph.getCellStyle = prev; graph.background = prevBg; graph.view.gridColor = prevGrid; })); - + mxEvent.addListener(panel, 'mouseleave', mxUtils.bind(this, function(evt) { graph.refresh(); })); - + // Workaround for broken cache in IE11 if (!mxClient.IS_IE && !mxClient.IS_IE11) { this.format.cachedStyleEntries[index] = panel; } } - + entries.appendChild(panel); }); - + // Maximum palettes to switch the switcher var maxEntries = 10; var pageCount = Math.ceil(Editor.styles.length / maxEntries); this.format.currentStylePage = (this.format.currentStylePage != null) ? this.format.currentStylePage : 0; var dots = []; - + var addEntries = mxUtils.bind(this, function() { if (dots.length > 0) { dots[this.format.currentStylePage].style.background = '#84d7ff'; } - + for (var i = this.format.currentStylePage * maxEntries; i < Math.min((this.format.currentStylePage + 1) * maxEntries, Editor.styles.length); i++) @@ -6103,7 +6103,7 @@ DiagramStylePanel.prototype.addView = function(div) addEntry(s.commonStyle, s.vertexStyle, s.edgeStyle, s.graph, i); } }); - + var selectPage = mxUtils.bind(this, function(index) { if (index >= 0 && index < pageCount) @@ -6114,7 +6114,7 @@ DiagramStylePanel.prototype.addView = function(div) addEntries(); } }); - + if (pageCount > 1) { // Selector @@ -6124,9 +6124,9 @@ DiagramStylePanel.prototype.addView = function(div) 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'); @@ -6139,7 +6139,7 @@ DiagramStylePanel.prototype.addView = function(div) 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() @@ -6147,14 +6147,14 @@ DiagramStylePanel.prototype.addView = function(div) selectPage(index); })); }))(i, dot); - + switcher.appendChild(dot); dots.push(dot); } - + div.appendChild(switcher); addEntries(); - + if (pageCount < 15) { var left = document.createElement('div'); @@ -6171,12 +6171,12 @@ DiagramStylePanel.prototype.addView = function(div) 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 = ''; @@ -6184,17 +6184,17 @@ DiagramStylePanel.prototype.addView = function(div) 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) { @@ -6207,7 +6207,7 @@ DiagramStylePanel.prototype.addView = function(div) elt.style.opacity = '0.5'; }); }; - + addHoverState(left); addHoverState(right); } @@ -6216,7 +6216,7 @@ DiagramStylePanel.prototype.addView = function(div) { addEntries(); } - + return div; }; @@ -6226,14 +6226,14 @@ DiagramStylePanel.prototype.addView = function(div) 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. */ @@ -6282,12 +6282,12 @@ 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) { @@ -6305,7 +6305,7 @@ DiagramFormatPanel.prototype.addView = function(div) { apply(graph.pageVisible); }; - + ui.addListener('pageViewChanged', this.listener); }, destroy: function() @@ -6314,7 +6314,7 @@ DiagramFormatPanel.prototype.addView = function(div) } })); } - + if (graph.isEnabled()) { // Background @@ -6326,7 +6326,7 @@ DiagramFormatPanel.prototype.addView = function(div) var change = new ChangePageSetup(ui, color); change.ignoreImage = color != null && color != mxConstants.NONE; - + graph.model.execute(change); }, '#ffffff', { @@ -6336,7 +6336,7 @@ DiagramFormatPanel.prototype.addView = function(div) { apply(graph.background); }; - + ui.addListener('backgroundColorChanged', this.listener); }, destroy: function() @@ -6344,7 +6344,7 @@ DiagramFormatPanel.prototype.addView = function(div) ui.removeListener(this.listener); } }); - + if (this.showBackgroundImageOption) { var label = bg.getElementsByTagName('span')[0]; @@ -6363,20 +6363,20 @@ DiagramFormatPanel.prototype.addView = function(div) 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; }; @@ -6388,8 +6388,8 @@ DiagramFormatPanel.prototype.addOptions = function(div) var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - - div.appendChild(this.createTitle(mxResources.get('options'))); + + div.appendChild(this.createTitle(mxResources.get('options'))); if (graph.isEnabled()) { @@ -6408,7 +6408,7 @@ DiagramFormatPanel.prototype.addOptions = function(div) { apply(graph.connectionArrowsEnabled); }; - + ui.addListener('connectionArrowsChanged', this.listener); }, destroy: function() @@ -6416,7 +6416,7 @@ DiagramFormatPanel.prototype.addOptions = function(div) ui.removeListener(this.listener); } })); - + // Connection points div.appendChild(this.createOption(mxResources.get('connectionPoints'), function() { @@ -6432,7 +6432,7 @@ DiagramFormatPanel.prototype.addOptions = function(div) { apply(graph.connectionHandler.isEnabled()); }; - + ui.addListener('connectionPointsChanged', this.listener); }, destroy: function() @@ -6456,7 +6456,7 @@ DiagramFormatPanel.prototype.addOptions = function(div) { apply(graph.graphHandler.guidesEnabled); }; - + ui.addListener('guidesEnabledChanged', this.listener); }, destroy: function() @@ -6470,14 +6470,14 @@ DiagramFormatPanel.prototype.addOptions = function(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'; @@ -6487,8 +6487,8 @@ DiagramFormatPanel.prototype.addGridOption = function(container) 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(); - + 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; @@ -6507,12 +6507,12 @@ DiagramFormatPanel.prototype.addGridOption = function(container) 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; @@ -6538,7 +6538,7 @@ DiagramFormatPanel.prototype.addGridOption = function(container) }, function(color) { var enabled = graph.isGridEnabled(); - + if (color == mxConstants.NONE) { graph.setGridEnabled(false); @@ -6551,7 +6551,7 @@ DiagramFormatPanel.prototype.addGridOption = function(container) input.style.display = (graph.isGridEnabled()) ? '' : 'none'; stepper.style.display = input.style.display; - + if (enabled != graph.isGridEnabled()) { graph.defaultGridEnabled = graph.isGridEnabled(); @@ -6565,7 +6565,7 @@ DiagramFormatPanel.prototype.addGridOption = function(container) { apply((graph.isGridEnabled()) ? graph.view.gridColor : null); }; - + ui.addListener('gridColorChanged', this.listener); ui.addListener('gridEnabledChanged', this.listener); }, @@ -6589,7 +6589,7 @@ DiagramFormatPanel.prototype.addDocumentProperties = function(div) var ui = this.editorUi; var editor = ui.editor; var graph = editor.graph; - + div.appendChild(this.createTitle(mxResources.get('options'))); return div; @@ -6603,7 +6603,7 @@ 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) @@ -6614,31 +6614,31 @@ DiagramFormatPanel.prototype.addPaperSize = function(div) 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); + 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; }; @@ -6659,7 +6659,7 @@ DiagramFormatPanel.prototype.addStyleOps = function(div) DiagramFormatPanel.prototype.destroy = function() { BaseFormatPanel.prototype.destroy.apply(this, arguments); - + if (this.gridEnabledListener) { this.editorUi.removeListener(this.gridEnabledListener);