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

Fix movable window miscalculating vars

Browse Source
This commit is contained in:
0xa663
2024-02-16 12:05:05 +01:00
parent 6d76132181
commit 0f39ac0497
2 changed files with 68 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/user-script.js
Vendored
+35 -10
View File
@@ -3854,7 +3854,7 @@
result2.placeholder = curryRight.placeholder;
return result2;
}
function debounce2(func, wait, options) {
function debounce3(func, wait, options) {
var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
if (typeof func != "function") {
throw new TypeError2(FUNC_ERROR_TEXT);
@@ -4034,7 +4034,7 @@
leading = "leading" in options ? !!options.leading : leading;
trailing = "trailing" in options ? !!options.trailing : trailing;
}
return debounce2(func, wait, {
return debounce3(func, wait, {
"leading": leading,
"maxWait": wait,
"trailing": trailing
@@ -5048,7 +5048,7 @@
lodash.create = create;
lodash.curry = curry;
lodash.curryRight = curryRight;
lodash.debounce = debounce2;
lodash.debounce = debounce3;
lodash.defaults = defaults;
lodash.defaultsDeep = defaultsDeep;
lodash.defer = defer;
@@ -36433,10 +36433,12 @@
this.props.storage.getItem(this.storageKey).then((point) => {
if (!this.destroyed && point) {
this.setState({ x: point.x, y: point.y });
setTimeout(() => {
this.fixBounds();
}, 1e3);
} else {
this.setState({ x: 0, y: 0 });
}
this.fixBounds();
});
}
componentWillUnmount() {
@@ -36481,16 +36483,39 @@
this.setState({ moving: false });
};
fixBounds = () => {
const bounds = this.ref.current?.getBoundingClientRect();
if (bounds) {
let x2 = this.state.x;
let y2 = this.state.y;
if (bounds.left < 0) {
x2 = 0;
}
if (bounds.right > window.innerWidth) {
x2 = window.innerWidth - bounds.width;
}
if (bounds.top < 0) {
y2 = 0;
}
if (bounds.bottom > window.innerHeight) {
y2 = window.innerHeight - bounds.height;
}
if (this.state.x !== x2 || this.state.y !== y2) {
this.setState({ x: x2, y: y2 });
}
}
};
savePoint = (0, import_lodash2.debounce)((point) => {
this.props.storage.setItem(this.storageKey, point);
}, 100);
handleMoveLogic(clientX, clientY) {
const ref = this.dragRef.current?.getBoundingClientRect();
const ref = this.ref.current?.getBoundingClientRect();
if (ref && this.moving) {
const xx = (0, import_lodash2.clamp)(clientX, this.moving.xOff, window.innerWidth - ref.width + this.moving.xOff);
const yy = (0, import_lodash2.clamp)(clientY, this.moving.yOff, window.innerHeight - ref.height + this.moving.yOff);
const x2 = xx - this.moving.xOff;
const y2 = yy - this.moving.yOff;
const xx = clientX - this.moving.xOff;
const yy = clientY - this.moving.yOff;
const x2 = (0, import_lodash2.clamp)(xx, 0, window.innerWidth - ref.width);
const y2 = (0, import_lodash2.clamp)(yy, 0, window.innerHeight - ref.height);
const point = { x: x2, y: y2 };
this.props.storage.setItem(this.storageKey, point);
this.savePoint(point);
this.setState(point);
}
}
src/UI/components/movableWindow.tsx
+33 -38
View File
@@ -1,7 +1,7 @@
import React, { createRef } from "react";
import styled from "styled-components";
import { Point } from "../../interfaces";
import { clamp } from "lodash";
import { clamp, debounce } from "lodash";
import { Storage } from "../../storage";
const Movable = styled.div`
@@ -65,10 +65,12 @@ export class MovableWindow extends React.Component<Props, State> {
this.props.storage.getItem<Point>(this.storageKey).then(point => {
if (!this.destroyed && point) {
this.setState({x: point.x, y: point.y});
setTimeout(() => {
this.fixBounds();
}, 1000);
} else {
this.setState({x: 0, y: 0});
}
this.fixBounds();
});
}
componentWillUnmount () {
@@ -114,48 +116,41 @@ export class MovableWindow extends React.Component<Props, State> {
this.setState({moving: false});
};
private fixBounds = () => {
// if(this.shown) {
// const {left, top, width, height} = this.container.getBoundingClientRect();
// const s = this.container.style;
// if (width > window.innerWidth || height > window.innerHeight) {
// const padding = 10;
// if (width > window.innerWidth) {
// s.width = `${window.innerWidth - padding}px`;
// }
// if (height > window.innerHeight) {
// s.height = `${window.innerHeight - padding}px`;
// }
// s.overflow = "auto";
// } else {
// s.width = "";
// s.height = "";
// s.overflow = "";
// if (left < 0) {
// s.left = `0px`;
// }
// if (top < 0) {
// s.top = `0px`;
// }
// if(left + width > window.innerWidth) {
// s.left = `${window.innerWidth - width}px`;
// }
// if (top + height > window.innerHeight) {
// s.top = `${window.innerHeight - height}px`;
// }
// }
// }
const bounds = this.ref.current?.getBoundingClientRect();
if (bounds) {
let x = this.state.x;
let y = this.state.y;
if (bounds.left < 0) {
x = 0;
} if (bounds.right > window.innerWidth) {
x = window.innerWidth - bounds.width;
}
if (bounds.top < 0) {
y = 0;
} if (bounds.bottom > window.innerHeight) {
y = window.innerHeight - bounds.height;
}
if (this.state.x !== x || this.state.y !== y) {
this.setState({x, y});
}
}
};
savePoint = debounce((point: Point) => {
this.props.storage.setItem(this.storageKey, point);
}, 100);
private handleMoveLogic(clientX: number, clientY: number) {
const ref = this.dragRef.current?.getBoundingClientRect();
const ref = this.ref.current?.getBoundingClientRect();
if (ref && this.moving) {
const xx = clamp(clientX, this.moving.xOff, window.innerWidth - ref!.width + this.moving.xOff);
const yy = clamp(clientY, this.moving.yOff, window.innerHeight - ref!.height + this.moving.yOff) ;
const x = xx - this.moving!.xOff;
const y = yy - this.moving!.yOff;
const xx = clientX - this.moving!.xOff;
const yy = clientY - this.moving!.yOff;
const x = clamp(xx, 0, window.innerWidth - ref!.width);
const y = clamp(yy, 0, window.innerHeight - ref!.height) ;
const point = { x, y };
this.props.storage.setItem(this.storageKey, point);
this.savePoint(point);
this.setState(point);
}
}