GSAP lib and animated lines (#2189)

MaxTheGeeek · web-flow · commit 248c8fc467e8 · 2025-02-20T13:38:11.000+01:00
* ADD: gsap lib and line animation

* ADD: svg line component

* ADD: connection configs

* FIX: format

* FIX: lint
diff --git a/launcher/package.json b/launcher/package.json
@@ -46,6 +46,7 @@
     "evilscan": "^1.9.1",
     "file-saver": "^2.0.5",
     "geoip-lite": "^1.4.7",
+    "gsap": "^3.12.7",
     "jszip": "^3.10.1",
     "leader-line-new": "^1.1.9",
     "lodash": "^4.17.21",
diff --git a/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue b/launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue
@@ -83,8 +83,8 @@ const emit = defineEmits([
   "confirmConsensus",
   "infoModal",
   "modifyService",
-  "removeLines",
   "lineDraw",
+  "removeLines",
 ]);
 
 const manageStore = useNodeManage();
@@ -116,12 +116,12 @@ onMounted(() => {
 
 // Methods
 
-const removeLines = () => {
-  emit("removeLines");
+const lineDraw = (item) => {
+  emit("lineDraw", item);
 };
 
-const lineDraw = (service) => {
-  emit("lineDraw", service);
+const removeLines = () => {
+  emit("removeLines");
 };
 
 const onDrop = (event) => {
diff --git a/launcher/src/components/UI/edit-page/components/edit/EditBody.vue b/launcher/src/components/UI/edit-page/components/edit/EditBody.vue
@@ -10,9 +10,25 @@
       @confirm-consensus="confirmConsensus"
       @info-modal="infoModal"
       @modify-service="modifyService"
+      @line-draw="lineDrawHandler"
       @remove-lines="removeConnectionLines"
     />
     <SetupBody v-else @delete-setup="deleteSetup" @connect-setup="connectSetup" @setup-infos="setupInfos" @open-configs="openConfigs" />
+    <ConnectionLine
+      v-for="connection in activeConnections"
+      :key="connection.id"
+      :start="{
+        element: connection.start.element,
+        position: connection.start.position,
+      }"
+      :end="{
+        element: connection.end.element,
+        position: connection.end.position,
+      }"
+      color="#DBEF6A"
+      :animated="true"
+      :dashed="true"
+    />
   </div>
 </template>
 
@@ -24,8 +40,10 @@ import SetupBody from "./SetupBody.vue";
 import ControlService from "@/store/ControlService";
 import { useNodeManage } from "@/store/nodeManage";
 import { useSetups } from "@/store/setups";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import { useMultiSetups } from "../../../../../composables/multiSetups";
+import ConnectionLine from "../../../../layers/ConnectionLine.vue";
+import { useConnectionLines } from "@/composables/useConnectionLines";
 
 const { getSelectedSetup } = useMultiSetups();
 
@@ -37,19 +55,17 @@ const emit = defineEmits([
   "confirmConsensus",
   "infoModal",
   "modifyService",
-
   "openConfigs",
   "deleteSetup",
 ]);
 
 //Pinia stores
 const manageStore = useNodeManage();
 const setupStore = useSetups();
-
+const { activeConnections, lineDrawHandler, removeConnectionLines } = useConnectionLines();
 // refs
 
 const isOverDropZone = ref(false);
-// const isLineDrawHandlerReady = ref(false);
 
 // computed & watchers properties
 // eslint-disable-next-line no-unused-vars
@@ -63,25 +79,8 @@ const displayDropZone = computed(() => {
   return dropClass;
 });
 
-watch(
-  () => manageStore.isLineHidden,
-  (newValue) => {
-    if (newValue) {
-      removeConnectionLines();
-    }
-  }
-);
-
 // methods
 
-const removeConnectionLines = () => {
-  // Remove all existing connections
-  manageStore.lines.forEach((line) => {
-    line.remove();
-  });
-  manageStore.lines = [];
-};
-
 const onDrop = (event) => {
   isOverDropZone.value = false;
   manageStore.isLineHidden = true;
diff --git a/launcher/src/components/UI/node-page/NodeScreen.vue b/launcher/src/components/UI/node-page/NodeScreen.vue
@@ -54,7 +54,6 @@ import { useNodeStore } from "@/store/theNode";
 import { saveAs } from "file-saver";
 import JSZip from "jszip";
 import { onMounted, onUnmounted, ref, watchEffect } from "vue";
-import { useRouter } from "vue-router";
 import { useRefreshNodeStats } from "../../../composables/monitoring";
 import { useMultiSetups } from "../../../composables/multiSetups";
 import { useListKeys } from "../../../composables/validators";
@@ -71,7 +70,7 @@ const nodeStore = useNodeStore();
 const headerStore = useNodeHeader();
 const serviceStore = useServices();
 const controlStore = useControlStore();
-const router = useRouter();
+
 const footerStore = useFooter();
 const setupStore = useSetups();
 const { updateDom } = useMultiSetups();
@@ -89,15 +88,6 @@ let pollingPings = null;
 //*****************  Watchers *****************
 
 //Computed & Watchers
-// TODO: maybe add watchSSV from service.js here?
-
-watchEffect(() => {
-  if (router.currentRoute.value.path !== "/node") {
-    nodeStore.isLineHidden = true;
-  } else {
-    nodeStore.isLineHidden = false;
-  }
-});
 
 watchEffect(() => {
   if (headerStore.openModalFromNodeAlert) {
diff --git a/launcher/src/components/UI/node-page/components/node/NodeBody.vue b/launcher/src/components/UI/node-page/components/node/NodeBody.vue
@@ -12,6 +12,21 @@
     />
     <SetupBody v-if="!setupStore.isConfigViewActive" @open-setup="openSetup" @export-setup="exportSetup" />
     <PluginLogs v-if="isPluginLogPageActive" :item="itemToLogs" @close-log="closePluginLogsPage" />
+    <ConnectionLine
+      v-for="connection in activeConnections"
+      :key="connection.id"
+      :start="{
+        element: connection.start.element,
+        position: connection.start.position,
+      }"
+      :end="{
+        element: connection.end.element,
+        position: connection.end.position,
+      }"
+      color="#DBEF6A"
+      :animated="true"
+      :dashed="true"
+    />
   </div>
 </template>
 
@@ -25,21 +40,22 @@ import { useNodeStore } from "@/store/theNode";
 import { useServices } from "@/store/services";
 import ControlService from "@/store/ControlService";
 
-import LeaderLine from "leader-line-new";
 import { useSetups } from "@/store/setups";
+import ConnectionLine from "../../../../layers/ConnectionLine.vue";
+import { useConnectionLines } from "@/composables/useConnectionLines";
 
 const emit = defineEmits(["openExpert", "openLog", "setupState", "exportSetup"]);
 
 // Refs
 const isPluginLogPageActive = ref(false);
 const itemToLogs = ref({});
 const loadingClients = ref(false);
-const isLineDrawHandlerReady = ref(false);
 
 // Store and router
 const setupStore = useSetups();
 const nodeStore = useNodeStore();
 const serviceStore = useServices();
+const { activeConnections, lineDrawHandler, removeConnectionLines } = useConnectionLines();
 
 watchEffect(() => {
   if (nodeStore.skeletonLoading || serviceStore.installedServices.length === 0) {
@@ -49,129 +65,10 @@ watchEffect(() => {
   }
 });
 
-watchEffect(() => {
-  if (nodeStore.isLineHidden) {
-    removeConnectionLines();
-  }
-});
-
 //Lifecycle
 
 // Methods
 
-const oneWayConnection = (start, end, startSocket, endSocket) => {
-  if (start && end) {
-    let newLine = new LeaderLine(start, end, { dash: { animation: true } }, { hide: true });
-    newLine.position();
-    newLine.setOptions({
-      size: 2,
-      color: "#DBEF6A",
-      endPlug: "behind",
-      startSocket: startSocket ? startSocket : "right",
-      endSocket: endSocket ? endSocket : "left",
-    });
-    nodeStore.lines.push(newLine);
-  }
-};
-
-const lineDrawHandler = (item) => {
-  let start;
-  let end;
-  if (item && !item.displayPluginMenu) {
-    switch (item.category) {
-      case "execution": {
-        const dependencies = serviceStore.installedServices.filter(
-          (s) =>
-            s.config?.dependencies?.executionClients?.length > 0 &&
-            s.config?.dependencies?.executionClients.some((d) => d.id === item.config?.serviceID)
-        );
-        dependencies.forEach((d) => {
-          if (d.category === "consensus") {
-            start = d.ref;
-            end = item.ref;
-            if (start && end) {
-              oneWayConnection(end, start);
-            }
-          }
-        });
-        break;
-      }
-      case "consensus": {
-        const dependencies = serviceStore.installedServices.filter(
-          (s) =>
-            (s.config?.dependencies?.consensusClients?.length > 0 &&
-              s.config?.dependencies?.consensusClients.some((d) => d.id === item.config?.serviceID)) ||
-            item.config?.dependencies?.executionClients.some((d) => d.id === s.config?.serviceID)
-        );
-        dependencies.forEach((d) => {
-          if (d.category === "validator") {
-            start = d.ref;
-            end = item.ref;
-            if (start && end) {
-              oneWayConnection(end, start);
-            }
-          }
-          if (d.category === "execution") {
-            start = d.ref;
-            end = item.ref;
-            if (start && end) {
-              oneWayConnection(start, end);
-            }
-          }
-        });
-        break;
-      }
-      case "validator": {
-        const dependencies = serviceStore.installedServices.filter(
-          (s) =>
-            item.config?.dependencies?.executionClients.some((d) => d.id === s.config?.serviceID) ||
-            item.config?.dependencies?.consensusClients.some((d) => d.id === s.config?.serviceID) ||
-            s.config?.dependencies?.consensusClients.some((d) => d.id === item.config?.serviceID)
-        );
-        dependencies.forEach((d) => {
-          if (d.category === "validator") {
-            start = d.ref;
-            end = item.ref;
-            if (start && end) {
-              if (item.service === "CharonService") {
-                oneWayConnection(end, start, "left", "left");
-              } else {
-                oneWayConnection(start, end, "left", "left");
-              }
-            }
-          }
-          if (d.category === "execution") {
-            start = d.ref;
-            end = item.ref;
-            if (start && end) {
-              oneWayConnection(start, end);
-            }
-          }
-          if (d.category === "consensus") {
-            start = d.ref;
-            end = item.ref;
-            if (start && end) {
-              oneWayConnection(start, end);
-            }
-          }
-        });
-        break;
-      }
-    }
-  } else if (item && item.displayPluginMenu) {
-    removeConnectionLines();
-  }
-  isLineDrawHandlerReady.value = true;
-};
-
-const removeConnectionLines = () => {
-  // Remove all existing connections
-  nodeStore.lines.forEach((line) => {
-    line.remove();
-  });
-  nodeStore.lines = [];
-};
-
 const openLog = (item) => {
   emit("openLog", item);
 };
diff --git a/launcher/src/components/layers/ConnectionLine.vue b/launcher/src/components/layers/ConnectionLine.vue
diff --git a/launcher/src/composables/useConnectionLines.js b/launcher/src/composables/useConnectionLines.js
