提交 5b4ad590 编写于 作者: M Michel Kaporin

Calculate initial hue and saturation for correct saturation box positioning in...

Calculate initial hue and saturation for correct saturation box positioning in color picker. Fixes #31642
上级 f0e55e7a
......@@ -354,6 +354,20 @@ export class Color {
return lum1 > lum2 ? (lum1 + 0.05) / (lum2 + 0.05) : (lum2 + 0.05) / (lum1 + 0.05);
}
public getSaturation(): number {
const [r, g, b] = [this.rgba.r / 255, this.rgba.g / 255, this.rgba.b / 255];
const cmax = Math.max(r, g, b);
const cmin = Math.min(r, g, b);
if (cmax === 0) {
return 0;
}
return (cmax - cmin) / cmax;
}
public getValue(): number {
return Math.max(this.rgba.r / 255, this.rgba.g / 255, this.rgba.b / 255);
}
/**
* http://24ways.org/2010/calculating-color-contrast
* Return 'true' if darker color otherwise 'false'
......
......@@ -22,6 +22,8 @@ export class ColorPickerModel {
public saturationSelection: ISaturationState;
public originalColor: string;
public colorFormatters: ColorPickerFormatter[];
public saturation: number; // [0-1]
public value: number; // [0-1]
private _color: Color;
private _selectedColor: string;
......@@ -48,6 +50,8 @@ export class ColorPickerModel {
this._opaqueFormatter = opaqueFormatter;
this.colorFormatters = availableFormatters;
this.color = color;
this.saturation = this._color.getSaturation();
this.value = this._color.getValue();
this._colorRange = new Range(range.startLineNumber, range.startColumn, range.endLineNumber, range.endColumn);
}
......
......@@ -166,7 +166,7 @@ export class ColorPickerBody extends Disposable {
dom.append(this.domNode, this.hueStrip);
this.hueSlider = new Slider(this.hueStrip);
this.hueSlider.top = this.hueStrip.offsetHeight * (this.calculateHueValue(this.model.color) / 360);
this.hueSlider.top = this.hueStrip.offsetHeight * (this.calculateHue(this.model.color) / 360);
dom.append(this.hueStrip, this.hueSlider.domNode);
}
......@@ -206,7 +206,7 @@ export class ColorPickerBody extends Disposable {
return Color.fromRGBA(new RGBA(r, g, b));
}
private calculateHueValue(color: Color): number {
private calculateHue(color: Color): number {
const c = color.toRGBA();
const red = c.r / 255;
const green = c.g / 255;
......@@ -233,7 +233,6 @@ export class ColorPickerBody extends Disposable {
return hue;
}
private calculateOpacity(slider: Slider): number {
const opacityNormalizedHeight = this.opacityStrip.offsetHeight - slider.domNode.offsetHeight;
return (opacityNormalizedHeight - slider.top) / opacityNormalizedHeight;
......@@ -262,6 +261,10 @@ export class SaturationBox {
// Add selection circle
this.saturationSelection = $('.saturation-selection');
const saturation = this.model.saturation * this.saturationCanvas.clientWidth;
const selectionHeight = this.model.value * this.saturationCanvas.clientHeight;
const value = selectionHeight === 0 ? this.saturationCanvas.clientHeight : this.saturationCanvas.clientHeight - selectionHeight;
this.focusSaturationSelection({ x: saturation, y: value });
dom.append(this.domNode, this.saturationSelection);
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册