From 6d54263aaeaf06359cad11f18f17fd52f2e3d61f Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 1 Jul 2024 17:06:07 +0300
Subject: [PATCH] UI: Optimize cross pipe render function.

---
 .../src/main/data/json/system/scada_symbols/cross-pipe.svg      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/src/main/data/json/system/scada_symbols/cross-pipe.svg b/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
index 9bf06c17f9..71f63a9de7 100644
--- a/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
@@ -8,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var horizontalLiquidPattern = ctx.svg.defs().findOne('pattern#horizontal-liquid');\nvar horizontalFluidElements = ctx.tags['horizontal-fluid'];\n\nif (horizontalLiquidPattern) {\n    horizontalLiquidPattern.id(ctx.api.generateElementId());\n    for (var i=0;i<horizontalFluidElements.length;i++) {\n        horizontalFluidElements[i].fill(horizontalLiquidPattern);\n    }\n} else {\n    horizontalLiquidPattern = horizontalFluidElements[0].reference('fill');\n}\n\nvar verticalLiquidPattern = ctx.svg.defs().findOne('pattern#vertical-liquid');\nvar verticalFluidElements = ctx.tags['vertical-fluid'];\n\nif (verticalLiquidPattern) {\n    verticalLiquidPattern.id(ctx.api.generateElementId());\n    for (var i=0;i<verticalFluidElements.length;i++) {\n        verticalFluidElements[i].fill(verticalLiquidPattern);\n    }\n} else {\n    verticalLiquidPattern = verticalFluidElements[0].reference('fill');\n}\n\nif (horizontalLiquidPattern) {\n    var fluid = ctx.values.horizontalFluid && !ctx.values.leak;\n    var flow = ctx.values.horizontalFlow;\n    var flowDirection = ctx.values.horizontalFlowDirection;\n    var flowAnimationSpeed = ctx.values.horizontalFlowAnimationSpeed;\n    \n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed);\n}\n\nif (verticalLiquidPattern) {\n    var fluid = ctx.values.verticalFluid && !ctx.values.leak;\n    var flow = ctx.values.verticalFlow;\n    var flowDirection = ctx.values.verticalFlowDirection;\n    var flowAnimationSpeed = ctx.values.verticalFlowAnimationSpeed;\n    \n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed);\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
+  "stateRenderFunction": "var horizontalLiquidPattern = prepareLiquidPattern('horizontal-liquid', 'horizontal-fluid');\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-liquid', 'vertical-fluid');\n\nif (horizontalLiquidPattern) {\n    var fluid = ctx.values.horizontalFluid && !ctx.values.leak;\n    var flow = ctx.values.horizontalFlow;\n    var flowDirection = ctx.values.horizontalFlowDirection;\n    var flowAnimationSpeed = ctx.values.horizontalFlowAnimationSpeed;\n    \n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed);\n}\n\nif (verticalLiquidPattern) {\n    var fluid = ctx.values.verticalFluid && !ctx.values.leak;\n    var flow = ctx.values.verticalFlow;\n    var flowDirection = ctx.values.verticalFlowDirection;\n    var flowAnimationSpeed = ctx.values.verticalFlowAnimationSpeed;\n    \n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed);\n}\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
   "tags": [
     {
       "tag": "horizontal-fluid",