Added a new demo which shows how to make custom nodes

README.md

@@ -33,6 +33,11 @@ yarn add storm-react-diagrams
 
 simply navigate to the __demos__ directory and load up the corresponding index.html
 
+To see how to create your own nodes like the one below, take a look at __demo3__:
+
+![Demo2](./custom-nodes.png)
+
+
 #### How to build
 
 Simply run ```webpack``` in the root directory and it will spit out the transpiled code and typescript definitions

demos/demo1/index.html

@@ -4,8 +4,8 @@
 		<title>STORM React Diagrams Test 2</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
-		<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
+		<script src="https://unpkg.com/react/dist/react.min.js"></script>
+		<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
 		<script src="https://unpkg.com/lodash@4.17.4/lodash.min.js"></script>
 		<script src="./bundle.js"></script>
 	</head>

demos/demo2/index.html

@@ -4,8 +4,8 @@
 		<title>STORM React Diagrams Test 1</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
-		<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
+		<script src="https://unpkg.com/react/dist/react.min.js"></script>
+		<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
 		<script src="https://unpkg.com/lodash@4.17.4/lodash.min.js"></script>
 		<script src="./bundle.js"></script>
 	</head>

demos/demo3/DiamondInstanceFactories.ts

@@ -0,0 +1,25 @@
+import * as SRD from "../../src/main";
+import {DiamondNodeModel} from "./DiamondNodeModel";
+import {DiamondPortModel} from "./DiamondPortModel";
+
+export class DiamondNodeFactory extends SRD.AbstractInstanceFactory<DiamondNodeModel>{
+
+	constructor(){
+		super("DiamondNodeModel");
+	}
+
+	getInstance(){
+		return new DiamondNodeModel();
+	}
+}
+
+export class DiamondPortFactory extends SRD.AbstractInstanceFactory<DiamondPortModel>{
+
+	constructor(){
+		super("DiamondPortModel");
+	}
+
+	getInstance(){
+		return new DiamondPortModel();
+	}
+}

demos/demo3/DiamondNodeModel.ts

@@ -0,0 +1,14 @@
+import * as SRD from "../../src/main";
+import {DiamondPortModel} from "./DiamondPortModel";
+
+export class DiamondNodeModel extends SRD.NodeModel{
+
+	constructor(){
+		super('diamond');
+		this.addPort(new DiamondPortModel('top'));
+		this.addPort(new DiamondPortModel('left'));
+		this.addPort(new DiamondPortModel('bottom'));
+		this.addPort(new DiamondPortModel('right'));
+	}
+
+}

demos/demo3/DiamondNodeWidget.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+import {DiamondNodeModel} from "./DiamondNodeModel";
+import * as SRD from "../../src/main";
+
+export interface DiamonNodeWidgetProps {
+	node: DiamondNodeModel,
+	size?: number
+}
+
+export interface DiamonNodeWidgetState {
+}
+
+/**
+ * @author Dylan Vorster
+ */
+export class DiamonNodeWidget extends React.Component<DiamonNodeWidgetProps, DiamonNodeWidgetState> {
+
+	public static defaultProps: DiamonNodeWidgetProps = {
+		size:150,
+		node: null
+	};
+
+	constructor(props: DiamonNodeWidgetProps) {
+		super(props);
+		this.state = {
+		}
+	}
+
+	render() {
+		return (
+			React.DOM.div({className: "diamond-node", style: {position: 'relative', width: this.props.size, height: this.props.size}},
+				React.DOM.svg({
+					width:this.props.size,height: this.props.size,dangerouslySetInnerHTML: {__html:`
+						<g id="Layer_1">
+						</g>
+						<g id="Layer_2">
+							<polygon fill="cyan" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="10,`+(this.props.size/2)+` `+(this.props.size/2)+`,10 `+(this.props.size-10)+`,`+(this.props.size/2)+` `+(this.props.size/2)+`,`+(this.props.size-10)+` "/>
+						</g>
+				`}}),
+
+				//left node
+				React.DOM.div({style: {position: 'absolute', zIndex:10,top:this.props.size/2 - 5}},
+					React.createElement(SRD.PortWidget,{name: 'left', node: this.props.node})
+				),
+
+				//top node
+				React.DOM.div({style: {position: 'absolute', zIndex:10,left:this.props.size/2-8}},
+					React.createElement(SRD.PortWidget,{name: 'top', node: this.props.node})
+				),
+
+				//right
+				React.DOM.div({style: {position: 'absolute', zIndex:10,left:this.props.size-10,top:this.props.size/2}},
+					React.createElement(SRD.PortWidget,{name: 'right', node: this.props.node})
+				),
+
+				//bottom
+				React.DOM.div({style: {position: 'absolute', zIndex:10,left :this.props.size/2 - 8,top:this.props.size-10}},
+					React.createElement(SRD.PortWidget,{name: 'bottom', node: this.props.node})
+				),
+			)
+		)
+	}
+}
+
+export var DiamonNodeWidgetFactory = React.createFactory(DiamonNodeWidget);
+

