Merge pull request #1 from grosbouddha/master

First pull req :)
This commit is contained in:
Julian Descottes 2012-08-26 10:14:16 -07:00
commit cd2b99fb7e
3 changed files with 144 additions and 31 deletions

View File

@ -24,6 +24,7 @@ ul, li {
top : 0; top : 0;
bottom : 0; bottom : 0;
width : 200px; width : 200px;
overflow-y: scroll;
background : #000; background : #000;
padding : 10px; padding : 10px;
} }
@ -32,7 +33,7 @@ ul, li {
position:absolute; position:absolute;
top : 0; top : 0;
bottom : 0; bottom : 0;
left : 200px; left : 220px;
right : 0; right : 0;
background : #ccc; background : #ccc;
} }
@ -49,7 +50,7 @@ ul, li {
box-shadow : 0px 0px 2px rgba(0,0,0,0.2); box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
} }
.preview-container canvas{ .preview-container canvas {
border : 0px Solid transparent; border : 0px Solid transparent;
border-radius:5px 0px 0px 5px; border-radius:5px 0px 0px 5px;
} }
@ -71,13 +72,43 @@ ul, li {
display : inline-block; display : inline-block;
} }
#preview-list li{ #preview-list {
margin : 10px 0; list-style-type: none;
width : 128px;
height : 128px;
} }
#preview-list li.selected{ #preview-list .preview-tile {
margin : 8px -2px; padding : 10px;
border : 2px Solid red; overflow: hidden;
}
.preview-tile .tile-view {
float: left;
}
.preview-tile .tile-action {
display: none;
float: right;
}
.preview-tile:hover .tile-action {
display: block;
}
.preview-tile:hover {
background-color: lightgray;
}
#preview-list .preview-tile.selected {
background-color: gray;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(180,180,180,.7);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
} }

View File

@ -17,10 +17,10 @@
onmousedown="piskel.onCanvasMousedown(arguments[0])" onmousedown="piskel.onCanvasMousedown(arguments[0])"
onmouseup="piskel.onCanvasMouseup(arguments[0])"> onmouseup="piskel.onCanvasMouseup(arguments[0])">
<div class='debug left-nav'> <div class='debug left-nav'>
<span class="action-button" <button class="action-button"
onclick="piskel.addFrame()"> onclick="piskel.addFrame()">
Add a Frame Add a Frame
</span> </button>
<ul id="preview-list"> <ul id="preview-list">
</ul> </ul>
</div> </div>
@ -28,6 +28,9 @@
<div id="canvas-container"></div> <div id="canvas-container"></div>
<div class='preview-container'> <div class='preview-container'>
<canvas id="animated-preview" width="256" height="256"></canvas> <canvas id="animated-preview" width="256" height="256"></canvas>
<div>
<label>Preview FPS:</label><input id="preview-fps" type="text" value="12" />
</div>
</div> </div>
</div> </div>
<div id="cursorInfo"></div> <div id="cursorInfo"></div>

View File

