Merge pull request #1442 from FlowFuse/wysiwyg-issues

Fix remaining Wysiwyg issues
FlowFuse · Nov 4, 2024 · 6d22afb · 6d22afb
2 parents bd1eb70 + de76e2e
commit 6d22afb
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 12 deletions.
diff --git a/nodes/config/locales/en-US/ui_page.json b/nodes/config/locales/en-US/ui_page.json
@@ -7,7 +7,6 @@
             "icon": "Icon",
             "theme": "Theme",
             "layout": "Layout",
-            "wysiwyg": "Editor",
             "grid": "Grid",
             "fixed": "Fixed",
             "tabs": "Tabs",

diff --git a/nodes/config/ui_page.html b/nodes/config/ui_page.html
@@ -97,7 +97,6 @@
                     types: [{
                         value: 'layout',
                         options: [
-                            { value: 'wysiwyg', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.wysiwyg') },
                             { value: 'grid', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.grid') },
                             { value: 'flex', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.fixed') },
                             { value: 'tabs', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.tabs') },

diff --git a/nodes/widgets/ui_control.js b/nodes/widgets/ui_control.js
@@ -177,13 +177,15 @@ module.exports = function (RED) {
                         // this message was sent by this particular node
                         if (evt === 'change') {
                             const wNode = RED.nodes.getNode(node.id)
-                            let msg = {
-                                payload: 'change',
-                                tab: payload.page, // index of tab
-                                name: payload.name // page name
+                            if (wNode && payload && wNode.send) {
+                                let msg = {
+                                    payload: 'change',
+                                    tab: payload.page, // index of tab
+                                    name: payload.name // page name
+                                }
+                                msg = addConnectionCredentials(RED, msg, conn, ui)
+                                wNode.send(msg)
                             }
-                            msg = addConnectionCredentials(RED, msg, conn, ui)
-                            wNode.send(msg)
                         }
                     }
                 }

diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
@@ -109,8 +109,8 @@ export default {
         }
     },
     mounted () {
-        this.pageGroups = this.getPageGroups()
         if (this.editMode) { // mixin property
+            this.pageGroups = this.getPageGroups()
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -197,6 +197,7 @@ export default {
         },
         discardEdits () {
             this.revertEdits() // Mixin method
+            this.pageGroups = this.getPageGroups()
         },
         async leaveEditMode () {
             let leave = true

diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
@@ -109,8 +109,8 @@ export default {
         }
     },
     mounted () {
-        this.pageGroups = this.getPageGroups()
         if (this.editMode) { // mixin property
+            this.pageGroups = this.getPageGroups()
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -197,6 +197,7 @@ export default {
         },
         discardEdits () {
             this.revertEdits() // Mixin method
+            this.pageGroups = this.getPageGroups()
         },
         async leaveEditMode () {
             let leave = true

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
@@ -7,7 +7,7 @@
             class="nrdb-ui-widget"
             :class="getWidgetClass(w)"
             style="display: grid"
-            :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(var(--widget-row-height), auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ w.props.width || columns }, var(--layout-columns))`"
+            :style="`grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(${w.props.height}, minmax(var(--widget-row-height), auto)); grid-row-end: span ${w.props.height}; grid-column-end: span min(${ getWidgetWidth(w.props.width) }, var(--layout-columns))`"
         >
             <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`" />
         </div>
@@ -70,6 +70,13 @@ export default {
                 classes.push(widget.state.class)
             }
             return classes.join(' ')
+        },
+        getWidgetWidth (width) {
+            if (width) {
+                return Math.min(width, this.columns)
+            } else {
+                return this.columns
+            }
         }
     }
 }

diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
@@ -41,7 +41,21 @@ export default {
             exitEditMode() // EditTracking method
         },
         revertEdits () {
-            this.pageGroups = JSON.parse(JSON.stringify(originalGroups.value))
+            const originals = originalGroups.value || []
+            // scan through each group and revert changes
+            const propertiesOfInterest = ['width', 'height', 'order']
+            originals.forEach((originalGroup, index) => {
+                const pageGroup = this.pageGroups?.find(group => group.id === originalGroup.id)
+                if (!pageGroup) {
+                    console.warn('Group not found in pageGroups - as we do not currently support adding/removing groups, this should not happen!')
+                    return
+                }
+                propertiesOfInterest.forEach(property => {
+                    if (originalGroup[property] !== pageGroup[property]) {
+                        pageGroup[property] = originalGroup[property]
+                    }
+                })
+            })
         },
         deployChanges ({ dashboard, page, groups }) {
             return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value, editorPath: editorPath.value })