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.

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;
}