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

zoom preview 2

Browse Source
This commit is contained in:
jdescottes 2013-11-01 23:16:38 +01:00
parent bd7f84c8f0
commit 2a2cf7190f
20 changed files with 1406 additions and 543 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
zoom/build/piskel-packaged-min.js vendored
View File

File diff suppressed because one or more lines are too long

1062
zoom/build/piskel-packaged.js
View File

File diff suppressed because it is too large Load Diff

8
zoom/css/minimap.css Normal file
View 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;
}

5
zoom/css/style.css
View File

@ -174,6 +174,10 @@ body {
font-size: 0; font-size: 0;
} }
.preview-container .canvas-container {
overflow : hidden;
}
.preview-container canvas { .preview-container canvas {
border : 0px Solid transparent; border : 0px Solid transparent;
} }
@ -189,6 +193,7 @@ body {
.range-fps { .range-fps {
overflow: hidden; overflow: hidden;
width: 120px;
} }
/** /**

1
zoom/index.html
View File

@ -14,6 +14,7 @@
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css"> <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/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/preview-film-section.css">
<link rel="stylesheet" type="text/css" href="css/minimap.css">
</head> </head>
<body> <body>
<script type="text/javascript" src="js/lib/iframeLoader.js"></script> <script type="text/javascript" src="js/lib/iframeLoader.js"></script>

3
zoom/js/Constants.js
View File

@ -48,5 +48,6 @@ var Constants = {
GRID_STROKE_WIDTH: 1, GRID_STROKE_WIDTH: 1,
LEFT_BUTTON : 'left_button_1', LEFT_BUTTON : 'left_button_1',
RIGHT_BUTTON : 'right_button_2' RIGHT_BUTTON : 'right_button_2',
MOUSEMOVE_THROTTLING : 10
}; };

9
zoom/js/app.js
View File

@ -27,6 +27,9 @@
this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container')); this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container'));
this.animationController.init(); 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 = new pskl.controller.PreviewFilmController(this.piskelController, $('#preview-list'));
this.previewsController.init(); this.previewsController.init();
@ -232,9 +235,9 @@
getFirstFrameAsPng : function () { getFirstFrameAsPng : function () {
var firstFrame = this.piskelController.getFrameAt(0); var firstFrame = this.piskelController.getFrameAt(0);
var frameRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1); var canvasRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1);
frameRenderer.drawTransparentAs('rgba(0,0,0,0)'); canvasRenderer.drawTransparentAs('rgba(0,0,0,0)');
var firstFrameCanvas = frameRenderer.render().canvas; var firstFrameCanvas = canvasRenderer.render().canvas;
return firstFrameCanvas.toDataURL("image/png"); return firstFrameCanvas.toDataURL("image/png");
}, },

25
zoom/js/controller/AnimatedPreviewController.js
View File

@ -9,14 +9,15 @@
this.setFPS(Constants.DEFAULT.FPS); this.setFPS(Constants.DEFAULT.FPS);
var zoom = this.calculateZoom_();
var renderingOptions = { var renderingOptions = {
"zoom": this.calculateZoom_(), "zoom": zoom,
"height" : "auto", "height" : this.piskelController.getCurrentFrame().getHeight() * zoom,
"width" : "auto" "width" : this.piskelController.getCurrentFrame().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 () { ns.AnimatedPreviewController.prototype.init = function () {
@ -58,16 +59,14 @@
*/ */
ns.AnimatedPreviewController.prototype.calculateZoom_ = function () { ns.AnimatedPreviewController.prototype.calculateZoom_ = function () {
var previewSize = 200, var previewSize = 200,
framePixelHeight = this.piskelController.getCurrentFrame().getHeight(), hZoom = previewSize / this.piskelController.getCurrentFrame().getHeight(),
framePixelWidth = this.piskelController.getCurrentFrame().getWidth(); wZoom = previewSize / this.piskelController.getCurrentFrame().getWidth();
// TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
//return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth); return Math.min(hZoom, wZoom);
return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
}; };
ns.AnimatedPreviewController.prototype.updateDPI_ = function () { ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
this.dpi = this.calculateDPI_(); var zoom = this.calculateZoom_();
this.renderer.setDPI(this.dpi); this.renderer.setZoom(zoom);
}; };
})(); })();

184
zoom/js/controller/DrawingController.js
View File

