From a46e17306b29fb115e3a143dba36dd6212e08bf0 Mon Sep 17 00:00:00 2001 From: Dylan Vorster Date: Sat, 10 Aug 2019 14:08:28 +0200 Subject: [PATCH] serialization is almost working again --- .../demos/demo-mutate-graph/index.tsx | 3 +- .../demos/demo-serializing/index.tsx | 1 - .../react-canvas-core/src/CanvasEngine.ts | 6 +- .../src/widgets/PeformanceWidget.tsx | 8 +++ .../src/entities/link/LinkWidget.tsx | 70 +++++++++---------- .../src/entities/node/NodeModel.ts | 18 +---- .../src/entities/node/NodeWidget.tsx | 2 +- .../src/entities/port/PortModel.ts | 1 - .../src/entities/port/PortWidget.tsx | 2 +- .../src/models/DiagramModel.ts | 8 ++- .../src/label/DefaultLabelModel.tsx | 10 +-- .../src/link/DefaultLinkModel.ts | 14 ++-- .../src/node/DefaultNodeModel.ts | 16 ++--- .../src/port/DefaultPortModel.ts | 10 +-- 14 files changed, 85 insertions(+), 84 deletions(-) diff --git a/packages/diagrams-demo-gallery/demos/demo-mutate-graph/index.tsx b/packages/diagrams-demo-gallery/demos/demo-mutate-graph/index.tsx index 36a8de6..9d65097 100644 --- a/packages/diagrams-demo-gallery/demos/demo-mutate-graph/index.tsx +++ b/packages/diagrams-demo-gallery/demos/demo-mutate-graph/index.tsx @@ -30,9 +30,10 @@ class NodeDelayedPosition extends React.Component { let str = JSON.stringify(model.serialize()); let model2 = new DiagramModel(); let obj: ReturnType = JSON.parse(str); - let node: ReturnType = _.values(obj.layers[0].models)[0] as any; + let node: ReturnType = _.values(obj.layers[1].models)[0] as any; node.x += 30; node.y += 30; + model2.deserializeModel(obj, engine); engine.setModel(model2); } diff --git a/packages/diagrams-demo-gallery/demos/demo-serializing/index.tsx b/packages/diagrams-demo-gallery/demos/demo-serializing/index.tsx index 700da89..acb656d 100644 --- a/packages/diagrams-demo-gallery/demos/demo-serializing/index.tsx +++ b/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 ---------------- diff --git a/packages/react-canvas-core/src/CanvasEngine.ts b/packages/react-canvas-core/src/CanvasEngine.ts index 9ad4563..582b9c6 100644 --- a/packages/react-canvas-core/src/CanvasEngine.ts +++ b/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 { diff --git a/packages/react-canvas-core/src/widgets/PeformanceWidget.tsx b/packages/react-canvas-core/src/widgets/PeformanceWidget.tsx index 4610862..0226856 100644 --- a/packages/react-canvas-core/src/widgets/PeformanceWidget.tsx +++ b/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, nextContext: any ): boolean { + // deserialization event + if (this.props.model !== nextProps.model) { + return true; + } + + // change event return !_.isEqual(this.props.serialized, nextProps.serialized); } diff --git a/packages/react-diagrams-core/src/entities/link/LinkWidget.tsx b/packages/react-diagrams-core/src/entities/link/LinkWidget.tsx index 6497fc4..725bcfc 100644 --- a/packages/react-diagrams-core/src/entities/link/LinkWidget.tsx +++ b/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; - targetID: PortModel; + sourcePort: PortModel; + targetPort: PortModel; } export class LinkWidget extends React.Component { @@ -24,8 +24,8 @@ export class LinkWidget extends React.Component { constructor(props) { super(props); this.state = { - sourceID: null, - targetID: null + sourcePort: null, + targetPort: null }; } @@ -40,41 +40,36 @@ export class LinkWidget extends React.Component { static getDerivedStateFromProps(nextProps: LinkProps, prevState: LinkState): LinkState { return { - sourceID: nextProps.link.getSourcePort(), - targetID: nextProps.link.getTargetPort() + sourcePort: nextProps.link.getSourcePort(), + targetPort: nextProps.link.getTargetPort() }; } - ensureInstalled(installSource: boolean, installTarget: boolean) { - if (installSource) { - this.sourceListener = this.props.link.getSourcePort().registerListener({ - reportInitialPosition: (event: BaseEntityEvent) => { - this.forceUpdate(); - } - }); - } - - if (installTarget) { - this.targetListener = this.props.link.getTargetPort().registerListener({ - reportInitialPosition: (event: BaseEntityEvent) => { - this.forceUpdate(); - } - }); - } + installTarget() { + this.targetListener && this.targetListener.deregister(); + this.targetListener = this.props.link.getTargetPort().registerListener({ + reportInitialPosition: (event: BaseEntityEvent) => { + this.forceUpdate(); + } + }); } - componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any): void { - let installSource = false; - let installTarget = false; - if (this.state.sourceID !== prevState.sourceID) { - this.sourceListener && this.sourceListener.deregister(); - installSource = true; + installSource() { + this.sourceListener && this.sourceListener.deregister(); + this.sourceListener = this.props.link.getSourcePort().registerListener({ + reportInitialPosition: (event: BaseEntityEvent) => { + this.forceUpdate(); + } + }); + } + + componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot) { + if (prevState.sourcePort !== this.state.sourcePort) { + this.installSource(); } - if (this.state.targetID !== prevState.targetID) { - this.targetListener && this.targetListener.deregister(); - installTarget = true; + if (prevState.targetPort !== this.state.targetPort) { + this.installTarget(); } - this.ensureInstalled(installSource, installTarget); } public static generateLinePath(firstPoint: PointModel, lastPoint: PointModel): string { @@ -82,7 +77,12 @@ export class LinkWidget extends React.Component { } 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 { //generate links return ( - + {() => { return ( diff --git a/packages/react-diagrams-core/src/entities/node/NodeModel.ts b/packages/react-diagrams-core/src/entities/node/NodeModel.ts index ae5f834..9d076c1 100644 --- a/packages/react-diagrams-core/src/entities/node/NodeModel.ts +++ b/packages/react-diagrams-core/src/entities/node/NodeModel.ts @@ -41,28 +41,12 @@ export class NodeModel 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) { super.deserialize(event); diff --git a/packages/react-diagrams-core/src/entities/node/NodeWidget.tsx b/packages/react-diagrams-core/src/entities/node/NodeWidget.tsx index 24c9c81..ce09f1f 100644 --- a/packages/react-diagrams-core/src/entities/node/NodeWidget.tsx +++ b/packages/react-diagrams-core/src/entities/node/NodeWidget.tsx @@ -69,7 +69,7 @@ export class NodeWidget extends React.Component { render() { return ( - + {() => { return ( { } componentWillUnmount(): void { - this.engineListenerHandle.deregister(); + this.engineListenerHandle && this.engineListenerHandle.deregister(); } componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any): void { diff --git a/packages/react-diagrams-core/src/models/DiagramModel.ts b/packages/react-diagrams-core/src/models/DiagramModel.ts index 61da070..4fdf8bf 100644 --- a/packages/react-diagrams-core/src/models/DiagramModel.ts +++ b/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 this.addLayer(new NodeLayerModel()); } + deserialize(event: DeserializeEvent) { + this.layers = []; + super.deserialize(event); + } + addLayer(layer: LayerModel): void { super.addLayer(layer); if (layer instanceof NodeLayerModel) { diff --git a/packages/react-diagrams-defaults/src/label/DefaultLabelModel.tsx b/packages/react-diagrams-defaults/src/label/DefaultLabelModel.tsx index ef817cb..e623049 100644 --- a/packages/react-diagrams-defaults/src/label/DefaultLabelModel.tsx +++ b/packages/react-diagrams-defaults/src/label/DefaultLabelModel.tsx @@ -1,5 +1,5 @@ -import { DiagramEngine, LabelModel, LabelModelGenerics } from '@projectstorm/react-diagrams-core'; -import { LabelModelOptions } from '@projectstorm/react-diagrams-core'; +import { DiagramEngine, LabelModel, LabelModelGenerics, 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 { this.options.label = label; } - deserialize(ob, engine: DiagramEngine) { - super.deserialize(ob, engine); - this.options.label = ob.label; + deserialize(event: DeserializeEvent) { + super.deserialize(event); + this.options.label = event.data.label; } serialize() { diff --git a/packages/react-diagrams-defaults/src/link/DefaultLinkModel.ts b/packages/react-diagrams-defaults/src/link/DefaultLinkModel.ts index 2f9a27e..b05d76d 100644 --- a/packages/react-diagrams-defaults/src/link/DefaultLinkModel.ts +++ b/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 & { color: null | string }): void; @@ -90,12 +90,12 @@ export class DefaultLinkModel extends LinkModel { }; } - deserialize(ob: ReturnType, engine: DiagramEngine) { - super.deserialize(ob, engine); - this.options.color = ob.color; - this.options.width = ob.width; - this.options.curvyness = ob.curvyness; - this.options.selectedColor = ob.selectedColor; + deserialize(event: DeserializeEvent) { + super.deserialize(event); + this.options.color = event.data.color; + this.options.width = event.data.width; + this.options.curvyness = event.data.curvyness; + this.options.selectedColor = event.data.selectedColor; } addLabel(label: LabelModel | string) { diff --git a/packages/react-diagrams-defaults/src/node/DefaultNodeModel.ts b/packages/react-diagrams-defaults/src/node/DefaultNodeModel.ts index a461a0a..c705363 100644 --- a/packages/react-diagrams-defaults/src/node/DefaultNodeModel.ts +++ b/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 { return this.addPort(p); } - deserialize(object, engine: DiagramEngine) { - super.deserialize(object, engine); - this.options.name = object.name; - this.options.color = object.color; - this.portsIn = _.map(object.portsInOrder, id => { + deserialize(event: DeserializeEvent) { + super.deserialize(event); + this.options.name = event.data.name; + this.options.color = event.data.color; + 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[]; } diff --git a/packages/react-diagrams-defaults/src/port/DefaultPortModel.ts b/packages/react-diagrams-defaults/src/port/DefaultPortModel.ts index 9b358aa..b74ad78 100644 --- a/packages/react-diagrams-defaults/src/port/DefaultPortModel.ts +++ b/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 { }); } - deserialize(object, engine: DiagramEngine) { - super.deserialize(object, engine); - this.options.in = object.in; - this.options.label = object.label; + deserialize(event: DeserializeEvent) { + super.deserialize(event); + this.options.in = event.data.in; + this.options.label = event.data.label; } serialize() {