mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Make jshint quiet now

Browse Source
This commit is contained in:
grosbouddha
2013-05-27 23:42:53 +02:00
parent 32d4f1c377
commit fba6693426
17 changed files with 506 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
js/controller/AnimatedPreviewController.js
View File

@ -1,61 +1,61 @@
(function () { (function () {
var ns = $.namespace("pskl.controller"); var ns = $.namespace("pskl.controller");
ns.AnimatedPreviewController = function (framesheet, container, dpi) { ns.AnimatedPreviewController = function (framesheet, container, dpi) {
this.framesheet = framesheet; this.framesheet = framesheet;
this.container = container; this.container = container;
this.elapsedTime = 0; this.elapsedTime = 0;
this.currentIndex = 0; this.currentIndex = 0;
this.fps = parseInt($("#preview-fps")[0].value, 10); this.fps = parseInt($("#preview-fps")[0].value, 10);
var renderingOptions = { var renderingOptions = {
"dpi": this.calculateDPI_() "dpi": this.calculateDPI_()
}; };
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions); this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
$.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this)); $.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
}; };
ns.AnimatedPreviewController.prototype.init = function () { ns.AnimatedPreviewController.prototype.init = function () {
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this)); $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
}; };
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) { ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) {
this.setFPS(parseInt($("#preview-fps")[0].value, 10)); this.setFPS(parseInt($("#preview-fps")[0].value, 10));
}; };
ns.AnimatedPreviewController.prototype.setFPS = function (fps) { ns.AnimatedPreviewController.prototype.setFPS = function (fps) {
this.fps = fps; this.fps = fps;
$("#display-fps").html(this.fps + " FPS"); $("#display-fps").html(this.fps + " FPS");
}; };
ns.AnimatedPreviewController.prototype.render = function (delta) { ns.AnimatedPreviewController.prototype.render = function (delta) {
this.elapsedTime += delta; this.elapsedTime += delta;
var index = Math.floor(this.elapsedTime / (1000/this.fps)); var index = Math.floor(this.elapsedTime / (1000/this.fps));
if (index != this.currentIndex) { if (index != this.currentIndex) {
this.currentIndex = index; this.currentIndex = index;
if (!this.framesheet.hasFrameAtIndex(this.currentIndex)) { if (!this.framesheet.hasFrameAtIndex(this.currentIndex)) {
this.currentIndex = 0; this.currentIndex = 0;
this.elapsedTime = 0; this.elapsedTime = 0;
} }
this.renderer.render(this.framesheet.getFrameByIndex(this.currentIndex)); this.renderer.render(this.framesheet.getFrameByIndex(this.currentIndex));
} }
}; };
/** /**
* Calculate the preview DPI depending on the framesheet size * Calculate the preview DPI depending on the framesheet size
*/ */
ns.AnimatedPreviewController.prototype.calculateDPI_ = function () { ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
var framePixelHeight = this.framesheet.getCurrentFrame().getHeight(), var framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
framePixelWidth = this.framesheet.getCurrentFrame().getWidth(); framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
// TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?) // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth); return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
}; };
ns.AnimatedPreviewController.prototype.updateDPI_ = function () { ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
this.dpi = this.calculateDPI_(); this.dpi = this.calculateDPI_();
this.renderer.updateDPI(this.dpi); this.renderer.updateDPI(this.dpi);
} };
})(); })();

2
js/controller/DrawingController.js
View File

