mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge pull request #310 from juliandescottes/Integrate-SelectedColorsService
Integrate selected colors service
This commit is contained in:
commit
d576c56068
|
@ -41,15 +41,16 @@
|
||||||
this.selectedColorsService = new pskl.service.SelectedColorsService();
|
this.selectedColorsService = new pskl.service.SelectedColorsService();
|
||||||
this.selectedColorsService.init();
|
this.selectedColorsService.init();
|
||||||
|
|
||||||
|
this.mouseStateService = new pskl.service.MouseStateService();
|
||||||
|
this.mouseStateService.init();
|
||||||
|
|
||||||
this.paletteController = new pskl.controller.PaletteController();
|
this.paletteController = new pskl.controller.PaletteController();
|
||||||
this.paletteController.init();
|
this.paletteController.init();
|
||||||
|
|
||||||
this.currentColorsService = new pskl.service.CurrentColorsService(this.piskelController);
|
this.currentColorsService = new pskl.service.CurrentColorsService(this.piskelController);
|
||||||
this.currentColorsService.init();
|
this.currentColorsService.init();
|
||||||
|
|
||||||
this.palettesListController = new pskl.controller.PalettesListController(
|
this.palettesListController = new pskl.controller.PalettesListController(this.currentColorsService);
|
||||||
this.paletteController,
|
|
||||||
this.currentColorsService);
|
|
||||||
this.palettesListController.init();
|
this.palettesListController.init();
|
||||||
|
|
||||||
this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController);
|
this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController);
|
||||||
|
|
|
@ -47,9 +47,6 @@
|
||||||
this.isClicked = false;
|
this.isClicked = false;
|
||||||
this.previousMousemoveTime = 0;
|
this.previousMousemoveTime = 0;
|
||||||
this.currentToolBehavior = null;
|
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 () {
|
ns.DrawingController.prototype.init = function () {
|
||||||
|
@ -145,7 +142,6 @@
|
||||||
var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
|
var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
|
||||||
|
|
||||||
this.isClicked = true;
|
this.isClicked = true;
|
||||||
this.setCurrentButton(event);
|
|
||||||
|
|
||||||
if (event.button === Constants.MIDDLE_BUTTON) {
|
if (event.button === Constants.MIDDLE_BUTTON) {
|
||||||
this.dragHandler.startDrag(event.clientX, event.clientY);
|
this.dragHandler.startDrag(event.clientX, event.clientY);
|
||||||
|
@ -155,7 +151,6 @@
|
||||||
this.currentToolBehavior.applyToolAt(
|
this.currentToolBehavior.applyToolAt(
|
||||||
coords.x,
|
coords.x,
|
||||||
coords.y,
|
coords.y,
|
||||||
this.getCurrentColor_(),
|
|
||||||
frame,
|
frame,
|
||||||
this.overlayFrame,
|
this.overlayFrame,
|
||||||
event
|
event
|
||||||
|
@ -191,16 +186,13 @@
|
||||||
var currentFrame = this.piskelController.getCurrentFrame();
|
var currentFrame = this.piskelController.getCurrentFrame();
|
||||||
|
|
||||||
if (this.isClicked) {
|
if (this.isClicked) {
|
||||||
if (this.currentMouseButton_ == Constants.MIDDLE_BUTTON) {
|
if (pskl.app.mouseStateService.isMiddleButtonPressed()) {
|
||||||
this.dragHandler.updateDrag(x, y);
|
this.dragHandler.updateDrag(x, y);
|
||||||
} else {
|
} else {
|
||||||
$.publish(Events.MOUSE_EVENT, [event, this]);
|
$.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(
|
this.currentToolBehavior.moveToolAt(
|
||||||
coords.x | 0,
|
coords.x | 0,
|
||||||
coords.y | 0,
|
coords.y | 0,
|
||||||
this.getCurrentColor_(),
|
|
||||||
currentFrame,
|
currentFrame,
|
||||||
this.overlayFrame,
|
this.overlayFrame,
|
||||||
event
|
event
|
||||||
|
@ -210,7 +202,6 @@
|
||||||
this.currentToolBehavior.moveUnactiveToolAt(
|
this.currentToolBehavior.moveUnactiveToolAt(
|
||||||
coords.x,
|
coords.x,
|
||||||
coords.y,
|
coords.y,
|
||||||
this.getCurrentColor_(),
|
|
||||||
currentFrame,
|
currentFrame,
|
||||||
this.overlayFrame,
|
this.overlayFrame,
|
||||||
event
|
event
|
||||||
|
@ -262,16 +253,14 @@
|
||||||
var frame = this.piskelController.getCurrentFrame();
|
var frame = this.piskelController.getCurrentFrame();
|
||||||
var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
|
var coords = this.getSpriteCoordinates(event.clientX, event.clientY);
|
||||||
if (this.isClicked) {
|
if (this.isClicked) {
|
||||||
$.publish(Events.MOUSE_EVENT, [event, this]);
|
|
||||||
// A mouse button was clicked on the drawing canvas before this mouseup event,
|
// A mouse button was clicked on the drawing canvas before this mouseup event,
|
||||||
// the user was probably drawing on the canvas.
|
// the user was probably drawing on the canvas.
|
||||||
// Note: The mousemove movement (and the mouseup) may end up outside
|
// Note: The mousemove movement (and the mouseup) may end up outside
|
||||||
// of the drawing canvas.
|
// of the drawing canvas.
|
||||||
|
|
||||||
this.isClicked = false;
|
this.isClicked = false;
|
||||||
this.setCurrentButton(event);
|
|
||||||
|
|
||||||
if (event.button === Constants.MIDDLE_BUTTON) {
|
if (pskl.app.mouseStateService.isMiddleButtonPressed()) {
|
||||||
if (this.dragHandler.isDragging()) {
|
if (this.dragHandler.isDragging()) {
|
||||||
this.dragHandler.stopDrag();
|
this.dragHandler.stopDrag();
|
||||||
} else if (frame.containsPixel(coords.x, coords.y)) {
|
} else if (frame.containsPixel(coords.x, coords.y)) {
|
||||||
|
@ -281,7 +270,6 @@
|
||||||
this.currentToolBehavior.releaseToolAt(
|
this.currentToolBehavior.releaseToolAt(
|
||||||
coords.x,
|
coords.x,
|
||||||
coords.y,
|
coords.y,
|
||||||
this.getCurrentColor_(),
|
|
||||||
this.piskelController.getCurrentFrame(),
|
this.piskelController.getCurrentFrame(),
|
||||||
this.overlayFrame,
|
this.overlayFrame,
|
||||||
event
|
event
|
||||||
|
@ -289,6 +277,7 @@
|
||||||
|
|
||||||
$.publish(Events.TOOL_RELEASED);
|
$.publish(Events.TOOL_RELEASED);
|
||||||
}
|
}
|
||||||
|
$.publish(Events.MOUSE_EVENT, [event, this]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -306,29 +295,6 @@
|
||||||
return this.renderer.reverseCoordinates(spriteX, spriteY);
|
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
|
* @private
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1,11 +1,7 @@
|
||||||
(function () {
|
(function () {
|
||||||
var ns = $.namespace('pskl.controller');
|
var ns = $.namespace('pskl.controller');
|
||||||
|
|
||||||
ns.PaletteController = function () {
|
ns.PaletteController = function () {};
|
||||||
// TODO(grosbouddha): Reuse default colors from SelectedColorsService.
|
|
||||||
this.primaryColor = Constants.DEFAULT_PEN_COLOR;
|
|
||||||
this.secondaryColor = Constants.TRANSPARENT_COLOR;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @public
|
* @public
|
||||||
|
@ -52,9 +48,9 @@
|
||||||
ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
|
ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
|
||||||
var inputPicker = $(evt.target);
|
var inputPicker = $(evt.target);
|
||||||
if (evt.data.isPrimary) {
|
if (evt.data.isPrimary) {
|
||||||
this.setPrimaryColor(inputPicker.val());
|
this.setPrimaryColor_(inputPicker.val());
|
||||||
} else {
|
} else {
|
||||||
this.setSecondaryColor(inputPicker.val());
|
this.setSecondaryColor_(inputPicker.val());
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -64,41 +60,30 @@
|
||||||
ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
|
ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
|
||||||
var inputPicker = $(evt.target);
|
var inputPicker = $(evt.target);
|
||||||
if (args.isPrimary) {
|
if (args.isPrimary) {
|
||||||
this.setPrimaryColor(color);
|
this.setPrimaryColor_(color);
|
||||||
} else {
|
} else {
|
||||||
this.setSecondaryColor(color);
|
this.setSecondaryColor_(color);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.PaletteController.prototype.setPrimaryColor = function (color) {
|
ns.PaletteController.prototype.setPrimaryColor_ = function (color) {
|
||||||
this.primaryColor = color;
|
|
||||||
this.updateColorPicker_(color, $('#color-picker'));
|
this.updateColorPicker_(color, $('#color-picker'));
|
||||||
$.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
|
$.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.PaletteController.prototype.setSecondaryColor = function (color) {
|
ns.PaletteController.prototype.setSecondaryColor_ = function (color) {
|
||||||
this.secondaryColor = color;
|
|
||||||
this.updateColorPicker_(color, $('#secondary-color-picker'));
|
this.updateColorPicker_(color, $('#secondary-color-picker'));
|
||||||
$.publish(Events.SECONDARY_COLOR_SELECTED, [color]);
|
$.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 () {
|
ns.PaletteController.prototype.swapColors = function () {
|
||||||
var primaryColor = this.getPrimaryColor();
|
var primaryColor = pskl.app.selectedColorsService.getPrimaryColor();
|
||||||
this.setPrimaryColor(this.getSecondaryColor());
|
this.setPrimaryColor_(pskl.app.selectedColorsService.getSecondaryColor());
|
||||||
this.setSecondaryColor(primaryColor);
|
this.setSecondaryColor_(primaryColor);
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.PaletteController.prototype.resetColors = function () {
|
ns.PaletteController.prototype.resetColors = function () {
|
||||||
this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR);
|
pskl.app.selectedColorsService.reset();
|
||||||
this.setSecondaryColor(Constants.TRANSPARENT_COLOR);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -10,10 +10,9 @@
|
||||||
// I apologize to my future self for this one.
|
// I apologize to my future self for this one.
|
||||||
var NO_SCROLL_MAX_COLORS = 20;
|
var NO_SCROLL_MAX_COLORS = 20;
|
||||||
|
|
||||||
ns.PalettesListController = function (paletteController, usedColorService) {
|
ns.PalettesListController = function (usedColorService) {
|
||||||
this.usedColorService = usedColorService;
|
this.usedColorService = usedColorService;
|
||||||
this.paletteService = pskl.app.paletteService;
|
this.paletteService = pskl.app.paletteService;
|
||||||
this.paletteController = paletteController;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.PalettesListController.prototype.init = function () {
|
ns.PalettesListController.prototype.init = function () {
|
||||||
|
@ -184,13 +183,13 @@
|
||||||
this.removeClass_(PRIMARY_COLOR_CLASSNAME);
|
this.removeClass_(PRIMARY_COLOR_CLASSNAME);
|
||||||
this.removeClass_(SECONDARY_COLOR_CLASSNAME);
|
this.removeClass_(SECONDARY_COLOR_CLASSNAME);
|
||||||
|
|
||||||
var colorContainer = this.getColorContainer_(this.paletteController.getSecondaryColor());
|
var colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getSecondaryColor());
|
||||||
if (colorContainer) {
|
if (colorContainer) {
|
||||||
colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME);
|
colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME);
|
||||||
colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME);
|
colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME);
|
||||||
}
|
}
|
||||||
|
|
||||||
colorContainer = this.getColorContainer_(this.paletteController.getPrimaryColor());
|
colorContainer = this.getColorContainer_(pskl.app.selectedColorsService.getPrimaryColor());
|
||||||
if (colorContainer) {
|
if (colorContainer) {
|
||||||
colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME);
|
colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME);
|
||||||
colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME);
|
colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME);
|
||||||
|
|
|
@ -45,8 +45,8 @@
|
||||||
width : this.piskelController.getWidth(),
|
width : this.piskelController.getWidth(),
|
||||||
height : this.piskelController.getHeight()
|
height : this.piskelController.getHeight()
|
||||||
},
|
},
|
||||||
primaryColor : pskl.app.paletteController.getPrimaryColor(),
|
primaryColor : pskl.app.selectedColorsService.getPrimaryColor(),
|
||||||
secondaryColor : pskl.app.paletteController.getSecondaryColor(),
|
secondaryColor : pskl.app.selectedColorsService.getSecondaryColor(),
|
||||||
selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId
|
selectedTool : pskl.app.toolController.currentSelectedTool.instance.toolId
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
43
src/js/service/MouseStateService.js
Normal file
43
src/js/service/MouseStateService.js
Normal 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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
|
@ -2,8 +2,7 @@
|
||||||
var ns = $.namespace('pskl.service');
|
var ns = $.namespace('pskl.service');
|
||||||
|
|
||||||
ns.SelectedColorsService = function () {
|
ns.SelectedColorsService = function () {
|
||||||
this.primaryColor_ = Constants.DEFAULT_PEN_COLOR;
|
this.reset();
|
||||||
this.secondaryColor_ = Constants.TRANSPARENT_COLOR;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.SelectedColorsService.prototype.init = function () {
|
ns.SelectedColorsService.prototype.init = function () {
|
||||||
|
@ -11,11 +10,17 @@
|
||||||
$.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onSecondaryColorUpdate_.bind(this));
|
$.subscribe(Events.SECONDARY_COLOR_SELECTED, this.onSecondaryColorUpdate_.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.SelectedColorsService.prototype.getColors = function () {
|
ns.SelectedColorsService.prototype.getPrimaryColor = function () {
|
||||||
if (this.primaryColor_ === null || this.secondaryColor_ === null) {
|
return this.primaryColor_;
|
||||||
throw 'SelectedColorsService not properly initialized.';
|
};
|
||||||
}
|
|
||||||
return [this.primaryColor_, this.secondaryColor_];
|
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) {
|
ns.SelectedColorsService.prototype.onPrimaryColorUpdate_ = function (evt, color) {
|
||||||
|
|
|
@ -13,13 +13,20 @@
|
||||||
|
|
||||||
pskl.utils.inherit(ns.BaseTool, pskl.tools.Tool);
|
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.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)) {
|
if (overlay.containsPixel(col, row)) {
|
||||||
this.updateHighlightedPixel(frame, overlay, col, row);
|
this.updateHighlightedPixel(frame, overlay, col, row);
|
||||||
} else {
|
} 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
|
* Bresenham line algorithm: Get an array of pixels from
|
||||||
|
|
|
@ -15,7 +15,10 @@
|
||||||
|
|
||||||
pskl.utils.inherit(ns.Circle, ns.ShapeTool);
|
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);
|
var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row);
|
||||||
for (var i = 0 ; i < circlePoints.length ; i++) {
|
for (var i = 0 ; i < circlePoints.length ; i++) {
|
||||||
// Change model:
|
// Change model:
|
||||||
|
|
|
@ -16,12 +16,12 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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)) {
|
if (frame.containsPixel(col, row)) {
|
||||||
var sampledColor = frame.getPixel(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]);
|
$.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]);
|
$.publish(Events.SELECT_SECONDARY_COLOR, [sampledColor]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,14 +21,14 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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)) {
|
if (frame.containsPixel(col, row)) {
|
||||||
var sampledColor = frame.getPixel(col, row);
|
var sampledColor = frame.getPixel(col, row);
|
||||||
|
|
||||||
var allLayers = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
var allLayers = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
||||||
var allFrames = event.shiftKey;
|
var allFrames = event.shiftKey;
|
||||||
|
|
||||||
this.swapColors(sampledColor, color, allLayers, allFrames);
|
this.swapColors(sampledColor, this.getToolColor(), allLayers, allFrames);
|
||||||
|
|
||||||
$.publish(Events.PISKEL_SAVE_STATE, {
|
$.publish(Events.PISKEL_SAVE_STATE, {
|
||||||
type : pskl.service.HistoryService.SNAPSHOT
|
type : pskl.service.HistoryService.SNAPSHOT
|
||||||
|
|
|
@ -16,21 +16,14 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.DitheringTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
|
ns.DitheringTool.prototype.applyToolAt = function(col, row, 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;
|
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();
|
this.draw(ditheringColor, col, row, frame, overlay);
|
||||||
var ditheringColor = usePrimaryColor ? selectedColors[0] : selectedColors[1];
|
|
||||||
this.superclass.applyToolAt.call(this, col, row, ditheringColor, frame, overlay, event);
|
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -18,13 +18,7 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
|
ns.Eraser.prototype.getToolColor = function() {
|
||||||
this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay, event);
|
return Constants.TRANSPARENT_COLOR;
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @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);
|
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* @provide pskl.tools.drawing.Eraser
|
* @provide pskl.tools.drawing.Lighten
|
||||||
*
|
*
|
||||||
* @require Constants
|
* @require Constants
|
||||||
* @require pskl.utils
|
* @require pskl.utils
|
||||||
|
@ -41,19 +41,24 @@
|
||||||
/**
|
/**
|
||||||
* @Override
|
* @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 overlayColor = overlay.getPixel(col, row);
|
||||||
var frameColor = frame.getPixel(col, row);
|
var frameColor = frame.getPixel(col, row);
|
||||||
var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
|
var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
|
||||||
|
|
||||||
var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
||||||
|
var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
|
||||||
var isSinglePass = event.shiftKey;
|
var isSinglePass = event.shiftKey;
|
||||||
|
|
||||||
var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
|
|
||||||
var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten;
|
var usedPixels = isDarken ? this.usedPixels_.darken : this.usedPixels_.lighten;
|
||||||
var key = col + '-' + row;
|
var key = col + '-' + row;
|
||||||
|
|
||||||
var doNotModify = isTransparent || (isSinglePass && usedPixels[key]);
|
var doNotModify = isTransparent || (isSinglePass && usedPixels[key]);
|
||||||
|
|
||||||
|
var color;
|
||||||
if (doNotModify) {
|
if (doNotModify) {
|
||||||
color = window.tinycolor(pixelColor);
|
color = window.tinycolor(pixelColor);
|
||||||
} else {
|
} else {
|
||||||
|
@ -64,10 +69,9 @@
|
||||||
color = window.tinycolor.lighten(pixelColor, step);
|
color = window.tinycolor.lighten(pixelColor, step);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (color) {
|
|
||||||
usedPixels[key] = true;
|
usedPixels[key] = true;
|
||||||
this.superclass.applyToolAt.call(this, col, row, color.toRgbString(), frame, overlay, event);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
// Convert tinycolor color to string format.
|
||||||
|
return color.toRgbString();
|
||||||
|
};
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -28,14 +28,14 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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.startCol = col;
|
||||||
this.startRow = row;
|
this.startRow = row;
|
||||||
this.currentFrame = frame;
|
this.currentFrame = frame;
|
||||||
this.currentFrameClone = frame.clone();
|
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 colDiff = col - this.startCol;
|
||||||
var rowDiff = row - this.startRow;
|
var rowDiff = row - this.startRow;
|
||||||
this.shiftFrame(colDiff, rowDiff, frame, this.currentFrameClone, event);
|
this.shiftFrame(colDiff, rowDiff, frame, this.currentFrameClone, event);
|
||||||
|
@ -66,7 +66,7 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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 colDiff = col - this.startCol;
|
||||||
var rowDiff = row - this.startRow;
|
var rowDiff = row - this.startRow;
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,8 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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);
|
pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
|
||||||
|
|
||||||
this.raiseSaveStateEvent({
|
this.raiseSaveStateEvent({
|
||||||
|
|
|
@ -10,13 +10,15 @@
|
||||||
ns.ShapeTool.call(this);
|
ns.ShapeTool.call(this);
|
||||||
|
|
||||||
this.toolId = 'tool-rectangle';
|
this.toolId = 'tool-rectangle';
|
||||||
|
|
||||||
this.helpText = 'Rectangle tool';
|
this.helpText = 'Rectangle tool';
|
||||||
};
|
};
|
||||||
|
|
||||||
pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);
|
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);
|
var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
|
||||||
for (var i = 0 ; i < strokePoints.length ; i++) {
|
for (var i = 0 ; i < strokePoints.length ; i++) {
|
||||||
// Change model:
|
// Change model:
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
var ns = $.namespace('pskl.tools.drawing');
|
var ns = $.namespace('pskl.tools.drawing');
|
||||||
/**
|
/**
|
||||||
* Abstract shape tool class, parent to all shape tools (rectangle, circle).
|
* 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() {
|
ns.ShapeTool = function() {
|
||||||
// Shapes's first point coordinates (set in applyToolAt)
|
// Shapes's first point coordinates (set in applyToolAt)
|
||||||
|
@ -19,35 +19,37 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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]);
|
$.publish(Events.DRAG_START, [col, row]);
|
||||||
this.startCol = col;
|
this.startCol = col;
|
||||||
this.startRow = row;
|
this.startRow = row;
|
||||||
|
|
||||||
// Drawing the first point of the rectangle in the fake overlay canvas:
|
// 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);
|
var coords = this.getCoordinates_(col, row, event);
|
||||||
$.publish(Events.CURSOR_MOVED, [coords.col, coords.row]);
|
$.publish(Events.CURSOR_MOVED, [coords.col, coords.row]);
|
||||||
|
|
||||||
overlay.clear();
|
overlay.clear();
|
||||||
|
var color = this.getToolColor();
|
||||||
if (color == Constants.TRANSPARENT_COLOR) {
|
if (color == Constants.TRANSPARENT_COLOR) {
|
||||||
color = Constants.SELECTION_TRANSPARENT_COLOR;
|
color = Constants.SELECTION_TRANSPARENT_COLOR;
|
||||||
}
|
}
|
||||||
|
|
||||||
// draw in overlay
|
// draw in overlay
|
||||||
this.draw_(coords.col, coords.row, color, overlay);
|
this.draw(coords.col, coords.row, color, overlay);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.ShapeTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
|
ns.ShapeTool.prototype.releaseToolAt = function(col, row, frame, overlay, event) {
|
||||||
overlay.clear();
|
overlay.clear();
|
||||||
var coords = this.getCoordinates_(col, row, event);
|
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]);
|
$.publish(Events.DRAG_END, [coords.col, coords.row]);
|
||||||
this.raiseSaveStateEvent({
|
this.raiseSaveStateEvent({
|
||||||
|
@ -65,7 +67,7 @@
|
||||||
ns.ShapeTool.prototype.replay = function(frame, replayData) {
|
ns.ShapeTool.prototype.replay = function(frame, replayData) {
|
||||||
this.startCol = replayData.startCol;
|
this.startCol = replayData.startCol;
|
||||||
this.startRow = replayData.startRow;
|
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;
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -21,12 +21,16 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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.previousCol = col;
|
||||||
this.previousRow = row;
|
this.previousRow = row;
|
||||||
|
|
||||||
overlay.setPixel(col, row, color);
|
overlay.setPixel(col, row, color);
|
||||||
|
|
||||||
if (color === Constants.TRANSPARENT_COLOR) {
|
if (color === Constants.TRANSPARENT_COLOR) {
|
||||||
frame.setPixel(col, row, color);
|
frame.setPixel(col, row, color);
|
||||||
}
|
}
|
||||||
|
@ -40,7 +44,7 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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)) {
|
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
|
// The pen movement is too fast for the mousemove frequency, there is a gap between the
|
||||||
// current point and the previously drawn one.
|
// current point and the previously drawn one.
|
||||||
|
@ -48,24 +52,24 @@
|
||||||
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
|
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
|
||||||
for (var i = 0, l = interpolatedPixels.length ; i < l ; i++) {
|
for (var i = 0, l = interpolatedPixels.length ; i < l ; i++) {
|
||||||
var coords = interpolatedPixels[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 {
|
} else {
|
||||||
this.applyToolAt(col, row, color, frame, overlay, event);
|
this.applyToolAt(col, row, frame, overlay, event);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.previousCol = col;
|
this.previousCol = col;
|
||||||
this.previousRow = row;
|
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
|
// apply on real frame
|
||||||
this.setPixelsToFrame_(frame, this.pixels);
|
this.setPixelsToFrame_(frame, this.pixels);
|
||||||
|
|
||||||
// save state
|
// save state
|
||||||
this.raiseSaveStateEvent({
|
this.raiseSaveStateEvent({
|
||||||
pixels : this.pixels.slice(0),
|
pixels : this.pixels.slice(0),
|
||||||
color : color
|
color : this.getToolColor()
|
||||||
});
|
});
|
||||||
|
|
||||||
// reset
|
// reset
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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.startCol = col;
|
||||||
this.startRow = row;
|
this.startRow = row;
|
||||||
|
|
||||||
|
@ -33,10 +33,10 @@
|
||||||
|
|
||||||
// The fake canvas where we will draw the preview of the stroke:
|
// The fake canvas where we will draw the preview of the stroke:
|
||||||
// Drawing the first point of the stroke in the fake overlay canvas:
|
// 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();
|
overlay.clear();
|
||||||
|
|
||||||
// When the user moussemove (before releasing), we dynamically compute the
|
// When the user moussemove (before releasing), we dynamically compute the
|
||||||
|
@ -44,6 +44,7 @@
|
||||||
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
|
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
|
||||||
|
|
||||||
// Drawing current stroke:
|
// Drawing current stroke:
|
||||||
|
var color = this.getToolColor();
|
||||||
for (var i = 0; i < strokePoints.length; i++) {
|
for (var i = 0; i < strokePoints.length; i++) {
|
||||||
|
|
||||||
if (color == Constants.TRANSPARENT_COLOR) {
|
if (color == Constants.TRANSPARENT_COLOR) {
|
||||||
|
@ -62,7 +63,8 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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 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)
|
// the model and draw them in the drawing canvas (not the fake overlay anymore)
|
||||||
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
|
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
|
||||||
|
|
|
@ -28,8 +28,10 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
|
ns.VerticalMirrorPen.prototype.applyToolAt = function(col, row, frame, overlay, event) {
|
||||||
this.superclass.applyToolAt.call(this, col, row, color, frame, overlay);
|
var color = this.getToolColor();
|
||||||
|
this.draw(color, col, row, frame, overlay);
|
||||||
|
|
||||||
this.backupPreviousPositions_();
|
this.backupPreviousPositions_();
|
||||||
|
|
||||||
var mirroredCol = this.getSymmetricCol_(col, frame);
|
var mirroredCol = this.getSymmetricCol_(col, frame);
|
||||||
|
@ -37,15 +39,15 @@
|
||||||
|
|
||||||
var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
||||||
if (!hasCtrlKey) {
|
if (!hasCtrlKey) {
|
||||||
this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
|
this.draw(color, mirroredCol, row, frame, overlay);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (event.shiftKey || hasCtrlKey) {
|
if (event.shiftKey || hasCtrlKey) {
|
||||||
this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
|
this.draw(color, col, mirroredRow, frame, overlay);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (event.shiftKey) {
|
if (event.shiftKey) {
|
||||||
this.superclass.applyToolAt.call(this, mirroredCol, mirroredRow, color, frame, overlay);
|
this.draw(color, mirroredCol, mirroredRow, frame, overlay);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.restorePreviousPositions_();
|
this.restorePreviousPositions_();
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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.startCol = col;
|
||||||
this.startRow = row;
|
this.startRow = row;
|
||||||
|
|
||||||
|
@ -42,32 +42,32 @@
|
||||||
// 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 = 'moveSelection';
|
this.mode = 'moveSelection';
|
||||||
this.onSelectionDragStart_(col, row, color, frame, overlay);
|
this.onSelectionDragStart_(col, row, frame, overlay);
|
||||||
} else {
|
} else {
|
||||||
this.mode = 'select';
|
this.mode = 'select';
|
||||||
this.onSelectStart_(col, row, color, frame, overlay);
|
this.onSelectStart_(col, row, frame, overlay);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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') {
|
if (this.mode == 'select') {
|
||||||
this.onSelect_(col, row, color, frame, overlay);
|
this.onSelect_(col, row, frame, overlay);
|
||||||
} else if (this.mode == 'moveSelection') {
|
} else if (this.mode == 'moveSelection') {
|
||||||
this.onSelectionDrag_(col, row, color, frame, overlay);
|
this.onSelectionDrag_(col, row, frame, overlay);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @override
|
* @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') {
|
if (this.mode == 'select') {
|
||||||
this.onSelectEnd_(col, row, color, frame, overlay);
|
this.onSelectEnd_(col, row, frame, overlay);
|
||||||
} else if (this.mode == 'moveSelection') {
|
} 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.
|
* instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
|
||||||
* @override
|
* @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 (overlay.containsPixel(col, row)) {
|
||||||
if (this.isInSelection(col, row)) {
|
if (this.isInSelection(col, row)) {
|
||||||
// We're hovering the selection, show the move tool:
|
// 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.
|
// The list of callbacks to implement by specialized tools to implement the selection creation behavior.
|
||||||
/** @protected */
|
/** @protected */
|
||||||
ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {};
|
ns.BaseSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {};
|
||||||
/** @protected */
|
/** @protected */
|
||||||
ns.BaseSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {};
|
ns.BaseSelect.prototype.onSelect_ = function (col, row, frame, overlay) {};
|
||||||
/** @protected */
|
/** @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.
|
// The list of callbacks that define the drag'n drop behavior of the selection.
|
||||||
/** @private */
|
/** @private */
|
||||||
ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) {};
|
ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, frame, overlay) {};
|
||||||
|
|
||||||
/** @private */
|
/** @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 deltaCol = col - this.lastCol;
|
||||||
var deltaRow = row - this.lastRow;
|
var deltaRow = row - this.lastRow;
|
||||||
|
|
||||||
|
@ -152,7 +152,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @private */
|
/** @private */
|
||||||
ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color, frame, overlay) {
|
ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, frame, overlay) {
|
||||||
this.onSelectionDrag_(col, row, color, frame, overlay);
|
this.onSelectionDrag_(col, row, frame, overlay);
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
|
ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
|
||||||
this.selectionOrigin_ = {
|
this.selectionOrigin_ = {
|
||||||
col : col,
|
col : col,
|
||||||
row : row
|
row : row
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
$.publish(Events.SELECTION_DISMISSED);
|
$.publish(Events.SELECTION_DISMISSED);
|
||||||
} else {
|
} else {
|
||||||
this.startSelection_(col, row);
|
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.
|
* the current mouse coordiinate in sprite.
|
||||||
* @override
|
* @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)) {
|
if (!this.hasSelection && (this.selectionOrigin_.col !== col || this.selectionOrigin_.row !== row)) {
|
||||||
this.startSelection_(col, 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) {
|
if (this.hasSelection) {
|
||||||
this.onSelect_(col, row, color, frame, overlay);
|
this.onSelect_(col, row, frame, overlay);
|
||||||
$.publish(Events.DRAG_END, [col, row]);
|
$.publish(Events.DRAG_END, [col, row]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
* So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
|
* So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
|
ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, frame, overlay) {
|
||||||
// Clean previous selection:
|
// Clean previous selection:
|
||||||
$.publish(Events.SELECTION_DISMISSED);
|
$.publish(Events.SELECTION_DISMISSED);
|
||||||
overlay.clear();
|
overlay.clear();
|
||||||
|
|
|
@ -161,6 +161,7 @@
|
||||||
"js/service/CurrentColorsService.js",
|
"js/service/CurrentColorsService.js",
|
||||||
"js/service/FileDropperService.js",
|
"js/service/FileDropperService.js",
|
||||||
"js/service/SelectedColorsService.js",
|
"js/service/SelectedColorsService.js",
|
||||||
|
"js/service/MouseStateService.js",
|
||||||
|
|
||||||
// Tools
|
// Tools
|
||||||
"js/tools/ToolsHelper.js",
|
"js/tools/ToolsHelper.js",
|
||||||
|
|
|
@ -3,10 +3,8 @@ describe("SelectedColorsService test suite", function() {
|
||||||
it("returns the default selected colors initially", function() {
|
it("returns the default selected colors initially", function() {
|
||||||
var service = new pskl.service.SelectedColorsService();
|
var service = new pskl.service.SelectedColorsService();
|
||||||
|
|
||||||
var defaultSelectedColors = service.getColors();
|
expect(service.getPrimaryColor()).toBe(Constants.DEFAULT_PEN_COLOR);
|
||||||
expect(defaultSelectedColors.length).toBe(2);
|
expect(service.getSecondaryColor()).toBe(Constants.TRANSPARENT_COLOR);
|
||||||
expect(defaultSelectedColors[0]).toBe(Constants.DEFAULT_PEN_COLOR);
|
|
||||||
expect(defaultSelectedColors[1]).toBe(Constants.TRANSPARENT_COLOR);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("reacts to PRIMARY_COLOR_SELECTED event", function() {
|
it("reacts to PRIMARY_COLOR_SELECTED event", function() {
|
||||||
|
@ -16,10 +14,8 @@ describe("SelectedColorsService test suite", function() {
|
||||||
var expectedColor = "#123456";
|
var expectedColor = "#123456";
|
||||||
$.publish(Events.PRIMARY_COLOR_SELECTED, [expectedColor]);
|
$.publish(Events.PRIMARY_COLOR_SELECTED, [expectedColor]);
|
||||||
|
|
||||||
var defaultSelectedColors = service.getColors();
|
expect(service.getPrimaryColor()).toBe(expectedColor);
|
||||||
expect(defaultSelectedColors.length).toBe(2);
|
expect(service.getSecondaryColor()).toBe(Constants.TRANSPARENT_COLOR);
|
||||||
expect(defaultSelectedColors[0]).toBe(expectedColor);
|
|
||||||
expect(defaultSelectedColors[1]).toBe(Constants.TRANSPARENT_COLOR);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("reacts to SECONDARY_COLOR_SELECTED event", function() {
|
it("reacts to SECONDARY_COLOR_SELECTED event", function() {
|
||||||
|
@ -29,9 +25,7 @@ describe("SelectedColorsService test suite", function() {
|
||||||
var expectedColor = "#123456";
|
var expectedColor = "#123456";
|
||||||
$.publish(Events.SECONDARY_COLOR_SELECTED, [expectedColor]);
|
$.publish(Events.SECONDARY_COLOR_SELECTED, [expectedColor]);
|
||||||
|
|
||||||
var defaultSelectedColors = service.getColors();
|
expect(service.getPrimaryColor()).toBe(Constants.DEFAULT_PEN_COLOR);
|
||||||
expect(defaultSelectedColors.length).toBe(2);
|
expect(service.getSecondaryColor()).toBe(expectedColor);
|
||||||
expect(defaultSelectedColors[0]).toBe(Constants.DEFAULT_PEN_COLOR);
|
|
||||||
expect(defaultSelectedColors[1]).toBe(expectedColor);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user