367 lines
No EOL
16 KiB
Text
367 lines
No EOL
16 KiB
Text
import "luxe: world" for Entity, UIClear, UILayoutMode, UIBehave, UIContain, Assets, Material, UI, UIEvent
|
|
import "luxe: ui" for Control, UIList, UIWindow, UIButton, UIPanel, UIImage
|
|
import "luxe: id" for ID
|
|
import "luxe: draw" for PathStyle
|
|
import "luxe: math" for Math
|
|
import "luxe: color" for Color
|
|
|
|
class ColorPicker{
|
|
static create(ui: Entity) : Control{
|
|
//parameters - we could expose some of this if we wanted to
|
|
var base_color = [1, 0, 0, 1]
|
|
var base_hsv = Color.rgb2hsv(base_color)
|
|
var base_value_gamma = 1.6
|
|
var base_sat_gamma = 0.8
|
|
var triangle_size = 35 //this is the inner triangle radius
|
|
var outer_ring_size = 200
|
|
var inner_ring_size = 140
|
|
|
|
//setup root
|
|
var panel = UIWindow.create(ui)
|
|
Control.set_size(panel, 350, 400)
|
|
Control.set_id(panel, "panel.%(ID.unique())")
|
|
//Control.set_state_data(panel, base_color) //turns out UIWindows use their own state, whoops
|
|
|
|
var color_view = Control.create(ui)
|
|
Control.set_behave(color_view, UIBehave.fill)
|
|
Control.set_margin(color_view, 0, 40, 0, 0)
|
|
Control.child_add(panel, color_view)
|
|
Control.set_id(panel, "color_view.%(ID.unique())")
|
|
Control.set_state_data(color_view, base_color) //stores state "golbally" for multiple elements in the colorpicker to access
|
|
|
|
var hsv_view = Control.create(ui)
|
|
Control.set_behave(hsv_view, UIBehave.fill)
|
|
Control.set_margin(hsv_view, 0, 0, 0, 0)
|
|
Control.child_add(color_view, hsv_view)
|
|
Control.set_id(panel, "hsv_view.%(ID.unique())")
|
|
|
|
var color_wheel = Control.create(ui)
|
|
Control.set_size(color_wheel, outer_ring_size, outer_ring_size)
|
|
Control.child_add(hsv_view, color_wheel)
|
|
//the wheel has a bunch of state to have stuff be more solid (for example not reset hue when going to [0,0,0,_]) and interaction state
|
|
Control.set_state_data(color_wheel, {"ring":null, "triangle":null,
|
|
"hue": base_hsv.x, "value": base_hsv.z, "saturation": base_hsv.y})
|
|
Control.set_process(color_wheel){|control, state, event, x,y,w,h|
|
|
//this might not be nessecary anymore?
|
|
if(event.control != control) return
|
|
if(event.type == UIEvent.move){
|
|
x = Control.get_pos_x_abs(control)
|
|
y = Control.get_pos_y_abs(control)
|
|
var center = [x + w/2, y + h/2]
|
|
if(state["ring"] == "captured"){ //if we're editing the ring(hue)
|
|
//hue from angle
|
|
var diff = [event.x - center.x, event.y - center.y]
|
|
var angle = Math.atan2(-diff.x, diff.y) + Num.pi
|
|
var hue = angle / Num.tau
|
|
|
|
//change relevant values
|
|
var color = Control.get_state_data(color_view)
|
|
var hsv = [hue, state["saturation"], state["value"], color.a]
|
|
state["hue"] = hue
|
|
color = Color.hsv2rgb(hsv)
|
|
Control.set_state_data(control, state)
|
|
Control.set_state_data(color_view, color)
|
|
UI.events_emit(control, UIEvent.change, state)
|
|
UI.events_emit(color_view, UIEvent.change, color)
|
|
} else if(state["triangle"] == "captured"){ //if we're editing the triangle (saturation & value)
|
|
var diff = [event.x - center.x, event.y - center.y] //position rel to center
|
|
Math.rotate(diff, 0, 0, state["hue"] * -360) //follow triangle rotation
|
|
//constrain to triangle
|
|
constrain_to_triangle(diff, triangle_size)
|
|
|
|
//get saturation based on distance to 2 edges
|
|
var saturation = (-diff.y + triangle_size) / ((-diff.y + triangle_size) + (Math.dot2D(diff, dir_vec(Math.radians(30), 1)) + triangle_size))
|
|
saturation = saturation.pow(base_sat_gamma)
|
|
saturation = saturation.clamp(0, 1)
|
|
|
|
//similarly get value based on distance to other edge
|
|
var value = Math.dot2D(diff, dir_vec(Math.radians(150), 1))
|
|
value = value + triangle_size
|
|
value = value / (triangle_size * 3)
|
|
value = 1 - value
|
|
value = value.pow(base_value_gamma)
|
|
value = value.clamp(0, 1)
|
|
|
|
//calculate and apply relevant values
|
|
var hue = state["hue"]
|
|
var color = Control.get_state_data(color_view)
|
|
var hsv = [hue, saturation, value, color.a]
|
|
hsv[0] = hue
|
|
state["value"] = value
|
|
state["saturation"] = saturation
|
|
color = Color.hsv2rgb(hsv)
|
|
Control.set_state_data(control, state)
|
|
Control.set_state_data(color_view, color)
|
|
UI.events_emit(control, UIEvent.change, state)
|
|
UI.events_emit(color_view, UIEvent.change, color)
|
|
} else { //if we're not editing anything, lets check what we're hovering over!
|
|
var distance = Math.dist2D(center, event)
|
|
//first reset hover state (can only be hover bc we checked for captured)
|
|
state["ring"] = null
|
|
state["triangle"] = null
|
|
//then find actual state
|
|
if(distance > inner_ring_size/2 && distance < outer_ring_size/2){
|
|
state["ring"] = "hover"
|
|
} else if(distance < inner_ring_size/2) { //todo: triangle not round
|
|
state["triangle"] = "hover"
|
|
}
|
|
}
|
|
} else if(event.type == UIEvent.press && event.button == 1) {
|
|
//if we click, check if we're hovering over anything and if so, change it to captured
|
|
var hover_ring = state["ring"] != null //ring is hover (or captured)
|
|
var hover_tri = state["triangle"] != null //triangle is hover (or captured)
|
|
if(hover_ring || hover_tri) UI.capture(control) //if any of both happens, capture this
|
|
if(hover_ring) state["ring"] = "captured"
|
|
if(hover_tri) state["triangle"] = "captured"
|
|
} else if(event.type == UIEvent.release && event.button == 1) { //if we release a click, let go
|
|
x = Control.get_pos_x_abs(control)
|
|
y = Control.get_pos_y_abs(control)
|
|
var center = [x + w/2, y + h/2]
|
|
//todo: avoid code dupe with hover code
|
|
var distance = Math.dist2D(center, event)
|
|
//first reset hover state (can only be hover bc we checked for captured)
|
|
state["ring"] = null
|
|
state["triangle"] = null
|
|
//then find actual state
|
|
if(distance > inner_ring_size/2 && distance < outer_ring_size/2){
|
|
state["ring"] = "hover"
|
|
} else if(distance < inner_ring_size/2) { //todo: triangle not round
|
|
state["triangle"] = "hover"
|
|
}
|
|
UI.uncapture(control)
|
|
}
|
|
}
|
|
Control.set_allow_input(color_wheel, true)
|
|
//update values when some other UI that doesnt care about HSV changes the color
|
|
Control.set_events(color_view) {|event|
|
|
if(event.type == UIEvent.change){
|
|
//construct wheel color
|
|
var wheel_data = Control.get_state_data(color_wheel)
|
|
var wheel_color = Color.hsv2rgb([wheel_data["hue"], wheel_data["saturation"], wheel_data["value"], 1])
|
|
//ignore if its the same (we likely triggered this ourselves) (though this still fails often when 2 multiple land in the event queue)
|
|
if(approx_rgb(wheel_color, event.change, 0.001)) return
|
|
//update the wheel hsv if different
|
|
var hsv = Color.rgb2hsv(event.change)
|
|
//only change hue if saturation is nonzero and theres relevant change (saturation check is bc in rgb greyscale has no hue)
|
|
if(hsv.y > 0.001 && !approx(wheel_data["hue"], hsv.x, 0.001)) wheel_data["hue"] = hsv.x
|
|
//only change if theres relevant change
|
|
if(!approx(wheel_data["saturation"], hsv.y, 0.001)) wheel_data["saturation"] = hsv.y
|
|
if(!approx(wheel_data["value"], hsv.z, 0.001)) wheel_data["value"] = hsv.z
|
|
//also trigger event in self to update stuff like image rotation
|
|
UI.events_emit(color_wheel, UIEvent.change, wheel_data)
|
|
}
|
|
}
|
|
|
|
//ring visuals, interresting stuff happens in shader
|
|
var color_ring = UIImage.create(ui)
|
|
Control.set_size(color_ring, outer_ring_size, outer_ring_size)
|
|
Control.set_contain(color_ring, UIContain.justify)
|
|
var color_ring_mat = Material.create("materials/color_ring")
|
|
Material.set_input(color_ring_mat, "wheel.outer_distance", 0.5)
|
|
Material.set_input(color_ring_mat, "wheel.inner_distance", 0.5 * inner_ring_size / outer_ring_size)
|
|
UIImage.set_material(color_ring, color_ring_mat)
|
|
Control.child_add(color_wheel, color_ring)
|
|
|
|
//triangle visual, interresting stuff happens in shader
|
|
var color_triangle = UIImage.create(ui)
|
|
Control.set_margin(color_triangle, 30, 30, 0, 0)
|
|
Control.set_size(color_triangle, triangle_size * 4, triangle_size*4)
|
|
Control.set_contain(color_triangle, UIContain.justify)
|
|
var color_tri_mat = Material.create("materials/color_triangle")
|
|
Material.set_input(color_tri_mat, "triangle.value_gamma", base_value_gamma)
|
|
Material.set_input(color_tri_mat, "triangle.saturation_gamma", base_sat_gamma)
|
|
Material.set_input(color_tri_mat, "triangle.hue", base_hsv.x)
|
|
UIImage.set_material(color_triangle, color_tri_mat)
|
|
Control.child_add(color_wheel, color_triangle)
|
|
//rotates image when color wheel hue updates
|
|
Control.set_events(color_wheel) {|event|
|
|
if(event.type == UIEvent.change){
|
|
var hue = event.change["hue"]
|
|
UIImage.set_angle(color_triangle, hue * -360)
|
|
Material.set_input(color_tri_mat, "triangle.hue", hue)
|
|
}
|
|
}
|
|
|
|
//overlay does everything thats easier done with direct UI draw functions
|
|
var color_wheel_overlay = Control.create(ui)
|
|
Control.set_behave(color_wheel_overlay, UIBehave.fill)
|
|
Control.set_margin(color_wheel_overlay, 0, 0, 0, 0)
|
|
Control.set_render(color_wheel_overlay){|control, state, x, y, w, h|
|
|
//prep data
|
|
var depth = UI.draw_depth_of(control, 0)
|
|
var center = [x + w/2, y + h/2]
|
|
var style: PathStyle = PathStyle.new()
|
|
|
|
var color = Control.get_state_data(color_view)
|
|
var wheel_data = Control.get_state_data(color_wheel)
|
|
var hue = wheel_data["hue"]
|
|
var value = wheel_data["value"].pow(1/base_value_gamma)
|
|
var saturation = wheel_data["saturation"].pow(1/base_sat_gamma)
|
|
|
|
//draw hue ring borders
|
|
style.color = [0.22, 0.22, 0.22, 1]
|
|
style.thickness = 2
|
|
UI.draw_ring(control, center.x, center.y, depth, outer_ring_size/2, outer_ring_size/2, 0, 360, 8, style)
|
|
UI.draw_ring(control, center.x, center.y, depth, inner_ring_size/2, inner_ring_size/2, 0, 360, 8, style)
|
|
|
|
//draw hue ring color rect
|
|
style.thickness = 3
|
|
if(wheel_data["ring"] != null) {
|
|
style.color = [0.5, 0.5, 0.5, 1]
|
|
} else {
|
|
style.color = [0.22, 0.22, 0.22, 1]
|
|
}
|
|
var size = [20, 30]
|
|
var angle_degree = hue * -360
|
|
var angle_radian = hue * -Num.tau
|
|
var avg_radius = (inner_ring_size + outer_ring_size) / 2 / 2
|
|
var offset = [-angle_radian.sin * avg_radius - size.x/2, -angle_radian.cos * avg_radius - size.y/2]
|
|
UI.draw_quad(control, center.x + offset.x, center.y + offset.y, depth, size.x, size.y, angle_degree, color)
|
|
UI.draw_rect(control, center.x + offset.x, center.y + offset.y, depth, size.x, size.y, angle_degree, style)
|
|
|
|
//draw triangle color dot
|
|
style.thickness = 3
|
|
if(wheel_data["triangle"] != null) {
|
|
style.color = [0.5, 0.5, 0.5, 1]
|
|
} else {
|
|
style.color = [0.22, 0.22, 0.22, 1]
|
|
}
|
|
var v_dist = (1 - value) * (triangle_size * 3) - triangle_size //distance in "value direction" in triangle
|
|
var v_dir = dir_vec(Math.radians(150), 1) //"value direction"
|
|
var v_norm = [-v_dir.y, v_dir.x] //direction orthogonal to "value direction"
|
|
var width = value * triangle_size * 1.73205080756 //width (along value ortho) at current value value
|
|
var pos = [v_dir.x * v_dist + (saturation*2-1) * width * v_norm.x, v_dir.y * v_dist + (saturation*2-1) * width * v_norm.y]
|
|
//adjust for rotation
|
|
Math.rotate(pos, 0, 0, hue * 360)
|
|
var dot_size = 7
|
|
UI.draw_circle(control, center.x + pos.x, center.y + pos.y, depth, dot_size, dot_size, 0, 360, 8, color)
|
|
UI.draw_ring(control, center.x + pos.x, center.y + pos.y, depth, dot_size, dot_size, 0, 360, 8, style)
|
|
}
|
|
Control.child_add(color_wheel, color_wheel_overlay)
|
|
|
|
return panel
|
|
|
|
/*
|
|
|
|
//setup colorspace buttons
|
|
//todo: this should be a dropdown???
|
|
var colorspace_list = UIList.create(ui) //could use naked control but logically its a list?
|
|
Control.child_add(root, colorspace_list)
|
|
//base button size is 92x32 btw
|
|
var space_button_height = 30
|
|
var space_button_width = 50
|
|
for(i in 0...Color_spaces.count){
|
|
var space = Color_spaces[i]
|
|
var colorspace_button = UIButton.create(ui)
|
|
Control.set_size(colorspace_button, space_button_width, space_button_height)
|
|
UIList.add(colorspace_list, colorspace_button)
|
|
UIButton.set_text(colorspace_button, space["name"])
|
|
Control.set_pos(colorspace_button, i * space_button_width, 0) //manually set position
|
|
//todo: add event to actually do stuff here
|
|
}
|
|
Control.set_size(colorspace_list, Control.get_width(root).min(space_button_width * Color_spaces.count), space_button_height)
|
|
//UIList.refresh(colorspace_list) //uilist can only do vertical ordering so far :(
|
|
|
|
//setup uimode buttons
|
|
//todo: this should be a dropdown???
|
|
var mode_list = UIList.create(ui)
|
|
Control.child_add(root, mode_list)
|
|
Control.set_pos(mode_list, 0, space_button_height)
|
|
//base button size is 92x32 btw
|
|
var mode_button_height = 30
|
|
var mode_button_width = 50
|
|
for(i in 0...Modes.count){
|
|
var mode = Modes[i]
|
|
var mode_button = UIButton.create(ui)
|
|
Control.set_size(mode_button, mode_button_width, mode_button_height)
|
|
UIList.add(mode_list, mode_button)
|
|
UIButton.set_text(mode_button, mode["icon"])
|
|
Control.set_pos(mode_button, i * mode_button_width, 0) //manually set position
|
|
//todo: add event to actually do stuff here
|
|
}
|
|
Control.set_size(mode_list, Control.get_width(root).min(mode_button_width * Modes.count), mode_button_height)
|
|
|
|
//setup main editor
|
|
var main_editor_root = Control.create(ui)
|
|
Control.child_add(root, main_editor_root)
|
|
Control.set_size(main_editor_root, 200, 200)
|
|
Control.set_pos(main_editor_root, 0, mode_button_height + space_button_height)
|
|
//todo: configurable default editor
|
|
build_triangle_editor(ui, main_editor_root)
|
|
|
|
//setup sliders
|
|
var sliders_root = Control.create(ui)
|
|
Control.child_add(root, sliders_root)
|
|
Control.set_size(sliders_root, 300, 140)
|
|
Control.set_pos(sliders_root, 0, mode_button_height + space_button_height + 200)
|
|
|
|
//setup text input/output
|
|
var text_io_root = Control.create(ui)
|
|
Control.child_add(root, text_io_root)
|
|
Control.set_size(text_io_root, 150, 100)
|
|
Control.set_pos(text_io_root, 200, 160)
|
|
|
|
//setup preview field (old => new)
|
|
var preview_root = Control.create(ui)
|
|
Control.child_add(root, preview_root)
|
|
Control.set_size(preview_root, 150, 100)
|
|
Control.set_pos(preview_root, 200, 60)
|
|
|
|
|
|
//other stuff? gamma/linear? scene color pick? range toggle (0-1/0-255)? HDR??
|
|
//todo
|
|
|
|
return root
|
|
|
|
*/
|
|
}
|
|
|
|
static approx_rgb(one: Color, other: Color, epsilson: Num) : Bool{
|
|
return approx(one.x, other.x, epsilson) && approx(one.y, other.y, epsilson) && approx(one.z, other.z, epsilson)
|
|
}
|
|
|
|
static approx(one: Num, other: Num, epsilon: Num) : Bool{
|
|
return (one - other).abs < epsilon
|
|
}
|
|
|
|
//if this goes into the actual engine and not editor code this should take degree
|
|
//but I like radians better :)
|
|
static dir_vec(angle: Num, length: Num) : List{
|
|
return [angle.cos * length, angle.sin * length]
|
|
}
|
|
|
|
static constrain_to_triangle(pos: List, size: Num){
|
|
//size is the inner radius, so we get half the base by multiplying with tan(60°)
|
|
var base_width = size * 1.73205
|
|
//first, we do the cheap calculation for [0, 1]
|
|
var edge_dist = -(pos.y - size)
|
|
if(edge_dist < 0){
|
|
pos.y = size
|
|
pos.x = pos.x.clamp(-base_width, base_width)
|
|
return
|
|
}
|
|
//then, for the diagonal edges
|
|
var edge_normal = dir_vec(Math.radians(30), 1)
|
|
//first we check the distance from the edge
|
|
edge_dist = Math.dot2D(pos, edge_normal)
|
|
if(edge_dist < -size){
|
|
//if the dot is outside the edge also get the position along the edge tangent so we can constrain it
|
|
var edge_tangent = [edge_normal.y, -edge_normal.x]
|
|
var tangent_dist = Math.dot2D(pos, edge_tangent).clamp(-base_width, base_width)
|
|
//then construct the constrained position at the edge, but keeping the relative, constrained, tangent position
|
|
pos.x = edge_normal.x * -size + edge_tangent.x * tangent_dist
|
|
pos.y = edge_normal.y * -size + edge_tangent.y * tangent_dist
|
|
return
|
|
}
|
|
//same as prev
|
|
edge_normal = dir_vec(Math.radians(150), 1)
|
|
edge_dist = Math.dot2D(pos, edge_normal)
|
|
if(edge_dist < -size){
|
|
var edge_tangent = [edge_normal.y, -edge_normal.x]
|
|
var tangent_dist = Math.dot2D(pos, edge_tangent).clamp(-base_width, base_width)
|
|
pos.x = edge_normal.x * -size + edge_tangent.x * tangent_dist
|
|
pos.y = edge_normal.y * -size + edge_tangent.y * tangent_dist
|
|
return
|
|
}
|
|
}
|
|
} |