Commit 758277ea authored by Fintan Mc Gee's avatar Fintan Mc Gee

minor fixes in progress

Fixes  loss ( and reset) of zooming when draging and interacting
Fixed rescale issue on graph load ( graph now scales  correctly first time)

Avoided unnnecessary scaling / loss of zoom after selection updates
parent 4c9c57cd
......@@ -34,7 +34,7 @@
<div ng-repeat = "cGraph in model.displayGraphs" style = "display: inline-block; width: 50%; height: 60%;">
<div class="centeredDiv">{{cGraph.graphDisplayName}}</div>
<!--<svg-directive class= "bordered-graph-custom_size" givenId="{{cGraph.tagName}}" graphname="{{cGraph.graph}}" combinationName = "{{model.combinationName}}" width=0.45 height = 0.8 selectacrossalllayers = "true"></svg-directive>-->
<svg-labels-directive class= "bordered-graph-custom_size" givenId="{{cGraph.tagName}}" graphname="{{cGraph.graph}}" combinationName = "{{model.combinationName}}" width=0.45 height = 0.8 selectacrossalllayers = "true"></svg-labels-directive >
<svg-labels-directive class= "bordered-graph-custom_size" givenId="{{cGraph.tagName}}" graphname="{{cGraph.graph}}" combinationName = "{{model.combinationName}}" crossgraphmouseover = "true" width=0.45 height = 0.8 selectacrossalllayers = "true"></svg-labels-directive >
</div>
</div>
</div>
......
......@@ -3,7 +3,7 @@
<ng-include src="'./html/templates/sideMenus.html'"></ng-include>
<ng-include src="'./html/templates/warningMessage.html'"></ng-include>
<div style="position:relative;display:inline-block;width: 95%;">
<svg-labels-directive class="bordered-graph"></svg-labels-directive>
<svg-labels-directive class="bordered-graph" selectacrossalllayers = "true"></svg-labels-directive>
<!--<div class ="centeredDiv" id="graphDiv"></div><ng-include src="'./html/templates/simpleGraphOptions.html'"></ng-include>-->
<div id="tooltip"></div>
<div id="nodeInfo"></div>
......
......@@ -142,15 +142,17 @@ angular.module('blizaarModule.controllers', [])
* Created By : Fintan McGee (LIST)
* Date: 01/07/2016
*******************************/
$scope.scaleGraph = function (graph, width, height) {
$scope.scaleGraph = function (graph, width, height, borderBuffer) {
if(!graph){
return;
}
// console.log("Rescaling Graph:" + graph.name + "to width:" + width+ " height:"+ height + ".");
var maxX = Number.MIN_VALUE,
maxY = Number.MIN_VALUE,
minX = Number.MAX_VALUE,
minY = Number.MAX_VALUE,
edgeBuffer = 5, // min distance to place nodes from view edge
edgeBuffer = borderBuffer || 50, // min distance to place nodes from view edge
xScale = null,
yScale = null;
graph.nodes.forEach(function (n) {
......@@ -174,8 +176,8 @@ angular.module('blizaarModule.controllers', [])
minY = n.y;
}
});
xScale = d3.scaleLinear().domain([minX-10, maxX+10]).range([edgeBuffer, width - edgeBuffer]);
yScale = d3.scaleLinear().domain([minY-10, maxY+10]).range([edgeBuffer, height - edgeBuffer]);
xScale = d3.scaleLinear().domain([minX, maxX]).range([edgeBuffer, width - edgeBuffer]);
yScale = d3.scaleLinear().domain([minY, maxY]).range([edgeBuffer, height - edgeBuffer]);
var maxX =-999999, maxY = -9999999, minY = 9999999999 , minX = 9999999999999 ;
graph.nodes.forEach(function (n) {
n.x = xScale(n.x);
......@@ -290,7 +292,11 @@ angular.module('blizaarModule.controllers', [])
$scope.refreshSelection = function(newSelection,added,removed) {
angular.element(document).ready(function () {
$rootScope.$broadcast ('selectionChanged',{selection:newSelection, add:added,remove:removed});
if(newSelection) {
$rootScope.$broadcast('selectionChanged', {selection: newSelection, add: added, remove: removed});
} else {
$rootScope.$broadcast('selectionChanged');
}
});
};
......
......@@ -23,12 +23,17 @@ angular.module('blizaarModule.controllers')
$scope.model.selectedSecondaryAspectName = "";
$scope.model.availableSecondaryAspects = [];
$scope.model.displayGraphs = []; //grphs to be displaxed in a row
$scope.highlightNodeIds = [];
// usually of the form {graphDisplayName; graph: [ref]}
/**************************************
* initializeAspects()
......@@ -167,12 +172,27 @@ angular.module('blizaarModule.controllers')
if( layoutCompleteCount === masterGraph.aspectCombinations.length ) {
$scope.refreshGraph();
}
});
});
}
}
$scope.highlightNeighbourSetInAll = function(nodeUid, layerName) {
// get the set of node Neighbours in Layer
var highlightNodeIds = multiLayerGraphService.getGraph().getLayerByName(layerName).getNeighboursByUid(nodeUid);
highlightNodeIds.push(nodeUid)
$scope.highlightNodeIds = angular.copy(highlightNodeIds);
$scope.$broadcast("highlightNodeSet",{ nodeUidArray: highlightNodeIds});
}
$scope.clearHighlight = function() {
$scope.$broadcast("highlightNodeSet");
}
$scope.$watch('model.selectedLayerLocal', function(newData, oldData){
// layer has changged need to refresh the graph
if(newData !== oldData) {
......
......@@ -36,6 +36,9 @@ angular.module('blizaarModule.directives')
//ovelap removal force functtion
var nodeHeight = 15,
nodeWidth = 100;
var doInititialScaleGraph = true;
var drawCount = 0;
var previousZoomtransform = null;
function rectangleNodeOverlapPreventionForce () {
var dataNodes;
......@@ -162,7 +165,8 @@ angular.module('blizaarModule.directives')
graphData,
linkColor,
visualHiglightList, // a map where keys are all nodes to be highlighted with a halo
visualHighlightType = "fadeOthers"; // options are "halo" and "fadeOthers"
visualHighlightType = "fadeOthers",
crossGraphMouseover = false; // options are "halo" and "fadeOthers"
// noinspection JSUnresolvedVariable
if(params !== undefined && params.givenid !== undefined) {
......@@ -197,6 +201,13 @@ angular.module('blizaarModule.directives')
// noinspection JSUnresolvedVariable
inputGraphIndex = params.graphindex;
}
if(params !== undefined && params.crossgraphmouseover !== undefined) {
// noinspection JSUnresolvedVariable
crossGraphMouseover = params.crossgraphmouseover === "true";
}
var width = window.innerWidth * dimWidth,
height = window.innerHeight * dimHeight,
linkforce = d3.forceLink().id(function(d) { return d.index }),
......@@ -248,7 +259,7 @@ angular.module('blizaarModule.directives')
getNodeImage,
drawIcons = scope.getDisplayIcons(),
wasDragged = false,
previousZoomtransform,
zoom = d3.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
......@@ -292,9 +303,17 @@ angular.module('blizaarModule.directives')
});
if(scaleGraph){
if(doInititialScaleGraph) {
scope.scaleGraph(graphData, width, height);
doInititialScaleGraph = false;
console.log("Draw count for " + id + ": " + (++drawCount))
} else{
console.log("Draw count for " + id + ": " + (++drawCount));
}
if(scaleGraph){
scope.scaleGraph(graphData, width, height);
}
dragStart = function(n) {
if(!scope.getUseDrag()){
......@@ -417,10 +436,16 @@ angular.module('blizaarModule.directives')
mouseover = function (n) {
//tooltipService.showTooltipForNode(n);
tooltipService.showCustomTooltipForNode(n,graphData.name);
if(crossGraphMouseover) {
scope.highlightNeighbourSetInAll(n.uid, graphData.name)
};
};
// Describe the mouse out methods
mouseout = function () {
tooltipService.hideTooltip();
if(crossGraphMouseover) {
scope.clearHighlight();
}
};
// Describe the mouse double click method
dbclick = function (n) {
......@@ -602,7 +627,7 @@ angular.module('blizaarModule.directives')
positionFunc = function () {
//const currentTransform = d3.event.transform;
if(previousZoomtransform) {
const currentTransform = d3.event.transform;
// const currentTransform = d3.event.transform;
// visContainer.attr("transform", currentTransform);
link.attr("x1", function (d) { return previousZoomtransform.applyX(d.source.x); })
.attr("y1", function (d) { return previousZoomtransform.applyY(d.source.y); })
......@@ -624,7 +649,7 @@ angular.module('blizaarModule.directives')
});
}
if(previousZoomtransform) {
const currentTransform = d3.event.transform;
//const currentTransform = d3.event.transform;
// visContainer.attr("transform", currentTransform);
node.attr("transform", function (d) {
......@@ -739,7 +764,7 @@ angular.module('blizaarModule.directives')
scope.$on('selectionChanged', function(){
doRefresh(true);
doRefresh(false);
});
......
......@@ -291,6 +291,29 @@ var MultiLayerGraph = function (nodes, links, layerName) {
return g.adjacencyList[inputNode.id];
};
/**************************************
* getNeighboursByUid
* Functionality: returns refs to all nodes adjacent to input
* builds adjacencyList if it does not exist
* Created By : Fintan McGee (LIST)
* Date: 11/07/2017
********************************/
g.getNeighboursByUid = function (inputNodeUid) {
if(!g.adjacencyList ) {
g.buildAdjacencyList();
}
if(!g.adjacencyList.hasOwnProperty(inputNodeUid)) {
console.log("ERROR getNeighbours could not find node in adjacently List " + JSON.stringify(inputNode));
return [];
}
var nUIds = [];
g.adjacencyList[inputNodeUid].forEach(function(n) {
nUIds.push(n.uid)
});
return nUIds;
};
/**************************************
* getNeighboursInTargetLayer
* Functionality: returns all neighbours of the specified node Uid in the target other Layer
......@@ -1404,7 +1427,7 @@ var MultiLayerGraph = function (nodes, links, layerName) {
g.aspectCombinations.forEach(function (layer) {
if (layer.name === layerName) {
foundLayer = layer;
console.log("getLayerByName found the specified layer in a combination: " + layerName );
// console.log("getLayerByName found the specified layer in a combination: " + layerName );
}
});
}
......
......@@ -24,6 +24,7 @@ angular.module('blizaarModule.services')
};
var lasso_end = function () {
var selectedNodeList = scope.getSelectedNodeList();
var selected;
// var data = thisArea.data.objects;
//var keys = Object.keys(thisArea.database.data[0]);
......@@ -38,7 +39,8 @@ angular.module('blizaarModule.services')
// Style the selected dots
selected =lasso.selectedItems().select(function (d) {
d.isSelected = true;
scope.model.selectedNodeList.push(d);
selectedNodeList.push(d);
// scope.model.selectedNodeList.push(d);
})
.classed("not_possible",false)
.classed("possible",false)
......@@ -49,9 +51,13 @@ angular.module('blizaarModule.services')
// Reset the style of the not selected dots
lasso.notSelectedItems().select(function (d) {
var selectedNodeList = scope.getSelectedNodeList();
d.isSelected = false;
if(scope.model.selectedNodeList.indexOf(d)> -1) {
scope.model.selectedNodeList.splice(scope.model.selectedNodeList.indexOf(d), 1)
// if(scope.model.selectedNodeList.indexOf(d)> -1) {
// scope.model.selectedNodeList.splice(scope.model.selectedNodeList.indexOf(d), 1)
// }
if(selectedNodeList.indexOf(d)> -1) {
selectedNodeList.splice(selectedNodeList.indexOf(d), 1)
}
})
.classed("not_possible",false)
......@@ -68,7 +74,8 @@ angular.module('blizaarModule.services')
//Remove duplicates from selectedItems
//removeDuplicates(selectedItems,keys);
scope.refreshGraph();
//scope.refreshGraph();
scope.refreshSelection();
};
// Create the area where the lasso event can be triggered
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment