mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Dev environment : closure compiler + jshint update
Fixed error raised by closure compiler Added es3 option to jshint (detect trailing commas) Added curly option to jshint (missing curly braces for if/for blocks) Removed trailing whitespaces (not enforced through jshint though)
This commit is contained in:
parent
b254c582b9
commit
ca427e0853
12
Gruntfile.js
12
Gruntfile.js
@ -36,6 +36,8 @@ module.exports = function(grunt) {
|
||||
undef : true,
|
||||
latedef : true,
|
||||
browser : true,
|
||||
curly : true,
|
||||
es3 : true,
|
||||
globals : {'$':true, 'jQuery' : true, 'pskl':true, 'Events':true, 'Constants':true, 'console' : true, 'module':true, 'require':true}
|
||||
},
|
||||
files: [
|
||||
@ -61,17 +63,17 @@ module.exports = function(grunt) {
|
||||
}
|
||||
},
|
||||
ghost : {
|
||||
default : getGhostConfig(3000),
|
||||
'default' : getGhostConfig(3000),
|
||||
local : getGhostConfig(50)
|
||||
},
|
||||
concat : {
|
||||
options : {
|
||||
separator : ';',
|
||||
separator : ';'
|
||||
},
|
||||
dist : {
|
||||
src : piskelScripts,
|
||||
dest : 'build/piskel-packaged.js',
|
||||
},
|
||||
dest : 'build/piskel-packaged.js'
|
||||
}
|
||||
},
|
||||
uglify : {
|
||||
options : {
|
||||
@ -159,7 +161,7 @@ module.exports = function(grunt) {
|
||||
// Validate
|
||||
grunt.registerTask('lint', ['leadingIndent:jsFiles', 'leadingIndent:cssFiles', 'jshint']);
|
||||
|
||||
// Validate & Test
|
||||
// Validate & Test
|
||||
grunt.registerTask('test', ['leadingIndent:jsFiles', 'leadingIndent:cssFiles', 'jshint', 'compile', 'connect:test', 'ghost:default']);
|
||||
|
||||
// Validate & Test (faster version) will NOT work on travis !!
|
||||
|
@ -13,7 +13,7 @@ var Constants = {
|
||||
|
||||
PREVIEW_FILM_SIZE : 120,
|
||||
|
||||
DEFAULT_PEN_COLOR : '#000000',
|
||||
DEFAULT_PEN_COLOR : '#000000',
|
||||
TRANSPARENT_COLOR : 'TRANSPARENT',
|
||||
|
||||
/*
|
||||
|
@ -60,5 +60,5 @@ var Events = {
|
||||
REDO: "REDO",
|
||||
CUT: "CUT",
|
||||
COPY: "COPY",
|
||||
PASTE: "PASTE"
|
||||
PASTE: "PASTE"
|
||||
};
|
@ -5,7 +5,7 @@
|
||||
* @public
|
||||
*/
|
||||
this.piskelController = piskelController;
|
||||
|
||||
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
@ -21,12 +21,12 @@
|
||||
"dpi": this.calculateDPI_(),
|
||||
"supportGridRendering" : true
|
||||
};
|
||||
|
||||
|
||||
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
|
||||
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
|
||||
this.layersDownRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "layers-canvas layers-down-canvas");
|
||||
this.layersUpRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "layers-canvas layers-up-canvas");
|
||||
|
||||
|
||||
|
||||
// State of drawing controller:
|
||||
this.isClicked = false;
|
||||
@ -39,7 +39,7 @@
|
||||
|
||||
ns.DrawingController.prototype.init = function () {
|
||||
// this.render();
|
||||
|
||||
|
||||
this.initMouseBehavior();
|
||||
|
||||
$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
|
||||
@ -76,7 +76,7 @@
|
||||
this.container.mousedown($.proxy(this.onMousedown_, this));
|
||||
this.container.mousemove($.proxy(this.onMousemove_, this));
|
||||
body.mouseup($.proxy(this.onMouseup_, this));
|
||||
|
||||
|
||||
// Deactivate right click:
|
||||
body.contextmenu(this.onCanvasContextMenu_);
|
||||
};
|
||||
@ -104,22 +104,22 @@
|
||||
*/
|
||||
ns.DrawingController.prototype.onMousedown_ = function (event) {
|
||||
this.isClicked = true;
|
||||
|
||||
|
||||
if(event.button == 2) { // right click
|
||||
this.isRightClicked = true;
|
||||
$.publish(Events.CANVAS_RIGHT_CLICKED);
|
||||
}
|
||||
|
||||
var coords = this.getSpriteCoordinates(event);
|
||||
|
||||
|
||||
this.currentToolBehavior.applyToolAt(
|
||||
coords.col, coords.row,
|
||||
this.getCurrentColor_(),
|
||||
this.piskelController.getCurrentFrame(),
|
||||
this.overlayFrame,
|
||||
this.wrapEvtInfo_(event)
|
||||
);
|
||||
|
||||
);
|
||||
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST);
|
||||
};
|
||||
|
||||
@ -132,7 +132,7 @@
|
||||
if ((currentTime - this.previousMousemoveTime) > 40 ) {
|
||||
var coords = this.getSpriteCoordinates(event);
|
||||
if (this.isClicked) {
|
||||
|
||||
|
||||
this.currentToolBehavior.moveToolAt(
|
||||
coords.col, coords.row,
|
||||
this.getCurrentColor_(),
|
||||
@ -140,7 +140,7 @@
|
||||
this.overlayFrame,
|
||||
this.wrapEvtInfo_(event)
|
||||
);
|
||||
|
||||
|
||||
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
|
||||
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
|
||||
// you don't need to draw anything when mousemoving and you request useless localStorage.
|
||||
@ -197,7 +197,7 @@
|
||||
evtInfo.button = Constants.RIGHT_BUTTON;
|
||||
}
|
||||
return evtInfo;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
@ -239,7 +239,7 @@
|
||||
event.stopPropagation();
|
||||
event.cancelBubble = true;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.render = function () {
|
||||
@ -277,7 +277,7 @@
|
||||
if (this.serializedLayerFrame != serialized) {
|
||||
this.layersUpRenderer.clear();
|
||||
this.layersDownRenderer.clear();
|
||||
|
||||
|
||||
var downLayers = layers.slice(0, currentLayerIndex);
|
||||
var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
|
||||
this.layersDownRenderer.render(downFrame);
|
||||
@ -336,13 +336,13 @@
|
||||
this.layersUpRenderer.updateDPI(dpi);
|
||||
this.layersDownRenderer.updateDPI(dpi);
|
||||
this.serializedLayerFrame ="";
|
||||
|
||||
|
||||
var currentFrameHeight = this.piskelController.getCurrentFrame().getHeight();
|
||||
var canvasHeight = currentFrameHeight * dpi;
|
||||
if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
|
||||
canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight;
|
||||
}
|
||||
|
||||
|
||||
var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - canvasHeight) / 2);
|
||||
$('#column-wrapper').css({
|
||||
'top': verticalGapInPixel + 'px',
|
||||
|
@ -49,7 +49,7 @@
|
||||
};
|
||||
|
||||
// backward from framesheet
|
||||
ns.PiskelController.prototype.getFrameByIndex =
|
||||
ns.PiskelController.prototype.getFrameByIndex =
|
||||
ns.PiskelController.prototype.getMergedFrameAt;
|
||||
|
||||
ns.PiskelController.prototype.addEmptyFrame = function () {
|
||||
|
@ -63,7 +63,7 @@
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.createPreviews_ = function () {
|
||||
|
||||
|
||||
this.container.html("");
|
||||
// Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
|
||||
$(".tooltip").remove();
|
||||
@ -94,7 +94,7 @@
|
||||
* @private
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
|
||||
|
||||
|
||||
$("#preview-list").sortable({
|
||||
placeholder: "preview-tile-drop-proxy",
|
||||
update: $.proxy(this.onUpdate_, this),
|
||||
@ -124,7 +124,7 @@
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
|
||||
var currentFrame = this.piskelController.getCurrentLayer().getFrameAt(tileNumber);
|
||||
|
||||
|
||||
var previewTileRoot = document.createElement("li");
|
||||
var classname = "preview-tile";
|
||||
previewTileRoot.setAttribute("data-tile-number", tileNumber);
|
||||
@ -136,11 +136,11 @@
|
||||
|
||||
var canvasContainer = document.createElement("div");
|
||||
canvasContainer.className = "canvas-container";
|
||||
|
||||
|
||||
var canvasBackground = document.createElement("div");
|
||||
canvasBackground.className = "canvas-background";
|
||||
canvasContainer.appendChild(canvasBackground);
|
||||
|
||||
|
||||
previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
|
||||
|
||||
var cloneFrameButton = document.createElement("button");
|
||||
@ -156,7 +156,7 @@
|
||||
var renderingOptions = {"dpi": this.dpi };
|
||||
var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
|
||||
currentFrameRenderer.render(currentFrame);
|
||||
|
||||
|
||||
previewTileRoot.appendChild(canvasContainer);
|
||||
|
||||
if(tileNumber > 0 || this.piskelController.getFrameCount() > 1) {
|
||||
@ -178,7 +178,7 @@
|
||||
tileCount.className = "tile-overlay tile-count";
|
||||
tileCount.innerHTML = tileNumber;
|
||||
previewTileRoot.appendChild(tileCount);
|
||||
|
||||
|
||||
|
||||
return previewTileRoot;
|
||||
};
|
||||
@ -187,7 +187,7 @@
|
||||
// has not class tile-action:
|
||||
if(!evt.target.classList.contains('tile-overlay')) {
|
||||
this.piskelController.setCurrentFrameIndex(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
|
||||
|
@ -10,7 +10,7 @@
|
||||
this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
|
||||
this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
|
||||
|
||||
this.uploadFormJQ = $("[name=gif-export-upload-form]");
|
||||
this.uploadFormJQ = $("[name=gif-export-upload-form]");
|
||||
this.uploadFormJQ.submit(this.upload.bind(this));
|
||||
|
||||
this.initRadioElements_();
|
||||
@ -53,7 +53,7 @@
|
||||
[1],
|
||||
[5],
|
||||
[10,true], //default
|
||||
[20],
|
||||
[20]
|
||||
];
|
||||
|
||||
for (var i = 0 ; i < dpis.length ; i++) {
|
||||
@ -68,7 +68,7 @@
|
||||
var value = dpi[0];
|
||||
var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
|
||||
var radio = pskl.utils.Template.createFromHTML(radioHTML);
|
||||
|
||||
|
||||
if (dpi[1]) {
|
||||
radio.getElementsByTagName("input")[0].setAttribute("checked", "checked");
|
||||
}
|
||||
|
@ -9,7 +9,7 @@
|
||||
ns.BaseTool = function() {};
|
||||
|
||||
ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay) {};
|
||||
|
||||
|
||||
ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
|
||||
|
||||
ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
|
||||
@ -27,7 +27,7 @@
|
||||
overlay.setPixel(col, row, Constants.TOOL_TARGET_HIGHLIGHT_COLOR);
|
||||
|
||||
this.highlightedPixelCol = col;
|
||||
this.highlightedPixelRow = row;
|
||||
this.highlightedPixelRow = row;
|
||||
}
|
||||
};
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
* @private
|
||||
*/
|
||||
ns.BaseTool.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
|
||||
|
||||
|
||||
var pixels = [];
|
||||
var dx = Math.abs(x1-x0);
|
||||
var dy = Math.abs(y1-y0);
|
||||
@ -56,7 +56,10 @@
|
||||
// Do what you need to for this
|
||||
pixels.push({"col": x0, "row": y0});
|
||||
|
||||
if ((x0==x1) && (y0==y1)) break;
|
||||
if ((x0==x1) && (y0==y1)) {
|
||||
break;
|
||||
}
|
||||
|
||||
var e2 = 2*err;
|
||||
if (e2>-dy){
|
||||
err -= dy;
|
||||
|
@ -9,21 +9,21 @@
|
||||
ns.Circle = function() {
|
||||
this.toolId = "tool-circle";
|
||||
this.helpText = "Circle tool";
|
||||
|
||||
|
||||
// Circle's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
this.startRow = null;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.Circle, ns.BaseTool);
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Circle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
|
||||
this.startCol = col;
|
||||
this.startRow = row;
|
||||
|
||||
|
||||
// Drawing the first point of the rectangle in the fake overlay canvas:
|
||||
overlay.setPixel(col, row, color);
|
||||
};
|
||||
@ -41,7 +41,7 @@
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
|
||||
ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
|
||||
overlay.clear();
|
||||
if(frame.containsPixel(col, row)) { // cancel if outside of canvas
|
||||
// draw in frame to finalize
|
||||
@ -61,7 +61,7 @@
|
||||
var coords = pskl.PixelUtils.getOrderedRectangleCoordinates(x0, y0, x1, y1);
|
||||
var xC = (coords.x0 + coords.x1)/2;
|
||||
var yC = (coords.y0 + coords.y1)/2;
|
||||
|
||||
|
||||
var rX = coords.x1 - xC;
|
||||
var rY = coords.y1 - yC;
|
||||
|
||||
|
@ -9,14 +9,14 @@
|
||||
ns.Move = function() {
|
||||
this.toolId = "tool-move";
|
||||
this.helpText = "Move tool";
|
||||
|
||||
|
||||
// Stroke's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
this.startRow = null;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.Move, ns.BaseTool);
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
@ -26,7 +26,7 @@
|
||||
this.frameClone = frame.clone();
|
||||
};
|
||||
|
||||
ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) {
|
||||
ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) {
|
||||
var colDiff = col - this.startCol, rowDiff = row - this.startRow;
|
||||
this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
|
||||
};
|
||||
|
@ -9,21 +9,21 @@
|
||||
ns.Rectangle = function() {
|
||||
this.toolId = "tool-rectangle";
|
||||
this.helpText = "Rectangle tool";
|
||||
|
||||
|
||||
// Rectangle's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
this.startRow = null;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.Rectangle, ns.BaseTool);
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Rectangle.prototype.applyToolAt = function(col, row, color, frame, overlay) {
|
||||
this.startCol = col;
|
||||
this.startRow = row;
|
||||
|
||||
|
||||
// Drawing the first point of the rectangle in the fake overlay canvas:
|
||||
overlay.setPixel(col, row, color);
|
||||
};
|
||||
@ -41,7 +41,7 @@
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
|
||||
ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
|
||||
overlay.clear();
|
||||
if(frame.containsPixel(col, row)) { // cancel if outside of canvas
|
||||
// draw in frame to finalize
|
||||
|
@ -16,14 +16,14 @@
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.Stroke, ns.BaseTool);
|
||||
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay) {
|
||||
this.startCol = col;
|
||||
this.startRow = row;
|
||||
|
||||
|
||||
// When drawing a stroke we don't change the model instantly, since the
|
||||
// user can move his cursor to change the stroke direction and length
|
||||
// dynamically. Instead we draw the (preview) stroke in a fake canvas that
|
||||
@ -39,10 +39,10 @@
|
||||
ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay) {
|
||||
overlay.clear();
|
||||
|
||||
// When the user moussemove (before releasing), we dynamically compute the
|
||||
// When the user moussemove (before releasing), we dynamically compute the
|
||||
// pixel to draw the line and draw this line in the overlay canvas:
|
||||
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
|
||||
|
||||
|
||||
// Drawing current stroke:
|
||||
for(var i = 0; i< strokePoints.length; i++) {
|
||||
|
||||
@ -51,10 +51,10 @@
|
||||
// If the stroke color is transparent, we won't be
|
||||
// able to see it during the movement.
|
||||
// We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke.
|
||||
// When the stroke tool will be released, It will draw a transparent stroke,
|
||||
// eg deleting the equivalent of a stroke.
|
||||
// When the stroke tool will be released, It will draw a transparent stroke,
|
||||
// eg deleting the equivalent of a stroke.
|
||||
color = Constants.SELECTION_TRANSPARENT_COLOR;
|
||||
}
|
||||
}
|
||||
overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
|
||||
}
|
||||
};
|
||||
@ -73,8 +73,8 @@
|
||||
// Change model:
|
||||
frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
// For now, we are done with the stroke tool and don't need an overlay anymore:
|
||||
overlay.clear();
|
||||
overlay.clear();
|
||||
};
|
||||
})();
|
||||
|
@ -11,7 +11,7 @@
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
|
||||
|
||||
|
||||
|
||||
ns.VerticalMirrorPen.prototype.setMirrorContext = function() {
|
||||
this.swap = this.previousCol;
|
||||
@ -41,6 +41,6 @@
|
||||
* @private
|
||||
*/
|
||||
ns.VerticalMirrorPen.prototype.getSymmetricCol_ = function(col, frame) {
|
||||
return frame.getWidth() - col - 1;
|
||||
return frame.getWidth() - col - 1;
|
||||
};
|
||||
})();
|
||||
|
@ -9,7 +9,7 @@
|
||||
ns.BaseSelect = function() {
|
||||
this.secondaryToolId = "tool-move";
|
||||
this.BodyRoot = $('body');
|
||||
|
||||
|
||||
// Select's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
this.startRow = null;
|
||||
@ -23,17 +23,17 @@
|
||||
ns.BaseSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) {
|
||||
this.startCol = col;
|
||||
this.startRow = row;
|
||||
|
||||
|
||||
this.lastCol = col;
|
||||
this.lastRow = row;
|
||||
|
||||
|
||||
// The select tool can be in two different state.
|
||||
// If the inital click of the tool is not on a selection, we go in "select"
|
||||
// mode to create a selection.
|
||||
// If the initial click is on a previous selection, we go in "moveSelection"
|
||||
// mode to allow to move the selection by drag'n dropping it.
|
||||
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
|
||||
|
||||
|
||||
this.mode = "select";
|
||||
this.onSelectStart_(col, row, color, frame, overlay);
|
||||
}
|
||||
@ -49,11 +49,11 @@
|
||||
*/
|
||||
ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
|
||||
if(this.mode == "select") {
|
||||
|
||||
|
||||
this.onSelect_(col, row, color, frame, overlay);
|
||||
}
|
||||
else if(this.mode == "moveSelection") {
|
||||
|
||||
|
||||
this.onSelectionDrag_(col, row, color, frame, overlay);
|
||||
}
|
||||
};
|
||||
@ -61,11 +61,11 @@
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
|
||||
ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
|
||||
if(this.mode == "select") {
|
||||
this.onSelectEnd_(col, row, color, frame, overlay);
|
||||
} else if(this.mode == "moveSelection") {
|
||||
|
||||
|
||||
this.onSelectionDragEnd_(col, row, color, frame, overlay);
|
||||
}
|
||||
};
|
||||
@ -77,7 +77,7 @@
|
||||
* @override
|
||||
*/
|
||||
ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
|
||||
|
||||
|
||||
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
|
||||
// We're hovering the selection, show the move tool:
|
||||
this.BodyRoot.addClass(this.toolId);
|
||||
@ -135,14 +135,14 @@
|
||||
// we clone it to have a reference for the later shifting process.
|
||||
this.overlayFrameReference = overlay.clone();
|
||||
};
|
||||
|
||||
|
||||
/** @private */
|
||||
ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) {
|
||||
var deltaCol = col - this.lastCol;
|
||||
var deltaRow = row - this.lastRow;
|
||||
|
||||
|
||||
var colDiff = col - this.startCol, rowDiff = row - this.startRow;
|
||||
|
||||
|
||||
// Shifting selection on overlay frame:
|
||||
this.shiftOverlayFrame_(colDiff, rowDiff, overlay, this.overlayFrameReference);
|
||||
|
||||
@ -150,7 +150,7 @@
|
||||
$.publish(Events.SELECTION_MOVE_REQUEST, [deltaCol, deltaRow]);
|
||||
|
||||
this.lastCol = col;
|
||||
this.lastRow = row;
|
||||
this.lastRow = row;
|
||||
};
|
||||
|
||||
/** @private */
|
||||
|
@ -1,6 +1,6 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.model");
|
||||
|
||||
|
||||
ns.Frame = function (width, height) {
|
||||
if (width && height) {
|
||||
this.width = width;
|
||||
@ -130,7 +130,7 @@
|
||||
if (this.stateIndex < this.previousStates.length - 1) {
|
||||
this.stateIndex++;
|
||||
this.setPixels(this.previousStates[this.stateIndex]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.Frame.prototype.isSameSize = function (otherFrame) {
|
||||
|
@ -52,7 +52,7 @@
|
||||
return colors;
|
||||
};
|
||||
|
||||
// Could be used to pass around model using long GET param (good enough for simple models) and
|
||||
// Could be used to pass around model using long GET param (good enough for simple models) and
|
||||
// do some temporary locastorage
|
||||
ns.FrameSheet.prototype.serialize = function() {
|
||||
var serializedFrames = [];
|
||||
@ -73,7 +73,7 @@
|
||||
this.load(JSON.parse(serialized));
|
||||
} catch (e) {
|
||||
throw "Could not load serialized framesheet : " + e.message;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
$.publish(Events.FRAMESHEET_RESET);
|
||||
};
|
||||
|
||||
|
||||
|
||||
ns.FrameSheet.prototype.hasFrameAtIndex = function(index) {
|
||||
return (index >= 0 && index < this.frames.length);
|
||||
};
|
||||
@ -107,7 +107,7 @@
|
||||
ns.FrameSheet.prototype.getFrameByIndex = function(index) {
|
||||
if (isNaN(index)) {
|
||||
throw "Bad argument value for getFrameByIndex method: <" + index + ">";
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.hasFrameAtIndex(index)) {
|
||||
throw "Out of bound index for frameSheet object.";
|
||||
|
@ -10,8 +10,8 @@
|
||||
|
||||
ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
|
||||
var callbackObj = {
|
||||
fn : callback,
|
||||
scope : scope,
|
||||
fn : callback,
|
||||
scope : scope,
|
||||
args : args
|
||||
};
|
||||
this.callbacks.push(callbackObj);
|
||||
@ -51,9 +51,9 @@
|
||||
|
||||
ns.DrawingLoop.prototype.getRequestAnimationFrameShim_ = function () {
|
||||
var requestAnimationFrame = window.requestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function (callback) { window.setTimeout(callback, 1000/60); };
|
||||
|
||||
return requestAnimationFrame;
|
||||
|
@ -10,7 +10,7 @@
|
||||
if(container === undefined) {
|
||||
throw 'Bad FrameRenderer initialization. <container> undefined.';
|
||||
}
|
||||
|
||||
|
||||
if(isNaN(renderingOptions.dpi)) {
|
||||
throw 'Bad FrameRenderer initialization. <dpi> not well defined.';
|
||||
}
|
||||
@ -38,7 +38,7 @@
|
||||
* @private
|
||||
*/
|
||||
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
|
||||
|
||||
|
||||
if(settingName == pskl.UserSettings.SHOW_GRID) {
|
||||
this.enableGrid(settingValue);
|
||||
}
|
||||
@ -54,7 +54,7 @@
|
||||
var currentClass = this.container.data('current-background-class');
|
||||
if (currentClass) {
|
||||
this.container.removeClass(currentClass);
|
||||
}
|
||||
}
|
||||
this.container.addClass(newClass);
|
||||
this.container.data('current-background-class', newClass);
|
||||
};
|
||||
@ -118,12 +118,12 @@
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
|
||||
ctx.strokeStyle = Constants.GRID_STROKE_COLOR;
|
||||
for(var c=1; c < col; c++) {
|
||||
for(var c=1; c < col; c++) {
|
||||
ctx.moveTo(this.getFramePos_(c), 0);
|
||||
ctx.lineTo(this.getFramePos_(c), height);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
|
||||
for(var r=1; r < row; r++) {
|
||||
ctx.moveTo(0, this.getFramePos_(r));
|
||||
ctx.lineTo(width, this.getFramePos_(r));
|
||||
@ -137,10 +137,10 @@
|
||||
ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
|
||||
if(this.canvasConfigDirty) {
|
||||
$(this.canvas).remove();
|
||||
|
||||
|
||||
var col = frame.getWidth(),
|
||||
row = frame.getHeight();
|
||||
|
||||
|
||||
var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
|
||||
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
|
||||
var classes = ['canvas'];
|
||||
@ -154,7 +154,7 @@
|
||||
if(this.gridStrokeWidth > 0) {
|
||||
this.drawGrid_(canvas, pixelWidth, pixelHeight, col, row);
|
||||
}
|
||||
|
||||
|
||||
this.canvas = canvas;
|
||||
this.canvasConfigDirty = false;
|
||||
}
|
||||
|
@ -2,22 +2,22 @@
|
||||
var ns = $.namespace("pskl.selection");
|
||||
|
||||
ns.SelectionManager = function (piskelController) {
|
||||
|
||||
|
||||
this.piskelController = piskelController;
|
||||
|
||||
|
||||
this.currentSelection = null;
|
||||
};
|
||||
|
||||
ns.SelectionManager.prototype.init = function () {
|
||||
$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
|
||||
$.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
|
||||
$.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
|
||||
$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
|
||||
|
||||
|
||||
$.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
|
||||
$.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
|
||||
$.subscribe(Events.CUT, $.proxy(this.onCut_, this));
|
||||
|
||||
$.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
|
||||
$.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
|
||||
};
|
||||
|
||||
/**
|
||||
@ -77,7 +77,7 @@
|
||||
for(var i=0, l=pixels.length; i<l; i++) {
|
||||
try {
|
||||
currentFrame.setPixel(
|
||||
pixels[i].col, pixels[i].row,
|
||||
pixels[i].col, pixels[i].row,
|
||||
pixels[i].copiedColor);
|
||||
}
|
||||
catch(e) {
|
||||
|
@ -1,11 +1,11 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.service");
|
||||
ns.HistoryService = function (piskelController) {
|
||||
this.piskelController = piskelController;
|
||||
this.piskelController = piskelController;
|
||||
};
|
||||
|
||||
ns.HistoryService.prototype.init = function () {
|
||||
|
||||
|
||||
$.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
|
||||
$.subscribe(Events.UNDO, this.undo.bind(this));
|
||||
$.subscribe(Events.REDO, this.redo.bind(this));
|
||||
|
@ -5,14 +5,14 @@
|
||||
};
|
||||
|
||||
ns.ImageUploadService.prototype.init = function () {
|
||||
// service interface
|
||||
// service interface
|
||||
};
|
||||
|
||||
/**
|
||||
* Upload a base64 image data to distant service. If successful, will call provided callback with the image URL as first argument;
|
||||
* @param {String} imageData base64 image data (such as the return value of canvas.toDataUrl())
|
||||
* @param {Function} cbSuccess success callback. 1st argument will be the uploaded image URL
|
||||
* @param {Function} cbError error callback
|
||||
* @param {Function} cbError error callback
|
||||
*/
|
||||
ns.ImageUploadService.prototype.upload = function (imageData, cbSuccess, cbError) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
@ -21,7 +21,7 @@
|
||||
xhr.open('POST', this.serviceUrl_, true);
|
||||
xhr.onload = function (e) {
|
||||
if (this.status == 200) {
|
||||
var imageUrl = "http://screenletstore.appspot.com/img/" + this.responseText;
|
||||
var imageUrl = "http://screenletstore.appspot.com/img/" + this.responseText;
|
||||
cbSuccess(imageUrl);
|
||||
} else {
|
||||
cbError();
|
||||
@ -30,5 +30,5 @@
|
||||
|
||||
xhr.send(formData);
|
||||
};
|
||||
|
||||
|
||||
})();
|
@ -12,8 +12,8 @@
|
||||
pixels.push({"col": x, "row": y});
|
||||
}
|
||||
}
|
||||
|
||||
return pixels;
|
||||
|
||||
return pixels;
|
||||
},
|
||||
|
||||
getBoundRectanglePixels : function (x0, y0, x1, y1) {
|
||||
@ -30,32 +30,32 @@
|
||||
pixels.push({"col": rectangle.x0, "row": y});
|
||||
pixels.push({"col": rectangle.x1, "row": y});
|
||||
}
|
||||
|
||||
return pixels;
|
||||
|
||||
return pixels;
|
||||
},
|
||||
|
||||
/**
|
||||
* Return an object of ordered rectangle coordinate.
|
||||
* In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner
|
||||
* In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner
|
||||
* @private
|
||||
*/
|
||||
getOrderedRectangleCoordinates : function (x0, y0, x1, y1) {
|
||||
return {
|
||||
x0 : Math.min(x0, x1),
|
||||
x0 : Math.min(x0, x1),
|
||||
y0 : Math.min(y0, y1),
|
||||
x1 : Math.max(x0, x1),
|
||||
x1 : Math.max(x0, x1),
|
||||
y1 : Math.max(y0, y1)
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the list of pixels that would have been filled by a paintbucket tool applied
|
||||
* Return the list of pixels that would have been filled by a paintbucket tool applied
|
||||
* on pixel at coordinate (x,y).
|
||||
* This function is not altering the Frame object argument.
|
||||
* This function is not altering the Frame object argument.
|
||||
*
|
||||
* @param frame pskl.model.Frame The frame target in which we want to paintbucket
|
||||
* @param col number Column coordinate in the frame
|
||||
* @param row number Row coordinate in the frame
|
||||
* @param col number Column coordinate in the frame
|
||||
* @param row number Row coordinate in the frame
|
||||
*
|
||||
* @return an array of the pixel coordinates paint with the replacement color
|
||||
*/
|
||||
@ -73,10 +73,10 @@
|
||||
/**
|
||||
* Apply the paintbucket tool in a frame at the (col, row) initial position
|
||||
* with the replacement color.
|
||||
*
|
||||
*
|
||||
* @param frame pskl.model.Frame The frame target in which we want to paintbucket
|
||||
* @param col number Column coordinate in the frame
|
||||
* @param row number Row coordinate in the frame
|
||||
* @param col number Column coordinate in the frame
|
||||
* @param row number Row coordinate in the frame
|
||||
* @param replacementColor string Hexadecimal color used to fill the area
|
||||
*
|
||||
* @return an array of the pixel coordinates paint with the replacement color
|
||||
@ -109,11 +109,11 @@
|
||||
} catch(e) {
|
||||
// Frame out of bound exception.
|
||||
}
|
||||
|
||||
|
||||
if(targetColor == replacementColor) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
queue.push({"col": col, "row": row});
|
||||
var loopCount = 0;
|
||||
@ -140,7 +140,7 @@
|
||||
// Security loop breaker:
|
||||
if(loopCount > 10 * cellCount) {
|
||||
console.log("loop breaker called");
|
||||
break;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return paintedPixels;
|
||||
|
@ -32,7 +32,7 @@
|
||||
var pData = data.piskel;
|
||||
var layers = pData.layers.map(function (serializedLayer) {
|
||||
return pskl.utils.Serializer.deserializeLayer(serializedLayer);
|
||||
});
|
||||
});
|
||||
var piskel = new pskl.model.Piskel(pData.width, pData.height, pData.fps);
|
||||
layers.forEach(function (layer) {
|
||||
piskel.addLayer(layer);
|
||||
|
@ -23,7 +23,7 @@
|
||||
var value = dict[key];
|
||||
template = template.replace(new RegExp('\\{\\{'+key+'\\}\\}', 'g'), value);
|
||||
}
|
||||
}
|
||||
}
|
||||
return template;
|
||||
}
|
||||
};
|
||||
|
@ -8,7 +8,7 @@
|
||||
|
||||
KEY_TO_DEFAULT_VALUE_MAP_ : {
|
||||
'SHOW_GRID' : false,
|
||||
'CANVAS_BACKGROUND' : 'medium-canvas-background'
|
||||
'CANVAS_BACKGROUND' : 'medium-canvas-background'
|
||||
},
|
||||
|
||||
/**
|
||||
@ -17,7 +17,7 @@
|
||||
cache_ : {},
|
||||
|
||||
/**
|
||||
* Static method to access a user defined settings value ot its default
|
||||
* Static method to access a user defined settings value ot its default
|
||||
* value if not defined yet.
|
||||
*/
|
||||
get : function (key) {
|
||||
@ -34,7 +34,7 @@
|
||||
this.cache_[key] = value;
|
||||
this.writeToLocalStorage_(key, value);
|
||||
|
||||
$.publish(Events.USER_SETTINGS_CHANGED, [key, value]);
|
||||
$.publish(Events.USER_SETTINGS_CHANGED, [key, value]);
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -34,8 +34,10 @@ if (typeof Function.prototype.bind !== "function") {
|
||||
var ns = $.namespace("pskl.utils");
|
||||
|
||||
ns.rgbToHex = function(r, g, b) {
|
||||
if (r > 255 || g > 255 || b > 255)
|
||||
if (r > 255 || g > 255 || b > 255) {
|
||||
throw "Invalid color component";
|
||||
}
|
||||
|
||||
return ((r << 16) | (g << 8) | b).toString(16);
|
||||
};
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user