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

Added drawing loop, unplugged traditional renderers

Browse Source
This commit is contained in:
juliandescottes 2012-09-08 23:59:44 +02:00
parent e4373ad133
commit 6e7545a1d2
7 changed files with 21 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -89,6 +89,7 @@
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
<!-- Application libraries-->
<script src="js/rendering/DrawingLoop.js"></script>
<script src="js/model/Frame.js"></script>
<script src="js/model/FrameSheet.js"></script>
<script src="js/rendering/FrameRenderer.js"></script>

18
js/controller/AnimatedPreviewController.js
View File

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

1
js/drawingtools/Move.js
View File

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

4
js/drawingtools/PaintBucket.js
View File

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

7
js/drawingtools/Rectangle.js
View File

@ -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);
@ -60,11 +59,7 @@
}
// 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();
}
drawer.clearOverlay();
};
/**

4
js/drawingtools/SimplePen.js
View File

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

34
js/piskel.js
View File

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