diff --git a/src/defaults/models/DefaultLabelModel.tsx b/src/defaults/models/DefaultLabelModel.tsx
index 524e416..d5938d7 100644
--- a/src/defaults/models/DefaultLabelModel.tsx
+++ b/src/defaults/models/DefaultLabelModel.tsx
@@ -14,8 +14,8 @@ export class DefaultLabelModel extends LabelModel {
 		this.label = label;
 	}
 
-	deSerialize(ob, engine: DiagramEngine) {
-		super.deSerialize(ob, engine);
+	deSerialize(ob, engine: DiagramEngine, cache) {
+		super.deSerialize(ob, engine, cache);
 		this.label = ob.label;
 	}
 
diff --git a/src/defaults/models/DefaultLinkModel.ts b/src/defaults/models/DefaultLinkModel.ts
index 500a9d1..0dcfd0e 100644
--- a/src/defaults/models/DefaultLinkModel.ts
+++ b/src/defaults/models/DefaultLinkModel.ts
@@ -1,13 +1,9 @@
-/**
- * @author Dylan Vorster
- */
 import { LinkModel, LinkModelListener } from "../../models/LinkModel";
-import { BaseEvent } from "../../BaseEntity";
 import * as _ from "lodash";
-import { PointModel } from "../../models/PointModel";
 import { DiagramEngine } from "../../DiagramEngine";
 import { DefaultLabelModel } from "./DefaultLabelModel";
 import { LabelModel } from "../../models/LabelModel";
+import {BaseEvent} from "@projectstorm/react-canvas";
 
 export interface DefaultLinkModelListener extends LinkModelListener {
 	colorChanged?(event: BaseEvent<DefaultLinkModel> & { color: null | string }): void;
@@ -35,8 +31,8 @@ export class DefaultLinkModel extends LinkModel<DefaultLinkModelListener> {
 		});
 	}
 
