diff --git a/lib/draw/TextRenderer.js b/lib/draw/TextRenderer.js index 8f74f108..0bcd8391 100644 --- a/lib/draw/TextRenderer.js +++ b/lib/draw/TextRenderer.js @@ -2,23 +2,29 @@ import { assign } from 'min-dash'; import TextUtil from 'diagram-js/lib/util/Text'; +var DEFAULT_FONT_SIZE = 12; +var LINE_HEIGHT_RATIO = 1.2; + export default function TextRenderer(config) { var defaultStyle = assign({ - fontFamily: 'Arial, sans-serif', - fontSize: 12 + fontFamily: 'sans-serif', + fontSize: DEFAULT_FONT_SIZE, + fontWeight: 'normal', + lineHeight: LINE_HEIGHT_RATIO }, config && config.defaultStyle || {}); + var fontSize = parseInt(defaultStyle.fontSize, 10) - 1; + var externalStyle = assign({}, defaultStyle, { - fontSize: parseInt(defaultStyle.fontSize, 10) - 1 + fontSize: fontSize }, config && config.externalStyle || {}); var textUtil = new TextUtil({ style: defaultStyle }); - /** * Get the new bounds of an externally rendered, * layouted label. diff --git a/lib/features/label-editing/LabelEditingProvider.js b/lib/features/label-editing/LabelEditingProvider.js index c7698c34..614ea350 100644 --- a/lib/features/label-editing/LabelEditingProvider.js +++ b/lib/features/label-editing/LabelEditingProvider.js @@ -17,18 +17,14 @@ import { isLabel } from '../../util/LabelUtil'; -var SMALL_FONT_SIZE = 11, - SMALL_LINE_HEIGHT = 13, - MEDIUM_FONT_SIZE = 12, - MEDIUM_LINE_HEIGHT = 14; - export default function LabelEditingProvider( eventBus, canvas, directEditing, - modeling, resizeHandles) { + modeling, resizeHandles, textRenderer) { this._canvas = canvas; this._modeling = modeling; + this._textRenderer = textRenderer; directEditing.registerProvider(this); @@ -109,7 +105,8 @@ LabelEditingProvider.$inject = [ 'canvas', 'directEditing', 'modeling', - 'resizeHandles' + 'resizeHandles', + 'textRenderer' ]; @@ -203,13 +200,19 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) { var zoom = canvas.zoom(); - // take zoom into account - var smallFontSize = SMALL_FONT_SIZE * zoom, - smallLineHeight = SMALL_LINE_HEIGHT * zoom, - mediumFontSize = MEDIUM_FONT_SIZE * zoom, - mediumLineHeight = MEDIUM_LINE_HEIGHT * zoom; + var defaultStyle = this._textRenderer.getDefaultStyle(), + externalStyle = this._textRenderer.getExternalStyle(); - var style = {}; + // take zoom into account + var externalFontSize = externalStyle.fontSize * zoom, + externalLineHeight = externalStyle.lineHeight, + defaultFontSize = defaultStyle.fontSize * zoom, + defaultLineHeight = defaultStyle.lineHeight; + + var style = { + fontFamily: this._textRenderer.getDefaultStyle().fontFamily, + fontWeight: this._textRenderer.getDefaultStyle().fontWeight + }; // adjust for expanded pools AND lanes if (is(element, 'bpmn:Lane') || isExpandedPool(element)) { @@ -222,8 +225,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) { }); assign(style, { - fontSize: mediumFontSize + 'px', - lineHeight: mediumLineHeight + 'px', + fontSize: defaultFontSize + 'px', + lineHeight: defaultLineHeight, paddingTop: (7 * zoom) + 'px', paddingBottom: (7 * zoom) + 'px', paddingLeft: (5 * zoom) + 'px', @@ -245,8 +248,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) { }); assign(style, { - fontSize: mediumFontSize + 'px', - lineHeight: mediumLineHeight + 'px', + fontSize: defaultFontSize + 'px', + lineHeight: defaultLineHeight, paddingTop: (7 * zoom) + 'px', paddingBottom: (7 * zoom) + 'px', paddingLeft: (5 * zoom) + 'px', @@ -263,8 +266,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) { }); assign(style, { - fontSize: mediumFontSize + 'px', - lineHeight: mediumLineHeight + 'px', + fontSize: defaultFontSize + 'px', + lineHeight: defaultLineHeight, paddingTop: (7 * zoom) + 'px', paddingBottom: (7 * zoom) + 'px', paddingLeft: (5 * zoom) + 'px', @@ -286,8 +289,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) { }); assign(style, { - fontSize: smallFontSize + 'px', - lineHeight: smallLineHeight + 'px', + fontSize: externalFontSize + 'px', + lineHeight: externalLineHeight, paddingTop: paddingTop + 'px', paddingBottom: paddingBottom + 'px' }); @@ -307,7 +310,7 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) { height: 0 }); - var height = smallFontSize + paddingTop + paddingBottom; + var height = externalFontSize + paddingTop + paddingBottom; assign(bounds, { width: width, @@ -317,8 +320,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) { }); assign(style, { - fontSize: smallFontSize + 'px', - lineHeight: smallLineHeight + 'px', + fontSize: externalFontSize + 'px', + lineHeight: externalLineHeight, paddingTop: paddingTop + 'px', paddingBottom: paddingBottom + 'px' }); @@ -339,8 +342,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) { paddingBottom: (7 * zoom) + 'px', paddingLeft: (5 * zoom) + 'px', paddingRight: (5 * zoom) + 'px', - fontSize: mediumFontSize + 'px', - lineHeight: mediumLineHeight + 'px' + fontSize: defaultFontSize + 'px', + lineHeight: defaultLineHeight }); } diff --git a/test/spec/draw/TextRendererSpec.js b/test/spec/draw/TextRendererSpec.js index d16e6791..c7fd9809 100644 --- a/test/spec/draw/TextRendererSpec.js +++ b/test/spec/draw/TextRendererSpec.js @@ -57,7 +57,8 @@ describe('draw - TextRenderer', function() { textRenderer: { defaultStyle: { fontFamily: 'monospace', - fontSize: '15px' + fontSize: '15px', + lineHeight: '24px' }, externalStyle: { fontWeight: 'bold' @@ -75,6 +76,7 @@ describe('draw - TextRenderer', function() { // then expect(defaultStyle.fontFamily).to.eql('monospace'); expect(defaultStyle.fontSize).to.eql('15px'); + expect(defaultStyle.lineHeight).to.eql('24px'); expect(externalStyle.fontFamily).to.eql('monospace'); expect(externalStyle.fontSize).to.eql(14); diff --git a/test/spec/features/label-editing/LabelEditingProviderSpec.js b/test/spec/features/label-editing/LabelEditingProviderSpec.js index 3e4492d9..6742848c 100644 --- a/test/spec/features/label-editing/LabelEditingProviderSpec.js +++ b/test/spec/features/label-editing/LabelEditingProviderSpec.js @@ -13,7 +13,7 @@ import { getLabel } from 'lib/features/label-editing/LabelUtil'; -var MEDIUM_LINE_HEIGHT = 14; +var MEDIUM_LINE_HEIGHT = 12 * 1.2; var DELTA = 3; diff --git a/test/spec/features/modeling/LabelLayoutingSpec.js b/test/spec/features/modeling/LabelLayoutingSpec.js index 577b26d0..0ee84547 100644 --- a/test/spec/features/modeling/LabelLayoutingSpec.js +++ b/test/spec/features/modeling/LabelLayoutingSpec.js @@ -240,7 +240,7 @@ describe('modeling - label layouting', function() { // then expect(Math.round(connection.label.x)).to.be.within(570, 575); - expect(Math.round(connection.label.y)).to.be.within(138, 139); + expect(Math.round(connection.label.y)).to.be.within(136, 138); })); @@ -506,7 +506,7 @@ describe('modeling - label layouting', function() { dragging.end(); // then - expect(connection.label.y - labelPosition.y).to.be.within(-76, -70); + expect(connection.label.y - labelPosition.y).to.be.within(-77, -73); expect(connection.label.x - labelPosition.x).to.be.within(-54, -51); } diff --git a/test/spec/features/modeling/behavior/LabelBehaviorSpec.js b/test/spec/features/modeling/behavior/LabelBehaviorSpec.js index 7704a650..3253388a 100644 --- a/test/spec/features/modeling/behavior/LabelBehaviorSpec.js +++ b/test/spec/features/modeling/behavior/LabelBehaviorSpec.js @@ -137,9 +137,9 @@ describe('behavior - LabelBehavior', function() { expect(elementRegistry.get(label.id)).to.exist; expect(label.x).to.within(298, 299); - expect(label.y).to.be.within(141, 142); + expect(label.y).to.be.within(140, 141); expect(label.width).to.be.within(15, 18); - expect(label.height).to.be.within(12, 14); + expect(label.height).to.be.within(13, 15); } )); diff --git a/test/spec/import/elements/LabelSpec.js b/test/spec/import/elements/LabelSpec.js index 86a9c248..948e0b84 100644 --- a/test/spec/import/elements/LabelSpec.js +++ b/test/spec/import/elements/LabelSpec.js @@ -47,7 +47,7 @@ describe('import - labels', function() { // then expect(eventLabelCenter.x).to.be.within(270, 272); - expect(eventLabelCenter.y).to.be.within(268, 270); + expect(eventLabelCenter.y).to.be.within(269, 271); expect(eventLabel.width).to.be.above(65); expect(eventLabel.height).to.be.above(20);