From fc965a439db38dcb19f2ee6df36c4a51bf301bed Mon Sep 17 00:00:00 2001 From: Cheng Liu Date: Thu, 4 Jul 2024 11:51:12 -0700 Subject: [PATCH 1/3] :sparkles: support to change direction --- client/ControlPanel.tsx | 34 +++++++++++++++++++++++++++++++++- client/service/Graph.ts | 14 +++++++++++++- 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/client/ControlPanel.tsx b/client/ControlPanel.tsx index 4b97312..1a504d5 100644 --- a/client/ControlPanel.tsx +++ b/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 = + } else if (direction === 'LR') { + directionIcon = + } + 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" : ""} +