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

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
juliandescottes 2012-09-03 12:35:08 +02:00
commit c43a01a64f
31 changed files with 1307 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
*.DS_Store

139
css/style.css
View File

@ -127,24 +127,145 @@ ul, li {
z-index: 1;
}
#palette li {
.canvas-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.drawing-canvas-container {
float: left;
}
.tool-paint-bucket .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/paint-bucket.png) 18 17, pointer;
}
.tool-pen .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/pen.png) 7 21, pointer;
}
.tool-eraser .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/eraser.png) 5 21, pointer;
}
.tool-stroke .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/pen.png) 5 21, pointer;
}
.tool-rectangle .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
}
/**
* Tool section:
*/
.color-tool {
}
.palette .palette-color {
cursor: pointer;
display : inline-block;
height : 20px;
width : 20px;
margin : 5px;
}
.palette .palette-color.transparent-color {
background-color: white;
height : 16px;
width : 16px;
border: 2px solid #000;
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0, #fff),
color-stop(0.45, #fff),
color-stop(0.5, #ff0000),
color-stop(0.55, #fff),
color-stop(1, #fff)
);
background-image: -moz-linear-gradient(
left top,
#fff 0%,
#fff 45%,
#f00 50%,
#fff 55%,
#fff 100%
);
}
.tools-container {
float: left;
}
.tools-container .tool-icon {
display: block;
float: left;
margin-right: 2px;
}
.tool-icon {
width: 30px;
height: 30px;
border: 5px solid #fff;
background-color: #fff
}
.tool-icon:hover {
border-color: #;
}
.tool-icon:hover {
cursor: pointer;
border: 5px solid #eee;
}
.tool-icon.selected {
cursor: auto;
border: 5px solid #ddd;
}
.tool-icon.tool-pen {
background: #fff url(../img/tools/icons/pen.png) 3px 3px no-repeat;
}
.tool-icon.tool-paint-bucket {
background: #fff url(../img/tools/icons/paint-bucket.png) 3px 3px no-repeat;
}
.tool-icon.tool-eraser {
background: #fff url(../img/tools/icons/eraser.png) 3px 3px no-repeat;
}
.tool-icon.tool-stroke {
background: #fff url(../img/tools/icons/stroke.png) 3px 3px no-repeat;
}
.tool-icon.tool-rectangle {
background: #fff url(../img/tools/icons/rectangle.png) 3px 3px no-repeat;
}
#preview-fps {
width : 200px;
}
/* User messages */
/**
* User messages
*/
.user-message {
position: fixed;
bottom: 0;
left: 40%;
background-color: #F9EDBE;
padding: 7px 22px;
padding-right: 42px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
font-family: ‘Arial Black’, Gadget, sans-serif;
@ -156,6 +277,20 @@ ul, li {
z-index: 10000;
}
.user-message .close {
position: absolute;
top: 3px;
right: 6px;
color: gray;
font-weight: bold;
cursor: pointer;
font-size: 18px;
}
.user-message .close:hover {
color: black;
}
/* Force apparition of scrollbars on leopard */
::-webkit-scrollbar {
-webkit-appearance: none;

BIN
img/tools/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
img/tools/cursors/eraser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 774 B

BIN
img/tools/cursors/paint-bucket.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
img/tools/cursors/pen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
img/tools/cursors/rectangle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 532 B

BIN
img/tools/icons/eraser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 774 B

BIN
img/tools/icons/paint-bucket.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
img/tools/icons/pen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
img/tools/icons/rectangle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 B

BIN
img/tools/icons/stroke.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

60
index.html
View File

@ -7,7 +7,7 @@
<title>Piskel</title>
<meta name="description" content="">
<meta name="author" content="Julian Descottes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
@ -15,20 +15,41 @@
</head>
<body>
<div class='debug left-nav'>
<!-- Frame actions: -->
<button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
<button id='add-frame-button' class="action-button">
Add a Frame
</button>
<ul id="preview-list">
</ul>
<!-- List of frames: -->
<ul id="preview-list"></ul>
</div>
<div class='main-panel'>
<div id="drawing-canvas-container" class="canvas-container">
<!-- Drawing area: -->
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
<div class="canvas-background"></div>
</div>
<input id="color-picker" class="color" type="text" value=""/>
<ul id="palette" onclick="piskel.onPaletteClick(event)">
</ul>
<!-- Tool section: -->
<div id="tools-container" class="tools-container">
<div class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></div>
<div class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></div>
<div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>
<div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>
<div class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></div>
<div class="color-tool">
<input id="color-picker" class="color {hash:true}" type="text" value=""/>
<ul id="palette" class="palette">
<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
</ul>
</div>
</div>
<!-- Animation preview: -->
<div class='preview-container'>
<div id='preview-canvas-container' class="canvas-container">
<div class="canvas-background"></div>
@ -41,10 +62,31 @@
</div>
<div id="cursorInfo"></div>
<!-- Core libraries: -->
<script src="js/lib/jquery-1.8.0.js"></script>
<script src="js/lib/pubsub.js"></script>
<script src="js/lib/pubsub.js"></script>
<!-- Application wide configuration -->
<script src="js/Constants.js"></script>
<script src="js/Events.js"></script>
<!-- Libraries -->
<script src="js/utils.js"></script>
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
<script src="js/frameSheetModel.js"></script>
<!-- Application libraries-->
<script src="js/FrameSheetModel.js"></script>
<script src="js/LocalStorageService.js"></script>
<script src="js/Notification.js"></script>
<script src="js/drawingtools/BaseTool.js"></script>
<script src="js/drawingtools/SimplePen.js"></script>
<script src="js/drawingtools/Eraser.js"></script>
<script src="js/drawingtools/Stroke.js"></script>
<script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/drawingtools/Rectangle.js"></script>
<script src="js/ToolSelector.js"></script>
<!-- Application controller and initialization -->
<script src="js/piskel.js"></script>
</body>
</html>

6
js/Constants.js Normal file
View File

@ -0,0 +1,6 @@
var Constants = {
DEFAULT_PEN_COLOR : '#000000',
TRANSPARENT_COLOR : "TRANSPARENT",
PISKEL_SERVICE_URL: 'http://2.piskel-app.appspot.com'
};

26
js/Events.js Normal file
View File

@ -0,0 +1,26 @@
Events = {
TOOL_SELECTED : "TOOL_SELECTED",
COLOR_SELECTED: "COLOR_SELECTED",
COLOR_USED: "COLOR_USED",
/**
* When this event is emitted, a request is sent to the localstorage
* Service to save the current framesheet. The storage service
* may not immediately store data (internal throttling of requests).
*/
LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED",
CANVAS_RIGHT_CLICK_RELEASED: "CANVAS_RIGHT_CLICK_RELEASED",
/**
* Event to requset a refresh of the display.
* A bit overkill but, it's just workaround in our current drawing system.
* TODO: Remove or rework when redraw system is refactored.
*/
REFRESH: "REFRESH",
SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
HIDE_NOTIFICATION: "HIDE_NOTIFICATION"
};

95
js/LocalStorageService.js Normal file
View File

@ -0,0 +1,95 @@
/*
* @provide pskl.LocalStrageService
*
* @require Constants
* @require Events
*/
$.namespace("pskl");
pskl.LocalStorageService = (function() {
var frameSheet_;
/**
* @private
*/
var localStorageThrottler_ = null;
/**
* @private
*/
var persistToLocalStorageRequest_ = function() {
// Persist to localStorage when drawing. We throttle localStorage accesses
// for high frequency drawing (eg mousemove).
if(localStorageThrottler_ != null) {
window.clearTimeout(localStorageThrottler_);
}
localStorageThrottler_ = window.setTimeout(function() {
persistToLocalStorage_();
localStorageThrottler_ = null;
}, 1000);
};
/**
* @private
*/
var persistToLocalStorage_ = function() {
console.log('[LocalStorage service]: Snapshot stored')
window.localStorage['snapShot'] = frameSheet_.serialize();
};
/**
* @private
*/
var restoreFromLocalStorage_ = function() {
frameSheet_.deserialize(window.localStorage['snapShot']);
// Model updated, redraw everything:
$.publish(Events.REFRESH);
};
/**
* @private
*/
var cleanLocalStorage_ = function() {
console.log('[LocalStorage service]: Snapshot removed')
delete window.localStorage['snapShot'];
};
return {
init: function(frameSheet) {
if(frameSheet == undefined) {
throw "Bad LocalStorageService initialization: <undefined frameSheet>"
}
frameSheet_ = frameSheet;
$.subscribe(Events.LOCALSTORAGE_REQUEST, persistToLocalStorageRequest_);
},
// TODO(vincz): Find a good place to put this UI rendering, a service should not render UI.
displayRestoreNotification: function() {
if(window.localStorage && window.localStorage['snapShot']) {
var reloadLink = "<a href='#' class='localstorage-restore onclick='piskel.restoreFromLocalStorage()'>reload</a>";
var discardLink = "<a href='#' class='localstorage-discard' onclick='piskel.cleanLocalStorage()'>discard</a>";
var content = "Non saved version found. " + reloadLink + " or " + discardLink;
$.publish(Events.SHOW_NOTIFICATION, [{
"content": content,
"behavior": function(rootNode) {
rootNode = $(rootNode);
rootNode.click(function(evt) {
var target = $(evt.target);
if(target.hasClass("localstorage-restore")) {
restoreFromLocalStorage_();
}
else if (target.hasClass("localstorage-discard")) {
cleanLocalStorage_();
}
$.publish(Events.HIDE_NOTIFICATION);
});
}
}]);
}
}
};
})();

39
js/Notification.js Normal file
View File

@ -0,0 +1,39 @@
/*
* @provide pskl.NotificationService
*
*/
$.namespace("pskl");
pskl.NotificationService = (function() {
/**
* @private
*/
var displayMessage_ = function (evt, messageInfo) {
var message = document.createElement('div');
message.id = "user-message";
message.className = "user-message";
message.innerHTML = messageInfo.content;
message.innerHTML = message.innerHTML + "<div title='Close message' class='close'>x</div>";
document.body.appendChild(message);
$(message).find(".close").click(removeMessage_);
if(messageInfo.behavior) messageInfo.behavior(message);
};
/**
* @private
*/
var removeMessage_ = function (evt) {
var message = $("#user-message");
if (message.length) {
message.remove();
}
};
return {
init: function() {
$.subscribe(Events.SHOW_NOTIFICATION, displayMessage_);
$.subscribe(Events.HIDE_NOTIFICATION, removeMessage_);
}
};
})();

156
js/ToolSelector.js Normal file
View File

@ -0,0 +1,156 @@
/*
* @provide pskl.ToolSelector
*
* @require Constants
* @require Events
* @require pskl.drawingtools
*/
$.namespace("pskl");
pskl.ToolSelector = (function() {
var paletteColors = [];
var toolInstances = {
"simplePen" : new pskl.drawingtools.SimplePen(),
"eraser" : new pskl.drawingtools.Eraser(),
"paintBucket" : new pskl.drawingtools.PaintBucket(),
"stroke" : new pskl.drawingtools.Stroke(),
"rectangle" : new pskl.drawingtools.Rectangle()
};
var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen;
var selectTool_ = function(tool) {
var maincontainer = $("body");
var previousSelectedToolClass = maincontainer.data("selected-tool-class");
if(previousSelectedToolClass) {
maincontainer.removeClass(previousSelectedToolClass);
}
maincontainer.addClass(toolBehavior.toolId);
$("#drawing-canvas-container").data("selected-tool-class", toolBehavior.toolId);
};
var activateToolOnStage_ = function(tool) {
var stage = $("body");
var previousSelectedToolClass = stage.data("selected-tool-class");
if(previousSelectedToolClass) {
stage.removeClass(previousSelectedToolClass);
}
stage.addClass(tool.toolId);
stage.data("selected-tool-class", tool.toolId);
};
var selectTool_ = function(tool) {
console.log("Selecting Tool:" , currentSelectedTool);
currentSelectedTool = tool;
activateToolOnStage_(currentSelectedTool);
$.publish(Events.TOOL_SELECTED, [tool]);
};
/**
* @private
*/
var onToolIconClicked_ = function(evt) {
var target = $(evt.target);
var clickedTool = target.closest(".tool-icon");
if(clickedTool.length) {
for(var tool in toolInstances) {
if (toolInstances[tool].toolId == clickedTool.data()["toolId"]) {
selectTool_(toolInstances[tool]);
// Show tool as selected:
$("#tools-container .tool-icon.selected").removeClass("selected");
clickedTool.addClass("selected");
}
}
}
};
/**
* @private
*/
var onPickerChange_ = function(evt) {
var inputPicker = $(evt.target);
$.publish(Events.COLOR_SELECTED, [inputPicker.val()]);
};
/**
* @private
*/
var addColorToPalette_ = function (color) {
if (paletteColors.indexOf(color) == -1) {
var paletteEl = $("#palette");
var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color);
colorEl.style.background = color;
paletteEl[0].appendChild(colorEl);
paletteColors.push(color);
}
},
/**
* @private
*/
onPaletteColorClick_ = function (event) {
var selectedColor = $(event.target).data("color");
var colorPicker = $('#color-picker');
if (selectedColor == Constants.TRANSPARENT_COLOR) {
// 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
// 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 {
colorPicker[0].color.fromString(selectedColor);
}
$.publish(Events.COLOR_SELECTED, [selectedColor])
};
return {
init: function() {
// Initialize tool:
// Set SimplePen as default selected tool:
selectTool_(toolInstances.simplePen);
// Activate listener on tool panel:
$("#tools-container").click(onToolIconClicked_);
// Initialize colorpicker:
var colorPicker = $('#color-picker');
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
colorPicker.change(onPickerChange_);
// Initialize palette:
$("#palette").click(onPaletteColorClick_);
$.subscribe(Events.COLOR_USED, function(evt, color) {
addColorToPalette_(color);
});
// Special right click handlers (select the eraser tool)
$.subscribe(Events.CANVAS_RIGHT_CLICKED, function() {
previousSelectedTool = currentSelectedTool;
currentSelectedTool = toolInstances.eraser;
$.publish(Events.TOOL_SELECTED, [currentSelectedTool]);
});
$.subscribe(Events.CANVAS_RIGHT_CLICK_RELEASED, function() {
currentSelectedTool = previousSelectedTool;
$.publish(Events.TOOL_SELECTED, [currentSelectedTool]);
});
}
};
})();

95
js/drawingtools/BaseTool.js Normal file
View File

@ -0,0 +1,95 @@
/*
* @provide pskl.drawingtools.BaseTool
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.BaseTool = function() {};
ns.BaseTool.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {};
// TODO: Remove that when we have the centralized redraw loop
ns.BaseTool.prototype.drawPixelInCanvas = function (col, row, canvas, color, dpi) {
var context = canvas.getContext('2d');
if(color == undefined || color == Constants.TRANSPARENT_COLOR) {
context.clearRect(col * dpi, row * dpi, dpi, dpi);
}
else {
// TODO(vincz): Found a better design to update the palette, it's called too frequently.
$.publish(Events.COLOR_USED, [color]);
context.fillStyle = color;
context.fillRect(col * dpi, row * dpi, dpi, dpi);
}
};
// TODO: Remove that when we have the centralized redraw loop
ns.BaseTool.prototype.drawFrameInCanvas = function (frame, canvas, 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 = pskl.utils.normalizeColor(frame[col][row]);
this.drawPixelInCanvas(col, row,canvas, color, dpi);
}
}
};
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
// will help to visualize the tool interaction (without modifying the canvas).
ns.BaseTool.prototype.createCanvasOverlay = function (canvas) {
var overlayCanvas = document.createElement("canvas");
overlayCanvas.className = "canvas-overlay";
overlayCanvas.setAttribute("width", canvas.width);
overlayCanvas.setAttribute("height", canvas.height);
canvas.parentNode.appendChild(overlayCanvas);
return overlayCanvas;
};
ns.BaseTool.prototype.removeCanvasOverlays = function () {
$(".canvas-overlay").remove();
};
/**
* Bresenham line algorihtm: Get an array of pixels from
* start and end coordinates.
*
* http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
* http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript
*
* @private
*/
ns.BaseTool.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
var pixels = [];
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx-dy;
while(true){
// Do what you need to for this
pixels.push({"col": x0, "row": y0});
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2>-dy){
err -= dy;
x0 += sx;
}
if (e2 < dx) {
err += dx;
y0 += sy;
}
}
return pixels;
};
})();

