fixes and improvements

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);
 		});
 

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<PointModelOptions, 'type'> {
@@ -23,6 +21,7 @@ export class PointModel<G extends PointModelGenerics = PointModelGenerics> 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<G extends PointModelGenerics = PointModelGenerics> 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<G extends PointModelGenerics = PointModelGenerics> 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() {

lib-core/src/widgets/NodeWidget.tsx

@@ -28,8 +28,8 @@ export class NodeWidget extends BaseWidget<NodeProps> {
 				{...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}
 			</div>

lib-defaults/src/link/DefaultLinkModel.ts

@@ -29,6 +29,8 @@ export interface DefaultLinkModelGenerics {
 export class DefaultLinkModel extends LinkModel<LinkModelGenerics & DefaultLinkModelGenerics> {
 	constructor(options: DefaultLinkModelOptions = {}) {
 		super({
+			width: options.width || 3,
+			color: options.color || 'gray',
 			...options,
 			type: 'default'
 		});

lib-defaults/src/port/DefaultPortModel.ts

@@ -23,6 +23,7 @@ export interface DefaultPortModelGenerics {
 export class DefaultPortModel extends PortModel<PortModelGenerics & DefaultPortModelGenerics> {
 	constructor(options: DefaultPortModelOptions) {
 		super({
+			label: options.label || options.name,
 			...options,
 			type: 'default'
 		});

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() {

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<BaseModelOptions, 'type'>{
 	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() {

lib-demo-project/src/main.css

@@ -5,6 +5,7 @@
 
 html, body, #application{
 	height: 100%;
+	overflow: hidden;
 }
 
 .diagram-container{