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 (
+
+ );
},
});
@@ -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",