diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index e004159d1..6a1215e2a 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -4763,11 +4763,6 @@ class App extends React.Component { canvasOffsets: this.getEditorUIOffsets(), }); } - - editorJotaiStore.set(shapeSwitchAtom, { - type: "hint", - id: firstNode.id, - }); } this.flowChartCreator.clear(); diff --git a/packages/excalidraw/components/ShapeSwitch.tsx b/packages/excalidraw/components/ShapeSwitch.tsx index 938195d48..dbfbc0067 100644 --- a/packages/excalidraw/components/ShapeSwitch.tsx +++ b/packages/excalidraw/components/ShapeSwitch.tsx @@ -1,7 +1,5 @@ import { type ReactNode, useEffect, useMemo, useRef } from "react"; -import clsx from "clsx"; - import { pointFrom, pointRotateRads } from "@excalidraw/math"; import { @@ -38,7 +36,6 @@ import type { } from "@excalidraw/element/types"; import { mutateElement, ROUNDNESS, sceneCoordsToViewportCoords } from ".."; -import { t } from "../i18n"; import { getSelectedElements } from "../scene"; import { trackEvent } from "../analytics"; import { atom, editorJotaiStore, useAtom } from "../editor-jotai"; @@ -62,16 +59,10 @@ export const GENERIC_SWITCHABLE_SHAPES = ["rectangle", "diamond", "ellipse"]; export const LINEAR_SWITCHABLE_SHAPES = ["line", "arrow"]; -export const shapeSwitchAtom = atom< - | { - type: "hint"; - id: string; - } - | { - type: "panel"; - } - | null ->(null); +export const shapeSwitchAtom = atom<{ + type: "panel"; +} | null>(null); + export const shapeSwitchFontSizeAtom = atom<{ [id: string]: { fontSize: number; @@ -112,103 +103,12 @@ const ShapeSwitch = ({ app }: { app: App }) => { return null; } - // clear if hint target no longer matches - if ( - shapeSwitch.type === "hint" && - selectedElements[0]?.id !== shapeSwitch.id - ) { - setShapeSwitch(null); - return null; - } - if (selectedElements.length === 0) { setShapeSwitch(null); return null; } - const props = { app, elements: selectedElements }; - - switch (shapeSwitch.type) { - case "hint": - return ; - case "panel": - return ; - default: - return null; - } -}; - -const Hint = ({ - app, - elements, -}: { - app: App; - elements: ExcalidrawElement[]; -}) => { - const [, setShapeSwitch] = useAtom(shapeSwitchAtom); - const hintRef = useRef(null); - - useEffect(() => { - const hint = hintRef.current; - if (!hint) { - return; - } - - const handleAnimationEnd = () => { - hint.classList.remove("animation"); - setShapeSwitch(null); - }; - - hint.addEventListener("animationend", handleAnimationEnd, { once: true }); - - return () => { - hint.removeEventListener("animationend", handleAnimationEnd); - }; - }, [setShapeSwitch]); - - const [x1, y1, , , cx, cy] = getElementAbsoluteCoords( - elements[0], - app.scene.getNonDeletedElementsMap(), - ); - - const rotatedTopLeft = pointRotateRads( - pointFrom(x1, y1), - pointFrom(cx, cy), - elements[0].angle, - ); - - const { x, y } = sceneCoordsToViewportCoords( - { - sceneX: rotatedTopLeft[0], - sceneY: rotatedTopLeft[1], - }, - app.state, - ); - - return ( -
-
/
-
{t("labels.tab")}
-
- ); + return ; }; const Panel = ({