@ -5,8 +5,40 @@
var piskel = { var piskel = {
init : function () { init : function () {
this.addFrame(); this.addFrame();
this.initPreview();
},
setInterval(this.refreshAnimatedPreview, 500); initPreview : function() {
var scope = this;
var animFPSTuner = document.getElementById("preview-fps");
var animPreviewFPS = parseInt(animFPSTuner.value, 10);
var startPreviewRefresh = function() {
return setInterval(scope.refreshAnimatedPreview, 1000/animPreviewFPS);
};
var refreshUpdater = startPreviewRefresh();
animFPSTuner.addEventListener('keyup', function(evt) {
window.clearInterval(refreshUpdater);
animPreviewFPS = parseInt(animFPSTuner.value, 10);
if(isNaN(animPreviewFPS)) {
animPreviewFPS = 1;
}
if(evt.keyCode == 38) {
animPreviewFPS++;
}
else if (evt.keyCode == 40) {
animPreviewFPS--;
}
if(animPreviewFPS < 1) {
animPreviewFPS = 1;
}
if(animPreviewFPS > 100) {
animPreviewFPS = 100;
}
animFPSTuner.value = animPreviewFPS;
refreshUpdater = startPreviewRefresh();
});
}, },
getCurrentCanvas : function () { getCurrentCanvas : function () {
@ -22,29 +54,50 @@
}, },
createPreviews : function () { createPreviews : function () {
var container = $('preview-list'); var container = $('preview-list'), previewTile;
container.innerHTML = ""; container.innerHTML = "";
for (var i = 0 ; i < frames.length ; i++) { for (var i = 0 ; i < frames.length ; i++) {
var preview = document.createElement("li"); previewTile = this.createPreviewTile(i);
if (index == i) { container.appendChild(previewTile);
preview.className = "selected";
}
var canvasPreview = document.createElement("canvas");
canvasPreview.setAttribute('width', '128');
canvasPreview.setAttribute('height', '128');
canvasPreview.setAttribute('onclick', 'piskel.setFrame('+i+')');
canvasPreview.getContext('2d').drawImage(frames[i], 0, 0, 320, 320, 0, 0 , 128, 128);
preview.appendChild(canvasPreview);
container.appendChild(preview);
} }
}, },
createPreviewTile: function(tileNumber) {
var preview = document.createElement("li");
var classname = "preview-tile";
if (index == tileNumber) {
classname += " selected";
}
preview.className = classname;
var canvasPreview = document.createElement("canvas");
canvasPreview.className = "tile-view"
canvasPreview.setAttribute('width', '128');
canvasPreview.setAttribute('height', '128');
canvasPreview.setAttribute('onclick', 'piskel.setFrame('+ tileNumber +')');
var canvasPreviewDuplicateAction = document.createElement("button");
canvasPreviewDuplicateAction.className = "tile-action"
canvasPreviewDuplicateAction.innerHTML = "dup"
canvasPreviewDuplicateAction.setAttribute('onclick', 'piskel.duplicateFrame('+ tileNumber +')');
canvasPreview.getContext('2d').drawImage(frames[tileNumber], 0, 0, 320, 320, 0, 0 , 128, 128);
preview.appendChild(canvasPreview);
preview.appendChild(canvasPreviewDuplicateAction);
if(frames.length > 1) {
var canvasPreviewDeleteAction = document.createElement("button");
canvasPreviewDeleteAction.className = "tile-action"
canvasPreviewDeleteAction.innerHTML = "del"
canvasPreviewDeleteAction.setAttribute('onclick', 'piskel.removeFrame('+ tileNumber +')');
preview.appendChild(canvasPreviewDeleteAction);
}
return preview;
},
refreshAnimatedPreview : function () { refreshAnimatedPreview : function () {
var context = $('animated-preview').getContext('2d'); var context = $('animated-preview').getContext('2d');
// erase canvas, verify proper way // erase canvas, verify proper way
@ -64,6 +117,30 @@
this.createPreviews(); this.createPreviews();
}, },
removeFrame: function(frameIndex) {
index = frameIndex - 1 < 0 ? 0 : frameIndex - 1;
animIndex = 0;
frames.splice(frameIndex, 1);
$('canvas-container').innerHTML = "";
$('canvas-container').appendChild(this.getCurrentCanvas());
this.createPreviews();
},
duplicateFrame: function(frameIndex) {
index = frameIndex + 1;
animIndex = 0;
var duplicateCanvas = frames[frameIndex].cloneNode(true);
// Copy canvas content:
var context = duplicateCanvas.getContext('2d');
context.drawImage(frames[frameIndex], 0, 0);
// Insert cloned node into frame collection:
frames.splice(frameIndex + 1, 0, duplicateCanvas);
$('canvas-container').innerHTML = "";
$('canvas-container').appendChild(this.getCurrentCanvas());
this.createPreviews();
},
updateCursorInfo : function (event) { updateCursorInfo : function (event) {
var cursor = $('cursorInfo'); var cursor = $('cursorInfo');
cursor.style.top = event.clientY + 10 + "px"; cursor.style.top = event.clientY + 10 + "px";
@ -121,7 +198,7 @@
canvas.setAttribute('height', '320'); canvas.setAttribute('height', '320');
canvas.setAttribute('onmousemove', 'piskel.onCanvasMousemove(arguments[0])'); canvas.setAttribute('onmousemove', 'piskel.onCanvasMousemove(arguments[0])');
canvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(arguments[0])'); canvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(arguments[0])');
canvas.setAttribute('onclick', 'piskel.onCanvasClick(arguments[0])'); //canvas.setAttribute('onclick', 'piskel.onCanvasClick(arguments[0])');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
context.fillStyle = "white"; context.fillStyle = "white";
@ -131,6 +208,8 @@
context.drawImage(frames[index], 0, 0, 320, 320, 0, 0 , 320, 320); context.drawImage(frames[index], 0, 0, 320, 320, 0, 0 , 320, 320);
} }
// TODO: We should probably store some metadata or enhance a domain object instead
// of the rendered view ? It will allow to decouple view and model and clean a bunch of code above.
frames.push(canvas); frames.push(canvas);
this.setFrame(frames.length - 1); this.setFrame(frames.length - 1);
} }