@ -173,7 +173,7 @@
*/ */
ns.DrawingController.prototype.wrapEvtInfo_ = function (event) { ns.DrawingController.prototype.wrapEvtInfo_ = function (event) {
var evtInfo = {}; var evtInfo = {};
if (event.button == 0) { if (event.button === 0) {
evtInfo.button = Constants.LEFT_BUTTON; evtInfo.button = Constants.LEFT_BUTTON;
} else if (event.button == 2) { } else if (event.button == 2) {
evtInfo.button = Constants.RIGHT_BUTTON; evtInfo.button = Constants.RIGHT_BUTTON;

496
js/controller/PreviewFilmController.js
View File

@ -1,249 +1,249 @@
(function () { (function () {
var ns = $.namespace("pskl.controller"); var ns = $.namespace("pskl.controller");
ns.PreviewFilmController = function (framesheet, container, dpi) { ns.PreviewFilmController = function (framesheet, container, dpi) {
this.framesheet = framesheet; this.framesheet = framesheet;
this.container = container; this.container = container;
this.dpi = this.calculateDPI_(); this.dpi = this.calculateDPI_();
this.redrawFlag = true; this.redrawFlag = true;
$.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this)); $.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
$.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this)); $.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
$.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this)); $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
}; };
ns.PreviewFilmController.prototype.init = function() { ns.PreviewFilmController.prototype.init = function() {
var addFrameButton = $('#add-frame-button')[0]; var addFrameButton = $('#add-frame-button')[0];
addFrameButton.addEventListener('mousedown', this.addFrame.bind(this)); addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
}; };
ns.PreviewFilmController.prototype.addFrame = function () { ns.PreviewFilmController.prototype.addFrame = function () {
this.framesheet.addEmptyFrame(); this.framesheet.addEmptyFrame();
this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1); this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1);
}; };
ns.PreviewFilmController.prototype.flagForRedraw_ = function () { ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
this.redrawFlag = true; this.redrawFlag = true;
}; };
ns.PreviewFilmController.prototype.refreshDPI_ = function () { ns.PreviewFilmController.prototype.refreshDPI_ = function () {
this.dpi = this.calculateDPI_(); this.dpi = this.calculateDPI_();
}; };
ns.PreviewFilmController.prototype.render = function () { ns.PreviewFilmController.prototype.render = function () {
if (this.redrawFlag) { if (this.redrawFlag) {
// TODO(vincz): Full redraw on any drawing modification, optimize. // TODO(vincz): Full redraw on any drawing modification, optimize.
this.createPreviews_(); this.createPreviews_();
this.redrawFlag = false; this.redrawFlag = false;
} }
}; };
ns.PreviewFilmController.prototype.createPreviews_ = function () { ns.PreviewFilmController.prototype.createPreviews_ = function () {
this.container.html(""); this.container.html("");
// Manually remove tooltips since mouseout events were shortcut by the DOM refresh: // Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
$(".tooltip").remove(); $(".tooltip").remove();
var frameCount = this.framesheet.getFrameCount(); var frameCount = this.framesheet.getFrameCount();
for (var i = 0, l = frameCount; i < l ; i++) { for (var i = 0, l = frameCount; i < l ; i++) {
this.container.append(this.createInterstitialTile_(i)); this.container.append(this.createInterstitialTile_(i));
this.container.append(this.createPreviewTile_(i)); this.container.append(this.createPreviewTile_(i));
} }
this.container.append(this.createInterstitialTile_(frameCount)); this.container.append(this.createInterstitialTile_(frameCount));
var needDragndropBehavior = !!(frameCount > 1); var needDragndropBehavior = (frameCount > 1) ? true : false;
if(needDragndropBehavior) { if(needDragndropBehavior) {
this.initDragndropBehavior_(); this.initDragndropBehavior_();
} }
}; };
/** /**
* @private * @private
*/ */
ns.PreviewFilmController.prototype.createInterstitialTile_ = function (tileNumber) { ns.PreviewFilmController.prototype.createInterstitialTile_ = function (tileNumber) {
var interstitialTile = document.createElement("div"); var interstitialTile = document.createElement("div");
interstitialTile.className = "interstitial-tile" interstitialTile.className = "interstitial-tile";
interstitialTile.setAttribute("data-tile-type", "interstitial"); interstitialTile.setAttribute("data-tile-type", "interstitial");
interstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber); interstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
return interstitialTile; return interstitialTile;
}; };
/** /**
* @private * @private
*/ */
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () { ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
var tiles = $(".preview-tile"); var tiles = $(".preview-tile");
// Each preview film tile is draggable. // Each preview film tile is draggable.
tiles.draggable( { tiles.draggable( {
//containment: '.left-nav', //containment: '.left-nav',
stack: '.preview-tile', stack: '.preview-tile',
cursor: 'move', cursor: 'move',
revert: true, revert: true,
start: function(event, ui) { start: function(event, ui) {
// We only show the fake interstitial tiles when starting the // We only show the fake interstitial tiles when starting the
// drag n drop interaction. We hide them when the DnD is done. // drag n drop interaction. We hide them when the DnD is done.
$('#preview-list').addClass("show-interstitial-tiles"); $('#preview-list').addClass("show-interstitial-tiles");
}, },
stop: function() { stop: function() {
$('#preview-list').removeClass("show-interstitial-tiles"); $('#preview-list').removeClass("show-interstitial-tiles");
} }
}); });
// Each preview film tile is a drop target. This allow us to swap two tiles. // Each preview film tile is a drop target. This allow us to swap two tiles.
// However, we want to be able to insert a tile between two other tiles. // However, we want to be able to insert a tile between two other tiles.
// For that we created fake interstitial tiles that are used as drop targets as well. // For that we created fake interstitial tiles that are used as drop targets as well.
var droppableTiles = $(".interstitial-tile"); var droppableTiles = $(".interstitial-tile");
$.merge(droppableTiles, tiles); $.merge(droppableTiles, tiles);
droppableTiles.droppable( { droppableTiles.droppable( {
accept: ".preview-tile", accept: ".preview-tile",
tolerance: "pointer", tolerance: "pointer",
activeClass: "droppable-active", activeClass: "droppable-active",
hoverClass: "droppable-hover-active", hoverClass: "droppable-hover-active",
drop: $.proxy(this.onDrop_, this) drop: $.proxy(this.onDrop_, this)
}); });
}; };
/** /**
* @private * @private
*/ */
ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) { ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) {
var activeFrame; var activeFrame;
// When we drag from an element, the drag could start from a nested DOM element // When we drag from an element, the drag could start from a nested DOM element
// inside the drag target. We normalize that by taking the correct ancestor: // inside the drag target. We normalize that by taking the correct ancestor:
var originTile = $(event.srcElement).closest(".preview-tile"); var originTile = $(event.srcElement).closest(".preview-tile");
var originFrameId = parseInt(originTile.data("tile-number"), 10); var originFrameId = parseInt(originTile.data("tile-number"), 10);
var dropTarget = $(event.target); var dropTarget = $(event.target);
if(dropTarget.data("tile-type") == "interstitial") { if(dropTarget.data("tile-type") == "interstitial") {
var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10); var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10);
// In case we drop outside of the tile container // In case we drop outside of the tile container
if(isNaN(originFrameId) || isNaN(targetInsertionId)) { if(isNaN(originFrameId) || isNaN(targetInsertionId)) {
return; return;
} }
//console.log("origin-frame: "+originFrameId+" - targetInsertionId: "+ targetInsertionId) //console.log("origin-frame: "+originFrameId+" - targetInsertionId: "+ targetInsertionId)
this.framesheet.moveFrame(originFrameId, targetInsertionId); this.framesheet.moveFrame(originFrameId, targetInsertionId);
activeFrame = targetInsertionId; activeFrame = targetInsertionId;
// The last fake interstitial tile is outside of the framesheet array bound. // The last fake interstitial tile is outside of the framesheet array bound.
// It allow us to append after the very last element in this fake slot. // It allow us to append after the very last element in this fake slot.
// However, when setting back the active frame, we have to make sure the // However, when setting back the active frame, we have to make sure the
// frame does exist. // frame does exist.
if(activeFrame > (this.framesheet.getFrameCount() - 1)) { if(activeFrame > (this.framesheet.getFrameCount() - 1)) {
activeFrame = targetInsertionId - 1; activeFrame = targetInsertionId - 1;
} }
} else { } else {
var targetSwapId = parseInt(dropTarget.data("tile-number"), 10); var targetSwapId = parseInt(dropTarget.data("tile-number"), 10);
// In case we drop outside of the tile container // In case we drop outside of the tile container
if(isNaN(originFrameId) || isNaN(targetSwapId)) { if(isNaN(originFrameId) || isNaN(targetSwapId)) {
return; return;
} }
//console.log("origin-frame: "+originFrameId+" - targetSwapId: "+ targetSwapId) //console.log("origin-frame: "+originFrameId+" - targetSwapId: "+ targetSwapId)
this.framesheet.swapFrames(originFrameId, targetSwapId); this.framesheet.swapFrames(originFrameId, targetSwapId);
activeFrame = targetSwapId; activeFrame = targetSwapId;
} }
$('#preview-list').removeClass("show-interstitial-tiles"); $('#preview-list').removeClass("show-interstitial-tiles");
this.framesheet.setCurrentFrameIndex(activeFrame); this.framesheet.setCurrentFrameIndex(activeFrame);
// TODO(vincz): move localstorage request to the model layer? // TODO(vincz): move localstorage request to the model layer?
$.publish(Events.LOCALSTORAGE_REQUEST); $.publish(Events.LOCALSTORAGE_REQUEST);
}; };
/** /**
* @private * @private
* TODO(vincz): clean this giant rendering function & remove listeners. * TODO(vincz): clean this giant rendering function & remove listeners.
*/ */
ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) { ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
var currentFrame = this.framesheet.getFrameByIndex(tileNumber); var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
var previewTileRoot = document.createElement("li"); var previewTileRoot = document.createElement("li");
var classname = "preview-tile"; var classname = "preview-tile";
previewTileRoot.setAttribute("data-tile-number", tileNumber); previewTileRoot.setAttribute("data-tile-number", tileNumber);
if (this.framesheet.getCurrentFrame() == currentFrame) { if (this.framesheet.getCurrentFrame() == currentFrame) {
classname += " selected"; classname += " selected";
} }
previewTileRoot.className = classname; previewTileRoot.className = classname;
var canvasContainer = document.createElement("div"); var canvasContainer = document.createElement("div");
canvasContainer.className = "canvas-container"; canvasContainer.className = "canvas-container";
var canvasBackground = document.createElement("div"); var canvasBackground = document.createElement("div");
canvasBackground.className = "canvas-background"; canvasBackground.className = "canvas-background";
canvasContainer.appendChild(canvasBackground); canvasContainer.appendChild(canvasBackground);
previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber)); previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
var actionContainer = document.createElement("DIV"); var actionContainer = document.createElement("DIV");
actionContainer.className = "tile-action-container"; actionContainer.className = "tile-action-container";
var canvasPreviewDuplicateAction = document.createElement("button"); var canvasPreviewDuplicateAction = document.createElement("button");
canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip'); canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip');
canvasPreviewDuplicateAction.setAttribute('data-placement', 'right'); canvasPreviewDuplicateAction.setAttribute('data-placement', 'right');
canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame'); canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame');
canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action"; canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action";
actionContainer.appendChild(canvasPreviewDuplicateAction); actionContainer.appendChild(canvasPreviewDuplicateAction);
canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber)); canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim // TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
// is to make this update function (#createPreviewTile) less aggressive. // is to make this update function (#createPreviewTile) less aggressive.
var renderingOptions = {"dpi": this.dpi }; var renderingOptions = {"dpi": this.dpi };
var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view"); var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
currentFrameRenderer.init(currentFrame); currentFrameRenderer.init(currentFrame);
previewTileRoot.appendChild(canvasContainer); previewTileRoot.appendChild(canvasContainer);
if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) { if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
var canvasPreviewDeleteAction = document.createElement("button"); var canvasPreviewDeleteAction = document.createElement("button");
canvasPreviewDeleteAction.setAttribute('rel', 'tooltip'); canvasPreviewDeleteAction.setAttribute('rel', 'tooltip');
canvasPreviewDeleteAction.setAttribute('data-placement', 'right'); canvasPreviewDeleteAction.setAttribute('data-placement', 'right');
canvasPreviewDeleteAction.setAttribute('title', 'Delete this frame'); canvasPreviewDeleteAction.setAttribute('title', 'Delete this frame');
canvasPreviewDeleteAction.className = "tile-action delete-frame-action" canvasPreviewDeleteAction.className = "tile-action delete-frame-action";
canvasPreviewDeleteAction.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber)); canvasPreviewDeleteAction.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
previewTileRoot.appendChild(canvasPreviewDeleteAction); previewTileRoot.appendChild(canvasPreviewDeleteAction);
actionContainer.appendChild(canvasPreviewDeleteAction); actionContainer.appendChild(canvasPreviewDeleteAction);
} }
previewTileRoot.appendChild(actionContainer); previewTileRoot.appendChild(actionContainer);
return previewTileRoot; return previewTileRoot;
}; };
ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) { ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
// has not class tile-action: // has not class tile-action:
if(!evt.target.classList.contains('tile-action')) { if(!evt.target.classList.contains('tile-action')) {
this.framesheet.setCurrentFrameIndex(index); this.framesheet.setCurrentFrameIndex(index);
} }
}; };
ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) { ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
this.framesheet.removeFrameByIndex(index); this.framesheet.removeFrameByIndex(index);
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
}; };
ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) { ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
this.framesheet.duplicateFrameByIndex(index); this.framesheet.duplicateFrameByIndex(index);
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
this.framesheet.setCurrentFrameIndex(index + 1); this.framesheet.setCurrentFrameIndex(index + 1);
}; };
/** /**
* Calculate the preview DPI depending on the framesheet size * Calculate the preview DPI depending on the framesheet size
*/ */
ns.PreviewFilmController.prototype.calculateDPI_ = function () { ns.PreviewFilmController.prototype.calculateDPI_ = function () {
var previewSize = 128, var previewSize = 128,
framePixelHeight = this.framesheet.getCurrentFrame().getHeight(), framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
framePixelWidth = this.framesheet.getCurrentFrame().getWidth(); framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
// TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?) // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth); return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
}; };
})(); })();

