iobroker.mywebui 1.42.28 → 1.42.30

package/io-package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.28",
+  "version": "1.42.30",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413 with 3D Editor",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/3d-editor/js/Toolbar.js

@@ -1,5 +1,7 @@
 import { UIPanel, UIButton } from './libs/ui.js';
 
+const _IMAGES_BASE = new URL( '../images/', import.meta.url ).href;
+
 function Toolbar( editor ) {
 
 	const signals = editor.signals;
@@ -12,7 +14,7 @@ function Toolbar( editor ) {
 
 	const translateIcon = document.createElement( 'img' );
 	translateIcon.title = strings.getKey( 'toolbar/translate' );
-	translateIcon.src = 'images/translate.svg';
+	translateIcon.src = _IMAGES_BASE + 'translate.svg';
 
 	const translate = new UIButton();
 	translate.dom.className = 'Button selected';
@@ -26,7 +28,7 @@ function Toolbar( editor ) {
 
 	const rotateIcon = document.createElement( 'img' );
 	rotateIcon.title = strings.getKey( 'toolbar/rotate' );
-	rotateIcon.src = 'images/rotate.svg';
+	rotateIcon.src = _IMAGES_BASE + 'rotate.svg';
 
 	const rotate = new UIButton();
 	rotate.dom.appendChild( rotateIcon );
@@ -39,7 +41,7 @@ function Toolbar( editor ) {
 
 	const scaleIcon = document.createElement( 'img' );
 	scaleIcon.title = strings.getKey( 'toolbar/scale' );
-	scaleIcon.src = 'images/scale.svg';
+	scaleIcon.src = _IMAGES_BASE + 'scale.svg';
 
 	const scale = new UIButton();
 	scale.dom.appendChild( scaleIcon );

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

@@ -20,8 +20,8 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
             <!-- three.js editor mount point
                  position:relative  → contains position:absolute children (viewport, sidebar, etc.)
-                 transform:translateZ(0) → also contains position:fixed children (menubar dropdowns) -->
-            <div id="editorContainer" style="flex:1;position:relative;overflow:hidden;min-height:0;transform:translateZ(0);"></div>
+                 overflow:visible   → allow position:fixed dropdowns to escape clip boundary -->
+            <div id="editorContainer" style="flex:1;position:relative;overflow:hidden;min-height:0;"></div>
 
             <!-- Bottom Monaco panel for iobroker scene script -->
             <div id="scriptPanel" style="height:0;flex-shrink:0;border-top:2px solid #3c3c3c;display:flex;flex-direction:column;overflow:hidden;background:#1e1e1e;transition:height 0.15s;">
@@ -112,12 +112,15 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
 
     async _initThreeEditor(sceneName, sceneType) {
         // Load three.js editor CSS into document head once
-        if (!document.getElementById('three-editor-css')) {
+        // Load three.js editor CSS into the shadow root (NOT document.head —
+        // shadow DOM does not inherit styles from the outer document).
+        const shadowRoot = this.shadowRoot;
+        if (shadowRoot && !shadowRoot.querySelector('#three-editor-css')) {
             const link = document.createElement('link');
             link.id   = 'three-editor-css';
             link.rel  = 'stylesheet';
             link.href = EDITOR_BASE + 'css/main.css';
-            document.head.appendChild(link);
+            shadowRoot.appendChild(link);
         }
 
         // signals.min.js uses UMD: if AMD define() is present it registers as AMD
@@ -126,6 +129,15 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         await this._loadScript(EDITOR_BASE + 'js/libs/signals.min.js', true);
         await this._loadScript(EDITOR_BASE + 'js/libs/jsonlint.js');
 
+        // Also load editor CSS into document.head so dialogs appended to document.body are styled
+        if (!document.getElementById('three-editor-css-global')) {
+            const gLink = document.createElement('link');
+            gLink.id  = 'three-editor-css-global';
+            gLink.rel = 'stylesheet';
+            gLink.href = EDITOR_BASE + 'css/main.css';
+            document.head.appendChild(gLink);
+        }
+
         // Dynamically import all editor modules (they use the importmap for 'three')
         const [
             THREE,
@@ -141,6 +153,7 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             { Animation },
             { AnimationResizer },
             { SetScriptValueCommand },
+            { GLTFImportDialog },
         ] = await Promise.all([
             import('three'),
             import('three/addons/geometries/TextGeometry.js'),
@@ -155,8 +168,12 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
             import(/* @vite-ignore */ EDITOR_BASE + 'js/Animation.js'),
             import(/* @vite-ignore */ EDITOR_BASE + 'js/AnimationResizer.js'),
             import(/* @vite-ignore */ EDITOR_BASE + 'js/commands/SetScriptValueCommand.js'),
+            import(/* @vite-ignore */ EDITOR_BASE + 'js/GLTFImportDialog.js'),
         ]);
 
+        // Auto-accept the GLB/GLTF import dialog (shadow DOM hides it from CSS, so skip UI)
+        GLTFImportDialog.prototype.show = () => Promise.resolve({ asScene: false });
+
         window.THREE = THREE;
         try { THREE.ObjectLoader.registerGeometry('TextGeometry', TextGeometry); } catch (_) {}
 
@@ -253,7 +270,12 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this._resizeObserver = new ResizeObserver(() => editor.signals.windowResize.dispatch());
         this._resizeObserver.observe(container);
 
-        editor.signals.windowResize.dispatch();
+        // Dispatch resize after layout is complete (container may have 0 size on first tick)
+        requestAnimationFrame(() => {
+            editor.signals.windowResize.dispatch();
+            // Second dispatch in case WebGL canvas needs re-init
+            requestAnimationFrame(() => editor.signals.windowResize.dispatch());
+        });
     }
 
     // ── Script panel ─────────────────────────────────────────────────────────