add windowType to window class
put window limits into constants allow focusing windows
This commit is contained in:
parent
56d4267cfe
commit
a7584510f8
|
@ -762,6 +762,13 @@ export function closeWindow(windowId): Action {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function focusWindow(windowId): Action {
|
||||||
|
return {
|
||||||
|
type: 'FOCUS_WINDOW',
|
||||||
|
windowId,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export function cloneWindow(windowId): Action {
|
export function cloneWindow(windowId): Action {
|
||||||
return {
|
return {
|
||||||
type: 'CLONE_WINDOW',
|
type: 'CLONE_WINDOW',
|
||||||
|
|
|
@ -84,6 +84,7 @@ export type Action =
|
||||||
args: Object,
|
args: Object,
|
||||||
}
|
}
|
||||||
| { type: 'CLOSE_WINDOW', windowId: number }
|
| { type: 'CLOSE_WINDOW', windowId: number }
|
||||||
|
| { type: 'FOCUS_WINDOW', windowId: number }
|
||||||
| { type: 'CLONE_WINDOW', windowId: number }
|
| { type: 'CLONE_WINDOW', windowId: number }
|
||||||
| { type: 'MAXIMIZE_WINDOW', windowId: number }
|
| { type: 'MAXIMIZE_WINDOW', windowId: number }
|
||||||
| { type: 'RESTORE_WINDOW' }
|
| { type: 'RESTORE_WINDOW' }
|
||||||
|
|
|
@ -12,6 +12,7 @@ import {
|
||||||
closeWindow,
|
closeWindow,
|
||||||
maximizeWindow,
|
maximizeWindow,
|
||||||
cloneWindow,
|
cloneWindow,
|
||||||
|
focusWindow,
|
||||||
} from '../actions';
|
} from '../actions';
|
||||||
import COMPONENTS from './windows';
|
import COMPONENTS from './windows';
|
||||||
|
|
||||||
|
@ -40,8 +41,11 @@ const Window = ({ id }) => {
|
||||||
document.addEventListener('mousemove', move);
|
document.addEventListener('mousemove', move);
|
||||||
const stopMove = () => {
|
const stopMove = () => {
|
||||||
document.removeEventListener('mousemove', move);
|
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) => {
|
const startResize = useCallback((event) => {
|
||||||
|
@ -62,8 +66,11 @@ const Window = ({ id }) => {
|
||||||
document.addEventListener('mousemove', resize);
|
document.addEventListener('mousemove', resize);
|
||||||
const stopResize = () => {
|
const stopResize = () => {
|
||||||
document.removeEventListener('mousemove', resize);
|
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) {
|
if (!win) {
|
||||||
|
@ -83,7 +90,8 @@ const Window = ({ id }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="window"
|
className={`window ${windowType}`}
|
||||||
|
onMouseDown={() => dispatch(focusWindow(id))}
|
||||||
style={{
|
style={{
|
||||||
left: xPos,
|
left: xPos,
|
||||||
top: yPos,
|
top: yPos,
|
||||||
|
@ -96,7 +104,7 @@ const Window = ({ id }) => {
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="win-topbtn"
|
className="win-topbtn"
|
||||||
onClick={() => dispatch(cloneWindow(id))}
|
onMouseDown={() => dispatch(cloneWindow(id))}
|
||||||
>
|
>
|
||||||
+
|
+
|
||||||
</span>
|
</span>
|
||||||
|
@ -108,13 +116,13 @@ const Window = ({ id }) => {
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
className="win-topbtn"
|
className="win-topbtn"
|
||||||
onClick={() => dispatch(maximizeWindow(id))}
|
onMouseDown={() => dispatch(maximizeWindow(id))}
|
||||||
>
|
>
|
||||||
↑
|
↑
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
className="win-topbtn"
|
className="win-topbtn"
|
||||||
onClick={() => dispatch(closeWindow(id))}
|
onMouseDown={() => dispatch(closeWindow(id))}
|
||||||
>
|
>
|
||||||
X
|
X
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -8,6 +8,11 @@ import type { Action } from '../actions/types';
|
||||||
|
|
||||||
import { clamp } from '../core/utils';
|
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) {
|
function generateWindowId(state) {
|
||||||
let windowId = Math.floor(Math.random() * 99999) + 1;
|
let windowId = Math.floor(Math.random() * 99999) + 1;
|
||||||
while (state.args[windowId]) {
|
while (state.args[windowId]) {
|
||||||
|
@ -175,6 +180,10 @@ export default function windows(
|
||||||
} = action;
|
} = action;
|
||||||
const win = state.windows.find((w) => w.windowId === windowId);
|
const win = state.windows.find((w) => w.windowId === windowId);
|
||||||
const newWindowId = generateWindowId(state);
|
const newWindowId = generateWindowId(state);
|
||||||
|
const {
|
||||||
|
innerWidth: width,
|
||||||
|
innerHeight: height,
|
||||||
|
} = window;
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
windows: [
|
windows: [
|
||||||
|
@ -182,8 +191,8 @@ export default function windows(
|
||||||
{
|
{
|
||||||
...win,
|
...win,
|
||||||
windowId: newWindowId,
|
windowId: newWindowId,
|
||||||
xPos: win.xPos + 15,
|
xPos: Math.min(win.xPos + 15, width - SCREEN_MARGIN_SE),
|
||||||
yPos: win.yPos + 15,
|
yPos: Math.min(win.yPos + 15, height - SCREEN_MARGIN_SE),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
args: {
|
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': {
|
case 'MAXIMIZE_WINDOW': {
|
||||||
const {
|
const {
|
||||||
windowId,
|
windowId,
|
||||||
|
@ -203,7 +233,8 @@ export default function windows(
|
||||||
...state.args,
|
...state.args,
|
||||||
0: state.args[windowId],
|
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];
|
delete args[windowId];
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
|
@ -264,8 +295,12 @@ export default function windows(
|
||||||
if (win.windowId !== windowId) return win;
|
if (win.windowId !== windowId) return win;
|
||||||
return {
|
return {
|
||||||
...win,
|
...win,
|
||||||
xPos: clamp(win.xPos + xDiff, -win.width + 70, width - 30),
|
xPos: clamp(
|
||||||
yPos: clamp(win.yPos + yDiff, 0, height - 30),
|
win.xPos + xDiff,
|
||||||
|
-win.width + SCREEN_MARGIN_W,
|
||||||
|
width - SCREEN_MARGIN_SE,
|
||||||
|
),
|
||||||
|
yPos: clamp(win.yPos + yDiff, 0, height - SCREEN_MARGIN_SE),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
|
@ -284,8 +319,15 @@ export default function windows(
|
||||||
if (win.windowId !== windowId) return win;
|
if (win.windowId !== windowId) return win;
|
||||||
return {
|
return {
|
||||||
...win,
|
...win,
|
||||||
width: Math.max(win.width + xDiff, 70, 70 - win.xPos),
|
width: Math.max(
|
||||||
height: Math.max(win.height + yDiff, 50),
|
win.width + xDiff,
|
||||||
|
MIN_WIDTH,
|
||||||
|
SCREEN_MARGIN_W - win.xPos,
|
||||||
|
),
|
||||||
|
height: Math.max(
|
||||||
|
win.height + yDiff,
|
||||||
|
MIN_HEIGHT,
|
||||||
|
),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
|
@ -299,14 +341,14 @@ export default function windows(
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
} = action;
|
} = action;
|
||||||
const xMax = width - 30;
|
const xMax = width - SCREEN_MARGIN_SE;
|
||||||
const yMax = height - 30;
|
const yMax = height - SCREEN_MARGIN_SE;
|
||||||
let modified = false;
|
let modified = false;
|
||||||
|
|
||||||
const newWindows = [];
|
const newWindows = [];
|
||||||
for (let i = 0; i < state.windows.length; i += 1) {
|
for (let i = 0; i < state.windows.length; i += 1) {
|
||||||
const win = state.windows[i];
|
const win = state.windows[i];
|
||||||
let { xPos, yPos } = win;
|
const { xPos, yPos } = win;
|
||||||
if (xPos > xMax || yPos > yMax) {
|
if (xPos > xMax || yPos > yMax) {
|
||||||
modified = true;
|
modified = true;
|
||||||
newWindows.push({
|
newWindows.push({
|
||||||
|
|
|
@ -68,9 +68,10 @@ export default (store) => (next) => (action) => {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
case 'TOGGLE_GRID':
|
||||||
case 'SET_REQUESTING_PIXEL': {
|
case 'SET_REQUESTING_PIXEL': {
|
||||||
const renderer = getRenderer();
|
const renderer = getRenderer();
|
||||||
renderer.forceNextSubRender = true;
|
renderer.forceNextSubrender = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user