Awesome

AlloyUI - Continuum Security Fork

This fork starts from version 3.1.0 and is born out of the necessity to create new features for alloy diagram-builder to apply Threat Modeling diagraming standards.

Version

Current diagram-builder version 4.2.0

Features

Features added to ContinuumSecurity diagram-builder Fork:

• Disable of deleting (by key pressing and by button)
• New Group Node
• Custom Mouseover function for transitions
• Disables deleting from key events
• Option to set height and width of Task and Group nodes
• Option to disable manual linking from Task to Task
• Task nodes boundaries

Disable of deleting (by key pressing and by button)

Optional to hide the delete button which appeared when the user click in a node and also can disable the delete by key pressing the DELETE key.

new Y.DiagramBuilder({
    showDeleteNodeIcon: false,
    enableDeleteByKeyStroke: false
});

New Group Node

New group node which can embed several nodes as children, allowing them to drag&drop all together

new Y.DiagramBuilder({
    fields: [
        {
            name: 'Task',
            type: 'start',
            xy: [10, 10]
        },
        {
            name: 'Task',
            type: 'task',
            xy: [10, 10]
        },{
            name: 'Group',
            type: 'group',
            xy: [350, 50],
            width: 200,
            height: 500,
            allowsLinking: false,
            children: ['Task', 'Start']
        }]
});

Custom Mouseover function for transitions

Adds custom function which is executed when hovering the transition. Two type of event can be produced: mouseEnter and mouseLeave.

This function is passed as string and then the javascript eval function is need to execute the custom function. (No good, but only solution I could think of to be able to integrate with Vaadin Plugin diagram-builder)

var mouseOverFn = '(function (data) {  console.log(data);    })';

diagramBuilder.connectAll([
    {
        connector: { name: 'Link', onMouseMove: mouseOverFn },
        source: 'Start',
        target: 'Condition'
    }
])

Disables deleting from key events

Key events which delete nodes has been disabled

Option to set height and width of Task and Group nodes

User can customize the height or width of a Task

{
    name: 'My Group',
    type: 'group',
    xy: [400, 100],
    width: 200,
    height: 400
}

Option to disable manual linking from Task to Task

User can optionally disable manual linking so users cannot link two tasks through the User Interface

{
    name: 'My Task',
    type: 'task',
    xy: [400, 100],
    allowsLinking: false
}

Task nodes boundaries

If task nodes have a parent group then task only can move inside group boundary

AlloyUI - Official Repository

AlloyUI is a framework built on top of YUI3 (JavaScript) that uses Bootstrap 3 (HTML/CSS) to provide a simple API for building high scalable applications.

• Official Website
• Examples
• Tutorials
• API Docs
• Rosetta Stone
• Contributing
• About

Browser Support

As an user interface framework we do care about browser support. Most of our modules use all the power of HTML5, so for old browsers we provide fallbacks in Flash.

IE 8+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Automated tasks

We use Gulp, a task-runner in Node, to automate things.

gulp <command>

To discover the most commonly used tasks, run:

gulp help

Setup

1. Install NodeJS <= v0.12.0, if you don't have it yet.

2. Install global dependencies:

[sudo] npm install -g gulp

3. Install local dependencies:

npm install

4. Build AlloyUI & YUI3 using Shifter:

gulp build

Discussion

• Liferay Forums
• Google Groups
• Stack Overflow

Structure

The basic structure of the project is given in the following way:

• bower_components/ Contains all dependencies fetched via Bower. However, this directory is unnecessary for versioning, so it is ignored (.gitignore).
• build/ Contains AlloyUI and YUI generated files, once build task has been run. However, this directory is unnecessary for versioning, so it is ignored (.gitignore).
• demos/ Contains basic examples of the AlloyUI modules.
• src/ Contains the source code of the AlloyUI modules.
• tasks/ Contains the source code of the Gulp tasks.
• .alloy.json Specifies all dependencies and some configurations.
• .editorconfig Specifies the coding style for different editors/IDEs.
• .jsbeautifyrc Specifies the coding format rules for JSBeautify.
• .jshintrc Specifies the linting configurations for JSHint.
• .yeti.json Specifies the testing configurations for Yeti.
• LICENSE.md Defines the license agreement for AlloyUI.
• README.md Explains the AlloyUI project.
• package.json Lists all NodeJS dependencies.

Team

AlloyUI is maintained by these people and a bunch of awesome contributors.

Eduardo Lundgren	Nate Cavanaugh	Bruno Basto	Iliyan Peychev	Zeno Rocha

History

Discover all versions in the Releases page.

Each module (located under src/) contains a HISTORY.md file, check them for detailed changelog.

License

BSD-3-Clause License (c) Liferay, Inc.