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-19 06:07:39 +00:00
parent 73cd6f7fba
commit bee4d2ef04
2 changed files with 112 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,10 +34,10 @@ function getDimensions(elem){
return dimensions; return dimensions;
} }
function drawConnection(elementArray){ function drawCabinetConnections(elementArray){
context.strokeStyle = 'LightSkyBlue'; cabinetCtx.strokeStyle = 'LightSkyBlue';
context.lineWidth = 3; cabinetCtx.lineWidth = 3;
context.beginPath(); cabinetCtx.beginPath();
//console.log('Debug (elementArray): '+JSON.stringify(elementArray)); //console.log('Debug (elementArray): '+JSON.stringify(elementArray));
$.each(elementArray, function(index, element){ $.each(elementArray, function(index, element){
@ -53,7 +53,7 @@ function drawConnection(elementArray){
var elemAPartition = $(elemA).closest('.partition'); var elemAPartition = $(elemA).closest('.partition');
var elemAPartitionDimensions = getDimensions(elemAPartition); var elemAPartitionDimensions = getDimensions(elemAPartition);
context.moveTo(elemADimensions.centerX, elemADimensions.centerY); cabinetCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
if(typeof elemB == 'object') { if(typeof elemB == 'object') {
var elemBCabinet = $(elemB).closest('.cabinetContainer'); var elemBCabinet = $(elemB).closest('.cabinetContainer');
@ -72,8 +72,8 @@ function drawConnection(elementArray){
} }
if(connectionStyle == 0) { if(connectionStyle == 0) {
context.lineTo(elemADimensions.centerX, elemAPartHBoundary); cabinetCtx.lineTo(elemADimensions.centerX, elemAPartHBoundary);
context.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartHBoundary); cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartHBoundary);
if(elemACabinetID != elemBCabinetID) { if(elemACabinetID != elemBCabinetID) {
@ -88,25 +88,25 @@ function drawConnection(elementArray){
var elemACabinetHBoundary = elemACabinetDimensions.bottom + canvasInset; var elemACabinetHBoundary = elemACabinetDimensions.bottom + canvasInset;
} }
context.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetHBoundary); cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetHBoundary);
context.lineTo(elemBCabinetDimensions.left - canvasInset, elemACabinetHBoundary); cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemACabinetHBoundary);
} }
context.lineTo(elemBCabinetDimensions.left - canvasInset, elemBPartHBoundary); cabinetCtx.lineTo(elemBCabinetDimensions.left - canvasInset, elemBPartHBoundary);
context.lineTo(elemBDimensions.centerX, elemBPartHBoundary); cabinetCtx.lineTo(elemBDimensions.centerX, elemBPartHBoundary);
context.lineTo(elemBDimensions.centerX, elemBDimensions.centerY); cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
} else if(connectionStyle == 1) { } else if(connectionStyle == 1) {
context.lineTo(elemBDimensions.centerX, elemBDimensions.centerY); cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
} else if(connectionStyle == 2) { } else if(connectionStyle == 2) {
var arcSize = 30; var arcSize = 30;
context.bezierCurveTo((elemADimensions.centerX - arcSize), elemADimensions.centerY, (elemBDimensions.centerX - arcSize), elemBDimensions.centerY, elemBDimensions.centerX, elemBDimensions.centerY); cabinetCtx.bezierCurveTo((elemADimensions.centerX - arcSize), elemADimensions.centerY, (elemBDimensions.centerX - arcSize), elemBDimensions.centerY, elemBDimensions.centerX, elemBDimensions.centerY);
} else { } else {
context.lineTo(elemBDimensions.centerX, elemBDimensions.centerY); cabinetCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
} }
} else { } else {
context.lineTo(elemADimensions.centerX, elemAPartitionDimensions.top); cabinetCtx.lineTo(elemADimensions.centerX, elemAPartitionDimensions.top);
context.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartitionDimensions.top); cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemAPartitionDimensions.top);
context.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetDimensions.top - canvasInset); cabinetCtx.lineTo(elemACabinetDimensions.left - canvasInset, elemACabinetDimensions.top - canvasInset);
var left = elemACabinetDimensions.leftOrig - canvasInset; var left = elemACabinetDimensions.leftOrig - canvasInset;
var top = elemACabinetDimensions.topOrig - canvasInset; var top = elemACabinetDimensions.topOrig - canvasInset;
@ -114,32 +114,32 @@ function drawConnection(elementArray){
} }
}); });
context.stroke(); cabinetCtx.stroke();
} }
function drawConnectionDiagram(){ function drawPathConnections(){
var pathDiagramData = $(document).data('pathDiagram'); var pathConections = $(document).data('pathConections');
context.strokeStyle = 'LightSkyBlue'; pathCtx.strokeStyle = 'LightSkyBlue';
context.lineWidth = 3; pathCtx.lineWidth = 3;
context.beginPath(); pathCtx.beginPath();
$.each(pathDiagramData, function(index, element){ $.each(pathConections, function(index, element){
var elemA = element[0]; var elemA = element[0];
var elemB = element[1]; var elemB = element[1];
var elemADimensions = getDimensions(elemA); var elemADimensions = getDimensions(elemA);
var elemBDimensions = getDimensions(elemB); var elemBDimensions = getDimensions(elemB);
context.moveTo(elemADimensions.centerX, elemADimensions.centerY); pathCtx.moveTo(elemADimensions.centerX, elemADimensions.centerY);
context.lineTo(elemBDimensions.centerX, elemBDimensions.centerY); pathCtx.lineTo(elemBDimensions.centerX, elemBDimensions.centerY);
}); });
context.stroke(); pathCtx.stroke();
} }
function drawTrunk(elementArray){ function drawTrunk(elementArray){
context.strokeStyle = 'MidnightBlue'; cabinetCtx.strokeStyle = 'MidnightBlue';
context.lineWidth = 3; cabinetCtx.lineWidth = 3;
context.beginPath(); cabinetCtx.beginPath();
$.each(elementArray, function(index, element){ $.each(elementArray, function(index, element){
@ -154,7 +154,7 @@ function drawTrunk(elementArray){
var elemACabinetDimensions = getDimensions($(elemA).closest('.cabinetContainer')); var elemACabinetDimensions = getDimensions($(elemA).closest('.cabinetContainer'));
var elemADimensions = getDimensions(elemA); var elemADimensions = getDimensions(elemA);
context.moveTo(elemADimensions.right, elemADimensions.centerY); cabinetCtx.moveTo(elemADimensions.right, elemADimensions.centerY);
if(typeof elemB == 'object') { if(typeof elemB == 'object') {
@ -163,7 +163,7 @@ function drawTrunk(elementArray){
var elemBCabinetDimensions = getDimensions($(elemB).closest('.cabinetContainer')); var elemBCabinetDimensions = getDimensions($(elemB).closest('.cabinetContainer'));
var elemBDimensions = getDimensions(elemB); var elemBDimensions = getDimensions(elemB);
context.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY); cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
if(elemACabinetID != elemBCabinetID) { if(elemACabinetID != elemBCabinetID) {
if(elemACabinetDimensions.top <= elemBCabinetDimensions.top) { if(elemACabinetDimensions.top <= elemBCabinetDimensions.top) {
@ -171,16 +171,16 @@ function drawTrunk(elementArray){
} else { } else {
elemBCabinetHBoundary = elemBCabinetDimensions.bottom + vertical; elemBCabinetHBoundary = elemBCabinetDimensions.bottom + vertical;
} }
context.lineTo(elemACabinetDimensions.right + vertical, elemBCabinetHBoundary); cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemBCabinetHBoundary);
context.lineTo(elemBCabinetDimensions.right + vertical, elemBCabinetHBoundary); cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBCabinetHBoundary);
} }
context.lineTo(elemBCabinetDimensions.right + vertical, elemBDimensions.centerY); cabinetCtx.lineTo(elemBCabinetDimensions.right + vertical, elemBDimensions.centerY);
context.lineTo(elemBDimensions.right, elemBDimensions.centerY); cabinetCtx.lineTo(elemBDimensions.right, elemBDimensions.centerY);
} else { } else {
context.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY); cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemADimensions.centerY);
context.lineTo(elemACabinetDimensions.right + vertical, elemACabinetDimensions.top - vertical); cabinetCtx.lineTo(elemACabinetDimensions.right + vertical, elemACabinetDimensions.top - vertical);
context.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 left = elemACabinetDimensions.rightOrig + vertical;
var top = elemACabinetDimensions.topOrig - vertical; var top = elemACabinetDimensions.topOrig - vertical;
@ -188,7 +188,7 @@ function drawTrunk(elementArray){
} }
}); });
context.stroke(); cabinetCtx.stroke();
} }
function addCabButton(left, top, globalID){ function addCabButton(left, top, globalID){
@ -202,20 +202,27 @@ function addCabButton(left, top, globalID){
function highlightElement(elemArray, color){ function highlightElement(elemArray, color){
$.each(elemArray, function(index, elem){ $.each(elemArray, function(index, elem){
context.strokeStyle = color; cabinetCtx.strokeStyle = color;
context.beginPath(); cabinetCtx.beginPath();
var elemDimensions = getDimensions(elem); var elemDimensions = getDimensions(elem);
context.strokeRect(elemDimensions.left, elemDimensions.top, elemDimensions.width, elemDimensions.height); cabinetCtx.strokeRect(elemDimensions.left, elemDimensions.top, elemDimensions.width, elemDimensions.height);
}); });
} }
function clearPaths(){ function clearPaths(){
var canvasHeight = $('#canvasBuildSpace').height(); var canvasHeight = $('#canvasBuildSpace').height();
var canvasWidth = $('#canvasBuildSpace').width(); var canvasWidth = $('#canvasBuildSpace').width();
context.clearRect(0, 0, canvasWidth, canvasHeight); cabinetCtx.clearRect(0, 0, canvasWidth, canvasHeight);
$('a.addCabButton').remove(); $('a.addCabButton').remove();
drawPathConnections();
}
function clearPathConnections(){
var canvasHeight = $('#canvasBuildSpace').height();
var canvasWidth = $('#canvasBuildSpace').width();
pathCtx.clearRect(0, 0, canvasWidth, canvasHeight);
} }
function crawlPath(selectedPort){ function crawlPath(selectedPort){
@ -315,27 +322,26 @@ function crawlPath(selectedPort){
}; };
} }
function crawlPathDiagram(){ function crawlPathConnections(){
var pathDiagram = {}; var pathConections = {};
var connectorElementArray = $('#containerFullPath').find('.port'); var connectorElementArray = $('#containerFullPath').find('.port');
$.each(connectorElementArray, function(index, element){ $.each(connectorElementArray, function(index, element){
console.log('here1');
if($(element).data('connectionPairId') !== undefined) { if($(element).data('connectionPairId') !== undefined) {
console.log('here2');
var connectionPairID = $(element).data('connectionPairId'); var connectionPairID = $(element).data('connectionPairId');
if(pathDiagram[connectionPairID] === undefined) { if(pathConections[connectionPairID] === undefined) {
console.log('here3'); console.log('here3');
pathDiagram[connectionPairID] = []; pathConections[connectionPairID] = [];
} }
pathDiagram[connectionPairID].push($(element)); pathConections[connectionPairID].push($(element));
} }
}); });
$(document).data('pathDiagram', pathDiagram); $(document).data('pathConections', pathConections);
} }
function drawPathDiagram(){ function drawPath(){
crawlPathDiagram(); clearPathConnections();
drawConnectionDiagram(); crawlPathConnections();
drawPathConnections();
} }
function makePortsHoverable(){ function makePortsHoverable(){
@ -354,7 +360,7 @@ function makePortsHoverable(){
highlightElement(pathElementArray['partitionArray'], 'black'); highlightElement(pathElementArray['partitionArray'], 'black');
drawTrunk(pathElementArray['trunkArray']); drawTrunk(pathElementArray['trunkArray']);
highlightElement(pathElementArray['portArray'], 'LightSkyBlue'); highlightElement(pathElementArray['portArray'], 'LightSkyBlue');
drawConnection(pathElementArray['connectionArray']); drawCabinetConnections(pathElementArray['connectionArray']);
}, function(){ }, function(){
redraw(); redraw();
@ -371,8 +377,8 @@ function makePortsHoverable(){
//pathID++; //pathID++;
// This allows only 1 persistant path at a time // This allows only 1 persistant path at a time
pathID = 0; pathID = 0;
if(typeof pathData[pathID] != 'undefined') { if(typeof $(document).data('cabinetConnections')[pathID] != 'undefined') {
$.each(pathData[pathID]['portArray'], function(){ $.each($(document).data('cabinetConnections')[pathID]['portArray'], function(){
$(this).removeData('pathID'); $(this).removeData('pathID');
}); });
} }
@ -389,17 +395,18 @@ function makePortsHoverable(){
'trunkArray': pathElementArray['trunkArray'], 'trunkArray': pathElementArray['trunkArray'],
'partitionArray': pathElementArray['partitionArray'] 'partitionArray': pathElementArray['partitionArray']
}; };
pathData[pathID] = workingPathData; $(document).data('cabinetConnections')[pathID] = workingPathData;
} else { } else {
// Clear pathIDs from ports // Clear pathIDs from ports
var thisPathID = $(this).data('pathID'); var thisPathID = $(this).data('pathID');
$.each(pathData[thisPathID]['portArray'], function(){ $.each($(document).data('cabinetConnections')[thisPathID]['portArray'], function(){
$(this).removeData('pathID'); $(this).removeData('pathID');
}); });
// Clear connection path // Clear connection path
delete pathData[thisPathID]; delete $(document).data('cabinetConnections')[thisPathID];
} }
}); });
}); });
@ -407,34 +414,32 @@ function makePortsHoverable(){
} }
function refreshPathData(){ function refreshPathData(){
if(typeof pathData != 'undefined') { var cabinetConnections = $(document).data('cabinetConnections');
pathDataOrig = pathData; pathDataOrig = pathData;
pathData = {}; $.each(pathDataOrig, function(pathID, path){
$.each(pathDataOrig, function(pathID, path){ $.each(path['portArray'], function(portIndex, port){
$.each(path['portArray'], function(portIndex, port){ var portID = $(port).attr('id');
var portID = $(port).attr('id'); if($('#'+portID).length) {
if($('#'+portID).length) { var pathElementArray = crawlPath($('#'+portID));
var pathElementArray = crawlPath($('#'+portID));
// Associate ports to pathIDs
// Associate ports to pathIDs $.each(pathElementArray['portArray'], function(){
$.each(pathElementArray['portArray'], function(){ $(this).data('pathID', pathID);
$(this).data('pathID', pathID); });
});
// Store connection path
// Store connection path var workingCabinetConnections = {
var workingPathData = { 'portArray': pathElementArray['portArray'],
'portArray': pathElementArray['portArray'], 'connectionArray': pathElementArray['connectionArray'],
'connectionArray': pathElementArray['connectionArray'], 'trunkArray': pathElementArray['trunkArray'],
'trunkArray': pathElementArray['trunkArray'], 'partitionArray': pathElementArray['partitionArray']
'partitionArray': pathElementArray['partitionArray'] };
}; $(document).data('cabinetConnections', workingCabinetConnections);
pathData[pathID] = workingPathData;
return false;
return false; }
}
});
}); });
} });
} }
function makeCabArrowsClickable(){ function makeCabArrowsClickable(){
@ -483,27 +488,33 @@ function resizeCanvas() {
function redraw() { function redraw() {
clearPaths(); clearPaths();
if(typeof pathData != 'undefined') { var cabinetConnections = $(document).data('cabinetConnections');
$.each(pathData, function(pathID, path){ if(typeof cabinetConnections != 'undefined') {
$.each(cabinetConnections, function(pathID, path){
drawTrunk(path['trunkArray']); drawTrunk(path['trunkArray']);
highlightElement(path['partitionArray'], 'MidnightBlue'); highlightElement(path['partitionArray'], 'MidnightBlue');
drawConnection(path['connectionArray']); drawCabinetConnections(path['connectionArray']);
highlightElement(path['portArray'], 'LightSkyBlue'); highlightElement(path['portArray'], 'LightSkyBlue');
}); });
} }
drawConnectionDiagram();
} }
function initializeCanvas() { function initializeCanvas() {
// Register an event listener to call the resizeCanvas() function
// each time the window is resized.
window.addEventListener('resize', resizeCanvas, false); window.addEventListener('resize', resizeCanvas, false);
htmlCanvas = document.getElementById('canvasBuildSpace'); htmlCanvas = document.getElementById('canvasBuildSpace');
context = htmlCanvas.getContext('2d'); var lineWidth = 10;
// Cabinet connections
cabinetCtx = htmlCanvas.getContext('2d');
cabinetCtx.lineWidth = lineWidth;
$(document).data('cabinetConnections', {});
canvasInset = 10; canvasInset = 10;
context.lineWidth = 10;
pathData = {};
$(document).data('pathDiagram', {});
pathID = 0; pathID = 0;
// Path connections
pathCtx = htmlCanvas.getContext('2d');
pathCtx.lineWidth = lineWidth;
$(document).data('pathConections', {});
} }

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

@ -261,7 +261,7 @@ function retrievePortPath(objID, objFace, partitionDepth, portID){
} else { } else {
$('#containerFullPath').html(responseJSON.success); $('#containerFullPath').html(responseJSON.success);
makeCableConnectorsClickable(); makeCableConnectorsClickable();
drawPathDiagram(); drawPath();
} }
}); });
} }
@ -713,6 +713,7 @@ $( document ).ready(function() {
$('#printFullPath').on('click', function(event){ $('#printFullPath').on('click', function(event){
event.preventDefault(); event.preventDefault();
$('#containerFullPath').printThis({ $('#containerFullPath').printThis({
canvas: true,
importStyle: true, importStyle: true,
removeInline: true, removeInline: true,
removeInlineSelector: "img" removeInlineSelector: "img"