nearly production ready

README.md

@@ -20,10 +20,16 @@ A no-nonsense diagramming library written entirely in React with the help of Lod
 
 * Its only dependency is Lodash so it will install that too.
 
-## How to see the examples
+#### How to see the examples
 
 simply navigate to the __tests__ directory and load up the corresponding index.html
 
+#### How to build
+
+Simply run ```tsc``` in the root directory and it will spit out the transpiled code and typescript definitions
+into the dist directory.
+
+
 ## How does it work
 
 The library uses a Model Graph to represent the virtual diagram and then renders the diagram using
@@ -39,32 +45,47 @@ a link can be connected to it.
 
 ## Questions
 
-### Why didnt I render the nodes as SVG's?
+#### Why didnt I render the nodes as SVG's?
 
 Because its vastly better to render nodes as standard HTML so that we can embed input controls and not have
 to deal with the complexities of trying to get SVG to work like we want it to. I also created this primarily to embed into
 enterprise applications where the nodes themselves are highly interactive with buttons and other controls that cave when I try to use SVG.
 
-### Why Typescript?
+#### Why Typescript?
 
 Because it can transpile into any level of ECMA Script, and the library got really complicated, so I ported it to Typescript
 to acomodate the heavy architecural changes I was starting to make. <3 Type Script
 
-### Why is there no JSX?
+#### Why is there no JSX?
 
 Because most of the library is 95% all logic anyway, and I construct very complex DOM elements with many dynamic properties. JSX
 Would just get in the way, and I personally hate JSX for a multitude of reasons anyway.
 
-### How do I make my own elements?
+#### How do I make my own elements?
 
 Take a look at the __defaults__ directory, with specific attention to the __DefaultNodeWidget__
 
-### How do I use the library?
+#### How do I use the library?
 
 Take a look at the tests folders, they have simple and complex examples of the complete usage.
 
-## Usage Demo
+## Usage Demo and Guide
 
 This is a demo of the interaction taken directly from the test folder.
 
 ![Demo](./demo.gif)
+
+#### Key commands
+
+__shift and drag__ will trigger a multi selection box
+
+__shift and select nodes__ will select multiple nodes
+
+__drag canvas__ will drag the complete diagram
+
+__mouse wheel__ will zoom in or out the entire diagram
+
+__click link and drag__ will create a new link anchor/point that you can then drag around
+
+__click node-port and drag__ will create a new link that is anchored to the port, allowing you 
+to drag the link to another connecting port

lib/BaseEntity.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @author Dylan Vorster
+ */
+export declare class BaseListener {
+}
+export declare class BaseEnity<T extends BaseListener> {
+    listeners: {
+        [s: string]: T;
+    };
+    id: string;
+    constructor();
+    getID(): string;
+    clearListeners(): void;
+    itterateListeners(cb: (t: T) => any): void;
+    removeListener(listener: string): boolean;
+    addListener(listener: T): string;
+}

lib/BaseEntity.js

@@ -0,0 +1,42 @@
+"use strict";
+var Toolkit_1 = require("./Toolkit");
+/**
+ * @author Dylan Vorster
+ */
+var BaseListener = (function () {
+    function BaseListener() {
+    }
+    return BaseListener;
+}());
+exports.BaseListener = BaseListener;
+var BaseEnity = (function () {
+    function BaseEnity() {
+        this.listeners = {};
+        this.id = Toolkit_1.Toolkit.UID();
+    }
+    BaseEnity.prototype.getID = function () {
+        return this.id;
+    };
+    BaseEnity.prototype.clearListeners = function () {
+        this.listeners = {};
+    };
+    BaseEnity.prototype.itterateListeners = function (cb) {
+        for (var i in this.listeners) {
+            cb(this.listeners[i]);
+        }
+    };
+    BaseEnity.prototype.removeListener = function (listener) {
+        if (this.listeners[listener]) {
+            delete this.listeners[listener];
+            return true;
+        }
+        return false;
+    };
+    BaseEnity.prototype.addListener = function (listener) {
+        var uid = Toolkit_1.Toolkit.UID();
+        this.listeners[uid] = listener;
+        return uid;
+    };
+    return BaseEnity;
+}());
+exports.BaseEnity = BaseEnity;

lib/Common.d.ts

@@ -0,0 +1,85 @@
+import { BaseEnity, BaseListener } from "./BaseEntity";
+export interface BaseModelListener extends BaseListener {
+    selectionChanged?(): any;
+    entityRemoved?(): any;
+}
+/**
+ * @author Dylan Vorster
+ */
+export declare class BaseModel extends BaseEnity<BaseModelListener> {
+    selected: boolean;
+    constructor();
+    getID(): string;
+    isSelected(): boolean;
+    setSelected(selected: boolean): void;
+    remove(): void;
+}
+export declare class PointModel extends BaseModel {
+    x: number;
+    y: number;
+    link: LinkModel;
+    constructor(link: LinkModel, points: {
+        x: number;
+        y: number;
+    });
+    updateLocation(points: {
+        x: number;
+        y: number;
+    }): void;
+    getX(): number;
+    getY(): number;
+    getLink(): LinkModel;
+}
+export declare class LinkModel extends BaseModel {
+    linkType: string;
+    sourcePort: PortModel | null;
+    targetPort: PortModel | null;
+    points: PointModel[];
+    extras: {};
+    constructor();
+    isLastPoint(point: PointModel): boolean;
+    getPointIndex(point: PointModel): number;
+    getPointModel(id: string): PointModel | null;
+    getFirstPoint(): PointModel;
+    getLastPoint(): PointModel;
+    setSourcePort(port: PortModel): void;
+    setTargetPort(port: PortModel): void;
+    getPoints(): PointModel[];
+    setPoints(points: PointModel[]): void;
+    addPoint(pointModel: PointModel, index?: number): void;
+    getType(): string;
+}
+export declare class PortModel extends BaseModel {
+    name: string;
+    parentNode: NodeModel;
+    links: {
+        [id: string]: LinkModel;
+    };
+    constructor(name: string);
+    getName(): string;
+    getParent(): NodeModel;
+    setParentNode(node: NodeModel): void;
+    removeLink(link: LinkModel): void;
+    addLink(link: LinkModel): void;
+    getLinks(): {
+        [id: string]: LinkModel;
+    };
+}
+export declare class NodeModel extends BaseModel {
+    nodeType: string;
+    canDelete: boolean;
+    x: number;
+    y: number;
+    extras: {};
+    ports: {
+        [s: string]: PortModel;
+    };
+    constructor();
+    getPort(name: string): PortModel | null;
+    getPorts(): {
+        [s: string]: PortModel;
+    };
+    removePort(port: PortModel): void;
+    addPort(port: PortModel): PortModel;
+    getType(): string;
+}