Skip to content

Commit

Permalink
Merge branch 'dev' of https://github.com/jgraph/drawio into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
actions-user committed Jan 10, 2024
2 parents a26c609 + ce8063b commit 555e34e
Show file tree
Hide file tree
Showing 30 changed files with 6,950 additions and 8,775 deletions.
10 changes: 10 additions & 0 deletions ChangeLog
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
09-JAN-2023: 21.1.18

- Fixes overridden configurations [drawio-desktop-1564]
- Removes multiple javascript protocol prefixes
- Adds exit menu and fixed isModified detection [drawio-desktop-1222]
- Fixed text replace when search query is " or ' [drawio-desktop-1152]
- Fixes error messages of new files in offline mode [drawio-nextcloud-62]
- Experimental support for vertical writing mode [drawio-4068]
- Fixes relative links in SVG export

04-JAN-2023: 21.1.17

- Adds copyAsText in Edit drop down [drawio-3949]
Expand Down
2 changes: 1 addition & 1 deletion VERSION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
22.1.17
22.1.18
47 changes: 32 additions & 15 deletions src/main/mxgraph/shape/mxText.js
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,31 @@ mxText.prototype.configurePointerEvents = function(c)
// do nothing
};

/**
* Function: getActualTextDirection
*
* Returns the actual text direction.
*/
mxText.prototype.getActualTextDirection = function()
{
var dir = this.textDirection;

if (dir == mxConstants.TEXT_DIRECTION_AUTO)
{
dir = this.getAutoDirection();
}

if (dir != mxConstants.TEXT_DIRECTION_LTR &&
dir != mxConstants.TEXT_DIRECTION_RTL &&
dir != mxConstants.TEXT_DIRECTION_VERTICAL_LR &&
dir != mxConstants.TEXT_DIRECTION_VERTICAL_RL)
{
dir = null;
}

return dir;
};

/**
* Function: paint
*
Expand All @@ -238,11 +263,13 @@ mxText.prototype.paint = function(c, update)

this.updateTransform(c, x, y, w, h);
this.configureCanvas(c, x, y, w, h);

var dir = this.getActualTextDirection();

if (update)
{
c.updateText(x, y, w, h, this.align, this.valign, this.wrap, this.overflow,
this.clipped, this.getTextRotation(), this.node);
this.clipped, this.getTextRotation(), dir, this.node);
}
else
{
Expand All @@ -266,19 +293,7 @@ mxText.prototype.paint = function(c, update)
// Handles trailing newlines to make sure they are visible in rendering output
val = (!mxUtils.isNode(this.value) && this.replaceLinefeeds && fmt == 'html') ?
val.replace(/\n/g, '<br/>') : val;

var dir = this.textDirection;

if (dir == mxConstants.TEXT_DIRECTION_AUTO && !realHtml)
{
dir = this.getAutoDirection();
}

if (dir != mxConstants.TEXT_DIRECTION_LTR && dir != mxConstants.TEXT_DIRECTION_RTL)
{
dir = null;
}


c.text(x, y, w, h, val, this.align, this.valign, this.wrap, fmt,
this.overflow, this.clipped, this.getTextRotation(), dir);
}
Expand Down Expand Up @@ -801,8 +816,9 @@ mxText.prototype.redrawHtmlShapeWithCss3 = function()
var flex = 'position: absolute; left: ' + Math.round(this.bounds.x) + 'px; ' +
'top: ' + Math.round(this.bounds.y) + 'px; pointer-events: none; ';
var block = this.getTextCss();
var dir = this.getActualTextDirection();

mxSvgCanvas2D.createCss(w + 2, h, this.align, this.valign, this.wrap, this.overflow, this.clipped,
mxSvgCanvas2D.createCss(w + 2, h, this.align, this.valign, this.wrap, this.overflow, this.clipped, dir,
(this.background != null) ? mxUtils.htmlEntities(this.background) : null,
(this.border != null) ? mxUtils.htmlEntities(this.border) : null,
flex, block, this.scale, mxUtils.bind(this, function(dx, dy, flex, item, block, ofl)
Expand Down Expand Up @@ -1215,6 +1231,7 @@ mxText.prototype.updateValue = function()

if (divs.length > 0)
{
// LATER: Add vertical writing-mode support
var dir = this.textDirection;

if (dir == mxConstants.TEXT_DIRECTION_AUTO && this.dialect != mxConstants.DIALECT_STRICTHTML)
Expand Down
16 changes: 16 additions & 0 deletions src/main/mxgraph/util/mxConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -2238,6 +2238,22 @@
*/
TEXT_DIRECTION_RTL: 'rtl',

