#1225 Improve default settings for multi-line labels (#1226)

elyra-ai · Oct 26, 2022 · d943e2c · d943e2c
1 parent 33622dd
commit d943e2c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
@@ -333,6 +333,16 @@ $link-highlight-color: $support-04;
 	}
 }
 
+.d3-label-multi-line-entry {
+	white-space: pre-wrap;
+	word-wrap: normal;
+	word-break: break-word;
+
+	& .d3-label-full {
+		display: inline-block;
+	}
+}
+
 .d3-label-center {
 	text-align: center;
 }

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-decs.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-decs.js
@@ -37,7 +37,7 @@ export default class SvgCanvasDecs {
 	}
 
 	getDecLabelTextAreaClass(dec) {
-		const lineTypeClass = dec.label_single_line ? " d3-label-single-line" : " d3-label-multi-line";
+		const lineTypeClass = dec.label_single_line ? " d3-label-single-line" : " d3-label-multi-line-entry";
 		const justificationClass = dec.label_align === "center" ? " d3-label-center" : "";
 		return "d3-dec-label-entry" + lineTypeClass + justificationClass;
 	}

diff --git a/canvas_modules/common-canvas/src/object-model/layout-dimensions.js b/canvas_modules/common-canvas/src/object-model/layout-dimensions.js
@@ -82,7 +82,7 @@ const portsHorizontalDefaultLayout = {
 
 		// Width and height for label decorators
 		decoratorLabelWidth: 80,
-		decoratorLabelHeight: 15,
+		decoratorLabelHeight: 30,
 
 		// Display drop shadow under and round the nodes
 		dropShadow: true,
@@ -294,7 +294,7 @@ const portsHorizontalDefaultLayout = {
 
 		// Width and height for label decorators
 		linkDecoratorLabelWidth: 80,
-		linkDecoratorLabelHeight: 15,
+		linkDecoratorLabelHeight: 30,
 
 		// Values for drawing connectors. wrapAroundSpacing and
 		// wrapAroundNodePadding are used when curved connectors are drawn all the
@@ -473,7 +473,7 @@ const portsVerticalDefaultLayout = {
 
 		// Width and height for label decorators
 		decoratorLabelWidth: 80,
-		decoratorLabelHeight: 15,
+		decoratorLabelHeight: 30,
 
 		// Display drop shadow under and round the nodes
 		dropShadow: false,
@@ -685,7 +685,7 @@ const portsVerticalDefaultLayout = {
 
 		// Width and height for label decorators
 		linkDecoratorLabelWidth: 80,
-		linkDecoratorLabelHeight: 15,
+		linkDecoratorLabelHeight: 30,
 
 		// Values for drawing connectors. wrapAroundSpacing and
 		// wrapAroundNodePadding are used when curved connectors are drawn all the