fix up the labels

demos/demo-drag-and-drop/Application.ts

@@ -25,7 +25,7 @@ export class Application {
 
 		//3-B) create another default node
 		var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
-		let port2 = node2.addOutPort("In");
+		let port2 = node2.addInPort("In");
 		node2.setPosition(400, 100);
 
 		// link the ports

src/defaults/factories/DefaultLabelFactory.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import {DiagramEngine} from "../../DiagramEngine";
 import {LabelFactory} from "../../AbstractFactory";
 import {DefaultLabelModel} from "../models/DefaultLabelModel";
+import {DefaultLabelWidget} from "../widgets/DefaultLabelWidget";
 
 /**
  * @author Dylan Vorster
@@ -12,7 +13,7 @@ export class DefaultLabelFactory extends LabelFactory<DefaultLabelModel> {
 	}
 
 	generateReactWidget(diagramEngine: DiagramEngine, label: DefaultLabelModel): JSX.Element {
-		return <div>{label.label}</div>;
+		return <DefaultLabelWidget model={label} />;
 	}
 
 	getNewInstance(initialConfig?: any): DefaultLabelModel {

src/defaults/widgets/DefaultLabelWidget.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import {DefaultLabelModel} from "../models/DefaultLabelModel";
+
+export interface DefaultLabelWidgetProps{
+	model: DefaultLabelModel;
+}
+
+export class DefaultLabelWidget extends React.Component<DefaultLabelWidgetProps>{
+
+	render(){
+		return (
+			<div className="default-label">{this.props.model.label}</div>
+		);
+	}
+}

src/defaults/widgets/DefaultLinkWidget.tsx

@@ -126,7 +126,7 @@ export class DefaultLinkWidget extends React.Component<DefaultLinkProps, Default
 
 		var Bottom = React.cloneElement((props.diagramEngine.getFactoryForLink(this.props.link) as DefaultLinkFactory)
 			.generateLinkSegment(this.props.link, this.state.selected || this.props.link.isSelected(), path), {
-			ref:ref => ref && this.refPaths.push(ref)
+			ref:ref => ref && this.refPaths.push(ref),
 		});
 
 

src/sass.scss

@@ -84,18 +84,22 @@
 	.link-label {
 		pointer-events: none;
 
-		> div {
-			background: rgba(70, 70, 70, 0.8);
-			border: 1px solid #333;
-			border-radius: 4px;
-			color: #fff;
+		> div{
 			display: inline-block;
-			font-size: smaller;
-			padding: 5px;
 			position: absolute;
 		}
 	}
 
+	.default-label{
+		background: rgba(70, 70, 70, 0.8);
+		border: 1px solid #333;
+		border-radius: 4px;
+		color: #fff;
+		display: inline-block;
+		font-size: smaller;
+		padding: 5px;
+	}
+
 	.basic-node{
 		background-color: rgb(30,30,30);
 		border-radius: 5px;