iobroker.mywebui 1.38.4 → 1.38.6

package/io-package.json

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

package/package.json

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

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

@@ -1267,6 +1267,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             const pathFlowCountInp = inp(cfg.count ?? 5, 'number');
             const pathFlowSizeInp  = inp(cfg.size ?? 8, 'number');
             const pathFlowColorInp = inp(cfg.color || '#0066ff', 'color');
+            const pathFlowDirSel   = sel([['normal','Forward'],['reverse','Reverse']], cfg.direction || 'normal');
 
             body.appendChild(field('Type', 'type', typeSel));
             body.appendChild(field('Trigger', null, triggerSel));
@@ -1332,6 +1333,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             pathFlowSection.appendChild(field('Count', 'count', pathFlowCountInp));
             pathFlowSection.appendChild(field('Size', 'size', pathFlowSizeInp));
             pathFlowSection.appendChild(field('Color', 'color', pathFlowColorInp));
+            pathFlowSection.appendChild(field('Direction', 'direction', pathFlowDirSel));
             body.appendChild(pathFlowSection);
             typeSel.addEventListener('change', () => { pathFlowSection.style.display = typeSel.value === 'pathFlow' ? '' : 'none'; });
 
@@ -1349,7 +1351,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 if (typeSel.value === 'blur') out.blurAmount = parseInt(blurInp.value) || 5;
                 if (typeSel.value === 'pulseRing') { out.scale = parseFloat(pulseScaleInp.value) || 2.5; out.opacityFrom = parseFloat(pulseOpacityInp.value) ?? 1; }
                 if (typeSel.value === 'flowDash') { out.dashLen = parseFloat(flowDashLenInp.value) || 10; out.gapLen = parseFloat(flowGapLenInp.value) || 20; out.color = flowColorInp.value; out.direction = flowDirSel.value; }
-                if (typeSel.value === 'pathFlow') { out.shape = pathFlowShapeSel.value; out.count = parseInt(pathFlowCountInp.value) || 5; out.size = parseFloat(pathFlowSizeInp.value) || 8; out.color = pathFlowColorInp.value; }
+                if (typeSel.value === 'pathFlow') { out.shape = pathFlowShapeSel.value; out.count = parseInt(pathFlowCountInp.value) || 5; out.size = parseFloat(pathFlowSizeInp.value) || 8; out.color = pathFlowColorInp.value; out.direction = pathFlowDirSel.value; }
                 for (const [k, v] of Object.entries(cfg)) { if (k.endsWith('_bind') && v) out[k] = v; }
                 return out;
             };

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

@@ -675,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 }
                 );
@@ -688,10 +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');
+                const isReverse = cfg.direction === 'reverse';
+                // 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(el);
+                const { pathEl: motionPathEl, tempEl: tempMotionEl } = ensurePathEl(pathTarget);
                 if (tempMotionEl) _pathFlowEls.push(tempMotionEl);
                 const svgNS = 'http://www.w3.org/2000/svg';
                 const makeShape = () => {
@@ -738,8 +747,10 @@ async function _applyEffect(el, cfg) {
                 };
                 for (let i = 0; i < count; i++) {
                     const shape = makeShape();
+                    const startPos = isReverse ? (1 - i / count) : (i / count);
+                    const endPos   = isReverse ? (-(i / count))  : (i / count + 1);
                     gsap.to(shape, {
-                        motionPath: { path: motionPathEl, align: motionPathEl, 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: startPos, end: endPos },
                         duration: dur, repeat: -1, ease: 'none', delay: delay
                     });
                 }