improvements to bpmn designer

This commit is contained in:
Erik Amaru Ortiz
2011-02-07 23:12:38 +00:00
parent 0f65a9ecf2
commit 1e80db786c
10 changed files with 381 additions and 279 deletions

View File

@@ -0,0 +1,222 @@
/*#x-basicshapes li {
background-image:url('/skins/ext/images/gray/shapes/basic-shapes.png');
background-repeat:no-repeat;
margin-left:25px;
}
#x-shapes-text {background-position:1px 0px;height: 30px}
#x-shapes-task1 {background-position:1px -30px;height: 30px}
#x-shapes-loop {background-position:1px -63px;height: 30px}
#x-shapes-flow {background-position:1px -94px;height: 30px}
#x-shapes-group {background-position:1px -124px;height: 30px}
#x-shapes-loopsub {background-position:1px -153px;height: 30px}
#x-shapes-assoc {background-position:1px -184px;height: 30px}
#x-shapes-msgconn {background-position:1px -124px;height: 30px}
#x-shapes-lane {background-position:1px -239px;height: 30px}
#x-shapes-dataObject {background-position:1px -273px;height: 30px}
#x-event-shapes li {
background-image:url('/skins/ext/images/gray/shapes/events.png');
background-repeat:no-repeat;
margin-left:11px;
}
#x-shapes-event-empty {background-position:1px 0px;height: 35px}
#x-shapes-event-msgstart {background-position:1px -42px;height: 35px}
#x-shapes-event-rule {background-position:1px -80px;height: 35px}
#x-shapes-event-timerstart {background-position:1px -120px;height: 35px}
#x-shapes-event-sigstart {background-position:1px -161px;height: 35px}
#x-shapes-event-mulstart {background-position:1px -202px;height: 35px}
#x-shapes-event-linkstart {background-position:1px -242px;height: 35px}
#x-shapes-event-emptyinter {background-position:1px -283px;height: 35px}
#x-shapes-event-msgconn {background-position:1px -323px;height: 35px}
#x-shapes-event-timerinter {background-position:1px -364px;height: 35px}
#x-shapes-event-errorinter {background-position:1px -405px;height: 35px}
#x-shapes-event-compinter {background-position:1px -445px;height: 35px}
#x-shapes-event-ruleinter {background-position:1px -486px;height: 35px}
#x-shapes-event-caninter {background-position:1px -526px;height: 35px}
#x-shapes-event-intersig {background-position:1px -565px;height: 35px}
#x-shapes-event-mulinter {background-position:1px -607px;height: 35px}
#x-shapes-event-linkinter {background-position:1px -646px;height: 35px}
#x-shapes-event-emptyend {background-position:1px -688px;height: 35px}
#x-shapes-event-messageend {background-position:1px -726px;height: 35px}
#x-shapes-event-errorend {background-position:1px -766px;height: 35px}
#x-shapes-event-compend {background-position:1px -805px;height: 35px}
#x-shapes-event-terminate {background-position:1px -844px;height: 35px}
#x-shapes-event-endsignal {background-position:1px -884px;height: 35px}
#x-shapes-event-multipleend {background-position:1px -922px;height: 35px}
#x-shapes-event-cancelend {background-position:1px -963px;height: 35px}
#x-shapes-event-linkend {background-position:1px -1000px;height: 35px}
#x-gateways-shapes li {
background-image:url('/skins/ext/images/gray/shapes/gateways.png');
background-repeat:no-repeat;
margin-left:9px;
}
#x-shapes-gateways-exc-data {background-position:1px -1px; height: 55px;}
#x-shapes-gateways-exc-event {background-position:1px -60px; height: 55px}
#x-shapes-gateways-inc-data {background-position:1px -120px; height: 55px}
#x-shapes-gateways-parallel {background-position:1px -180px; height: 55px}
#x-shapes-gateways-complex {background-position:1px -240px; height: 55px}
#x-shapes li {
background-image:url('/skins/ext/images/gray/shapes/shapes.png');
background-repeat:no-repeat;
margin-left:9px;
}
#x-shapes-task {background-position:5px -3px; height: 30px;}
#x-shapes-startEvent {background-position:5px -34px; height: 30px}
#x-shapes-interEvent {background-position:5px -64px; height: 30px}
#x-shapes-endEvent {background-position:5px -95px; height: 30px}
#x-shapes-gateways {background-position:5px -127px; height: 30px}
*/
#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:2 2 2 2;
}
#x-shapes-startEvent {
width:38px;
height:38px;
/* background-image:url('/skins/ext/images/gray/shapes/pallete/startevent.png');*/
margin:2 2 2 2;
}
#x-shapes-interEvent {
width:38px;
height:38px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/interevent.png');*/
margin:2 2 2 2;
}
#x-shapes-endEvent {
width:38px;
height:38px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/endevent.png');*/
margin:2 2 2 2;
}
#x-shapes-gateway {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-dataobject {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:0 2 2 2;
}
#x-shapes-group {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:4 2 2 2;
}
#x-shapes-annotation {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:5 2 2 2;
}
#x-shapes-pool {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-lane {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-milestone {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-sequence {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-association {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-message {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
.toolbar-item{
display: table-cell;
background-color:#fff;
width : 50px !important;
height: 25px !important;
border: 1px;
border-style: solid;
border-color: #ccc;
font-size: 12px;
padding: 1px 1px 1px 1px;
-moz-border-radius: 7px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 7px;
vertical-align: middle !important;
text-align:center;
}
#x-shapes p:hover {
border-left: 1px solid #808080;
border-top: 1px solid #808080;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #EFEFEF;
border-color: #98bf21;
}

