jruby_activiti 1.2.5 → 2.0.0

data/web/public/editor-app/stencil-controller.js

@@ -0,0 +1,1421 @@
+/*
+ * Activiti Modeler component part of the Activiti project
+ * Copyright 2005-2014 Alfresco Software, Ltd. All rights reserved.
+ * 
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 2.1 of the License, or (at your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this library; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ */
+'use strict';
+
+angular.module('activitiModeler')
+    .controller('StencilController', ['$rootScope', '$scope', '$http', '$modal', '$timeout', function ($rootScope, $scope, $http, $modal, $timeout) {
+
+        // Property window toggle state
+        $scope.propertyWindowState = {'collapsed': false};
+
+        // Add reference to global header-config
+        $scope.headerConfig = KISBPM.HEADER_CONFIG;
+
+        $scope.propertyWindowState.toggle = function () {
+            $scope.propertyWindowState.collapsed = !$scope.propertyWindowState.collapsed;
+            $timeout(function () {
+                jQuery(window).trigger('resize');
+            });
+        };
+        
+        // Code that is dependent on an initialised Editor is wrapped in a promise for the editor
+        $scope.editorFactory.promise.then(function () {
+        	
+            /* Build stencil item list */
+
+            // Build simple json representation of stencil set
+            var stencilItemGroups = [];
+
+            // Helper method: find a group in an array
+            var findGroup = function (name, groupArray) {
+                for (var index = 0; index < groupArray.length; index++) {
+                    if (groupArray[index].name === name) {
+                        return groupArray[index];
+                    }
+                }
+                return null;
+            };
+
+            // Helper method: add a new group to an array of groups
+            var addGroup = function (groupName, groupArray) {
+                var group = { name: groupName, items: [], paletteItems: [], groups: [], visible: true };
+                groupArray.push(group);
+                return group;
+            };
+
+            /*
+             StencilSet items
+             */
+            $http({method: 'GET', url: KISBPM.URL.getStencilSet()}).success(function (data, status, headers, config) {
+
+            	var quickMenuDefinition = ['UserTask', 'EndNoneEvent', 'ExclusiveGateway', 
+            	                           'CatchTimerEvent', 'ThrowNoneEvent', 'TextAnnotation',
+            	                           'SequenceFlow', 'Association'];
+            	var ignoreForPaletteDefinition = ['SequenceFlow', 'MessageFlow', 'Association', 'DataAssociation', 'DataStore', 'SendTask'];
+            	var quickMenuItems = [];
+            	
+            	var morphRoles = [];
+                for (var i = 0; i < data.rules.morphingRules.length; i++) 
+                {
+                    var role = data.rules.morphingRules[i].role;
+                    var roleItem = {'role': role, 'morphOptions': []};
+                    morphRoles.push(roleItem);
+                }
+            	
+                // Check all received items
+                for (var stencilIndex = 0; stencilIndex < data.stencils.length; stencilIndex++) 
+                {
+                	// Check if the root group is the 'diagram' group. If so, this item should not be shown.
+                    var currentGroupName = data.stencils[stencilIndex].groups[0];
+                    if (currentGroupName === 'Diagram' || currentGroupName === 'Form') {
+                        continue;  // go to next item
+                    }
+                    
+                    var removed = false;
+                    if (data.stencils[stencilIndex].removed) {
+                        removed = true;
+                    }
+
+                    var currentGroup = undefined;
+                    if (!removed) {
+                        // Check if this group already exists. If not, we create a new one
+
+                        if (currentGroupName !== null && currentGroupName !== undefined && currentGroupName.length > 0) {
+
+                            currentGroup = findGroup(currentGroupName, stencilItemGroups); // Find group in root groups array
+                            if (currentGroup === null) {
+                                currentGroup = addGroup(currentGroupName, stencilItemGroups);
+                            }
+
+                            // Add all child groups (if any)
+                            for (var groupIndex = 1; groupIndex < data.stencils[stencilIndex].groups.length; groupIndex++) {
+                                var childGroupName = data.stencils[stencilIndex].groups[groupIndex];
+                                var childGroup = findGroup(childGroupName, currentGroup.groups);
+                                if (childGroup === null) {
+                                    childGroup = addGroup(childGroupName, currentGroup.groups);
+                                }
+
+                                // The current group variable holds the parent of the next group (if any),
+                                // and is basically the last element in the array of groups defined in the stencil item
+                                currentGroup = childGroup;
+
+                            }
+
+                        }
+                    }
+                    
+                    // Construct the stencil item
+                    var stencilItem = {'id': data.stencils[stencilIndex].id,
+                        'name': data.stencils[stencilIndex].title,
+                        'description': data.stencils[stencilIndex].description,
+                        'icon': data.stencils[stencilIndex].icon,
+                        'type': data.stencils[stencilIndex].type,
+                        'roles': data.stencils[stencilIndex].roles,
+                        'removed': removed,
+                        'customIcon': false,
+                        'canConnect': false,
+                        'canConnectTo': false,
+                        'canConnectAssociation': false};
+                    
+                    if (data.stencils[stencilIndex].customIconId && data.stencils[stencilIndex].customIconId > 0) {
+                        stencilItem.customIcon = true;
+                        stencilItem.icon = data.stencils[stencilIndex].customIconId;
+                    }
+                    
+                    if (!removed) {
+                        if (quickMenuDefinition.indexOf(stencilItem.id) >= 0) {
+                        	quickMenuItems[quickMenuDefinition.indexOf(stencilItem.id)] = stencilItem;
+                        }
+                    }
+                    
+                    if (stencilItem.id === 'TextAnnotation' || stencilItem.id === 'BoundaryCompensationEvent') {
+                    	stencilItem.canConnectAssociation = true;
+                    }
+                    
+                    for (var i = 0; i < data.stencils[stencilIndex].roles.length; i++) {
+                    	var stencilRole = data.stencils[stencilIndex].roles[i];
+                    	if (stencilRole === 'sequence_start') {
+                    		stencilItem.canConnect = true;
+                    	} else if (stencilRole === 'sequence_end') {
+                    		stencilItem.canConnectTo = true;
+                    	}
+                    	
+                    	for (var j = 0; j < morphRoles.length; j++) {
+                    		if (stencilRole === morphRoles[j].role) {
+                    		    if (!removed) {
+                    			     morphRoles[j].morphOptions.push(stencilItem);
+                    			}
+                    			stencilItem.morphRole = morphRoles[j].role;
+                    			break;
+                    		}
+                    	}
+                    }
+
+                    if (currentGroup) {
+	                    // Add the stencil item to the correct group
+	                    currentGroup.items.push(stencilItem);
+	                    if (ignoreForPaletteDefinition.indexOf(stencilItem.id) < 0) {
+	                    	currentGroup.paletteItems.push(stencilItem);
+	                    }
+
+                    } else {
+                        // It's a root stencil element
+                        if (!removed) {
+                            stencilItemGroups.push(stencilItem);
+                        }
+                    }
+                }
+                
+                for (var i = 0; i < stencilItemGroups.length; i++) 
+                {
+                	if (stencilItemGroups[i].paletteItems && stencilItemGroups[i].paletteItems.length == 0)
+                	{
+                		stencilItemGroups[i].visible = false;
+                	}
+                }
+                
+                $scope.stencilItemGroups = stencilItemGroups;
+
+                var containmentRules = [];
+                for (var i = 0; i < data.rules.containmentRules.length; i++) 
+                {
+                    var rule = data.rules.containmentRules[i];
+                    containmentRules.push(rule);
+                }
+                $scope.containmentRules = containmentRules;
+                
+                // remove quick menu items which are not available anymore due to custom pallette
+                var availableQuickMenuItems = [];
+                for (var i = 0; i < quickMenuItems.length; i++) 
+                {
+                    if (quickMenuItems[i]) {
+                        availableQuickMenuItems[availableQuickMenuItems.length] = quickMenuItems[i];
+                    }
+                }
+                
+                $scope.quickMenuItems = availableQuickMenuItems;
+                $scope.morphRoles = morphRoles;
+            }).
+            
+            error(function (data, status, headers, config) {
+                console.log('Something went wrong when fetching stencil items:' + JSON.stringify(data));
+            });
+
+            /*
+             * Listen to selection change events: show properties
+             */
+            $scope.editor.registerOnEvent(ORYX.CONFIG.EVENT_SELECTION_CHANGED, function (event) {
+                var shapes = event.elements;
+                var canvasSelected = false;
+                if (shapes && shapes.length == 0) {
+                    shapes = [$scope.editor.getCanvas()];
+                    canvasSelected = true;
+                }
+                if (shapes && shapes.length > 0) {
+
+                    var selectedShape = shapes.first();
+                    var stencil = selectedShape.getStencil();
+                    
+                    if ($rootScope.selectedElementBeforeScrolling && stencil.id().indexOf('BPMNDiagram') !== -1)
+                    {
+                    	// ignore canvas event because of empty selection when scrolling stops
+                    	return;
+                    }
+                    
+                    if ($rootScope.selectedElementBeforeScrolling && $rootScope.selectedElementBeforeScrolling.getId() === selectedShape.getId())
+                    {
+                    	$rootScope.selectedElementBeforeScrolling = null;
+                    	return;
+                    }
+
+                    // Store previous selection
+                    $scope.previousSelectedShape = $scope.selectedShape;
+                    
+                    // Only do something if another element is selected (Oryx fires this event multiple times)
+                    if ($scope.selectedShape !== undefined && $scope.selectedShape.getId() === selectedShape.getId()) {
+                        if ($rootScope.forceSelectionRefresh) {
+                            // Switch the flag again, this run will force refresh
+                            $rootScope.forceSelectionRefresh = false;
+                        } else {
+                            // Selected the same element again, no need to update anything
+                            return;
+                        }
+                    }
+
+                    var selectedItem = {'title': '', 'properties': []};
+
+                    if (canvasSelected) {
+                        selectedItem.auditData = {
+                            'author': $scope.modelData.createdByUser,
+                            'createDate': $scope.modelData.createDate
+                        };
+                    }
+
+                    // Gather properties of selected item
+                    var properties = stencil.properties();
+                    for (var i = 0; i < properties.length; i++) {
+                        var property = properties[i];
+                        if (property.popular() == false) continue;
+                        var key = property.prefix() + "-" + property.id();
+
+                        if (key === 'oryx-name') {
+                            selectedItem.title = selectedShape.properties[key];
+                        }
+
+                        // First we check if there is a config for 'key-type' and then for 'type' alone
+                        var propertyConfig = KISBPM.PROPERTY_CONFIG[key + '-' + property.type()];
+                        if (propertyConfig === undefined || propertyConfig === null) {
+                            propertyConfig = KISBPM.PROPERTY_CONFIG[property.type()];
+                        }
+
+                        if (propertyConfig === undefined || propertyConfig === null) {
+                            console.log('WARNING: no property configuration defined for ' + key + ' of type ' + property.type());
+                        } else {
+
+                            if (selectedShape.properties[key] === 'true') {
+                                selectedShape.properties[key] = true;
+                            }
+                            
+                            if (KISBPM.CONFIG.showRemovedProperties == false && property.isHidden())
+                            {
+                            	continue;
+                            }
+
+                            var currentProperty = {
+                                'key': key,
+                                'title': property.title(),
+                                'type': property.type(),
+                                'mode': 'read',
+                                'hidden': property.isHidden(),
+                                'value': selectedShape.properties[key]
+                            };
+                            
+                            if ((currentProperty.type === 'complex' || currentProperty.type === 'multiplecomplex') && currentProperty.value && currentProperty.value.length > 0) {
+                                try {
+                                    currentProperty.value = JSON.parse(currentProperty.value);
+                                } catch (err) {
+                                    // ignore
+                                }
+                            }
+
+                            if (propertyConfig.readModeTemplateUrl !== undefined && propertyConfig.readModeTemplateUrl !== null) {
+                                currentProperty.readModeTemplateUrl = propertyConfig.readModeTemplateUrl + '?version=' + $rootScope.staticIncludeVersion;
+                            }
+                            if (propertyConfig.writeModeTemplateUrl !== null && propertyConfig.writeModeTemplateUrl !== null) {
+                            	currentProperty.writeModeTemplateUrl = propertyConfig.writeModeTemplateUrl + '?version=' + $rootScope.staticIncludeVersion;
+                            }
+
+                            if (propertyConfig.templateUrl !== undefined && propertyConfig.templateUrl !== null) {
+                                currentProperty.templateUrl = propertyConfig.templateUrl + '?version=' + $rootScope.staticIncludeVersion;
+                                currentProperty.hasReadWriteMode = false;
+                            }
+                            else {
+                                currentProperty.hasReadWriteMode = true;
+                            }
+
+                            if (currentProperty.value === undefined
+                                || currentProperty.value === null
+                                || currentProperty.value.length == 0) {
+                                currentProperty.noValue = true;
+                            }
+
+                            selectedItem.properties.push(currentProperty);
+                        }
+                    }
+
+                    // Need to wrap this in an $apply block, see http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
+                    $scope.safeApply(function () {
+                        $scope.selectedItem = selectedItem;
+                        $scope.selectedShape = selectedShape;
+                    });
+
+                } else {
+                    $scope.safeApply(function () {
+                        $scope.selectedItem = {};
+                        $scope.selectedShape = null;
+                    });
+                }
+            });
+            
+            $scope.editor.registerOnEvent(ORYX.CONFIG.EVENT_SELECTION_CHANGED, function (event) {
+            	
+            	KISBPM.eventBus.dispatch(KISBPM.eventBus.EVENT_TYPE_HIDE_SHAPE_BUTTONS);
+            	var shapes = event.elements;
+                
+                if (shapes && shapes.length == 1) {
+
+                    var selectedShape = shapes.first();
+            	
+                    var a = $scope.editor.getCanvas().node.getScreenCTM();
+        			
+        			var absoluteXY = selectedShape.absoluteXY();
+        			
+        			absoluteXY.x *= a.a;
+        			absoluteXY.y *= a.d;
+        			
+        			var additionalIEZoom = 1;
+        			if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) {
+                        var ua = navigator.userAgent;
+                        if (ua.indexOf('MSIE') >= 0) {
+                            //IE 10 and below
+                            var zoom = Math.round((screen.deviceXDPI / screen.logicalXDPI) * 100);
+                            if (zoom !== 100) {
+                                additionalIEZoom = zoom / 100
+                            }
+                        }
+                    }
+                    
+        			if (additionalIEZoom === 1) {
+        			     absoluteXY.y = absoluteXY.y - jQuery("#canvasSection").offset().top + 5;
+                         absoluteXY.x = absoluteXY.x - jQuery("#canvasSection").offset().left;
+        			
+        			} else {
+        			     var canvasOffsetLeft = jQuery("#canvasSection").offset().left;
+        			     var canvasScrollLeft = jQuery("#canvasSection").scrollLeft();
+        			     var canvasScrollTop = jQuery("#canvasSection").scrollTop();
+        			     
+        			     var offset = a.e - (canvasOffsetLeft * additionalIEZoom);
+        			     var additionaloffset = 0;
+        			     if (offset > 10) {
+        			         additionaloffset = (offset / additionalIEZoom) - offset;
+        			     }
+        			     absoluteXY.y = absoluteXY.y - (jQuery("#canvasSection").offset().top * additionalIEZoom) + 5 + ((canvasScrollTop * additionalIEZoom) - canvasScrollTop);
+                         absoluteXY.x = absoluteXY.x - (canvasOffsetLeft * additionalIEZoom) + additionaloffset + ((canvasScrollLeft * additionalIEZoom) - canvasScrollLeft);
+                    }
+        			
+        			var bounds = new ORYX.Core.Bounds(a.e + absoluteXY.x, a.f + absoluteXY.y, a.e + absoluteXY.x + a.a*selectedShape.bounds.width(), a.f + absoluteXY.y + a.d*selectedShape.bounds.height());
+        			var shapeXY = bounds.upperLeft();
+        			
+        			var stencilItem = $scope.getStencilItemById(selectedShape.getStencil().idWithoutNs());
+        			var morphShapes = [];
+        			if (stencilItem && stencilItem.morphRole)
+        			{
+            			for (var i = 0; i < $scope.morphRoles.length; i++)
+            			{
+            				if ($scope.morphRoles[i].role === stencilItem.morphRole)
+        					{
+        						morphShapes = $scope.morphRoles[i].morphOptions;
+        					}
+            			}
+            	    }
+        			
+        			var x = shapeXY.x;
+    				if (bounds.width() < 48) {
+    					x -= 24;
+    				}
+        			
+        			if (morphShapes && morphShapes.length > 0) {
+        				// In case the element is not wide enough, start the 2 bottom-buttons more to the left
+        				// to prevent overflow in the right-menu
+	        			var morphButton = document.getElementById('morph-button');
+	        			morphButton.style.display = "block";
+	        			morphButton.style.left = x + 24 +'px';
+	        			morphButton.style.top = (shapeXY.y+bounds.height() + 2) + 'px';
+        			}
+        			
+        			var deleteButton = document.getElementById('delete-button');
+        			deleteButton.style.display = "block";
+        			deleteButton.style.left = x + 'px';
+        			deleteButton.style.top = (shapeXY.y+bounds.height() + 2) + 'px';
+        			
+        			if (stencilItem && (stencilItem.canConnect || stencilItem.canConnectAssociation)) {
+	        			var quickButtonCounter = 0;
+	        			var quickButtonX = shapeXY.x+bounds.width() + 5;
+	        			var quickButtonY = shapeXY.y;
+	        			jQuery('.Oryx_button').each(function(i, obj) {
+	        				if (obj.id !== 'morph-button' && obj.id != 'delete-button') {
+	        					quickButtonCounter++;
+	        					if (quickButtonCounter > 3) {
+	        						quickButtonX = shapeXY.x+bounds.width() + 5;
+	        						quickButtonY += 24;
+	        						quickButtonCounter = 1;
+	        						
+	        					} else if (quickButtonCounter > 1) {
+	        						quickButtonX += 24;
+	        					}
+	        					obj.style.display = "block";
+	        					obj.style.left = quickButtonX + 'px';
+	        					obj.style.top = quickButtonY + 'px';
+	        				}
+	        			});
+        			}
+                }
+            });
+	        
+            if (!$rootScope.stencilInitialized) {
+	            KISBPM.eventBus.addListener(KISBPM.eventBus.EVENT_TYPE_HIDE_SHAPE_BUTTONS, function (event) {
+		            jQuery('.Oryx_button').each(function(i, obj) {
+		            	obj.style.display = "none";
+      				});
+	            });
+
+	            /*
+	             * Listen to property updates and act upon them
+	             */
+	            KISBPM.eventBus.addListener(KISBPM.eventBus.EVENT_TYPE_PROPERTY_VALUE_CHANGED, function (event) {
+	                if (event.property && event.property.key) {
+	                    // If the name property is been updated, we also need to change the title of the currently selected item
+	                    if (event.property.key === 'oryx-name' && $scope.selectedItem !== undefined && $scope.selectedItem !== null) {
+	                        $scope.selectedItem.title = event.newValue;
+	                    }
+
+	                    // Update "no value" flag
+	                    event.property.noValue = (event.property.value === undefined
+	                        || event.property.value === null
+	                        || event.property.value.length == 0);
+	                }
+	            });
+	            
+	            $rootScope.stencilInitialized = true;
+            }
+            
+            $scope.morphShape = function() {
+            	$scope.safeApply(function () {
+            		
+            		var shapes = $rootScope.editor.getSelection();
+            		if (shapes && shapes.length == 1)
+            		{
+            			$rootScope.currentSelectedShape = shapes.first();
+            			var stencilItem = $scope.getStencilItemById($rootScope.currentSelectedShape.getStencil().idWithoutNs());
+            			var morphShapes = [];
+            			for (var i = 0; i < $scope.morphRoles.length; i++)
+            			{
+            				if ($scope.morphRoles[i].role === stencilItem.morphRole)
+        					{
+        						morphShapes = $scope.morphRoles[i].morphOptions.slice();
+        					}
+            			}
+
+            			// Method to open shape select dialog (used later on)
+                        var showSelectShapeDialog = function()
+                        {
+                            $rootScope.morphShapes = morphShapes;
+                            $modal({
+                                backdrop: false,
+                                keyboard: true,
+                                template: 'editor-app/popups/select-shape.html?version=' + Date.now()
+                            });
+                        };
+
+                        showSelectShapeDialog();
+            		}
+            	});
+            };
+            
+            $scope.deleteShape = function() {
+              KISBPM.TOOLBAR.ACTIONS.deleteItem({'$scope': $scope});
+            };
+            
+            $scope.quickAddItem = function(newItemId) {
+            	$scope.safeApply(function () {
+            		
+            		var shapes = $rootScope.editor.getSelection();
+            		if (shapes && shapes.length == 1)
+            		{
+            			$rootScope.currentSelectedShape = shapes.first();
+            			
+            			var containedStencil = undefined;
+                    	var stencilSets = $scope.editor.getStencilSets().values();
+                    	for (var i = 0; i < stencilSets.length; i++)
+                    	{
+                    		var stencilSet = stencilSets[i];
+                			var nodes = stencilSet.nodes();
+                			for (var j = 0; j < nodes.length; j++)
+                        	{
+                				if (nodes[j].idWithoutNs() === newItemId)
+                				{
+                					containedStencil = nodes[j];
+                					break;
+                				}
+                        	}
+                    	}
+                    	
+                    	if (!containedStencil) return;
+            			
+            			var option = {type: $scope.currentSelectedShape.getStencil().namespace() + newItemId, namespace: $scope.currentSelectedShape.getStencil().namespace()};
+            			option['connectedShape'] = $rootScope.currentSelectedShape;
+            			option['parent'] = $rootScope.currentSelectedShape.parent;
+            			option['containedStencil'] = containedStencil;
+            		
+            			var args = { sourceShape: $rootScope.currentSelectedShape, targetStencil: containedStencil };
+            			var targetStencil = $scope.editor.getRules().connectMorph(args);
+            			if (!targetStencil){ return; }// Check if there can be a target shape
+            			option['connectingType'] = targetStencil.id();
+
+            			var command = new KISBPM.CreateCommand(option, undefined, undefined, $scope.editor);
+            		
+            			$scope.editor.executeCommands([command]);
+            		}
+            	});
+            };
+
+        }); // end of $scope.editorFactory.promise block
+
+        /* Click handler for clicking a property */
+        $scope.propertyClicked = function (index) {
+            if (!$scope.selectedItem.properties[index].hidden) {
+                $scope.selectedItem.properties[index].mode = "write";
+            }
+        };
+
+        /* Helper method to retrieve the template url for a property */
+        $scope.getPropertyTemplateUrl = function (index) {
+            return $scope.selectedItem.properties[index].templateUrl;
+        };
+        $scope.getPropertyReadModeTemplateUrl = function (index) {
+            return $scope.selectedItem.properties[index].readModeTemplateUrl;
+        };
+        $scope.getPropertyWriteModeTemplateUrl = function (index) {
+            return $scope.selectedItem.properties[index].writeModeTemplateUrl;
+        };
+
+        /* Method available to all sub controllers (for property controllers) to update the internal Oryx model */
+        $scope.updatePropertyInModel = function (property, shapeId) {
+
+            var shape = $scope.selectedShape;
+            // Some updates may happen when selected shape is already changed, so when an additional
+            // shapeId is supplied, we need to make sure the correct shape is updated (current or previous)
+            if (shapeId) {
+                if (shape.id != shapeId && $scope.previousSelectedShape && $scope.previousSelectedShape.id == shapeId) {
+                    shape = $scope.previousSelectedShape;
+                } else {
+                    shape = null;
+                }
+            }
+
+            if (!shape) {
+                // When no shape is selected, or no shape is found for the alternative
+                // shape ID, do nothing
+                return;
+            }
+            var key = property.key;
+            var newValue = property.value;
+            var oldValue = shape.properties[key];
+
+            if (newValue != oldValue) {
+                var commandClass = ORYX.Core.Command.extend({
+                    construct: function () {
+                        this.key = key;
+                        this.oldValue = oldValue;
+                        this.newValue = newValue;
+                        this.shape = shape;
+                        this.facade = $scope.editor;
+                    },
+                    execute: function () {
+                        this.shape.setProperty(this.key, this.newValue);
+                        this.facade.getCanvas().update();
+                        this.facade.updateSelection();
+                    },
+                    rollback: function () {
+                        this.shape.setProperty(this.key, this.oldValue);
+                        this.facade.getCanvas().update();
+                        this.facade.updateSelection();
+                    }
+                });
+                // Instantiate the class
+                var command = new commandClass();
+
+                // Execute the command
+                $scope.editor.executeCommands([command]);
+                $scope.editor.handleEvents({
+                    type: ORYX.CONFIG.EVENT_PROPWINDOW_PROP_CHANGED,
+                    elements: [shape],
+                    key: key
+                });
+
+                // Switch the property back to read mode, now the update is done
+                property.mode = 'read';
+
+                // Fire event to all who is interested
+                // Fire event to all who want to know about this
+                var event = {
+                    type: KISBPM.eventBus.EVENT_TYPE_PROPERTY_VALUE_CHANGED,
+                    property: property,
+                    oldValue: oldValue,
+                    newValue: newValue
+                };
+                KISBPM.eventBus.dispatch(event.type, event);
+            } else {
+                // Switch the property back to read mode, no update was needed
+                property.mode = 'read';
+            }
+
+        };
+
+        /**
+         * Helper method that searches a group for an item with the given id.
+         * If not found, will return undefined.
+         */
+        $scope.findStencilItemInGroup = function (stencilItemId, group) {
+
+            var item;
+
+            // Check all items directly in this group
+            for (var j = 0; j < group.items.length; j++) {
+                item = group.items[j];
+                if (item.id === stencilItemId) {
+                    return item;
+                }
+            }
+
+            // Check the child groups
+            if (group.groups && group.groups.length > 0) {
+                for (var k = 0; k < group.groups.length; k++) {
+                    item = $scope.findStencilItemInGroup(stencilItemId, group.groups[k]);
+                    if (item) {
+                        return item;
+                    }
+                }
+            }
+
+            return undefined;
+        };
+
+        /**
+         * Helper method to find a stencil item.
+         */
+        $scope.getStencilItemById = function (stencilItemId) {
+            for (var i = 0; i < $scope.stencilItemGroups.length; i++) {
+                var element = $scope.stencilItemGroups[i];
+
+                // Real group
+                if (element.items !== null && element.items !== undefined) {
+                    var item = $scope.findStencilItemInGroup(stencilItemId, element);
+                    if (item) {
+                        return item;
+                    }
+                } else { // Root stencil item
+                    if (element.id === stencilItemId) {
+                        return element;
+                    }
+                }
+            }
+            return undefined;
+        };
+
+        /*
+         * DRAG AND DROP FUNCTIONALITY
+         */
+
+        $scope.dropCallback = function (event, ui) {
+        	
+            $scope.editor.handleEvents({
+                type: ORYX.CONFIG.EVENT_HIGHLIGHT_HIDE,
+                highlightId: "shapeRepo.attached"
+            });
+            $scope.editor.handleEvents({
+                type: ORYX.CONFIG.EVENT_HIGHLIGHT_HIDE,
+                highlightId: "shapeRepo.added"
+            });
+            
+            $scope.editor.handleEvents({
+                type: ORYX.CONFIG.EVENT_HIGHLIGHT_HIDE,
+                highlightId: "shapeMenu"
+            });
+            
+            KISBPM.eventBus.dispatch(KISBPM.eventBus.EVENT_TYPE_HIDE_SHAPE_BUTTONS);
+
+            if ($scope.dragCanContain) {
+
+            	var item = $scope.getStencilItemById(ui.draggable[0].id);
+            	
+            	var pos = {x: event.pageX, y: event.pageY};
+            	
+            	var additionalIEZoom = 1;
+                if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) {
+                    var ua = navigator.userAgent;
+                    if (ua.indexOf('MSIE') >= 0) {
+                        //IE 10 and below
+                        var zoom = Math.round((screen.deviceXDPI / screen.logicalXDPI) * 100);
+                        if (zoom !== 100) {
+                            additionalIEZoom = zoom / 100;
+                        }
+                    }
+                }
+            	
+                var screenCTM = $scope.editor.getCanvas().node.getScreenCTM();
+
+                // Correcting the UpperLeft-Offset
+                pos.x -= (screenCTM.e / additionalIEZoom);
+                pos.y -= (screenCTM.f / additionalIEZoom);
+                // Correcting the Zoom-Factor
+                pos.x /= screenCTM.a;
+                pos.y /= screenCTM.d;
+                
+                // Correcting the ScrollOffset
+                pos.x -= document.documentElement.scrollLeft;
+                pos.y -= document.documentElement.scrollTop;
+                
+                var parentAbs = $scope.dragCurrentParent.absoluteXY();
+                pos.x -= parentAbs.x;
+                pos.y -= parentAbs.y;
+                
+            	if ($scope.quickMenu)
+            	{
+            		var shapes = $scope.editor.getSelection();
+            		if (shapes && shapes.length == 1)
+            		{
+            			var currentSelectedShape = shapes.first();
+            		
+	            		var containedStencil = undefined;
+	                	var stencilSets = $scope.editor.getStencilSets().values();
+	                	for (var i = 0; i < stencilSets.length; i++)
+	                	{
+	                		var stencilSet = stencilSets[i];
+	            			var nodes = stencilSet.nodes();
+	            			for (var j = 0; j < nodes.length; j++)
+	                    	{
+	            				if (nodes[j].idWithoutNs() === ui.draggable[0].id)
+	            				{
+	            					containedStencil = nodes[j];
+	            					break;
+	            				}
+	                    	}
+	            			
+	            			if (!containedStencil)
+	            			{
+	            				var edges = stencilSet.edges();
+	                			for (var j = 0; j < edges.length; j++)
+	                        	{
+	                				if (edges[j].idWithoutNs() === ui.draggable[0].id)
+	                				{
+	                					containedStencil = edges[j];
+	                					break;
+	                				}
+	                        	}
+	            			}
+	                	}
+	                	
+	                	if (!containedStencil) return;
+	        			
+	        			var option = {};
+	        			option.type = currentSelectedShape.getStencil().namespace() + ui.draggable[0].id;
+	        			option.namespace = currentSelectedShape.getStencil().namespace();
+	        			option.connectedShape = currentSelectedShape;
+	        			option.parent = $scope.dragCurrentParent;
+	        			option.containedStencil = containedStencil;
+	        			
+	        			// If the ctrl key is not pressed, 
+	        			// snapp the new shape to the center 
+	        			// if it is near to the center of the other shape
+	        			if (!event.ctrlKey){
+	        				// Get the center of the shape
+	        				var cShape = currentSelectedShape.bounds.center();
+	        				// Snapp +-20 Pixel horizontal to the center 
+	        				if (20 > Math.abs(cShape.x - pos.x)){
+	        					pos.x = cShape.x;
+	        				}
+	        				// Snapp +-20 Pixel vertical to the center 
+	        				if (20 > Math.abs(cShape.y - pos.y)){
+	        					pos.y = cShape.y;
+	        				}
+	        			}
+	        			
+	        			option.position = pos;
+	        		
+	        			if (containedStencil.idWithoutNs() !== 'SequenceFlow' && containedStencil.idWithoutNs() !== 'Association' && 
+	        			        containedStencil.idWithoutNs() !== 'MessageFlow' && containedStencil.idWithoutNs() !== 'DataAssociation')
+	        			{
+		        			var args = { sourceShape: currentSelectedShape, targetStencil: containedStencil };
+		        			var targetStencil = $scope.editor.getRules().connectMorph(args);
+		        			if (!targetStencil){ return; }// Check if there can be a target shape
+		        			option.connectingType = targetStencil.id();
+	        			}
+	
+	        			var command = new KISBPM.CreateCommand(option, $scope.dropTargetElement, pos, $scope.editor);
+	        		
+	        			$scope.editor.executeCommands([command]);
+            		}
+            	}
+            	else
+            	{
+
+	                var option = {};
+	                option['type'] = $scope.modelData.model.stencilset.namespace + item.id;
+					option['namespace'] = $scope.modelData.model.stencilset.namespace;
+					option['position'] = pos;
+					option['parent'] = $scope.dragCurrentParent;
+	
+	                var commandClass = ORYX.Core.Command.extend({
+	                    construct: function (option, currentParent, canAttach, position, facade) {
+	                        this.option = option;
+	                        this.currentParent = currentParent;
+	                        this.canAttach = canAttach;
+	                        this.position = position;
+	                        this.facade = facade;
+	                        this.selection = this.facade.getSelection();
+	                        this.shape;
+	                        this.parent;
+	                    },
+	                    execute: function () {
+	                        if (!this.shape) {
+	                            this.shape = this.facade.createShape(option);
+	                            this.parent = this.shape.parent;
+	                        } else {
+	                            this.parent.add(this.shape);
+	                        }
+	
+	                        if (this.canAttach && this.currentParent instanceof ORYX.Core.Node && this.shape.dockers.length > 0) {
+	
+	                            var docker = this.shape.dockers[0];
+	
+	                            if (this.currentParent.parent instanceof ORYX.Core.Node) {
+	                                this.currentParent.parent.add(docker.parent);
+	                            }
+	
+	                            docker.bounds.centerMoveTo(this.position);
+	                            docker.setDockedShape(this.currentParent);
+	                            //docker.update();
+	                        }
+	
+	                        this.facade.setSelection([this.shape]);
+	                        this.facade.getCanvas().update();
+	                        this.facade.updateSelection();
+	
+	                    },
+	                    rollback: function () {
+	                        this.facade.deleteShape(this.shape);
+	
+	                        //this.currentParent.update();
+	
+	                        this.facade.setSelection(this.selection.without(this.shape));
+	                        this.facade.getCanvas().update();
+	                        this.facade.updateSelection();
+	
+	                    }
+	                });
+	
+	                // Update canvas
+	                var command = new commandClass(option, $scope.dragCurrentParent, false, pos, $scope.editor);
+	                $scope.editor.executeCommands([command]);
+	
+	                // Fire event to all who want to know about this
+	                var dropEvent = {
+	                    type: KISBPM.eventBus.EVENT_TYPE_ITEM_DROPPED,
+	                    droppedItem: item,
+	                    position: pos
+	                };
+	                KISBPM.eventBus.dispatch(dropEvent.type, dropEvent);
+            	}
+            }
+
+            $scope.dragCurrentParent = undefined;
+            $scope.dragCurrentParentId = undefined;
+            $scope.dragCurrentParentStencil = undefined;
+            $scope.dragCanContain = undefined;
+            $scope.quickMenu = undefined;
+            $scope.dropTargetElement = undefined;
+        };
+
+
+        $scope.overCallback = function (event, ui) {
+            $scope.dragModeOver = true;
+        };
+
+        $scope.outCallback = function (event, ui) {
+            $scope.dragModeOver = false;
+        };
+
+        $scope.startDragCallback = function (event, ui) {
+            $scope.dragModeOver = false;
+            $scope.quickMenu = false;
+        };
+        
+        $scope.startDragCallbackQuickMenu = function (event, ui) {
+            $scope.dragModeOver = false;
+            $scope.quickMenu = true;
+        };
+        
+        $scope.dragCallback = function (event, ui) {
+        	
+            if ($scope.dragModeOver != false) {
+            	
+                var coord = $scope.editor.eventCoordinatesXY(event.pageX, event.pageY);
+                
+                var additionalIEZoom = 1;
+                if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) {
+                    var ua = navigator.userAgent;
+                    if (ua.indexOf('MSIE') >= 0) {
+                        //IE 10 and below
+                        var zoom = Math.round((screen.deviceXDPI / screen.logicalXDPI) * 100);
+                        if (zoom !== 100) {
+                            additionalIEZoom = zoom / 100
+                        }
+                    }
+                }
+                
+                if (additionalIEZoom !== 1) {
+                     coord.x = coord.x / additionalIEZoom;
+                     coord.y = coord.y / additionalIEZoom;
+                }
+                
+                var aShapes = $scope.editor.getCanvas().getAbstractShapesAtPosition(coord);
+                
+                if (aShapes.length <= 0) {
+                    if (event.helper) {
+                        $scope.dragCanContain = false;
+                        return false;
+                    }
+                }
+
+                if (aShapes[0] instanceof ORYX.Core.Canvas) {
+                    $scope.editor.getCanvas().setHightlightStateBasedOnX(coord.x);
+                }
+
+                if (aShapes.length == 1 && aShapes[0] instanceof ORYX.Core.Canvas)
+                {
+                    var parentCandidate = aShapes[0];
+
+                    $scope.dragCanContain = true;
+                    $scope.dragCurrentParent = parentCandidate;
+                    $scope.dragCurrentParentId = parentCandidate.id;
+
+                    $scope.editor.handleEvents({
+                        type: ORYX.CONFIG.EVENT_HIGHLIGHT_HIDE,
+                        highlightId: "shapeRepo.attached"
+                    });
+                    $scope.editor.handleEvents({
+                        type: ORYX.CONFIG.EVENT_HIGHLIGHT_HIDE,
+                        highlightId: "shapeRepo.added"
+                    });
+                    return false;
+                }
+                else 
+                {
+                    var item = $scope.getStencilItemById(event.target.id);
+                    
+                    var parentCandidate = aShapes.reverse().find(function (candidate) {
+                        return (candidate instanceof ORYX.Core.Canvas
+                            || candidate instanceof ORYX.Core.Node
+                            || candidate instanceof ORYX.Core.Edge);
+                    });
+                    
+                    if (!parentCandidate) {
+                        $scope.dragCanContain = false;
+                        return false;
+                    }
+                    
+                    if (item.type === "node") {
+                        
+                        // check if the draggable is a boundary event and the parent an Activity
+                        var _canContain = false;
+                        var parentStencilId = parentCandidate.getStencil().id();
+
+                        if ($scope.dragCurrentParentId && $scope.dragCurrentParentId === parentCandidate.id) {
+                            return false;
+                        }
+
+                        var parentItem = $scope.getStencilItemById(parentCandidate.getStencil().idWithoutNs());
+                        if (parentItem.roles.indexOf("Activity") > -1) {
+                            if (item.roles.indexOf("IntermediateEventOnActivityBoundary") > -1) {
+                                _canContain = true;
+                            }
+                        }
+                        else if (parentCandidate.getStencil().idWithoutNs() === 'Pool')
+                        {
+                        	if (item.id === 'Lane')
+                        	{
+                        		_canContain = true;
+                        	}
+                        }
+                        
+                        if (_canContain)
+                        {
+                        	$scope.editor.handleEvents({
+                                type: ORYX.CONFIG.EVENT_HIGHLIGHT_SHOW,
+                                highlightId: "shapeRepo.attached",
+                                elements: [parentCandidate],
+                                style: ORYX.CONFIG.SELECTION_HIGHLIGHT_STYLE_RECTANGLE,
+                                color: ORYX.CONFIG.SELECTION_VALID_COLOR
+                            });
+
+                            $scope.editor.handleEvents({
+                                type: ORYX.CONFIG.EVENT_HIGHLIGHT_HIDE,
+                                highlightId: "shapeRepo.added"
+                            });
+                        }
+                        else
+                        {
+                            for (var i = 0; i < $scope.containmentRules.length; i++) {
+                                var rule = $scope.containmentRules[i];
+                                if (rule.role === parentItem.id) {
+                                    for (var j = 0; j < rule.contains.length; j++) {
+                                        if (item.roles.indexOf(rule.contains[j]) > -1) {
+                                            _canContain = true;
+                                            break;
+                                        }
+                                    }
+
+                                    if (_canContain) {
+                                        break;
+                                    }
+                                }
+                            }
+
+                            // Show Highlight
+                            $scope.editor.handleEvents({
+                                type: ORYX.CONFIG.EVENT_HIGHLIGHT_SHOW,
+                                highlightId: 'shapeRepo.added',
+                                elements: [parentCandidate],
+                                color: _canContain ? ORYX.CONFIG.SELECTION_VALID_COLOR : ORYX.CONFIG.SELECTION_INVALID_COLOR
+                            });
+
+                            $scope.editor.handleEvents({
+                                type: ORYX.CONFIG.EVENT_HIGHLIGHT_HIDE,
+                                highlightId: "shapeRepo.attached"
+                            });
+                        }
+
+                        $scope.dragCurrentParent = parentCandidate;
+                        $scope.dragCurrentParentId = parentCandidate.id;
+                        $scope.dragCurrentParentStencil = parentStencilId;
+                        $scope.dragCanContain = _canContain;
+                        
+                    } else  { 
+                    	var canvasCandidate = $scope.editor.getCanvas();
+                    	var canConnect = false;
+                    	
+                    	var targetStencil = $scope.getStencilItemById(parentCandidate.getStencil().idWithoutNs());
+            			if (targetStencil) {
+            				var associationConnect = false;
+            				if (stencil.idWithoutNs() === 'Association' && (curCan.getStencil().idWithoutNs() === 'TextAnnotation' || curCan.getStencil().idWithoutNs() === 'BoundaryCompensationEvent')) {
+            				    associationConnect = true;
+            				} else if (stencil.idWithoutNs() === 'DataAssociation' && curCan.getStencil().idWithoutNs() === 'DataStore') {
+                                associationConnect = true;
+                            }
+            				
+            				if (targetStencil.canConnectTo || associationConnect) {
+            					canConnect = true;
+            				}
+            			}
+                    	
+                    	//Edge
+                    	$scope.dragCurrentParent = canvasCandidate;
+                    	$scope.dragCurrentParentId = canvasCandidate.id;
+                        $scope.dragCurrentParentStencil = canvasCandidate.getStencil().id();
+                        $scope.dragCanContain = canConnect;
+                        
+                    	// Show Highlight
+                        $scope.editor.handleEvents({
+                            type: ORYX.CONFIG.EVENT_HIGHLIGHT_SHOW,
+                            highlightId: 'shapeRepo.added',
+                            elements: [canvasCandidate],
+                            color: ORYX.CONFIG.SELECTION_VALID_COLOR
+                        });
+
+                        $scope.editor.handleEvents({
+                            type: ORYX.CONFIG.EVENT_HIGHLIGHT_HIDE,
+                            highlightId: "shapeRepo.attached"
+                        });
+        			}
+                }
+            }
+        };
+        
+        $scope.dragCallbackQuickMenu = function (event, ui) {
+        	
+            if ($scope.dragModeOver != false) {
+                var coord = $scope.editor.eventCoordinatesXY(event.pageX, event.pageY);
+                
+                var additionalIEZoom = 1;
+                if (!isNaN(screen.logicalXDPI) && !isNaN(screen.systemXDPI)) {
+                    var ua = navigator.userAgent;
+                    if (ua.indexOf('MSIE') >= 0) {
+                        //IE 10 and below
+                        var zoom = Math.round((screen.deviceXDPI / screen.logicalXDPI) * 100);
+                        if (zoom !== 100) {
+                            additionalIEZoom = zoom / 100
+                        }
+                    }
+                }
+                
+                if (additionalIEZoom !== 1) {
+                     coord.x = coord.x / additionalIEZoom;
+                     coord.y = coord.y / additionalIEZoom;
+                }
+                
+                var aShapes = $scope.editor.getCanvas().getAbstractShapesAtPosition(coord);
+               
+                if (aShapes.length <= 0) {
+                    if (event.helper) {
+                        $scope.dragCanContain = false;
+                        return false;
+                    }
+                }
+
+                if (aShapes[0] instanceof ORYX.Core.Canvas) {
+                    $scope.editor.getCanvas().setHightlightStateBasedOnX(coord.x);
+                }
+                
+        		var stencil = undefined;
+            	var stencilSets = $scope.editor.getStencilSets().values();
+            	for (var i = 0; i < stencilSets.length; i++)
+            	{
+            		var stencilSet = stencilSets[i];
+        			var nodes = stencilSet.nodes();
+        			for (var j = 0; j < nodes.length; j++)
+                	{
+        				if (nodes[j].idWithoutNs() === event.target.id)
+        				{
+        					stencil = nodes[j];
+        					break;
+        				}
+                	}
+        			
+        			if (!stencil)
+        			{
+        				var edges = stencilSet.edges();
+            			for (var j = 0; j < edges.length; j++)
+                    	{
+            				if (edges[j].idWithoutNs() === event.target.id)
+            				{
+            					stencil = edges[j];
+            					break;
+            				}
+                    	}
+        			}
+            	}
+        		
+                var candidate = aShapes.last();
+                
+                var isValid = false;
+                if (stencil.type() === "node") 
+                {
+    				//check containment rules
+    				var canContain = $scope.editor.getRules().canContain({containingShape:candidate, containedStencil:stencil});
+    				
+    				var parentCandidate = aShapes.reverse().find(function (candidate) {
+                        return (candidate instanceof ORYX.Core.Canvas
+                            || candidate instanceof ORYX.Core.Node
+                            || candidate instanceof ORYX.Core.Edge);
+                    });
+
+                    if (!parentCandidate) {
+                        $scope.dragCanContain = false;
+                        return false;
+                    }
+    				
+    				$scope.dragCurrentParent = parentCandidate;
+                    $scope.dragCurrentParentId = parentCandidate.id;
+                    $scope.dragCurrentParentStencil = parentCandidate.getStencil().id();
+                    $scope.dragCanContain = canContain;
+                    $scope.dropTargetElement = parentCandidate;
+                    isValid = canContain;
+    	
+    			} else { //Edge
+    			
+    				var shapes = $scope.editor.getSelection();
+            		if (shapes && shapes.length == 1)
+            		{
+            			var currentSelectedShape = shapes.first();
+            			var curCan = candidate;
+            			var canConnect = false;
+            			
+            			var targetStencil = $scope.getStencilItemById(curCan.getStencil().idWithoutNs());
+            			if (targetStencil)
+            			{
+            				var associationConnect = false;
+            				if (stencil.idWithoutNs() === 'Association' && (curCan.getStencil().idWithoutNs() === 'TextAnnotation' || curCan.getStencil().idWithoutNs() === 'BoundaryCompensationEvent'))  
+            				{
+            					associationConnect = true;
+            				}
+            				else if (stencil.idWithoutNs() === 'DataAssociation' && curCan.getStencil().idWithoutNs() === 'DataStore')
+            				{
+            				    associationConnect = true;
+            				}
+            				
+            				if (targetStencil.canConnectTo || associationConnect)
+	            			{
+		        				while (!canConnect && curCan && !(curCan instanceof ORYX.Core.Canvas))
+		        				{
+		        					candidate = curCan;
+		        					//check connection rules
+		        					canConnect = $scope.editor.getRules().canConnect({
+		        											sourceShape: currentSelectedShape, 
+		        											edgeStencil: stencil, 
+		        											targetShape: curCan
+		        											});	
+		        					curCan = curCan.parent;
+		        				}
+	            			}
+            			}
+            			var parentCandidate = $scope.editor.getCanvas();
+        				
+        				isValid = canConnect;
+        				$scope.dragCurrentParent = parentCandidate;
+                        $scope.dragCurrentParentId = parentCandidate.id;
+                        $scope.dragCurrentParentStencil = parentCandidate.getStencil().id();
+        				$scope.dragCanContain = canConnect;
+        				$scope.dropTargetElement = candidate;
+            		}		
+    				
+    			}	
+
+                $scope.editor.handleEvents({
+					type:		ORYX.CONFIG.EVENT_HIGHLIGHT_SHOW, 
+					highlightId:'shapeMenu',
+					elements:	[candidate],
+					color:		isValid ? ORYX.CONFIG.SELECTION_VALID_COLOR : ORYX.CONFIG.SELECTION_INVALID_COLOR
+				});
+            }
+        };
+
+    }]);
+
+var KISBPM = KISBPM || {};
+//create command for undo/redo
+KISBPM.CreateCommand = ORYX.Core.Command.extend({
+	construct: function(option, currentReference, position, facade){
+		this.option = option;
+		this.currentReference = currentReference;
+		this.position = position;
+		this.facade = facade;
+		this.shape;
+		this.edge;
+		this.targetRefPos;
+		this.sourceRefPos;
+		/*
+		 * clone options parameters
+		 */
+        this.connectedShape = option.connectedShape;
+        this.connectingType = option.connectingType;
+        this.namespace = option.namespace;
+        this.type = option.type;
+        this.containedStencil = option.containedStencil;
+        this.parent = option.parent;
+        this.currentReference = currentReference;
+        this.shapeOptions = option.shapeOptions;
+	},			
+	execute: function(){
+		
+		if (this.shape) {
+			if (this.shape instanceof ORYX.Core.Node) {
+				this.parent.add(this.shape);
+				if (this.edge) {
+					this.facade.getCanvas().add(this.edge);
+					this.edge.dockers.first().setDockedShape(this.connectedShape);
+					this.edge.dockers.first().setReferencePoint(this.sourceRefPos);
+					this.edge.dockers.last().setDockedShape(this.shape);
+					this.edge.dockers.last().setReferencePoint(this.targetRefPos);
+				}
+				
+				this.facade.setSelection([this.shape]);
+				
+			} else if (this.shape instanceof ORYX.Core.Edge) {
+				this.facade.getCanvas().add(this.shape);
+				this.shape.dockers.first().setDockedShape(this.connectedShape);
+				this.shape.dockers.first().setReferencePoint(this.sourceRefPos);
+			}
+			resume = true;
+		}
+		else {
+			this.shape = this.facade.createShape(this.option);
+			this.edge = (!(this.shape instanceof ORYX.Core.Edge)) ? this.shape.getIncomingShapes().first() : undefined;
+		}
+		
+		if (this.currentReference && this.position) {
+			
+			if (this.shape instanceof ORYX.Core.Edge) {
+			
+				if (!(this.currentReference instanceof ORYX.Core.Canvas)) {
+					this.shape.dockers.last().setDockedShape(this.currentReference);
+					
+					if (this.currentReference.getStencil().idWithoutNs() === 'TextAnnotation')
+					{
+						var midpoint = {};
+						midpoint.x = 0;
+						midpoint.y = this.currentReference.bounds.height() / 2;
+						this.shape.dockers.last().setReferencePoint(midpoint);
+					}
+					else
+					{
+						this.shape.dockers.last().setReferencePoint(this.currentReference.bounds.midPoint());
+					}
+				}
+				else {
+					this.shape.dockers.last().bounds.centerMoveTo(this.position);
+				}
+				this.sourceRefPos = this.shape.dockers.first().referencePoint;
+				this.targetRefPos = this.shape.dockers.last().referencePoint;
+				
+			} else if (this.edge){
+				this.sourceRefPos = this.edge.dockers.first().referencePoint;
+				this.targetRefPos = this.edge.dockers.last().referencePoint;
+			}
+		} else {
+			var containedStencil = this.containedStencil;
+			var connectedShape = this.connectedShape;
+			var bc = connectedShape.bounds;
+			var bs = this.shape.bounds;
+			
+			var pos = bc.center();
+			if(containedStencil.defaultAlign()==="north") {
+				pos.y -= (bc.height() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET + (bs.height()/2);
+			} else if(containedStencil.defaultAlign()==="northeast") {
+				pos.x += (bc.width() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET_CORNER + (bs.width()/2);
+				pos.y -= (bc.height() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET_CORNER + (bs.height()/2);
+			} else if(containedStencil.defaultAlign()==="southeast") {
+				pos.x += (bc.width() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET_CORNER + (bs.width()/2);
+				pos.y += (bc.height() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET_CORNER + (bs.height()/2);
+			} else if(containedStencil.defaultAlign()==="south") {
+				pos.y += (bc.height() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET + (bs.height()/2);
+			} else if(containedStencil.defaultAlign()==="southwest") {
+				pos.x -= (bc.width() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET_CORNER + (bs.width()/2);
+				pos.y += (bc.height() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET_CORNER + (bs.height()/2);
+			} else if(containedStencil.defaultAlign()==="west") {
+				pos.x -= (bc.width() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET + (bs.width()/2);
+			} else if(containedStencil.defaultAlign()==="northwest") {
+				pos.x -= (bc.width() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET_CORNER + (bs.width()/2);
+				pos.y -= (bc.height() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET_CORNER + (bs.height()/2);
+			} else {
+				pos.x += (bc.width() / 2) + ORYX.CONFIG.SHAPEMENU_CREATE_OFFSET + (bs.width()/2);
+			}
+			
+			// Move shape to the new position
+			this.shape.bounds.centerMoveTo(pos);
+			
+			// Move all dockers of a node to the position
+			if (this.shape instanceof ORYX.Core.Node){
+				(this.shape.dockers||[]).each(function(docker){
+					docker.bounds.centerMoveTo(pos);
+				});
+			}
+			
+			//this.shape.update();
+			this.position = pos;
+			
+			if (this.edge){
+				this.sourceRefPos = this.edge.dockers.first().referencePoint;
+				this.targetRefPos = this.edge.dockers.last().referencePoint;
+			}
+		}
+		
+		this.facade.getCanvas().update();
+		this.facade.updateSelection();
+
+	},
+	rollback: function(){
+		this.facade.deleteShape(this.shape);
+		if(this.edge) {
+			this.facade.deleteShape(this.edge);
+		}
+		//this.currentParent.update();
+		this.facade.setSelection(this.facade.getSelection().without(this.shape, this.edge));
+	}
+});