iobroker.mywebui 1.37.81 → 1.37.83

package/io-package.json

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

package/package.json

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

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

@@ -21,6 +21,7 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
     _webuiBindings;
     _styleBindings;
     _settingsChanged;
+    _designerScriptObject = null;
     async initialize(name, type, html, style, script, settings, properties, serviceContainer) {
         if (name[0] == '/')
             name = name.substring(1);
@@ -102,11 +103,23 @@ 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;
+                    }
+                    // Run the control's script so JS-generated content is visible in the designer
+                    this._applyDesignerScript();
+                });
+            });
+
             this.documentContainer.designerView.designerCanvas.onContentChanged?.on(() => {
                 this.applyBindings();
             });
@@ -182,11 +195,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 +211,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 +234,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 +242,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 +249,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 +261,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 +290,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 +304,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 +379,6 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
                     }
                 }
                 
-                console.log('✅ [Thumbnail] Rendered', renderedCount, 'elements');
             }
             
             return new Promise((resolve) => {
@@ -440,8 +425,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 +456,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 +482,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 +519,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);
                 }
@@ -666,6 +645,13 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
         this.documentContainer.designerView.designerHeight = this._settings.height ?? defH;
     }
     dispose() {
+        if (this._designerScriptObject?.disconnectedCallback) {
+            try {
+                const rootEl = this.documentContainer.designerView.designerCanvas.rootDesignItem?.element;
+                this._designerScriptObject.disconnectedCallback(rootEl, rootEl?.shadowRoot);
+            } catch (err) {}
+        }
+        this._designerScriptObject = null;
         this.removeBindings();
         this.documentContainer.dispose();
         this._configChangedListener?.dispose();
@@ -675,5 +661,25 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
         window.appShell.styleEditor.model = null;
         window.appShell.javascriptEditor.model = null;
     }
+    async _applyDesignerScript() {
+        if (this._type !== 'control') return;
+        const scriptCode = this.scriptModel.getValue();
+        if (!scriptCode?.trim()) return;
+        const canvas = this.documentContainer.designerView.designerCanvas;
+        const rootEl = canvas.rootDesignItem?.element;
+        const shadowRoot = rootEl?.shadowRoot;
+        if (!rootEl || !shadowRoot) return;
+        try {
+            const url = URL.createObjectURL(new Blob([scriptCode], { type: 'application/javascript' }));
+            let scriptObj = await import(url);
+            if (scriptObj?.default && !scriptObj?.connectedCallback)
+                scriptObj = scriptObj.default;
+            this._designerScriptObject = scriptObj;
+            if (scriptObj?.connectedCallback)
+                scriptObj.connectedCallback(rootEl, shadowRoot);
+        } catch (err) {
+            console.warn('Designer script execution failed:', err);
+        }
+    }
 }
 customElements.define("iobroker-webui-screen-editor", IobrokerWebuiScreenEditor);

package/www/dist/frontend/runtime/ScreenViewer.js

@@ -318,27 +318,13 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
         else
             this._iobBindings = res;
         this._scriptObject = await window.appShell.scriptSystem.assignAllScripts('screenviewer - ' + this.screenName, script, this._rootShadow, this, iobrokerHandler);
-        
-        console.log('📜 [ScreenViewer] Script object for "' + this.screenName + '":', this._scriptObject);
-        console.log('📜 [ScreenViewer] Object type:', Object.prototype.toString.call(this._scriptObject));
-        console.log('📜 [ScreenViewer] Has default?', this._scriptObject?.default);
-        console.log('📜 [ScreenViewer] Has connectedCallback?', typeof this._scriptObject?.connectedCallback);
-        console.log('📜 [ScreenViewer] Has default.connectedCallback?', typeof this._scriptObject?.default?.connectedCallback);
-        
-        // If module with default export, use it
-        if (this._scriptObject?.default && !this._scriptObject?.connectedCallback) {
-            console.log('🔄 [ScreenViewer] Using default export for "' + this.screenName + '"');
+        if (this._scriptObject?.default && !this._scriptObject?.connectedCallback)
             this._scriptObject = this._scriptObject.default;
-        }
-        
-        // Call connectedCallback after script is loaded
         if (this._scriptObject?.connectedCallback) {
-            console.log('✅ [ScreenViewer] Calling connectedCallback after script load for "' + this.screenName + '"');
             try {
                 this._scriptObject.connectedCallback(this, this._rootShadow);
-                console.log('✅ [ScreenViewer] connectedCallback executed successfully for "' + this.screenName + '"');
             } catch (err) {
-                console.error('❌ [ScreenViewer] Error in connectedCallback for "' + this.screenName + '":', err);
+                console.error('connectedCallback error for "' + this.screenName + '":', err);
             }
         }