move winows on resize
This commit is contained in:
parent
6d1ad02b26
commit
56d4267cfe
|
@ -169,6 +169,14 @@ export function setMobile(mobile: boolean): Action {
|
|||
};
|
||||
}
|
||||
|
||||
export function windowResize(width: number, height: number): Action {
|
||||
return {
|
||||
type: 'WINDOW_RESIZE',
|
||||
width,
|
||||
height,
|
||||
};
|
||||
}
|
||||
|
||||
export function selectColor(color: ColorIndex): Action {
|
||||
return {
|
||||
type: 'SELECT_COLOR',
|
||||
|
|
|
@ -35,6 +35,7 @@ export type Action =
|
|||
| { type: 'SET_WAIT', wait: ?number }
|
||||
| { type: 'RECEIVE_COOLDOWN', wait: number }
|
||||
| { type: 'SET_MOBILE', mobile: boolean }
|
||||
| { type: 'WINDOW_RESIZE', width: number, height: number }
|
||||
| { type: 'COOLDOWN_END' }
|
||||
| { type: 'COOLDOWN_SET', coolDown: number }
|
||||
| { type: 'COOLDOWN_DELTA', delta: number }
|
||||
|
|
|
@ -17,6 +17,7 @@ import {
|
|||
addChatChannel,
|
||||
removeChatChannel,
|
||||
setMobile,
|
||||
windowResize,
|
||||
} from './actions';
|
||||
import {
|
||||
receivePixelUpdate,
|
||||
|
@ -93,6 +94,14 @@ function init() {
|
|||
}
|
||||
document.addEventListener('touchstart', checkMobile, { once: true });
|
||||
|
||||
// listen for resize
|
||||
//
|
||||
function onWindowResize() {
|
||||
store.dispatch(windowResize(window.innerWidth, window.innerHeight));
|
||||
}
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
onWindowResize();
|
||||
|
||||
store.dispatch(initTimer());
|
||||
|
||||
store.dispatch(fetchMe());
|
||||
|
|
|
@ -36,14 +36,11 @@ const ChannelContextMenu = ({
|
|||
close();
|
||||
}
|
||||
};
|
||||
const handleWindowResize = () => close();
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
document.addEventListener('touchstart', handleClickOutside);
|
||||
window.addEventListener('resize', handleWindowResize);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
document.removeEventListener('touchstart', handleClickOutside);
|
||||
window.removeEventListener('resize', handleWindowResize);
|
||||
};
|
||||
}, [wrapperRef]);
|
||||
|
||||
|
|
|
@ -37,14 +37,11 @@ const UserContextMenu = ({
|
|||
close();
|
||||
}
|
||||
};
|
||||
const handleWindowResize = () => close();
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
document.addEventListener('touchstart', handleClickOutside);
|
||||
window.addEventListener('resize', handleWindowResize);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
document.removeEventListener('touchstart', handleClickOutside);
|
||||
window.removeEventListener('resize', handleWindowResize);
|
||||
};
|
||||
}, [wrapperRef]);
|
||||
|
||||
|
|
|
@ -42,7 +42,6 @@ const Window = ({ id }) => {
|
|||
document.removeEventListener('mousemove', move);
|
||||
};
|
||||
document.addEventListener('mouseup', stopMove, { once: true });
|
||||
document.addEventListener('mouseleave', stopMove, { once: true });
|
||||
}, []);
|
||||
|
||||
const startResize = useCallback((event) => {
|
||||
|
@ -65,7 +64,6 @@ const Window = ({ id }) => {
|
|||
document.removeEventListener('mousemove', resize);
|
||||
};
|
||||
document.addEventListener('mouseup', stopResize, { once: true });
|
||||
document.addEventListener('mouseleave', stopResize, { once: true });
|
||||
}, []);
|
||||
|
||||
if (!win) {
|
||||
|
|
|
@ -44,6 +44,7 @@ export default function contextMenu(
|
|||
};
|
||||
}
|
||||
|
||||
case 'WINDOW_RESIZE':
|
||||
case 'HIDE_CONTEXT_MENU': {
|
||||
return {
|
||||
...state,
|
||||
|
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
import type { Action } from '../actions/types';
|
||||
|
||||
import { clamp } from '../core/utils';
|
||||
|
||||
function generateWindowId(state) {
|
||||
let windowId = Math.floor(Math.random() * 99999) + 1;
|
||||
while (state.args[windowId]) {
|
||||
|
@ -254,12 +256,16 @@ export default function windows(
|
|||
xDiff,
|
||||
yDiff,
|
||||
} = action;
|
||||
const {
|
||||
innerWidth: width,
|
||||
innerHeight: height,
|
||||
} = window;
|
||||
const newWindows = state.windows.map((win) => {
|
||||
if (win.windowId !== windowId) return win;
|
||||
return {
|
||||
...win,
|
||||
xPos: win.xPos + xDiff,
|
||||
yPos: win.yPos + yDiff,
|
||||
xPos: clamp(win.xPos + xDiff, -win.width + 70, width - 30),
|
||||
yPos: clamp(win.yPos + yDiff, 0, height - 30),
|
||||
};
|
||||
});
|
||||
return {
|
||||
|
@ -278,8 +284,8 @@ export default function windows(
|
|||
if (win.windowId !== windowId) return win;
|
||||
return {
|
||||
...win,
|
||||
width: win.width + xDiff,
|
||||
height: win.height + yDiff,
|
||||
width: Math.max(win.width + xDiff, 70, 70 - win.xPos),
|
||||
height: Math.max(win.height + yDiff, 50),
|
||||
};
|
||||
});
|
||||
return {
|
||||
|
@ -288,6 +294,39 @@ export default function windows(
|
|||
};
|
||||
}
|
||||
|
||||
case 'WINDOW_RESIZE': {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
} = action;
|
||||
const xMax = width - 30;
|
||||
const yMax = height - 30;
|
||||
let modified = false;
|
||||
|
||||
const newWindows = [];
|
||||
for (let i = 0; i < state.windows.length; i += 1) {
|
||||
const win = state.windows[i];
|
||||
let { xPos, yPos } = win;
|
||||
if (xPos > xMax || yPos > yMax) {
|
||||
modified = true;
|
||||
newWindows.push({
|
||||
...win,
|
||||
xPos: Math.min(xMax, xPos),
|
||||
yPos: Math.min(yMax, yPos),
|
||||
});
|
||||
} else {
|
||||
newWindows.push(win);
|
||||
}
|
||||
}
|
||||
|
||||
if (!modified) return state;
|
||||
|
||||
return {
|
||||
...state,
|
||||
windows: newWindows,
|
||||
};
|
||||
}
|
||||
|
||||
case 'CLOSE_ALL_WINDOWS': {
|
||||
return initialState;
|
||||
}
|
||||
|
|
|
@ -140,6 +140,7 @@ tr:nth-child(even) {
|
|||
border: solid black;
|
||||
border-width: thin;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.win-topbar {
|
||||
|
|
Loading…
Reference in New Issue
Block a user