Remove function checkGroupOfDot, coz already have function isDot. Imp…

…rove function getDegSigns, getSlaveProDots. Fix function getSlaveSkillDots.
antonsrc · Feb 25, 2024 · 060e2cd · 060e2cd
1 parent f34b30c
commit 060e2cd
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 34 deletions.
diff --git a/main.js b/main.js
@@ -130,13 +130,11 @@ window.addEventListener('load', () => {
     mainSVG.addEventListener('click', e => {
         let dot = e.target;
         if(!isDot(dot)) return;
-        let {dotType} = getDotParams(dot);
 
-        if(checkGroupOfDot(dot)) {
-            removePreviousEvents(elementsForRemoving);
-            unselectAll();
-        } else return;
-
+        removePreviousEvents(elementsForRemoving);
+        unselectAll();
+
+        let {dotType} = getDotParams(dot);
         dot.setAttribute("class", `dot${dotType}_selected`);
         changeTextArea(dot);
         addRing(dot, 17);
@@ -279,7 +277,7 @@ function getAllSkill(data) {
 }
 
 function getLength(x1, y1, x2, y2) {
-    return Math.sqrt(Math.pow((x2-x1), 2) + Math.pow((y2-y1), 2));
+    return Math.sqrt((x2-x1)**2 + (y2-y1)**2);
 }
 
 function nearestSlaveDots(dot, amount) {
@@ -303,22 +301,20 @@ function nearestSlaveDots(dot, amount) {
     return slaveGroupsNearest;
 }
 
-function getArrWithDegSign(arrCoord, x0, y0, x1, y1) {
-    let arrDegSign = [];
-    for (let i = 0; i < arrCoord.length; i++) {
+function getDegSigns(coords, x0, y0, x1, y1) {
+    return coords.map((coord, i) => {
         let a1 = x1[i] - x0;
-        let b1 = arrCoord[i][0] - x0;
+        let b1 = coord[0] - x0;
         let a2 = y1[i] - y0;
-        let b2 = arrCoord[i][1] - y0;
+        let b2 = coord[1] - y0;
         let ab1 = (a1/b1).toFixed(2);
         let ab2 = (a2/b2).toFixed(2);
         if (ab1 == ab2) {
-            arrDegSign.push(1);
+            return 1;
         } else {
-            arrDegSign.push(-1);
+            return -1;
         }
-    }
-    return arrDegSign;
+    });
 }
 
 function removePreviousEvents(arr) {
@@ -333,14 +329,9 @@ function unselectAll() {
     });
 }
 
-function checkGroupOfDot(dot) {
-    let dotGroupClass = dot.parentNode.getAttribute("class");
-    return (dotGroupClass == "gPro" || dotGroupClass == "gSkill") ? true : false;
-}
-
 function getSlaveProDots(dot) {
     let arr = [];
-    let text = document.querySelector(`#${dot.parentNode.id} div`).textContent;
+    let {text} = getDotParams(dot);
     INPUT_DATA.forEach(item => {
         if (item['mainSkill'].includes(text)) {
             arr.push(item.name);
@@ -352,6 +343,18 @@ function getSlaveProDots(dot) {
     return arr;
 }
 
+function getSlaveSkillDots(dot) {
+    let arr = [];
+    let {text} = getDotParams(dot);
+    let pro = INPUT_DATA.filter(obj => obj.name == text)[0];
+    if (pro.hasOwnProperty('otherSkill')) {
+        arr = pro['mainSkill'].concat(pro['otherSkill']);
+    } else {
+        arr = pro['mainSkill'];
+    }
+    return arr;
+}
+
 function getRectCoord(text) {
     let dx = 8;
     let dy = 8;
@@ -364,16 +367,6 @@ function getRectCoord(text) {
     return [xRect, yRect, width, height];
 }
 
-function getSlaveSkillDots(dot) {
-    let arr = [];
-    let text = document.querySelector(`#${dot.parentNode.id} div`).textContent;
-    let pro = INPUT_DATA.filter(obj => obj.name == text)[0];
-    if (pro.hasOwnProperty('otherSkill')) {
-        arr = pro['mainSkill'].concat(pro['otherSkill']);
-    }
-    return arr;
-}
-
 function removeDuplicateKeys(obj1, obj2) {
     let obj1Filtered = structuredClone(obj1);
     let obj2Filtered = structuredClone(obj2);
@@ -479,7 +472,7 @@ function getPathParams(dot, x1, y1, namesSlaves) {
 
     // Через уравнение прямой проходящ через 2 точки 
     // проверим лежат ли координаты точек coords на прямых
-    let arrDegSign = getArrWithDegSign(coords, dotX, dotY, x1, y1);
+    let arrDegSign = getDegSigns(coords, dotX, dotY, x1, y1);
 
     // Опрделеим класс (цвет) кривой
     let arrPathClass = [];

diff --git a/style.css b/style.css
@@ -67,7 +67,7 @@ svg div{
 
 .otherSkillPath {
     stroke: #8F59B9;
-    animation: dash 1.5s linear forwards;
+    animation: dash2 1.5s linear forwards;
 }
 
 .textSkill {
@@ -118,6 +118,12 @@ svg div{
     }
 }
 
+@keyframes dash2 {
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
 @keyframes smoother {
     from {
         opacity: 0.5;