iobroker.mywebui 1.37.96 → 1.37.97

package/io-package.json

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

package/package.json

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

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

@@ -32,6 +32,62 @@ function findElementAcrossShadows(fromElement, id) {
 // AnimationService.js is at dist/frontend/runtime/ → ../../vendor/gsap/ = dist/vendor/gsap/
 const _gsapBase = new URL('../../vendor/gsap/', import.meta.url).href;
 
+/**
+ * Convert circle/ellipse/rect/polyline/polygon to SVG path data string.
+ * GSAP MotionPathPlugin only accepts <path> elements — other SVG shapes must be converted.
+ */
+function svgShapeToPathData(el) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'circle') {
+        const cx = parseFloat(el.getAttribute('cx') || 0);
+        const cy = parseFloat(el.getAttribute('cy') || 0);
+        const r  = parseFloat(el.getAttribute('r')  || 0);
+        return `M ${cx-r},${cy} A ${r},${r} 0 1,1 ${cx+r},${cy} A ${r},${r} 0 1,1 ${cx-r},${cy} Z`;
+    }
+    if (tag === 'ellipse') {
+        const cx = parseFloat(el.getAttribute('cx') || 0);
+        const cy = parseFloat(el.getAttribute('cy') || 0);
+        const rx = parseFloat(el.getAttribute('rx') || 0);
+        const ry = parseFloat(el.getAttribute('ry') || 0);
+        return `M ${cx-rx},${cy} A ${rx},${ry} 0 1,1 ${cx+rx},${cy} A ${rx},${ry} 0 1,1 ${cx-rx},${cy} Z`;
+    }
+    if (tag === 'rect') {
+        const x = parseFloat(el.getAttribute('x') || 0);
+        const y = parseFloat(el.getAttribute('y') || 0);
+        const w = parseFloat(el.getAttribute('width')  || 0);
+        const h = parseFloat(el.getAttribute('height') || 0);
+        return `M ${x},${y} H ${x+w} V ${y+h} H ${x} Z`;
+    }
+    if (tag === 'polyline' || tag === 'polygon') {
+        const pts = (el.getAttribute('points') || '').trim().split(/[\s,]+/);
+        if (pts.length < 2) return null;
+        let d = `M ${pts[0]},${pts[1]}`;
+        for (let i = 2; i + 1 < pts.length; i += 2) d += ` L ${pts[i]},${pts[i+1]}`;
+        if (tag === 'polygon') d += ' Z';
+        return d;
+    }
+    return null;
+}
+
+/**
+ * Ensure we have a real SVG <path> element for GSAP MotionPathPlugin.
+ * If el is already a <path>, returns it directly.
+ * Otherwise converts the shape to path data and creates a temporary hidden <path>
+ * inside the same <svg>. Caller must store _tempPathEl and remove it on destroy.
+ */
+function ensurePathEl(el) {
+    if (el.tagName.toLowerCase() === 'path') return { pathEl: el, tempEl: null };
+    const d = svgShapeToPathData(el);
+    if (!d) return { pathEl: el, tempEl: null };
+    const svgParent = el.closest('svg') ?? el.parentElement;
+    const tmp = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    tmp.setAttribute('d', d);
+    tmp.setAttribute('fill', 'none');
+    tmp.style.cssText = 'visibility:hidden;pointer-events:none;';
+    svgParent.appendChild(tmp);
+    return { pathEl: tmp, tempEl: tmp };
+}
+
 async function ensureGSAP() {
     if (window.gsap) return window.gsap;
     if (_gsapLoadPromise) return _gsapLoadPromise;
@@ -440,12 +496,15 @@ class AnimationInstance {
         const effect = this.cfg.effect;
 
         if (effect === 'motionPath' && this.cfg.pathId) {
-            let pathEl = findElementAcrossShadows(this.element, this.cfg.pathId);
-            if (!pathEl) { console.warn('[AnimationService] motionPath: path element not found:', this.cfg.pathId); return; }
-            // If ID is on <svg> container, use the first SVG shape inside it
-            // GSAP MotionPathPlugin supports path, circle, ellipse, rect, polyline, polygon
-            if (pathEl.tagName.toLowerCase() === 'svg')
-                pathEl = pathEl.querySelector('path, circle, ellipse, rect, polyline, polygon') ?? pathEl;
+            let found = findElementAcrossShadows(this.element, this.cfg.pathId);
+            if (!found) { console.warn('[AnimationService] motionPath: path element not found:', this.cfg.pathId); return; }
+            // If ID is on <svg> container, use the first shape inside it
+            if (found.tagName.toLowerCase() === 'svg')
+                found = found.querySelector('path, circle, ellipse, rect, polyline, polygon') ?? found;
+            // GSAP MotionPathPlugin only accepts <path> — convert other shapes to a hidden <path>
+            if (this._tempPathEl) { this._tempPathEl.remove(); this._tempPathEl = null; }
+            const { pathEl, tempEl } = ensurePathEl(found);
+            this._tempPathEl = tempEl;
             this.tween = gsap.to(this.element, {
                 duration: parseFloat(this.cfg.duration) || 1,
                 ease: this.cfg.ease || 'none',
@@ -480,6 +539,7 @@ class AnimationInstance {
 
     destroy() {
         if (this.tween) { this.tween.kill(); this.tween = null; }
+        if (this._tempPathEl) { this._tempPathEl.remove(); this._tempPathEl = null; }
         _cleanupSubs(this._subs);
     }
 }