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

Migrate tools to BaseTool#getToolColor

Browse Source
This commit is contained in:
grosbouddha 2015-09-16 22:55:33 +02:00
parent 3209c50304
commit e9c99a241f
17 changed files with 109 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/controller/DrawingController.js
View File

@ -256,7 +256,6 @@
var frame = this.piskelController.getCurrentFrame();
var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
if (this.isClicked) {
$.publish(Events.MOUSE_EVENT, [event, this]);
// A mouse button was clicked on the drawing canvas before this mouseup event,
// the user was probably drawing on the canvas.
// Note: The mousemove movement (and the mouseup) may end up outside
@ -282,6 +281,7 @@
$.publish(Events.TOOL_RELEASED);
}
$.publish(Events.MOUSE_EVENT, [event, this]);
}
};

7
src/js/tools/drawing/BaseTool.js
View File

@ -19,6 +19,13 @@
ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION;
ns.BaseTool.prototype.getToolColor = function() {
if (pskl.app.mouseStateService.isRightButtonPressed()) {
return pskl.app.selectedColorsService.getSecondaryColor();
}
return pskl.app.selectedColorsService.getPrimaryColor();
};
ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, color, frame, overlay, event) {
if (overlay.containsPixel(col, row)) {
this.updateHighlightedPixel(frame, overlay, col, row);

2
src/js/tools/drawing/ColorPicker.js
View File

@ -16,7 +16,7 @@
/**
* @override
*/
ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.ColorPicker.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
if (frame.containsPixel(col, row)) {
var sampledColor = frame.getPixel(col, row);
if (event.button == Constants.LEFT_BUTTON) {

4
src/js/tools/drawing/ColorSwap.js
View File

@ -21,14 +21,14 @@
/**
* @override
*/
ns.ColorSwap.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.ColorSwap.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
if (frame.containsPixel(col, row)) {
var sampledColor = frame.getPixel(col, row);
var allLayers = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
var allFrames = event.shiftKey;
this.swapColors(sampledColor, color, allLayers, allFrames);
this.swapColors(sampledColor, this.getToolColor(), allLayers, allFrames);
$.publish(Events.PISKEL_SAVE_STATE, {
type : pskl.service.HistoryService.SNAPSHOT

32
src/js/tools/drawing/DitheringTool.js
View File

@ -16,22 +16,22 @@
/**
* @override
*/
ns.DitheringTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
// On Firefox/IE, the clicked button type is not part of the mousemove event.
// Ensure we record the pressed button on the initial mousedown only.
if (event.type == 'mousedown') {
this.invertColors_ = event.button === Constants.RIGHT_BUTTON;
}
// Use primary selected color on cell with either an odd col or row.
// Use secondary color otherwise.
// When using the right mouse button, invert the above behavior to allow quick corrections.
var usePrimaryColor = (col + row) % 2;
usePrimaryColor = this.invertColors_ ? !usePrimaryColor : usePrimaryColor;
ns.DitheringTool.prototype.getToolColor = function() {
var usePrimaryColor = (this.col_ + this.row_) % 2;
usePrimaryColor =
pskl.app.mouseStateService.isRightButtonPressed() ? !usePrimaryColor : usePrimaryColor;
var ditheringColor = usePrimaryColor ?
pskl.app.selectedColorsService.getPrimaryColor() :
pskl.app.selectedColorsService.getSecondaryColor();
this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event);
pskl.app.selectedColorsService.getPrimaryColor() :
pskl.app.selectedColorsService.getSecondaryColor();
return ditheringColor;
};
/**
* @override
*/
ns.DitheringTool.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
this.col_ = col;
this.row_ = row;
this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay, event);
};
})();

10
src/js/tools/drawing/Eraser.js
View File

@ -18,13 +18,7 @@
/**
* @override
*/
ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event);
};
/**
* @override
*/
ns.Eraser.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
this.superclass.releaseToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event);
ns.Eraser.prototype.getToolColor = function() {
return Constants.TRANSPARENT_COLOR;
};
})();

