mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Feature : display cursor coordinates
- new controller CursorCoordinatesController - added div in right column (bottom:0) - 3 new events : CURSOR_MOVED, DRAG_START, DRAG_END - modified tools to fire events when necessary The cursor coordinates are displayed when the mouse is hovering the drawing area. When the mouse leaves the area, the indication disappears. If the user is using a tool that involves dragging (selection, rectangle, circle), the indicator displays the original coordinates (captured during drag start) and the current coordinates.
This commit is contained in:
parent
abd5ac5959
commit
dc729ee80b
|
@ -124,6 +124,11 @@
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.settings-description {
|
||||||
|
margin : 0 0 10px 0;
|
||||||
|
display : inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.settings-form-section {
|
.settings-form-section {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -226,4 +226,34 @@ body {
|
||||||
|
|
||||||
.image-link {
|
.image-link {
|
||||||
color : gold;
|
color : gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-top,
|
||||||
|
.pull-right,
|
||||||
|
.pull-bottom,
|
||||||
|
.pull-left {
|
||||||
|
position:absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-top {
|
||||||
|
top:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-right {
|
||||||
|
right:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-bottom {
|
||||||
|
bottom:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-left {
|
||||||
|
left:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-coordinates {
|
||||||
|
color:#888;
|
||||||
|
font-size:12px;
|
||||||
|
font-weight:bold;
|
||||||
|
font-family:Courier;
|
||||||
}
|
}
|
|
@ -41,6 +41,7 @@
|
||||||
<iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
<iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||||
<iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
<iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||||
<iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
<iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||||
|
<div class="pull-bottom cursor-coordinates"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -8,6 +8,10 @@ var Events = {
|
||||||
PRIMARY_COLOR_SELECTED : 'PRIMARY_COLOR_SELECTED',
|
PRIMARY_COLOR_SELECTED : 'PRIMARY_COLOR_SELECTED',
|
||||||
SECONDARY_COLOR_SELECTED : 'SECONDARY_COLOR_SELECTED',
|
SECONDARY_COLOR_SELECTED : 'SECONDARY_COLOR_SELECTED',
|
||||||
|
|
||||||
|
CURSOR_MOVED : 'CURSOR_MOVED',
|
||||||
|
DRAG_START : 'DRAG_START',
|
||||||
|
DRAG_END : 'DRAG_END',
|
||||||
|
|
||||||
DIALOG_DISPLAY : 'DIALOG_DISPLAY',
|
DIALOG_DISPLAY : 'DIALOG_DISPLAY',
|
||||||
DIALOG_HIDE : 'DIALOG_HIDE',
|
DIALOG_HIDE : 'DIALOG_HIDE',
|
||||||
|
|
||||||
|
|
|
@ -39,6 +39,9 @@
|
||||||
this.palettesListController = new pskl.controller.PalettesListController();
|
this.palettesListController = new pskl.controller.PalettesListController();
|
||||||
this.palettesListController.init();
|
this.palettesListController.init();
|
||||||
|
|
||||||
|
this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController);
|
||||||
|
this.cursorCoordinatesController.init();
|
||||||
|
|
||||||
this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
|
this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
|
||||||
this.drawingController.init();
|
this.drawingController.init();
|
||||||
|
|
||||||
|
|
43
src/js/controller/CursorCoordinatesController.js
Normal file
43
src/js/controller/CursorCoordinatesController.js
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
(function () {
|
||||||
|
var ns = $.namespace('pskl.controller');
|
||||||
|
|
||||||
|
ns.CursorCoordinatesController = function (piskelController) {
|
||||||
|
this.piskelController = piskelController;
|
||||||
|
this.dragOrigin = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.CursorCoordinatesController.prototype.init = function () {
|
||||||
|
this.coordinatesContainer = document.querySelector('.cursor-coordinates');
|
||||||
|
$.subscribe(Events.CURSOR_MOVED, this.onCursorMoved_.bind(this));
|
||||||
|
$.subscribe(Events.DRAG_START, this.onDragStart_.bind(this));
|
||||||
|
$.subscribe(Events.DRAG_END, this.onDragEnd_.bind(this));
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.CursorCoordinatesController.prototype.onCursorMoved_ = function (event, x, y) {
|
||||||
|
var currentFrame = this.piskelController.getCurrentFrame();
|
||||||
|
var html = '';
|
||||||
|
if (this.dragOrigin) {
|
||||||
|
html += this.dragOrigin.x + ':' + this.dragOrigin.y + ' to ';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentFrame.containsPixel(x, y)) {
|
||||||
|
html += x + ':' + y;
|
||||||
|
if (this.dragOrigin) {
|
||||||
|
var dX = Math.abs(x-this.dragOrigin.x) + 1;
|
||||||
|
var dY = Math.abs(y-this.dragOrigin.y) + 1;
|
||||||
|
html += ' (' + dX + 'x' + dY +')';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.coordinatesContainer.innerHTML = html;
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.CursorCoordinatesController.prototype.onDragStart_ = function (event, x, y) {
|
||||||
|
this.dragOrigin = {x:x, y:y};
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.CursorCoordinatesController.prototype.onDragEnd_ = function (event, x, y) {
|
||||||
|
this.dragOrigin = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
|
@ -153,6 +153,7 @@
|
||||||
|
|
||||||
if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) {
|
if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) {
|
||||||
var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
|
var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
|
||||||
|
var currentFrame = this.piskelController.getCurrentFrame();
|
||||||
|
|
||||||
if (this.isClicked) {
|
if (this.isClicked) {
|
||||||
// Warning : do not call setCurrentButton here
|
// Warning : do not call setCurrentButton here
|
||||||
|
@ -161,7 +162,7 @@
|
||||||
coords.x,
|
coords.x,
|
||||||
coords.y,
|
coords.y,
|
||||||
this.getCurrentColor_(event),
|
this.getCurrentColor_(event),
|
||||||
this.piskelController.getCurrentFrame(),
|
currentFrame,
|
||||||
this.overlayFrame,
|
this.overlayFrame,
|
||||||
event
|
event
|
||||||
);
|
);
|
||||||
|
@ -176,7 +177,7 @@
|
||||||
coords.x,
|
coords.x,
|
||||||
coords.y,
|
coords.y,
|
||||||
this.getCurrentColor_(event),
|
this.getCurrentColor_(event),
|
||||||
this.piskelController.getCurrentFrame(),
|
currentFrame,
|
||||||
this.overlayFrame,
|
this.overlayFrame,
|
||||||
event
|
event
|
||||||
);
|
);
|
||||||
|
|
|
@ -10,9 +10,13 @@
|
||||||
|
|
||||||
ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {};
|
ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {};
|
||||||
|
|
||||||
ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {};
|
ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
$.publish(Events.CURSOR_MOVED, [col, row]);
|
||||||
|
};
|
||||||
|
|
||||||
ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
|
ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
$.publish(Events.CURSOR_MOVED, [col, row]);
|
||||||
|
|
||||||
if (overlay.containsPixel(col, row)) {
|
if (overlay.containsPixel(col, row)) {
|
||||||
if (!isNaN(this.highlightedPixelCol) &&
|
if (!isNaN(this.highlightedPixelCol) &&
|
||||||
!isNaN(this.highlightedPixelRow) &&
|
!isNaN(this.highlightedPixelRow) &&
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
$.publish(Events.CURSOR_MOVED, [col, row]);
|
||||||
var colDiff = col - this.startCol, rowDiff = row - this.startRow;
|
var colDiff = col - this.startCol, rowDiff = row - this.startRow;
|
||||||
this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
|
this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
|
||||||
};
|
};
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.ShapeTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
|
ns.ShapeTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
$.publish(Events.DRAG_START, [col, row]);
|
||||||
this.startCol = col;
|
this.startCol = col;
|
||||||
this.startRow = row;
|
this.startRow = row;
|
||||||
|
|
||||||
|
@ -24,12 +25,14 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.ShapeTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
ns.ShapeTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
var coords = this.getCoordinates_(col, row, event);
|
||||||
|
$.publish(Events.CURSOR_MOVED, [coords.col, coords.row]);
|
||||||
|
|
||||||
overlay.clear();
|
overlay.clear();
|
||||||
if(color == Constants.TRANSPARENT_COLOR) {
|
if(color == Constants.TRANSPARENT_COLOR) {
|
||||||
color = Constants.SELECTION_TRANSPARENT_COLOR;
|
color = Constants.SELECTION_TRANSPARENT_COLOR;
|
||||||
}
|
}
|
||||||
|
|
||||||
var coords = this.getCoordinates_(col, row, event);
|
|
||||||
// draw in overlay
|
// draw in overlay
|
||||||
this.draw_(coords.col, coords.row, color, overlay);
|
this.draw_(coords.col, coords.row, color, overlay);
|
||||||
};
|
};
|
||||||
|
@ -46,6 +49,7 @@
|
||||||
}
|
}
|
||||||
var coords = this.getCoordinates_(col, row, event);
|
var coords = this.getCoordinates_(col, row, event);
|
||||||
this.draw_(coords.col, coords.row, color, frame);
|
this.draw_(coords.col, coords.row, color, frame);
|
||||||
|
$.publish(Events.DRAG_END, [col, row]);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -28,7 +28,11 @@
|
||||||
this.previousRow = row;
|
this.previousRow = row;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @override
|
||||||
|
*/
|
||||||
ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
$.publish(Events.CURSOR_MOVED, [col, row]);
|
||||||
if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
|
if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
|
||||||
// The pen movement is too fast for the mousemove frequency, there is a gap between the
|
// The pen movement is too fast for the mousemove frequency, there is a gap between the
|
||||||
// current point and the previously drawn one.
|
// current point and the previously drawn one.
|
||||||
|
|
|
@ -37,6 +37,8 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
$.publish(Events.CURSOR_MOVED, [col, row]);
|
||||||
|
|
||||||
overlay.clear();
|
overlay.clear();
|
||||||
|
|
||||||
// When the user moussemove (before releasing), we dynamically compute the
|
// When the user moussemove (before releasing), we dynamically compute the
|
||||||
|
|
|
@ -48,12 +48,11 @@
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
$.publish(Events.CURSOR_MOVED, [col, row]);
|
||||||
if(this.mode == "select") {
|
if(this.mode == "select") {
|
||||||
|
|
||||||
this.onSelect_(col, row, color, frame, overlay);
|
this.onSelect_(col, row, color, frame, overlay);
|
||||||
}
|
}
|
||||||
else if(this.mode == "moveSelection") {
|
else if(this.mode == "moveSelection") {
|
||||||
|
|
||||||
this.onSelectionDrag_(col, row, color, frame, overlay);
|
this.onSelectionDrag_(col, row, color, frame, overlay);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -76,6 +75,7 @@
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
|
ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
$.publish(Events.CURSOR_MOVED, [col, row]);
|
||||||
if (overlay.containsPixel(col, row)) {
|
if (overlay.containsPixel(col, row)) {
|
||||||
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
|
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
|
||||||
// We're hovering the selection, show the move tool:
|
// We're hovering the selection, show the move tool:
|
||||||
|
|
|
@ -9,17 +9,18 @@
|
||||||
ns.RectangleSelect = function() {
|
ns.RectangleSelect = function() {
|
||||||
this.toolId = "tool-rectangle-select";
|
this.toolId = "tool-rectangle-select";
|
||||||
this.helpText = "Rectangle selection tool";
|
this.helpText = "Rectangle selection tool";
|
||||||
|
|
||||||
ns.BaseSelect.call(this);
|
ns.BaseSelect.call(this);
|
||||||
};
|
};
|
||||||
|
|
||||||
pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
|
pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @override
|
* @override
|
||||||
*/
|
*/
|
||||||
ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
|
ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
|
||||||
|
$.publish(Events.DRAG_START, [col, row]);
|
||||||
// Drawing the first point of the rectangle in the fake overlay canvas:
|
// Drawing the first point of the rectangle in the fake overlay canvas:
|
||||||
overlay.setPixel(col, row, color);
|
overlay.setPixel(col, row, color);
|
||||||
};
|
};
|
||||||
|
@ -47,6 +48,7 @@
|
||||||
*/
|
*/
|
||||||
ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
|
ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
|
||||||
this.onSelect_(col, row, color, frame, overlay);
|
this.onSelect_(col, row, color, frame, overlay);
|
||||||
|
$.publish(Events.DRAG_END, [col, row]);
|
||||||
};
|
};
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -65,6 +65,7 @@
|
||||||
|
|
||||||
// Controllers
|
// Controllers
|
||||||
"js/controller/PiskelController.js",
|
"js/controller/PiskelController.js",
|
||||||
|
"js/controller/CursorCoordinatesController.js",
|
||||||
"js/controller/DrawingController.js",
|
"js/controller/DrawingController.js",
|
||||||
"js/controller/PreviewFilmController.js",
|
"js/controller/PreviewFilmController.js",
|
||||||
"js/controller/LayersListController.js",
|
"js/controller/LayersListController.js",
|
||||||
|
|
|
@ -15,8 +15,8 @@
|
||||||
Export Spritesheet as ZIP
|
Export Spritesheet as ZIP
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-item">
|
<div class="settings-item">
|
||||||
<span>A ZIP archive will be created with one PNG file per frame.</span>
|
<span class="settings-description">A ZIP archive will be created with one PNG file per frame.</span>
|
||||||
<div style="margin-top:10px;">
|
<div>
|
||||||
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
|
<button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user