-	deSerialize(ob, engine: DiagramEngine) {
-		super.deSerialize(ob, engine);
+	deSerialize(ob, engine: DiagramEngine, cache) {
+		super.deSerialize(ob, engine, cache);
 		this.color = ob.color;
 		this.width = ob.width;
 		this.curvyness = ob.curvyness;
diff --git a/src/defaults/models/DefaultNodeModel.ts b/src/defaults/models/DefaultNodeModel.ts
index dc15bea..76cd575 100644
--- a/src/defaults/models/DefaultNodeModel.ts
+++ b/src/defaults/models/DefaultNodeModel.ts
@@ -1,6 +1,5 @@
-import { DefaultPortModel } from "./DefaultPortModel";
 import * as _ from "lodash";
-
+import { DefaultPortModel } from "./DefaultPortModel";
 import { NodeModel } from "../../models/NodeModel";
 import { Toolkit } from "../../Toolkit";
 import { DiagramEngine } from "../../DiagramEngine";
@@ -27,8 +26,8 @@ export class DefaultNodeModel extends NodeModel {
 		return this.addPort(new DefaultPortModel(false, Toolkit.UID(), label));
 	}
 
-	deSerialize(object, engine: DiagramEngine) {
-		super.deSerialize(object, engine);
+	deSerialize(object, engine: DiagramEngine, cache) {
+		super.deSerialize(object, engine, cache);
 		this.name = object.name;
 		this.color = object.color;
 	}
diff --git a/src/defaults/models/DefaultPortModel.ts b/src/defaults/models/DefaultPortModel.ts
index 274e1b8..6870e5f 100644
--- a/src/defaults/models/DefaultPortModel.ts
+++ b/src/defaults/models/DefaultPortModel.ts
@@ -9,14 +9,14 @@ export class DefaultPortModel extends PortModel {
 	label: string;
 	links: { [id: string]: DefaultLinkModel };
 
-	constructor(isInput: boolean, name: string, label: string = null, id?: string) {
-		super(name, "default", id);
+	constructor(isInput: boolean, name: string, label: string = null) {
+		super(name, "default");
 		this.in = isInput;
 		this.label = label || name;
 	}
 
-	deSerialize(object, engine: DiagramEngine) {
-		super.deSerialize(object, engine);
+	deSerialize(object, engine: DiagramEngine, cache) {
+		super.deSerialize(object, engine, cache);
 		this.in = object.in;
 		this.label = object.label;
 	}
diff --git a/src/models/NodeModel.ts b/src/models/NodeModel.ts
index cbbbdad..b674eb4 100644
--- a/src/models/NodeModel.ts
+++ b/src/models/NodeModel.ts
@@ -1,44 +1,34 @@
 import { PortModel } from "./PortModel";
 import * as _ from "lodash";
 import { DiagramEngine } from "../DiagramEngine";
-import { DiagramModel } from "./DiagramModel";
-import {BaseModel, BaseListener} from "@projectstorm/react-canvas";
+import {Rectangle, CanvasElementModel} from "@projectstorm/react-canvas";
 
-export class NodeModel extends BaseModel<DiagramModel, BaseListener> {
-	x: number;
-	y: number;
+export class NodeModel extends CanvasElementModel {
+
+	dimensions: Rectangle;
 	extras: any;
 	ports: { [s: string]: PortModel };
 
-	// calculated post rendering so routing can be done correctly
-	width: number;
-	height: number;
-
 	constructor(nodeType: string = "default") {
 		super(nodeType);
-		this.x = 0;
-		this.y = 0;
+		this.dimensions = new Rectangle(0,0,0,0);
 		this.extras = {};
 		this.ports = {};
 	}
 
-	setPosition(x, y) {
-		//store position
-		let oldX = this.x;
-		let oldY = this.y;
-		_.forEach(this.ports, port => {
-			_.forEach(port.getLinks(), link => {
-				let point = link.getPointForPort(port);
-				point.x = point.x + x - oldX;
-				point.y = point.y + y - oldY;
-			});
-		});
-		this.x = x;
-		this.y = y;
+	setDimensions(dimensions: Rectangle) {
+		this.dimensions = dimensions;
+	}
+
+	getDimensions(): Rectangle {
+		return this.dimensions;
 	}
 
 	getSelectedEntities() {
-		let entities = super.getSelectedEntities();
+		let entities = [];
+		if(this.isSelected()){
+			entities.push(this);
+		}
 
 		// add the points of each link that are selected here
 		if (this.isSelected()) {
@@ -61,8 +51,8 @@ export class NodeModel extends BaseModel<DiagramModel, BaseListener> {
 
 		//deserialize ports
 		_.forEach(ob.ports, (port: any) => {
-			let portOb = engine.getFactory(port.type).getNewInstance();
-			portOb.deSerialize(port, engine);
+			let portOb = engine.getFactory(port.type).generateModel() as PortModel;
+			portOb.deSerialize(port, engine, cache);
 			this.addPort(portOb);
 		});
 	}
@@ -95,8 +85,8 @@ export class NodeModel extends BaseModel<DiagramModel, BaseListener> {
 	}
 
 	getPortFromID(id): PortModel | null {
-		for (var i in this.ports) {
-			if (this.ports[i].id === id) {
+		for (let i in this.ports) {
+			if (this.ports[i].getID() === id) {
 				return this.ports[i];
 			}
 		}
diff --git a/src/models/PointModel.ts b/src/models/PointModel.ts
index 98b42bd..5b953b7 100644
--- a/src/models/PointModel.ts
+++ b/src/models/PointModel.ts
@@ -1,11 +1,9 @@
-import { BaseModel, BaseModelListener } from "./BaseModel";
 import { LinkModel } from "./LinkModel";
 import * as _ from "lodash";
 import { DiagramEngine } from "../DiagramEngine";
+import {Rectangle, CanvasElementModel, CanvasElementModelListener} from "@projectstorm/react-canvas";
 
-export class PointModel extends BaseModel<LinkModel, BaseModelListener> {
-	x: number;
-	y: number;
+export class PointModel extends CanvasElementModel<CanvasElementModelListener> {
 
 	constructor(link: LinkModel, points: { x: number; y: number }) {
 		super();