mkrieger/patchcablemgr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.3.12

Browse Source
This commit is contained in:
Garrett K 2021-01-24 07:13:59 +00:00
parent bc21dae866
commit 72325a1aac
2 changed files with 283 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

574
assets/pages/jquery.drawConnections.js
View File

@ -1,251 +1,286 @@
// ### Cabinet Functions ### // ### Cabinet Functions ###
function crawlCabinetConnections(selectedPort){ function drawCabinet(){
var portArray = []; console.log('drawCabinet');
var connectionArray = []; resizeCanvas();
var trunkArray = []; clearCabinetConnections();
var partitionArray = []; crawlCabinet();
var selectedPeerID = $(selectedPort).data('peerGlobalId'); drawCabinetConnections();
var selectedPortOrig = selectedPort; drawCabinetTrunks();
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 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.strokeStyle = 'LightSkyBlue';
cabinetCtx.lineWidth = 3; cabinetCtx.lineWidth = 3;
cabinetCtx.beginPath(); cabinetCtx.beginPath();
//console.log('Debug (elementArray): '+JSON.stringify(elementArray));
$.each(elementArray, function(index, element){ $.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){
var elemA = element[0];
var elemB = element[1];
var connectionStyle = $('#connectionStyle').val(); var pathData = $(document).data(pathDataType);
var elemACabinet = $(elemA).closest('.cabinetContainer'); $.each(pathData, function(index, element){
var elemACabinetID = $(elemACabinet).data('cabinetId'); var elemA = element[0];
var elemACabinetDimensions = getDimensions(elemACabinet); var elemB = element[1];
var elemADimensions = getDimensions(elemA);
var elemAPartition = $(elemA).closest('.partition');
var elemAPartitionDimensions = getDimensions(elemAPartition);
cabinetCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
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) { var connectionStyle = $('#connectionStyle').val();
cabinetCtx.lineTo(elemADimensions.centerX, elemAPartHBoundary);
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartHBoundary); var elemACabinet = $(elemA).closest('.cabinetContainer');
var elemACabinetID = $(elemACabinet).data('cabinetId');
if(elemACabinetID != elemBCabinetID) { var elemACabinetDimensions = getDimensions(elemACabinet);
var elemADimensions = getDimensions(elemA);
// Ports are in different cabinets var elemAPartition = $(elemA).closest('.partition');
if(elemACabinetDimensions.top >= elemBCabinetDimensions.top) { var elemAPartitionDimensions = getDimensions(elemAPartition);
// Connection should be routed up cabinetCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
var elemACabinetHBoundary = elemACabinetDimensions.top - canvasInset;
} else { if(typeof elemB == 'object') {
var elemBCabinet = $(elemB).closest('.cabinetContainer');
// Connection should be routed down var elemBCabinetID = $(elemBCabinet).data('cabinetId');
var elemACabinetHBoundary = elemACabinetDimensions.bottom + canvasInset; var elemBCabinetDimensions = getDimensions(elemBCabinet);
} var elemBDimensions = getDimensions(elemB);
var elemBPartition = $(elemB).closest('.partition');
cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetHBoundary); var elemBPartitionDimensions = getDimensions(elemBPartition);
cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemACabinetHBoundary);
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 { } 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(); cabinetCtx.stroke();
} }
function drawCabinetTrunks(elementArray){ function drawCabinetTrunks(){
console.log('drawCabinetTrunks');
pathDataTypeArray = [
'cabinetSelectedTrunks',
'cabinetHoveredTrunks'
];
cabinetCtx.strokeStyle = 'MidnightBlue'; cabinetCtx.strokeStyle = 'MidnightBlue';
cabinetCtx.lineWidth = 3; cabinetCtx.lineWidth = 3;
cabinetCtx.beginPath(); 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]; $.each(pathData, function(index, element){
var elemB = element[1];
var canvasDimensions = getDimensions($('#canvasCabinet'));
var elemACabinet = $(elemA).closest('.cabinetContainer');
var elemACabinetID = $(elemACabinet).data('cabinetId');
var elemACabinetDimensions = getDimensions($(elemA).closest('.cabinetContainer'));
var elemADimensions = getDimensions(elemA);
cabinetCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
if(typeof elemB == 'object') {
var elemBCabinet = $(elemB).closest('.cabinetContainer'); var vertical = canvasInset + (5*index);
var elemBCabinetID = $(elemBCabinet).data('cabinetId');
var elemBCabinetDimensions = getDimensions($(elemB).closest('.cabinetContainer'));
var elemBDimensions = getDimensions(elemB);
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY); var elemA = element[0];
var elemB = element[1];
var canvasDimensions = getDimensions($('#canvasCabinet'));
var elemACabinet = $(elemA).closest('.cabinetContainer');
var elemACabinetID = $(elemACabinet).data('cabinetId');
var elemACabinetDimensions = getDimensions($(elemA).closest('.cabinetContainer'));
var elemADimensions = getDimensions(elemA);
if(elemACabinetID != elemBCabinetID) { cabinetCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
if(elemACabinetDimensions.top <= elemBCabinetDimensions.top) {
elemBCabinetHBoundary = elemBCabinetDimensions.top - vertical; if(typeof elemB == 'object') {
} 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, elemBDimensions.centerY);
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBCabinetHBoundary); cabinetCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
}
cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBDimensions.centerY);
cabinetCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
} else { } else {
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY); cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemACabinetDimensions.top - vertical); cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemACabinetDimensions.top - vertical);
cabinetCtx.strokeRect(elemADimensions.left, elemADimensions.top, elemADimensions.width, elemADimensions.height); cabinetCtx.strokeRect(elemADimensions.left, elemADimensions.top, elemADimensions.width, elemADimensions.height);
var left = elemACabinetDimensions.rightOrig + vertical;
var top = elemACabinetDimensions.topOrig - vertical;
addCabButton(left, top, elemB);
}
var left = elemACabinetDimensions.rightOrig + vertical; });
var top = elemACabinetDimensions.topOrig - vertical;
addCabButton(left, top, elemB);
}
}); });
cabinetCtx.stroke(); cabinetCtx.stroke();
} }
function clearCabinetConnections(){ function clearCabinetConnections(){
console.log('clearCabinetConnections');
var canvasHeight = $('#canvasCabinet').height(); var canvasHeight = $('#canvasCabinet').height();
var canvasWidth = $('#canvasCabinet').width(); var canvasWidth = $('#canvasCabinet').width();
cabinetCtx.clearRect(0, 0, canvasWidth, canvasHeight); cabinetCtx.clearRect(0, 0, canvasWidth, canvasHeight);
$('a.addCabButton').remove(); $('a.addCabButton').remove();
drawPathConnections();
drawPathTrunks();
} }
// ### Path Functions ### // ### Path Functions ###
function drawPath(){ function drawPath(){
console.log('drawPath');
resizeCanvas(); resizeCanvas();
clearPathConnections(); clearPathConnections();
crawlPathConnections(); crawlPathConnections();
@ -255,13 +290,13 @@ function drawPath(){
} }
function crawlPathConnections(){ function crawlPathConnections(){
console.log('crawlPathConnections');
var pathConnections = {}; var pathConnections = {};
var connectorElementArray = $('#containerFullPath').find('.port'); var connectorElementArray = $('#containerFullPath').find('.port');
$.each(connectorElementArray, function(index, element){ $.each(connectorElementArray, function(index, element){
if($(element).data('connectionPairId') !== undefined) { if($(element).data('connectionPairId') !== undefined) {
var connectionPairID = $(element).data('connectionPairId'); var connectionPairID = $(element).data('connectionPairId');
if(pathConnections[connectionPairID] === undefined) { if(pathConnections[connectionPairID] === undefined) {
console.log('here3');
pathConnections[connectionPairID] = []; pathConnections[connectionPairID] = [];
} }
pathConnections[connectionPairID].push($(element)); pathConnections[connectionPairID].push($(element));
@ -271,6 +306,7 @@ function crawlPathConnections(){
} }
function crawlPathTrunks(){ function crawlPathTrunks(){
console.log('crawlPathTrunks');
var pathTrunks = {}; var pathTrunks = {};
var connectorElementArray = $('#containerFullPath').find('.objectBox'); var connectorElementArray = $('#containerFullPath').find('.objectBox');
@ -290,6 +326,7 @@ function crawlPathTrunks(){
} }
function drawPathConnections(){ function drawPathConnections(){
console.log('drawPathConnections');
var pathConnections = $(document).data('pathConnections'); var pathConnections = $(document).data('pathConnections');
pathCtx.strokeStyle = 'LightSkyBlue'; pathCtx.strokeStyle = 'LightSkyBlue';
pathCtx.lineWidth = 3; pathCtx.lineWidth = 3;
@ -311,6 +348,7 @@ function drawPathConnections(){
} }
function drawPathTrunks(){ function drawPathTrunks(){
console.log('drawPathTrunks');
var pathTrunks = $(document).data('pathTrunks'); var pathTrunks = $(document).data('pathTrunks');
pathCtx.strokeStyle = 'MidnightBlue'; pathCtx.strokeStyle = 'MidnightBlue';
pathCtx.lineWidth = 3; pathCtx.lineWidth = 3;
@ -354,6 +392,7 @@ function drawPathTrunks(){
} }
function clearPathConnections(){ function clearPathConnections(){
console.log('clearPathConnections');
var canvasHeight = $('#canvasPath').height(); var canvasHeight = $('#canvasPath').height();
var canvasWidth = $('#canvasPath').width(); var canvasWidth = $('#canvasPath').width();
pathCtx.clearRect(0, 0, canvasWidth, canvasHeight); pathCtx.clearRect(0, 0, canvasWidth, canvasHeight);
@ -422,103 +461,50 @@ function highlightElement(elemArray, color){
} }
function makePortsHoverable(){ function makePortsHoverable(){
console.log('makePortsHoverable');
resizeCanvas(); //resizeCanvas();
redraw(); //redraw();
$('#buildSpaceContent').find('.port').each(function(){ $('#buildSpaceContent').find('.port').each(function(){
$(this).unbind('mouseenter mouseleave click.drawConnections'); $(this).unbind('mouseenter mouseleave click.drawConnections');
}); });
$('#buildSpaceContent').find('.port').each(function(){ $('#buildSpaceContent').find('.port').each(function(){
$(this).hover(function(){ $(this).hover(function(){
$(document).data('hoveredPort', this);
var pathElementArray = crawlCabinetConnections(this); drawCabinet();
highlightElement(pathElementArray['partitionArray'], 'black');
drawCabinetTrunks(pathElementArray['trunkArray']);
highlightElement(pathElementArray['portArray'], 'LightSkyBlue');
drawCabinetConnections(pathElementArray['connectionArray']);
}, function(){ }, function(){
redraw(); $(document).data('hoveredPort', false);
drawCabinet();
}); });
$(this).on('click.drawConnections', function(){ $(this).on('click.drawConnections', function(){
if(typeof $(this).data('pathID') == 'undefined') {
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');
var pathElementArray = crawlCabinetConnections(this); // Compare previously and currently selected port IDs
if(selectedPortID === thisPortID) {
// Get pathID // Unselect port
// This allows persistant paths to accumulate $(document).data('selectedPort', false);
//pathID++; } else {
// This allows only 1 persistant path at a time // Select port
pathID = 0; $(document).data('selectedPort', this);
if(typeof $(document).data('cabinetConnections')[pathID] != 'undefined') {
$.each($(document).data('cabinetConnections')[pathID]['portArray'], function(){
$(this).removeData('pathID');
});
} }
// 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 { } else {
$(document).data('selectedPort', this);
// 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];
} }
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(){ function makeCabArrowsClickable(){
$('.cabMoveArrow').unbind('click'); $('.cabMoveArrow').unbind('click');
@ -530,7 +516,8 @@ function makeCabArrowsClickable(){
} else { } else {
$(cabinet).insertAfter($(cabinet).next()); $(cabinet).insertAfter($(cabinet).next());
} }
redraw(); drawCabinet();
//redraw();
}); });
} }
@ -551,10 +538,11 @@ function makeCabCloseClickable(){
} }
}); });
// Refresh all paths drawCabinet();
refreshPathData();
redraw(); // Refresh all paths
//refreshPathData();
//redraw();
}); });
} }
@ -566,19 +554,6 @@ function resizeCanvas() {
$('#canvasPath').attr('height', $('#canvasPath').parent().height()); $('#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() { function initializeCanvas() {
window.addEventListener('resize', resizeCanvas, false); window.addEventListener('resize', resizeCanvas, false);
@ -589,7 +564,10 @@ function initializeCanvas() {
// Cabinet connections // Cabinet connections
cabinetCtx = canvasCabinet.getContext('2d'); cabinetCtx = canvasCabinet.getContext('2d');
cabinetCtx.lineWidth = lineWidth; cabinetCtx.lineWidth = lineWidth;
$(document).data('cabinetConnections', {}); $(document).data('cabinetSelectedConnections', []);
$(document).data('cabinetHoveredConnections', []);
$(document).data('cabinetSelectedTrunks', []);
$(document).data('cabinetHoveredTrunks', []);
canvasInset = 10; canvasInset = 10;
pathID = 0; pathID = 0;

13
assets/pages/jquery.explore.js
View File

@ -689,8 +689,9 @@ function postProcessCable(){
$('#checkboxPopulated').prop("disabled", true); $('#checkboxPopulated').prop("disabled", true);
retrievePortPath(objID, objFace, objDepth, objPort); retrievePortPath(objID, objFace, objDepth, objPort);
retrievePortOptions(objID, objFace, objDepth, objPort); retrievePortOptions(objID, objFace, objDepth, objPort);
refreshPathData(); drawCabinet();
redraw(); //refreshPathData();
//redraw();
$('#objTree').jstree('deselect_all'); $('#objTree').jstree('deselect_all');
$('#objectTreeModal').modal('hide'); $('#objectTreeModal').modal('hide');
@ -714,8 +715,7 @@ $( document ).ready(function() {
event.preventDefault(); event.preventDefault();
$('#containerFullPath').parent().printThis({ $('#containerFullPath').parent().printThis({
canvas: true, canvas: true,
importStyle: true, importStyle: true
removeInline: true
}); });
}); });
@ -1015,8 +1015,9 @@ $( document ).ready(function() {
$('#checkboxPopulated').prop("disabled", false); $('#checkboxPopulated').prop("disabled", false);
retrievePortPath(objID, objFace, objDepth, objPort); retrievePortPath(objID, objFace, objDepth, objPort);
retrievePortOptions(objID, objFace, objDepth, objPort); retrievePortOptions(objID, objFace, objDepth, objPort);
refreshPathData(); drawCabinet();
redraw(); //refreshPathData();
//redraw();
$('#objTree').jstree('deselect_all'); $('#objTree').jstree('deselect_all');
$('#objectTreeModal').modal('hide'); $('#objectTreeModal').modal('hide');