0.3.12
This commit is contained in:
Garrett K
parent
bc21dae866
commit
72325a1aac
@ -1,251 +1,286 @@
|
||||
// ### Cabinet Functions ###
|
||||
function crawlCabinetConnections(selectedPort){
|
||||
var portArray = [];
|
||||
var connectionArray = [];
|
||||
var trunkArray = [];
|
||||
var partitionArray = [];
|
||||
var selectedPeerID = $(selectedPort).data('peerGlobalId');
|
||||
var selectedPortOrig = selectedPort;
|
||||
|
||||
for(x=0; x<2; x++) {
|
||||
|
||||
if(x == 1) {
|
||||
|
||||
// Crawl trunk peer
|
||||
var selectedPartition = $(selectedPortOrig).closest('.partition');
|
||||
var selectedPartitionPeerID = $(selectedPartition).data('peerGlobalId');
|
||||
|
||||
if($('#'+selectedPartitionPeerID).length) {
|
||||
var selectedPartitionPeer = $('#'+selectedPartitionPeerID);
|
||||
trunkArray.push([selectedPartition, selectedPartitionPeer]);
|
||||
partitionArray.push(selectedPartition, selectedPartitionPeer);
|
||||
|
||||
var selectedPartitionPeerIDArray = selectedPartitionPeerID.split('-');
|
||||
var peerID = selectedPartitionPeerIDArray[2];
|
||||
var peerFace = selectedPartitionPeerIDArray[3];
|
||||
var peerDepth = selectedPartitionPeerIDArray[4];
|
||||
var peerPort = $(selectedPortOrig).data('portIndex');
|
||||
|
||||
var selectedPort = $('#port-4-'+peerID+'-'+peerFace+'-'+peerDepth+'-'+peerPort);
|
||||
} else {
|
||||
if(selectedPartitionPeerID != 'none') {
|
||||
trunkArray.push([selectedPartition, selectedPartitionPeerID]);
|
||||
}
|
||||
var selectedPort = false;
|
||||
}
|
||||
}
|
||||
|
||||
while($(selectedPort).length) {
|
||||
portArray.push(selectedPort);
|
||||
|
||||
// Crawl connection peer
|
||||
var connectedPortIDString = $(selectedPort).data('connectedGlobalId');
|
||||
var connectedPortIDArray = JSON.parse(atob(connectedPortIDString));
|
||||
|
||||
if(connectedPortIDArray.length) {
|
||||
var peerPortFound = false;
|
||||
$.each(connectedPortIDArray, function(index, connectedPortID){
|
||||
var connectedPort = $('#'+connectedPortID);
|
||||
if($(connectedPort).length) {
|
||||
|
||||
portArray.push(connectedPort)
|
||||
connectionArray.push([selectedPort, connectedPort]);
|
||||
|
||||
var connectedPartition = $(connectedPort).closest('.partition');
|
||||
var connectedPartitionPeerID = $(connectedPartition).data('peerGlobalId');
|
||||
|
||||
if($('#'+connectedPartitionPeerID).length) {
|
||||
|
||||
var connectedPartitionPeer = $('#'+connectedPartitionPeerID);
|
||||
trunkArray.push([connectedPartition, connectedPartitionPeer]);
|
||||
partitionArray.push(connectedPartition, connectedPartitionPeer);
|
||||
|
||||
var connectedPartitionPeerIDArray = connectedPartitionPeerID.split('-');
|
||||
var peerID = connectedPartitionPeerIDArray[2];
|
||||
var peerFace = connectedPartitionPeerIDArray[3];
|
||||
var peerDepth = connectedPartitionPeerIDArray[4];
|
||||
|
||||
var connectedPortIDArray = connectedPortID.split('-');
|
||||
var peerPort = connectedPortIDArray[5];
|
||||
selectedPort = $('#port-4-'+peerID+'-'+peerFace+'-'+peerDepth+'-'+peerPort);
|
||||
peerPortFound = true;
|
||||
} else {
|
||||
if(connectedPartitionPeerID != 'none') {
|
||||
trunkArray.push([connectedPartition, connectedPartitionPeerID]);
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
connectionArray.push([selectedPort, connectedPortID]);
|
||||
}
|
||||
});
|
||||
if(peerPortFound == false) {
|
||||
selectedPort = false;
|
||||
}
|
||||
} else {
|
||||
selectedPort = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
'partitionArray': partitionArray,
|
||||
'trunkArray': trunkArray,
|
||||
'portArray': portArray,
|
||||
'connectionArray': connectionArray
|
||||
};
|
||||
function drawCabinet(){
|
||||
console.log('drawCabinet');
|
||||
resizeCanvas();
|
||||
clearCabinetConnections();
|
||||
crawlCabinet();
|
||||
drawCabinetConnections();
|
||||
drawCabinetTrunks();
|
||||
}
|
||||
|
||||
function drawCabinetConnections(elementArray){
|
||||
function crawlCabinet(){
|
||||
console.log('crawlCabinet');
|
||||
var pathSourceArray = {
|
||||
'selected': $(document).data('selectedPort'),
|
||||
'hovered': $(document).data('hoveredPort')
|
||||
};
|
||||
|
||||
var sourceTypeMap = {
|
||||
'selected': ['cabinetSelectedConnections', 'cabinetSelectedTrunks'],
|
||||
'hovered': ['cabinetHoveredConnections', 'cabinetHoveredTrunks']
|
||||
}
|
||||
|
||||
$.each(pathSourceArray, function(pathSourceType, pathSource){
|
||||
var connectionArray = [];
|
||||
var trunkArray = [];
|
||||
|
||||
if(pathSource !== undefined && pathSource !== false) {
|
||||
var selectedPort = $(pathSource);
|
||||
|
||||
for(x=0; x<2; x++) {
|
||||
if(x == 1) {
|
||||
// Crawl trunk peer
|
||||
var selectedPartition = $(pathSource).closest('.partition');
|
||||
var selectedPartitionPeerID = $(selectedPartition).data('peerGlobalId');
|
||||
|
||||
if($('#'+selectedPartitionPeerID).length) {
|
||||
var selectedPartitionPeer = $('#'+selectedPartitionPeerID);
|
||||
trunkArray.push([selectedPartition, selectedPartitionPeer]);
|
||||
//partitionArray.push(selectedPartition, selectedPartitionPeer);
|
||||
|
||||
var selectedPartitionPeerIDArray = selectedPartitionPeerID.split('-');
|
||||
var peerID = selectedPartitionPeerIDArray[2];
|
||||
var peerFace = selectedPartitionPeerIDArray[3];
|
||||
var peerDepth = selectedPartitionPeerIDArray[4];
|
||||
var peerPort = $(pathSource).data('portIndex');
|
||||
|
||||
var selectedPort = $('#port-4-'+peerID+'-'+peerFace+'-'+peerDepth+'-'+peerPort);
|
||||
} else {
|
||||
if(selectedPartitionPeerID != 'none') {
|
||||
trunkArray.push([selectedPartition, selectedPartitionPeerID]);
|
||||
}
|
||||
var selectedPort = false;
|
||||
}
|
||||
}
|
||||
|
||||
while($(selectedPort).length) {
|
||||
|
||||
// Crawl connection peer
|
||||
var connectedPortIDString = $(selectedPort).data('connectedGlobalId');
|
||||
var connectedPortIDArray = JSON.parse(atob(connectedPortIDString));
|
||||
|
||||
if(connectedPortIDArray.length) {
|
||||
var peerPortFound = false;
|
||||
$.each(connectedPortIDArray, function(index, connectedPortID){
|
||||
var connectedPort = $('#'+connectedPortID);
|
||||
if($(connectedPort).length) {
|
||||
|
||||
connectionArray.push([selectedPort, connectedPort]);
|
||||
|
||||
var connectedPartition = $(connectedPort).closest('.partition');
|
||||
var connectedPartitionPeerID = $(connectedPartition).data('peerGlobalId');
|
||||
|
||||
if($('#'+connectedPartitionPeerID).length) {
|
||||
|
||||
var connectedPartitionPeer = $('#'+connectedPartitionPeerID);
|
||||
trunkArray.push([connectedPartition, connectedPartitionPeer]);
|
||||
//partitionArray.push(connectedPartition, connectedPartitionPeer);
|
||||
|
||||
var connectedPartitionPeerIDArray = connectedPartitionPeerID.split('-');
|
||||
var peerID = connectedPartitionPeerIDArray[2];
|
||||
var peerFace = connectedPartitionPeerIDArray[3];
|
||||
var peerDepth = connectedPartitionPeerIDArray[4];
|
||||
|
||||
var connectedPortIDArray = connectedPortID.split('-');
|
||||
var peerPort = connectedPortIDArray[5];
|
||||
selectedPort = $('#port-4-'+peerID+'-'+peerFace+'-'+peerDepth+'-'+peerPort);
|
||||
peerPortFound = true;
|
||||
} else {
|
||||
if(connectedPartitionPeerID != 'none') {
|
||||
trunkArray.push([connectedPartition, connectedPartitionPeerID]);
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
connectionArray.push([selectedPort, connectedPortID]);
|
||||
}
|
||||
});
|
||||
if(peerPortFound == false) {
|
||||
selectedPort = false;
|
||||
}
|
||||
} else {
|
||||
selectedPort = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(document).data(sourceTypeMap[pathSourceType][0], connectionArray);
|
||||
$(document).data(sourceTypeMap[pathSourceType][1], trunkArray);
|
||||
});
|
||||
}
|
||||
|
||||
function drawCabinetConnections(){
|
||||
console.log('drawCabinetConnections');
|
||||
pathDataTypeArray = [
|
||||
'cabinetSelectedConnections',
|
||||
'cabinetHoveredConnections'
|
||||
];
|
||||
|
||||
cabinetCtx.strokeStyle = 'LightSkyBlue';
|
||||
cabinetCtx.lineWidth = 3;
|
||||
cabinetCtx.beginPath();
|
||||
//console.log('Debug (elementArray): '+JSON.stringify(elementArray));
|
||||
|
||||
$.each(elementArray, function(index, element){
|
||||
var elemA = element[0];
|
||||
var elemB = element[1];
|
||||
$.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){
|
||||
|
||||
var connectionStyle = $('#connectionStyle').val();
|
||||
var pathData = $(document).data(pathDataType);
|
||||
|
||||
var elemACabinet = $(elemA).closest('.cabinetContainer');
|
||||
var elemACabinetID = $(elemACabinet).data('cabinetId');
|
||||
var elemACabinetDimensions = getDimensions(elemACabinet);
|
||||
var elemADimensions = getDimensions(elemA);
|
||||
var elemAPartition = $(elemA).closest('.partition');
|
||||
var elemAPartitionDimensions = getDimensions(elemAPartition);
|
||||
$.each(pathData, function(index, element){
|
||||
var elemA = element[0];
|
||||
var elemB = element[1];
|
||||
|
||||
cabinetCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
|
||||
var connectionStyle = $('#connectionStyle').val();
|
||||
|
||||
if(typeof elemB == 'object') {
|
||||
var elemBCabinet = $(elemB).closest('.cabinetContainer');
|
||||
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
|
||||
var elemBCabinetDimensions = getDimensions(elemBCabinet);
|
||||
var elemBDimensions = getDimensions(elemB);
|
||||
var elemBPartition = $(elemB).closest('.partition');
|
||||
var elemBPartitionDimensions = getDimensions(elemBPartition);
|
||||
var elemACabinet = $(elemA).closest('.cabinetContainer');
|
||||
var elemACabinetID = $(elemACabinet).data('cabinetId');
|
||||
var elemACabinetDimensions = getDimensions(elemACabinet);
|
||||
var elemADimensions = getDimensions(elemA);
|
||||
var elemAPartition = $(elemA).closest('.partition');
|
||||
var elemAPartitionDimensions = getDimensions(elemAPartition);
|
||||
|
||||
if(elemBDimensions.top >= elemADimensions.top) {
|
||||
var elemAPartHBoundary = elemAPartitionDimensions.bottom;
|
||||
var elemBPartHBoundary = elemBPartitionDimensions.top;
|
||||
} else {
|
||||
var elemAPartHBoundary = elemAPartitionDimensions.top;
|
||||
var elemBPartHBoundary = elemBPartitionDimensions.bottom;
|
||||
}
|
||||
cabinetCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
|
||||
|
||||
if(connectionStyle == 0) {
|
||||
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartHBoundary);
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartHBoundary);
|
||||
|
||||
if(elemACabinetID != elemBCabinetID) {
|
||||
|
||||
// Ports are in different cabinets
|
||||
if(elemACabinetDimensions.top >= elemBCabinetDimensions.top) {
|
||||
|
||||
// Connection should be routed up
|
||||
var elemACabinetHBoundary = elemACabinetDimensions.top - canvasInset;
|
||||
} else {
|
||||
|
||||
// Connection should be routed down
|
||||
var elemACabinetHBoundary = elemACabinetDimensions.bottom + canvasInset;
|
||||
}
|
||||
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetHBoundary);
|
||||
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemACabinetHBoundary);
|
||||
if(typeof elemB == 'object') {
|
||||
var elemBCabinet = $(elemB).closest('.cabinetContainer');
|
||||
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
|
||||
var elemBCabinetDimensions = getDimensions(elemBCabinet);
|
||||
var elemBDimensions = getDimensions(elemB);
|
||||
var elemBPartition = $(elemB).closest('.partition');
|
||||
var elemBPartitionDimensions = getDimensions(elemBPartition);
|
||||
|
||||
if(elemBDimensions.top >= elemADimensions.top) {
|
||||
var elemAPartHBoundary = elemAPartitionDimensions.bottom;
|
||||
var elemBPartHBoundary = elemBPartitionDimensions.top;
|
||||
} else {
|
||||
var elemAPartHBoundary = elemAPartitionDimensions.top;
|
||||
var elemBPartHBoundary = elemBPartitionDimensions.bottom;
|
||||
}
|
||||
|
||||
if(connectionStyle == 0) {
|
||||
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartHBoundary);
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartHBoundary);
|
||||
|
||||
if(elemACabinetID != elemBCabinetID) {
|
||||
|
||||
// Ports are in different cabinets
|
||||
if(elemACabinetDimensions.top >= elemBCabinetDimensions.top) {
|
||||
|
||||
// Connection should be routed up
|
||||
var elemACabinetHBoundary = elemACabinetDimensions.top - canvasInset;
|
||||
} else {
|
||||
|
||||
// Connection should be routed down
|
||||
var elemACabinetHBoundary = elemACabinetDimensions.bottom + canvasInset;
|
||||
}
|
||||
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetHBoundary);
|
||||
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemACabinetHBoundary);
|
||||
|
||||
}
|
||||
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemBPartHBoundary);
|
||||
cabinetCtx.lineTo(elemBDimensions.centerX, elemBPartHBoundary);
|
||||
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
|
||||
} else if(connectionStyle == 1) {
|
||||
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
|
||||
} else if(connectionStyle == 2) {
|
||||
var arcSize = 30;
|
||||
cabinetCtx.bezierCurveTo((elemADimensions.centerX - arcSize), elemADimensions.centerY, (elemBDimensions.centerX - arcSize), elemBDimensions.centerY, elemBDimensions.centerX, elemBDimensions.centerY);
|
||||
} else {
|
||||
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
|
||||
}
|
||||
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemBPartHBoundary);
|
||||
cabinetCtx.lineTo(elemBDimensions.centerX, elemBPartHBoundary);
|
||||
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
|
||||
} else if(connectionStyle == 1) {
|
||||
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
|
||||
} else if(connectionStyle == 2) {
|
||||
var arcSize = 30;
|
||||
cabinetCtx.bezierCurveTo((elemADimensions.centerX - arcSize), elemADimensions.centerY, (elemBDimensions.centerX - arcSize), elemBDimensions.centerY, elemBDimensions.centerX, elemBDimensions.centerY);
|
||||
} else {
|
||||
cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
|
||||
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartitionDimensions.top);
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartitionDimensions.top);
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetDimensions.top - canvasInset);
|
||||
|
||||
var left = elemACabinetDimensions.leftOrig - canvasInset;
|
||||
var top = elemACabinetDimensions.topOrig - canvasInset;
|
||||
addCabButton(left, top, elemB);
|
||||
}
|
||||
} else {
|
||||
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartitionDimensions.top);
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartitionDimensions.top);
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetDimensions.top - canvasInset);
|
||||
|
||||
var left = elemACabinetDimensions.leftOrig - canvasInset;
|
||||
var top = elemACabinetDimensions.topOrig - canvasInset;
|
||||
addCabButton(left, top, elemB);
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
cabinetCtx.stroke();
|
||||
}
|
||||
|
||||
function drawCabinetTrunks(elementArray){
|
||||
function drawCabinetTrunks(){
|
||||
console.log('drawCabinetTrunks');
|
||||
pathDataTypeArray = [
|
||||
'cabinetSelectedTrunks',
|
||||
'cabinetHoveredTrunks'
|
||||
];
|
||||
|
||||
cabinetCtx.strokeStyle = 'MidnightBlue';
|
||||
cabinetCtx.lineWidth = 3;
|
||||
cabinetCtx.beginPath();
|
||||
|
||||
$.each(elementArray, function(index, element){
|
||||
$.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){
|
||||
|
||||
var vertical = canvasInset + (5*index);
|
||||
var pathData = $(document).data(pathDataType);
|
||||
|
||||
var elemA = element[0];
|
||||
var elemB = element[1];
|
||||
$.each(pathData, function(index, element){
|
||||
|
||||
var canvasDimensions = getDimensions($('#canvasCabinet'));
|
||||
var elemACabinet = $(elemA).closest('.cabinetContainer');
|
||||
var elemACabinetID = $(elemACabinet).data('cabinetId');
|
||||
var elemACabinetDimensions = getDimensions($(elemA).closest('.cabinetContainer'));
|
||||
var elemADimensions = getDimensions(elemA);
|
||||
var vertical = canvasInset + (5*index);
|
||||
|
||||
cabinetCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
|
||||
var elemA = element[0];
|
||||
var elemB = element[1];
|
||||
|
||||
if(typeof elemB == 'object') {
|
||||
var canvasDimensions = getDimensions($('#canvasCabinet'));
|
||||
var elemACabinet = $(elemA).closest('.cabinetContainer');
|
||||
var elemACabinetID = $(elemACabinet).data('cabinetId');
|
||||
var elemACabinetDimensions = getDimensions($(elemA).closest('.cabinetContainer'));
|
||||
var elemADimensions = getDimensions(elemA);
|
||||
|
||||
var elemBCabinet = $(elemB).closest('.cabinetContainer');
|
||||
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
|
||||
var elemBCabinetDimensions = getDimensions($(elemB).closest('.cabinetContainer'));
|
||||
var elemBDimensions = getDimensions(elemB);
|
||||
cabinetCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
|
||||
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
|
||||
if(typeof elemB == 'object') {
|
||||
|
||||
if(elemACabinetID != elemBCabinetID) {
|
||||
if(elemACabinetDimensions.top <= elemBCabinetDimensions.top) {
|
||||
elemBCabinetHBoundary = elemBCabinetDimensions.top - vertical;
|
||||
} else {
|
||||
elemBCabinetHBoundary = elemBCabinetDimensions.bottom + vertical;
|
||||
var elemBCabinet = $(elemB).closest('.cabinetContainer');
|
||||
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
|
||||
var elemBCabinetDimensions = getDimensions($(elemB).closest('.cabinetContainer'));
|
||||
var elemBDimensions = getDimensions(elemB);
|
||||
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
|
||||
|
||||
if(elemACabinetID != elemBCabinetID) {
|
||||
if(elemACabinetDimensions.top <= elemBCabinetDimensions.top) {
|
||||
elemBCabinetHBoundary = elemBCabinetDimensions.top - vertical;
|
||||
} else {
|
||||
elemBCabinetHBoundary = elemBCabinetDimensions.bottom + vertical;
|
||||
}
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemBCabinetHBoundary);
|
||||
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBCabinetHBoundary);
|
||||
}
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemBCabinetHBoundary);
|
||||
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBCabinetHBoundary);
|
||||
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBDimensions.centerY);
|
||||
cabinetCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
|
||||
|
||||
} else {
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemACabinetDimensions.top - vertical);
|
||||
cabinetCtx.strokeRect(elemADimensions.left, elemADimensions.top, elemADimensions.width, elemADimensions.height);
|
||||
|
||||
var left = elemACabinetDimensions.rightOrig + vertical;
|
||||
var top = elemACabinetDimensions.topOrig - vertical;
|
||||
addCabButton(left, top, elemB);
|
||||
}
|
||||
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBDimensions.centerY);
|
||||
cabinetCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
|
||||
|
||||
} else {
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
|
||||
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemACabinetDimensions.top - vertical);
|
||||
cabinetCtx.strokeRect(elemADimensions.left, elemADimensions.top, elemADimensions.width, elemADimensions.height);
|
||||
|
||||
var left = elemACabinetDimensions.rightOrig + vertical;
|
||||
var top = elemACabinetDimensions.topOrig - vertical;
|
||||
addCabButton(left, top, elemB);
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
cabinetCtx.stroke();
|
||||
}
|
||||
|
||||
function clearCabinetConnections(){
|
||||
console.log('clearCabinetConnections');
|
||||
var canvasHeight = $('#canvasCabinet').height();
|
||||
var canvasWidth = $('#canvasCabinet').width();
|
||||
cabinetCtx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
$('a.addCabButton').remove();
|
||||
drawPathConnections();
|
||||
drawPathTrunks();
|
||||
}
|
||||
|
||||
|
||||
// ### Path Functions ###
|
||||
function drawPath(){
|
||||
console.log('drawPath');
|
||||
resizeCanvas();
|
||||
clearPathConnections();
|
||||
crawlPathConnections();
|
||||
@ -255,13 +290,13 @@ function drawPath(){
|
||||
}
|
||||
|
||||
function crawlPathConnections(){
|
||||
console.log('crawlPathConnections');
|
||||
var pathConnections = {};
|
||||
var connectorElementArray = $('#containerFullPath').find('.port');
|
||||
$.each(connectorElementArray, function(index, element){
|
||||
if($(element).data('connectionPairId') !== undefined) {
|
||||
var connectionPairID = $(element).data('connectionPairId');
|
||||
if(pathConnections[connectionPairID] === undefined) {
|
||||
console.log('here3');
|
||||
pathConnections[connectionPairID] = [];
|
||||
}
|
||||
pathConnections[connectionPairID].push($(element));
|
||||
@ -271,6 +306,7 @@ function crawlPathConnections(){
|
||||
}
|
||||
|
||||
function crawlPathTrunks(){
|
||||
console.log('crawlPathTrunks');
|
||||
var pathTrunks = {};
|
||||
var connectorElementArray = $('#containerFullPath').find('.objectBox');
|
||||
|
||||
@ -290,6 +326,7 @@ function crawlPathTrunks(){
|
||||
}
|
||||
|
||||
function drawPathConnections(){
|
||||
console.log('drawPathConnections');
|
||||
var pathConnections = $(document).data('pathConnections');
|
||||
pathCtx.strokeStyle = 'LightSkyBlue';
|
||||
pathCtx.lineWidth = 3;
|
||||
@ -311,6 +348,7 @@ function drawPathConnections(){
|
||||
}
|
||||
|
||||
function drawPathTrunks(){
|
||||
console.log('drawPathTrunks');
|
||||
var pathTrunks = $(document).data('pathTrunks');
|
||||
pathCtx.strokeStyle = 'MidnightBlue';
|
||||
pathCtx.lineWidth = 3;
|
||||
@ -354,6 +392,7 @@ function drawPathTrunks(){
|
||||
}
|
||||
|
||||
function clearPathConnections(){
|
||||
console.log('clearPathConnections');
|
||||
var canvasHeight = $('#canvasPath').height();
|
||||
var canvasWidth = $('#canvasPath').width();
|
||||
pathCtx.clearRect(0, 0, canvasWidth, canvasHeight);
|
||||
@ -422,103 +461,50 @@ function highlightElement(elemArray, color){
|
||||
}
|
||||
|
||||
function makePortsHoverable(){
|
||||
console.log('makePortsHoverable');
|
||||
|
||||
resizeCanvas();
|
||||
redraw();
|
||||
//resizeCanvas();
|
||||
//redraw();
|
||||
|
||||
$('#buildSpaceContent').find('.port').each(function(){
|
||||
$(this).unbind('mouseenter mouseleave click.drawConnections');
|
||||
});
|
||||
$('#buildSpaceContent').find('.port').each(function(){
|
||||
$(this).hover(function(){
|
||||
|
||||
var pathElementArray = crawlCabinetConnections(this);
|
||||
|
||||
highlightElement(pathElementArray['partitionArray'], 'black');
|
||||
drawCabinetTrunks(pathElementArray['trunkArray']);
|
||||
highlightElement(pathElementArray['portArray'], 'LightSkyBlue');
|
||||
drawCabinetConnections(pathElementArray['connectionArray']);
|
||||
|
||||
$(document).data('hoveredPort', this);
|
||||
drawCabinet();
|
||||
}, function(){
|
||||
redraw();
|
||||
$(document).data('hoveredPort', false);
|
||||
drawCabinet();
|
||||
});
|
||||
|
||||
$(this).on('click.drawConnections', function(){
|
||||
|
||||
if(typeof $(this).data('pathID') == 'undefined') {
|
||||
|
||||
var pathElementArray = crawlCabinetConnections(this);
|
||||
if($(document).data('selectedPort') !== undefined && $(document).data('selectedPort') !== false) {
|
||||
// Gather previously and currently selected port IDs for comparison
|
||||
var selectedPort = $(document).data('selectedPort');
|
||||
var selectedPortID = $(selectedPort).attr('id');
|
||||
var thisPortID = $(this).attr('id');
|
||||
|
||||
// Get pathID
|
||||
// This allows persistant paths to accumulate
|
||||
//pathID++;
|
||||
// This allows only 1 persistant path at a time
|
||||
pathID = 0;
|
||||
if(typeof $(document).data('cabinetConnections')[pathID] != 'undefined') {
|
||||
$.each($(document).data('cabinetConnections')[pathID]['portArray'], function(){
|
||||
$(this).removeData('pathID');
|
||||
});
|
||||
// Compare previously and currently selected port IDs
|
||||
if(selectedPortID === thisPortID) {
|
||||
// Unselect port
|
||||
$(document).data('selectedPort', false);
|
||||
} else {
|
||||
// Select port
|
||||
$(document).data('selectedPort', this);
|
||||
}
|
||||
|
||||
// Associate ports to pathIDs
|
||||
$.each(pathElementArray['portArray'], function(){
|
||||
$(this).data('pathID', pathID);
|
||||
});
|
||||
|
||||
// Store connection path
|
||||
var workingPathData = {
|
||||
'portArray': pathElementArray['portArray'],
|
||||
'connectionArray': pathElementArray['connectionArray'],
|
||||
'trunkArray': pathElementArray['trunkArray'],
|
||||
'partitionArray': pathElementArray['partitionArray']
|
||||
};
|
||||
$(document).data('cabinetConnections')[pathID] = workingPathData;
|
||||
|
||||
} else {
|
||||
|
||||
// Clear pathIDs from ports
|
||||
var thisPathID = $(this).data('pathID');
|
||||
$.each($(document).data('cabinetConnections')[thisPathID]['portArray'], function(){
|
||||
$(this).removeData('pathID');
|
||||
});
|
||||
|
||||
// Clear connection path
|
||||
delete $(document).data('cabinetConnections')[thisPathID];
|
||||
$(document).data('selectedPort', this);
|
||||
}
|
||||
|
||||
drawCabinet();
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function refreshPathData(){
|
||||
var cabinetConnections = $(document).data('cabinetConnections');
|
||||
pathDataOrig = pathData;
|
||||
$.each(pathDataOrig, function(pathID, path){
|
||||
$.each(path['portArray'], function(portIndex, port){
|
||||
var portID = $(port).attr('id');
|
||||
if($('#'+portID).length) {
|
||||
var pathElementArray = crawlCabinetConnections($('#'+portID));
|
||||
|
||||
// Associate ports to pathIDs
|
||||
$.each(pathElementArray['portArray'], function(){
|
||||
$(this).data('pathID', pathID);
|
||||
});
|
||||
|
||||
// Store connection path
|
||||
var workingCabinetConnections = {
|
||||
'portArray': pathElementArray['portArray'],
|
||||
'connectionArray': pathElementArray['connectionArray'],
|
||||
'trunkArray': pathElementArray['trunkArray'],
|
||||
'partitionArray': pathElementArray['partitionArray']
|
||||
};
|
||||
$(document).data('cabinetConnections', workingCabinetConnections);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function makeCabArrowsClickable(){
|
||||
$('.cabMoveArrow').unbind('click');
|
||||
|
||||
@ -530,7 +516,8 @@ function makeCabArrowsClickable(){
|
||||
} else {
|
||||
$(cabinet).insertAfter($(cabinet).next());
|
||||
}
|
||||
redraw();
|
||||
drawCabinet();
|
||||
//redraw();
|
||||
});
|
||||
}
|
||||
|
||||
@ -551,10 +538,11 @@ function makeCabCloseClickable(){
|
||||
}
|
||||
});
|
||||
|
||||
// Refresh all paths
|
||||
refreshPathData();
|
||||
drawCabinet();
|
||||
|
||||
redraw();
|
||||
// Refresh all paths
|
||||
//refreshPathData();
|
||||
//redraw();
|
||||
});
|
||||
}
|
||||
|
||||
@ -566,19 +554,6 @@ function resizeCanvas() {
|
||||
$('#canvasPath').attr('height', $('#canvasPath').parent().height());
|
||||
}
|
||||
|
||||
function redraw() {
|
||||
clearCabinetConnections();
|
||||
var cabinetConnections = $(document).data('cabinetConnections');
|
||||
if(typeof cabinetConnections != 'undefined') {
|
||||
$.each(cabinetConnections, function(pathID, path){
|
||||
drawCabinetTrunks(path['trunkArray']);
|
||||
highlightElement(path['partitionArray'], 'MidnightBlue');
|
||||
drawCabinetConnections(path['connectionArray']);
|
||||
highlightElement(path['portArray'], 'LightSkyBlue');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function initializeCanvas() {
|
||||
|
||||
window.addEventListener('resize', resizeCanvas, false);
|
||||
@ -589,7 +564,10 @@ function initializeCanvas() {
|
||||
// Cabinet connections
|
||||
cabinetCtx = canvasCabinet.getContext('2d');
|
||||
cabinetCtx.lineWidth = lineWidth;
|
||||
$(document).data('cabinetConnections', {});
|
||||
$(document).data('cabinetSelectedConnections', []);
|
||||
$(document).data('cabinetHoveredConnections', []);
|
||||
$(document).data('cabinetSelectedTrunks', []);
|
||||
$(document).data('cabinetHoveredTrunks', []);
|
||||
canvasInset = 10;
|
||||
pathID = 0;
|
||||
|
||||
|
||||
@ -689,8 +689,9 @@ function postProcessCable(){
|
||||
$('#checkboxPopulated').prop("disabled", true);
|
||||
retrievePortPath(objID, objFace, objDepth, objPort);
|
||||
retrievePortOptions(objID, objFace, objDepth, objPort);
|
||||
refreshPathData();
|
||||
redraw();
|
||||
drawCabinet();
|
||||
//refreshPathData();
|
||||
//redraw();
|
||||
|
||||
$('#objTree').jstree('deselect_all');
|
||||
$('#objectTreeModal').modal('hide');
|
||||
@ -714,8 +715,7 @@ $( document ).ready(function() {
|
||||
event.preventDefault();
|
||||
$('#containerFullPath').parent().printThis({
|
||||
canvas: true,
|
||||
importStyle: true,
|
||||
removeInline: true
|
||||
importStyle: true
|
||||
});
|
||||
});
|
||||
|
||||
@ -1015,8 +1015,9 @@ $( document ).ready(function() {
|
||||
$('#checkboxPopulated').prop("disabled", false);
|
||||
retrievePortPath(objID, objFace, objDepth, objPort);
|
||||
retrievePortOptions(objID, objFace, objDepth, objPort);
|
||||
refreshPathData();
|
||||
redraw();
|
||||
drawCabinet();
|
||||
//refreshPathData();
|
||||
//redraw();
|
||||
|
||||
$('#objTree').jstree('deselect_all');
|
||||
$('#objectTreeModal').modal('hide');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user