# PIGNOSE HyperModel

View project on Github Download zip

### HyperModel

#### HyperModel helps you make related model design by jQuery.

You can drag and swap each of grids and properties.

### Model

Property
Property
Property
Property
Property
Property
Property
Property

### Model

Property
Property
Property
Property
Property
Property
Property
Property
Property
Property

### Related Model A

Property

### Related Model B

Property
Property
Property

### Related Model C

Property

### Related Model A' 1

Property

### Related Model A' 2

Property
Property
Property

### Dependency

#### This plugin has dependencies some javascript library.

Check belows and import it.

- jQuery core library
- jQuery UI library
- Raphael js library

### Options

name | type | description | default
--- | --- | --- | ---
time | animate | number | The line animation time when either window resize event be fired or user playing with drag&drop. | 300
time | frame | number | The dash line's dash moving total seconds. | 3000
time | highlight | number | Highlight holding time. The line will be disappeared when time be ended. | 3000
grad | number | The gradient of line 0.1(curve), 10(straight) | 1.75
strokeSpeed | number | How many dash line moves one second. | 500
strokeColor | string | Default line color (rgba, rgb, hash color). | rgba(192, 192, 192, .6)
strokeDashColor | string | Dash line color (rgba, rgb, hash color). | rgba(192, 192, 192, .95)
strokeHighlightColor | string | Highlighted line color. | rgba(200, 206, 255, .6)
strokeHighlightDashColor | string | Highlighted dash line color. | rgba(178, 192, 255, 1)
strokeWidth | number | Default line thickness (px). | 1
strokeDashWidth | number | Dash line thickness (px). | 1
strokeHighlightWidth | number | Highlighted line thickness (px). | 1
strokeDashWeight | number | Each of dash dottes's length (px). | 8
strokeDashMargin | number | Gap about each of dash line's dottes (px). | 6
update | function | If you change grid or property position by drag and drop, This callback will be fired. | null

### Methods

#### You can call plugin's method by using $element.hypermodel('Method Name', arguments); format.

name | type | description
--- | --- | ---
add | function | $element will be added, but not be connected yet.
connect($target) | function | $element will be connected with $target.
highlight($target) | function | The line which be matched between $element and $target will be highlighted.
remove() | function | $element will be removed, And all of connections which belong in the $element also be removed.
repaint() | function | Browser will repaint the lines at correct position.

### bower

> If you use bower.

    bower install hypermodel

### npm

> If you use npm.

    npm install hypermodel

### sample

    <div class="hypermodel-container"></div>

    $(function() {
    	$('.hypermodel-container').hypermodel();
    });

    .hypermodel-container {
        background-color: #f8f8f8;
        border: 1px solid #d8d8d8;
        font-size: 115%;
        overflow: hidden;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
    }

    .hypermodel-container .hypermodel-area {
        margin: 40px;
    }