version 10.0: edge-tiling, blur, customize keybindings, dbus changes

Author: domferr

README.md

@@ -30,7 +30,7 @@ Have issues, you want to suggest a new feature or contribute? Please open a new
 ## Usage ##
 
 ### Tiling System ###
-When grabbing and moving a window, press <kbd>CTRL</kbd> key to show the tiling layout. When moving on a tile, it will highlight. Ungrab the window to place that window on the highlighted tile.
+When grabbing and moving a window, press <kbd>CTRL</kbd> key to show the tiling layout (you can choose another key from the preferences). When moving on a tile, it will highlight. Ungrab the window to place that window on the highlighted tile.
 
 [tiling_system.webm](https://github.com/domferr/tilingshell/assets/14203981/a45ec416-ad39-458d-9b9f-cddce8b25666)
 
@@ -54,7 +54,9 @@ The layout is not strict. You can select multiple tiles too! Just hold <kbd>ALT<
 
 ### Layout editor ###
 
-> <kbd>LEFT CLICK</kbd> to split a tile. <kbd>LEFT CLICK</kbd> + <kbd>CTRL</kbd> to split a tile _vertically_. <kbd>RIGHT CLICK</kbd> to delete a tile.
+| Split a tile | Split a tile _vertically_ | Delete a tile | Save, close the editor or open the menu |
+|:---:|:---:|:---:|:---:|
+| <kbd>LEFT CLICK</kbd> | <kbd>LEFT CLICK</kbd> + <kbd>CTRL</kbd> | <kbd>RIGHT CLICK</kbd> | Click the Tiling Shell's icon <img src="https://github.com/domferr/tilingshell/assets/14203981/13e27ec1-6a5d-420f-a87f-8f3df0b34c92" width=96 /> on the panel. |
 
 [layout_editor.webm](https://github.com/domferr/tilingshell/assets/14203981/c6e05589-69d9-4fa3-a4df-61ee875cf9e1)
 
@@ -66,6 +68,20 @@ You can resize adjacent tiled windows together!
 
 > It can be enabled/disabled from the preferences
 
+### Tile using Keyboard ###
+
+Move window through the tiles using keyboard shortcuts (<kbd>SUPER</kbd>+<kbd>←</kbd>/<kbd>↑</kbd>/<kbd>↓</kbd>/<kbd>→</kbd>). They can be customized from the preferences!
+
+[Screencast from 2024-06-18 23-06-56.webm](https://github.com/domferr/tilingshell/assets/14203981/11c966b7-c140-4ecb-b8af-b514ec186ad6)
+
+> It can be enabled/disabled from the preferences
+
+### Edge Tiling ###
+
+You can tile a window by moving it to the edge.
+
+[Screencast from 2024-06-22 22-12-22.webm](https://github.com/domferr/tilingshell/assets/14203981/6e5a2ba9-cd38-44bb-b791-51e41e07f7a0)
+
 ## Installation
 
 This extension is published on [extensions.gnome.org](https://extensions.gnome.org/extension/7065/tiling-shell/)! You can install from there or install manually. By installing from [extensions.gnome.org](https://extensions.gnome.org/extension/7065/tiling-shell/) you will always have the latest update.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tilingshell",
-  "version": "9.1",
+  "version": "10.0",
   "author": "Domenico Ferraro <ferraro.domenico125@gmail.com>",
   "private": true,
   "license": "GPL v2.0",

resources/metadata.json

@@ -9,8 +9,8 @@
     "45",
     "46"
   ],
-  "version": 9,
-  "version-name": "9.1",
+  "version": 10,
+  "version-name": "10.0",
   "url": "https://github.com/domferr/tilingshell",
   "settings-schema": "org.gnome.shell.extensions.tilingshell",
   "donations": {

resources/schemas/org.gnome.shell.extensions.tilingshell.gschema.xml

@@ -67,6 +67,27 @@
             <summary>Enable auto-resize of the complementing tiled windows</summary>
             <description>When a tiled window is resized, auto-resize the other tiled windows near it.</description>
         </key>
+        <key name="enable-blur-snap-assistant" type="b">
+            <default>false</default>
+            <summary>Enable Snap Assistant blur</summary>
+            <description>Blur snap assistant</description>
+        </key>
+        <key name="enable-blur-selected-tilepreview" type="b">
+            <default>false</default>
+            <summary>Enable selected tile preview blur</summary>
+            <description>Blur selected tile previews</description>
+        </key>
+        <key name="enable-move-keybindings" type="b">
+            <default>true</default>
+            <summary>Enable keybindings</summary>
+            <description>Move focused window through tiles by using keybindings.</description>
+        </key>
+        <key name="overridden-settings" type="s">
+            <default>'{}'</default>
+            <summary>Overridden settings</summary>
+            <description>The settings that are overridden and their old value.</description>
+        </key>
+
 		<key type="as" name="move-window-right">
 			<default><![CDATA[['<Super>Right']]]></default>
 			<summary>Move focused window to the tile to its right</summary>

src/components/editor/editableTilePreview.ts

@@ -6,14 +6,14 @@ import Tile from "../layout/Tile";
 import Slider from "./slider";
 import TileUtils from "../layout/TileUtils";
 import { logger } from "@/utils/shell";
-import { MetaInfo } from "gi://GObject";
+import GObject from "gi://GObject";
 import { registerGObjectClass } from "@utils/gjs";
 
 const debug = logger("EditableTilePreview");
 
 @registerGObjectClass
 export default class EditableTilePreview extends TilePreview {
-    static metaInfo: MetaInfo = {
+    static metaInfo: GObject.MetaInfo<any, any, any> = {
         Signals: {
             "size-changed": { 
                 //@ts-ignore todo

src/components/editor/slider.ts

@@ -6,14 +6,13 @@ import { logger } from "@/utils/shell";
 import Meta from 'gi://Meta';
 import Mtk from 'gi://Mtk';
 import GObject from "gi://GObject";
-import { MetaInfo } from "gi://GObject";
 import { getEventCoords, getScalingFactorOf } from "@utils/ui";
 
 const debug = logger("Slider");
 
 @registerGObjectClass
 export default class Slider extends St.Button {
-    static metaInfo: MetaInfo = {
+    static metaInfo: GObject.MetaInfo<any, any, any> = {
         Signals: {
             "slide": { 
                 param_types: [ GObject.TYPE_INT ] // movement

src/components/snapassist/snapAssist.ts

@@ -3,17 +3,17 @@ import Clutter from "gi://Clutter";
 import Meta from "gi://Meta";
 import Mtk from "gi://Mtk";
 import St from "gi://St";
-import Shell from "gi://Shell";
+import Gio from "gi://Gio";
 import { logger } from "@/utils/shell";
-import { MetaInfo } from "gi://GObject";
+import GObject from "gi://GObject";
 import SnapAssistTile from "./snapAssistTile";
 import SnapAssistLayout from "./snapAssistLayout";
 import Layout from "../layout/Layout";
 import Tile from "../layout/Tile";
 import Settings from "@/settings";
 import GlobalState from "@/globalState";
 import SignalHandling from "@/signalHandling";
-import { buildMargin, enableScalingFactorSupport, getScalingFactorOf } from "@utils/ui";
+import { buildBlurEffect, buildMargin, enableScalingFactorSupport, getScalingFactorOf } from "@utils/ui";
 
 export const SNAP_ASSIST_SIGNAL = 'snap-assist';
 export const SNAP_ASSIST_ANIMATION_TIME = 180;
@@ -22,6 +22,19 @@ const debug = logger("snapAssist");
 
 @registerGObjectClass
 class SnapAssistContent extends St.BoxLayout {
+    static metaInfo: GObject.MetaInfo<any, any, any> = {
+        GTypeName: "SnapAssistContent",
+        Properties: {
+            'blur': GObject.ParamSpec.boolean(
+                'blur',
+                'blur',
+                'Enable or disable the blur effect',
+                GObject.ParamFlags.READWRITE,
+                false
+            ),
+        },
+    };
+
     // distance from top when the snap assistant is enlarged
     private readonly _enlargedVerticalDistance = 24;
     // cursor's max distance from the snap assistant to enlarge it 
@@ -36,6 +49,7 @@ class SnapAssistContent extends St.BoxLayout {
     private _isEnlarged = false;
     private _hoveredTile: SnapAssistTile | undefined;
     private _bottomPadding: number;
+    private _blur: boolean;
 
     constructor(container: St.Widget) {
         super({
@@ -54,17 +68,14 @@ class SnapAssistContent extends St.BoxLayout {
         this._isEnlarged = false;
         this._showing = true;
         this._bottomPadding = 0;
+        this._blur = false;
+        
+        Settings.bind(Settings.SETTING_ENABLE_BLUR_SNAP_ASSISTANT, this, "blur", Gio.SettingsBindFlags.GET);
 
-        /*this._recolor();
+        this._applyStyle();
         this._signals.connect(St.ThemeContext.get_for_stage(global.get_stage()), "changed", () => {
-            this.set_style(null);
-            this._recolor();
-        });*/
-        const [alreadyScaled, finalScalingFactor] = getScalingFactorOf(this);
-        this._bottomPadding = (alreadyScaled ? 1:finalScalingFactor) * (this.get_theme_node().get_padding(St.Side.BOTTOM) / (alreadyScaled ? finalScalingFactor:1));
-        this.set_style(`
-            padding: ${this._bottomPadding}px !important;
-        `);
+            this._applyStyle();
+        });
 
         this._setLayouts(GlobalState.get().layouts);
         this._signals.connect(GlobalState.get(), GlobalState.SIGNAL_LAYOUTS_CHANGED, () => {
@@ -73,38 +84,40 @@ class SnapAssistContent extends St.BoxLayout {
 
         this.connect("destroy", () => this._signals.disconnect());
 
-        this.close(false);
+        this.close();
     }
 
-    /*_init() {
+    set blur(value: boolean) {
+        if (this._blur === value) return;
+    
+        this._blur = value;
+        this.get_effect("blur")?.set_enabled(value);
+        this._applyStyle();
+    }
+
+    _init() {
         super._init();
 
-        // changes in GNOME 46+
-        // The sigma in Shell.BlurEffect should be replaced by radius. Since the sigma value 
-        // is radius / 2.0, the radius value will be sigma * 2.0.
-        const sigma = 36;
-        this.add_effect(
-            new Shell.BlurEffect({
-                //@ts-ignore
-                sigma: sigma,
-                //radius: sigma * 2,
-                brightness: 1,
-                mode: Shell.BlurMode.BACKGROUND, // blur what is behind the widget
-            }),
-        );
+        const effect = buildBlurEffect(48);
+        effect.set_name("blur");
+        effect.set_enabled(this._blur);
+        this.add_effect(effect);
+
         this.add_style_class_name("popup-menu-content snap-assistant");
     }
 
-    private _recolor() {
+    private _applyStyle() {
+        this.set_style(null);
+
         const [alreadyScaled, finalScalingFactor] = getScalingFactorOf(this);
         this._bottomPadding = (alreadyScaled ? 1:finalScalingFactor) * (this.get_theme_node().get_padding(St.Side.BOTTOM) / (alreadyScaled ? finalScalingFactor:1));
         const backgroundColor = this.get_theme_node().get_background_color().copy();
-        const alpha = 0.6;
+        const alpha = this._blur ? 0.6:backgroundColor.alpha;
         this.set_style(`
             padding: ${this._bottomPadding}px !important;
             background-color: rgba(${backgroundColor.red}, ${backgroundColor.green}, ${backgroundColor.blue}, ${alpha}) !important;
         `);
-    }*/
+    }
 
     public close(ease: boolean = false) {
         if (!this._showing) return;
@@ -248,13 +261,13 @@ class SnapAssistContent extends St.BoxLayout {
 
 @registerGObjectClass
 export default class SnapAssist extends St.Widget {
-    static metaInfo: MetaInfo = {
+    static metaInfo: GObject.MetaInfo<any, any, any> = {
+        GTypeName: "SnapAssist",
         Signals: {
             "snap-assist": { 
                 param_types: [ Tile.$gtype ]
             },
-        },
-        GTypeName: "SnapAssist"
+        }
     }
 
     private readonly _content: SnapAssistContent;
@@ -265,10 +278,10 @@ export default class SnapAssist extends St.Widget {
         this.workArea = workArea;
         this.set_clip(0, 0, workArea.width, workArea.height);
         if (scalingFactor) enableScalingFactorSupport(this, scalingFactor);
+
         this._content = new SnapAssistContent(this);
     }
 
-
     public set workArea(newWorkArea: Mtk.Rectangle) {
         this.set_position(newWorkArea.x, newWorkArea.y);
         this.set_width(newWorkArea.width);

src/components/tilepreview/selectionTilePreview.ts

@@ -1,35 +1,75 @@
 import { registerGObjectClass } from "@/utils/gjs";
 import Clutter from 'gi://Clutter';
 import St from 'gi://St';
+import Gio from 'gi://Gio';
 import TilePreview from "./tilePreview";
 import { logger } from "@/utils/shell";
-import BlurTilePreview from "./blurTilePreview";
+import Settings from "@settings";
+import GObject from "gi://GObject";
+import { buildBlurEffect } from "@utils/ui";
 
 const debug = logger("SelectionTilePreview");
 
 @registerGObjectClass
 export default class SelectionTilePreview extends TilePreview {
+  static metaInfo: GObject.MetaInfo<any, any, any> = {
+    GTypeName: "SelectionTilePreview",
+    Properties: {
+        'blur': GObject.ParamSpec.boolean(
+            'blur',
+            'blur',
+            'Enable or disable the blur effect',
+            GObject.ParamFlags.READWRITE,
+            false
+        )
+    },
+  };
+
+  private _blur: boolean;
+
   constructor(params: {
-    parent: Clutter.Actor,
+    parent: Clutter.Actor
   }) {
     super({ parent: params.parent, name: "SelectionTilePreview" });
 
+    this._blur = false;
+    
+    Settings.bind(Settings.SETTING_ENABLE_BLUR_SELECTED_TILEPREVIEW, this, "blur", Gio.SettingsBindFlags.GET);
+
     this._recolor();
     const styleChangedSignalID = St.ThemeContext.get_for_stage(global.get_stage()).connect("changed", () => {
-      this.set_style(null);
       this._recolor();
     });
     this.connect("destroy", () => St.ThemeContext.get_for_stage(global.get_stage()).disconnect(styleChangedSignalID));
     this._rect.width = this.gaps.left + this.gaps.right;
     this._rect.height = this.gaps.top + this.gaps.bottom;
   }
 
+  set blur(value: boolean) {
+    if (this._blur === value) return;
+
+    this._blur = value;
+    this.get_effect("blur")?.set_enabled(value);
+    if (this._blur) this.add_style_class_name("blur-tile-preview");
+    else this.remove_style_class_name("blur-tile-preview");
+    
+    this._recolor();
+  }
+
   _init() {
     super._init();
+    
+    const effect = buildBlurEffect(48);
+    effect.set_name("blur");
+    effect.set_enabled(this._blur);
+    this.add_effect(effect);
+
     this.add_style_class_name("selection-tile-preview");
   }
 
   _recolor() {
+    this.set_style(null);
+
     const backgroundColor = this.get_theme_node().get_background_color().copy();
     // since an alpha value lower than 160 is not so much visible, enforce a minimum value of 160
     const newAlpha = Math.max(Math.min(backgroundColor.alpha + 35, 255), 160);
@@ -42,11 +82,11 @@ export default class SelectionTilePreview extends TilePreview {
     `);*/
   }
 
-  close() {
+  close(ease: boolean = false) {
     if (!this._showing) return;
 
     this._rect.width = this.gaps.left + this.gaps.right;
     this._rect.height = this.gaps.top + this.gaps.bottom;
-    super.close();
+    super.close(ease);
   }
 }

src/components/tilepreview/tilePreview.ts

@@ -130,14 +130,14 @@ export default class TilePreview extends St.Widget {
     this.open(ease, position);
   }
 
-  public close() {
+  public close(ease: boolean = false) {
     if (!this._showing) return;
 
     this._showing = false;
     // @ts-ignore
     this.ease({
       opacity: 0,
-      duration: WINDOW_ANIMATION_TIME,
+      duration: ease ? WINDOW_ANIMATION_TIME : 0,
       mode: Clutter.AnimationMode.EASE_OUT_QUAD,
       onComplete: () => this.hide(),
     });