/**
* Variable: TEXT_DIRECTION_VERTICAL_LR
*
* Constant for vertical text direction left to right. Default is ltr.
* Use this value for vertical left to right text direction.
*/
TEXT_DIRECTION_VERTICAL_LR: 'vertical-lr',

/**
* Variable: TEXT_DIRECTION_VERTICAL_RL
*
* Constant for vertical text direction right to left. Default is rtl.
* Use this value for vertical right to left text direction.
*/
TEXT_DIRECTION_VERTICAL_RL: 'vertical-rl',

/**
* Variable: DIRECTION_MASK_NONE
*
Expand Down
53 changes: 39 additions & 14 deletions src/main/mxgraph/util/mxSvgCanvas2D.js
Original file line number Diff line number Diff line change
Expand Up @@ -1602,11 +1602,11 @@ mxSvgCanvas2D.prototype.createDiv = function(str)
/**
* Updates existing DOM nodes for text rendering. LATER: Merge common parts with text function below.
*/
mxSvgCanvas2D.prototype.updateText = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, node)
mxSvgCanvas2D.prototype.updateText = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, dir, node)
{
if (node != null && node.firstChild != null && node.firstChild.firstChild != null)
{
this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, node.firstChild);
this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, dir, node.firstChild);
}
};

Expand All @@ -1632,7 +1632,7 @@ mxSvgCanvas2D.prototype.addForeignObject = function(x, y, w, h, str, align, vali

fo.appendChild(div);
group.appendChild(fo);
this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, group);
this.updateTextNodes(x, y, w, h, align, valign, wrap, overflow, clip, rotation, dir, group);

