diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx index c5e6f61613..d9a39330f5 100644 --- a/packages/excalidraw/actions/actionProperties.tsx +++ b/packages/excalidraw/actions/actionProperties.tsx @@ -128,6 +128,8 @@ import { ArrowheadCrowfootIcon, ArrowheadCrowfootOneIcon, ArrowheadCrowfootOneOrManyIcon, + strokeWidthFixedIcon, + strokeWidthVariableIcon, } from "../components/icons"; import { Fonts } from "../fonts"; @@ -671,8 +673,8 @@ export const actionChangeStrokeStyle = register({ }); export const actionChangePressureSensitivity = register({ - name: "changePressureSensitivity", - label: "labels.pressureSensitivity", + name: "changeStrokeType", + label: "labels.strokeType", trackEvent: false, perform: (elements, appState, value) => { return { @@ -686,7 +688,47 @@ export const actionChangePressureSensitivity = register({ return null; } - return ; + const selectedElements = app.scene.getSelectedElements(app.state); + const firstElement = selectedElements.find(isFreeDrawElement); + const commonPressureSensitivity = selectedElements + .filter(isFreeDrawElement) + .reduce((acc, element) => { + const sensitivity = element.pressureSensitivity ?? 1; + if (acc !== null && acc !== sensitivity) { + return null; // No common value + } + return sensitivity; + }, firstElement?.pressureSensitivity ?? null); + + const currentValue = + commonPressureSensitivity ?? appState.currentItemPressureSensitivity; + + return ( +
+ {t("labels.strokeType")} +
+ updateData(value)} + /> +
+
+ ); }, }); @@ -1878,78 +1920,3 @@ export const actionChangeArrowType = register({ ); }, }); - -const PressureSensitivityRange = ({ - updateData, - app, -}: { - updateData: (value: number) => void; - app: AppClassProperties; -}) => { - const rangeRef = useRef(null); - const valueRef = useRef(null); - const selectedElements = app.scene.getSelectedElements(app.state); - - let hasCommonPressureSensitivity = true; - const firstElement = selectedElements.find(isFreeDrawElement); - const leastCommonPressureSensitivity = selectedElements - .filter(isFreeDrawElement) - .reduce((acc, element) => { - const sensitivity = element.pressureSensitivity ?? 1; - if (acc != null && acc !== sensitivity) { - hasCommonPressureSensitivity = false; - } - if (acc == null || acc > sensitivity) { - return sensitivity; - } - return acc; - }, firstElement?.pressureSensitivity ?? null); - - const value = Math.round( - (leastCommonPressureSensitivity ?? - app.state.currentItemPressureSensitivity) * 100, - ); - - useEffect(() => { - if (rangeRef.current && valueRef.current) { - const rangeElement = rangeRef.current; - const valueElement = valueRef.current; - const inputWidth = rangeElement.offsetWidth; - const thumbWidth = 15; - const position = - (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2; - valueElement.style.left = `${position}px`; - rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`; - } - }, [value]); - - return ( - - ); -}; diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts index adfc8cefa1..2675fd6356 100644 --- a/packages/excalidraw/actions/types.ts +++ b/packages/excalidraw/actions/types.ts @@ -69,7 +69,7 @@ export type ActionName = | "changeStrokeStyle" | "changeArrowhead" | "changeArrowType" - | "changePressureSensitivity" + | "changeStrokeType" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx index 5b3015a4bd..bec743ea7d 100644 --- a/packages/excalidraw/components/Actions.tsx +++ b/packages/excalidraw/components/Actions.tsx @@ -172,7 +172,7 @@ export const SelectedShapeActions = ({ targetElements.some((element) => element.type === "freedraw")) && ( <> {renderAction("changeStrokeShape")} - {renderAction("changePressureSensitivity")} + {renderAction("changeStrokeType")} )} diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx index 29bdc6d3c7..90ffb339ed 100644 --- a/packages/excalidraw/components/icons.tsx +++ b/packages/excalidraw/components/icons.tsx @@ -2269,3 +2269,71 @@ export const elementLinkIcon = createIcon( , tablerIconProps, ); + +export const strokeWidthFixedIcon = createIcon( + + + + + + , + tablerIconProps, +); + +export const strokeWidthVariableIcon = createIcon( + + + + + + , + tablerIconProps, +); diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index d9904838fc..db01d26ed6 100644 --- a/packages/excalidraw/locales/en.json +++ b/packages/excalidraw/locales/en.json @@ -32,7 +32,9 @@ "strokeStyle_dotted": "Dotted", "sloppiness": "Sloppiness", "opacity": "Opacity", - "pressureSensitivity": "Stroke sensitivity", + "strokeType": "Stroke Type", + "strokeWidthFixed": "Fixed width", + "strokeWidthVariable": "Variable width", "textAlign": "Text align", "edges": "Edges", "sharp": "Sharp",