mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
533 lines
18 KiB
JavaScript
533 lines
18 KiB
JavaScript
/**
|
|
* @require Constants
|
|
* @require Events
|
|
*/
|
|
$.namespace("pskl");
|
|
|
|
(function () {
|
|
var frameSheet,
|
|
|
|
// Constants:
|
|
DEFAULT_PEN_COLOR = '#000000',
|
|
PISKEL_SERVICE_URL = 'http://2.piskel-app.appspot.com',
|
|
|
|
// Configuration:
|
|
// Canvas size in pixel size (not dpi related)
|
|
framePixelWidth = 32,
|
|
framePixelHeight = 32,
|
|
|
|
// Scaling factors for a given frameSheet rendering:
|
|
// Main drawing area:
|
|
drawingCanvasDpi = 20,
|
|
// Canvas previous in the slideshow:
|
|
previewTileCanvasDpi = 4,
|
|
// Ainmated canvas preview:
|
|
previewAnimationCanvasDpi = 8,
|
|
|
|
// DOM references:
|
|
drawingAreaContainer,
|
|
drawingAreaCanvas,
|
|
previewCanvas,
|
|
paletteEl,
|
|
|
|
// States:
|
|
isClicked = false,
|
|
isRightClicked = false,
|
|
activeFrameIndex = -1,
|
|
animIndex = 0,
|
|
penColor = DEFAULT_PEN_COLOR,
|
|
paletteColors = [],
|
|
currentFrame = null;
|
|
currentToolBehavior = null,
|
|
|
|
//utility
|
|
_normalizeColor = function (color) {
|
|
if(color == undefined || color == Constants.TRANSPARENT_COLOR || color.indexOf("#") == 0) {
|
|
return color;
|
|
} else {
|
|
return "#" + color;
|
|
}
|
|
},
|
|
|
|
// setTimeout/setInterval references:
|
|
localStorageThrottler = null
|
|
;
|
|
|
|
|
|
var piskel = {
|
|
init : function () {
|
|
frameSheet = FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
|
|
frameSheet.addEmptyFrame();
|
|
this.setActiveFrame(0);
|
|
|
|
var frameId = this.getFrameIdFromUrl();
|
|
if (frameId) {
|
|
this.displayMessage("Loading animation with id : [" + frameId + "]");
|
|
this.loadFramesheetFromService(frameId);
|
|
} else {
|
|
this.finishInit();
|
|
}
|
|
},
|
|
|
|
finishInit : function () {
|
|
|
|
$.subscribe(Events.TOOL_SELECTED, function(evt, toolBehavior) {
|
|
console.log("Tool selected: ", toolBehavior);
|
|
currentToolBehavior = toolBehavior;
|
|
});
|
|
|
|
this.initPalette();
|
|
this.initDrawingArea();
|
|
this.initPreviewSlideshow();
|
|
this.initAnimationPreview();
|
|
this.initColorPicker();
|
|
this.initLocalStorageBackup();
|
|
pskl.ToolSelector.init();
|
|
|
|
this.startAnimation();
|
|
},
|
|
|
|
getFrameIdFromUrl : function() {
|
|
var href = window.location.href;
|
|
if (href.indexOf('frameId=') != -1) {
|
|
return href.substring(href.indexOf('frameId=')+8);
|
|
}
|
|
},
|
|
|
|
loadFramesheetFromService : function (frameId) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
|
|
xhr.responseType = 'text';
|
|
|
|
xhr.onload = function(e) {
|
|
frameSheet.deserialize(this.responseText);
|
|
piskel.removeMessage();
|
|
piskel.finishInit();
|
|
};
|
|
|
|
xhr.onerror = function () {
|
|
piskel.removeMessage();
|
|
piskel.finishInit();
|
|
};
|
|
|
|
xhr.send();
|
|
},
|
|
|
|
initLocalStorageBackup: function() {
|
|
if(window.localStorage && window.localStorage['snapShot']) {
|
|
var reloadLink = "<a href='#' onclick='piskel.restoreFromLocalStorage()'>reload</a>";
|
|
var discardLink = "<a href='#' onclick='piskel.cleanLocalStorage()'>discard</a>";
|
|
this.displayMessage("Non saved version found. " + reloadLink + " or " + discardLink);
|
|
}
|
|
},
|
|
|
|
displayMessage : function (content) {
|
|
var message = document.createElement('div');
|
|
message.id = "user-message";
|
|
message.className = "user-message";
|
|
message.innerHTML = content;
|
|
message.onclick = this.removeMessage;
|
|
document.body.appendChild(message);
|
|
},
|
|
|
|
removeMessage : function () {
|
|
var message = $("user-message");
|
|
if (message) {
|
|
message.parentNode.removeChild(message);
|
|
}
|
|
},
|
|
|
|
persistToLocalStorageRequest: function() {
|
|
// Persist to localStorage when drawing. We throttle localStorage accesses
|
|
// for high frequency drawing (eg mousemove).
|
|
if(localStorageThrottler == null) {
|
|
localStorageThrottler = window.setTimeout(function() {
|
|
piskel.persistToLocalStorage();
|
|
localStorageThrottler = null;
|
|
}, 1000);
|
|
}
|
|
},
|
|
|
|
persistToLocalStorage: function() {
|
|
console.log('persited')
|
|
window.localStorage['snapShot'] = frameSheet.serialize();
|
|
},
|
|
|
|
restoreFromLocalStorage: function() {
|
|
frameSheet.deserialize(window.localStorage['snapShot']);
|
|
this.setActiveFrameAndRedraw(0);
|
|
},
|
|
|
|
cleanLocalStorage: function() {
|
|
delete window.localStorage['snapShot'];
|
|
},
|
|
|
|
setActiveFrame: function(index) {
|
|
activeFrameIndex = index;
|
|
currentFrame = frameSheet.getFrameByIndex(activeFrameIndex)
|
|
},
|
|
|
|
setActiveFrameAndRedraw: function(index) {
|
|
this.setActiveFrame(index);
|
|
|
|
// Update drawing canvas:
|
|
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
|
|
|
|
// Update slideshow:
|
|
this.createPreviews();
|
|
|
|
// Update animation preview:
|
|
animIndex = 0;
|
|
},
|
|
|
|
getActiveFrameIndex: function() {
|
|
if(-1 == activeFrameIndex) {
|
|
throw "Bad active frane initialization."
|
|
}
|
|
return activeFrameIndex;
|
|
},
|
|
|
|
initColorPicker: function() {
|
|
this.colorPicker = $('#color-picker');
|
|
this.colorPicker.val(DEFAULT_PEN_COLOR);
|
|
this.colorPicker.change(this.onPickerChange.bind(this));
|
|
},
|
|
|
|
onPickerChange : function(evt) {
|
|
var inputPicker = $(evt.target);
|
|
penColor = _normalizeColor(inputPicker.val());
|
|
},
|
|
|
|
initPalette : function (color) {
|
|
paletteEl = $('#palette')[0];
|
|
},
|
|
|
|
addColorToPalette : function (color) {
|
|
if (color && color != Constants.TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) {
|
|
var colorEl = document.createElement("li");
|
|
colorEl.className = "palette-color";
|
|
colorEl.setAttribute("data-color", color);
|
|
colorEl.setAttribute("title", color);
|
|
colorEl.style.background = color;
|
|
paletteEl.appendChild(colorEl);
|
|
paletteColors.push(color);
|
|
}
|
|
},
|
|
|
|
initDrawingArea : function() {
|
|
drawingAreaContainer = $('#drawing-canvas-container')[0];
|
|
|
|
drawingAreaCanvas = document.createElement("canvas");
|
|
drawingAreaCanvas.className = 'canvas';
|
|
drawingAreaCanvas.setAttribute('width', '' + framePixelWidth * drawingCanvasDpi);
|
|
drawingAreaCanvas.setAttribute('height', '' + framePixelHeight * drawingCanvasDpi);
|
|
|
|
drawingAreaContainer.setAttribute('style',
|
|
'width:' + framePixelWidth * drawingCanvasDpi + 'px; height:' + framePixelHeight * drawingCanvasDpi + 'px;');
|
|
|
|
drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(event)');
|
|
drawingAreaContainer.appendChild(drawingAreaCanvas);
|
|
|
|
var body = document.getElementsByTagName('body')[0];
|
|
body.setAttribute('onmouseup', 'piskel.onDocumentBodyMouseup(event)');
|
|
drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
|
|
drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
|
|
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
|
|
},
|
|
|
|
initPreviewSlideshow: function() {
|
|
var addFrameButton = $('#add-frame-button')[0];
|
|
addFrameButton.addEventListener('mousedown', function() {
|
|
frameSheet.addEmptyFrame();
|
|
piskel.setActiveFrameAndRedraw(frameSheet.getFrameCount() - 1);
|
|
});
|
|
this.createPreviews();
|
|
},
|
|
|
|
initAnimationPreview : function() {
|
|
|
|
var previewAnimationContainer = $('#preview-canvas-container')[0];
|
|
previewCanvas = document.createElement('canvas');
|
|
previewCanvas.className = 'canvas';
|
|
previewAnimationContainer.setAttribute('style',
|
|
'width:' + framePixelWidth * previewAnimationCanvasDpi + 'px; height:' + framePixelHeight * previewAnimationCanvasDpi + 'px;');
|
|
previewAnimationContainer.appendChild(previewCanvas);
|
|
previewCanvas.setAttribute('width', framePixelWidth * previewAnimationCanvasDpi);
|
|
previewCanvas.setAttribute('height', framePixelHeight * previewAnimationCanvasDpi);
|
|
},
|
|
|
|
startAnimation : function () {
|
|
var scope = this;
|
|
var animFPSTuner = $("#preview-fps")[0];
|
|
var animPreviewFPS = parseInt(animFPSTuner.value, 10);
|
|
var startPreviewRefresh = function() {
|
|
return setInterval(scope.refreshAnimatedPreview, 1000/animPreviewFPS);
|
|
};
|
|
var refreshUpdater = startPreviewRefresh();
|
|
|
|
animFPSTuner.addEventListener('change', function(evt) {
|
|
window.clearInterval(refreshUpdater);
|
|
animPreviewFPS = parseInt(animFPSTuner.value, 10);
|
|
$("#display-fps").html(animPreviewFPS + " fps");
|
|
refreshUpdater = startPreviewRefresh();
|
|
});
|
|
},
|
|
|
|
createPreviews : function () {
|
|
var container = $('#preview-list')[0], previewTile;
|
|
container.innerHTML = "";
|
|
for (var i = 0, l = frameSheet.getFrameCount(); i < l ; i++) {
|
|
previewTile = this.createPreviewTile(i);
|
|
container.appendChild(previewTile);
|
|
}
|
|
},
|
|
|
|
createPreviewTile: function(tileNumber) {
|
|
var previewTileRoot = document.createElement("li");
|
|
var classname = "preview-tile";
|
|
|
|
if (this.getActiveFrameIndex() == tileNumber) {
|
|
classname += " selected";
|
|
}
|
|
previewTileRoot.className = classname;
|
|
|
|
var canvasContainer = document.createElement("div");
|
|
canvasContainer.className = "canvas-container";
|
|
canvasContainer.setAttribute('style',
|
|
'width:' + framePixelWidth * previewTileCanvasDpi + 'px; height:' + framePixelHeight * previewTileCanvasDpi + 'px;');
|
|
|
|
var canvasBackground = document.createElement("div");
|
|
canvasBackground.className = "canvas-background";
|
|
canvasContainer.appendChild(canvasBackground);
|
|
|
|
var canvasPreview = document.createElement("canvas");
|
|
canvasPreview.className = "canvas tile-view"
|
|
|
|
canvasPreview.setAttribute('width', framePixelWidth * previewTileCanvasDpi);
|
|
canvasPreview.setAttribute('height', framePixelHeight * previewTileCanvasDpi);
|
|
|
|
previewTileRoot.addEventListener('click', function(evt) {
|
|
// has not class tile-action:
|
|
// TODO: let me know when you want to start using a framework :)
|
|
if(!evt.target.className.match(new RegExp('(\\s|^)'+ 'tile-action' +'(\\s|$)'))) {
|
|
piskel.setActiveFrameAndRedraw(tileNumber);
|
|
}
|
|
});
|
|
|
|
var canvasPreviewDuplicateAction = document.createElement("button");
|
|
canvasPreviewDuplicateAction.className = "tile-action"
|
|
canvasPreviewDuplicateAction.innerHTML = "dup"
|
|
|
|
canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
|
|
piskel.duplicateFrame(tileNumber);
|
|
});
|
|
|
|
this.drawFrameToCanvas(frameSheet.getFrameByIndex(tileNumber), canvasPreview, previewTileCanvasDpi);
|
|
canvasContainer.appendChild(canvasPreview);
|
|
previewTileRoot.appendChild(canvasContainer);
|
|
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
|
|
|
|
if(tileNumber > 0 || frameSheet.getFrameCount() > 1) {
|
|
var canvasPreviewDeleteAction = document.createElement("button");
|
|
canvasPreviewDeleteAction.className = "tile-action"
|
|
canvasPreviewDeleteAction.innerHTML = "del"
|
|
canvasPreviewDeleteAction.addEventListener('click', function(evt) {
|
|
piskel.removeFrame(tileNumber);
|
|
});
|
|
previewTileRoot.appendChild(canvasPreviewDeleteAction);
|
|
}
|
|
|
|
return previewTileRoot;
|
|
},
|
|
|
|
refreshAnimatedPreview : function () {
|
|
piskel.drawFrameToCanvas(frameSheet.getFrameByIndex(animIndex), previewCanvas, previewAnimationCanvasDpi);
|
|
animIndex++;
|
|
if (animIndex == frameSheet.getFrameCount()) {
|
|
animIndex = 0;
|
|
}
|
|
},
|
|
|
|
removeFrame: function(frameIndex) {
|
|
frameSheet.removeFrameByIndex(frameIndex);
|
|
|
|
this.setActiveFrameAndRedraw(frameIndex - 1);
|
|
},
|
|
|
|
duplicateFrame: function(frameIndex) {
|
|
frameSheet.duplicateFrameByIndex(frameIndex);
|
|
|
|
this.setActiveFrameAndRedraw(frameIndex + 1);
|
|
},
|
|
|
|
updateCursorInfo : function (event) {
|
|
var cursor = $('cursorInfo');
|
|
cursor.style.top = event.clientY + 10 + "px";
|
|
cursor.style.left = event.clientX + 10 + "px";
|
|
|
|
var coordinates = this.getRelativeCoordinates(event.clientX, event.clientY)
|
|
cursor.innerHTML = [
|
|
"X : " + coordinates.x,
|
|
"Y : " + coordinates.y
|
|
].join(", ");
|
|
},
|
|
|
|
onCanvasMousedown : function (event) {
|
|
isClicked = true;
|
|
|
|
if(event.button == 2) { // right click
|
|
isRightClicked = true;
|
|
$.publish(Events.CANVAS_RIGHT_CLICKED);
|
|
}
|
|
var spriteCoordinate = this.getSpriteCoordinate(event);
|
|
currentToolBehavior.applyToolAt(
|
|
spriteCoordinate.col,
|
|
spriteCoordinate.row,
|
|
currentFrame,
|
|
penColor,
|
|
drawingAreaCanvas,
|
|
drawingCanvasDpi);
|
|
|
|
piskel.persistToLocalStorageRequest();
|
|
},
|
|
|
|
onCanvasMousemove : function (event) {
|
|
|
|
//this.updateCursorInfo(event);
|
|
if (isClicked) {
|
|
var spriteCoordinate = this.getSpriteCoordinate(event);
|
|
currentToolBehavior.moveToolAt(
|
|
spriteCoordinate.col,
|
|
spriteCoordinate.row,
|
|
currentFrame,
|
|
penColor,
|
|
drawingAreaCanvas,
|
|
drawingCanvasDpi);
|
|
|
|
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
|
|
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
|
|
// you don't need to draw anything when mousemoving and you request useless localStorage.
|
|
piskel.persistToLocalStorageRequest();
|
|
}
|
|
},
|
|
|
|
onDocumentBodyMouseup : function (event) {
|
|
if(isClicked || isRightClicked) {
|
|
// A mouse button was clicked on the drawing canvas before this mouseup event,
|
|
// the user was probably drawing on the canvas.
|
|
// Note: The mousemove movement (and the mouseup) may end up outside
|
|
// of the drawing canvas.
|
|
// TODO: Remove that when we have the centralized redraw loop
|
|
this.createPreviews();
|
|
}
|
|
|
|
if(isRightClicked) {
|
|
$.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
|
|
}
|
|
isClicked = false;
|
|
isRightClicked = false;
|
|
var spriteCoordinate = this.getSpriteCoordinate(event);
|
|
currentToolBehavior.releaseToolAt(
|
|
spriteCoordinate.col,
|
|
spriteCoordinate.row,
|
|
currentFrame,
|
|
penColor,
|
|
drawingAreaCanvas,
|
|
drawingCanvasDpi);
|
|
},
|
|
|
|
// TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop
|
|
drawFrameToCanvas: function(frame, canvasElement, dpi) {
|
|
var color;
|
|
for(var col = 0, num_col = frame.length; col < num_col; col++) {
|
|
for(var row = 0, num_row = frame[col].length; row < num_row; row++) {
|
|
color = _normalizeColor(frame[col][row]);
|
|
this.drawPixelInCanvas(row, col, color, canvasElement, dpi);
|
|
}
|
|
}
|
|
},
|
|
|
|
// TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop
|
|
drawPixelInCanvas : function (row, col, color, canvas, dpi) {
|
|
var context = canvas.getContext('2d');
|
|
if(color == undefined || color == Constants.TRANSPARENT_COLOR) {
|
|
context.clearRect(col * dpi, row * dpi, dpi, dpi);
|
|
} else {
|
|
context.fillStyle = color;
|
|
context.fillRect(col * dpi, row * dpi, dpi, dpi);
|
|
}
|
|
},
|
|
|
|
onCanvasContextMenu : function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
event.cancelBubble = true;
|
|
return false;
|
|
},
|
|
|
|
onPaletteClick : function (event) {
|
|
var color = $(event.target).data("color");
|
|
var colorPicker = $('#color-picker');
|
|
if (color == "TRANSPARENT") {
|
|
// We can set the current palette color to transparent.
|
|
// You can then combine this transparent color with an advanced
|
|
// tool for customized deletions.
|
|
// Eg: bucket + transparent: Delete a colored area
|
|
// Stroke + transparent: hollow out the equivalent of a stroke
|
|
penColor = Constants.TRANSPARENT_COLOR;
|
|
|
|
// The colorpicker can't be set to a transparent state.
|
|
// We set its background to white and insert the
|
|
// string "TRANSPARENT" to mimic this state:
|
|
colorPicker[0].color.fromString("#fff");
|
|
colorPicker.val("TRANSPARENT");
|
|
} else if (null !== color) {
|
|
colorPicker[0].color.fromString(color);
|
|
penColor = color;
|
|
}
|
|
},
|
|
|
|
getRelativeCoordinates : function (x, y) {
|
|
var canvasRect = drawingAreaCanvas.getBoundingClientRect();
|
|
return {
|
|
x : x - canvasRect.left,
|
|
y : y - canvasRect.top
|
|
}
|
|
},
|
|
|
|
getSpriteCoordinate : function(event) {
|
|
var coord = this.getRelativeCoordinates(event.x, event.y);
|
|
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
|
|
return {
|
|
"col" : (coords.x - coords.x%drawingCanvasDpi) / drawingCanvasDpi,
|
|
"row" : (coords.y - coords.y%drawingCanvasDpi) / drawingCanvasDpi
|
|
}
|
|
},
|
|
|
|
// TODO(julz): Create package ?
|
|
storeSheet : function (event) {
|
|
var xhr = new XMLHttpRequest();
|
|
var formData = new FormData();
|
|
formData.append('framesheet_content', frameSheet.serialize());
|
|
formData.append('fps_speed', $('#preview-fps').val());
|
|
xhr.open('POST', PISKEL_SERVICE_URL + "/store", true);
|
|
xhr.onload = function(e) {
|
|
if (this.status == 200) {
|
|
var baseUrl = window.location.href.replace(window.location.search, "");
|
|
window.location.href = baseUrl + "?frameId=" + this.responseText;
|
|
}
|
|
};
|
|
|
|
xhr.send(formData);
|
|
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
};
|
|
|
|
window.piskel = piskel;
|
|
piskel.init();
|
|
|
|
})(function(id){return document.getElementById(id)});
|