iobroker.mywebui 1.42.28 → 1.42.29

package/io-package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.42.28",
+  "version": "1.42.29",
   "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

@@ -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
@@ -253,7 +256,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 ─────────────────────────────────────────────────────────