iobroker.mywebui 1.37.79 → 1.37.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.79",
+  "version": "1.37.81",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/config/IobrokerWebuiAppShell.js

@@ -320,10 +320,8 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             return;
         }
         
-        // Check if panel already exists
         let visibilityPanel = visibilityDock.querySelector('#visibility-panel-container');
         if (!visibilityPanel) {
-            // Create panel
             visibilityPanel = document.createElement('div');
             visibilityPanel.id = 'visibility-panel-container';
             visibilityPanel.style.cssText = 'padding:15px;';
@@ -332,61 +330,36 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 <div id="visibility-panel-content" style="font-size:12px;"></div>
             `;
             visibilityDock.appendChild(visibilityPanel);
-            console.log('✅ [Visibility] Panel created and added to visibilityDock');
-        } else {
-            console.log('✅ [Visibility] Panel already exists');
         }
 
-        
-        // Expose update function globally for manual testing
-        window.updateVisibilityPanel = () => this._updateVisibilityPanel();
-        
-        // Initial test render
         setTimeout(() => {
             const visibilityDock = this._getDomElement('visibilityDock');
             const testContent = visibilityDock?.querySelector('#visibility-panel-content');
-            if (testContent) {
+            if (testContent)
                 testContent.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
-            }
         }, 100);
-        
-        // Use polling to check for selection changes
+
         let lastSelectedElement = null;
         const checkSelection = () => {
-            try {
-                const pg = this.propertyGrid?.propertyGrid;
-                if (!pg) {
-                    return;
-                }
-                
-                // Use _selectedItems instead of selectedElements
-                const selectedItems = pg._selectedItems;
-                
-                if (selectedItems && selectedItems.length === 1) {
-                    const currentElement = selectedItems[0].element;
-                    if (currentElement !== lastSelectedElement) {
-                        console.log('✨ [Visibility] New selection detected!', currentElement.tagName);
-                        lastSelectedElement = currentElement;
-                        this._updateVisibilityPanel();
-                    }
-                } else if (lastSelectedElement !== null) {
-                    console.log('🔄 [Visibility] Selection cleared');
-                    lastSelectedElement = null;
-                    const visibilityDock = this._getDomElement('visibilityDock');
-                    const content = visibilityDock?.querySelector('#visibility-panel-content');
-                    if (content) {
-                        content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
-                    }
+            const pg = this.propertyGrid?.propertyGrid;
+            if (!pg) return;
+            const selectedItems = pg._selectedItems;
+            if (selectedItems && selectedItems.length === 1) {
+                const currentElement = selectedItems[0].element;
+                if (currentElement !== lastSelectedElement) {
+                    lastSelectedElement = currentElement;
+                    this._updateVisibilityPanel().catch(() => {});
                 }
-            } catch (err) {
-                console.error('❌ [Visibility] Poll error:', err);
+            } else if (lastSelectedElement !== null) {
+                lastSelectedElement = null;
+                const visibilityDock = this._getDomElement('visibilityDock');
+                const content = visibilityDock?.querySelector('#visibility-panel-content');
+                if (content)
+                    content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
             }
         };
-        
+
         setInterval(checkSelection, 500);
-        
-        console.log('✅ [Visibility] Selection polling started (500ms interval)');
-        console.log('💡 [Visibility] Test manually: window.updateVisibilityPanel()');
     }
     
     async _updateVisibilityPanel() {
@@ -406,6 +379,11 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const designItem = selectedItems[0];
         const element = designItem.element;
 
+        if (!element || typeof element.getAttribute !== 'function') {
+            content.innerHTML = '<p style="color:#999;font-style:italic;">Select an element to configure visibility...</p>';
+            return;
+        }
+
         // Read existing signal binding — bind-prop:hidden (hide) or bind-prop:disable (disable)
         const hiddenAttr = element.getAttribute('bind-prop:hidden') || null;
         const disableAttr = element.getAttribute('bind-prop:disable') || null;

package/www/dist/frontend/config/IobrokerWebuiScreenEditor.js

@@ -154,9 +154,14 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
                 }
             }
             catch (err) {
-                console.warn("applyBindings()", err);
+                console.warn("applyBindings() properties", err);
+            }
+            try {
+                this._webuiBindings = window.appShell.bindingsHelper.applyAllBindings(this.documentContainer.designerView.designerCanvas.rootDesignItem.element.shadowRoot, this.relativeBindingsPrefix, this.documentContainer.designerView.designerCanvas.rootDesignItem.element);
+            }
+            catch (err) {
+                console.warn("applyBindings() bindings", err);
             }
-            this._webuiBindings = window.appShell.bindingsHelper.applyAllBindings(this.documentContainer.designerView.designerCanvas.rootDesignItem.element.shadowRoot, this.relativeBindingsPrefix, this.documentContainer.designerView.designerCanvas.rootDesignItem.element);
         }
     }
     removeBindings() {
@@ -613,8 +618,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
         ctx.fillStyle = '#868e96';
         ctx.fillText('Custom Control', 100, 135);
         
-        // Convert canvas to blob
-        console.log('🎨 [Thumbnail] Rendered fallback thumbnail with name:', displayName);
         return new Promise((resolve) => {
             thumbnailCanvas.toBlob(resolve, 'image/png', 0.95);
         });
@@ -645,35 +648,22 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
         this._settingsChanged = window.appShell.settingsEditor.propertyChanged.on(() => {
             this.handlePropertyChanges();
         });
-        
-        // Trigger visibility panel update when selection changes
-        try {
-            const canvas = this.documentContainer.designerView.designerCanvas;
-            if (canvas && canvas.selectionChangedEvent) {
-                canvas.selectionChangedEvent.on(() => {
-                    if (window.appShell._updateVisibilityPanel) {
-                        window.appShell._updateVisibilityPanel();
-                        console.log('🎯 [Visibility] Selection changed event fired!');
-                    }
-                });
-            } else {
-                console.warn('⚠️ [Visibility] Selection event not available on canvas');
-            }
-        } catch (err) {
-            console.error('❌ [Visibility] Error setting up selection listener:', err);
-        }
     }
+    _controlDefaultWidth = '800px';
+    _controlDefaultHeight = '600px';
     setWidth(w) {
-        this.documentContainer.designerView.designerWidth = w ?? '100%';
+        const def = this._type === 'control' ? this._controlDefaultWidth : '100%';
+        this.documentContainer.designerView.designerWidth = w ?? def;
     }
     setHeight(h) {
-        this.documentContainer.designerView.designerHeight = h ?? '100%';
+        const def = this._type === 'control' ? this._controlDefaultHeight : '100%';
+        this.documentContainer.designerView.designerHeight = h ?? def;
     }
     handlePropertyChanges() {
-        this.documentContainer.designerView.designerWidth = this._settings.width ?? '';
-        this.documentContainer.designerView.designerHeight = this._settings.height ?? '';
-        
-        console.log('📝 [Screen Editor] Settings changed:', this._settings);
+        const defW = this._type === 'control' ? this._controlDefaultWidth : '100%';
+        const defH = this._type === 'control' ? this._controlDefaultHeight : '100%';
+        this.documentContainer.designerView.designerWidth = this._settings.width ?? defW;
+        this.documentContainer.designerView.designerHeight = this._settings.height ?? defH;
     }
     dispose() {
         this.removeBindings();