Fixed up the demos

lib-core/src/actions/MoveItemsAction.ts

@@ -3,7 +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";
+import { BasePositionModel } from '../core-models/BasePositionModel';
 
 export class MoveItemsAction extends BaseAction {
 	selectionModels: SelectionModel[];
@@ -17,7 +17,7 @@ export class MoveItemsAction extends BaseAction {
 
 		//dont allow items which are locked to move
 		selectedItems = selectedItems.filter(item => {
-			if(!(item instanceof BasePositionModel)){
+			if (!(item instanceof BasePositionModel)) {
 				return false;
 			}
 			return !diagramEngine.isModelLocked(item);

lib-defaults/src/link/DefaultLinkModel.ts

@@ -19,6 +19,7 @@ export interface DefaultLinkModelOptions extends Omit<BaseModelOptions, 'type'>
 	width?: number;
 	color?: string;
 	curvyness?: number;
+	type?: string;
 }
 
 export interface DefaultLinkModelGenerics {
@@ -29,10 +30,10 @@ export interface DefaultLinkModelGenerics {
 export class DefaultLinkModel extends LinkModel<LinkModelGenerics & DefaultLinkModelGenerics> {
 	constructor(options: DefaultLinkModelOptions = {}) {
 		super({
+			type: 'default',
 			width: options.width || 3,
 			color: options.color || 'gray',
-			...options,
-			type: 'default'
+			...options
 		});
 	}
 

lib-defaults/src/node/DefaultNodeModel.ts

@@ -13,7 +13,15 @@ export interface DefaultNodeModelGenerics {
 }
 
 export class DefaultNodeModel extends NodeModel<DefaultNodeModelGenerics & NodeModelGenerics> {
-	constructor(options: DefaultNodeModelOptions = {}) {
+	constructor(name: string, color: string);
+	constructor(options: DefaultNodeModelOptions);
+	constructor(options: any = {}, color?: string) {
+		if (typeof options === 'string') {
+			options = {
+				name: options,
+				color: color
+			};
+		}
 		super({
 			type: 'default',
 			name: 'Untitled',

lib-defaults/src/port/DefaultPortModel.ts

@@ -21,7 +21,16 @@ export interface DefaultPortModelGenerics {
 }
 
 export class DefaultPortModel extends PortModel<PortModelGenerics & DefaultPortModelGenerics> {
-	constructor(options: DefaultPortModelOptions) {
+	constructor(isIn: boolean, name?: string, label?: string);
+	constructor(options: DefaultPortModelOptions);
+	constructor(options: any, name?: string, label?: string) {
+		if (!!name) {
+			options = {
+				in: !!options,
+				name: name,
+				label: label
+			};
+		}
 		super({
 			label: options.label || options.name,
 			...options,

lib-demo-gallery/demos/demo-cloning/index.tsx

@@ -30,7 +30,7 @@ class CloneSelected extends React.Component<any, any> {
 
 			// offset the nodes slightly
 			if (newItem instanceof NodeModel) {
-				newItem.setPosition(newItem.x + offset.x, newItem.y + offset.y);
+				newItem.setPosition(newItem.getX() + offset.x, newItem.getY() + offset.y);
 				model.addNode(newItem);
 			} else if (newItem instanceof LinkModel) {
 				// offset the link points

lib-demo-gallery/demos/demo-custom-link1/index.tsx

@@ -4,15 +4,18 @@ import createEngine, {
 	DefaultPortModel,
 	DiagramWidget,
 	DefaultLinkWidget,
-	DefaultLinkModel,
-	DefaultLinkFactory
+	DefaultLinkFactory,
+	LinkModel,
+	DefaultLinkModel
 } from '@projectstorm/react-diagrams';
 import * as React from 'react';
 
 export class AdvancedLinkModel extends DefaultLinkModel {
 	constructor() {
-		super('advanced');
-		this.width = 10;
+		super({
+			type: 'advanced',
+			width: 10
+		});
 	}
 }
 
@@ -70,7 +73,7 @@ export class AdvancedLinkSegment extends React.Component<{ model: AdvancedLinkMo
 					ref={ref => {
 						this.path = ref;
 					}}
-					strokeWidth={this.props.model.width}
+					strokeWidth={this.props.model.getOptions().width}
 					stroke="rgba(255,0,0,0.5)"
 					d={this.props.path}
 				/>

lib-demo-gallery/demos/demo-custom-node1/DiamondNodeModel.ts

@@ -3,7 +3,9 @@ import { DiamondPortModel } from './DiamondPortModel';
 
 export class DiamondNodeModel extends NodeModel {
 	constructor() {
-		super('diamond');
+		super({
+			type: 'diamond'
+		});
 		this.addPort(new DiamondPortModel('top'));
 		this.addPort(new DiamondPortModel('left'));
 		this.addPort(new DiamondPortModel('bottom'));

lib-demo-gallery/demos/demo-custom-node1/DiamondPortModel.ts

@@ -5,7 +5,10 @@ export class DiamondPortModel extends PortModel {
 	position: string | 'top' | 'bottom' | 'left' | 'right';
 
 	constructor(pos: string = 'top') {
-		super(pos, 'diamond');
+		super({
+			type: 'diamond',
+			name: pos
+		});
 		this.position = pos;
 	}
 

lib-demo-project/src/custom-node-js/JSCustomNodeModel.js

@@ -12,14 +12,18 @@ export class JSCustomNodeModel extends NodeModel {
 		this.color = options.color || { options: 'red' };
 
 		// setup an in and out port
-		this.addPort(new DefaultPortModel({
-			in: true,
-			name: 'in',
-		}));
-		this.addPort(new DefaultPortModel({
-			in: false,
-			name: '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, BaseModelOptions } from "@projectstorm/react-diagrams";
+import { DiagramEngine, NodeModel, DefaultPortModel, BaseModelOptions } from '@projectstorm/react-diagrams';
 
-export interface TSCustomNodeModelOptions extends Omit<BaseModelOptions, 'type'>{
+export interface TSCustomNodeModelOptions extends Omit<BaseModelOptions, 'type'> {
 	color?: string;
 }
 
@@ -15,14 +15,18 @@ export class TSCustomNodeModel extends NodeModel {
 		this.color = options.color || 'red';
 
 		// setup an in and out port
-		this.addPort(new DefaultPortModel({
-			in: true,
-			name: 'in',
-		}));
-		this.addPort(new DefaultPortModel({
-			in: false,
-			name: 'out',
-		}));
+		this.addPort(
+			new DefaultPortModel({
+				in: true,
+				name: 'in'
+			})
+		);
+		this.addPort(
+			new DefaultPortModel({
+				in: false,
+				name: 'out'
+			})
+		);
 	}
 
 	serialize() {