From 2a50000ec8e0cade9968e03c8acb14420d1052af Mon Sep 17 00:00:00 2001 From: Ryan Di Date: Fri, 16 May 2025 16:38:58 +1000 Subject: [PATCH] feat: add toggle to use elbow --- packages/element/src/elbowArrow.ts | 2 ++ .../TTDDialog/MermaidToExcalidraw.scss | 14 ++++++++ .../TTDDialog/MermaidToExcalidraw.tsx | 31 ++++++++++++++-- .../components/TTDDialog/TTDDialog.scss | 5 +++ .../components/TTDDialog/TTDDialogPanel.tsx | 36 +++++++++++-------- .../excalidraw/components/TTDDialog/common.ts | 3 ++ packages/excalidraw/data/transform.ts | 3 +- .../MermaidToExcalidraw.test.tsx.snap | 2 +- 8 files changed, 77 insertions(+), 19 deletions(-) diff --git a/packages/element/src/elbowArrow.ts b/packages/element/src/elbowArrow.ts index 73c82a898..50a4d1f3c 100644 --- a/packages/element/src/elbowArrow.ts +++ b/packages/element/src/elbowArrow.ts @@ -22,6 +22,8 @@ import { isDevEnv, } from "@excalidraw/common"; +import { debugDrawBounds } from "@excalidraw/utils/visualdebug"; + import type { AppState } from "@excalidraw/excalidraw/types"; import { diff --git a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.scss b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.scss index 2a9a40bf5..d1930fd80 100644 --- a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.scss +++ b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.scss @@ -6,5 +6,19 @@ font-weight: 700; padding-inline: 2.5rem; } + + &-arrow-type { + display: flex; + flex-direction: row; + align-items: center; + gap: 8; + // height: 2rem; + + svg { + width: 1rem; + height: 1rem; + display: block; + } + } } } diff --git a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx index 8a4f92840..a95a0c708 100644 --- a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx +++ b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx @@ -5,11 +5,13 @@ import { EDITOR_LS_KEYS, debounce, isDevEnv } from "@excalidraw/common"; import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types"; import { useApp } from "../App"; -import { ArrowRightIcon } from "../icons"; +import { ArrowRightIcon, elbowArrowIcon, roundArrowIcon } from "../icons"; import { EditorLocalStorage } from "../../data/EditorLocalStorage"; import { t } from "../../i18n"; import Trans from "../Trans"; +import { RadioGroup } from "../RadioGroup"; + import { TTDDialogInput } from "./TTDDialogInput"; import { TTDDialogOutput } from "./TTDDialogOutput"; import { TTDDialogPanel } from "./TTDDialogPanel"; @@ -43,6 +45,7 @@ const MermaidToExcalidraw = ({ ); const deferredText = useDeferredValue(text.trim()); const [error, setError] = useState(null); + const [arrowType, setArrowType] = useState<"arrow" | "elbow">("arrow"); const canvasRef = useRef(null); const data = useRef<{ @@ -59,6 +62,7 @@ const MermaidToExcalidraw = ({ mermaidToExcalidrawLib, setError, mermaidDefinition: deferredText, + useElbow: arrowType === "elbow", }).catch((err) => { if (isDevEnv()) { console.error("Failed to parse mermaid definition", err); @@ -66,7 +70,7 @@ const MermaidToExcalidraw = ({ }); debouncedSaveMermaidDefinition(deferredText); - }, [deferredText, mermaidToExcalidrawLib]); + }, [deferredText, mermaidToExcalidrawLib, arrowType]); useEffect( () => () => { @@ -123,6 +127,29 @@ const MermaidToExcalidraw = ({ icon: ArrowRightIcon, }} renderSubmitShortcut={() => } + renderBottomRight={() => ( +
+ { + setArrowType(value); + }} + choices={[ + { + value: "arrow", + label: roundArrowIcon, + ariaLabel: `${t("labels.arrowtype_round")}`, + }, + { + value: "elbow", + label: elbowArrowIcon, + ariaLabel: `${t("labels.arrowtype_elbowed")}`, + }, + ]} + /> +
+ )} > - - {!panelActionDisabled && - !onTextSubmitInProgess && - renderSubmitShortcut?.()} +
+ + {!panelActionDisabled && + !onTextSubmitInProgess && + renderSubmitShortcut?.()} +
{renderBottomRight?.()} diff --git a/packages/excalidraw/components/TTDDialog/common.ts b/packages/excalidraw/components/TTDDialog/common.ts index 2e59565cf..fd0631fa8 100644 --- a/packages/excalidraw/components/TTDDialog/common.ts +++ b/packages/excalidraw/components/TTDDialog/common.ts @@ -52,6 +52,7 @@ interface ConvertMermaidToExcalidrawFormatProps { elements: readonly NonDeletedExcalidrawElement[]; files: BinaryFiles | null; }>; + useElbow?: boolean; } export const convertMermaidToExcalidraw = async ({ @@ -60,6 +61,7 @@ export const convertMermaidToExcalidraw = async ({ mermaidDefinition, setError, data, + useElbow = false, }: ConvertMermaidToExcalidrawFormatProps) => { const canvasNode = canvasRef.current; const parent = canvasNode?.parentElement; @@ -90,6 +92,7 @@ export const convertMermaidToExcalidraw = async ({ data.current = { elements: convertToExcalidrawElements(elements, { regenerateIds: true, + useElbow, }), files, }; diff --git a/packages/excalidraw/data/transform.ts b/packages/excalidraw/data/transform.ts index fd0d3388f..4c8012e6b 100644 --- a/packages/excalidraw/data/transform.ts +++ b/packages/excalidraw/data/transform.ts @@ -507,7 +507,7 @@ class ElementStore { export const convertToExcalidrawElements = ( elementsSkeleton: ExcalidrawElementSkeleton[] | null, - opts?: { regenerateIds: boolean }, + opts?: { regenerateIds: boolean; useElbow?: boolean }, ) => { if (!elementsSkeleton) { return []; @@ -567,6 +567,7 @@ export const convertToExcalidrawElements = ( points: [pointFrom(0, 0), pointFrom(width, height)], ...element, type: "arrow", + elbowed: opts?.useElbow, }); Object.assign( diff --git a/packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap index 2943aeee7..6f7e2effd 100644 --- a/packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap +++ b/packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Test > should open mermaid popup when active too B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] - C -->|Three| F[Car]
Ctrl
Enter
" + C -->|Three| F[Car]
Ctrl
Enter
" `; exports[`Test > should show error in preview when mermaid library throws error 1`] = `