Add drag-and-drop reordering of favorite presets

This commit is contained in:
Quincy Morgan
2019-03-05 20:21:54 -05:00
parent 944c116b0b
commit 776c0556e1
2 changed files with 51 additions and 23 deletions

View File

@@ -316,6 +316,12 @@ export function coreContext() {
context.getFavoritePresets = function() {
return JSON.parse(context.storage('favorite_presets')) || [];
};
function setFavoritePresets(favs) {
context.storage('favorite_presets', JSON.stringify(favs));
//and call update on modes
dispatch.call('favoritePreset');
}
context.favoritePreset = function(preset, geom) {
var favs = context.getFavoritePresets();
@@ -333,18 +339,20 @@ export function coreContext() {
// prepend array
favs.unshift({id: preset.id, geom: geom});
}
context.storage('favorite_presets', JSON.stringify(favs));
//and call update on modes
dispatch.call('favoritePreset');
setFavoritePresets(favs);
};
context.isFavoritePreset = function(preset, geom) {
var favs = context.getFavoritePresets();
return favs.some(function(d) {
return d.id === preset.id && d.geom === geom;
});
};
context.moveFavoritePreset = function(fromIndex, toIndex) {
var favs = context.getFavoritePresets();
favs.splice(toIndex, 0, favs.splice(fromIndex, 1)[0]);
setFavoritePresets(favs);
};
/* Map */
var map;

View File

@@ -125,7 +125,7 @@ export function uiModes(context) {
var data = favoriteModes;
var buttons = selection.selectAll('button.add-button')
.data(data, function(d) { return d.button; });
.data(data, function(d, index) { return d.button + index; });
// exit
buttons.exit()
@@ -170,7 +170,7 @@ export function uiModes(context) {
}
});
var dragOrigin;
var dragOrigin, targetIndex;
buttonsEnter.call(d3_drag()
.on('start', function() {
@@ -179,45 +179,65 @@ export function uiModes(context) {
y: d3_event.y
};
})
.on('drag', function() {
.on('drag', function(d, index) {
var x = d3_event.x - dragOrigin.x,
y = d3_event.y - dragOrigin.y;
d3_select(this)
.classed('dragging', true)
.classed('removing', y > 50)
.style('transform', 'translate(' + x + 'px, ' + y + 'px)');
.classed('removing', y > 50);
targetIndex = null;
selection.selectAll('button.add-preset')
.style('transform', function(d2, index2) {
if (index === index2) {
return 'translate(' + x + 'px, ' + y + 'px)';
} else if (y > 50) {
if (index2 > index) {
return 'translateX(-100%)';
}
} else if (index2 > index && d3_event.x > d3_select(this).node().offsetLeft) {
if (targetIndex === null || index2 > targetIndex) {
targetIndex = index2;
}
return 'translateX(-100%)';
} else if (index2 < index && d3_event.x < d3_select(this).node().offsetLeft + d3_select(this).node().offsetWidth) {
if (targetIndex === null || index2 < targetIndex) {
targetIndex = index2;
}
return 'translateX(100%)';
}
return null;
});
})
.on('end', function(d) {
.on('end', function(d, index) {
d3_select(this)
.classed('dragging', false)
.classed('removing', false)
.classed('removing', false);
selection.selectAll('button.add-preset')
.style('transform', null);
var y = d3_event.y - dragOrigin.y;
if (y > 50) {
// dragged out of the top bar, remove the favorite
context.favoritePreset(d.preset, d.geometry);
} else if (targetIndex !== null) {
// dragged to a new position, reorder
context.moveFavoritePreset(index, targetIndex);
}
})
);
/*
buttonsEnter
.append('span')
.attr('class', 'label')
.text(function(mode) { return mode.title; });
*/
// if we are adding/removing the buttons, check if toolbar has overflowed
if (buttons.enter().size() || buttons.exit().size()) {
context.ui().checkOverflow('#bar', true);
}
// update
buttons = buttons
.merge(buttonsEnter)
.classed('disabled', function(d) { return !enabled(d); });
// check if toolbar has overflowed
context.ui().checkOverflow('#bar', true);
}
};
}