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

Issue #311 : Fix incomplete lasso issue when creating a new selection

Browse Source
This commit is contained in:
jdescottes
2015-10-05 00:52:19 +02:00
parent 8b983414a6
commit 3585c2debd
4 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/js/tools/drawing/selection/AbstractDragSelect.js
View File

@@ -14,41 +14,48 @@
pskl.utils.inherit(ns.AbstractDragSelect, ns.BaseSelect); pskl.utils.inherit(ns.AbstractDragSelect, ns.BaseSelect);
/** @override */ /** @override */
ns.AbstractDragSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) { ns.AbstractDragSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
if (this.hasSelection) { if (this.hasSelection) {
this.hasSelection = false; this.hasSelection = false;
overlay.clear(); overlay.clear();
$.publish(Events.SELECTION_DISMISSED); $.publish(Events.SELECTION_DISMISSED);
} else { } else {
this.hasSelection = true; this.hasSelection = true;
this.startDragSelection_(col, row); this.onDragSelectStart_(col, row);
overlay.setPixel(col, row, this.getTransparentVariant_(Constants.SELECTION_TRANSPARENT_COLOR)); overlay.setPixel(col, row, this.getTransparentVariant_(Constants.SELECTION_TRANSPARENT_COLOR));
} }
}; };
/** @override */ /** @override */
ns.AbstractDragSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) { ns.AbstractDragSelect.prototype.onSelect_ = function (col, row, frame, overlay) {
if (!this.hasSelection && (this.startCol !== col || this.startRow !== row)) { if (!this.hasSelection && (this.startCol !== col || this.startRow !== row)) {
this.hasSelection = true; this.hasSelection = true;
this.startDragSelection_(col, row); this.onDragSelectStart_(col, row);
} }
if (this.hasSelection) { if (this.hasSelection) {
this.updateDragSelection_(col, row, color, frame, overlay); this.onDragSelect_(col, row, frame, overlay);
} }
}; };
/** @override */ /** @override */
ns.AbstractDragSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) { ns.AbstractDragSelect.prototype.onSelectEnd_ = function (col, row, frame, overlay) {
if (this.hasSelection) { if (this.hasSelection) {
this.endDragSelection_(col, row, color, frame, overlay); this.onDragSelectEnd_(col, row, frame, overlay);
} }
}; };
/** @private */
ns.AbstractDragSelect.prototype.startDragSelection_ = function (col, row, overlay) {
this.hasSelection = true;
this.onDragSelectStart_(col, row);
overlay.setPixel(col, row, this.getTransparentVariant_(Constants.SELECTION_TRANSPARENT_COLOR));
};
/** @protected */ /** @protected */
ns.AbstractDragSelect.prototype.startDragSelection_ = function (col, row, color, frame, overlay) {}; ns.AbstractDragSelect.prototype.onDragSelectStart_ = function (col, row, frame, overlay) {};
/** @protected */ /** @protected */
ns.AbstractDragSelect.prototype.updateDragSelection_ = function (col, row, color, frame, overlay) {}; ns.AbstractDragSelect.prototype.onDragSelect_ = function (col, row, frame, overlay) {};
/** @protected */ /** @protected */
ns.AbstractDragSelect.prototype.endDragSelection_ = function (col, row, color, frame, overlay) {}; ns.AbstractDragSelect.prototype.onDragSelectEnd_ = function (col, row, frame, overlay) {};
})(); })();

25
src/js/tools/drawing/selection/BaseSelect.js
View File

@@ -14,6 +14,9 @@
this.startCol = null; this.startCol = null;
this.startRow = null; this.startRow = null;
this.lastMoveCol = null;
this.lastMoveRow = null;
this.selection = null; this.selection = null;
this.tooltipDescriptors = [ this.tooltipDescriptors = [
@@ -32,8 +35,8 @@
this.startCol = col; this.startCol = col;
this.startRow = row; this.startRow = row;
this.lastCol = col; this.lastMoveCol = col;
this.lastRow = row; this.lastMoveRow = row;
// The select tool can be in two different state. // The select tool can be in two different state.
// If the inital click of the tool is not on a selection, we go in 'select' // If the inital click of the tool is not on a selection, we go in 'select'
@@ -42,10 +45,10 @@
// mode to allow to move the selection by drag'n dropping it. // mode to allow to move the selection by drag'n dropping it.
if (!this.isInSelection(col, row)) { if (!this.isInSelection(col, row)) {
this.mode = 'select'; this.mode = 'select';
this.onSelectStart_(col, row, color, frame, overlay); this.onSelectStart_(col, row, frame, overlay);
} else { } else {
this.mode = 'moveSelection'; this.mode = 'moveSelection';
this.onSelectionMoveStart_(col, row, color, frame, overlay); this.onSelectionMoveStart_(col, row, frame, overlay);
} }
}; };
@@ -56,7 +59,7 @@
if (this.mode == 'select') { if (this.mode == 'select') {
this.onSelect_(col, row, frame, overlay); this.onSelect_(col, row, frame, overlay);
} else if (this.mode == 'moveSelection') { } else if (this.mode == 'moveSelection') {
this.onSelectionMove_(col, row, color, frame, overlay); this.onSelectionMove_(col, row, frame, overlay);
} }
}; };
@@ -67,7 +70,7 @@
if (this.mode == 'select') { if (this.mode == 'select') {
this.onSelectEnd_(col, row, frame, overlay); this.onSelectEnd_(col, row, frame, overlay);
} else if (this.mode == 'moveSelection') { } else if (this.mode == 'moveSelection') {
this.onSelectionMoveEnd_(col, row, color, frame, overlay); this.onSelectionMoveEnd_(col, row, frame, overlay);
} }
}; };
@@ -136,9 +139,9 @@
ns.BaseSelect.prototype.onSelectionMoveStart_ = function (col, row, color, frame, overlay) {}; ns.BaseSelect.prototype.onSelectionMoveStart_ = function (col, row, color, frame, overlay) {};
/** @private */ /** @private */
ns.BaseSelect.prototype.onSelectionMove_ = function (col, row, color, frame, overlay) { ns.BaseSelect.prototype.onSelectionMove_ = function (col, row, frame, overlay) {
var deltaCol = col - this.lastCol; var deltaCol = col - this.lastMoveCol;
var deltaRow = row - this.lastRow; var deltaRow = row - this.lastMoveRow;
var colDiff = col - this.startCol; var colDiff = col - this.startCol;
var rowDiff = row - this.startRow; var rowDiff = row - this.startRow;
@@ -148,8 +151,8 @@
overlay.clear(); overlay.clear();
this.drawSelectionOnOverlay_(overlay); this.drawSelectionOnOverlay_(overlay);
this.lastCol = col; this.lastMoveCol = col;
this.lastRow = row; this.lastMoveRow = row;
}; };
/** @private */ /** @private */

