wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #310 from juliandescottes/Integrate-SelectedColorsService

Browse source 
Integrate selected colors service
This commit is contained in:
grosbouddha 2015-09-20 02:32:15 +02:00
commit d576c56068
26 changed files with 195 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/js/app.js
View file

@ -41,15 +41,16 @@
this.selectedColorsService = new pskl.service.SelectedColorsService();
this.selectedColorsService.init();
this.mouseStateService = new pskl.service.MouseStateService();
this.mouseStateService.init();
this.paletteController = new pskl.controller.PaletteController();
this.paletteController.init();
this.currentColorsService = new pskl.service.CurrentColorsService(this.piskelController);
this.currentColorsService.init();
this.palettesListController = new pskl.controller.PalettesListController(
this.paletteController,
this.currentColorsService);
this.palettesListController = new pskl.controller.PalettesListController(this.currentColorsService);
this.palettesListController.init();
this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController);

40
src/js/controller/DrawingController.js
View file

@ -47,9 +47,6 @@
this.isClicked = false;
this.previousMousemoveTime = 0;
this.currentToolBehavior = null;
// State of clicked button (need to be stateful here, see comment in getCurrentColor_)
this.currentMouseButton_ = Constants.LEFT_BUTTON;
};
ns.DrawingController.prototype.init = function () {
@ -145,7 +142,6 @@
var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
this.isClicked = true;
this.setCurrentButton(event);
if (event.button === Constants.MIDDLE_BUTTON) {
this.dragHandler.startDrag(event.clientX, event.clientY);
@ -155,7 +151,6 @@
this.currentToolBehavior.applyToolAt(
coords.x,
coords.y,
this.getCurrentColor_(),
frame,
this.overlayFrame,
event
@ -191,16 +186,13 @@
var currentFrame = this.piskelController.getCurrentFrame();
if (this.isClicked) {
if (this.currentMouseButton_ == Constants.MIDDLE_BUTTON) {
if (pskl.app.mouseStateService.isMiddleButtonPressed()) {
this.dragHandler.updateDrag(x, y);
} else {
$.publish(Events.MOUSE_EVENT, [event, this]);
// Warning : do not call setCurrentButton here
// mousemove do not have the correct mouse button information on all browsers
this.currentToolBehavior.moveToolAt(
coords.x | 0,
coords.y | 0,
this.getCurrentColor_(),
currentFrame,
this.overlayFrame,
event
@ -210,7 +202,6 @@
this.currentToolBehavior.moveUnactiveToolAt(
coords.x,
coords.y,
this.getCurrentColor_(),
currentFrame,
this.overlayFrame,
event
@ -262,16 +253,14 @@
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
// of the drawing canvas.
this.isClicked = false;
this.setCurrentButton(event);
if (event.button === Constants.MIDDLE_BUTTON) {
if (pskl.app.mouseStateService.isMiddleButtonPressed()) {
if (this.dragHandler.isDragging()) {
this.dragHandler.stopDrag();
} else if (frame.containsPixel(coords.x, coords.y)) {
@ -281,7 +270,6 @@
this.currentToolBehavior.releaseToolAt(
coords.x,
coords.y,
this.getCurrentColor_(),
this.piskelController.getCurrentFrame(),
this.overlayFrame,
event
@ -289,6 +277,7 @@
$.publish(Events.TOOL_RELEASED);
}
$.publish(Events.MOUSE_EVENT, [event, this]);
}
};
@ -306,29 +295,6 @@
return this.renderer.reverseCoordinates(spriteX, spriteY);
};
ns.DrawingController.prototype.setCurrentButton = function (event) {
this.currentMouseButton_ = event.button;
};
/**
* @private
*/
ns.DrawingController.prototype.getCurrentColor_ = function () {
// WARNING : Do not rely on the current event to get the current color!
// It might seem like a good idea, and works perfectly fine on Chrome
// Sadly Firefox and IE found clever, for some reason, to set event.button to 0
// on a mouse move event
// This always matches a LEFT mouse button which is __really__ not helpful
if (this.currentMouseButton_ == Constants.RIGHT_BUTTON) {
return this.paletteController.getSecondaryColor();
} else if (this.currentMouseButton_ == Constants.LEFT_BUTTON) {
return this.paletteController.getPrimaryColor();
} else {
return Constants.DEFAULT_PEN_COLOR;
}
};
/**
* @private
*/

37
src/js/controller/PaletteController.js
View file

@ -1,11 +1,7 @@
(function () {
var ns = $.namespace('pskl.controller');
ns.PaletteController = function () {
// TODO(grosbouddha): Reuse default colors from SelectedColorsService.
this.primaryColor = Constants.DEFAULT_PEN_COLOR;
this.secondaryColor = Constants.TRANSPARENT_COLOR;
};
ns.PaletteController = function () {};
/**
* @public
@ -52,9 +48,9 @@
ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
var inputPicker = $(evt.target);
if (evt.data.isPrimary) {
this.setPrimaryColor(inputPicker.val());
this.setPrimaryColor_(inputPicker.val());
} else {
this.setSecondaryColor(inputPicker.val());
this.setSecondaryColor_(inputPicker.val());
}
};
@ -64,41 +60,30 @@
ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
var inputPicker = $(evt.target);
if (args.isPrimary) {
this.setPrimaryColor(color);
this.setPrimaryColor_(color);
} else {
this.setSecondaryColor(color);
this.setSecondaryColor_(color);
}
};
ns.PaletteController.prototype.setPrimaryColor = function (color) {
this.primaryColor = color;
ns.PaletteController.prototype.setPrimaryColor_ = function (color) {
this.updateColorPicker_(color, $('#color-picker'));
$.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
};
ns.PaletteController.prototype.setSecondaryColor = function (color) {
this.secondaryColor = color;
ns.PaletteController.prototype.setSecondaryColor_ = function (color) {
this.updateColorPicker_(color, $('#secondary-color-picker'));
$.publish(Events.SECONDARY_COLOR_SELECTED, [color]);
};
ns.PaletteController.prototype.getPrimaryColor = function () {
return this.primaryColor;
};
ns.PaletteController.prototype.getSecondaryColor = function () {
return this.secondaryColor;
};
ns.PaletteController.prototype.swapColors = function () {
var primaryColor = this.getPrimaryColor();
this.setPrimaryColor(this.getSecondaryColor());
this.setSecondaryColor(primaryColor);
var primaryColor = pskl.app.selectedColorsService.getPrimaryColor();
this.setPrimaryColor_(pskl.app.selectedColorsService.getSecondaryColor());
this.setSecondaryColor_(primaryColor);
};
ns.PaletteController.prototype.resetColors = function () {
this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR);
this.setSecondaryColor(Constants.TRANSPARENT_COLOR);
pskl.app.selectedColorsService.reset();
};
/**

7
src/js/controller/PalettesListController.js
View file

@ -10,10 +10,9 @@
// I apologize to my future self for this one.
var NO_SCROLL_MAX_COLORS = 20;
ns.PalettesListController = function (paletteController, usedColorService) {
ns.PalettesListController = function (usedColorService) {
this.usedColorService = usedColorService;
this.paletteService = pskl.app.paletteService;
this.paletteController = paletteController;
};
ns.PalettesListController.prototype.init = function () {
@ -184,13 +183,13 @@
this.removeClass_(PRIMARY_COLOR_CLASSNAME);
this.removeClass_(SECONDARY_COLOR_CLASSNAME);
var colorContainer = this.getColorContainer_(this.paletteController.getSecondaryColor());
var colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getSecondaryColor());
if (colorContainer) {
colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME);
colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME);
}
colorContainer = this.getColorContainer_(this.paletteController.getPrimaryColor());
colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getPrimaryColor());
if (colorContainer) {
colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME);
colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME);

4
src/js/devtools/DrawingTestRecorder.js
View file

@ -45,8 +45,8 @@
width : this.piskelController.getWidth(),
height : this.piskelController.getHeight()
},
primaryColor : pskl.app.paletteController.getPrimaryColor(),
secondaryColor : pskl.app.paletteController.getSecondaryColor(),
primaryColor : pskl.app.selectedColorsService.getPrimaryColor(),
secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(),
selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId
};
};

43
src/js/service/MouseStateService.js Normal file
View file

@ -0,0 +1,43 @@
(function () {
var ns = $.namespace('pskl.service');
var BUTTON_UNSET = null;
/**
* This service exists mostly due to a FF/IE bug.
* For mousemove events, the button type is set to 0 (e.g. left button type) whatever was the
* pressed button on mousedown. We use this service to cache the button type value on mousedown
* and make it available to mousemove events.
*/
ns.MouseStateService = function () {
this.lastButtonPressed_ = BUTTON_UNSET;
};
ns.MouseStateService.prototype.init = function () {
$.subscribe(Events.MOUSE_EVENT, this.onMouseEvent_.bind(this));
};
ns.MouseStateService.prototype.isLeftButtonPressed = function () {
return this.isMouseButtonPressed_(Constants.LEFT_BUTTON);
};
ns.MouseStateService.prototype.isRightButtonPressed = function () {
return this.isMouseButtonPressed_(Constants.RIGHT_BUTTON);
};
ns.MouseStateService.prototype.isMiddleButtonPressed = function () {
return this.isMouseButtonPressed_(Constants.MIDDLE_BUTTON);
};
ns.MouseStateService.prototype.isMouseButtonPressed_ = function (mouseButton) {
return this.lastButtonPressed_ != BUTTON_UNSET && this.lastButtonPressed_ == mouseButton;
};
ns.MouseStateService.prototype.onMouseEvent_ = function(evt, mouseEvent) {
if (mouseEvent.type == 'mousedown') {
this.lastButtonPressed_ = mouseEvent.button;
} else if (mouseEvent.type == 'mouseup') {
this.lastButtonPressed_ = BUTTON_UNSET;
}
};
})();

19
src/js/service/SelectedColorsService.js
View file

@ -2,8 +2,7 @@
var ns = $.namespace('pskl.service');
ns.SelectedColorsService = function () {
this.primaryColor_ = Constants.DEFAULT_PEN_COLOR;
this.secondaryColor_ = Constants.TRANSPARENT_COLOR;
this.reset();
};
ns.SelectedColorsService.prototype.init = function () {
@ -11,11 +10,17 @@
$.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onSecondaryColorUpdate_.bind(this));
};
ns.SelectedColorsService.prototype.getColors = function () {
if (this.primaryColor_ === null || this.secondaryColor_ === null) {
throw 'SelectedColorsService not properly initialized.';
}
return [this.primaryColor_, this.secondaryColor_];
ns.SelectedColorsService.prototype.getPrimaryColor = function () {
return this.primaryColor_;
};
ns.SelectedColorsService.prototype.getSecondaryColor = function () {
return this.secondaryColor_;
};
ns.SelectedColorsService.prototype.reset = function () {
this.primaryColor_ = Constants.DEFAULT_PEN_COLOR;
this.secondaryColor_ = Constants.TRANSPARENT_COLOR;
};
ns.SelectedColorsService.prototype.onPrimaryColorUpdate_ = function (evt, color) {

15
src/js/tools/drawing/BaseTool.js
View file

@ -13,13 +13,20 @@
pskl.utils.inherit(ns.BaseTool, pskl.tools.Tool);
ns.BaseTool.prototype.applyToolAt = function (col, row, color, frame, overlay, event) {};
ns.BaseTool.prototype.applyToolAt = function (col, row, frame, overlay, event) {};
ns.BaseTool.prototype.moveToolAt = function (col, row, color, frame, overlay, event) {};
ns.BaseTool.prototype.moveToolAt = function (col, row, frame, overlay, event) {};
ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION;
ns.BaseTool.prototype.moveUnactiveToolAt = function (col, row, color, frame, overlay, event) {
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, frame, overlay, event) {
if (overlay.containsPixel(col, row)) {
this.updateHighlightedPixel(frame, overlay, col, row);
} else {
@ -77,7 +84,7 @@
});
};
ns.BaseTool.prototype.releaseToolAt = function (col, row, color, frame, overlay, event) {};
ns.BaseTool.prototype.releaseToolAt = function (col, row, frame, overlay, event) {};
/**
* Bresenham line algorithm: Get an array of pixels from

5
src/js/tools/drawing/Circle.js
View file

@ -15,7 +15,10 @@
pskl.utils.inherit(ns.Circle, ns.ShapeTool);
ns.Circle.prototype.draw_ = function (col, row, color, targetFrame) {
/**
* @override
*/
ns.Circle.prototype.draw = function (col, row, color, targetFrame) {
var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row);
for (var i = 0 ; i < circlePoints.length ; i++) {
// Change model:

6
src/js/tools/drawing/ColorPicker.js
View file

@ -16,12 +16,12 @@
/**
* @override
*/
ns.ColorPicker.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.ColorPicker.prototype.applyToolAt = function(col, row, frame, overlay, event) {
if (frame.containsPixel(col, row)) {
var sampledColor = frame.getPixel(col, row);
if (event.button == Constants.LEFT_BUTTON) {
if (pskl.app.mouseStateService.isLeftButtonPressed()) {
$.publish(Events.SELECT_PRIMARY_COLOR, [sampledColor]);
} else if (event.button == Constants.RIGHT_BUTTON) {
} else if (pskl.app.mouseStateService.isRightButtonPressed()) {
$.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]);
}
}

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, 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

21
src/js/tools/drawing/DitheringTool.js
View file

@ -16,21 +16,14 @@
/**
* @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.
ns.DitheringTool.prototype.applyToolAt = function(col, row, frame, overlay, event) {
var usePrimaryColor = (col + row) % 2;
usePrimaryColor = this.invertColors_ ? !usePrimaryColor : usePrimaryColor;
usePrimaryColor =
pskl.app.mouseStateService.isRightButtonPressed() ? !usePrimaryColor : usePrimaryColor;
var ditheringColor = usePrimaryColor ?
pskl.app.selectedColorsService.getPrimaryColor() :
pskl.app.selectedColorsService.getSecondaryColor();
var selectedColors = pskl.app.selectedColorsService.getColors();
var ditheringColor = usePrimaryColor ? selectedColors[0] : selectedColors[1];
this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event);
this.draw(ditheringColor, col, row, frame, overlay);
};
})();

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;
};
})();

24
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,19 +41,24 @@
/**
* @Override
*/
ns.Lighten.prototype.applyToolAt = function(col, row, color, frame, overlay, event, mouseButton) {
ns.Lighten.prototype.applyToolAt = function(col, row, frame, overlay, event, mouseButton) {
var modifiedColor = this.getModifiedColor_(col, row, frame, overlay, event);
this.draw(modifiedColor, col, row, frame, overlay);
};
ns.Lighten.prototype.getModifiedColor_ = function(col, row, frame, overlay, event) {
var overlayColor = overlay.getPixel(col, row);
var frameColor = frame.getPixel(col, row);
var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
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 color;
if (doNotModify) {
color = window.tinycolor(pixelColor);
} else {
@ -64,10 +69,9 @@
color = window.tinycolor.lighten(pixelColor, step);
}
}
if (color) {
usedPixels[key] = true;
this.superclass.applyToolAt.call(this, col, row, color.toRgbString(), frame, overlay, event);
}
};
usedPixels[key] = true;
// Convert tinycolor color to string format.
return color.toRgbString();
};
})();

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, 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, 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, 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, frame, overlay, event) {
var color = this.getToolColor();
pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
this.raiseSaveStateEvent({

6
src/js/tools/drawing/Rectangle.js
View file

@ -10,13 +10,15 @@
ns.ShapeTool.call(this);
this.toolId = 'tool-rectangle';
this.helpText = 'Rectangle tool';
};
pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);
ns.Rectangle.prototype.draw_ = function (col, row, color, targetFrame) {
/**
* @override
*/
ns.Rectangle.prototype.draw = function (col, row, color, targetFrame) {
var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
for (var i = 0 ; i < strokePoints.length ; i++) {
// Change model:

20
src/js/tools/drawing/ShapeTool.js
View file

@ -2,7 +2,7 @@
var ns = $.namespace('pskl.tools.drawing');
/**
* Abstract shape tool class, parent to all shape tools (rectangle, circle).
* Shape tools should override only the draw_ method
* Shape tools should override only the draw method
*/
ns.ShapeTool = function() {
// Shapes's first point coordinates (set in applyToolAt)
@ -19,35 +19,37 @@
/**
* @override
*/
ns.ShapeTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.ShapeTool.prototype.applyToolAt = function(col, row, 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, 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;
}
// draw in overlay
this.draw_(coords.col, coords.row, color, overlay);
this.draw(coords.col, coords.row, color, overlay);
};
/**
* @override
*/
ns.ShapeTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
ns.ShapeTool.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
overlay.clear();
var coords = this.getCoordinates_(col, row, event);
this.draw_(coords.col, coords.row, color, frame);
var color = this.getToolColor();
this.draw(coords.col, coords.row, color, frame);
$.publish(Events.DRAG_END, [coords.col, coords.row]);
this.raiseSaveStateEvent({
@ -65,7 +67,7 @@
ns.ShapeTool.prototype.replay = function(frame, replayData) {
this.startCol = replayData.startCol;
this.startRow = replayData.startRow;
this.draw_(replayData.col, replayData.row, replayData.color, frame);
this.draw(replayData.col, replayData.row, replayData.color, frame);
};
/**
@ -106,6 +108,6 @@
};
};
ns.ShapeTool.prototype.draw_ = Constants.ABSTRACT_FUNCTION;
ns.ShapeTool.prototype.draw = Constants.ABSTRACT_FUNCTION;
})();

18
src/js/tools/drawing/SimplePen.js
View file

@ -21,12 +21,16 @@
/**
* @override
*/
ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
ns.SimplePen.prototype.applyToolAt = function(col, row, frame, overlay, event) {
var color = this.getToolColor();
this.draw(color, col, row, frame, overlay);
};
ns.SimplePen.prototype.draw = function(color, col, row, frame, overlay) {
this.previousCol = col;
this.previousRow = row;
overlay.setPixel(col, row, color);
if (color === Constants.TRANSPARENT_COLOR) {
frame.setPixel(col, row, color);
}
@ -40,7 +44,7 @@
/**
* @override
*/
ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
ns.SimplePen.prototype.moveToolAt = function(col, row, 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 +52,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, frame, overlay, event);
}
} else {
this.applyToolAt(col, row, color, frame, overlay, event);
this.applyToolAt(col, row, 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, 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, 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, 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, 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);

12
src/js/tools/drawing/VerticalMirrorPen.js
View file

@ -28,8 +28,10 @@
/**
* @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, frame, overlay, event) {
var color = this.getToolColor();
this.draw(color, col, row, frame, overlay);
this.backupPreviousPositions_();
var mirroredCol = this.getSymmetricCol_(col, frame);
@ -37,15 +39,15 @@
var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
if (!hasCtrlKey) {
this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
this.draw(color, mirroredCol, row, frame, overlay);
}
if (event.shiftKey || hasCtrlKey) {
this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
this.draw(color, col, mirroredRow, frame, overlay);
}
if (event.shiftKey) {
this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color, frame, overlay);
this.draw(color, mirroredCol, mirroredRow, 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, 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, frame, overlay);
} else {
this.mode = 'select';
this.onSelectStart_(col, row, color, frame, overlay);
this.onSelectStart_(col, row, frame, overlay);
}
};
/**
* @override
*/
ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
ns.BaseSelect.prototype.moveToolAt = function(col, row, frame, overlay, event) {
if (this.mode == 'select') {
this.onSelect_(col, row, color, frame, overlay);
this.onSelect_(col, row, frame, overlay);
} else if (this.mode == 'moveSelection') {
this.onSelectionDrag_(col, row, color, frame, overlay);
this.onSelectionDrag_(col, row, frame, overlay);
}
};
/**
* @override
*/
ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
ns.BaseSelect.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
if (this.mode == 'select') {
this.onSelectEnd_(col, row, color, frame, overlay);
this.onSelectEnd_(col, row, frame, overlay);
} else if (this.mode == 'moveSelection') {
this.onSelectionDragEnd_(col, row, color, frame, overlay);
this.onSelectionDragEnd_(col, row, 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, 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, frame, overlay) {};
/** @protected */
ns.BaseSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {};
ns.BaseSelect.prototype.onSelect_ = function (col, row, frame, overlay) {};
/** @protected */
ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {};
ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, 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, frame, overlay) {};
/** @private */
ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) {
ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, 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, frame, overlay) {
this.onSelectionDrag_(col, row, frame, overlay);
};
})();

10
src/js/tools/drawing/selection/RectangleSelect.js
View file

@ -22,7 +22,7 @@
/**
* @override
*/
ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
this.selectionOrigin_ = {
col : col,
row : row
@ -33,7 +33,7 @@
$.publish(Events.SELECTION_DISMISSED);
} else {
this.startSelection_(col, row);
overlay.setPixel(col, row, color);
overlay.setPixel(col, row, Constants.SELECTION_TRANSPARENT_COLOR);
}
};
@ -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, 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, frame, overlay) {
if (this.hasSelection) {
this.onSelect_(col, row, color, frame, overlay);
this.onSelect_(col, row, 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, frame, overlay) {
// Clean previous selection:
$.publish(Events.SELECTION_DISMISSED);
overlay.clear();

1
src/piskel-script-list.js
View file

@ -161,6 +161,7 @@
"js/service/CurrentColorsService.js",
"js/service/FileDropperService.js",
"js/service/SelectedColorsService.js",
"js/service/MouseStateService.js",
// Tools
"js/tools/ToolsHelper.js",

18
test/js/service/SelectedColorsServiceTest.js
View file

@ -3,10 +3,8 @@ describe("SelectedColorsService test suite", function() {
it("returns the default selected colors initially", function() {
var service = new pskl.service.SelectedColorsService();
var defaultSelectedColors = service.getColors();
expect(defaultSelectedColors.length).toBe(2);
expect(defaultSelectedColors[0]).toBe(Constants.DEFAULT_PEN_COLOR);
expect(defaultSelectedColors[1]).toBe(Constants.TRANSPARENT_COLOR);
expect(service.getPrimaryColor()).toBe(Constants.DEFAULT_PEN_COLOR);
expect(service.getSecondaryColor()).toBe(Constants.TRANSPARENT_COLOR);
});
it("reacts to PRIMARY_COLOR_SELECTED event", function() {
@ -16,10 +14,8 @@ describe("SelectedColorsService test suite", function() {
var expectedColor = "#123456";
$.publish(Events.PRIMARY_COLOR_SELECTED, [expectedColor]);
var defaultSelectedColors = service.getColors();
expect(defaultSelectedColors.length).toBe(2);
expect(defaultSelectedColors[0]).toBe(expectedColor);
expect(defaultSelectedColors[1]).toBe(Constants.TRANSPARENT_COLOR);
expect(service.getPrimaryColor()).toBe(expectedColor);
expect(service.getSecondaryColor()).toBe(Constants.TRANSPARENT_COLOR);
});
it("reacts to SECONDARY_COLOR_SELECTED event", function() {
@ -29,9 +25,7 @@ describe("SelectedColorsService test suite", function() {
var expectedColor = "#123456";
$.publish(Events.SECONDARY_COLOR_SELECTED, [expectedColor]);
var defaultSelectedColors = service.getColors();
expect(defaultSelectedColors.length).toBe(2);
expect(defaultSelectedColors[0]).toBe(Constants.DEFAULT_PEN_COLOR);
expect(defaultSelectedColors[1]).toBe(expectedColor);
expect(service.getPrimaryColor()).toBe(Constants.DEFAULT_PEN_COLOR);
expect(service.getSecondaryColor()).toBe(expectedColor);
});
});