diff --git a/lib-core/src/actions/MoveItemsAction.ts b/lib-core/src/actions/MoveItemsAction.ts index 1edc222..8399580 100644 --- a/lib-core/src/actions/MoveItemsAction.ts +++ b/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); diff --git a/lib-defaults/src/link/DefaultLinkModel.ts b/lib-defaults/src/link/DefaultLinkModel.ts index e2aee1b..2994cb1 100644 --- a/lib-defaults/src/link/DefaultLinkModel.ts +++ b/lib-defaults/src/link/DefaultLinkModel.ts @@ -19,6 +19,7 @@ export interface DefaultLinkModelOptions extends Omit width?: number; color?: string; curvyness?: number; + type?: string; } export interface DefaultLinkModelGenerics { @@ -29,10 +30,10 @@ export interface DefaultLinkModelGenerics { export class DefaultLinkModel extends LinkModel { constructor(options: DefaultLinkModelOptions = {}) { super({ + type: 'default', width: options.width || 3, color: options.color || 'gray', - ...options, - type: 'default' + ...options }); } diff --git a/lib-defaults/src/node/DefaultNodeModel.ts b/lib-defaults/src/node/DefaultNodeModel.ts index 57f5963..0fd4faf 100644 --- a/lib-defaults/src/node/DefaultNodeModel.ts +++ b/lib-defaults/src/node/DefaultNodeModel.ts @@ -13,7 +13,15 @@ export interface DefaultNodeModelGenerics { } export class DefaultNodeModel extends NodeModel { - 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', diff --git a/lib-defaults/src/port/DefaultPortModel.ts b/lib-defaults/src/port/DefaultPortModel.ts index 9daf514..5b23c7e 100644 --- a/lib-defaults/src/port/DefaultPortModel.ts +++ b/lib-defaults/src/port/DefaultPortModel.ts @@ -21,7 +21,16 @@ export interface DefaultPortModelGenerics { } export class DefaultPortModel extends PortModel { - 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, diff --git a/lib-demo-gallery/demos/demo-cloning/index.tsx b/lib-demo-gallery/demos/demo-cloning/index.tsx index 5ea0350..ebe6e1f 100644 --- a/lib-demo-gallery/demos/demo-cloning/index.tsx +++ b/lib-demo-gallery/demos/demo-cloning/index.tsx @@ -30,7 +30,7 @@ class CloneSelected extends React.Component { // 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 diff --git a/lib-demo-gallery/demos/demo-custom-link1/index.tsx b/lib-demo-gallery/demos/demo-custom-link1/index.tsx index 6de27a7..626bcc4 100644 --- a/lib-demo-gallery/demos/demo-custom-link1/index.tsx +++ b/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} /> diff --git a/lib-demo-gallery/demos/demo-custom-node1/DiamondNodeModel.ts b/lib-demo-gallery/demos/demo-custom-node1/DiamondNodeModel.ts index 4546caa..16aa88d 100644 --- a/lib-demo-gallery/demos/demo-custom-node1/DiamondNodeModel.ts +++ b/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')); diff --git a/lib-demo-gallery/demos/demo-custom-node1/DiamondPortModel.ts b/lib-demo-gallery/demos/demo-custom-node1/DiamondPortModel.ts index b33b828..e55b371 100644 --- a/lib-demo-gallery/demos/demo-custom-node1/DiamondPortModel.ts +++ b/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; } diff --git a/lib-demo-project/src/custom-node-js/JSCustomNodeModel.js b/lib-demo-project/src/custom-node-js/JSCustomNodeModel.js index 0898e71..f45cb55 100644 --- a/lib-demo-project/src/custom-node-js/JSCustomNodeModel.js +++ b/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() { diff --git a/lib-demo-project/src/custom-node-ts/TSCustomNodeModel.ts b/lib-demo-project/src/custom-node-ts/TSCustomNodeModel.ts index c70bcab..8dcb5de 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, BaseModelOptions } from "@projectstorm/react-diagrams"; +import { DiagramEngine, NodeModel, DefaultPortModel, BaseModelOptions } from '@projectstorm/react-diagrams'; -export interface TSCustomNodeModelOptions extends Omit{ +export interface TSCustomNodeModelOptions extends Omit { 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() {