24.0.0 release

CODE_OF_CONDUCT.md

@@ -2,7 +2,7 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers aim to making participation in our project and our community a harassment-free experience for everyone.
 
 ## Our Standards
 
@@ -35,13 +35,9 @@ Project maintainers have the right and responsibility to remove, edit, or reject
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+This Code of Conduct applies to all JGraph projects and the draw.io google groups.
 
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [coc@jgraph.com](mailto:coc@jgraph.com). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+Project maintainers are not subject to this code.
 
 ## Attribution
 

ChangeLog

@@ -1,3 +1,11 @@
+29-FEB-2024: 24.0.0
+
+- Adds shape shadow style option [drawio-1671]
+- Uses drop-shadow CSS filter for shape shadows [drawio-1671]
+- Disables shape shadow option for Safari
+- Fixes possible XSS in mxUtils.getSizeForString [CSP-3024]
+- Supports vertical writing mode [drawio-4068]
+
 28-FEB-2024: 23.1.8
 
 - Remove unnecessary servlets from deployment

VERSION

@@ -1 +1 @@
-23.1.8
+24.0.0

etc/integrate/Integrate.js

@@ -37,7 +37,7 @@ EditorUi.prototype.convertImageToDataUri = function(url, callback)
 		}),
 		function()
 		{
-			callback(this.svgBrokenImage.src);
+			callback(url);
 		});
 	}
     else
@@ -51,7 +51,7 @@ EditorUi.prototype.convertImageToDataUri = function(url, callback)
             }),
             function()
             {
-                callback();
+                callback(url);
             });
         }
         else
@@ -78,13 +78,13 @@ EditorUi.prototype.convertImageToDataUri = function(url, callback)
 		        }
 		        catch (e)
 		        {
-	        		callback(self.svgBrokenImage.src);
+	        		callback(url);
 		        }
 		    };
 
 		    img.onerror = function()
 		    {
-	    		callback(self.svgBrokenImage.src);
+	    		callback(url);
 		    };
 
 		    img.src = url;

src/main/mxgraph/shape/mxImageShape.js

@@ -31,7 +31,6 @@ function mxImageShape(bounds, image, fill, stroke, strokewidth)
 	this.fill = fill;
 	this.stroke = stroke;
 	this.strokewidth = (strokewidth != null) ? strokewidth : 1;
