iobroker.mywebui 1.37.80 → 1.37.82

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.37.78",
+    "version": "1.37.82",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",

package/package.json

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

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

@@ -102,11 +102,21 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             this.applyBindings();
             this.setWidth(this._settings.width);
             this.setHeight(this._settings.height);
-            this.documentContainer.designerView.zoomToFit();
-            
-            // Visibility configs are stored as HTML attributes (data-visibility-*)
-            // They are automatically loaded with HTML
-            
+
+            // Defer zoomToFit until after layout settles (rAF x2 ensures paint cycle completes).
+            // Without this, getBoundingClientRect().height may be 0 → zoomFactor=0 → invisible canvas.
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    const cvRect = this.documentContainer.designerView.designerCanvas.getBoundingClientRect();
+                    if (cvRect.height > 0) {
+                        this.documentContainer.designerView.zoomToFit();
+                    } else {
+                        // Layout not ready yet — keep zoomFactor=1 so canvas stays visible
+                        this.documentContainer.designerView.designerCanvas.zoomFactor = 1;
+                    }
+                });
+            });
+
             this.documentContainer.designerView.designerCanvas.onContentChanged?.on(() => {
                 this.applyBindings();
             });
@@ -182,11 +192,8 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
                 try {
                     if (window.appShell.controlpropertiesEditor.getProperties) {
                         prp = window.appShell.controlpropertiesEditor.getProperties();
-                        console.log('✅ [Save] Got properties from editor:', prp);
                     } else {
-                        // Fallback: direct access to propertiesObj
                         prp = window.appShell.controlpropertiesEditor.propertiesObj;
-                        console.log('ℹ️ [Save] Got properties via propertiesObj:', prp);
                     }
                     
                     // Update local copy
@@ -201,7 +208,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             // Final fallback
             if (!prp || Object.keys(prp).length === 0) {
                 prp = this.properties || null;
-                console.log('ℹ️ [Save] Using fallback this.properties:', prp);
             }
             
             // Visibility configs are now stored as HTML attributes (data-visibility-*)
@@ -225,7 +231,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
                     const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
                     
                     this._settings._visibilityHash = hashHex;
-                    console.log('🔐 [Security] Generated visibility settings hash');
                 }
                 
                 let screen = { html, style, script, settings: this._settings, properties: prp };
@@ -234,8 +239,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             else {
                 let control = { html, style, script, settings: this._settings, properties: prp };
                 await iobrokerHandler.saveObject(this._type, this._name, control);
-                // Generate and save thumbnail for custom controls
-                console.log('💾 [Thumbnail] Saving custom control, generating thumbnail for:', this._name);
                 await this._generateAndSaveThumbnail();
             }
         }
@@ -243,13 +246,10 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             this.documentContainer.executeCommand(command);
     }
     async _generateAndSaveThumbnail() {
-        console.log('🎨 [Thumbnail] Starting thumbnail generation...');
         try {
             const canvas = this.documentContainer.designerView.designerCanvas;
             const rootElement = canvas.rootDesignItem?.element;
-            console.log('📐 [Thumbnail] Canvas and root element:', { canvas, rootElement });
             if (!rootElement) {
-                console.warn('❌ [Thumbnail] No root element found, skipping thumbnail generation');
                 return;
             }
             
@@ -258,31 +258,20 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             // Method 1: Try to capture using getComputedStyle and manual rendering
             try {
                 blob = await this._captureElementManually(rootElement);
-                if (blob) {
-                    console.log('✅ [Thumbnail] Manual capture successful');
-                }
             }
             catch (err) {
-                console.warn('⚠️ [Thumbnail] Manual capture failed:', err);
+                // manual capture failed, use placeholder
             }
-            
-            // Method 2: Fallback to placeholder
+
             if (!blob) {
-                console.log('🎨 [Thumbnail] Using placeholder thumbnail');
                 blob = await this._renderToCanvas(rootElement);
             }
-            // Save thumbnail
             if (blob) {
-                console.log('✅ [Thumbnail] Thumbnail blob created, size:', blob.size, 'bytes');
                 await iobrokerHandler.saveThumbnail(this._name, blob);
-                console.log('💾 [Thumbnail] Thumbnail saved successfully for:', this._name);
-            }
-            else {
-                console.warn('❌ [Thumbnail] Failed to create thumbnail blob');
             }
         }
         catch (err) {
-            console.error('❌ [Thumbnail] Error generating thumbnail:', err);
+            console.error('Thumbnail generation failed:', err);
         }
     }
     async _captureElementManually(rootElement) {
@@ -298,8 +287,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             if (width < 50) width = 200;
             if (height < 50) height = 150;
             
-            console.log('📏 [Thumbnail] Element dimensions:', { width, height });
-            
             // Create canvas
             const canvas = document.createElement('canvas');
             const scale = Math.min(200 / width, 150 / height, 1);
@@ -314,11 +301,7 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             // Try to render the shadow DOM content
             const shadowRoot = rootElement.shadowRoot;
             if (shadowRoot) {
-                console.log('🔍 [Thumbnail] Shadow root found, rendering children...');
-                
-                // Get all visible elements
                 const allElements = shadowRoot.querySelectorAll('*');
-                console.log('📦 [Thumbnail] Shadow DOM elements count:', allElements.length);
                 
                 let renderedCount = 0;
                 for (const element of allElements) {
@@ -393,7 +376,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
                     }
                 }
                 
-                console.log('✅ [Thumbnail] Rendered', renderedCount, 'elements');
             }
             
             return new Promise((resolve) => {
@@ -440,8 +422,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             if (width < 50) width = 200;
             if (height < 50) height = 150;
             
-            console.log('📏 [Thumbnail] Capture dimensions:', { width, height });
-            
             // Create canvas
             const canvas = document.createElement('canvas');
             const scale = Math.min(200 / width, 150 / height, 1);
@@ -473,8 +453,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
                         .map(style => style.textContent)
                         .join('\n');
                     
-                    console.log('📦 [Thumbnail] Content HTML length:', content.length, 'Styles length:', styles.length);
-                    
                     if (content) {
                         const svgData = `
                             <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
@@ -501,7 +479,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             
             // If SVG method failed, return simple canvas
             if (!blob) {
-                console.log('🎨 [Thumbnail] Using fallback rendering');
                 blob = await new Promise(resolve => {
                     canvas.toBlob(resolve, 'image/png', 0.95);
                 });
@@ -539,7 +516,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
                     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                     canvas.toBlob((blob) => {
                         URL.revokeObjectURL(url);
-                        console.log('✅ [Thumbnail] SVG rendered successfully');
                         resolve(blob);
                     }, 'image/png', 0.95);
                 }
@@ -649,15 +625,21 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
             this.handlePropertyChanges();
         });
     }
+    _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 ?? '100%';
-        this.documentContainer.designerView.designerHeight = this._settings.height ?? '100%';
+        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();