// Alternate content if foreignObject not supported
if (this.root.ownerDocument != document)
Expand All @@ -1655,18 +1655,19 @@ mxSvgCanvas2D.prototype.addForeignObject = function(x, y, w, h, str, align, vali
/**
* Updates existing DOM nodes for text rendering.
*/
mxSvgCanvas2D.prototype.updateTextNodes = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, g)
mxSvgCanvas2D.prototype.updateTextNodes = function(x, y, w, h, align, valign, wrap, overflow, clip, rotation, dir, g)
{
var s = this.state.scale;

mxSvgCanvas2D.createCss(w + this.foreignObjectPadding, h, align, valign, wrap, overflow, clip,
mxSvgCanvas2D.createCss(w + this.foreignObjectPadding, h, align, valign, wrap, overflow, clip, dir,
(this.state.fontBackgroundColor != null) ? this.state.fontBackgroundColor : null,
(this.state.fontBorderColor != null) ? this.state.fontBorderColor : null,
'display: flex; align-items: unsafe ' +
((valign == mxConstants.ALIGN_TOP) ? 'flex-start' :
((valign == mxConstants.ALIGN_BOTTOM) ? 'flex-end' : 'center')) + '; ' +
'justify-content: unsafe ' + ((align == mxConstants.ALIGN_LEFT) ? 'flex-start' :
((align == mxConstants.ALIGN_RIGHT) ? 'flex-end' : 'center')) + '; ',
((align == mxConstants.ALIGN_RIGHT) ? 'flex-end' : 'center')) + '; ' +
((dir != null && dir.substring(0, 9) == 'vertical-') ? 'writing-mode: ' + dir + ';' : ''),
this.getTextCss(), s, mxUtils.bind(this, function(dx, dy, flex, item, block)
{
x += this.state.dx;
Expand Down Expand Up @@ -1748,10 +1749,11 @@ mxSvgCanvas2D.prototype.updateTextNodes = function(x, y, w, h, align, valign, wr
/**
* Updates existing DOM nodes for text rendering.
*/
mxSvgCanvas2D.createCss = function(w, h, align, valign, wrap, overflow, clip, bg, border, flex, block, s, callback)
mxSvgCanvas2D.createCss = function(w, h, align, valign, wrap, overflow, clip, dir, bg, border, flex, block, s, callback)
{
var item = 'box-sizing: border-box; font-size: 0; text-align: ' + ((align == mxConstants.ALIGN_LEFT) ? 'left' :
((align == mxConstants.ALIGN_RIGHT) ? 'right' : 'center')) + '; ';
var vertical = dir != null && dir.substring(0, 9) == 'vertical-';
var pt = mxUtils.getAlignmentAsPoint(align, valign);
var ofl = 'overflow: hidden; ';
var fw = 'width: 1px; ';
Expand Down Expand Up @@ -1802,7 +1804,15 @@ mxSvgCanvas2D.createCss = function(w, h, align, valign, wrap, overflow, clip, bg
else
{
ofl = '';
dy = 0;

if (vertical)
{
dx =0;
}
else
{
dy = 0;
}
}

var bgc = '';
Expand All @@ -1826,14 +1836,29 @@ mxSvgCanvas2D.createCss = function(w, h, align, valign, wrap, overflow, clip, bg
item += bgc;
}

if (wrap && w > 0)
if (wrap && ((vertical && h > 0) || (!vertical && w > 0)))
{
block += 'white-space: normal; word-wrap: ' + mxConstants.WORD_WRAP + '; ';
fw = 'width: ' + Math.round(w) + 'px; ';


if (vertical)
{
fh = 'height: ' + Math.round(h) + 'px; ';
}
else
{
fw = 'width: ' + Math.round(w) + 'px; ';
}

if (ofl != '' && overflow != 'fill')
{
dy = 0;
if (vertical)
{
dx = 0;
}
else
{
dy = 0;
}
}
}
else
Expand Down Expand Up @@ -1915,7 +1940,7 @@ mxSvgCanvas2D.prototype.text = function(x, y, w, h, str, align, valign, wrap, fo
// Ignores invalid XHTML labels
if (div != null)
{
if (dir != null)
if (dir != null && dir.substring(0, 9) == 'vertical-')
{
div.setAttribute('dir', dir);
}
Expand Down Expand Up @@ -2245,7 +2270,7 @@ mxSvgCanvas2D.prototype.plainText = function(x, y, w, h, str, align, valign, wra
tr += 'rotate(' + rotation + ',' + this.format(x * s.scale) + ',' + this.format(y * s.scale) + ')';
}

if (dir != null)
if (dir != null && dir.substring(0, 9) != 'vertical-')
{
node.setAttribute('direction', dir);
}
Expand Down
26 changes: 19 additions & 7 deletions src/main/mxgraph/view/mxCellEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -700,6 +700,9 @@ mxCellEditor.prototype.resize = function()
// TODO: Fix word wrapping preview for edge labels in helloworld.html
if (this.graph.isWrapping(state.cell) && (this.bounds.width >= 2 || this.bounds.height >= 2))
{
var dir = this.textDirection = mxUtils.getValue(state.style,
mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
var vertical = dir != null && dir.substring(0, 9) == 'vertical-';
this.textarea.style.wordWrap = mxConstants.WORD_WRAP;
this.textarea.style.whiteSpace = 'normal';

Expand Down Expand Up @@ -727,6 +730,10 @@ mxCellEditor.prototype.resize = function()

this.textarea.style.width = tmp + 'px';
}
else if (vertical)
{
this.textarea.style.maxHeight = (this.bounds.height / scale) + 'px';
}
else
{
this.textarea.style.maxWidth = tmp + 'px';
Expand Down Expand Up @@ -865,7 +872,6 @@ mxCellEditor.prototype.isLegacyEditor = function()
*/
mxCellEditor.prototype.updateTextAreaStyle = function(state)
{
var scale = this.graph.getView().scale;
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 color = mxUtils.getValue(state.style, mxConstants.STYLE_FONTCOLOR, 'black');
Expand Down Expand Up @@ -898,6 +904,7 @@ mxCellEditor.prototype.updateTextAreaStyle = function(state)
this.textarea.style.fontFamily = family;
this.textarea.style.textAlign = align;
this.textarea.style.outline = 'none';
this.textarea.style.writingMode = '';
this.textarea.style.color = color;

var borderColor = this.getBorderColor(state);
Expand All @@ -911,24 +918,29 @@ mxCellEditor.prototype.updateTextAreaStyle = function(state)
this.textarea.style.border = 'none';
}

var dir = this.textDirection = mxUtils.getValue(state.style, mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
var dir = this.textDirection = mxUtils.getValue(state.style,
mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
this.textarea.removeAttribute('dir');

if (dir == mxConstants.TEXT_DIRECTION_AUTO)
{
if (state != null && state.text != null && state.text.dialect != mxConstants.DIALECT_STRICTHTML &&
if (state != null && state.text != null &&
state.text.dialect != mxConstants.DIALECT_STRICTHTML &&
!mxUtils.isNode(state.text.value))
{
dir = state.text.getAutoDirection();
}
}

if (dir == mxConstants.TEXT_DIRECTION_LTR || dir == mxConstants.TEXT_DIRECTION_RTL)

if (dir == mxConstants.TEXT_DIRECTION_LTR ||
dir == mxConstants.TEXT_DIRECTION_RTL)
{
this.textarea.setAttribute('dir', dir);
}
else
else if (dir == mxConstants.TEXT_DIRECTION_VERTICAL_LR ||
dir == mxConstants.TEXT_DIRECTION_VERTICAL_RL)
{
this.textarea.removeAttribute('dir');
this.textarea.style.writingMode = dir;
}
};

Expand Down
17 changes: 16 additions & 1 deletion src/main/mxgraph/view/mxPrintPreview.js
Original file line number Diff line number Diff line change
Expand Up @@ -1060,6 +1060,10 @@ mxPrintPreview.prototype.addGraphFragment = function(dx, dy, scale, pageNumber,
// Resets the translation
var translate = view.getTranslate();
view.translate = new mxPoint(dx, dy);

// Avoids destruction of existing handlers
var updateHandler = this.graph.selectionCellsHandler.updateHandler;
this.graph.selectionCellsHandler.updateHandler = function() {};

// Redraws only states that intersect the clip
var redraw = this.graph.cellRenderer.redraw;
Expand Down Expand Up @@ -1152,7 +1156,7 @@ mxPrintPreview.prototype.addGraphFragment = function(dx, dy, scale, pageNumber,
tmp.style.height = '';
}
// Tries to fetch all text labels and only text labels
else if (tmp.style.cursor != 'default' && name != 'div')
else if (!this.isTextLabel(tmp))
{
tmp.parentNode.removeChild(tmp);
}
Expand All @@ -1179,6 +1183,7 @@ mxPrintPreview.prototype.addGraphFragment = function(dx, dy, scale, pageNumber,
this.graph.setEnabled(graphEnabled);
this.graph.container = previousContainer;
this.graph.cellRenderer.redraw = redraw;
this.graph.selectionCellsHandler.updateHandler = updateHandler;
view.canvas = canvas;
view.backgroundPane = backgroundPane;
view.drawPane = drawPane;
Expand All @@ -1189,6 +1194,16 @@ mxPrintPreview.prototype.addGraphFragment = function(dx, dy, scale, pageNumber,
}
};

/**
* Function: isTextLabel
*
* Returns true if the given node is a test label.
*/
mxPrintPreview.prototype.isTextLabel = function(node)
{
return tmp.style.cursor == 'default' || node.nodeName.toLowerCase() == 'div';
};

/**
* Function: getLinkForCellState
*
Expand Down
Loading

1 comment on commit 555e34e

@vercel
Copy link

@vercel vercel bot commented on 555e34e Jan 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

drawio – ./

drawio-louyongjiu.vercel.app
drawio-git-dev-louyongjiu.vercel.app
drawio.nines.center

Please sign in to comment.