47
src/js/tools/drawing/Lighten.js
View File

@ -1,5 +1,5 @@
/**
* @provide pskl.tools.drawing.Eraser
* @provide pskl.tools.drawing.Lighten
*
* @require Constants
* @require pskl.utils
@ -41,33 +41,42 @@
/**
* @Override
*/
ns.Lighten.prototype.applyToolAt = function(col, row, color, frame, overlay, event, mouseButton) {
var overlayColor = overlay.getPixel(col, row);
var frameColor = frame.getPixel(col, row);
var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
ns.Lighten.prototype.getToolColor = function() {
var color = this.superclass.getToolColor.call();
var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
var isSinglePass = event.shiftKey;
var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten;
var key = col + '-' + row;
var doNotModify = isTransparent || (isSinglePass && usedPixels[key]);
var usedPixels = this.isDarken_ ? this.usedPixels_.darken : this.usedPixels_.lighten;
var key = this.col_ + '-' + this.row_;
var doNotModify = this.isTransparent_ || (this.isSinglePass_ && usedPixels[key]);
if (doNotModify) {
color = window.tinycolor(pixelColor);
color = window.tinycolor(this.pixelColor_);
} else {
var step = isSinglePass ? DEFAULT_STEP * 2 : DEFAULT_STEP;
if (isDarken) {
color = window.tinycolor.darken(pixelColor, step);
var step = this.isSinglePass_ ? DEFAULT_STEP * 2 : DEFAULT_STEP;
if (this.isDarken_) {
color = window.tinycolor.darken(this.pixelColor_, step);
} else {
color = window.tinycolor.lighten(pixelColor, step);
color = window.tinycolor.lighten(this.pixelColor_, step);
}
}
if (color) {
usedPixels[key] = true;
this.superclass.applyToolAt.call(this, col, row, color.toRgbString(), frame, overlay, event);
}
return color.toRgbString();
};
/**
* @Override
*/
ns.Lighten.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event, mouseButton) {
var overlayColor = overlay.getPixel(col, row);
var frameColor = frame.getPixel(col, row);
this.col_ = col;
this.row_ = row;
this.pixelColor_ = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
this.isDarken_ = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;;
this.isTransparent_ = this.pixelColor_ === Constants.TRANSPARENT_COLOR;
this.isSinglePass_ = event.shiftKey;
this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay, event);
};
})();

6
src/js/tools/drawing/Move.js
View File

@ -28,14 +28,14 @@
/**
* @override
*/
ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.Move.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
this.startCol = col;
this.startRow = row;
this.currentFrame = frame;
this.currentFrameClone = frame.clone();
};
ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
ns.Move.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
var colDiff = col - this.startCol;
var rowDiff = row - this.startRow;
this.shiftFrame(colDiff, rowDiff, frame, this.currentFrameClone, event);
@ -66,7 +66,7 @@
/**
* @override
*/
ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
ns.Move.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
var colDiff = col - this.startCol;
var rowDiff = row - this.startRow;

3
src/js/tools/drawing/PaintBucket.js
View File

@ -16,7 +16,8 @@
/**
* @override
*/
ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.PaintBucket.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
var color = this.getToolColor();
pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
this.raiseSaveStateEvent({

4
src/js/tools/drawing/Rectangle.js
View File

@ -16,11 +16,11 @@
pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);
ns.Rectangle.prototype.draw_ = function (col, row, color, targetFrame) {
ns.Rectangle.prototype.draw_ = function (col, row, color_legacy, targetFrame) {
var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
for (var i = 0 ; i < strokePoints.length ; i++) {
// Change model:
targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, this.getToolColor());
}
};
})();

10
src/js/tools/drawing/ShapeTool.js
View File

