feat: support horizontal or vertical layout

statebacked · Aug 31, 2023 · bc945c6 · bc945c6
1 parent 7886894
commit bc945c6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/src/components/flow-graph/index.tsx b/src/components/flow-graph/index.tsx
@@ -53,6 +53,7 @@ type Action =
 export type FlowGraphProps = {
   flow: DrawableFlow;
   selectedItems?: Array<FlowItemIdentifier>;
+  direction?: "horizontal" | "vertical";
   editable?: {
     getAvailableStates: () => Array<{ id: schema.StateId; name: string }>;
     onUpdateTransitionTarget: (
@@ -125,6 +126,7 @@ export const FlowGraph = ({
   selectedItems: providedSelectedItems,
   editable,
   header,
+  direction = "vertical",
   renderButtons,
 }: FlowGraphProps) => {
   const selectedItems = providedSelectedItems ?? emptySelectedItems;
@@ -202,7 +204,12 @@ export const FlowGraph = ({
       }
 
       const thisLayoutId = nextLayoutId();
-      const graph = flowToElkGraph(sizeMap.current!, rootId, fullFlow);
+      const graph = flowToElkGraph(
+        sizeMap.current!,
+        rootId,
+        fullFlow,
+        direction
+      );
       const elk = getElk();
       elk.layout(graph).then((layout) => {
         dispatch({

diff --git a/src/transformers/elk.ts b/src/transformers/elk.ts
@@ -16,26 +16,26 @@ export type EnrichedElkNode = ElkNode & {
   children?: EnrichedElkNode[];
 };
 
-const rootNodeLayoutOptions = {
+const rootNodeLayoutOptions = (direction: "horizontal" | "vertical") => ({
   "elk.hierarchyHandling": "INCLUDE_CHILDREN",
   "elk.algorithm": "layered",
   "elk.layered.considerModelOrder": "NODES_AND_EDGES",
   "elk.layered.wrapping.strategy": "MULTI_EDGE",
-  "elk.aspectRatio": "0.5",
-  "elk.direction": "DOWN",
+  "elk.aspectRatio": direction === "vertical" ? "0.5" : "2",
+  "elk.direction": direction === "vertical" ? "DOWN" : "RIGHT",
   "elk.layered.spacing.baseValue": "25",
   //"elk.layered.compaction.postCompaction.strategy": "TOP", // TODO: this may fail
-};
+});
 
-const nodeLayoutOptions = {
+const nodeLayoutOptions = (direction: "horizontal" | "vertical") => ({
   "elk.alignment": "CENTER",
-  "elk.aspectRatio": "0.5",
-  "elk.direction": "DOWN",
+  "elk.aspectRatio": direction === "vertical" ? "0.5" : "2",
+  "elk.direction": direction === "vertical" ? "DOWN" : "RIGHT",
   "elk.layered.edgeRouting.selfLoopOrdering": "SEQUENCED",
   "elk.layered.edgeRouting.selfLoopDistribution": "EQUALLY",
   "elk.layered.spacing.baseValue": "25",
   //"elk.layered.compaction.postCompaction.strategy": "TOP", // TODO: this may fail
-};
+});
 
 export type PositionedItemId = string & { _BRAND: "positionedItem" };
 
@@ -168,15 +168,18 @@ export type Size = {
 export function flowToElkGraph(
   sizeMap: Map<PositionedItemId, Size>,
   rootId: schema.StateId,
-  flow: DrawableFlowWithTopLevelState
+  flow: DrawableFlowWithTopLevelState,
+  direction: "horizontal" | "vertical"
 ): EnrichedElkNode {
   const edgeIdsByTarget = getEdgeIdsByTarget(flow.states);
   const node = _flowToElkGraph(
     sizeMap,
     rootId,
     edgeIdsByTarget,
     flow.states,
-    rootId
+    rootId,
+    rootNodeLayoutOptions(direction),
+    nodeLayoutOptions(direction)
   )[0];
   return node;
 }
@@ -230,7 +233,9 @@ export function _flowToElkGraph(
   rootId: schema.StateId,
   edgeIdsByTarget: EdgeIdsByTarget,
   states: DrawableFlow["states"],
-  stateId: schema.StateId
+  stateId: schema.StateId,
+  rootNodeLayoutOptions: Record<string, string>,
+  nodeLayoutOptions: Record<string, string>
 ): [EnrichedElkNode, Set<string>] {
   const childNodes = Object.entries(states)
     .filter(([_stateId, state]) => state!.parent === stateId)
@@ -318,7 +323,9 @@ export function _flowToElkGraph(
         rootId,
         edgeIdsByTarget,
         states,
-        stateId
+        stateId,
+        rootNodeLayoutOptions,
+        nodeLayoutOptions
       );
 
       descendants = union(descendants, nodes);