diff options
Diffstat (limited to 'public/assets/javascripts/ui/editor/LightControl.js')
| -rw-r--r-- | public/assets/javascripts/ui/editor/LightControl.js | 40 |
1 files changed, 22 insertions, 18 deletions
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index d975180..3eb2861 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -4,8 +4,7 @@ var LightControl = View.extend({ events: { "mousedown": "stopPropagation", - "click .swatch": "clickSwatch", - "click label": "clickLabel", + "click .color-swatches span": "select", "input #shadow-control": "updateShadow", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", @@ -14,8 +13,10 @@ var LightControl = View.extend({ }, initialize: function(){ + this.colorPicker = new LabColorPicker(this, 180, 180) - this.$el.prepend( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.cursor ) this.$swatches = this.$(".swatch") this.$labels = this.$(".swatch + label") @@ -100,21 +101,16 @@ var LightControl = View.extend({ setMode: function (mode) { var color, brightness this.mode = mode - this.$swatches.removeClass("selected") - this.$labels.removeClass("selected") - this.$swatch[ mode ].addClass("selected") + this.$(".active").removeClass("active") + this.$swatch[ mode ].parent().addClass("active") color = Walls.colors[ mode ] - this.$(".swatch.selected").next("label").addClass("selected") this.labColor = this.colorPicker.load(color) this.$brightnessControl.val( this.labColor[0] ) }, - clickLabel: function(e){ - $(e.currentTarget).prev(".swatch").trigger("click") - }, - clickSwatch: function(e){ - var mode = $(e.currentTarget).data('mode') + select: function(e){ + var mode = $('.swatch', e.currentTarget).data('mode') this.setMode(mode) }, @@ -138,8 +134,8 @@ var LabColorPicker = function (parent, w, h) { var imageData = ctx.createImageData(w,h) var data = imageData.data -// var cursor = this.cursor = document.createElement("div") -// cursor.className = "colorPickerCursor" + var cursor = this.cursor = document.createElement("div") + cursor.className = "colorPickerCursor" canvas.width = w canvas.height = h @@ -179,9 +175,12 @@ var LabColorPicker = function (parent, w, h) { return rgb } this.pick = function(i, j){ + i = clamp(i, 0, w) + j = clamp(j, 0, h) var x = mix( i/ww, a_range[0], a_range[1] ) var y = mix( j/hh, b_range[0], b_range[1] ) var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) + this.moveCursor(i, j) parent.pick( rgb, [val,x,y] ) } this.load = function(rgba){ @@ -189,10 +188,15 @@ var LabColorPicker = function (parent, w, h) { var val = clamp( Lab[0], L_range[0], L_range[1] ) var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) - // move the cursor + + this.moveCursor(x,y) this.setLab(Lab) return Lab } + this.moveCursor = function(x,y){ + cursor.style.left = x + "px" + cursor.style.top = y + "px" + } this.paint = function() { val = clamp(val, L_range[0], L_range[1]) var x, y, t @@ -247,11 +251,11 @@ var LabColorPicker = function (parent, w, h) { var var_G = ( RGB[1] / 255 ) // G from 0 to 255 var var_B = ( RGB[2] / 255 ) // B from 0 to 255 - if ( var_R > 0.04045 ) var_R = ( ( var_R + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) else var_R = var_R / 12.92 - if ( var_G > 0.04045 ) var_G = ( ( var_G + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) else var_G = var_G / 12.92 - if ( var_B > 0.04045 ) var_B = ( ( var_B + 0.055 ) / 1.055 ) ^ 2.4 + if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) else var_B = var_B / 12.92 var_R = var_R * 100 |