feat: add toggle to use elbow

2025-09-16 22:10:48 +02:00 · 2025-05-16 16:38:58 +10:00
parent 6c0ff7fc5c
commit 2a50000ec8
8 changed files with 77 additions and 19 deletions
--- 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 {
--- 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;
+      }
+    }
  }
 }
--- 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<Error | null>(null);
+  const [arrowType, setArrowType] = useState<"arrow" | "elbow">("arrow");

  const canvasRef = useRef<HTMLDivElement>(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={() => <TTDDialogSubmitShortcut />}
+          renderBottomRight={() => (
+            <div className="dialog-mermaid-arrow-type">
+              <RadioGroup
+                name={"mermaid arrow config"}
+                value={arrowType}
+                onChange={(value: "arrow" | "elbow") => {
+                  setArrowType(value);
+                }}
+                choices={[
+                  {
+                    value: "arrow",
+                    label: roundArrowIcon,
+                    ariaLabel: `${t("labels.arrowtype_round")}`,
+                  },
+                  {
+                    value: "elbow",
+                    label: elbowArrowIcon,
+                    ariaLabel: `${t("labels.arrowtype_elbowed")}`,
+                  },
+                ]}
+              />
+            </div>
+          )}
        >
          <TTDDialogOutput
            canvasRef={canvasRef}
--- a/packages/excalidraw/components/TTDDialog/TTDDialog.scss
+++ b/packages/excalidraw/components/TTDDialog/TTDDialog.scss
@@ -234,6 +234,11 @@ $verticalBreakpoint: 861px;
    }
  }

+  .ttd-dialog-panel-button-container-left {
+    display: flex;
+    align-items: center;
+  }
+
  .ttd-dialog-panel-button {
    &.excalidraw-button {
      font-family: inherit;
--- a/packages/excalidraw/components/TTDDialog/TTDDialogPanel.tsx
+++ b/packages/excalidraw/components/TTDDialog/TTDDialogPanel.tsx
@@ -42,22 +42,28 @@ export const TTDDialogPanel = ({
        className={clsx("ttd-dialog-panel-button-container", {
          invisible: !panelAction,
        })}
-        style={{ display: "flex", alignItems: "center" }}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
      >
-        <Button
-          className="ttd-dialog-panel-button"
-          onSelect={panelAction ? panelAction.action : () => {}}
-          disabled={panelActionDisabled || onTextSubmitInProgess}
-        >
-          <div className={clsx({ invisible: onTextSubmitInProgess })}>
-            {panelAction?.label}
-            {panelAction?.icon && <span>{panelAction.icon}</span>}
-          </div>
-          {onTextSubmitInProgess && <Spinner />}
-        </Button>
-        {!panelActionDisabled &&
-          !onTextSubmitInProgess &&
-          renderSubmitShortcut?.()}
+        <div className="ttd-dialog-panel-button-container-left">
+          <Button
+            className="ttd-dialog-panel-button"
+            onSelect={panelAction ? panelAction.action : () => {}}
+            disabled={panelActionDisabled || onTextSubmitInProgess}
+          >
+            <div className={clsx({ invisible: onTextSubmitInProgess })}>
+              {panelAction?.label}
+              {panelAction?.icon && <span>{panelAction.icon}</span>}
+            </div>
+            {onTextSubmitInProgess && <Spinner />}
+          </Button>
+          {!panelActionDisabled &&
+            !onTextSubmitInProgess &&
+            renderSubmitShortcut?.()}
+        </div>
        {renderBottomRight?.()}
      </div>
    </div>
--- 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,
    };
--- 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(
--- a/packages/excalidraw/tests/snapshots/MermaidToExcalidraw.test.tsx.snap
+++ b/packages/excalidraw/tests/snapshots/MermaidToExcalidraw.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Test <MermaidToExcalidraw/> > should open mermaid popup when active too
 B --&gt; C{Let me think}
 C --&gt;|One| D[Laptop]
 C --&gt;|Two| E[iPhone]
- C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="89" height="158" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
+ C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center; justify-content: space-between;"><div class="ttd-dialog-panel-button-container-left"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="89" height="158" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center; justify-content: space-between;"><div class="ttd-dialog-panel-button-container-left"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div><div class="dialog-mermaid-arrow-type"><div class="RadioGroup"><div class="RadioGroup__choice active" title="Curved arrow"><input aria-label="Curved arrow" type="radio" checked="" name="mermaid arrow config"><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g><path d="M16,12L20,9L16,6"></path><path d="M6 20c0 -6.075 4.925 -11 11 -11h3"></path></g></svg></div><div class="RadioGroup__choice" title="Elbow arrow"><input aria-label="Elbow arrow" type="radio" name="mermaid arrow config"><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" class="" fill="none" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4,19L10,19C11.097,19 12,18.097 12,17L12,9C12,7.903 12.903,7 14,7L21,7"></path><path d="M18 4l3 3l-3 3"></path></g></svg></div></div></div></div></div></div></div></div></div></div></div></div>"
 `;

 exports[`Test <MermaidToExcalidraw/> > should show error in preview when mermaid library throws error 1`] = `