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-26 21:25:15 +00:00
parent 0b43ecdbbd
commit 99bd8acc97
1 changed files with 151 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,8 +115,8 @@ function drawCabinetConnections(){
'cabinetHoveredConnections' 'cabinetHoveredConnections'
]; ];
cabinetCtx.strokeStyle = 'LightSkyBlue'; cabinetCtx.strokeStyle = connectionLineColor;
cabinetCtx.lineWidth = 3; cabinetCtx.lineWidth = connectionLineWidth;
cabinetCtx.beginPath(); cabinetCtx.beginPath();
$.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){ $.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){
@ -208,8 +208,8 @@ function drawCabinetTrunks(){
'cabinetHoveredTrunks' 'cabinetHoveredTrunks'
]; ];
cabinetCtx.strokeStyle = 'MidnightBlue'; cabinetCtx.strokeStyle = trunkLineColor;
cabinetCtx.lineWidth = 3; cabinetCtx.lineWidth = trunkLineWidth;
cabinetCtx.beginPath(); cabinetCtx.beginPath();
$.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){ $.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){
@ -289,9 +289,10 @@ function drawPath(){
function crawlPathConnections(){ function crawlPathConnections(){
$.each(pathArray, function(pathName, path){
var pathConnections = []; var pathConnections = [];
var workingPathConnections = {}; var workingPathConnections = {};
var connectorElementArray = $('#containerFullPath').find('.port'); var connectorElementArray = $(path['container']).find('.port');
// Group connection peers // Group connection peers
$.each(connectorElementArray, function(index, element){ $.each(connectorElementArray, function(index, element){
@ -310,14 +311,16 @@ function crawlPathConnections(){
}); });
// Store path connection data // Store path connection data
$(document).data('pathConnections', pathConnections); pathArray[pathName]['connections'] = pathConnections;
});
} }
function crawlPathTrunks(){ function crawlPathTrunks(){
$.each(pathArray, function(pathName, path){
var pathTrunks = []; var pathTrunks = [];
var workingPathTrunks = {}; var workingPathTrunks = {};
var connectorElementArray = $('#containerFullPath').find('.objectBox'); var connectorElementArray = $(path['container']).find('.objectBox');
// Group trunk peers // Group trunk peers
$.each(connectorElementArray, function(index, element){ $.each(connectorElementArray, function(index, element){
@ -336,37 +339,43 @@ function crawlPathTrunks(){
}); });
// Store path trunk data // Store path trunk data
$(document).data('pathTrunks', pathTrunks); pathArray[pathName]['trunks'] = pathTrunks;
});
} }
function drawPathConnections(){ function drawPathConnections(){
var pathConnections = $(document).data('pathConnections'); $.each(pathArray, function(pathName, path){
pathCtx.strokeStyle = 'LightSkyBlue';
pathCtx.lineWidth = 3;
pathCtx.beginPath();
$.each(pathConnections, function(index, element){ var canvas = path['canvas'];
var connections = path['connections'];
pathArray[pathName]['context'].strokeStyle = connectionLineColor;
pathArray[pathName]['context'].lineWidth = connectionLineWidth;
pathArray[pathName]['context'].beginPath();
$.each(connections, function(index, element){
var elemA = element[0]; var elemA = element[0];
var elemB = element[1]; var elemB = element[1];
var canvas = $('#canvasPath');
var elemADimensions = getDimensions(elemA, canvas); var elemADimensions = getDimensions(elemA, canvas);
var elemBDimensions = getDimensions(elemB, canvas); var elemBDimensions = getDimensions(elemB, canvas);
pathCtx.moveTo(elemADimensions.centerX, elemADimensions.bottom); pathArray[pathName]['context'].moveTo(elemADimensions.centerX, elemADimensions.bottom);
pathCtx.bezierCurveTo(elemADimensions.centerX + 20, elemADimensions.bottom, elemBDimensions.centerX + 20, elemBDimensions.top, elemBDimensions.centerX, elemBDimensions.top); pathArray[pathName]['context'].bezierCurveTo(elemADimensions.centerX + 20, elemADimensions.bottom, elemBDimensions.centerX + 20, elemBDimensions.top, elemBDimensions.centerX, elemBDimensions.top);
}); });
pathCtx.stroke(); pathArray[pathName]['context'].stroke();
});
} }
function drawPathTrunks(){ function drawPathTrunks(){
var pathTrunks = $(document).data('pathTrunks'); $.each(pathArray, function(pathName, path){
pathCtx.strokeStyle = 'MidnightBlue'; var pathTrunks = path['trunks'];
pathCtx.lineWidth = 3; var canvas = path['canvas'];
pathCtx.beginPath(); pathArray[pathName]['context'].strokeStyle = trunkLineColor;
pathArray[pathName]['context'].lineWidth = trunkLineWidth;
pathArray[pathName]['context'].beginPath();
$.each(pathTrunks, function(index, element){ $.each(pathTrunks, function(index, element){
@ -375,7 +384,6 @@ function drawPathTrunks(){
var elemA = element[0]; var elemA = element[0];
var elemB = element[1]; var elemB = element[1];
var canvas = $('#canvasPath');
var elemADimensions = getDimensions(elemA, canvas); var elemADimensions = getDimensions(elemA, canvas);
var elemBDimensions = getDimensions(elemB, canvas); var elemBDimensions = getDimensions(elemB, canvas);
@ -388,28 +396,32 @@ function drawPathTrunks(){
if(pathOrientation == "0") { if(pathOrientation == "0") {
// Patch Cable Adjacent // Patch Cable Adjacent
pathCtx.moveTo(elemADimensions.centerX, elemADimensions.bottom); pathArray[pathName]['context'].moveTo(elemADimensions.centerX, elemADimensions.bottom);
pathCtx.lineTo(elemADimensions.centerX, elemBDimensions.top); pathArray[pathName]['context'].lineTo(elemADimensions.centerX, elemBDimensions.top);
} else { } else {
// Patch Cable Inline // Patch Cable Inline
pathCtx.moveTo(elemADimensions.right, elemADimensions.centerY); pathArray[pathName]['context'].moveTo(elemADimensions.right, elemADimensions.centerY);
pathCtx.lineTo((rightBoundary + 20), elemADimensions.centerY); pathArray[pathName]['context'].lineTo((rightBoundary + 20), elemADimensions.centerY);
pathCtx.lineTo((rightBoundary + 20), elemBDimensions.centerY); pathArray[pathName]['context'].lineTo((rightBoundary + 20), elemBDimensions.centerY);
pathCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY); pathArray[pathName]['context'].lineTo(elemBDimensions.right, elemBDimensions.centerY);
} }
}); });
pathCtx.stroke(); pathArray[pathName]['context'].stroke();
});
} }
function clearPathConnections(){ function clearPathConnections(){
var canvasHeight = $('#canvasPath').height(); $.each(pathArray, function(pathName, path){
var canvasWidth = $('#canvasPath').width(); var canvas = path['canvas'];
pathCtx.clearRect(0, 0, canvasWidth, canvasHeight); var canvasHeight = $(canvas).height();
var canvasWidth = $(canvas).width();
pathArray[pathName]['context'].clearRect(0, 0, canvasWidth, canvasHeight);
});
} }
@ -420,8 +432,10 @@ function resetConnectionData(){
$(document).data('cabinetHoveredConnections', []); $(document).data('cabinetHoveredConnections', []);
$(document).data('cabinetSelectedTrunks', []); $(document).data('cabinetSelectedTrunks', []);
$(document).data('cabinetHoveredTrunks', []); $(document).data('cabinetHoveredTrunks', []);
$(document).data('pathConnections', {}); $.each(pathArray, function(pathName, path){
$(document).data('pathTrunks', {}); pathArray[pathName]['connections'] = {};
pathArray[pathName]['trunks'] = {};
});
} }
function getDimensions(elem, canvas=false){ function getDimensions(elem, canvas=false){
@ -568,13 +582,22 @@ function makeCabCloseClickable(){
} }
function resizePathCanvas() { function resizePathCanvas() {
$('#canvasPath').attr('width', $('#canvasPath').parent().width());
$('#canvasPath').attr('height', $('#canvasPath').parent().height()); $.each(pathArray, function(pathName, path){
var canvas = path['canvas'];
$(canvas).attr('width', $(canvas).parent().width());
$(canvas).attr('height', $(canvas).parent().height());
});
} }
function resizeCabinetCanvas() { function resizeCabinetCanvas() {
$('#canvasCabinet').attr('width', $(document).width());
$('#canvasCabinet').attr('height', $(document).height()); var canvas = $('#canvasCabinet');
if($(canvas).length) {
$(canvas).attr('width', $(document).width());
$(canvas).attr('height', $(document).height());
}
} }
function drawPathAndCabinet() { function drawPathAndCabinet() {
@ -585,23 +608,33 @@ function drawPathAndCabinet() {
function initializeCanvas() { function initializeCanvas() {
window.addEventListener('resize', drawPathAndCabinet, false); window.addEventListener('resize', drawPathAndCabinet, false);
canvasCabinet = document.getElementById('canvasCabinet'); connectionLineWidth = 3;
canvasPath = document.getElementById('canvasPath'); connectionLineColor = 'LightSkyBlue';
var lineWidth = 10; trunkLineWidth = 6;
trunkLineColor = 'MidnightBlue';
// Cabinet connections // Cabinet connections
if($('#canvasCabinet').length) {
canvasCabinet = document.getElementById('canvasCabinet');
cabinetCtx = canvasCabinet.getContext('2d'); cabinetCtx = canvasCabinet.getContext('2d');
cabinetCtx.lineWidth = lineWidth;
$(document).data('cabinetSelectedConnections', []); $(document).data('cabinetSelectedConnections', []);
$(document).data('cabinetHoveredConnections', []); $(document).data('cabinetHoveredConnections', []);
$(document).data('cabinetSelectedTrunks', []); $(document).data('cabinetSelectedTrunks', []);
$(document).data('cabinetHoveredTrunks', []); $(document).data('cabinetHoveredTrunks', []);
canvasInset = 10; canvasInset = 10;
}
// Path connections // Path connections
pathCtx = canvasPath.getContext('2d'); pathArray = {};
pathCtx.lineWidth = lineWidth; if($('#canvasPath').length) {
$(document).data('pathConnections', {}); canvasPath = document.getElementById('canvasPath');
$(document).data('pathTrunks', {}); pathArray['path'] = {
'context': canvasPath.getContext('2d'),
'canvas': $('#canvasPath'),
'container' : $('#containerFullPath'),
'connections': {},
'trunks': {}
};
}
} }