40
js/drawingtools/BaseTool.js
View File

@ -46,27 +46,27 @@
var pixels = []; var pixels = [];
var dx = Math.abs(x1-x0); var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0); var dy = Math.abs(y1-y0);
var sx = (x0 < x1) ? 1 : -1; var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1; var sy = (y0 < y1) ? 1 : -1;
var err = dx-dy; var err = dx-dy;
while(true){ while(true){
// Do what you need to for this // Do what you need to for this
pixels.push({"col": x0, "row": y0}); pixels.push({"col": x0, "row": y0});
if ((x0==x1) && (y0==y1)) break; if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err; var e2 = 2*err;
if (e2>-dy){ if (e2>-dy){
err -= dy; err -= dy;
x0 += sx; x0 += sx;
} }
if (e2 < dx) { if (e2 < dx) {
err += dx; err += dx;
y0 += sy; y0 += sy;
} }
} }
return pixels; return pixels;
}; };
})(); })();

108
js/drawingtools/Move.js
View File

@ -1,54 +1,54 @@
/* /*
* @provide pskl.drawingtools.Move * @provide pskl.drawingtools.Move
* *
* @require pskl.utils * @require pskl.utils
*/ */
(function() { (function() {
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Move = function() { ns.Move = function() {
this.toolId = "tool-move" this.toolId = "tool-move";
this.helpText = "Move tool"; this.helpText = "Move tool";
// Stroke's first point coordinates (set in applyToolAt) // Stroke's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;
this.startRow = null; this.startRow = null;
}; };
pskl.utils.inherit(ns.Move, ns.BaseTool); pskl.utils.inherit(ns.Move, ns.BaseTool);
/** /**
* @override * @override
*/ */
ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay) { ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay) {
this.startCol = col; this.startCol = col;
this.startRow = row; this.startRow = row;
this.frameClone = frame.clone(); 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; var colDiff = col - this.startCol, rowDiff = row - this.startRow;
this.shiftFrame(colDiff, rowDiff, frame, this.frameClone); this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
}; };
ns.Move.prototype.shiftFrame = function (colDiff, rowDiff, frame, reference) { ns.Move.prototype.shiftFrame = function (colDiff, rowDiff, frame, reference) {
var color; var color;
for (var col = 0 ; col < frame.getWidth() ; col++) { for (var col = 0 ; col < frame.getWidth() ; col++) {
for (var row = 0 ; row < frame.getHeight() ; row++) { for (var row = 0 ; row < frame.getHeight() ; row++) {
if (reference.containsPixel(col - colDiff, row - rowDiff)) { if (reference.containsPixel(col - colDiff, row - rowDiff)) {
color = reference.getPixel(col - colDiff, row - rowDiff); color = reference.getPixel(col - colDiff, row - rowDiff);
} else { } else {
color = Constants.TRANSPARENT_COLOR; color = Constants.TRANSPARENT_COLOR;
} }
frame.setPixel(col, row, color) frame.setPixel(col, row, color);
} }
} }
}; };
/** /**
* @override * @override
*/ */
ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay) { ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
this.moveToolAt(col, row, color, frame, overlay); this.moveToolAt(col, row, color, frame, overlay);
}; };
})(); })();

