Workaround for incorrect frame selection after re-ordering on Firefox

This commit is related to the following issue: #363

When a frame is dropped both `mouseup` and `click` events are triggered on Firefox. This is somwhat expected behaviour but other browsers do not trigger the `click` event.

One would expect jquery-ui to work the same across all browsers but when they got a bug report they decided to not change anything:
https://bugzilla.mozilla.org/show_bug.cgi?id=787944

The most comon workaround appears to be to use the `clone` helper in jquery-ui sortable. Unfortunately this doesn't work because the cloned frame doesn't keep the contents of the canvas. This seemed like the cleanest workaround, here are a few others:
http://stackoverflow.com/questions/947195/jquery-ui-sortable-how-can-i-cancel-the-click-event-on-an-item-thats-dragged
This commit is contained in:
Zoee Silcock 2016-12-29 09:47:23 +01:00
parent e43cee3c94
commit 2dea7faea0

View File

@ -15,6 +15,7 @@
this.redrawFlag = true;
this.regenerateDomFlag = true;
this.justDropped = false;
this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
this.cachedFrameProcessor.setFrameProcessor(this.frameToPreviewCanvas_.bind(this));
@ -104,7 +105,7 @@
this.container.get(0).removeChild(this.tiles[index]);
this.tiles.splice(index, 1);
this.updateScrollerOverflows();
} else if (action === ACTION.SELECT) {
} else if (action === ACTION.SELECT && !this.justDropped) {
this.piskelController.setCurrentFrameIndex(index);
} else if (action === ACTION.NEW_FRAME) {
this.piskelController.addFrame();
@ -189,6 +190,7 @@
$('#preview-list').sortable({
placeholder: 'preview-tile preview-tile-drop-proxy',
update: $.proxy(this.onUpdate_, this),
stop: $.proxy(this.onSortableStop_, this),
items: '.preview-tile',
axis: 'y',
tolerance: 'pointer'
@ -211,6 +213,17 @@
this.flagForRedraw_();
};
/**
* @private
*/
ns.FramesListController.prototype.onSortableStop_ = function (event, ui) {
this.justDropped = true;
this.resizeTimer = window.setTimeout($.proxy(function() {
this.justDropped = false;
}, this), 200);
};
/**
* @private
* TODO(vincz): clean this giant rendering function & remove listeners.