demos/demo3/DiamondPortModel.ts

@@ -0,0 +1,24 @@
+import * as SRD from "../../src/main";
+import * as _ from "lodash";
+
+export class DiamondPortModel extends SRD.PortModel{
+
+	position: string|'top'|'bottom'|'left'|'right';
+
+	constructor(pos: string = 'top'){
+		super(pos);
+		this.position = pos ;
+	}
+
+	serialize(){
+		return _.merge(super.serialize(),{
+			position: this.position,
+		});
+	}
+
+	deSerialize(data:any){
+		super.deSerialize(data);
+		this.position = data.position;
+	}
+
+}

demos/demo3/DiamondWidgetFactory.ts

@@ -0,0 +1,13 @@
+import * as SRD from "../../src/main";
+import {DiamonNodeWidgetFactory} from "./DiamondNodeWidget";
+
+export class DiamondWidgetFactory extends SRD.NodeWidgetFactory{
+
+	constructor(){
+		super('diamond');
+	}
+
+	generateReactWidget(diagramEngine:SRD.DiagramEngine,node: SRD.NodeModel): JSX.Element{
+		return DiamonNodeWidgetFactory({node: node});
+	}
+}

demos/demo3/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>STORM React Diagrams Test 1</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<script src="https://unpkg.com/react/dist/react.min.js"></script>
+		<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
+		<script src="https://unpkg.com/lodash@4.17.4/lodash.min.js"></script>
+		<script src="./bundle.js"></script>
+	</head>
+	<body>
+
+	</body>
+</html>

demos/demo3/index.ts

@@ -0,0 +1,98 @@
+import * as SRD from "../../src/main";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {DiamondNodeModel} from "./DiamondNodeModel";
+import {DiamondWidgetFactory} from "./DiamondWidgetFactory";
+import {DiamondNodeFactory, DiamondPortFactory} from "./DiamondInstanceFactories";
+
+declare var require: {
+    <T>(path: string): T;
+    (paths: string[], callback: (...modules: any[]) => void): void;
+    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
+};
+
+require("../test.scss");
+
+
+/**
+ * 
+ * Simple test showing the Object oriented way of using this library.
+ * It creates 2 nodes and links them together with a single link
+ * 
+ * @Author Dylan Vorster
+ */
+window.onload = () => {
+
+	//1) setup the diagram engine
+	var engine = new SRD.DiagramEngine();
+	engine.registerNodeFactory(new SRD.DefaultNodeFactory());
+	engine.registerLinkFactory(new SRD.DefaultLinkFactory());
+	engine.registerNodeFactory(new DiamondWidgetFactory());
+
+
+	//2) setup the diagram model
+	var model = new SRD.DiagramModel();
+
+	//3-A) create a default node
+	var node1 = new SRD.DefaultNodeModel("Node 1","rgb(0,192,255)");
+	var port1 = node1.addPort(new SRD.DefaultPortModel(false,"out-1","Out"));
+	node1.x = 100;
+	node1.y = 150;
+
+	//3-B) create our new custom node
+	var node2 = new DiamondNodeModel();
+	node2.x = 400;
+	node2.y = 100;
+
+	var node3 = new SRD.DefaultNodeModel("Node 3","red");
+	var port3 = node3.addPort(new SRD.DefaultPortModel(false,"in-1","In"));
+	node3.x = 800;
+	node3.y = 150;
+
+	//3-C) link the 2 nodes together
+	var link1 = new SRD.LinkModel();
+	link1.setSourcePort(port1);
+	link1.setTargetPort(node2.ports['left']);
+
+	var link2 = new SRD.LinkModel();
+	link2.setSourcePort(node2.ports['right']);
+	link2.setTargetPort(port3);
+
+	//4) add the models to the root graph
+	model.addNode(node1);
+	model.addNode(node2);
+	model.addNode(node3);
+	model.addLink(link1);
+	model.addLink(link2);
+
+	//5) load model into engine
+	engine.setDiagramModel(model);
+
+	//6) render the diagram!
+
+
+	ReactDOM.render(React.createElement(SRD.DiagramWidget,{diagramEngine: engine}), document.body);
+
+
+	//!------------- SERIALIZING / DESERIALIZING ------------
+
+	//we need this to help the system know what models to create form the JSON
+	engine.registerInstanceFactory(new SRD.DefaultNodeInstanceFactory());
+	engine.registerInstanceFactory(new SRD.DefaultPortInstanceFactory());
+	engine.registerInstanceFactory(new SRD.LinkInstanceFactory());
+	engine.registerInstanceFactory(new DiamondNodeFactory());
+	engine.registerInstanceFactory(new DiamondPortFactory());
+
+	//serialize the model
+	var str = JSON.stringify(model.serializeDiagram());
+	console.log(str);
+
+	//deserialize the model
+	var model2 = new SRD.DiagramModel();
+	model2.deSerializeDiagram(JSON.parse(str),engine);
+	engine.setDiagramModel(model2);
+	console.log(model2);
+
+	//re-render the model
+	ReactDOM.render(React.createElement(SRD.DiagramWidget,{diagramEngine: engine}), document.body);
+}