@ -16,25 +16,25 @@
*/ */
this.container = container; this.container = container;
this.zoom = this.calculateZoom_();
this.xOffset = 0;
this.yOffset = 0;
// TODO(vincz): Store user prefs in a localstorage string ? // TODO(vincz): Store user prefs in a localstorage string ?
var renderingOptions = { var renderingOptions = {
"zoom": this.zoom, "zoom": this.calculateZoom_(),
"supportGridRendering" : true, "supportGridRendering" : true,
"height" : this.getContainerHeight_(), "height" : this.getContainerHeight_(),
"width" : this.getContainerWidth_(), "width" : this.getContainerWidth_(),
"xOffset" : this.xOffset, "xOffset" : 0,
"yOffset" : this.yOffset "yOffset" : 0
}; };
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["canvas-overlay"]); this.overlayRenderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["canvas-overlay"]);
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["drawing-canvas"]); this.renderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["drawing-canvas"]);
this.layersBelowRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["layers-canvas", "layers-below-canvas"]); this.layersRenderer = new pskl.rendering.layer.LayersRenderer(this.container, renderingOptions, piskelController);
this.layersAboveRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["layers-canvas", "layers-above-canvas"]);
this.compositeRenderer = new pskl.rendering.CompositeRenderer();
this.compositeRenderer
.add(this.overlayRenderer)
.add(this.renderer)
.add(this.layersRenderer);
// State of drawing controller: // State of drawing controller:
this.isClicked = false; this.isClicked = false;
@ -69,12 +69,12 @@
$.publish(Events.SECONDARY_COLOR_UPDATED, [color]); $.publish(Events.SECONDARY_COLOR_UPDATED, [color]);
}, this)); }, this));
$(window).resize($.proxy(this.startDPIUpdateTimer_, this)); $(window).resize($.proxy(this.startResizeTimer_, this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
$.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateZoom_, this)); $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChanged_, this));
this.updateZoom_(); this.centerColumnWrapperHorizontally_();
}; };
ns.DrawingController.prototype.initMouseBehavior = function() { ns.DrawingController.prototype.initMouseBehavior = function() {
@ -82,6 +82,7 @@
this.container.mousedown($.proxy(this.onMousedown_, this)); this.container.mousedown($.proxy(this.onMousedown_, this));
this.container.mousemove($.proxy(this.onMousemove_, this)); this.container.mousemove($.proxy(this.onMousemove_, this));
this.container.on('mousewheel', $.proxy(this.onMousewheel_, this)); this.container.on('mousewheel', $.proxy(this.onMousewheel_, this));
this.container.on('wheel', $.proxy(this.onMousewheel_, this));
body.mouseup($.proxy(this.onMouseup_, this)); body.mouseup($.proxy(this.onMouseup_, this));
@ -89,11 +90,15 @@
body.contextmenu(this.onCanvasContextMenu_); body.contextmenu(this.onCanvasContextMenu_);
}; };
ns.DrawingController.prototype.startDPIUpdateTimer_ = function () { ns.DrawingController.prototype.startResizeTimer_ = function () {
if (this.zoomUpdateTimer) { if (this.resizeTimer) {
window.clearInterval(this.zoomUpdateTimer); window.clearInterval(this.resizeTimer);
} }
this.zoomUpdateTimer = window.setTimeout($.proxy(this.updateZoom_, this), 200); this.resizeTimer = window.setTimeout($.proxy(this.afterWindowResize_, this), 200);
},
ns.DrawingController.prototype.afterWindowResize_ = function () {
this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
}, },
/** /**
@ -101,7 +106,7 @@
*/ */
ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) { ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
if(settingsName == pskl.UserSettings.SHOW_GRID) { if(settingsName == pskl.UserSettings.SHOW_GRID) {
this.updateZoom_(); console.warn('DrawingController:onUserSettingsChange_ not implemented !');
} }
}, },
@ -116,10 +121,11 @@
$.publish(Events.CANVAS_RIGHT_CLICKED); $.publish(Events.CANVAS_RIGHT_CLICKED);
} }
var coords = this.getSpriteCoordinates(event); var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
this.currentToolBehavior.applyToolAt( this.currentToolBehavior.applyToolAt(
coords.col, coords.row, coords.x,
coords.y,
this.getCurrentColor_(), this.getCurrentColor_(),
this.piskelController.getCurrentFrame(), this.piskelController.getCurrentFrame(),
this.overlayFrame, this.overlayFrame,
@ -135,12 +141,14 @@
ns.DrawingController.prototype.onMousemove_ = function (event) { ns.DrawingController.prototype.onMousemove_ = function (event) {
var currentTime = new Date().getTime(); var currentTime = new Date().getTime();
// Throttling of the mousemove event: // Throttling of the mousemove event:
if ((currentTime - this.previousMousemoveTime) > 40 ) { if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) {
var coords = this.getSpriteCoordinates(event); var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
if (this.isClicked) { if (this.isClicked) {
this.currentToolBehavior.moveToolAt( this.currentToolBehavior.moveToolAt(
coords.col, coords.row, coords.x,
coords.y,
this.getCurrentColor_(), this.getCurrentColor_(),
this.piskelController.getCurrentFrame(), this.piskelController.getCurrentFrame(),
this.overlayFrame, this.overlayFrame,
@ -154,7 +162,8 @@
} else { } else {
this.currentToolBehavior.moveUnactiveToolAt( this.currentToolBehavior.moveUnactiveToolAt(
coords.col, coords.row, coords.x,
coords.y,
this.getCurrentColor_(), this.getCurrentColor_(),
this.piskelController.getCurrentFrame(), this.piskelController.getCurrentFrame(),
this.overlayFrame, this.overlayFrame,
@ -167,12 +176,14 @@
ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) { ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) {
var event = jQueryEvent.originalEvent; var event = jQueryEvent.originalEvent;
var delta = event.wheelDeltaY; var delta = event.wheelDeltaY || (-2 * event.deltaY);
var currentZoom = this.renderer.getZoom();
if (delta > 0) { if (delta > 0) {
this.setZoom(this.zoom + 1); this.compositeRenderer.setZoom(currentZoom + 1);
} else if (delta < 0) { } else if (delta < 0) {
this.setZoom(this.zoom - 1); this.compositeRenderer.setZoom(currentZoom - 1);
} }
pskl.app.minimapController.onDrawingControllerMove_();
}; };
/** /**
@ -188,10 +199,11 @@
this.isClicked = false; this.isClicked = false;
this.isRightClicked = 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); //console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
this.currentToolBehavior.releaseToolAt( this.currentToolBehavior.releaseToolAt(
coords.col, coords.row, coords.x,
coords.y,
this.getCurrentColor_(), this.getCurrentColor_(),
this.piskelController.getCurrentFrame(), this.piskelController.getCurrentFrame(),
this.overlayFrame, this.overlayFrame,
@ -215,23 +227,12 @@
return evtInfo; 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 * @private
*/ */
ns.DrawingController.prototype.getSpriteCoordinates = function(event) { ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY); return this.renderer.getCoordinates(event.clientX, event.clientY);
return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
}; };
/** /**
@ -259,66 +260,14 @@
}; };
ns.DrawingController.prototype.render = function () { ns.DrawingController.prototype.render = function () {
this.renderLayers(); var currentFrame = this.piskelController.getCurrentFrame();
this.renderFrame(); if (!currentFrame.isSameSize(this.overlayFrame)) {
this.renderOverlay(); this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
};
ns.DrawingController.prototype.renderFrame = function () {
var frame = this.piskelController.getCurrentFrame();
var serializedFrame = [this.zoom, this.xOffset, this.yOffset, frame.serialize()].join('-');
if (this.serializedFrame != serializedFrame) {
if (!frame.isSameSize(this.overlayFrame)) {
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
}
this.serializedFrame = serializedFrame;
this.renderer.render(frame);
} }
};
ns.DrawingController.prototype.renderOverlay = function () { this.layersRenderer.render();
var serializedOverlay = [this.zoom, this.xOffset, this.yOffset, this.overlayFrame.serialize()].join('-'); this.renderer.render(currentFrame);
if (this.serializedOverlay != serializedOverlay) { this.overlayRenderer.render(this.overlayFrame);
this.serializedOverlay = serializedOverlay;
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.zoom,
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);
}; };
/** /**
@ -349,39 +298,24 @@
ns.DrawingController.prototype.getContainerWidth_ = function () { ns.DrawingController.prototype.getContainerWidth_ = function () {
return this.calculateZoom_() * this.piskelController.getCurrentFrame().getWidth(); return this.calculateZoom_() * this.piskelController.getCurrentFrame().getWidth();
}; };
/** /**
* @private * @private
*/ */
ns.DrawingController.prototype.updateZoom_ = function() { ns.DrawingController.prototype.centerColumnWrapperHorizontally_ = function() {
this.setZoom(this.calculateZoom_()); var containerHeight = this.getContainerHeight_();
var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - containerHeight) / 2);
var currentFrameHeight = this.piskelController.getCurrentFrame().getHeight();
var canvasHeight = currentFrameHeight * this.zoom;
if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight;
}
var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - canvasHeight) / 2);
$('#column-wrapper').css({ $('#column-wrapper').css({
'top': verticalGapInPixel + 'px', 'top': verticalGapInPixel + 'px'
'height': canvasHeight + 'px'
}); });
}; };
ns.DrawingController.prototype.setZoom = function (zoom) { ns.DrawingController.prototype.getRenderer = function () {
this.zoom = zoom; return this.compositeRenderer;
this.overlayRenderer.setZoom(this.zoom);
this.renderer.setZoom(this.zoom);
this.layersAboveRenderer.setZoom(this.zoom);
this.layersBelowRenderer.setZoom(this.zoom);
}; };
ns.DrawingController.prototype.moveOffset = function (xOffset, yOffset) { ns.DrawingController.prototype.setOffset = function (x, y) {
this.xOffset = xOffset; this.compositeRenderer.setOffset(x, y);
this.yOffset = yOffset; pskl.app.minimapController.onDrawingControllerMove_();
this.overlayRenderer.setDisplayOffset(xOffset, yOffset);
this.renderer.setDisplayOffset(xOffset, yOffset);
this.layersAboveRenderer.setDisplayOffset(xOffset, yOffset);
this.layersBelowRenderer.setDisplayOffset(xOffset, yOffset);
}; };
})(); })();

