rather import from storm-react-diagrams to further test the library

.storybook/webpack.config.js

@@ -31,6 +31,9 @@ module.exports = {
 		]
 	},
 	resolve: {
+		alias: {
+			'storm-react-diagrams': path.join(__dirname, "..", "src", "main")
+		},
 		extensions: [".tsx", ".ts", ".js"]
 	}
 };

demos/demo-cloning/index.tsx

@@ -6,7 +6,7 @@ import {
 	NodeModel,
 	DiagramWidget,
 	BaseModel
-} from "../../src/main";
+} from "storm-react-diagrams";
 import * as _ from "lodash";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";

demos/demo-custom-link1/index.tsx

@@ -7,12 +7,12 @@ import {
 	DiagramWidget,
 	LinkWidget,
 	LinkProps,
-	DefaultLinkWidget
-} from "../../src/main";
+	DefaultLinkWidget,
+	DefaultLinkModel,
+	DefaultLinkFactory
+} from "storm-react-diagrams";
 import { action } from "@storybook/addon-actions";
 import * as React from "react";
-import { DefaultLinkModel } from "../../src/defaults/models/DefaultLinkModel";
-import { DefaultLinkFactory } from "../../src/defaults/factories/DefaultLinkFactory";
 
 export class AdvancedLinkModel extends DefaultLinkModel {
 	constructor() {

demos/demo-custom-node1/DiamondNodeFactory.tsx

@@ -1,4 +1,4 @@
-import * as SRD from "../../src/main";
+import * as SRD from "storm-react-diagrams";
 import { DiamonNodeWidget } from "./DiamondNodeWidget";
 import { DiamondNodeModel } from "./DiamondNodeModel";
 import * as React from "react";

demos/demo-custom-node1/DiamondNodeModel.ts

@@ -1,7 +1,7 @@
-import * as SRD from "../../src/main";
+import { NodeModel } from "storm-react-diagrams";
 import { DiamondPortModel } from "./DiamondPortModel";
 
-export class DiamondNodeModel extends SRD.NodeModel {
+export class DiamondNodeModel extends NodeModel {
 	constructor() {
 		super("diamond");
 		this.addPort(new DiamondPortModel("top"));

demos/demo-custom-node1/DiamondNodeWidget.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DiamondNodeModel } from "./DiamondNodeModel";
-import { PortWidget } from "../../src/main";
+import { PortWidget } from "storm-react-diagrams";
 
 export interface DiamonNodeWidgetProps {
 	node: DiamondNodeModel;

demos/demo-custom-node1/DiamondPortModel.ts

@@ -1,5 +1,5 @@
 import * as _ from "lodash";
-import { LinkModel, DiagramEngine, PortModel, DefaultLinkModel } from "../../src/main";
+import { LinkModel, DiagramEngine, PortModel, DefaultLinkModel } from "storm-react-diagrams";
 
 export class DiamondPortModel extends PortModel {
 	position: string | "top" | "bottom" | "left" | "right";

demos/demo-custom-node1/SimplePortFactory.ts

@@ -1,4 +1,4 @@
-import { PortModel, AbstractPortFactory } from "../../src/main";
+import { PortModel, AbstractPortFactory } from "storm-react-diagrams";
 
 export class SimplePortFactory extends AbstractPortFactory {
 	cb: (initialConfig?: any) => PortModel;

demos/demo-custom-node1/index.tsx

@@ -5,7 +5,7 @@ import {
 	LinkModel,
 	DefaultPortModel,
 	DiagramWidget
-} from "../../src/main";
+} from "storm-react-diagrams";
 import * as React from "react";
 
 // import the custom models

demos/demo-dagre/index.tsx

@@ -7,7 +7,7 @@ import {
 	LinkModel,
 	DefaultPortModel,
 	DiagramWidget
-} from "../../src/main";
+} from "storm-react-diagrams";
 import { distributeElements } from "./dagre-utils";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";

demos/demo-drag-and-drop/Application.ts

@@ -1,4 +1,4 @@
-import * as SRD from "../../src/main";
+import * as SRD from "storm-react-diagrams";
 
 /**
  * @author Dylan Vorster

demos/demo-drag-and-drop/components/BodyWidget.tsx

@@ -3,7 +3,7 @@ import * as _ from "lodash";
 import { TrayWidget } from "./TrayWidget";
 import { Application } from "../Application";
 import { TrayItemWidget } from "./TrayItemWidget";
-import { DefaultNodeModel, DiagramWidget } from "../../../src/main";
+import { DefaultNodeModel, DiagramWidget } from "storm-react-diagrams";
 
 export interface BodyWidgetProps {
 	app: Application;

demos/demo-grid/index.tsx

@@ -1,4 +1,4 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
 import * as React from "react";
 
 /**

demos/demo-labelled-links/index.tsx

@@ -4,12 +4,12 @@ import {
 	DefaultNodeModel,
 	LinkModel,
 	DefaultPortModel,
-	DiagramWidget
-} from "../../src/main";
+	DiagramWidget,
+	DefaultLinkModel
+} from "storm-react-diagrams";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
 import { action } from "@storybook/addon-actions";
-import { DefaultLinkModel } from "../../src/defaults/models/DefaultLinkModel";
 
 export default () => {
 	// setup the diagram engine

demos/demo-limit-points/index.tsx

@@ -1,6 +1,12 @@
-import * as SRD from "../../src/main";
 import * as React from "react";
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
+import {
+	DiagramEngine,
+	DiagramModel,
+	DefaultNodeModel,
+	LinkModel,
+	DiagramWidget,
+	DiagramProps
+} from "storm-react-diagrams";
 
 /**
  * Shows that a limit of points can be set for links
@@ -32,7 +38,7 @@ export default () => {
 	var props = {
 		diagramEngine: engine,
 		maxNumberPointsPerLink: 5
-	} as SRD.DiagramProps;
+	} as DiagramProps;
 
 	return (
 		<div>

demos/demo-listeners/index.tsx

@@ -1,7 +1,13 @@
-import * as SRD from "../../src/main";
 import * as React from "react";
 import { action } from "@storybook/addon-actions";
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
+import {
+	DiagramEngine,
+	DiagramModel,
+	DiagramProps,
+	DefaultNodeModel,
+	LinkModel,
+	DiagramWidget
+} from "storm-react-diagrams";
 
 /**
  * Shows some of the events triggered when elements are selected
@@ -45,7 +51,7 @@ export default () => {
 	var props = {
 		diagramEngine: engine,
 		maxNumberPointsPerLink: 0 // no extra points so link selection is fired straight away
-	} as SRD.DiagramProps;
+	} as DiagramProps;
 
 	return (
 		<div>

demos/demo-locks/index.tsx

@@ -1,6 +1,13 @@
-import * as SRD from "../../src/main";
 import * as React from "react";
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, PointModel, DiagramWidget } from "../../src/main";
+import {
+	DiagramEngine,
+	DiagramModel,
+	DefaultNodeModel,
+	LinkModel,
+	PointModel,
+	DiagramWidget,
+	DiagramProps
+} from "storm-react-diagrams";
 
 /**
  *
@@ -54,7 +61,7 @@ export default () => {
 		allowLooseLinks: false,
 		allowCanvasTranslation: false,
 		allowCanvasZoom: false
-	} as SRD.DiagramProps;
+	} as DiagramProps;
 
 	//!=========================================  <<<<<<<
 

demos/demo-mutate-graph/index.tsx

@@ -1,4 +1,4 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
 

demos/demo-performance/index.tsx

@@ -1,4 +1,4 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
 import * as React from "react";
 
 /**

demos/demo-serializing/index.tsx

@@ -1,4 +1,4 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
 import { action } from "@storybook/addon-actions";

demos/demo-simple-flow/index.tsx

@@ -1,4 +1,4 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
+import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "storm-react-diagrams";
 import * as React from "react";
 
 export default () => {

demos/demo-simple/index.tsx

@@ -1,6 +1,12 @@
-import { DiagramEngine, DiagramModel, DefaultNodeModel, LinkModel, DiagramWidget } from "../../src/main";
+import {
+	DiagramEngine,
+	DiagramModel,
+	DefaultNodeModel,
+	LinkModel,
+	DiagramWidget,
+	DefaultLinkModel
+} from "storm-react-diagrams";
 import * as React from "react";
-import { DefaultLinkModel } from "../../src/defaults/models/DefaultLinkModel";
 
 export default () => {
 	//1) setup the diagram engine

demos/demo-smart-routing/index.tsx

@@ -5,7 +5,7 @@ import {
 	LinkModel,
 	DefaultPortModel,
 	DiagramWidget
-} from "../../src/main";
+} from "storm-react-diagrams";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
 import { action } from "@storybook/addon-actions";

demos/demo-zoom-to-fit/index.tsx

@@ -5,7 +5,7 @@ import {
 	LinkModel,
 	DefaultPortModel,
 	DiagramWidget
-} from "../../src/main";
+} from "storm-react-diagrams";
 import * as React from "react";
 import { DemoWorkspaceWidget } from "../.helpers/DemoWorkspaceWidget";
 

jest.config.js

@@ -1,3 +1,4 @@
+const path = require("path");
 // jest.config.js
 module.exports = {
 	verbose: true,
@@ -10,11 +11,12 @@ module.exports = {
 		"node"
 	],
 	transform: {
-		".*test_loader.*": __dirname+"/tests/helpers/storybook-loader.js",
+		".*test_loader.*": path.join(__dirname, "tests", "helpers", "storybook-loader.js" ),
 		"^.+\\.tsx?$": "ts-jest",
 	},
 	moduleNameMapper:{
-		"\\.(scss|css|png)$": __dirname+"/tests/helpers/css-mock.js"
+		"\\.(scss|css|png)$": path.join(__dirname,"tests","helpers","css-mock.js"),
+		"storm-react-diagrams": path.join(__dirname, "src", "main")
 	},
 	roots:[
 		__dirname+'/tests'

tests/e2e/E2EHelper.ts

@@ -1,6 +1,4 @@
 import { ElementHandle, Page } from "puppeteer";
-import { NodeModel } from "../../src/models/NodeModel";
-import { LinkModel } from "../../src/models/LinkModel";
 import * as _ from "lodash";
 
 export class E2EElement {

tests/e2e/generate-e2e.js

@@ -14,7 +14,7 @@ glob.glob(__dirname + "/../../demos/demo-*/index.tsx", {}, (err, files) => {
 		copy.push({to: path.basename(path.dirname(entryFile)), from: __dirname+"/index.html"});
 	});
 
-	webpack({
+	config = {
 		entry: entry,
 		plugins: [
 			new CopyWebpackPlugin(copy)
@@ -29,8 +29,17 @@ glob.glob(__dirname + "/../../demos/demo-*/index.tsx", {}, (err, files) => {
 				use: ['style-loader','css-loader', 'sass-loader']
 			}].concat(config.module.rules)
 		},
-		resolve: config.resolve,
-	}, (err, stats) => {
+		resolve: {
+			...config.resolve,
+			alias: {
+				'storm-react-diagrams': path.join(__dirname, "..", "..", "src", "main")
+			}
+		},
+	};
+
+	console.log(config);
+
+	webpack(config, (err, stats) => {
 		if (err || stats.hasErrors()) {
 			// Handle errors here
 			return;

tsconfig.json

@@ -10,6 +10,10 @@
 		"sourceMap": true,
 		"skipLibCheck": true,
 		"jsx": "react",
+		"baseUrl": ".",
+		"paths": {
+			"storm-react-diagrams": ["src/main.ts"]
+		},
 		"lib": [
 			"dom",
 			"es2015"

webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require("webpack");
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+var path = require("path");
 var plugins = [];
 const production = process.env.NODE_ENV === 'production';