version 15.1: smart window border, new keybindings, bugfixes and more! (

#217)

README.md

@@ -127,9 +127,13 @@ You can select your favorite layout for each workspace of each monitor.
 
 When a window is created, it is automatically moved to the best tile according to where other windows are tiled and the current layout. This is disabled by default and can be enabled in the preferences.
 
-
 [automatic_tiling](https://github.com/user-attachments/assets/76abc53f-2c6d-47ab-bee3-bbcdd946f2a1)
 
+### Export and import layouts ###
+
+*Tiling Shell* supports importing and exporting its layouts to a JSON file. With this you can create your own custom layouts without the built-in graphical editor, or share your layouts with others! If you are interested into knowing more about the contents of the layout file check the official [documentation](./doc/json-internal-documentation.md).
+
+
 <p align="right"><b>Go to Usage</b> <a href="#usage">⬆️</a></p>
 
 ## Installation

doc/example-layouts.json

@@ -0,0 +1,60 @@
+[
+	{
+		"id": "split-half",
+		"tiles": [
+			{
+				"x": 0,
+				"y": 0,
+				"width": 0.5,
+				"height": 1,
+				"groups": [
+					2
+				]
+			},
+			{
+				"x": 0.5,
+				"y": 0,
+				"width": 0.5,
+				"height": 1,
+				"groups": [
+					1
+				]
+			}
+		]
+	},
+	{
+		"id": "split-thirds",
+		"tiles": [
+			{
+				"x": 0,
+				"y": 0,
+				"width": 0.333,
+				"height": 1,
+				"groups": [
+					2,
+					3
+				]
+			},
+			{
+				"x": 0.333,
+				"y": 0,
+				"width": 0.333,
+				"height": 1,
+				"groups": [
+					3,
+					1
+				]
+			},
+			{
+				"x": 0.666,
+				"y": 0,
+				"width": 0.333,
+				"height": 1,
+				"groups": [
+					2,
+					1
+				]
+			}
+		]
+	}
+]

doc/json-internal-documentation.md

@@ -0,0 +1,79 @@
+# Documentation for JSON exported layouts
+
+*Tiling Shell* supports importing and exporting its layouts as a JSON file. With this you can create your own custom layouts, or fine-tune already existing layouts.
+
+The exported layouts (from the preferences) are a collection of `Layout` objects. A `Layout` object is an object with two (2) properties: 
+
+- identifier as a `string` 
+- a list of `Tile` objects
+
+Example JSON of a `Layout` object would look like
+
+```json
+{
+	"id": "The identifier",
+	"tiles": [
+		...
+	]
+}
+```
+
+A `Tile` object has five (5) properties:
+
+- The X (`x`) axis as a `float`
+- The Y (`y`) axis as a `float`
+- The width (`width`) as a `float`
+- The height (`height`) as a `float`
+- A list of identifiers `groups`
+
+The `x`, `y`, `width` and `height` are percentages relative to the screen size. Both `x` and `y` start from the top left of a `Tile`.
+
+So a `Tile` with `x` = 0.5 and `y` = 0.5, on a screen with a resolution of 1920x1080 pixels is placed at `x = 0.5 * 1920 = 960px` and `y = 0.5 * 1080 = 540px`. For example, if the `width` and `height` of the `Tile` are set to `0.25`, this gives a `Tile` of `width = 0.25 * 1920 = 480px` and `height = 0.25 * 1080 = 270px`.
+
+The `group` attribute is mainly used in the layout editor where it determines which `Tile`(s) are "linked": if you resize a single `Tile` it's linked neighbour(s) are also updated.
+
+For more in depth information you can look at an [in depth explanation](https://github.com/domferr/tilingshell/issues/177#issuecomment-2458322208) of `group`(s).
+
+Example JSON of a `Tile` object would look like this
+
+```json
+{
+	"x": 0,
+	"y": 0,
+	"width": 1,
+	"height": 1,
+	"groups": [
+		1
+	]
+}
+```
+
+## Example JSON file
+
+Finally, an example JSON file describing one Layout with two tiles.
+
+```json
+{
+	"id": "Equal split",
+	"tiles": [
+		{ 
+			"x": 0,
+			"y": 0,
+			"width": 0.5,
+			"height": 1,
+			"groups": [
+				1
+			]
+		},
+		{
+			"x": 0.5,
+			"y": 0,
+			"width": 0.5,
+			"height": 1,
+			"groups": [
+				1
+			]
+		}
+	]
+}
+```

esbuild.mjs

@@ -18,6 +18,10 @@ class Extension {
     getSettings() {
         return imports.misc.extensionUtils.getSettings();
     }
+
+    static openPrefs() {
+        return imports.misc.extensionUtils.openPrefs();
+    }
 }
 
 class Mtk { Rectangle }

package.json

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

resources/metadata.json

@@ -11,7 +11,7 @@
     "47"
   ],
   "version": 99,
-  "version-name": "15.0",
+  "version-name": "15.1",
   "url": "https://github.com/domferr/tilingshell",
   "settings-schema": "org.gnome.shell.extensions.tilingshell",
   "gettext-domain": "tilingshell",

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

@@ -67,6 +67,11 @@
             <summary>Restore window size</summary>
             <description>Restore the windows to their original size when untiled.</description>
         </key>
+        <key name="enable-wraparound-focus" type="b">
+            <default>true</default>
+            <summary>Enable next/previous window focus to wrap around</summary>
+            <description>When focusing next or previous window, wrap around at the window edge</description>
+        </key>
         <key name="resize-complementing-windows" type="b">
             <default>true</default>
             <summary>Enable auto-resize of the complementing tiled windows</summary>
@@ -137,6 +142,11 @@
             <summary>Focused window border width</summary>
             <description>The width of the focused window's border.</description>
         </key>
+        <key name="enable-smart-window-border-radius" type="b">
+            <default>true</default>
+            <summary>Enable smart window border radius</summary>
+            <description>Dinamically adapt to the window's border radius.</description>
+        </key>
         <key name="snap-assistant-animation-time" type="u">
             <default>180</default>
             <summary>Snap assistant animation time (milliseconds)</summary>
@@ -209,6 +219,14 @@
 			<default><![CDATA[['']]]></default>
 			<summary>Focus the window below the current focused window</summary>
 		</key>
+		<key type="as" name="focus-window-next">
+			<default><![CDATA[['']]]></default>
+			<summary>Focus the window next to the current focused window</summary>
+		</key>
+		<key type="as" name="focus-window-prev">
+			<default><![CDATA[['']]]></default>
+			<summary>Focus the window prior to the current focused window</summary>
+		</key>
     </schema>
 
 </schemalist>

src/components/editor/editableTilePreview.ts

@@ -18,7 +18,6 @@ export default class EditableTilePreview extends TilePreview {
     public static MIN_TILE_SIZE: number = 140;
 
     private readonly _btn: St.Button;
-    private readonly _tile: Tile;
     private readonly _containerRect: Mtk.Rectangle;
 
     private _sliders: (Slider | null)[];
@@ -51,10 +50,6 @@ export default class EditableTilePreview extends TilePreview {
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
-    public get tile(): Tile {
-        return this._tile;
-    }
-
     public getSlider(side: St.Side): Slider | null {
         return this._sliders[side];
     }

src/components/editor/layoutEditor.ts

@@ -72,6 +72,7 @@ export default class LayoutEditor extends St.Widget {
 
         this._layout = layout;
         this._drawEditor();
+        this.grab_key_focus();
 
         this.connect('destroy', this._onDestroy.bind(this));
     }

src/components/snapassist/snapAssist.ts

@@ -36,7 +36,7 @@ class SnapAssistContent extends St.BoxLayout {
                 'Distance from the snap assistant to trigger its opening/closing',
                 GObject.ParamFlags.READWRITE,
                 0,
-                240,
+                2000,
                 16,
             ),
             snapAssistantAnimationTime: GObject.ParamSpec.uint(

src/components/snapassist/snapAssistTile.ts

@@ -6,7 +6,6 @@ import { getScalingFactorOf } from '@utils/ui';
 
 @registerGObjectClass
 export default class SnapAssistTile extends TilePreview {
-    protected _tile: Tile;
     private _styleChangedSignalID: number | undefined;
 
     constructor(params: {
@@ -53,10 +52,6 @@ export default class SnapAssistTile extends TilePreview {
         this.set_style_class_name('snap-assist-tile button');
     }
 
-    public get tile() {
-        return this._tile;
-    }
-
     _applyStyle() {
         // the tile will be light or dark, following the text color
         const [hasColor, { red, green, blue }] =

src/components/tilepreview/popupTilePreview.ts

@@ -0,0 +1,95 @@
+import { registerGObjectClass } from '@/utils/gjs';
+import { GObject, St, Clutter, Gio, Mtk } from '@gi.ext';
+import TilePreview from './tilePreview';
+import Settings from '@settings/settings';
+import { buildBlurEffect } from '@utils/ui';
+import Tile from '@components/layout/Tile';
+
+@registerGObjectClass
+export default class PopupTilePreview extends TilePreview {
+    static metaInfo: GObject.MetaInfo<unknown, unknown, unknown> = {
+        GTypeName: 'PopupTilePreview',
+        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;
+        tile?: Tile;
+        rect?: Mtk.Rectangle;
+        gaps?: Clutter.Margin;
+    }) {
+        super(params);
+
+        this._blur = false;
+
+        // blur not supported due to GNOME shell known bug
+        /* Settings.bind(
+            Settings.KEY_ENABLE_BLUR_SELECTED_TILEPREVIEW,
+            this,
+            'blur',
+            Gio.SettingsBindFlags.GET,
+        );*/
+
+        this._recolor();
+        const styleChangedSignalID = St.ThemeContext.get_for_stage(
+            global.get_stage(),
+        ).connect('changed', () => {
+            this._recolor();
+        });
+        this.connect('destroy', () =>
+            St.ThemeContext.get_for_stage(global.get_stage()).disconnect(
+                styleChangedSignalID,
+            ),
+        );
+    }
+
+    set blur(value: boolean) {
+        if (this._blur === value) return;
+
+        this._blur = value;
+        // blur not supported due to GNOME shell known bug
+        /* 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,
+        );
+        // The final alpha value is divided by 255 since CSS needs a value from 0 to 1, but ClutterColor expresses alpha from 0 to 255
+        this.set_style(`
+            background-color: rgba(${backgroundColor.red}, ${backgroundColor.green}, ${backgroundColor.blue}, ${newAlpha / 255}) !important;
+        `);
+    }
+}