Feature: resize the cropper window with the keyboard ↔️ ↕️

wulkano · Oct 4, 2016 · ce63c09 · ce63c09
1 parent 4029af5
commit ce63c09
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 2 deletions.
diff --git a/app/src/main/main.js b/app/src/main/main.js
@@ -286,3 +286,22 @@ ipcMain.on('hide-main-window', () => {
 ipcMain.on('minimize-main-window', () => {
   mainWindow.minimize();
 });
+
+ipcMain.on('move-cropper-window', (event, data) => {
+  if (!data.direction || !data.amount) {
+    return;
+  }
+
+  const position = cropperWindow.getPosition();
+  if (data.direction === 'left') {
+    position[0] -= data.amount;
+  } else if(data.direction === 'up') {
+    position[1] -= data.amount;
+  } else if(data.direction === 'right') {
+    position[0] += data.amount;
+  } else if(data.direction === 'down') {
+    position[1] += data.amount;
+  }
+
+  cropperWindow.setPosition(...position);
+});
diff --git a/app/src/renderer/js/cropper.js b/app/src/renderer/js/cropper.js
@@ -2,17 +2,56 @@ import {ipcRenderer} from 'electron';
 
 require('./reporter');
 
+const arrows = {
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40
+};
+
+const ESC_KEY_CODE = 27;
+
 document.addEventListener('DOMContentLoaded', () => {
   function autoDestroy() {
     ipcRenderer.send('close-cropper-window');
   }
 
+  function move(direction, amount) {
+    ipcRenderer.send('move-cropper-window', {direction, amount});
+  }
+
+  let intervalId;
+  let timeoutId;
+
   function keyUp(event) {
-    console.log(event);
-    if (event.keyCode === 27) { // esc
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+
+    if(intervalId) {
+      clearInterval(intervalId);
+      intervalId = undefined;
+    }
+
+    if (event.keyCode === ESC_KEY_CODE) {
       autoDestroy();
     }
   }
 
+  function keyDown(event) {
+    if (!timeoutId && !intervalId) {
+      const direction = Object.keys(arrows).find(key => arrows[key] === event.keyCode);
+      const amount = event.shiftKey ? 10 : 1;
+      if (direction) {
+        move(direction, amount);
+        timeoutId = setTimeout(() => {
+          intervalId = setInterval(() => move(direction, amount), 50);
+        }, 250);
+      }
+    }
+  }
+
   window.addEventListener('keyup', keyUp, false);
+  window.addEventListener('keydown', keyDown, false);
 });