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

Enhancement : display canvas size next to cursor coords

Browse Source
This commit is contained in:
jdescottes 2014-04-12 10:14:57 +02:00
parent ee3285089a
commit 3abf0897d5
2 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/style.css
View File

@ -60,6 +60,8 @@ body {
.right-column { .right-column {
vertical-align: top; vertical-align: top;
margin-left: 10px; margin-left: 10px;
height: 100%;
position: relative;
} }
.drawing-canvas-container { .drawing-canvas-container {

43
src/js/controller/CursorCoordinatesController.js
View File

@ -3,41 +3,62 @@
ns.CursorCoordinatesController = function (piskelController) { ns.CursorCoordinatesController = function (piskelController) {
this.piskelController = piskelController; this.piskelController = piskelController;
this.dragOrigin = null; this.origin = null;
this.coordinates = {x:-1,y:-1};
}; };
ns.CursorCoordinatesController.prototype.init = function () { ns.CursorCoordinatesController.prototype.init = function () {
this.coordinatesContainer = document.querySelector('.cursor-coordinates'); this.coordinatesContainer = document.querySelector('.cursor-coordinates');
$.subscribe(Events.CURSOR_MOVED, this.onCursorMoved_.bind(this)); $.subscribe(Events.CURSOR_MOVED, this.onCursorMoved_.bind(this));
$.subscribe(Events.DRAG_START, this.onDragStart_.bind(this)); $.subscribe(Events.DRAG_START, this.onDragStart_.bind(this));
$.subscribe(Events.DRAG_END, this.onDragEnd_.bind(this)); $.subscribe(Events.DRAG_END, this.onDragEnd_.bind(this));
$.subscribe(Events.FRAME_SIZE_CHANGED, this.redraw.bind(this));
this.redraw();
}; };
ns.CursorCoordinatesController.prototype.onCursorMoved_ = function (event, x, y) { ns.CursorCoordinatesController.prototype.redraw = function () {
var currentFrame = this.piskelController.getCurrentFrame();
var html = ''; var html = '';
if (this.dragOrigin) { if (this.origin) {
html += this.dragOrigin.x + ':' + this.dragOrigin.y + ' to '; html += this.origin.x + ':' + this.origin.y + ' to ';
} }
var x = this.coordinates.x;
var y = this.coordinates.y;
var currentFrame = this.piskelController.getCurrentFrame();
if (currentFrame.containsPixel(x, y)) { if (currentFrame.containsPixel(x, y)) {
html += x + ':' + y; html += x + ':' + y;
if (this.dragOrigin) { if (this.origin) {
var dX = Math.abs(x-this.dragOrigin.x) + 1; var dX = Math.abs(x-this.origin.x) + 1;
var dY = Math.abs(y-this.dragOrigin.y) + 1; var dY = Math.abs(y-this.origin.y) + 1;
html += ' (' + dX + 'x' + dY +')'; html += ' (' + dX + 'x' + dY +')';
} }
} }
this.coordinatesContainer.innerHTML = html; this.coordinatesContainer.innerHTML = this.getFrameSizeHTML_() + html;
};
ns.CursorCoordinatesController.prototype.getFrameSizeHTML_ = function () {
var w = this.piskelController.getWidth();
var h = this.piskelController.getHeight();
return '['+w+'x'+h+'] ';
};
ns.CursorCoordinatesController.prototype.onCursorMoved_ = function (event, x, y) {
this.coordinates = {x:x, y:y};
this.redraw();
}; };
ns.CursorCoordinatesController.prototype.onDragStart_ = function (event, x, y) { ns.CursorCoordinatesController.prototype.onDragStart_ = function (event, x, y) {
this.dragOrigin = {x:x, y:y}; this.origin = {x:x, y:y};
this.redraw();
}; };
ns.CursorCoordinatesController.prototype.onDragEnd_ = function (event, x, y) { ns.CursorCoordinatesController.prototype.onDragEnd_ = function (event, x, y) {
this.dragOrigin = null; this.origin = null;
this.redraw();
}; };
})(); })();