Drag children node

.alloy.json

@@ -2,5 +2,5 @@
     "alloycore": [ "aui-base-core" ],
     "alloyregex": "(aui|yui(",
     "yuiversion": "patched-v3.18.1",
-    "version": "3.1.0"
+    "version": "3.2.0"
 }

.gitignore

@@ -7,3 +7,5 @@ maven-dist
 node_modules
 npm-debug.log
 .sass-cache
+.idea
+**/.DS_Store

README.md

@@ -1,4 +1,97 @@
-# AlloyUI
+# AlloyUI - Continuum Security Fork
+This fork starts from version 3.1.0 and is born out of the necessity to create new features to apply Threat Modeling diagraming standards.
+
+## Version
+Current version 3.2.0
+
+## Features
+
+### 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.
+````javascript
+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
+
+```javascript
+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)
+
+```javascript
+
+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
+
+```javascript
+{
+    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
+```javascript
+{
+    name: 'My Task',
+    type: 'task',
+    xy: [400, 100],
+    allowsLinking: false
+}
+```
+
+# AlloyUI - Official Repository
 
 ![AlloyUI Robo Suit](https://cloud.githubusercontent.com/assets/398893/3529038/980b55ca-0795-11e4-9ffe-2a41953f1df8.jpg)
 

bower.json

@@ -1,11 +1,11 @@
 {
   "name": "alloy-ui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "homepage": "http://alloyui.com",
   "authors": [
     "Eduardo Lundgren <[email protected]>"
   ],
-  "description": "AlloyUI is a framework built on top of YUI3 (JavaScript) that uses Bootstrap (HTML/CSS) to provide a simple API for building high scalable applications",
+  "description": "AlloyUI is a framework built on top of YUI3 (JavaScript) and Bootstrap (HTML/CSS)",
   "keywords": [
     "alloy",
     "alloyui",

demos/diagram-builder/index.html

@@ -19,6 +19,11 @@ <h1>AlloyUI - Diagram builder</h1>
                 label: 'Task',
                 iconClass: 'diagram-node-task-icon'
             },
+            {
+                type: 'group',
+                label: 'Group',
+                iconClass: 'diagram-node-group-icon'
+            },
             {
                 type: 'state',
                 label: 'State',
@@ -54,13 +59,11 @@ <h1>AlloyUI - Diagram builder</h1>
 
         var diagramBuilder = new Y.DiagramBuilder({
             availableFields: availableFields,
+            showDeleteNodeIcon: false,
+            enableDeleteByKeyStroke: false,
             boundingBox: '#diagramBuilder',
             fields: [
                 {
-                    // transitions: [
-                    //     'Task1',
-                    //     { target: 'Task0' }
-                    // ],
                     name: 'Start0',
                     type: 'start',
                     xy: [10, 10]
@@ -83,7 +86,33 @@ <h1>AlloyUI - Diagram builder</h1>
                 {
                     name: 'Task0',
                     type: 'task',
-                    xy: [400, 100]
+                    xy: [400, 100],
+                    allowsLinking: false
+                },
+                {
+                    name: 'Task with an extra large name',
+                    type: 'task',
+                    xy: [650, 200],
+                    width: 200,
+                    height: 200,
+                    allowsLinking: true
+                },
+                {
+                    name: 'Task with an extra large name with quite an extra text',
+                    type: 'task',
+                    xy: [875, 100],
+                    width: 70,
+                    height: 110,
+                    allowsLinking: true
+                },
+                {
+                    name: 'Group',
+                    type: 'group',
+                    xy: [350, 50],
+                    width: 200,
+                    height: 500,
+                    allowsLinking: false,
+                    children: ['Task0', 'Fork0']
                 },
                 {
                     name: 'Fork0',
@@ -98,9 +127,11 @@ <h1>AlloyUI - Diagram builder</h1>
             ]
         }).render();
 
+        var clickFn = '(function (data) {  console.log(data);    })';
+
         diagramBuilder.connectAll([
             {
-                connector: { name: 'Link0' },
+                connector: { name: 'Link0', onMouseMove: clickFn, showName: false },
                 source: 'Start0',
                 target: 'Condition0'
             },
@@ -109,6 +140,16 @@ <h1>AlloyUI - Diagram builder</h1>
                 source: 'Condition0',
                 target: 'State0'
             },
+            {
+                connector: { name: 'Link1.1' },
+                source: 'Task0',
+                target: 'Task with an extra large name'
+            },
+            {
+                connector: { name: 'Link1.1' },
+                source: 'Task with an extra large name',
+                target: 'Task0'
+            },
             {
                 connector: { name: 'Link2' },
                 source: 'State0',
@@ -135,14 +176,6 @@ <h1>AlloyUI - Diagram builder</h1>
                 target: 'EndNode0'
             }
         ]);
-
-        // var task = diagramBuilder.addField({
-        //     name: 'Task2',
-        //     type: 'condition'
-        // });
-        // task.addTransition('Task1');
-        // task.connect('Task1');
-
     });
     </script>
 </body>