Add support for multi-line label, #53

src/doc/js/route/misc.ts

@@ -343,13 +343,19 @@ ${indentedProps}
 			},
 
 			label: (container) => {
-				const PARAMS = {initSpd: 0};
+				const PARAMS = {
+					initSpd: 0,
+					size: 30,
+				};
 				const pane = new Tweakpane({
 					container: container,
 				});
 				pane.addInput(PARAMS, 'initSpd', {
 					label: 'Initial speed',
 				});
+				pane.addInput(PARAMS, 'size', {
+					label: 'Force field\nradius',
+				});
 			},
 
 			insert: (container) => {

src/doc/template/misc.html

@@ -287,6 +287,9 @@ <h3>Custom label</h3>
 pane.addInput(PARAMS, 'initSpd', {
   <strong>label</strong>: 'Initial speed',
 });
+pane.addInput(PARAMS, 'size', {
+  <strong>label</strong>: 'Force field<strong>\n</strong>radius',
+});
 </code></pre></div>
 		</div>
 		<div class="common-demo_resultLayout">

src/main/js/view/labeled.ts

@@ -8,6 +8,22 @@ interface Config extends ViewConfig {
 
 const className = ClassName('lbl');
 
+function createLabelNode(document: Document, label: string): DocumentFragment {
+	const frag = document.createDocumentFragment();
+
+	const lineNodes = label.split('\n').map((line) => {
+		return document.createTextNode(line);
+	});
+	lineNodes.forEach((lineNode, index) => {
+		if (index > 0) {
+			frag.appendChild(document.createElement('br'));
+		}
+		frag.appendChild(lineNode);
+	});
+
+	return frag;
+}
+
 /**
  * @hidden
  */
@@ -23,7 +39,7 @@ export class LabeledView extends View {
 
 		const labelElem = document.createElement('div');
 		labelElem.classList.add(className('l'));
-		labelElem.textContent = this.label;
+		labelElem.appendChild(createLabelNode(document, this.label));
 		this.element.appendChild(labelElem);
 
 		const viewElem = document.createElement('div');

src/main/sass/components/_labeled.scss

@@ -12,6 +12,7 @@
 		padding-right: 16px;
 	}
 	&_v {
+		align-self: flex-start;
 		flex-grow: 0;
 		flex-shrink: 0;
 		width: 160px;