4
js/drawingtools/VerticalMirrorPen.js
View File

@ -5,9 +5,9 @@
this.toolId = "tool-vertical-mirror-pen"; this.toolId = "tool-vertical-mirror-pen";
this.helpText = "vertical mirror pen tool"; this.helpText = "vertical mirror pen tool";
this.swap = null this.swap = null;
this.mirroredPreviousCol = null; this.mirroredPreviousCol = null;
this.mirroredPreviousRow = null; this.mirroredPreviousRow = null;
}; };
pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen); pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);

2
js/drawingtools/selectiontools/BaseSelect.js
View File

@ -103,7 +103,7 @@
} else { } else {
color = Constants.TRANSPARENT_COLOR; color = Constants.TRANSPARENT_COLOR;
} }
overlayFrame.setPixel(col, row, color) overlayFrame.setPixel(col, row, color);
} }
} }
}; };

2
js/drawingtools/selectiontools/RectangleSelect.js
View File

@ -45,7 +45,7 @@
* @override * @override
*/ */
ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) { ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
this.onSelect_(col, row, color, frame, overlay) this.onSelect_(col, row, color, frame, overlay);
}; };
})(); })();

6
js/model/Frame.js
View File

@ -8,7 +8,7 @@
}; };
ns.Frame.createEmpty = function (width, height) { ns.Frame.createEmpty = function (width, height) {
var pixels = ns.Frame.createEmptyPixelGrid_(width, height); var pixels = ns.Frame.createEmptyPixelGrid_(width, height);
return new ns.Frame(pixels); return new ns.Frame(pixels);
}; };
@ -20,7 +20,7 @@
columnArray.push(Constants.TRANSPARENT_COLOR); columnArray.push(Constants.TRANSPARENT_COLOR);
} }
pixels[columnIndex] = columnArray; pixels[columnIndex] = columnArray;
} }
return pixels; return pixels;
}; };
@ -36,7 +36,7 @@
* Returns a copy of the pixels used by the frame * Returns a copy of the pixels used by the frame
*/ */
ns.Frame.prototype.getPixels = function () { ns.Frame.prototype.getPixels = function () {
return this.clonePixels_(this.pixels) return this.clonePixels_(this.pixels);
}; };
/** /**

32
js/model/FrameSheet.js
View File

@ -70,9 +70,9 @@
*/ */
ns.FrameSheet.prototype.deserialize = function (serialized) { ns.FrameSheet.prototype.deserialize = function (serialized) {
try { try {
this.load(JSON.parse(serialized)); this.load(JSON.parse(serialized));
} catch (e) { } catch (e) {
throw "Could not load serialized framesheet : " + e.message throw "Could not load serialized framesheet : " + e.message;
} }
}; };
@ -83,20 +83,20 @@
* @param {String} serialized * @param {String} serialized
*/ */
ns.FrameSheet.prototype.load = function (framesheet) { ns.FrameSheet.prototype.load = function (framesheet) {
this.frames = []; this.frames = [];
for (var i = 0 ; i < framesheet.length ; i++) { for (var i = 0 ; i < framesheet.length ; i++) {
var frameCfg = framesheet[i]; var frameCfg = framesheet[i];
this.addFrame(new ns.Frame(frameCfg)); this.addFrame(new ns.Frame(frameCfg));
} }
if (this.hasFrameAtIndex(0)) { if (this.hasFrameAtIndex(0)) {
this.height = this.getFrameByIndex(0).getHeight(); this.height = this.getFrameByIndex(0).getHeight();
this.width = this.getFrameByIndex(0).getWidth(); this.width = this.getFrameByIndex(0).getWidth();
this.setCurrentFrameIndex(0); this.setCurrentFrameIndex(0);
$.publish(Events.FRAME_SIZE_CHANGED); $.publish(Events.FRAME_SIZE_CHANGED);
} }
$.publish(Events.FRAMESHEET_RESET); $.publish(Events.FRAMESHEET_RESET);
}; };
@ -148,8 +148,8 @@
ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) { ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {
if(isNaN(indexFrame1) || isNaN(indexFrame1) || if(isNaN(indexFrame1) || isNaN(indexFrame1) ||
(!this.hasFrameAtIndex(indexFrame1) && !this.hasFrameAtIndex(indexFrame2))) { (!this.hasFrameAtIndex(indexFrame1) && !this.hasFrameAtIndex(indexFrame2))) {
throw "Bad indexes for swapFrames Framesheet function."; throw "Bad indexes for swapFrames Framesheet function.";
} }
if(indexFrame1 == indexFrame2) { if(indexFrame1 == indexFrame2) {
return; return;

2
js/rendering/CanvasRenderer.js
View File

@ -33,4 +33,4 @@
var height = this.frame.getHeight() * this.dpi; var height = this.frame.getHeight() * this.dpi;
return pskl.CanvasUtils.createCanvas(width, height); return pskl.CanvasUtils.createCanvas(width, height);
}; };
})() })();