85
zoom/js/controller/MinimapController.js Normal file
View File

@ -0,0 +1,85 @@
(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 () {
this.cropFrame = document.createElement('DIV');
this.cropFrame.className = 'minimap-crop-frame';
this.cropFrame.style.display = 'none';
$(this.container).mousedown(this.onMinimapMousedown_.bind(this));
$(this.container).mousemove(this.onMinimapMousemove_.bind(this));
$(this.container).mouseup(this.onMinimapMouseup_.bind(this));
$(this.container).append(this.cropFrame);
};
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;
};
})();

6
zoom/js/controller/PreviewFilmController.js
View File

@ -155,10 +155,10 @@
// is to make this update function (#createPreviewTile) less aggressive. // is to make this update function (#createPreviewTile) less aggressive.
var renderingOptions = { var renderingOptions = {
"zoom" : this.zoom, "zoom" : this.zoom,
"height" : "auto", "height" : this.piskelController.getCurrentFrame().getHeight() * this.zoom,
"width" : "auto" "width" : this.piskelController.getCurrentFrame().getWidth() * this.zoom
}; };
var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, ["tile-view"]); var currentFrameRenderer = new pskl.rendering.frame.FrameRenderer($(canvasContainer), renderingOptions, ["tile-view"]);
currentFrameRenderer.render(currentFrame); currentFrameRenderer.render(currentFrame);
previewTileRoot.appendChild(canvasContainer); previewTileRoot.appendChild(canvasContainer);

