Link updates

demos/demo13/index.tsx

@@ -15,55 +15,47 @@ import {
 import * as React from "react";
 
 /**
- * Tests the grid size
+ * Tests cloning
  */
-class NodeDelayedPosition extends React.Component<any, any> {
+class CloneSelected extends React.Component<any, any> {
 	constructor(props) {
 		super(props);
-		this.cloneSelected = this.cloneSelected.bind(this)
+		this.cloneSelected = this.cloneSelected.bind(this);
 	}
-
-	updatePosition() {
-		const { engine } = this.props;
-		let model = engine.getDiagramModel();
-		const nodes = model.getNodes();
-		let node = nodes[Object.keys(nodes)[0]];
-		node.setPosition(node.x + 30, node.y + 30);
-		this.forceUpdate();
-	}
-
 	cloneSelected() {
 		const {engine} = this.props;
-		const offset = {x:100,y:100};
+		const offset = {x: 100, y: 100};
 		const model = engine.getDiagramModel();
 		const originalItems = model.getSelectedItems();
-		const selectedItems = originalItems.reduce((res,i) => {
-			if(i instanceof NodeModel) res.nodes.push(i);
-			else if(i instanceof LinkModel) res.links.push(i);
+		const selectedItems = originalItems.reduce((res, i) => {
+			if (i instanceof NodeModel) {
+				res.nodes.push(i);
+			} else if (i instanceof LinkModel) {
+				res.links.push(i);
+			}
 			return res;
-		},{nodes:[],links:[]});
+		}, {nodes: [], links: []});
 		let lookupTable = {};
-		selectedItems.nodes.forEach(i => {
+		selectedItems.nodes.forEach( (i) => {
 
 				let node = i.clone(lookupTable);
 				model.addNode(node);
-				node.setPosition(node.x+offset.x,node.y+offset.y)
+				node.setPosition(node.x + offset.x, node.y + offset.y);
 		});
-		selectedItems.links.forEach(i => {
+		selectedItems.links.forEach( (i) => {
 				let link = i.clone(lookupTable);
-				link.getPoints().forEach(p => p.updateLocation({x:p.getX()+offset.x,y:p.getY()+offset.y}));
+				link.getPoints().forEach((p) => p.updateLocation({x: p.getX() + offset.x, y: p.getY() + offset.y}));
 				model.addLink(link);
 		});
-		originalItems.forEach(i => i.selected = false);
+		originalItems.forEach((i) => i.selected = false);
 		this.forceUpdate();
 	}
 
-
 	render() {
 		const { engine } = this.props;
 		return (
 			<div>
-				<DiagramWidget diagramEngine={engine} allowLooseLinks={false} />
+				<DiagramWidget diagramEngine={engine} />
 				<button onClick={this.cloneSelected}>Clone Selected</button>
 			</div>
 		);
@@ -110,5 +102,5 @@ export default () => {
 	engine.registerInstanceFactory(new LinkInstanceFactory());
 
 	//6) render the diagram!
-	return <NodeDelayedPosition engine={engine} model={model} />;
+	return <CloneSelected engine={engine} model={model} />;
 };

src/BaseEntity.ts

@@ -29,7 +29,7 @@ export class BaseEntity<T extends BaseListener = {}> {
 		return this.id;
 	}
 
-	clone(lookupTable) {
+	clone(lookupTable = {}) {
 		let clone = _.clone(this);
 		clone.clearListeners();
 		clone.id = Toolkit.UID();

src/models/BaseModel.ts

@@ -40,14 +40,22 @@ export class BaseModel<T extends BaseModelListener = BaseModelListener> extends
 		});
 	}
 
-	public clone(lookupTable) {
-		if(((lookupTable||{})[this.class]||{}).hasOwnProperty(this.id)) return lookupTable[this.class][this.id];
+	public clone(lookupTable = {}) {
+		if (this.getClone(lookupTable)) {
+			return this.getClone(lookupTable);
+		}
 		let clone = super.clone(lookupTable);
-		if(!lookupTable[this.class]) lookupTable[this.class] = {};
+		if (!lookupTable[this.class]) {
+			lookupTable[this.class] = {};
+		}
 		lookupTable[this.class][this.id] = clone;
 		return clone;
 	}
 
+	public getClone(lookupTable = {}) {
+		return (lookupTable[this.class] || {})[this.id];
+	}
+
 	public getID(): string {
 		return this.id;
 	}

src/models/LinkModel.ts

@@ -51,17 +51,23 @@ export class LinkModel extends BaseModel<LinkModelListener> {
 		});
 	}
 
-	clone(lookupTable) {
-		if(((lookupTable||{})[this.class]||{}).hasOwnProperty(this.id)) return lookupTable[this.class][this.id];
+	clone(lookupTable = {}) {
+		if (this.getClone(lookupTable)) {
+			return this.getClone(lookupTable);
+		}
 		let clone = super.clone(lookupTable);
-		clone.setPoints(_.map(clone.getPoints(),(point:PointModel) => {
+		clone.setPoints(_.map(clone.getPoints(), (point: PointModel) => {
 			let newPoint = point.clone(lookupTable);
 			newPoint.link = clone;
 			return newPoint;
 		}));
-		if(this.sourcePort) clone.setSourcePort(this.sourcePort.clone(lookupTable));
-		if(this.targetPort) clone.setTargetPort(this.targetPort.clone(lookupTable));
-		return clone
+		if (this.sourcePort) {
+			clone.setSourcePort(this.sourcePort.clone(lookupTable));
+		}
+		if (this.targetPort) {
+			clone.setTargetPort(this.targetPort.clone(lookupTable));
+		}
+		return clone;
 	}
 
 	remove() {
@@ -157,12 +163,12 @@ export class LinkModel extends BaseModel<LinkModelListener> {
 	}
 
 	removePointsBefore(pointModel: PointModel) {
-		this.points.splice(0,this.getPointIndex(pointModel))
+		this.points.splice(0, this.getPointIndex(pointModel));
 	}
 
 	removePointsAfter(pointModel: PointModel) {
 
-		this.points.splice(this.getPointIndex(pointModel)+1)
+		this.points.splice(this.getPointIndex(pointModel) + 1);
 	}
 
 	addPoint(pointModel: PointModel, index = 1) {

src/models/NodeModel.ts

@@ -70,14 +70,16 @@ export class NodeModel extends BaseModel<BaseModelListener> {
 		});
 	}
 
-	clone(lookupTable) {
-		if(((lookupTable||{})[this.class]||{}).hasOwnProperty(this.id)) return lookupTable[this.class][this.id];
+	clone(lookupTable = {}) {
+		if (this.getClone(lookupTable)) {
+			return this.getClone(lookupTable);
+		}
 		let clone = super.clone(lookupTable);
-		clone.ports = {}
-		_.values(this.ports).map(port => {
+		clone.ports = {};
+		_.values(this.ports).map((port) => {
 			clone.addPort(port.clone(lookupTable));
-		})
-		return clone
+		});
+		return clone;
 	}
 
 	remove() {

src/models/PortModel.ts

@@ -23,13 +23,15 @@ export class PortModel extends BaseModel<BaseModelListener> {
 		});
 	}
 
-	clone(lookupTable) {
-		if(((lookupTable||{})[this.class]||{}).hasOwnProperty(this.id)) return lookupTable[this.class][this.id];
+	clone(lookupTable = {}) {
+		if (this.getClone(lookupTable)) {
+			return this.getClone(lookupTable);
+		}
 		let clone = super.clone(lookupTable);
 		//we are merely a referenced object. The links/nodes should be in charge of handling our connections
 		clone.links = {};
 		clone.parentNode = null;
-		return clone
+		return clone;
 	}
 
 	constructor(name: string, id?: string) {