119
js/rendering/DrawingLoop.js
View File

@ -1,58 +1,61 @@
(function () { (function () {
var ns = $.namespace("pskl.rendering"); var ns = $.namespace("pskl.rendering");
ns.DrawingLoop = function () { ns.DrawingLoop = function () {
this.requestAnimationFrame = this.getRequestAnimationFrameShim_(); this.requestAnimationFrame = this.getRequestAnimationFrameShim_();
this.isRunning = false; this.isRunning = false;
this.previousTime = 0; this.previousTime = 0;
this.callbacks = []; this.callbacks = [];
}; };
ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) { ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
var callbackObj = { var callbackObj = {
fn : callback, fn : callback,
scope : scope, scope : scope,
args : args args : args
}; };
this.callbacks.push(callbackObj); this.callbacks.push(callbackObj);
return callbackObj; return callbackObj;
}; };
ns.DrawingLoop.prototype.removeCallback = function (callbackObj) { ns.DrawingLoop.prototype.removeCallback = function (callbackObj) {
var index = this.callbacks.indexOf(callbackObj); var index = this.callbacks.indexOf(callbackObj);
if (index != -1) { if (index != -1) {
this.callbacks.splice(index, 1); this.callbacks.splice(index, 1);
} }
}; };
ns.DrawingLoop.prototype.start = function () { ns.DrawingLoop.prototype.start = function () {
this.isRunning = true; this.isRunning = true;
this.loop_(); this.loop_();
}; };
ns.DrawingLoop.prototype.loop_ = function () { ns.DrawingLoop.prototype.loop_ = function () {
var currentTime = Date.now(); var currentTime = Date.now();
var delta = currentTime - this.previousTime; var delta = currentTime - this.previousTime;
this.executeCallbacks_(delta); this.executeCallbacks_(delta);
this.previousTime = currentTime; this.previousTime = currentTime;
this.requestAnimationFrame.call(window, this.loop_.bind(this)); this.requestAnimationFrame.call(window, this.loop_.bind(this));
}; };
ns.DrawingLoop.prototype.executeCallbacks_ = function (deltaTime) { ns.DrawingLoop.prototype.executeCallbacks_ = function (deltaTime) {
for (var i = 0 ; i < this.callbacks.length ; i++) { for (var i = 0 ; i < this.callbacks.length ; i++) {
var cb = this.callbacks[i]; var cb = this.callbacks[i];
cb.fn.call(cb.scope, deltaTime, cb.args); cb.fn.call(cb.scope, deltaTime, cb.args);
} }
}; };
ns.DrawingLoop.prototype.stop = function () { ns.DrawingLoop.prototype.stop = function () {
this.isRunning = false; this.isRunning = false;
}; };
ns.DrawingLoop.prototype.getRequestAnimationFrameShim_ = function () { ns.DrawingLoop.prototype.getRequestAnimationFrameShim_ = function () {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || var requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000/60)}; window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
return requestAnimationFrame; window.msRequestAnimationFrame ||
} function (callback) { window.setTimeout(callback, 1000/60); };
})()
return requestAnimationFrame;
};
})();

