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("mouseup", this.onMouseUp);
window.addEventListener("resize", this.fixBounds);
window.addEventListener("touchmove", this.onTouchMove);
window.addEventListener("touchend", this.onMouseUp);
this.props.storage.getItem(this.storageKey).then((point) => {
if (!this.destroyed && point) {
this.setState({ x: point.x, y: point.y });
@@ -36441,17 +36443,21 @@
window.removeEventListener("mousemove", this.onMouseMove);
window.removeEventListener("mouseup", this.onMouseUp);
window.removeEventListener("resize", this.fixBounds);
window.removeEventListener("touchmove", this.onTouchMove);
window.removeEventListener("touchend", this.onMouseUp);
this.destroyed = false;
}
onTouchMove = (event) => {
if (!this.moving)
return;
const lastTouch = event.touches[event.touches.length - 1];
const div = this.dragRef.current;
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);
if (!(event instanceof TouchEvent) || !event.isTrusted) {
return;
}
for (let i2 = 0; i2 < event.touches.length; i2++) {
const touch = event.touches[i2];
const { clientX, clientY } = touch;
this.handleMoveLogic(clientX, clientY);
}
};
setMoving = (clientX, clientY, offsetX, offsetY) => {
this.moving = {
@@ -36464,7 +36470,7 @@
onMouseMove = (event) => {
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;
}
const { clientX, clientY } = event;
@@ -36488,19 +36494,24 @@
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() {
return `__storage__${this.props.storageKey}`;
}
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) => {
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);
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);
}
};