simpler types, tidy up code

packages/element/src/types.ts

@@ -419,3 +419,4 @@ export type ConvertibleLinearTypes =
   | "sharpArrow"
   | "curvedArrow"
   | "elbowArrow";
+export type ConvertibleTypes = ConvertibleGenericTypes | ConvertibleLinearTypes;

packages/excalidraw/actions/actionToggleShapeSwitch.tsx

@@ -1,7 +1,7 @@
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
 import {
-  getSwitchableTypeFromElements,
+  getSwitchCategoryFromElements,
   shapeSwitchAtom,
 } from "../components/ShapeSwitch";
 import { editorJotaiStore } from "../editor-jotai";
@@ -31,11 +31,6 @@ export const actionToggleShapeSwitch = register({
     };
   },
   checked: (appState) => appState.gridModeEnabled,
-  predicate: (elements, appState, props) => {
+  predicate: (elements, appState, props) =>
-    const { generic, linear } = getSwitchableTypeFromElements(
+    getSwitchCategoryFromElements(elements as ExcalidrawElement[]) !== null,
-      elements as ExcalidrawElement[],
-    );
-
-    return generic || linear;
-  },
 });

packages/excalidraw/components/App.tsx

@@ -468,7 +468,7 @@ import { LassoTrail } from "../lasso";
 import { EraserTrail } from "../eraser";
 
 import ShapeSwitch, {
-  getSwitchableTypeFromElements,
+  getSwitchCategoryFromElements,
   SHAPE_SWITCH_PANEL_CLASSNAME,
   shapeSwitchAtom,
   switchShapes,
@@ -4179,21 +4179,20 @@ class App extends React.Component<AppProps, AppState> {
         ) {
           event.preventDefault();
 
-          const { generic, linear } =
+          const switchCategory =
-            getSwitchableTypeFromElements(selectedElements);
+            getSwitchCategoryFromElements(selectedElements);
 
           if (editorJotaiStore.get(shapeSwitchAtom)?.type === "panel") {
             if (
               switchShapes(this, {
-                generic,
+                switchCategory,
-                linear,
                 direction: event.shiftKey ? "left" : "right",
               })
             ) {
               this.store.shouldCaptureIncrement();
             }
           }
-          if (generic || linear) {
+          if (switchCategory) {
             editorJotaiStore.set(shapeSwitchAtom, {
               type: "panel",
             });

packages/excalidraw/components/ShapeSwitch.tsx

@@ -5,6 +5,7 @@ import { updateElbowArrowPoints } from "@excalidraw/element/elbowArrow";
 import { pointFrom, pointRotateRads, type LocalPoint } from "@excalidraw/math";
 
 import {
+  isArrowBoundToElement,
   isArrowElement,
   isCurvedArrow,
   isElbowArrow,
@@ -44,6 +45,7 @@ import { ShapeCache } from "@excalidraw/element/ShapeCache";
 import type {
   ConvertibleGenericTypes,
   ConvertibleLinearTypes,
+  ConvertibleTypes,
   ExcalidrawArrowElement,
   ExcalidrawDiamondElement,
   ExcalidrawElbowArrowElement,
@@ -117,22 +119,21 @@ const ShapeSwitch = ({ app }: { app: App }) => {
     () => app.scene.getSelectedElements(app.state),
     [app.scene, app.state],
   );
-  const selectedElementsTypeRef = useRef<"generic" | "linear">(null);
+  const elementsCategoryRef = useRef<SwitchShapeCategory>(null);
 
   // close shape switch panel if selecting different "types" of elements
   useEffect(() => {
-    const { generic, linear } = getSwitchableTypeFromElements(selectedElements);
+    const switchCategory = getSwitchCategoryFromElements(selectedElements);
-    const type = generic ? "generic" : linear ? "linear" : null;
 
-    if (type && !selectedElementsTypeRef.current) {
+    if (switchCategory && !elementsCategoryRef.current) {
-      selectedElementsTypeRef.current = type;
+      elementsCategoryRef.current = switchCategory;
     } else if (
-      (selectedElementsTypeRef.current && !type) ||
+      (elementsCategoryRef.current && !switchCategory) ||
-      (selectedElementsTypeRef.current &&
+      (elementsCategoryRef.current &&
-        type !== selectedElementsTypeRef.current)
+        switchCategory !== elementsCategoryRef.current)
     ) {
       setShapeSwitch(null);
-      selectedElementsTypeRef.current = null;
+      elementsCategoryRef.current = null;
     }
   }, [selectedElements, app.state.selectedElementIds, setShapeSwitch]);
 
@@ -158,7 +159,9 @@ const Panel = ({
   app: App;
   elements: ExcalidrawElement[];
 }) => {
-  const { generic, linear } = getSwitchableTypeFromElements(elements);
+  const switchCategory = getSwitchCategoryFromElements(elements);
+  const generic = switchCategory === "generic";
+  const linear = switchCategory === "linear";
 
   const genericElements = useMemo(() => {
     return generic ? getGenericSwitchableElements(elements) : [];
@@ -325,8 +328,7 @@ const Panel = ({
                 trackEvent("shape-switch", type, "ui");
               }
               switchShapes(app, {
-                generic,
+                switchCategory,
-                linear,
                 nextType: type as
                   | ConvertibleGenericTypes
                   | ConvertibleLinearTypes,
@@ -386,21 +388,21 @@ export const adjustBoundTextSize = (
   redrawTextBoundingBox(boundText, container, scene);
 };
 
+type SwitchShapeCategory = "generic" | "linear" | null;
+
 export const switchShapes = (
   app: App,
   {
-    generic,
+    switchCategory,
-    linear,
     nextType,
     direction = "right",
   }: {
-    generic?: boolean;
+    switchCategory: SwitchShapeCategory;
-    linear?: boolean;
+    nextType?: ConvertibleTypes;
-    nextType?: ConvertibleGenericTypes | ConvertibleLinearTypes;
     direction?: "left" | "right";
-  } = {},
+  },
 ): boolean => {
-  if (!generic && !linear) {
+  if (!switchCategory) {
     return false;
   }
 
@@ -413,7 +415,7 @@ export const switchShapes = (
 
   const advancement = direction === "right" ? 1 : -1;
 
-  if (generic) {
+  if (switchCategory === "generic") {
     const selectedGenericSwitchableElements =
       getGenericSwitchableElements(selectedElements);
 
@@ -490,7 +492,7 @@ export const switchShapes = (
     }
   }
 
-  if (linear) {
+  if (switchCategory === "linear") {
     const selectedLinearSwitchableElements = getLinearSwitchableElements(
       selectedElements,
     ) as ExcalidrawLinearElement[];
@@ -634,77 +636,47 @@ export const switchShapes = (
   return true;
 };
 
-export const getSwitchableTypeFromElements = (
+export const getSwitchCategoryFromElements = (
   elements: ExcalidrawElement[],
-):
+): SwitchShapeCategory => {
-  | {
-      generic: true;
-      linear: false;
-    }
-  | {
-      linear: true;
-      generic: false;
-    }
-  | {
-      generic: false;
-      linear: false;
-    } => {
   if (elements.length === 0) {
-    return {
+    return null;
-      generic: false,
-      linear: false,
-    };
   }
 
   let onlyLinear = true;
+  let canBeLinear = false;
   for (const element of elements) {
     if (
       element.type === "rectangle" ||
       element.type === "ellipse" ||
       element.type === "diamond"
     ) {
-      return {
+      return "generic";
-        generic: true,
-        linear: false,
-      };
     }
     if (element.type !== "arrow" && element.type !== "line") {
       onlyLinear = false;
+      canBeLinear = false;
     }
-  }
 
-  if (onlyLinear) {
+    if (onlyLinear) {
-    // check at least some linear element is switchable
+      if (isLinearElement(element) && isLinearElementElligible(element)) {
-    // for a linear to be swtichable:
+        canBeLinear = true;
-    // - no labels
-    // - not bound to anything
-
-    let linear = true;
-
-    for (const element of elements) {
-      if (
-        isArrowElement(element) &&
-        (element.startBinding !== null || element.endBinding !== null)
-      ) {
-        linear = false;
-      } else if (element.boundElements && element.boundElements.length > 0) {
-        linear = false;
-      } else {
-        linear = true;
-        break;
       }
     }
-
-    return {
-      linear,
-      generic: false,
-    };
   }
 
-  return {
+  if (canBeLinear) {
-    generic: false,
+    return "linear";
-    linear: false,
+  }
-  };
+
+  return null;
+};
+
+const isLinearElementElligible = (linear: ExcalidrawLinearElement) => {
+  return (
+    !(isArrowElement(linear) && isArrowBoundToElement(linear)) &&
+    !(linear.boundElements && linear.boundElements.length > 0)
+  );
 };
 
 const getArrowType = (element: ExcalidrawLinearElement) => {
@@ -795,13 +767,7 @@ const getGenericSwitchableElements = (elements: ExcalidrawElement[]) =>
 
 const getLinearSwitchableElements = (elements: ExcalidrawElement[]) =>
   elements.filter(
-    (element) =>
+    (element) => isLinearElement(element) && isLinearElementElligible(element),
-      isLinearElement(element) &&
-      !(
-        isArrowElement(element) &&
-        (element.startBinding !== null || element.endBinding !== null)
-      ) &&
-      (!element.boundElements || element.boundElements.length === 0),
   ) as ExcalidrawLinearElement[];
 
 const THRESHOLD = 20;
@@ -935,8 +901,6 @@ const CONVERTIBLE_LINEAR_TYPES: readonly ConvertibleLinearTypes[] = [
   "elbowArrow",
 ];
 
-type ConvertibleType = ConvertibleGenericTypes | ConvertibleLinearTypes;
-
 const isConvertibleGenericType = (
   elementType: string,
 ): elementType is ConvertibleGenericTypes =>
@@ -962,7 +926,7 @@ export const convertElementType = <
   TElement extends Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
 >(
   element: TElement,
-  newType: ConvertibleType,
+  newType: ConvertibleTypes,
   app: AppClassProperties,
 ): ExcalidrawElement => {
   if (!isValidConversion(element.type, newType)) {
@@ -1071,8 +1035,8 @@ export const convertElementType = <
 
 const isValidConversion = (
   startType: string,
-  targetType: ConvertibleType,
+  targetType: ConvertibleTypes,
-): startType is ConvertibleType => {
+): startType is ConvertibleTypes => {
   if (
     isConvertibleGenericType(startType) &&
     isConvertibleGenericType(targetType)