lobsterboard 0.8.2 → 0.8.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.8.3] - 2026-04-02
+
+### Fixed
+- **Widget interaction** — Restored missing click-to-select, drag-to-move, and resize functionality lost in module splitting — fixes [#24](https://github.com/Curbob/LobsterBoard/issues/24)
+- **Widget deletion** — Fixed non-functional delete button in properties panel by adding missing `deleteWidget()` function
+- **JavaScript execution** — Fixed widget scripts not running by correcting DOM element ID matching (`widget-X` vs `preview-widget-X`)
+- **Edit mode controls** — Fixed "Done" button and edit mode state management after module refactoring
+
+### Technical
+- Added complete widget event system (click, mousedown, resize handles)
+- Added `startDragWidget()` and `startResizeWidget()` functions with grid snapping
+- Added `deleteWidget()` function with proper state cleanup
+- Fixed widget script execution timing and element targeting
+- Restored full editor interactivity matching pre-0.8.1 functionality
+
 ## [0.8.2] - 2026-04-02
 
 ### Fixed

package/app.html

@@ -1042,5 +1042,26 @@
   </div>
 
   <script src="js/templates.js"></script>
+  
+  <script>
+    // ─────────────────────────────────────────────
+    // INITIALIZATION
+    // ─────────────────────────────────────────────
+    document.addEventListener('DOMContentLoaded', () => {
+      initCanvas();
+      initDragDrop();
+      initControls();
+      initProperties();
+      loadConfig(); // Loads config and renders widgets
+      // setEditMode(false) is called inside loadConfig()
+      
+      // Initialize button event handlers
+      document.getElementById('btn-edit-layout').addEventListener('click', requestEditMode);
+      document.getElementById('btn-done-editing').addEventListener('click', () => {
+        saveConfig();
+        setEditMode(false);
+      });
+    });
+  </script>
 </body>
 </html>

package/dist/lobsterboard.css

@@ -1,4 +1,4 @@
-/* LobsterBoard v0.8.2 - Dashboard Styles */
+/* LobsterBoard v0.8.3 - Dashboard Styles */
 /* LobsterBoard Dashboard - Generated Styles */
 
 :root {

package/dist/lobsterboard.esm.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.8.2
+ * LobsterBoard v0.8.3
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.8.2
+ * LobsterBoard v0.8.3
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.umd.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.8.2
+ * LobsterBoard v0.8.3
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.umd.min.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.8.2
+ * LobsterBoard v0.8.3
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/js/editor/auth.js

@@ -258,8 +258,16 @@
     state.widgets.forEach(function(widget) {
       var el = document.getElementById(widget.id);
       if (el) {
-        el.querySelector('.widget-render').style.pointerEvents = enable ? 'none' : 'auto';
-        el.querySelector('.resize-handle').style.display = enable ? 'block' : 'none';
+        var widgetRender = el.querySelector('.widget-render');
+        var resizeHandle = el.querySelector('.resize-handle');
+        
+        if (widgetRender) {
+          widgetRender.style.pointerEvents = enable ? 'none' : 'auto';
+        }
+        if (resizeHandle) {
+          resizeHandle.style.display = enable ? 'block' : 'none';
+        }
+        
         if (enable) {
           el.style.cursor = 'move';
           el.classList.add('builder-edit-mode');
@@ -302,7 +310,7 @@
     state.widgets.forEach(function(widget) {
       var template = WIDGETS[widget.type];
       if (!template || !template.generateJs) return;
-      var props = sanitizeProps(Object.assign({}, widget.properties, { id: 'preview-' + widget.id }));
+      var props = sanitizeProps(Object.assign({}, widget.properties, { id: widget.id }));
       try {
         var js = template.generateJs(props);
         new Function(js)();

package/js/editor/canvas.js

@@ -115,4 +115,195 @@
   window.addEventListener('resize', function() {
     if (!state.editMode) scaleCanvasToFit();
   });
+
+  // ─────────────────────────────────────────────
+  // WIDGET RENDERING AND SELECTION
+  // ─────────────────────────────────────────────
+
+  window.renderWidget = function renderWidget(widget) {
+    const template = WIDGETS[widget.type];
+    if (!template) {
+      console.warn(`renderWidget: unknown widget type "${widget.type}" (${widget.id}), skipping`);
+      return;
+    }
+    const canvas = document.getElementById('canvas');
+
+    const el = document.createElement('div');
+    el.className = 'placed-widget';
+    el.dataset.type = widget.type;
+    if (widget.type === 'text-header') {
+      el.dataset.showBorder = widget.properties.showBorder ? 'true' : 'false';
+    }
+    if (widget.type === 'pages-menu' && widget.properties.showBorder === false) {
+      el.dataset.showBorder = 'false';
+    }
+
+    el.id = widget.id;
+    el.style.left = widget.x + 'px';
+    el.style.top = widget.y + 'px';
+    el.style.width = widget.width + 'px';
+    el.style.height = widget.height + 'px';
+    el.style.position = 'absolute';
+
+    // Widget content and wrapper
+    el.innerHTML = '<div class="widget-render"></div><div class="resize-handle"></div>';
+    const props = { ...widget.properties, id: widget.id };
+    const widgetContent = window.processWidgetHtml(template.generateHtml(props), widget.properties.showHeader);
+    el.querySelector('.widget-render').innerHTML = widgetContent;
+
+    canvas.appendChild(el);
+    window.applyWidgetFontScale(widget);
+
+    // Add click event listener for selection
+    el.addEventListener('click', function(e) {
+      if (!state.editMode) return;
+      e.stopPropagation();
+      window.selectWidget(widget.id);
+    });
+
+    // Add drag event listener
+    el.addEventListener('mousedown', function(e) {
+      if (!state.editMode) return;
+      if (e.target.classList.contains('resize-handle')) return;
+      window.startDragWidget(e, widget);
+    });
+
+    // Add resize handle event listener
+    const resizeHandle = el.querySelector('.resize-handle');
+    if (resizeHandle) {
+      resizeHandle.addEventListener('mousedown', function(e) {
+        if (!state.editMode) return;
+        e.stopPropagation();
+        window.startResizeWidget(e, widget);
+      });
+    }
+
+    // Execute widget JS after HTML is in the DOM
+    if (template.generateJs) {
+      try {
+        eval('(function() { var widget = arguments[0]; ' + template.generateJs(props) + ' })')(widget);
+      } catch (e) {
+        console.error(`Widget ${widget.id} JS error:`, e);
+      }
+    }
+  };
+
+  window.selectWidget = function selectWidget(id) {
+    // Deselect previous
+    document.querySelectorAll('.placed-widget.selected').forEach(el => {
+      el.classList.remove('selected');
+    });
+
+    state.selectedWidget = id ? state.widgets.find(w => w.id === id) : null;
+
+    if (state.selectedWidget) {
+      document.getElementById(id).classList.add('selected');
+      window.showProperties(state.selectedWidget);
+    } else {
+      window.hideProperties();
+    }
+  };
+
+  window.startDragWidget = function startDragWidget(e, widget) {
+    if (e.button !== 0) return;
+
+    const el = document.getElementById(widget.id);
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const origX = widget.x;
+    const origY = widget.y;
+
+    function onMove(e) {
+      const dx = (e.clientX - startX) / state.zoom;
+      const dy = (e.clientY - startY) / state.zoom;
+
+      widget.x = Math.round((origX + dx) / 20) * 20;
+      widget.y = Math.round((origY + dy) / 20) * 20;
+
+      // Keep in bounds
+      widget.x = Math.max(0, Math.min(widget.x, state.canvas.width - widget.width));
+      if (window.isScrollableMode && window.isScrollableMode()) {
+        widget.y = Math.max(0, widget.y);
+      } else {
+        widget.y = Math.max(0, Math.min(widget.y, state.canvas.height - widget.height));
+      }
+
+      el.style.left = widget.x + 'px';
+      el.style.top = widget.y + 'px';
+
+      // In scrollable mode, grow canvas to fit
+      if (window.isScrollableMode && window.isScrollableMode()) {
+        window.updateCanvasSize(true);
+      }
+
+      window.updatePropertyInputs();
+    }
+
+    function onUp() {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
+
+  window.startResizeWidget = function startResizeWidget(e, widget) {
+    const el = document.getElementById(widget.id);
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const origW = widget.width;
+    const origH = widget.height;
+
+    function onMove(e) {
+      const dw = (e.clientX - startX) / state.zoom;
+      const dh = (e.clientY - startY) / state.zoom;
+
+      widget.width = Math.round((origW + dw) / 20) * 20;
+      widget.height = Math.round((origH + dh) / 20) * 20;
+
+      // Minimum size
+      widget.width = Math.max(100, widget.width);
+      widget.height = Math.max(60, widget.height);
+
+      // Keep in bounds
+      widget.width = Math.min(widget.width, state.canvas.width - widget.x);
+      if (!window.isScrollableMode || !window.isScrollableMode()) {
+        widget.height = Math.min(widget.height, state.canvas.height - widget.y);
+      }
+
+      el.style.width = widget.width + 'px';
+      el.style.height = widget.height + 'px';
+
+      // In scrollable mode, grow canvas to fit
+      if (window.isScrollableMode && window.isScrollableMode()) {
+        window.updateCanvasSize(true);
+      }
+
+      window.updatePropertyInputs();
+    }
+
+    function onUp() {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
+
+  window.deleteWidget = function deleteWidget(id) {
+    const idx = state.widgets.findIndex(w => w.id === id);
+    if (idx === -1) return;
+
+    state.widgets.splice(idx, 1);
+    document.getElementById(id)?.remove();
+    window.selectWidget(null);
+    window.updateCanvasInfo();
+    window.updateEmptyState();
+
+    if (state.widgets.length === 0) {
+      document.getElementById('canvas').classList.remove('has-widgets');
+    }
+  };
 })();

package/js/editor/properties.js

@@ -742,4 +742,34 @@
   }
 
   window.onPropertyChange = onPropertyChange;
+
+  // ─────────────────────────────────────────────
+  // WIDGET FONT SCALING
+  // ─────────────────────────────────────────────
+
+  window.applyWidgetFontScale = function applyWidgetFontScale(widget) {
+    const el = document.getElementById(widget.id);
+    if (!el) return;
+    const body = el.querySelector('.dash-card-body');
+    const render = el.querySelector('.widget-render');
+    const adjustment = widget.properties.widgetFontAdjust || 0; // e.g. -25, -10, 0, +10, +25
+    if (adjustment !== 0) {
+      // Compute effective scale: global + adjustment (additive percentage points)
+      const globalScale = state.fontScale || 1;
+      const effectiveScale = globalScale + (adjustment / 100);
+      // Set --font-scale override on widget body content only (header stays at global)
+      const target = body || render;
+      if (target) {
+        target.style.setProperty('--font-scale', effectiveScale);
+        target.style.fontSize = (effectiveScale * 100) + '%';
+      }
+    } else {
+      // No adjustment — inherit global
+      const target = body || render;
+      if (target) {
+        target.style.removeProperty('--font-scale');
+        target.style.removeProperty('font-size');
+      }
+    }
+  };
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lobsterboard",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Self-hosted drag-and-drop dashboard builder with 50 widgets, template gallery, and custom pages. Works standalone or with OpenClaw.",
   "keywords": [
     "dashboard",