wip

demos/demo-cloning/index.tsx

@@ -81,7 +81,7 @@ export default () => {
 	model.addAll(node1, node2, link1);
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//6) render the diagram!
 	return <CloneSelected engine={engine} model={model} />;

demos/demo-custom-link1/index.tsx

@@ -150,7 +150,7 @@ export default () => {
 	model.addAll(node1, node2, node3, node4);
 
 	// load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	// render the diagram!
 	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;

demos/demo-custom-node1/index.tsx

@@ -50,7 +50,7 @@ export default () => {
 	model.addAll(node1, node2, node3, link1, link2);
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//6) render the diagram!
 	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;

demos/demo-dagre/index.tsx

@@ -40,7 +40,7 @@ class Demo8Widget extends React.Component<any, any> {
 		const { engine } = this.props;
 		const model = engine.getDiagramModel();
 		let distributedModel = getDistributedModel(engine, model);
-		engine.setDiagramModel(distributedModel);
+		engine.setModel(distributedModel);
 		this.forceUpdate();
 	}
 
@@ -114,7 +114,7 @@ export default () => {
 	//5) load model into engine
 	let model2 = getDistributedModel(engine, model);
 
-	engine.setDiagramModel(model2);
+	engine.setModel(model2);
 
 	return <Demo8Widget engine={engine} />;
 };

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

@@ -16,7 +16,7 @@ export class Application {
 
 	public newModel() {
 		this.activeModel = new SRD.DiagramModel();
-		this.diagramEngine.setDiagramModel(this.activeModel);
+		this.diagramEngine.setModel(this.activeModel);
 
 		//3-A) create a default node
 		var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");

demos/demo-grid/index.tsx

@@ -30,7 +30,7 @@ export default () => {
 	model.addAll(node1, node2, link1);
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//6) render the diagram!
 	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;

demos/demo-labelled-links/index.tsx

@@ -53,7 +53,7 @@ export default () => {
 	model.addAll(node1, node2, node3, node4, link1, link2, link3);
 
 	// load model into engine and render
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	return (
 		<DemoWorkspaceWidget

demos/demo-limit-points/index.tsx

@@ -33,7 +33,7 @@ export default () => {
 
 	model.addAll(node1, node2, link1);
 
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	var props = {
 		diagramEngine: engine,

demos/demo-listeners/index.tsx

@@ -46,7 +46,7 @@ export default () => {
 		});
 	});
 
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	var props = {
 		diagramEngine: engine,

demos/demo-locks/index.tsx

@@ -51,7 +51,7 @@ export default () => {
 
 	model.addAll(node3, node4, link2);
 
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//!========================================= <<<<<<<
 

demos/demo-mutate-graph/index.tsx

@@ -31,7 +31,7 @@ class NodeDelayedPosition extends React.Component<any, any> {
 		node.x += 30;
 		node.y += 30;
 		model2.deSerializeDiagram(obj, engine);
-		engine.setDiagramModel(model2);
+		engine.setModel(model2);
 		this.forceUpdate();
 	}
 
@@ -79,7 +79,7 @@ export default () => {
 	model.addAll(node1, node2, link1);
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//6) render the diagram!
 	return <NodeDelayedPosition engine={engine} model={model} />;

demos/demo-performance/index.tsx

@@ -23,7 +23,7 @@ export default () => {
 	}
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//6) render the diagram!
 	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;

demos/demo-serializing/index.tsx

@@ -29,7 +29,7 @@ export default () => {
 	model.addAll(node1, node2, link1);
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//!------------- SERIALIZING ------------------
 
@@ -39,7 +39,7 @@ export default () => {
 
 	var model2 = new DiagramModel();
 	model2.deSerializeDiagram(JSON.parse(str), engine);
-	engine.setDiagramModel(model2);
+	engine.setModel(model2);
 
 	return (
 		<DemoWorkspaceWidget

demos/demo-simple-flow/index.tsx

@@ -31,7 +31,7 @@ export default () => {
 	model.addAll(node1, node2, node3, link1);
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//6) render the diagram!
 	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} allowLooseLinks={false} />;

demos/demo-simple/index.tsx

@@ -34,7 +34,7 @@ export default () => {
 	model.addAll(node1, node2, link1);
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//6) render the diagram!
 	return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;

demos/demo-smart-routing/index.tsx

@@ -43,7 +43,7 @@ export default () => {
 	model.addAll(node1, node2, node3, node4, node5, link1, link2);
 
 	// load model into engine and render
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	return (
 		<DemoWorkspaceWidget

demos/demo-zoom-to-fit/index.tsx

@@ -30,7 +30,7 @@ export default () => {
 	}
 
 	//5) load model into engine
-	engine.setDiagramModel(model);
+	engine.setModel(model);
 
 	//6) render the diagram!
 	return (

src/models/DiagramModel.ts

@@ -12,8 +12,8 @@ export interface DiagramListener extends CanvasModelListener {
 }
 
 export class DiagramModel extends CanvasModel<DiagramListener> {
-	linksLayer: CanvasLayerModel;
-	nodesLayer: CanvasLayerModel;
+	linksLayer: CanvasLayerModel<LinkModel>;
+	nodesLayer: CanvasLayerModel<NodeModel>;
 
 	constructor() {
 		super();
@@ -53,12 +53,7 @@ export class DiagramModel extends CanvasModel<DiagramListener> {
 	}
 
 	addNode(node: NodeModel): NodeModel {
-		node.addListener({
-			entityRemoved: () => {
-				this.removeNode(node);
-			}
-		});
-		this.nodes[node.getID()] = node;
+		this.nodesLayer.addEntity(node);
 		this.iterateListeners("node added", (listener, event) => {
 			if (listener.nodesUpdated) {
 				listener.nodesUpdated({ ...event, node: node, isCreated: true });
@@ -68,8 +63,7 @@ export class DiagramModel extends CanvasModel<DiagramListener> {
 	}
 
 	removeLink(link: LinkModel | string) {
-		link = this.getLink(link);
-		delete this.links[link.getID()];
+		this.linksLayer.removeEntity(link);
 		this.iterateListeners("link removed", (listener, event) => {
 			if (listener.linksUpdated) {
 				listener.linksUpdated({ ...event, link: link as LinkModel, isCreated: false });
@@ -78,8 +72,7 @@ export class DiagramModel extends CanvasModel<DiagramListener> {
 	}
 
 	removeNode(node: NodeModel | string) {
-		node = this.getNode(node);
-		delete this.nodes[node.getID()];
+		this.nodesLayer.removeEntity(node);
 		this.iterateListeners("node removed", (listener, event) => {
 			if (listener.nodesUpdated) {
 				listener.nodesUpdated({ ...event, node: node as NodeModel, isCreated: false });
@@ -88,10 +81,10 @@ export class DiagramModel extends CanvasModel<DiagramListener> {
 	}
 
 	getLinks(): { [s: string]: LinkModel } {
-		return this.links;
+		return this.linksLayer.getEntities();
 	}
 
 	getNodes(): { [s: string]: NodeModel } {
-		return this.nodes;
+		return this.nodesLayer.getEntities();
 	}
 }

src/models/NodeModel.ts

@@ -20,6 +20,10 @@ export class NodeModel<T extends PortModel = PortModel> extends CanvasElementMod
 		return this.dimensions;
 	}
 
+	setPosition(x:number, y:number){
+		this.dimensions.updateDimensions(x,y, this.dimensions.getWidth(), this.dimensions.getHeight());
+	}
+
 	deSerialize(event: DeserializeEvent) {
 		super.deSerialize(event);
 		this.dimensions.deserialize(event.data.dimensions);