@ -19,20 +19,21 @@
/**
* @override
*/
ns.ShapeTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.ShapeTool.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
$.publish(Events.DRAG_START, [col, row]);
this.startCol = col;
this.startRow = row;
// Drawing the first point of the rectangle in the fake overlay canvas:
overlay.setPixel(col, row, color);
overlay.setPixel(col, row, this.getToolColor());
};
ns.ShapeTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
ns.ShapeTool.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
var coords = this.getCoordinates_(col, row, event);
$.publish(Events.CURSOR_MOVED, [coords.col, coords.row]);
overlay.clear();
var color = this.getToolColor();
if (color == Constants.TRANSPARENT_COLOR) {
color = Constants.SELECTION_TRANSPARENT_COLOR;
}
@ -44,9 +45,10 @@
/**
* @override
*/
ns.ShapeTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
ns.ShapeTool.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
overlay.clear();
var coords = this.getCoordinates_(col, row, event);
var color = this.getToolColor();
this.draw_(coords.col, coords.row, color, frame);
$.publish(Events.DRAG_END, [coords.col, coords.row]);

14
src/js/tools/drawing/SimplePen.js
View File

@ -21,10 +21,10 @@
/**
* @override
*/
ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.SimplePen.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
this.previousCol = col;
this.previousRow = row;
var color = this.getToolColor();
overlay.setPixel(col, row, color);
if (color === Constants.TRANSPARENT_COLOR) {
@ -40,7 +40,7 @@
/**
* @override
*/
ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
ns.SimplePen.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
if ((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
// The pen movement is too fast for the mousemove frequency, there is a gap between the
// current point and the previously drawn one.
@ -48,24 +48,24 @@
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
for (var i = 0, l = interpolatedPixels.length ; i < l ; i++) {
var coords = interpolatedPixels[i];
this.applyToolAt(coords.col, coords.row, color, frame, overlay, event);
this.applyToolAt(coords.col, coords.row, color_legacy, frame, overlay, event);
}
} else {
this.applyToolAt(col, row, color, frame, overlay, event);
this.applyToolAt(col, row, color_legacy, frame, overlay, event);
}
this.previousCol = col;
this.previousRow = row;
};
ns.SimplePen.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
ns.SimplePen.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
// apply on real frame
this.setPixelsToFrame_(frame, this.pixels);
// save state
this.raiseSaveStateEvent({
pixels : this.pixels.slice(0),
color : color
color : this.getToolColor()
});
// reset

10
src/js/tools/drawing/Stroke.js
View File

@ -20,7 +20,7 @@
/**
* @override
*/
ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.Stroke.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
this.startCol = col;
this.startRow = row;
@ -33,10 +33,10 @@
// The fake canvas where we will draw the preview of the stroke:
// Drawing the first point of the stroke in the fake overlay canvas:
overlay.setPixel(col, row, color);
overlay.setPixel(col, row, this.getToolColor());
};
ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
ns.Stroke.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
overlay.clear();
// When the user moussemove (before releasing), we dynamically compute the
@ -44,6 +44,7 @@
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
// Drawing current stroke:
var color = this.getToolColor();
for (var i = 0; i < strokePoints.length; i++) {
if (color == Constants.TRANSPARENT_COLOR) {
@ -62,7 +63,8 @@
/**
* @override
*/
ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
ns.Stroke.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
var color = this.getToolColor();
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
// the model and draw them in the drawing canvas (not the fake overlay anymore)
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);

10
src/js/tools/drawing/VerticalMirrorPen.js
View File

@ -28,8 +28,8 @@
/**
* @override
*/
ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
this.superclass.applyToolAt.call(this, col, row, color, frame, overlay);
ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
this.superclass.applyToolAt.call(this, col, row, color_legacy, frame, overlay);
this.backupPreviousPositions_();
var mirroredCol = this.getSymmetricCol_(col, frame);
@ -37,15 +37,15 @@
var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
if (!hasCtrlKey) {
this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
this.superclass.applyToolAt.call(this, mirroredCol, row, color_legacy, frame, overlay);
}
if (event.shiftKey || hasCtrlKey) {
this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
this.superclass.applyToolAt.call(this, col, mirroredRow, color_legacy, frame, overlay);
}
if (event.shiftKey) {
this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color, frame, overlay);
this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color_legacy, frame, overlay);
}
this.restorePreviousPositions_();

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