33
zoom/js/controller/settings/ApplicationSettingsController.js
View File

@ -18,21 +18,26 @@
$('#show-grid').prop('checked', show_grid); $('#show-grid').prop('checked', show_grid);
// Handle grid display changes: // Handle grid display changes:
$('#show-grid').change($.proxy(function(evt) { $('#show-grid').change(this.onShowGridClick.bind(this));
var checked = $('#show-grid').prop('checked');
pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
}, this));
// Handle canvas background changes: // Handle canvas background changes:
$('#background-picker-wrapper').click(function(evt) { $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
var target = $(evt.target).closest('.background-picker');
if (target.length) {
var backgroundClass = target.data('background-class');
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
$('.background-picker').removeClass('selected');
target.addClass('selected');
}
});
}; };
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');
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
$('.background-picker').removeClass('selected');
target.addClass('selected');
}
};
})(); })();

22
zoom/js/rendering/AbstractRenderer.js Normal file
View File

@ -0,0 +1,22 @@
(function () {
var ns = $.namespace('pskl.rendering');
ns.AbstractRenderer = function () {};
ns.AbstractRenderer.prototype.clear = function () {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.getCoordinates = function (x, y) {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.setGridEnabled = function (b) {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.isGridEnabled = function () {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.setZoom = function (zoom) {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.getZoom = function () {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.moveOffset = function (x, y) {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.setOffset = function (x, y) {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.getOffset = function () {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.setDisplaySize = function (w, h) {throw 'abstract method should be implemented';};
ns.AbstractRenderer.prototype.getDisplaySize = function () {throw 'abstract method should be implemented';};
})();

75
zoom/js/rendering/CompositeRenderer.js Normal file
View 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';
}
};
})();

26
zoom/js/rendering/frame/CachedFrameRenderer.js Normal file
View File

@ -0,0 +1,26 @@
(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(), offset.x, offset.y, size.width, size.height, frame.serialize()].join('-');
if (this.serializedFrame != serializedFrame) {
this.serializedFrame = serializedFrame;
this.superclass.render.call(this, frame);
}
};
})();

243
zoom/js/rendering/frame/FrameRenderer.js Normal file
View File

@ -0,0 +1,243 @@
(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.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.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0;
this.canvasConfigDirty = true;
};
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 + this.gridStrokeWidth;
// apply frame offset
x = x + this.offset.x * cellSize;
y = y + this.offset.y * cellSize;
return {
x : (x / cellSize) | 0,
y : (y / cellSize) | 0
};
};
/**
* @private
*/
ns.FrameRenderer.prototype.renderFrame_ = function (frame) {
if (!this.canvas) {
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();
// zoom < 1
context.fillStyle = "#aaa";
// zoom < 1
context.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
context.translate(this.margin.x, this.margin.y);
context.scale(this.zoom, this.zoom);
context.translate(-this.offset.x, -this.offset.y);
// zoom < 1
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.drawImage(this.canvas, 0, 0);
context.restore();
};
})();

