Fix movable window miscalculating vars

dist/user-script.js

@@ -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 });
+        }
+      }
     };
-    handleMoveLogic(clientX, clientY) {
+    savePoint = (0, import_lodash2.debounce)((point) => {
-      const ref = this.dragRef.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 point = { x: x2, y: y2 };
       this.props.storage.setItem(this.storageKey, point);
+    }, 100);
+    handleMoveLogic(clientX, clientY) {
+      const ref = this.ref.current?.getBoundingClientRect();
+      if (ref && this.moving) {
+        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.savePoint(point);
         this.setState(point);
       }
     }

src/UI/components/movableWindow.tsx

@@ -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 bounds = this.ref.current?.getBoundingClientRect();
-        //     const {left, top, width, height} = this.container.getBoundingClientRect();
+        if (bounds) {
-        //     const s = this.container.style;
+            let x = this.state.x;
-        //     if (width > window.innerWidth || height > window.innerHeight) {
+            let y = this.state.y;
-        //         const padding = 10;
+            if (bounds.left < 0) {
-        //         if (width > window.innerWidth) {
+                x = 0;
-        //             s.width = `${window.innerWidth - padding}px`;
+            } if (bounds.right > window.innerWidth) {
-        //         }
+                x = window.innerWidth - bounds.width;
-        //         if (height > window.innerHeight) {
+            }
-        //             s.height = `${window.innerHeight - padding}px`;
+
-        //         }
+            if (bounds.top < 0) {
-        //         s.overflow = "auto";
+                y = 0;
-        //     } else {
+            } if (bounds.bottom > window.innerHeight) {
-        //         s.width = "";
+                y = window.innerHeight - bounds.height;
-        //         s.height = "";
+            }
-        //         s.overflow = "";
+            if (this.state.x !== x || this.state.y !== y) {
-        //         if (left < 0) {
+                this.setState({x, y});
-        //             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`;
-        //         }
-        //     }
-        // }
     };
 
-    private handleMoveLogic(clientX: number, clientY: number) {
+    savePoint = debounce((point: Point) => {
-        const ref = this.dragRef.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 point = { x, y };
         this.props.storage.setItem(this.storageKey, point);
+    }, 100);
+
+    private handleMoveLogic(clientX: number, clientY: number) {
+        const ref = this.ref.current?.getBoundingClientRect();
+        if (ref && this.moving) {
+            
+            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.savePoint(point);
             this.setState(point);
         }
     }