This document discusses building workflow applications using Ext JS. It describes how a workflow application uses a graphical designer to visually represent business processes. The backend uses Activiti software to execute workflows, while the frontend uses Ext JS and its Draw package to build the graphical designer interface. Key aspects covered include implementing the data model and store, adding selection and drag/drop capabilities, and defining basic and composite elements to represent different workflow steps.
18. onItemSelect: function(record){
var sprite = this.findSprite(record);
sprite.setAttributes({
selected: true
});
}
getRegion: function(){
var bbox = this.getBBox();
var top = bbox.x;
var right = bbox.x + bbox.width;
var bottom = bbox.y + bbox.height;
var left = bbox.y;
return Ext.create('Ext.util.Region', top, right, bottom, left);
}
• Select
o Simple selection
o Multi selection
o Region selection
• Deselect
• Deselect all
Selection model
Implementation
22. config: {
gestures: {
minDistance: 2,
dragstart: 'onDragStart',
drag: 'onDrag',
dragend: 'onDragEnd'
}
}
• Start drag
• Drag element
• End drag
Implementation
Drag & drop plugin
23. onDragStart: function(e){
var draw = this.getDraw();
var sprite = draw.getItemFromEvent(e);
var ghost = sprite.ghost;
var surface = draw.getSurface();
var xy = surface.getEventXY(e);
this.startX = xy[0];
this.startY = xy[1];
this.translationX = sprite.attr.translationX;
this.translationY = sprite.attr.translationY;
ghost = Ext.apply(ghost, {
translationX: this.translationX,
translationY: this.translationY
});
surface.add(ghost);
surface.renderFrame();
}
• Ghost element
• Start position
Start drag
Implementation
24. onDrag: function(e){
var draw = this.getDraw();
var surface = draw.getSurface();
var xy = surface.getEventXY(e);
var deltaX = xy[0] - this.startX;
var deltaY = xy[1] - this.startY;
var positionX = this.translationX + deltaX;
var positionY = this.translationY + deltaY;
this.ghost.setAttributes({
translationX: positionX,
translationY: positionY
});
surface.renderFrame();
}
Implementation
Drag
• Move vs translate
25. onDragEnd: function(e){
var draw = this.getDraw();
var item = draw.getItemFromEvent(e);
var surface = draw.getSurface();
var translation = this.getRulerSnapPosition();
item.record.set(translation);
this.ghost.destroy(true);
delete this.ghost;
surface.renderFrame();
}
Implementation
End drag
• Snap to position
• Set new coordinates
26. updateViewBox: function(x, y){
var draw = this.getDraw();
var surface = draw.getSurface();
var viewBox = surface.getViewBox();
var updatedViewBox = [
(0 - x),
(0 - y),
viewBox.width,
viewBox.height
].join();
surface.setViewBox(updatedViewBox);
}
Implementation
Pan plugin
• Draw surface
• ViewBox