41
js/drawingtools/Eraser.js Normal file
View File

@ -0,0 +1,41 @@
/*
* @provide pskl.drawingtools.Eraser
*
* @require Constants
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.Eraser = function() {
this.toolId = "tool-eraser";
};
pskl.utils.inherit(ns.Eraser, ns.BaseTool);
/**
* @override
*/
ns.Eraser.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
// Change model:
frame[col][row] = Constants.TRANSPARENT_COLOR;
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, Constants.TRANSPARENT_COLOR, dpi);
};
/**
* @override
*/
ns.Eraser.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.applyToolAt(col, row, frame, color, canvas, dpi);
};
ns.Eraser.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
// TODO: Create a afterRelease event hook or put that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
})();

157
js/drawingtools/PaintBucket.js Normal file
View File

@ -0,0 +1,157 @@
/*
* @provide pskl.drawingtools.PaintBucket
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.PaintBucket = function() {
this.toolId = "tool-paint-bucket"
};
pskl.utils.inherit(ns.PaintBucket, ns.BaseTool);
/**
* @override
*/
ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
// Change model:
var targetColor = pskl.utils.normalizeColor(frame[col][row]);
//this.recursiveFloodFill_(frame, col, row, targetColor, color);
this.queueLinearFloodFill_(frame, col, row, targetColor, color);
$.publish(Events.FRAMESHEET_UPDATED);
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawFrameInCanvas(frame, canvas, dpi);
};
ns.PaintBucket.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
// TODO: Create a afterRelease event hook or put that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
/**
* Flood-fill (node, target-color, replacement-color):
* 1. Set Q to the empty queue.
* 2. If the color of node is not equal to target-color, return.
* 3. Add node to Q.
* 4. For each element n of Q:
* 5. If the color of n is equal to target-color:
* 6. Set w and e equal to n.
* 7. Move w to the west until the color of the node to the west of w no longer matches target-color.
* 8. Move e to the east until the color of the node to the east of e no longer matches target-color.
* 9. Set the color of nodes between w and e to replacement-color.
* 10. For each node n between w and e:
* 11. If the color of the node to the north of n is target-color, add that node to Q.
* 12. If the color of the node to the south of n is target-color, add that node to Q.
* 13. Continue looping until Q is exhausted.
* 14. Return.
*
* @private
*/
ns.PaintBucket.prototype.queueLinearFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
var queue = [];
var dy = [-1, 0, 1, 0];
var dx = [0, 1, 0, -1];
try {
if(frame[col][row] == replacementColor) {
return;
}
} catch(e) {
// Frame out of bound exception.
}
var isInFrameBound = function(frame_, col_, row_) {
if( col_ < 0 ||
col_ >= frame_.length ||
row_ < 0 ||
row_ >= frame_[0].length) {
return false;
}
return true;
}
queue.push({"col": col, "row": row});
var loopCount = 0;
var cellCount = frame.length * frame[0].length;
while(queue.length > 0) {
loopCount ++;
var currentItem = queue.pop();
frame[currentItem.col][currentItem.row] = replacementColor;
for (var i = 0; i < 4; i++) {
var nextCol = currentItem.col + dx[i]
var nextRow = currentItem.row + dy[i]
try {
if (isInFrameBound(frame, nextCol, nextRow) && frame[nextCol][nextRow] == targetColor) {
queue.push({"col": nextCol, "row": nextRow });
}
} catch(e) {
// Frame out of bound exception.
}
}
// Security loop breaker:
if(loopCount > 10 * cellCount) {
console.log("loop breaker called")
break;
}
}
};
/**
* Basic Flood-fill implementation (Stack explosion !):
* Flood-fill (node, target-color, replacement-color):
* 1. If the color of node is not equal to target-color, return.
* 2. Set the color of node to replacement-color.
* 3. Perform Flood-fill (one step to the west of node, target-color, replacement-color).
* Perform Flood-fill (one step to the east of node, target-color, replacement-color).
* Perform Flood-fill (one step to the north of node, target-color, replacement-color).
* Perform Flood-fill (one step to the south of node, target-color, replacement-color).
* 4. Return.
*
* @private
*/
ns.PaintBucket.prototype.recursiveFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
// Step 1:
if( col < 0 ||
col >= frame.length ||
row < 0 ||
row >= frame[0].length ||
frame[col][row] != targetColor) {
return;
}
// Step 2:
frame[col][row] = replacementColor;
//Step 3:
this.simpleFloodFill(frame, col - 1, row, targetColor, replacementColor);
this.simpleFloodFill(frame, col + 1, row, targetColor, replacementColor);
this.simpleFloodFill(frame, col, row - 1, targetColor, replacementColor);
this.simpleFloodFill(frame, col, row + 1, targetColor, replacementColor);
return;
};
})();

