<?xml version="1.0" encoding="ISO-8859-1" ?>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
<title>Process Flow Test</title>
|
|
<link rel="stylesheet" type="text/css" href="css/jquery-ui-lightness/jquery-ui-1.7.2.custom.css" />
|
|
<!-- Process Flow Library Styling Dependencies -->
|
<link rel="stylesheet" type="text/css" href="css/jquery.contextmenu.css"/>
|
<link rel="stylesheet" type="text/css" href="css/processFlow.css" />
|
|
<!-- Javascript Libraries -->
|
<!-- Required By the Process Flow Library -->
|
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
|
<script type="text/javascript" src="js/jquery/jquery.contextmenu.js"></script>
|
<script type="text/javascript" src="js/raphael/raphael.js"></script>
|
<script type="text/javascript" src="js/raphael/raphael.zoom.js"></script>
|
<script type="text/javascript" src="js/util/hashmap.js"></script>
|
<script type="text/javascript" src="js/util/array_util.js"></script>
|
<script type="text/javascript" src="js/util/arraylist.js"></script>
|
<script type="text/javascript" src="js/util/dracula_graph.js"></script>
|
<script type="text/javascript" src="js/jquery/jquery.qtip-1.0.0-rc3.custom.mtn.js"></script>
|
|
<!-- These are only used by the client page -->
|
<script type="text/javascript" src="js/jquery/jquery-ui-1.7.2.custom.mtn.js"></script>
|
<script type="text/javascript" src="js/jquery/jquery.metadata.js"></script>
|
|
|
<!-- Process Flow Library -->
|
<script type="text/javascript" src="js/custom/ProcessFlow.js"></script>
|
|
<!-- Test Data Structures -->
|
<script type="text/javascript" src="js/custom/FlowJSON.js"></script>
|
<script type="text/javascript" src="js/custom/editorProperties.js"></script>
|
<script type="text/javascript" src="js/custom/catalogueConfig.js"></script>
|
|
<script type="text/javascript">
|
var lastNodeId = 6;
|
var lastConnectionId = 5;
|
|
var $controlBarWrapper = null;
|
$controlBarWrapper = $('#controlBarWrapper');
|
|
$(document).ready(function(){
|
$(window).scroll(setFloatingElementPositions);
|
|
// -------------------------------------------
|
// Start - Process Flow Diagram Initialization
|
// -------------------------------------------
|
ProcessFlow.init({canvas : '.canvas', // The DOM element in which the flow elements will be drawn
|
node_items : flowNodes , // The definition of all flow items currrently in the diagram
|
node_item_values : nodeItemValues,
|
node_field_config : fieldConfig,
|
node_connections : nodeConnections, // The definition of all existing connections between flow items
|
node_connection_types : nodeConnectionTypes, // The list of supported connection types per node
|
connection_rules : connectionRules, // The list of supported connection targets per connection type
|
onNodeEdit : function(nodeId, nodeType){ // The function to be called when the user click the "Edit" link on the node context menu
|
ProcessFlow.showNodeEditDialog('Node', nodeId, nodeType);
|
},
|
onConnectionEdit : function(nodeId, nodeType){ // The function to be called when the user clicks on the "Edit" link on the connection context menu
|
ProcessFlow.showNodeEditDialog('Connection', nodeId, nodeType);
|
},
|
connectionIdFactory : getNewConnectionId // The function used to generate IDs for new connections
|
});
|
|
// -------------------------------------------
|
// End - Process Flow Diagram Initialization
|
// -------------------------------------------
|
|
|
// Show Dialogs
|
$(".dialog").dialog({ autoOpen: true, minHeight: 250, minWidth: 200, height: 400});
|
$('.catalogueItem').draggable({helper : 'clone', 'appendTo': '.canvas', containment : '.canvas', opacity : 0.7});
|
$(".canvas").droppable({ accept: '.catalogueItem',
|
drop :
|
function(event, ui){
|
var itemMeta = $(ui.draggable).metadata();
|
var shape = null;
|
var newNode = null;
|
|
var thisOffset = $(this).offset();
|
|
if(itemMeta.shape.type == 'circle'){
|
shape = ProcessFlow.createCircle(itemMeta.shape.entity_id, event.pageX - thisOffset.left, event.pageY - thisOffset.top,itemMeta.shape.radius,
|
itemMeta.shape.border_color, itemMeta.shape.border_width, itemMeta.shape.fill);
|
}else if (itemMeta.shape.type == 'rect'){
|
shape = ProcessFlow.createRect(itemMeta.shape.entity_id, event.pageX - thisOffset.left, event.pageY - thisOffset.top,itemMeta.shape.width, itemMeta.shape.height, itemMeta.shape.border_radius,
|
itemMeta.shape.border_color, itemMeta.shape.border_width, itemMeta.shape.fill);
|
}
|
// Application should fire ajax request here to get a new ID for this object
|
var id = getNewNodeId();
|
var newNode = ProcessFlow.createNode(id, null, itemMeta.type, itemMeta.label, itemMeta.icon, shape);
|
ProcessFlow.addNode(newNode);
|
console.log(ProcessFlow.getNodeById(id));
|
ProcessFlow.selectOnlyNode(ProcessFlow.getNodeById(id))
|
}
|
});
|
|
// Initialize the catalogue Items
|
ProcessFlow.initCatalogueItems('#itemCatalogue', catalogueConfig, 2);
|
|
// Intialize the toolbar
|
initToolbar();
|
|
// Initialize the Node edit dialog
|
$('#nodeEditDialog').dialog({ autoOpen : false, modal : true});
|
|
});
|
|
// Generate a new connection ID
|
// This will typical be an Ajax request to the server
|
function getNewConnectionId(){
|
return lastConnectionId++;
|
}
|
|
// Generate a new node ID
|
// This will typical be an Ajax request to the server
|
function getNewNodeId(){
|
return lastNodeId++;
|
}
|
|
//Intialize the toolbar actions
|
var currentZoom = 1;
|
function initToolbar(){
|
// Reset Process flow actions
|
$('#cursorPointerBtn').click(function(){
|
ProcessFlow.stopItemBlockSelection();
|
});
|
|
// Block Selection Button
|
$('#blockSelBtn').click(function(){
|
ProcessFlow.startItemBlockSelection();
|
});
|
|
// Alignment Buttons
|
$('#alignLeftBtn').click(function(){
|
ProcessFlow.alignNodes('left');
|
});
|
$('#alignTopBtn').click(function(){
|
ProcessFlow.alignNodes('top');
|
});
|
$('#alignRightBtn').click(function(){
|
ProcessFlow.alignNodes('right');
|
});
|
$('#alignBottomBtn').click(function(){
|
ProcessFlow.alignNodes('bottom');
|
});
|
$('#alignMiddleBtn').click(function(){
|
ProcessFlow.alignNodes('middle');
|
});
|
$('#alignCenterBtn').click(function(){
|
ProcessFlow.alignNodes('center');
|
});
|
|
// Connection Router Modification Buttons
|
$('#straightRouteBtn').click(function(){
|
ProcessFlow.setConnectionRoutingType('straight');
|
});
|
$('#manhattanRouteBtn').click(function(){
|
ProcessFlow.setConnectionRoutingType('manhattan');
|
});
|
|
// Auto Layout Button
|
$('#springLayoutBtn').click(function(){
|
ProcessFlow.layoutSpring();
|
});
|
|
$('#directedLayoutBtn').click(function(){
|
ProcessFlow.layoutDirected();
|
});
|
|
// Canvas Sizing Buttons
|
$('#decreasePageSizeBtn').click(function(){
|
ProcessFlow.scaleCanvas(false, 0.1);
|
});
|
$('#increasePageSizeBtn').click(function(){
|
ProcessFlow.scaleCanvas(true, 0.1);
|
});
|
$('#dynamicPageSizeBtn').click(function(){
|
ProcessFlow.scaleCanvasDynamic();
|
});
|
|
$('#zoomInBtn').click(function(){
|
currentZoom += 0.1;
|
ProcessFlow.setZoomLevel(currentZoom);
|
});
|
|
$('#zoomOutBtn').click(function(){
|
currentZoom -= 0.1;
|
ProcessFlow.setZoomLevel(currentZoom);
|
});
|
|
$('#apiTestBtn').click(function(){
|
ProcessFlow.setNodeProperties(3, {label : "New Label"});
|
});
|
|
// Node Delete Button
|
$('#delBtn').click(function(){
|
ProcessFlow.deleteSelectedNodes();
|
});
|
|
// SAVE Button
|
$('#saveButton').click(function(){
|
var currentState = ProcessFlow.getCurrentStateJSON();
|
console.log(currentState);
|
console.log('Nodes');
|
for(i = 0; i < currentState.nodes.length; i++){
|
console.log('Node ID: ' + currentState.nodes[i].id + ', Label: ' + currentState.nodes[i].label);
|
}
|
|
console.log('Connections');
|
for(i = 0; i < currentState.connections.length; i++){
|
console.log('Conn ID: ' + currentState.connections[i].id + ', From NodeID: ' + currentState.connections[i].from_node_id + ', To NodeID: ' + currentState.connections[i].to_node_id);
|
}
|
});
|
}
|
|
// Make sure that absolutely positioned elements stay in position
|
// when the canvas size is increased.
|
function setFloatingElementPositions(){
|
$controlBarWrapper.css({'top' : $(this).scrollTop(), 'left' : $(this).scrollLeft()});
|
}
|
|
// Initialize the catalogue item functionality
|
function initCatalogueItems(){
|
$('.catalogueItem').each(function(){
|
var nodeItemMeta = $(this).metadata();
|
var paper = Raphael($(this)[0], $(this).width(), $(this).height());
|
|
if(nodeItemMeta.shape.type == 'circle'){
|
var circleXYR = ($(this).height() / 2);
|
paper.circle(circleXYR, circleXYR, circleXYR - 2).attr({fill : nodeItemMeta.shape.fill});
|
}else if(nodeItemMeta.shape.type == 'rect'){
|
paper.rect(1, 1, $(this).width() - 2,$(this).height() - 2, 5).attr({fill : nodeItemMeta.shape.fill});
|
}
|
});
|
|
}
|
|
</script>
|
|
<style type="text/css">
|
.catalogueItem {
|
width: 50px;
|
height: 50px;
|
padding: 4px;
|
}
|
.ui-draggable-dragging{
|
z-index: 1020;
|
}
|
|
.toolBar {
|
vertical-align: middle;
|
border-bottom: 1px solid black;
|
}
|
|
html, body{
|
width: 100%;
|
height: 100%;
|
background-color: #f0f0f0;
|
}
|
|
.canvas {
|
width: 1024px;
|
height: 768px;
|
border: 1px dotted black;
|
}
|
</style>
|
|
</head>
|
<body>
|
<div class="controlBarWrapper">
|
<div class="titlebar">MTN FACTS</div>
|
<div class="toolBar">
|
<button id="cursorPointerBtn" class="toolBarButton">
|
<img src="images/16x16_cursor.png"></img>
|
</button>
|
<button id="blockSelBtn" class="toolBarButton">
|
<img src="images/16x16_block_sel.png"></img>
|
</button>
|
<span> | </span>
|
<button id="alignLeftBtn" class="toolBarButton">
|
<img src="images/16x16_shape_align_left.png"></img>
|
</button>
|
<button id="alignTopBtn" class="toolBarButton">
|
<img src="images/16x16_shape_align_top.png"></img>
|
</button>
|
<button id="alignRightBtn" class="toolBarButton">
|
<img src="images/16x16_shape_align_right.png"></img>
|
</button>
|
<button id="alignBottomBtn" class="toolBarButton">
|
<img src="images/16x16_shape_align_bottom.png"></img>
|
</button>
|
<button id="alignCenterBtn" class="toolBarButton">
|
<img src="images/16x16_shape_align_center.png"></img>
|
</button>
|
<button id="alignMiddleBtn" class="toolBarButton">
|
<img src="images/16x16_shape_align_middle.png"></img>
|
</button>
|
<span> | </span>
|
<button id="straightRouteBtn" class="toolBarButton">
|
<img src="images/16x16_straightline.png"></img>
|
</button>
|
<button id="manhattanRouteBtn" class="toolBarButton">
|
<img src="images/16x16_manhattan.png"></img>
|
</button>
|
<span> | </span>
|
<button id="increasePageSizeBtn" class="toolBarButton">
|
<img src="images/16x16_scaleout.png"></img>
|
</button>
|
<button id="decreasePageSizeBtn" class="toolBarButton">
|
<img src="images/16x16_scalein.png"></img>
|
</button>
|
<button id="dynamicPageSizeBtn" class="toolBarButton">
|
<img src="images/16x16_scalein.png" title="Scale Canvas"></img>
|
</button>
|
<button id="springLayoutBtn" class="toolBarButton" title="layout">
|
<img src="images/16x16_layout.png" title="Apply Spring Layout"></img>
|
</button>
|
<button id="directedLayoutBtn" class="toolBarButton" title="layout">
|
<img src="images/16x16_layout.png" title="Apply Directed Layout"></img>
|
</button>
|
<span> | </span>
|
<button id="zoomInBtn" class="toolBarButton">
|
<img src="images/16x16_zoom_in.png" title="Zoom In"></img>
|
</button>
|
<button id="zoomOutBtn" class="toolBarButton">
|
<img src="images/16x16_zoom_out.png" title="Zoom Out"></img>
|
</button>
|
<span> | </span>
|
<button id="delBtn" class="toolBarButton">
|
<img src="images/16x16_delete.png"></img>
|
</button>
|
<button id="saveButton" class="toolBarButton">
|
<img src="images/16x16_save.png"></img>
|
</button>
|
</div>
|
</div>
|
|
<div class="canvas-wrapper">
|
<div class="canvas">
|
|
</div>
|
</div>
|
|
<div id="itemCatalogue" title="Flow Item Catalogue">
|
</div>
|
|
<div id="nodeEditDialog" title="Node Edit Dialog">
|
</div>
|
</body>
|
</html>
|
