iobroker.mywebui 1.38.3 → 1.38.5

package/io-package.json

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

package/package.json

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

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

@@ -58,6 +58,13 @@ function svgShapeToPathData(el) {
         const h = parseFloat(el.getAttribute('height') || 0);
         return `M ${x},${y} H ${x+w} V ${y+h} H ${x} Z`;
     }
+    if (tag === 'line') {
+        const x1 = el.getAttribute('x1') || 0;
+        const y1 = el.getAttribute('y1') || 0;
+        const x2 = el.getAttribute('x2') || 0;
+        const y2 = el.getAttribute('y2') || 0;
+        return `M ${x1},${y1} L ${x2},${y2}`;
+    }
     if (tag === 'polyline' || tag === 'polygon') {
         const pts = (el.getAttribute('points') || '').trim().split(/[\s,]+/);
         if (pts.length < 2) return null;
@@ -668,9 +675,13 @@ async function _applyEffect(el, cfg) {
                 const gapLen  = parseFloat(cfg.gapLen)  || 20;
                 const flowColor = cfg.color || null;
                 const flowDir = cfg.direction === 'reverse' ? 'reverse' : 'normal';
-                el.style.strokeDasharray = `${dashLen} ${gapLen}`;
-                if (flowColor) el.style.stroke = flowColor;
-                _flowDashAnim = el.animate(
+                // if el is <svg>, animate the inner stroke element
+                const dashTarget = el.tagName.toLowerCase() === 'svg'
+                    ? (el.querySelector('path,line,polyline,polygon,rect,circle,ellipse') || el)
+                    : el;
+                dashTarget.style.strokeDasharray = `${dashLen} ${gapLen}`;
+                if (flowColor) dashTarget.style.stroke = flowColor;
+                _flowDashAnim = dashTarget.animate(
                     [{ strokeDashoffset: dashLen + gapLen }, { strokeDashoffset: 0 }],
                     { duration: dur * 1000, iterations: Infinity, easing: 'linear', direction: flowDir, delay: delay * 1000 }
                 );
@@ -681,8 +692,15 @@ async function _applyEffect(el, cfg) {
                 const shapeType = cfg.shape            || 'triangle';
                 const flowColor = cfg.color            || '#0066ff';
                 const size      = parseFloat(cfg.size) || 8;
-                const svg       = el.ownerSVGElement || el.closest('svg');
+                // if el is <svg>, find the inner stroke element to follow
+                const pathTarget = el.tagName.toLowerCase() === 'svg'
+                    ? (el.querySelector('path,line,polyline,polygon,rect,circle,ellipse') || el)
+                    : el;
+                const svg = pathTarget.ownerSVGElement || pathTarget.closest('svg') || el;
                 if (!svg) break;
+                // Convert line/polyline/circle/rect → <path> so GSAP MotionPath works
+                const { pathEl: motionPathEl, tempEl: tempMotionEl } = ensurePathEl(pathTarget);
+                if (tempMotionEl) _pathFlowEls.push(tempMotionEl);
                 const svgNS = 'http://www.w3.org/2000/svg';
                 const makeShape = () => {
                     let s;
@@ -729,7 +747,7 @@ async function _applyEffect(el, cfg) {
                 for (let i = 0; i < count; i++) {
                     const shape = makeShape();
                     gsap.to(shape, {
-                        motionPath: { path: el, align: el, autoRotate: true, alignOrigin: [0.5, 0.5], start: i / count, end: (i / count) + 1 },
+                        motionPath: { path: motionPathEl, align: motionPathEl, autoRotate: true, alignOrigin: [0.5, 0.5], start: i / count, end: (i / count) + 1 },
                         duration: dur, repeat: -1, ease: 'none', delay: delay
                     });
                 }