iobroker.mywebui 1.42.19 → 1.42.20

package/io-package.json

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

package/package.json

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

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

@@ -1712,6 +1712,46 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         // ── Interaction binding ──
         const nodeKey = (node?.userData?.assetData === asset || !node?.name) ? '__root__' : (node?.name || nodeName);
         const inter = asset?.interactions?.[nodeKey];
+
+        // ── Events ──
+        const nodeEvents = asset?.events?.[nodeKey] ?? {};
+        const nodeEventEntries = Object.entries(nodeEvents);
+        const presetEvents = [
+            { key: 'click',           label: '🖱️ click' },
+            { key: 'mouseenter',      label: '↗️ mouseenter' },
+            { key: 'mouseleave',      label: '↙️ mouseleave' },
+            { key: 'animationEnd',    label: '🎬 animationEnd (any clip)' },
+            ...( (asset?.availableClips ?? []).map(c => ({ key: `animationEnd:${c}`, label: `🎬 animationEnd:${c}` })) ),
+            ...( (asset?.drives ?? []).flatMap((_, i) => [
+                { key: `driveAtMax:${i}`, label: `⬆️ driveAtMax:${i}` },
+                { key: `driveAtMin:${i}`, label: `⬇️ driveAtMin:${i}` },
+            ]) ),
+        ].filter(p => !nodeEvents[p.key]);
+        const presetOptsHtml = presetEvents.map(p => `<option value="${p.key}">${p.label}</option>`).join('');
+        const eventsHtml = nodeEventEntries.length > 0
+            ? nodeEventEntries.map(([evtKey, script]) => `
+                <div class="evt-row" style="background:#1a1a2e;border:1px solid #2a2a4a;border-radius:3px;padding:5px;margin-bottom:4px;">
+                    <div style="display:flex;align-items:center;gap:4px;margin-bottom:3px;">
+                        <span style="color:#dcdcaa;font-size:10px;flex:1;font-family:monospace;">${evtKey}</span>
+                        <button class="evt-del-btn tb-btn" data-evtkey="${evtKey}" style="padding:0px 5px;font-size:9px;background:#5a1a1a;color:#f44747;border-color:#8a2a2a;">✕</button>
+                    </div>
+                    <textarea class="evt-script" data-evtkey="${evtKey}" rows="3"
+                        style="width:100%;box-sizing:border-box;background:#0d0d1a;border:1px solid #3c3c5c;color:#d4d4d4;font-family:'Consolas',monospace;font-size:10px;padding:4px;resize:vertical;line-height:1.4;"
+                        spellcheck="false"
+                        placeholder="// context: node, assetData, THREE, scene, camera&#10;// setState(signal, val), getState(signal), subscribe(signal, cb)&#10;// assets Map, mixers Map, driveEngine"
+                    >${this._escHtml(script)}</textarea>
+                </div>`).join('')
+            : `<div style="color:#555;font-size:10px;font-style:italic;padding:4px 0;">No events configured</div>`;
+        const eventsAddHtml = presetEvents.length > 0
+            ? `<div style="display:flex;gap:4px;margin-top:4px;">
+                <select class="evt-preset-sel" style="flex:1;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:2px 4px;border-radius:3px;font-size:10px;">
+                    <option value="">— select event type —</option>
+                    ${presetOptsHtml}
+                    <option value="__custom__">Custom event name...</option>
+                </select>
+                <button class="evt-add-btn tb-btn" style="padding:1px 10px;font-size:10px;">+ Add</button>
+              </div>`
+            : `<div style="color:#555;font-size:9px;margin-top:4px;">All event types configured</div>`;
         const interHtml = inter
             ? `<div style="background:#1a2a1a;border:1px solid #2a4a2a;border-radius:3px;padding:6px;font-size:10px;">
                 <div>Signal: <span style="color:#9cdcfe;">${inter.signal}</span></div>
@@ -1771,6 +1811,19 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                     <div class="pg-header">🖱️ Interaction (onClick) <button class="inter-add-btn tb-btn" style="padding:1px 8px;font-size:9px;">+ Set</button></div>
                     ${interHtml}
                 </div>
+                <div class="pg-group">
+                    <div class="pg-header">⚡ Events
+                        <span style="color:#555;font-size:9px;font-weight:normal;">node: ${nodeKey}</span>
+                    </div>
+                    ${eventsHtml}
+                    ${eventsAddHtml}
+                    <div style="color:#555;font-size:9px;margin-top:6px;line-height:1.5;">
+                        Script context:<br>
+                        <code style="color:#888;">node, assetData, THREE, scene</code><br>
+                        <code style="color:#888;">setState(sig,val) · getState(sig)</code><br>
+                        <code style="color:#888;">assets(Map) · mixers · driveEngine</code>
+                    </div>
+                </div>
             </div>
         `;
 
