more wip

Author: dylanvorster

README.md

@@ -6,21 +6,43 @@ A brand new foundation for storm-react-diagrams
 
 ## Features
 
-* Virtual and real co-ordinate system
-* Built in primitives (square, grid, circle)
-* Grouped selections
-* canvas panning and zooming
-* Forward constraints and inferred constraints (dimension tracking)
-* pluggable state machine for interactive modes
-* pluggable and modular everything
-* multiple layers
-* ordered canvas elements per layer
-* grouped resizing via 8 anchor points
-* Fit to width
-* Serialization and deserialization
-* History (redo and undo)
+#### Core
+* virtual co-ordinate system
+* real co-ordinate system
+* matrix transformation, precomputed and optimized
+* forward dimensions and inferred dimensions
+* history push and pop (wip)
+* SVG and standard DOM support
+* pluggable event bus
+* pluggable state machine
+* model driven with serialization layers (imperative and declarative styles)
+* serialization and deserialization
+
+#### Canvas
+* translate / panning
+* zoom
+* de-select elements
+* fit to width
+* multiple ordered layers
+* ordered elements on layers
+
+#### Primitives
+* multiple infinite grids
+* point based vectors (wip)
+* ellipse
+* rectangles
+* pages
+
+### Groups
+* group selection
+* group translate
+* group scaling from any anchor point
+* group rotation from origin (or any arbitrary point)
+* group transform with mirror modifiers (wip)
+
 
 | 	|	|
 |---|---|
-| ![](./images/1.gif)| ![](./images/2.gif) |
+| ![](./images/1.gif) | ![](./images/2.gif) |
 | ![](./images/3.gif) | ![](./images/4.gif) |
+| ![](./images/5.gif) | ![](./images/6.gif) |

images/5.gif

@@ -256,7 +256,9 @@ export class CanvasEngine<T extends CanvasModel = CanvasModel> extends BaseObjec
 
 	setCanvasWidget(widget: CanvasWidget) {
 		this.canvasWidget = widget;
-		this.historyBank.pushState(this.model.serialize());
+		if (widget) {
+			this.historyBank.pushState(this.model.serialize());
+		}
 	}
 
 	getFactory(type: string): AbstractElementFactory {

images/6.gif

@@ -84,7 +84,7 @@ export class GraphModel<
 
 	deSerialize(event: DeserializeEvent): void {
 		super.deSerialize(event);
-		let entities = event.subset("children");
+		let entities = event.subset("entities");
 		this.children = _.mapValues(entities.data, (entity: any, index) => {
 			let entityOb = event.engine.generateEntityFor(entity._type);
 			entityOb.deSerialize(entities.subset(index));

src/CanvasEngine.ts

@@ -1,6 +1,7 @@
 import { CanvasElementModel } from "../../models-canvas/CanvasElementModel";
 import * as _ from "lodash";
 import { Rectangle } from "../../geometry/Rectangle";
+import { DeserializeEvent } from "../../base-models/BaseModel";
 
 export class SelectionElementModel extends CanvasElementModel {
 	models: CanvasElementModel[];
@@ -27,4 +28,20 @@ export class SelectionElementModel extends CanvasElementModel {
 	}
 
 	setDimensions(dimensions: Rectangle) {}
+
+	deSerialize(event: DeserializeEvent): void {
+		super.deSerialize(event);
+		this.models = _.map(event.data["models"], modelID => {
+			return event.cache[modelID];
+		}) as any;
+	}
+
+	serialize() {
+		return {
+			...super.serialize(),
+			models: _.map(this.models, model => {
+				return model.getID();
+			})
+		};
+	}
 }