diff --git a/lib-core/src/actions/MoveItemsAction.ts b/lib-core/src/actions/MoveItemsAction.ts index 0263677..1edc222 100644 --- a/lib-core/src/actions/MoveItemsAction.ts +++ b/lib-core/src/actions/MoveItemsAction.ts @@ -3,6 +3,7 @@ import { SelectionModel } from '../models/SelectionModel'; import { PointModel } from '../models/PointModel'; import { NodeModel } from '../models/NodeModel'; import { DiagramEngine } from '../DiagramEngine'; +import { BasePositionModel } from "../core-models/BasePositionModel"; export class MoveItemsAction extends BaseAction { selectionModels: SelectionModel[]; @@ -16,6 +17,9 @@ export class MoveItemsAction extends BaseAction { //dont allow items which are locked to move selectedItems = selectedItems.filter(item => { + if(!(item instanceof BasePositionModel)){ + return false; + } return !diagramEngine.isModelLocked(item); }); diff --git a/lib-core/src/models/PointModel.ts b/lib-core/src/models/PointModel.ts index 9a0fd1d..fe4542b 100644 --- a/lib-core/src/models/PointModel.ts +++ b/lib-core/src/models/PointModel.ts @@ -1,7 +1,5 @@ -import { BaseModel, BaseModelListener, BaseModelOptions } from '../core-models/BaseModel'; +import { BaseModelListener, BaseModelOptions } from '../core-models/BaseModel'; import { LinkModel } from './LinkModel'; -import * as _ from 'lodash'; -import { DiagramEngine } from '../DiagramEngine'; import { BasePositionModel } from '../core-models/BasePositionModel'; export interface PointModelOptions extends Omit { @@ -23,6 +21,7 @@ export class PointModel exten ...options, type: 'point' }); + this.parent = options.link; this.x = options.points.x; this.y = options.points.y; } @@ -42,19 +41,6 @@ export class PointModel exten return this.getParent(); } - deSerialize(ob, engine: DiagramEngine) { - super.deSerialize(ob, engine); - this.options.points.x = ob.x; - this.options.points.y = ob.y; - } - - serialize() { - return _.merge(super.serialize(), { - x: this.options.points.x, - y: this.options.points.y - }); - } - remove() { //clear references if (this.parent) { @@ -64,16 +50,7 @@ export class PointModel exten } updateLocation(points: { x: number; y: number }) { - this.options.points.x = points.x; - this.options.points.y = points.y; - } - - getX(): number { - return this.options.points.x; - } - - getY(): number { - return this.options.points.y; + this.setPosition(points.x, points.y); } isLocked() { diff --git a/lib-core/src/widgets/NodeWidget.tsx b/lib-core/src/widgets/NodeWidget.tsx index b5ae242..2a836d1 100644 --- a/lib-core/src/widgets/NodeWidget.tsx +++ b/lib-core/src/widgets/NodeWidget.tsx @@ -28,8 +28,8 @@ export class NodeWidget extends BaseWidget { {...this.getProps()} data-nodeid={this.props.node.getID()} style={{ - top: this.props.node.getX(), - left: this.props.node.getY() + top: this.props.node.getY(), + left: this.props.node.getX() }}> {this.props.children} diff --git a/lib-defaults/src/link/DefaultLinkModel.ts b/lib-defaults/src/link/DefaultLinkModel.ts index e50a370..e2aee1b 100644 --- a/lib-defaults/src/link/DefaultLinkModel.ts +++ b/lib-defaults/src/link/DefaultLinkModel.ts @@ -29,6 +29,8 @@ export interface DefaultLinkModelGenerics { export class DefaultLinkModel extends LinkModel { constructor(options: DefaultLinkModelOptions = {}) { super({ + width: options.width || 3, + color: options.color || 'gray', ...options, type: 'default' }); diff --git a/lib-defaults/src/port/DefaultPortModel.ts b/lib-defaults/src/port/DefaultPortModel.ts index 787f5a8..9daf514 100644 --- a/lib-defaults/src/port/DefaultPortModel.ts +++ b/lib-defaults/src/port/DefaultPortModel.ts @@ -23,6 +23,7 @@ export interface DefaultPortModelGenerics { export class DefaultPortModel extends PortModel { constructor(options: DefaultPortModelOptions) { super({ + label: options.label || options.name, ...options, type: 'default' }); diff --git a/lib-demo-project/src/custom-node-js/JSCustomNodeModel.js b/lib-demo-project/src/custom-node-js/JSCustomNodeModel.js index 26bf90c..0898e71 100644 --- a/lib-demo-project/src/custom-node-js/JSCustomNodeModel.js +++ b/lib-demo-project/src/custom-node-js/JSCustomNodeModel.js @@ -5,12 +5,21 @@ import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams'; */ export class JSCustomNodeModel extends NodeModel { constructor(options = {}) { - super('js-custom-node'); + super({ + ...options, + type: 'js-custom-node' + }); this.color = options.color || { options: 'red' }; // setup an in and out port - this.addPort(new DefaultPortModel(true, 'in')); - this.addPort(new DefaultPortModel(false, 'out')); + this.addPort(new DefaultPortModel({ + in: true, + name: 'in', + })); + this.addPort(new DefaultPortModel({ + in: false, + name: 'out', + })); } serialize() { diff --git a/lib-demo-project/src/custom-node-ts/TSCustomNodeModel.ts b/lib-demo-project/src/custom-node-ts/TSCustomNodeModel.ts index 18941a1..c70bcab 100644 --- a/lib-demo-project/src/custom-node-ts/TSCustomNodeModel.ts +++ b/lib-demo-project/src/custom-node-ts/TSCustomNodeModel.ts @@ -1,6 +1,6 @@ -import { DiagramEngine, NodeModel, DefaultPortModel } from '@projectstorm/react-diagrams'; +import { DiagramEngine, NodeModel, DefaultPortModel, BaseModelOptions } from "@projectstorm/react-diagrams"; -export interface TSCustomNodeModelOptions { +export interface TSCustomNodeModelOptions extends Omit{ color?: string; } @@ -8,12 +8,21 @@ export class TSCustomNodeModel extends NodeModel { color: string; constructor(options: TSCustomNodeModelOptions = {}) { - super('ts-custom-node'); + super({ + ...options, + type: 'ts-custom-node' + }); this.color = options.color || 'red'; // setup an in and out port - this.addPort(new DefaultPortModel(true, 'in')); - this.addPort(new DefaultPortModel(false, 'out')); + this.addPort(new DefaultPortModel({ + in: true, + name: 'in', + })); + this.addPort(new DefaultPortModel({ + in: false, + name: 'out', + })); } serialize() { diff --git a/lib-demo-project/src/main.css b/lib-demo-project/src/main.css index b8ef89e..fbbe9b5 100644 --- a/lib-demo-project/src/main.css +++ b/lib-demo-project/src/main.css @@ -5,6 +5,7 @@ html, body, #application{ height: 100%; + overflow: hidden; } .diagram-container{