chore(draw): unify text rendering into service

A newly introduced TextRenderer is responsible for text rendering and text related bounds computation. This removes a bunch of code duplication, too.
bpmn-io · May 24, 2018 · 4bb270f · 4bb270f
1 parent 4cd0a01
commit 4bb270f
Show file tree

Hide file tree

Showing 9 changed files with 245 additions and 166 deletions.
diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js
@@ -7,7 +7,6 @@ import {
 } from 'min-dash';
 
 import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
-import TextUtil from 'diagram-js/lib/util/Text';
 
 import {
   isExpanded,
@@ -58,18 +57,13 @@ var RENDERER_IDS = new Ids();
 var TASK_BORDER_RADIUS = 10;
 var INNER_OUTER_DIST = 3;
 
-var LABEL_STYLE = {
-  fontFamily: 'Arial, sans-serif',
-  fontSize: 12
-};
-
 var DEFAULT_FILL_OPACITY = .95,
     HIGH_FILL_OPACITY = .35;
 
 
 export default function BpmnRenderer(
     config, eventBus, styles, pathMap,
-    canvas, priority) {
+    canvas, textRenderer, priority) {
 
   BaseRenderer.call(this, eventBus, priority);
 
@@ -78,11 +72,6 @@ export default function BpmnRenderer(
 
   var rendererId = RENDERER_IDS.next();
 
-  var textUtil = new TextUtil({
-    style: LABEL_STYLE,
-    size: { width: 100 }
-  });
-
   var markers = {};
 
   var computeStyle = styles.computeStyle;
@@ -450,7 +439,14 @@ export default function BpmnRenderer(
   }
 
   function renderLabel(parentGfx, label, options) {
-    var text = textUtil.createText(label || '', options);
+
+    options = assign({
+      size: {
+        width: 100
+      }
+    }, options);
+
+    var text = textRenderer.createText(label || '', options);
 
     svgClasses(text).add('djs-label');
 
@@ -484,16 +480,22 @@ export default function BpmnRenderer(
     return renderLabel(parentGfx, semantic.name, {
       box: box,
       fitBox: true,
-      style: {
-        fontSize: '11px',
-        fill: getStrokeColor(element, defaultStrokeColor)
-      }
+      style: assign(
+        {},
+        textRenderer.getExternalStyle(),
+        {
+          fill: getStrokeColor(element, defaultStrokeColor)
+        }
+      )
     });
   }
 
   function renderLaneLabel(parentGfx, text, element) {
     var textBox = renderLabel(parentGfx, text, {
-      box: { height: 30, width: element.height },
+      box: {
+        height: 30,
+        width: element.height
+      },
       align: 'center-middle',
       style: {
         fill: getStrokeColor(element, defaultStrokeColor)
@@ -594,7 +596,7 @@ export default function BpmnRenderer(
         stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
-      for (var i = 0;i < 12;i++) {
+      for (var i = 0;i < 12; i++) {
 
         var linePathData = pathMap.getScaledPath('EVENT_TIMER_LINE', {
           xScaleFactor: 0.75,
@@ -1846,7 +1848,8 @@ BpmnRenderer.$inject = [
   'eventBus',
   'styles',
   'pathMap',
-  'canvas'
+  'canvas',
+  'textRenderer'
 ];
 
 

diff --git a/lib/draw/TextRenderer.js b/lib/draw/TextRenderer.js
@@ -0,0 +1,83 @@
+import { assign } from 'min-dash';
+
+import TextUtil from 'diagram-js/lib/util/Text';
+
+
+export default function TextRenderer(config) {
+
+  var defaultStyle = assign({
+    fontFamily: 'Arial, sans-serif',
+    fontSize: 12
+  }, config && config.defaultStyle || {});
+
+  var externalStyle = assign({}, defaultStyle, {
+    fontSize: parseInt(defaultStyle.fontSize, 10) - 1
+  }, config && config.externalStyle || {});
+
+  var textUtil = new TextUtil({
+    style: defaultStyle
+  });
+
+
+  /**
+   * Get the new bounds of an externally rendered,
+   * layouted label.
+   *
+   * @param  {Bounds} bounds
+   * @param  {String} text
+   *
+   * @return {Bounds}
+   */
+  this.getLayoutedBounds = function(bounds, text) {
+
+    var layoutedDimensions = textUtil.getDimensions(text, {
+      box: {
+        width: 90,
+        height: 30,
+        x: bounds.width / 2 + bounds.x,
+        y: bounds.height / 2 + bounds.y
+      },
+      style: externalStyle
+    });
+
+    // resize label shape to fit label text
+    return {
+      x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),
+      y: Math.round(bounds.y),
+      width: Math.ceil(layoutedDimensions.width),
+      height: Math.ceil(layoutedDimensions.height)
+    };
+
+  };
+
+  /**
+   * Create a layouted text element.
+   *
+   * @param {String} text
+   * @param {Object} [options]
+   *
+   * @return {SVGElement} rendered text
+   */
+  this.createText = function(text, options) {
+    return textUtil.createText(text, options || {});
+  };
+
+  /**
+   * Get default text style.
+   */
+  this.getDefaultStyle = function() {
+    return defaultStyle;
+  };
+
+  /**
+   * Get the external text style.
+   */
+  this.getExternalStyle = function() {
+    return externalStyle;
+  };
+
+}
+
+TextRenderer.$inject = [
+  'config.textRenderer'
+];
diff --git a/lib/draw/index.js b/lib/draw/index.js
@@ -1,8 +1,11 @@
 import BpmnRenderer from './BpmnRenderer';
+import TextRenderer from './TextRenderer';
+
 import PathMap from './PathMap';
 
 export default {
   __init__: [ 'bpmnRenderer' ],
   bpmnRenderer: [ 'type', BpmnRenderer ],
+  textRenderer: [ 'type', TextRenderer ],
   pathMap: [ 'type', PathMap ]
 };
diff --git a/lib/features/label-editing/cmd/UpdateLabelHandler.js b/lib/features/label-editing/cmd/UpdateLabelHandler.js
@@ -3,8 +3,6 @@ import {
   getLabel
 } from '../LabelUtil';
 
-import TextUtil from 'diagram-js/lib/util/Text';
-
 import {
   getExternalLabelMid,
   isLabelExternal,
@@ -26,9 +24,7 @@ var NULL_DIMENSIONS = {
 /**
  * A handler that updates the text of a BPMN element.
  */
-export default function UpdateLabelHandler(modeling) {
-
-  var textUtil = new TextUtil();
+export default function UpdateLabelHandler(modeling, textRenderer) {
 
   /**
    * Set the label and return the changed elements.
@@ -114,7 +110,7 @@ export default function UpdateLabelHandler(modeling) {
 
     // resize element based on label _or_ pre-defined bounds
     if (typeof newBounds === 'undefined') {
-      newBounds = getLayoutedBounds(label, text, textUtil);
+      newBounds = textRenderer.getLayoutedBounds(label, text);
     }
 
     // setting newBounds to false or _null_ will
@@ -132,33 +128,7 @@ export default function UpdateLabelHandler(modeling) {
   this.postExecute = postExecute;
 }
 
-UpdateLabelHandler.$inject = [ 'modeling' ];
-
-
-// TODO(nikku): repeating code (search for <getLayoutedBounds>)
-
-var EXTERNAL_LABEL_STYLE = {
-  fontFamily: 'Arial, sans-serif',
-  fontSize: '11px'
-};
-
-function getLayoutedBounds(bounds, text, textUtil) {
-
-  var layoutedLabelDimensions = textUtil.getDimensions(text, {
-    box: {
-      width: 90,
-      height: 30,
-      x: bounds.width / 2 + bounds.x,
-      y: bounds.height / 2 + bounds.y
-    },
-    style: EXTERNAL_LABEL_STYLE
-  });
-
-  // resize label shape to fit label text
-  return {
-    x: Math.round(bounds.x + bounds.width / 2 - layoutedLabelDimensions.width / 2),
-    y: Math.round(bounds.y),
-    width: Math.ceil(layoutedLabelDimensions.width),
-    height: Math.ceil(layoutedLabelDimensions.height)
-  };
-}
+UpdateLabelHandler.$inject = [
+  'modeling',
+  'textRenderer'
+];
diff --git a/lib/features/modeling/behavior/LabelBehavior.js b/lib/features/modeling/behavior/LabelBehavior.js
@@ -20,8 +20,6 @@ import {
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 
-import TextUtil from 'diagram-js/lib/util/Text';
-
 var DEFAULT_LABEL_DIMENSIONS = {
   width: 90,
   height: 20
@@ -36,13 +34,14 @@ var DEFAULT_LABEL_DIMENSIONS = {
  * @param {EventBus} eventBus
  * @param {Modeling} modeling
  * @param {BpmnFactory} bpmnFactory
+ * @param {TextRenderer} textRenderer
  */
-export default function LabelBehavior(eventBus, modeling, bpmnFactory) {
+export default function LabelBehavior(
+    eventBus, modeling, bpmnFactory,
+    textRenderer) {
 
   CommandInterceptor.call(this, eventBus);
 
-  var textUtil = new TextUtil();
-
   // update label if name property was updated
   this.postExecute('element.updateProperties', function(e) {
     var context = e.context,
@@ -73,10 +72,9 @@ export default function LabelBehavior(eventBus, modeling, bpmnFactory) {
     var labelCenter = getExternalLabelMid(element);
 
     // we don't care about x and y
-    var labelDimensions = getLayoutedBounds(
+    var labelDimensions = textRenderer.getLayoutedBounds(
       DEFAULT_LABEL_DIMENSIONS,
-      businessObject.name || '',
-      textUtil
+      businessObject.name || ''
     );
 
     modeling.createLabel(element, labelCenter, {
@@ -200,34 +198,6 @@ inherits(LabelBehavior, CommandInterceptor);
 LabelBehavior.$inject = [
   'eventBus',
   'modeling',
-  'bpmnFactory'
-];
-
-
-// TODO(nikku): repeating code (search for <getLayoutedBounds>)
-
-var EXTERNAL_LABEL_STYLE = {
-  fontFamily: 'Arial, sans-serif',
-  fontSize: '11px'
-};
-
-function getLayoutedBounds(bounds, text, textUtil) {
-
-  var layoutedLabelDimensions = textUtil.getDimensions(text, {
-    box: {
-      width: 90,
-      height: 30,
-      x: bounds.width / 2 + bounds.x,
-      y: bounds.height / 2 + bounds.y
-    },
-    style: EXTERNAL_LABEL_STYLE
-  });
-
-  // resize label shape to fit label text
-  return {
-    x: Math.round(bounds.x + bounds.width / 2 - layoutedLabelDimensions.width / 2),
-    y: Math.round(bounds.y),
-    width: Math.ceil(layoutedLabelDimensions.width),
-    height: Math.ceil(layoutedLabelDimensions.height)
-  };
-}
+  'bpmnFactory',
+  'textRenderer'
+];