fix(attributes): text-wrap takes external CSS into account (#2542)

clientIO · Feb 19, 2024 · 920da5a · 920da5a
1 parent e07dc52
commit 920da5a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/packages/joint-core/src/dia/attributes/text.mjs b/packages/joint-core/src/dia/attributes/text.mjs
@@ -123,12 +123,16 @@ const textAttributesNS = {
             if (text === undefined) text = attrs.text;
             if (text !== undefined) {
                 const breakTextFn = value.breakText || breakText;
+                const computedStyles = getComputedStyle(node);
+
                 wrappedText = breakTextFn('' + text, size, {
-                    'font-weight': attrs['font-weight'],
-                    'font-size': attrs['font-size'],
-                    'font-family': attrs['font-family'],
+                    'font-weight': computedStyles.fontWeight,
+                    'font-family': computedStyles.fontFamily,
+                    'text-transform': computedStyles.textTransform,
+                    'font-size': computedStyles.fontSize,
+                    'letter-spacing': computedStyles.letterSpacing,
+                    // The `line-height` attribute in SVG is JoinJS specific.
                     'lineHeight': attrs['line-height'],
-                    'letter-spacing': attrs['letter-spacing']
                 }, {
                     // Provide an existing SVG Document here
                     // instead of creating a temporary one over again.

diff --git a/packages/joint-core/test/jointjs/dia/attributes.js b/packages/joint-core/test/jointjs/dia/attributes.js
@@ -104,6 +104,38 @@ QUnit.module('Attributes', function() {
                     return obj.width === refBBox.width - 11 && obj.height === refBBox.height - 13;
                 })));
 
+                // external css styles taken into account
+                spy.resetHistory();
+                const fontSize = '23px';
+                const fontFamily = 'Arial';
+                const fontWeight = '800';
+                const letterSpacing = '5px';
+                const textTransform = 'uppercase';
+                const stylesheet = V.createSVGStyle(`
+                    text {
+                        font-size: ${fontSize};
+                        font-family: ${fontFamily};
+                        font-weight: ${fontWeight};
+                        letter-spacing: ${letterSpacing};
+                        text-transform: ${textTransform};
+                    }
+                `);
+                paper.svg.prepend(stylesheet);
+                textWrap.set.call(cellView, { text: 'text', breakText: spy }, bbox, node, {});
+                assert.ok(spy.calledWith(
+                    sinon.match.string,
+                    sinon.match.object,
+                    sinon.match((obj) => {
+                        return (
+                            obj['font-size'] === fontSize &&
+                            obj['font-family'] === fontFamily &&
+                            obj['letter-spacing'] === letterSpacing &&
+                            obj['text-transform'] === textTransform &&
+                            obj['font-weight'] === fontWeight
+                        );
+                    })));
+                stylesheet.remove();
+
                 spy.restore();
             });