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

adding palette basics

Browse Source
This commit is contained in:
Julian Descottes 2012-08-29 08:39:03 +02:00
parent 5c58db1983
commit 6ea7f74d00
3 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -26,6 +26,8 @@
<div class="canvas-background"></div>
</div>
<input id="color-picker" class="color" type="text" value=""/>
<ul id="palette" onclick="piskel.onPaletteClick(event)">
</ul>
<div class='preview-container'>
<div id='preview-canvas-container' class="canvas-container">
<div class="canvas-background"></div>

4
js/frameSheetModel.js
View File

@ -18,6 +18,10 @@ var FrameSheetModel = (function() {
return true; // I'm always right dude
},
getUsedColors : function () {
return ["#000", "#fff"]
},
// Could be used to pass around model using long GET param (good enough for simple models) and
// do some temporary locastorage
serialize: function() {

38
js/piskel.js
View File

@ -29,7 +29,8 @@
isRightClicked = false,
activeFrameIndex = -1,
animIndex = 0,
penColor = DEFAULT_PEN_COLOR;
penColor = DEFAULT_PEN_COLOR,
paletteColors = [];
var piskel = {
@ -42,6 +43,7 @@
this.initPreviewSlideshow();
this.initAnimationPreview();
this.initColorPicker();
this.initPalette();
},
setActiveFrame: function(index) {
@ -69,11 +71,25 @@
},
initColorPicker: function() {
var colorPicker = document.getElementById('color-picker');
colorPicker.value = DEFAULT_PEN_COLOR;
colorPicker.addEventListener('change', function(evt) {
this.colorPicker = $('color-picker');
this.colorPicker.value = DEFAULT_PEN_COLOR;
this.colorPicker.addEventListener('change', this.onPickerChange.bind(this));
},
onPickerChange : function(evt) {
penColor = colorPicker.value;
});
},
initPalette : function (color) {
var colors = frameSheet.getUsedColors();
var paletteEl = $('palette');
paletteEl.innerHTML = "";
for (var i = 0 ; i < colors.length ; i++) {
var color = colors[i];
var colorEl = document.createElement("li");
colorEl.setAttribute("data-color", color);
paletteEl.appendChild(colorEl);
}
},
initDrawingArea : function() {
@ -87,13 +103,13 @@
drawingAreaContainer.setAttribute('style',
'width:' + framePixelWidth * drawingCanvasDpi + 'px; height:' + framePixelHeight * drawingCanvasDpi + 'px;');
drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(arguments[0])');
drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(event)');
drawingAreaContainer.appendChild(drawingAreaCanvas);
var body = document.getElementsByTagName('body')[0];
body.setAttribute('onmouseup', 'piskel.onCanvasMouseup(arguments[0])');
drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(arguments[0])');
drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(arguments[0])');
drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
this.drawFrameToCanvas(frameSheet.getFrameByIndex(this.getActiveFrameIndex()), drawingAreaCanvas, drawingCanvasDpi);
},
@ -325,6 +341,12 @@
event.cancelBubble = true;
return false;
},
onPaletteClick : function (event) {
var color = event.target.getAttribute("data-color");
var colorPicker = $('color-picker');
colorPicker.color.fromString(color);
},
getRelativeCoordinates : function (x, y) {
var canvasRect = drawingAreaCanvas.getBoundingClientRect();