@ -28,7 +28,7 @@
/**
* @override
*/
ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.BaseSelect.prototype.applyToolAt = function(col, row, color_legacy, frame, overlay, event) {
this.startCol = col;
this.startRow = row;
@ -42,32 +42,32 @@
// mode to allow to move the selection by drag'n dropping it.
if (this.isInSelection(col, row)) {
this.mode = 'moveSelection';
this.onSelectionDragStart_(col, row, color, frame, overlay);
this.onSelectionDragStart_(col, row, color_legacy, frame, overlay);
} else {
this.mode = 'select';
this.onSelectStart_(col, row, color, frame, overlay);
this.onSelectStart_(col, row, color_legacy, frame, overlay);
}
};
/**
* @override
*/
ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
ns.BaseSelect.prototype.moveToolAt = function(col, row, color_legacy, frame, overlay, event) {
if (this.mode == 'select') {
this.onSelect_(col, row, color, frame, overlay);
this.onSelect_(col, row, color_legacy, frame, overlay);
} else if (this.mode == 'moveSelection') {
this.onSelectionDrag_(col, row, color, frame, overlay);
this.onSelectionDrag_(col, row, color_legacy, frame, overlay);
}
};
/**
* @override
*/
ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
ns.BaseSelect.prototype.releaseToolAt = function(col, row, color_legacy, frame, overlay, event) {
if (this.mode == 'select') {
this.onSelectEnd_(col, row, color, frame, overlay);
this.onSelectEnd_(col, row, color_legacy, frame, overlay);
} else if (this.mode == 'moveSelection') {
this.onSelectionDragEnd_(col, row, color, frame, overlay);
this.onSelectionDragEnd_(col, row, color_legacy, frame, overlay);
}
};
@ -76,7 +76,7 @@
* instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
* @override
*/
ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color_legacy, frame, overlay, event) {
if (overlay.containsPixel(col, row)) {
if (this.isInSelection(col, row)) {
// We're hovering the selection, show the move tool:
@ -124,18 +124,18 @@
// The list of callbacks to implement by specialized tools to implement the selection creation behavior.
/** @protected */
ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {};
ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color_legacy, frame, overlay) {};
/** @protected */
ns.BaseSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {};
ns.BaseSelect.prototype.onSelect_ = function (col, row, color_legacy, frame, overlay) {};
/** @protected */
ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {};
ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color_legacy, frame, overlay) {};
// The list of callbacks that define the drag'n drop behavior of the selection.
/** @private */
ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) {};
ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color_legacy, frame, overlay) {};
/** @private */
ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) {
ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color_legacy, frame, overlay) {
var deltaCol = col - this.lastCol;
var deltaRow = row - this.lastRow;
@ -152,7 +152,7 @@
};
/** @private */
ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color, frame, overlay) {
this.onSelectionDrag_(col, row, color, frame, overlay);
ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color_legacy, frame, overlay) {
this.onSelectionDrag_(col, row, color_legacy, frame, overlay);
};
})();

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

@ -49,7 +49,7 @@
* the current mouse coordiinate in sprite.
* @override
*/
ns.RectangleSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {
ns.RectangleSelect.prototype.onSelect_ = function (col, row, color_legacy, frame, overlay) {
if (!this.hasSelection && (this.selectionOrigin_.col !== col || this.selectionOrigin_.row !== row)) {
this.startSelection_(col, row);
}
@ -63,9 +63,9 @@
}
};
ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color_legacy, frame, overlay) {
if (this.hasSelection) {
this.onSelect_(col, row, color, frame, overlay);
this.onSelect_(col, row, color_legacy, frame, overlay);
$.publish(Events.DRAG_END, [col, row]);
}
};

2
src/js/tools/drawing/selection/ShapeSelect.js
View File

@ -21,7 +21,7 @@
* So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
* @override
*/
ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color_legacy, frame, overlay) {
// Clean previous selection:
$.publish(Events.SELECTION_DISMISSED);
overlay.clear();