34
js/rendering/FrameRenderer.js
View File

@ -8,7 +8,7 @@
}; };
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions); renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
if(container == undefined) { if(container === undefined) {
throw "Bad FrameRenderer initialization. <container> undefined."; throw "Bad FrameRenderer initialization. <container> undefined.";
} }
@ -28,7 +28,7 @@
if(this.hasGrid) { if(this.hasGrid) {
$.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.showGrid, this)); $.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.showGrid, this));
} }
}; };
ns.FrameRenderer.prototype.init = function (frame) { ns.FrameRenderer.prototype.init = function (frame) {
@ -78,15 +78,15 @@
/** /**
* Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered * Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
* frame) into a sprite coordinate in column and row. * frame) into a sprite coordinate in column and row.
* @public * @public
*/ */
ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) { ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
var cellSize = this.dpi + this.gridStrokeWidth; var cellSize = this.dpi + this.gridStrokeWidth;
return { return {
"col" : (coords.x - coords.x % cellSize) / cellSize, "col" : (coords.x - coords.x % cellSize) / cellSize,
"row" : (coords.y - coords.y % cellSize) / cellSize "row" : (coords.y - coords.y % cellSize) / cellSize
}; };
}; };
/** /**
* @private * @private
@ -103,15 +103,15 @@
ctx.lineWidth = Constants.GRID_STROKE_WIDTH; ctx.lineWidth = Constants.GRID_STROKE_WIDTH;
ctx.strokeStyle = Constants.GRID_STROKE_COLOR; 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.moveTo(this.getFramePos_(c), 0);
ctx.lineTo(this.getFramePos_(c), height); ctx.lineTo(this.getFramePos_(c), height);
ctx.stroke(); ctx.stroke();
} }
for(var r=1; r < row; r++) { for(var r=1; r < row; r++) {
ctx.moveTo(0, this.getFramePos_(r)); ctx.moveTo(0, this.getFramePos_(r));
ctx.lineTo(width, this.getFramePos_(r)); ctx.lineTo(width, this.getFramePos_(r));
ctx.stroke(); ctx.stroke();
} }
}; };

4
js/rendering/SpritesheetRenderer.js
View File

@ -19,7 +19,7 @@
}; };
/** /**
* TODO : (Julz) Mutualize with code already present in FrameRenderer * TODO(juliandescottes): Mutualize with code already present in FrameRenderer
*/ */
ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) { ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
@ -41,7 +41,7 @@
var height = this.framesheet.getHeight(); var height = this.framesheet.getHeight();
return pskl.CanvasUtils.createCanvas(width, height); return pskl.CanvasUtils.createCanvas(width, height);
} else { } else {
throw "Cannot render empty Spritesheet" throw "Cannot render empty Spritesheet";
} }
}; };