-	this.shadow = false;
 };
 
 /**

src/main/mxgraph/shape/mxShape.js

@@ -479,9 +479,75 @@ mxShape.prototype.getLabelMargins= function(rect)
 mxShape.prototype.checkBounds = function()
 {
 	return (!isNaN(this.scale) && isFinite(this.scale) && this.scale > 0 &&
-			this.bounds != null && !isNaN(this.bounds.x) && !isNaN(this.bounds.y) &&
-			!isNaN(this.bounds.width) && !isNaN(this.bounds.height) &&
-			this.bounds.width > 0 && this.bounds.height > 0);
+		this.bounds != null && !isNaN(this.bounds.x) && !isNaN(this.bounds.y) &&
+		!isNaN(this.bounds.width) && !isNaN(this.bounds.height) &&
+		this.bounds.width > 0 && this.bounds.height > 0);
+};
+
+/**
+ * Function: getShadowStyle
+ * 
+ * Removes all child nodes and resets all CSS.
+ */
+mxShape.prototype.getShadowStyle = function()
+{
+	var s = {
+		dx: mxConstants.SHADOW_OFFSET_X,
+		dy: mxConstants.SHADOW_OFFSET_Y,
+		blur: mxConstants.SHADOW_BLUR,
+		color: mxConstants.SHADOWCOLOR,
+		opacity: mxConstants.SHADOW_OPACITY * 100
+	};
+
+	if (this.style != null)
+	{
+		s.dx = mxUtils.getValue(this.style,
+			mxConstants.STYLE_SHADOW_OFFSET_X, s.dx);
+		s.dy = mxUtils.getValue(this.style,
+			mxConstants.STYLE_SHADOW_OFFSET_Y, s.dy);
+		s.blur = mxUtils.getValue(this.style,
+			mxConstants.STYLE_SHADOW_BLUR, s.blur);
+		s.color = mxUtils.getValue(this.style,
+			mxConstants.STYLE_SHADOWCOLOR, s.color);
+		s.opacity = mxUtils.getValue(this.style,
+			mxConstants.STYLE_SHADOW_OPACITY, s.opacity);
+	}
+
+	return s;
+};
+
+/**
+ * Function: createDropShadow
+ * 
+ * Removes all child nodes and resets all CSS.
+ */
+mxShape.prototype.createDropShadow = function(shadowStyle, scale)
+{
+	return 'drop-shadow(' + Math.round(shadowStyle.dx * scale * 100) / 100 + 'px ' +
+		Math.round(shadowStyle.dy * scale * 100) / 100 + 'px ' +
+		Math.round(shadowStyle.blur * scale * 100) / 100 + 'px ' +
+		mxUtils.hex2rgba(shadowStyle.color, shadowStyle.opacity / 100) + ')';
+};
+
+/**
+ * Function: updateSvgFilters
+ * 
+ * Removes all child nodes and resets all CSS.
+ */
+mxShape.prototype.updateSvgFilters = function(scale)
+{
+	this.node.style.filter = (this.isShadow && this.isShadowEnabled()) ?
+		this.createDropShadow(this.getShadowStyle(), scale) : '';
+};
+
+/**
+ * Function: isShadowEnabled
+ * 
+ * Removes all child nodes and resets all CSS.
+ */
+mxShape.prototype.isShadowEnabled = function()
+{
+	return true;
 };
 
 /**
@@ -497,28 +563,9 @@ mxShape.prototype.redrawShape = function()
 	{
 		// Specifies if events should be handled
 		canvas.pointerEvents = this.pointerEvents;
-
 		this.beforePaint(canvas);
 		this.paint(canvas);
 		this.afterPaint(canvas);
-
-		if (this.node != canvas.root)
-		{
-			// Forces parsing in IE8 standards mode - slow! avoid. TODO, remove?
-			this.node.insertAdjacentHTML('beforeend', canvas.root.outerHTML);
-		}
-
-		if (this.node.nodeName == 'DIV' && document.documentMode == 8) // TODO, remove?
-		{
-			// Makes DIV transparent to events for IE8 in IE8 standards
-			// mode (Note: Does not work for IE9 in IE8 standards mode
-			// and not for IE11 in enterprise mode)
-			this.node.style.filter = '';
-
-			// Adds event transparency in IE8 standards
-			mxUtils.addTransparentBackgroundFilter(this.node);
-		}
-
 		this.destroyCanvas(canvas);
 	}
 };
@@ -630,7 +677,8 @@ mxShape.prototype.updateHtmlFilters = function(node)
 			'Color=\'' + mxConstants.VML_SHADOWCOLOR + '\')';
 	}
 
-	if (this.fill != null && this.fill != mxConstants.NONE && this.gradient && this.gradient != mxConstants.NONE)
+	if (this.fill != null && this.fill != mxConstants.NONE &&
+		this.gradient && this.gradient != mxConstants.NONE)
 	{
 		var start = this.fill;
 		var end = this.gradient;
@@ -710,10 +758,6 @@ mxShape.prototype.updateHtmlColors = function(node)
 	{
 		 node.style.backgroundColor = 'transparent';
 	}
-	else if (document.documentMode == 8)
-	{
-		mxUtils.addTransparentBackgroundFilter(node);
-	}
 	else
 	{
 		this.setTransparentBackgroundImage(node);
@@ -727,7 +771,7 @@ mxShape.prototype.updateHtmlColors = function(node)
  */
 mxShape.prototype.updateHtmlBounds = function(node)
 {
-	var sw = (document.documentMode >= 9) ? 0 : Math.ceil(this.strokewidth * this.scale);
+	var sw = Math.ceil(this.strokewidth * this.scale);
 	node.style.borderWidth = Math.max(1, sw) + 'px';
 	node.style.overflow = 'hidden';
 
@@ -787,14 +831,14 @@ mxShape.prototype.destroyCanvas = function(canvas)
  * 
  * Invoked before paint is called.
  */
-mxShape.prototype.beforePaint = function(c) { }
+mxShape.prototype.beforePaint = function(c) { };
 
 /**
  * Function: afterPaint
  * 
  * Invokes after paint was called.
  */
-mxShape.prototype.afterPaint = function(c) { }
+mxShape.prototype.afterPaint = function(c) { };
 
 /**
  * Function: paint
@@ -844,6 +888,7 @@ mxShape.prototype.paint = function(c)
 
 	this.updateTransform(c, x, y, w, h);
 	this.configureCanvas(c, x, y, w, h);
+	this.updateSvgFilters((c != null) ? c.state.scale : s);
 
 	// Adds background rectangle to capture events
 	var bg = null;
@@ -967,25 +1012,27 @@ mxShape.prototype.configureCanvas = function(c, x, y, w, h)
 	// Sets alpha, colors and gradients
 	if (this.isShadow != null)
 	{
-		c.setShadow(this.isShadow);
+		c.setShadow(this.isShadow, this.shadowStyle);
 	}
 
 	// Dash pattern
 	if (this.isDashed != null)
 	{
-		c.setDashed(this.isDashed, (this.style != null) ?
-			mxUtils.getValue(this.style, mxConstants.STYLE_FIX_DASH, false) == 1 : false);
+		c.setDashed(this.isDashed, (this.style != null) ? mxUtils.getValue(
+			this.style, mxConstants.STYLE_FIX_DASH, false) == 1 : false);
 	}
 
 	if (dash != null)
 	{
 		c.setDashPattern(dash);
 	}
 
-	if (this.fill != null && this.fill != mxConstants.NONE && this.gradient && this.gradient != mxConstants.NONE)
+	if (this.fill != null && this.fill != mxConstants.NONE &&
+		this.gradient && this.gradient != mxConstants.NONE)
 	{
 		var b = this.getGradientBounds(c, x, y, w, h);
-		c.setGradient(this.fill, this.gradient, b.x, b.y, b.width, b.height, this.gradientDirection);
+		c.setGradient(this.fill, this.gradient, b.x, b.y,
+			b.width, b.height, this.gradientDirection);
 	}
 	else
 	{
@@ -1336,7 +1383,7 @@ mxShape.prototype.apply = function(state)
 		this.isDashed = mxUtils.getValue(this.style, mxConstants.STYLE_DASHED, this.isDashed) == 1;
 		this.isRounded = mxUtils.getValue(this.style, mxConstants.STYLE_ROUNDED, this.isRounded) == 1;
 		this.glass = mxUtils.getValue(this.style, mxConstants.STYLE_GLASS, this.glass) == 1;
-		
+
 		if (this.fill == mxConstants.NONE)
 		{
 			this.fill = null;
@@ -1489,8 +1536,23 @@ mxShape.prototype.augmentBoundingBox = function(bbox)
 {
 	if (this.isShadow)
 	{
-		bbox.width += Math.ceil(mxConstants.SHADOW_OFFSET_X * this.scale);
-		bbox.height += Math.ceil(mxConstants.SHADOW_OFFSET_Y * this.scale);
+		var ss = this.getShadowStyle();
+
+		if (ss.dx < 0)
+		{
+			bbox.x += ss.dx;
+			bbox.width -= ss.dx;
+		}
+
+		if (ss.dy < 0)
+		{
+			bbox.y += ss.dy;
+			bbox.height -= ss.dy;
+		}
+
+		bbox.grow(Math.max(ss.blur, 0) * this.scale * 2);
+		bbox.width += Math.ceil(Math.max(ss.dx, 0) * this.scale);
+		bbox.height += Math.ceil(Math.max(ss.dy, 0) * this.scale);
 	}
 
 	// Adds stroke width

src/main/mxgraph/shape/mxText.js

@@ -263,6 +263,7 @@ mxText.prototype.paint = function(c, update)
 
 	this.updateTransform(c, x, y, w, h);
 	this.configureCanvas(c, x, y, w, h);
+	this.updateSvgFilters((c != null) ? c.state.scale : s);
 
 	var dir = this.getActualTextDirection();
 
@@ -700,6 +701,16 @@ mxText.prototype.configureCanvas = function(c, x, y, w, h)
 	c.setFontStyle(this.fontStyle);
 };
 
+/**
+ * Function: isShadowEnabled
+ * 
+ * Removes all child nodes and resets all CSS.
+ */
+mxText.prototype.isShadowEnabled = function()
+{
+	return (this.style != null) ? mxUtils.getValue(this.style, 'textShadow', false) : false;
+};
+
 /**
  * Function: getHtmlValue
  * 
@@ -1398,9 +1409,9 @@ mxText.prototype.updateSize = function(node, enableWrap)
 };
 
 /**
- * Function: getMargin
+ * Function: updateMargin
  *
- * Returns the spacing as an <mxPoint>.
+ * Updates the margin of this text shape.
  */
 mxText.prototype.updateMargin = function()
 {
@@ -1412,16 +1423,18 @@ mxText.prototype.updateMargin = function()
  *
  * Returns the spacing as an <mxPoint>.
  */
-mxText.prototype.getSpacing = function(noBase)
+mxText.prototype.getSpacing = function(noBase, margin)
 {
 	var dx = 0;
 	var dy = 0;
 
-	if (this.align == mxConstants.ALIGN_CENTER)
+	if ((margin != null && margin.x == -0.5) ||
+		(margin == null && this.align == mxConstants.ALIGN_CENTER))
 	{
 		dx = (this.spacingLeft - this.spacingRight) / 2;
 	}
-	else if (this.align == mxConstants.ALIGN_RIGHT)
+	else if ((margin != null && margin.x == -1) ||
+		(margin == null && this.align == mxConstants.ALIGN_RIGHT))
 	{
 		dx = -this.spacingRight - (noBase? 0 : this.baseSpacingRight);
 	}

src/main/mxgraph/util/mxAbstractCanvas2D.js

@@ -163,6 +163,7 @@ mxAbstractCanvas2D.prototype.createState = function()
 		fontFamily: mxConstants.DEFAULT_FONTFAMILY,
 		fontStyle: 0,
 		shadow: false,
+		shadowStyle: null,
 		shadowColor: mxConstants.SHADOWCOLOR,
 		shadowAlpha: mxConstants.SHADOW_OPACITY,
 		shadowDx: mxConstants.SHADOW_OFFSET_X,
@@ -536,9 +537,10 @@ mxAbstractCanvas2D.prototype.setFontStyle = function(value)
  * 
  * Enables or disables and configures the current shadow.
  */
-mxAbstractCanvas2D.prototype.setShadow = function(enabled)
+mxAbstractCanvas2D.prototype.setShadow = function(enabled, style)
 {
 	this.state.shadow = enabled;
+	this.state.shadowStyle = style;
 };
 
 /**