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

Merge pull request #180 from juliandescottes/feature-tiled-preview

Browse Source 
Feature tiled preview
This commit is contained in:
Julian Descottes 2014-05-12 00:49:34 +02:00
commit 43957b4a13
23 changed files with 219 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/preview-film-section.css
View File

@ -84,6 +84,8 @@
border: #444 3px solid;
border-radius: 3px;
margin: 5px 0;
width: 96px;
height: 96px;
}
.preview-tile:first-child {

6
src/css/settings.css
View File

@ -137,13 +137,17 @@
margin-bottom: 10px;
}
.settings-item {
margin : 10px 0;
}
/************************************************************************************************/
/* Application settings */
/************************************************************************************************/
.background-picker-wrapper {
overflow: hidden;
padding: 10px 5px 20px 5px;
padding: 5px;
}
.background-picker {

20
src/css/style.css
View File

@ -178,6 +178,24 @@ body {
border : 0px Solid transparent;
}
#animated-preview-container {
background: #333;
border-radius : 0 0 2px 2px;
overflow : hidden;
}
#animated-preview-canvas-container {
height :200px;
width : 200px;
}
.tiled-frame-container {
height: 100%;
width: 100%;
position: relative;
background-repeat : repeat;
}
.display-fps {
float: left;
color: #aaa;
@ -190,6 +208,8 @@ body {
.range-fps {
overflow: hidden;
width: 120px;
height : 24px;
margin : 0;
}
/**

4
src/css/toolbox.css
View File

@ -4,7 +4,9 @@
color: white;
text-align: left;
border-radius: 4px;
margin-top: 10px;
margin-top: 5px;
margin-bottom: 10px;
overflow: hidden;
}
.toolbox-title {

5
src/js/Constants.js
View File

@ -13,7 +13,7 @@ var Constants = {
MINIMUM_ZOOM : 1,
PREVIEW_FILM_SIZE : 120,
PREVIEW_FILM_SIZE : 96,
ANIMATED_PREVIEW_WIDTH : 200,
DEFAULT_PEN_COLOR : '#000000',
@ -62,5 +62,6 @@ var Constants = {
RIGHT_BUTTON : 2,
MOUSEMOVE_THROTTLING : 10,
ABSTRACT_FUNCTION : function () {throw 'abstract method should be implemented';}
ABSTRACT_FUNCTION : function () {throw 'abstract method should be implemented';},
EMPTY_FUNCTION : function () {}
};

8
src/js/app.js
View File

@ -51,10 +51,10 @@
this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
this.drawingController.init();
this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container'));
this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#animated-preview-canvas-container'));
this.animationController.init();
this.minimapController = new pskl.controller.MinimapController(this.piskelController, this.animationController, this.drawingController, $('#preview-canvas-container'));
this.minimapController = new pskl.controller.MinimapController(this.piskelController, this.animationController, this.drawingController, $('#animated-preview-canvas-container'));
this.minimapController.init();
this.previewFilmController = new pskl.controller.PreviewFilmController(this.piskelController, $('#preview-list'));
@ -81,6 +81,9 @@
this.notificationController = new pskl.controller.NotificationController();
this.notificationController.init();
this.canvasBackgroundController = new pskl.controller.CanvasBackgroundController();
this.canvasBackgroundController.init();
this.localStorageService = new pskl.service.LocalStorageService(this.piskelController);
this.localStorageService.init();
@ -93,6 +96,7 @@
this.savedStatusService = new pskl.service.SavedStatusService(this.piskelController);
this.savedStatusService.init();
if (this.isAppEngineVersion) {
this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);
} else {

70
src/js/controller/AnimatedPreviewController.js
View File

@ -1,6 +1,9 @@
(function () {
var ns = $.namespace("pskl.controller");
// Preview is a square of PREVIEW_SIZE x PREVIEW_SIZE
var PREVIEW_SIZE = 200;
ns.AnimatedPreviewController = function (piskelController, container) {
this.piskelController = piskelController;
this.container = container;
@ -10,16 +13,38 @@
this.setFPS(Constants.DEFAULT.FPS);
var zoom = this.calculateZoom_();
var frame = this.piskelController.getCurrentFrame();
var renderingOptions = {
"zoom": zoom,
"height" : frame.getHeight() * zoom,
"width" : frame.getWidth() * zoom
};
this.renderer = new pskl.rendering.frame.FrameRenderer(this.container, renderingOptions);
this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
this.updateZoom_();
$.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};
ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
this.updateZoom_();
this.updateContainerDimensions_();
};
ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
var zoom = isTiled ? 1 : this.calculateZoom_();
this.renderer.setZoom(zoom);
};
ns.AnimatedPreviewController.prototype.getZoom = function () {
return this.calculateZoom_();
};
ns.AnimatedPreviewController.prototype.getCoordinates = function(x, y) {
var containerOffset = this.container.offset();
x = x - containerOffset.left;
y = y - containerOffset.top;
var zoom = this.getZoom();
return {
x : Math.floor(x / zoom),
y : Math.floor(y / zoom)
};
};
ns.AnimatedPreviewController.prototype.init = function () {
@ -53,7 +78,8 @@
this.currentIndex = 0;
this.elapsedTime = 0;
}
this.renderer.render(this.piskelController.getFrameAt(this.currentIndex));
var frame = this.piskelController.getFrameAt(this.currentIndex);
this.renderer.render(frame);
}
};
@ -70,10 +96,30 @@
};
ns.AnimatedPreviewController.prototype.onFrameSizeChange_ = function () {
this.updateZoom_();
this.updateContainerDimensions_();
};
ns.AnimatedPreviewController.prototype.updateContainerDimensions_ = function () {
var containerEl = this.container.get(0);
var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
var height, width;
if (isTiled) {
height = PREVIEW_SIZE;
width = PREVIEW_SIZE;
} else {
var zoom = this.getZoom();
var frame = this.piskelController.getCurrentFrame();
var zoom = this.calculateZoom_();
this.renderer.setDisplaySize(frame.getWidth() * zoom, frame.getHeight() * zoom);
this.renderer.setZoom(zoom);
this.renderer.setOffset(0, 0);
height = frame.getHeight() * zoom;
width = frame.getWidth() * zoom;
}
containerEl.style.height = height + "px";
containerEl.style.width = width + "px";
containerEl.style.marginTop = ((PREVIEW_SIZE - height) / 2) + "px";
containerEl.style.marginBottom = ((PREVIEW_SIZE - height) / 2) + "px";
containerEl.style.marginLeft = ((PREVIEW_SIZE - width) / 2) + "px";
containerEl.style.marginRight = ((PREVIEW_SIZE - width) / 2) + "px";
};
})();

28
src/js/controller/CanvasBackgroundController.js Normal file
View File

@ -0,0 +1,28 @@
(function () {
var ns = $.namespace('pskl.controller');
ns.CanvasBackgroundController = function () {
this.body = document.body;
};
ns.CanvasBackgroundController.prototype.init = function () {
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
};
ns.CanvasBackgroundController.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
this.updateBackgroundClass_(settingValue);
}
};
ns.CanvasBackgroundController.prototype.updateBackgroundClass_ = function (newClass) {
var currentClass = this.body.dataset.currentBackgroundClass;
if (currentClass) {
this.body.classList.remove(currentClass);
}
this.body.classList.add(newClass);
this.body.dataset.currentBackgroundClass = newClass;
};
})();

1
src/js/controller/DrawingController.js
View File

@ -109,6 +109,7 @@
ns.DrawingController.prototype.onFrameSizeChanged_ = function () {
this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
this.centerColumnWrapperHorizontally_();
this.compositeRenderer.setZoom(this.calculateZoom_());
this.compositeRenderer.setOffset(0, 0);
$.publish(Events.ZOOM_CHANGED);

6
src/js/controller/MinimapController.js
View File

@ -36,8 +36,8 @@
ns.MinimapController.prototype.displayCropFrame_ = function (ratio, offset) {
this.cropFrame.style.display = 'block';
this.cropFrame.style.top = (offset.y * this.animationController.renderer.getZoom()) + 'px';
this.cropFrame.style.left = (offset.x * this.animationController.renderer.getZoom()) + 'px';
this.cropFrame.style.top = (offset.y * this.animationController.getZoom()) + 'px';
this.cropFrame.style.left = (offset.x * this.animationController.getZoom()) + 'px';
var zoomRatio = this.getDrawingAreaZoomRatio_();
this.cropFrame.style.width = (this.container.width() / zoomRatio) + 'px';
this.cropFrame.style.height = (this.container.height() / zoomRatio) + 'px';
@ -66,7 +66,7 @@
};
ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) {
var frameCoords = this.animationController.renderer.getCoordinates(x, y);
var frameCoords = this.animationController.getCoordinates(x, y);
var zoomRatio = this.getDrawingAreaZoomRatio_();
var frameWidth = this.piskelController.getCurrentFrame().getWidth();
var frameHeight = this.piskelController.getCurrentFrame().getHeight();

8
src/js/controller/PreviewFilmController.js
View File

@ -212,12 +212,8 @@
ns.PreviewFilmController.prototype.calculateZoom_ = function () {
var curFrame = this.piskelController.getCurrentFrame(),
frameHeight = curFrame.getHeight(),
frameWidth = curFrame.getWidth(),
maxFrameDim = Math.max(frameWidth, frameHeight);
frameWidth = curFrame.getWidth();
var previewHeight = Constants.PREVIEW_FILM_SIZE * frameHeight / maxFrameDim;
var previewWidth = Constants.PREVIEW_FILM_SIZE * frameWidth / maxFrameDim;
return pskl.PixelUtils.calculateZoom(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
return Math.min(Constants.PREVIEW_FILM_SIZE/frameHeight, Constants.PREVIEW_FILM_SIZE/frameWidth);
};
})();

9
src/js/controller/settings/ApplicationSettingsController.js
View File

@ -18,6 +18,10 @@
$('#grid-width').val(gridWidth);
$('#grid-width').change(this.onGridWidthChange.bind(this));
var tiledPreview = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
$('#tiled-preview').prop('checked', tiledPreview);
$('#tiled-preview').change(this.onTiledPreviewChange.bind(this));
// Handle canvas background changes:
$('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
};
@ -27,6 +31,11 @@
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
};
ns.ApplicationSettingsController.prototype.onTiledPreviewChange = function (evt) {
var checked = $('#tiled-preview').prop('checked');
pskl.UserSettings.set(pskl.UserSettings.TILED_PREVIEW, checked);
};
ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
var target = $(evt.target).closest('.background-picker');
if (target.length) {

2
src/js/rendering/AbstractRenderer.js
View File

@ -4,6 +4,7 @@
ns.AbstractRenderer = function () {};
ns.AbstractRenderer.prototype.clear = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.render = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getCoordinates = Constants.ABSTRACT_FUNCTION;
@ -13,7 +14,6 @@
ns.AbstractRenderer.prototype.setZoom = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getZoom = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.moveOffset = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.setOffset = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getOffset = Constants.ABSTRACT_FUNCTION;

18
src/js/rendering/CanvasRenderer.js
View File

@ -19,12 +19,17 @@
ns.CanvasRenderer.prototype.render = function () {
var canvas = this.createCanvas_();
var context = canvas.getContext('2d');
this.frame.forEachPixel(function (color, x, y) {
this.renderPixel_(color, x, y, context);
}.bind(this));
return canvas;
var scaledCanvas = this.createCanvas_(this.zoom);
var scaledContext = scaledCanvas.getContext('2d');
pskl.CanvasUtils.disableImageSmoothing(scaledCanvas);
scaledContext.scale(this.zoom, this.zoom);
scaledContext.drawImage(canvas, 0, 0);
return scaledCanvas;
};
ns.CanvasRenderer.prototype.renderPixel_ = function (color, x, y, context) {
@ -32,12 +37,13 @@
color = this.transparentColor_;
}
context.fillStyle = color;
context.fillRect(x * this.zoom, y * this.zoom, this.zoom, this.zoom);
context.fillRect(x, y, 1, 1);
};
ns.CanvasRenderer.prototype.createCanvas_ = function () {
var width = this.frame.getWidth() * this.zoom;
var height = this.frame.getHeight() * this.zoom;
ns.CanvasRenderer.prototype.createCanvas_ = function (zoom) {
zoom = zoom || 1;
var width = this.frame.getWidth() * zoom;
var height = this.frame.getHeight() * zoom;
return pskl.CanvasUtils.createCanvas(width, height);
};
})();

6
src/js/rendering/CompositeRenderer.js
View File

@ -38,12 +38,6 @@
return this.getSampleRenderer_().getDisplaySize();
};
ns.CompositeRenderer.prototype.moveOffset = function (x, y) {
this.renderers.forEach(function (renderer) {
renderer.moveOffset(x, y);
});
};
ns.CompositeRenderer.prototype.setOffset = function (x, y) {
this.renderers.forEach(function (renderer) {
renderer.setOffset(x, y);

50
src/js/rendering/frame/FrameRenderer.js
View File

@ -57,8 +57,7 @@
this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
};
pskl.utils.inherit(pskl.rendering.frame.FrameRenderer, pskl.rendering.AbstractRenderer);
@ -118,10 +117,6 @@
};
};
ns.FrameRenderer.prototype.moveOffset = function (x, y) {
this.setOffset(this.offset.x + x, this.offset.y + y);
};
ns.FrameRenderer.prototype.setOffset = function (x, y) {
// TODO : provide frame size information to the FrameRenderer constructor
// here I first need to verify I have a 'canvas' which I can use to infer the frame information
@ -148,11 +143,11 @@
}
};
ns.FrameRenderer.prototype.updateMargins_ = function () {
var deltaX = this.displayWidth - (this.zoom * this.canvas.width);
ns.FrameRenderer.prototype.updateMargins_ = function (frame) {
var deltaX = this.displayWidth - (this.zoom * frame.getWidth());
this.margin.x = Math.max(0, deltaX) / 2;
var deltaY = this.displayHeight - (this.zoom * this.canvas.height);
var deltaY = this.displayHeight - (this.zoom * frame.getHeight());
this.margin.y = Math.max(0, deltaY) / 2;
};
@ -161,29 +156,16 @@
var width = this.displayWidth;
this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
if (true || this.zoom > 2) {
pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
}
this.container.append(this.displayCanvas);
};
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
this.updateBackgroundClass_(settingValue);
} else if (settingName == pskl.UserSettings.GRID_WIDTH) {
if (settingName == pskl.UserSettings.GRID_WIDTH) {
this.setGridWidth(settingValue);
}
};
ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
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);
};
ns.FrameRenderer.prototype.renderPixel_ = function (color, x, y, context) {
if(color != Constants.TRANSPARENT_COLOR) {
context.fillStyle = color;
@ -232,22 +214,22 @@
}
}
this.updateMargins_();
this.updateMargins_(frame);
context = this.displayCanvas.getContext('2d');
context.save();
var displayContext = this.displayCanvas.getContext('2d');
displayContext.save();
if (this.canvas.width*this.zoom < this.displayCanvas.width) {
context.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
context.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
displayContext.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
}
context.translate(
displayContext.translate(
this.margin.x-this.offset.x*this.zoom,
this.margin.y-this.offset.y*this.zoom
);
context.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
displayContext.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10;
@ -255,11 +237,11 @@
var isGridEnabled = gridWidth > 0;
if (isGridEnabled || isIE10) {
var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
context.drawImage(scaled, 0, 0);
displayContext.drawImage(scaled, 0, 0);
} else {
context.scale(this.zoom, this.zoom);
context.drawImage(this.canvas, 0, 0);
displayContext.scale(this.zoom, this.zoom);
displayContext.drawImage(this.canvas, 0, 0);
}
context.restore();
displayContext.restore();
};
})();

31
src/js/rendering/frame/TiledFrameRenderer.js Normal file
View File

@ -0,0 +1,31 @@
(function () {
var ns = $.namespace('pskl.rendering.frame');
ns.TiledFrameRenderer = function (container, zoom) {
this.container = container;
this.setZoom(zoom);
this.displayContainer = document.createElement('div');
this.displayContainer.classList.add('tiled-frame-container');
container.get(0).appendChild(this.displayContainer);
};
ns.TiledFrameRenderer.prototype.render = function (frame) {
var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
this.displayContainer.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
};
ns.TiledFrameRenderer.prototype.show = function () {
if (this.displayContainer) {
this.displayContainer.style.display = 'block';
}
};
ns.TiledFrameRenderer.prototype.setZoom = function (zoom) {
this.zoom = zoom;
};
ns.TiledFrameRenderer.prototype.getZoom = function () {
return this.zoom;
};
})();

8
src/js/utils/FrameUtils.js
View File

@ -159,9 +159,11 @@
return hex.length == 1 ? "0" + hex : hex;
},
toImage : function (frame) {
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1);
canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
toImage : function (frame, zoom, bgColor) {
zoom = zoom || 1;
bgColor = bgColor || Constants.TRANSPARENT_COLOR;
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(bgColor);
return canvasRenderer.render();
}
};

16
src/js/utils/PixelUtils.js
View File

@ -156,22 +156,6 @@
*/
calculateZoomForContainer : function (container, pictureHeight, pictureWidth) {
return this.calculateZoom(container.height(), container.width(), pictureHeight, pictureWidth);
},
/**
* Calculate and return the maximal zoom to display a picture for a given height and width.
*
* @param height number Height available to display the picture
* @param width number Width available to display the picture
* @param number pictureHeight height in pixels of the picture to display
* @param number pictureWidth width in pixels of the picture to display
* @return number maximal zoom
*/
calculateZoom : function (height, width, pictureHeight, pictureWidth) {
var heightRatio = Math.floor(height / pictureHeight),
widthRatio = Math.floor(width / pictureWidth);
return Math.min(heightRatio, widthRatio);
}
};
})();