128
js/drawingtools/Rectangle.js Normal file
View File

@ -0,0 +1,128 @@
/*
* @provide pskl.drawingtools.Rectangle
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.Rectangle = function() {
this.toolId = "tool-rectangle"
// Rectangle's first point coordinates (set in applyToolAt)
this.startCol = null;
this.startRow = null;
// Rectangle's second point coordinates (changing dynamically in moveToolAt)
this.endCol = null;
this.endRow = null;
this.canvasOverlay = null;
};
pskl.utils.inherit(ns.Rectangle, ns.BaseTool);
/**
* @override
*/
ns.Rectangle.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
this.startCol = col;
this.startRow = row;
// The fake canvas where we will draw the preview of the rectangle:
this.canvasOverlay = this.createCanvasOverlay(canvas);
// Drawing the first point of the rectangle in the fake overlay canvas:
this.drawPixelInCanvas(col, row, this.canvasOverlay, color, dpi);
};
ns.Rectangle.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
// When the user moussemove (before releasing), we dynamically compute the
// pixel to draw the line and draw this line in the overlay canvas:
var strokePoints = this.getRectanglePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
// Clean overlay canvas:
this.canvasOverlay.getContext("2d").clearRect(
0, 0, this.canvasOverlay.width, this.canvasOverlay.height);
// Drawing current stroke:
for(var i = 0; i< strokePoints.length; i++) {
if(color == Constants.TRANSPARENT_COLOR) {
color = "rgba(255, 255, 255, 0.6)";
}
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
}
};
/**
* @override
*/
ns.Rectangle.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
// If the stroke tool is released outside of the canvas, we cancel the stroke:
// TODO: Mutualize this check in common method
if(col < 0 || row < 0 || col > frame.length || row > frame[0].length) {
this.removeCanvasOverlays();
return;
}
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
// the model and draw them in the drawing canvas (not the fake overlay anymore)
var strokePoints = this.getRectanglePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
frame[strokePoints[i].col][strokePoints[i].row] = color;
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi);
}
// For now, we are done with the stroke tool and don't need an overlay anymore:
this.removeCanvasOverlays();
// TODO: Create a afterRelease event hook or put that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
/**
* Get an array of pixels representing the rectangle.
*
* @private
*/
ns.Rectangle.prototype.getRectanglePixels_ = function(x0, x1, y0, y1) {
var pixels = [];
var swap;
if(x0 > x1) {
swap = x0;
x0 = x1;
x1 = swap;
}
if(y0 > y1) {
swap = y0;
y0 = y1;
y1 = swap;
}
// Creating horizontal sides of the rectangle:
for(var x = x0; x <= x1; x++) {
pixels.push({"col": x, "row": y0});
pixels.push({"col": x, "row": y1});
}
// Creating vertical sides of the rectangle:
for(var y = y0; y <= y1; y++) {
pixels.push({"col": x0, "row": y});
pixels.push({"col": x1, "row": y});
}
return pixels;
};
})();

