diff --git a/index.html b/index.html
index 91efbe58..df46a720 100644
--- a/index.html
+++ b/index.html
@@ -89,6 +89,7 @@
+
diff --git a/js/controller/AnimatedPreviewController.js b/js/controller/AnimatedPreviewController.js
index c8b7f51a..7acb319b 100644
--- a/js/controller/AnimatedPreviewController.js
+++ b/js/controller/AnimatedPreviewController.js
@@ -6,7 +6,8 @@
this.animIndex = 0;
this.fps = parseInt($("#preview-fps")[0].value, 10);
-
+ this.deltaTime = 0;
+ this.previousTime = 0;
var renderingOptions = {
"dpi": dpi
};
@@ -25,29 +26,16 @@
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
};
- ns.AnimatedPreviewController.prototype.startAnimationTimer = function () {
- this.stopAnimationTimer();
- this.animationTimer = window.setTimeout(this.refreshAnimatedPreview.bind(this), 1000/this.fps);
- };
-
- ns.AnimatedPreviewController.prototype.stopAnimationTimer = function () {
- if (this.animationTimer) {
- window.clearInterval(this.animationTimer);
- this.animationTimer = null;
- }
- };
-
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) {
this.fps = parseInt($("#preview-fps")[0].value, 10);
};
- ns.AnimatedPreviewController.prototype.refreshAnimatedPreview = function () {
+ ns.AnimatedPreviewController.prototype.render = function () {
if (!this.framesheet.hasFrameAtIndex(this.animIndex)) {
this.animIndex = 0;
}
this.renderer.render(this.framesheet.getFrameByIndex(this.animIndex));
this.animIndex++;
- this.startAnimationTimer();
};
})();
\ No newline at end of file
diff --git a/js/drawingtools/Move.js b/js/drawingtools/Move.js
index 2ff9ca73..23b0f58f 100644
--- a/js/drawingtools/Move.js
+++ b/js/drawingtools/Move.js
@@ -29,7 +29,6 @@
var colDiff = col - this.startCol, rowDiff = row - this.startRow;
if (colDiff != 0 || rowDiff != 0) {
this.shiftFrame(colDiff, rowDiff, drawer.frame, this.frameClone);
- drawer.renderFrame();
}
};
diff --git a/js/drawingtools/PaintBucket.js b/js/drawingtools/PaintBucket.js
index a4523bd7..f3c3ccfe 100644
--- a/js/drawingtools/PaintBucket.js
+++ b/js/drawingtools/PaintBucket.js
@@ -21,10 +21,6 @@
var targetColor = drawer.frame.getPixel(col, row);
//this.recursiveFloodFill_(frame, col, row, targetColor, color);
this.queueLinearFloodFill_(drawer.frame, col, row, targetColor, color);
-
- // Draw in canvas:
- // TODO: Remove that when we have the centralized redraw loop
- drawer.renderFrame();
};
/**
diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js
index 36967878..5f2fa7c7 100644
--- a/js/drawingtools/Rectangle.js
+++ b/js/drawingtools/Rectangle.js
@@ -25,7 +25,6 @@
// Drawing the first point of the rectangle in the fake overlay canvas:
drawer.overlayFrame.setPixel(col, row, color);
- drawer.renderOverlay();
};
ns.Rectangle.prototype.moveToolAt = function(col, row, color, drawer) {
@@ -44,13 +43,13 @@
}
drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
- drawer.renderOverlay();
};
/**
* @override
*/
ns.Rectangle.prototype.releaseToolAt = function(col, row, color, drawer) {
+ drawer.clearOverlay();
// If the stroke tool is released outside of the canvas, we cancel the stroke:
if(drawer.frame.containsPixel(col, row)) {
var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
@@ -59,12 +58,8 @@
drawer.frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
// 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)
- // Draw in canvas:
- // TODO: Remove that when we have the centralized redraw loop
- drawer.renderFrame();
+ // the model and draw them in the drawing canvas (not the fake overlay anymore)
}
- drawer.clearOverlay();
};
/**
diff --git a/js/drawingtools/SimplePen.js b/js/drawingtools/SimplePen.js
index 39a27363..86065d63 100644
--- a/js/drawingtools/SimplePen.js
+++ b/js/drawingtools/SimplePen.js
@@ -23,10 +23,6 @@
this.previousCol = col;
this.previousRow = row;
drawer.frame.setPixel(col, row, color);
-
- // Draw on canvas:
- // TODO: Remove that when we have the centralized redraw loop
- drawer.renderFramePixel(col, row);
}
};
diff --git a/js/piskel.js b/js/piskel.js
index ba77acbf..f0610f5f 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -51,6 +51,7 @@ $.namespace("pskl");
piskel.initDPIs_();
+
frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
@@ -91,6 +92,16 @@ $.namespace("pskl");
this.finishInit();
pskl.LocalStorageService.displayRestoreNotification();
}
+
+ var drawingLoop = new pskl.rendering.DrawingLoop();
+ drawingLoop.addCallback(this.render, this);
+ drawingLoop.start();
+ },
+
+ render : function (delta) {
+ this.drawingController.render(delta);
+ this.animationController.render(delta);
+ this.previewsController.render(delta);
},
/**
@@ -157,7 +168,7 @@ $.namespace("pskl");
});
$.subscribe(Events.REFRESH, function() {
- piskel.setActiveFrameAndRedraw(0);
+ piskel.setActiveFrame(0);
});
// TODO: Move this into their service or behavior files:
@@ -186,13 +197,12 @@ $.namespace("pskl");
piskel.setActiveFrame(0);
$.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit();
- piskel.setActiveFrameAndRedraw(0);
};
xhr.onerror = function () {
$.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit();
- piskel.setActiveFrameAndRedraw(0);
+ piskel.setActiveFrame(0);
};
xhr.send();
@@ -203,18 +213,6 @@ $.namespace("pskl");
this.drawingController.frame = this.getCurrentFrame();
},
- setActiveFrameAndRedraw: function(index) {
- this.setActiveFrame(index);
- this.redraw();
- },
-
- redraw : function () {
- // Update drawing canvas:
- this.drawingController.renderFrame();
- // Update slideshow:
- this.previewsController.createPreviews();
- },
-
getActiveFrameIndex: function() {
if(-1 == activeFrameIndex) {
throw "Bad active frame initialization."
@@ -237,12 +235,12 @@ $.namespace("pskl");
removeFrame: function(frameIndex) {
frameSheet.removeFrameByIndex(frameIndex);
var activeFrameIndex = frameIndex ? frameIndex - 1 : 0;
- this.setActiveFrameAndRedraw(activeFrameIndex);
+ this.setActiveFrame(activeFrameIndex);
},
duplicateFrame: function(frameIndex) {
frameSheet.duplicateFrameByIndex(frameIndex);
- this.setActiveFrameAndRedraw(frameIndex + 1);
+ this.setActiveFrame(frameIndex + 1);
},
getCurrentColor : function () {
@@ -323,8 +321,6 @@ $.namespace("pskl");
$.publish(Events.TOOL_RELEASED);
- // TODO: Remove that when we have the centralized redraw loop
- this.previewsController.createPreviews();
}
},