mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Workaround for incorrect frame selection after re-ordering on Firefox

Browse Source 
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
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/js/controller/FramesListController.js
View File

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