Skip to content

Commit

Permalink
Revert "enh(map): delete fontSize selector in TextFormatPanel and cha…
Browse files Browse the repository at this point in the history 
…nge the default value to 16 px (#118)" (#123)

This reverts commit e558a76.
  • Loading branch information
@Yassir-BenBOUBKER
Yassir-BenBOUBKER authored Feb 5, 2024
1 parent d6808ef commit 9e3b502
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 32 deletions.
23 changes: 1 addition & 22 deletions src/main/webapp/js/diagramly/Editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5863,30 +5863,9 @@
mxSvgCanvas2D.prototype.updateTextNodes = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, g)
{
mxSvgCanvas2DUpdateTextNodes.apply(this, arguments);

var fo = g.firstChild;
var div = fo.firstChild;
var box = div.firstChild;
var text = box.firstChild;

const style = text.getAttribute('style');
const newStyle = style.replace('font-size: 12px;', 'font-size: 16px;')

text.setAttribute('style', newStyle); // overflow-wrap: anywhere;
Graph.processFontAttributes(g);
};

/**
* Function: plainText
*
* Paints the given text. Possible values for format are empty string for
* plain text and html for HTML markup.
*/
var mxSvgCanvas2DPlainText = mxSvgCanvas2D.prototype.plainText;
mxSvgCanvas2D.prototype.plainText = function(x, y, w, h, str, align, valign, wrap, overflow, clip, rotation, dir)
{
this.state.fontSize = 16;
mxSvgCanvas2DPlainText.apply(this, arguments);
};
/**
* Handles custom fonts in labels.
*/
Expand Down
200 changes: 193 additions & 7 deletions src/main/webapp/js/grapheditor/Format.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2854,16 +2854,14 @@ ArrangePanel.prototype.addEdgeGeometry = function(container)
};

/**
* Adds the label menu items to the given menu and parent. ---- input
* Adds the label menu items to the given menu and parent.
*/
TextFormatPanel = function(format, editorUi, container)
{
BaseFormatPanel.call(this, format, editorUi, container);
this.init();
};



mxUtils.extend(TextFormatPanel, BaseFormatPanel);

/**
Expand Down Expand Up @@ -3183,6 +3181,165 @@ TextFormatPanel.prototype.addFont = function(container)
});

}

// Fontsize
var input = document.createElement('input');
input.style.position = 'absolute';
input.style.border = '1px solid rgb(160, 160, 160)';
input.style.textAlign = 'right';
input.style.marginTop = '4px';
input.style.left = '161px';
input.style.width = '53px';
input.style.borderRadius = '4px';
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;

var inputUpdate = this.installInputHandler(input, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize, 1, 999, ' pt',
function(fontSize)
{
// IE does not support containsNode
// KNOWN: Fixes font size issues but bypasses undo
if (window.getSelection && !mxClient.IS_IE && !mxClient.IS_IE11)
{
var selection = window.getSelection();
var container = (selection.rangeCount > 0) ? selection.getRangeAt(0).commonAncestorContainer :
graph.cellEditor.textarea;

function updateSize(elt, ignoreContains)
{
if (graph.cellEditor.textarea != null && elt != graph.cellEditor.textarea &&
graph.cellEditor.textarea.contains(elt) &&
(ignoreContains || selection.containsNode(elt, true)))
{
if (elt.nodeName == 'FONT')
{
elt.removeAttribute('size');
elt.style.fontSize = fontSize + 'px';
}
else
{
var css = mxUtils.getCurrentStyle(elt);

if (css.fontSize != fontSize + 'px')
{
if (mxUtils.getCurrentStyle(elt.parentNode).fontSize != fontSize + 'px')
{
elt.style.fontSize = fontSize + 'px';
}
else
{
elt.style.fontSize = '';
}
}
}
}

ui.fireEvent(new mxEventObject('styleChanged',
'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)
{
document.execCommand('fontSize', false, '1');
}

if (container != graph.cellEditor.textarea)
{
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]);
}
}

input.value = fontSize + ' pt';
}
else if (window.getSelection || document.selection)
{
// Checks selection
var par = null;

if (document.selection)
{
par = document.selection.createRange().parentElement();
}
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)
{
while (node != null)
{
if (node === 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()
{
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';
Expand Down Expand Up @@ -3636,6 +3793,12 @@ TextFormatPanel.prototype.addFont = function(container)
setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE);
fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTFAMILY, Menus.prototype.defaultFont);

if (force || document.activeElement != input)
{
var tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize));
input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}

const basicShapeCells = ss.cells.filter((cell) => cell.getAttribute('type') === 'SHAPE');

if(basicShapeCells.length !== 0)
Expand Down Expand Up @@ -3731,6 +3894,7 @@ TextFormatPanel.prototype.addFont = function(container)
bottomUpdate = this.installInputHandler(bottomSpacing, mxConstants.STYLE_SPACING_BOTTOM, 0, -999, 999, ' pt');
leftUpdate = this.installInputHandler(leftSpacing, mxConstants.STYLE_SPACING_LEFT, 0, -999, 999, ' pt');

this.addKeyHandler(input, listener);
this.addKeyHandler(globalSpacing, listener);
this.addKeyHandler(topSpacing, listener);
this.addKeyHandler(rightSpacing, listener);
Expand Down Expand Up @@ -3905,6 +4069,32 @@ TextFormatPanel.prototype.addFont = function(container)
tableCell = (currentTable == null) ? null : graph.getParentByNames(node, ['TD', 'TH'], currentTable);
tableWrapper.style.display = (currentTable != null) ? '' : 'none';

if (document.activeElement != input)
{
if (node.nodeName == 'FONT' && node.getAttribute('size') == '4' &&
pendingFontSize != null)
{
node.removeAttribute('size');
node.style.fontSize = pendingFontSize + ' pt';
pendingFontSize = null;
}
else
{
input.value = (isNaN(fontSize)) ? '' : fontSize + ' pt';
}

var lh = parseFloat(lineHeight);

if (!isNaN(lh))
{
lineHeightInput.value = Math.round(lh * 100) + ' %';
}
else
{
lineHeightInput.value = '100 %';
}
}

// Updates the color picker for the current font
if (fontColorApply != null)
{
Expand Down Expand Up @@ -3969,10 +4159,6 @@ TextFormatPanel.prototype.addFont = function(container)
return container;
};

/**
* Adds the label menu items to the given menu and parent. ---- input
*/

/**
* Adds the label menu items to the given menu and parent.
*/
Expand Down
4 changes: 1 addition & 3 deletions src/main/webapp/js/grapheditor/Graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12063,8 +12063,6 @@ if (typeof mxVertexHandler !== 'undefined')
{
this.textarea.className = 'mxCellEditor mxPlainTextEditor';
}

this.textarea.style.fontSize = '16px';

// Toggles markup vs wysiwyg mode
this.codeViewMode = false;
Expand Down Expand Up @@ -12284,7 +12282,7 @@ if (typeof mxVertexHandler !== 'undefined')

content = Graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '<br/>') : content, true)
this.textarea.className = 'mxCellEditor geContentEditable';

var size = mxUtils.getValue(state.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);
var family = mxUtils.getValue(state.style, mxConstants.STYLE_FONTFAMILY, mxConstants.DEFAULT_FONTFAMILY);
var align = mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_LEFT);
Expand Down

0 comments on commit 9e3b502

Please sign in to comment.