4
js/selection/BaseSelection.js
View File

@ -17,7 +17,7 @@
movedPixel = this.pixels[i]; movedPixel = this.pixels[i];
movedPixel.col += colDiff; movedPixel.col += colDiff;
movedPixel.row += rowDiff; movedPixel.row += rowDiff;
movedPixels.push(movedPixel) movedPixels.push(movedPixel);
} }
this.pixels = movedPixels; this.pixels = movedPixels;
}; };
@ -27,7 +27,7 @@
for(var i=0, l=this.pixels.length; i<l; i++) { for(var i=0, l=this.pixels.length; i<l; i++) {
pixelWithCopiedColor = this.pixels[i]; pixelWithCopiedColor = this.pixels[i];
pixelWithCopiedColor.copiedColor = pixelWithCopiedColor.copiedColor =
targetFrame.getPixel(pixelWithCopiedColor.col, pixelWithCopiedColor.row); targetFrame.getPixel(pixelWithCopiedColor.col, pixelWithCopiedColor.row);
} }
this.hasPastedContent = true; this.hasPastedContent = true;
}; };

24
js/utils/CanvasUtils.js
View File

@ -1,22 +1,22 @@
(function () { (function () {
var ns = $.namespace("pskl"); var ns = $.namespace("pskl");
ns.CanvasUtils = { ns.CanvasUtils = {
createCanvas : function (width, height, classList) { createCanvas : function (width, height, classList) {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
canvas.setAttribute("width", width); canvas.setAttribute("width", width);
canvas.setAttribute("height", height); canvas.setAttribute("height", height);
if (typeof classList == "string") { if (typeof classList == "string") {
classList = [classList]; classList = [classList];
} }
if (Array.isArray(classList)) { if (Array.isArray(classList)) {
for (var i = 0 ; i < classList.length ; i++) { for (var i = 0 ; i < classList.length ; i++) {
canvas.classList.add(classList[i]); canvas.classList.add(classList[i]);
} }
} }
return canvas; return canvas;
} }
}; };
})(); })();

