mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge branch 'master' into improve-color-selection-ux
This commit is contained in:
juliandescottes
commit
11a3155e38
8
css/minimap.css
Normal file
8
css/minimap.css
Normal file
@ -0,0 +1,8 @@
|
||||
.minimap-crop-frame {
|
||||
position:absolute;
|
||||
border:1px solid red;
|
||||
z-index:9999;
|
||||
box-sizing : border-box;
|
||||
-moz-box-sizing : border-box;
|
||||
cursor : pointer;
|
||||
}
|
||||
@ -177,6 +177,10 @@ body {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.preview-container .canvas-container {
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
.preview-container canvas {
|
||||
border : 0px Solid transparent;
|
||||
}
|
||||
@ -192,6 +196,7 @@ body {
|
||||
|
||||
.range-fps {
|
||||
overflow: hidden;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/minimap.css">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="js/lib/iframeLoader.js"></script>
|
||||
|
||||
@ -8,8 +8,8 @@ var Constants = {
|
||||
|
||||
MODEL_VERSION : 1,
|
||||
|
||||
MAX_HEIGHT : 128,
|
||||
MAX_WIDTH : 128,
|
||||
MAX_HEIGHT : 1024,
|
||||
MAX_WIDTH : 1024,
|
||||
|
||||
PREVIEW_FILM_SIZE : 120,
|
||||
|
||||
@ -46,7 +46,11 @@ var Constants = {
|
||||
IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/',
|
||||
|
||||
GRID_STROKE_WIDTH: 1,
|
||||
ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',
|
||||
|
||||
LEFT_BUTTON : 'left_button_1',
|
||||
RIGHT_BUTTON : 'right_button_2'
|
||||
RIGHT_BUTTON : 'right_button_2',
|
||||
MOUSEMOVE_THROTTLING : 10,
|
||||
|
||||
ABSTRACT_FUNCTION : function () {throw 'abstract method should be implemented';}
|
||||
};
|
||||
@ -27,6 +27,9 @@
|
||||
this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container'));
|
||||
this.animationController.init();
|
||||
|
||||
this.minimapController = new pskl.controller.MinimapController(this.piskelController, this.animationController, this.drawingController, $('#preview-canvas-container'));
|
||||
this.minimapController.init();
|
||||
|
||||
this.previewsController = new pskl.controller.PreviewFilmController(this.piskelController, $('#preview-list'));
|
||||
this.previewsController.init();
|
||||
|
||||
@ -232,9 +235,9 @@
|
||||
|
||||
getFirstFrameAsPng : function () {
|
||||
var firstFrame = this.piskelController.getFrameAt(0);
|
||||
var frameRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1);
|
||||
frameRenderer.drawTransparentAs('rgba(0,0,0,0)');
|
||||
var firstFrameCanvas = frameRenderer.render().canvas;
|
||||
var canvasRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1);
|
||||
canvasRenderer.drawTransparentAs('rgba(0,0,0,0)');
|
||||
var firstFrameCanvas = canvasRenderer.render().canvas;
|
||||
return firstFrameCanvas.toDataURL("image/png");
|
||||
},
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.AnimatedPreviewController = function (piskelController, container, dpi) {
|
||||
ns.AnimatedPreviewController = function (piskelController, container) {
|
||||
this.piskelController = piskelController;
|
||||
this.container = container;
|
||||
|
||||
@ -9,12 +9,16 @@
|
||||
|
||||
this.setFPS(Constants.DEFAULT.FPS);
|
||||
|
||||
var zoom = this.calculateZoom_();
|
||||
var frame = this.piskelController.getCurrentFrame();
|
||||
var renderingOptions = {
|
||||
"dpi": this.calculateDPI_()
|
||||
"zoom": zoom,
|
||||
"height" : frame.getHeight() * zoom,
|
||||
"width" : frame.getWidth() * zoom
|
||||
};
|
||||
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
|
||||
this.renderer = new pskl.rendering.frame.FrameRenderer(this.container, renderingOptions);
|
||||
|
||||
$.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
|
||||
$.subscribe(Events.FRAME_SIZE_CHANGED, this.updateZoom_.bind(this));
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.init = function () {
|
||||
@ -52,20 +56,21 @@
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculate the preview DPI depending on the framesheet size
|
||||
* Calculate the preview zoom depending on the framesheet size
|
||||
*/
|
||||
ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
|
||||
ns.AnimatedPreviewController.prototype.calculateZoom_ = function () {
|
||||
var frame = this.piskelController.getCurrentFrame();
|
||||
var previewSize = 200,
|
||||
framePixelHeight = this.piskelController.getCurrentFrame().getHeight(),
|
||||
framePixelWidth = this.piskelController.getCurrentFrame().getWidth();
|
||||
// TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
|
||||
hZoom = previewSize / frame.getHeight(),
|
||||
wZoom = previewSize / frame.getWidth();
|
||||
|
||||
//return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
|
||||
return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
|
||||
return Math.min(hZoom, wZoom);
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
|
||||
this.dpi = this.calculateDPI_();
|
||||
this.renderer.setDPI(this.dpi);
|
||||
ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
|
||||
var frame = this.piskelController.getCurrentFrame();
|
||||
var zoom = this.calculateZoom_();
|
||||
this.renderer.setZoom(zoom);
|
||||
this.renderer.setDisplaySize(frame.getWidth() * zoom, frame.getHeight() * zoom);
|
||||
};
|
||||
})();
|
||||
@ -16,19 +16,25 @@
|
||||
*/
|
||||
this.container = container;
|
||||
|
||||
this.dpi = this.calculateDPI_();
|
||||
|
||||
// TODO(vincz): Store user prefs in a localstorage string ?
|
||||
var renderingOptions = {
|
||||
"dpi": this.dpi,
|
||||
"supportGridRendering" : true
|
||||
"zoom": this.calculateZoom_(),
|
||||
"supportGridRendering" : true,
|
||||
"height" : this.getContainerHeight_(),
|
||||
"width" : this.getContainerWidth_(),
|
||||
"xOffset" : 0,
|
||||
"yOffset" : 0
|
||||
};
|
||||
|
||||
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["canvas-overlay"]);
|
||||
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["drawing-canvas"]);
|
||||
this.layersBelowRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["layers-canvas", "layers-below-canvas"]);
|
||||
this.layersAboveRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["layers-canvas", "layers-above-canvas"]);
|
||||
this.overlayRenderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["canvas-overlay"]);
|
||||
this.renderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["drawing-canvas"]);
|
||||
this.layersRenderer = new pskl.rendering.layer.LayersRenderer(this.container, renderingOptions, piskelController);
|
||||
|
||||
this.compositeRenderer = new pskl.rendering.CompositeRenderer();
|
||||
this.compositeRenderer
|
||||
.add(this.overlayRenderer)
|
||||
.add(this.renderer)
|
||||
.add(this.layersRenderer);
|
||||
|
||||
// State of drawing controller:
|
||||
this.isClicked = false;
|
||||
@ -63,31 +69,40 @@
|
||||
$.publish(Events.SECONDARY_COLOR_UPDATED, [color]);
|
||||
}, this));
|
||||
|
||||
$(window).resize($.proxy(this.startDPIUpdateTimer_, this));
|
||||
$(window).resize($.proxy(this.startResizeTimer_, this));
|
||||
|
||||
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
|
||||
$.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this));
|
||||
$.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChanged_, this));
|
||||
|
||||
this.updateDPI_();
|
||||
this.centerColumnWrapperHorizontally_();
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.initMouseBehavior = function() {
|
||||
var body = $('body');
|
||||
this.container.mousedown($.proxy(this.onMousedown_, this));
|
||||
this.container.mousemove($.proxy(this.onMousemove_, this));
|
||||
|
||||
if (pskl.utils.UserAgent.isChrome) {
|
||||
this.container.on('mousewheel', $.proxy(this.onMousewheel_, this));
|
||||
} else {
|
||||
this.container.on('wheel', $.proxy(this.onMousewheel_, this));
|
||||
}
|
||||
|
||||
body.mouseup($.proxy(this.onMouseup_, this));
|
||||
|
||||
// Deactivate right click:
|
||||
body.contextmenu(this.onCanvasContextMenu_);
|
||||
};
|
||||
|
||||
|
||||
|
||||
ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
|
||||
if (this.dpiUpdateTimer) {
|
||||
window.clearInterval(this.dpiUpdateTimer);
|
||||
ns.DrawingController.prototype.startResizeTimer_ = function () {
|
||||
if (this.resizeTimer) {
|
||||
window.clearInterval(this.resizeTimer);
|
||||
}
|
||||
this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
|
||||
this.resizeTimer = window.setTimeout($.proxy(this.afterWindowResize_, this), 200);
|
||||
},
|
||||
|
||||
ns.DrawingController.prototype.afterWindowResize_ = function () {
|
||||
this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
|
||||
},
|
||||
|
||||
/**
|
||||
@ -95,10 +110,15 @@
|
||||
*/
|
||||
ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
|
||||
if(settingsName == pskl.UserSettings.SHOW_GRID) {
|
||||
this.updateDPI_();
|
||||
console.warn('DrawingController:onUserSettingsChange_ not implemented !');
|
||||
}
|
||||
},
|
||||
|
||||
ns.DrawingController.prototype.onFrameSizeChanged_ = function () {
|
||||
this.compositeRenderer.setZoom(this.calculateZoom_());
|
||||
this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@ -110,10 +130,11 @@
|
||||
$.publish(Events.CANVAS_RIGHT_CLICKED);
|
||||
}
|
||||
|
||||
var coords = this.getSpriteCoordinates(event);
|
||||
var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
|
||||
|
||||
this.currentToolBehavior.applyToolAt(
|
||||
coords.col, coords.row,
|
||||
coords.x,
|
||||
coords.y,
|
||||
this.getCurrentColor_(),
|
||||
this.piskelController.getCurrentFrame(),
|
||||
this.overlayFrame,
|
||||
@ -129,12 +150,14 @@
|
||||
ns.DrawingController.prototype.onMousemove_ = function (event) {
|
||||
var currentTime = new Date().getTime();
|
||||
// Throttling of the mousemove event:
|
||||
if ((currentTime - this.previousMousemoveTime) > 40 ) {
|
||||
var coords = this.getSpriteCoordinates(event);
|
||||
if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) {
|
||||
var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
|
||||
|
||||
if (this.isClicked) {
|
||||
|
||||
this.currentToolBehavior.moveToolAt(
|
||||
coords.col, coords.row,
|
||||
coords.x,
|
||||
coords.y,
|
||||
this.getCurrentColor_(),
|
||||
this.piskelController.getCurrentFrame(),
|
||||
this.overlayFrame,
|
||||
@ -148,7 +171,8 @@
|
||||
} else {
|
||||
|
||||
this.currentToolBehavior.moveUnactiveToolAt(
|
||||
coords.col, coords.row,
|
||||
coords.x,
|
||||
coords.y,
|
||||
this.getCurrentColor_(),
|
||||
this.piskelController.getCurrentFrame(),
|
||||
this.overlayFrame,
|
||||
@ -159,6 +183,18 @@
|
||||
}
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) {
|
||||
var event = jQueryEvent.originalEvent;
|
||||
var delta = event.wheelDeltaY || (-2 * event.deltaY);
|
||||
var currentZoom = this.renderer.getZoom();
|
||||
if (delta > 0) {
|
||||
this.compositeRenderer.setZoom(currentZoom + 1);
|
||||
} else if (delta < 0) {
|
||||
this.compositeRenderer.setZoom(currentZoom - 1);
|
||||
}
|
||||
pskl.app.minimapController.onDrawingControllerMove_();
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
@ -172,10 +208,11 @@
|
||||
this.isClicked = false;
|
||||
this.isRightClicked = false;
|
||||
|
||||
var coords = this.getSpriteCoordinates(event);
|
||||
var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
|
||||
//console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
|
||||
this.currentToolBehavior.releaseToolAt(
|
||||
coords.col, coords.row,
|
||||
coords.x,
|
||||
coords.y,
|
||||
this.getCurrentColor_(),
|
||||
this.piskelController.getCurrentFrame(),
|
||||
this.overlayFrame,
|
||||
@ -199,23 +236,12 @@
|
||||
return evtInfo;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
|
||||
var canvasPageOffset = this.container.offset();
|
||||
return {
|
||||
x : clientX - canvasPageOffset.left,
|
||||
y : clientY - canvasPageOffset.top
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
|
||||
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
|
||||
return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
|
||||
return this.renderer.getCoordinates(event.clientX, event.clientY);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -243,111 +269,62 @@
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.render = function () {
|
||||
this.renderLayers();
|
||||
this.renderFrame();
|
||||
this.renderOverlay();
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.renderFrame = function () {
|
||||
var frame = this.piskelController.getCurrentFrame();
|
||||
var serializedFrame = this.dpi + "-" + frame.serialize();
|
||||
if (this.serializedFrame != serializedFrame) {
|
||||
if (!frame.isSameSize(this.overlayFrame)) {
|
||||
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
|
||||
var currentFrame = this.piskelController.getCurrentFrame();
|
||||
if (!currentFrame.isSameSize(this.overlayFrame)) {
|
||||
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
|
||||
}
|
||||
this.serializedFrame = serializedFrame;
|
||||
this.renderer.render(frame);
|
||||
}
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.renderOverlay = function () {
|
||||
var serializedOverlay = this.dpi + "-" + this.overlayFrame.serialize();
|
||||
if (this.serializedOverlay != serializedOverlay) {
|
||||
this.serializedOverlay = serializedOverlay;
|
||||
this.layersRenderer.render();
|
||||
this.renderer.render(currentFrame);
|
||||
this.overlayRenderer.render(this.overlayFrame);
|
||||
}
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.renderLayers = function () {
|
||||
var layers = this.piskelController.getLayers();
|
||||
var currentFrameIndex = this.piskelController.currentFrameIndex;
|
||||
var currentLayerIndex = this.piskelController.currentLayerIndex;
|
||||
|
||||
var serializedLayerFrame = [
|
||||
this.dpi,
|
||||
currentFrameIndex,
|
||||
currentLayerIndex,
|
||||
layers.length
|
||||
].join("-");
|
||||
|
||||
if (this.serializedLayerFrame != serializedLayerFrame) {
|
||||
this.layersAboveRenderer.clear();
|
||||
this.layersBelowRenderer.clear();
|
||||
|
||||
var downLayers = layers.slice(0, currentLayerIndex);
|
||||
var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
|
||||
this.layersBelowRenderer.render(downFrame);
|
||||
|
||||
if (currentLayerIndex + 1 < layers.length) {
|
||||
var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
|
||||
var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
|
||||
this.layersAboveRenderer.render(upFrame);
|
||||
}
|
||||
|
||||
this.serializedLayerFrame = serializedLayerFrame;
|
||||
}
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.getFrameForLayersAt_ = function (frameIndex, layers) {
|
||||
var frames = layers.map(function (l) {
|
||||
return l.getFrameAt(frameIndex);
|
||||
});
|
||||
return pskl.utils.FrameUtils.merge(frames);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.DrawingController.prototype.calculateDPI_ = function() {
|
||||
var availableViewportHeight = $('#main-wrapper').height(),
|
||||
leftSectionWidth = $('.left-column').outerWidth(true),
|
||||
ns.DrawingController.prototype.calculateZoom_ = function() {
|
||||
var frameHeight = this.piskelController.getCurrentFrame().getHeight(),
|
||||
frameWidth = this.piskelController.getCurrentFrame().getWidth();
|
||||
|
||||
return Math.min(this.getAvailableWidth_()/frameWidth, this.getAvailableHeight_()/frameHeight);
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.getAvailableHeight_ = function () {
|
||||
return $('#main-wrapper').height();
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.getAvailableWidth_ = function () {
|
||||
var leftSectionWidth = $('.left-column').outerWidth(true),
|
||||
rightSectionWidth = $('.right-column').outerWidth(true),
|
||||
availableViewportWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth,
|
||||
framePixelHeight = this.piskelController.getCurrentFrame().getHeight(),
|
||||
framePixelWidth = this.piskelController.getCurrentFrame().getWidth();
|
||||
availableWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth;
|
||||
return availableWidth;
|
||||
};
|
||||
|
||||
if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
|
||||
availableViewportWidth = availableViewportWidth - (framePixelWidth * Constants.GRID_STROKE_WIDTH);
|
||||
availableViewportHeight = availableViewportHeight - (framePixelHeight * Constants.GRID_STROKE_WIDTH);
|
||||
}
|
||||
ns.DrawingController.prototype.getContainerHeight_ = function () {
|
||||
return this.calculateZoom_() * this.piskelController.getCurrentFrame().getHeight();
|
||||
};
|
||||
|
||||
var dpi = pskl.PixelUtils.calculateDPI(
|
||||
availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
|
||||
|
||||
return dpi;
|
||||
ns.DrawingController.prototype.getContainerWidth_ = function () {
|
||||
return this.calculateZoom_() * this.piskelController.getCurrentFrame().getWidth();
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.DrawingController.prototype.updateDPI_ = function() {
|
||||
this.dpi = this.calculateDPI_();
|
||||
|
||||
this.overlayRenderer.setDPI(this.dpi);
|
||||
this.renderer.setDPI(this.dpi);
|
||||
this.layersAboveRenderer.setDPI(this.dpi);
|
||||
this.layersBelowRenderer.setDPI(this.dpi);
|
||||
|
||||
var currentFrameHeight = this.piskelController.getCurrentFrame().getHeight();
|
||||
var canvasHeight = currentFrameHeight * this.dpi;
|
||||
if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
|
||||
canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight;
|
||||
}
|
||||
|
||||
var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - canvasHeight) / 2);
|
||||
ns.DrawingController.prototype.centerColumnWrapperHorizontally_ = function() {
|
||||
var containerHeight = this.getContainerHeight_();
|
||||
var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - containerHeight) / 2);
|
||||
$('#column-wrapper').css({
|
||||
'top': verticalGapInPixel + 'px',
|
||||
'height': canvasHeight + 'px'
|
||||
'top': verticalGapInPixel + 'px'
|
||||
});
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.getRenderer = function () {
|
||||
return this.compositeRenderer;
|
||||
};
|
||||
|
||||
ns.DrawingController.prototype.setOffset = function (x, y) {
|
||||
this.compositeRenderer.setOffset(x, y);
|
||||
pskl.app.minimapController.onDrawingControllerMove_();
|
||||
};
|
||||
})();
|
||||
88
js/controller/MinimapController.js
Normal file
88
js/controller/MinimapController.js
Normal file
@ -0,0 +1,88 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller');
|
||||
|
||||
ns.MinimapController = function (piskelController, animationController, drawingController, container) {
|
||||
this.piskelController = piskelController;
|
||||
this.animationController = animationController;
|
||||
this.drawingController = drawingController;
|
||||
this.container = container;
|
||||
|
||||
this.isClicked = false;
|
||||
};
|
||||
|
||||
ns.MinimapController.prototype.init = function () {
|
||||
// Create minimap DOM elements
|
||||
this.cropFrame = document.createElement('DIV');
|
||||
this.cropFrame.className = 'minimap-crop-frame';
|
||||
this.cropFrame.style.display = 'none';
|
||||
$(this.container).append(this.cropFrame);
|
||||
|
||||
// Init mouse events
|
||||
$(this.container).mousedown(this.onMinimapMousedown_.bind(this));
|
||||
$('body').mousemove(this.onMinimapMousemove_.bind(this));
|
||||
$('body').mouseup(this.onMinimapMouseup_.bind(this));
|
||||
};
|
||||
|
||||
ns.MinimapController.prototype.onDrawingControllerMove_ = function () {
|
||||
var zoomRatio = this.getDrawingAreaZoomRatio_();
|
||||
if (zoomRatio > 1) {
|
||||
this.displayCropFrame_(zoomRatio, this.drawingController.getRenderer().getOffset());
|
||||
} else {
|
||||
this.hideCropFrame_();
|
||||
}
|
||||
};
|
||||
|
||||
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';
|
||||
var zoomRatio = this.getDrawingAreaZoomRatio_();
|
||||
this.cropFrame.style.width = (this.container.width() / zoomRatio) + 'px';
|
||||
this.cropFrame.style.height = (this.container.height() / zoomRatio) + 'px';
|
||||
|
||||
};
|
||||
|
||||
ns.MinimapController.prototype.hideCropFrame_ = function () {
|
||||
this.cropFrame.style.display = 'none';
|
||||
};
|
||||
|
||||
ns.MinimapController.prototype.onMinimapMousemove_ = function (evt) {
|
||||
if (this.isClicked) {
|
||||
if (this.getDrawingAreaZoomRatio_() > 1) {
|
||||
var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY);
|
||||
this.drawingController.setOffset(coords.x, coords.y);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.MinimapController.prototype.onMinimapMousedown_ = function (evt) {
|
||||
this.isClicked = true;
|
||||
};
|
||||
|
||||
ns.MinimapController.prototype.onMinimapMouseup_ = function (evt) {
|
||||
this.isClicked = false;
|
||||
};
|
||||
|
||||
ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) {
|
||||
var frameCoords = this.animationController.renderer.getCoordinates(x, y);
|
||||
var zoomRatio = this.getDrawingAreaZoomRatio_();
|
||||
var frameWidth = this.piskelController.getCurrentFrame().getWidth();
|
||||
var frameHeight = this.piskelController.getCurrentFrame().getHeight();
|
||||
|
||||
var width = frameWidth / zoomRatio;
|
||||
var height = frameHeight / zoomRatio;
|
||||
|
||||
return {
|
||||
x : frameCoords.x - (width/2),
|
||||
y : frameCoords.y - (height/2)
|
||||
};
|
||||
};
|
||||
|
||||
ns.MinimapController.prototype.getDrawingAreaZoomRatio_ = function () {
|
||||
var drawingAreaZoom = this.drawingController.getRenderer().getZoom();
|
||||
var drawingAreaFullHeight = this.piskelController.getCurrentFrame().getHeight() * drawingAreaZoom;
|
||||
var zoomRatio = drawingAreaFullHeight / this.drawingController.getRenderer().getDisplaySize().height;
|
||||
|
||||
return zoomRatio;
|
||||
};
|
||||
})();
|
||||
@ -1,10 +1,10 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.PreviewFilmController = function (piskelController, container, dpi) {
|
||||
ns.PreviewFilmController = function (piskelController, container) {
|
||||
|
||||
this.piskelController = piskelController;
|
||||
this.container = container;
|
||||
this.dpi = this.calculateDPI_();
|
||||
this.refreshZoom_();
|
||||
|
||||
this.redrawFlag = true;
|
||||
};
|
||||
@ -12,7 +12,7 @@
|
||||
ns.PreviewFilmController.prototype.init = function() {
|
||||
$.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
|
||||
$.subscribe(Events.PISKEL_RESET, this.flagForRedraw_.bind(this));
|
||||
$.subscribe(Events.PISKEL_RESET, this.refreshDPI_.bind(this));
|
||||
$.subscribe(Events.PISKEL_RESET, this.refreshZoom_.bind(this));
|
||||
|
||||
$('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
|
||||
this.updateScrollerOverflows();
|
||||
@ -28,8 +28,8 @@
|
||||
this.redrawFlag = true;
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.refreshDPI_ = function () {
|
||||
this.dpi = this.calculateDPI_();
|
||||
ns.PreviewFilmController.prototype.refreshZoom_ = function () {
|
||||
this.zoom = this.calculateZoom_();
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.render = function () {
|
||||
@ -153,8 +153,12 @@
|
||||
|
||||
// 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.
|
||||
var renderingOptions = {"dpi": this.dpi };
|
||||
var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, ["tile-view"]);
|
||||
var renderingOptions = {
|
||||
"zoom" : this.zoom,
|
||||
"height" : this.piskelController.getCurrentFrame().getHeight() * this.zoom,
|
||||
"width" : this.piskelController.getCurrentFrame().getWidth() * this.zoom
|
||||
};
|
||||
var currentFrameRenderer = new pskl.rendering.frame.FrameRenderer($(canvasContainer), renderingOptions, ["tile-view"]);
|
||||
currentFrameRenderer.render(currentFrame);
|
||||
|
||||
previewTileRoot.appendChild(canvasContainer);
|
||||
@ -204,9 +208,9 @@
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculate the preview DPI depending on the piskel size
|
||||
* Calculate the preview zoom depending on the piskel size
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.calculateDPI_ = function () {
|
||||
ns.PreviewFilmController.prototype.calculateZoom_ = function () {
|
||||
var curFrame = this.piskelController.getCurrentFrame(),
|
||||
frameHeight = curFrame.getHeight(),
|
||||
frameWidth = curFrame.getWidth(),
|
||||
@ -215,6 +219,6 @@
|
||||
var previewHeight = Constants.PREVIEW_FILM_SIZE * frameHeight / maxFrameDim;
|
||||
var previewWidth = Constants.PREVIEW_FILM_SIZE * frameWidth / maxFrameDim;
|
||||
|
||||
return pskl.PixelUtils.calculateDPI(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
|
||||
return pskl.PixelUtils.calculateZoom(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
|
||||
};
|
||||
})();
|
||||
@ -18,13 +18,18 @@
|
||||
$('#show-grid').prop('checked', show_grid);
|
||||
|
||||
// Handle grid display changes:
|
||||
$('#show-grid').change($.proxy(function(evt) {
|
||||
var checked = $('#show-grid').prop('checked');
|
||||
pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
|
||||
}, this));
|
||||
$('#show-grid').change(this.onShowGridClick.bind(this));
|
||||
|
||||
// Handle canvas background changes:
|
||||
$('#background-picker-wrapper').click(function(evt) {
|
||||
$('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onShowGridClick = function (evt) {
|
||||
var checked = $('#show-grid').prop('checked');
|
||||
pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
|
||||
var target = $(evt.target).closest('.background-picker');
|
||||
if (target.length) {
|
||||
var backgroundClass = target.data('background-class');
|
||||
@ -33,6 +38,6 @@
|
||||
$('.background-picker').removeClass('selected');
|
||||
target.addClass('selected');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
})();
|
||||
@ -8,18 +8,18 @@
|
||||
/**
|
||||
* List of Resolutions applicable for Gif export
|
||||
* @static
|
||||
* @type {Array} array of Objects {dpi:{Number}, default:{Boolean}}
|
||||
* @type {Array} array of Objects {zoom:{Number}, default:{Boolean}}
|
||||
*/
|
||||
ns.GifExportController.RESOLUTIONS = [
|
||||
{
|
||||
'dpi' : 1
|
||||
'zoom' : 1
|
||||
},{
|
||||
'dpi' : 5
|
||||
'zoom' : 5
|
||||
},{
|
||||
'dpi' : 10,
|
||||
'zoom' : 10,
|
||||
'default' : true
|
||||
},{
|
||||
'dpi' : 20
|
||||
'zoom' : 20
|
||||
}
|
||||
];
|
||||
|
||||
@ -37,11 +37,11 @@
|
||||
|
||||
ns.GifExportController.prototype.onUploadFormSubmit_ = function (evt) {
|
||||
evt.originalEvent.preventDefault();
|
||||
var selectedDpi = this.getSelectedDpi_(),
|
||||
var selectedZoom = this.getSelectedZoom_(),
|
||||
fps = this.piskelController.getFPS(),
|
||||
dpi = selectedDpi;
|
||||
zoom = selectedZoom;
|
||||
|
||||
this.renderAsImageDataAnimatedGIF(dpi, fps, this.onGifRenderingCompleted_.bind(this));
|
||||
this.renderAsImageDataAnimatedGIF(zoom, fps, this.onGifRenderingCompleted_.bind(this));
|
||||
};
|
||||
|
||||
ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
|
||||
@ -59,15 +59,15 @@
|
||||
this.previewContainerEl.innerHTML = "<div><img style='max-width:240px;' src='"+src+"'/></div>";
|
||||
};
|
||||
|
||||
ns.GifExportController.prototype.getSelectedDpi_ = function () {
|
||||
var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-dpi]"),
|
||||
ns.GifExportController.prototype.getSelectedZoom_ = function () {
|
||||
var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-zoom-level]"),
|
||||
radios = Array.prototype.slice.call(radiosColl,0);
|
||||
var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
|
||||
|
||||
if (selectedRadios.length == 1) {
|
||||
return selectedRadios[0].value;
|
||||
} else {
|
||||
throw "Unexpected error when retrieving selected dpi";
|
||||
throw "Unexpected error when retrieving selected zoom";
|
||||
}
|
||||
};
|
||||
|
||||
@ -80,9 +80,9 @@
|
||||
};
|
||||
|
||||
ns.GifExportController.prototype.createRadioForResolution_ = function (resolution) {
|
||||
var dpi = resolution.dpi;
|
||||
var label = dpi*this.piskelController.getWidth() + "x" + dpi*this.piskelController.getHeight();
|
||||
var value = dpi;
|
||||
var zoom = resolution.zoom;
|
||||
var label = zoom*this.piskelController.getWidth() + "x" + zoom*this.piskelController.getHeight();
|
||||
var value = zoom;
|
||||
|
||||
var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
|
||||
var radioEl = pskl.utils.Template.createFromHTML(radioHTML);
|
||||
@ -104,17 +104,17 @@
|
||||
reader.readAsDataURL(blob);
|
||||
};
|
||||
|
||||
ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(dpi, fps, cb) {
|
||||
ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
|
||||
var gif = new window.GIF({
|
||||
workers: 2,
|
||||
quality: 10,
|
||||
width: this.piskelController.getWidth()*dpi,
|
||||
height: this.piskelController.getHeight()*dpi
|
||||
width: this.piskelController.getWidth()*zoom,
|
||||
height: this.piskelController.getHeight()*zoom
|
||||
});
|
||||
|
||||
for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
|
||||
var frame = this.piskelController.getFrameAt(i);
|
||||
var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
|
||||
var renderer = new pskl.rendering.CanvasRenderer(frame, zoom);
|
||||
gif.addFrame(renderer.render(), {
|
||||
delay: 1000 / fps
|
||||
});
|
||||
|
||||
22
js/rendering/AbstractRenderer.js
Normal file
22
js/rendering/AbstractRenderer.js
Normal file
@ -0,0 +1,22 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.rendering');
|
||||
|
||||
ns.AbstractRenderer = function () {};
|
||||
|
||||
ns.AbstractRenderer.prototype.clear = Constants.ABSTRACT_FUNCTION;
|
||||
|
||||
ns.AbstractRenderer.prototype.getCoordinates = Constants.ABSTRACT_FUNCTION;
|
||||
|
||||
ns.AbstractRenderer.prototype.setGridEnabled = Constants.ABSTRACT_FUNCTION;
|
||||
ns.AbstractRenderer.prototype.isGridEnabled = Constants.ABSTRACT_FUNCTION;
|
||||
|
||||
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;
|
||||
|
||||
ns.AbstractRenderer.prototype.setDisplaySize = Constants.ABSTRACT_FUNCTION;
|
||||
ns.AbstractRenderer.prototype.getDisplaySize = Constants.ABSTRACT_FUNCTION;
|
||||
})();
|
||||
@ -1,9 +1,9 @@
|
||||
(function () {
|
||||
|
||||
var ns = $.namespace("pskl.rendering");
|
||||
ns.CanvasRenderer = function (frame, dpi) {
|
||||
ns.CanvasRenderer = function (frame, zoom) {
|
||||
this.frame = frame;
|
||||
this.dpi = dpi;
|
||||
this.zoom = zoom;
|
||||
this.transparentColor_ = 'white';
|
||||
};
|
||||
|
||||
@ -36,12 +36,12 @@
|
||||
}
|
||||
context.fillStyle = color;
|
||||
|
||||
context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
|
||||
context.fillRect(col * this.zoom, row * this.zoom, this.zoom, this.zoom);
|
||||
};
|
||||
|
||||
ns.CanvasRenderer.prototype.createCanvas_ = function () {
|
||||
var width = this.frame.getWidth() * this.dpi;
|
||||
var height = this.frame.getHeight() * this.dpi;
|
||||
var width = this.frame.getWidth() * this.zoom;
|
||||
var height = this.frame.getHeight() * this.zoom;
|
||||
return pskl.CanvasUtils.createCanvas(width, height);
|
||||
};
|
||||
})();
|
||||
75
js/rendering/CompositeRenderer.js
Normal file
75
js/rendering/CompositeRenderer.js
Normal file
@ -0,0 +1,75 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.rendering');
|
||||
|
||||
ns.CompositeRenderer = function () {
|
||||
this.renderers = [];
|
||||
};
|
||||
|
||||
pskl.utils.inherit(pskl.rendering.CompositeRenderer, pskl.rendering.AbstractRenderer);
|
||||
|
||||
ns.CompositeRenderer.prototype.add = function (renderer) {
|
||||
this.renderers.push(renderer);
|
||||
return this;
|
||||
};
|
||||
|
||||
ns.CompositeRenderer.prototype.clear = function () {
|
||||
this.renderers.forEach(function (renderer) {
|
||||
renderer.clear();
|
||||
});
|
||||
};
|
||||
|
||||
ns.CompositeRenderer.prototype.setZoom = function (zoom) {
|
||||
this.renderers.forEach(function (renderer) {
|
||||
renderer.setZoom(zoom);
|
||||
});
|
||||
};
|
||||
|
||||
ns.CompositeRenderer.prototype.getZoom = function () {
|
||||
return this.getSampleRenderer_().getZoom();
|
||||
};
|
||||
|
||||
ns.CompositeRenderer.prototype.setDisplaySize = function (w, h) {
|
||||
this.renderers.forEach(function (renderer) {
|
||||
renderer.setDisplaySize(w, h);
|
||||
});
|
||||
};
|
||||
|
||||
ns.CompositeRenderer.prototype.getDisplaySize = function () {
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
ns.CompositeRenderer.prototype.getOffset = function () {
|
||||
return this.getSampleRenderer_().getOffset();
|
||||
};
|
||||
|
||||
|
||||
ns.CompositeRenderer.prototype.setGridEnabled = function (b) {
|
||||
this.renderers.forEach(function (renderer) {
|
||||
renderer.setGridEnabled(b);
|
||||
});
|
||||
};
|
||||
|
||||
ns.CompositeRenderer.prototype.isGridEnabled = function () {
|
||||
return this.getSampleRenderer_().isGridEnabled();
|
||||
};
|
||||
|
||||
ns.CompositeRenderer.prototype.getSampleRenderer_ = function () {
|
||||
if (this.renderers.length > 0) {
|
||||
return this.renderers[0];
|
||||
} else {
|
||||
throw 'Renderer manager is empty';
|
||||
}
|
||||
};
|
||||
})();
|
||||
@ -1,145 +0,0 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.rendering");
|
||||
|
||||
/**
|
||||
* FrameRenderer will display a given frame inside a canvas element.
|
||||
* @param {HtmlElement} container HtmlElement to use as parentNode of the Frame
|
||||
* @param {Object} renderingOptions
|
||||
* @param {Array} classes array of strings to use for css classes
|
||||
*/
|
||||
ns.FrameRenderer = function (container, renderingOptions, classes) {
|
||||
this.defaultRenderingOptions = {
|
||||
'supportGridRendering' : false
|
||||
};
|
||||
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
|
||||
|
||||
if(container === undefined) {
|
||||
throw 'Bad FrameRenderer initialization. <container> undefined.';
|
||||
}
|
||||
|
||||
if(isNaN(renderingOptions.dpi)) {
|
||||
throw 'Bad FrameRenderer initialization. <dpi> not well defined.';
|
||||
}
|
||||
|
||||
this.container = container;
|
||||
|
||||
this.dpi = renderingOptions.dpi;
|
||||
this.supportGridRendering = renderingOptions.supportGridRendering;
|
||||
|
||||
this.classes = classes || [];
|
||||
this.classes.push('canvas');
|
||||
|
||||
this.canvas = null;
|
||||
|
||||
this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
|
||||
|
||||
// Flag to know if the config was altered
|
||||
this.canvasConfigDirty = true;
|
||||
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
|
||||
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.setDPI = function (dpi) {
|
||||
this.dpi = dpi;
|
||||
this.canvasConfigDirty = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
|
||||
|
||||
if(settingName == pskl.UserSettings.SHOW_GRID) {
|
||||
this.enableGrid(settingValue);
|
||||
}
|
||||
else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
|
||||
this.updateBackgroundClass_(settingValue);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
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.enableGrid = function (flag) {
|
||||
this.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0;
|
||||
this.canvasConfigDirty = true;
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.render = function (frame) {
|
||||
if (frame) {
|
||||
this.clear();
|
||||
var context = this.getCanvas_(frame).getContext('2d');
|
||||
for(var col = 0, width = frame.getWidth(); col < width; col++) {
|
||||
for(var row = 0, height = frame.getHeight(); row < height; row++) {
|
||||
var color = frame.getPixel(col, row);
|
||||
this.renderPixel_(color, col, row, context);
|
||||
}
|
||||
}
|
||||
this.lastRenderedFrame = frame;
|
||||
}
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
|
||||
if(color != Constants.TRANSPARENT_COLOR) {
|
||||
context.fillStyle = color;
|
||||
context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
|
||||
}
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.clear = function () {
|
||||
if (this.canvas) {
|
||||
this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
|
||||
* frame) into a sprite coordinate in column and row.
|
||||
* @public
|
||||
*/
|
||||
ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
|
||||
var cellSize = this.dpi + this.gridStrokeWidth;
|
||||
return {
|
||||
"col" : (coords.x - coords.x % cellSize) / cellSize,
|
||||
"row" : (coords.y - coords.y % cellSize) / cellSize
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.FrameRenderer.prototype.getFramePos_ = function(index) {
|
||||
return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
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 canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, this.classes);
|
||||
this.container.append(canvas);
|
||||
|
||||
this.canvas = canvas;
|
||||
this.canvasConfigDirty = false;
|
||||
}
|
||||
return this.canvas;
|
||||
};
|
||||
})();
|
||||
32
js/rendering/frame/CachedFrameRenderer.js
Normal file
32
js/rendering/frame/CachedFrameRenderer.js
Normal file
@ -0,0 +1,32 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.rendering.frame');
|
||||
|
||||
/**
|
||||
* FrameRenderer implementation that prevents unnecessary redraws.
|
||||
* @param {HtmlElement} container HtmlElement to use as parentNode of the Frame
|
||||
* @param {Object} renderingOptions
|
||||
* @param {Array} classes array of strings to use for css classes
|
||||
*/
|
||||
ns.CachedFrameRenderer = function (container, renderingOptions, classes) {
|
||||
pskl.rendering.frame.FrameRenderer.call(this, container, renderingOptions, classes);
|
||||
this.serializedFrame = '';
|
||||
};
|
||||
|
||||
pskl.utils.inherit(pskl.rendering.frame.CachedFrameRenderer, pskl.rendering.frame.FrameRenderer);
|
||||
|
||||
ns.CachedFrameRenderer.prototype.render = function (frame) {
|
||||
var offset = this.getOffset();
|
||||
var size = this.getDisplaySize();
|
||||
var serializedFrame = [
|
||||
this.getZoom(),
|
||||
this.isGridEnabled(),
|
||||
offset.x, offset.y,
|
||||
size.width, size.height,
|
||||
frame.serialize()
|
||||
].join('-');
|
||||
if (this.serializedFrame != serializedFrame) {
|
||||
this.serializedFrame = serializedFrame;
|
||||
this.superclass.render.call(this, frame);
|
||||
}
|
||||
};
|
||||
})();
|
||||
259
js/rendering/frame/FrameRenderer.js
Normal file
259
js/rendering/frame/FrameRenderer.js
Normal file
@ -0,0 +1,259 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.rendering.frame");
|
||||
|
||||
/**
|
||||
* FrameRenderer will display a given frame inside a canvas element.
|
||||
* @param {HtmlElement} container HtmlElement to use as parentNode of the Frame
|
||||
* @param {Object} renderingOptions
|
||||
* @param {Array} classes array of strings to use for css classes
|
||||
*/
|
||||
ns.FrameRenderer = function (container, renderingOptions, classes) {
|
||||
this.defaultRenderingOptions = {
|
||||
'supportGridRendering' : false,
|
||||
'zoom' : 1
|
||||
};
|
||||
|
||||
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
|
||||
|
||||
if(container === undefined) {
|
||||
throw 'Bad FrameRenderer initialization. <container> undefined.';
|
||||
}
|
||||
|
||||
if(isNaN(renderingOptions.zoom)) {
|
||||
throw 'Bad FrameRenderer initialization. <zoom> not well defined.';
|
||||
}
|
||||
|
||||
this.container = container;
|
||||
|
||||
this.zoom = renderingOptions.zoom;
|
||||
|
||||
this.offset = {
|
||||
x : 0,
|
||||
y : 0
|
||||
};
|
||||
|
||||
this.margin = {
|
||||
x : 0,
|
||||
y : 0
|
||||
};
|
||||
|
||||
this.isGridEnabled_ = false;
|
||||
this.supportGridRendering = renderingOptions.supportGridRendering;
|
||||
|
||||
this.classes = classes || [];
|
||||
this.classes.push('canvas');
|
||||
|
||||
/**
|
||||
* Off dom canvas, will be used to draw the frame at 1:1 ratio
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
this.canvas = null;
|
||||
|
||||
/**
|
||||
* Displayed canvas, scaled-up from the offdom canvas
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
this.displayCanvas = null;
|
||||
this.setDisplaySize(renderingOptions.width, renderingOptions.height);
|
||||
|
||||
this.setGridEnabled(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
|
||||
|
||||
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
|
||||
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
|
||||
};
|
||||
|
||||
pskl.utils.inherit(pskl.rendering.frame.FrameRenderer, pskl.rendering.AbstractRenderer);
|
||||
|
||||
ns.FrameRenderer.prototype.render = function (frame) {
|
||||
if (frame) {
|
||||
this.clear();
|
||||
this.renderFrame_(frame);
|
||||
}
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.clear = function () {
|
||||
pskl.CanvasUtils.clear(this.canvas);
|
||||
pskl.CanvasUtils.clear(this.displayCanvas);
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.setZoom = function (zoom) {
|
||||
// back up center coordinates
|
||||
var centerX = this.offset.x + (this.displayWidth/(2*this.zoom));
|
||||
var centerY = this.offset.y + (this.displayHeight/(2*this.zoom));
|
||||
|
||||
this.zoom = Math.max(1, zoom);
|
||||
|
||||
// recenter
|
||||
this.setOffset(
|
||||
centerX - (this.displayWidth/(2*this.zoom)),
|
||||
centerY - (this.displayHeight/(2*this.zoom))
|
||||
);
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.getZoom = function () {
|
||||
return this.zoom;
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.setDisplaySize = function (width, height) {
|
||||
this.displayWidth = width;
|
||||
this.displayHeight = height;
|
||||
if (this.displayCanvas) {
|
||||
$(this.displayCanvas).remove();
|
||||
this.displayCanvas = null;
|
||||
}
|
||||
this.createDisplayCanvas_();
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.getDisplaySize = function () {
|
||||
return {
|
||||
height : this.displayHeight,
|
||||
width : this.displayWidth
|
||||
};
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.getOffset = function () {
|
||||
return {
|
||||
x : this.offset.x,
|
||||
y : this.offset.y
|
||||
};
|
||||
};
|
||||
|
||||
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
|
||||
// and then perform my boundaries checking. This sucks
|
||||
if (this.canvas) {
|
||||
var maxX = this.canvas.width - (this.displayWidth/this.zoom);
|
||||
x = pskl.utils.Math.minmax(x, 0, maxX);
|
||||
var maxY = this.canvas.height - (this.displayHeight/this.zoom);
|
||||
y = pskl.utils.Math.minmax(y, 0, maxY);
|
||||
}
|
||||
this.offset.x = x;
|
||||
this.offset.y = y;
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.setGridEnabled = function (flag) {
|
||||
this.isGridEnabled_ = flag && this.supportGridRendering;
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.isGridEnabled = function () {
|
||||
return this.isGridEnabled_;
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.updateMargins_ = function () {
|
||||
var deltaX = this.displayWidth - (this.zoom * this.canvas.width);
|
||||
this.margin.x = Math.max(0, deltaX) / 2;
|
||||
|
||||
var deltaY = this.displayHeight - (this.zoom * this.canvas.height);
|
||||
this.margin.y = Math.max(0, deltaY) / 2;
|
||||
};
|
||||
|
||||
ns.FrameRenderer.prototype.createDisplayCanvas_ = function () {
|
||||
var height = this.displayHeight;
|
||||
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.SHOW_GRID) {
|
||||
this.setGridEnabled(settingValue);
|
||||
} else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
|
||||
this.updateBackgroundClass_(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;
|
||||
context.fillRect(x, y, 1, 1);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
|
||||
* frame) into a sprite coordinate in column and row.
|
||||
* @public
|
||||
*/
|
||||
ns.FrameRenderer.prototype.getCoordinates = function(x, y) {
|
||||
var containerOffset = this.container.offset();
|
||||
x = x - containerOffset.left;
|
||||
y = y - containerOffset.top;
|
||||
|
||||
// apply margins
|
||||
x = x - this.margin.x;
|
||||
y = y - this.margin.y;
|
||||
|
||||
var cellSize = this.zoom;
|
||||
// apply frame offset
|
||||
x = x + this.offset.x * cellSize;
|
||||
y = y + this.offset.y * cellSize;
|
||||
|
||||
return {
|
||||
x : Math.floor(x / cellSize),
|
||||
y : Math.floor(y / cellSize)
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.FrameRenderer.prototype.renderFrame_ = function (frame) {
|
||||
if (!this.canvas || frame.getWidth() != this.canvas.width || frame.getHeight() != this.canvas.height) {
|
||||
this.canvas = pskl.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
|
||||
}
|
||||
|
||||
var context = this.canvas.getContext('2d');
|
||||
for(var x = 0, width = frame.getWidth(); x < width; x++) {
|
||||
for(var y = 0, height = frame.getHeight(); y < height; y++) {
|
||||
var color = frame.getPixel(x, y);
|
||||
this.renderPixel_(color, x, y, context);
|
||||
}
|
||||
}
|
||||
|
||||
this.updateMargins_();
|
||||
|
||||
context = this.displayCanvas.getContext('2d');
|
||||
context.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);
|
||||
}
|
||||
|
||||
context.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);
|
||||
|
||||
var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10;
|
||||
if (this.isGridEnabled() || isIE10) {
|
||||
var gridWidth = this.isGridEnabled() ? Constants.GRID_STROKE_WIDTH : 0;
|
||||
var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
|
||||
context.drawImage(scaled, 0, 0);
|
||||
} else {
|
||||
context.scale(this.zoom, this.zoom);
|
||||
context.drawImage(this.canvas, 0, 0);
|
||||
}
|
||||
context.restore();
|
||||
};
|
||||
})();
|
||||
67
js/rendering/layer/LayersRenderer.js
Normal file
67
js/rendering/layer/LayersRenderer.js
Normal file
@ -0,0 +1,67 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.rendering.layer');
|
||||
|
||||
ns.LayersRenderer = function (container, renderingOptions, piskelController) {
|
||||
pskl.rendering.CompositeRenderer.call(this);
|
||||
|
||||
this.piskelController = piskelController;
|
||||
|
||||
// Do not use CachedFrameRenderers here, since the caching will be performed in the render method of LayersRenderer
|
||||
this.belowRenderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ["layers-canvas", "layers-below-canvas"]);
|
||||
this.aboveRenderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ["layers-canvas", "layers-above-canvas"]);
|
||||
|
||||
this.add(this.belowRenderer);
|
||||
this.add(this.aboveRenderer);
|
||||
|
||||
this.serializedRendering = '';
|
||||
};
|
||||
|
||||
pskl.utils.inherit(pskl.rendering.layer.LayersRenderer, pskl.rendering.CompositeRenderer);
|
||||
|
||||
ns.LayersRenderer.prototype.render = function () {
|
||||
var offset = this.getOffset();
|
||||
var size = this.getDisplaySize();
|
||||
var layers = this.piskelController.getLayers();
|
||||
var currentFrameIndex = this.piskelController.currentFrameIndex;
|
||||
var currentLayerIndex = this.piskelController.currentLayerIndex;
|
||||
|
||||
var serializedRendering = [
|
||||
this.getZoom(),
|
||||
this.isGridEnabled(),
|
||||
offset.x,
|
||||
offset.y,
|
||||
size.width,
|
||||
size.height,
|
||||
currentFrameIndex,
|
||||
currentLayerIndex,
|
||||
layers.length
|
||||
].join("-");
|
||||
|
||||
|
||||
if (this.serializedRendering != serializedRendering) {
|
||||
this.serializedRendering = serializedRendering;
|
||||
|
||||
this.clear();
|
||||
|
||||
var downLayers = layers.slice(0, currentLayerIndex);
|
||||
if (downLayers.length > 0) {
|
||||
var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
|
||||
this.belowRenderer.render(downFrame);
|
||||
}
|
||||
|
||||
var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
|
||||
if (upLayers.length > 0) {
|
||||
var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
|
||||
this.aboveRenderer.render(upFrame);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
ns.LayersRenderer.prototype.getFrameForLayersAt_ = function (frameIndex, layers) {
|
||||
var frames = layers.map(function (l) {
|
||||
return l.getFrameAt(frameIndex);
|
||||
});
|
||||
return pskl.utils.FrameUtils.merge(frames);
|
||||
};
|
||||
})();
|
||||
@ -45,9 +45,9 @@
|
||||
* @private
|
||||
*/
|
||||
ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
|
||||
|
||||
this.piskelController.deserialize(window.localStorage.snapShot);
|
||||
this.piskelController.setCurrentFrameIndex(0);
|
||||
var framesheet = JSON.parse(window.localStorage.snapShot);
|
||||
var piskel = pskl.utils.Serializer.createPiskel(framesheet);
|
||||
pskl.app.piskelController.setPiskel(piskel);
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -17,6 +17,33 @@
|
||||
}
|
||||
|
||||
return canvas;
|
||||
},
|
||||
|
||||
/**
|
||||
* By default, all scaling operations on a Canvas 2D Context are performed using antialiasing.
|
||||
* Resizing a 32x32 image to 320x320 will lead to a blurry output.
|
||||
* On Chrome, FF and IE>=11, this can be disabled by setting a property on the Canvas 2D Context.
|
||||
* In this case the browser will use a nearest-neighbor scaling.
|
||||
* @param {Canvas} canvas
|
||||
*/
|
||||
disableImageSmoothing : function (canvas) {
|
||||
var context = canvas.getContext('2d');
|
||||
context.imageSmoothingEnabled = false;
|
||||
context.mozImageSmoothingEnabled = false;
|
||||
context.oImageSmoothingEnabled = false;
|
||||
context.webkitImageSmoothingEnabled = false;
|
||||
context.msImageSmoothingEnabled = false;
|
||||
},
|
||||
|
||||
clear : function (canvas) {
|
||||
if (canvas) {
|
||||
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
},
|
||||
|
||||
getImageDataFromCanvas : function (canvas) {
|
||||
var sourceContext = canvas.getContext('2d');
|
||||
return sourceContext.getImageData(0, 0, canvas.width, canvas.height).data;
|
||||
}
|
||||
};
|
||||
})();
|
||||
@ -1,6 +1,6 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.utils');
|
||||
|
||||
var colorCache = {};
|
||||
ns.FrameUtils = {
|
||||
merge : function (frames) {
|
||||
var merged = null;
|
||||
@ -23,6 +23,77 @@
|
||||
},
|
||||
|
||||
/**
|
||||
* Alpha compositing using porter duff algorithm :
|
||||
* http://en.wikipedia.org/wiki/Alpha_compositing
|
||||
* http://keithp.com/~keithp/porterduff/p253-porter.pdf
|
||||
* @param {String} strColor1 color over
|
||||
* @param {String} strColor2 color under
|
||||
* @return {String} the composite color
|
||||
*/
|
||||
mergePixels : function (strColor1, strColor2, globalOpacity1) {
|
||||
var col1 = pskl.utils.FrameUtils.toRgba(strColor1);
|
||||
var col2 = pskl.utils.FrameUtils.toRgba(strColor2);
|
||||
if (typeof globalOpacity1 == 'number') {
|
||||
col1 = JSON.parse(JSON.stringify(col1));
|
||||
col1.a = globalOpacity1 * col1.a;
|
||||
}
|
||||
var a = col1.a + col2.a * (1 - col1.a);
|
||||
|
||||
var r = ((col1.r * col1.a + col2.r * col2.a * (1 - col1.a)) / a)|0;
|
||||
var g = ((col1.g * col1.a + col2.g * col2.a * (1 - col1.a)) / a)|0;
|
||||
var b = ((col1.b * col1.a + col2.b * col2.a * (1 - col1.a)) / a)|0;
|
||||
|
||||
return 'rgba('+r+','+g+','+b+','+a+')';
|
||||
},
|
||||
|
||||
/**
|
||||
* Convert a color defined as a string (hex, rgba, rgb, 'TRANSPARENT') to an Object with r,g,b,a properties.
|
||||
* r, g and b are integers between 0 and 255, a is a float between 0 and 1
|
||||
* @param {String} c color as a string
|
||||
* @return {Object} {r:Number,g:Number,b:Number,a:Number}
|
||||
*/
|
||||
toRgba : function (c) {
|
||||
if (colorCache[c]) {
|
||||
return colorCache[c];
|
||||
}
|
||||
var color, matches;
|
||||
if (c === 'TRANSPARENT') {
|
||||
color = {
|
||||
r : 0,
|
||||
g : 0,
|
||||
b : 0,
|
||||
a : 0
|
||||
};
|
||||
} else if (c.indexOf('rgba(') != -1) {
|
||||
matches = /rgba\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(1|0\.\d+)\s*\)/.exec(c);
|
||||
color = {
|
||||
r : parseInt(matches[1],10),
|
||||
g : parseInt(matches[2],10),
|
||||
b : parseInt(matches[3],10),
|
||||
a : parseFloat(matches[4])
|
||||
};
|
||||
} else if (c.indexOf('rgb(') != -1) {
|
||||
matches = /rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(c);
|
||||
color = {
|
||||
r : parseInt(matches[1],10),
|
||||
g : parseInt(matches[2],10),
|
||||
b : parseInt(matches[3],10),
|
||||
a : 1
|
||||
};
|
||||
} else {
|
||||
matches = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(c);
|
||||
color = {
|
||||
r : parseInt(matches[1], 16),
|
||||
g : parseInt(matches[2], 16),
|
||||
b : parseInt(matches[3], 16),
|
||||
a : 1
|
||||
};
|
||||
}
|
||||
colorCache[c] = color;
|
||||
return color;
|
||||
},
|
||||
|
||||
/*
|
||||
* Create a pskl.model.Frame from an Image object.
|
||||
* Transparent pixels will either be converted to completely opaque or completely transparent pixels.
|
||||
* @param {Image} image source image
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
context.save();
|
||||
|
||||
if (!smoothingEnabled) {
|
||||
this.disableSmoothingOnContext(context);
|
||||
pskl.CanvasUtils.disableImageSmoothing(canvas);
|
||||
}
|
||||
|
||||
context.translate(canvas.width / 2, canvas.height / 2);
|
||||
@ -19,12 +19,58 @@
|
||||
return canvas;
|
||||
},
|
||||
|
||||
disableSmoothingOnContext : function (context) {
|
||||
context.imageSmoothingEnabled = false;
|
||||
context.mozImageSmoothingEnabled = false;
|
||||
context.oImageSmoothingEnabled = false;
|
||||
context.webkitImageSmoothingEnabled = false;
|
||||
context.msImageSmoothingEnabled = false;
|
||||
/**
|
||||
* Manual implementation of resize using a nearest neighbour algorithm
|
||||
* It is slower than relying on the native 'disabledImageSmoothing' available on CanvasRenderingContext2d.
|
||||
* But it can be useful if :
|
||||
* - IE < 11 (doesn't support msDisableImageSmoothing)
|
||||
* - need to display a gap between pixel
|
||||
*
|
||||
* @param {Canvas2d} source original image to be resized, as a 2d canvas
|
||||
* @param {Number} zoom ratio between desired dim / source dim
|
||||
* @param {Number} margin gap to be displayed between pixels
|
||||
* @return {Canvas2d} the resized canvas
|
||||
*/
|
||||
resizeNearestNeighbour : function (source, zoom, margin) {
|
||||
margin = margin || 0;
|
||||
var canvas = pskl.CanvasUtils.createCanvas(zoom*source.width, zoom*source.height);
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
var imgData = pskl.CanvasUtils.getImageDataFromCanvas(source);
|
||||
|
||||
var yRanges = {},
|
||||
xOffset = 0,
|
||||
yOffset = 0,
|
||||
xRange,
|
||||
yRange;
|
||||
// Draw the zoomed-up pixels to a different canvas context
|
||||
for (var x = 0; x < source.width; x++) {
|
||||
// Calculate X Range
|
||||
xRange = Math.floor((x + 1) * zoom) - xOffset;
|
||||
|
||||
for (var y = 0; y < source.height; y++) {
|
||||
// Calculate Y Range
|
||||
if (!yRanges[y + ""]) {
|
||||
// Cache Y Range
|
||||
yRanges[y + ""] = Math.floor((y + 1) * zoom) - yOffset;
|
||||
}
|
||||
yRange = yRanges[y + ""];
|
||||
|
||||
var i = (y * source.width + x) * 4;
|
||||
var r = imgData[i];
|
||||
var g = imgData[i + 1];
|
||||
var b = imgData[i + 2];
|
||||
var a = imgData[i + 3];
|
||||
|
||||
context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")";
|
||||
context.fillRect(xOffset, yOffset, xRange-margin, yRange-margin);
|
||||
|
||||
yOffset += yRange;
|
||||
}
|
||||
yOffset = 0;
|
||||
xOffset += xRange;
|
||||
}
|
||||
return canvas;
|
||||
}
|
||||
};
|
||||
})();
|
||||
9
js/utils/Math.js
Normal file
9
js/utils/Math.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.utils');
|
||||
|
||||
ns.Math = {
|
||||
minmax : function (val, min, max) {
|
||||
return Math.max(Math.min(val, max), min);
|
||||
}
|
||||
};
|
||||
})();
|
||||
@ -147,31 +147,31 @@
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculate and return the maximal DPI to display a picture in a given container.
|
||||
* Calculate and return the maximal zoom level to display a picture in a given container.
|
||||
*
|
||||
* @param container jQueryObject Container where the picture should be displayed
|
||||
* @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 dpi
|
||||
* @return number maximal zoom
|
||||
*/
|
||||
calculateDPIForContainer : function (container, pictureHeight, pictureWidth) {
|
||||
return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth);
|
||||
calculateZoomForContainer : function (container, pictureHeight, pictureWidth) {
|
||||
return this.calculateZoom(container.height(), container.width(), pictureHeight, pictureWidth);
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculate and return the maximal DPI to display a picture for a given height and width.
|
||||
* 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 dpi
|
||||
* @return number maximal zoom
|
||||
*/
|
||||
calculateDPI : function (height, width, pictureHeight, pictureWidth) {
|
||||
var heightBoundDpi = Math.floor(height / pictureHeight),
|
||||
widthBoundDpi = Math.floor(width / pictureWidth);
|
||||
calculateZoom : function (height, width, pictureHeight, pictureWidth) {
|
||||
var heightRatio = Math.floor(height / pictureHeight),
|
||||
widthRatio = Math.floor(width / pictureWidth);
|
||||
|
||||
return Math.min(heightBoundDpi, widthBoundDpi);
|
||||
return Math.min(heightRatio, widthRatio);
|
||||
}
|
||||
};
|
||||
})();
|
||||
20
js/utils/UserAgent.js
Normal file
20
js/utils/UserAgent.js
Normal file
@ -0,0 +1,20 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.utils');
|
||||
var ua = navigator.userAgent;
|
||||
|
||||
ns.UserAgent = {
|
||||
isIE : /MSIE/i.test( ua ),
|
||||
isChrome : /Chrome/i.test( ua ),
|
||||
isFirefox : /Firefox/i.test( ua )
|
||||
};
|
||||
|
||||
ns.UserAgent.version = (function () {
|
||||
if (pskl.utils.UserAgent.isIE) {
|
||||
return parseInt(/MSIE\s?(\d+)/i.exec( ua )[1], 10);
|
||||
} else if (pskl.utils.UserAgent.isChrome) {
|
||||
return parseInt(/Chrome\/(\d+)/i.exec( ua )[1], 10);
|
||||
} else if (pskl.utils.UserAgent.isFirefox) {
|
||||
return parseInt(/Firefox\/(\d+)/i.exec( ua )[1], 10);
|
||||
}
|
||||
})();
|
||||
})();
|
||||
@ -14,7 +14,9 @@ exports.scripts = [
|
||||
|
||||
// Libraries
|
||||
"js/utils/core.js",
|
||||
"js/utils/UserAgent.js",
|
||||
"js/utils/CanvasUtils.js",
|
||||
"js/utils/Math.js",
|
||||
"js/utils/FileUtils.js",
|
||||
"js/utils/FrameUtils.js",
|
||||
"js/utils/ImageResizer.js",
|
||||
@ -38,8 +40,12 @@ exports.scripts = [
|
||||
"js/selection/ShapeSelection.js",
|
||||
|
||||
// Rendering
|
||||
"js/rendering/AbstractRenderer.js",
|
||||
"js/rendering/CompositeRenderer.js",
|
||||
"js/rendering/layer/LayersRenderer.js",
|
||||
"js/rendering/frame/FrameRenderer.js",
|
||||
"js/rendering/frame/CachedFrameRenderer.js",
|
||||
"js/rendering/CanvasRenderer.js",
|
||||
"js/rendering/FrameRenderer.js",
|
||||
"js/rendering/SpritesheetRenderer.js",
|
||||
|
||||
// Controllers
|
||||
@ -48,6 +54,7 @@ exports.scripts = [
|
||||
"js/controller/PreviewFilmController.js",
|
||||
"js/controller/LayersListController.js",
|
||||
"js/controller/AnimatedPreviewController.js",
|
||||
"js/controller/MinimapController.js",
|
||||
"js/controller/ToolController.js",
|
||||
"js/controller/PaletteController.js",
|
||||
"js/controller/NotificationController.js",
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<label>Select resolution:</label>
|
||||
<form action="" method="POST" name="gif-export-upload-form">
|
||||
<script type="text/template" id="gif-export-radio-template">
|
||||
<label style="display:block"><input type="radio" name="gif-dpi" value="{{value}}"/>
|
||||
<label style="display:block"><input type="radio" name="gif-zoom-level" value="{{value}}"/>
|
||||
{{label}}</label>
|
||||
</script>
|
||||
<div class="gif-export-radio-group"></div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user