2018-02-08 13:04:42 -05:00
|
|
|
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
|
2019-01-31 09:07:06 -05:00
|
|
|
/* exported BarLevel */
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2019-02-08 22:21:36 -05:00
|
|
|
const { Atk, Clutter, St } = imports.gi;
|
2018-02-08 13:04:42 -05:00
|
|
|
const Signals = imports.signals;
|
|
|
|
|
2017-10-30 21:19:44 -04:00
|
|
|
var BarLevel = class {
|
2019-07-11 19:31:38 -04:00
|
|
|
constructor(value, params = {}) {
|
2018-02-08 13:04:42 -05:00
|
|
|
if (isNaN(value))
|
|
|
|
// Avoid spreading NaNs around
|
|
|
|
throw TypeError('The bar level value must be a number');
|
2018-02-09 08:02:21 -05:00
|
|
|
this._maxValue = 1;
|
|
|
|
this._value = Math.max(Math.min(value, this._maxValue), 0);
|
2018-07-31 09:49:06 -04:00
|
|
|
this._overdriveStart = 1;
|
2018-02-08 13:04:42 -05:00
|
|
|
this._barLevelWidth = 0;
|
|
|
|
|
|
|
|
this.actor = new St.DrawingArea({ styleClass: params['styleClass'] || 'barlevel',
|
|
|
|
can_focus: params['canFocus'] || false,
|
|
|
|
reactive: params['reactive'] || false,
|
|
|
|
accessible_role: params['accessibleRole'] || Atk.Role.LEVEL_BAR });
|
|
|
|
this.actor.connect('repaint', this._barLevelRepaint.bind(this));
|
|
|
|
this.actor.connect('allocation-changed', (actor, box) => {
|
|
|
|
this._barLevelWidth = box.get_width();
|
|
|
|
});
|
|
|
|
|
|
|
|
this._customAccessible = St.GenericAccessible.new_for_actor(this.actor);
|
|
|
|
this.actor.set_accessible(this._customAccessible);
|
|
|
|
|
|
|
|
this._customAccessible.connect('get-current-value', this._getCurrentValue.bind(this));
|
|
|
|
this._customAccessible.connect('get-minimum-value', this._getMinimumValue.bind(this));
|
|
|
|
this._customAccessible.connect('get-maximum-value', this._getMaximumValue.bind(this));
|
|
|
|
this._customAccessible.connect('set-current-value', this._setCurrentValue.bind(this));
|
|
|
|
|
|
|
|
this.connect('value-changed', this._valueChanged.bind(this));
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
|
|
|
setValue(value) {
|
|
|
|
if (isNaN(value))
|
|
|
|
throw TypeError('The bar level value must be a number');
|
|
|
|
|
2018-02-09 08:02:21 -05:00
|
|
|
this._value = Math.max(Math.min(value, this._maxValue), 0);
|
|
|
|
this.actor.queue_repaint();
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-09 08:02:21 -05:00
|
|
|
|
|
|
|
setMaximumValue(value) {
|
|
|
|
if (isNaN(value))
|
|
|
|
throw TypeError('The bar level max value must be a number');
|
|
|
|
|
|
|
|
this._maxValue = Math.max(value, 1);
|
2018-07-31 09:49:06 -04:00
|
|
|
this._overdriveStart = Math.min(this._overdriveStart, this._maxValue);
|
|
|
|
this.actor.queue_repaint();
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-07-31 09:49:06 -04:00
|
|
|
|
|
|
|
setOverdriveStart(value) {
|
|
|
|
if (isNaN(value))
|
|
|
|
throw TypeError('The overdrive limit value must be a number');
|
|
|
|
if (value > this._maxValue)
|
|
|
|
throw new Error(`Tried to set overdrive value to ${value}, ` +
|
|
|
|
`which is a number greater than the maximum allowed value ${this._maxValue}`);
|
|
|
|
|
|
|
|
this._overdriveStart = value;
|
|
|
|
this._value = Math.max(Math.min(value, this._maxValue), 0);
|
2018-02-08 13:04:42 -05:00
|
|
|
this.actor.queue_repaint();
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
|
|
|
_barLevelRepaint(area) {
|
|
|
|
let cr = area.get_context();
|
|
|
|
let themeNode = area.get_theme_node();
|
|
|
|
let [width, height] = area.get_surface_size();
|
|
|
|
|
|
|
|
let barLevelHeight = themeNode.get_length('-barlevel-height');
|
|
|
|
let barLevelBorderRadius = Math.min(width, barLevelHeight) / 2;
|
|
|
|
let fgColor = themeNode.get_foreground_color();
|
|
|
|
|
|
|
|
let barLevelColor = themeNode.get_color('-barlevel-background-color');
|
|
|
|
let barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color');
|
2018-07-31 09:49:06 -04:00
|
|
|
let barLevelOverdriveColor = themeNode.get_color('-barlevel-overdrive-color');
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2018-02-08 13:22:29 -05:00
|
|
|
let barLevelBorderWidth = Math.min(themeNode.get_length('-barlevel-border-width'), 1);
|
|
|
|
let [hasBorderColor, barLevelBorderColor] =
|
|
|
|
themeNode.lookup_color('-barlevel-border-color', false);
|
|
|
|
if (!hasBorderColor)
|
|
|
|
barLevelBorderColor = barLevelColor;
|
|
|
|
let [hasActiveBorderColor, barLevelActiveBorderColor] =
|
|
|
|
themeNode.lookup_color('-barlevel-active-border-color', false);
|
|
|
|
if (!hasActiveBorderColor)
|
|
|
|
barLevelActiveBorderColor = barLevelActiveColor;
|
2018-07-31 09:49:06 -04:00
|
|
|
let [hasOverdriveBorderColor, barLevelOverdriveBorderColor] =
|
|
|
|
themeNode.lookup_color('-barlevel-overdrive-border-color', false);
|
|
|
|
if (!hasOverdriveBorderColor)
|
|
|
|
barLevelOverdriveBorderColor = barLevelOverdriveColor;
|
2018-02-08 13:04:42 -05:00
|
|
|
|
|
|
|
const TAU = Math.PI * 2;
|
|
|
|
|
2018-02-09 08:02:21 -05:00
|
|
|
let endX = 0;
|
|
|
|
if (this._maxValue > 0)
|
|
|
|
endX = barLevelBorderRadius + (width - 2 * barLevelBorderRadius) * this._value / this._maxValue;
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2018-07-31 09:49:06 -04:00
|
|
|
let overdriveSeparatorX = barLevelBorderRadius + (width - 2 * barLevelBorderRadius) * this._overdriveStart / this._maxValue;
|
|
|
|
let overdriveActive = this._overdriveStart !== this._maxValue;
|
|
|
|
let overdriveSeparatorWidth = 0;
|
|
|
|
if (overdriveActive)
|
|
|
|
overdriveSeparatorWidth = themeNode.get_length('-barlevel-overdrive-separator-width');
|
|
|
|
|
2018-02-08 13:04:42 -05:00
|
|
|
/* background bar */
|
2019-01-29 18:01:21 -05:00
|
|
|
cr.arc(width - barLevelBorderRadius - barLevelBorderWidth, height / 2, barLevelBorderRadius, TAU * (3 / 4), TAU * (1 / 4));
|
2018-02-08 13:04:42 -05:00
|
|
|
cr.lineTo(endX, (height + barLevelHeight) / 2);
|
|
|
|
cr.lineTo(endX, (height - barLevelHeight) / 2);
|
|
|
|
cr.lineTo(width - barLevelBorderRadius - barLevelBorderWidth, (height - barLevelHeight) / 2);
|
|
|
|
Clutter.cairo_set_source_color(cr, barLevelColor);
|
|
|
|
cr.fillPreserve();
|
|
|
|
Clutter.cairo_set_source_color(cr, barLevelBorderColor);
|
|
|
|
cr.setLineWidth(barLevelBorderWidth);
|
|
|
|
cr.stroke();
|
|
|
|
|
|
|
|
/* normal progress bar */
|
2018-07-31 09:49:06 -04:00
|
|
|
let x = Math.min(endX, overdriveSeparatorX - overdriveSeparatorWidth / 2);
|
2019-01-29 18:01:21 -05:00
|
|
|
cr.arc(barLevelBorderRadius + barLevelBorderWidth, height / 2, barLevelBorderRadius, TAU * (1 / 4), TAU * (3 / 4));
|
2018-07-31 09:49:06 -04:00
|
|
|
cr.lineTo(x, (height - barLevelHeight) / 2);
|
|
|
|
cr.lineTo(x, (height + barLevelHeight) / 2);
|
2018-02-08 13:04:42 -05:00
|
|
|
cr.lineTo(barLevelBorderRadius + barLevelBorderWidth, (height + barLevelHeight) / 2);
|
2019-02-02 11:01:29 -05:00
|
|
|
if (this._value > 0)
|
2019-01-29 14:36:54 -05:00
|
|
|
Clutter.cairo_set_source_color(cr, barLevelActiveColor);
|
2018-02-08 13:04:42 -05:00
|
|
|
cr.fillPreserve();
|
|
|
|
Clutter.cairo_set_source_color(cr, barLevelActiveBorderColor);
|
|
|
|
cr.setLineWidth(barLevelBorderWidth);
|
|
|
|
cr.stroke();
|
|
|
|
|
2018-07-31 09:49:06 -04:00
|
|
|
/* overdrive progress barLevel */
|
|
|
|
x = Math.min(endX, overdriveSeparatorX) + overdriveSeparatorWidth / 2;
|
|
|
|
if (this._value > this._overdriveStart) {
|
|
|
|
cr.moveTo(x, (height - barLevelHeight) / 2);
|
|
|
|
cr.lineTo(endX, (height - barLevelHeight) / 2);
|
|
|
|
cr.lineTo(endX, (height + barLevelHeight) / 2);
|
|
|
|
cr.lineTo(x, (height + barLevelHeight) / 2);
|
|
|
|
cr.lineTo(x, (height - barLevelHeight) / 2);
|
|
|
|
Clutter.cairo_set_source_color(cr, barLevelOverdriveColor);
|
|
|
|
cr.fillPreserve();
|
|
|
|
Clutter.cairo_set_source_color(cr, barLevelOverdriveBorderColor);
|
|
|
|
cr.setLineWidth(barLevelBorderWidth);
|
|
|
|
cr.stroke();
|
|
|
|
}
|
|
|
|
|
2018-02-08 13:04:42 -05:00
|
|
|
/* end progress bar arc */
|
2019-02-02 11:01:29 -05:00
|
|
|
if (this._value > 0) {
|
2019-01-29 14:36:54 -05:00
|
|
|
if (this._value <= this._overdriveStart)
|
|
|
|
Clutter.cairo_set_source_color(cr, barLevelActiveColor);
|
|
|
|
else
|
|
|
|
Clutter.cairo_set_source_color(cr, barLevelOverdriveColor);
|
|
|
|
cr.arc(endX, height / 2, barLevelBorderRadius, TAU * (3 / 4), TAU * (1 / 4));
|
|
|
|
cr.lineTo(Math.floor(endX), (height + barLevelHeight) / 2);
|
|
|
|
cr.lineTo(Math.floor(endX), (height - barLevelHeight) / 2);
|
|
|
|
cr.lineTo(endX, (height - barLevelHeight) / 2);
|
|
|
|
cr.fillPreserve();
|
|
|
|
cr.setLineWidth(barLevelBorderWidth);
|
|
|
|
cr.stroke();
|
2019-02-02 11:01:29 -05:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2018-07-31 09:49:06 -04:00
|
|
|
/* draw overdrive separator */
|
|
|
|
if (overdriveActive) {
|
|
|
|
cr.moveTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2);
|
|
|
|
cr.lineTo(overdriveSeparatorX + overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2);
|
|
|
|
cr.lineTo(overdriveSeparatorX + overdriveSeparatorWidth / 2, (height + barLevelHeight) / 2);
|
|
|
|
cr.lineTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height + barLevelHeight) / 2);
|
|
|
|
cr.lineTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2);
|
|
|
|
if (this._value <= this._overdriveStart)
|
|
|
|
Clutter.cairo_set_source_color(cr, fgColor);
|
|
|
|
else
|
|
|
|
Clutter.cairo_set_source_color(cr, barLevelColor);
|
|
|
|
cr.fill();
|
|
|
|
}
|
|
|
|
|
2018-02-08 13:04:42 -05:00
|
|
|
cr.$dispose();
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2019-02-04 06:30:53 -05:00
|
|
|
_getCurrentValue() {
|
2018-02-08 13:04:42 -05:00
|
|
|
return this._value;
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2019-02-04 06:30:53 -05:00
|
|
|
_getOverdriveStart() {
|
2018-07-31 09:49:06 -04:00
|
|
|
return this._overdriveStart;
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-07-31 09:49:06 -04:00
|
|
|
|
2019-02-04 06:30:53 -05:00
|
|
|
_getMinimumValue() {
|
2018-02-08 13:04:42 -05:00
|
|
|
return 0;
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2019-02-04 06:30:53 -05:00
|
|
|
_getMaximumValue() {
|
2018-02-09 08:02:21 -05:00
|
|
|
return this._maxValue;
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2019-01-31 09:08:10 -05:00
|
|
|
_setCurrentValue(_actor, value) {
|
2018-02-08 13:04:42 -05:00
|
|
|
this._value = value;
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
2019-02-04 06:30:53 -05:00
|
|
|
_valueChanged() {
|
2018-02-08 13:04:42 -05:00
|
|
|
this._customAccessible.notify("accessible-value");
|
2017-10-30 21:19:44 -04:00
|
|
|
}
|
2018-02-08 13:04:42 -05:00
|
|
|
|
|
|
|
get value() {
|
|
|
|
return this._value;
|
|
|
|
}
|
2017-10-30 21:19:44 -04:00
|
|
|
};
|
2018-02-08 13:04:42 -05:00
|
|
|
Signals.addSignalMethods(BarLevel.prototype);
|