From a7d8268193ee4384ee8b37db49063ea2404fcdac Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 14 Nov 2024 14:36:38 +0000
Subject: [PATCH 01/11] update edit tracking for widgets resizing/reordering

---
 ui/src/EditTracking.js | 85 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 79 insertions(+), 6 deletions(-)

diff --git a/ui/src/EditTracking.js b/ui/src/EditTracking.js
index d3114b82..95750fed 100644
--- a/ui/src/EditTracking.js
+++ b/ui/src/EditTracking.js
@@ -7,7 +7,8 @@ const state = reactive({
     editMode: false,
     editorPath: '', // the custom httpAdminRoot path for the NR editor
     isTrackingEdits: false,
-    originalGroups: []
+    originalGroups: [],
+    originalWidgets: []
 })
 
 // Methods
@@ -27,9 +28,9 @@ function initialise (editKey, editPage, editorPath) {
 /**
  * Start tracking edits
  */
-function startEditTracking (groups) {
+function startEditTracking (groups, widgets) {
     state.isTrackingEdits = true
-    updateEditTracking(groups)
+    updateEditTracking(groups, widgets)
 }
 
 /**
@@ -42,13 +43,34 @@ function exitEditMode () {
     state.isTrackingEdits = false
     state.initialised = false
     state.originalGroups = []
+    state.originalWidgets = []
 }
 
 /**
  * Update the original groups with the current groups
  */
-function updateEditTracking (groups) {
-    state.originalGroups = JSON.parse(JSON.stringify(groups))
+function updateEditTracking (groups, widgets) {
+    if (typeof groups !== 'undefined') {
+        state.originalGroups = JSON.parse(JSON.stringify(groups))
+    }
+    if (typeof widgets !== 'undefined') {
+        // only store the id, props and layout of each widget (that's all we need for comparison)
+        const groupIds = Object.keys(widgets)
+        const partials = {}
+        for (let i = 0; i < groupIds.length; i++) {
+            const groupId = groupIds[i]
+            const groupWidgets = widgets[groupId]
+            const partialWidgets = groupWidgets.map((w) => {
+                return {
+                    id: w.id,
+                    props: w.props,
+                    layout: w.layout
+                }
+            })
+            partials[groupId] = partialWidgets
+        }
+        state.originalWidgets = JSON.parse(JSON.stringify(partials))
+    }
 }
 
 // RO computed props
@@ -57,6 +79,57 @@ const editPage = computed(() => state.editPage)
 const editMode = computed(() => !!state.editKey && !!state.editPage)
 const editorPath = computed(() => state.editorPath)
 const originalGroups = computed(() => state.originalGroups)
+const originalWidgets = computed(() => state.originalWidgets)
 const isTrackingEdits = computed(() => state.isTrackingEdits)
 
-export { editKey, editMode, editPage, editorPath, originalGroups, isTrackingEdits, initialise, exitEditMode, startEditTracking, updateEditTracking }
+const groupPropertiesToCheck = [
+    (original, current) => +original.width === +current.width,
+    (original, current) => +original.height === +current.height,
+    (original, current) => +original.order === +current.order
+]
+
+const widgetPropertiesToCheck = [
+    (original, current) => +original.layout?.width === +current.layout?.width,
+    (original, current) => +original.layout?.height === +current.layout?.height,
+    (original, current) => +original.layout?.order === +current.layout?.order,
+    (original, current) => +original.props?.width === +current.props?.width,
+    (original, current) => +original.props?.height === +current.props?.height,
+    (original, current) => +original.props?.order === +current.props?.order
+]
+
+function isDirty (groups, widgets) {
+    console.log('isDirty', groups, widgets)
+    const originalGroups = state.originalGroups || []
+    // scan through each group and revert changes
+
+    for (let i = 0; i < originalGroups.length; i++) {
+        const originalGroup = originalGroups[i]
+        const currentGroup = groups?.find(group => group.id === originalGroup.id)
+        if (!currentGroup) {
+            console.warn('Group not found in pageGroups - as we do not currently support adding/removing groups, this should not happen!')
+            return true
+        }
+        // test group properties
+        if (groupPropertiesToCheck.some(check => !check(originalGroup, currentGroup))) {
+            return true
+        }
+
+        // test widgets belonging to this group
+        const originalWidgetValues = state.originalWidgets?.[originalGroup.id] || []
+        const currentWidgets = widgets?.[originalGroup.id] || []
+        for (let j = 0; j < originalWidgetValues.length; j++) {
+            const originalWidget = originalWidgetValues[j]
+            const currentWidget = currentWidgets.find(widget => widget.id === originalWidget.id)
+            if (!currentWidget) {
+                console.warn('Widget not found in pageWidgets - as we do not currently support adding/removing widgets, this should not happen!')
+                return true
+            }
+            if (widgetPropertiesToCheck.some(check => !check(originalWidget, currentWidget))) {
+                return true
+            }
+        }
+    }
+    return false
+}
+
+export { editKey, editMode, editPage, editorPath, originalGroups, originalWidgets, isDirty, isTrackingEdits, initialise, exitEditMode, startEditTracking, updateEditTracking }

From 2bd22974782ecf2e9d72bc73bc1a79516f704c0e Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 14 Nov 2024 14:39:58 +0000
Subject: [PATCH 02/11] add widgets resizing/reordering support

---
 ui/src/layouts/Flex.vue                       |  49 +++-
 ui/src/layouts/Grid.vue                       |  49 +++-
 ui/src/layouts/Group.vue                      | 126 ++++++++--
 .../{draggable.js => draggableGroup.js}       |  57 ++---
 ui/src/layouts/wysiwyg/draggableWidget.js     | 113 +++++++++
 ui/src/layouts/wysiwyg/index.js               |  71 ++++--
 ui/src/layouts/wysiwyg/resizable.js           | 220 ++++++++++++++----
 7 files changed, 572 insertions(+), 113 deletions(-)
 rename ui/src/layouts/wysiwyg/{draggable.js => draggableGroup.js} (63%)
 create mode 100644 ui/src/layouts/wysiwyg/draggableWidget.js

diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
index 2d4b4e95..f8583953 100644
--- a/ui/src/layouts/Flex.vue
+++ b/ui/src/layouts/Flex.vue
@@ -10,10 +10,10 @@
                 :class="getGroupClass(g)"
                 :style="{'width': ((rowHeight * 2 * g.width) + 'px')}"
                 :draggable="editMode"
-                @dragstart="onDragStart($event, $index)"
-                @dragover="onDragOver($event, $index, g)"
-                @dragend="onDragEnd($event, $index, g)"
-                @dragleave="onDragLeave($event, $index, g)"
+                @dragstart="onGroupDragStart($event, $index, g)"
+                @dragover="onGroupDragOver($event, $index, g)"
+                @dragend="onGroupDragEnd($event, $index, g)"
+                @dragleave="onGroupDragLeave($event, $index, g)"
                 @drop.prevent
                 @dragenter.prevent
             >
@@ -22,7 +22,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :index="$index" :widgets="widgetsByGroup(g.id)" :resizable="editMode" @resize="onGroupResize" />
+                        <widget-group :group="g" :index="$index" :widgets="groupWidgets(g.id)" :resizable="editMode" :group-dragging="groupDragging.active" @resize="onGroupResize" />
                     </template>
                 </v-card>
             </div>
@@ -98,6 +98,12 @@ export default {
         pageWidgets: function () {
             return this.widgetsByPage(this.$route.meta.id)
         },
+        groupWidgets () {
+            if (this.editMode) { // mixin property
+                return (groupId) => this.pageGroupWidgets[groupId]
+            }
+            return (groupId) => this.widgetsByGroup(groupId)
+        },
         page: function () {
             return this.pages[this.$route.meta.id]
         },
@@ -109,8 +115,14 @@ export default {
         }
     },
     mounted () {
+        console.log('flex layout mounted')
         if (this.editMode) { // mixin property
             this.pageGroups = this.getPageGroups()
+            const pageGroupWidgets = {}
+            for (const group of this.pageGroups) {
+                pageGroupWidgets[group.id] = this.getGroupWidgets(group.id)
+            }
+            this.pageGroupWidgets = pageGroupWidgets
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -130,6 +142,21 @@ export default {
                 })
             return groups
         },
+        getGroupWidgets (groupId) {
+            // get widgets for this group (sorted by layout.order)
+            const widgets = this.widgetsByGroup(groupId)
+                // only show the widgets that haven't had their "visible" property set to false
+                .filter((g) => {
+                    if ('visible' in g) {
+                        return g.visible && g.groupType !== 'dialog'
+                    }
+                    return true
+                })
+                .sort((a, b) => {
+                    return a?.layout?.order - b?.layout?.order
+                })
+            return widgets
+        },
         getWidgetClass (widget) {
             const classes = []
             // ensure each widget has a class for its type
@@ -154,7 +181,7 @@ export default {
                 classes.push(properties.class)
             }
             // dragging interaction classes
-            const dragDropClass = this.getDragDropClass(group) // Mixin method
+            const dragDropClass = this.getGroupDragDropClass(group) // Mixin method
             if (dragDropClass) {
                 classes.push(dragDropClass)
             }
@@ -179,7 +206,8 @@ export default {
             this.deployChanges({
                 dashboard: this.page.ui,
                 page: this.page.id,
-                groups: this.pageGroups
+                groups: this.pageGroups,
+                widgets: this.pageGroupWidgets
             }).then(() => {
                 this.acceptChanges() // Mixin method
             }).catch((error) => {
@@ -218,6 +246,13 @@ export default {
                 this.discardEdits()
             }
             this.exitEditMode() // Mixin method
+        },
+        onGroupResize (opts) {
+            // ensure opts.width is a number and is greater than 0
+            if (typeof opts.width !== 'number' || opts.width < 1) {
+                return
+            }
+            this.pageGroups[opts.index].width = opts.width
         }
     }
 }
diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index e6afc56a..d42563a8 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -10,10 +10,10 @@
                 :class="getGroupClass(g)"
                 :style="`grid-column-end: span min(${ g.width }, var(--layout-columns)`"
                 :draggable="editMode"
-                @dragstart="onDragStart($event, $index)"
-                @dragover="onDragOver($event, $index, g)"
-                @dragend="onDragEnd($event, $index, g)"
-                @dragleave="onDragLeave($event, $index, g)"
+                @dragstart="onGroupDragStart($event, $index, g)"
+                @dragover="onGroupDragOver($event, $index, g)"
+                @dragend="onGroupDragEnd($event, $index, g)"
+                @dragleave="onGroupDragLeave($event, $index, g)"
                 @drop.prevent
                 @dragenter.prevent
             >
@@ -22,7 +22,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :index="$index" :widgets="widgetsByGroup(g.id)" :resizable="editMode" @resize="onGroupResize" />
+                        <widget-group :group="g" :index="$index" :widgets="groupWidgets(g.id)" :resizable="editMode" :group-dragging="groupDragging.active" @resize="onGroupResize" />
                     </template>
                 </v-card>
             </div>
@@ -106,11 +106,23 @@ export default {
                 return this.pageGroups
             }
             return this.getPageGroups()
+        },
+        groupWidgets () {
+            if (this.editMode) { // mixin property
+                return (groupId) => this.pageGroupWidgets[groupId]
+            }
+            return (groupId) => this.widgetsByGroup(groupId)
         }
     },
     mounted () {
+        console.log('grid layout mounted')
         if (this.editMode) { // mixin property
             this.pageGroups = this.getPageGroups()
+            const pageGroupWidgets = {}
+            for (const group of this.pageGroups) {
+                pageGroupWidgets[group.id] = this.getGroupWidgets(group.id)
+            }
+            this.pageGroupWidgets = pageGroupWidgets
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -142,6 +154,21 @@ export default {
             }
             return classes.join(' ')
         },
+        getGroupWidgets (groupId) {
+            // get widgets for this group (sorted by layout.order)
+            const widgets = this.widgetsByGroup(groupId)
+                // only show the widgets that haven't had their "visible" property set to false
+                .filter((g) => {
+                    if ('visible' in g) {
+                        return g.visible && g.groupType !== 'dialog'
+                    }
+                    return true
+                })
+                .sort((a, b) => {
+                    return a?.layout?.order - b?.layout?.order
+                })
+            return widgets
+        },
         getGroupClass (group) {
             const classes = []
             // add any class set in the group's properties
@@ -154,7 +181,7 @@ export default {
                 classes.push(properties.class)
             }
             // dragging interaction classes
-            const dragDropClass = this.getDragDropClass(group) // Mixin method
+            const dragDropClass = this.getGroupDragDropClass(group) // Mixin method
             if (dragDropClass) {
                 classes.push(dragDropClass)
             }
@@ -179,7 +206,8 @@ export default {
             this.deployChanges({
                 dashboard: this.page.ui,
                 page: this.page.id,
-                groups: this.pageGroups
+                groups: this.pageGroups,
+                widgets: this.pageGroupWidgets
             }).then(() => {
                 this.acceptChanges() // Mixin method
             }).catch((error) => {
@@ -218,6 +246,13 @@ export default {
                 this.discardEdits()
             }
             this.exitEditMode() // Mixin method
+        },
+        onGroupResize (opts) {
+            // ensure opts.width is a number and is greater than 0
+            if (typeof opts.width !== 'number' || opts.width < 1) {
+                return
+            }
+            this.pageGroups[opts.index].width = opts.width
         }
     }
 }
diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index a901ac30..9e59851d 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -1,35 +1,75 @@
 <template>
     <div class="nrdb-layout-group--grid" :style="`grid-template-columns: repeat(min(${ columns }, var(--layout-columns)), 1fr); grid-template-rows: repeat(${group.height}, minmax(var(--widget-row-height), auto)); `">
         <div
-            v-for="w in widgets"
+            v-if="resizable" ref="group-resize-view" class="nrdb-resizable" :class="{'resizing': groupResizing.active}"
+            :style="{ 'width': groupResizing.current.width ? `${groupResizing.current.width}px` : null, 'z-index': 99 }"
+        >
+            <div
+                draggable="true"
+                class="nrdb-resizable--handle nrdb-resizable--right"
+                @dragstart="onHandleDragStart($event, index, 'group', group, 'top', 'right')"
+                @drag="onHandleDrag($event, index, 'group', group, 'top', 'right')"
+                @dragover="onHandleOver($event, index, 'group', group, 'top', 'right')"
+                @dragend="onHandleDragEnd($event, index, 'group', group, 'top', 'right')"
+                @dragenter.prevent
+            />
+        </div>
+        <div
+            v-for="(w, $index) in widgets"
             :id="'nrdb-ui-widget-' + w.id"
             :key="w.id"
+            :draggable="resizable"
             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(${ getWidgetWidth(w.props.width) }, var(--layout-columns))`"
+            :style="[{display: 'grid', 'grid-template-columns': 'minmax(0, 1fr)'}, widgetStyles(w)]"
+            @dragstart="!resizable ? null : onWidgetDragStart($event, $index, w)"
+            @dragover="!resizable ? null : onWidgetDragOver($event, $index, w)"
+            @dragend="!resizable ? null : onWidgetDragEnd($event, $index, w)"
+            @dragleave="!resizable ? null : onWidgetDragLeave($event, $index, w)"
+            @drop.prevent
+            @dragenter.prevent
         >
+            <!-- <div style="font-size: small; background-color: aquamarine;">w.props.height: {{ w.props.height }}</div> -->
             <component :is="w.component" :id="w.id" :props="w.props" :state="w.state" :style="`grid-row-end: span ${w.props.height}`" />
-        </div>
-        <div
-            v-if="resizable" ref="resize-view" class="nrdb-resizable" :class="{'resizing': resizing.active}"
-            :style="{'width': resizing.current.width ? `${resizing.current.width}px` : null }"
-        >
             <div
-                draggable="true"
-                class="nrdb-resizable--handle nrdb-resizable--right"
-                @dragstart="onHandleDragStart($event, 'top', 'right')"
-                @drag="onHandleDrag($event, 'top', 'right')"
-                @dragover="onHandleOver($event, 'top', 'right')"
-                @dragend="onHandleDragEnd($event, 'top', 'right')"
-                @dragenter.prevent
-            />
+                v-if="resizable && !groupDragging" ref="widget-resize-view"
+                class="nrdb-resizable nrdb-resizable-widget"
+                :class="widgetResizing.widgetId === w.id || widgetDragging.widgetId === w.id ? getWidgetEditingClass(w) : null"
+                style="z-index: 100; min-width: 28px; min-height: 28px;"
+                :style="widgetResizing.widgetId === w.id ? getWidgetEditingStyle(w) : null"
+            >
+                <div
+                    draggable="true"
+                    class="nrdb-resizable--handle nrdb-resizable--right"
+                    @dragstart="onHandleDragStart($event, index, 'widget', w, 'ew')"
+                    @drag="onHandleDrag($event, index, 'widget', w, 'ew')"
+                    @dragover="onHandleOver($event, index, 'widget', w, 'ew')"
+                    @dragend="onHandleDragEnd($event, index, 'widget', w, 'ew')"
+                    @dragenter.prevent
+                    @dblclick="w.props.width = ''; w.layout.width = '3'"
+                />
+                <div
+                    draggable="true"
+                    class="nrdb-resizable--handle nrdb-resizable--bottom"
+                    @dragstart="onHandleDragStart($event, index, 'widget', w, 'ns')"
+                    @drag="onHandleDrag($event, index, 'widget', w, 'ns')"
+                    @dragover="onHandleOver($event, index, 'widget', w, 'ns')"
+                    @dragend="onHandleDragEnd($event, index, 'widget', w, 'ns')"
+                    @dragenter.prevent
+                    @dblclick="w.props.height = ''; w.layout.height = '1'"
+                />
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 import WYSIWYG from './wysiwyg/index.js'
+
+function hasNumberProperty (obj, prop) {
+    return Object.prototype.hasOwnProperty.call(obj, prop) && !isNaN(+obj[prop])
+}
+
 export default {
     name: 'WidgetGroup',
     mixins: [WYSIWYG],
@@ -49,12 +89,38 @@ export default {
         resizable: {
             type: Boolean,
             default: false
+        },
+        groupDragging: {
+            type: Boolean,
+            default: false
         }
     },
     emits: ['resize'],
+    data () {
+        return {
+            localWidgets: null
+        }
+    },
     computed: {
         columns () {
-            return this.resizing.current.columns > 0 ? this.resizing.current.columns : +this.group.width
+            return this.groupResizing.current.columns > 0 ? this.groupResizing.current.columns : +this.group.width
+        },
+        widgetStyles () {
+            return (widget) => {
+                // `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))`"
+                const styles = {}
+                const height = widget.props.height || widget.layout.height
+                const width = widget.props.width || widget.layout.width
+                if (height) {
+                    styles['grid-row-end'] = `span ${height}`
+                    styles['grid-template-rows'] = `repeat(${height}, minmax(var(--widget-row-height), auto))`
+                }
+                if (width) {
+                    styles['grid-column-end'] = `span min(${this.getWidgetWidth(width)}, var(--layout-columns))`
+                }
+                console.log('widgetStyles', styles)
+                return styles
+            }
         }
     },
     methods: {
@@ -70,6 +136,32 @@ export default {
             }
             return classes.join(' ')
         },
+        getWidgetEditingClass (widget) {
+            const classes = []
+            // dragging interaction classes
+            const dragClass = this.resizable ? this.getWidgetDragDropClass(widget) : null // Mixin method
+            if (dragClass) {
+                classes.push(dragClass)
+            }
+            const resizeClass = this.getWidgetResizingClass(widget) // Mixin method
+            if (resizeClass) {
+                classes.push(resizeClass)
+            }
+            return classes.join(' ')
+        },
+        getWidgetEditingStyle (widget) {
+            if (!this.widgetResizing.active || this.resizeType !== 'widget') {
+                return null
+            }
+            const style = { }
+            if (this.resizeMode === 'ew' && hasNumberProperty(this.widgetResizing.current, 'width')) {
+                style.width = `${this.widgetResizing.current.width}px`
+            }
+            if (this.resizeMode === 'ns' && hasNumberProperty(this.widgetResizing.current, 'height')) {
+                style.height = `${this.widgetResizing.current.height}px`
+            }
+            return style
+        },
         getWidgetWidth (width) {
             if (width) {
                 return Math.min(width, this.columns)
diff --git a/ui/src/layouts/wysiwyg/draggable.js b/ui/src/layouts/wysiwyg/draggableGroup.js
similarity index 63%
rename from ui/src/layouts/wysiwyg/draggable.js
rename to ui/src/layouts/wysiwyg/draggableGroup.js
index 13654252..2eb9be23 100644
--- a/ui/src/layouts/wysiwyg/draggable.js
+++ b/ui/src/layouts/wysiwyg/draggableGroup.js
@@ -2,10 +2,11 @@ export default {
     data () {
         return {
             pageGroups: [],
-            dragging: {
+            groupDragging: {
                 active: false,
                 index: -1,
-                dropIndex: -1
+                dropIndex: -1,
+                id: null
             }
         }
     },
@@ -16,10 +17,12 @@ export default {
          * @param {DragEvent} event - The drag event
          * @param {Number} index - The index of the group
          */
-        onDragStart (event, index) {
-            this.dragging.active = true
-            this.dragging.index = index
-            this.dragging.dropIndex = index
+        onGroupDragStart (event, index, item) {
+            console.log('onGroupDragStart', index)
+            this.groupDragging.active = true
+            this.groupDragging.id = item.id
+            this.groupDragging.index = index
+            this.groupDragging.dropIndex = index
             event.dataTransfer.effectAllowed = 'move'
             event.dataTransfer.dropEffect = 'move'
             event.stopPropagation()
@@ -30,22 +33,22 @@ export default {
          * @param {DragEvent} event - The drag event
          * @param {Number} index - The index of the group
          */
-        onDragOver (event, index, group) {
+        onGroupDragOver (event, index, item) {
             event.preventDefault()
-            if (this.dragging.active === false) { return }
+            if (this.groupDragging.active === false) { return }
             event.dataTransfer.dropEffect = 'move'
             // update drop index
-            if (index !== this.dragging.index) {
-                this.dragging.dropIndex = index
+            if (index !== this.groupDragging.index) {
+                this.groupDragging.dropIndex = index
             }
             // ensure the mouse is over a different group
-            if (this.dragging.index === index || this.dragging.index < 0) {
+            if (this.groupDragging.index === index || this.groupDragging.index < 0) {
                 return
             }
 
             // ensure the mouse is within the bounds of the source group size
             // to avoid flip-flop when the target group is larger than the source group
-            const sourceGroup = this.pageGroups[this.dragging.index]
+            const sourceGroup = this.pageGroups[this.groupDragging.index]
             const sourceId = `nrdb-ui-group-${sourceGroup.id}`
             const sourceEl = document.getElementById(sourceId)
             const sourceBounds = sourceEl.getBoundingClientRect()
@@ -61,17 +64,18 @@ export default {
                 return
             }
 
-            if (this.dragging.index >= 0) {
-                this.moveGroup(this.dragging.index, index)
+            if (this.groupDragging.index >= 0) {
+                this.moveGroup(this.groupDragging.index, index)
             }
         },
-        onDragLeave (event, index, group) {
-            this.dragging.dropIndex = -1
+        onGroupDragLeave (event, index, item) {
+            this.groupDragging.dropIndex = -1
         },
-        onDragEnd (event, index, group) {
-            this.dragging.active = false
-            this.dragging.index = -1
-            this.dragging.dropIndex = -1
+        onGroupDragEnd (event, index, item) {
+            this.groupDragging.active = false
+            this.groupDragging.id = null
+            this.groupDragging.index = -1
+            this.groupDragging.dropIndex = -1
         },
         moveGroup (fromIndex, toIndex) {
             const movedItem = this.pageGroups.splice(fromIndex, 1)[0]
@@ -80,19 +84,20 @@ export default {
             this.pageGroups.forEach((group, index) => {
                 group.order = index + 1
             })
-            this.dragging.index = toIndex
+            this.groupDragging.index = toIndex
         },
-        getDragDropClass (group) {
-            if (this.isDragging(group)) {
+        getGroupDragDropClass (group) {
+            if (this.isDraggingGroup(group)) {
                 return 'drag-start'
             }
             return ''
         },
-        isDragging (group) {
-            if (!this.dragging.active) {
+        isDraggingGroup (group) {
+            // TODO: simplify by checking item id instead
+            if (!this.groupDragging.active) {
                 return false
             }
-            const dragging = this.pageGroups[this.dragging.index]
+            const dragging = this.pageGroups[this.groupDragging.index]
             if (dragging?.id === group?.id) {
                 return true
             }
diff --git a/ui/src/layouts/wysiwyg/draggableWidget.js b/ui/src/layouts/wysiwyg/draggableWidget.js
new file mode 100644
index 00000000..d3fe462a
--- /dev/null
+++ b/ui/src/layouts/wysiwyg/draggableWidget.js
@@ -0,0 +1,113 @@
+export default {
+    data () {
+        return {
+            widgetDragging: {
+                active: false,
+                widgetId: null,
+                index: -1,
+                dropIndex: -1
+            }
+        }
+    },
+    methods: {
+        // Drag and Drop placement methods
+        /**
+         * Event handler for dragstart event
+         * @param {DragEvent} event - The drag event
+         * @param {Number} index - The index of the group
+         */
+        onWidgetDragStart (event, index, item) {
+            this.widgetDragging.active = true
+            this.widgetDragging.widgetId = item.id
+            this.widgetDragging.index = index
+            this.widgetDragging.dropIndex = index
+            event.dataTransfer.effectAllowed = 'move'
+            event.dataTransfer.dropEffect = 'move'
+            event.stopPropagation()
+            return false
+        },
+        /**
+         * Event handler for dragover event
+         * @param {DragEvent} event - The drag event
+         * @param {Number} index - The index of the group
+         */
+        onWidgetDragOver (event, index, item) {
+            event.preventDefault()
+            if (this.widgetDragging.active === false) { return }
+            event.dataTransfer.dropEffect = 'move'
+            // update drop index
+            if (index !== this.widgetDragging.index) {
+                this.widgetDragging.dropIndex = index
+            }
+            // ensure the mouse is over a different widget
+            if (this.widgetDragging.index === index || this.widgetDragging.index < 0) {
+                return
+            }
+
+            // ensure the mouse is within the bounds of the source group size
+            // to avoid flip-flop when the target group is larger than the source group
+            const source = this.widgets[this.widgetDragging.index]
+            const sourceId = `nrdb-ui-widget-${source.id}`
+            const sourceEl = document.getElementById(sourceId)
+            const sourceBounds = sourceEl.getBoundingClientRect()
+            const target = this.widgets[index]
+            const targetId = `nrdb-ui-widget-${target.id}`
+            const targetEl = document.getElementById(targetId)
+            const targetBounds = targetEl.getBoundingClientRect()
+            const hitBoundX1 = targetBounds.left
+            const hitBoundX2 = targetBounds.left + sourceBounds.width
+            const hitBoundY1 = targetBounds.top
+            const hitBoundY2 = targetBounds.top + sourceBounds.height
+            if (event.clientX < hitBoundX1 || event.clientX > hitBoundX2 || event.clientY < hitBoundY1 || event.clientY > hitBoundY2) {
+                return
+            }
+
+            if (this.widgetDragging.index >= 0) {
+                this.moveWidget(this.widgetDragging.index, index)
+            }
+        },
+        onWidgetDragLeave (event, index, item) {
+            this.widgetDragging.dropIndex = -1
+        },
+        onWidgetDragEnd (event, index, item) {
+            this.widgetDragging.active = false
+            this.widgetDragging.widgetId = null
+            this.widgetDragging.index = -1
+            this.widgetDragging.dropIndex = -1
+        },
+        moveWidget (fromIndex, toIndex) {
+            const movedItem = this.widgets.splice(fromIndex, 1)[0]
+            this.widgets.splice(toIndex, 0, movedItem)
+            // update .order property of widgets
+            this.widgets.forEach((widget, index) => {
+                widget.props.order = index + 1
+                widget.layout.order = index + 1
+            })
+            this.widgetDragging.index = toIndex
+        },
+        getWidgetDragDropClass (item) {
+            if (this.isDraggingWidget(item)) {
+                return 'drag-start'
+            }
+            return ''
+        },
+        getWidgetResizingClass (item) {
+            if (this.isResizingWidget(item)) {
+                return 'resizing'
+            }
+            return ''
+        },
+        isDraggingWidget (widget) {
+            if (!this.widgetDragging.active) {
+                return false
+            }
+            return this.widgetDragging.widgetId === widget.id
+        },
+        isResizingWidget (widget) {
+            if (!this.widgetResizing.active) {
+                return false
+            }
+            return this.widgetResizing.widgetId === widget.id
+        }
+    }
+}
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index ace1421f..b65920bd 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -1,14 +1,16 @@
-import { editKey, editMode, editPage, editorPath, exitEditMode, isTrackingEdits, originalGroups, startEditTracking, updateEditTracking } from '../../EditTracking.js'
+import { editKey, editMode, editPage, editorPath, exitEditMode, isDirty, isTrackingEdits, originalGroups, originalWidgets, startEditTracking, updateEditTracking } from '../../EditTracking.js'
 import NodeRedApi from '../../api/node-red'
 
-import DraggableMixin from './draggable.js'
+import DraggableGroupMixin from './draggableGroup.js'
+import DraggableWidgetMixin from './draggableWidget.js'
 import ResizableMixin from './resizable.js'
 
 export default {
-    mixins: [DraggableMixin, ResizableMixin],
+    mixins: [DraggableGroupMixin, DraggableWidgetMixin, ResizableMixin],
     data () {
         return {
-            pageGroups: []
+            pageGroups: [],
+            pageGroupWidgets: []
         }
     },
     computed: {
@@ -16,7 +18,7 @@ export default {
             if (!this.editMode || !isTrackingEdits.value) {
                 return false
             }
-            return JSON.stringify(this.pageGroups) !== JSON.stringify(originalGroups.value)
+            return isDirty(this.pageGroups, this.pageGroupWidgets)
         },
         editMode: function () {
             return editMode.value && editPage.value === this.$route.meta.id
@@ -25,11 +27,12 @@ export default {
     methods: {
         initializeEditTracking () {
             if (this.editMode && !isTrackingEdits.value) {
-                startEditTracking(this.pageGroups)
+                startEditTracking(this.pageGroups, this.pageGroupWidgets)
             }
         },
         acceptChanges () {
-            updateEditTracking(this.pageGroups)
+            // TODO: implement widgets
+            updateEditTracking(this.pageGroups, this.pageGroupWidgets)
         },
         exitEditMode () {
             const url = new URL(window.location.href)
@@ -41,24 +44,62 @@ export default {
             exitEditMode() // EditTracking method
         },
         revertEdits () {
-            const originals = originalGroups.value || []
+            const originalGroupValues = originalGroups.value || []
             // scan through each group and revert changes
-            const propertiesOfInterest = ['width', 'height', 'order']
-            originals.forEach((originalGroup, index) => {
+            const groupPropertiesOfInterest = ['width', 'height', 'order']
+            const widgetLayoutPropertiesOfInterest = ['width', 'height', 'order']
+            const widgetPropsPropertiesOfInterest = ['width', 'height', 'order']
+
+            originalGroupValues.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]
+                // restore group properties
+                for (const prop of groupPropertiesOfInterest) {
+                    if (originalGroup[prop] !== pageGroup[prop]) {
+                        pageGroup[prop] = originalGroup[prop]
+                    }
+                }
+                // restore widget properties
+                const originalWidgetValues = originalWidgets.value?.[originalGroup.id] || []
+                const pageWidgets = this.pageGroupWidgets?.[originalGroup.id] || []
+                originalWidgetValues.forEach((originalWidget, index) => {
+                    const pageWidget = pageWidgets.find(widget => widget.id === originalWidget.id)
+                    const widgetIndex = pageWidgets.indexOf(pageWidget)
+                    if (!pageWidget) {
+                        console.warn('Widget not found in pageGroupWidgets - as we do not currently support adding/removing widgets, this should not happen!')
+                        return
+                    }
+                    if (widgetIndex !== index) {
+                        pageWidgets.splice(widgetIndex, 1)
+                        pageWidgets.splice(index, 0, pageWidget)
+                    }
+                    for (const prop of widgetPropsPropertiesOfInterest) {
+                        if (originalWidget.props?.[prop] !== pageWidget.props?.[prop]) {
+                            pageWidget.props[prop] = originalWidget.props[prop]
+                        }
+                    }
+                    for (const prop of widgetLayoutPropertiesOfInterest) {
+                        if (originalWidget.layout?.[prop] !== pageWidget.layout?.[prop]) {
+                            pageWidget.layout[prop] = originalWidget.layout[prop]
+                        }
                     }
                 })
             })
         },
-        deployChanges ({ dashboard, page, groups }) {
-            return NodeRedApi.deployChanges({ dashboard, page, groups, key: editKey.value, editorPath: editorPath.value })
+        deployChanges ({ dashboard, page, groups, widgets }) {
+            const normalisedWidgets = {}
+            for (const widgetKey in widgets) {
+                normalisedWidgets[widgetKey] = widgets[widgetKey].map(widget => {
+                    return {
+                        id: widget.id,
+                        ...widget.props
+                    }
+                })
+            }
+            return NodeRedApi.deployChanges({ dashboard, page, groups, widgets: normalisedWidgets, key: editKey.value, editorPath: editorPath.value })
         }
     }
 }
diff --git a/ui/src/layouts/wysiwyg/resizable.js b/ui/src/layouts/wysiwyg/resizable.js
index 89641489..c2e40f4c 100644
--- a/ui/src/layouts/wysiwyg/resizable.js
+++ b/ui/src/layouts/wysiwyg/resizable.js
@@ -1,9 +1,47 @@
+function getNumeric (numberLike) {
+    if (typeof numberLike === 'number') {
+        return numberLike
+    } else if (typeof numberLike === 'string') {
+        if (numberLike === '') {
+            return 0
+        }
+        const num = parseFloat(numberLike)
+        return isNaN(num) ? 0 : num
+    }
+    return 0
+}
 export default {
+    emits: ['resize'],
     data () {
+        const EMPTY_IMAGE = new Image()
+        EMPTY_IMAGE.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
         return {
             pageGroups: [],
-            resizing: {
+            resizeType: null,
+            resizeMode: false,
+            widgetResizing: {
+                active: false,
+                widgetId: null,
+                parentEl: null,
+                widgetEl: null,
+                init: {
+                    x: 0,
+                    y: 0,
+                    columns: 0,
+                    rows: 0,
+                    width: 0,
+                    height: 0
+                },
+                current: {
+                    columns: null,
+                    rows: null,
+                    width: null,
+                    height: null
+                }
+            },
+            groupResizing: {
                 active: false,
+                parent: null,
                 init: {
                     x: 0,
                     y: 0,
@@ -17,11 +55,12 @@ export default {
                     rows: null,
                     width: null
                 }
-            }
+            },
+            EMPTY_IMAGE
         }
     },
     watch: {
-        'resizing.active' (active) {
+        'groupResizing.active' (active) {
             // add class 'resize-active' to parent group v-card
             // that class is solely to raise the z-index of the group while resizing
             // the associated resize-active CSS is in `common.css`
@@ -29,72 +68,171 @@ export default {
         }
     },
     methods: {
-        onHandleDragStart (/** @type {DragEvent} */ event, vertical, horizontal) {
-            this.resizing.parent = this.$el.parentElement.closest('.nrdb-ui-group > .v-card')
-            this.resizing.init.columns = +this.group.width || 1
-            this.resizing.init.rows = +this.group.height || 1
-            this.resizing.init.width = this.$refs['resize-view'].clientWidth
-            this.resizing.init.x = event.x
-            this.resizing.active = true
-            const EMPTY_IMAGE = this.$refs['blank-img'] // don't show image preview
-            event.dataTransfer.setDragImage(EMPTY_IMAGE, 0, 0)
+        onHandleDragStart (/** @type {DragEvent} */ event, index, type, item, mode) {
+            this.resizeType = type
+            this.resizeMode = mode // 'ew' or 'ns'
+
+            if (type === 'group') {
+                this.groupResizing.parent = this.$el.parentElement.closest('.nrdb-ui-group > .v-card')
+                this.groupResizing.init.columns = +this.group.width || 1
+                this.groupResizing.init.rows = +this.group.height || 1
+                this.groupResizing.init.width = this.$refs['group-resize-view'].clientWidth
+                this.groupResizing.init.x = event.x
+                this.groupResizing.active = true
+            } else if (type === 'widget') {
+                const itemCols = getNumeric(item.props.width) || getNumeric(item.layout.width) || 3 // 3 is the default set in ui_base registration
+                const itemRows = getNumeric(item.props.height) || getNumeric(item.layout.height) || 1 // 1 is the default set in ui_base registration
+                this.widgetResizing.widgetId = item.id
+                this.widgetResizing.parentEl = event.target.closest('.nrdb-resizable-widget')
+                this.widgetResizing.widgetEl = event.target.closest('.nrdb-ui-widget')
+                this.widgetResizing.init.columns = itemCols
+                this.widgetResizing.init.rows = itemRows
+                this.widgetResizing.init.width = this.widgetResizing.parentEl.clientWidth
+                this.widgetResizing.init.height = this.widgetResizing.parentEl.clientHeight
+                this.widgetResizing.init.x = event.x
+                this.widgetResizing.init.y = event.y
+                this.widgetResizing.active = true
+            } else {
+                return
+            }
+            event.dataTransfer.setDragImage(this.EMPTY_IMAGE, 0, 0)
             event.dataTransfer.effectAllowed = 'move'
             event.dataTransfer.dropEffect = 'move'
             event.stopPropagation()
             return false
         },
-        onHandleOver (/** @type {DragEvent} */ event, vertical, horizontal) {
+        onHandleOver (/** @type {DragEvent} */ event, index, type, item, mode) {
             event.preventDefault() // required to allow dropEffect
-            if (this.resizing.active === false) { return }
+            if (this.resizeType !== type) { return }
+            if (type === 'group') {
+                if (this.groupResizing.active === false) { return }
+            } else if (type === 'widget') {
+                if (this.widgetResizing.active === false) { return }
+            }
             event.dataTransfer.dropEffect = 'move'
         },
-        onHandleDrag (/** @type {DragEvent} */ event, vertical, horizontal) {
+        onHandleDrag (/** @type {DragEvent} */ event, index, type, item, mode) {
             event.preventDefault() // required to allow drop and show dropEffect
-            if (this.resizing.active === false) { return }
+            if (type === 'group') {
+                this.groupHandleDragHandler(event, index, type, item, mode)
+            } else if (type === 'widget') {
+                this.widgetHandleDragHandler(event, index, type, item, mode)
+            }
+        },
+        groupHandleDragHandler (event, index, type, item, mode) {
+            if (this.groupResizing.active === false) { return }
             event.dataTransfer.dropEffect = 'move'
             if (event.x > 0 && event.y > 0) {
-                const dx = event.x - this.resizing.init.x
-                this.resizing.current.width = this.resizing.init.width + dx
-                const stepX = this.resizing.parent.clientWidth / +this.group.width
-                const dw = Math.round(this.resizing.current.width / stepX) - this.resizing.init.columns
-                const newColumns = Math.max(this.resizing.init.columns + dw, 1)
+                const dx = event.x - this.groupResizing.init.x
+                this.groupResizing.current.width = this.groupResizing.init.width + dx
+                const stepX = this.groupResizing.parent.clientWidth / +this.group.width
+                const dw = Math.round(this.groupResizing.current.width / stepX) - this.groupResizing.init.columns
+                const newColumns = Math.max(this.groupResizing.init.columns + dw, 1)
 
                 let allowIncrease = false
                 let allowDecrease = false
                 const stepSnapAt = stepX * 0.85
-                if (this.resizing.current.width > this.resizing.parent.clientWidth) {
-                    const diff = this.resizing.current.width - this.resizing.parent.clientWidth
+                if (this.groupResizing.current.width > this.groupResizing.parent.clientWidth) {
+                    const diff = this.groupResizing.current.width - this.groupResizing.parent.clientWidth
                     allowIncrease = diff > stepSnapAt
-                } else if (this.resizing.current.width < this.resizing.parent.clientWidth) {
-                    const diff = this.resizing.parent.clientWidth - this.resizing.current.width
+                } else if (this.groupResizing.current.width < this.groupResizing.parent.clientWidth) {
+                    const diff = this.groupResizing.parent.clientWidth - this.groupResizing.current.width
                     allowDecrease = diff > stepSnapAt
                 }
                 if (allowIncrease && newColumns > +this.group.width) {
-                    this.resizing.current.columns = newColumns
+                    this.groupResizing.current.columns = newColumns
                     this.$emit('resize', { index: this.index, width: newColumns })
                 } else if (allowDecrease && newColumns < +this.group.width) {
-                    this.resizing.current.columns = newColumns
+                    this.groupResizing.current.columns = newColumns
                     this.$emit('resize', { index: this.index, width: newColumns })
                 }
             }
         },
-        onHandleDragEnd (/** @type {DragEvent} */ event) {
-            if (this.resizing.active === false) { return }
+        widgetHandleDragHandler (event, index, type, item, mode) {
+            if (this.widgetResizing.active === false) { return }
+            event.dataTransfer.dropEffect = 'move'
+            if (event.x > 0 && mode === 'ew') {
+                const itemCols = getNumeric(item.props.width) || getNumeric(item.layout.width) || 3 // 3 is the default set in ui_base registration
+                const dx = event.x - this.widgetResizing.init.x
+                this.widgetResizing.current.width = this.widgetResizing.init.width + dx
+                const stepX = this.widgetResizing.widgetEl.clientWidth / (itemCols || 1)
+                const dw = Math.round(this.widgetResizing.current.width / stepX) - this.widgetResizing.init.columns
+                const newColumns = Math.max(this.widgetResizing.init.columns + dw, 1)
+
+                let allowIncrease = false
+                let allowDecrease = false
+                const stepSnapAt = stepX * 0.85
+                if (this.widgetResizing.current.width > this.widgetResizing.widgetEl.clientWidth) {
+                    const diff = this.widgetResizing.current.width - this.widgetResizing.widgetEl.clientWidth
+                    allowIncrease = diff > stepSnapAt
+                } else if (this.widgetResizing.current.width < this.widgetResizing.widgetEl.clientWidth) {
+                    const diff = this.widgetResizing.widgetEl.clientWidth - this.widgetResizing.current.width
+                    allowDecrease = diff > stepSnapAt
+                }
+
+                if (allowIncrease && newColumns > itemCols && newColumns <= this.group.width) {
+                    this.widgetResizing.current.columns = newColumns
+                    console.log('widgetResizing width', { index: this.index, width: newColumns })
+                    item.layout.width = newColumns
+                    item.props.width = newColumns
+                } else if (allowDecrease && newColumns < itemCols && newColumns > 0) {
+                    this.widgetResizing.current.columns = newColumns
+                    console.log('widgetResizing width', { index: this.index, width: newColumns })
+                    item.layout.width = newColumns
+                    item.props.width = newColumns
+                }
+            }
+            if (event.y > 0 && mode === 'ns') {
+                const itemRows = getNumeric(item.props.height) || getNumeric(item.layout.height) || 1 // 1 is the default set in ui_base registration
+                const dy = event.y - this.widgetResizing.init.y
+                this.widgetResizing.current.height = this.widgetResizing.init.height + dy
+                const stepY = this.widgetResizing.widgetEl.clientHeight / (itemRows || 1)
+                const dh = Math.round(this.widgetResizing.current.height / stepY) - this.widgetResizing.init.rows
+                const newRows = Math.max(this.widgetResizing.init.rows + dh, 1)
+
+                let allowIncrease = false
+                let allowDecrease = false
+                const stepSnapAt = stepY * 0.85
+                if (this.widgetResizing.current.height > this.widgetResizing.widgetEl.clientHeight) {
+                    const diff = this.widgetResizing.current.height - this.widgetResizing.widgetEl.clientHeight
+                    allowIncrease = diff > stepSnapAt
+                } else if (this.widgetResizing.current.height < this.widgetResizing.widgetEl.clientHeight) {
+                    const diff = this.widgetResizing.widgetEl.clientHeight - this.widgetResizing.current.height
+                    allowDecrease = diff > stepSnapAt
+                }
+
+                if (allowIncrease && newRows > itemRows /* && newRows <= this.group.height */) {
+                    this.widgetResizing.current.rows = newRows
+                    console.log('widgetResizing height', { index: this.index, height: newRows })
+                    item.layout.height = newRows
+                    item.props.height = newRows
+                } else if (allowDecrease && newRows < itemRows && newRows > 0) {
+                    this.widgetResizing.current.rows = newRows
+                    console.log('widgetResizing height', { index: this.index, height: newRows })
+                    item.layout.height = newRows
+                    item.props.height = newRows
+                }
+            }
+        },
+        onHandleDragEnd (/** @type {DragEvent} */ event, index, type, item, mode) {
+            if (this.groupResizing.active === false && this.widgetResizing.active === false) { return }
             this.resetDragState()
         },
         resetDragState () {
-            this.resizing.active = false
-            this.resizing.parent = null
-            this.resizing.current.width = null
-            this.resizing.current.columns = null
-            this.resizing.current.rows = null
-        },
-        onGroupResize (opts) {
-            // ensure opts.width is a number and is greater than 0
-            if (typeof opts.width !== 'number' || opts.width < 1) {
-                return
-            }
-            this.pageGroups[opts.index].width = opts.width
+            this.groupResizing.active = false
+            this.groupResizing.parent = null
+            this.groupResizing.current.width = null
+            this.groupResizing.current.columns = null
+            this.groupResizing.current.rows = null
+
+            this.widgetResizing.active = false
+            this.widgetResizing.widgetId = null
+            this.widgetResizing.parentEl = null
+            this.widgetResizing.widgetEl = null
+            this.widgetResizing.current.width = null
+            this.widgetResizing.current.height = null
+            this.widgetResizing.current.columns = null
+            this.widgetResizing.current.rows = null
         }
     }
 }

From 915066871ebfd342f3dfdf9523c4d10832418016 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 14 Nov 2024 14:40:19 +0000
Subject: [PATCH 03/11] add comments to keep defaults in sync

---
 nodes/config/ui_base.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 3b5dde3d..7690baf7 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -889,9 +889,9 @@ module.exports = function (RED) {
                     type: widgetConfig.type,
                     props: widgetConfig,
                     layout: {
-                        width: widgetConfig.width || 3,
-                        height: widgetConfig.height || 1,
-                        order: widgetConfig.order || 0
+                        width: widgetConfig.width || 3, // default width of 3: this must match up with defaults in wysiwyg editing
+                        height: widgetConfig.height || 1, // default height of 1: this must match up with defaults in wysiwyg editing
+                        order: widgetConfig.order || 0 // default order of 0: this must match up with defaults in wysiwyg editing
                     },
                     state: statestore.getAll(widgetConfig.id),
                     hooks: widgetEvents,

From 50df10f8c01f998e7e871f349caacdd07e036b18 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 14 Nov 2024 14:40:40 +0000
Subject: [PATCH 04/11] update api for widgets resizing/reordering

---
 nodes/config/ui_base.js | 73 ++++++++++++++++++++++++++++++-----------
 ui/src/api/node-red.js  |  5 +--
 2 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 7690baf7..48d1de96 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -1138,11 +1138,12 @@ module.exports = function (RED) {
         const changes = req.body.changes || {}
         const editKey = req.body.key
         const groups = changes.groups || []
+        const widgets = changes.widgets || []
         console.log(changes, editKey, dashboardId)
         const baseNode = RED.nodes.getNode(dashboardId)
 
         // validity checks
-        if (groups.length === 0) {
+        if (groups.length === 0 && widgets.length === 0) {
             // this could be a 200 but since the group data might be missing due to
             // a bug or regression, we'll return a 400 and let the user know
             // there were no changes provided.
@@ -1165,6 +1166,16 @@ module.exports = function (RED) {
                 return res.status(400).json({ error: 'Invalid page id' })
             }
         }
+        for (const key in widgets) {
+            const groupWidgets = widgets[key]
+            for (const modified of groupWidgets) {
+                // ensure widget exists
+                const widget = baseNode.ui.widgets.get(modified.id)
+                if (!widget) {
+                    return res.status(400).json({ error: 'Widget not found' })
+                }
+            }
+        }
 
         // Prepare headers for the requests
         const getHeaders = {
@@ -1199,14 +1210,19 @@ module.exports = function (RED) {
             }
             return false
         }
-        let rev = null
-        return axios.request({
-            method: 'GET',
-            headers: getHeaders,
-            url
-        }).then(response => {
-            const flows = response.data?.flows || []
-            rev = response.data?.rev
+        try {
+            const getResponse = await axios.request({
+                method: 'GET',
+                headers: getHeaders,
+                url
+            })
+
+            if (getResponse.status !== 200) {
+                return res.status(getResponse.status).json({ error: getResponse?.data?.message || 'An error occurred getting flows', code: 'GET_FAILED' })
+            }
+
+            const flows = getResponse.data?.flows || []
+            const rev = getResponse.data?.rev
             const changeResult = []
             for (const modified of groups) {
                 const current = flows.find(n => n.id === modified.id)
@@ -1221,13 +1237,28 @@ module.exports = function (RED) {
                 changeResult.push(applyIfDifferent(current, modified, 'width'))
                 changeResult.push(applyIfDifferent(current, modified, 'order'))
             }
+            for (const widgetKey in widgets) {
+                const groupWidgets = widgets[widgetKey]
+                for (const modified of groupWidgets) {
+                    const current = flows.find(n => n.id === modified.id)
+                    if (!current) {
+                        // widget not found in current flows! integrity of data suspect! Has flows changed on the server?
+                        return res.status(400).json({ error: 'Widget not found', code: 'WIDGET_NOT_FOUND' })
+                    }
+                    if (modified.group !== current.group) {
+                        // integrity of data suspect! Has flow changed on the server?
+                        return res.status(400).json({ error: 'Invalid group id', code: 'INVALID_GROUP_ID' })
+                    }
+                    changeResult.push(applyIfDifferent(current, modified, 'order'))
+                    changeResult.push(applyIfDifferent(current, modified, 'width'))
+                    changeResult.push(applyIfDifferent(current, modified, 'height'))
+                }
+            }
             if (changeResult.length === 0 || !changeResult.includes(true)) {
-                return res.status(200).json({ message: 'No changes were' })
+                return res.status(201).json({ message: 'No changes were found', code: 'NO_CHANGES' })
             }
-            return flows
-        }).then(flows => {
-            // update the flows with the new group order
-            return axios.request({
+
+            const postResponse = await axios.request({
                 method: 'POST',
                 headers: postHeaders,
                 url,
@@ -1236,13 +1267,17 @@ module.exports = function (RED) {
                     rev
                 }
             })
-        }).then(response => {
-            return res.status(200).json(response.data)
-        }).catch(error => {
+
+            if (postResponse.status !== 200) {
+                return res.status(postResponse.status).json({ error: postResponse?.data?.message || 'An error occurred deploying flows', code: 'POST_FAILED' })
+            }
+
+            return res.status(postResponse.status).json(postResponse.data)
+        } catch (error) {
             console.error(error)
             const status = error.response?.status || 500
-            return res.status(status).json({ error: error.message })
-        })
+            return res.status(status).json({ error: error.message || 'An error occurred' })
+        }
     })
 
     // PATCH: /dashboard/api/v1/:dashboardId/edit/:pageId - start editing a page
diff --git a/ui/src/api/node-red.js b/ui/src/api/node-red.js
index 5f4b19f0..9cacfccc 100644
--- a/ui/src/api/node-red.js
+++ b/ui/src/api/node-red.js
@@ -50,10 +50,11 @@ export default {
      * @param {string} options.page - The page id
      * @param {string} options.key - The edit key for verification
      * @param {Array<Object>} options.groups - The updated group objects to apply
+     * @param {Array<Object>} options.widgets - The updated widget objects to apply
      * @returns the axios request
      */
-    deployChanges: async function deployChangesViaHttpAdminEndpoint ({ dashboard, page, groups, key, editorPath }) {
-        const changes = { groups }
+    deployChanges: async function deployChangesViaHttpAdminEndpoint ({ dashboard, page, groups, widgets, key, editorPath }) {
+        const changes = { groups, widgets }
         return axios.request({
             method: 'PATCH',
             url: getDashboardApiUrl(editorPath || '', dashboard, 'flows'),

From 3aa8428fb5167685d7f5250d65c3c131541718b6 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 14 Nov 2024 14:41:13 +0000
Subject: [PATCH 05/11] update styles for widgets resizing/reordering

---
 ui/src/layouts/wysiwyg/resizable.scss | 69 +++++++++++++++------------
 ui/src/stylesheets/common.css         | 10 ++++
 ui/src/widgets/ui-spacer/UISpacer.vue |  8 ++--
 3 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/ui/src/layouts/wysiwyg/resizable.scss b/ui/src/layouts/wysiwyg/resizable.scss
index a5c36595..f496ed24 100644
--- a/ui/src/layouts/wysiwyg/resizable.scss
+++ b/ui/src/layouts/wysiwyg/resizable.scss
@@ -4,61 +4,70 @@
     height: 100%;
     top: 0;
     left: 0;
-    --handler-size: 12px;
+    --handle-size: 12px;
+    --handle-opacity: 0.1; // initially mostly transparent - updated in hover
+    --handle-accent: transparent; // initially no accent color - updated in hover
     cursor: grab;
     &.resizing {
+        z-index: 1000 !important;
         background-color: #ff00001f;
         border: 1px dashed red;
     }
+    &:hover, &:active {
+        border: 1px dashed red;
+        --handle-opacity: 1;
+        --handle-accent: red;
+    }
 }
 .nrdb-resizable--handle {
     position: absolute;
-    width: var(--handler-size);
-    height: var(--handler-size);
     background-color: white;
     border: 1px solid black;
     border-radius: 6px;
-    cursor: ew-resize;
-    &:active {
-        cursor: ew-resize !important;
+    opacity: var(--handle-opacity);
+    &:hover, &:active {
+        background-color: #eee;
+        --handle-opacity: 1;
+        --handle-accent: red;
     }
 }
-.nrdb-resizable--top-right {
-    top: calc(-1 * var(--handler-size) / 2);
-    right: calc(-1 * var(--handler-size) / 2);
-}
 
 .nrdb-resizable--right {
-    height: calc(2 * var(--handler-size));
+    height: calc(2 * var(--handle-size));
+    width: var(--handle-size);
     top: 50%;
-    margin-top: calc(-1 * var(--handler-size));
-    right: calc(-1 * var(--handler-size) / 2);
+    margin-top: calc(-1 * var(--handle-size));
+    right: calc(-1 * var(--handle-size) / 2);
     display: flex;
     justify-content: center;
     align-items: center;
-    &:hover {
-        cursor: ew-resize;
-        background-color: #eee;
-    }
-    &:active {
-        cursor: ew-resize !important;
-    }
+    cursor: ew-resize !important;
+}
+
+.nrdb-resizable--bottom {
+    height: var(--handle-size);
+    width: calc(2 * var(--handle-size));
+    left: 50%;
+    margin-left: calc(-1 * var(--handle-size));
+    bottom: calc(-1 * var(--handle-size) / 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: ns-resize !important;
 }
 
 .nrdb-resizable--right:after {
     content: '';
-    height: calc(0.75 * var(--handler-size));
+    height: calc(0.75 * var(--handle-size));
     width: 1px;
     display: inline-block;
-    background-color: red;
+    background-color: var(--handle-accent);
 }
 
-.nrdb-resizable--bottom-left {
-    bottom: calc(-1 * var(--handler-size) / 2);
-    left: calc(-1 * var(--handler-size) / 2);
-}
-
-.nrdb-resizable--top-left {
-    top: calc(-1 * var(--handler-size) / 2);
-    left: calc(-1 * var(--handler-size) / 2);
+.nrdb-resizable--bottom:after {
+    content: '';
+    height: 1px;
+    width: calc(0.75 * var(--handle-size));
+    display: inline-block;
+    background-color: var(--handle-accent);
 }
diff --git a/ui/src/stylesheets/common.css b/ui/src/stylesheets/common.css
index 29e569ec..ddf112ef 100644
--- a/ui/src/stylesheets/common.css
+++ b/ui/src/stylesheets/common.css
@@ -490,12 +490,22 @@ NB! supresses the gridarea for messages, but those are not in use*/
 .nrdb-ui-group.dragging {
     border-style: dashed;
 }
+.nrdb-ui-widget.dragging {
+    border-style: dashed;
+}
 
 .nrdb-ui-group.drag-start {
     opacity: 0.8;
     outline: 2px dashed black;
 }
 
+.nrdb-resizable-widget.drag-start,
+.nrdb-ui-widget.drag-start {
+    opacity: 0.8;
+    outline: 2px dashed black;
+}
+
+
 .nrdb-ui-page > .nrdb-ui-group[draggable="true"] > .v-card.resize-active {
      /*
         ensure card is on top while being actively resized
diff --git a/ui/src/widgets/ui-spacer/UISpacer.vue b/ui/src/widgets/ui-spacer/UISpacer.vue
index 53903c48..fae29098 100644
--- a/ui/src/widgets/ui-spacer/UISpacer.vue
+++ b/ui/src/widgets/ui-spacer/UISpacer.vue
@@ -33,10 +33,12 @@ export default {
 .nrdb-edit-mode .nrdb-spacer:before {
     content: v-bind(placeholderText);
     font-style: italic;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: grid;           /* Switch from flex to grid for wrapped text center aligned support */
+    place-items: center;     /* Centers content both horizontally and vertically */
     height: 100%;
     color: #0049ff75;
+    white-space: normal;     /* Allows wrapping */
+    text-align: center;      /* Ensures wrapped text is centered */
+    font-size: 0.8em
 }
 </style>

From e92899d9c782041699438a5132b84a9d13e463d5 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Tue, 19 Nov 2024 18:01:09 +0000
Subject: [PATCH 06/11] Permit wysiwyg editing add/remove spacers

closes WYSIWYG: Ability to add and remove spacers #1479
---
 nodes/config/ui_base.js               | 105 ++++++---
 ui/src/EditTracking.js                |  92 +-------
 ui/src/layouts/Flex.vue               |  20 +-
 ui/src/layouts/Grid.vue               |  20 +-
 ui/src/layouts/Group.vue              |  33 ++-
 ui/src/layouts/wysiwyg/index.js       | 151 +++++++-----
 ui/src/layouts/wysiwyg/resizable.scss |  37 +++
 ui/src/store/index.mjs                |   4 +-
 ui/src/store/ui.mjs                   |  34 ++-
 ui/src/store/wysiwyg.mjs              | 324 ++++++++++++++++++++++++++
 10 files changed, 632 insertions(+), 188 deletions(-)
 create mode 100644 ui/src/store/wysiwyg.mjs

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 48d1de96..bc13c70f 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -722,7 +722,7 @@ module.exports = function (RED) {
             // any widgets we hard-code into our front end (e.g ui-notification for connection alerts) will start with ui-
             // Node-RED built nodes will be a random UUID
             if (!wNode && !id.startsWith('ui-')) {
-                console.log('widget does not exist any more')
+                console.log('widget does not exist in the runtime', id) // TODO: Handle this better for edit-time added nodes (e.g. ui-spacer)
                 return // widget does not exist any more (e.g. deleted from NR and deployed BUT the ui page was not refreshed)
             }
             async function handler () {
@@ -1138,12 +1138,16 @@ module.exports = function (RED) {
         const changes = req.body.changes || {}
         const editKey = req.body.key
         const groups = changes.groups || []
-        const widgets = changes.widgets || []
+        const allWidgets = (changes.widgets || [])
+        const updatedWidgets = allWidgets.filter(w => !w.__DB2_ADD_WIDGET && !w.__DB2_REMOVE_WIDGET)
+        const addedWidgets = allWidgets.filter(w => !!w.__DB2_ADD_WIDGET).map(w => { delete w.__DB2_ADD_WIDGET; return w })
+        const removedWidgets = allWidgets.filter(w => !!w.__DB2_REMOVE_WIDGET).map(w => { delete w.__DB2_REMOVE_WIDGET; return w })
+
         console.log(changes, editKey, dashboardId)
         const baseNode = RED.nodes.getNode(dashboardId)
 
         // validity checks
-        if (groups.length === 0 && widgets.length === 0) {
+        if (groups.length === 0 && allWidgets.length === 0) {
             // this could be a 200 but since the group data might be missing due to
             // a bug or regression, we'll return a 400 and let the user know
             // there were no changes provided.
@@ -1166,14 +1170,30 @@ module.exports = function (RED) {
                 return res.status(400).json({ error: 'Invalid page id' })
             }
         }
-        for (const key in widgets) {
-            const groupWidgets = widgets[key]
-            for (const modified of groupWidgets) {
-                // ensure widget exists
-                const widget = baseNode.ui.widgets.get(modified.id)
-                if (!widget) {
-                    return res.status(400).json({ error: 'Widget not found' })
-                }
+
+        for (const widget of updatedWidgets) {
+            const existingWidget = baseNode.ui.widgets.get(widget.id)
+            if (!existingWidget) {
+                return res.status(400).json({ error: 'Widget not found' })
+            }
+        }
+
+        for (const added of addedWidgets) {
+            // for now, only ui-spacer is supported
+            if (added.type !== 'ui-spacer') {
+                return res.status(400).json({ error: 'Cannot add this kind of widget' })
+            }
+
+            // check if the widget is being added to a valid group
+            const group = baseNode.ui.groups.get(added.group)
+            if (!group) {
+                return res.status(400).json({ error: 'Invalid group id' })
+            }
+        }
+        for (const removed of removedWidgets) {
+            // for now, only ui-spacer is supported
+            if (removed.type !== 'ui-spacer') {
+                return res.status(400).json({ error: 'Cannot remove this kind of widget' })
             }
         }
 
@@ -1237,21 +1257,54 @@ module.exports = function (RED) {
                 changeResult.push(applyIfDifferent(current, modified, 'width'))
                 changeResult.push(applyIfDifferent(current, modified, 'order'))
             }
-            for (const widgetKey in widgets) {
-                const groupWidgets = widgets[widgetKey]
-                for (const modified of groupWidgets) {
-                    const current = flows.find(n => n.id === modified.id)
-                    if (!current) {
-                        // widget not found in current flows! integrity of data suspect! Has flows changed on the server?
-                        return res.status(400).json({ error: 'Widget not found', code: 'WIDGET_NOT_FOUND' })
-                    }
-                    if (modified.group !== current.group) {
-                        // integrity of data suspect! Has flow changed on the server?
-                        return res.status(400).json({ error: 'Invalid group id', code: 'INVALID_GROUP_ID' })
-                    }
-                    changeResult.push(applyIfDifferent(current, modified, 'order'))
-                    changeResult.push(applyIfDifferent(current, modified, 'width'))
-                    changeResult.push(applyIfDifferent(current, modified, 'height'))
+            // scan through the widgets and apply changes (if any)
+            for (const modified of updatedWidgets) {
+                const current = flows.find(n => n.id === modified.id)
+                if (!current) {
+                    // widget not found in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget not found', code: 'WIDGET_NOT_FOUND' })
+                }
+                if (modified.group !== current.group) {
+                    // integrity of data suspect! Has flow changed on the server?
+                    // Currently we dont support moving widgets between groups
+                    return res.status(400).json({ error: 'Invalid group id', code: 'INVALID_GROUP_ID' })
+                }
+                changeResult.push(applyIfDifferent(current, modified, 'order'))
+                changeResult.push(applyIfDifferent(current, modified, 'width'))
+                changeResult.push(applyIfDifferent(current, modified, 'height'))
+            }
+
+            // scan through the added widgets
+            for (const added of addedWidgets) {
+                const current = flows.find(n => n.id === added.id)
+                if (current) {
+                    // widget already exists in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget already exists', code: 'WIDGET_ALREADY_EXISTS' })
+                }
+                // sanitize the added widget (NOTE: only ui-spacer is supported for now & these are the only properties we care about)
+                const newWidget = {
+                    id: added.id,
+                    type: added.type,
+                    group: added.group,
+                    name: added.name || '',
+                    order: added.order ?? 0,
+                    width: added.width ?? 1,
+                    height: added.height ?? 1,
+                    className: added.className || ''
+                }
+                flows.push(newWidget)
+                changeResult.push(true)
+            }
+            for (const removed of removedWidgets) {
+                const current = flows.find(n => n.id === removed.id)
+                if (!current) {
+                    // widget not found in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget not found', code: 'WIDGET_NOT_FOUND' })
+                }
+                const index = flows.indexOf(current)
+                if (index > -1) {
+                    flows.splice(index, 1)
+                    changeResult.push(true)
                 }
             }
             if (changeResult.length === 0 || !changeResult.includes(true)) {
diff --git a/ui/src/EditTracking.js b/ui/src/EditTracking.js
index 95750fed..fc6ecb08 100644
--- a/ui/src/EditTracking.js
+++ b/ui/src/EditTracking.js
@@ -6,9 +6,7 @@ const state = reactive({
     editPage: '',
     editMode: false,
     editorPath: '', // the custom httpAdminRoot path for the NR editor
-    isTrackingEdits: false,
-    originalGroups: [],
-    originalWidgets: []
+    isTrackingEdits: false
 })
 
 // Methods
@@ -28,49 +26,19 @@ function initialise (editKey, editPage, editorPath) {
 /**
  * Start tracking edits
  */
-function startEditTracking (groups, widgets) {
+function startEditTracking () {
     state.isTrackingEdits = true
-    updateEditTracking(groups, widgets)
 }
 
 /**
  * Stop tracking edits, clear editKey/editPage & exit edit mode
  */
-function exitEditMode () {
+function endEditMode () {
     state.editKey = ''
     state.editPage = ''
     state.editMode = false
     state.isTrackingEdits = false
     state.initialised = false
-    state.originalGroups = []
-    state.originalWidgets = []
-}
-
-/**
- * Update the original groups with the current groups
- */
-function updateEditTracking (groups, widgets) {
-    if (typeof groups !== 'undefined') {
-        state.originalGroups = JSON.parse(JSON.stringify(groups))
-    }
-    if (typeof widgets !== 'undefined') {
-        // only store the id, props and layout of each widget (that's all we need for comparison)
-        const groupIds = Object.keys(widgets)
-        const partials = {}
-        for (let i = 0; i < groupIds.length; i++) {
-            const groupId = groupIds[i]
-            const groupWidgets = widgets[groupId]
-            const partialWidgets = groupWidgets.map((w) => {
-                return {
-                    id: w.id,
-                    props: w.props,
-                    layout: w.layout
-                }
-            })
-            partials[groupId] = partialWidgets
-        }
-        state.originalWidgets = JSON.parse(JSON.stringify(partials))
-    }
 }
 
 // RO computed props
@@ -78,58 +46,6 @@ const editKey = computed(() => state.editKey)
 const editPage = computed(() => state.editPage)
 const editMode = computed(() => !!state.editKey && !!state.editPage)
 const editorPath = computed(() => state.editorPath)
-const originalGroups = computed(() => state.originalGroups)
-const originalWidgets = computed(() => state.originalWidgets)
 const isTrackingEdits = computed(() => state.isTrackingEdits)
 
-const groupPropertiesToCheck = [
-    (original, current) => +original.width === +current.width,
-    (original, current) => +original.height === +current.height,
-    (original, current) => +original.order === +current.order
-]
-
-const widgetPropertiesToCheck = [
-    (original, current) => +original.layout?.width === +current.layout?.width,
-    (original, current) => +original.layout?.height === +current.layout?.height,
-    (original, current) => +original.layout?.order === +current.layout?.order,
-    (original, current) => +original.props?.width === +current.props?.width,
-    (original, current) => +original.props?.height === +current.props?.height,
-    (original, current) => +original.props?.order === +current.props?.order
-]
-
-function isDirty (groups, widgets) {
-    console.log('isDirty', groups, widgets)
-    const originalGroups = state.originalGroups || []
-    // scan through each group and revert changes
-
-    for (let i = 0; i < originalGroups.length; i++) {
-        const originalGroup = originalGroups[i]
-        const currentGroup = groups?.find(group => group.id === originalGroup.id)
-        if (!currentGroup) {
-            console.warn('Group not found in pageGroups - as we do not currently support adding/removing groups, this should not happen!')
-            return true
-        }
-        // test group properties
-        if (groupPropertiesToCheck.some(check => !check(originalGroup, currentGroup))) {
-            return true
-        }
-
-        // test widgets belonging to this group
-        const originalWidgetValues = state.originalWidgets?.[originalGroup.id] || []
-        const currentWidgets = widgets?.[originalGroup.id] || []
-        for (let j = 0; j < originalWidgetValues.length; j++) {
-            const originalWidget = originalWidgetValues[j]
-            const currentWidget = currentWidgets.find(widget => widget.id === originalWidget.id)
-            if (!currentWidget) {
-                console.warn('Widget not found in pageWidgets - as we do not currently support adding/removing widgets, this should not happen!')
-                return true
-            }
-            if (widgetPropertiesToCheck.some(check => !check(originalWidget, currentWidget))) {
-                return true
-            }
-        }
-    }
-    return false
-}
-
-export { editKey, editMode, editPage, editorPath, originalGroups, originalWidgets, isDirty, isTrackingEdits, initialise, exitEditMode, startEditTracking, updateEditTracking }
+export { editKey, editMode, editPage, editorPath, isTrackingEdits, initialise, startEditTracking, endEditMode }
diff --git a/ui/src/layouts/Flex.vue b/ui/src/layouts/Flex.vue
index f8583953..6ab5476a 100644
--- a/ui/src/layouts/Flex.vue
+++ b/ui/src/layouts/Flex.vue
@@ -22,7 +22,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :index="$index" :widgets="groupWidgets(g.id)" :resizable="editMode" :group-dragging="groupDragging.active" @resize="onGroupResize" />
+                        <widget-group :group="g" :index="$index" :widgets="groupWidgets(g.id)" :resizable="editMode" :group-dragging="groupDragging.active" @resize="onGroupResize" @widget-added="updateEditStateObjects" @widget-removed="updateEditStateObjects" @refresh-state-from-store="updateEditStateObjects" />
                     </template>
                 </v-card>
             </div>
@@ -117,12 +117,7 @@ export default {
     mounted () {
         console.log('flex layout mounted')
         if (this.editMode) { // mixin property
-            this.pageGroups = this.getPageGroups()
-            const pageGroupWidgets = {}
-            for (const group of this.pageGroups) {
-                pageGroupWidgets[group.id] = this.getGroupWidgets(group.id)
-            }
-            this.pageGroupWidgets = pageGroupWidgets
+            this.updateEditStateObjects()
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -225,7 +220,7 @@ export default {
         },
         discardEdits () {
             this.revertEdits() // Mixin method
-            this.pageGroups = this.getPageGroups()
+            this.updateEditStateObjects()
         },
         async leaveEditMode () {
             let leave = true
@@ -253,6 +248,15 @@ export default {
                 return
             }
             this.pageGroups[opts.index].width = opts.width
+        },
+        updateEditStateObjects () {
+            console.log('updateEditStateObjects')
+            this.pageGroups = this.getPageGroups()
+            const pageGroupWidgets = {}
+            for (const group of this.pageGroups) {
+                pageGroupWidgets[group.id] = this.getGroupWidgets(group.id)
+            }
+            this.pageGroupWidgets = pageGroupWidgets
         }
     }
 }
diff --git a/ui/src/layouts/Grid.vue b/ui/src/layouts/Grid.vue
index d42563a8..3b81e5f2 100644
--- a/ui/src/layouts/Grid.vue
+++ b/ui/src/layouts/Grid.vue
@@ -22,7 +22,7 @@
                         {{ g.name }}
                     </template>
                     <template #text>
-                        <widget-group :group="g" :index="$index" :widgets="groupWidgets(g.id)" :resizable="editMode" :group-dragging="groupDragging.active" @resize="onGroupResize" />
+                        <widget-group :group="g" :index="$index" :widgets="groupWidgets(g.id)" :resizable="editMode" :group-dragging="groupDragging.active" @resize="onGroupResize" @widget-added="updateEditStateObjects" @widget-removed="updateEditStateObjects" @refresh-state-from-store="updateEditStateObjects" />
                     </template>
                 </v-card>
             </div>
@@ -117,12 +117,7 @@ export default {
     mounted () {
         console.log('grid layout mounted')
         if (this.editMode) { // mixin property
-            this.pageGroups = this.getPageGroups()
-            const pageGroupWidgets = {}
-            for (const group of this.pageGroups) {
-                pageGroupWidgets[group.id] = this.getGroupWidgets(group.id)
-            }
-            this.pageGroupWidgets = pageGroupWidgets
+            this.updateEditStateObjects()
             this.initializeEditTracking() // Mixin method
         }
     },
@@ -225,7 +220,7 @@ export default {
         },
         discardEdits () {
             this.revertEdits() // Mixin method
-            this.pageGroups = this.getPageGroups()
+            this.updateEditStateObjects()
         },
         async leaveEditMode () {
             let leave = true
@@ -253,6 +248,15 @@ export default {
                 return
             }
             this.pageGroups[opts.index].width = opts.width
+        },
+        updateEditStateObjects () {
+            console.log('Updating edit state objects')
+            this.pageGroups = this.getPageGroups()
+            const pageGroupWidgets = {}
+            for (const group of this.pageGroups) {
+                pageGroupWidgets[group.id] = this.getGroupWidgets(group.id)
+            }
+            this.pageGroupWidgets = pageGroupWidgets
         }
     }
 }
diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 71c44687..1cbb597d 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -13,6 +13,10 @@
                 @dragend="onHandleDragEnd($event, index, 'group', group, 'top', 'right')"
                 @dragenter.prevent
             />
+            <!-- Add Spacer button -->
+            <div class="nrdb-resizable--toolbar">
+                <v-btn v-tooltip:bottom="'Add Spacer'" icon="mdi-card-plus-outline" size="small" variant="text" class="nrdb-resizable--toolbar-button" @click="addSpacer" />
+            </div>
         </div>
         <div
             v-for="(w, $index) in widgets"
@@ -38,6 +42,10 @@
                 style="z-index: 100; min-width: 28px; min-height: 28px;"
                 :style="widgetResizing.widgetId === w.id ? getWidgetEditingStyle(w) : null"
             >
+                <!-- Delete Spacer button -->
+                <div v-if="w.type === 'ui-spacer'" class="nrdb-resizable--toolbar">
+                    <v-btn v-tooltip:bottom="'Delete Spacer'" icon="mdi-card-minus-outline" size="small" variant="text" class="nrdb-resizable--toolbar-button" @click="removeWidget(w)" />
+                </div>
                 <div
                     draggable="true"
                     class="nrdb-resizable--handle nrdb-resizable--right"
@@ -96,7 +104,7 @@ export default {
             default: false
         }
     },
-    emits: ['resize'],
+    emits: ['resize', 'widget-added', 'widget-removed', 'refresh-state-from-store'],
     data () {
         return {
             localWidgets: null
@@ -119,7 +127,6 @@ export default {
                 if (width) {
                     styles['grid-column-end'] = `span min(${this.getWidgetWidth(width)}, var(--layout-columns))`
                 }
-                console.log('widgetStyles', styles)
                 return styles
             }
         }
@@ -169,6 +176,28 @@ export default {
             } else {
                 return this.columns
             }
+        },
+        addSpacer () {
+            this.$store.dispatch('wysiwyg/addSpacer', {
+                group: this.group.id,
+                name: 'spacer',
+                order: this.widgets.length + 1 || 0,
+                height: 1, // consider taking height and width of last widget or last spacer in group?
+                width: 1
+            }).then((newWidget) => {
+                console.log('New Widget:', newWidget)
+                this.$emit('widget-added', { widget: newWidget, group: this.group })
+            }).catch((error) => {
+                console.error('Error adding spacer:', error)
+            })
+        },
+        removeWidget (widget) {
+            this.$store.dispatch('wysiwyg/removeWidget', { id: widget.id }).then(() => {
+                console.log('Widget removed')
+                this.$emit('widget-removed', { widget })
+            }).catch((error) => {
+                console.error('Error deleting widget:', error)
+            })
         }
     }
 }
diff --git a/ui/src/layouts/wysiwyg/index.js b/ui/src/layouts/wysiwyg/index.js
index b65920bd..1791791d 100644
--- a/ui/src/layouts/wysiwyg/index.js
+++ b/ui/src/layouts/wysiwyg/index.js
@@ -1,4 +1,6 @@
-import { editKey, editMode, editPage, editorPath, exitEditMode, isDirty, isTrackingEdits, originalGroups, originalWidgets, startEditTracking, updateEditTracking } from '../../EditTracking.js'
+import { mapGetters } from 'vuex'
+
+import { editKey, editMode, editPage, editorPath, isTrackingEdits } from '../../EditTracking.js'
 import NodeRedApi from '../../api/node-red'
 
 import DraggableGroupMixin from './draggableGroup.js'
@@ -13,12 +15,14 @@ export default {
             pageGroupWidgets: []
         }
     },
+    emits: ['refresh-state-from-store'],
     computed: {
+        ...mapGetters('wysiwyg', ['isDirty', 'originalGroups', 'originalWidgets']),
         dirty () {
             if (!this.editMode || !isTrackingEdits.value) {
                 return false
             }
-            return isDirty(this.pageGroups, this.pageGroupWidgets)
+            return this.isDirty(this.page.id, this.pageGroups, this.pageGroupWidgets)
         },
         editMode: function () {
             return editMode.value && editPage.value === this.$route.meta.id
@@ -27,12 +31,11 @@ export default {
     methods: {
         initializeEditTracking () {
             if (this.editMode && !isTrackingEdits.value) {
-                startEditTracking(this.pageGroups, this.pageGroupWidgets)
+                this.$store.dispatch('wysiwyg/beginEditTracking', { groups: this.pageGroups, widgets: this.pageGroupWidgets })
             }
         },
         acceptChanges () {
-            // TODO: implement widgets
-            updateEditTracking(this.pageGroups, this.pageGroupWidgets)
+            this.$store.dispatch('wysiwyg/updateEditTracking', { groups: this.pageGroups, widgets: this.pageGroupWidgets })
         },
         exitEditMode () {
             const url = new URL(window.location.href)
@@ -41,65 +44,107 @@ export default {
             delete query['edit-key']
             this.$router.replace({ query })
             window.history.replaceState({}, document.title, url)
-            exitEditMode() // EditTracking method
+            this.$store.dispatch('wysiwyg/endEditTracking')
         },
         revertEdits () {
-            const originalGroupValues = originalGroups.value || []
-            // scan through each group and revert changes
-            const groupPropertiesOfInterest = ['width', 'height', 'order']
-            const widgetLayoutPropertiesOfInterest = ['width', 'height', 'order']
-            const widgetPropsPropertiesOfInterest = ['width', 'height', 'order']
+            console.log('revertEdits')
+            this.$store.dispatch('wysiwyg/revertEdits').then(() => {
+                console.log('reverted edits')
+                this.$emit('refresh-state-from-store')
+            }).catch((error) => {
+                console.error('Error reverting edits', error)
+            })
+        },
+        async deployChanges ({ dashboard, page, groups, widgets }) {
+            console.log('deployChanges', dashboard, page, groups, widgets)
+            const normalisedWidgetsAll = new Map()
+            const normaliseWidget = widget => {
+                return {
+                    id: widget.id,
+                    type: widget.type,
+                    ...widget.props
+                }
+            }
+
+            // first normalise the widgets ready for Node-RED
+            const widgetGroups = Object.keys(widgets)
+            for (const groupId of widgetGroups) {
+                const groupWidgets = widgets[groupId]
+                if (!groupWidgets?.length) { continue }
+                const normalised = groupWidgets.map(normaliseWidget)
+                for (const widget of normalised) {
+                    if (!widget.id || !widget.type) {
+                        return Promise.reject(new Error('Widget is missing id or type'))
+                    }
+                    normalisedWidgetsAll.set(widget.id, widget)
+                }
+            }
 
-            originalGroupValues.forEach((originalGroup, index) => {
+            // determine which widgets have been added and removed
+            const originalGroupsLookup = this.originalGroups || {}
+            const currentPageGroups = []
+            for (const key in originalGroupsLookup) {
+                const originalGroup = originalGroupsLookup[key]
+                if (!originalGroup || originalGroup.page !== page) {
+                    continue // skip groups that are not on this page
+                }
                 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
+                    throw new Error('Group not found in pageGroups')
                 }
-                // restore group properties
-                for (const prop of groupPropertiesOfInterest) {
-                    if (originalGroup[prop] !== pageGroup[prop]) {
-                        pageGroup[prop] = originalGroup[prop]
-                    }
+                currentPageGroups.push(pageGroup)
+            }
+
+            // look for added / removed widgets.
+            const originalWidgetsLookup = this.originalWidgets || {}
+            // If a widget is in the original list but not in the current list, it has been removed
+            for (const key in originalWidgetsLookup) {
+                const originalWidget = originalWidgetsLookup[key]
+                const widget = normalisedWidgetsAll.get(originalWidget.id)
+                if (!currentPageGroups.find(group => group.id === originalWidget?.props?.group)) {
+                    continue // skip widgets that are not in a group we are tracking
                 }
-                // restore widget properties
-                const originalWidgetValues = originalWidgets.value?.[originalGroup.id] || []
-                const pageWidgets = this.pageGroupWidgets?.[originalGroup.id] || []
-                originalWidgetValues.forEach((originalWidget, index) => {
-                    const pageWidget = pageWidgets.find(widget => widget.id === originalWidget.id)
-                    const widgetIndex = pageWidgets.indexOf(pageWidget)
-                    if (!pageWidget) {
-                        console.warn('Widget not found in pageGroupWidgets - as we do not currently support adding/removing widgets, this should not happen!')
-                        return
-                    }
-                    if (widgetIndex !== index) {
-                        pageWidgets.splice(widgetIndex, 1)
-                        pageWidgets.splice(index, 0, pageWidget)
+                if (!widget) {
+                    if (originalWidget.type !== 'ui-spacer') {
+                        throw new Error('Only spacers can be removed')
                     }
-                    for (const prop of widgetPropsPropertiesOfInterest) {
-                        if (originalWidget.props?.[prop] !== pageWidget.props?.[prop]) {
-                            pageWidget.props[prop] = originalWidget.props[prop]
-                        }
+                    const removeWidget = {
+                        __DB2_REMOVE_WIDGET: true,
+                        id: originalWidget.id,
+                        type: originalWidget.type,
+                        ...originalWidget.props
                     }
-                    for (const prop of widgetLayoutPropertiesOfInterest) {
-                        if (originalWidget.layout?.[prop] !== pageWidget.layout?.[prop]) {
-                            pageWidget.layout[prop] = originalWidget.layout[prop]
-                        }
-                    }
-                })
-            })
-        },
-        deployChanges ({ dashboard, page, groups, widgets }) {
-            const normalisedWidgets = {}
-            for (const widgetKey in widgets) {
-                normalisedWidgets[widgetKey] = widgets[widgetKey].map(widget => {
-                    return {
-                        id: widget.id,
-                        ...widget.props
-                    }
-                })
+                    normalisedWidgetsAll.set(removeWidget.id, removeWidget)
+                }
             }
-            return NodeRedApi.deployChanges({ dashboard, page, groups, widgets: normalisedWidgets, key: editKey.value, editorPath: editorPath.value })
+
+            // If a widget is in normalisedWidgets but not in the original list, it has been added
+            const normalisedWidgets = Array.from(normalisedWidgetsAll.values()).filter(widget => currentPageGroups.find(group => group.id === widget.group)) || []
+            for (const widget of normalisedWidgets) {
+                // sanity check - all widgets must belong to a group and that group must be on the page
+                if (!widget.group || !currentPageGroups.find(group => group.id === widget.group)) {
+                    throw new Error('Widget does not belong to a group on this page')
+                }
+                const origWidget = originalWidgetsLookup[widget.id]
+                if (!origWidget) {
+                    widget.__DB2_ADD_WIDGET = true
+                }
+            }
+
+            if (!normalisedWidgets.length || !currentPageGroups.length) {
+                console.warn('No changes to deploy - it should not be possible to get here!')
+                return Promise.resolve()
+            }
+
+            return NodeRedApi.deployChanges({
+                dashboard,
+                page,
+                groups: currentPageGroups,
+                widgets: normalisedWidgets,
+                key: editKey.value,
+                editorPath: editorPath.value
+            })
         }
     }
 }
diff --git a/ui/src/layouts/wysiwyg/resizable.scss b/ui/src/layouts/wysiwyg/resizable.scss
index f496ed24..e77279e4 100644
--- a/ui/src/layouts/wysiwyg/resizable.scss
+++ b/ui/src/layouts/wysiwyg/resizable.scss
@@ -7,6 +7,11 @@
     --handle-size: 12px;
     --handle-opacity: 0.1; // initially mostly transparent - updated in hover
     --handle-accent: transparent; // initially no accent color - updated in hover
+    /* transitions to match vuetify cards/buttons etc */ 
+    transition-property: box-shadow, transform, opacity, border;
+    transition-duration: 0.28s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    border-color: 0px dashed transparent;
     cursor: grab;
     &.resizing {
         z-index: 1000 !important;
@@ -25,6 +30,10 @@
     border: 1px solid black;
     border-radius: 6px;
     opacity: var(--handle-opacity);
+    /* transitions to match vuetify cards/buttons etc */ 
+    transition-property: box-shadow, transform, opacity, background;
+    transition-duration: 0.28s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     &:hover, &:active {
         background-color: #eee;
         --handle-opacity: 1;
@@ -71,3 +80,31 @@
     display: inline-block;
     background-color: var(--handle-accent);
 }
+
+.nrdb-resizable {
+    --toolbar-opacity: 0;
+    &:hover {
+        --toolbar-opacity: 1;
+    }
+    .nrdb-resizable--toolbar {
+        position: absolute;
+        top: 8px;
+        right: 12px;
+        z-index: 101;
+        opacity: var(--toolbar-opacity, 0);
+        &:hover {
+            --toolbar-opacity: 1;
+        }
+        > .nrdb-resizable--toolbar-button {
+            width: 20px; // override theme sizing
+            height: 20px;
+            min-height: 20px;
+            min-width: 20px;
+            cursor: pointer;
+            &:hover {
+                --toolbar-opacity: 1;
+            }
+        }
+    }
+}
+
diff --git a/ui/src/store/index.mjs b/ui/src/store/index.mjs
index f08bf4c7..3564dc4e 100644
--- a/ui/src/store/index.mjs
+++ b/ui/src/store/index.mjs
@@ -4,12 +4,14 @@ import { createStore } from 'vuex'
 import ui from './ui.mjs'
 import data from './data.mjs'
 import setup from './setup.mjs'
+import wysiwyg from './wysiwyg.mjs'
 
 export default createStore({
     modules: {
         ui,
         data,
-        setup
+        setup,
+        wysiwyg
     },
     plugins: []
 })
diff --git a/ui/src/store/ui.mjs b/ui/src/store/ui.mjs
index 0a08b0c1..4de7f11b 100644
--- a/ui/src/store/ui.mjs
+++ b/ui/src/store/ui.mjs
@@ -1,9 +1,40 @@
+/**
+ * @typedef {Object} Group
+ * @property {string} id - the group ID
+ * @property {'ui-group'} type
+ * @property {string} page - owner page ID
+ * @property {*} [*] - Other group properties
+ */
+/**
+ * @typedef {Object} Widget
+ * @property {string} id - the widget ID
+ * @property {string} type - the widget type e.g. ui-button, ui-text, ui-template
+ * @property {Object} props - the widget properties (typically the node properties)
+ * @property {Object} layout - the widget layout properties
+ * @property {Number | String} layout.order - order of the widget in the group
+ * @property {Number | String} layout.width - width of the widget in the group
+ * @property {Number | String} layout.height - height of the widget in the group
+ * @property {Object} state
+ * @property {Object} component
+ */
+/**
+ * @typedef {Object.<string, Widget>} Widgets - Widget ID to Widget lookup as per ui store state format
+ */
+/**
+ * @typedef {Array<Group>} PageGroups - Array of Group on the current given page
+ */
+/**
+ * @typedef {Object.<string, Array<Widget>} PageGroupsWidgets - Look up of Group ID to Array of Widgets for the current page
+ */
+
 // initial state
 const state = () => ({
     dashboards: null,
     pages: null,
-    groups: null,
     themes: null,
+    /** @type {Widgets} */
+    groups: null,
+    /** @type {Widgets} */
     widgets: null
 })
 
@@ -107,7 +138,6 @@ const getters = {
 
             // 4. Flatten the grouped data back into a single array
             const sorted = sortedGroups.flatMap((e) => e[1])
-            // sortData2(widgetsInGroup).map(e=>{ return {widgetorder: e.layout.order, ...{ ...(e.props.subflow ||{})}}})
             return sorted
         }
     },
diff --git a/ui/src/store/wysiwyg.mjs b/ui/src/store/wysiwyg.mjs
new file mode 100644
index 00000000..70d01451
--- /dev/null
+++ b/ui/src/store/wysiwyg.mjs
@@ -0,0 +1,324 @@
+import { markRaw } from 'vue'
+
+import { endEditMode, startEditTracking } from '../EditTracking.js'
+import UISpacer from '../widgets/ui-spacer/UISpacer.vue'
+
+// initial state
+const state = () => ({
+    originalGroups: null,
+    originalWidgets: null,
+    shadowWidgets: null // this is used to store widgets that have been removed during an edit session
+})
+
+// getters
+const getters = {
+    // edit time tracking:
+    originalGroups (state) {
+        return state.originalGroups
+    },
+    originalWidgets (state) {
+        return state.originalWidgets
+    },
+    isDirty: (state, getters, rootState) => (pageId, groups = null, widgets = null) => {
+        // when groups are passed in, they are an array of groups, convert to a key-value object
+        if (groups) {
+            groups = flattenPageGroups(groups)
+        }
+        // when widgets are passed in, they are in a nested object {groupId:{ id: widget1, id: widget2 } structure
+        // so we need to flatten them to a key-value object
+        if (widgets) {
+            widgets = flattenPageWidgets(widgets)
+        }
+
+        const originalWidgets = state.originalWidgets || {}
+        const currentWidgets = widgets || rootState.ui.widgets || {}
+        const originalGroups = state.originalGroups || {}
+        const currentGroups = groups || rootState.ui.groups || {}
+
+        let originalGroupsCount = 0
+        let currentGroupsCount = 0
+        let originalWidgetsCount = 0
+        let currentWidgetsCount = 0
+
+        // first filter to only items of interest (those matching the currentGroupId)
+        const originalPageGroups = new Map()
+        const originalPageGroupsWidgets = new Map()
+        const currentPageGroups = new Map()
+        const currentPageGroupsWidgets = new Map()
+        for (const key in originalGroups) {
+            if (originalGroups[key].page === pageId) {
+                originalPageGroups.set(originalGroups[key].id, originalGroups[key])
+                originalGroupsCount++
+            }
+        }
+        for (const key in currentGroups) {
+            if (currentGroups[key].page === pageId) {
+                currentPageGroups.set(currentGroups[key].id, currentGroups[key])
+                currentGroupsCount++
+            }
+        }
+        for (const key in originalWidgets) {
+            if (originalPageGroups.has(originalWidgets[key]?.props?.group)) {
+                originalPageGroupsWidgets.set(originalWidgets[key].id, originalWidgets[key])
+                originalWidgetsCount++
+            }
+        }
+        for (const key in currentWidgets) {
+            if (originalPageGroups.has(currentWidgets[key]?.props?.group)) {
+                currentPageGroupsWidgets.set(currentWidgets[key].id, currentWidgets[key])
+                currentWidgetsCount++
+            }
+        }
+
+        // fast test: if the number of groups or widgets has changed, we are dirty
+        if (originalGroupsCount !== currentGroupsCount) {
+            return true
+        }
+        if (originalWidgetsCount !== currentWidgetsCount) {
+            return true
+        }
+
+        // scan test: compare each group and widget
+        const groupPropertiesToCheck = [
+            (original, current) => +original.width === +current.width,
+            (original, current) => +original.height === +current.height,
+            (original, current) => +original.order === +current.order
+        ]
+        for (let idx = 0; idx < originalGroupsCount.length; idx++) {
+            const originalGroup = originalGroupsCount[idx]
+            const group = currentGroups[originalGroup.id]
+            if (!group) {
+                return true
+            }
+            for (const check of groupPropertiesToCheck) {
+                if (!check(originalGroup, group)) {
+                    return true
+                }
+            }
+        }
+
+        const widgetPropertiesToCheck = [
+            (original, current) => +original.layout?.width === +current.layout?.width,
+            (original, current) => +original.layout?.height === +current.layout?.height,
+            (original, current) => +original.layout?.order === +current.layout?.order,
+            (original, current) => +original.props?.width === +current.props?.width,
+            (original, current) => +original.props?.height === +current.props?.height,
+            (original, current) => +original.props?.order === +current.props?.order
+        ]
+        const pageGroupsWidgetsArray = Array.from(originalPageGroupsWidgets.values())
+        for (let idx = 0; idx < originalWidgetsCount; idx++) {
+            const originalWidget = pageGroupsWidgetsArray[idx]
+            const widget = currentWidgets[originalWidget.id]
+            if (!widget) {
+                return true // not found must be dirty
+            }
+            for (const check of widgetPropertiesToCheck) {
+                if (!check(originalWidget, widget)) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+}
+
+const mutations = {
+    originalGroups (state, groups) {
+        state.originalGroups = groups
+    },
+    originalWidgets (state, widgets) {
+        state.originalWidgets = widgets
+    },
+    // addWidget (state, widget) {
+    //     state.widgets[widget.id] = widget
+    // },
+    // removeWidget (state, widgetId) {
+    //     state.shadowWidgets[widgetId] = state.widgets[widgetId]
+    //     delete state.widgets[widgetId]
+    // },
+    shadowWidgets (state, widgets) {
+        state.shadowWidgets = widgets
+    }
+}
+const actions = {
+    addSpacer ({ rootState, state, commit }, { group, name, order, height, width }) {
+        console.log('addSpacer', group, name, order, height, width)
+        if (!group) {
+            throw new Error('group is required')
+        }
+        // ensure group exists in state.groups
+        if (!rootState.ui.groups[group]) {
+            throw new Error('group does not exist')
+        }
+
+        const widget = {
+            id: newId(),
+            type: 'ui-spacer',
+            name: 'spacer',
+            component: markRaw(UISpacer),
+            props: {
+                group,
+                name: name || 'spacer',
+                tooltip: '',
+                order: order ?? 0,
+                width: width ?? 1,
+                height: height ?? 1,
+                className: '',
+                _users: [],
+                enabled: true,
+                visible: true
+            },
+            layout: {
+                order: order ?? 0,
+                width: width ?? 1,
+                height: height ?? 1
+            },
+            state: { enabled: true, visible: true, class: '' }
+        }
+        rootState.ui.widgets[widget.id] = widget
+        commit('ui/widgets', rootState.ui.widgets, { root: true })
+        return widget
+    },
+    removeWidget ({ rootState, state, commit }, payload) {
+        state.shadowWidgets[payload.id] = rootState.ui.widgets[payload.id]
+        delete rootState.ui.widgets[payload.id]
+        commit('ui/widgets', rootState.ui.widgets, { root: true })
+    },
+    /**
+     * @param {import('vuex').ActionContext} context
+     * @param {Object} payload
+     * @param {import('./ui.mjs').Groups} payload.groups
+     * @param {import('./ui.mjs').Widgets} payload.widgets
+     */
+    beginEditTracking ({ dispatch, state }, { groups, widgets }) {
+        console.log('beginEditTracking')
+        startEditTracking() // EditTracking method
+        dispatch('updateEditTracking', { groups, widgets })
+        state.shadowWidgets = {}
+    },
+    /**
+     * @param {import('vuex').ActionContext} context
+     * @param {Object} payload
+     * @param {Array<import('./ui.mjs').Groups>} payload.groups
+     * @param {import('./ui.mjs').GroupsWidgets} payload.widgets
+     */
+    updateEditTracking ({ commit }, { groups, widgets }) {
+        console.log('updateEditTracking')
+        commit('originalGroups', JSON.parse(JSON.stringify(flattenPageGroups(groups))))
+        const slimCopy = {}
+        /** @type {import('./ui.mjs').Widgets} */
+        const src = flattenPageWidgets(widgets)
+        for (const key in src) {
+            const w = src[key]
+            slimCopy[key] = {
+                id: w.id,
+                type: w.type,
+                props: { ...w.props },
+                layout: { ...w.layout }
+            }
+        }
+        commit('originalWidgets', slimCopy)
+    },
+    revertEdits ({ rootState, state, commit }) {
+        console.log('revertEdits')
+        const uiWidgets = rootState.ui.widgets
+        const uiGroups = rootState.ui.groups
+        const groupPropertiesOfInterest = ['width', 'height', 'order']
+        for (const key in uiGroups) {
+            const existingGroup = uiGroups[key]
+            const originalGroup = state.originalGroups[key]
+            if (!originalGroup) {
+                // group was added, remove it
+                delete uiGroups[key]
+            }
+            if (originalGroup) {
+                for (const prop of groupPropertiesOfInterest) {
+                    existingGroup[prop] = originalGroup[prop]
+                }
+            }
+        }
+
+        /** @type {Widgets} */
+        const originalWidgets = state.originalWidgets
+        const widgetLayoutPropertiesOfInterest = ['width', 'height', 'order']
+        const widgetPropsPropertiesOfInterest = ['width', 'height', 'order']
+        for (const key in originalWidgets) {
+            const originalWidget = originalWidgets[key]
+            if (!uiWidgets[key] && originalWidget) {
+                // widget was removed, bring it back
+                uiWidgets[key] = state.shadowWidgets[key]
+            }
+            if (uiWidgets[key] && !originalWidget) {
+                // widget was added, remove it
+                delete uiWidgets[key]
+            }
+            if (uiWidgets[key] && originalWidget) {
+                for (const prop of widgetPropsPropertiesOfInterest) {
+                    uiWidgets[key].props[prop] = originalWidget.props[prop]
+                }
+                for (const prop of widgetLayoutPropertiesOfInterest) {
+                    uiWidgets[key].layout[prop] = originalWidget.layout[prop]
+                }
+            }
+        }
+        // now scan for widgets that were added to uiWidgets and do not exist in originalWidgets
+        for (const key in uiWidgets) {
+            if (!originalWidgets[key]) {
+                delete uiWidgets[key]
+            }
+        }
+        commit('shadowWidgets', {}) // reset the shadow widgets since we have reverted the changes
+        commit('ui/widgets', uiWidgets, { root: true })
+        commit('ui/groups', uiGroups, { root: true })
+    },
+    endEditTracking ({ commit }) {
+        console.log('endEditTracking')
+        endEditMode() // EditTracking method
+        commit('originalGroups', null)
+        commit('originalWidgets', null)
+        commit('shadowWidgets', null)
+    }
+}
+
+function newId () {
+    return Date.now().toString(16).slice(2, 10) + Math.random().toString(16).slice(2, 10)
+}
+
+/**
+ * Flattens the PageGroups array to a flat lookup object
+ * @param {import('./ui.mjs').PageGroups} groups
+ * @returns {Object.<string, Group>}
+ */
+function flattenPageGroups (groups) {
+    const flat = {}
+    for (const key in groups) {
+        const g = groups[key]
+        flat[g.id] = g
+    }
+    return flat
+}
+
+/**
+ * Flattens the PageGroupsWidgets object to a flat lookup object
+ * @param {import('./ui.mjs').PageGroupsWidgets} groupWidgets
+ * @returns {Object.<string, Widget>} - Widget ID to Widget lookup
+ */
+function flattenPageWidgets (groupWidgets) {
+    const flat = {}
+    for (const groupId in groupWidgets) {
+        const widgets = groupWidgets[groupId]
+        for (let idx = 0; idx < widgets.length; idx++) {
+            const w = widgets[idx]
+            flat[w.id] = w
+        }
+    }
+    return flat
+}
+
+export default {
+    namespaced: true,
+    actions,
+    state,
+    getters,
+    mutations
+}

From 33bdf20886ec65f16bd6d0cdb9c2296eadce7846 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Wed, 20 Nov 2024 08:57:38 +0000
Subject: [PATCH 07/11] Use an aHTTPS Agent and HTTPS scheme if
 RED.settings.https is set to something

closes #1480
---
 nodes/config/ui_base.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index bc13c70f..4aadd7e5 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -1,3 +1,4 @@
+const { Agent } = require('https')
 const path = require('path')
 
 const axios = require('axios')
@@ -1130,7 +1131,17 @@ module.exports = function (RED) {
         const host = RED.settings.uiHost
         const port = RED.settings.uiPort
         const httpAdminRoot = RED.settings.httpAdminRoot
-        const url = 'http://' + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
+        let scheme = 'http://'
+        let httpsAgent
+        if (RED.settings.https) {
+            const https = (typeof RED.settings.https === 'function' ? RED.settings.https() : RED.settings.https) || {}
+            httpsAgent = new Agent({
+                rejectUnauthorized: false,
+                ...https
+            })
+            scheme = 'https://'
+        }
+        const url = scheme + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
         console.log('url', url)
         // get request body
         const dashboardId = req.params.dashboardId
@@ -1234,6 +1245,7 @@ module.exports = function (RED) {
             const getResponse = await axios.request({
                 method: 'GET',
                 headers: getHeaders,
+                httpsAgent,
                 url
             })
 
@@ -1314,6 +1326,7 @@ module.exports = function (RED) {
             const postResponse = await axios.request({
                 method: 'POST',
                 headers: postHeaders,
+                httpsAgent,
                 url,
                 data: {
                     flows,

From 1771bbe77e72a8f5cb52fa0e3abaf700413d3e9c Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Wed, 20 Nov 2024 10:08:02 +0000
Subject: [PATCH 08/11] handle async https settings

---
 nodes/config/ui_base.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js
index 4aadd7e5..512f6155 100644
--- a/nodes/config/ui_base.js
+++ b/nodes/config/ui_base.js
@@ -1134,12 +1134,21 @@ module.exports = function (RED) {
         let scheme = 'http://'
         let httpsAgent
         if (RED.settings.https) {
-            const https = (typeof RED.settings.https === 'function' ? RED.settings.https() : RED.settings.https) || {}
-            httpsAgent = new Agent({
-                rejectUnauthorized: false,
-                ...https
-            })
-            scheme = 'https://'
+            let https = RED.settings.https
+            try {
+                if (typeof https === 'function') {
+                    // since https() could return a promise / be async, we need to await it
+                    // if however the function is actually sync, JS will auto wrap it in a promise and await it
+                    https = await https()
+                }
+                httpsAgent = new Agent({
+                    rejectUnauthorized: false,
+                    ...(https || {})
+                })
+                scheme = 'https://'
+            } catch (error) {
+                return res.status(500).json({ error: 'Error processing https settings' })
+            }
         }
         const url = scheme + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
         console.log('url', url)

From 0a9d3816d7339e00128108241fba0555e0fbcffc Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Fri, 6 Dec 2024 13:42:47 +0000
Subject: [PATCH 09/11] Improved styling for handles and widget bordering in
 edit mode

---
 ui/src/layouts/wysiwyg/resizable.scss | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/ui/src/layouts/wysiwyg/resizable.scss b/ui/src/layouts/wysiwyg/resizable.scss
index e77279e4..c3f07114 100644
--- a/ui/src/layouts/wysiwyg/resizable.scss
+++ b/ui/src/layouts/wysiwyg/resizable.scss
@@ -4,14 +4,15 @@
     height: 100%;
     top: 0;
     left: 0;
-    --handle-size: 12px;
-    --handle-opacity: 0.1; // initially mostly transparent - updated in hover
+    --handle-size: 8px;
+    --handle-opacity: 0.25; // initially mostly transparent - updated in hover
     --handle-accent: transparent; // initially no accent color - updated in hover
     /* transitions to match vuetify cards/buttons etc */ 
     transition-property: box-shadow, transform, opacity, border;
-    transition-duration: 0.28s;
+    transition-duration: 0.15s;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     border-color: 0px dashed transparent;
+    border: 1px dashed #bcbcbc;
     cursor: grab;
     &.resizing {
         z-index: 1000 !important;
@@ -28,24 +29,24 @@
     position: absolute;
     background-color: white;
     border: 1px solid black;
-    border-radius: 6px;
-    opacity: var(--handle-opacity);
+    border-radius: 3px;
     /* transitions to match vuetify cards/buttons etc */ 
-    transition-property: box-shadow, transform, opacity, background;
-    transition-duration: 0.28s;
+    transition-property: box-shadow, transform, opacity, border-color, background-color;
+    transition-duration: 0.15s;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     &:hover, &:active {
-        background-color: #eee;
         --handle-opacity: 1;
         --handle-accent: red;
+        background-color: #eee;
+        border-color: var(--handle-accent);
     }
 }
 
 .nrdb-resizable--right {
-    height: calc(2 * var(--handle-size));
+    height: calc(3 * var(--handle-size));
     width: var(--handle-size);
     top: 50%;
-    margin-top: calc(-1 * var(--handle-size));
+    margin-top: calc(-1.5 * var(--handle-size));
     right: calc(-1 * var(--handle-size) / 2);
     display: flex;
     justify-content: center;
@@ -55,9 +56,9 @@
 
 .nrdb-resizable--bottom {
     height: var(--handle-size);
-    width: calc(2 * var(--handle-size));
+    width: calc(3 * var(--handle-size));
     left: 50%;
-    margin-left: calc(-1 * var(--handle-size));
+    margin-left: calc(-1.5 * var(--handle-size));
     bottom: calc(-1 * var(--handle-size) / 2);
     display: flex;
     justify-content: center;

From c1b8f207daf9cb6d87978f25b086363f27eafc92 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 13 Dec 2024 14:41:06 +0000
Subject: [PATCH 10/11] fix slider widths

---
 ui/src/layouts/Group.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 1cbb597d..af0a7fa1 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -116,17 +116,12 @@ export default {
         },
         widgetStyles () {
             return (widget) => {
-                // `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))`"
                 const styles = {}
                 const height = widget.props.height || widget.layout.height
                 const width = widget.props.width || widget.layout.width
-                if (height) {
-                    styles['grid-row-end'] = `span ${height}`
-                    styles['grid-template-rows'] = `repeat(${height}, minmax(var(--widget-row-height), auto))`
-                }
-                if (width) {
-                    styles['grid-column-end'] = `span min(${this.getWidgetWidth(width)}, var(--layout-columns))`
-                }
+                styles['grid-row-end'] = `span ${height}`
+                styles['grid-template-rows'] = `repeat(${height}, minmax(var(--widget-row-height), auto))`
+                styles['grid-column-end'] = `span min(${this.getWidgetWidth(+width)}, var(--layout-columns))`
                 return styles
             }
         }
@@ -171,11 +166,11 @@ export default {
             return style
         },
         getWidgetWidth (width) {
-            if (width) {
+            const w = +width // convert to number if it's a string
+            if (!isNaN(w) && w > 0) {
                 return Math.min(width, this.columns)
-            } else {
-                return this.columns
             }
+            return this.columns
         },
         addSpacer () {
             this.$store.dispatch('wysiwyg/addSpacer', {

From cb0f1dfc446ee80c03b2adc902108dda608aaa34 Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:43:31 +0000
Subject: [PATCH 11/11] fix group widget widths

---
 ui/src/layouts/Group.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index 1cbb597d..af0a7fa1 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -116,17 +116,12 @@ export default {
         },
         widgetStyles () {
             return (widget) => {
-                // `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))`"
                 const styles = {}
                 const height = widget.props.height || widget.layout.height
                 const width = widget.props.width || widget.layout.width
-                if (height) {
-                    styles['grid-row-end'] = `span ${height}`
-                    styles['grid-template-rows'] = `repeat(${height}, minmax(var(--widget-row-height), auto))`
-                }
-                if (width) {
-                    styles['grid-column-end'] = `span min(${this.getWidgetWidth(width)}, var(--layout-columns))`
-                }
+                styles['grid-row-end'] = `span ${height}`
+                styles['grid-template-rows'] = `repeat(${height}, minmax(var(--widget-row-height), auto))`
+                styles['grid-column-end'] = `span min(${this.getWidgetWidth(+width)}, var(--layout-columns))`
                 return styles
             }
         }
@@ -171,11 +166,11 @@ export default {
             return style
         },
         getWidgetWidth (width) {
-            if (width) {
+            const w = +width // convert to number if it's a string
+            if (!isNaN(w) && w > 0) {
                 return Math.min(width, this.columns)
-            } else {
-                return this.columns
             }
+            return this.columns
         },
         addSpacer () {
             this.$store.dispatch('wysiwyg/addSpacer', {