brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
0e45273330
gnome-shell/js/ui/screenshot.js
Florian Müllner 2b45a01517 cleanup: Use new indentation style for object literals 
We have made good progress on object literals as well, although there
are still a lot that use the old style, given how ubiquitous object
literals are.

But the needed reindentation isn't overly intrusive, as changes are
limited to the object literals themselves (i.e. they don't affect
surrounding code).

And given that object literals account for quite a bit of the remaining
differences between regular and legacy rules, doing the transition now
is still worthwhile.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2200>
2022-02-23 12:23:52 +00:00

2878 lines
98 KiB
JavaScript
Raw Blame History

// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
/* exported ScreenshotService, ScreenshotUI, showScreenshotUI, captureScreenshot */
const { Clutter, Cogl, Gio, GObject, GLib, Graphene, Gtk, Meta, Shell, St } = imports.gi;
const GrabHelper = imports.ui.grabHelper;
const Layout = imports.ui.layout;
const Lightbox = imports.ui.lightbox;
const Main = imports.ui.main;
const MessageTray = imports.ui.messageTray;
const Workspace = imports.ui.workspace;
Gio._promisify(Shell.Screenshot.prototype, 'pick_color');
Gio._promisify(Shell.Screenshot.prototype, 'screenshot');
Gio._promisify(Shell.Screenshot.prototype, 'screenshot_window');
Gio._promisify(Shell.Screenshot.prototype, 'screenshot_area');
Gio._promisify(Shell.Screenshot.prototype, 'screenshot_stage_to_content');
Gio._promisify(Shell.Screenshot, 'composite_to_stream');
const { loadInterfaceXML } = imports.misc.fileUtils;
const { DBusSenderChecker } = imports.misc.util;
const ScreenshotIface = loadInterfaceXML('org.gnome.Shell.Screenshot');
const ScreencastIface = loadInterfaceXML('org.gnome.Shell.Screencast');
const ScreencastProxy = Gio.DBusProxy.makeProxyWrapper(ScreencastIface);
var IconLabelButton = GObject.registerClass(
class IconLabelButton extends St.Button {
_init(iconName, label, params) {
super._init(params);
this._container = new St.BoxLayout({
vertical: true,
style_class: 'icon-label-button-container',
});
this.set_child(this._container);
this._container.add_child(new St.Icon({ icon_name: iconName }));
this._container.add_child(new St.Label({
text: label,
x_align: Clutter.ActorAlign.CENTER,
}));
}
});
var Tooltip = GObject.registerClass(
class Tooltip extends St.Label {
_init(widget, params) {
super._init(params);
this._widget = widget;
this._timeoutId = null;
this._widget.connect('notify::hover', () => {
if (this._widget.hover)
this.open();
else
this.close();
});
}
open() {
if (this._timeoutId)
return;
this._timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 300, () => {
this.opacity = 0;
this.show();
const extents = this._widget.get_transformed_extents();
const xOffset = Math.floor((extents.get_width() - this.width) / 2);
const x =
Math.clamp(extents.get_x() + xOffset, 0, global.stage.width - this.width);
const node = this.get_theme_node();
const yOffset = node.get_length('-y-offset');
const y = extents.get_y() - this.height - yOffset;
this.set_position(x, y);
this.ease({
opacity: 255,
duration: 150,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
this._timeoutId = null;
return GLib.SOURCE_REMOVE;
});
GLib.Source.set_name_by_id(this._timeoutId, '[gnome-shell] tooltip.open');
}
close() {
if (this._timeoutId) {
GLib.source_remove(this._timeoutId);
this._timeoutId = null;
return;
}
if (!this.visible)
return;
this.remove_all_transitions();
this.ease({
opacity: 0,
duration: 100,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this.hide(),
});
}
});
var UIAreaIndicator = GObject.registerClass(
class UIAreaIndicator extends St.Widget {
_init(params) {
super._init(params);
this._topRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-shade' });
this._topRect.add_constraint(new Clutter.BindConstraint({
source: this,
coordinate: Clutter.BindCoordinate.WIDTH,
}));
this._topRect.add_constraint(new Clutter.SnapConstraint({
source: this,
from_edge: Clutter.SnapEdge.TOP,
to_edge: Clutter.SnapEdge.TOP,
}));
this._topRect.add_constraint(new Clutter.SnapConstraint({
source: this,
from_edge: Clutter.SnapEdge.LEFT,
to_edge: Clutter.SnapEdge.LEFT,
}));
this.add_child(this._topRect);
this._bottomRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-shade' });
this._bottomRect.add_constraint(new Clutter.BindConstraint({
source: this,
coordinate: Clutter.BindCoordinate.WIDTH,
}));
this._bottomRect.add_constraint(new Clutter.SnapConstraint({
source: this,
from_edge: Clutter.SnapEdge.BOTTOM,
to_edge: Clutter.SnapEdge.BOTTOM,
}));
this._bottomRect.add_constraint(new Clutter.SnapConstraint({
source: this,
from_edge: Clutter.SnapEdge.LEFT,
to_edge: Clutter.SnapEdge.LEFT,
}));
this.add_child(this._bottomRect);
this._leftRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-shade' });
this._leftRect.add_constraint(new Clutter.SnapConstraint({
source: this,
from_edge: Clutter.SnapEdge.LEFT,
to_edge: Clutter.SnapEdge.LEFT,
}));
this._leftRect.add_constraint(new Clutter.SnapConstraint({
source: this._topRect,
from_edge: Clutter.SnapEdge.TOP,
to_edge: Clutter.SnapEdge.BOTTOM,
}));
this._leftRect.add_constraint(new Clutter.SnapConstraint({
source: this._bottomRect,
from_edge: Clutter.SnapEdge.BOTTOM,
to_edge: Clutter.SnapEdge.TOP,
}));
this.add_child(this._leftRect);
this._rightRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-shade' });
this._rightRect.add_constraint(new Clutter.SnapConstraint({
source: this,
from_edge: Clutter.SnapEdge.RIGHT,
to_edge: Clutter.SnapEdge.RIGHT,
}));
this._rightRect.add_constraint(new Clutter.SnapConstraint({
source: this._topRect,
from_edge: Clutter.SnapEdge.TOP,
to_edge: Clutter.SnapEdge.BOTTOM,
}));
this._rightRect.add_constraint(new Clutter.SnapConstraint({
source: this._bottomRect,
from_edge: Clutter.SnapEdge.BOTTOM,
to_edge: Clutter.SnapEdge.TOP,
}));
this.add_child(this._rightRect);
this._selectionRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-selection' });
this.add_child(this._selectionRect);
this._topRect.add_constraint(new Clutter.SnapConstraint({
source: this._selectionRect,
from_edge: Clutter.SnapEdge.BOTTOM,
to_edge: Clutter.SnapEdge.TOP,
}));
this._bottomRect.add_constraint(new Clutter.SnapConstraint({
source: this._selectionRect,
from_edge: Clutter.SnapEdge.TOP,
to_edge: Clutter.SnapEdge.BOTTOM,
}));
this._leftRect.add_constraint(new Clutter.SnapConstraint({
source: this._selectionRect,
from_edge: Clutter.SnapEdge.RIGHT,
to_edge: Clutter.SnapEdge.LEFT,
}));
this._rightRect.add_constraint(new Clutter.SnapConstraint({
source: this._selectionRect,
from_edge: Clutter.SnapEdge.LEFT,
to_edge: Clutter.SnapEdge.RIGHT,
}));
}
setSelectionRect(x, y, width, height) {
this._selectionRect.set_position(x, y);
this._selectionRect.set_size(width, height);
}
});
var UIAreaSelector = GObject.registerClass({
Signals: { 'drag-started': {}, 'drag-ended': {} },
}, class UIAreaSelector extends St.Widget {
_init(params) {
super._init(params);
// During a drag, this can be Clutter.BUTTON_PRIMARY,
// Clutter.BUTTON_SECONDARY or the string "touch" to identify the source
// of the drag operation.
this._dragButton = 0;
this._dragSequence = null;
this._areaIndicator = new UIAreaIndicator();
this._areaIndicator.add_constraint(new Clutter.BindConstraint({
source: this,
coordinate: Clutter.BindCoordinate.ALL,
}));
this.add_child(this._areaIndicator);
this._topLeftHandle = new St.Widget({ style_class: 'screenshot-ui-area-selector-handle' });
this.add_child(this._topLeftHandle);
this._topRightHandle = new St.Widget({ style_class: 'screenshot-ui-area-selector-handle' });
this.add_child(this._topRightHandle);
this._bottomLeftHandle = new St.Widget({ style_class: 'screenshot-ui-area-selector-handle' });
this.add_child(this._bottomLeftHandle);
this._bottomRightHandle = new St.Widget({ style_class: 'screenshot-ui-area-selector-handle' });
this.add_child(this._bottomRightHandle);
// This will be updated before the first drawn frame.
this._handleSize = 0;
this._topLeftHandle.connect('style-changed', widget => {
this._handleSize = widget.get_theme_node().get_width();
this._updateSelectionRect();
});
this.connect('notify::mapped', () => {
if (this.mapped) {
const [x, y] = global.get_pointer();
this._updateCursor(x, y);
}
});
// Initialize area to out of bounds so reset() below resets it.
this._startX = -1;
this._startY = 0;
this._lastX = 0;
this._lastY = 0;
this.reset();
}
reset() {
this.stopDrag();
global.display.set_cursor(Meta.Cursor.DEFAULT);
// Preserve area selection if possible. If the area goes out of bounds,
// the monitors might have changed, so reset the area.
const [x, y, w, h] = this.getGeometry();
if (x < 0 || y < 0 || x + w > this.width || y + h > this.height) {
// Initialize area to out of bounds so if there's no monitor,
// the area will be reset once a monitor does appear.
this._startX = -1;
this._startY = 0;
this._lastX = 0;
this._lastY = 0;
// This can happen when running headless without any monitors.
if (Main.layoutManager.primaryIndex !== -1) {
const monitor =
Main.layoutManager.monitors[Main.layoutManager.primaryIndex];
this._startX = monitor.x + Math.floor(monitor.width * 3 / 8);
this._startY = monitor.y + Math.floor(monitor.height * 3 / 8);
this._lastX = monitor.x + Math.floor(monitor.width * 5 / 8) - 1;
this._lastY = monitor.y + Math.floor(monitor.height * 5 / 8) - 1;
}
this._updateSelectionRect();
}
}
getGeometry() {
const leftX = Math.min(this._startX, this._lastX);
const topY = Math.min(this._startY, this._lastY);
const rightX = Math.max(this._startX, this._lastX);
const bottomY = Math.max(this._startY, this._lastY);
return [leftX, topY, rightX - leftX + 1, bottomY - topY + 1];
}
_updateSelectionRect() {
const [x, y, w, h] = this.getGeometry();
this._areaIndicator.setSelectionRect(x, y, w, h);
const offset = this._handleSize / 2;
this._topLeftHandle.set_position(x - offset, y - offset);
this._topRightHandle.set_position(x + w - 1 - offset, y - offset);
this._bottomLeftHandle.set_position(x - offset, y + h - 1 - offset);
this._bottomRightHandle.set_position(x + w - 1 - offset, y + h - 1 - offset);
}
_computeCursorType(cursorX, cursorY) {
const [leftX, topY, width, height] = this.getGeometry();
const [rightX, bottomY] = [leftX + width - 1, topY + height - 1];
const [x, y] = [cursorX, cursorY];
// Check if the cursor overlaps the handles first.
const limit = (this._handleSize / 2) ** 2;
if ((leftX - x) ** 2 + (topY - y) ** 2 <= limit)
return Meta.Cursor.NW_RESIZE;
else if ((rightX - x) ** 2 + (topY - y) ** 2 <= limit)
return Meta.Cursor.NE_RESIZE;
else if ((leftX - x) ** 2 + (bottomY - y) ** 2 <= limit)
return Meta.Cursor.SW_RESIZE;
else if ((rightX - x) ** 2 + (bottomY - y) ** 2 <= limit)
return Meta.Cursor.SE_RESIZE;
// Now check the rest of the rectangle.
const threshold =
10 * St.ThemeContext.get_for_stage(global.stage).scaleFactor;
if (leftX - x >= 0 && leftX - x <= threshold) {
if (topY - y >= 0 && topY - y <= threshold)
return Meta.Cursor.NW_RESIZE;
else if (y - bottomY >= 0 && y - bottomY <= threshold)
return Meta.Cursor.SW_RESIZE;
else if (topY - y < 0 && y - bottomY < 0)
return Meta.Cursor.WEST_RESIZE;
} else if (x - rightX >= 0 && x - rightX <= threshold) {
if (topY - y >= 0 && topY - y <= threshold)
return Meta.Cursor.NE_RESIZE;
else if (y - bottomY >= 0 && y - bottomY <= threshold)
return Meta.Cursor.SE_RESIZE;
else if (topY - y < 0 && y - bottomY < 0)
return Meta.Cursor.EAST_RESIZE;
} else if (leftX - x < 0 && x - rightX < 0) {
if (topY - y >= 0 && topY - y <= threshold)
return Meta.Cursor.NORTH_RESIZE;
else if (y - bottomY >= 0 && y - bottomY <= threshold)
return Meta.Cursor.SOUTH_RESIZE;
else if (topY - y < 0 && y - bottomY < 0)
return Meta.Cursor.MOVE_OR_RESIZE_WINDOW;
}
return Meta.Cursor.CROSSHAIR;
}
stopDrag() {
if (!this._dragButton)
return;
if (this._dragGrab) {
this._dragGrab.dismiss();
this._dragGrab = null;
}
this._dragButton = 0;
this._dragSequence = null;
if (this._dragCursor === Meta.Cursor.CROSSHAIR &&
this._lastX === this._startX && this._lastY === this._startY) {
// The user clicked without dragging. Make up a larger selection
// to reduce confusion.
const offset =
20 * St.ThemeContext.get_for_stage(global.stage).scaleFactor;
this._startX -= offset;
this._startY -= offset;
this._lastX += offset;
this._lastY += offset;
// Keep the coordinates inside the stage.
if (this._startX < 0) {
this._lastX -= this._startX;
this._startX = 0;
} else if (this._lastX >= this.width) {
this._startX -= this._lastX - this.width + 1;
this._lastX = this.width - 1;
}
if (this._startY < 0) {
this._lastY -= this._startY;
this._startY = 0;
} else if (this._lastY >= this.height) {
this._startY -= this._lastY - this.height + 1;
this._lastY = this.height - 1;
}
this._updateSelectionRect();
}
this.emit('drag-ended');
}
_updateCursor(x, y) {
const cursor = this._computeCursorType(x, y);
global.display.set_cursor(cursor);
}
_onPress(event, button, sequence) {
if (this._dragButton)
return Clutter.EVENT_PROPAGATE;
const cursor = this._computeCursorType(event.x, event.y);
// Clicking outside of the selection, or using the right mouse button,
// or with Ctrl results in dragging a new selection from scratch.
if (cursor === Meta.Cursor.CROSSHAIR ||
button === Clutter.BUTTON_SECONDARY ||
(event.modifier_state & Clutter.ModifierType.CONTROL_MASK)) {
this._dragButton = button;
this._dragCursor = Meta.Cursor.CROSSHAIR;
global.display.set_cursor(Meta.Cursor.CROSSHAIR);
[this._startX, this._startY] = [event.x, event.y];
this._lastX = this._startX = Math.floor(this._startX);
this._lastY = this._startY = Math.floor(this._startY);
this._updateSelectionRect();
} else {
// This is a move or resize operation.
this._dragButton = button;
this._dragCursor = cursor;
this._dragStartX = event.x;
this._dragStartY = event.y;
const [leftX, topY, width, height] = this.getGeometry();
const rightX = leftX + width - 1;
const bottomY = topY + height - 1;
// For moving, start X and Y are the top left corner, while
// last X and Y are the bottom right corner.
if (cursor === Meta.Cursor.MOVE_OR_RESIZE_WINDOW) {
this._startX = leftX;
this._startY = topY;
this._lastX = rightX;
this._lastY = bottomY;
}
// Start X and Y are set to the stationary sides, while last X
// and Y are set to the moving sides.
if (cursor === Meta.Cursor.NW_RESIZE ||
cursor === Meta.Cursor.WEST_RESIZE ||
cursor === Meta.Cursor.SW_RESIZE) {
this._startX = rightX;
this._lastX = leftX;
}
if (cursor === Meta.Cursor.NE_RESIZE ||
cursor === Meta.Cursor.EAST_RESIZE ||
cursor === Meta.Cursor.SE_RESIZE) {
this._startX = leftX;
this._lastX = rightX;
}
if (cursor === Meta.Cursor.NW_RESIZE ||
cursor === Meta.Cursor.NORTH_RESIZE ||
cursor === Meta.Cursor.NE_RESIZE) {
this._startY = bottomY;
this._lastY = topY;
}
if (cursor === Meta.Cursor.SW_RESIZE ||
cursor === Meta.Cursor.SOUTH_RESIZE ||
cursor === Meta.Cursor.SE_RESIZE) {
this._startY = topY;
this._lastY = bottomY;
}
}
if (this._dragButton) {
this._dragGrab = global.stage.grab(this);
this._dragSequence = sequence;
this.emit('drag-started');
return Clutter.EVENT_STOP;
}
return Clutter.EVENT_PROPAGATE;
}
_onRelease(event, button, sequence) {
if (this._dragButton !== button ||
this._dragSequence?.get_slot() !== sequence?.get_slot())
return Clutter.EVENT_PROPAGATE;
this.stopDrag();
// We might have finished creating a new selection, so we need to
// update the cursor.
this._updateCursor(event.x, event.y);
return Clutter.EVENT_STOP;
}
_onMotion(event, sequence) {
if (!this._dragButton) {
this._updateCursor(event.x, event.y);
return Clutter.EVENT_PROPAGATE;
}
if (sequence?.get_slot() !== this._dragSequence?.get_slot())
return Clutter.EVENT_PROPAGATE;
if (this._dragCursor === Meta.Cursor.CROSSHAIR) {
[this._lastX, this._lastY] = [event.x, event.y];
this._lastX = Math.floor(this._lastX);
this._lastY = Math.floor(this._lastY);
} else {
let dx = Math.round(event.x - this._dragStartX);
let dy = Math.round(event.y - this._dragStartY);
if (this._dragCursor === Meta.Cursor.MOVE_OR_RESIZE_WINDOW) {
const [,, selectionWidth, selectionHeight] = this.getGeometry();
let newStartX = this._startX + dx;
let newStartY = this._startY + dy;
let newLastX = this._lastX + dx;
let newLastY = this._lastY + dy;
let overshootX = 0;
let overshootY = 0;
// Keep the size intact if we bumped into the stage edge.
if (newStartX < 0) {
overshootX = 0 - newStartX;
newStartX = 0;
newLastX = newStartX + (selectionWidth - 1);
} else if (newLastX > this.width - 1) {
overshootX = (this.width - 1) - newLastX;
newLastX = this.width - 1;
newStartX = newLastX - (selectionWidth - 1);
}
if (newStartY < 0) {
overshootY = 0 - newStartY;
newStartY = 0;
newLastY = newStartY + (selectionHeight - 1);
} else if (newLastY > this.height - 1) {
overshootY = (this.height - 1) - newLastY;
newLastY = this.height - 1;
newStartY = newLastY - (selectionHeight - 1);
}
// Add the overshoot to the delta to create a "rubberbanding"
// behavior of the pointer when dragging.
dx += overshootX;
dy += overshootY;
this._startX = newStartX;
this._startY = newStartY;
this._lastX = newLastX;
this._lastY = newLastY;
} else {
if (this._dragCursor === Meta.Cursor.WEST_RESIZE ||
this._dragCursor === Meta.Cursor.EAST_RESIZE)
dy = 0;
if (this._dragCursor === Meta.Cursor.NORTH_RESIZE ||
this._dragCursor === Meta.Cursor.SOUTH_RESIZE)
dx = 0;
// Make sure last X and Y are clamped between 0 and size - 1,
// while always preserving the cursor dragging position relative
// to the selection rectangle.
this._lastX += dx;
if (this._lastX >= this.width) {
dx -= this._lastX - this.width + 1;
this._lastX = this.width - 1;
} else if (this._lastX < 0) {
dx -= this._lastX;
this._lastX = 0;
}
this._lastY += dy;
if (this._lastY >= this.height) {
dy -= this._lastY - this.height + 1;
this._lastY = this.height - 1;
} else if (this._lastY < 0) {
dy -= this._lastY;
this._lastY = 0;
}
// If we drag the handle past a selection side, update which
// handles are which.
if (this._lastX > this._startX) {
if (this._dragCursor === Meta.Cursor.NW_RESIZE)
this._dragCursor = Meta.Cursor.NE_RESIZE;
else if (this._dragCursor === Meta.Cursor.SW_RESIZE)
this._dragCursor = Meta.Cursor.SE_RESIZE;
else if (this._dragCursor === Meta.Cursor.WEST_RESIZE)
this._dragCursor = Meta.Cursor.EAST_RESIZE;
} else {
// eslint-disable-next-line no-lonely-if
if (this._dragCursor === Meta.Cursor.NE_RESIZE)
this._dragCursor = Meta.Cursor.NW_RESIZE;
else if (this._dragCursor === Meta.Cursor.SE_RESIZE)
this._dragCursor = Meta.Cursor.SW_RESIZE;
else if (this._dragCursor === Meta.Cursor.EAST_RESIZE)
this._dragCursor = Meta.Cursor.WEST_RESIZE;
}
if (this._lastY > this._startY) {
if (this._dragCursor === Meta.Cursor.NW_RESIZE)
this._dragCursor = Meta.Cursor.SW_RESIZE;
else if (this._dragCursor === Meta.Cursor.NE_RESIZE)
this._dragCursor = Meta.Cursor.SE_RESIZE;
else if (this._dragCursor === Meta.Cursor.NORTH_RESIZE)
this._dragCursor = Meta.Cursor.SOUTH_RESIZE;
} else {
// eslint-disable-next-line no-lonely-if
if (this._dragCursor === Meta.Cursor.SW_RESIZE)
this._dragCursor = Meta.Cursor.NW_RESIZE;
else if (this._dragCursor === Meta.Cursor.SE_RESIZE)
this._dragCursor = Meta.Cursor.NE_RESIZE;
else if (this._dragCursor === Meta.Cursor.SOUTH_RESIZE)
this._dragCursor = Meta.Cursor.NORTH_RESIZE;
}
global.display.set_cursor(this._dragCursor);
}
this._dragStartX += dx;
this._dragStartY += dy;
}
this._updateSelectionRect();
return Clutter.EVENT_STOP;
}
vfunc_button_press_event(event) {
if (event.button === Clutter.BUTTON_PRIMARY ||
event.button === Clutter.BUTTON_SECONDARY)
return this._onPress(event, event.button, null);
return Clutter.EVENT_PROPAGATE;
}
vfunc_button_release_event(event) {
if (event.button === Clutter.BUTTON_PRIMARY ||
event.button === Clutter.BUTTON_SECONDARY)
return this._onRelease(event, event.button, null);
return Clutter.EVENT_PROPAGATE;
}
vfunc_motion_event(event) {
return this._onMotion(event, null);
}
vfunc_touch_event(event) {
if (event.type === Clutter.EventType.TOUCH_BEGIN)
return this._onPress(event, 'touch', event.sequence);
else if (event.type === Clutter.EventType.TOUCH_END)
return this._onRelease(event, 'touch', event.sequence);
else if (event.type === Clutter.EventType.TOUCH_UPDATE)
return this._onMotion(event, event.sequence);
return Clutter.EVENT_PROPAGATE;
}
vfunc_leave_event(event) {
// If we're dragging and go over the panel we still get a leave event
// for some reason, even though we have a grab. We don't want to switch
// the cursor when we're dragging.
if (!this._dragButton)
global.display.set_cursor(Meta.Cursor.DEFAULT);
return super.vfunc_leave_event(event);
}
});
var UIWindowSelectorLayout = GObject.registerClass(
class UIWindowSelectorLayout extends Workspace.WorkspaceLayout {
_init(monitorIndex) {
super._init(null, monitorIndex, null);
}
vfunc_set_container(container) {
this._container = container;
this._syncWorkareaTracking();
}
vfunc_allocate(container, box) {
const containerBox = container.allocation;
const containerAllocationChanged =
this._lastBox === null || !this._lastBox.equal(containerBox);
this._lastBox = containerBox.copy();
let layoutChanged = false;
if (this._layout === null) {
this._layout = this._createBestLayout(this._workarea);
layoutChanged = true;
}
if (layoutChanged || containerAllocationChanged)
this._windowSlots = this._getWindowSlots(box.copy());
const childBox = new Clutter.ActorBox();
const nSlots = this._windowSlots.length;
for (let i = 0; i < nSlots; i++) {
let [x, y, width, height, child] = this._windowSlots[i];
childBox.set_origin(x, y);
childBox.set_size(width, height);
child.allocate(childBox);
}
}
addWindow(window) {
if (this._sortedWindows.includes(window))
return;
this._sortedWindows.push(window);
this._container.add_child(window);
this._layout = null;
this.layout_changed();
}
reset() {
for (const window of this._sortedWindows)
window.destroy();
this._sortedWindows = [];
this._windowSlots = [];
this._layout = null;
}
get windows() {
return this._sortedWindows;
}
});
var UIWindowSelectorWindow = GObject.registerClass(
class UIWindowSelectorWindow extends St.Button {
_init(actor, params) {
super._init(params);
const window = actor.metaWindow;
this._boundingBox = window.get_frame_rect();
this._bufferRect = window.get_buffer_rect();
this._bufferScale = actor.get_resource_scale();
this._actor = new Clutter.Actor({
content: actor.paint_to_content(null),
});
this.add_child(this._actor);
this._border = new St.Bin({ style_class: 'screenshot-ui-window-selector-window-border' });
this._border.connect('style-changed', () => {
this._borderSize =
this._border.get_theme_node().get_border_width(St.Side.TOP);
});
this.add_child(this._border);
this._border.child = new St.Icon({
icon_name: 'object-select-symbolic',
style_class: 'screenshot-ui-window-selector-check',
x_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.CENTER,
});
this._cursor = null;
this._cursorPoint = { x: 0, y: 0 };
this._shouldShowCursor = actor.get_children().some(c => c.has_pointer);
this.connect('destroy', this._onDestroy.bind(this));
}
get boundingBox() {
return this._boundingBox;
}
get windowCenter() {
const boundingBox = this.boundingBox;
return {
x: boundingBox.x + boundingBox.width / 2,
y: boundingBox.y + boundingBox.height / 2,
};
}
chromeHeights() {
return [0, 0];
}
chromeWidths() {
return [0, 0];
}
overlapHeights() {
return [0, 0];
}
get cursorPoint() {
return {
x: this._cursorPoint.x + this._boundingBox.x - this._bufferRect.x,
y: this._cursorPoint.y + this._boundingBox.y - this._bufferRect.y,
};
}
get bufferScale() {
return this._bufferScale;
}
get windowContent() {
return this._actor.content;
}
_onDestroy() {
this.remove_child(this._actor);
this._actor.destroy();
this._actor = null;
this.remove_child(this._border);
this._border.destroy();
this._border = null;
if (this._cursor) {
this.remove_child(this._cursor);
this._cursor.destroy();
this._cursor = null;
}
}
vfunc_allocate(box) {
this.set_allocation(box);
// Border goes around the window.
const borderBox = box.copy();
borderBox.set_origin(0, 0);
borderBox.x1 -= this._borderSize;
borderBox.y1 -= this._borderSize;
borderBox.x2 += this._borderSize;
borderBox.y2 += this._borderSize;
this._border.allocate(borderBox);
// box should contain this._boundingBox worth of window. Compute
// origin and size for the actor box to satisfy that.
const xScale = box.get_width() / this._boundingBox.width;
const yScale = box.get_height() / this._boundingBox.height;
const [, windowW, windowH] = this._actor.content.get_preferred_size();
const actorBox = new Clutter.ActorBox();
actorBox.set_origin(
(this._bufferRect.x - this._boundingBox.x) * xScale,
(this._bufferRect.y - this._boundingBox.y) * yScale
);
actorBox.set_size(
windowW * xScale / this._bufferScale,
windowH * yScale / this._bufferScale
);
this._actor.allocate(actorBox);
// Allocate the cursor if we have one.
if (!this._cursor)
return;
let [, , w, h] = this._cursor.get_preferred_size();
w *= this._cursorScale;
h *= this._cursorScale;
const cursorBox = new Clutter.ActorBox({
x1: this._cursorPoint.x,
y1: this._cursorPoint.y,
x2: this._cursorPoint.x + w,
y2: this._cursorPoint.y + h,
});
cursorBox.x1 *= xScale;
cursorBox.x2 *= xScale;
cursorBox.y1 *= yScale;
cursorBox.y2 *= yScale;
this._cursor.allocate(cursorBox);
}
addCursorTexture(content, point, scale) {
if (!this._shouldShowCursor)
return;
// Add the cursor.
this._cursor = new St.Widget({
content,
request_mode: Clutter.RequestMode.CONTENT_SIZE,
});
this._cursorPoint = {
x: point.x - this._boundingBox.x,
y: point.y - this._boundingBox.y,
};
this._cursorScale = scale;
this.insert_child_below(this._cursor, this._border);
}
setCursorVisible(visible) {
if (!this._cursor)
return;
this._cursor.visible = visible;
}
});
var UIWindowSelector = GObject.registerClass(
class UIWindowSelector extends St.Widget {
_init(monitorIndex, params) {
super._init(params);
super.layout_manager = new Clutter.BinLayout();
this._monitorIndex = monitorIndex;
this._layoutManager = new UIWindowSelectorLayout(monitorIndex);
// Window screenshots
this._container = new St.Widget({
style_class: 'screenshot-ui-window-selector-window-container',
x_expand: true,
y_expand: true,
});
this._container.layout_manager = this._layoutManager;
this.add_child(this._container);
}
capture() {
for (const actor of global.get_window_actors()) {
let window = actor.metaWindow;
let workspaceManager = global.workspace_manager;
let activeWorkspace = workspaceManager.get_active_workspace();
if (window.is_override_redirect() ||
!window.located_on_workspace(activeWorkspace) ||
window.get_monitor() !== this._monitorIndex)
continue;
const widget = new UIWindowSelectorWindow(
actor,
{
style_class: 'screenshot-ui-window-selector-window',
reactive: true,
can_focus: true,
toggle_mode: true,
}
);
widget.connect('key-focus-in', win => {
Main.screenshotUI.grab_key_focus();
win.checked = true;
});
if (window.has_focus()) {
widget.checked = true;
widget.toggle_mode = false;
}
this._layoutManager.addWindow(widget);
}
}
reset() {
this._layoutManager.reset();
}
windows() {
return this._layoutManager.windows;
}
});
const UIMode = {
SCREENSHOT: 0,
SCREENCAST: 1,
};
var ScreenshotUI = GObject.registerClass({
Properties: {
'screencast-in-progress': GObject.ParamSpec.boolean(
'screencast-in-progress',
'screencast-in-progress',
'screencast-in-progress',
GObject.ParamFlags.READABLE,
false),
},
}, class ScreenshotUI extends St.Widget {
_init() {
super._init({
name: 'screenshot-ui',
constraints: new Clutter.BindConstraint({
source: global.stage,
coordinate: Clutter.BindCoordinate.ALL,
}),
layout_manager: new Clutter.BinLayout(),
opacity: 0,
visible: false,
reactive: true,
});
this._screencastInProgress = false;
this._lockdownSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.lockdown' });
Main.sessionMode.connect('updated', () => this.close(true));
// The full-screen screenshot has a separate container so that we can
// show it without the screenshot UI fade-in for a nicer animation.
this._stageScreenshotContainer = new St.Widget({ visible: false });
this._stageScreenshotContainer.add_constraint(new Clutter.BindConstraint({
source: global.stage,
coordinate: Clutter.BindCoordinate.ALL,
}));
Main.layoutManager.screenshotUIGroup.add_child(
this._stageScreenshotContainer);
this._screencastAreaIndicator = new UIAreaIndicator({
style_class: 'screenshot-ui-screencast-area-indicator',
visible: false,
});
this._screencastAreaIndicator.add_constraint(new Clutter.BindConstraint({
source: global.stage,
coordinate: Clutter.BindCoordinate.ALL,
}));
this.bind_property(
'screencast-in-progress',
this._screencastAreaIndicator,
'visible',
GObject.BindingFlags.DEFAULT);
// Add it directly to the stage so that it's above popup menus.
global.stage.add_child(this._screencastAreaIndicator);
Shell.util_set_hidden_from_pick(this._screencastAreaIndicator, true);
Main.layoutManager.screenshotUIGroup.add_child(this);
this._stageScreenshot = new St.Widget({ style_class: 'screenshot-ui-screen-screenshot' });
this._stageScreenshot.add_constraint(new Clutter.BindConstraint({
source: global.stage,
coordinate: Clutter.BindCoordinate.ALL,
}));
this._stageScreenshotContainer.add_child(this._stageScreenshot);
this._cursor = new St.Widget();
this._stageScreenshotContainer.add_child(this._cursor);
this._openingCoroutineInProgress = false;
this._grabHelper = new GrabHelper.GrabHelper(this, {
actionMode: Shell.ActionMode.POPUP,
});
this._areaSelector = new UIAreaSelector({
style_class: 'screenshot-ui-area-selector',
x_expand: true,
y_expand: true,
reactive: true,
});
this.add_child(this._areaSelector);
this._primaryMonitorBin = new St.Widget({ layout_manager: new Clutter.BinLayout() });
this._primaryMonitorBin.add_constraint(
new Layout.MonitorConstraint({ 'primary': true }));
this.add_child(this._primaryMonitorBin);
this._panel = new St.BoxLayout({
style_class: 'screenshot-ui-panel',
y_align: Clutter.ActorAlign.END,
y_expand: true,
vertical: true,
offscreen_redirect: Clutter.OffscreenRedirect.AUTOMATIC_FOR_OPACITY,
});
this._primaryMonitorBin.add_child(this._panel);
this._closeButton = new St.Button({
style_class: 'screenshot-ui-close-button',
child: new St.Icon({ icon_name: 'preview-close-symbolic' }),
});
this._closeButton.add_constraint(new Clutter.BindConstraint({
source: this._panel,
coordinate: Clutter.BindCoordinate.POSITION,
}));
this._closeButton.add_constraint(new Clutter.AlignConstraint({
source: this._panel,
align_axis: Clutter.AlignAxis.Y_AXIS,
pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
factor: 0,
}));
this._closeButtonXAlignConstraint = new Clutter.AlignConstraint({
source: this._panel,
align_axis: Clutter.AlignAxis.X_AXIS,
pivot_point: new Graphene.Point({ x: 0.5, y: -1 }),
});
this._closeButton.add_constraint(this._closeButtonXAlignConstraint);
this._closeButton.connect('clicked', () => this.close());
this._primaryMonitorBin.add_child(this._closeButton);
this._areaSelector.connect('drag-started', () => {
this._panel.ease({
opacity: 100,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
this._closeButton.ease({
opacity: 100,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
});
this._areaSelector.connect('drag-ended', () => {
this._panel.ease({
opacity: 255,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
this._closeButton.ease({
opacity: 255,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
});
this._typeButtonContainer = new St.Widget({
style_class: 'screenshot-ui-type-button-container',
layout_manager: new Clutter.BoxLayout({
spacing: 12,
homogeneous: true,
}),
});
this._panel.add_child(this._typeButtonContainer);
this._selectionButton = new IconLabelButton('screenshot-ui-area-symbolic', _('Selection'), {
style_class: 'screenshot-ui-type-button',
checked: true,
x_expand: true,
});
this._selectionButton.connect('notify::checked',
this._onSelectionButtonToggled.bind(this));
this._typeButtonContainer.add_child(this._selectionButton);
this.add_child(new Tooltip(this._selectionButton, {
text: _('Area Selection'),
style_class: 'screenshot-ui-tooltip',
visible: false,
}));
this._screenButton = new IconLabelButton('screenshot-ui-display-symbolic', _('Screen'), {
style_class: 'screenshot-ui-type-button',
toggle_mode: true,
x_expand: true,
});
this._screenButton.connect('notify::checked',
this._onScreenButtonToggled.bind(this));
this._typeButtonContainer.add_child(this._screenButton);
this.add_child(new Tooltip(this._screenButton, {
text: _('Screen Selection'),
style_class: 'screenshot-ui-tooltip',
visible: false,
}));
this._windowButton = new IconLabelButton('screenshot-ui-window-symbolic', _('Window'), {
style_class: 'screenshot-ui-type-button',
toggle_mode: true,
x_expand: true,
});
this._windowButton.connect('notify::checked',
this._onWindowButtonToggled.bind(this));
this._typeButtonContainer.add_child(this._windowButton);
this.add_child(new Tooltip(this._windowButton, {
text: _('Window Selection'),
style_class: 'screenshot-ui-tooltip',
visible: false,
}));
this._bottomRowContainer = new St.Widget({ layout_manager: new Clutter.BinLayout() });
this._panel.add_child(this._bottomRowContainer);
this._shotCastContainer = new St.BoxLayout({
style_class: 'screenshot-ui-shot-cast-container',
x_align: Clutter.ActorAlign.START,
x_expand: true,
});
this._bottomRowContainer.add_child(this._shotCastContainer);
this._shotButton = new St.Button({
style_class: 'screenshot-ui-shot-cast-button',
checked: true,
});
this._shotButton.set_child(new St.Icon({ icon_name: 'camera-photo-symbolic' }));
this._shotButton.connect('notify::checked',
this._onShotButtonToggled.bind(this));
this._shotCastContainer.add_child(this._shotButton);
this._castButton = new St.Button({
style_class: 'screenshot-ui-shot-cast-button',
toggle_mode: true,
});
this._castButton.set_child(new St.Icon({ icon_name: 'camera-web-symbolic' }));
this._castButton.connect('notify::checked',
this._onCastButtonToggled.bind(this));
this._shotCastContainer.add_child(this._castButton);
this._shotButton.bind_property('checked', this._castButton, 'checked',
GObject.BindingFlags.BIDIRECTIONAL | GObject.BindingFlags.INVERT_BOOLEAN);
this._shotCastTooltip = new Tooltip(this._shotCastContainer, {
text: _('Screenshot / Screencast'),
style_class: 'screenshot-ui-tooltip',
visible: false,
});
const shotCastCallback = () => {
if (this._shotButton.hover || this._castButton.hover)
this._shotCastTooltip.open();
else
this._shotCastTooltip.close();
};
this._shotButton.connect('notify::hover', shotCastCallback);
this._castButton.connect('notify::hover', shotCastCallback);
this.add_child(this._shotCastTooltip);
this._captureButton = new St.Button({ style_class: 'screenshot-ui-capture-button' });
this._captureButton.set_child(new St.Widget({
style_class: 'screenshot-ui-capture-button-circle',
}));
this._captureButton.connect('clicked',
this._onCaptureButtonClicked.bind(this));
this._bottomRowContainer.add_child(this._captureButton);
this._showPointerButtonContainer = new St.BoxLayout({
x_align: Clutter.ActorAlign.END,
x_expand: true,
});
this._bottomRowContainer.add_child(this._showPointerButtonContainer);
this._showPointerButton = new St.Button({
style_class: 'screenshot-ui-show-pointer-button',
toggle_mode: true,
});
this._showPointerButton.set_child(new St.Icon({ icon_name: 'screenshot-ui-show-pointer-symbolic' }));
this._showPointerButtonContainer.add_child(this._showPointerButton);
this.add_child(new Tooltip(this._showPointerButton, {
text: _('Show Pointer'),
style_class: 'screenshot-ui-tooltip',
visible: false,
}));
this._showPointerButton.connect('notify::checked', () => {
const state = this._showPointerButton.checked;
this._cursor.visible = state;
const windows =
this._windowSelectors.flatMap(selector => selector.windows());
for (const window of windows)
window.setCursorVisible(state);
});
this._cursor.visible = false;
this._monitorBins = [];
this._windowSelectors = [];
this._rebuildMonitorBins();
Main.layoutManager.connect('monitors-changed', () => {
// Nope, not dealing with monitor changes.
this.close(true);
this._rebuildMonitorBins();
});
const uiModes =
Shell.ActionMode.ALL &
~(Shell.ActionMode.LOCK_SCREEN |
Shell.ActionMode.UNLOCK_SCREEN |
Shell.ActionMode.LOGIN_SCREEN);
Main.wm.addKeybinding(
'show-screenshot-ui',
new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }),
Meta.KeyBindingFlags.IGNORE_AUTOREPEAT,
uiModes,
showScreenshotUI
);
Main.wm.addKeybinding(
'show-screen-recording-ui',
new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }),
Meta.KeyBindingFlags.IGNORE_AUTOREPEAT,
uiModes,
showScreenRecordingUI
);
Main.wm.addKeybinding(
'screenshot-window',
new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }),
Meta.KeyBindingFlags.IGNORE_AUTOREPEAT | Meta.KeyBindingFlags.PER_WINDOW,
uiModes,
async (_display, window, _binding) => {
try {
const actor = window.get_compositor_private();
const content = actor.paint_to_content(null);
const texture = content.get_texture();
await captureScreenshot(texture, null, 1, null);
} catch (e) {
logError(e, 'Error capturing screenshot');
}
}
);
Main.wm.addKeybinding(
'screenshot',
new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }),
Meta.KeyBindingFlags.IGNORE_AUTOREPEAT,
uiModes,
async () => {
try {
const shooter = new Shell.Screenshot();
const [content] = await shooter.screenshot_stage_to_content();
const texture = content.get_texture();
await captureScreenshot(texture, null, 1, null);
} catch (e) {
logError(e, 'Error capturing screenshot');
}
}
);
}
_refreshButtonLayout() {
const buttonLayout = Meta.prefs_get_button_layout();
this._closeButton.remove_style_class_name('left');
this._closeButton.remove_style_class_name('right');
if (buttonLayout.left_buttons.includes(Meta.ButtonFunction.CLOSE)) {
this._closeButton.add_style_class_name('left');
this._closeButtonXAlignConstraint.factor = 0;
} else {
this._closeButton.add_style_class_name('right');
this._closeButtonXAlignConstraint.factor = 1;
}
}
_rebuildMonitorBins() {
for (const bin of this._monitorBins)
bin.destroy();
this._monitorBins = [];
this._windowSelectors = [];
this._screenSelectors = [];
for (let i = 0; i < Main.layoutManager.monitors.length; i++) {
const bin = new St.Widget({
layout_manager: new Clutter.BinLayout(),
});
bin.add_constraint(new Layout.MonitorConstraint({ 'index': i }));
this.insert_child_below(bin, this._primaryMonitorBin);
this._monitorBins.push(bin);
const windowSelector = new UIWindowSelector(i, {
style_class: 'screenshot-ui-window-selector',
x_expand: true,
y_expand: true,
visible: this._windowButton.checked,
});
if (i === Main.layoutManager.primaryIndex)
windowSelector.add_style_pseudo_class('primary-monitor');
bin.add_child(windowSelector);
this._windowSelectors.push(windowSelector);
const screenSelector = new St.Button({
style_class: 'screenshot-ui-screen-selector',
x_expand: true,
y_expand: true,
visible: this._screenButton.checked,
reactive: true,
can_focus: true,
toggle_mode: true,
});
screenSelector.connect('key-focus-in', () => {
this.grab_key_focus();
screenSelector.checked = true;
});
bin.add_child(screenSelector);
this._screenSelectors.push(screenSelector);
screenSelector.connect('notify::checked', () => {
if (!screenSelector.checked)
return;
screenSelector.toggle_mode = false;
for (const otherSelector of this._screenSelectors) {
if (screenSelector === otherSelector)
continue;
otherSelector.toggle_mode = true;
otherSelector.checked = false;
}
});
}
if (Main.layoutManager.primaryIndex !== -1)
this._screenSelectors[Main.layoutManager.primaryIndex].checked = true;
}
async open(mode = UIMode.SCREENSHOT) {
if (this._openingCoroutineInProgress)
return;
if (this._screencastInProgress)
return;
this._castButton.checked = mode === UIMode.SCREENCAST;
if (!this.visible) {
// Screenshot UI is opening from completely closed state
// (rather than opening back from in process of closing).
for (const selector of this._windowSelectors)
selector.capture();
const windows =
this._windowSelectors.flatMap(selector => selector.windows());
for (const window of windows) {
window.connect('notify::checked', () => {
if (!window.checked)
return;
window.toggle_mode = false;
for (const otherWindow of windows) {
if (window === otherWindow)
continue;
otherWindow.toggle_mode = true;
otherWindow.checked = false;
}
});
}
this._windowButton.reactive =
windows.length > 0 && !this._castButton.checked;
if (!this._windowButton.reactive)
this._selectionButton.checked = true;
this._shooter = new Shell.Screenshot();
this._openingCoroutineInProgress = true;
try {
const [content, scale, cursorContent, cursorPoint, cursorScale] =
await this._shooter.screenshot_stage_to_content();
this._stageScreenshot.set_content(content);
this._scale = scale;
if (cursorContent !== null) {
this._cursor.set_content(cursorContent);
this._cursor.set_position(cursorPoint.x, cursorPoint.y);
let [, w, h] = cursorContent.get_preferred_size();
w *= cursorScale;
h *= cursorScale;
this._cursor.set_size(w, h);
this._cursorScale = cursorScale;
for (const window of windows) {
window.addCursorTexture(cursorContent, cursorPoint, cursorScale);
window.setCursorVisible(this._showPointerButton.checked);
}
}
this._stageScreenshotContainer.show();
} catch (e) {
log(`Error capturing screenshot: ${e.message}`);
}
this._openingCoroutineInProgress = false;
}
// Get rid of any popup menus.
// We already have them captured on the screenshot anyway.
//
// This needs to happen before the grab below as closing menus will
// pop their grabs.
Main.layoutManager.emit('system-modal-opened');
const grabResult = this._grabHelper.grab({
actor: this,
onUngrab: () => this.close(),
});
if (!grabResult)
return;
this._refreshButtonLayout();
this.remove_all_transitions();
this.visible = true;
this.ease({
opacity: 255,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => {
this._stageScreenshotContainer.get_parent().remove_child(
this._stageScreenshotContainer);
this.insert_child_at_index(this._stageScreenshotContainer, 0);
},
});
}
_finishClosing() {
this.hide();
this._shooter = null;
// Switch back to screenshot mode.
this._shotButton.checked = true;
this._stageScreenshotContainer.get_parent().remove_child(
this._stageScreenshotContainer);
Main.layoutManager.screenshotUIGroup.insert_child_at_index(
this._stageScreenshotContainer, 0);
this._stageScreenshotContainer.hide();
this._stageScreenshot.set_content(null);
this._cursor.set_content(null);
this._areaSelector.reset();
for (const selector of this._windowSelectors)
selector.reset();
}
close(instantly = false) {
this._grabHelper.ungrab();
if (instantly) {
this._finishClosing();
return;
}
this.remove_all_transitions();
this.ease({
opacity: 0,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: this._finishClosing.bind(this),
});
}
_onSelectionButtonToggled() {
if (this._selectionButton.checked) {
this._selectionButton.toggle_mode = false;
this._windowButton.checked = false;
this._screenButton.checked = false;
this._areaSelector.show();
this._areaSelector.remove_all_transitions();
this._areaSelector.reactive = true;
this._areaSelector.ease({
opacity: 255,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
} else {
this._selectionButton.toggle_mode = true;
this._areaSelector.stopDrag();
global.display.set_cursor(Meta.Cursor.DEFAULT);
this._areaSelector.remove_all_transitions();
this._areaSelector.reactive = false;
this._areaSelector.ease({
opacity: 0,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this._areaSelector.hide(),
});
}
}
_onScreenButtonToggled() {
if (this._screenButton.checked) {
this._screenButton.toggle_mode = false;
this._selectionButton.checked = false;
this._windowButton.checked = false;
for (const selector of this._screenSelectors) {
selector.show();
selector.remove_all_transitions();
selector.ease({
opacity: 255,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
}
} else {
this._screenButton.toggle_mode = true;
for (const selector of this._screenSelectors) {
selector.remove_all_transitions();
selector.ease({
opacity: 0,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => selector.hide(),
});
}
}
}
_onWindowButtonToggled() {
if (this._windowButton.checked) {
this._windowButton.toggle_mode = false;
this._selectionButton.checked = false;
this._screenButton.checked = false;
for (const selector of this._windowSelectors) {
selector.show();
selector.remove_all_transitions();
selector.ease({
opacity: 255,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
}
} else {
this._windowButton.toggle_mode = true;
for (const selector of this._windowSelectors) {
selector.remove_all_transitions();
selector.ease({
opacity: 0,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => selector.hide(),
});
}
}
}
_onShotButtonToggled() {
if (this._shotButton.checked) {
this._shotButton.toggle_mode = false;
this._stageScreenshotContainer.show();
this._stageScreenshotContainer.remove_all_transitions();
this._stageScreenshotContainer.ease({
opacity: 255,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
} else {
this._shotButton.toggle_mode = true;
}
}
_onCastButtonToggled() {
if (this._castButton.checked) {
this._castButton.toggle_mode = false;
this._captureButton.add_style_pseudo_class('cast');
this._stageScreenshotContainer.remove_all_transitions();
this._stageScreenshotContainer.ease({
opacity: 0,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this._stageScreenshotContainer.hide(),
});
// Screen recording doesn't support window selection yet.
if (this._windowButton.checked)
this._selectionButton.checked = true;
this._windowButton.reactive = false;
} else {
this._castButton.toggle_mode = true;
this._captureButton.remove_style_pseudo_class('cast');
const windows =
this._windowSelectors.flatMap(selector => selector.windows());
this._windowButton.reactive = windows.length > 0;
}
}
_getSelectedGeometry(rescale) {
let x, y, w, h;
if (this._selectionButton.checked) {
[x, y, w, h] = this._areaSelector.getGeometry();
} else if (this._screenButton.checked) {
const index =
this._screenSelectors.findIndex(screen => screen.checked);
const monitor = Main.layoutManager.monitors[index];
x = monitor.x;
y = monitor.y;
w = monitor.width;
h = monitor.height;
}
if (rescale) {
x *= this._scale;
y *= this._scale;
w *= this._scale;
h *= this._scale;
}
return [x, y, w, h];
}
_onCaptureButtonClicked() {
if (this._shotButton.checked) {
this._saveScreenshot();
this.close();
} else {
// Screencast closes the UI on its own.
this._startScreencast();
}
}
_saveScreenshot() {
if (this._selectionButton.checked || this._screenButton.checked) {
const content = this._stageScreenshot.get_content();
if (!content)
return; // Failed to capture the screenshot for some reason.
const texture = content.get_texture();
const geometry = this._getSelectedGeometry(true);
let cursorTexture = this._cursor.content?.get_texture();
if (!this._cursor.visible)
cursorTexture = null;
captureScreenshot(
texture, geometry, this._scale,
{
texture: cursorTexture ?? null,
x: this._cursor.x * this._scale,
y: this._cursor.y * this._scale,
scale: this._cursorScale,
}
).catch(e => logError(e, 'Error capturing screenshot'));
} else if (this._windowButton.checked) {
const window =
this._windowSelectors.flatMap(selector => selector.windows())
.find(win => win.checked);
if (!window)
return;
const content = window.windowContent;
if (!content)
return;
const texture = content.get_texture();
let cursorTexture = this._cursor.content?.get_texture();
if (!this._cursor.visible)
cursorTexture = null;
captureScreenshot(
texture,
null,
window.bufferScale,
{
texture: cursorTexture ?? null,
x: window.cursorPoint.x * window.bufferScale,
y: window.cursorPoint.y * window.bufferScale,
scale: this._cursorScale,
}
).catch(e => logError(e, 'Error capturing screenshot'));
}
}
_startScreencast() {
if (this._windowButton.checked)
return; // TODO
const [x, y, w, h] = this._getSelectedGeometry(false);
const drawCursor = this._cursor.visible;
// Set up the screencast indicator rect.
if (this._selectionButton.checked) {
this._screencastAreaIndicator.setSelectionRect(
...this._areaSelector.getGeometry());
} else if (this._screenButton.checked) {
const index =
this._screenSelectors.findIndex(screen => screen.checked);
const monitor = Main.layoutManager.monitors[index];
this._screencastAreaIndicator.setSelectionRect(
monitor.x, monitor.y, monitor.width, monitor.height);
}
// Close instantly so the fade-out doesn't get recorded.
this.close(true);
// This is a bit awkward because creating a proxy synchronously hangs Shell.
const doStartScreencast = () => {
let method =
this._screencastProxy.ScreencastRemote.bind(this._screencastProxy);
if (w !== -1) {
method = this._screencastProxy.ScreencastAreaRemote.bind(
this._screencastProxy, x, y, w, h);
}
method(
GLib.build_filenamev([
/* Translators: this is the folder where recorded
screencasts are stored. */
_('Screencasts'),
/* Translators: this is a filename used for screencast
* recording, where "%d" and "%t" date and time, e.g.
* "Screencast from 07-17-2013 10:00:46 PM.webm" */
/* xgettext:no-c-format */
_('Screencast from %d %t.webm'),
]),
{ 'draw-cursor': new GLib.Variant('b', drawCursor) },
([success, path], error) => {
if (error !== null) {
this._setScreencastInProgress(false);
log(`Error starting screencast: ${error.message}`);
return;
}
if (!success) {
this._setScreencastInProgress(false);
log('Error starting screencast');
return;
}
this._screencastPath = path;
}
);
};
// Set this before calling the method as the screen recording indicator
// will check it before the success callback fires.
this._setScreencastInProgress(true);
if (this._screencastProxy) {
doStartScreencast();
} else {
new ScreencastProxy(
Gio.DBus.session,
'org.gnome.Shell.Screencast',
'/org/gnome/Shell/Screencast',
(object, error) => {
if (error !== null) {
log('Error connecting to the screencast service');
return;
}
this._screencastProxy = object;
doStartScreencast();
}
);
}
}
stopScreencast() {
if (!this._screencastInProgress)
return;
// Set this before calling the method as the screen recording indicator
// will check it before the success callback fires.
this._setScreencastInProgress(false);
this._screencastProxy.StopScreencastRemote((success, error) => {
if (error !== null) {
log(`Error stopping screencast: ${error.message}`);
return;
}
if (!success) {
log('Error stopping screencast');
return;
}
// Show a notification.
const file = Gio.file_new_for_path(this._screencastPath);
const source = new MessageTray.Source(
// Translators: notification source name.
_('Screenshot'),
'screencast-recorded-symbolic'
);
const notification = new MessageTray.Notification(
source,
// Translators: notification title.
_('Screencast recorded'),
// Translators: notification body when a screencast was recorded.
_('Click here to view the video.')
);
// Translators: button on the screencast notification.
notification.addAction(_('Show in Files'), () => {
const app =
Gio.app_info_get_default_for_type('inode/directory', false);
if (app === null) {
// It may be null e.g. in a toolbox without nautilus.
log('Error showing in files: no default app set for inode/directory');
return;
}
app.launch([file], global.create_app_launch_context(0, -1));
});
notification.connect('activated', () => {
try {
Gio.app_info_launch_default_for_uri(
file.get_uri(), global.create_app_launch_context(0, -1));
} catch (err) {
logError(err, 'Error opening screencast');
}
});
notification.setTransient(true);
Main.messageTray.add(source);
source.showNotification(notification);
});
}
get screencast_in_progress() {
if (!('_screencastInProgress' in this))
return false;
return this._screencastInProgress;
}
_setScreencastInProgress(inProgress) {
if (this._screencastInProgress === inProgress)
return;
this._screencastInProgress = inProgress;
this.notify('screencast-in-progress');
}
vfunc_key_press_event(event) {
const symbol = event.keyval;
if (symbol === Clutter.KEY_Return || symbol === Clutter.KEY_space ||
((event.modifier_state & Clutter.ModifierType.CONTROL_MASK) &&
(symbol === Clutter.KEY_c || symbol === Clutter.KEY_C))) {
this._onCaptureButtonClicked();
return Clutter.EVENT_STOP;
}
if (symbol === Clutter.KEY_s || symbol === Clutter.KEY_S) {
this._selectionButton.checked = true;
return Clutter.EVENT_STOP;
}
if (symbol === Clutter.KEY_c || symbol === Clutter.KEY_C) {
this._screenButton.checked = true;
return Clutter.EVENT_STOP;
}
if (this._windowButton.reactive &&
(symbol === Clutter.KEY_w || symbol === Clutter.KEY_W)) {
this._windowButton.checked = true;
return Clutter.EVENT_STOP;
}
if (symbol === Clutter.KEY_p || symbol === Clutter.KEY_P) {
this._showPointerButton.checked = !this._showPointerButton.checked;
return Clutter.EVENT_STOP;
}
if (symbol === Clutter.KEY_v || symbol === Clutter.KEY_V) {
this._castButton.checked = !this._castButton.checked;
return Clutter.EVENT_STOP;
}
if (symbol === Clutter.KEY_Left || symbol === Clutter.KEY_Right ||
symbol === Clutter.KEY_Up || symbol === Clutter.KEY_Down) {
let direction;
if (symbol === Clutter.KEY_Left)
direction = St.DirectionType.LEFT;
else if (symbol === Clutter.KEY_Right)
direction = St.DirectionType.RIGHT;
else if (symbol === Clutter.KEY_Up)
direction = St.DirectionType.UP;
else if (symbol === Clutter.KEY_Down)
direction = St.DirectionType.DOWN;
if (this._windowButton.checked) {
const window =
this._windowSelectors.flatMap(selector => selector.windows())
.find(win => win.checked) ?? null;
this.navigate_focus(window, direction, false);
} else if (this._screenButton.checked) {
const screen =
this._screenSelectors.find(selector => selector.checked) ?? null;
this.navigate_focus(screen, direction, false);
}
return Clutter.EVENT_STOP;
}
return super.vfunc_key_press_event(event);
}
});
/**
* Stores a PNG-encoded screenshot into the clipboard and a file, and shows a
* notification.
*
* @param {GLib.Bytes} bytes - The PNG-encoded screenshot.
* @param {GdkPixbuf.Pixbuf} pixbuf - The Pixbuf with the screenshot.
*/
function _storeScreenshot(bytes, pixbuf) {
// Store to the clipboard first in case storing to file fails.
const clipboard = St.Clipboard.get_default();
clipboard.set_content(St.ClipboardType.CLIPBOARD, 'image/png', bytes);
const time = GLib.DateTime.new_now_local();
// This will be set in the first save to disk branch and then accessed
// in the second save to disk branch, so we need to declare it outside.
let file;
// The function is declared here rather than inside the condition to
// satisfy eslint.
/**
* Returns a filename suffix with an increasingly large index.
*
* @returns {Generator<string|*, void, *>} suffix string
*/
function* suffixes() {
yield '';
for (let i = 1; ; i++)
yield `-${i}`;
}
const lockdownSettings =
new Gio.Settings({ schema_id: 'org.gnome.desktop.lockdown' });
const disableSaveToDisk =
lockdownSettings.get_boolean('disable-save-to-disk');
if (!disableSaveToDisk) {
const dir = Gio.File.new_for_path(GLib.build_filenamev([
GLib.get_user_special_dir(GLib.UserDirectory.DIRECTORY_PICTURES),
// Translators: name of the folder under ~/Pictures for screenshots.
_('Screenshots'),
]));
try {
dir.make_directory_with_parents(null);
} catch (e) {
if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.EXISTS))
throw e;
}
const timestamp = time.format('%Y-%m-%d %H-%M-%S');
// Translators: this is the name of the file that the screenshot is
// saved to. The placeholder is a timestamp, e.g. "2017-05-21 12-24-03".
const name = _('Screenshot from %s').format(timestamp);
// If the target file already exists, try appending a suffix with an
// increasing number to it.
for (const suffix of suffixes()) {
file = Gio.File.new_for_path(GLib.build_filenamev([
dir.get_path(), `${name}${suffix}.png`,
]));
try {
const stream = file.create(Gio.FileCreateFlags.NONE, null);
stream.write_bytes(bytes, null);
break;
} catch (e) {
if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.EXISTS))
throw e;
}
}
// Add it to recent files.
Gtk.RecentManager.get_default().add_item(file.get_uri());
}
// Create a St.ImageContent icon for the notification. We want
// St.ImageContent specifically because it preserves the aspect ratio when
// shown in a notification.
const pixels = pixbuf.read_pixel_bytes();
const content =
St.ImageContent.new_with_preferred_size(pixbuf.width, pixbuf.height);
content.set_bytes(
pixels,
Cogl.PixelFormat.RGBA_8888,
pixbuf.width,
pixbuf.height,
pixbuf.rowstride
);
// Show a notification.
const source = new MessageTray.Source(
// Translators: notification source name.
_('Screenshot'),
'screenshot-recorded-symbolic'
);
const notification = new MessageTray.Notification(
source,
// Translators: notification title.
_('Screenshot captured'),
// Translators: notification body when a screenshot was captured.
_('You can paste the image from the clipboard.'),
{ datetime: time, gicon: content }
);
if (!disableSaveToDisk) {
// Translators: button on the screenshot notification.
notification.addAction(_('Show in Files'), () => {
const app =
Gio.app_info_get_default_for_type('inode/directory', false);
if (app === null) {
// It may be null e.g. in a toolbox without nautilus.
log('Error showing in files: no default app set for inode/directory');
return;
}
app.launch([file], global.create_app_launch_context(0, -1));
});
notification.connect('activated', () => {
try {
Gio.app_info_launch_default_for_uri(
file.get_uri(), global.create_app_launch_context(0, -1));
} catch (err) {
logError(err, 'Error opening screenshot');
}
});
}
notification.setTransient(true);
Main.messageTray.add(source);
source.showNotification(notification);
}
/**
* Captures a screenshot from a texture, given a region, scale and optional
* cursor data.
*
* @param {Cogl.Texture} texture - The texture to take the screenshot from.
* @param {number[4]} [geometry] - The region to use: x, y, width and height.
* @param {number} scale - The texture scale.
* @param {Object} [cursor] - Cursor data to include in the screenshot.
* @param {Cogl.Texture} cursor.texture - The cursor texture.
* @param {number} cursor.x - The cursor x coordinate.
* @param {number} cursor.y - The cursor y coordinate.
* @param {number} cursor.scale - The cursor texture scale.
*/
async function captureScreenshot(texture, geometry, scale, cursor) {
const stream = Gio.MemoryOutputStream.new_resizable();
const [x, y, w, h] = geometry ?? [0, 0, -1, -1];
if (cursor === null)
cursor = { texture: null, x: 0, y: 0, scale: 1 };
global.display.get_sound_player().play_from_theme(
'screen-capture', _('Screenshot taken'), null);
const pixbuf = await Shell.Screenshot.composite_to_stream(
texture,
x, y, w, h,
scale,
cursor.texture, cursor.x, cursor.y, cursor.scale,
stream
);
stream.close(null);
_storeScreenshot(stream.steal_as_bytes(), pixbuf);
}
/**
* Shows the screenshot UI.
*/
function showScreenshotUI() {
Main.screenshotUI.open().catch(err => {
logError(err, 'Error opening the screenshot UI');
});
}
/**
* Shows the screen recording UI.
*/
function showScreenRecordingUI() {
Main.screenshotUI.open(UIMode.SCREENCAST).catch(err => {
logError(err, 'Error opening the screenshot UI');
});
}
var ScreenshotService = class {
constructor() {
this._dbusImpl = Gio.DBusExportedObject.wrapJSObject(ScreenshotIface, this);
this._dbusImpl.export(Gio.DBus.session, '/org/gnome/Shell/Screenshot');
this._screenShooter = new Map();
this._senderChecker = new DBusSenderChecker([
'org.gnome.SettingsDaemon.MediaKeys',
'org.freedesktop.impl.portal.desktop.gtk',
'org.freedesktop.impl.portal.desktop.gnome',
'org.gnome.Screenshot',
]);
this._lockdownSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.lockdown' });
Gio.DBus.session.own_name('org.gnome.Shell.Screenshot', Gio.BusNameOwnerFlags.REPLACE, null, null);
}
async _createScreenshot(invocation, needsDisk = true, restrictCallers = true) {
let lockedDown = false;
if (needsDisk)
lockedDown = this._lockdownSettings.get_boolean('disable-save-to-disk');
let sender = invocation.get_sender();
if (this._screenShooter.has(sender)) {
invocation.return_error_literal(
Gio.IOErrorEnum, Gio.IOErrorEnum.BUSY,
'There is an ongoing operation for this sender');
return null;
} else if (lockedDown) {
invocation.return_error_literal(
Gio.IOErrorEnum, Gio.IOErrorEnum.PERMISSION_DENIED,
'Saving to disk is disabled');
return null;
} else if (restrictCallers) {
try {
await this._senderChecker.checkInvocation(invocation);
} catch (e) {
invocation.return_gerror(e);
return null;
}
}
let shooter = new Shell.Screenshot();
shooter._watchNameId =
Gio.bus_watch_name(Gio.BusType.SESSION, sender, 0, null,
this._onNameVanished.bind(this));
this._screenShooter.set(sender, shooter);
return shooter;
}
_onNameVanished(connection, name) {
this._removeShooterForSender(name);
}
_removeShooterForSender(sender) {
let shooter = this._screenShooter.get(sender);
if (!shooter)
return;
Gio.bus_unwatch_name(shooter._watchNameId);
this._screenShooter.delete(sender);
}
_checkArea(x, y, width, height) {
return x >= 0 && y >= 0 &&
width > 0 && height > 0 &&
x + width <= global.screen_width &&
y + height <= global.screen_height;
}
*_resolveRelativeFilename(filename) {
filename = filename.replace(/\.png$/, '');
let path = [
GLib.get_user_special_dir(GLib.UserDirectory.DIRECTORY_PICTURES),
GLib.get_home_dir(),
].find(p => p && GLib.file_test(p, GLib.FileTest.EXISTS));
if (!path)
return null;
yield Gio.File.new_for_path(
GLib.build_filenamev([path, `${filename}.png`]));
for (let idx = 1; ; idx++) {
yield Gio.File.new_for_path(
GLib.build_filenamev([path, `${filename}-${idx}.png`]));
}
}
_createStream(filename, invocation) {
if (filename == '')
return [Gio.MemoryOutputStream.new_resizable(), null];
if (GLib.path_is_absolute(filename)) {
try {
let file = Gio.File.new_for_path(filename);
let stream = file.replace(null, false, Gio.FileCreateFlags.NONE, null);
return [stream, file];
} catch (e) {
invocation.return_gerror(e);
this._removeShooterForSender(invocation.get_sender());
return [null, null];
}
}
let err;
for (let file of this._resolveRelativeFilename(filename)) {
try {
let stream = file.create(Gio.FileCreateFlags.NONE, null);
return [stream, file];
} catch (e) {
err = e;
if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.EXISTS))
break;
}
}
invocation.return_gerror(err);
this._removeShooterForSender(invocation.get_sender());
return [null, null];
}
_flashAsync(shooter) {
return new Promise((resolve, _reject) => {
shooter.connect('screenshot_taken', (s, area) => {
const flashspot = new Flashspot(area);
flashspot.fire(resolve);
global.display.get_sound_player().play_from_theme(
'screen-capture', _('Screenshot taken'), null);
});
});
}
_onScreenshotComplete(stream, file, invocation) {
stream.close(null);
let filenameUsed = '';
if (file) {
filenameUsed = file.get_path();
} else {
let bytes = stream.steal_as_bytes();
let clipboard = St.Clipboard.get_default();
clipboard.set_content(St.ClipboardType.CLIPBOARD, 'image/png', bytes);
}
let retval = GLib.Variant.new('(bs)', [true, filenameUsed]);
invocation.return_value(retval);
}
_scaleArea(x, y, width, height) {
let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
x *= scaleFactor;
y *= scaleFactor;
width *= scaleFactor;
height *= scaleFactor;
return [x, y, width, height];
}
_unscaleArea(x, y, width, height) {
let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
x /= scaleFactor;
y /= scaleFactor;
width /= scaleFactor;
height /= scaleFactor;
return [x, y, width, height];
}
async ScreenshotAreaAsync(params, invocation) {
let [x, y, width, height, flash, filename] = params;
[x, y, width, height] = this._scaleArea(x, y, width, height);
if (!this._checkArea(x, y, width, height)) {
invocation.return_error_literal(Gio.IOErrorEnum,
Gio.IOErrorEnum.CANCELLED,
"Invalid params");
return;
}
let screenshot = await this._createScreenshot(invocation);
if (!screenshot)
return;
let [stream, file] = this._createStream(filename, invocation);
if (!stream)
return;
try {
await Promise.all([
flash ? this._flashAsync(screenshot) : null,
screenshot.screenshot_area(x, y, width, height, stream),
]);
this._onScreenshotComplete(stream, file, invocation);
} catch (e) {
invocation.return_value(new GLib.Variant('(bs)', [false, '']));
} finally {
this._removeShooterForSender(invocation.get_sender());
}
}
async ScreenshotWindowAsync(params, invocation) {
let [includeFrame, includeCursor, flash, filename] = params;
let screenshot = await this._createScreenshot(invocation);
if (!screenshot)
return;
let [stream, file] = this._createStream(filename, invocation);
if (!stream)
return;
try {
await Promise.all([
flash ? this._flashAsync(screenshot) : null,
screenshot.screenshot_window(includeFrame, includeCursor, stream),
]);
this._onScreenshotComplete(stream, file, invocation);
} catch (e) {
invocation.return_value(new GLib.Variant('(bs)', [false, '']));
} finally {
this._removeShooterForSender(invocation.get_sender());
}
}
async ScreenshotAsync(params, invocation) {
let [includeCursor, flash, filename] = params;
let screenshot = await this._createScreenshot(invocation);
if (!screenshot)
return;
let [stream, file] = this._createStream(filename, invocation);
if (!stream)
return;
try {
await Promise.all([
flash ? this._flashAsync(screenshot) : null,
screenshot.screenshot(includeCursor, stream),
]);
this._onScreenshotComplete(stream, file, invocation);
} catch (e) {
invocation.return_value(new GLib.Variant('(bs)', [false, '']));
} finally {
this._removeShooterForSender(invocation.get_sender());
}
}
async SelectAreaAsync(params, invocation) {
try {
await this._senderChecker.checkInvocation(invocation);
} catch (e) {
invocation.return_gerror(e);
return;
}
let selectArea = new SelectArea();
try {
let areaRectangle = await selectArea.selectAsync();
let retRectangle = this._unscaleArea(
areaRectangle.x, areaRectangle.y,
areaRectangle.width, areaRectangle.height);
invocation.return_value(GLib.Variant.new('(iiii)', retRectangle));
} catch (e) {
invocation.return_error_literal(
Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED,
'Operation was cancelled');
}
}
async FlashAreaAsync(params, invocation) {
try {
await this._senderChecker.checkInvocation(invocation);
} catch (e) {
invocation.return_gerror(e);
return;
}
let [x, y, width, height] = params;
[x, y, width, height] = this._scaleArea(x, y, width, height);
if (!this._checkArea(x, y, width, height)) {
invocation.return_error_literal(Gio.IOErrorEnum,
Gio.IOErrorEnum.CANCELLED,
"Invalid params");
return;
}
let flashspot = new Flashspot({ x, y, width, height });
flashspot.fire();
invocation.return_value(null);
}
async PickColorAsync(params, invocation) {
const screenshot = await this._createScreenshot(invocation, false, false);
if (!screenshot)
return;
const pickPixel = new PickPixel(screenshot);
try {
const color = await pickPixel.pickAsync();
const { red, green, blue } = color;
const retval = GLib.Variant.new('(a{sv})', [{
color: GLib.Variant.new('(ddd)', [
red / 255.0,
green / 255.0,
blue / 255.0,
]),
}]);
invocation.return_value(retval);
} catch (e) {
invocation.return_error_literal(
Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED,
'Operation was cancelled');
} finally {
this._removeShooterForSender(invocation.get_sender());
}
}
};
var SelectArea = GObject.registerClass(
class SelectArea extends St.Widget {
_init() {
this._startX = -1;
this._startY = -1;
this._lastX = 0;
this._lastY = 0;
this._result = null;
super._init({
visible: false,
reactive: true,
x: 0,
y: 0,
});
Main.uiGroup.add_actor(this);
this._grabHelper = new GrabHelper.GrabHelper(this);
const constraint = new Clutter.BindConstraint({
source: global.stage,
coordinate: Clutter.BindCoordinate.ALL,
});
this.add_constraint(constraint);
this._rubberband = new St.Widget({
style_class: 'select-area-rubberband',
visible: false,
});
this.add_actor(this._rubberband);
}
async selectAsync() {
global.display.set_cursor(Meta.Cursor.CROSSHAIR);
Main.uiGroup.set_child_above_sibling(this, null);
this.show();
try {
await this._grabHelper.grabAsync({ actor: this });
} finally {
global.display.set_cursor(Meta.Cursor.DEFAULT);
GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
this.destroy();
return GLib.SOURCE_REMOVE;
});
}
return this._result;
}
_getGeometry() {
return new Meta.Rectangle({
x: Math.min(this._startX, this._lastX),
y: Math.min(this._startY, this._lastY),
width: Math.abs(this._startX - this._lastX) + 1,
height: Math.abs(this._startY - this._lastY) + 1,
});
}
vfunc_motion_event(motionEvent) {
if (this._startX == -1 || this._startY == -1 || this._result)
return Clutter.EVENT_PROPAGATE;
[this._lastX, this._lastY] = [motionEvent.x, motionEvent.y];
this._lastX = Math.floor(this._lastX);
this._lastY = Math.floor(this._lastY);
let geometry = this._getGeometry();
this._rubberband.set_position(geometry.x, geometry.y);
this._rubberband.set_size(geometry.width, geometry.height);
this._rubberband.show();
return Clutter.EVENT_PROPAGATE;
}
vfunc_button_press_event(buttonEvent) {
if (this._result)
return Clutter.EVENT_PROPAGATE;
[this._startX, this._startY] = [buttonEvent.x, buttonEvent.y];
this._startX = Math.floor(this._startX);
this._startY = Math.floor(this._startY);
this._rubberband.set_position(this._startX, this._startY);
return Clutter.EVENT_PROPAGATE;
}
vfunc_button_release_event() {
if (this._startX === -1 || this._startY === -1 || this._result)
return Clutter.EVENT_PROPAGATE;
this._result = this._getGeometry();
this.ease({
opacity: 0,
duration: 200,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => this._grabHelper.ungrab(),
});
return Clutter.EVENT_PROPAGATE;
}
});
var RecolorEffect = GObject.registerClass({
Properties: {
color: GObject.ParamSpec.boxed(
'color', 'color', 'replacement color',
GObject.ParamFlags.WRITABLE,
Clutter.Color.$gtype),
chroma: GObject.ParamSpec.boxed(
'chroma', 'chroma', 'color to replace',
GObject.ParamFlags.WRITABLE,
Clutter.Color.$gtype),
threshold: GObject.ParamSpec.float(
'threshold', 'threshold', 'threshold',
GObject.ParamFlags.WRITABLE,
0.0, 1.0, 0.0),
smoothing: GObject.ParamSpec.float(
'smoothing', 'smoothing', 'smoothing',
GObject.ParamFlags.WRITABLE,
0.0, 1.0, 0.0),
},
}, class RecolorEffect extends Shell.GLSLEffect {
_init(params) {
this._color = new Clutter.Color();
this._chroma = new Clutter.Color();
this._threshold = 0;
this._smoothing = 0;
this._colorLocation = null;
this._chromaLocation = null;
this._thresholdLocation = null;
this._smoothingLocation = null;
super._init(params);
this._colorLocation = this.get_uniform_location('recolor_color');
this._chromaLocation = this.get_uniform_location('chroma_color');
this._thresholdLocation = this.get_uniform_location('threshold');
this._smoothingLocation = this.get_uniform_location('smoothing');
this._updateColorUniform(this._colorLocation, this._color);
this._updateColorUniform(this._chromaLocation, this._chroma);
this._updateFloatUniform(this._thresholdLocation, this._threshold);
this._updateFloatUniform(this._smoothingLocation, this._smoothing);
}
_updateColorUniform(location, color) {
if (!location)
return;
this.set_uniform_float(location,
3, [color.red / 255, color.green / 255, color.blue / 255]);
this.queue_repaint();
}
_updateFloatUniform(location, value) {
if (!location)
return;
this.set_uniform_float(location, 1, [value]);
this.queue_repaint();
}
set color(c) {
if (this._color.equal(c))
return;
this._color = c;
this.notify('color');
this._updateColorUniform(this._colorLocation, this._color);
}
set chroma(c) {
if (this._chroma.equal(c))
return;
this._chroma = c;
this.notify('chroma');
this._updateColorUniform(this._chromaLocation, this._chroma);
}
set threshold(value) {
if (this._threshold === value)
return;
this._threshold = value;
this.notify('threshold');
this._updateFloatUniform(this._thresholdLocation, this._threshold);
}
set smoothing(value) {
if (this._smoothing === value)
return;
this._smoothing = value;
this.notify('smoothing');
this._updateFloatUniform(this._smoothingLocation, this._smoothing);
}
vfunc_build_pipeline() {
// Conversion parameters from https://en.wikipedia.org/wiki/YCbCr
const decl = `
vec3 rgb2yCrCb(vec3 c) { \n
float y = 0.299 * c.r + 0.587 * c.g + 0.114 * c.b; \n
float cr = 0.7133 * (c.r - y); \n
float cb = 0.5643 * (c.b - y); \n
return vec3(y, cr, cb); \n
} \n
\n
uniform vec3 chroma_color; \n
uniform vec3 recolor_color; \n
uniform float threshold; \n
uniform float smoothing; \n`;
const src = `
vec3 mask = rgb2yCrCb(chroma_color.rgb); \n
vec3 yCrCb = rgb2yCrCb(cogl_color_out.rgb); \n
float blend = \n
smoothstep(threshold, \n
threshold + smoothing, \n
distance(yCrCb.gb, mask.gb)); \n
cogl_color_out.rgb = \n
mix(recolor_color, cogl_color_out.rgb, blend); \n`;
this.add_glsl_snippet(Shell.SnippetHook.FRAGMENT, decl, src, false);
}
});
var PickPixel = GObject.registerClass(
class PickPixel extends St.Widget {
_init(screenshot) {
super._init({ visible: false, reactive: true });
this._screenshot = screenshot;
this._result = null;
this._color = null;
this._inPick = false;
Main.uiGroup.add_actor(this);
this._grabHelper = new GrabHelper.GrabHelper(this);
const constraint = new Clutter.BindConstraint({
source: global.stage,
coordinate: Clutter.BindCoordinate.ALL,
});
this.add_constraint(constraint);
const action = new Clutter.ClickAction();
action.connect('clicked', async () => {
await this._pickColor(...action.get_coords());
this._result = this._color;
this._grabHelper.ungrab();
});
this.add_action(action);
this._recolorEffect = new RecolorEffect({
chroma: new Clutter.Color({
red: 80,
green: 219,
blue: 181,
}),
threshold: 0.04,
smoothing: 0.07,
});
this._previewCursor = new St.Icon({
icon_name: 'color-pick',
icon_size: Meta.prefs_get_cursor_size(),
effect: this._recolorEffect,
visible: false,
});
Main.uiGroup.add_actor(this._previewCursor);
}
async pickAsync() {
global.display.set_cursor(Meta.Cursor.BLANK);
Main.uiGroup.set_child_above_sibling(this, null);
this.show();
this._pickColor(...global.get_pointer());
try {
await this._grabHelper.grabAsync({ actor: this });
} finally {
global.display.set_cursor(Meta.Cursor.DEFAULT);
this._previewCursor.destroy();
GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
this.destroy();
return GLib.SOURCE_REMOVE;
});
}
return this._result;
}
async _pickColor(x, y) {
if (this._inPick)
return;
this._inPick = true;
this._previewCursor.set_position(x, y);
[this._color] = await this._screenshot.pick_color(x, y);
this._inPick = false;
if (!this._color)
return;
this._recolorEffect.color = this._color;
this._previewCursor.show();
}
vfunc_motion_event(motionEvent) {
const { x, y } = motionEvent;
this._pickColor(x, y);
return Clutter.EVENT_PROPAGATE;
}
});
var FLASHSPOT_ANIMATION_OUT_TIME = 500; // milliseconds
var Flashspot = GObject.registerClass(
class Flashspot extends Lightbox.Lightbox {
_init(area) {
super._init(Main.uiGroup, {
inhibitEvents: true,
width: area.width,
height: area.height,
});
this.style_class = 'flashspot';
this.set_position(area.x, area.y);
}
fire(doneCallback) {
this.set({ visible: true, opacity: 255 });
this.ease({
opacity: 0,
duration: FLASHSPOT_ANIMATION_OUT_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
onComplete: () => {
if (doneCallback)
doneCallback();
this.destroy();
},
});
}
});
Reference in New Issue View Git Blame Copy Permalink