View File

@@ -42,14 +42,6 @@ Ext.onReady ( function() {
*
**********************************************************************************/
var west= {
/*xtype :"panel",
title: 'Palette',
region: 'west',
split: false,
width: 75,
collapsible: false,
margins:'3 0 3 3',
cmargins:'3 3 3 3',*/
id : 'palette',
title : 'Palette',
region : 'west',
@@ -79,7 +71,6 @@ Ext.onReady ( function() {
};
var east= {
id : 'eastPanel',
title : '',
region : 'east',
@@ -131,21 +122,13 @@ Ext.onReady ( function() {
};
var center= {
id: 'centerRegion',
width:100,
height:2000,
xtype : "panel",
//autoScroll:true,
fitToFrame:true,
region : "center"
//bodyStyle: 'background-color:red; overflow:scroll; height:3000px',
/*bodyCfg: {
tag: 'div',
cls: 'x-panel-body', // Default class not applied if Custom element specified
style: 'height:3000; overflow:scroll;',
html: 'Message'
},*/
};
var processObj = new ProcessOptions();
@@ -157,9 +140,79 @@ Ext.onReady ( function() {
autoScroll: true,
height : 1000,
width : 1300,
items : [west, north, center]
//items : [west, north, center]
items : [north, center]
});
var designaerToolbar = new Ext.Window({
id: 'designaerToolbar',
title: '<center>Toolbar</center>',
titleAlign: 'center',
width: 320,
height:70,
x: 0,
y: 0,
minimizable: false,
closable: false,
resizable: false,
plugin: new Ext.ux.WindowAlwaysOnTop,
html: '<div id="x-shapes">\n\
<p id="x-shapes-task" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/task.png"/></p>\n\
<p id="x-shapes-startEvent" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/startevent.png"/></p>\n\
<p id="x-shapes-interEvent" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/interevent.png"/></p>\n\
<p id="x-shapes-endEvent" title="" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/endevent.png"/></p>\n\
<p id="x-shapes-gateways" title="" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/gateway.png"/><br/></p>\n\
<p id="x-shapes-annotation" title="" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/annotation.png"/></p>\n\
<!--<p id="x-shapes-group" title="Group"><img src= "/skins/ext/images/gray/shapes/pallete/group.png"/></p>\n\
<p id="x-shapes-dataobject" title="Data Object" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/dataobject.png"/></p>\n\
<p id="x-shapes-pool" title="Pool" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/pool.png"/></p>\n\
<p id="x-shapes-lane" title="Lane" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/lane.png"/></p>\n\
<p id="x-shapes-milestone" title="Milestone" class="toolbar-item"><img src= "/skins/ext/images/gray/shapes/pallete/milestone.png"/></p>-->\n\
</div>'
});
designaerToolbar.show();
new Ext.ToolTip({
target: 'x-shapes-task',
anchor: 'right',
trackMouse: true,
html: 'Task'
});
new Ext.ToolTip({
target: 'x-shapes-startEvent',
anchor: 'right',
trackMouse: true,
html: 'Start'
});
new Ext.ToolTip({
target: 'x-shapes-interEvent',
anchor: 'right',
trackMouse: true,
html: 'Intermediate Event'
});
new Ext.ToolTip({
target: 'x-shapes-endEvent',
anchor: 'right',
trackMouse: true,
html: 'End Event'
});
new Ext.ToolTip({
target: 'x-shapes-gateways',
anchor: 'right',
trackMouse: true,
html: 'Gateway'
});
new Ext.ToolTip({
target: 'x-shapes-annotation',
anchor: 'right',
trackMouse: true,
html: 'Annotation'
});
//Getting Process name and setting Title of center region to that processname
/*var urlparams = '?action=load&data={"uid":"'+ pro_uid +'"}';
Ext.Ajax.request({
@@ -176,7 +229,7 @@ Ext.onReady ( function() {
//Get main into workflow object
workflow.main = main;
//items[3]=>'center region'
var centerRegionId = main.items.items[2].body.id;
var centerRegionId = Ext.getCmp('centerRegion').body.id;
canvas = Ext.get(centerRegionId);
//Context Menu of ProcessMap
@@ -806,3 +859,12 @@ Ext.onReady ( function() {
});
Ext.ux.WindowAlwaysOnTop = function(){
this.init = function(win){
win.on('deactivate', function(){
var i=1;
this.manager.each(function(){i++});
this.setZIndex(this.manager.zseed + (i*10));
})
}
}

View File

@@ -135,7 +135,7 @@ Ext.onReady ( function() {
frameConfig:{name:'designerFrame', id:'designerFrame'},
defaultSrc : 'designer?PRO_UID=' + pro_uid,
loadMask:{msg:'Loading...'},
bodyStyle:{height: (_BROWSER.screen.height-55) + 'px', overflow:'scroll'},
bodyStyle:{height: (_BROWSER.screen.height-55) + 'px'},
width:'1024px'
};

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -1,185 +1,3 @@
/*#x-basicshapes li {
background-image:url('/skins/ext/images/gray/shapes/basic-shapes.png');
background-repeat:no-repeat;
margin-left:25px;
}
#x-shapes-text {background-position:1px 0px;height: 30px}
#x-shapes-task1 {background-position:1px -30px;height: 30px}
#x-shapes-loop {background-position:1px -63px;height: 30px}
#x-shapes-flow {background-position:1px -94px;height: 30px}
#x-shapes-group {background-position:1px -124px;height: 30px}
#x-shapes-loopsub {background-position:1px -153px;height: 30px}
#x-shapes-assoc {background-position:1px -184px;height: 30px}
#x-shapes-msgconn {background-position:1px -124px;height: 30px}
#x-shapes-lane {background-position:1px -239px;height: 30px}
#x-shapes-dataObject {background-position:1px -273px;height: 30px}
#x-event-shapes li {
background-image:url('/skins/ext/images/gray/shapes/events.png');
background-repeat:no-repeat;
margin-left:11px;
}
#x-shapes-event-empty {background-position:1px 0px;height: 35px}
#x-shapes-event-msgstart {background-position:1px -42px;height: 35px}
#x-shapes-event-rule {background-position:1px -80px;height: 35px}
#x-shapes-event-timerstart {background-position:1px -120px;height: 35px}
#x-shapes-event-sigstart {background-position:1px -161px;height: 35px}
#x-shapes-event-mulstart {background-position:1px -202px;height: 35px}
#x-shapes-event-linkstart {background-position:1px -242px;height: 35px}
#x-shapes-event-emptyinter {background-position:1px -283px;height: 35px}
#x-shapes-event-msgconn {background-position:1px -323px;height: 35px}
#x-shapes-event-timerinter {background-position:1px -364px;height: 35px}
#x-shapes-event-errorinter {background-position:1px -405px;height: 35px}
#x-shapes-event-compinter {background-position:1px -445px;height: 35px}
#x-shapes-event-ruleinter {background-position:1px -486px;height: 35px}
#x-shapes-event-caninter {background-position:1px -526px;height: 35px}
#x-shapes-event-intersig {background-position:1px -565px;height: 35px}
#x-shapes-event-mulinter {background-position:1px -607px;height: 35px}
#x-shapes-event-linkinter {background-position:1px -646px;height: 35px}
#x-shapes-event-emptyend {background-position:1px -688px;height: 35px}
#x-shapes-event-messageend {background-position:1px -726px;height: 35px}
#x-shapes-event-errorend {background-position:1px -766px;height: 35px}
#x-shapes-event-compend {background-position:1px -805px;height: 35px}
#x-shapes-event-terminate {background-position:1px -844px;height: 35px}
#x-shapes-event-endsignal {background-position:1px -884px;height: 35px}
#x-shapes-event-multipleend {background-position:1px -922px;height: 35px}
#x-shapes-event-cancelend {background-position:1px -963px;height: 35px}
#x-shapes-event-linkend {background-position:1px -1000px;height: 35px}
#x-gateways-shapes li {
background-image:url('/skins/ext/images/gray/shapes/gateways.png');
background-repeat:no-repeat;
margin-left:9px;
}
#x-shapes-gateways-exc-data {background-position:1px -1px; height: 55px;}
#x-shapes-gateways-exc-event {background-position:1px -60px; height: 55px}
#x-shapes-gateways-inc-data {background-position:1px -120px; height: 55px}
#x-shapes-gateways-parallel {background-position:1px -180px; height: 55px}
#x-shapes-gateways-complex {background-position:1px -240px; height: 55px}
#x-shapes li {
background-image:url('/skins/ext/images/gray/shapes/shapes.png');
background-repeat:no-repeat;
margin-left:9px;
}
#x-shapes-task {background-position:5px -3px; height: 30px;}
#x-shapes-startEvent {background-position:5px -34px; height: 30px}
#x-shapes-interEvent {background-position:5px -64px; height: 30px}
#x-shapes-endEvent {background-position:5px -95px; height: 30px}
#x-shapes-gateways {background-position:5px -127px; height: 30px}
*/
#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:2 2 2 2;
}
#x-shapes-startEvent {
width:38px;
height:38px;
/* background-image:url('/skins/ext/images/gray/shapes/pallete/startevent.png');*/
margin:2 2 2 2;
}
#x-shapes-interEvent {
width:38px;
height:38px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/interevent.png');*/
margin:2 2 2 2;
}
#x-shapes-endEvent {
width:38px;
height:38px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/endevent.png');*/
margin:2 2 2 2;
}
#x-shapes-gateway {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-dataobject {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:0 2 2 2;
}
#x-shapes-group {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:4 2 2 2;
}
#x-shapes-annotation {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:5 2 2 2;
}
#x-shapes-pool {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-lane {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-milestone {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-sequence {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-association {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
#x-shapes-message {
width:36px;
height:36px;
/*background-image:url('/skins/ext/images/gray/shapes/pallete/gateway.png') ;*/
margin:2 2 2 2;
}
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.