feat: nested groupids

excalidraw · May 30, 2024 · a346e77 · a346e77
1 parent fa27c7b
commit a346e77
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 17 deletions.
diff --git a/src/converter/types/state.ts b/src/converter/types/state.ts
@@ -17,6 +17,8 @@ export const StateToExcalidrawSkeletonConvertor = new GraphConverter({
     const elements: ExcalidrawElementSkeleton[] = [];
 
     chart.nodes.forEach((node) => {
+      const groupIds = node.groupId?.split(", ");
+
       switch (node.type) {
         case "ellipse":
         case "diamond":
@@ -29,10 +31,27 @@ export const StateToExcalidrawSkeletonConvertor = new GraphConverter({
             });
           }
 
+          if (node.groupId) {
+            Object.assign(element, {
+              label: {
+                ...element.label,
+                groupIds,
+              },
+              groupIds,
+            });
+          }
+
           elements.push(element);
           break;
         case "line":
           const line = transformToExcalidrawLineSkeleton(node);
+
+          if (node.groupId) {
+            Object.assign(line, {
+              groupIds,
+            });
+          }
+
           elements.push(line);
           break;
         case "text":
@@ -67,6 +86,8 @@ export const StateToExcalidrawSkeletonConvertor = new GraphConverter({
         return;
       }
 
+      const groupIds = edge.groupId?.split(", ");
+
       if (endVertex.id?.includes("note") || startVertex.id?.includes("note")) {
         arrow.endArrowhead = null;
         arrow.strokeStyle = "dashed";
@@ -81,7 +102,15 @@ export const StateToExcalidrawSkeletonConvertor = new GraphConverter({
         type: "rectangle",
       };
 
-      elements.push(transformToExcalidrawArrowSkeleton(arrow));
+      const arrowSkeleton = transformToExcalidrawArrowSkeleton(arrow);
+
+      if (groupIds) {
+        Object.assign(arrowSkeleton, {
+          groupIds,
+        });
+      }
+
+      elements.push(arrowSkeleton);
     });
 
     return { elements };

diff --git a/src/parser/state.ts b/src/parser/state.ts
@@ -204,19 +204,6 @@ const getRelationElement = (containerEl: Element, id: string) => {
   return containerEl.querySelector<SVGSVGElement>(`[data-id="${id}"]`)!;
 };
 
-const getDividerId = (id: string): [string, number] => {
-  const matchDomId = id.includes("divider") ? 2 : 1;
-  const [identifier, randomId, count] = id.split("-");
-
-  const dividerCount = Number(count.split("_")[0]) - matchDomId;
-
-  return [`${identifier}-${randomId}-${dividerCount}`, dividerCount];
-};
-
-const getDividerElement = (containerEl: Element, id: string) => {
-  return containerEl.querySelector<SVGSVGElement>(`.clusters > [id*="${id}"]`)!;
-};
-
 const computeSpecialType = (specialType: SpecialState): Partial<Container> => {
   switch (specialType.type) {
     case "choice":
@@ -277,6 +264,11 @@ const createRelationExcalidrawElement = (
       width: relationContainer.width!,
       height: relationContainer.height!,
     });
+
+    relationContainer.groupId = groupId
+      ? `${relationContainer.id}, ${groupId}`
+      : relationContainer.id;
+    innerEllipse.groupId += groupId ? `, ${groupId}` : "";
   }
 
   if (specialTypes[relation.id]) {
@@ -361,6 +353,7 @@ const parseDoc = (
         { label: { text: state.description || state.id } }
       );
 
+      stateElement.groupId += groupId ? `, ${groupId}` : "";
       processedNodeRelations.add(state.id);
       nodes.push(stateElement);
       return;
@@ -380,6 +373,8 @@ const parseDoc = (
         specialTypes,
         groupId
       );
+
+      return;
     }
 
     if (isConcurrencyState(state)) {
@@ -398,7 +393,9 @@ const parseDoc = (
         }
       );
 
+      groupId = `${dividerNode.id}${groupId ? `, ${groupId}` : ""}`;
       dividerElement.bgColor = "#e9ecef";
+      dividerElement.groupId = groupId;
 
       nodes.push(dividerElement);
 
@@ -408,8 +405,10 @@ const parseDoc = (
         nodes,
         processedNodeRelations,
         specialTypes,
-        state.id
+        groupId
       );
+
+      groupId = undefined;
       return;
     }
 
@@ -419,6 +418,9 @@ const parseDoc = (
       const { clusterElementSkeleton, topLine } =
         createClusterExcalidrawElement(clusterElement, containerEl, state);
 
+      groupId = `${state.id}${groupId ? `, ${groupId}` : ""}`;
+      clusterElementSkeleton.groupId = groupId;
+      topLine.groupId = groupId;
       nodes.push(clusterElementSkeleton);
       nodes.push(topLine);
 
@@ -428,8 +430,10 @@ const parseDoc = (
         nodes,
         processedNodeRelations,
         specialTypes,
-        state.id
+        groupId
       );
+
+      groupId = undefined;
     }
   });
 
@@ -460,8 +464,13 @@ const parseEdges = (nodes: ParsedDoc[], containerEl: Element): any[] => {
           );
 
           const clusterHasOwnEdges = clusters?.hasAttribute("transform");
+          clusterId = `${node.id}${clusterId ? `, ${clusterId}` : ""}`;
+
+          const edges = parse(node.doc, clusterHasOwnEdges, clusterId);
+
+          clusterId = undefined;
 
-          return parse(node.doc, clusterHasOwnEdges, node.id);
+          return edges;
         } else if (node.stmt === "relation") {
           const startId = node.state1.id;
           const endId = node.state2.id;