9
js/utils/PixelUtils.js
View File

@ -101,8 +101,9 @@
var queue = []; var queue = [];
var dy = [-1, 0, 1, 0]; var dy = [-1, 0, 1, 0];
var dx = [0, 1, 0, -1]; var dx = [0, 1, 0, -1];
var targetColor;
try { try {
var targetColor = frame.getPixel(col, row); targetColor = frame.getPixel(col, row);
} catch(e) { } catch(e) {
// Frame out of bound exception. // Frame out of bound exception.
} }
@ -123,8 +124,8 @@
paintedPixels.push({"col": currentItem.col, "row": currentItem.row }); paintedPixels.push({"col": currentItem.col, "row": currentItem.row });
for (var i = 0; i < 4; i++) { for (var i = 0; i < 4; i++) {
var nextCol = currentItem.col + dx[i] var nextCol = currentItem.col + dx[i];
var nextRow = currentItem.row + dy[i] var nextRow = currentItem.row + dy[i];
try { try {
if (frame.containsPixel(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) { if (frame.containsPixel(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) {
queue.push({"col": nextCol, "row": nextRow }); queue.push({"col": nextCol, "row": nextRow });
@ -136,7 +137,7 @@
// Security loop breaker: // Security loop breaker:
if(loopCount > 10 * cellCount) { if(loopCount > 10 * cellCount) {
console.log("loop breaker called") console.log("loop breaker called");
break; break;
} }
} }