diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index 03aa79cbfd..318d671e90 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -1,3 +1,5 @@ +import clsx from "clsx"; + import { pointFrom } from "@excalidraw/math"; import { useEffect, useMemo, useRef, useState } from "react"; @@ -2063,44 +2065,70 @@ export const actionChangeStrokeShape = register({ captureUpdate: CaptureUpdateAction.IMMEDIATELY, }; }, - PanelComponent: ({ elements, appState, updateData, app }) => ( -
- {t("labels.strokeShape")} -
- { - if (isFreeDrawElement(element)) { - return element.simulatePressure; - } - return null; - }, - (element) => isFreeDrawElement(element), - (hasSelection) => - hasSelection - ? null - : appState.currentItemFreedrawConstantPressure, - )} - onChange={(value) => updateData(value)} - /> -
-
- ), + PanelComponent: ({ elements, appState, updateData, app }) => { + const { isCompact } = getStylesPanelInfo(app); + + const currentValue = getFormValue( + elements, + app, + (element) => { + if (isFreeDrawElement(element)) { + return element.simulatePressure; + } + return null; + }, + (element) => isFreeDrawElement(element), + (hasSelection) => + hasSelection ? null : appState.currentItemFreedrawConstantPressure, + ); + + if (isCompact) { + const isConstantPressure = currentValue !== false; + return ( + + ); + } + + return ( +
+ {t("labels.strokeShape")} +
+ updateData(value)} + /> +
+
+ ); + }, }); diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx index be065d826d..77fd63792c 100644 --- a/packages/excalidraw/components/Actions.tsx +++ b/packages/excalidraw/components/Actions.tsx @@ -834,6 +834,14 @@ export const CompactShapeActions = ({ container={container} /> + {/* Stroke Shape Toggle (freedraw only) */} + {(appState.activeTool.type === "freedraw" || + targetElements.some((element) => element.type === "freedraw")) && ( +
+ {renderAction("changeStrokeShape")} +
+ )} + + {/* Stroke Shape Toggle (freedraw only) */} + {(appState.activeTool.type === "freedraw" || + targetElements.some((element) => element.type === "freedraw")) && ( +
+ {renderAction("changeStrokeShape")} +
+ )} {/* Combined Arrow Properties */}