60
js/drawingtools/SimplePen.js Normal file
View File

@ -0,0 +1,60 @@
/*
* @provide pskl.drawingtools.SimplePen
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.SimplePen = function() {
this.toolId = "tool-pen"
};
this.previousCol = null;
this.previousRow = null;
pskl.utils.inherit(ns.SimplePen, ns.BaseTool);
/**
* @override
*/
ns.SimplePen.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
this.previousCol = col;
this.previousRow = row;
// Change model:
var color = pskl.utils.normalizeColor(color);
if (color != frame[col][row]) {
frame[col][row] = color;
}
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, color, dpi);
};
ns.SimplePen.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
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
// current point and the previously drawn one.
// We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
for(var i=0, l=interpolatedPixels.length; i<l; i++) {
this.applyToolAt(interpolatedPixels[i].col, interpolatedPixels[i].row, frame, color, canvas, dpi);
}
}
else {
this.applyToolAt(col, row, frame, color, canvas, dpi);
}
this.previousCol = col;
this.previousRow = row;
};
ns.SimplePen.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
// TODO: Create a afterRelease event hook or out that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
})();

105
js/drawingtools/Stroke.js Normal file
View File

@ -0,0 +1,105 @@
/*
* @provide pskl.drawingtools.Stroke
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.Stroke = function() {
this.toolId = "tool-stroke"
// Stroke's first point coordinates (set in applyToolAt)
this.startCol = null;
this.startRow = null;
// Stroke's second point coordinates (changing dynamically in moveToolAt)
this.endCol = null;
this.endRow = null;
this.canvasOverlay = null;
};
pskl.utils.inherit(ns.Stroke, ns.BaseTool);
/**
* @override
*/
ns.Stroke.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
this.startCol = col;
this.startRow = row;
// When drawing a stroke we don't change the model instantly, since the
// user can move his cursor to change the stroke direction and length
// dynamically. Instead we draw the (preview) stroke in a fake canvas that
// overlay the drawing canvas.
// We wait for the releaseToolAt callback to impact both the
// frame model and canvas rendering.
// The fake canvas where we will draw the preview of the stroke:
this.canvasOverlay = this.createCanvasOverlay(canvas);
// Drawing the first point of the stroke in the fake overlay canvas:
this.drawPixelInCanvas(col, row, this.canvasOverlay, color, dpi);
};
ns.Stroke.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
// When the user moussemove (before releasing), we dynamically compute the
// pixel to draw the line and draw this line in the overlay canvas:
var strokePoints = this.getLinePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
// Clean overlay canvas:
this.canvasOverlay.getContext("2d").clearRect(
0, 0, this.canvasOverlay.width, this.canvasOverlay.height);
// Drawing current stroke:
for(var i = 0; i< strokePoints.length; i++) {
if(color == Constants.TRANSPARENT_COLOR) {
// When mousemoving the stroke tool, we draw in the canvas overlay above the drawing canvas.
// If the stroke color is transparent, we won't be
// able to see it during the movement.
// We set it to a semi-opaque white during the tool mousemove allowing to see colors below the stroke.
// When the stroke tool will be released, It will draw a transparent stroke,
// eg deleting the equivalent of a stroke.
color = "rgba(255, 255, 255, 0.6)";
}
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
}
};
/**
* @override
*/
ns.Stroke.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
// If the stroke tool is released outside of the canvas, we cancel the stroke:
// TODO: Mutualize this check in common method
if(col < 0 || row < 0 || col > frame.length || row > frame[0].length) {
this.removeCanvasOverlays();
return;
}
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
// the model and draw them in the drawing canvas (not the fake overlay anymore)
var strokePoints = this.getLinePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
frame[strokePoints[i].col][strokePoints[i].row] = color;
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi);
}
// For now, we are done with the stroke tool and don't need an overlay anymore:
this.removeCanvasOverlays();
// TODO: Create a afterRelease event hook or out that deep in the model
$.publish(Events.FRAMESHEET_UPDATED);
};
})();

