From 9215b2043dad864baad7742171d9b101c2b0c90e Mon Sep 17 00:00:00 2001 From: Ryan Di Date: Thu, 25 Sep 2025 18:31:51 +1000 Subject: [PATCH] fix preferred tool --- packages/excalidraw/appState.ts | 3 +- packages/excalidraw/components/Actions.tsx | 28 ++++++++-------- packages/excalidraw/components/App.tsx | 3 +- packages/excalidraw/components/LayerUI.tsx | 2 +- packages/excalidraw/components/MobileMenu.tsx | 2 +- .../excalidraw/components/MobileToolBar.tsx | 33 +++++++++---------- .../excalidraw/components/ToolPopover.tsx | 3 +- 7 files changed, 36 insertions(+), 38 deletions(-) diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts index eb9a3dc443..e16b01e769 100644 --- a/packages/excalidraw/appState.ts +++ b/packages/excalidraw/appState.ts @@ -11,7 +11,6 @@ import { THEME, DEFAULT_GRID_STEP, isTestEnv, - isMobileOrTablet, } from "@excalidraw/common"; import type { AppState, NormalizedZoomValue } from "./types"; @@ -56,7 +55,7 @@ export const getDefaultAppState = (): Omit< fromSelection: false, lastActiveTool: null, }, - preferredSelectionTool: isMobileOrTablet() ? "lasso" : "selection", + preferredSelectionTool: "selection", penMode: false, penDetected: false, errorMessage: null, diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx index 4d06e17ce9..8464cde9af 100644 --- a/packages/excalidraw/components/Actions.tsx +++ b/packages/excalidraw/components/Actions.tsx @@ -1034,12 +1034,12 @@ export const MobileShapeActions = ({ export const ShapesSwitcher = ({ activeTool, - appState, + setAppState, app, UIOptions, }: { activeTool: UIAppState["activeTool"]; - appState: UIAppState; + setAppState: React.Component["setState"]; app: AppClassProperties; UIOptions: AppProps["UIOptions"]; }) => { @@ -1061,7 +1061,9 @@ export const ShapesSwitcher = ({ const frameToolSelected = activeTool.type === "frame"; const laserToolSelected = activeTool.type === "laser"; const lassoToolSelected = - activeTool.type === "lasso" && app.state.preferredSelectionTool !== "lasso"; + app.state.stylesPanelMode === "full" && + activeTool.type === "lasso" && + app.state.preferredSelectionTool !== "lasso"; const embeddableToolSelected = activeTool.type === "embeddable"; @@ -1092,14 +1094,14 @@ export const ShapesSwitcher = ({ // use a ToolPopover for selection/lasso toggle as well if ( (value === "selection" || value === "lasso") && - appState.stylesPanelMode === "compact" + app.state.stylesPanelMode === "compact" ) { return ( { if (type === "selection" || type === "lasso") { app.setActiveTool({ type }); - app.state.preferredSelectionTool = type as any; + setAppState({ + preferredSelectionTool: type, + }); } }} displayedOption={ @@ -1115,9 +1119,7 @@ export const ShapesSwitcher = ({ (tool) => tool.type === app.state.preferredSelectionTool, ) || SELECTION_TOOLS[0] } - isActive={ - activeTool.type === "selection" || activeTool.type === "lasso" - } + fillable={activeTool.type === "selection"} /> ); } @@ -1136,12 +1138,12 @@ export const ShapesSwitcher = ({ aria-keyshortcuts={shortcut} data-testid={`toolbar-${value}`} onPointerDown={({ pointerType }) => { - if (!appState.penDetected && pointerType === "pen") { + if (!app.state.penDetected && pointerType === "pen") { app.togglePenMode(true); } if (value === "selection") { - if (appState.activeTool.type === "selection") { + if (app.state.activeTool.type === "selection") { app.setActiveTool({ type: "lasso" }); } else { app.setActiveTool({ type: "selection" }); @@ -1149,7 +1151,7 @@ export const ShapesSwitcher = ({ } }} onChange={({ pointerType }) => { - if (appState.activeTool.type !== value) { + if (app.state.activeTool.type !== value) { trackEvent("toolbar", value, "ui"); } if (value === "image") { @@ -1222,7 +1224,7 @@ export const ShapesSwitcher = ({ > {t("toolBar.laser")} - {appState.stylesPanelMode === "full" && ( + {app.state.stylesPanelMode === "full" && ( app.setActiveTool({ type: "lasso" })} icon={LassoIcon} diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index f09004f28d..cf116b8c4b 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -2375,12 +2375,13 @@ class App extends React.Component { activeTool.type === "selection" ? { ...activeTool, - type: this.state.preferredSelectionTool, + type: scene.appState.preferredSelectionTool, } : scene.appState.activeTool, isLoading: false, toast: this.state.toast, }; + if (initialData?.scrollToContent) { scene.appState = { ...scene.appState, diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index a9630bad1c..4fd6f6d269 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -368,7 +368,7 @@ const LayerUI = ({ /> { return ( ); }; diff --git a/packages/excalidraw/components/MobileToolBar.tsx b/packages/excalidraw/components/MobileToolBar.tsx index 6fce3681cc..7ff58815ec 100644 --- a/packages/excalidraw/components/MobileToolBar.tsx +++ b/packages/excalidraw/components/MobileToolBar.tsx @@ -82,17 +82,17 @@ const LINEAR_ELEMENT_TOOLS = [ ] as const; type MobileToolBarProps = { - appState: UIAppState; app: AppClassProperties; onHandToolToggle: () => void; + setAppState: React.Component["setState"]; }; export const MobileToolBar = ({ - appState, app, onHandToolToggle, + setAppState, }: MobileToolBarProps) => { - const activeTool = appState.activeTool; + const activeTool = app.state.activeTool; const [isOtherShapesMenuOpen, setIsOtherShapesMenuOpen] = useState(false); const [lastActiveGenericShape, setLastActiveGenericShape] = useState< "rectangle" | "diamond" | "ellipse" @@ -128,12 +128,12 @@ export const MobileToolBar = ({ const { TTDDialogTriggerTunnel } = useTunnels(); const handleToolChange = (toolType: string, pointerType?: string) => { - if (appState.activeTool.type !== toolType) { + if (app.state.activeTool.type !== toolType) { trackEvent("toolbar", toolType, "ui"); } if (toolType === "selection") { - if (appState.activeTool.type === "selection") { + if (app.state.activeTool.type === "selection") { // Toggle selection tool behavior if needed } else { app.setActiveTool({ type: "selection" }); @@ -172,17 +172,17 @@ export const MobileToolBar = ({ } return true; }); - const extraToolSelected = extraTools.includes(appState.activeTool.type); + const extraToolSelected = extraTools.includes(activeTool.type); const extraIcon = extraToolSelected - ? appState.activeTool.type === "frame" + ? activeTool.type === "frame" ? frameToolIcon - : appState.activeTool.type === "embeddable" + : activeTool.type === "embeddable" ? EmbedIcon - : appState.activeTool.type === "laser" + : activeTool.type === "laser" ? laserPointerToolIcon - : appState.activeTool.type === "text" + : activeTool.type === "text" ? TextIcon - : appState.activeTool.type === "magicframe" + : activeTool.type === "magicframe" ? MagicIcon : extraToolsIcon : extraToolsIcon; @@ -191,7 +191,7 @@ export const MobileToolBar = ({
{/* Hand Tool */} { if (type === "selection" || type === "lasso") { app.setActiveTool({ type }); - app.state.preferredSelectionTool = type; + setAppState({ + preferredSelectionTool: type, + }); } }} displayedOption={ @@ -217,9 +219,6 @@ export const MobileToolBar = ({ (tool) => tool.type === app.state.preferredSelectionTool, ) || SELECTION_TOOLS[0] } - isActive={ - activeTool.type === "selection" || activeTool.type === "lasso" - } /> {/* Free Draw */} @@ -285,7 +284,6 @@ export const MobileToolBar = ({ SHAPE_TOOLS.find((tool) => tool.type === lastActiveGenericShape) || SHAPE_TOOLS[0] } - isActive={["rectangle", "diamond", "ellipse"].includes(activeTool.type)} /> {/* Arrow/Line */} @@ -315,7 +313,6 @@ export const MobileToolBar = ({ (tool) => tool.type === lastActiveLinearElement, ) || LINEAR_ELEMENT_TOOLS[0] } - isActive={["arrow", "line"].includes(activeTool.type)} /> {/* Image */} diff --git a/packages/excalidraw/components/ToolPopover.tsx b/packages/excalidraw/components/ToolPopover.tsx index c8c58b7330..81d5726d5a 100644 --- a/packages/excalidraw/components/ToolPopover.tsx +++ b/packages/excalidraw/components/ToolPopover.tsx @@ -30,7 +30,6 @@ type ToolPopoverProps = { "data-testid": string; onToolChange: (type: string) => void; displayedOption: ToolOption; - isActive: boolean; fillable?: boolean; }; @@ -44,12 +43,12 @@ export const ToolPopover = ({ title, "data-testid": dataTestId, onToolChange, - isActive, displayedOption, fillable = false, }: ToolPopoverProps) => { const [isPopupOpen, setIsPopupOpen] = useState(false); const currentType = activeTool.type; + const isActive = displayedOption.type === currentType; const SIDE_OFFSET = 32 / 2 + 10; // if currentType is not in options, close popup