brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js: Actorize animated objects

Browse Source 
We have a couple of places where we don't tween the actor, but a
custom property on the delegate object. In order to move those
to Clutter animations, we will need an animatable, so turn those
objects into widget subclasses.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/666
This commit is contained in:
Florian Müllner
2019-07-25 18:53:00 +02:00
parent 928595fe21
commit 3d3dca4aa2
7 changed files with 142 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
js/ui/slider.js
View File

@ -1,27 +1,31 @@
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
/* exported Slider */
const { Atk, Clutter } = imports.gi;
const Signals = imports.signals;
const { Atk, Clutter, GObject } = imports.gi;
const BarLevel = imports.ui.barLevel;
var SLIDER_SCROLL_STEP = 0.02; /* Slider scrolling step in % */
var Slider = class extends BarLevel.BarLevel {
constructor(value) {
let params = {
styleClass: 'slider',
canFocus: true,
var Slider = GObject.registerClass({
Signals: {
'drag-begin': {},
'drag-end': {}
}
}, class Slider extends BarLevel.BarLevel {
_init(value) {
super._init({
value,
style_class: 'slider',
can_focus: true,
reactive: true,
accessibleRole: Atk.Role.SLIDER,
};
super(value, params);
accessible_role: Atk.Role.SLIDER
});
this.actor.connect('button-press-event', this._startDragging.bind(this));
this.actor.connect('touch-event', this._touchDragging.bind(this));
this.actor.connect('scroll-event', this._onScrollEvent.bind(this));
this.actor.connect('key-press-event', this.onKeyPressEvent.bind(this));
this.connect('button-press-event', this._startDragging.bind(this));
this.connect('touch-event', this._touchDragging.bind(this));
this.connect('scroll-event', this._onScrollEvent.bind(this));
this.connect('key-press-event', this.onKeyPressEvent.bind(this));
this._releaseId = this._motionId = 0;
this._dragging = false;
@ -29,13 +33,13 @@ var Slider = class extends BarLevel.BarLevel {
this._customAccessible.connect('get-minimum-increment', this._getMinimumIncrement.bind(this));
}
_barLevelRepaint(area) {
super._barLevelRepaint(area);
vfunc_repaint() {
super.vfunc_repaint();
// Add handle
let cr = area.get_context();
let themeNode = area.get_theme_node();
let [width, height] = area.get_surface_size();
let cr = this.get_context();
let themeNode = this.get_theme_node();
let [width, height] = this.get_surface_size();
let handleRadius = themeNode.get_length('-slider-handle-radius');
@ -72,20 +76,20 @@ var Slider = class extends BarLevel.BarLevel {
let sequence = event.get_event_sequence();
if (sequence != null)
device.sequence_grab(sequence, this.actor);
device.sequence_grab(sequence, this);
else
device.grab(this.actor);
device.grab(this);
this._grabbedDevice = device;
this._grabbedSequence = sequence;
if (sequence == null) {
this._releaseId = this.actor.connect('button-release-event', this._endDragging.bind(this));
this._motionId = this.actor.connect('motion-event', this._motionEvent.bind(this));
this._releaseId = this.connect('button-release-event', this._endDragging.bind(this));
this._motionId = this.connect('motion-event', this._motionEvent.bind(this));
}
// We need to emit 'drag-begin' before moving the handle to make
// sure that no 'value-changed' signal is emitted before this one.
// sure that no 'notify::value' signal is emitted before this one.
this.emit('drag-begin');
let absX, absY;
@ -97,9 +101,9 @@ var Slider = class extends BarLevel.BarLevel {
_endDragging() {
if (this._dragging) {
if (this._releaseId)
this.actor.disconnect(this._releaseId);
this.disconnect(this._releaseId);
if (this._motionId)
this.actor.disconnect(this._motionId);
this.disconnect(this._motionId);
if (this._grabbedSequence != null)
this._grabbedDevice.sequence_ungrab(this._grabbedSequence);
@ -153,8 +157,8 @@ var Slider = class extends BarLevel.BarLevel {
this._value = Math.min(Math.max(0, this._value + delta), this._maxValue);
this.actor.queue_repaint();
this.emit('value-changed', this._value);
this.queue_repaint();
this.notify('value');
return Clutter.EVENT_STOP;
}
@ -174,9 +178,9 @@ var Slider = class extends BarLevel.BarLevel {
if (key == Clutter.KEY_Right || key == Clutter.KEY_Left) {
let delta = key == Clutter.KEY_Right ? 0.1 : -0.1;
this._value = Math.max(0, Math.min(this._value + delta, this._maxValue));
this.actor.queue_repaint();
this.queue_repaint();
this.emit('drag-begin');
this.emit('value-changed', this._value);
this.notify('value');
this.emit('drag-end');
return Clutter.EVENT_STOP;
}
@ -185,11 +189,11 @@ var Slider = class extends BarLevel.BarLevel {
_moveHandle(absX, _absY) {
let relX, sliderX;
[sliderX] = this.actor.get_transformed_position();
[sliderX] = this.get_transformed_position();
relX = absX - sliderX;
let width = this._barLevelWidth;
let handleRadius = this.actor.get_theme_node().get_length('-slider-handle-radius');
let handleRadius = this.get_theme_node().get_length('-slider-handle-radius');
let newvalue;
if (relX < handleRadius)
@ -199,12 +203,11 @@ var Slider = class extends BarLevel.BarLevel {
else
newvalue = (relX - handleRadius) / (width - 2 * handleRadius);
this._value = newvalue * this._maxValue;
this.actor.queue_repaint();
this.emit('value-changed', this._value);
this.queue_repaint();
this.notify('value');
}
_getMinimumIncrement() {
return 0.1;
}
};
Signals.addSignalMethods(Slider.prototype);
});