lik 99% there

packages/diagrams-demo-gallery/demos/demo-drag-and-drop/Application.ts

@@ -14,7 +14,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)');

packages/react-canvas-core/src/core-models/BaseModel.ts

@@ -6,6 +6,7 @@ import {
 	BaseEntityOptions,
 	DeserializeEvent
 } from './BaseEntity';
+import { CanvasModel } from '../entities/canvas/CanvasModel';
 
 export interface BaseModelListener extends BaseEntityListener {
 	selectionChanged?(event: BaseEntityEvent<BaseModel> & { isSelected: boolean }): void;
@@ -32,6 +33,22 @@ export class BaseModel<G extends BaseModelGenerics = BaseModelGenerics> extends
 		super(options);
 	}
 
+	performanceTune() {
+		return true;
+	}
+
+	getParentCanvasModel(): CanvasModel {
+		if (!this.parent) {
+			return null;
+		}
+		if (this.parent instanceof CanvasModel) {
+			return this.parent;
+		} else if (this.parent instanceof BaseModel) {
+			return this.parent.getParentCanvasModel();
+		}
+		return null;
+	}
+
 	getParent(): G['PARENT'] {
 		return this.parent;
 	}

packages/react-canvas-core/src/core-models/BasePositionModel.ts

@@ -28,7 +28,7 @@ export class BasePositionModel<G extends BasePositionModelGenerics = BasePositio
 	setPosition(x, y?) {
 		if (typeof x === 'object') {
 			this.position = x;
-		} else {
+		} else if (typeof x) {
 			this.position = new Point(x, y);
 		}
 		this.fireEvent({}, 'positionChanged');

packages/react-canvas-core/src/core-state/StateMachine.ts

@@ -1,13 +1,19 @@
 import { State } from './State';
 import * as _ from 'lodash';
 import { CanvasEngine } from '../CanvasEngine';
+import { BaseEvent, BaseListener, BaseObserver } from '../core/BaseObserver';
 
-export class StateMachine {
+export interface StateMachineListener extends BaseListener {
+	stateChanged?: (event: BaseEvent & { newState: State }) => any;
+}
+
+export class StateMachine extends BaseObserver<StateMachineListener> {
 	protected currentState: State;
 	protected stateStack: State[];
 	protected engine: CanvasEngine;
 
 	constructor(engine: CanvasEngine) {
+		super();
 		this.engine = engine;
 		this.stateStack = [];
 	}
@@ -22,8 +28,8 @@ export class StateMachine {
 	}
 
 	popState() {
-		const oldState = this.stateStack.pop();
-		const state = this.setState(_.last(this.stateStack));
+		this.stateStack.pop();
+		this.setState(_.last(this.stateStack));
 	}
 
 	setState(state: State) {
@@ -37,6 +43,12 @@ export class StateMachine {
 		this.currentState = state;
 		if (this.currentState) {
 			this.currentState.activated(old);
+			this.fireEvent<'stateChanged'>(
+				{
+					newState: state
+				},
+				'stateChanged'
+			);
 		}
 	}
 }

packages/react-canvas-core/src/entities/canvas/CanvasModel.ts

@@ -96,7 +96,7 @@ export class CanvasModel<G extends CanvasModelGenerics = CanvasModelGenerics> ex
 		this.fireEvent({ size: size }, 'gridUpdated');
 	}
 
-	getGridPosition(pos) {
+	getGridPosition(pos: number) {
 		if (this.options.gridSize === 0) {
 			return pos;
 		}

packages/react-canvas-core/src/entities/layer/LayerModel.ts

@@ -88,14 +88,6 @@ export abstract class LayerModel<G extends LayerModelGenerics = LayerModelGeneri
 		});
 	}
 
-	getSelectedEntities(): Array<BaseModel> {
-		return super.getSelectedEntities().concat(
-			_.flatMap(this.models, entity => {
-				return entity.getSelectedEntities();
-			})
-		);
-	}
-
 	getModels() {
 		return this.models;
 	}

packages/react-canvas-core/src/states/MoveItemsState.ts

@@ -40,6 +40,7 @@ export class MoveItemsState<E extends CanvasEngine = CanvasEngine> extends Abstr
 
 	fireMouseMoved(event: AbstractDisplacementStateEvent) {
 		const items = this.engine.getModel().getSelectedEntities();
+		const model = this.engine.getModel();
 		for (let item of items) {
 			if (item instanceof BasePositionModel) {
 				if (item.isLocked()) {
@@ -53,7 +54,10 @@ export class MoveItemsState<E extends CanvasEngine = CanvasEngine> extends Abstr
 				}
 
 				const pos = this.initialPositions[item.getID()].point;
-				item.setPosition(pos.x + event.virtualDisplacementX, pos.y + event.virtualDisplacementY);
+				item.setPosition(
+					model.getGridPosition(pos.x + event.virtualDisplacementX),
+					model.getGridPosition(pos.y + event.virtualDisplacementY)
+				);
 			}
 		}
 		this.engine.repaintCanvas();

packages/react-canvas-core/src/widgets/PeformanceWidget.tsx

@@ -16,6 +16,9 @@ export class PeformanceWidget extends React.Component<PeformanceWidgetProps, Pef
 		nextState: Readonly<PeformanceWidgetState>,
 		nextContext: any
 	): boolean {
+		if (!this.props.model.performanceTune()) {
+			return true;
+		}
 		// deserialization event
 		if (this.props.model !== nextProps.model) {
 			return true;

packages/react-diagrams-core/src/entities/link/LinkModel.ts

@@ -50,6 +50,17 @@ export class LinkModel<G extends LinkModelGenerics = LinkModelGenerics> extends
 	}
 
 	getSelectionEntities(): Array<BaseModel> {
+		if (this.getTargetPort() && this.getSourcePort()) {
+			return super.getSelectionEntities().concat(_.slice(this.points, 1, this.points.length - 1));
+		}
+		// allow selection of the first point
+		if (!this.getSourcePort()) {
+			return super.getSelectionEntities().concat(_.slice(this.points, 0, this.points.length - 1));
+		}
+		// allow selection of the last point
+		if (!this.getTargetPort()) {
+			return super.getSelectionEntities().concat(_.slice(this.points, 1, this.points.length));
+		}
 		return super.getSelectionEntities().concat(this.points);
 	}
 

packages/react-diagrams-core/src/entities/link/PointModel.ts

@@ -27,13 +27,6 @@ export class PointModel<G extends PointModelGenerics = PointModelGenerics> exten
 		this.parent = options.link;
 	}
 
-	getSelectedEntities() {
-		if (super.isSelected() && !this.isConnectedToPort()) {
-			return [this];
-		}
-		return [];
-	}
-
 	isConnectedToPort(): boolean {
 		return this.parent.getPortForPoint(this) !== null;
 	}

packages/react-diagrams-defaults/src/port/DefaultPortModel.ts

@@ -1,5 +1,4 @@
 import {
-	DiagramEngine,
 	LinkModel,
 	PortModel,
 	PortModelAlignment,

packages/react-diagrams-routing/src/link/PathFindingLinkFactory.tsx

@@ -5,7 +5,14 @@ import { PathFindingLinkWidget } from './PathFindingLinkWidget';
 import * as _ from 'lodash';
 import * as Path from 'paths-js/path';
 import { DefaultLinkFactory } from '@projectstorm/react-diagrams-defaults';
-import { AbstractFactory, FactoryBank, ListenerHandle } from '@projectstorm/react-canvas-core';
+import {
+	AbstractDisplacementState,
+	AbstractFactory,
+	Action,
+	FactoryBank,
+	InputType,
+	ListenerHandle
+} from '@projectstorm/react-canvas-core';
 
 export class PathFindingLinkFactory extends DefaultLinkFactory<PathFindingLinkModel> {
 	ROUTING_SCALING_FACTOR: number = 5;
@@ -27,6 +34,24 @@ export class PathFindingLinkFactory extends DefaultLinkFactory<PathFindingLinkMo
 
 	setDiagramEngine(engine: DiagramEngine): void {
 		super.setDiagramEngine(engine);
+
+		// listen for drag changes
+		engine.getStateMachine().registerListener({
+			stateChanged: event => {
+				if (event.newState instanceof AbstractDisplacementState) {
+					const deRegister = engine.getActionEventBus().registerAction(
+						new Action<DiagramEngine>({
+							type: InputType.MOUSE_UP,
+							fire: () => {
+								this.calculateRoutingMatrix();
+								engine.repaintCanvas();
+								deRegister();
+							}
+						})
+					);
+				}
+			}
+		});
 		this.listener = engine.registerListener({
 			canvasReady: () => {
 				_.defer(() => {

packages/react-diagrams-routing/src/link/PathFindingLinkModel.ts

@@ -8,4 +8,8 @@ export class PathFindingLinkModel extends DefaultLinkModel {
 			...options
 		});
 	}
+
+	performanceTune() {
+		return false;
+	}
 }