58
zoom/js/rendering/layer/LayersRenderer.js Normal file
View File

@ -0,0 +1,58 @@
(function () {
var ns = $.namespace('pskl.rendering.layer');
ns.LayersRenderer = function (container, renderingOptions, piskelController) {
pskl.rendering.CompositeRenderer.call(this);
this.piskelController = piskelController;
this.belowRenderer = new pskl.rendering.frame.CachedFrameRenderer(container, renderingOptions, ["layers-canvas", "layers-below-canvas"]);
this.aboveRenderer = new pskl.rendering.frame.CachedFrameRenderer(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 layers = this.piskelController.getLayers();
var currentFrameIndex = this.piskelController.currentFrameIndex;
var currentLayerIndex = this.piskelController.currentLayerIndex;
var serializedRendering = [
this.getZoom(),
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);
};
})();

73
zoom/js/utils/FrameUtils.js
View File

@ -1,6 +1,6 @@
(function () { (function () {
var ns = $.namespace('pskl.utils'); var ns = $.namespace('pskl.utils');
var colorCache = {};
ns.FrameUtils = { ns.FrameUtils = {
merge : function (frames) { merge : function (frames) {
var merged = null; var merged = null;
@ -20,6 +20,77 @@
frameA.setPixel(col, row, p); frameA.setPixel(col, row, p);
} }
}); });
},
/**
* 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;
} }
}; };
})(); })();

9
zoom/js/utils/Math.js Normal file
View 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);
}
};
})();

8
zoom/piskel-script-list.js
View File

@ -14,6 +14,7 @@ exports.scripts = [
// Libraries // Libraries
"js/utils/core.js", "js/utils/core.js",
"js/utils/CanvasUtils.js", "js/utils/CanvasUtils.js",
"js/utils/Math.js",
"js/utils/FrameUtils.js", "js/utils/FrameUtils.js",
"js/utils/PixelUtils.js", "js/utils/PixelUtils.js",
"js/utils/Serializer.js", "js/utils/Serializer.js",
@ -36,8 +37,12 @@ exports.scripts = [
"js/selection/ShapeSelection.js", "js/selection/ShapeSelection.js",
// Rendering // 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/CanvasRenderer.js",
"js/rendering/FrameRenderer.js",
"js/rendering/SpritesheetRenderer.js", "js/rendering/SpritesheetRenderer.js",
// Controllers // Controllers
@ -46,6 +51,7 @@ exports.scripts = [
"js/controller/PreviewFilmController.js", "js/controller/PreviewFilmController.js",
"js/controller/LayersListController.js", "js/controller/LayersListController.js",
"js/controller/AnimatedPreviewController.js", "js/controller/AnimatedPreviewController.js",
"js/controller/MinimapController.js",
"js/controller/ToolController.js", "js/controller/ToolController.js",
"js/controller/PaletteController.js", "js/controller/PaletteController.js",
"js/controller/NotificationController.js", "js/controller/NotificationController.js",