dist/demos/demo3/DiamondInstanceFactories.d.ts

@@ -0,0 +1,11 @@
+import * as SRD from "../../src/main";
+import { DiamondNodeModel } from "./DiamondNodeModel";
+import { DiamondPortModel } from "./DiamondPortModel";
+export declare class DiamondNodeFactory extends SRD.AbstractInstanceFactory<DiamondNodeModel> {
+    constructor();
+    getInstance(): DiamondNodeModel;
+}
+export declare class DiamondPortFactory extends SRD.AbstractInstanceFactory<DiamondPortModel> {
+    constructor();
+    getInstance(): DiamondPortModel;
+}

dist/demos/demo3/DiamondNodeModel.d.ts

@@ -0,0 +1,4 @@
+import * as SRD from "../../src/main";
+export declare class DiamondNodeModel extends SRD.NodeModel {
+    constructor();
+}

dist/demos/demo3/DiamondNodeWidget.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import * as React from "react";
+import { DiamondNodeModel } from "./DiamondNodeModel";
+export interface DiamonNodeWidgetProps {
+    node: DiamondNodeModel;
+    size?: number;
+}
+export interface DiamonNodeWidgetState {
+}
+/**
+ * @author Dylan Vorster
+ */
+export declare class DiamonNodeWidget extends React.Component<DiamonNodeWidgetProps, DiamonNodeWidgetState> {
+    static defaultProps: DiamonNodeWidgetProps;
+    constructor(props: DiamonNodeWidgetProps);
+    render(): React.DOMElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+}
+export declare var DiamonNodeWidgetFactory: React.ComponentFactory<DiamonNodeWidgetProps, DiamonNodeWidget>;

dist/demos/demo3/DiamondPortModel.d.ts

@@ -0,0 +1,18 @@
+import * as SRD from "../../src/main";
+export declare class DiamondPortModel extends SRD.PortModel {
+    position: string | 'top' | 'bottom' | 'left' | 'right';
+    constructor(pos?: string);
+    serialize(): {
+        id: string;
+    } & {
+        _class: string;
+        selected: boolean;
+    } & {
+        name: string;
+        parentNode: string;
+        links: string[];
+    } & {
+        position: string;
+    };
+    deSerialize(data: any): void;
+}

dist/demos/demo3/DiamondWidgetFactory.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as SRD from "../../src/main";
+export declare class DiamondWidgetFactory extends SRD.NodeWidgetFactory {
+    constructor();
+    generateReactWidget(diagramEngine: SRD.DiagramEngine, node: SRD.NodeModel): JSX.Element;
+}

src/sass.scss

@@ -47,7 +47,7 @@
 		&.selected{
 			>* {
 				border-color:rgb(0,192,255) !important;
-				box-shadow: 0 0 20px rgba(0,192,255,0.5);
+				-webkit-filter: drop-shadow( 0 0 20px rgba(0,192,255,0.5));
 			}
 		}
 	}

webpack.config.js

@@ -45,6 +45,7 @@ module.exports = [
 		entry: {
 			'demo1/bundle.js': './demos/demo1/index.ts',
 			'demo2/bundle.js': './demos/demo2/index.ts',
+			'demo3/bundle.js': './demos/demo3/index.ts',
 		},
 		output: {
 			filename: '[name]',