15
js/frameSheetModel.js
View File

@ -1,16 +1,29 @@
var FrameSheetModel = (function() {
$.namespace("pskl");
pskl.FrameSheetModel = (function() {
var inst;
var frames = [];
var width;
var height;
/**
* @private
*/
var createEmptyFrame_ = function() {
var emptyFrame = new Array(width);
for (var columnIndex=0; columnIndex < width; columnIndex++) {
emptyFrame[columnIndex] = new Array(height);
}
return emptyFrame;
};
/**
* @private
*/
var requestLocalStorageSave_ = function() {
};
return {

BIN
js/lib/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
js/lib/jsColor_1_4_0/.DS_Store vendored Normal file
View File

Binary file not shown.

6
js/lib/pubsub.js
View File

@ -7,6 +7,7 @@
var o = $({});
$.subscribe = function() {
//console.log("SUBSCRIBE: " + arguments[0]);
o.on.apply(o, arguments);
};
@ -15,7 +16,10 @@
};
$.publish = function() {
//console.log("PUBLISH: " + arguments[0]);
o.trigger.apply(o, arguments);
};
}(jQuery));
}(jQuery));

318
js/piskel.js
View File

@ -1,76 +1,105 @@
(function ($) {
/**
* @require Constants
* @require Events
*/
$.namespace("pskl");
(function () {
/**
* FrameSheetModel instance.
*/
var frameSheet,
// Constants:
TRANSPARENT_COLOR = 'tc',
DEFAULT_PEN_COLOR = '#000000',
PISKEL_SERVICE_URL = 'http://2.piskel-app.appspot.com',
// Temporary zoom implementation to easily get bigger canvases to
// see how good perform critical algorithms on big canvas.
zoom = 1,
// Configuration:
// Canvas size in pixel size (not dpi related)
framePixelWidth = 32,
framePixelHeight = 32,
framePixelWidth = 32 * zoom,
framePixelHeight = 32 * zoom,
// Scaling factors for a given frameSheet rendering:
// Main drawing area:
drawingCanvasDpi = 20,
drawingCanvasDpi = Math.ceil(20/ zoom),
// Canvas previous in the slideshow:
previewTileCanvasDpi = 4,
previewTileCanvasDpi = Math.ceil(4 / zoom),
// Ainmated canvas preview:
previewAnimationCanvasDpi = 8,
previewAnimationCanvasDpi = Math.ceil(8 / zoom),
// DOM references:
drawingAreaContainer,
drawingAreaCanvas,
previewCanvas,
paletteEl,
// States:
isClicked = false,
isRightClicked = false,
activeFrameIndex = -1,
animIndex = 0,
penColor = DEFAULT_PEN_COLOR,
paletteColors = [],
penColor = Constants.DEFAULT_PEN_COLOR,
currentFrame = null;
currentToolBehavior = null,
previousMousemoveTime = 0,
//utility
_normalizeColor = function (color) {
if(color == undefined || color == TRANSPARENT_COLOR || color.indexOf("#") == 0) {
if(color == undefined || color == Constants.TRANSPARENT_COLOR || color.indexOf("#") == 0) {
return color;
} else {
return "#" + color;
}
},
// setTimeout/setInterval references:
localStorageThrottler = null
;
};
/**
* Main application controller
*/
var piskel = {
init : function () {
frameSheet = FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
this.setActiveFrame(0);
frameSheet.addEmptyFrame();
init : function () {
frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
this.setActiveFrame(0);
pskl.NotificationService.init();
pskl.LocalStorageService.init(frameSheet);
// TODO: Add comments
var frameId = this.getFrameIdFromUrl();
if (frameId) {
this.displayMessage("Loading animation with id : [" + frameId + "]");
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + frameId + "]"}]);
this.loadFramesheetFromService(frameId);
} else {
this.finishInit();
pskl.LocalStorageService.displayRestoreNotification();
}
},
finishInit : function () {
this.initPalette();
this.initDrawingArea();
this.initPreviewSlideshow();
this.initAnimationPreview();
this.initColorPicker();
this.initLocalStorageBackup();
$.subscribe(Events.TOOL_SELECTED, function(evt, toolBehavior) {
console.log("Tool selected: ", toolBehavior);
currentToolBehavior = toolBehavior;
});
$.subscribe(Events.COLOR_SELECTED, function(evt, color) {
console.log("Color selected: ", color);
penColor = color;
});
$.subscribe(Events.REFRESH, function() {
piskel.setActiveFrameAndRedraw(0);
});
// TODO: Move this into their service or behavior files:
this.initDrawingArea();
this.initPreviewSlideshow();
this.initAnimationPreview();
this.startAnimation();
pskl.ToolSelector.init();
},
getFrameIdFromUrl : function() {
@ -82,70 +111,33 @@
loadFramesheetFromService : function (frameId) {
var xhr = new XMLHttpRequest();
xhr.open('GET', PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
xhr.responseType = 'text';
xhr.onload = function(e) {
frameSheet.deserialize(this.responseText);
piskel.removeMessage();
$.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit();
};
xhr.onerror = function () {
piskel.removeMessage();
$.publish(Events.HIDE_NOTIFICATION);
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);
}
},
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(frameSheet.getFrameByIndex(this.getActiveFrameIndex()), drawingAreaCanvas, drawingCanvasDpi);
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
// Update slideshow:
this.createPreviews();
@ -161,33 +153,8 @@
return activeFrameIndex;
},
initColorPicker: function() {
this.colorPicker = $('color-picker');
this.colorPicker.value = DEFAULT_PEN_COLOR;
this.colorPicker.addEventListener('change', this.onPickerChange.bind(this));
},
onPickerChange : function(evt) {
penColor = _normalizeColor(this.colorPicker.value);
},
initPalette : function (color) {
paletteEl = $('palette');
},
addColorToPalette : function (color) {
if (color && color != TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) {
var colorEl = document.createElement("li");
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');
drawingAreaContainer = $('#drawing-canvas-container')[0];
drawingAreaCanvas = document.createElement("canvas");
drawingAreaCanvas.className = 'canvas';
@ -201,14 +168,14 @@
drawingAreaContainer.appendChild(drawingAreaCanvas);
var body = document.getElementsByTagName('body')[0];
body.setAttribute('onmouseup', 'piskel.onCanvasMouseup(event)');
body.setAttribute('onmouseup', 'piskel.onDocumentBodyMouseup(event)');
drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
this.drawFrameToCanvas(frameSheet.getFrameByIndex(this.getActiveFrameIndex()), drawingAreaCanvas, drawingCanvasDpi);
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
},
initPreviewSlideshow: function() {
var addFrameButton = $('add-frame-button');
var addFrameButton = $('#add-frame-button')[0];
addFrameButton.addEventListener('mousedown', function() {
frameSheet.addEmptyFrame();
piskel.setActiveFrameAndRedraw(frameSheet.getFrameCount() - 1);
@ -218,7 +185,7 @@
initAnimationPreview : function() {
var previewAnimationContainer = $('preview-canvas-container');
var previewAnimationContainer = $('#preview-canvas-container')[0];
previewCanvas = document.createElement('canvas');
previewCanvas.className = 'canvas';
previewAnimationContainer.setAttribute('style',
@ -230,7 +197,7 @@
startAnimation : function () {
var scope = this;
var animFPSTuner = $("preview-fps");
var animFPSTuner = $("#preview-fps")[0];
var animPreviewFPS = parseInt(animFPSTuner.value, 10);
var startPreviewRefresh = function() {
return setInterval(scope.refreshAnimatedPreview, 1000/animPreviewFPS);
@ -240,13 +207,13 @@
animFPSTuner.addEventListener('change', function(evt) {
window.clearInterval(refreshUpdater);
animPreviewFPS = parseInt(animFPSTuner.value, 10);
$("display-fps").innerHTML = animPreviewFPS + " fps";
$("#display-fps").html(animPreviewFPS + " fps");
refreshUpdater = startPreviewRefresh();
});
},
createPreviews : function () {
var container = $('preview-list'), previewTile;
var container = $('#preview-list')[0], previewTile;
container.innerHTML = "";
for (var i = 0, l = frameSheet.getFrameCount(); i < l ; i++) {
previewTile = this.createPreviewTile(i);
@ -346,79 +313,74 @@
onCanvasMousedown : function (event) {
isClicked = true;
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
if(event.button == 0) {
this.drawAt(coords.x, coords.y, penColor);
} else {
// Right click used to delete.
if(event.button == 2) { // right click
isRightClicked = true;
this.drawAt(coords.x, coords.y, TRANSPARENT_COLOR);
$.publish(Events.CANVAS_RIGHT_CLICKED);
}
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.applyToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
$.publish(Events.LOCALSTORAGE_REQUEST);
},
onCanvasMousemove : function (event) {
//this.updateCursorInfo(event);
if (isClicked) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
if(isRightClicked) {
this.drawAt(coords.x, coords.y, TRANSPARENT_COLOR);
} else {
this.drawAt(coords.x, coords.y, penColor);
var currentTime = new Date().getTime();
// Throttling of the mousemove event:
if ((currentTime - previousMousemoveTime) > 40 ) {
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.
$.publish(Events.LOCALSTORAGE_REQUEST);
}
previousMousemoveTime = currentTime;
}
},
onCanvasMouseup : function (event) {
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);
},
drawAt : function (x, y, color) {
var col = (x - x%drawingCanvasDpi) / drawingCanvasDpi;
var row = (y - y%drawingCanvasDpi) / drawingCanvasDpi;
// Update model:
var currentFrame = frameSheet.getFrameByIndex(this.getActiveFrameIndex());
// TODO: make a better accessor for pixel state update:
// TODO: Make pen color dynamic:
var color = _normalizeColor(color);
if (color != currentFrame[col][row]) {
currentFrame[col][row] = color;
this.drawPixelInCanvas(row, col, color, drawingAreaCanvas, drawingCanvasDpi);
}
// 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);
}
},
drawPixelInCanvas : function (row, col, color, canvas, dpi) {
var context = canvas.getContext('2d');
if(color == undefined || color == TRANSPARENT_COLOR) {
context.clearRect(col * dpi, row * dpi, dpi, dpi);
} else {
this.addColorToPalette(color);
context.fillStyle = color;
context.fillRect(col * dpi, row * dpi, dpi, dpi);
}
},
// TODO: move that to a FrameRenderer (/w cache) ?
// 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++) {
@ -429,6 +391,17 @@
}
},
// 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();
@ -436,15 +409,6 @@
return false;
},
onPaletteClick : function (event) {
var color = event.target.getAttribute("data-color");
if (null !== color) {
var colorPicker = $('color-picker');
colorPicker.color.fromString(color);
this.onPickerChange();
}
},
getRelativeCoordinates : function (x, y) {
var canvasRect = drawingAreaCanvas.getBoundingClientRect();
return {
@ -453,12 +417,23 @@
}
},
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) {
// TODO Refactor using jquery ?
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('framesheet_content', frameSheet.serialize());
formData.append('fps_speed', $('preview-fps').value);
xhr.open('POST', PISKEL_SERVICE_URL + "/store", true);
formData.append('fps_speed', $('#preview-fps').val());
xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
xhr.onload = function(e) {
if (this.status == 200) {
var baseUrl = window.location.href.replace(window.location.search, "");
@ -477,5 +452,4 @@
window.piskel = piskel;
piskel.init();
})(function(id){return document.getElementById(id)});
//small change for checking my git setup :(
})();

45
js/utils.js Normal file
View File

@ -0,0 +1,45 @@
jQuery.namespace = function() {
var a=arguments, o=null, i, j, d;
for (i=0; i<a.length; i=i+1) {
d=a[i].split(".");
o=window;
for (j=0; j<d.length; j=j+1) {
o[d[j]]=o[d[j]] || {};
o=o[d[j]];
}
}
return o;
};
/*
* @provide pskl.utils
*
* @require Constants
*/
(function(ns) { // namespace: pskl.utils
var ns = $.namespace("pskl.utils");
ns.rgbToHex = function(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
};
ns.normalizeColor = function (color) {
if(color == undefined || color == Constants.TRANSPARENT_COLOR || color.indexOf("#") == 0) {
return color;
} else {
return "#" + color;
}
};
ns.inherit = function(extendedObject, inheritFrom) {
extendedObject.prototype = Object.create(inheritFrom.prototype);
extendedObject.prototype.constructor = extendedObject;
//pskl.ToolBehavior.Eraser.prototype = Object.create(pskl.ToolBehavior.BaseTool.prototype);
//prototypeskl.ToolBehavior.Eraser.prototype.constructor = pskl.ToolBehavior.Eraser;
};
})()

BIN
resources/cursors-resources.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB