hypermodel 👾

View project on Github Download zip

💬 hypermodel

hypermodel generates related model ui like DB scheme model

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

⚡ 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(172, 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 dotted (px)
6
update function This update callback will be fired when you change the position of elements(like grid or property) with draging and drop
null

⚡ Methods

You can use the method like $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

📦 npm

$ npm install hypermodel

📦 yarn

$ yarn add hypermodel

😗 do star it!

If you enjoyed it, please just click the star into below github link

GitHub

Example

<div class="hypermodel-container"></div>
$(function() {
    $('.hypermodel-container').hypermodel({
        time: {
            animate: 300,    // The line animation time when either window resize event be fired or user playing with drag&drop.
            frame: 3000      // The dash line's dash moving total seconds.
        },
        grad: 1,             // The gradient of line 0.1(curve), 10(straight).
        strokeSpeed: 500,    // How many dash line moves one second.
        strokeColor: 'rgba(192, 192, 192, .5)',     // Default line color (rgba, rgb, hash color).
        strokeDashColor: 'rgba(60, 180, 148, .65)', // Dash line color (rgba, rgb, hash color).
        strokeWidth: 1,      // Default line thickness (px).
        strokeDashWidth: 1,  // Dash line thickness (px).
        strokeDashWeight: 8, // Each of dash dottes's length (px).
        strokeDashMargin: 6  // Gap about each of dash line's dottes (px).
    });
});
.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;
}