From a7584510f82fe04ad4683ae729db5216d40773b4 Mon Sep 17 00:00:00 2001 From: HF Date: Wed, 28 Apr 2021 23:35:25 +0200 Subject: [PATCH] add windowType to window class put window limits into constants allow focusing windows --- src/actions/index.js | 7 +++++ src/actions/types.js | 1 + src/components/Window.jsx | 20 +++++++++---- src/reducers/windows.js | 62 ++++++++++++++++++++++++++++++++------- src/store/rendererHook.js | 3 +- 5 files changed, 76 insertions(+), 17 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 194e639..be0c106 100644 --- a/src/actions/index.js +++ b/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', diff --git a/src/actions/types.js b/src/actions/types.js index f6c3561..c9340ed 100644 --- a/src/actions/types.js +++ b/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' } diff --git a/src/components/Window.jsx b/src/components/Window.jsx index 74a31f7..5987471 100644 --- a/src/components/Window.jsx +++ b/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 (
dispatch(focusWindow(id))} style={{ left: xPos, top: yPos, @@ -96,7 +104,7 @@ const Window = ({ id }) => { > dispatch(cloneWindow(id))} + onMouseDown={() => dispatch(cloneWindow(id))} > + @@ -108,13 +116,13 @@ const Window = ({ id }) => { dispatch(maximizeWindow(id))} + onMouseDown={() => dispatch(maximizeWindow(id))} > ↑ dispatch(closeWindow(id))} + onMouseDown={() => dispatch(closeWindow(id))} > X diff --git a/src/reducers/windows.js b/src/reducers/windows.js index fbb5529..14bfcf8 100644 --- a/src/reducers/windows.js +++ b/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({ diff --git a/src/store/rendererHook.js b/src/store/rendererHook.js index bda12f7..36ff042 100644 --- a/src/store/rendererHook.js +++ b/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; }