From 6ea7f74d0033c3aaf877998f0f80880d8ee62f10 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Wed, 29 Aug 2012 08:39:03 +0200 Subject: [PATCH 1/3] adding palette basics --- index.html | 2 ++ js/frameSheetModel.js | 4 ++++ js/piskel.js | 38 ++++++++++++++++++++++++++++++-------- 3 files changed, 36 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 39e3a207..f167a51d 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,8 @@
+
diff --git a/js/frameSheetModel.js b/js/frameSheetModel.js index cb533d1c..38232494 100644 --- a/js/frameSheetModel.js +++ b/js/frameSheetModel.js @@ -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() { diff --git a/js/piskel.js b/js/piskel.js index b033649f..bdb582f9 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -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(); From 3664d87751f4672c703841d82fb3555cee02115d Mon Sep 17 00:00:00 2001 From: Firstname Lastname Date: Wed, 29 Aug 2012 10:15:18 +0200 Subject: [PATCH 2/3] temp commit --- js/frameSheetModel.js | 29 ++++++++++++++++++++++++++++- js/piskel.js | 3 ++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/js/frameSheetModel.js b/js/frameSheetModel.js index 38232494..3a833d6c 100644 --- a/js/frameSheetModel.js +++ b/js/frameSheetModel.js @@ -19,7 +19,34 @@ var FrameSheetModel = (function() { }, getUsedColors : function () { - return ["#000", "#fff"] + var colors = []; + var pixels = this.getAllPixels(); + for (var i = 0 ; i < pixels.length ; i++) { + var pixel = pixels[i]; + if (pixel && colors.indexOf(pixel)) { + colors.push(pixel); + } + } + return colors; + }, + + getAllPixels : function () { + var pixels = []; + for (var i = 0 ; i < frames.length ; i++) { + pixels = pixels.concat(this.getFramePixels(frames[i])); + } + return pixels; + }, + + getFramePixels : function (frame) { + var pixels = []; + for (var i = 0 ; i < frame.length ; i++) { + var line = frame[i]; + for (var j = 0 ; j < line.length ; j++) { + pixels.push(line[j]); + } + } + return pixels; }, // Could be used to pass around model using long GET param (good enough for simple models) and diff --git a/js/piskel.js b/js/piskel.js index bdb582f9..090535d6 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -77,7 +77,7 @@ }, onPickerChange : function(evt) { - penColor = colorPicker.value; + penColor = "#" + this.colorPicker.value; }, initPalette : function (color) { @@ -88,6 +88,7 @@ var color = colors[i]; var colorEl = document.createElement("li"); colorEl.setAttribute("data-color", color); + colorEl.innerHTML = color; paletteEl.appendChild(colorEl); } }, From 3a4ef0d6eb8a4d1fd0a3f6439c072dad330a3152 Mon Sep 17 00:00:00 2001 From: Firstname Lastname Date: Wed, 29 Aug 2012 10:46:25 +0200 Subject: [PATCH 3/3] palette finished + firefox fix --- css/piskel.css | 36 ------------------------------------ css/style.css | 7 +++++++ js/frameSheetModel.js | 16 ++-------------- js/piskel.js | 39 ++++++++++++++++++++++++--------------- 4 files changed, 33 insertions(+), 65 deletions(-) delete mode 100644 css/piskel.css diff --git a/css/piskel.css b/css/piskel.css deleted file mode 100644 index c384327b..00000000 --- a/css/piskel.css +++ /dev/null @@ -1,36 +0,0 @@ -html, body { - height : 100%; -} - -.debug { - border : 1px Solid black; -} - -.left-nav { - position:absolute; - top : 0; - bottom : 0; - width : 200px; - background : #000; -} - -.main-panel { - position:absolute; - top : 0; - bottom : 0; - left : 200px; - right : 0; - background : #ccc; -} - -.preview-container { - position : absolute; - top : 30px; - right : 0; - height : 200px; - width : 200px; - background : white; - border : 0px Solid black; - border-radius:5px 0px 0px 5px; - box-shadow : 0px 0px 2px rgba(0,0,0,0.2); -} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 9136c5f0..3914911a 100644 --- a/css/style.css +++ b/css/style.css @@ -127,6 +127,13 @@ ul, li { z-index: 1; } +#palette li { + display : inline-block; + height : 20px; + width : 20px; + margin : 5px; +} + /* Force apparition of scrollbars on leopard */ ::-webkit-scrollbar { -webkit-appearance: none; diff --git a/js/frameSheetModel.js b/js/frameSheetModel.js index 3a833d6c..e322cda4 100644 --- a/js/frameSheetModel.js +++ b/js/frameSheetModel.js @@ -18,27 +18,15 @@ var FrameSheetModel = (function() { return true; // I'm always right dude }, - getUsedColors : function () { - var colors = []; - var pixels = this.getAllPixels(); - for (var i = 0 ; i < pixels.length ; i++) { - var pixel = pixels[i]; - if (pixel && colors.indexOf(pixel)) { - colors.push(pixel); - } - } - return colors; - }, - getAllPixels : function () { var pixels = []; for (var i = 0 ; i < frames.length ; i++) { - pixels = pixels.concat(this.getFramePixels(frames[i])); + pixels = pixels.concat(this._getFramePixels(frames[i])); } return pixels; }, - getFramePixels : function (frame) { + _getFramePixels : function (frame) { var pixels = []; for (var i = 0 ; i < frame.length ; i++) { var line = frame[i]; diff --git a/js/piskel.js b/js/piskel.js index 090535d6..619af33d 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -4,7 +4,7 @@ // Constants: TRANSPARENT_COLOR = 'tc', //TRANSPARENT_COLOR = 'pink', - DEFAULT_PEN_COLOR = '#000', + DEFAULT_PEN_COLOR = '#000000', // Configuration: // Canvas size in pixel size (not dpi related) @@ -39,11 +39,11 @@ frameSheet.addEmptyFrame(); this.setActiveFrame(0); + this.initPalette(); this.initDrawingArea(); this.initPreviewSlideshow(); this.initAnimationPreview(); this.initColorPicker(); - this.initPalette(); }, setActiveFrame: function(index) { @@ -77,19 +77,25 @@ }, onPickerChange : function(evt) { - penColor = "#" + this.colorPicker.value; + penColor = this.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 pixels = frameSheet.getAllPixels(); + this.paletteEl = $('palette'); + for (var i = 0 ; i < pixels.length ; i++) { + this.addColorToPalette(pixels[i]); + } + }, + + addColorToPalette : function (color) { + if (color && color != TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) { var colorEl = document.createElement("li"); colorEl.setAttribute("data-color", color); - colorEl.innerHTML = color; - paletteEl.appendChild(colorEl); + colorEl.setAttribute("title", color); + colorEl.style.background = color; + this.paletteEl.appendChild(colorEl); + paletteColors.push(color); } }, @@ -323,15 +329,15 @@ 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++) { pixelColor = frame[col][row]; - if(pixelColor == undefined || pixelColor == TRANSPARENT_COLOR) { context.clearRect(col * dpi, row * dpi, dpi, dpi); } else { + if (pixelColor.indexOf("#") != 0) + pixelColor = "#" + pixelColor; + this.addColorToPalette(pixelColor); context.fillStyle = pixelColor; context.fillRect(col * dpi, row * dpi, dpi, dpi); } - - } } }, @@ -345,8 +351,11 @@ onPaletteClick : function (event) { var color = event.target.getAttribute("data-color"); - var colorPicker = $('color-picker'); - colorPicker.color.fromString(color); + if (null !== color) { + var colorPicker = $('color-picker'); + colorPicker.color.fromString(color); + this.onPickerChange(); + } }, getRelativeCoordinates : function (x, y) {