Terncode/Pixelcanvas.io-overlay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add touch support

Browse Source
This commit is contained in:
0xa663
2024-02-16 11:53:29 +01:00
parent 79dc76516a
commit 6d76132181
2 changed files with 55 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/user-script.js
Vendored
+27 -16
View File
@@ -36428,6 +36428,8 @@
window.addEventListener("mousemove", this.onMouseMove); window.addEventListener("mousemove", this.onMouseMove);
window.addEventListener("mouseup", this.onMouseUp); window.addEventListener("mouseup", this.onMouseUp);
window.addEventListener("resize", this.fixBounds); window.addEventListener("resize", this.fixBounds);
window.addEventListener("touchmove", this.onTouchMove);
window.addEventListener("touchend", this.onMouseUp);
this.props.storage.getItem(this.storageKey).then((point) => { this.props.storage.getItem(this.storageKey).then((point) => {
if (!this.destroyed && point) { if (!this.destroyed && point) {
this.setState({ x: point.x, y: point.y }); this.setState({ x: point.x, y: point.y });
@@ -36441,17 +36443,21 @@
window.removeEventListener("mousemove", this.onMouseMove); window.removeEventListener("mousemove", this.onMouseMove);
window.removeEventListener("mouseup", this.onMouseUp); window.removeEventListener("mouseup", this.onMouseUp);
window.removeEventListener("resize", this.fixBounds); window.removeEventListener("resize", this.fixBounds);
window.removeEventListener("touchmove", this.onTouchMove);
window.removeEventListener("touchend", this.onMouseUp);
this.destroyed = false; this.destroyed = false;
} }
onTouchMove = (event) => { onTouchMove = (event) => {
if (!this.moving) if (!this.moving)
return; return;
const lastTouch = event.touches[event.touches.length - 1]; if (!(event instanceof TouchEvent) || !event.isTrusted) {
const div = this.dragRef.current; return;
const { x: x2, y: y2, width, height } = div.getBoundingClientRect(); }
const offsetX = (lastTouch.clientX - x2) / width * div.offsetWidth; for (let i2 = 0; i2 < event.touches.length; i2++) {
const offsetY = (lastTouch.clientY - y2) / height * div.offsetHeight; const touch = event.touches[i2];
this.setMoving(lastTouch.clientX, lastTouch.clientY, offsetX, offsetY); const { clientX, clientY } = touch;
this.handleMoveLogic(clientX, clientY);
}
}; };
setMoving = (clientX, clientY, offsetX, offsetY) => { setMoving = (clientX, clientY, offsetX, offsetY) => {
this.moving = { this.moving = {
@@ -36464,7 +36470,7 @@
onMouseMove = (event) => { onMouseMove = (event) => {
if (!this.moving) if (!this.moving)
return; return;
if (!(event instanceof MouseEvent) || !event.isTrusted || event.ctrlKey || event.altKey || event.metaKey) { if (!(event instanceof MouseEvent) || event.ctrlKey || event.altKey || event.metaKey) {
return; return;
} }
const { clientX, clientY } = event; const { clientX, clientY } = event;
@@ -36488,19 +36494,24 @@
this.setState(point); this.setState(point);
} }
} }
onMouseDown = (event) => {
this.setMoving(event.clientX, event.clientY, event.nativeEvent.offsetX, event.nativeEvent.offsetY);
this.setState({ moving: true });
};
onTouchStart = (event) => {
const lastTouch = event.nativeEvent.touches[event.nativeEvent.touches.length - 1];
const div = event.target;
const { x: x2, y: y2, width, height } = div.getBoundingClientRect();
const offsetX = (lastTouch.clientX - x2) / width * div.offsetWidth;
const offsetY = (lastTouch.clientY - y2) / height * div.offsetHeight;
this.setMoving(lastTouch.clientX, lastTouch.clientY, offsetX, offsetY);
this.setState({ moving: true });
};
get storageKey() { get storageKey() {
return `__storage__${this.props.storageKey}`; return `__storage__${this.props.storageKey}`;
} }
render() { render() {
return /* @__PURE__ */ import_react10.default.createElement(Movable, { ref: this.ref, style: { left: `${this.state.x}px`, top: `${this.state.y}px` } }, /* @__PURE__ */ import_react10.default.createElement(DragArea, { ref: this.dragRef, style: { cursor: this.state.moving ? "grabbing" : "" }, onMouseDown: (event) => { return /* @__PURE__ */ import_react10.default.createElement(Movable, { ref: this.ref, style: { left: `${this.state.x}px`, top: `${this.state.y}px` } }, /* @__PURE__ */ import_react10.default.createElement(DragArea, { ref: this.dragRef, style: { cursor: this.state.moving ? "grabbing" : "" }, onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, " ", /* @__PURE__ */ import_react10.default.createElement("h2", null, this.props.title), " "), this.props.children);
this.moving = {
x: event.clientX,
y: event.clientY,
xOff: event.nativeEvent.offsetX,
yOff: event.nativeEvent.offsetY
};
this.setState({ moving: true });
} }, " ", /* @__PURE__ */ import_react10.default.createElement("h2", null, this.props.title), " "), this.props.children);
} }
}; };
src/UI/components/movableWindow.tsx
+28 -17
View File
@@ -60,6 +60,8 @@ export class MovableWindow extends React.Component<Props, State> {
window.addEventListener("mousemove", this.onMouseMove); window.addEventListener("mousemove", this.onMouseMove);
window.addEventListener("mouseup", this.onMouseUp); window.addEventListener("mouseup", this.onMouseUp);
window.addEventListener("resize", this.fixBounds); window.addEventListener("resize", this.fixBounds);
window.addEventListener("touchmove", this.onTouchMove);
window.addEventListener("touchend", this.onMouseUp);
this.props.storage.getItem<Point>(this.storageKey).then(point => { this.props.storage.getItem<Point>(this.storageKey).then(point => {
if (!this.destroyed && point) { if (!this.destroyed && point) {
this.setState({x: point.x, y: point.y}); this.setState({x: point.x, y: point.y});
@@ -73,17 +75,21 @@ export class MovableWindow extends React.Component<Props, State> {
window.removeEventListener("mousemove", this.onMouseMove); window.removeEventListener("mousemove", this.onMouseMove);
window.removeEventListener("mouseup", this.onMouseUp); window.removeEventListener("mouseup", this.onMouseUp);
window.removeEventListener("resize", this.fixBounds); window.removeEventListener("resize", this.fixBounds);
window.removeEventListener("touchmove", this.onTouchMove);
window.removeEventListener("touchend", this.onMouseUp);
this.destroyed = false; this.destroyed = false;
} }
onTouchMove = (event: TouchEvent) => { onTouchMove = (event: TouchEvent) => {
if (!this.moving) return; if (!this.moving) return;
const lastTouch = event.touches[event.touches.length - 1]; if (!(event instanceof TouchEvent) || !event.isTrusted){
const div = this.dragRef.current!; return;
const { x, y, width, height} = div.getBoundingClientRect(); }
const offsetX = (lastTouch.clientX - x) / width * div.offsetWidth; for (let i = 0; i < event.touches.length; i++) {
const offsetY = (lastTouch.clientY - y) / height * div.offsetHeight; const touch = event.touches[i];
this.setMoving(lastTouch.clientX, lastTouch.clientY, offsetX, offsetY); const { clientX, clientY } = touch;
this.handleMoveLogic(clientX, clientY);
}
}; };
setMoving = (clientX: number, clientY: number, offsetX: number, offsetY: number) => { setMoving = (clientX: number, clientY: number, offsetX: number, offsetY: number) => {
@@ -97,7 +103,7 @@ export class MovableWindow extends React.Component<Props, State> {
private onMouseMove = (event: MouseEvent) => { private onMouseMove = (event: MouseEvent) => {
if (!this.moving) return; if (!this.moving) return;
if (!(event instanceof MouseEvent) || !event.isTrusted || event.ctrlKey || event.altKey || event.metaKey){ if (!(event instanceof MouseEvent) || event.ctrlKey || event.altKey || event.metaKey){
return; return;
} }
const { clientX, clientY } = event; const { clientX, clientY } = event;
@@ -153,21 +159,26 @@ export class MovableWindow extends React.Component<Props, State> {
this.setState(point); this.setState(point);
} }
} }
onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
this.setMoving(event.clientX,event.clientY, event.nativeEvent.offsetX, event.nativeEvent.offsetY);
this.setState({moving: true});
};
onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
const lastTouch = event.nativeEvent.touches[event.nativeEvent.touches.length - 1];
const div = event.target as HTMLDivElement;
const { x, y, width, height} = div.getBoundingClientRect();
const offsetX = (lastTouch.clientX - x) / width * div.offsetWidth;
const offsetY = (lastTouch.clientY - y) / height * div.offsetHeight;
this.setMoving(lastTouch.clientX, lastTouch.clientY, offsetX, offsetY);
this.setState({moving: true});
};
get storageKey() { get storageKey() {
return `__storage__${this.props.storageKey}`; return `__storage__${this.props.storageKey}`;
} }
render() { render() {
return <Movable ref={this.ref} style={{left: `${this.state.x}px`, top: `${this.state.y}px`}}> return <Movable ref={this.ref} style={{left: `${this.state.x}px`, top: `${this.state.y}px`}}>
<DragArea ref={this.dragRef} style={{cursor: this.state.moving ? "grabbing" : ""}} onMouseDown={event => { <DragArea ref={this.dragRef} style={{cursor: this.state.moving ? "grabbing" : ""}} onMouseDown={this.onMouseDown} onTouchStart={this.onTouchStart} > <h2>{this.props.title}</h2> </DragArea>
this.moving = {
x: event.clientX,
y: event.clientY,
xOff: event.nativeEvent.offsetX,
yOff: event.nativeEvent.offsetY,
};
this.setState({moving: true});
}}> <h2>{this.props.title}</h2> </DragArea>
{this.props.children} {this.props.children}