fixed resizing of relative widgets (#338)

* fixed resizing of relative widgets - closes #334 * changelog
ioBroker · Jan 24, 2024 · 5d4d456 · 5d4d456
1 parent d3e33b9
commit 5d4d456
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -261,6 +261,9 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
     ### **WORK IN PROGRESS**
 -->
 ## Changelog
+### **WORK IN PROGRESS**
+* (foxriver76) fixed resizing issue for relative widgets
+
 ### 2.9.24 (2024-01-24)
 * (foxriver76) Image 8 widget ported to react
 

diff --git a/src/src/Vis/visView.jsx b/src/src/Vis/visView.jsx
@@ -428,41 +428,39 @@ class VisView extends React.Component {
             return;
         }
 
-        if (!isRelative) {
-            this.refView.current.addEventListener('mousemove', this.onMouseWidgetMove);
-            window.document.addEventListener('mouseup', this.onMouseWidgetUp);
+        this.refView.current.addEventListener('mousemove', this.onMouseWidgetMove);
+        window.document.addEventListener('mouseup', this.onMouseWidgetUp);
 
-            this.movement = {
-                moved: false,
-                startX: e.pageX,
-                startY: e.pageY,
-                isResize,
-                x: 0,
-                y: 0,
-            };
+        this.movement = {
+            moved: false,
+            startX: e.pageX,
+            startY: e.pageY,
+            isResize,
+            x: 0,
+            y: 0,
+        };
 
-            const widgetsRefs = this.widgetsRefs;
+        const widgetsRefs = this.widgetsRefs;
 
-            this.props.selectedWidgets.forEach(selectedWidget => {
-                const widgetRect = widgetsRefs[selectedWidget].refService.current.getBoundingClientRect();
-                if (e.pageX <= widgetRect.right && e.pageX >= widgetRect.left && e.pageY <= widgetRect.bottom && e.pageY >= widgetRect.top) {
-                    this.movement.startWidget = widgetsRefs[selectedWidget].refService.current.getBoundingClientRect();
-                }
-            });
+        this.props.selectedWidgets.forEach(selectedWidget => {
+            const widgetRect = widgetsRefs[selectedWidget].refService.current.getBoundingClientRect();
+            if (e.pageX <= widgetRect.right && e.pageX >= widgetRect.left && e.pageY <= widgetRect.bottom && e.pageY >= widgetRect.top) {
+                this.movement.startWidget = widgetsRefs[selectedWidget].refService.current.getBoundingClientRect();
+            }
+        });
 
-            this.props.selectedWidgets.forEach(_wid => {
-                if (widgetsRefs[_wid]?.onMove) {
-                    widgetsRefs[_wid].onMove(); // indicate the start of movement
-                }
-            });
+        this.props.selectedWidgets.forEach(_wid => {
+            if (widgetsRefs[_wid]?.onMove) {
+                widgetsRefs[_wid].onMove(); // indicate the start of movement
+            }
+        });
 
-            // Indicate about movement start
-            Object.keys(widgetsRefs).forEach(_wid => {
-                if (widgetsRefs[_wid]?.onCommand) {
-                    widgetsRefs[_wid].onCommand('startMove');
-                }
-            });
-        }
+        // Indicate about movement start
+        Object.keys(widgetsRefs).forEach(_wid => {
+            if (widgetsRefs[_wid]?.onCommand) {
+                widgetsRefs[_wid].onCommand('startMove');
+            }
+        });
     };
 
     onIgnoreMouseEvents = ignore => {