updating bpmn designer

2011-03-04 17:46:51 +00:00
parent 0c7e3069c4
commit 189a2d9e79
7 changed files with 586 additions and 157 deletions
--- a/workflow/engine/skinEngine/base/css/pmos-xtheme-gray.css
+++ b/workflow/engine/skinEngine/base/css/pmos-xtheme-gray.css
@@ -123,3 +123,8 @@ button.x-btn-text:focus,.x-combo-selected{
 .icon-debug-disabled{
  background-image: url("/images/debug_disabled.png");
 }
+
+.icon-geometry{
+  background-image: url("/images/ToolUseGeometry.png");
+}
+
--- a/workflow/engine/templates/bpmn/bpmnShapes.js
+++ b/workflow/engine/templates/bpmn/bpmnShapes.js
@@ -1241,8 +1241,8 @@ bpmnTask.prototype.onDoubleClick = function () {
 * erik: Setting task target to Drop user & group assignment
 */
 bpmnTask.prototype.onMouseEnter = function () {
-  if( this.type == 'bpmnTask' && typeof Ext.getCmp('usersPanel') != 'undefined' ) {
-    Ext.getCmp('usersPanel')._targetTask = {id: this.id, name: this.taskName};
+  if( this.type == 'bpmnTask' ) {
+    _targetTask = {id: this.id, name: this.taskName};
  }
 };

--- a/workflow/engine/templates/bpmn/css/extjs-extend/xtheme-gray.css
+++ b/workflow/engine/templates/bpmn/css/extjs-extend/xtheme-gray.css
@@ -76,106 +76,77 @@
 */
 #x-shapes p {
  type:none;
-
  margin-left:9px;
 }

 #x-shapes-task {
-   width:36px;
-   height:26px;
-  /* background-image:url('/skins/ext/images/gray/shapes/pallete/task.png') ;*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding: 0px 2px 2px 0px;
 }

 #x-shapes-startEvent {
-   width:38px;
-   height:38px;
-  /* background-image:url('/skins/ext/images/gray/shapes/pallete/startevent.png');*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-interEvent {
-   width:38px;
-   height:38px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/interevent.png');*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-endEvent {
-   width:38px;
-   height:38px;
-  /*background-image:url('/skins/ext/images/gray/shapes/pallete/endevent.png');*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

-#x-shapes-gateway {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:2px 2px 2px 2px;
+#x-shapes-gateways {
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-dataobject {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:0 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-group {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:4px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-annotation {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:5px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-pool {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-lane {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-milestone {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-sequence {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-association {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 #x-shapes-message {
-   width:36px;
-   height:36px;
-   /*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
-   margin:2px 2px 2px 2px;
+  height: 25;
+  padding:0px 2px 2px 0px;
 }

 .toolbar-item{
@@ -209,6 +180,20 @@
  border-color: #98bf21;
 }

+.btn-panel-pmtoolbar{
+  font-size:11px;
+  font-weight: bold;
+  width: 50;
+}
+
+.icon-users-adhoc{
+  background-image:url('/images/icon-users.png') !important;
+}
+
+.icon-groups-adhoc{
+  background-image:url('/images/icon-groups.png') !important;
+}
+



--- a/workflow/engine/templates/bpmn/designer.html
+++ b/workflow/engine/templates/bpmn/designer.html
@@ -1,3 +1,34 @@
+<style>
+#tbar
+{
+  width:600px;
+}
+.icon-data
+{
+  background:url(img/data.png) 0 no-repeat !important;
+}
+.icon-chart
+{
+  background:url(img/pie-chart.png) 0 no-repeat !important;
+}
+.icon-table
+{
+  background:url(img/table.png) 0 no-repeat !important;
+}
+.icon-sort-asc
+{
+  background:url(img/sort-asc.png) 0 no-repeat !important;
+}
+.icon-sort-desc
+{
+  background:url(img/sort-desc.png) 0 no-repeat !important;
+}
+.icon-filter
+{
+  background:url(img/funnel.png) 0 no-repeat !important;
+}
+
+</style>
 <div id="west" class="x-hide-display">
 </div>
 <div id="center2" class="x-hide-display">
--- a/workflow/engine/templates/bpmn/designer.js
+++ b/workflow/engine/templates/bpmn/designer.js
@@ -13,10 +13,11 @@ var ProcessMapObj;

 Ext.onReady(function(){
    //Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+    //Ext.BLANK_IMAGE_URL = '/images/s.gif';
    
    var northPanel = new Ext.Toolbar({
        region: 'north',
-        height: 32, // give north and south regions a height
+        height: 25, // give north and south regions a height
        items: northPanelItems
    })

@@ -34,6 +35,7 @@ Ext.onReady(function(){
    }

    var eastPanel = {
+        id: 'eastPanel',
        region: 'east',
        title: '&nbsp;',
        collapsible: true,
@@ -41,7 +43,7 @@ Ext.onReady(function(){
        width: 225, // give east and west regions a width
        minSize: 175,
        maxSize: 400,
-        margins: '0 5 0 0',
+        margins: '0 3 0 0',
        layout:'border', // specify layout manager for items
        items:            // this TabPanel is wrapped by another Panel so the title will be applied
        [
@@ -55,7 +57,7 @@ Ext.onReady(function(){
            items:[
              new Ext.TabPanel({
                id    : 'usersPanelTabs',
-                title : 'sdd',
+                title : '',
                border: true, // already wrapped so don't add another border
                activeTab   : 0, // second tab initially active
                tabPosition : 'top',
@@ -72,21 +74,19 @@ Ext.onReady(function(){
          }
        ]
    }
-
    var westPanel = {
        region: 'west',
        id: 'west-panel', // see Ext.getCmp() below
-        title: '',
-        split: true,
-        width: 88,
+        title: '&nbsp;',
+        split: false,
+        width: 37,
        minSize: 20,
        maxSize: 400,
        collapsible: true,
-        margins: '0 0 0 5',
-        layout: {
-            type: 'accordion',
-            animate: true
-        },
+        layout: 'table',
+        layoutConfig: {columns:1},
+        defaults: {frame:true},
+        margins: '0 3 3 0',
        items: [
          toolbarPanel,
          actorsPanel
@@ -169,6 +169,17 @@ Ext.onReady(function(){
    });

    Ext.getCmp('designerTab')._setDesignerTitle(pro_title);
+    Ext.fly(document).on("scroll", function(){
+      if( usersPanel.isVisible() ) {
+        if (usersPanel._scrollPosTimer) {
+          clearTimeout(usersPanel._scrollPosTimer);
+        }
+        usersPanel._scrollPosTimer = setTimeout(function() {
+          usersPanel.setPosition(usersPanel._posRelToView[0] + divScroll.scrollLeft, usersPanel._posRelToView[1] + divScroll.scrollTop);
+        }, 100);
+      }
+    });
+  

    processObj = new ProcessOptions();
    ProcessMapObj = new ProcessMapContext();
@@ -187,9 +198,9 @@ Ext.onReady(function(){
           * erik: Setting Drop targets from users & groups grids to assignment to tasks
           * for all existing tasks
           */
-          //var dropEls = Ext.get('paintarea').query('.x-task');
-          //for(var i = 0; i < dropEls.length; i++)
-            //new Ext.dd.DropTarget(dropEls[i], {ddGroup:'task-assignment', notifyDrop  : Ext.getCmp('usersPanel')._onDrop});
+          var dropEls = Ext.get('paintarea').query('.x-task');
+          for(var i = 0; i < dropEls.length; i++)
+            new Ext.dd.DropTarget(dropEls[i], {ddGroup:'task-assignment', notifyDrop  : _onDropActors});

        },
        failure: function(){
@@ -202,6 +213,7 @@ Ext.onReady(function(){

  //Get main into workflow object
  workflow.main = Ext.getCmp('centerRegion');
+  //workflow.setSnapToGeometry(false);
  canvas = Ext.get('paintarea');

  contextCanvasMenu = new Ext.menu.Menu({
@@ -353,6 +365,19 @@ Ext.onReady(function(){
  workflow.addSelectionListener(menu);
  workflow.scrollArea = document.getElementById("center1").parentNode;

+  Ext.get('x-shapes-task').child('.x-btn-mc').setStyle('text-align', 'left');
+  Ext.get('x-shapes-startEvent').child('.x-btn-mc').setStyle('text-align', 'left');
+  Ext.get('x-shapes-interEvent').child('.x-btn-mc').setStyle('text-align', 'left');
+  Ext.get('x-shapes-endEvent').child('.x-btn-mc').setStyle('text-align', 'left');
+  Ext.get('x-shapes-gateways').child('.x-btn-mc').setStyle('text-align', 'left');
+  Ext.get('x-shapes-annotation').child('.x-btn-mc').setStyle('text-align', 'left');
+  
+  Ext.get('x-pm-users').child('.x-btn-mc').setStyle('text-align', 'left');
+  Ext.get('x-pm-groups').child('.x-btn-mc').setStyle('text-align', 'left');
+  Ext.get('x-pm-users-adhoc').child('.x-btn-mc').setStyle('text-align', 'left');
+  Ext.get('x-pm-groups-adhoc').child('.x-btn-mc').setStyle('text-align', 'left');
+  
+
  /**
   * Setting tooltips ti tollbar items
   */
@@ -360,45 +385,75 @@ Ext.onReady(function(){
      target: 'x-shapes-task',
      title: 'Task',
      trackMouse: true,
-      anchor: 'top',
+      anchor: 'right',
      html: ''
  });
  new Ext.ToolTip({
      target: 'x-shapes-startEvent',
-      title: '  Start Event',
+      title: 'Event',
      trackMouse: true,
-      anchor: 'top',
-      html: ''
+      anchor: 'right',
+      html: 'Start'
  });
  new Ext.ToolTip({
      target: 'x-shapes-interEvent',
-      title: 'Intermediate Event',
+      title: 'Event',
      trackMouse: true,
-      anchor: 'top',
-      html: ''
+      anchor: 'right',
+      html: 'Intermediate'
  });
  new Ext.ToolTip({
      target: 'x-shapes-endEvent',
-      title: 'End Event',
+      title: 'Event',
      trackMouse: true,
-      anchor: 'top',
-      html: ''
+      anchor: 'right',
+      html: 'End'
  });
  new Ext.ToolTip({
      target: 'x-shapes-gateways',
      title: 'Gateway',
      trackMouse: true,
-      anchor: 'top',
+      anchor: 'right',
      html: ''
  });
  new Ext.ToolTip({
      target: 'x-shapes-annotation',
      title: 'Annotation',
-      anchor: 'top',
+      anchor: 'right',
      trackMouse: true,
      html: ''
  });

+  new Ext.ToolTip({
+      target: 'x-pm-users',
+      title: 'Actors',
+      anchor: 'right',
+      trackMouse: true,
+      html: 'Users'
+  });
+  new Ext.ToolTip({
+      target: 'x-pm-groups',
+      title: 'Actors',
+      anchor: 'right',
+      trackMouse: true,
+      html: 'Groups'
+  });
+  new Ext.ToolTip({
+      target: 'x-pm-users-adhoc',
+      title: 'Actors',
+      anchor: 'right',
+      trackMouse: true,
+      html: 'Ad Hoc Users'
+  });
+  new Ext.ToolTip({
+      target: 'x-pm-groups-adhoc',
+      title: 'Actors',
+      anchor: 'right',
+      trackMouse: true,
+      html: 'Ad Hoc Groups'
+  });
+  
+  
  /**
   * setting drag sources for Toolbar items
   */
--- a/workflow/engine/templates/bpmn/designerComponents.js
+++ b/workflow/engine/templates/bpmn/designerComponents.js
@@ -23,52 +23,120 @@ var usersTaskAdHocGrid;
 var onUsersTaskAdHocGridContextMenu;
 var usersTaskAdHocGridContextMenu;
 var mainMenu;
+var tbar1;
+
+var divScroll;
+var usersPanelStart = 0;
+var  usersPanelLimit = 1000;
+var usersStore;
+var usersGrid;
+var groupsStore;
+var groupsGrid;
+
+var usersActorsWin;
+var groupsActorsWin;
+var adhocUsersActorsWin;
+var adHocGroupsActorsWin;
+
+var _onDropActors;
+var _targetTask;
+var o;

 Ext.onReady(function(){
+  divScroll = document.body;
    
 toolbarPanel = {
-  title: 'Toolbar',
-  border: false,
-  //iconCls: 'nav',
-  layout:'table',
+  title: '&nbsp;',
+  border: true,
+  xtype:'buttongroup',
  defaultType: 'button',
-  cls: 'btn-panel',
-  layoutConfig: {
-    columns: 2
-  },
+  cls: 'btn-panel-pmtoolbar',
+  columns: 1,
  defaults: {
-    autoEl: {tag: 'h3', style:"padding:15px 0 3px;"},
-    scale: 'large'
+    scale: 'small'
  },

  items : [{
-      iconCls: 'button_large_ext ss_sprite ss_bpmn_task',//icon: '/skins/ext/images/gray/shapes/pallete/task.png',
-      id:"x-shapes-task"
+      iconCls: 'button_small_ext ss_sprite ss_bpmn_task-18x18',
+      id:"x-shapes-task",
+      text: ' ', 
+      width: 22
    },{
-      iconCls: 'button_large_ext ss_sprite ss_bpmn_startevent',//icon: '/skins/ext/images/gray/shapes/pallete/startevent.png',
-      id:"x-shapes-startEvent"
+      iconCls: 'button_small_ext ss_sprite ss_bpmn_startevent-18x18',
+      id:"x-shapes-startEvent",
+      text: ' ', 
+      width: 22
    },{
-      iconCls: 'button_large_ext ss_sprite ss_bpmn_interevent',//icon: '/skins/ext/images/gray/shapes/pallete/interevent.png',
-      id:"x-shapes-interEvent"
+      iconCls: 'button_small_ext ss_sprite ss_bpmn_interevent-18x18',
+      id:"x-shapes-interEvent",
+      text: ' ', 
+      width: 22
    },{
-      iconCls: 'button_large_ext ss_sprite ss_bpmn_endevent',//icon: '/skins/ext/images/gray/shapes/pallete/endevent.png',
-      id:"x-shapes-endEvent"
+      iconCls: 'button_small_ext ss_sprite ss_bpmn_endevent-18x18',
+      id:"x-shapes-endEvent",
+      text: ' ', 
+      width: 22
    },{
-      iconCls: 'button_large_ext ss_sprite ss_bpmn_gateway',//icon: '/skins/ext/images/gray/shapes/pallete/gateway.png',
-      id:"x-shapes-gateways"
+      iconCls: 'ss_sprite ss_bpmn_gateway-18x18',
+      id:"x-shapes-gateways",
+      text: ' ', 
+      width: 22
    },{
-      iconCls: 'button_large_ext ss_sprite ss_bpmn_annotation',//icon: '/skins/ext/images/gray/shapes/pallete/annotation.png',
-      id:"x-shapes-annotation"
+      iconCls: 'ss_sprite ss_bpmn_annotation-18x18',
+      id:"x-shapes-annotation",
+      text: ' ', 
+      width: 22
    }
  ]
 };

+
 actorsPanel = {
-  title: 'Actors',
-  html: '',
+  title: '&nbsp;',//_('ID_ACTORS'),
+  border: true,
+  xtype:'buttongroup',
+  defaultType: 'button',
+  cls: 'btn-panel-pmtoolbar',
+  columns: 1,
+  defaults: {
+    scale: 'small'
+  },
+  items : [
+    {
      iconCls: 'ICON_USERS',
-  border: false
+      id:"x-pm-users",
+      text: ' ', 
+      width: 22,
+      handler: function(){
+        usersActorsWin.show();
      }
+    },{
+      iconCls: 'ICON_GROUPS',
+      id:"x-pm-groups",
+      text: ' ', 
+      width: 22,
+      handler: function(){
+        groupsActorsWin.show();
+      }
+    },{
+      iconCls: 'icon-users-adhoc',
+      id:"x-pm-users-adhoc",
+      text: ' ', 
+      width: 22,
+      handler: function(){
+        
+      }
+    },{
+      iconCls: 'icon-groups-adhoc',
+      id:"x-pm-groups-adhoc",
+      text: ' ', 
+      width: 22,
+      handler: function(){
+        
+      }
+    }
+  ]
+};
        

 northPanelItems = [
@@ -91,7 +159,8 @@ northPanelItems = [
    text:'Edit',
    //iconCls: '',
    menu: new Ext.menu.Menu({
-      items: [{
+      items: [
+        {
          text: _('ID_SWITCH_EDITOR'),
          iconCls: 'ss_sprite ss_arrow_switch',
          handler: function() {
@@ -99,7 +168,14 @@ northPanelItems = [
              location.href = 'processes/processes_Map?PRO_UID=' +pro_uid+ '&rand=' +Math.random()
            }
          }
-      }]
+        }, {
+          text: _('ID_SNAP_GEOMETRY'),
+          checked: false, // when checked has a boolean value, it is assumed to be a CheckItem
+          checkHandler: function(item, checked){
+            workflow.setSnapToGeometry(checked);
+          }
+        }
+      ]
    })
  },
  {
@@ -150,7 +226,7 @@ northPanelItems = [
    })
  
  }, 
-  '->',
+  '-',
  {
    text:'Undo',
    iconCls: 'button_menu_ext ss_sprite ss_arrow_undo',
@@ -528,25 +604,23 @@ usersTaskStore = new Ext.data.GroupingStore( {
  });

    //connecting context menu  to grid
-  usersTaskGrid.addListener('rowcontextmenu', onDynaformsContextMenu,this);
+  usersTaskGrid.addListener('rowcontextmenu', function(grid, rowIndex, e){
+    e.stopEvent();
+    var coords = e.getXY();
+    usersTaskGridContextMenu.showAt([coords[0], coords[1]]);
+  });

  //by default the right click is not selecting the grid row over the mouse
  //we need to set this four lines
  usersTaskGrid.on('rowcontextmenu', function (grid, rowIndex, evt) {
    var sm = grid.getSelectionModel();
    sm.selectRow(rowIndex, sm.isSelected(rowIndex));
-  }, this);
+  });

  //prevent default
  usersTaskGrid.on('contextmenu', function (evt) {
      evt.preventDefault();
-  }, this);
-
-  onDynaformsContextMenu = function(grid, rowIndex, e) {
-    e.stopEvent();
-    var coords = e.getXY();
-    usersTaskGridContextMenu.showAt([coords[0], coords[1]]);
-  }
+  });

  usersTaskGridContextMenu = new Ext.menu.Menu({
    id: 'messageContextMenu',
@@ -659,11 +733,258 @@ usersTaskStore = new Ext.data.GroupingStore( {
    ]
  });

+  /*** for actors ***/
+  var usersStore = new Ext.data.Store({
+    autoLoad: true,
+    proxy : new Ext.data.HttpProxy({
+      url: 'processProxy/getUsers?start='+usersPanelStart+'&limit='+usersPanelLimit
+    }),
+    reader : new Ext.data.JsonReader( {
+      totalProperty: 'totalCount',
+      root: 'data',
+      fields : [
+        {name : 'USR_UID'},
+        {name : 'USER'},
+        {name : 'USR_USERNAME'},
+        {name : 'USR_FIRSTNAME'},
+        {name : 'USR_LASTNAME'}
+      ]
+    })
+  });
+
+  usersGrid = new Ext.grid.GridPanel({
+    id       : 'usersGrid',
+
+    height   : 180,
+    stateful : true,
+    stateId  : 'usersGrid',
+    ddGroup  : 'task-assignment',
+    enableDragDrop : true,
+    width: 150,
+    viewConfig : {
+      //forceFit : false
+    },
+    cm : new Ext.grid.ColumnModel({
+      defaults: {
+        width: 200,
+        sortable: true
+      },
+      columns : [
+        {header: 'USR_UID', id:'USR_UID', dataIndex: 'USR_UID', hidden:true, hideable:false},
+        {header: 'User', dataIndex: 'USER', width: 249, renderer:function(v,p,r){
+          return _FNF(r.data.USR_USERNAME, r.data.USR_FIRSTNAME, r.data.USR_LASTNAME);
+        }}
+      ]
+    }),
+    store: usersStore,
+    listeners: {
+      render: function(){
+        this.loadMask = new Ext.LoadMask(this.body, {msg:_('ID_LOADING')});
+      }
+    },
+    tbar : [
+      new Ext.form.TextField ({
+        id    : 'usersSearchTxt',
+        ctCls :'pm_search_text_field',
+        allowBlank : true,
+        width : 170,
+        emptyText : _('ID_ENTER_SEARCH_TERM'),
+        listeners : {
+          specialkey: function(f,e){
+            if (e.getKey() == e.ENTER)
+              usersSearch();
+          }
+        }
+      }), {
+        text    :'X',
+        ctCls   :'pm_search_x_button',
+        handler : function(){
+          usersStore.setBaseParam( 'search', '');
+          usersStore.load({params:{start : 0 , limit :  usersPanelLimit}});
+          Ext.getCmp('usersSearchTxt').setValue('');
+        }
+      }, {
+        text    :TRANSLATIONS.ID_SEARCH,
+        handler : usersSearch
+      }
+    ]
+    /*,
+    bbar: [new Ext.PagingToolbar({
+      pageSize   : usersPanelLimit,
+      store      : usersStore,
+      displayInfo: true,
+      displayMsg : '{2} Users',
+      emptyMsg   : ''
+    })]*/
+  });
+  
+  groupsStore = new Ext.data.Store( {
+    autoLoad: true,
+    proxy : new Ext.data.HttpProxy({
+      url: 'processProxy/getGroups?start='+usersPanelStart+'&limit='+usersPanelLimit
+    }),
+    reader : new Ext.data.JsonReader( {
+      totalProperty: 'totalCount',
+      root: 'data',
+      fields : [
+        {name : 'GRP_UID'},
+        {name : 'CON_VALUE'}
+      ]
+    })
+  });
+
+  groupsGrid = new Ext.grid.GridPanel({
+    id       : 'groupsGrid',
+    stateful : true,
+    stateId  : 'groupsGrid',
+    ddGroup  : 'task-assignment',
+    height   : 180,
+    width: 150,
+    enableDragDrop : true,
+    viewConfig : {
+      forceFit :false
+    },
+    cm : new Ext.grid.ColumnModel({
+      defaults : {
+        width    : 250,
+        sortable : true
+      },
+      columns: [
+        {id:'GRP_UID', dataIndex: 'GRP_UID', hidden:true, hideable:false},
+        {header: 'Group', dataIndex: 'CON_VALUE', width: 249}
+      ]
+    }),
+    store : groupsStore,
+    listeners : {
+      render : function(){
+        this.loadMask = new Ext.LoadMask(this.body, {msg:_('ID_LOADING')});
+      }
+    },
+    tbar : [
+      new Ext.form.TextField ({
+        id    : 'groupsSearchTxt',
+        ctCls :'pm_search_text_field',
+        allowBlank : true,
+        width : 170,
+        emptyText : _('ID_ENTER_SEARCH_TERM'),
+        listeners : {
+          specialkey: function(f,e){
+            if (e.getKey() == e.ENTER)
+              groupsSearch();
+          }
+        }
+      }), {
+        text    :'X',
+        ctCls   :'pm_search_x_button',
+        handler : function(){
+          groupsStore.setBaseParam( 'search', '');
+          groupsStore.load({params:{start : 0 , limit :  usersPanelLimit}});
+          Ext.getCmp('groupsSearchTxt').setValue('');
+        }
+      }, {
+        text    :TRANSLATIONS.ID_SEARCH,
+        handler : groupsSearch
+      }
+    ]/*,
+    bbar: [new Ext.PagingToolbar({
+      pageSize   : usersPanelLimit,
+      store      : groupsStore,
+      displayInfo: true,
+      displayMsg : '{2} Groups',
+      emptyMsg   : 'No records found'
+    })]*/
+  });
+  
+  _onDropActors = function(ddSource, e, data) {
+    
+    var records = ddSource.dragData.selections;
+    var uids = Array();
+    _TAS_UID = _targetTask.id;
+    _TU_TYPE = 1;
+    
+    Ext.each(records, function(gridRow){
+      if( data.grid.id == 'usersGrid' ) {//some users grid items were dropped    
+        _RELATION = 1;   
+        uids.push(gridRow.data.USR_UID);
+      } else { //some groups grid items were dropped
+        _RELATION = 2;
+        uids.push(gridRow.data.GRP_UID);
+      }
+    });
+
+    uids = uids.join(',');

    
+    Ext.getCmp('eastPanelCenter').setTitle(_('ID_TASK')+': '+_targetTask.name);
    
+    Ext.Ajax.request({
+      url: 'processProxy/assignActorsTask',
+      success: function(response){
+        var result = Ext.util.JSON.decode(response.responseText);
+        if( result.success ) {
+            PMExt.notify(_('ID_RESPONSABILITIES_ASSIGNMENT'), result.msg);
+          
+
+            Ext.getCmp('eastPanel').show();
+            Ext.getCmp('usersPanelTabs').getTabEl('usersTaskGrid').style.display = '';
+            Ext.getCmp('usersPanelTabs').getTabEl('usersTaskAdHocGrid').style.display = '';
+            Ext.getCmp('eastPanelTree').getNodeById(_TAS_UID).select();
+            if( _TU_TYPE == 1 ) {
+              Ext.getCmp('usersPanelTabs').setActiveTab(1);
+              Ext.getCmp('usersTaskGrid').store.reload({params:{tas_uid: _TAS_UID, tu_type: 1}});
+            } else {
+              Ext.getCmp('usersPanelTabs').setActiveTab(2);
+              Ext.getCmp('usersTaskAdHocGrid').store.reload({params:{tas_uid: _TAS_UID, tu_type: 2}});
+            }
+          
+        } else {
+          PMExt.error(_('ID_ERROR'), result.msg);
+        }
+      },
+      failure: function(){},
+      params: {
+        TAS_UID     : _TAS_UID,
+        TU_TYPE     : _TU_TYPE,
+        TU_RELATION : _RELATION,
+        UIDS        : uids
+      }
+    });
+  }
+
+
+   //last
+   usersActorsWin = new Ext.Window({
+      title: 'ACTORS - Users',
+      layout:'fit',
+      width:260, x:45, y:55,
+      height:PMExt.getBrowser().screen.height/2 - 20,
+      closeAction:'hide',
+      plain: true,
+      plugins: [ new Ext.ux.WindowCascade() ],
+      offset: 50,
+      items: [usersGrid]
+    });
+    
+    groupsActorsWin = new Ext.Window({
+      title: 'ACTORS - Groups',
+      layout:'fit',
+      width:260,
+      height:PMExt.getBrowser().screen.height/2 - 20,
+      closeAction:'hide',
+      plain: true,
+      plugins: [ new Ext.ux.WindowCascade() ],
+      offset: 50,
+      items: [groupsGrid]
+    });

 })
+
+
+
+//var groupsActorsWin;
+//var adhocUsersActorsWin;
+//var adHocGroupsActorsWin;
+
 //end onReady()


@@ -750,6 +1071,8 @@ function removeUsersAdHocTask(){
  //});
 }

+
+
 function usersSearch()
 {
  var search = Ext.getCmp('usersSearchTxt').getValue().trim();
@@ -771,3 +1094,33 @@ function removeUsersAdHocTask(){
  Ext.getCmp('groupsGrid').store.setBaseParam('search', search);
  Ext.getCmp('groupsGrid').store.load({params:{search: search, start : 0 , limit : usersPanelLimit }});
 }
+
+
+Ext.namespace('Ext.ux.plugins');
+Ext.ux.WindowCascade = Ext.extend(Object, {
+    constructor: function(offset) {
+    	this.offset = offset;
+    },
+
+    init: function(client) {
+    	client.beforeShow = Ext.Window.prototype.beforeShow.createInterceptor(this.beforeShow);
+    },
+
+    beforeShow: function() {
+    	if ((this.x == undefined) && (this.y == undefined)) {
+    	    var prev;
+    	    this.manager.each(function(w) {
+    	        if (w == this) {
+    	            if (prev) {
+    	            	var o = this.offset || 20;
+    	                var p = prev.getPosition();
+    	                this.x = p[0] + o;
+    	                this.y = p[1] + o;
+    	            }
+    	            return false;
+    	        }
+    	        if (w.isVisible()) prev = w;
+    	    }, this);
+    	}
+    }
+});
--- a/workflow/public_html/images/ToolUseGeometry.png
+++ b/workflow/public_html/images/ToolUseGeometry.png