@@ -1856,92 +1909,8 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             }
         });
 
-        // Show events in native Events dock
-        this._show3DEventsInDock(node, asset, nodeKey, onChange);
-    }
-
-    _escHtml(str) {
-        return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-    }
-
-    _show3DEventsInDock(node, asset, nodeKey, onChange) {
-        const dock = this._getDomElement('eventsDock');
-        if (!dock) return;
-
-        // Get or create the 3D events overlay container
-        let d3 = dock.querySelector('#_3dEventsOverlay');
-        if (!d3) {
-            d3 = document.createElement('div');
-            d3.id = '_3dEventsOverlay';
-            d3.style.cssText = 'width:100%;height:100%;overflow:auto;box-sizing:border-box;background:#1e1e1e;color:#ccc;font-family:"Segoe UI",sans-serif;font-size:12px;';
-            dock.insertBefore(d3, dock.firstChild);
-        }
-        d3.style.display = 'block';
-
-        // Hide native event assignment
-        const nativeEvt = this._getDomElement('eventsList');
-        if (nativeEvt) nativeEvt.style.display = 'none';
-
-        // Build events HTML
-        const nodeEvents = asset?.events?.[nodeKey] ?? {};
-        const nodeEventEntries = Object.entries(nodeEvents);
-        const presetEvents = [
-            { key: 'click',        label: '🖱️ click' },
-            { key: 'mouseenter',   label: '↗️ mouseenter' },
-            { key: 'mouseleave',   label: '↙️ mouseleave' },
-            { key: 'animationEnd', label: '🎬 animationEnd' },
-            ...((asset?.availableClips ?? []).map(c => ({ key: `animationEnd:${c}`, label: `🎬 animationEnd:${c}` }))),
-            ...((asset?.drives ?? []).flatMap((_, i) => [
-                { key: `driveAtMax:${i}`, label: `⬆️ driveAtMax:${i}` },
-                { key: `driveAtMin:${i}`, label: `⬇️ driveAtMin:${i}` }
-            ])),
-        ].filter(p => !nodeEvents[p.key]);
-
-        const evtRowsHtml = nodeEventEntries.length > 0
-            ? nodeEventEntries.map(([evtKey, script]) => `
-                <div style="background:#1a1a2e;border:1px solid #2a2a4a;border-radius:3px;padding:5px;margin-bottom:6px;">
-                    <div style="display:flex;align-items:center;gap:4px;margin-bottom:3px;">
-                        <span style="color:#dcdcaa;font-size:11px;flex:1;font-family:monospace;">${evtKey}</span>
-                        <button class="evt-del-btn" data-evtkey="${evtKey}" style="padding:1px 6px;font-size:10px;background:#5a1a1a;color:#f44747;border:1px solid #8a2a2a;border-radius:3px;cursor:pointer;">✕</button>
-                    </div>
-                    <textarea class="evt-script" data-evtkey="${evtKey}" rows="4"
-                        style="width:100%;box-sizing:border-box;background:#0d0d1a;border:1px solid #3c3c5c;color:#d4d4d4;font-family:'Consolas',monospace;font-size:11px;padding:4px;resize:vertical;line-height:1.4;border-radius:2px;"
-                        spellcheck="false"
-                        placeholder="// context: node, assetData, THREE, scene&#10;// setState(sig,val)  getState(sig)&#10;// assets(Map)  mixers  driveEngine"
-                    >${this._escHtml(script)}</textarea>
-                </div>`).join('')
-            : `<div style="color:#555;font-size:11px;font-style:italic;padding:8px 0;">No events configured</div>`;
-
-        const presetOptsHtml = presetEvents.map(p => `<option value="${p.key}">${p.label}</option>`).join('');
-        const addRowHtml = presetEvents.length > 0
-            ? `<div style="display:flex;gap:4px;margin-top:6px;">
-                <select class="evt-preset-sel" style="flex:1;background:#3c3c3c;border:1px solid #555;color:#ccc;padding:3px 4px;border-radius:3px;font-size:11px;">
-                    <option value="">— select event type —</option>
-                    ${presetOptsHtml}
-                    <option value="__custom__">Custom event name...</option>
-                </select>
-                <button class="evt-add-btn" style="padding:2px 12px;background:#3c3c3c;color:#ccc;border:1px solid #555;border-radius:3px;cursor:pointer;font-size:11px;">+ Add</button>
-               </div>`
-            : `<div style="color:#555;font-size:10px;margin-top:6px;">All standard events configured</div>`;
-
-        d3.innerHTML = `
-            <div style="padding:6px 8px;border-bottom:1px solid #3c3c3c;background:#252526;display:flex;align-items:center;gap:6px;">
-                <span style="color:#dcdcaa;font-size:11px;font-weight:bold;">⚡ 3D Events</span>
-                <span style="color:#555;font-size:10px;">node: ${nodeKey}</span>
-            </div>
-            <div style="padding:8px;">
-                ${evtRowsHtml}
-                ${addRowHtml}
-                <div style="color:#555;font-size:10px;margin-top:8px;line-height:1.6;">
-                    Context: <code style="color:#888;">node, assetData, THREE, scene</code><br>
-                    <code style="color:#888;">setState(sig,val) · getState(sig)</code><br>
-                    <code style="color:#888;">assets(Map) · mixers · driveEngine</code>
-                </div>
-            </div>
-        `;
-
-        // Wire textarea auto-save
-        d3.querySelectorAll('.evt-script').forEach(ta => {
+        // ── Events wiring ──
+        p.querySelectorAll('.evt-script').forEach(ta => {
             ta.addEventListener('blur', () => {
                 const evtKey = ta.dataset.evtkey;
                 if (!asset.events) asset.events = {};
@@ -1950,23 +1919,19 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 if (onChange) onChange(asset);
             });
         });
-
-        // Wire delete buttons
-        d3.querySelectorAll('.evt-del-btn').forEach(btn => {
+        p.querySelectorAll('.evt-del-btn').forEach(btn => {
             btn.addEventListener('click', () => {
                 const evtKey = btn.dataset.evtkey;
                 if (asset?.events?.[nodeKey]) {
                     delete asset.events[nodeKey][evtKey];
                     if (Object.keys(asset.events[nodeKey]).length === 0) delete asset.events[nodeKey];
                     if (onChange) onChange(asset);
-                    this._show3DEventsInDock(node, asset, nodeKey, onChange);
+                    this.show3DNodeProperties(node, asset, mixerInfo, onChange);
                 }
             });
         });
-
-        // Wire add button
-        d3.querySelector('.evt-add-btn')?.addEventListener('click', () => {
-            const sel = d3.querySelector('.evt-preset-sel');
+        p.querySelector('.evt-add-btn')?.addEventListener('click', () => {
+            const sel = p.querySelector('.evt-preset-sel');
             let evtKey = sel?.value;
             if (!evtKey) return;
             if (evtKey === '__custom__') {
@@ -1977,22 +1942,15 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             if (!asset.events[nodeKey]) asset.events[nodeKey] = {};
             if (!asset.events[nodeKey][evtKey]) asset.events[nodeKey][evtKey] = '// event: ' + evtKey + '\n';
             if (onChange) onChange(asset);
-            this._show3DEventsInDock(node, asset, nodeKey, onChange);
+            this.show3DNodeProperties(node, asset, mixerInfo, onChange);
         });
-
-        // Activate the events dock panel
-        this.activateDockById('eventsDock');
     }
 
-    _restore3DEventsDock() {
-        const dock = this._getDomElement('eventsDock');
-        if (!dock) return;
-        const d3 = dock.querySelector('#_3dEventsOverlay');
-        if (d3) d3.style.display = 'none';
-        const nativeEvt = this._getDomElement('eventsList');
-        if (nativeEvt) nativeEvt.style.display = '';
+    _escHtml(str) {
+        return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
     }
 
+
     _showAddDriveDialog(obj, onChange) {
         // Build a modal dialog for drive configuration
         const overlay = document.createElement('div');