1513 dynamic resizing labels

lib/draw/BpmnRenderer.js

@@ -64,6 +64,7 @@ import {
 import Ids from 'ids';
 
 import { black } from './BpmnRenderUtil';
+import { measureTextLines } from '../features/modeling/BpmnUpdater';
 
 var markerIds = new Ids();
 
@@ -1037,10 +1038,12 @@ export default function BpmnRenderer(
   }
 
   function renderLabel(parentGfx, label, attrs = {}) {
+
+    // additional Padding for left and right to stabilize the rendering
     attrs = assign({
       size: {
         width: 100
-      }
+      },
     }, attrs);
 
     var text = textRenderer.createText(label || '', attrs);
@@ -1074,15 +1077,21 @@ export default function BpmnRenderer(
 
   function renderExternalLabel(parentGfx, element, attrs = {}) {
     var box = {
-      width: 90,
-      height: 30,
+      width: element.width,
+      height: element.height,
       x: element.width / 2 + element.x,
       y: element.height / 2 + element.y
     };
 
     return renderLabel(parentGfx, getLabel(element), {
       box: box,
       fitBox: true,
+      padding: {
+        top: 0,
+        left: -2,
+        right: -2,
+        bottom: 0
+      },
       style: assign(
         {},
         textRenderer.getExternalStyle(),
@@ -2164,6 +2173,10 @@ export default function BpmnRenderer(
       return renderTask(parentGfx, element, attrs);
     },
     'bpmn:TextAnnotation': function(parentGfx, element, attrs = {}) {
+      if (element.correctBounds) {
+        changeBounds(element.correctBounds, element);
+        element.correctBounds = undefined;
+      }
       attrs = pickAttrs(attrs, [
         'fill',
         'stroke',
@@ -2175,12 +2188,34 @@ export default function BpmnRenderer(
         width,
         height
       } = getBounds(element, attrs);
-
+      width = Math.ceil(width / 20) * 20;
       var textElement = drawRect(parentGfx, width, height, 0, 0, {
         fill: 'none',
         stroke: 'none'
       });
 
+      var semantic = getSemantic(element),
+          text = semantic.get('text') || '';
+      var renderedLabel = renderLabel(parentGfx, text, {
+        align: 'left-top',
+        box: getBounds(element, attrs),
+        padding: {
+          top: 2,
+          left: +2,
+          right: +5,
+          bottom: 0
+        },
+        style: {
+          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
+        }
+      });
+
+      height = getTextHeightForTextAnnotation(renderedLabel);
+      textElement.setAttribute('height', height);
+      width = getTextWidthForTextAnnotation(renderedLabel, width);
+      element.width = width;
+      textElement.setAttribute('width', width);
+
       var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
         xScaleFactor: 1,
         yScaleFactor: 1,
@@ -2195,19 +2230,6 @@ export default function BpmnRenderer(
       drawPath(parentGfx, textPathData, {
         stroke: getStrokeColor(element, defaultStrokeColor, attrs.stroke)
       });
-
-      var semantic = getSemantic(element),
-          text = semantic.get('text') || '';
-
-      renderLabel(parentGfx, text, {
-        align: 'left-top',
-        box: getBounds(element, attrs),
-        padding: 7,
-        style: {
-          fill: getLabelColor(element, defaultLabelColor, defaultStrokeColor, attrs.stroke)
-        }
-      });
-
       return textElement;
     },
     'bpmn:Transaction': function(parentGfx, element, attrs = {}) {
@@ -2305,6 +2327,11 @@ export default function BpmnRenderer(
       return task;
     },
     'label': function(parentGfx, element, attrs = {}) {
+      if (element.correctBounds) {
+        changeBounds(element.correctBounds, element);
+        element.correctBounds = undefined;
+      }
+
       return renderExternalLabel(parentGfx, element, attrs);
     }
   };
@@ -2410,4 +2437,46 @@ function pickAttrs(attrs, keys = []) {
 
     return pickedAttrs;
   }, {});
+}
+
+function changeBounds(newBounds, element) {
+  element.x = newBounds.x;
+  element.y = newBounds.y;
+  element.width = newBounds.width;
+  element.height = newBounds.height;
+}
+
+
+function getTextHeightForTextAnnotation(text) {
+  return Math.max(text.lastChild.y.animVal[0].value, 30) + 10;
+}
+
+function getTextWidthForTextAnnotation(text, width) {
+
+  if ((text.textContent === '')) {
+    return 100;
+  }
+
+  let lineLengths = Array.from(measureTextLines(text.textContent, getStyleFromTextannotation(text), width + 5, true))
+    .map(elem => elem.width);
+
+  return Math.round(Math.max(...lineLengths));
+}
+
+function getStyleFromTextannotation(text) {
+  const styleString = text.attributes.style.nodeValue;
+
+  let style = Object.fromEntries(
+    styleString
+      .split(';')
+      .map(part => part.trim())
+      .filter(Boolean)
+      .map(part => {
+        const [ key, value ] = part.split(':').map(s => s.trim());
+        return [ key, value ];
+      })
+  );
+  style['lineHeight'] = text.attributes.lineHeight.nodeValue;
+
+  return style;
 }

lib/features/label-editing/LabelEditingProvider.js

@@ -228,7 +228,8 @@ LabelEditingProvider.prototype.activate = function(element) {
   // external labels
   if (isLabelExternal(element)) {
     assign(options, {
-      autoResize: true
+      resizable: true,
+      autoResize: true,
     });
 
     // keep background and border for external labels
@@ -393,7 +394,8 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
     });
   }
 
-  var width = 90 * zoom,
+  // making sure that editing box is correct
+  var width = bbox.width + 10 * zoom,
       paddingTop = 7 * zoom,
       paddingBottom = 4 * zoom;
 
@@ -402,7 +404,7 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
     assign(bounds, {
       width: width,
       height: bbox.height + paddingTop + paddingBottom,
-      x: mid.x - width / 2,
+      x: bbox.x,
       y: bbox.y - paddingTop
     });