js: Actorize animated objects

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

View File

@ -1,37 +1,48 @@
/* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */ /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
/* exported BarLevel */ /* exported BarLevel */
const { Atk, Clutter, St } = imports.gi; const { Atk, Clutter, GObject, St } = imports.gi;
const Signals = imports.signals;
var BarLevel = class { var BarLevel = GObject.registerClass({
constructor(value, params = {}) { Properties: {
if (isNaN(value)) 'value': GObject.ParamSpec.double(
// Avoid spreading NaNs around 'value', 'value', 'value',
throw TypeError('The bar level value must be a number'); GObject.ParamFlags.READWRITE,
0, 1, 0),
'maximum-value': GObject.ParamSpec.double(
'maximum-value', 'maximum-value', 'maximum-value',
GObject.ParamFlags.READWRITE,
1, 2, 1),
'overdrive-start': GObject.ParamSpec.double(
'overdrive-start', 'overdrive-start', 'overdrive-start',
GObject.ParamFlags.READWRITE,
1, 2, 1)
}
}, class BarLevel extends St.DrawingArea {
_init(params) {
this._maxValue = 1; this._maxValue = 1;
this._value = Math.max(Math.min(value, this._maxValue), 0); this._value = 0;
this._overdriveStart = 1; this._overdriveStart = 1;
this._barLevelWidth = 0; this._barLevelWidth = 0;
this.actor = new St.DrawingArea({ styleClass: params['styleClass'] || 'barlevel', let defaultParams = {
can_focus: params['canFocus'] || false, style_class: 'barlevel',
reactive: params['reactive'] || false, accessible_role: Atk.Role.LEVEL_BAR
accessible_role: params['accessibleRole'] || Atk.Role.LEVEL_BAR }); };
this.actor.connect('repaint', this._barLevelRepaint.bind(this)); super._init(Object.assign(defaultParams, params));
this.actor.connect('allocation-changed', (actor, box) => { this.connect('allocation-changed', (actor, box) => {
this._barLevelWidth = box.get_width(); this._barLevelWidth = box.get_width();
}); });
this._customAccessible = St.GenericAccessible.new_for_actor(this.actor); this._customAccessible = St.GenericAccessible.new_for_actor(this);
this.actor.set_accessible(this._customAccessible); this.set_accessible(this._customAccessible);
this._customAccessible.connect('get-current-value', this._getCurrentValue.bind(this)); this._customAccessible.connect('get-current-value', this._getCurrentValue.bind(this));
this._customAccessible.connect('get-minimum-value', this._getMinimumValue.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('get-maximum-value', this._getMaximumValue.bind(this));
this._customAccessible.connect('set-current-value', this._setCurrentValue.bind(this)); this._customAccessible.connect('set-current-value', this._setCurrentValue.bind(this));
this.connect('value-changed', this._valueChanged.bind(this)); this.connect('notify::value', this._valueChanged.bind(this));
} }
get value() { get value() {
@ -39,16 +50,15 @@ var BarLevel = class {
} }
set value(value) { set value(value) {
if (isNaN(value))
throw TypeError('The bar level value must be a number');
value = Math.max(Math.min(value, this._maxValue), 0); value = Math.max(Math.min(value, this._maxValue), 0);
if (this._value == value) if (this._value == value)
return; return;
this._value = value; this._value = value;
this.actor.queue_repaint(); this._value = value;
this.notify('value');
this.queue_repaint();
} }
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
@ -58,9 +68,6 @@ var BarLevel = class {
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
set maximum_value(value) { set maximum_value(value) {
if (isNaN(value))
throw TypeError('The bar level max value must be a number');
value = Math.max(value, 1); value = Math.max(value, 1);
if (this._maxValue == value) if (this._maxValue == value)
@ -68,7 +75,8 @@ var BarLevel = class {
this._maxValue = value; this._maxValue = value;
this._overdriveStart = Math.min(this._overdriveStart, this._maxValue); this._overdriveStart = Math.min(this._overdriveStart, this._maxValue);
this.actor.queue_repaint(); this.notify('maximum-value');
this.queue_repaint();
} }
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
@ -78,9 +86,6 @@ var BarLevel = class {
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
set overdrive_start(value) { set overdrive_start(value) {
if (isNaN(value))
throw TypeError('The overdrive limit value must be a number');
if (this._overdriveStart == value) if (this._overdriveStart == value)
return; return;
@ -89,13 +94,14 @@ var BarLevel = class {
`which is a number greater than the maximum allowed value ${this._maxValue}`); `which is a number greater than the maximum allowed value ${this._maxValue}`);
this._overdriveStart = value; this._overdriveStart = value;
this.actor.queue_repaint(); this.notify('overdrive-start');
this.queue_repaint();
} }
_barLevelRepaint(area) { vfunc_repaint() {
let cr = area.get_context(); let cr = this.get_context();
let themeNode = area.get_theme_node(); let themeNode = this.get_theme_node();
let [width, height] = area.get_surface_size(); let [width, height] = this.get_surface_size();
let barLevelHeight = themeNode.get_length('-barlevel-height'); let barLevelHeight = themeNode.get_length('-barlevel-height');
let barLevelBorderRadius = Math.min(width, barLevelHeight) / 2; let barLevelBorderRadius = Math.min(width, barLevelHeight) / 2;
@ -225,5 +231,4 @@ var BarLevel = class {
_valueChanged() { _valueChanged() {
this._customAccessible.notify("accessible-value"); this._customAccessible.notify("accessible-value");
} }
}; });
Signals.addSignalMethods(BarLevel.prototype);

View File

@ -570,11 +570,21 @@ var FocusTracker = class {
}; };
Signals.addSignalMethods(FocusTracker.prototype); Signals.addSignalMethods(FocusTracker.prototype);
var EmojiPager = class EmojiPager { var EmojiPager = GObject.registerClass({
constructor(sections, nCols, nRows) { Signals: {
this.actor = new St.Widget({ layout_manager: new Clutter.BinLayout(), 'emoji': { param_types: [GObject.TYPE_STRING] },
reactive: true, 'page-changed': {
clip_to_allocation: true }); param_types: [GObject.TYPE_INT, GObject.TYPE_INT, GObject.TYPE_INT]
}
}
}, class EmojiPager extends St.Widget {
_init(sections, nCols, nRows) {
super._init({
layout_manager: new Clutter.BinLayout(),
reactive: true,
clip_to_allocation: true
});
this._sections = sections; this._sections = sections;
this._nCols = nCols; this._nCols = nCols;
this._nRows = nRows; this._nRows = nRows;
@ -596,7 +606,7 @@ var EmojiPager = class EmojiPager {
panAction.connect('gesture-cancel', this._onPanCancel.bind(this)); panAction.connect('gesture-cancel', this._onPanCancel.bind(this));
panAction.connect('gesture-end', this._onPanEnd.bind(this)); panAction.connect('gesture-end', this._onPanEnd.bind(this));
this._panAction = panAction; this._panAction = panAction;
this.actor.add_action(panAction); this.add_action(panAction);
} }
get delta() { get delta() {
@ -626,8 +636,8 @@ var EmojiPager = class EmojiPager {
if (followingPage != null) { if (followingPage != null) {
this._followingPanel = this._generatePanel(followingPage); this._followingPanel = this._generatePanel(followingPage);
this._followingPanel.set_pivot_point(0.5, 0.5); this._followingPanel.set_pivot_point(0.5, 0.5);
this.actor.add_child(this._followingPanel); this.add_child(this._followingPanel);
this.actor.set_child_below_sibling(this._followingPanel, this._panel); this.set_child_below_sibling(this._followingPanel, this._panel);
} }
this._followingPage = followingPage; this._followingPage = followingPage;
@ -675,12 +685,12 @@ var EmojiPager = class EmojiPager {
} }
_onPanBegin() { _onPanBegin() {
this._width = this.actor.width; this._width = this.width;
return true; return true;
} }
_onPanEnd() { _onPanEnd() {
if (Math.abs(this._delta) < this.actor.width * PANEL_SWITCH_RELATIVE_DISTANCE) { if (Math.abs(this._delta) < this.width * PANEL_SWITCH_RELATIVE_DISTANCE) {
this._onPanCancel(); this._onPanCancel();
} else { } else {
let value; let value;
@ -705,7 +715,7 @@ var EmojiPager = class EmojiPager {
} }
_onPanCancel() { _onPanCancel() {
let relDelta = Math.abs(this._delta) / this.actor.width; let relDelta = Math.abs(this._delta) / this.width;
let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta); let time = PANEL_SWITCH_ANIMATION_TIME * Math.abs(relDelta);
Tweener.removeTweens(this); Tweener.removeTweens(this);
@ -823,7 +833,7 @@ var EmojiPager = class EmojiPager {
if (!this._panel) { if (!this._panel) {
this._panel = this._generatePanel(nPage); this._panel = this._generatePanel(nPage);
this.actor.add_child(this._panel); this.add_child(this._panel);
} }
let page = this._pages[nPage]; let page = this._pages[nPage];
@ -840,8 +850,7 @@ var EmojiPager = class EmojiPager {
} }
} }
} }
}; });
Signals.addSignalMethods(EmojiPager.prototype);
var EmojiSelection = class EmojiSelection { var EmojiSelection = class EmojiSelection {
constructor() { constructor() {

View File

@ -66,8 +66,11 @@ var OsdWindow = class {
this._label = new St.Label(); this._label = new St.Label();
this._box.add(this._label); this._box.add(this._label);
this._level = new BarLevel.BarLevel(0, { styleClass: 'level' }); this._level = new BarLevel.BarLevel({
this._box.add(this._level.actor); style_class: 'level',
value: 0
});
this._box.add(this._level);
this._hideTimeoutId = 0; this._hideTimeoutId = 0;
this._reset(); this._reset();
@ -107,7 +110,7 @@ var OsdWindow = class {
} }
setLevel(value) { setLevel(value) {
this._level.actor.visible = (value != undefined); this._level.visible = (value != undefined);
if (value != undefined) { if (value != undefined) {
if (this.actor.visible) if (this.actor.visible)
Tweener.addTween(this._level, Tweener.addTween(this._level,

View File

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

View File

@ -33,13 +33,13 @@ var Indicator = class extends PanelMenu.SystemIndicator {
this.menu.addMenuItem(this._item); this.menu.addMenuItem(this._item);
this._slider = new Slider.Slider(0); this._slider = new Slider.Slider(0);
this._slider.connect('value-changed', this._sliderChanged.bind(this)); this._slider.connect('notify::value', this._sliderChanged.bind(this));
this._slider.actor.accessible_name = _("Brightness"); this._slider.accessible_name = _("Brightness");
let icon = new St.Icon({ icon_name: 'display-brightness-symbolic', let icon = new St.Icon({ icon_name: 'display-brightness-symbolic',
style_class: 'popup-menu-icon' }); style_class: 'popup-menu-icon' });
this._item.add(icon); this._item.add(icon);
this._item.add(this._slider.actor, { expand: true }); this._item.add(this._slider, { expand: true });
this._item.connect('button-press-event', (actor, event) => { this._item.connect('button-press-event', (actor, event) => {
return this._slider.startDragging(event); return this._slider.startDragging(event);
}); });
@ -49,8 +49,8 @@ var Indicator = class extends PanelMenu.SystemIndicator {
} }
_sliderChanged(slider, value) { _sliderChanged() {
let percent = value * 100; let percent = this._slider.value * 100;
this._proxy.Brightness = percent; this._proxy.Brightness = percent;
} }

View File

@ -36,12 +36,12 @@ var StreamSlider = class {
this._soundSettings.connect(`changed::${ALLOW_AMPLIFIED_VOLUME_KEY}`, this._amplifySettingsChanged.bind(this)); this._soundSettings.connect(`changed::${ALLOW_AMPLIFIED_VOLUME_KEY}`, this._amplifySettingsChanged.bind(this));
this._amplifySettingsChanged(); this._amplifySettingsChanged();
this._slider.connect('value-changed', this._sliderChanged.bind(this)); this._slider.connect('notify::value', this._sliderChanged.bind(this));
this._slider.connect('drag-end', this._notifyVolumeChange.bind(this)); this._slider.connect('drag-end', this._notifyVolumeChange.bind(this));
this._icon = new St.Icon({ style_class: 'popup-menu-icon' }); this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
this.item.add(this._icon); this.item.add(this._icon);
this.item.add(this._slider.actor, { expand: true }); this.item.add(this._slider, { expand: true });
this.item.connect('button-press-event', (actor, event) => { this.item.connect('button-press-event', (actor, event) => {
return this._slider.startDragging(event); return this._slider.startDragging(event);
}); });
@ -99,10 +99,11 @@ var StreamSlider = class {
return this._slider.scroll(event); return this._slider.scroll(event);
} }
_sliderChanged(slider, value) { _sliderChanged() {
if (!this._stream) if (!this._stream)
return; return;
let value = this._slider.value;
let volume = value * this._control.get_vol_max_norm(); let volume = value * this._control.get_vol_max_norm();
let prevMuted = this._stream.is_muted; let prevMuted = this._stream.is_muted;
if (volume < 1) { if (volume < 1) {
@ -189,7 +190,7 @@ Signals.addSignalMethods(StreamSlider.prototype);
var OutputStreamSlider = class extends StreamSlider { var OutputStreamSlider = class extends StreamSlider {
constructor(control) { constructor(control) {
super(control); super(control);
this._slider.actor.accessible_name = _("Volume"); this._slider.accessible_name = _("Volume");
} }
_connectStream(stream) { _connectStream(stream) {
@ -237,7 +238,7 @@ var OutputStreamSlider = class extends StreamSlider {
var InputStreamSlider = class extends StreamSlider { var InputStreamSlider = class extends StreamSlider {
constructor(control) { constructor(control) {
super(control); super(control);
this._slider.actor.accessible_name = _("Microphone"); this._slider.accessible_name = _("Microphone");
this._control.connect('stream-added', this._maybeShowInput.bind(this)); this._control.connect('stream-added', this._maybeShowInput.bind(this));
this._control.connect('stream-removed', this._maybeShowInput.bind(this)); this._control.connect('stream-removed', this._maybeShowInput.bind(this));
this._icon.icon_name = 'audio-input-microphone-symbolic'; this._icon.icon_name = 'audio-input-microphone-symbolic';

View File

@ -244,21 +244,24 @@ var ThumbnailState = {
/** /**
* @metaWorkspace: a #Meta.Workspace * @metaWorkspace: a #Meta.Workspace
*/ */
var WorkspaceThumbnail = class { var WorkspaceThumbnail = GObject.registerClass(
constructor(metaWorkspace) { class WorkspaceThumbnail extends St.Widget {
_init(metaWorkspace) {
super._init({
clip_to_allocation: true,
style_class: 'workspace-thumbnail'
});
this._delegate = this;
this.metaWorkspace = metaWorkspace; this.metaWorkspace = metaWorkspace;
this.monitorIndex = Main.layoutManager.primaryIndex; this.monitorIndex = Main.layoutManager.primaryIndex;
this._removed = false; this._removed = false;
this.actor = new St.Widget({ clip_to_allocation: true,
style_class: 'workspace-thumbnail' });
this.actor._delegate = this;
this._contents = new Clutter.Actor(); this._contents = new Clutter.Actor();
this.actor.add_child(this._contents); this.add_child(this._contents);
this.actor.connect('destroy', this._onDestroy.bind(this)); this.connect('destroy', this._onDestroy.bind(this));
this._createBackground(); this._createBackground();
@ -308,7 +311,7 @@ var WorkspaceThumbnail = class {
} }
setPorthole(x, y, width, height) { setPorthole(x, y, width, height) {
this.actor.set_size(width, height); this.set_size(width, height);
this._contents.set_position(-x, -y); this._contents.set_position(-x, -y);
} }
@ -336,7 +339,7 @@ var WorkspaceThumbnail = class {
set slidePosition(slidePosition) { set slidePosition(slidePosition) {
this._slidePosition = slidePosition; this._slidePosition = slidePosition;
this.actor.queue_relayout(); this.queue_relayout();
} }
get slidePosition() { get slidePosition() {
@ -345,7 +348,7 @@ var WorkspaceThumbnail = class {
set collapseFraction(collapseFraction) { set collapseFraction(collapseFraction) {
this._collapseFraction = collapseFraction; this._collapseFraction = collapseFraction;
this.actor.queue_relayout(); this.queue_relayout();
} }
get collapseFraction() { get collapseFraction() {
@ -446,11 +449,6 @@ var WorkspaceThumbnail = class {
this._doAddWindow(metaWin); this._doAddWindow(metaWin);
} }
destroy() {
if (this.actor)
this.actor.destroy();
}
workspaceRemoved() { workspaceRemoved() {
if (this._removed) if (this._removed)
return; return;
@ -475,7 +473,6 @@ var WorkspaceThumbnail = class {
} }
this._windows = []; this._windows = [];
this.actor = null;
} }
// Tests if @actor belongs to this workspace and monitor // Tests if @actor belongs to this workspace and monitor
@ -590,8 +587,7 @@ var WorkspaceThumbnail = class {
return false; return false;
} }
}; });
Signals.addSignalMethods(WorkspaceThumbnail.prototype);
var ThumbnailsBox = GObject.registerClass( var ThumbnailsBox = GObject.registerClass(
@ -688,8 +684,8 @@ class ThumbnailsBox extends St.Widget {
for (let i = 0; i < this._thumbnails.length; i++) { for (let i = 0; i < this._thumbnails.length; i++) {
let thumbnail = this._thumbnails[i]; let thumbnail = this._thumbnails[i];
let [, h] = thumbnail.actor.get_transformed_size(); let [, h] = thumbnail.get_transformed_size();
if (y >= thumbnail.actor.y && y <= thumbnail.actor.y + h) { if (y >= thumbnail.y && y <= thumbnail.y + h) {
thumbnail.activate(time); thumbnail.activate(time);
break; break;
} }
@ -769,14 +765,14 @@ class ThumbnailsBox extends St.Widget {
if (this._dropPlaceholderPos == 0) if (this._dropPlaceholderPos == 0)
targetBase = this._dropPlaceholder.y; targetBase = this._dropPlaceholder.y;
else else
targetBase = this._thumbnails[0].actor.y; targetBase = this._thumbnails[0].y;
let targetTop = targetBase - spacing - WORKSPACE_CUT_SIZE; let targetTop = targetBase - spacing - WORKSPACE_CUT_SIZE;
let length = this._thumbnails.length; let length = this._thumbnails.length;
for (let i = 0; i < length; i ++) { for (let i = 0; i < length; i ++) {
// Allow the reorder target to have a 10px "cut" into // Allow the reorder target to have a 10px "cut" into
// each side of the thumbnail, to make dragging onto the // each side of the thumbnail, to make dragging onto the
// placeholder easier // placeholder easier
let [, h] = this._thumbnails[i].actor.get_transformed_size(); let [, h] = this._thumbnails[i].get_transformed_size();
let targetBottom = targetBase + WORKSPACE_CUT_SIZE; let targetBottom = targetBase + WORKSPACE_CUT_SIZE;
let nextTargetBase = targetBase + h + spacing; let nextTargetBase = targetBase + h + spacing;
let nextTargetTop = nextTargetBase - spacing - ((i == length - 1) ? 0 : WORKSPACE_CUT_SIZE); let nextTargetTop = nextTargetBase - spacing - ((i == length - 1) ? 0 : WORKSPACE_CUT_SIZE);
@ -955,7 +951,7 @@ class ThumbnailsBox extends St.Widget {
thumbnail.setPorthole(this._porthole.x, this._porthole.y, thumbnail.setPorthole(this._porthole.x, this._porthole.y,
this._porthole.width, this._porthole.height); this._porthole.width, this._porthole.height);
this._thumbnails.push(thumbnail); this._thumbnails.push(thumbnail);
this.add_actor(thumbnail.actor); this.add_actor(thumbnail);
if (start > 0 && this._spliceIndex == -1) { if (start > 0 && this._spliceIndex == -1) {
// not the initial fill, and not splicing via DND // not the initial fill, and not splicing via DND
@ -1289,8 +1285,8 @@ class ThumbnailsBox extends St.Widget {
childBox.y1 = y1; childBox.y1 = y1;
childBox.y2 = y1 + portholeHeight; childBox.y2 = y1 + portholeHeight;
thumbnail.actor.set_scale(roundedHScale, roundedVScale); thumbnail.set_scale(roundedHScale, roundedVScale);
thumbnail.actor.allocate(childBox, flags); thumbnail.allocate(childBox, flags);
// We round the collapsing portion so that we don't get thumbnails resizing // We round the collapsing portion so that we don't get thumbnails resizing
// during an animation due to differences in rounded, but leave the uncollapsed // during an animation due to differences in rounded, but leave the uncollapsed
@ -1328,7 +1324,7 @@ class ThumbnailsBox extends St.Widget {
let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) + indicatorThemeNode.get_border_width(St.Side.TOP); let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) + indicatorThemeNode.get_border_width(St.Side.TOP);
this.indicatorY = this._indicator.allocation.y1 + indicatorTopFullBorder; this.indicatorY = this._indicator.allocation.y1 + indicatorTopFullBorder;
Tweener.addTween(this, Tweener.addTween(this,
{ indicatorY: thumbnail.actor.allocation.y1, { indicatorY: thumbnail.allocation.y1,
time: WorkspacesView.WORKSPACE_SWITCH_TIME / 1000, time: WorkspacesView.WORKSPACE_SWITCH_TIME / 1000,
transition: 'easeOutQuad', transition: 'easeOutQuad',
onComplete: () => { onComplete: () => {