Skip to content

Commit

Permalink
perf enhancements for color picker (especially for hxcpp)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianharrigan
ianharrigan committed Mar 31, 2024
1 parent 53b559b commit ea649b7
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 52 deletions.
112 changes: 72 additions & 40 deletions haxe/ui/components/ColorPicker.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import haxe.ui.events.MouseEvent;
import haxe.ui.events.UIEvent;
import haxe.ui.geom.Point;
import haxe.ui.util.Color;
import haxe.ui.util.ColorUtil;
import haxe.ui.util.ColorUtil.HSV;
import haxe.ui.util.ColorUtil;

/**
A visual color picker that allows the user to pick a color from either an HSV color space,
Expand Down Expand Up @@ -220,45 +220,65 @@ private class HSVColorPickerImpl extends ColorPickerImpl {
}
}

private var _saturationValueGraphBytes:Bytes = null;
private var _saturationValueGraphLastHue:Null<Float> = null;
private function updateSaturationValueGraph() {
var cx = saturationValueGraph.width;
var cy = saturationValueGraph.height;
if (cx <= 0 || cy <= 0) {
return;
}

var requiresRedraw = true;
if (_saturationValueGraphLastHue != null && _saturationValueGraphLastHue == _currentColorHSV.h) {
requiresRedraw = false;
}

//Seemingly breaks the color picker for no reason, commenting just in case.
/*
if (_currentColorRGBF.r == 255 && _currentColorRGBF.g == 255 && _currentColorRGBF.b == 255) {
return;
}
*/

