From 99bd8acc97bea707bb9216234aea9e5b727c0043 Mon Sep 17 00:00:00 2001
From: Garrett K <garrett.kelly@patchcablemgr.com>
Date: Tue, 26 Jan 2021 21:25:15 +0000
Subject: [PATCH] 0.3.12

---
 assets/pages/jquery.drawConnections.js | 269 ++++++++++++++-----------
 1 file changed, 151 insertions(+), 118 deletions(-)

diff --git a/assets/pages/jquery.drawConnections.js b/assets/pages/jquery.drawConnections.js
index 5a7707a..011eece 100755
--- a/assets/pages/jquery.drawConnections.js
+++ b/assets/pages/jquery.drawConnections.js
@@ -115,8 +115,8 @@ function drawCabinetConnections(){
 		'cabinetHoveredConnections'
 	];
 	
-	cabinetCtx.strokeStyle = 'LightSkyBlue';
-	cabinetCtx.lineWidth = 3;
+	cabinetCtx.strokeStyle = connectionLineColor;
+	cabinetCtx.lineWidth = connectionLineWidth;
 	cabinetCtx.beginPath();
 	
 	$.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){
@@ -208,8 +208,8 @@ function drawCabinetTrunks(){
 		'cabinetHoveredTrunks'
 	];
 	
-	cabinetCtx.strokeStyle = 'MidnightBlue';
-	cabinetCtx.lineWidth = 3;
+	cabinetCtx.strokeStyle = trunkLineColor;
+	cabinetCtx.lineWidth = trunkLineWidth;
 	cabinetCtx.beginPath();
 	
 	$.each(pathDataTypeArray, function(pathDataTypeIndex, pathDataType){
@@ -289,127 +289,139 @@ function drawPath(){
 
 function crawlPathConnections(){
 	
-	var pathConnections = [];
-	var workingPathConnections = {};
-	var connectorElementArray = $('#containerFullPath').find('.port');
-	
-	// Group connection peers
-	$.each(connectorElementArray, function(index, element){
-		var connectionPairID = $(element).data('connectionPairId');
-		if(workingPathConnections[connectionPairID] === undefined) {
-			workingPathConnections[connectionPairID] = [];
-		}
-		workingPathConnections[connectionPairID].push($(element));
+	$.each(pathArray, function(pathName, path){
+		var pathConnections = [];
+		var workingPathConnections = {};
+		var connectorElementArray = $(path['container']).find('.port');
+		
+		// Group connection peers
+		$.each(connectorElementArray, function(index, element){
+			var connectionPairID = $(element).data('connectionPairId');
+			if(workingPathConnections[connectionPairID] === undefined) {
+				workingPathConnections[connectionPairID] = [];
+			}
+			workingPathConnections[connectionPairID].push($(element));
+		});
+		
+		// Filter out singles
+		$.each(workingPathConnections, function(index, element){
+			if(element.length == 2) {
+				pathConnections.push(element);
+			}
+		});
+		
+		// Store path connection data
+		pathArray[pathName]['connections'] = pathConnections;
 	});
-	
-	// Filter out singles
-	$.each(workingPathConnections, function(index, element){
-		if(element.length == 2) {
-			pathConnections.push(element);
-		}
-	});
-	
-	// Store path connection data
-	$(document).data('pathConnections', pathConnections);
 }
 
 function crawlPathTrunks(){
 	
-	var pathTrunks = [];
-	var workingPathTrunks = {};
-	var connectorElementArray = $('#containerFullPath').find('.objectBox');
-	
-	// Group trunk peers
-	$.each(connectorElementArray, function(index, element){
-		var trunkPairID = $(element).data('trunkPairId');
-		if(workingPathTrunks[trunkPairID] === undefined) {
-			workingPathTrunks[trunkPairID] = [];
-		}
-		workingPathTrunks[trunkPairID].push($(element));
+	$.each(pathArray, function(pathName, path){
+		var pathTrunks = [];
+		var workingPathTrunks = {};
+		var connectorElementArray = $(path['container']).find('.objectBox');
+		
+		// Group trunk peers
+		$.each(connectorElementArray, function(index, element){
+			var trunkPairID = $(element).data('trunkPairId');
+			if(workingPathTrunks[trunkPairID] === undefined) {
+				workingPathTrunks[trunkPairID] = [];
+			}
+			workingPathTrunks[trunkPairID].push($(element));
+		});
+		
+		// Filter out singles
+		$.each(workingPathTrunks, function(index, element){
+			if(element.length == 2) {
+				pathTrunks.push(element);
+			}
+		});
+		
+		// Store path trunk data
+		pathArray[pathName]['trunks'] = pathTrunks;
 	});
-	
-	// Filter out singles
-	$.each(workingPathTrunks, function(index, element){
-		if(element.length == 2) {
-			pathTrunks.push(element);
-		}
-	});
-	
-	// Store path trunk data
-	$(document).data('pathTrunks', pathTrunks);
 }
 
 function drawPathConnections(){
 	
-	var pathConnections = $(document).data('pathConnections');
-	pathCtx.strokeStyle = 'LightSkyBlue';
-	pathCtx.lineWidth = 3;
-	pathCtx.beginPath();
-	
-	$.each(pathConnections, function(index, element){
-		var elemA = element[0];
-		var elemB = element[1];
+	$.each(pathArray, function(pathName, path){
 		
-		var canvas = $('#canvasPath');
-		var elemADimensions = getDimensions(elemA, canvas);
-		var elemBDimensions = getDimensions(elemB, canvas);
-		
-		pathCtx.moveTo(elemADimensions.centerX, elemADimensions.bottom);
-		pathCtx.bezierCurveTo(elemADimensions.centerX + 20, elemADimensions.bottom, elemBDimensions.centerX + 20, elemBDimensions.top, elemBDimensions.centerX, elemBDimensions.top);
+		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 elemB = element[1];
+			
+			var elemADimensions = getDimensions(elemA, canvas);
+			var elemBDimensions = getDimensions(elemB, canvas);
+			
+			pathArray[pathName]['context'].moveTo(elemADimensions.centerX, elemADimensions.bottom);
+			pathArray[pathName]['context'].bezierCurveTo(elemADimensions.centerX + 20, elemADimensions.bottom, elemBDimensions.centerX + 20, elemBDimensions.top, elemBDimensions.centerX, elemBDimensions.top);
+			
+		});
+		pathArray[pathName]['context'].stroke();
 	});
-	pathCtx.stroke();
 }
 
 function drawPathTrunks(){
 	
-	var pathTrunks = $(document).data('pathTrunks');
-	pathCtx.strokeStyle = 'MidnightBlue';
-	pathCtx.lineWidth = 3;
-	pathCtx.beginPath();
-	
-	$.each(pathTrunks, function(index, element){
+	$.each(pathArray, function(pathName, path){
+		var pathTrunks = path['trunks'];
+		var canvas = path['canvas'];
+		pathArray[pathName]['context'].strokeStyle = trunkLineColor;
+		pathArray[pathName]['context'].lineWidth = trunkLineWidth;
+		pathArray[pathName]['context'].beginPath();
 		
-		var pathOrientation = $('#pathOrientation').val();
-		
-		var elemA = element[0];
-		var elemB = element[1];
-		
-		var canvas = $('#canvasPath');
-		var elemADimensions = getDimensions(elemA, canvas);
-		var elemBDimensions = getDimensions(elemB, canvas);
-		
-		if(elemADimensions.right > elemBDimensions.right) {
-			var rightBoundary = elemADimensions.right;
-		} else {
-			var rightBoundary = elemBDimensions.right;
-		}
-		
-		if(pathOrientation == "0") {
+		$.each(pathTrunks, function(index, element){
 			
-			// Patch Cable Adjacent
-			pathCtx.moveTo(elemADimensions.centerX, elemADimensions.bottom);
-			pathCtx.lineTo(elemADimensions.centerX, elemBDimensions.top);
+			var pathOrientation = $('#pathOrientation').val();
 			
-		} else {
+			var elemA = element[0];
+			var elemB = element[1];
 			
-			// Patch Cable Inline
-			pathCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
-			pathCtx.lineTo((rightBoundary + 20), elemADimensions.centerY);
-			pathCtx.lineTo((rightBoundary + 20), elemBDimensions.centerY);
-			pathCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
+			var elemADimensions = getDimensions(elemA, canvas);
+			var elemBDimensions = getDimensions(elemB, canvas);
 			
-		}
-		
+			if(elemADimensions.right > elemBDimensions.right) {
+				var rightBoundary = elemADimensions.right;
+			} else {
+				var rightBoundary = elemBDimensions.right;
+			}
+			
+			if(pathOrientation == "0") {
+				
+				// Patch Cable Adjacent
+				pathArray[pathName]['context'].moveTo(elemADimensions.centerX, elemADimensions.bottom);
+				pathArray[pathName]['context'].lineTo(elemADimensions.centerX, elemBDimensions.top);
+				
+			} else {
+				
+				// Patch Cable Inline
+				pathArray[pathName]['context'].moveTo(elemADimensions.right, elemADimensions.centerY);
+				pathArray[pathName]['context'].lineTo((rightBoundary + 20), elemADimensions.centerY);
+				pathArray[pathName]['context'].lineTo((rightBoundary + 20), elemBDimensions.centerY);
+				pathArray[pathName]['context'].lineTo(elemBDimensions.right, elemBDimensions.centerY);
+				
+			}
+			
+		});
+		pathArray[pathName]['context'].stroke();
 	});
-	pathCtx.stroke();
 }
 
 function clearPathConnections(){
 	
-	var canvasHeight = $('#canvasPath').height();
-	var canvasWidth = $('#canvasPath').width();
-	pathCtx.clearRect(0, 0, canvasWidth, canvasHeight);
+	$.each(pathArray, function(pathName, path){
+		var canvas = path['canvas'];
+		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('cabinetSelectedTrunks', []);
 	$(document).data('cabinetHoveredTrunks', []);
-	$(document).data('pathConnections', {});
-	$(document).data('pathTrunks', {});
+	$.each(pathArray, function(pathName, path){
+		pathArray[pathName]['connections'] = {};
+		pathArray[pathName]['trunks'] = {};
+	});
 }
 
 function getDimensions(elem, canvas=false){
@@ -568,13 +582,22 @@ function makeCabCloseClickable(){
 }
 
 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() {
-	$('#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() {
@@ -585,23 +608,33 @@ function drawPathAndCabinet() {
 function initializeCanvas() {
 	
 	window.addEventListener('resize', drawPathAndCabinet, false);
-	canvasCabinet = document.getElementById('canvasCabinet');
-	canvasPath = document.getElementById('canvasPath');
-	var lineWidth = 10;
+	connectionLineWidth = 3;
+	connectionLineColor = 'LightSkyBlue';
+	trunkLineWidth = 6;
+	trunkLineColor = 'MidnightBlue';
 	
 	// Cabinet connections
-	cabinetCtx = canvasCabinet.getContext('2d');
-	cabinetCtx.lineWidth = lineWidth;
-	$(document).data('cabinetSelectedConnections', []);
-	$(document).data('cabinetHoveredConnections', []);
-	$(document).data('cabinetSelectedTrunks', []);
-	$(document).data('cabinetHoveredTrunks', []);
-	canvasInset = 10;
+	if($('#canvasCabinet').length) {
+		canvasCabinet = document.getElementById('canvasCabinet');
+		cabinetCtx = canvasCabinet.getContext('2d');
+		$(document).data('cabinetSelectedConnections', []);
+		$(document).data('cabinetHoveredConnections', []);
+		$(document).data('cabinetSelectedTrunks', []);
+		$(document).data('cabinetHoveredTrunks', []);
+		canvasInset = 10;
+	}
 	
 	// Path connections
-	pathCtx = canvasPath.getContext('2d');
-	pathCtx.lineWidth = lineWidth;
-	$(document).data('pathConnections', {});
-	$(document).data('pathTrunks', {});
+	pathArray = {};
+	if($('#canvasPath').length) {
+		canvasPath = document.getElementById('canvasPath');
+		pathArray['path'] = {
+			'context': canvasPath.getContext('2d'),
+			'canvas': $('#canvasPath'),
+			'container' : $('#containerFullPath'),
+			'connections': {},
+			'trunks': {}
+		};
+	}
 	
 }