debug windows on phones
This commit is contained in:
parent
24fbbab6c0
commit
f593d8c7e2
|
@ -3,7 +3,7 @@
|
||||||
* @flow
|
* @flow
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useCallback } from 'react';
|
import React, { useCallback, useRef, useEffect } from 'react';
|
||||||
import { useSelector, useDispatch } from 'react-redux';
|
import { useSelector, useDispatch } from 'react-redux';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -19,39 +19,57 @@ import COMPONENTS from './windows';
|
||||||
const selectWindowById = (state, windowId) => state.windows.windows.find((win) => win.windowId === windowId);
|
const selectWindowById = (state, windowId) => state.windows.windows.find((win) => win.windowId === windowId);
|
||||||
|
|
||||||
const Window = ({ id }) => {
|
const Window = ({ id }) => {
|
||||||
|
const titleBarRef = useRef(null);
|
||||||
|
|
||||||
const win = useSelector((state) => selectWindowById(state, id));
|
const win = useSelector((state) => selectWindowById(state, id));
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const startMove = useCallback((event) => {
|
const startMove = useCallback((event) => {
|
||||||
event.preventDefault();
|
try {
|
||||||
dispatch(focusWindow(id));
|
event.stopPropagation();
|
||||||
|
dispatch(focusWindow(id));
|
||||||
|
console.log('startMove');
|
||||||
|
|
||||||
let {
|
let {
|
||||||
clientX: startX,
|
clientX: startX,
|
||||||
clientY: startY,
|
clientY: startY,
|
||||||
} = event;
|
} = event.touches ? event.touches[0] : evt;
|
||||||
const move = (evt) => {
|
const move = (evt) => {
|
||||||
const {
|
evt.stopPropagation();
|
||||||
clientX: curX,
|
try {
|
||||||
clientY: curY,
|
const {
|
||||||
} = evt;
|
clientX: curX,
|
||||||
dispatch(moveWindow(id, curX - startX, curY - startY));
|
clientY: curY,
|
||||||
startX = curX;
|
} = evt.touches ? evt.touches[0] : evt;
|
||||||
startY = curY;
|
console.log(`move by ${curX-startX} - ${curY - startY}`);
|
||||||
};
|
dispatch(moveWindow(id, curX - startX, curY - startY));
|
||||||
document.addEventListener('mousemove', move);
|
startX = curX;
|
||||||
const stopMove = () => {
|
startY = curY;
|
||||||
document.removeEventListener('mousemove', move);
|
} catch (e) {
|
||||||
document.removeEventListener('mouseup', stopMove);
|
console.log(e);
|
||||||
document.removeEventListener('touchcancel', stopMove);
|
}
|
||||||
};
|
};
|
||||||
document.addEventListener('mouseup', stopMove);
|
document.addEventListener('mousemove', move);
|
||||||
document.addEventListener('touchcancel', stopMove);
|
document.addEventListener('touchmove', move);
|
||||||
|
const stopMove = (evt) => {
|
||||||
|
evt.stopPropagation();
|
||||||
|
console.log('stopMove');
|
||||||
|
document.removeEventListener('mousemove', move);
|
||||||
|
document.removeEventListener('touchmove', move);
|
||||||
|
document.removeEventListener('mouseup', stopMove);
|
||||||
|
document.removeEventListener('touchcancel', stopMove);
|
||||||
|
document.removeEventListener('touchend', stopMove);
|
||||||
|
};
|
||||||
|
document.addEventListener('mouseup', stopMove);
|
||||||
|
document.addEventListener('touchcancel', stopMove);
|
||||||
|
document.addEventListener('touchend', stopMove);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const startResize = useCallback((event) => {
|
const startResize = useCallback((event) => {
|
||||||
event.preventDefault();
|
|
||||||
dispatch(focusWindow(id));
|
dispatch(focusWindow(id));
|
||||||
|
|
||||||
let {
|
let {
|
||||||
|
@ -79,6 +97,19 @@ const Window = ({ id }) => {
|
||||||
document.addEventListener('touchend', stopResize);
|
document.addEventListener('touchend', stopResize);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (titleBarRef && titleBarRef.current) {
|
||||||
|
console.log('add listener')
|
||||||
|
console.log(titleBarRef.current);
|
||||||
|
titleBarRef.current.addEventListener('mousedown', startMove, {passive: false});
|
||||||
|
titleBarRef.current.addEventListener('touchstart', startMove, {passive: false});
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
titleBarRef.current.removeEventListener('mousedown', startMove);
|
||||||
|
titleBarRef.current.removeEventListener('touchstart', startMove);
|
||||||
|
};
|
||||||
|
}, [titleBarRef, startMove]);
|
||||||
|
|
||||||
const clone = (evt) => {
|
const clone = (evt) => {
|
||||||
evt.stopPropagation();
|
evt.stopPropagation();
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
|
@ -125,8 +156,7 @@ const Window = ({ id }) => {
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="win-topbar"
|
className="win-topbar"
|
||||||
onMouseDown={startMove}
|
ref={titleBarRef}
|
||||||
onTouchStart={startMove}
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="win-topbtn"
|
className="win-topbtn"
|
||||||
|
@ -156,6 +186,7 @@ const Window = ({ id }) => {
|
||||||
onMouseDown={startResize}
|
onMouseDown={startResize}
|
||||||
onTouchStart={startResize}
|
onTouchStart={startResize}
|
||||||
className="win-resize"
|
className="win-resize"
|
||||||
|
touchAction="none"
|
||||||
>
|
>
|
||||||
▨
|
▨
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -227,6 +227,7 @@ class PixelPlainterControls {
|
||||||
onTouchStart(event: TouchEvent) {
|
onTouchStart(event: TouchEvent) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
console.log('PixelPlainterControls touch start');
|
||||||
document.activeElement.blur();
|
document.activeElement.blur();
|
||||||
|
|
||||||
this.clickTapStartTime = Date.now();
|
this.clickTapStartTime = Date.now();
|
||||||
|
@ -257,6 +258,7 @@ class PixelPlainterControls {
|
||||||
onTouchEnd(event: TouchEvent) {
|
onTouchEnd(event: TouchEvent) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
console.log('PixelPlainterControls touch end');
|
||||||
|
|
||||||
const { store } = this;
|
const { store } = this;
|
||||||
if (event.touches.length === 0 && this.isClicking) {
|
if (event.touches.length === 0 && this.isClicking) {
|
||||||
|
@ -293,6 +295,7 @@ class PixelPlainterControls {
|
||||||
onTouchMove(event: TouchEvent) {
|
onTouchMove(event: TouchEvent) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
console.log('PixelPlainterControls touch move');
|
||||||
|
|
||||||
const multiTouch = (event.touches.length > 1);
|
const multiTouch = (event.touches.length > 1);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user