selections are now event driven

packages/react-canvas-core/index.ts

@@ -16,9 +16,13 @@ export * from './src/entities/canvas/CanvasModel';
 export * from './src/entities/canvas/CanvasWidget';
 
 export * from './src/entities/layer/LayerModel';
+export * from './src/entities/layer/TransformLayerWidget';
+
+export * from './src/entities/selection/SelectionBoxLayerFactory';
+export * from './src/entities/selection/SelectionBoxWidget';
+export * from './src/entities/selection/SelectionLayerModel';
 
 export * from './src/widgets/PeformanceWidget';
-export * from './src/entities/layer/TransformLayerWidget';
 
 export * from './src/states/DefaultState';
 export * from './src/states/DragCanvasState';

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

@@ -12,7 +12,8 @@ export abstract class State {
 	protected actions: Action[];
 	protected keys: string[];
 	protected options: StateOptions;
-	private childStates: State[];
+	protected childStates: State[];
+
 	private handler1;
 	private handler2;
 
@@ -45,7 +46,6 @@ export abstract class State {
 	}
 
 	tryActivateParentState(keys: string[]) {
-		console.log('trying parent state');
 		if (this.keys.length > 0 && !this.isKeysFullfilled(keys)) {
 			this.eject();
 			return true;

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

@@ -68,9 +68,21 @@ export class CanvasModel<G extends CanvasModelGenerics = CanvasModelGenerics> ex
 
 	addLayer(layer: LayerModel) {
 		layer.setParent(this);
+		layer.registerListener({
+			entityRemoved: (event: BaseEntityEvent<BaseModel>): void => {}
+		});
 		this.layers.push(layer);
 	}
 
+	removeLayer(layer: LayerModel) {
+		const index = this.layers.indexOf(layer);
+		if (index !== -1) {
+			this.layers.splice(index, 1);
+			return true;
+		}
+		return false;
+	}
+
 	getLayers() {
 		return this.layers;
 	}

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

@@ -20,6 +20,13 @@ export class LayerModel<G extends LayerModelGenerics = LayerModelGenerics> exten
 		this.models = {};
 	}
 
+	remove() {
+		if (this.parent) {
+			this.parent.removeLayer(this);
+		}
+		super.remove();
+	}
+
 	addModel(model: G['CHILDREN']) {
 		model.setParent(this);
 		this.models[model.getID()] = model;

packages/react-canvas-core/src/entities/selection/SelectionBoxLayerFactory.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AbstractReactFactory, GenerateWidgetEvent } from '../../core/AbstractReactFactory';
+import { SelectionLayerModel } from './SelectionLayerModel';
+import { GenerateModelEvent } from '../../core/AbstractModelFactory';
+import { SelectionBoxWidget } from './SelectionBoxWidget';
+
+export class SelectionBoxLayerFactory extends AbstractReactFactory<SelectionLayerModel> {
+	constructor() {
+		super('selection');
+	}
+
+	generateModel(event: GenerateModelEvent): SelectionLayerModel {
+		return new SelectionLayerModel();
+	}
+
+	generateReactWidget(event: GenerateWidgetEvent<SelectionLayerModel>): JSX.Element {
+		return <SelectionBoxWidget rect={event.model.box} />;
+	}
+}

packages/react-canvas-core/src/entities/selection/SelectionLayerModel.ts

@@ -0,0 +1,17 @@
+import { LayerModel } from '../layer/LayerModel';
+
+export class SelectionLayerModel extends LayerModel {
+	box: ClientRect;
+
+	constructor() {
+		super({
+			transformed: false,
+			isSvg: false,
+			type: 'selection'
+		});
+	}
+
+	setBox(rect: ClientRect) {
+		this.box = rect;
+	}
+}

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

@@ -1,11 +1,41 @@
 import { AbstractDisplacementState, AbstractDisplacementStateEvent } from '../core-state/AbstractDisplacementState';
+import { State } from '../core-state/State';
+import { SelectionLayerModel } from '../entities/selection/SelectionLayerModel';
 
 export class SelectionBoxState extends AbstractDisplacementState {
+	layer: SelectionLayerModel;
+
 	constructor() {
 		super({
 			name: 'selection-box'
 		});
 	}
 
-	fireMouseMoved(event: AbstractDisplacementStateEvent) {}
+	activated(previous: State) {
+		super.activated(previous);
+		this.layer = new SelectionLayerModel();
+		this.engine.getModel().addLayer(this.layer);
+	}
+
+	deactivated(next: State) {
+		super.deactivated(next);
+		this.layer.remove();
+		this.engine.repaintCanvas();
+	}
+
+	getBoxDimensions(event: AbstractDisplacementStateEvent): ClientRect {
+		return {
+			left: event.event.clientX > this.initialX ? this.initialX : event.event.clientX,
+			top: event.event.clientY > this.initialY ? this.initialY : event.event.clientY,
+			width: Math.abs(event.event.clientX - this.initialX),
+			height: Math.abs(event.event.clientY - this.initialY),
+			right: event.event.clientX < this.initialX ? this.initialX : event.event.clientX,
+			bottom: event.event.clientY < this.initialY ? this.initialY : event.event.clientY
+		};
+	}
+
+	fireMouseMoved(event: AbstractDisplacementStateEvent) {
+		this.layer.setBox(this.getBoxDimensions(event));
+		this.engine.repaintCanvas();
+	}
 }

packages/react-diagrams/index.ts

@@ -6,7 +6,7 @@ import {
 	DefaultPortFactory
 } from '@projectstorm/react-diagrams-defaults';
 import { PathFindingLinkFactory } from '@projectstorm/react-diagrams-routing';
-import { DefaultState } from '@projectstorm/react-canvas-core';
+import { DefaultState, SelectionBoxLayerFactory } from '@projectstorm/react-canvas-core';
 
 export * from '@projectstorm/react-diagrams-core';
 export * from '@projectstorm/react-diagrams-defaults';
@@ -21,6 +21,7 @@ export default (): DiagramEngine => {
 	// register model factories
 	engine.getLayerFactories().registerFactory(new NodeLayerFactory());
 	engine.getLayerFactories().registerFactory(new LinkLayerFactory());
+	engine.getLayerFactories().registerFactory(new SelectionBoxLayerFactory());
 
 	engine.getLabelFactories().registerFactory(new DefaultLabelFactory());
 	engine.getNodeFactories().registerFactory(new DefaultNodeFactory()); // i cant figure out why