11
src/js/tools/drawing/selection/LassoSelect.js
View File

@@ -16,15 +16,20 @@
pskl.utils.inherit(ns.LassoSelect, ns.AbstractDragSelect); pskl.utils.inherit(ns.LassoSelect, ns.AbstractDragSelect);
/** @override */ /** @override */
ns.LassoSelect.prototype.startDragSelection_ = function (col, row) { ns.LassoSelect.prototype.onDragSelectStart_ = function (col, row) {
this.pixels = [{col : col, row : row}]; this.pixels = [{col : col, row : row}];
this.startCol = col;
this.startRow = row;
this.previousCol = col; this.previousCol = col;
this.previousRow = row; this.previousRow = row;
$.publish(Events.DRAG_START, [col, row]); $.publish(Events.DRAG_START, [col, row]);
}; };
/** @override */ /** @override */
ns.LassoSelect.prototype.updateDragSelection_ = function (col, row, color, frame, overlay) { ns.LassoSelect.prototype.onDragSelect_ = function (col, row, frame, overlay) {
this.addPixel_(col, row, frame); this.addPixel_(col, row, frame);
// use ShapeSelection during selection, contains only the pixels hovered by the user // use ShapeSelection during selection, contains only the pixels hovered by the user
var selection = new pskl.selection.ShapeSelection(this.getLassoPixels_()); var selection = new pskl.selection.ShapeSelection(this.getLassoPixels_());
@@ -32,7 +37,7 @@
}; };
/** @override */ /** @override */
ns.LassoSelect.prototype.endDragSelection_ = function (col, row, color, frame, overlay) { ns.LassoSelect.prototype.onDragSelectEnd_ = function (col, row, frame, overlay) {
this.addPixel_(col, row, frame); this.addPixel_(col, row, frame);
// use LassoSelection to finalize selection, includes pixels inside the lasso shape // use LassoSelection to finalize selection, includes pixels inside the lasso shape
var selection = new pskl.selection.LassoSelection(this.getLassoPixels_(), frame); var selection = new pskl.selection.LassoSelection(this.getLassoPixels_(), frame);

8
src/js/tools/drawing/selection/RectangleSelect.js
View File

@@ -16,7 +16,7 @@
pskl.utils.inherit(ns.RectangleSelect, ns.AbstractDragSelect); pskl.utils.inherit(ns.RectangleSelect, ns.AbstractDragSelect);
/** @override */ /** @override */
ns.RectangleSelect.prototype.startDragSelection_ = function (col, row) { ns.RectangleSelect.prototype.onDragSelectStart_ = function (col, row) {
$.publish(Events.DRAG_START, [col, row]); $.publish(Events.DRAG_START, [col, row]);
}; };
@@ -26,7 +26,7 @@
* the current mouse coordiinate in sprite. * the current mouse coordiinate in sprite.
* @override * @override
*/ */
ns.RectangleSelect.prototype.updateDragSelection_ = function (col, row, color, frame, overlay) { ns.RectangleSelect.prototype.onDragSelect_ = function (col, row, frame, overlay) {
overlay.clear(); overlay.clear();
this.selection = new pskl.selection.RectangularSelection(this.startCol, this.startRow, col, row); this.selection = new pskl.selection.RectangularSelection(this.startCol, this.startRow, col, row);
$.publish(Events.SELECTION_CREATED, [this.selection]); $.publish(Events.SELECTION_CREATED, [this.selection]);
@@ -34,8 +34,8 @@
}; };
/** @override */ /** @override */
ns.RectangleSelect.prototype.endDragSelection_ = function (col, row, color, frame, overlay) { ns.RectangleSelect.prototype.onDragSelectEnd_ = function (col, row, frame, overlay) {
this.onSelect_(col, row, color, frame, overlay); this.onSelect_(col, row, frame, overlay);
$.publish(Events.DRAG_END); $.publish(Events.DRAG_END);
}; };