iobroker.mywebui 1.42.8 → 1.42.10

package/io-package.json

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

package/package.json

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

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

@@ -323,22 +323,34 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         this.raycaster.setFromCamera(this.mouse, this.camera);
         const intersects = this.raycaster.intersectObjects(this.scene.children, true);
 
+        // Find the closest asset root (not just first match)
+        let closestAsset = null;
+        let closestDistance = Infinity;
+
         for (const intersection of intersects) {
-            const obj = intersection.object;
-            if (obj.userData.assetData) {
-                this.selectObject(obj);
-                return;
+            let obj = intersection.object;
+
+            // Skip grid, axes, lights
+            if (obj.userData.isGrid || obj.userData.isAxes || obj.userData.lightId) {
+                continue;
             }
-            // Try parent objects
-            let parent = obj.parent;
-            while (parent && parent !== this.scene) {
-                if (parent.userData.assetData) {
-                    this.selectObject(parent);
-                    return;
+
+            // Find root asset containing this mesh
+            while (obj && obj !== this.scene) {
+                if (obj.userData.assetData) {
+                    if (intersection.distance < closestDistance) {
+                        closestAsset = obj;
+                        closestDistance = intersection.distance;
+                    }
+                    break;
                 }
-                parent = parent.parent;
+                obj = obj.parent;
             }
         }
+
+        if (closestAsset) {
+            this.selectObject(closestAsset);
+        }
     }
 
     selectObject(obj) {
@@ -347,26 +359,33 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         // Deselect previous (remove highlight)
         if (this.selectedObject) {
             this.selectedObject.userData.selected = false;
-            // Restore original material
+            // Restore original materials
             this.selectedObject.traverse((child) => {
-                if (child.material && child.userData.originalMaterial) {
+                if (child.isMesh && child.userData.originalMaterial) {
                     child.material = child.userData.originalMaterial;
+                    delete child.userData.originalMaterial;
                 }
             });
         }
 
-        // Select new (add yellow highlight)
+        // Select new (add subtle highlight)
         this.selectedObject = obj;
         obj.userData.selected = true;
 
-        // Apply subtle highlight (outline glow, not full color change)
+        // Apply very subtle highlight - only emissive, preserve all other properties
         obj.traverse((child) => {
-            if (child.isMesh && child.material) {
-                child.userData.originalMaterial = child.material;
-                // Clone original material and add slight emission
+            if (child.isMesh && child.material && !Array.isArray(child.material)) {
+                // Store original if not already stored
+                if (!child.userData.originalMaterial) {
+                    child.userData.originalMaterial = child.material;
+                }
+
+                // Clone and apply subtle glow
                 const hlMat = child.material.clone();
-                hlMat.emissive.setHex(0xffff00);
-                hlMat.emissiveIntensity = 0.15; // Subtle glow
+                if (hlMat.emissive) {
+                    hlMat.emissive.setHex(0xffff00);
+                    hlMat.emissiveIntensity = 0.1; // Even more subtle
+                }
                 child.material = hlMat;
             }
         });
@@ -838,22 +857,34 @@ export class IobrokerWebui3DScreenEditor extends BaseCustomWebComponentConstruct
         const assetsListContent = this._getDomElement('assetsListContent');
 
         if (!this.sceneData.assets || this.sceneData.assets.length === 0) {
-            assetsListContent.innerHTML = '<div style="color:#888;">No assets loaded</div>';
+            assetsListContent.innerHTML = '<div style="color:#888;padding:20px;text-align:center;font-size:12px;">📦 No assets<br><br>Click "+ Model" to add</div>';
             return;
         }
 
-        let html = '';
+        let html = '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">';
         for (const asset of this.sceneData.assets) {
             html += `
-                <div style="padding:8px;background:#242424;margin-bottom:5px;border-radius:3px;cursor:pointer;border:1px solid #333;">
-                    <div style="color:#0f0;font-weight:bold;">${asset.name}</div>
-                    <div style="color:#888;font-size:11px;margin-top:3px;">
-                        Type: ${asset.type}<br>
-                        Pos: (${asset.position.x.toFixed(1)}, ${asset.position.y.toFixed(1)}, ${asset.position.z.toFixed(1)})
-                    </div>
+                <div style="
+                    padding:12px;
+                    background:linear-gradient(135deg, #2a2a2a 0%, #242424 100%);
+                    border:1px solid #333;
+                    border-radius:6px;
+                    cursor:pointer;
+                    display:flex;
+                    flex-direction:column;
+                    align-items:center;
+                    text-align:center;
+                    font-size:11px;
+                "
+                onmouseover="this.style.borderColor='#0f0'"
+                onmouseout="this.style.borderColor='#333'">
+                    <div style="font-size:28px;margin-bottom:6px;">📦</div>
+                    <div style="color:#0f0;font-weight:bold;margin-bottom:3px;word-break:break-word;max-width:100%;">${asset.name.substring(0, 25)}</div>
+                    <div style="color:#888;font-size:10px;">${asset.type}</div>
                 </div>
             `;
         }
+        html += '</div>';
         assetsListContent.innerHTML = html;
     }