Added a demo for shoing interactivity and drag and drop

demos/demo5/components/BodyWidget.tsx

@@ -1,7 +1,10 @@
 import * as React from "react";
+import * as _ from "lodash";
 import {TrayWidget} from "./TrayWidget";
 import {DiagramWidget} from "../../../src/main";
 import {Application} from "../Application";
+import {TrayItemWidget} from "./TrayItemWidget";
+import {DefaultNodeModel,DefaultPortModel} from "../../../src/main";
 
 export interface BodyWidgetProps {
 	app: Application;
@@ -28,8 +31,38 @@ export class BodyWidget extends React.Component<BodyWidgetProps, BodyWidgetState
 					<div className="title">Storm React Diagrams - Demo 5</div>
 				</div>
 				<div className="content">
-					<TrayWidget />
-					<DiagramWidget diagramEngine={this.props.app.getDiagramEngine()}/>
+					<TrayWidget>
+						<TrayItemWidget model={{type: 'in'}} name="In Node" color="rgb(192,255,0)"/>
+						<TrayItemWidget model={{type: 'out'}} name="Out Node" color="rgb(0,192,255)"/>
+					</TrayWidget>
+					<div
+						className="diagram-layer"
+						onDrop={(event) => {
+
+							var data = JSON.parse(event.dataTransfer.getData('storm-diagram-node'));
+							var nodesCount = _.keys(this.props.app.getDiagramEngine().getDiagramModel().getNodes()).length;
+
+							var node = null;
+							if(data.type === 'in'){
+								node = new DefaultNodeModel("Node "+(nodesCount+1),"rgb(192,255,0)");
+								node.addPort(new DefaultPortModel(true,"in-1","In"));
+							}else{
+								node = new DefaultNodeModel("Node "+(nodesCount+1),"rgb(0,192,255)");
+								node.addPort(new DefaultPortModel(false,"out-1","Out"));
+							}
+							var points = this.props.app.getDiagramEngine().getRelativeMousePoint(event);
+							node.x = points.x;
+							node.y = points.y;
+							this.props.app.getDiagramEngine().getDiagramModel().addNode(node);
+							this.forceUpdate();
+
+						}}
+						onDragOver={(event) => {
+							event.preventDefault();
+						}}
+					>
+						<DiagramWidget diagramEngine={this.props.app.getDiagramEngine()}/>
+					</div>
 				</div>
 			</div>
 		)

demos/demo5/components/TrayItemWidget.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+export interface TrayItemWidgetProps {
+	model: any;
+	color?: string;
+	name: string;
+}
+
+export interface TrayItemWidgetState {
+}
+
+export class TrayItemWidget extends React.Component<TrayItemWidgetProps, TrayItemWidgetState> {
+
+	constructor(props: TrayItemWidgetProps) {
+		super(props);
+		this.state = {}
+	}
+
+	render() {
+		return (
+			<div
+				style={{borderColor: this.props.color}}
+				draggable={true}
+				onDragStart={(event) => {
+					event.dataTransfer.setData("storm-diagram-node", JSON.stringify(this.props.model));
+				}}
+				className="tray-item"
+			>
+				{this.props.name}
+			</div>
+		);
+	}
+}

demos/demo5/components/TrayWidget.tsx

@@ -22,9 +22,7 @@ export class TrayWidget extends React.Component<TrayWidgetProps, TrayWidgetState
 
 	render() {
 		return (
-			React.DOM.div({className: "tray"},
-				this.props.children
-			)
+			<div className="tray">{this.props.children}</div>
 		)
 	}
 }

demos/demo5/sass/main.scss

@@ -18,11 +18,28 @@
 	.content{
 		display: flex;
 		flex-grow: 1;
+
+		.diagram-layer{
+			position: relative;
+			flex-grow: 1;
+		}
+
 		.tray{
 			min-width: 200px;
 			background: rgb(20,20,20);
 			flex-grow: 0;
 			flex-shrink: 0;
+
+			.tray-item{
+				color: white;
+				font-family: Helvetica, Arial;
+				padding: 5px;
+				margin: 0px 10px;
+				border: solid 1px;
+				border-radius: 5px;
+				margin-bottom: 2px;
+				cursor: pointer;
+			}
 		}
 	}
 }