fixed multiple problems with nested groups (#356)

* fixed multiple problems with nested groups - and allow to select widgets in group via click (previously only dropdown worked) - closes #353 * rm prop * also make group/ungroup actions inside group view working * changelog --------- Signed-off-by: Max Hauser <[email protected]>
ioBroker · Feb 5, 2024 · f9a2c64 · f9a2c64
1 parent 23c7428
commit f9a2c64
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -264,6 +264,9 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
 -->
 ## Changelog
 ### **WORK IN PROGRESS**
+* (foxriver76) fixed multiple problems with nested groups
+* (foxriver76) also made group/ungroup commands working in group view
+* (foxriver76) allow to select widgets in group via click (previously only dropdown worked)
 * (foxriver76) fixed issue, that Basic Image 8 is not configurable for 0 value
 
 ### 2.9.28 (2024-02-03)

diff --git a/src/src/App.jsx b/src/src/App.jsx
@@ -861,7 +861,7 @@ class App extends Runtime {
 
             },
         };
-        const groupId = getNewGroupId();
+        const groupId = getNewGroupId(project);
         let left = 0;
         let top = 0;
         let right = 0;
@@ -888,6 +888,20 @@ class App extends Runtime {
             widgets[selectedWidget].style.left = widgetBoundingRect.left - left;
             widgets[selectedWidget].style.top = widgetBoundingRect.top - top;
         });
+
+        if (this.state.selectedGroup) {
+            group.grouped = true;
+            group.groupid = this.state.selectedGroup;
+
+            const parentGroupWidget = widgets[this.state.selectedGroup];
+            parentGroupWidget.data.members.push(groupId);
+            // and remove the ungrouped versions
+            for (const wid of this.state.selectedWidgets) {
+                const idx = parentGroupWidget.data.members.indexOf(wid);
+                parentGroupWidget.data.members.splice(idx, 1);
+            }
+        }
+
         group.style.left = `${left}px`;
         group.style.top = `${top}px`;
         group.style.width = `${right - left}px`;
@@ -916,7 +930,24 @@ class App extends Runtime {
             delete widgets[member].grouped;
             delete widgets[member].groupid;
         }
+
+        if (this.state.selectedGroup) {
+            const parentGroupWidget = widgets[this.state.selectedGroup];
+
+            // if ungrouped nested group, re-add the single members
+            for (const member of group.data.members) {
+                parentGroupWidget.data.members.push(member);
+
+                widgets[member].grouped = true;
+                widgets[member].groupid = this.state.selectedGroup;
+            }
+
+            const idx = parentGroupWidget.data.members.indexOf(this.state.selectedWidgets[0]);
+            parentGroupWidget.data.members.splice(idx, 1);
+        }
+
         this.setSelectedWidgets(group.data.members);
+
         delete widgets[this.state.selectedWidgets[0]];
 
         return this.changeProject(project);

diff --git a/src/src/Attributes/Widget/index.jsx b/src/src/Attributes/Widget/index.jsx
@@ -626,8 +626,8 @@ class Widget extends Component {
                         }
                     });
 
-                    currentWidget.data.bindings.forEach(attr => !bindFields.includes(`data_${attr}`) && bindFields.push(`data_${attr}`));
-                    currentWidget.style.bindings.forEach(attr => !bindFields.includes(`style_${attr}`) && bindFields.push(`style_${attr}`));
+                    currentWidget.data.bindings?.forEach(attr => !bindFields.includes(`data_${attr}`) && bindFields.push(`data_${attr}`));
+                    currentWidget.style.bindings?.forEach(attr => !bindFields.includes(`style_${attr}`) && bindFields.push(`style_${attr}`));
                 }
             });
         } else {

diff --git a/src/src/Vis/Widgets/Basic/BasicGroup.jsx b/src/src/Vis/Widgets/Basic/BasicGroup.jsx
@@ -142,11 +142,6 @@ class BasicGroup extends VisRxWidget {
     }
 
     renderWidgetBody(props) {
-        // do not render anything if some group is editing
-        if (this.props.selectedGroup) {
-            return null;
-        }
-
         const context = this.props.context;
         super.renderWidgetBody(props);
         const widget = context.views[this.props.view].widgets[this.props.id];
@@ -197,8 +192,12 @@ class BasicGroup extends VisRxWidget {
 
                 // use the same container for relative and absolute widgets (props.refService)
                 return this.props.context.VisView.getOneWidget(index, _widget, {
+                    selectedGroup: this.props.selectedGroup,
+                    selectedWidgets: this.props.selectedWidgets,
                     context: this.props.context,
-                    editMode: false,
+                    editMode: this.props.editMode,
+                    moveAllowed: this.props.moveAllowed,
+                    mouseDownOnView: this.props.mouseDownOnView,
                     index,
                     id,
                     view: this.props.view,

diff --git a/src/src/Vis/visView.jsx b/src/src/Vis/visView.jsx
@@ -1711,14 +1711,6 @@ class VisView extends React.Component {
         if (this.props.selectedGroup) {
             // draw all widgets in div, that has exact size of the group
             renderedWidgets = <>
-                <div
-                    ref={this.refRelativeView}
-                    style={this.getRelativeStyle(settings, this.props.selectedGroup)}
-                    className="vis-relative-view"
-                >
-                    {rxRelativeWidgets}
-                    {rxAbsoluteWidgets}
-                </div>
                 {rxGroupWidget}
             </>;
         } else {

diff --git a/src/src/types.d.ts b/src/src/types.d.ts
@@ -36,14 +36,20 @@ export type AnyWidgetId = SingleWidgetId | GroupWidgetId
 interface WidgetData {
     /** Only exists if given by user in tab general */
     name?: string;
+    bindings?: string[];
+    [other: string]: unknown;
+}
+
+interface WidgetStyle {
+    bindings?: string[];
     [other: string]: unknown;
 }
 
 interface SingleWidget  {
     /** Internal wid */
     _id?: string;
     data: WidgetData;
-    style: Record<string, string>;
+    style: WidgetStyle;
     tpl: string;
     widgetSet: string;
     /** The id of the group, if the widget is grouped */