Merge pull request #21 from peterklijn/multi-column-and-row-grid

Multi column and row grid
peterklijn · Sep 11, 2022 · 00ee215 · 00ee215
2 parents 33a284e + d32bc93
commit 00ee215
Show file tree

Hide file tree

Showing 7 changed files with 427 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Install Hammerspoon if you haven't yet. Download the [latest release here](https
 
 Alternatively you can install it using brew:
 ```bash
-brew install --cask hammerspoon 
+brew install --cask hammerspoon
 ```
 
 #### Step 2
@@ -46,6 +46,13 @@ Go to `System Preferences > Security & Privacy > Accessibility` and make sure Ha
 
 _If you just enabled permissions for Hammerspoon, you might need to restart the application for the permissions to take effect._
 
+#### Step 5 (optional)
+
+Configure the Shiftit spoon to your preference.
+
+- [Multiple window cycle sizes](https://github.com/peterklijn/hammerspoon-shiftit#configure-multiple-window-cycle-sizes) allows you to override the default 50% window size for snapping to [sides](https://github.com/peterklijn/hammerspoon-shiftit#snap-to-sides) and [corners](https://github.com/peterklijn/hammerspoon-shiftit#snap-to-corners)
+- [Override key mappings](https://github.com/peterklijn/hammerspoon-shiftit#overriding-key-mappings) allows you to override the default key bindings.
+
 The ShiftIt spoon is now ready to use, enjoy.
 
 Having issues? Check out the [Known issues](https://github.com/peterklijn/hammerspoon-shiftit#known-issues) section, have a look in the [issues section](https://github.com/peterklijn/hammerspoon-shiftit/issues), or create a new issue.
@@ -112,34 +119,52 @@ The default key mapping looks like this:
 
 ```lua
 {
-  left = {{ 'ctrl', 'alt', 'cmd' }, 'left' },
-  right = {{ 'ctrl', 'alt', 'cmd' }, 'right' },
-  up = {{ 'ctrl', 'alt', 'cmd' }, 'up' },
-  down = {{ 'ctrl', 'alt', 'cmd' }, 'down' },
-  upleft = {{ 'ctrl', 'alt', 'cmd' }, '1' },
-  upright = {{ 'ctrl', 'alt', 'cmd' }, '2' },
-  botleft = {{ 'ctrl', 'alt', 'cmd' }, '3' },
-  botright = {{ 'ctrl', 'alt', 'cmd' }, '4' },
-  maximum = {{ 'ctrl', 'alt', 'cmd' }, 'm' },
-  toggleFullScreen = {{ 'ctrl', 'alt', 'cmd' }, 'f' },
-  toggleZoom = {{ 'ctrl', 'alt', 'cmd' }, 'z' },
-  center = {{ 'ctrl', 'alt', 'cmd' }, 'c' },
-  nextScreen = {{ 'ctrl', 'alt', 'cmd' }, 'n' },
-  previousScreen = {{ 'ctrl', 'alt', 'cmd' }, 'p' },
-  resizeOut = {{ 'ctrl', 'alt', 'cmd' }, '=' },
-  resizeIn = {{ 'ctrl', 'alt', 'cmd' }, '-' }
+  left = { { 'ctrl', 'alt', 'cmd' }, 'left' },
+  right = { { 'ctrl', 'alt', 'cmd' }, 'right' },
+  up = { { 'ctrl', 'alt', 'cmd' }, 'up' },
+  down = { { 'ctrl', 'alt', 'cmd' }, 'down' },
+  upleft = { { 'ctrl', 'alt', 'cmd' }, '1' },
+  upright = { { 'ctrl', 'alt', 'cmd' }, '2' },
+  botleft = { { 'ctrl', 'alt', 'cmd' }, '3' },
+  botright = { { 'ctrl', 'alt', 'cmd' }, '4' },
+  maximum = { { 'ctrl', 'alt', 'cmd' }, 'm' },
+  toggleFullScreen = { { 'ctrl', 'alt', 'cmd' }, 'f' },
+  toggleZoom = { { 'ctrl', 'alt', 'cmd' }, 'z' },
+  center = { { 'ctrl', 'alt', 'cmd' }, 'c' },
+  nextScreen = { { 'ctrl', 'alt', 'cmd' }, 'n' },
+  previousScreen = { { 'ctrl', 'alt', 'cmd' }, 'p' },
+  resizeOut = { { 'ctrl', 'alt', 'cmd' }, '=' },
+  resizeIn = { { 'ctrl', 'alt', 'cmd' }, '-' }
 }
 ```
 
+### Configure multiple window cycle sizes
+
+You can configure multiple window cycle sizes by adding the following line after loading the ShiftIt spoon:
+
+```lua
+spoon.ShiftIt:setWindowCyclingSizes({ 50, 33, 67 }, { 50 })
+```
+
+The first argument (`{ 50, 33, 67 }`) sets the horizontal window cycle sizes, in the provided order.
+The second argument (`{ 50 }`) sets the vertical window cycle sizes, in this example it only sets one.
+
+The above settings will toggle the window through these steps, when repeatingly hitting `ctrl(^) + alt(⌥) + cmd(⌘) + left`:
+
+![Window Cycling Sizes visualised for left action](https://github.com/peterklijn/hammerspoon-shiftit/blob/master/images/window-cycling-sizes-visualised.png?raw=true)
+
 ### Overriding key mappings
 
 You can pass the part of the key mappings that you want to override to the `bindHotkeys()` function. For example:
 
 ```lua
+-- Use Vim arrow keys
 spoon.ShiftIt:bindHotkeys({
-  upleft = {{ 'ctrl', 'alt', 'cmd' }, 'q' },
-  upright = {{ 'ctrl', 'alt', 'cmd' }, 'w' },
-});
+  left = { { 'ctrl', 'alt', 'cmd' }, 'h' },
+  down = { { 'ctrl', 'alt', 'cmd' }, 'j' },
+  up = { { 'ctrl', 'alt', 'cmd' }, 'k' },
+  right = { { 'ctrl', 'alt', 'cmd' }, 'l' },
+})
 ```
 
 ## Alternative installations

diff --git a/Spoons/ShiftIt.spoon.zip b/Spoons/ShiftIt.spoon.zip
diff --git a/docs/window-cycling-sizes.html b/docs/window-cycling-sizes.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .screen {
+                width: 800px;
+                height: 450px;
+                background-color: #fffbf3;
+            }
+
+            .menubar {
+                float: left;
+                width: 792px;
+                height: 12px;
+                padding: 4px;
+                font-size: 12px;
+                background-color: #ddd;
+                color: #777;
+            }
+            .dock {
+                float: left;
+                width: 600px;
+                height: 40px;
+                margin: 0 100px;
+                background-color: #eee;
+                border-radius: 4px;
+            }
+            .icon {
+                float: left;
+                width: 32px;
+                height: 32px;
+                margin: 4px;
+                border-radius: 4px;
+                background: #abcf90
+            }
+            .icon:nth-child(2), .icon:nth-child(6), .icon:nth-child(10), .icon:nth-child(14) {
+                background: #dc9e78
+            }
+            .icon:nth-child(3), .icon:nth-child(7), .icon:nth-child(11), .icon:nth-child(15) {
+                background: #b4bcf7
+            }
+            .icon:nth-child(4), .icon:nth-child(8), .icon:nth-child(12), .icon:nth-child(16) {
+                background: #e7e775;
+            }
+
+            .window-size {
+                float: left;
+                border: solid 1px;
+                margin: 1px;
+            }
+            .window-size span {
+                width: auto;
+                float: right;
+                color: white;
+                font: status-bar;
+                font-size: 12px;
+                padding: 1px 3px;
+            }
+
+
+            .size-a {
+                margin: 0;
+                width: 534px;
+                height: 388px;
+                border-color: green;
+            }
+            .size-a span {
+                background-color: green;
+            }
+
+            .size-b {
+                width: 396px;
+                height: 384px;
+                border-color: red;
+            }
+            .size-b span {
+                background-color: red;
+            }
+            .size-c {
+                width: 256px;
+                height: 380px;
+                border-color: blue;
+            }
+            .size-c span {
+                background-color: blue;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div class="screen">
+            <div class="menubar"></div>
+            <div class="window-size size-a">
+                <div class="window-size size-b">
+                    <div class="window-size size-c">
+                        <span>step 2: 33%</span>
+                    </div>
+                    <span>step 1: 50%</span>
+                </div>
+                <span>step 3: 67%</span>
+            </div>
+            <div class="dock">
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+                <div class="icon"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/hammerspoon_mocks.lua b/hammerspoon_mocks.lua
@@ -24,6 +24,7 @@ end
 
 local window = {
     rect = defaultWindowRect,
+    _id = 42,
     _screen = screen,
 }
 
@@ -35,6 +36,10 @@ function window:frame()
     return self.rect
 end
 
+function window:id()
+    return self._id
+end
+
 function window:screen()
     return self._screen
 end
@@ -44,6 +49,16 @@ function window:move(rect, _, _, _)
     lu.assertIsNumber(rect.y)
     lu.assertIsNumber(rect.w)
     lu.assertIsNumber(rect.h)
+    -- If the position contains a period (.), it is a relative coordinate
+    -- so multiply it with the screen size
+    if string.match(tostring(rect.x), '%.') ~= nil then
+        rect = {
+            x = self._screen.rect.x + (rect.x * self._screen.rect.w),
+            y = self._screen.rect.y + (rect.y * self._screen.rect.h),
+            w = rect.w * self._screen.rect.w,
+            h = rect.h * self._screen.rect.h,
+        }
+    end
     self.rect = rect
 end
 
@@ -55,6 +70,7 @@ local mocks = {
 function mocks:reset()
     self.hotkey.bindings = {}
     self.window.rect = defaultWindowRect
+    self.window._id = 42
     self.window._screen.rect = defaultScreenRect
 end
 

diff --git a/images/window-cycling-sizes-visualised.png b/images/window-cycling-sizes-visualised.png