Merge pull request #5 from chengcyber/feat-change-direction

Feat change direction

.changeset/cold-badgers-develop.md

@@ -0,0 +1,5 @@
+---
+"pnpm-workspace-graph": minor
+---
+
+Support change direction: Top to Bottom or Left to Right

README.md

@@ -66,6 +66,18 @@ Visualize project relationships in your [PNPM](https://pnpm.io/) workspace
    <p align="center"><i>An example graph made by cloning the <a href="https://github.com/pnpm/pnpm">https://github.com/pnpm/pnpm</a> workspace</i></p>
 
 
+## Features
+
+1. Layout the graph with different directions: Top to Bottom or Left to Right.
+
+Top to Bottom              |  Left to Right
+:-------------------------:|:-------------------------:
+<kbd><img src="assets/direction-tb.png" /></kbd>  | <kbd><img src="assets/direction-lr.png" /></kbd>
+
+2. Save the graph to PNG for later use.
+
+<kbd><img src="assets/save-graph.png" /></kbd>
+
 ## CLI parameters
 
 ```shell

client/ControlPanel.tsx

@@ -9,6 +9,8 @@ import {
   Toolbar,
 } from "@fluentui/react-components";
 import {
+  ArrowDown20Regular,
+  ArrowRight20Filled,
   ChevronLeft20Regular,
   ChevronRight20Regular,
   DataFunnel20Regular,
@@ -21,7 +23,7 @@ import { FieldValues, FormProvider, useForm } from "react-hook-form";
 import { saveAs } from "file-saver";
 import { ControlledTextFieldArray } from "./ControlledFormComponent/ControlledTextFieldArray";
 import { GraphService } from "./service/Graph";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const gs = GraphService.getInstance();
 
@@ -37,6 +39,28 @@ export const ControlPanel = () => {
   const [isExpandActions, { toggle: toggleExpandActions }] = useBoolean(true);
   const [isExportingImage, setIsExportImage] = useState(false);
 
+  const [direction, setDirection] = useState<'TB' | 'LR'>(gs.getLayoutConfig().rankDir || 'TB');
+  let directionIcon = null; 
+  if (direction === 'TB') {
+    directionIcon = <ArrowDown20Regular />
+  } else if (direction === 'LR') {
+    directionIcon = <ArrowRight20Filled />
+  }
+  const directionText: string = direction === 'LR' ? 'Left to Right' : 'Top to Bottom'
+  const toggleDirection = () => {
+    if (direction === 'TB') {
+      setDirection('LR')
+      gs.setLayoutConfig({
+        rankDir: 'LR',
+      })
+    } else {
+      setDirection('TB')
+      gs.setLayoutConfig({
+        rankDir: 'TB',
+      })
+    }
+  }
+
   const onSave = () => {
     console.log("on save");
     setIsExportImage(true);
@@ -121,6 +145,14 @@ export const ControlPanel = () => {
           >
             {isExpandActions ? "Filter" : ""}
           </Button>
+          <Button
+            appearance="subtle"
+            icon={directionIcon}
+            title="Direction"
+            onClick={toggleDirection}
+          >
+            {isExpandActions ? directionText : ''}
+          </Button>
           <Button
             appearance="subtle"
             icon={

client/service/Graph.ts

@@ -1,5 +1,5 @@
 import cy from "cytoscape";
-import dagre from "cytoscape-dagre";
+import dagre, { DagreLayoutOptions } from "cytoscape-dagre";
 import { cyGraphStyle } from "../style/graph";
 import { ViewerData } from "../types";
 import { BridgeService } from "./Bridge";
@@ -114,6 +114,18 @@ class GraphService {
     );
   };
 
+  public setLayoutConfig(config: Partial<CytoscapeDagreConfig>): void {
+    this._dagreLayoutConfig = {
+      ...this._dagreLayoutConfig,
+      ...config,
+    }
+    this.showAllProjects();
+  }
+
+  public getLayoutConfig(): Partial<CytoscapeDagreConfig> {
+    return this._dagreLayoutConfig;
+  }
+
   public exportToPNG(): Promise<Blob> | undefined {
     if (this._fgGraph) {
       return this._fgGraph.png({