serialization is almost working again

packages/diagrams-demo-gallery/demos/demo-mutate-graph/index.tsx

@@ -30,9 +30,10 @@ class NodeDelayedPosition extends React.Component<any, any> {
 		let str = JSON.stringify(model.serialize());
 		let model2 = new DiagramModel();
 		let obj: ReturnType<DiagramModel['serialize']> = JSON.parse(str);
-		let node: ReturnType<NodeModel['serialize']> = _.values(obj.layers[0].models)[0] as any;
+		let node: ReturnType<NodeModel['serialize']> = _.values(obj.layers[1].models)[0] as any;
 		node.x += 30;
 		node.y += 30;
+
 		model2.deserializeModel(obj, engine);
 		engine.setModel(model2);
 	}

packages/diagrams-demo-gallery/demos/demo-serializing/index.tsx

@@ -35,7 +35,6 @@ export default () => {
 	//!------------- SERIALIZING ------------------
 
 	var str = JSON.stringify(model.serialize());
-	console.log(model.serialize());
 
 	//!------------- DESERIALIZING ----------------
 

packages/react-canvas-core/src/CanvasEngine.ts

@@ -10,7 +10,6 @@ import { ActionEventBus } from './core-actions/ActionEventBus';
 import { ZoomCanvasAction } from './actions/ZoomCanvasAction';
 import { DeleteItemsAction } from './actions/DeleteItemsAction';
 import { StateMachine } from './core-state/StateMachine';
-import { ActionEvent } from './core-actions/Action';
 
 export interface CanvasEngineListener extends BaseListener {
 	canvasReady?(): void;
@@ -86,6 +85,11 @@ export class CanvasEngine<
 
 	setModel(model: M) {
 		this.model = model;
+		if (this.canvas) {
+			requestAnimationFrame(() => {
+				this.repaintCanvas();
+			});
+		}
 	}
 
 	getModel(): M {

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

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { BaseModel } from '../core-models/BaseModel';
 
 export interface PeformanceWidgetProps {
 	children: () => JSX.Element;
 	serialized: object;
+	model: BaseModel;
 }
 
 export interface PeformanceWidgetState {}
@@ -14,6 +16,12 @@ export class PeformanceWidget extends React.Component<PeformanceWidgetProps, Pef
 		nextState: Readonly<PeformanceWidgetState>,
 		nextContext: any
 	): boolean {
+		// deserialization event
+		if (this.props.model !== nextProps.model) {
+			return true;
+		}
+
+		// change event
 		return !_.isEqual(this.props.serialized, nextProps.serialized);
 	}
 

packages/react-diagrams-core/src/entities/link/LinkWidget.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { DiagramEngine } from '../../DiagramEngine';
 import { LinkModel } from './LinkModel';
 import { PointModel } from './PointModel';
-import { PortModel } from '../port/PortModel';
 import * as _ from 'lodash';
 import { LabelWidget } from '../label/LabelWidget';
 import { BaseEntityEvent, BasePositionModel, ListenerHandle, PeformanceWidget } from '@projectstorm/react-canvas-core';
+import { PortModel } from '../port/PortModel';
 
 export interface LinkProps {
 	link: LinkModel;
@@ -13,8 +13,8 @@ export interface LinkProps {
 }
 
 export interface LinkState {
-	sourceID: PortModel;
+	sourcePort: PortModel;
-	targetID: PortModel;
+	targetPort: PortModel;
 }
 
 export class LinkWidget extends React.Component<LinkProps, LinkState> {
@@ -24,8 +24,8 @@ export class LinkWidget extends React.Component<LinkProps, LinkState> {
 	constructor(props) {
 		super(props);
 		this.state = {
-			sourceID: null,
+			sourcePort: null,
-			targetID: null
+			targetPort: null
 		};
 	}
 
@@ -40,41 +40,36 @@ export class LinkWidget extends React.Component<LinkProps, LinkState> {
 
 	static getDerivedStateFromProps(nextProps: LinkProps, prevState: LinkState): LinkState {
 		return {
-			sourceID: nextProps.link.getSourcePort(),
+			sourcePort: nextProps.link.getSourcePort(),
-			targetID: nextProps.link.getTargetPort()
+			targetPort: nextProps.link.getTargetPort()
 		};
 	}
 
-	ensureInstalled(installSource: boolean, installTarget: boolean) {
+	installTarget() {
-		if (installSource) {
+		this.targetListener && this.targetListener.deregister();
-			this.sourceListener = this.props.link.getSourcePort().registerListener({
+		this.targetListener = this.props.link.getTargetPort().registerListener({
-				reportInitialPosition: (event: BaseEntityEvent<BasePositionModel>) => {
+			reportInitialPosition: (event: BaseEntityEvent<BasePositionModel>) => {
-					this.forceUpdate();
+				this.forceUpdate();
-				}
+			}
-			});
+		});
-		}
-
-		if (installTarget) {
-			this.targetListener = this.props.link.getTargetPort().registerListener({
-				reportInitialPosition: (event: BaseEntityEvent<BasePositionModel>) => {
-					this.forceUpdate();
-				}
-			});
-		}
 	}
 
-	componentDidUpdate(prevProps: Readonly<LinkProps>, prevState: Readonly<LinkState>, snapshot?: any): void {
+	installSource() {
-		let installSource = false;
+		this.sourceListener && this.sourceListener.deregister();
-		let installTarget = false;
+		this.sourceListener = this.props.link.getSourcePort().registerListener({
-		if (this.state.sourceID !== prevState.sourceID) {
+			reportInitialPosition: (event: BaseEntityEvent<BasePositionModel>) => {
-			this.sourceListener && this.sourceListener.deregister();
+				this.forceUpdate();
-			installSource = true;
+			}
+		});
+	}
+
+	componentDidUpdate(prevProps: Readonly<LinkProps>, prevState: Readonly<LinkState>, snapshot) {
+		if (prevState.sourcePort !== this.state.sourcePort) {
+			this.installSource();
 		}
-		if (this.state.targetID !== prevState.targetID) {
+		if (prevState.targetPort !== this.state.targetPort) {
-			this.targetListener && this.targetListener.deregister();
+			this.installTarget();
-			installTarget = true;
 		}
-		this.ensureInstalled(installSource, installTarget);
 	}
 
 	public static generateLinePath(firstPoint: PointModel, lastPoint: PointModel): string {
@@ -82,7 +77,12 @@ export class LinkWidget extends React.Component<LinkProps, LinkState> {
 	}
 
 	componentDidMount(): void {
-		this.ensureInstalled(!!this.props.link.getSourcePort(), !!this.props.link.getTargetPort());
+		if (this.props.link.getSourcePort()) {
+			this.installSource();
+		}
+		if (this.props.link.getTargetPort()) {
+			this.installTarget();
+		}
 	}
 
 	render() {
@@ -98,7 +98,7 @@ export class LinkWidget extends React.Component<LinkProps, LinkState> {
 
 		//generate links
 		return (
-			<PeformanceWidget serialized={this.props.link.serialize()}>
+			<PeformanceWidget model={this.props.link} serialized={this.props.link.serialize()}>
 				{() => {
 					return (
 						<g>

packages/react-diagrams-core/src/entities/node/NodeModel.ts

@@ -41,28 +41,12 @@ export class NodeModel<G extends NodeModelGenerics = NodeModelGenerics> extends
 		let old = this.position;
 		super.setPosition(x, y);
 
-		// also update the port co-ordinates (for make glorious speed)
+		//also update the port co-ordinates (for make glorious speed)
 		_.forEach(this.ports, port => {
 			port.setPosition(port.getX() + x - old.x, port.getY() + y - old.y);
 		});
 	}
 
-	getSelectedEntities() {
-		let entities = super.getSelectedEntities();
-
-		// add the points of each link that are selected here
-		if (this.isSelected()) {
-			_.forEach(this.ports, port => {
-				entities = entities.concat(
-					_.map(port.getLinks(), link => {
-						return link.getPointForPort(port);
-					})
-				);
-			});
-		}
-		return entities;
-	}
-
 	deserialize(event: DeserializeEvent<this>) {
 		super.deserialize(event);
 

packages/react-diagrams-core/src/entities/node/NodeWidget.tsx

@@ -69,7 +69,7 @@ export class NodeWidget extends React.Component<NodeProps> {
 
 	render() {
 		return (
-			<PeformanceWidget serialized={this.props.node.serialize()}>
+			<PeformanceWidget model={this.props.node} serialized={this.props.node.serialize()}>
 				{() => {
 					return (
 						<S.Node

packages/react-diagrams-core/src/entities/port/PortModel.ts

@@ -1,7 +1,6 @@
 import { NodeModel } from '../node/NodeModel';
 import { LinkModel } from '../link/LinkModel';
 import * as _ from 'lodash';
-import { DiagramEngine } from '../../DiagramEngine';
 import { Point } from '@projectstorm/geometry';
 import {
 	BaseEntityEvent,

packages/react-diagrams-core/src/entities/port/PortWidget.tsx

@@ -30,7 +30,7 @@ export class PortWidget extends React.Component<PortProps, PortState> {
 	}
 
 	componentWillUnmount(): void {
-		this.engineListenerHandle.deregister();
+		this.engineListenerHandle && this.engineListenerHandle.deregister();
 	}
 
 	componentDidUpdate(prevProps: Readonly<PortProps>, prevState: Readonly<PortState>, snapshot?: any): void {

packages/react-diagrams-core/src/models/DiagramModel.ts

@@ -7,7 +7,8 @@ import {
 	BaseModel,
 	CanvasModel,
 	CanvasModelGenerics,
-	LayerModel
+	LayerModel,
+	DeserializeEvent
 } from '@projectstorm/react-canvas-core';
 import { NodeLayerModel } from '../entities/node-layer/NodeLayerModel';
 import { LinkLayerModel } from '../entities/link-layer/LinkLayerModel';
@@ -32,6 +33,11 @@ export class DiagramModel<G extends DiagramModelGenerics = DiagramModelGenerics>
 		this.addLayer(new NodeLayerModel());
 	}
 
+	deserialize(event: DeserializeEvent<this>) {
+		this.layers = [];
+		super.deserialize(event);
+	}
+
 	addLayer(layer: LayerModel): void {
 		super.addLayer(layer);
 		if (layer instanceof NodeLayerModel) {

packages/react-diagrams-defaults/src/label/DefaultLabelModel.tsx

@@ -1,5 +1,5 @@
-import { DiagramEngine, LabelModel, LabelModelGenerics } from '@projectstorm/react-diagrams-core';
+import { DiagramEngine, LabelModel, LabelModelGenerics, LabelModelOptions } from '@projectstorm/react-diagrams-core';
-import { LabelModelOptions } from '@projectstorm/react-diagrams-core';
+import { DeserializeEvent } from '@projectstorm/react-canvas-core';
 
 export interface DefaultLabelModelOptions extends LabelModelOptions {
 	label?: string;
@@ -22,9 +22,9 @@ export class DefaultLabelModel extends LabelModel<DefaultLabelModelGenerics> {
 		this.options.label = label;
 	}
 
-	deserialize(ob, engine: DiagramEngine) {
+	deserialize(event: DeserializeEvent<this>) {
-		super.deserialize(ob, engine);
+		super.deserialize(event);
-		this.options.label = ob.label;
+		this.options.label = event.data.label;
 	}
 
 	serialize() {

packages/react-diagrams-defaults/src/link/DefaultLinkModel.ts

@@ -9,7 +9,7 @@ import {
 } from '@projectstorm/react-diagrams-core';
 import { DefaultLabelModel } from '../label/DefaultLabelModel';
 import { BezierCurve } from '@projectstorm/geometry';
-import { BaseEntityEvent, BaseModelOptions } from '@projectstorm/react-canvas-core';
+import { BaseEntityEvent, BaseModelOptions, DeserializeEvent } from '@projectstorm/react-canvas-core';
 
 export interface DefaultLinkModelListener extends LinkModelListener {
 	colorChanged?(event: BaseEntityEvent<DefaultLinkModel> & { color: null | string }): void;
@@ -90,12 +90,12 @@ export class DefaultLinkModel extends LinkModel<DefaultLinkModelGenerics> {
 		};
 	}
 
-	deserialize(ob: ReturnType<this['serialize']>, engine: DiagramEngine) {
+	deserialize(event: DeserializeEvent<this>) {
-		super.deserialize(ob, engine);
+		super.deserialize(event);
-		this.options.color = ob.color;
+		this.options.color = event.data.color;
-		this.options.width = ob.width;
+		this.options.width = event.data.width;
-		this.options.curvyness = ob.curvyness;
+		this.options.curvyness = event.data.curvyness;
-		this.options.selectedColor = ob.selectedColor;
+		this.options.selectedColor = event.data.selectedColor;
 	}
 
 	addLabel(label: LabelModel | string) {

packages/react-diagrams-defaults/src/node/DefaultNodeModel.ts

@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
-import { DiagramEngine, NodeModel, NodeModelGenerics, PortModelAlignment } from '@projectstorm/react-diagrams-core';
+import { NodeModel, NodeModelGenerics, PortModelAlignment } from '@projectstorm/react-diagrams-core';
 import { DefaultPortModel } from '../port/DefaultPortModel';
-import { BasePositionModelOptions } from '@projectstorm/react-canvas-core';
+import { BasePositionModelOptions, DeserializeEvent } from '@projectstorm/react-canvas-core';
 
 export interface DefaultNodeModelOptions extends BasePositionModelOptions {
 	name?: string;
@@ -90,14 +90,14 @@ export class DefaultNodeModel extends NodeModel<DefaultNodeModelGenerics> {
 		return this.addPort(p);
 	}
 
-	deserialize(object, engine: DiagramEngine) {
+	deserialize(event: DeserializeEvent<this>) {
-		super.deserialize(object, engine);
+		super.deserialize(event);
-		this.options.name = object.name;
+		this.options.name = event.data.name;
-		this.options.color = object.color;
+		this.options.color = event.data.color;
-		this.portsIn = _.map(object.portsInOrder, id => {
+		this.portsIn = _.map(event.data.portsInOrder, id => {
 			return this.getPortFromID(id);
 		}) as DefaultPortModel[];
-		this.portsOut = _.map(object.portsOutOrder, id => {
+		this.portsOut = _.map(event.data.portsOutOrder, id => {
 			return this.getPortFromID(id);
 		}) as DefaultPortModel[];
 	}

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

@@ -7,7 +7,7 @@ import {
 	PortModelOptions
 } from '@projectstorm/react-diagrams-core';
 import { DefaultLinkModel } from '../link/DefaultLinkModel';
-import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
+import { AbstractModelFactory, DeserializeEvent } from '@projectstorm/react-canvas-core';
 
 export interface DefaultPortModelOptions extends PortModelOptions {
 	label?: string;
@@ -38,10 +38,10 @@ export class DefaultPortModel extends PortModel<DefaultPortModelGenerics> {
 		});
 	}
 
-	deserialize(object, engine: DiagramEngine) {
+	deserialize(event: DeserializeEvent<this>) {
-		super.deserialize(object, engine);
+		super.deserialize(event);
-		this.options.in = object.in;
+		this.options.in = event.data.in;
-		this.options.label = object.label;
+		this.options.label = event.data.label;
 	}
 
 	serialize() {