4
src/js/utils/UserSettings.js
View File

@ -5,11 +5,13 @@
GRID_WIDTH : 'GRID_WIDTH',
CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
SELECTED_PALETTE : 'SELECTED_PALETTE',
TILED_PREVIEW : 'TILED_PREVIEW',
KEY_TO_DEFAULT_VALUE_MAP_ : {
'GRID_WIDTH' : 0,
'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
'SELECTED_PALETTE' : Constants.CURRENT_PALETTE_ID
'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
'TILED_PREVIEW' : false
},
/**

2
src/piskel-script-list.js
View File

@ -59,6 +59,7 @@
"js/rendering/CompositeRenderer.js",
"js/rendering/layer/LayersRenderer.js",
"js/rendering/frame/FrameRenderer.js",
"js/rendering/frame/TiledFrameRenderer.js",
"js/rendering/frame/CachedFrameRenderer.js",
"js/rendering/CanvasRenderer.js",
"js/rendering/FramesheetRenderer.js",
@ -77,6 +78,7 @@
"js/controller/PaletteController.js",
"js/controller/PalettesListController.js",
"js/controller/NotificationController.js",
"js/controller/CanvasBackgroundController.js",
// Settings sub-controllers
"js/controller/settings/ApplicationSettingsController.js",

4
src/templates/preview.html
View File

@ -1,5 +1,5 @@
<div class='preview-container'>
<div id='preview-canvas-container' class="canvas-container">
<div id="animated-preview-container" class="preview-container">
<div id="animated-preview-canvas-container" class="canvas-container">
<div class="canvas-background"></div>
</div>
<div>

4
src/templates/settings/application.html
View File

@ -29,5 +29,9 @@
<option value="4">Enabled - 4px wide</option>
</select>
</div>
<div class="settings-item">
<label for="tiled-preview">Display tiled preview :</label>
<input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
</div>
</div>