summaryrefslogtreecommitdiff
path: root/public/assets/javascripts/ui/editor/LightControl.js
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/javascripts/ui/editor/LightControl.js')
-rw-r--r--public/assets/javascripts/ui/editor/LightControl.js268
1 files changed, 114 insertions, 154 deletions
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 84f2e58..76e9da1 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -1,39 +1,41 @@
var LightControl = View.extend({
- el: ".lightcontrol",
-
- events: {
- "mousedown": "stopPropagation",
- "click #wall-color": "editWallColor",
- "click #outline-color": "editOutlineColor",
- "click #floor-color": "editFloorColor",
- "click #ceiling-color": "editCeilingColor",
- "click label": "clickLabel",
- "input #shadow-control": "updateShadow",
- "input #brightness-control": "updateBrightness",
- "input #outline-hue": "updateShadow",
- "input #wall-hue": "updateShadow",
- },
-
- initialize: function(){
- this.colorPicker = new LabColorPicker(this, 180, 180)
- this.$el.prepend( this.colorPicker.canvas )
-
- this.$swatches = this.$(".swatch")
- this.$labels = this.$(".swatch + label")
- this.$wallSwatch = this.$("#wall-color")
- this.$outlineSwatch = this.$("#outline-color")
- this.$floorSwatch = this.$("#floor-color")
- this.$ceilingSwatch = this.$("#ceiling-color")
- this.$brightnessControl = this.$("#brightness-control")
- },
+ el: ".lightcontrol",
+
+ events: {
+ "mousedown": "stopPropagation",
+ "click .swatch": "clickSwatch",
+ "click label": "clickLabel",
+ "input #shadow-control": "updateShadow",
+ "mousedown #brightness-control": "beginBrightness",
+ "input #brightness-control": "updateBrightness",
+ "input #outline-hue": "updateShadow",
+ "input #wall-hue": "updateShadow",
+ },
+
+ initialize: function(){
+ this.colorPicker = new LabColorPicker(this, 180, 180)
+ this.$el.prepend( this.colorPicker.canvas )
+
+ this.$swatches = this.$(".swatch")
+ this.$labels = this.$(".swatch + label")
+ this.$swatch = {
+ wall: this.$("#wall-color"),
+ outline: this.$("#outline-color"),
+ floor: this.$("#floor-color"),
+ ceiling: this.$("#ceiling-color"),
+ }
+ this.$brightnessControl = this.$("#brightness-control")
+ },
+ modes: [ "wall", "outline", "floor", "ceiling" ],
+
load: function(data){
- this.setWallColor(data.wall, false)
- this.setOutlineColor(data.outline)
- this.setFloorColor(data.floor)
- this.setCeilingColor(data.ceiling)
- this.setMode("wall")
+ this.modes.forEach(function(mode){
+ Walls.setColor[mode](data[mode])
+ this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
+ }.bind(this))
+ this.setMode("wall")
},
loadDefaults: function(){
@@ -45,129 +47,85 @@ var LightControl = View.extend({
}
this.load(colors)
},
-
- toggle: function(state){
+
+ toggle: function(state){
this.$el.toggleClass("active", state);
- },
-
- show: function(){
- this.toggle(true)
- },
-
- hide: function(){
- this.toggle(false)
- },
-
- pick: function(rgb, Lab){
- this.labColor = Lab
- switch (this.mode) {
- case "wall":
- this.setWallColor(rgb)
- break
- case "outline":
- this.setOutlineColor(rgb)
- break
- case "floor":
- this.setFloorColor(rgb)
- break
- case "ceiling":
- this.setCeilingColor(rgb)
- break
- }
- },
-
- setMode: function (mode) {
- var color, brightness
- this.mode = mode
+ },
+
+ show: function(){
+ this.toggle(true)
+ },
+
+ hide: function(){
+ this.toggle(false)
+ },
+
+ pick: function(rgb, Lab){
+ this.labColor = Lab
+ this.setSwatchColor(this.mode, rgb)
+ Walls.setColor[ this.mode ](rgb)
+ },
+
+ setSwatchColor: function(mode, rgb) {
+ this.$swatch[ mode ].css("background-color", rgb_string(rgb))
+ },
+
+ initialState: null,
+
+ begin: function(){
+ this.initialState = this.serialize()
+ },
+
+ serialize: function(){
+ return {
+ mode: this.mode,
+ rgb: Walls.colors[ this.mode ]
+ }
+ },
+
+ finalize: function(){
+ if (! this.initialState) { return }
+ UndoStack.push({
+ type: 'update-colors',
+ undo: this.initialState,
+ redo: this.serialize(),
+ })
+ this.initialState = null
+
+ Minotaur.watch( app.router.editorView.settings )
+ },
+
+ setMode: function (mode) {
+ var color, brightness
+ this.mode = mode
this.$swatches.removeClass("selected")
this.$labels.removeClass("selected")
- switch (mode) {
- case "wall":
- this.$wallSwatch.addClass("selected")
- color = this.wallColor
- break
- case "outline":
- this.$outlineSwatch.addClass("selected")
- color = this.outlineColor
- break
- case "floor":
- this.$floorSwatch.addClass("selected")
- color = this.floorColor
- break
- case "ceiling":
- this.$ceilingSwatch.addClass("selected")
- color = this.ceilingColor
- break
- }
+ this.$swatch[ mode ].addClass("selected")
+ 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")
- },
- editWallColor: function(){
- this.setMode("wall")
- },
- editOutlineColor: function(){
- this.setMode("outline")
- },
-
- editFloorColor: function(){
- this.setMode("floor")
- },
-
- editCeilingColor: function(){
- this.setMode("ceiling")
- },
-
- setWallColor: function(rgb, repaint){
- repaint = typeof repaint != "undefined" ? repaint : true
- var rgbColor = rgb_string(rgb)
- var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity)
- Walls.colors.wall = this.wallColor = rgb
- this.$wallSwatch.css("background-color", rgbColor)
- Walls.forEach(function(wall){
- wall.outline(rgbaColor, null)
- })
- },
-
- setFloorColor: function(rgb, repaint){
- repaint = typeof repaint != "undefined" ? repaint : true
- var rgbColor = rgb_string(rgb)
- Walls.colors.floor = this.floorColor = rgb
- this.$floorSwatch.css("background-color", rgbColor)
- Rooms.forEach(function(room){
- room.setFloorColor(rgbColor)
- })
- },
-
- setCeilingColor: function(rgb, repaint){
- repaint = typeof repaint != "undefined" ? repaint : true
- var rgbColor = rgb_string(rgb)
- Walls.colors.ceiling = this.ceilingColor = rgb
- this.$ceilingSwatch.css("background-color", rgbColor)
- Rooms.forEach(function(room){
- room.setCeilingColor(rgbColor)
- })
- },
-
- setOutlineColor: function(rgb){
- repaint = typeof repaint != "undefined" ? repaint : true
- var rgbColor = rgb_string(rgb)
- Walls.colors.outline = this.outlineColor = rgb
- this.$outlineSwatch.css("background-color", rgbColor)
- Walls.forEach(function(wall){
- wall.outline(null, rgbColor)
- })
- },
-
- updateBrightness: function(){
- this.labColor[0] = parseFloat( this.$brightnessControl.val() )
- var rgb = this.colorPicker.setLab( this.labColor )
- this.pick(rgb, this.labColor)
- },
+ 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')
+ this.setMode(mode)
+ },
+
+ beginBrightness: function(){
+ this.begin()
+ $(window).one("mouseup", this.finalize.bind(this))
+ },
+
+ updateBrightness: function(){
+ this.labColor[0] = parseFloat( this.$brightnessControl.val() )
+ var rgb = this.colorPicker.setLab( this.labColor )
+ this.pick(rgb, this.labColor)
+ },
})
@@ -185,8 +143,6 @@ var LabColorPicker = function (parent, w, h) {
canvas.height = h
canvas.className = "colorPicker"
- var down = false
-
var ww = w-1
var hh = h-1
@@ -197,16 +153,20 @@ var LabColorPicker = function (parent, w, h) {
var rgb = [0,0,0]
var val = 80
-
+
this.mouse = new mouse({
el: canvas,
down: function(e, cursor){
+ parent.begin()
cursor.x.a = -cursor.x.a
base.pick(cursor.x.a, cursor.y.a)
},
drag: function(e, cursor){
cursor.x.b = -cursor.x.b
base.pick(cursor.x.b, cursor.y.b)
+ },
+ up: function(){
+ parent.finalize()
}
})
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-19 07:44:05 +0000