var stepX = 100 / cx;
var stepY = 100 / cy;
var bytes = Bytes.alloc(Std.int(cx * cy * 4));
for (y in 0...Std.int(cy)) {
for (x in 0...Std.int(cx)) {
var i:Int = Std.int(y * (cx * 4) + x * 4);
var pixel = ColorUtil.hsvToRGBF(_currentColorHSV.h - 1, (x + 1) * stepX, 100 - (y * stepY));
if (picker.disabled) {
var greypixel = ColorUtil.rgbToGray(Math.round(pixel.r), Math.round(pixel.g), Math.round(pixel.b));
bytes.set(i + 0, greypixel);
bytes.set(i + 1, greypixel);
bytes.set(i + 2, greypixel);
bytes.set(i + 3, 0xFF);
} else {
bytes.set(i + 0, Math.round(pixel.r));
bytes.set(i + 1, Math.round(pixel.g));
bytes.set(i + 2, Math.round(pixel.b));
bytes.set(i + 3, 0xFF);
if (requiresRedraw) {
_saturationValueGraphLastHue = _currentColorHSV.h;

var bytesSize = Std.int(cx * cy * 4);
if (_saturationValueGraphBytes == null) {
_saturationValueGraphBytes = Bytes.alloc(bytesSize);
}
if (_saturationValueGraphBytes.length != bytesSize) {
_saturationValueGraphBytes = Bytes.alloc(bytesSize);
}

var stepX = 100 / cx;
var stepY = 100 / cy;
for (y in 0...Std.int(cy)) {
for (x in 0...Std.int(cx)) {
var i:Int = Std.int(y * (cx * 4) + x * 4);
var pixel = ColorUtil.hsvToRGBF(_currentColorHSV.h - 1, (x + 1) * stepX, 100 - (y * stepY));
if (picker.disabled) {
var greypixel = ColorUtil.rgbToGray(Math.round(pixel.r), Math.round(pixel.g), Math.round(pixel.b));
_saturationValueGraphBytes.set(i + 0, greypixel);
_saturationValueGraphBytes.set(i + 1, greypixel);
_saturationValueGraphBytes.set(i + 2, greypixel);
_saturationValueGraphBytes.set(i + 3, 0xFF);
} else {
_saturationValueGraphBytes.set(i + 0, Math.round(pixel.r));
_saturationValueGraphBytes.set(i + 1, Math.round(pixel.g));
_saturationValueGraphBytes.set(i + 2, Math.round(pixel.b));
_saturationValueGraphBytes.set(i + 3, 0xFF);
}
}
}

saturationValueGraph.componentGraphics.clear();
saturationValueGraph.componentGraphics.setPixels(_saturationValueGraphBytes);
}
saturationValueGraph.componentGraphics.clear();
saturationValueGraph.componentGraphics.setPixels(bytes);
}

private var _hueGraphBytes:Bytes = null;
private function updateHueGraph() {
var cx = hueGraph.width;
var cy = hueGraph.height;
Expand All @@ -273,28 +293,40 @@ private class HSVColorPickerImpl extends ColorPickerImpl {
}
*/

var step = 360 / cx;
var bytes = Bytes.alloc(Std.int(cx * cy * 4));
for (y in 0...Std.int(cy)) {
for (x in 0...Std.int(cx)) {
var i:Int = Std.int(y * (cx * 4) + x * 4);
var c = ColorUtil.hsvToRGBF(x * step, 100, 100);
if (picker.disabled) {
var greypixel = ColorUtil.rgbToGray(Math.round(c.r), Math.round(c.g), Math.round(c.b));
bytes.set(i + 0, greypixel);
bytes.set(i + 1, greypixel);
bytes.set(i + 2, greypixel);
bytes.set(i + 3, 0xFF);
} else {
bytes.set(i + 0, Math.round(c.r));
bytes.set(i + 1, Math.round(c.g));
bytes.set(i + 2, Math.round(c.b));
bytes.set(i + 3, 0xFF);
var requiresRedraw = true;

if (requiresRedraw) {
var bytesSize = Std.int(cx * cy * 4);
if (_hueGraphBytes == null) {
_hueGraphBytes = Bytes.alloc(bytesSize);
}
if (_hueGraphBytes.length != bytesSize) {
_hueGraphBytes = Bytes.alloc(bytesSize);
}

var step = 360 / cx;
for (y in 0...Std.int(cy)) {
for (x in 0...Std.int(cx)) {
var i:Int = Std.int(y * (cx * 4) + x * 4);
var c = ColorUtil.hsvToRGBF(x * step, 100, 100);
if (picker.disabled) {
var greypixel = ColorUtil.rgbToGray(Math.round(c.r), Math.round(c.g), Math.round(c.b));
_hueGraphBytes.set(i + 0, greypixel);
_hueGraphBytes.set(i + 1, greypixel);
_hueGraphBytes.set(i + 2, greypixel);
_hueGraphBytes.set(i + 3, 0xFF);
} else {
_hueGraphBytes.set(i + 0, Math.round(c.r));
_hueGraphBytes.set(i + 1, Math.round(c.g));
_hueGraphBytes.set(i + 2, Math.round(c.b));
_hueGraphBytes.set(i + 3, 0xFF);
}
}
}

hueGraph.componentGraphics.clear();
hueGraph.componentGraphics.setPixels(_hueGraphBytes);
}
hueGraph.componentGraphics.clear();
hueGraph.componentGraphics.setPixels(bytes);
}

@:bind(controlsStack, UIEvent.CHANGE)
Expand Down
27 changes: 15 additions & 12 deletions haxe/ui/util/ColorUtil.hx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
package haxe.ui.util;

typedef HSL = {
var h:Float;
var s:Float;
var l:Float;
@:structInit
class HSL {
public var h:Float;
public var s:Float;
public var l:Float;
}

typedef HSV = {
var h:Float;
var s:Float;
var v:Float;
@:structInit
class HSV {
public var h:Float;
public var s:Float;
public var v:Float;
}

typedef RGBF = {
var r:Float;
var g:Float;
var b:Float;
@:structInit
class RGBF {
public var r:Float;
public var g:Float;
public var b:Float;
}

// conversion functions extracted from: https://github.com/fponticelli/thx.color
Expand Down

0 comments on commit ea649b7

Please sign in to comment.