add windowType to window class

put window limits into constants
allow focusing windows

src/actions/index.js

@@ -762,6 +762,13 @@ export function closeWindow(windowId): Action {
   };
 }
 
+export function focusWindow(windowId): Action {
+  return {
+    type: 'FOCUS_WINDOW',
+    windowId,
+  };
+}
+
 export function cloneWindow(windowId): Action {
   return {
     type: 'CLONE_WINDOW',

src/actions/types.js

@@ -84,6 +84,7 @@ export type Action =
     args: Object,
   }
   | { type: 'CLOSE_WINDOW', windowId: number }
+  | { type: 'FOCUS_WINDOW', windowId: number }
   | { type: 'CLONE_WINDOW', windowId: number }
   | { type: 'MAXIMIZE_WINDOW', windowId: number }
   | { type: 'RESTORE_WINDOW' }

src/components/Window.jsx

@@ -12,6 +12,7 @@ import {
   closeWindow,
   maximizeWindow,
   cloneWindow,
+  focusWindow,
 } from '../actions';
 import COMPONENTS from './windows';
 
@@ -40,8 +41,11 @@ const Window = ({ id }) => {
     document.addEventListener('mousemove', move);
     const stopMove = () => {
       document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', stopMove);
+      document.removeEventListener('touchcancel', stopMove);
     };
-    document.addEventListener('mouseup', stopMove, { once: true });
+    document.addEventListener('mouseup', stopMove);
+    document.addEventListener('touchcancel', stopMove);
   }, []);
 
   const startResize = useCallback((event) => {
@@ -62,8 +66,11 @@ const Window = ({ id }) => {
     document.addEventListener('mousemove', resize);
     const stopResize = () => {
       document.removeEventListener('mousemove', resize);
+      document.removeEventListener('mouseup', stopResize);
+      document.removeEventListener('touchcancel', stopResize);
     };
-    document.addEventListener('mouseup', stopResize, { once: true });
+    document.addEventListener('mouseup', stopResize);
+    document.addEventListener('touchcancel', stopResize);
   }, []);
 
   if (!win) {
@@ -83,7 +90,8 @@ const Window = ({ id }) => {
 
   return (
     <div
-      className="window"
+      className={`window ${windowType}`}
+      onMouseDown={() => dispatch(focusWindow(id))}
       style={{
         left: xPos,
         top: yPos,
@@ -96,7 +104,7 @@ const Window = ({ id }) => {
       >
         <span
           className="win-topbtn"
-          onClick={() => dispatch(cloneWindow(id))}
+          onMouseDown={() => dispatch(cloneWindow(id))}
         >
           +
         </span>
@@ -108,13 +116,13 @@ const Window = ({ id }) => {
         </span>
         <span
           className="win-topbtn"
-          onClick={() => dispatch(maximizeWindow(id))}
+          onMouseDown={() => dispatch(maximizeWindow(id))}
         >
           ↑
         </span>
         <span
           className="win-topbtn"
-          onClick={() => dispatch(closeWindow(id))}
+          onMouseDown={() => dispatch(closeWindow(id))}
         >
           X
         </span>

src/reducers/windows.js

@@ -8,6 +8,11 @@ import type { Action } from '../actions/types';
 
 import { clamp } from '../core/utils';
 
+const SCREEN_MARGIN_SE = 30;
+const SCREEN_MARGIN_W = 70;
+const MIN_WIDTH = 70;
+const MIN_HEIGHT = 50;
+
 function generateWindowId(state) {
   let windowId = Math.floor(Math.random() * 99999) + 1;
   while (state.args[windowId]) {
@@ -175,6 +180,10 @@ export default function windows(
       } = action;
       const win = state.windows.find((w) => w.windowId === windowId);
       const newWindowId = generateWindowId(state);
+      const {
+        innerWidth: width,
+        innerHeight: height,
+      } = window;
       return {
         ...state,
         windows: [
@@ -182,8 +191,8 @@ export default function windows(
           {
             ...win,
             windowId: newWindowId,
-            xPos: win.xPos + 15,
-            yPos: win.yPos + 15,
+            xPos: Math.min(win.xPos + 15, width - SCREEN_MARGIN_SE),
+            yPos: Math.min(win.yPos + 15, height - SCREEN_MARGIN_SE),
           },
         ],
         args: {
@@ -195,6 +204,27 @@ export default function windows(
       };
     }
 
+    case 'FOCUS_WINDOW': {
+      const {
+        windowId,
+      } = action;
+      const {
+        windows: oldWindows,
+      } = state;
+      if (!oldWindows
+        || oldWindows[oldWindows.length - 1].windowId === windowId) {
+        return state;
+      }
+      console.log(`focus window ${windowId}`);
+      const newWindows = oldWindows.filter((w) => w.windowId !== windowId);
+      const win = oldWindows.find((w) => w.windowId === windowId);
+      newWindows.push(win);
+      return {
+        ...state,
+        windows: newWindows,
+      };
+    }
+
     case 'MAXIMIZE_WINDOW': {
       const {
         windowId,
@@ -203,7 +233,8 @@ export default function windows(
         ...state.args,
         0: state.args[windowId],
       };
-      const { windowType, title } = state.windows.find((w) => w.windowId === windowId);
+      const { windowType, title } = state.windows
+        .find((w) => w.windowId === windowId);
       delete args[windowId];
       return {
         ...state,
@@ -264,8 +295,12 @@ export default function windows(
         if (win.windowId !== windowId) return win;
         return {
           ...win,
-          xPos: clamp(win.xPos + xDiff, -win.width + 70, width - 30),
-          yPos: clamp(win.yPos + yDiff, 0, height - 30),
+          xPos: clamp(
+            win.xPos + xDiff,
+            -win.width + SCREEN_MARGIN_W,
+            width - SCREEN_MARGIN_SE,
+          ),
+          yPos: clamp(win.yPos + yDiff, 0, height - SCREEN_MARGIN_SE),
         };
       });
       return {
@@ -284,8 +319,15 @@ export default function windows(
         if (win.windowId !== windowId) return win;
         return {
           ...win,
-          width: Math.max(win.width + xDiff, 70, 70 - win.xPos),
-          height: Math.max(win.height + yDiff, 50),
+          width: Math.max(
+            win.width + xDiff,
+            MIN_WIDTH,
+            SCREEN_MARGIN_W - win.xPos,
+          ),
+          height: Math.max(
+            win.height + yDiff,
+            MIN_HEIGHT,
+          ),
         };
       });
       return {
@@ -299,14 +341,14 @@ export default function windows(
         width,
         height,
       } = action;
-      const xMax = width - 30;
-      const yMax = height - 30;
+      const xMax = width - SCREEN_MARGIN_SE;
+      const yMax = height - SCREEN_MARGIN_SE;
       let modified = false;
 
       const newWindows = [];
       for (let i = 0; i < state.windows.length; i += 1) {
         const win = state.windows[i];
-        let { xPos, yPos } = win;
+        const { xPos, yPos } = win;
         if (xPos > xMax || yPos > yMax) {
           modified = true;
           newWindows.push({

src/store/rendererHook.js

@@ -68,9 +68,10 @@ export default (store) => (next) => (action) => {
       break;
     }
 
+    case 'TOGGLE_GRID':
     case 'SET_REQUESTING_PIXEL': {
       const renderer = getRenderer();
-      renderer.forceNextSubRender = true;
+      renderer.forceNextSubrender = true;
       break;
     }