dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- improved drag&drop system selection (live preview for selected systems)

Browse Source 
- improved drag&drop system selection performance ( added requestAnimationFrame() API for smother rendering)
- improved signature table JS update counter for (created, updated columns)
This commit is contained in:
Exodus4D
2016-09-18 18:32:33 +02:00
parent 976f236951
commit 7a187ecbb9
8 changed files with 177 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/app/counter.js
View File

@@ -78,7 +78,7 @@ define([
}else{
clearInterval( element.data('interval') );
}
}, 100);
}, 500);
element.data('interval', refreshIntervalId);
}

2
js/app/map/map.js
View File

@@ -2102,6 +2102,7 @@ define([
// init drag-frame selection
$(mapContainer).dragToSelect({
selectOnMove: true,
selectables: '.' + config.systemClass,
onHide: function (selectBox, deselectedSystems) {
var selectedSystems = $(mapContainer).getSelectedSystems();
@@ -2120,7 +2121,6 @@ define([
for(var j = 0; j < deselectedSystems.length; j++){
map.removeFromDragSelection( deselectedSystems[j] );
}
},
onShow: function(){
$(document).trigger('pf:closeMenu', [{}]);

174
js/lib/jquery.dragToSelect.js
View File

@@ -69,8 +69,12 @@ jQuery.fn.dragToSelect = function (conf) {
var realParent = jQuery(this);
var parent = realParent;
var animationFrameId;
var mouseIsDown = false;
var lastMousePosition = { x: 0, y: 0 };
// deselected items
var deselectedItems = [];
var deselectedItems = $();
do {
if (/auto|scroll|hidden/.test(parent.css('overflow'))) {
@@ -130,9 +134,11 @@ jQuery.fn.dragToSelect = function (conf) {
};
// Refreshes the select box dimensions and possibly position
var refreshSelectBox = function (e) {
var refreshSelectBox = function () {
var refreshed = false;
if (!selectBox.is('.' + config.activeClass) || parent.is('.' + config.disabledClass)) {
return;
return refreshed;
}
// get scroll position
@@ -147,13 +153,12 @@ jQuery.fn.dragToSelect = function (conf) {
rightScroll = realParent.data('scrollRight');
}
var left = e.pageX - parentDim.left + parent[0].scrollLeft;
var top = e.pageY - parentDim.top + parent[0].scrollTop;
var left = lastMousePosition.x - parentDim.left + parent[0].scrollLeft;
var top = lastMousePosition.y - parentDim.top + parent[0].scrollTop;
var newLeft = left;
var newTop = top;
var tempWidth = selectBoxOrigin.left - newLeft ;
var newHeight = selectBoxOrigin.top - newTop;
newLeft = selectBoxOrigin.left - leftScroll;
var newWidth = left - selectBoxOrigin.left;
@@ -169,19 +174,28 @@ jQuery.fn.dragToSelect = function (conf) {
newHeight = top - selectBoxOrigin.top;
}
var css = {
left: newLeft + 'px',
top: newTop + 'px',
width: newWidth + 'px',
height: newHeight + 'px'
};
selectBox.css(css);
// check if dimension has changed -> save performance
var dimensionHash = [newWidth, newHeight].join('_');
config.onRefresh();
if(selectBox.data('dimension-hash') !== dimensionHash){
selectBox.data('dimension-hash', dimensionHash);
var css = {
left: newLeft + 'px',
top: newTop + 'px',
width: newWidth + 'px',
height: newHeight + 'px'
};
selectBox.css(css);
config.onRefresh();
refreshed = true;
}
return refreshed;
};
// Hides the select box
var hideSelectBox = function (e) {
var hideSelectBox = function () {
if (!selectBox.is('.' + config.activeClass) || parent.is('.' + config.disabledClass)) {
return;
}
@@ -229,9 +243,6 @@ jQuery.fn.dragToSelect = function (conf) {
height: selectBox.height()
};
// reset deselected item array
deselectedItems = [];
selectables.each(function (i) {
var el = $(this);
var elOffset = el.offset();
@@ -244,13 +255,14 @@ jQuery.fn.dragToSelect = function (conf) {
if (percentCovered(selectBoxDim, elDim) > config.percentCovered) {
el.addClass(config.selectedClass);
// remove element from "deselected" elements (e.g on add -> remove -> add scenario)
deselectedItems = deselectedItems.not(el);
}else {
if(el.hasClass(config.selectedClass)){
el.removeClass(config.selectedClass);
deselectedItems.push(el);
deselectedItems = deselectedItems.add(el);
}
}
});
@@ -301,80 +313,64 @@ jQuery.fn.dragToSelect = function (conf) {
return 0;
};
// Do the right stuff then return this
selectBox
.mousemove(function (e) {
// Event functions ----------------------------------------------------------------------------
var mousemoveCallback = function(){
if(mouseIsDown){
var refreshed = refreshSelectBox();
refreshSelectBox(e);
if (config.selectables && config.selectOnMove) {
selectElementsInRange();
}
if (config.autoScroll) {
scrollPerhaps(e);
}
e.preventDefault();
})
.mouseup(function(e) {
if (config.selectables) {
selectElementsInRange();
}
hideSelectBox(e);
e.preventDefault();
});
parent.mousedown(function (e) {
if(
e.which === 1 && // left mouse down
e.target === realParent[0] // prevent while dragging a system :)
){
// Make sure user isn't clicking scrollbar (or disallow clicks far to the right actually)
if ((e.pageX + 20) > jQuery(document.body).width()) {
return;
}
showSelectBox(e);
e.preventDefault();
}
});
var dragSelectMousemove = function (e) {
refreshSelectBox(e);
if (config.selectables && config.selectOnMove) {
selectElementsInRange();
}
if (config.autoScroll) {
scrollPerhaps(e);
}
e.preventDefault();
};
parent.mousemove( dragSelectMousemove );
parent.mouseup(function (e) {
if (config.selectables) {
if(refreshed && config.selectables && config.selectOnMove){
selectElementsInRange();
}
hideSelectBox(e);
// recursive re-call on next render
animationFrameId = requestAnimationFrame(mousemoveCallback);
}
}
var mouseupCallback = function(){
if (config.selectables){
selectElementsInRange();
}
hideSelectBox();
// stop animation frame and "reset" to default
cancelAnimationFrame(animationFrameId);
mouseIsDown = false;
// reset deselected item array
deselectedItems = $();
}
// Do the right stuff then return this --------------------------------------------------------
selectBox.mousemove(function(e){
lastMousePosition.x = e.pageX;
lastMousePosition.y = e.pageY;
e.preventDefault();
}).mouseup(mouseupCallback);
parent.mousedown(function(e){
if (
e.which === 1 && // left mouse down
e.target === realParent[0] // prevent while dragging a system :)
) {
// Make sure user isn't clicking scrollbar (or disallow clicks far to the right actually)
if ((e.pageX + 20) > jQuery(document.body).width()) {
return;
}
showSelectBox(e);
mouseIsDown = true;
animationFrameId = requestAnimationFrame(mousemoveCallback);
}
e.preventDefault();
}).mousemove(function(e){
lastMousePosition.x = e.pageX;
lastMousePosition.y = e.pageY;
e.preventDefault();
}).mouseup(mouseupCallback);
e.preventDefault();
});
// Be nice
return this;

2
public/css/pathfinder.css
View File

File diff suppressed because one or more lines are too long

2
public/js/v1.1.5/app/counter.js
View File

@@ -78,7 +78,7 @@ define([
}else{
clearInterval( element.data('interval') );
}
}, 100);
}, 500);
element.data('interval', refreshIntervalId);
}

2
public/js/v1.1.5/app/map/map.js
View File

@@ -2102,6 +2102,7 @@ define([
// init drag-frame selection
$(mapContainer).dragToSelect({
selectOnMove: true,
selectables: '.' + config.systemClass,
onHide: function (selectBox, deselectedSystems) {
var selectedSystems = $(mapContainer).getSelectedSystems();
@@ -2120,7 +2121,6 @@ define([
for(var j = 0; j < deselectedSystems.length; j++){
map.removeFromDragSelection( deselectedSystems[j] );
}
},
onShow: function(){
$(document).trigger('pf:closeMenu', [{}]);

174
public/js/v1.1.5/lib/jquery.dragToSelect.js
View File

@@ -69,8 +69,12 @@ jQuery.fn.dragToSelect = function (conf) {
var realParent = jQuery(this);
var parent = realParent;
var animationFrameId;
var mouseIsDown = false;
var lastMousePosition = { x: 0, y: 0 };
// deselected items
var deselectedItems = [];
var deselectedItems = $();
do {
if (/auto|scroll|hidden/.test(parent.css('overflow'))) {
@@ -130,9 +134,11 @@ jQuery.fn.dragToSelect = function (conf) {
};
// Refreshes the select box dimensions and possibly position
var refreshSelectBox = function (e) {
var refreshSelectBox = function () {
var refreshed = false;
if (!selectBox.is('.' + config.activeClass) || parent.is('.' + config.disabledClass)) {
return;
return refreshed;
}
// get scroll position
@@ -147,13 +153,12 @@ jQuery.fn.dragToSelect = function (conf) {
rightScroll = realParent.data('scrollRight');
}
var left = e.pageX - parentDim.left + parent[0].scrollLeft;
var top = e.pageY - parentDim.top + parent[0].scrollTop;
var left = lastMousePosition.x - parentDim.left + parent[0].scrollLeft;
var top = lastMousePosition.y - parentDim.top + parent[0].scrollTop;
var newLeft = left;
var newTop = top;
var tempWidth = selectBoxOrigin.left - newLeft ;
var newHeight = selectBoxOrigin.top - newTop;
newLeft = selectBoxOrigin.left - leftScroll;
var newWidth = left - selectBoxOrigin.left;
@@ -169,19 +174,28 @@ jQuery.fn.dragToSelect = function (conf) {
newHeight = top - selectBoxOrigin.top;
}
var css = {
left: newLeft + 'px',
top: newTop + 'px',
width: newWidth + 'px',
height: newHeight + 'px'
};
selectBox.css(css);
// check if dimension has changed -> save performance
var dimensionHash = [newWidth, newHeight].join('_');
config.onRefresh();
if(selectBox.data('dimension-hash') !== dimensionHash){
selectBox.data('dimension-hash', dimensionHash);
var css = {
left: newLeft + 'px',
top: newTop + 'px',
width: newWidth + 'px',
height: newHeight + 'px'
};
selectBox.css(css);
config.onRefresh();
refreshed = true;
}
return refreshed;
};
// Hides the select box
var hideSelectBox = function (e) {
var hideSelectBox = function () {
if (!selectBox.is('.' + config.activeClass) || parent.is('.' + config.disabledClass)) {
return;
}
@@ -229,9 +243,6 @@ jQuery.fn.dragToSelect = function (conf) {
height: selectBox.height()
};
// reset deselected item array
deselectedItems = [];
selectables.each(function (i) {
var el = $(this);
var elOffset = el.offset();
@@ -244,13 +255,14 @@ jQuery.fn.dragToSelect = function (conf) {
if (percentCovered(selectBoxDim, elDim) > config.percentCovered) {
el.addClass(config.selectedClass);
// remove element from "deselected" elements (e.g on add -> remove -> add scenario)
deselectedItems = deselectedItems.not(el);
}else {
if(el.hasClass(config.selectedClass)){
el.removeClass(config.selectedClass);
deselectedItems.push(el);
deselectedItems = deselectedItems.add(el);
}
}
});
@@ -301,80 +313,64 @@ jQuery.fn.dragToSelect = function (conf) {
return 0;
};
// Do the right stuff then return this
selectBox
.mousemove(function (e) {
// Event functions ----------------------------------------------------------------------------
var mousemoveCallback = function(){
if(mouseIsDown){
var refreshed = refreshSelectBox();
refreshSelectBox(e);
if (config.selectables && config.selectOnMove) {
selectElementsInRange();
}
if (config.autoScroll) {
scrollPerhaps(e);
}
e.preventDefault();
})
.mouseup(function(e) {
if (config.selectables) {
selectElementsInRange();
}
hideSelectBox(e);
e.preventDefault();
});
parent.mousedown(function (e) {
if(
e.which === 1 && // left mouse down
e.target === realParent[0] // prevent while dragging a system :)
){
// Make sure user isn't clicking scrollbar (or disallow clicks far to the right actually)
if ((e.pageX + 20) > jQuery(document.body).width()) {
return;
}
showSelectBox(e);
e.preventDefault();
}
});
var dragSelectMousemove = function (e) {
refreshSelectBox(e);
if (config.selectables && config.selectOnMove) {
selectElementsInRange();
}
if (config.autoScroll) {
scrollPerhaps(e);
}
e.preventDefault();
};
parent.mousemove( dragSelectMousemove );
parent.mouseup(function (e) {
if (config.selectables) {
if(refreshed && config.selectables && config.selectOnMove){
selectElementsInRange();
}
hideSelectBox(e);
// recursive re-call on next render
animationFrameId = requestAnimationFrame(mousemoveCallback);
}
}
var mouseupCallback = function(){
if (config.selectables){
selectElementsInRange();
}
hideSelectBox();
// stop animation frame and "reset" to default
cancelAnimationFrame(animationFrameId);
mouseIsDown = false;
// reset deselected item array
deselectedItems = $();
}
// Do the right stuff then return this --------------------------------------------------------
selectBox.mousemove(function(e){
lastMousePosition.x = e.pageX;
lastMousePosition.y = e.pageY;
e.preventDefault();
}).mouseup(mouseupCallback);
parent.mousedown(function(e){
if (
e.which === 1 && // left mouse down
e.target === realParent[0] // prevent while dragging a system :)
) {
// Make sure user isn't clicking scrollbar (or disallow clicks far to the right actually)
if ((e.pageX + 20) > jQuery(document.body).width()) {
return;
}
showSelectBox(e);
mouseIsDown = true;
animationFrameId = requestAnimationFrame(mousemoveCallback);
}
e.preventDefault();
}).mousemove(function(e){
lastMousePosition.x = e.pageX;
lastMousePosition.y = e.pageY;
e.preventDefault();
}).mouseup(mouseupCallback);
e.preventDefault();
});
// Be nice
return this;

5
sass/library/drag-to-select/_dragToSelect.scss
View File

@@ -8,13 +8,12 @@ div.pf-map-drag-to-select {
opacity: 0; // triggered by js
z-index: 9000;
border: 1px dashed $gray-lighter;
will-change: opacity, visibility;
will-change: left, top, width, height, opacity;
@include border-radius(5px);
@include transition(opacity 0.15s linear, visibility 0.15s linear);
@include transition(opacity 0.15s linear);
&.active {
visibility: visible;
opacity: 0.3;
}
}