From 56a0b33101457afa26bcd7f71df0e97d5a9f6f53 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Fri, 14 Mar 2025 21:49:36 +1100
Subject: [PATCH] style tweaks

---
 packages/excalidraw/components/App.tsx        | 55 ++++++++++---------
 .../excalidraw/components/ShapeSwitch.scss    |  2 +-
 .../excalidraw/components/ShapeSwitch.tsx     | 49 ++++++++++++-----
 3 files changed, 65 insertions(+), 41 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 08b201886..1107ae631 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -4103,13 +4103,15 @@ class App extends React.Component<AppProps, AppState> {
           return;
         }
 
+        const firstElement = selectedElements[0];
+        const isGenericSwitchable =
+          firstElement && isGenericSwitchableElement(firstElement);
+        const isLinearSwitchable =
+          firstElement && isLinearSwitchableElement(firstElement);
+
         if (
           selectedElements.length === 1 &&
-          (selectedElements[0].type === "rectangle" ||
-            selectedElements[0].type === "diamond" ||
-            selectedElements[0].type === "ellipse" ||
-            selectedElements[0].type === "arrow" ||
-            selectedElements[0].type === "line")
+          (isGenericSwitchable || isLinearSwitchable)
         ) {
           if (this.state.showShapeSwitchPanel && event.key === KEYS.ESCAPE) {
             this.setState({
@@ -4121,28 +4123,29 @@ class App extends React.Component<AppProps, AppState> {
 
           if (event.key === KEYS.SLASH || event.key === KEYS.TAB) {
             if (!this.state.showShapeSwitchPanel) {
-              this.setState({
-                showShapeSwitchPanel: true,
-              });
-            } else if (
-              selectedElements[0].type === "rectangle" ||
-              selectedElements[0].type === "diamond" ||
-              selectedElements[0].type === "ellipse"
-            ) {
-              const index = ["rectangle", "diamond", "ellipse"].indexOf(
-                selectedElements[0].type,
+              flushSync(() =>
+                this.setState({
+                  showShapeSwitchPanel: true,
+                }),
               );
-              const nextType = ["rectangle", "diamond", "ellipse"][
-                (index + 1) % 3
-              ] as ToolType;
-              this.setActiveTool({ type: nextType });
-            } else if (
-              selectedElements[0].type === "arrow" ||
-              selectedElements[0].type === "line"
-            ) {
-              const index = ["arrow", "line"].indexOf(selectedElements[0].type);
-              const nextType = ["arrow", "line"][(index + 1) % 2] as ToolType;
-              this.setActiveTool({ type: nextType });
+            }
+
+            if (this.state.showShapeSwitchPanel) {
+              if (isGenericSwitchable) {
+                const index = ["rectangle", "diamond", "ellipse"].indexOf(
+                  selectedElements[0].type,
+                );
+                const nextType = ["rectangle", "diamond", "ellipse"][
+                  (index + 1) % 3
+                ] as ToolType;
+                this.setActiveTool({ type: nextType });
+              } else if (isLinearSwitchable) {
+                const index = ["arrow", "line"].indexOf(
+                  selectedElements[0].type,
+                );
+                const nextType = ["arrow", "line"][(index + 1) % 2] as ToolType;
+                this.setActiveTool({ type: nextType });
+              }
             }
 
             return;
diff --git a/packages/excalidraw/components/ShapeSwitch.scss b/packages/excalidraw/components/ShapeSwitch.scss
index a43802008..a35ee4d18 100644
--- a/packages/excalidraw/components/ShapeSwitch.scss
+++ b/packages/excalidraw/components/ShapeSwitch.scss
@@ -15,7 +15,6 @@
     align-items: center;
     justify-content: center;
     opacity: 0;
-    background: var(--default-bg-color);
 
     .key {
       background: var(--color-primary-light);
@@ -43,5 +42,6 @@
     border-radius: 0.5rem;
     background: var(--default-bg-color);
     box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+    padding: 0.5rem;
   }
 }
diff --git a/packages/excalidraw/components/ShapeSwitch.tsx b/packages/excalidraw/components/ShapeSwitch.tsx
index 52305ff37..dd6343c7a 100644
--- a/packages/excalidraw/components/ShapeSwitch.tsx
+++ b/packages/excalidraw/components/ShapeSwitch.tsx
@@ -45,17 +45,38 @@ const ShapeSwitch = ({ app }: { app: App }) => {
     return app.setState({ showShapeSwitchPanel: false });
   }, [app]);
 
-  if (
-    firstElement &&
-    selectedElements.length === 1 &&
-    (isGenericSwitchableElement(firstElement) ||
-      isLinearSwitchableElement(firstElement))
-  ) {
-    return app.state.showShapeSwitchPanel ? (
-      <Panel app={app} element={firstElement} />
-    ) : (
-      <Hint app={app} element={firstElement} />
-    );
+  const isGeneric = firstElement && isGenericSwitchableElement(firstElement);
+  const isLinear = firstElement && isLinearSwitchableElement(firstElement);
+  const isGenericInChart =
+    isGeneric &&
+    app.scene
+      .getNonDeletedElements()
+      .some(
+        (el) =>
+          el.type === "arrow" &&
+          (el.startBinding?.elementId === firstElement.id ||
+            el.endBinding?.elementId === firstElement.id),
+      );
+  const isLinearInChart =
+    isLinear &&
+    isArrowElement(firstElement) &&
+    (firstElement.startBinding || firstElement.endBinding);
+
+  if (firstElement && selectedElements.length === 1) {
+    if (isGeneric) {
+      return app.state.showShapeSwitchPanel ? (
+        <Panel app={app} element={firstElement} />
+      ) : isGenericInChart ? (
+        <Hint app={app} element={firstElement} />
+      ) : null;
+    }
+    if (isLinear) {
+      return app.state.showShapeSwitchPanel ? (
+        <Panel app={app} element={firstElement} />
+      ) : isLinearInChart ? (
+        <Hint app={app} element={firstElement} />
+      ) : null;
+    }
   }
 
   return null;
@@ -155,7 +176,7 @@ const Panel = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
       style={{
         position: "absolute",
         top: `${
-          y + GAP_VERTICAL * app.state.zoom.value - app.state.offsetTop
+          y + (GAP_VERTICAL + 8) * app.state.zoom.value - app.state.offsetTop
         }px`,
         left: `${x - app.state.offsetLeft - GAP_HORIZONTAL}px`,
         zIndex: 2,
@@ -175,11 +196,11 @@ const Panel = ({ app, element }: { app: App; element: ExcalidrawElement }) => {
         return (
           <ToolButton
             className="Shape"
-            key={type}
+            key={`${element.version}_${type}`}
             type="radio"
             icon={icon}
             checked={isSelected}
-            name="editor-current-shape"
+            name="shape-switch-option"
             title={type}
             keyBindingLabel={""}
             aria-label={type}